110 lines
3.2 KiB
Markdown
110 lines
3.2 KiB
Markdown
# 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.*
|