uploading docs, preview
This commit is contained in:
@@ -7,10 +7,10 @@
|
|||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<h1 class="text-7xl md:text-9xl font-black tracking-tighter mb-4 bg-clip-text text-transparent bg-linear-to-r from-secondary via-accent to-primary !text-center w-full">SigPro UI</h1>
|
<h1 class="text-7xl md:text-9xl font-black tracking-tighter mb-4 bg-clip-text text-transparent bg-linear-to-r from-secondary via-accent to-primary !text-center w-full">SigPro UI</h1>
|
||||||
<div class="text-2xl md:text-3xl font-bold text-base-content/90 mb-4 !text-center w-full">Reactive Design System</div>
|
<div class="text-2xl md:text-3xl font-bold text-base-content/90 mb-4 !text-center w-full">Reactive Design System for SigPro</div>
|
||||||
<div class="text-xl text-base-content/60 max-w-3xl mx-auto mb-10 leading-relaxed italic text-balance font-light !text-center w-full">"Atomic components for high-performance interfaces. Zero-boilerplate, pure Tailwind v4 elegance."</div>
|
<div class="text-xl text-base-content/60 max-w-3xl mx-auto mb-10 leading-relaxed italic text-balance font-light !text-center w-full">"Atomic components for high-performance interfaces. Zero-boilerplate, pure DaisyUI v5 elegance."</div>
|
||||||
<div class="flex flex-wrap justify-center gap-4 w-full">
|
<div class="flex flex-wrap justify-center gap-4 w-full">
|
||||||
<a href="#/docs" class="btn btn-secondary btn-lg shadow-xl shadow-secondary/20 group px-10 border-none text-secondary-content">View Components <span class="group-hover:translate-x-1 transition-transform inline-block">→</span></a>
|
<a href="#/install" class="btn btn-secondary btn-lg shadow-xl shadow-secondary/20 group px-10 border-none text-secondary-content">View Components <span class="group-hover:translate-x-1 transition-transform inline-block">→</span></a>
|
||||||
<button onclick="window.open('https://github.com/natxocc/sigpro-ui')" class="btn btn-outline btn-lg border-base-300 hover:bg-base-300 hover:text-base-content">GitHub</button>
|
<button onclick="window.open('https://github.com/natxocc/sigpro-ui')" class="btn btn-outline btn-lg border-base-300 hover:bg-base-300 hover:text-base-content">GitHub</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -102,15 +102,19 @@ The visual DNA. All components are mapped to daisyUI v5 semantic classes, provid
|
|||||||
|
|
||||||
-----
|
-----
|
||||||
|
|
||||||
\<div class="bg-base-200/50 rounded-3xl p-10 my-16 border border-base-300 shadow-inner"\>
|
<div class="bg-base-200/50 rounded-3xl p-10 my-16 border border-base-300 shadow-inner">
|
||||||
\<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center"\>
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center">
|
||||||
\<div class="lg:col-span-2"\>
|
<div class="lg:col-span-2">
|
||||||
\<h2 class="text-4xl font-black mb-4 mt-0 tracking-tight italic text-secondary"\>Design at Runtime.\</h2\>
|
<h2 class="text-4xl font-black mb-4 mt-0 tracking-tight italic text-secondary">Design at Runtime.</h2>
|
||||||
\<p class="text-xl opacity-80 leading-relaxed"\>Combine the best of three worlds: \<strong\>SigPro\</strong\> for logic, \<strong\>Tailwind v4\</strong\> for speed, and \<strong\>daisyUI v5\</strong\> for beauty. Build interfaces that feel as fast as they look.\</p\>
|
<p class="text-xl opacity-80 leading-relaxed">
|
||||||
\</div\>
|
Combine the best of three worlds: <strong>SigPro</strong> for logic,
|
||||||
\</div\>
|
<strong>Tailwind v4</strong> for speed, and <strong>daisyUI v5</strong> for beauty.
|
||||||
\</div\>
|
Build interfaces that feel as fast as they look.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
\<div class="text-center py-10 opacity-30 font-mono text-xs tracking-widest uppercase"\>
|
<div class="text-center py-10 opacity-30 font-mono text-xs tracking-widest uppercase">
|
||||||
Atomic UI System — Built for SigPro — NatxoCC
|
Atomic UI System — Built for SigPro — NatxoCC
|
||||||
\</div\>
|
</div>
|
||||||
|
|||||||
@@ -1,21 +1,54 @@
|
|||||||
|
<!-- _sidebar.md -->
|
||||||
|
|
||||||
* [**Home**](README.md)
|
* [**Home**](README.md)
|
||||||
|
|
||||||
* **Introduction**
|
* **Introduction**
|
||||||
* [Installation](install.md)
|
* [Installation](install.md)
|
||||||
* [Examples](examples.md)
|
* [Quick Reference](quick.md)
|
||||||
* [Vite Plugin](vite/plugin.md)
|
|
||||||
|
|
||||||
* **API Reference**
|
* **Forms & Inputs**
|
||||||
* [Quick Start](api/quick.md)
|
* [Button](components/button.md)
|
||||||
* [$ signals](api/signal.md)
|
* [Input](components/input.md)
|
||||||
* [$watch](api/watch.md)
|
* [Select](components/select.md)
|
||||||
* [$if](api/if.md)
|
* [Autocomplete](components/autocomplete.md)
|
||||||
* [$for](api/for.md)
|
* [Datepicker](components/datepicker.md)
|
||||||
* [$router](api/router.md)
|
* [Colorpicker](components/colorpicker.md)
|
||||||
* [$mount](api/mount.md)
|
* [Checkbox](components/checkbox.md)
|
||||||
* [$html](api/html.md)
|
* [Radio](components/radio.md)
|
||||||
* [Tags](api/tags.md)
|
* [Range](components/range.md)
|
||||||
* [Global Store](api/global.md)
|
* [Rating](components/rating.md)
|
||||||
|
* [Swap](components/swap.md)
|
||||||
|
|
||||||
* **UI Components**
|
* **Data Display**
|
||||||
* [Quick Start](ui/quick.md)
|
* [Table](components/table.md)
|
||||||
|
* [List](components/list.md)
|
||||||
|
* [Badge](components/badge.md)
|
||||||
|
* [Stat](components/stat.md)
|
||||||
|
* [Timeline](components/timeline.md)
|
||||||
|
* [Stack](components/stack.md)
|
||||||
|
* [Indicator](components/indicator.md)
|
||||||
|
|
||||||
|
* **Feedback & Overlays**
|
||||||
|
* [Alert](components/alert.md)
|
||||||
|
* [Modal](components/modal.md)
|
||||||
|
* [Toast](components/toast.md)
|
||||||
|
* [Loading](components/loading.md)
|
||||||
|
* [Tooltip](components/tooltip.md)
|
||||||
|
|
||||||
|
* **Navigation & Layout**
|
||||||
|
* [Navbar](components/navbar.md)
|
||||||
|
* [Menu](components/menu.md)
|
||||||
|
* [Drawer](components/drawer.md)
|
||||||
|
* [Tabs](components/tabs.md)
|
||||||
|
* [Accordion](components/accordion.md)
|
||||||
|
* [Dropdown](components/dropdown.md)
|
||||||
|
* [Fieldset](components/fieldset.md)
|
||||||
|
|
||||||
|
* **Utilities**
|
||||||
|
* [Fab](components/fab.md)
|
||||||
|
* [Toast](components/toast.md)
|
||||||
|
|
||||||
|
* **Advanced**
|
||||||
|
* [Reactivity Guide](advanced/reactivity.md)
|
||||||
|
* [i18n Guide](advanced/i18n.md)
|
||||||
|
* [Theming](advanced/theming.md)
|
||||||
221
docs/components/button.md
Normal file
221
docs/components/button.md
Normal file
@@ -0,0 +1,221 @@
|
|||||||
|
# Button
|
||||||
|
|
||||||
|
Styled button with full DaisyUI support and reactive states.
|
||||||
|
|
||||||
|
## Tag
|
||||||
|
|
||||||
|
`Button`
|
||||||
|
|
||||||
|
## Props
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
| :--- | :--- | :--- | :--- |
|
||||||
|
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||||
|
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
|
||||||
|
| `loading` | `boolean \| Signal<boolean>` | `false` | Shows loading spinner |
|
||||||
|
| `badge` | `string \| Signal<string>` | `-` | Badge text displayed on corner |
|
||||||
|
| `badgeClass` | `string` | `'badge-secondary'` | Badge styling classes |
|
||||||
|
| `tooltip` | `string \| Signal<string>` | `-` | Tooltip text on hover |
|
||||||
|
| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed before text |
|
||||||
|
| `onclick` | `function` | `-` | Click event handler |
|
||||||
|
| `type` | `string` | `'button'` | Native button type |
|
||||||
|
|
||||||
|
## Live Examples
|
||||||
|
|
||||||
|
### Basic Button
|
||||||
|
|
||||||
|
<div id="demo-basic"></div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
import { $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
|
||||||
|
import { Button } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm';
|
||||||
|
|
||||||
|
const Demo = () => {
|
||||||
|
return Button({ class: "btn-primary" }, "Click Me");
|
||||||
|
};
|
||||||
|
|
||||||
|
$mount(Demo, "#demo-basic");
|
||||||
|
</script>
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
Button({ class: "btn-primary" }, "Click Me")
|
||||||
|
```
|
||||||
|
|
||||||
|
### With Loading State
|
||||||
|
|
||||||
|
<div id="demo-loading"></div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
import { $, $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
|
||||||
|
import { Button } from '../../sigpro-ui/sigpro-ui.js';
|
||||||
|
|
||||||
|
const isSaving = $(false);
|
||||||
|
|
||||||
|
const Demo = () => {
|
||||||
|
return Button({
|
||||||
|
class: "btn-success",
|
||||||
|
loading: isSaving,
|
||||||
|
onclick: async () => {
|
||||||
|
isSaving(true);
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||||
|
isSaving(false);
|
||||||
|
}
|
||||||
|
}, "Save Changes");
|
||||||
|
};
|
||||||
|
|
||||||
|
$mount(Demo, "#demo-loading");
|
||||||
|
</script>
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const isSaving = $(false);
|
||||||
|
|
||||||
|
Button({
|
||||||
|
class: "btn-success",
|
||||||
|
loading: isSaving,
|
||||||
|
onclick: async () => {
|
||||||
|
isSaving(true);
|
||||||
|
await saveData();
|
||||||
|
isSaving(false);
|
||||||
|
}
|
||||||
|
}, "Save Changes")
|
||||||
|
```
|
||||||
|
|
||||||
|
### With Badge
|
||||||
|
|
||||||
|
<div id="demo-badge"></div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
import { $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
|
||||||
|
import { Button } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm';
|
||||||
|
|
||||||
|
const Demo = () => {
|
||||||
|
return Button({
|
||||||
|
class: "btn-outline",
|
||||||
|
badge: "3",
|
||||||
|
badgeClass: "badge-accent"
|
||||||
|
}, "Notifications");
|
||||||
|
};
|
||||||
|
|
||||||
|
$mount(Demo, "#demo-badge");
|
||||||
|
</script>
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
Button({
|
||||||
|
class: "btn-outline",
|
||||||
|
badge: "3",
|
||||||
|
badgeClass: "badge-accent"
|
||||||
|
}, "Notifications")
|
||||||
|
```
|
||||||
|
|
||||||
|
### With Tooltip
|
||||||
|
|
||||||
|
<div id="demo-tooltip"></div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
import { $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
|
||||||
|
import { Button } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm';
|
||||||
|
|
||||||
|
const Demo = () => {
|
||||||
|
return Button({
|
||||||
|
class: "btn-ghost",
|
||||||
|
tooltip: "Delete item"
|
||||||
|
}, "Delete");
|
||||||
|
};
|
||||||
|
|
||||||
|
$mount(Demo, "#demo-tooltip");
|
||||||
|
</script>
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
Button({
|
||||||
|
class: "btn-ghost",
|
||||||
|
tooltip: "Delete item"
|
||||||
|
}, "Delete")
|
||||||
|
```
|
||||||
|
|
||||||
|
### Disabled State
|
||||||
|
|
||||||
|
<div id="demo-disabled"></div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
import { $, $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
|
||||||
|
import { Button } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm';
|
||||||
|
|
||||||
|
const isDisabled = $(true);
|
||||||
|
|
||||||
|
const Demo = () => {
|
||||||
|
return Button({
|
||||||
|
class: "btn-primary",
|
||||||
|
disabled: isDisabled
|
||||||
|
}, "Submit");
|
||||||
|
};
|
||||||
|
|
||||||
|
$mount(Demo, "#demo-disabled");
|
||||||
|
</script>
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const isDisabled = $(true);
|
||||||
|
|
||||||
|
Button({
|
||||||
|
class: "btn-primary",
|
||||||
|
disabled: isDisabled
|
||||||
|
}, "Submit")
|
||||||
|
```
|
||||||
|
|
||||||
|
### All Variants
|
||||||
|
|
||||||
|
<div id="demo-variants"></div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
import { $, $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
|
||||||
|
import { Button, Div } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm';
|
||||||
|
|
||||||
|
const isLoading = $(false);
|
||||||
|
|
||||||
|
const Demo = () => {
|
||||||
|
return Div({ class: "flex flex-wrap gap-2" }, [
|
||||||
|
Button({ class: "btn-primary" }, "Primary"),
|
||||||
|
Button({ class: "btn-secondary" }, "Secondary"),
|
||||||
|
Button({ class: "btn-accent" }, "Accent"),
|
||||||
|
Button({ class: "btn-ghost" }, "Ghost"),
|
||||||
|
Button({ class: "btn-outline" }, "Outline"),
|
||||||
|
Button({ class: "btn-success", loading: isLoading, onclick: () => {
|
||||||
|
isLoading(true);
|
||||||
|
setTimeout(() => isLoading(false), 1500);
|
||||||
|
} }, "Loading")
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
|
||||||
|
$mount(Demo, "#demo-variants");
|
||||||
|
</script>
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
Div({ class: "flex flex-wrap gap-2" }, [
|
||||||
|
Button({ class: "btn-primary" }, "Primary"),
|
||||||
|
Button({ class: "btn-secondary" }, "Secondary"),
|
||||||
|
Button({ class: "btn-accent" }, "Accent"),
|
||||||
|
Button({ class: "btn-ghost" }, "Ghost"),
|
||||||
|
Button({ class: "btn-outline" }, "Outline")
|
||||||
|
])
|
||||||
|
```
|
||||||
|
```
|
||||||
|
|
||||||
|
## Ventajas de este enfoque:
|
||||||
|
|
||||||
|
1. **Ejecución real** - Los ejemplos son interactivos y funcionales
|
||||||
|
2. **Código visible** - Debajo de cada ejemplo se muestra el código fuente
|
||||||
|
3. **Aprendizaje visual** - Los usuarios pueden ver y probar los componentes
|
||||||
|
4. **Reactivo** - Los ejemplos con signals demuestran la reactividad en acción
|
||||||
|
|
||||||
|
## Consejos adicionales:
|
||||||
|
|
||||||
|
Para mejorar la experiencia, podrías agregar estilos a los contenedores de los ejemplos:
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* En tu HTML, dentro de <style> */
|
||||||
|
.demo-container {
|
||||||
|
margin: 1rem 0;
|
||||||
|
padding: 1rem;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
background: #f8fafc;
|
||||||
|
}
|
||||||
129
docs/install.md
Normal file
129
docs/install.md
Normal file
@@ -0,0 +1,129 @@
|
|||||||
|
# Installation Guide
|
||||||
|
|
||||||
|
Follow these steps to integrate **SigPro-UI** into your project.
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
|
Make sure your project already has:
|
||||||
|
|
||||||
|
- [SigPro Core](https://www.npmjs.com/package/sigpro) installed.
|
||||||
|
- [Tailwind CSS v4](https://tailwindcss.com/) configured.
|
||||||
|
- [daisyUI v5](https://daisyui.com/) installed.
|
||||||
|
|
||||||
|
## 1️.Install the package
|
||||||
|
|
||||||
|
Choose your preferred package manager:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install sigpro-ui
|
||||||
|
# or
|
||||||
|
pnpm add sigpro-ui
|
||||||
|
# or
|
||||||
|
bun add sigpro-ui
|
||||||
|
# or
|
||||||
|
yarn add sigpro-ui
|
||||||
|
```
|
||||||
|
|
||||||
|
## 2️.Configure CSS
|
||||||
|
|
||||||
|
Add the following to your main CSS file (e.g., `app.css`):
|
||||||
|
|
||||||
|
```css
|
||||||
|
@import "tailwindcss";
|
||||||
|
@plugin "daisyui";
|
||||||
|
```
|
||||||
|
|
||||||
|
> This enables Tailwind CSS v4 + daisyUI v5 styles for all SigPro-UI components.
|
||||||
|
|
||||||
|
## 3️.Import and initialize in your app
|
||||||
|
|
||||||
|
Create or update your `main.js` (or `index.js`):
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// Import required modules
|
||||||
|
import { $, $mount } from "sigpro";
|
||||||
|
import { UI } from "sigpro-ui";
|
||||||
|
|
||||||
|
// Import your CSS (adjust the path if needed)
|
||||||
|
import "./app.css";
|
||||||
|
|
||||||
|
// Import your main App component
|
||||||
|
import { App } from "./App.js";
|
||||||
|
|
||||||
|
// Initialize SigPro-UI (English locale)
|
||||||
|
UI("en");
|
||||||
|
|
||||||
|
// Mount your app
|
||||||
|
$mount(App, "#app");
|
||||||
|
```
|
||||||
|
|
||||||
|
## 4️.Create your first component
|
||||||
|
|
||||||
|
Example `App.js`:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { Div, Button, Alert } from "sigpro-ui";
|
||||||
|
|
||||||
|
export const App = () => {
|
||||||
|
return Div({ class: "p-4" }, [
|
||||||
|
Button({
|
||||||
|
class: "btn-primary",
|
||||||
|
onclick: () => Alert("Hello SigPro-UI!")
|
||||||
|
}, "Click Me")
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Optional: Use CDN (no build step)
|
||||||
|
|
||||||
|
If you prefer not to use a build step, you can import directly from a CDN:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<script type="importmap">
|
||||||
|
{
|
||||||
|
"imports": {
|
||||||
|
"sigpro": "https://esm.run/sigpro",
|
||||||
|
"sigpro-ui": "https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
@import "tailwindcss";
|
||||||
|
@plugin "daisyui";
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module">
|
||||||
|
import { $, $mount } from "sigpro";
|
||||||
|
import { UI, Div, Button, Alert } from "sigpro-ui";
|
||||||
|
|
||||||
|
UI("en");
|
||||||
|
|
||||||
|
const App = () => Div({ class: "p-4" }, [
|
||||||
|
Button({ class: "btn-primary", onclick: () => Alert("Hello!") }, "Click")
|
||||||
|
]);
|
||||||
|
|
||||||
|
$mount(App, "#app");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Troubleshooting
|
||||||
|
|
||||||
|
| Problem | Solution |
|
||||||
|
| :--- | :--- |
|
||||||
|
| Components don't look styled | Check that `app.css` is imported and contains the Tailwind + daisyUI directives. |
|
||||||
|
| `UI is not defined` | Make sure you call `UI()` **before** using any component like `Button`, `Input`, etc. |
|
||||||
|
| Locale not working | Verify you passed a valid locale (`"es"` or `"en"`) to `UI()`. |
|
||||||
|
| Build errors with Tailwind v4 | Ensure Tailwind CSS v4 and daisyUI v5 are correctly installed and configured. |
|
||||||
|
|
||||||
|
|
||||||
|
**Happy coding!** 🎉
|
||||||
|
|
||||||
206
docs/quick.md
Normal file
206
docs/quick.md
Normal file
@@ -0,0 +1,206 @@
|
|||||||
|
# SigPro-UI Quick Reference
|
||||||
|
|
||||||
|
**Version:** daisyUI v5 + Tailwind v4 Plugin
|
||||||
|
**Status:** Active / WIP
|
||||||
|
|
||||||
|
> **Prerequisites:** Tailwind CSS v4+ and DaisyUI v5+ installed.
|
||||||
|
|
||||||
|
## Global Initialization
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { UI } from 'sigpro-ui';
|
||||||
|
|
||||||
|
// Injects all components into window and sets default language
|
||||||
|
UI('en'); // 'es' or 'en'
|
||||||
|
|
||||||
|
// All components (Button, Input, Table, Toast, etc.) are now globally available.
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Core Components
|
||||||
|
|
||||||
|
| Component | Purpose | Basic Example |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| **Button** | Styled button with DaisyUI | `Button({ class: "btn-primary" }, "Submit")` |
|
||||||
|
| **Input** | Reactive text field with floating label | `Input({ label: "Name", value: $name })` |
|
||||||
|
| **Select** | Dropdown selection menu | `Select({ options: ["Admin", "User"], value: $role })` |
|
||||||
|
| **Checkbox** | Binary toggle (boolean) | `Checkbox({ label: "Active", checked: $isActive })` |
|
||||||
|
| **Table** | Data grid with column rendering | `Table({ items: $data, columns: [...] })` |
|
||||||
|
| **Modal** | Overlay dialog controlled by a Signal | `Modal({ open: $show, title: "Alert" }, "Message")` |
|
||||||
|
| **Badge** | Small status indicator or tag | `Badge({ class: "badge-outline" }, "Beta")` |
|
||||||
|
| **Alert** | Contextual notification | `Alert({ type: "info" }, "Update available")` |
|
||||||
|
| **Loading** | Loading indicators (spinner, dots) | `Loading({ show: $isLoading })` |
|
||||||
|
| **Dropdown** | Contextual overlay menu | `Dropdown({ label: "Menu" }, [Link1, Link2])` |
|
||||||
|
| **Tabs** | Reactive tab-based navigation | `Tabs({ items: ["Home", "Settings"], active: $index })` |
|
||||||
|
| **Stat** | Statistical data block (KPIs) | `Stat({ label: "Sales", value: "$400" })` |
|
||||||
|
| **Toast** | Temporary floating notification | `Toast("Done!", "alert-success", 3000)` |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Forms & Inputs
|
||||||
|
|
||||||
|
| Component | Description | Example |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| **Input** | Text input with floating label, validation, password toggle | `Input({ label: "Email", type: "email", value: $email })` |
|
||||||
|
| **Select** | Dropdown selector | `Select({ label: "Role", options: ["Admin", "User"], value: $role })` |
|
||||||
|
| **Autocomplete** | Searchable dropdown with filtering | `Autocomplete({ label: "Country", options: countryList, value: $country })` |
|
||||||
|
| **Datepicker** | Date picker (single or range mode) | `Datepicker({ label: "Date", value: $date, range: false })` |
|
||||||
|
| **Colorpicker** | Visual color picker with palette | `Colorpicker({ label: "Theme", value: $color })` |
|
||||||
|
| **Checkbox** | Checkbox or toggle switch | `Checkbox({ label: "Remember me", value: $remember })` |
|
||||||
|
| **Radio** | Radio button | `Radio({ label: "Option 1", value: $selected, name: "group" })` |
|
||||||
|
| **Range** | Slider control | `Range({ label: "Volume", min: 0, max: 100, value: $volume })` |
|
||||||
|
| **Rating** | Star rating component | `Rating({ value: $stars, count: 5 })` |
|
||||||
|
| **Swap** | Toggle between two states (sun/moon) | `Swap({ on: "🌞", off: "🌙", value: $isDark })` |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Data Display
|
||||||
|
|
||||||
|
| Component | Description | Example |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| **Table** | Reactive data grid with columns | `Table({ items: $users, columns: [{ label: "Name", key: "name" }] })` |
|
||||||
|
| **List** | Vertical list with custom rendering | `List({ items: $items, render: (item) => item.name })` |
|
||||||
|
| **Badge** | Small status indicators | `Badge({ class: "badge-primary" }, "New")` |
|
||||||
|
| **Stat** | Statistical data blocks (KPIs) | `Stat({ label: "Total", value: "1.2k", desc: "Monthly" })` |
|
||||||
|
| **Timeline** | Vertical/horizontal timeline | `Timeline({ items: [{ title: "Step 1", detail: "Completed" }] })` |
|
||||||
|
| **Stack** | Stacked elements | `Stack({}, [Card1, Card2, Card3])` |
|
||||||
|
| **Indicator** | Badge on corner of element | `Indicator({ badge: "3" }, Button(...))` |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Feedback & Overlays
|
||||||
|
|
||||||
|
| Component | Description | Example |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| **Alert** | Inline contextual notification | `Alert({ type: "success" }, "Changes saved!")` |
|
||||||
|
| **Modal** | Dialog overlay | `Modal({ open: $isOpen, title: "Confirm" }, "Are you sure?")` |
|
||||||
|
| **Toast** | Floating notification (auto-stacking) | `Toast("Action completed", "alert-info", 3000)` |
|
||||||
|
| **Loading** | Full-screen or inline loading indicator | `Loading({ show: $isLoading })` |
|
||||||
|
| **Tooltip** | Hover tooltip wrapper | `Tooltip({ tip: "Help text" }, Button(...))` |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Navigation & Layout
|
||||||
|
|
||||||
|
| Component | Description | Example |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| **Navbar** | Top navigation bar | `Navbar({}, [Logo, Menu, Avatar])` |
|
||||||
|
| **Menu** | Vertical navigation menu | `Menu({ items: [{ label: "Home", onclick: goHome }] })` |
|
||||||
|
| **Drawer** | Side drawer (off-canvas) | `Drawer({ id: "my-drawer", open: $isOpen, content: Main, side: SideMenu })` |
|
||||||
|
| **Tabs** | Content switching | `Tabs({ items: [{ label: "Tab1", content: Panel1 }] })` |
|
||||||
|
| **Accordion** | Collapsible sections | `Accordion({ title: "Details" }, "Hidden content")` |
|
||||||
|
| **Dropdown** | Contextual menus | `Dropdown({ label: "Options" }, [MenuLink("Edit")])` |
|
||||||
|
| **Fieldset** | Form grouping with legend | `Fieldset({ legend: "Personal Info" }, [Input(...)])` |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Interaction & Utilities
|
||||||
|
|
||||||
|
| Component | Description | Example |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| **Fab** | Floating Action Button with actions | `Fab({ icon: "+", actions: [{ label: "Add", onclick: add }] })` |
|
||||||
|
| **Indicator** | Badge indicator wrapper | `Indicator({ badge: "99+" }, Button(...))` |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Internationalization (i18n)
|
||||||
|
|
||||||
|
Built-in locale system with Spanish and English support.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// Set global UI language
|
||||||
|
Locale("en"); // or "es"
|
||||||
|
|
||||||
|
// Get translated string (returns a reactive signal)
|
||||||
|
const closeText = tt("close"); // "Close" or "Cerrar"
|
||||||
|
|
||||||
|
// Available keys: close, confirm, cancel, search, loading, nodata
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Implementation Notes
|
||||||
|
|
||||||
|
1. **Atomic Reactivity**: Components accepting `value` or `checked` bind directly to **SigPro Signals**. Updates happen instantly without full page re-renders.
|
||||||
|
|
||||||
|
2. **Tailwind v4 + DaisyUI v5**: Pass any Tailwind utility class via the `class` attribute to override default DaisyUI styling.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
Button({ class: "btn-primary btn-sm rounded-full shadow-lg" }, "Click")
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **Zero Imports (Global Mode)**: After calling `UI()`, all components are attached to `window`. No manual imports needed.
|
||||||
|
|
||||||
|
4. **Self-Cleaning**: Components internally manage `_cleanups` to destroy observers and event listeners when removed from the DOM.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Advanced Examples
|
||||||
|
|
||||||
|
### Reactive Form with Validation
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const name = $("");
|
||||||
|
const error = $(null);
|
||||||
|
|
||||||
|
Input({
|
||||||
|
label: "Full Name",
|
||||||
|
value: name,
|
||||||
|
error: error,
|
||||||
|
oninput: (e) => {
|
||||||
|
name(e.target.value);
|
||||||
|
error(e.target.value.length < 3 ? "Name too short" : null);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### API Request Pattern
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const userId = $("123");
|
||||||
|
const userData = $(null);
|
||||||
|
const loading = $(false);
|
||||||
|
|
||||||
|
$watch(userId, async (id) => {
|
||||||
|
loading(true);
|
||||||
|
userData(await fetch(`/api/user/${id}`).then(r => r.json()));
|
||||||
|
loading(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
// In template
|
||||||
|
Loading({ show: loading });
|
||||||
|
$if(() => userData(), () => Alert({ type: "success" }, userData()?.name))
|
||||||
|
```
|
||||||
|
|
||||||
|
### Modal with Confirm Action
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const showModal = $(false);
|
||||||
|
|
||||||
|
Modal({
|
||||||
|
open: showModal,
|
||||||
|
title: "Delete Item",
|
||||||
|
buttons: [
|
||||||
|
Button({ class: "btn-error", onclick: () => { deleteItem(); showModal(false); } }, "Delete")
|
||||||
|
]
|
||||||
|
}, "Are you sure you want to delete this item?");
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Component Props Quick Reference
|
||||||
|
|
||||||
|
| Component | Key Props |
|
||||||
|
| :--- | :--- |
|
||||||
|
| `Button` | `class`, `disabled`, `loading`, `badge`, `tooltip`, `icon` |
|
||||||
|
| `Input` | `label`, `value`, `error`, `type`, `placeholder`, `disabled`, `tip` |
|
||||||
|
| `Select` | `label`, `options`, `value`, `disabled` |
|
||||||
|
| `Modal` | `open`, `title`, `buttons` |
|
||||||
|
| `Table` | `items`, `columns`, `zebra`, `pinRows`, `empty` |
|
||||||
|
| `Alert` | `type` (info/success/warning/error), `soft`, `actions` |
|
||||||
|
| `Toast` | `message`, `type`, `duration` |
|
||||||
|
| `Loading` | `show` |
|
||||||
|
| `Datepicker` | `value`, `range`, `label`, `placeholder` |
|
||||||
|
| `Autocomplete` | `options`, `value`, `onSelect`, `label` |
|
||||||
|
|
||||||
Reference in New Issue
Block a user