192 lines
4.3 KiB
Markdown
192 lines
4.3 KiB
Markdown
# 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 core + UI with styles included -->
|
|
<script src="https://unpkg.com/sigpro"></script>
|
|
<script src="https://unpkg.com/sigpro-ui"></script>
|
|
```
|
|
|
|
**That's it!** No additional CSS files, no configuration, no build step.
|
|
|
|
---
|
|
|
|
## 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 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()}`)
|
|
]);
|
|
};
|
|
|
|
$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 // Include time selection
|
|
});
|
|
```
|
|
|
|
### File upload with drag & drop
|
|
|
|
```javascript
|
|
import { Fileinput } from "sigpro-ui";
|
|
|
|
Fileinput({
|
|
max: 5, // Max size in MB
|
|
accept: "image/*",
|
|
onSelect: (files) => console.log(files)
|
|
});
|
|
```
|
|
|
|
---
|
|
|
|
## Styling Customization
|
|
|
|
SigPro UI comes with **Tailwind CSS v4 + daisyUI v5** pre-bundled. You can customize the theme by overriding CSS variables:
|
|
|
|
```css
|
|
/* Override default theme colors */
|
|
:root {
|
|
--color-primary: oklch(45% .24 277.023);
|
|
--color-secondary: oklch(65% .241 354.308);
|
|
--color-accent: oklch(77% .152 181.912);
|
|
}
|
|
|
|
/* Or use data attributes for dark/light mode */
|
|
[data-theme="dark"] {
|
|
--color-base-100: oklch(25.33% .016 252.42);
|
|
--color-primary: oklch(58% .233 277.117);
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## License
|
|
|
|
MIT © 2026 **SigPro Team**
|
|
*Engineered for speed, designed for clarity, built for the modern web.*
|