# 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 **zero external dependencies** - everything is included.

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
- **Self-Contained Styling**: Full CSS included - no external frameworks needed
- **Built on daisyUI v5**: Modern, utility-first styling 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 everything bundled

---

## Installation

### Via NPM

```bash
npm install sigpro-ui
```

### Via CDN (Browser)

```html
<!-- SigPro UI with styles included -->
<script src="https://unpkg.com/sigpro-ui"></script>
<link href="https://unpkg.com/sigpro-ui/css" rel="stylesheet">
```

**That's it!** No additional CSS files, no configuration, no build step. SigPro core is included internally.

---

## 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, Button, Modal, Input, Alert } from "sigpro-ui";
import "sigpro-ui/css";

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 "sigpro-ui";
import "sigpro-ui/css";

// All components (Button, Table, Input, Alert, etc.) are now globally available.
// No need to import anything else!

const myApp = () => Table({ items: [], columns: [] });
```

---

## Basic Example

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

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");
```

---

## What's Included?

### Core Functions (from SigPro)
- `$()` - Reactive signals
- `$watch()` - Watch reactive dependencies
- `$html()` - Create HTML elements with reactivity
- `$if()` - Conditional rendering
- `$for()` - List rendering
- `$router()` - Hash-based routing
- `$mount()` - Mount components to DOM

### UI Components
- `Button`, `Input`, `Select`, `Checkbox`, `Radio`
- `Modal`, `Alert`, `Toast`, `Tooltip`
- `Table`, `List`, `Badge`, `Stat`, `Timeline`
- `Tabs`, `Accordion`, `Dropdown`, `Drawer`
- `Datepicker`, `Colorpicker`, `Autocomplete`, `Rating`
- `Fileinput`, `Fab`, `Swap`, `Indicator`
- And 30+ more!

### Utilities
- `tt()` - i18n translation function (ES/EN)
- `Locale()` - Set global language

---

## Language Support

Built-in i18n with Spanish and English:

```javascript
import { tt, Locale } from "sigpro-ui";

// Change locale (default is 'es')
Locale('en');

// Use translations
const closeButton = Button({}, tt('close')());
```

---

## License

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