# SigPro UI (W.I.P.)

**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 leveraging the power of **Tailwind CSS v4** and **daisyUI v5**.

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.
* **DaisyUI v5 Integration**: Beautiful, semantic components out of the box.
* **Tree Shaking Ready**: Import only what you need.
* **Zero-Import Option**: Inject all components into the global scope with one command.
* **Lightweight**: Minimal footprint with a focus on performance.

---

## Prerequisites

To use SigPro UI, your project must include:

1.  **SigPro Core**: `npm install sigpro` (or via CDN).
2.  **Tailwind CSS v4**: For utility-first styling.
3.  **daisyUI v5**: The component engine for Tailwind.

---

## Installation

### Via Bun or NPM
```bash
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>
```

---

## Setup & Usage

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

### 1. Modular Approach (Tree Shaking)
Import only the components you need. This keeps your bundle small.

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

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

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

### 2. Global Approach (Zero-Import)
Inject all components and utilities into the `window` object. This makes all components available everywhere without manual imports.

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

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

// Now you can 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()}`)
  ]);
};
```

---

## Components Included

| Category | Components |
| :--- | :--- |
| **Form** | `Input`, `Select`, `Checkbox`, `Radio`, `Range`, `Datepicker`, `Colorpicker`, `Autocomplete`, `Rating` |
| **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` |

---

## License

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