sigpro-ui/Readme.md

# SigPro UI

**SigPro UI** is a lightweight, ultra-fast, and reactive component library built for the **SigPro** reactivity core. It provides a set of high-quality, accessible, and themeable UI components with **native daisyUI styling** out of the box.

Unlike heavy frameworks, SigPro UI focuses on a **"Zero-Build"** philosophy, allowing you to build complex reactive interfaces with a functional, declarative syntax that runs natively in the browser.

---

## Features

- **Signals-Based Reactivity**: Powered by SigPro for granular DOM updates
- **Native daisyUI Styling**: Beautiful, semantic components out of the box
- **CSS Framework Friendly**: Use Tailwind, UnoCSS, or any other library for grids and utilities
- **Tree Shaking Ready**: Import only what you need
- **Zero-Import Option**: Inject all components into the global scope with one command
- **Lightweight**: Minimal footprint, fully reactive

---

## Installation

### Via NPM / Bun

```bash
# Install SigPro core first
bun add sigpro
# or
npm install sigpro

# Install SigPro UI
bun add sigpro-ui
# or
npm install sigpro-ui
```

### Via CDN (Browser)

```html
<script src="https://unpkg.com/sigpro"></script>
<script src="https://unpkg.com/sigpro-ui"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/dist/full.css" rel="stylesheet">
```

---

## Styling Setup

SigPro UI components are **pre-styled with daisyUI v5** and work immediately after adding the daisyUI CSS:

```html
<!-- Add daisyUI CSS (required for default styles) -->
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/dist/full.css" rel="stylesheet">
```

### Want additional utilities?

You're free to add **Tailwind CSS**, **UnoCSS**, or any other CSS framework for:

- Grid systems (`grid`, `flex`, etc.)
- Spacing utilities (`p-4`, `m-2`, `gap-4`)
- Typography helpers (`text-center`, `font-bold`)
- Custom responsive behaviors

These will work **alongside** daisyUI without conflicts. Example:

```html
<!-- Add Tailwind for utilities (optional) -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Or UnoCSS -->
<script src="https://unpkg.com/unocss"></script>
```

> **Note**: Your components will inherit daisyUI styles by default. Tailwind/ UnoCSS only add extra utilities without overriding component styles.

---

## Usage

You can use SigPro UI in two ways: **Modular** (Recommended) or **Global** (Fastest for prototyping).

### 1. Modular Approach (Tree Shaking)

Import only the components you need:

```javascript
import { $, $mount } from "sigpro";
import { Button, Modal, Input, Alert } from "sigpro-ui";

const App = () => {
  const show = $(false);
  
  return Button(
    { 
      class: "btn-primary", 
      onclick: () => show(true) 
    }, 
    "Open Modal"
  );
};

$mount(App, "#app");
```

### 2. Global Approach (Zero-Import)

Inject all components into the `window` object:

```javascript
import SigproUI from "sigpro-ui";

// Injects Button, Table, Input, Alert, etc. into window
SigproUI.install(); 

// Now use them directly anywhere:
const myApp = () => Table({ items: [], columns: [] });
```

---

## Basic Example

```javascript
import { $ } from "sigpro";
import { Button, Toast, Div, H1 } from "sigpro-ui";

const App = () => {
  const count = $(0);

  return Div({ class: "p-10 flex flex-col gap-4" }, [
    H1({ class: "text-2xl font-bold" }, "Welcome to SigPro UI"),
    
    Button({ 
      class: "btn-primary", 
      onclick: () => {
        count(c => c + 1);
        Toast(`Count is now ${count()}`, "alert-success");
      }
    }, () => `Clicks: ${count()}`)
  ]);
};

$mount(App, "#app");
```

---

## Components Included

| Category | Components |
| :--- | :--- |
| **Form** | `Input`, `Select`, `Checkbox`, `Radio`, `Range`, `Datepicker`, `Colorpicker`, `Autocomplete`, `Rating`, `Fileinput` |
| **Data** | `Table`, `List`, `Stat`, `Timeline`, `Badge`, `Indicator` |
| **Layout** | `Navbar`, `Menu`, `Drawer`, `Fieldset`, `Stack`, `Tabs`, `Accordion` |
| **Feedback** | `Alert`, `Modal`, `Toast`, `Loading`, `Tooltip` |
| **Interaction** | `Button`, `Dropdown`, `Swap`, `Fab` |

---

## Component Examples

### Form with validation

```javascript
import { Input, Button } from "sigpro-ui";

const email = $("");

Input({
  type: "email",
  value: email,
  placeholder: "your@email.com",
  validate: (v) => !v.includes("@") ? "Invalid email" : null
});
```

### Datepicker with range

```javascript
import { Datepicker } from "sigpro-ui";

const dateRange = $(null);

Datepicker({ 
  range: true, 
  value: dateRange,
  hour: true
});
```

### File upload

```javascript
import { Fileinput } from "sigpro-ui";

Fileinput({
  max: 5,
  accept: "image/*",
  onSelect: (files) => console.log(files)
});
```

### Using with Tailwind utilities

```javascript
// daisyUI provides component styles, Tailwind adds spacing utilities
Div({ class: "grid grid-cols-2 gap-4 p-6" }, [
  Button({ class: "btn-primary col-span-1" }, "Save"),
  Button({ class: "btn-ghost col-span-1" }, "Cancel")
])
```

---

## License

MIT © 2026 **SigPro Team**  
*Engineered for speed, designed for clarity, built for the modern web.*