# SigPro UI (WIP)

**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"** or **"Zero-Import"** philosophy, allowing you to build complex reactive interfaces with a functional, declarative syntax that feels like JSX but 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.
* **No Compilation Needed**: Write standard JavaScript; no Babel or TSC required.
* **Lightweight**: Minimal footprint with a focus on performance.
* **Fully Extensible**: Easy to wrap and create custom reactive components.

---

## Prerequisites

To use SigPro UI, your project must include the following dependencies:

### 1. SigPro Core
The underlying reactivity engine. SigPro UI depends on `$`, `$watch`, `$html`, `$if`, and `$for` being available in the global scope or imported.

### 2. Tailwind CSS v4
Used for utility-first styling and the engine behind the component layouts.

### 3. daisyUI v5
The component plugin for Tailwind that provides the visual styles (buttons, modals, cards, etc.).

---

## Installation & Setup

### 1. Configure Tailwind & daisyUI
Ensure your `tailwind.config.js` (or CSS entry point in v4) is set up to include daisyUI v5.

```css
/* In your main CSS file (Tailwind v4 style) */
@import "tailwindcss";
@plugin "daisyui";
```

### 2. Include SigPro & SigPro UI
You can import the modules directly into your application:

```javascript
import { UI } from "./sigpro-ui.js";

// Initialize the UI library (sets global helpers like Div, Button, Table...)
// Supports 'en' or 'es' for internal i18n
UI("en");
```

---

## Basic Usage

SigPro UI turns standard HTML tags into PascalCase helpers and provides complex components like `Table`, `Modal`, and `Datepicker`.

```javascript
import { $, $mount } from "sigpro";

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

  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) 
    }, () => `Clicks: ${count()}`),

    Button({ 
      class: "btn-outline", 
      onclick: () => showModal(true) 
    }, "Open Modal"),

    Modal({ 
      open: showModal, 
      title: "Hello!" 
    }, "This is a reactive modal powered by SigPro.")
  ]);
};

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

---

## Components Included

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

---

## License

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