Include label in Input

Readme.md

@@ -1,6 +1,8 @@
-# SigPro UI (W.I.P.)
+# 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 leveraging the power of **Tailwind CSS v4** and **daisyUI v5**.
+**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.
+
+**SigPro UI** is a complete, self-contained UI library + reactive core in under **45KB gzip** (<15KB JS + <30KB CSS). 🎉
 
 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.
 
@@ -8,96 +10,73 @@ Unlike heavy frameworks, SigPro UI focuses on a **"Zero-Build"** philosophy, all
 
 ## Features
 
-* **Signals-Based Reactivity**: Powered by SigPro for granular DOM updates.
-* **DaisyUI v5 Integration**: Beautiful, semantic components 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 a focus on performance.
+- **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
 
 ---
 
-## Prerequisites
+## Installation
 
-To use SigPro UI, your project must include:
+### Via NPM
 
-1.  **SigPro Core**: `npm install sigpro` (or via CDN).
-2.  **Tailwind CSS v4**: For utility-first styling.
-3.  **daisyUI v5**: The component engine for Tailwind.
-
-
-## 1. Prerequisites & Installation
-SigPro UI is built as an extension of the SigPro reactivity system. You need to install the core library first.
-
-### Step 1: Install SigPro Core
-
-```Bash
-bun add sigpro
-# or
-npm install sigpro
-```
-
-### Step 2: Install SigPro UI
-
-```Bash
-bun add sigpro-ui
-# or
+```bash
 npm install sigpro-ui
 ```
 
 ### Via CDN (Browser)
 
 ```html
-<script src="https://unpkg.com/sigpro"></script>
+<!-- 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.
+
 ---
 
-## 2. Styling Setup (Tailwind CSS v4)
-SigPro UI components rely on **Tailwind CSS** and **daisyUI** for styling. You don't need a complex tailwind.config.js; simply configure your main CSS entry point.
+## Usage
 
-Create or edit your global CSS file (e.g., style.css):
-
-```css
-/* src/style.css */
-@import "tailwindcss";
-@plugin "daisyui";
-
-/* Optional: Your custom theme overrides */
-:root {
-  --primary: #570df8;
-  --secondary: #f000b8;
-}
-```
----
-## Setup & Usage
-
-You can use SigPro UI in two ways: **Modular** (Recommended for production) or **Global** (Fastest for prototyping).
+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. This keeps your bundle small.
+
+Import only the components you need:
 
 ```javascript
-import { $, $mount } from "sigpro";
-import { Button, Modal, Table } from "sigpro-ui";
+import { $, Mount, Button, Modal, Input, Alert } from "sigpro-ui";
+import "sigpro-ui/css";
 
 const App = () => {
   const show = $(false);
-  return Button({ onclick: () => show(true) }, "Open Modal");
+  
+  return Button(
+    { 
+      class: "btn-primary", 
+      onclick: () => show(true) 
+    }, 
+    "Open Modal"
+  );
 };
 
-$mount(App, "#app");
+Mount(App, "#app");
 ```
 
 ### 2. Global Approach (Zero-Import)
-Inject all components and utilities into the `window` object. This makes all components available everywhere without manual imports.
+
+Inject all components into the `window` object:
 
 ```javascript
-import SigproUI from "sigpro-ui";
+import "sigpro-ui";
+import "sigpro-ui/css";
 
-// Injects Button, Table, Input, Icons, Utils, etc. into window
-SigproUI.install(); 
+// All components (Button, Table, Input, Alert, etc.) are now globally available.
+// No need to import anything else!
 
-// Now you can use them directly anywhere:
 const myApp = () => Table({ items: [], columns: [] });
 ```
 
@@ -106,8 +85,8 @@ const myApp = () => Table({ items: [], columns: [] });
 ## Basic Example
 
 ```javascript
-import { $ } from "sigpro";
-import { Button, Toast, Div, H1 } from "sigpro-ui";
+import { $, Mount, Button, Toast, Div, H1 } from "sigpro-ui";
+import "sigpro-ui/css";
 
 const App = () => {
   const count = $(0);
@@ -124,23 +103,57 @@ const App = () => {
     }, () => `Clicks: ${count()}`)
   ]);
 };
+
+Mount(App, "#app");
 ```
 
 ---
 
-## Components Included
+## What's Included?
 
-| Category | Components |
-| :--- | :--- |
-| **Form** | `Input`, `Select`, `Checkbox`, `Radio`, `Range`, `Datepicker`, `Colorpicker`, `Autocomplete`, `Rating` |
-| **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` |
+### Core Functions (from SigPro)
+- `$()` - Reactive signals
+- `Watch()` - Watch reactive dependencies
+- `Tag()` - Create HTML elements with reactivity
+- `If()` - Conditional rendering
+- `For()` - List rendering
+- `Router()` - Hash-based routing
+- `Mount()` - Mount components to DOM
+
+Explore [SigPro Core Docs](https://natxocc.github.io/sigpro/#/) for more information.
+
+### 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**.
+MIT © 2026 **SigPro Team**  
 *Engineered for speed, designed for clarity, built for the modern web.*

css/index.js

@@ -0,0 +1,3 @@
+// css/index.js
+import './sigpro.min.css';
+export default { version: '1.0.0' };

docs/README.md

@@ -8,7 +8,7 @@
       </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 beta (W.I.P.)</h1>
       <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 DaisyUI v5 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 reactivity."</div>
       <div class="flex flex-wrap justify-center gap-4 w-full">
         <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>
@@ -25,26 +25,26 @@
   <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 items-stretch">
     <div class="card bg-base-200/30 border border-base-300 hover:border-secondary/40 transition-all p-1">
       <div class="card-body p-6">
-        <h3 class="card-title text-xl font-black text-secondary italic">TAILWIND V4</h3>
-        <p class="text-sm opacity-70">Built on the latest CSS engine. Lightning fast styles with zero legacy overhead.</p>
+        <h3 class="card-title text-xl font-black text-secondary italic">SIGPRO NATIVE</h3>
+        <p class="text-sm opacity-70">Direct integration with SigPro signals. No wrappers, no context, just pure atomic reactivity.</p>
       </div>
     </div>
     <div class="card bg-base-200/30 border border-base-300 hover:border-accent/40 transition-all p-1">
       <div class="card-body p-6">
-        <h3 class="card-title text-xl font-black text-accent italic">DAISYUI V5</h3>
-        <p class="text-sm opacity-70">Semantic, beautiful and accessible. Professional components out of the box.</p>
+        <h3 class="card-title text-xl font-black text-accent italic">ZERO CONFIG</h3>
+        <p class="text-sm opacity-70">Import and build immediately. Designed for developers who hate configuration files.</p>
       </div>
     </div>
     <div class="card bg-base-200/30 border border-base-300 hover:border-primary/40 transition-all p-1">
       <div class="card-body p-6">
-        <h3 class="card-title text-xl font-black text-primary italic">NATIVE REACTION</h3>
-        <p class="text-sm opacity-70">Direct integration with SigPro signals. No wrappers, no context, just speed.</p>
+        <h3 class="card-title text-xl font-black text-primary italic">REACTIVE BY DESIGN</h3>
+        <p class="text-sm opacity-70">Every component is a high-order function optimized for SigPro's fine-grained updates.</p>
       </div>
     </div>
     <div class="card bg-base-200/30 border border-base-300 hover:border-base-content/20 transition-all p-1">
       <div class="card-body p-6">
         <h3 class="card-title text-xl font-black italic text-base-content">READY-TO-GO</h3>
-        <p class="text-sm opacity-70">Import and build. Designed for developers who hate configuration files.</p>
+        <p class="text-sm opacity-70">60+ atomic components. Semantic, accessible, and production-ready.</p>
       </div>
     </div>
   </div>
@@ -54,13 +54,13 @@
 
 SigPro-UI isn't just a library; it's a **Functional Design System**. 
 
-It eliminates the gap between your data (Signals) and your layout (DaisyUI). Each component is a high-order function optimized for the SigPro core, ensuring that your UI only updates where it matters.
+It eliminates the gap between your data (Signals) and your UI components. Each component is a high-order function optimized for the SigPro core, ensuring that your interface only updates where it matters.
 
 | Requirement | Value | Why? |
 | :--- | :--- | :--- |
 | **Engine** | **SigPro** | Atomic reactivity without V-DOM. |
-| **Styling** | **Tailwind CSS v4** | Pure CSS performance. |
-| **Components** | **daisyUI v5** | Semantic and clean layouts. |
+| **Components** | **SigPro-UI** | 60+ semantic, reactive components. |
+| **Styling** | **daisyUI v5** | Beautiful, accessible, themeable. |
 | **Learning Curve** | **Zero** | If you know JS and HTML, you know SigPro-UI. |
 
 ### Semantic Functionalism
@@ -73,43 +73,43 @@ Modal({
   title: "Precision Engineering" 
 }, () => 
   Div({ class: "space-y-4" }, [
-    P("SigPro-UI leverages Tailwind v4 for instant styling."),
+    P("SigPro-UI provides instant reactivity out of the box."),
     Button({ 
       class: "btn-primary", 
       onclick: () => isVisible(false) 
     }, "Confirm")
   ])
 )
-````
+```
 
------
+---
 
 ## Technical Stack Requirements
 
 To achieve the performance promised by SigPro-UI, your environment must be equipped with:
 
-### 1\. SigPro Core
+### 1. SigPro Core
 
-The atomic heart. SigPro-UI requires the SigPro runtime (`$`, `$watch`, `$html`, etc.) to be present in the global scope or provided as a module.
+The atomic heart. SigPro-UI requires the SigPro runtime (`$`, `Watch`, `Tag`, etc.) to be present in the global scope or provided as a module.
 
-### 2\. Tailwind CSS v4 Engine
-
-SigPro-UI uses the modern `@theme` and utility engine of Tailwind v4. It is designed to work with the ultra-fast compiler of the new generation.
-
-### 3\. daisyUI v5
+### 2. daisyUI v5
 
 The visual DNA. All components are mapped to daisyUI v5 semantic classes, providing access to dozens of themes and accessible UI patterns without writing a single line of custom CSS.
 
------
+### 3. Modern Browser
+
+SigPro-UI uses modern Web APIs and requires no polyfills for evergreen browsers.
+
+---
 
 <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="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">Reactive 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.
+        Combine the best of both worlds: <strong>SigPro</strong> for logic and 
+        <strong>daisyUI v5</strong> for beauty. Build interfaces that feel as fast as they look,
+        with components that react instantly to your data changes.
       </p>
     </div>
   </div>

docs/_sidebar.md

@@ -7,48 +7,39 @@
   * [Quick Reference](quick.md)
 
 * **Forms & Inputs**
-  * [Button](components/button.md)
-  * [Input](components/input.md)
-  * [Select](components/select.md)
   * [Autocomplete](components/autocomplete.md)
-  * [Datepicker](components/datepicker.md)
-  * [Colorpicker](components/colorpicker.md)
+  * [Button](components/button.md)
   * [Checkbox](components/checkbox.md)
+  * [Colorpicker](components/colorpicker.md)
+  * [Datepicker](components/datepicker.md)
+  * [Input](components/input.md)
   * [Radio](components/radio.md)
   * [Range](components/range.md)
   * [Rating](components/rating.md)
+  * [Select](components/select.md)
   * [Swap](components/swap.md)
 
 * **Data Display**
-  * [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)
+  * [List](components/list.md)
+  * [Stack](components/stack.md)
+  * [Stat](components/stat.md)
+  * [Table](components/table.md)
+  * [Timeline](components/timeline.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)
+  * [Drawer](components/drawer.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)
+  * [Fieldset](components/fieldset.md)
+  * [Menu](components/menu.md)
+  * [Navbar](components/navbar.md)
+  * [Tabs](components/tabs.md)

docs/components/accordion.md

@@ -0,0 +1,400 @@
+# Accordion
+
+Collapsible accordion component for organizing content into expandable sections.
+
+## Tag
+
+`Accordion`
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `title` | `string \| VNode \| Signal` | Required | Accordion section title |
+| `open` | `boolean \| Signal<boolean>` | `false` | Whether the accordion is expanded |
+| `name` | `string` | `-` | Group name for radio-style accordions (only one open at a time) |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
+| `children` | `VNode \| Array<VNode>` | Required | Content to display when expanded |
+
+## Styling
+
+Accordion supports all **daisyUI Collapse classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Type | `collapse-arrow`, `collapse-plus`, `collapse-minus` | Expand indicator style |
+| Color | `collapse-primary`, `collapse-secondary`, `collapse-accent` | Color variants |
+| Background | `bg-base-100`, `bg-base-200` | Background colors |
+
+> For further details, check the [daisyUI Collapse Documentation](https://daisyui.com/components/collapse) – Full reference for CSS classes.
+
+## Live Examples
+
+### Basic Accordion
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  const open1 = $(false);
+  const open2 = $(false);
+  const open3 = $(false);
+  
+  return Div({ class: 'flex flex-col gap-2' }, [
+    Accordion({
+      title: 'Section 1',
+      open: open1,
+      onclick: () => open1(!open1())
+    }, [
+      Div({ class: 'p-2' }, 'Content for section 1. This is a basic accordion section.')
+    ]),
+    Accordion({
+      title: 'Section 2',
+      open: open2,
+      onclick: () => open2(!open2())
+    }, [
+      Div({ class: 'p-2' }, 'Content for section 2. You can put any content here.')
+    ]),
+    Accordion({
+      title: 'Section 3',
+      open: open3,
+      onclick: () => open3(!open3())
+    }, [
+      Div({ class: 'p-2' }, 'Content for section 3. Accordions are great for FAQs.')
+    ])
+  ]);
+};
+Mount(BasicDemo, '#demo-basic');
+```
+
+### Group Accordion (Radio Style)
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-group" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const GroupDemo = () => {
+  const openSection = $('section1');
+  
+  return Div({ class: 'flex flex-col gap-2' }, [
+    Accordion({
+      title: 'Section 1',
+      name: 'group',
+      open: () => openSection() === 'section1',
+      onclick: () => openSection('section1')
+    }, [
+      Div({ class: 'p-2' }, 'Content for section 1. Only one section can be open at a time.')
+    ]),
+    Accordion({
+      title: 'Section 2',
+      name: 'group',
+      open: () => openSection() === 'section2',
+      onclick: () => openSection('section2')
+    }, [
+      Div({ class: 'p-2' }, 'Content for section 2. Opening this will close section 1.')
+    ]),
+    Accordion({
+      title: 'Section 3',
+      name: 'group',
+      open: () => openSection() === 'section3',
+      onclick: () => openSection('section3')
+    }, [
+      Div({ class: 'p-2' }, 'Content for section 3. This is useful for FAQ sections.')
+    ])
+  ]);
+};
+Mount(GroupDemo, '#demo-group');
+```
+
+### FAQ Accordion
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-faq" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const FaqDemo = () => {
+  const openFaq = $('faq1');
+  
+  const faqs = [
+    { id: 'faq1', question: 'What is this component?', answer: 'This is an accordion component built with DaisyUI and Tailwind CSS for creating collapsible content sections.' },
+    { id: 'faq2', question: 'How do I use it?', answer: 'Simply import the Accordion component and pass title and children props. Use the open prop to control expansion.' },
+    { id: 'faq3', question: 'Can I have multiple open?', answer: 'Yes! By default, accordions can be opened independently. Use the name prop to create groups where only one can be open.' },
+    { id: 'faq4', question: 'Is it accessible?', answer: 'Yes, the accordion uses proper ARIA attributes and keyboard navigation support.' }
+  ];
+  
+  return Div({ class: 'flex flex-col gap-2' }, faqs.map(faq => 
+    Accordion({
+      title: faq.question,
+      name: 'faq-group',
+      open: () => openFaq() === faq.id,
+      onclick: () => openFaq(openFaq() === faq.id ? '' : faq.id)
+    }, [
+      Div({ class: 'p-2 text-sm' }, faq.answer)
+    ])
+  ));
+};
+Mount(FaqDemo, '#demo-faq');
+```
+
+### With Rich Content
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-rich" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const RichDemo = () => {
+  const open1 = $(true);
+  const open2 = $(false);
+  
+  return Div({ class: 'flex flex-col gap-2' }, [
+    Accordion({
+      title: Span({ class: 'flex items-center gap-2' }, ['📊', 'Statistics']),
+      open: open1,
+      onclick: () => open1(!open1())
+    }, [
+      Div({ class: 'p-2' }, [
+        Div({ class: 'grid grid-cols-2 gap-4' }, [
+          Div({ class: 'stat bg-base-100 rounded-lg p-3' }, [
+            Div({ class: 'stat-title' }, 'Users'),
+            Div({ class: 'stat-value text-lg' }, '1,234')
+          ]),
+          Div({ class: 'stat bg-base-100 rounded-lg p-3' }, [
+            Div({ class: 'stat-title' }, 'Revenue'),
+            Div({ class: 'stat-value text-lg' }, '$45,678')
+          ]),
+          Div({ class: 'stat bg-base-100 rounded-lg p-3' }, [
+            Div({ class: 'stat-title' }, 'Growth'),
+            Div({ class: 'stat-value text-lg text-success' }, '+23%')
+          ]),
+          Div({ class: 'stat bg-base-100 rounded-lg p-3' }, [
+            Div({ class: 'stat-title' }, 'Active'),
+            Div({ class: 'stat-value text-lg' }, '89%')
+          ])
+        ])
+      ])
+    ]),
+    Accordion({
+      title: Span({ class: 'flex items-center gap-2' }, ['👥', 'Team Members']),
+      open: open2,
+      onclick: () => open2(!open2())
+    }, [
+      Div({ class: 'p-2 space-y-2' }, [
+        Div({ class: 'flex items-center gap-3 p-2 hover:bg-base-100 rounded-lg' }, [
+          Div({ class: 'avatar placeholder' }, [
+            Div({ class: 'bg-primary text-primary-content rounded-full w-10 h-10 flex items-center justify-center' }, 'JD')
+          ]),
+          Div({ class: 'flex-1' }, [
+            Div({ class: 'font-medium' }, 'John Doe'),
+            Div({ class: 'text-sm opacity-70' }, 'Developer')
+          ])
+        ]),
+        Div({ class: 'flex items-center gap-3 p-2 hover:bg-base-100 rounded-lg' }, [
+          Div({ class: 'avatar placeholder' }, [
+            Div({ class: 'bg-secondary text-secondary-content rounded-full w-10 h-10 flex items-center justify-center' }, 'JS')
+          ]),
+          Div({ class: 'flex-1' }, [
+            Div({ class: 'font-medium' }, 'Jane Smith'),
+            Div({ class: 'text-sm opacity-70' }, 'Designer')
+          ])
+        ])
+      ])
+    ])
+  ]);
+};
+Mount(RichDemo, '#demo-rich');
+```
+
+### Form Accordion
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-form" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const FormAccordion = () => {
+  const openStep = $('step1');
+  const formData = $({
+    name: '',
+    email: '',
+    address: '',
+    payment: 'credit'
+  });
+  
+  const updateField = (field, value) => {
+    formData({ ...formData(), [field]: value });
+  };
+  
+  const nextStep = () => {
+    if (openStep() === 'step1') openStep('step2');
+    else if (openStep() === 'step2') openStep('step3');
+  };
+  
+  const prevStep = () => {
+    if (openStep() === 'step2') openStep('step1');
+    else if (openStep() === 'step3') openStep('step2');
+  };
+  
+  const handleSubmit = () => {
+    Toast('Form submitted!', 'alert-success', 2000);
+    console.log(formData());
+  };
+  
+  return Div({ class: 'flex flex-col gap-2' }, [
+    Accordion({
+      title: Span({ class: 'flex items-center gap-2' }, ['1️⃣', 'Personal Information']),
+      name: 'form-steps',
+      open: () => openStep() === 'step1',
+      onclick: () => openStep('step1')
+    }, [
+      Div({ class: 'p-4 space-y-4' }, [
+        Input({
+          label: 'Full Name',
+          value: () => formData().name,
+          placeholder: 'Enter your name',
+          oninput: (e) => updateField('name', e.target.value)
+        }),
+        Input({
+          label: 'Email',
+          type: 'email',
+          value: () => formData().email,
+          placeholder: 'email@example.com',
+          oninput: (e) => updateField('email', e.target.value)
+        }),
+        Div({ class: 'flex justify-end mt-2' }, [
+          Button({ 
+            class: 'btn btn-primary btn-sm',
+            onclick: nextStep,
+            disabled: () => !formData().name || !formData().email
+          }, 'Next →')
+        ])
+      ])
+    ]),
+    Accordion({
+      title: Span({ class: 'flex items-center gap-2' }, ['2️⃣', 'Address']),
+      name: 'form-steps',
+      open: () => openStep() === 'step2',
+      onclick: () => openStep('step2')
+    }, [
+      Div({ class: 'p-4 space-y-4' }, [
+        Input({
+          label: 'Address',
+          value: () => formData().address,
+          placeholder: 'Street address',
+          oninput: (e) => updateField('address', e.target.value)
+        }),
+        Div({ class: 'flex justify-between mt-2' }, [
+          Button({ class: 'btn btn-ghost btn-sm', onclick: prevStep }, '← Back'),
+          Button({ 
+            class: 'btn btn-primary btn-sm',
+            onclick: nextStep
+          }, 'Next →')
+        ])
+      ])
+    ]),
+    Accordion({
+      title: Span({ class: 'flex items-center gap-2' }, ['3️⃣', 'Payment']),
+      name: 'form-steps',
+      open: () => openStep() === 'step3',
+      onclick: () => openStep('step3')
+    }, [
+      Div({ class: 'p-4 space-y-4' }, [
+        Div({ class: 'flex flex-col gap-2' }, [
+          Radio({
+            label: 'Credit Card',
+            value: () => formData().payment,
+            radioValue: 'credit',
+            onclick: () => updateField('payment', 'credit')
+          }),
+          Radio({
+            label: 'PayPal',
+            value: () => formData().payment,
+            radioValue: 'paypal',
+            onclick: () => updateField('payment', 'paypal')
+          }),
+          Radio({
+            label: 'Bank Transfer',
+            value: () => formData().payment,
+            radioValue: 'bank',
+            onclick: () => updateField('payment', 'bank')
+          })
+        ]),
+        Div({ class: 'flex justify-between mt-2' }, [
+          Button({ class: 'btn btn-ghost btn-sm', onclick: prevStep }, '← Back'),
+          Button({ class: 'btn btn-success btn-sm', onclick: handleSubmit }, 'Submit')
+        ])
+      ])
+    ])
+  ]);
+};
+Mount(FormAccordion, '#demo-form');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-6"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  const open1 = $(true);
+  const open2 = $(false);
+  const open3 = $(false);
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({ class: 'text-sm font-bold' }, 'Default Accordion'),
+    Div({ class: 'flex flex-col gap-2' }, [
+      Accordion({ title: 'Default style', open: open1, onclick: () => open1(!open1()) }, [
+        Div({ class: 'p-2' }, 'Default accordion with standard styling.')
+      ])
+    ]),
+    
+    Div({ class: 'text-sm font-bold mt-2' }, 'Custom Styling'),
+    Div({ class: 'flex flex-col gap-2' }, [
+      Accordion({ 
+        title: Span({ class: 'text-primary font-bold' }, 'Primary Title'),
+        open: open2,
+        onclick: () => open2(!open2()),
+        class: 'bg-primary/5 border-primary/20'
+      }, [
+        Div({ class: 'p-2' }, 'Accordion with custom styling and primary color.')
+      ])
+    ]),
+    
+    Div({ class: 'text-sm font-bold mt-2' }, 'With Icons'),
+    Div({ class: 'flex flex-col gap-2' }, [
+      Accordion({ 
+        title: Span({ class: 'flex items-center gap-2' }, ['✨', 'Featured Content']),
+        open: open3,
+        onclick: () => open3(!open3())
+      }, [
+        Div({ class: 'p-2' }, 'Accordion with emoji icons in the title.')
+      ])
+    ])
+  ]);
+};
+Mount(VariantsDemo, '#demo-variants');
+```

docs/components/alert.md

@@ -0,0 +1,314 @@
+# Alert
+
+Alert component for displaying contextual messages, notifications, and feedback with different severity levels. Supports soft and solid variants.
+
+## Tag
+
+`Alert`
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `type` | `string` | `'info'` | Alert type: `'info'`, `'success'`, `'warning'`, `'error'` |
+| `soft` | `boolean \| Signal<boolean>` | `true` | Use soft variant (subtle background) |
+| `actions` | `VNode \| function` | `-` | Optional action buttons or content |
+| `message` | `string \| VNode \| Signal` | `-` | Alert message content |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
+| `children` | `string \| VNode` | `-` | Alert content (alternative to `message`) |
+
+## Styling
+
+Alert supports all **daisyUI Alert classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Color | `alert-info`, `alert-success`, `alert-warning`, `alert-error` | Alert type variants |
+| Style | `alert-soft` (default), `alert-solid` | Visual style variants |
+
+> For further details, check the [daisyUI Alert Documentation](https://daisyui.com/components/alert) – Full reference for CSS classes.
+
+### Example
+
+```javascript
+Alert({ 
+  type: "success", 
+  soft: false,
+  class: "shadow-lg",
+  message: "Operation completed!"
+});
+// Applies: solid success alert with shadow
+```
+
+## Live Examples
+
+### Basic Alerts
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-3"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  return Div({ class: 'flex flex-col gap-3' }, [
+    Alert({ type: 'info', message: 'This is an informational message.' }),
+    Alert({ type: 'success', message: 'Operation completed successfully!' }),
+    Alert({ type: 'warning', message: 'Please review your input before proceeding.' }),
+    Alert({ type: 'error', message: 'An error occurred while processing your request.' })
+  ]);
+};
+Mount(BasicDemo, '#demo-basic');
+```
+
+### Soft vs Solid Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-3"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  return Div({ class: 'flex flex-col gap-3' }, [
+    Alert({ type: 'info', soft: true, message: 'Soft info alert (default)' }),
+    Alert({ type: 'info', soft: false, message: 'Solid info alert' }),
+    Alert({ type: 'success', soft: true, message: 'Soft success alert' }),
+    Alert({ type: 'success', soft: false, message: 'Solid success alert' })
+  ]);
+};
+Mount(VariantsDemo, '#demo-variants');
+```
+
+### With Actions
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-actions" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-3"></div>
+  </div>
+</div>
+
+```javascript
+const ActionsDemo = () => {
+  const showUndo = $(false);
+  const deletedItem = $(null);
+  
+  const deleteItem = (item) => {
+    deletedItem(item);
+    showUndo(true);
+    setTimeout(() => {
+      if (showUndo()) {
+        showUndo(false);
+        Toast('Item permanently deleted', 'alert-info', 2000);
+      }
+    }, 5000);
+  };
+  
+  const undoDelete = () => {
+    showUndo(false);
+    Toast(`Restored: ${deletedItem()}`, 'alert-success', 2000);
+  };
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({ class: 'flex gap-2' }, [
+      Button({ class: 'btn btn-sm', onclick: () => deleteItem('Document A') }, 'Delete Document A'),
+      Button({ class: 'btn btn-sm', onclick: () => deleteItem('Document B') }, 'Delete Document B')
+    ]),
+    () => showUndo() ? Alert({
+      type: 'warning',
+      soft: true,
+      message: `Deleted: ${deletedItem()}`,
+      actions: Button({ 
+        class: 'btn btn-sm btn-primary',
+        onclick: undoDelete
+      }, 'Undo')
+    }) : null
+  ]);
+};
+Mount(ActionsDemo, '#demo-actions');
+```
+
+### Dismissible Alert
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-dismissible" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-3"></div>
+  </div>
+</div>
+
+```javascript
+const DismissibleDemo = () => {
+  const visible = $(true);
+  
+  return Div({ class: 'flex flex-col gap-3' }, [
+    () => visible() ? Alert({
+      type: 'info',
+      message: 'This alert can be dismissed. Click the X button to close.',
+      actions: Button({ 
+        class: 'btn btn-xs btn-circle btn-ghost',
+        onclick: () => visible(false)
+      }, '✕')
+    }) : null,
+    () => !visible() ? Button({ 
+      class: 'btn btn-sm btn-ghost',
+      onclick: () => visible(true)
+    }, 'Show Alert') : null
+  ]);
+};
+Mount(DismissibleDemo, '#demo-dismissible');
+```
+
+### Reactive Alert
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const ReactiveDemo = () => {
+  const email = $('');
+  const error = $('');
+  
+  const validateEmail = (value) => {
+    email(value);
+    if (value && !value.includes('@')) {
+      error('Please enter a valid email address');
+    } else {
+      error('');
+    }
+  };
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Input({
+      label: 'Email Address',
+      placeholder: 'Enter your email',
+      value: email,
+      oninput: (e) => validateEmail(e.target.value)
+    }),
+    () => error() ? Alert({ type: 'error', message: error() }) : null,
+    () => email() && !error() ? Alert({ 
+      type: 'success', 
+      message: `Valid email: ${email()}` 
+    }) : null
+  ]);
+};
+Mount(ReactiveDemo, '#demo-reactive');
+```
+
+### Form Validation
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-form" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const FormDemo = () => {
+  const name = $('');
+  const email = $('');
+  const submitted = $(false);
+  const errors = $({ name: '', email: '' });
+  
+  const validate = () => {
+    const newErrors = {
+      name: name().trim() ? '' : 'Name is required',
+      email: email().trim() ? (email().includes('@') ? '' : 'Invalid email') : 'Email is required'
+    };
+    errors(newErrors);
+    return !newErrors.name && !newErrors.email;
+  };
+  
+  const handleSubmit = () => {
+    if (validate()) {
+      submitted(true);
+      setTimeout(() => submitted(false), 3000);
+      Toast('Form submitted successfully!', 'alert-success', 2000);
+    }
+  };
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({ class: 'text-lg font-bold' }, 'Contact Form'),
+    Input({
+      label: 'Name',
+      value: name,
+      error: () => errors().name,
+      oninput: (e) => {
+        name(e.target.value);
+        validate();
+      }
+    }),
+    Input({
+      label: 'Email',
+      value: email,
+      error: () => errors().email,
+      oninput: (e) => {
+        email(e.target.value);
+        validate();
+      }
+    }),
+    Button({ class: 'btn btn-primary', onclick: handleSubmit }, 'Submit'),
+    () => submitted() ? Alert({ 
+      type: 'success', 
+      message: 'Thank you! We will contact you soon.' 
+    }) : null,
+    () => (errors().name || errors().email) ? Alert({ 
+      type: 'error', 
+      message: 'Please fix the errors above before submitting.' 
+    }) : null
+  ]);
+};
+Mount(FormDemo, '#demo-form');
+```
+
+### Icon Alerts
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-icons" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-3"></div>
+  </div>
+</div>
+
+```javascript
+const IconsDemo = () => {
+  return Div({ class: 'flex flex-col gap-3' }, [
+    Alert({ type: 'info', message: 'Information alert with custom icon' }),
+    Alert({ type: 'success', message: 'Success alert with custom icon' }),
+    Alert({ type: 'warning', message: 'Warning alert with custom icon' }),
+    Alert({ type: 'error', message: 'Error alert with custom icon' })
+  ]);
+};
+Mount(IconsDemo, '#demo-icons');
+```
+
+### All Types
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-all" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-3"></div>
+  </div>
+</div>
+
+```javascript
+const AllTypesDemo = () => {
+  return Div({ class: 'flex flex-col gap-3' }, [
+    Alert({ type: 'info', message: 'ℹ️ This is an info alert' }),
+    Alert({ type: 'success', message: '✅ This is a success alert' }),
+    Alert({ type: 'warning', message: '⚠️ This is a warning alert' }),
+    Alert({ type: 'error', message: '❌ This is an error alert' })
+  ]);
+};
+Mount(AllTypesDemo, '#demo-all');
+```

docs/components/autocomplete.md

@@ -0,0 +1,212 @@
+# Autocomplete
+
+Searchable dropdown with autocomplete functionality, keyboard navigation, and reactive items.
+
+## Tag
+
+`Autocomplete`
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `class` | `string` | `''` | Additional CSS classes for the container |
+| `items` | `Array<string \| {value: string, label: string}> \| Signal` | `[]` | Items to search from |
+| `value` | `string \| Signal<string>` | `''` | Selected value (reactive) |
+| `onselect` | `function(item)` | `-` | Called when an option is selected |
+| `label` | `string` | `-` | Label text for the input |
+| `placeholder` | `string` | `'Search...'` | Placeholder text |
+
+## Styling
+
+Autocomplete wraps a **daisyUI Input component** internally. All Input styling classes work:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Color | `input-primary`, `input-secondary`, `input-accent`, `input-ghost`, `input-info`, `input-success`, `input-warning`, `input-error` | Input color variants |
+| Size | `input-xs`, `input-sm`, `input-md`, `input-lg` | Input scale |
+| Style | `input-bordered` (default), `input-ghost` | Visual style variants |
+
+> For further details, check the [daisyUI Input Documentation](https://daisyui.com/components/input) – Full reference for CSS classes.
+
+## Live Examples
+
+### Basic Autocomplete
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  const selected = $('');
+  const fruits = ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry', 'Mango', 'Pineapple', 'Watermelon'];
+  
+  return Autocomplete({
+    items: fruits,
+    value: selected,
+    onselect: (value) => selected(value)
+  });
+};
+Mount(BasicDemo, '#demo-basic');
+```
+
+### With Objects
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-objects" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const ObjectsDemo = () => {
+  const selected = $('');
+  const selectedLabel = $('');
+  
+  const countries = [
+    { value: 'mx', label: 'Mexico' },
+    { value: 'us', label: 'United States' },
+    { value: 'ca', label: 'Canada' },
+    { value: 'br', label: 'Brazil' },
+    { value: 'ar', label: 'Argentina' },
+    { value: 'es', label: 'Spain' }
+  ];
+  
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Autocomplete({
+      items: countries,
+      value: selectedLabel,
+      onselect: (item) => {
+        const selectedItem = typeof item === 'string' 
+          ? countries.find(c => c.label === item) 
+          : item;
+        selected(selectedItem?.value || '');
+        selectedLabel(selectedItem?.label || '');
+      }
+    }),
+    Div({ class: 'alert alert-success' }, [
+      () => `Selected: ${selected()} - ${selectedLabel()}`
+    ])
+  ]);
+};
+Mount(ObjectsDemo, '#demo-objects');
+```
+
+### With Reactive Display
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const ReactiveDemo = () => {
+  const selected = $('');
+  
+  const programmingLanguages = [
+    'JavaScript', 'Python', 'Java', 'C++', 'Ruby', 'Go', 'Rust', 'TypeScript', 'Swift', 'Kotlin'
+  ];
+  
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Autocomplete({
+      items: programmingLanguages,
+      value: selected,
+      onselect: (value) => selected(value)
+    }),
+    () => selected() ? Div({ class: 'alert alert-info' }, [
+      `You selected: ${selected()}`
+    ]) : null
+  ]);
+};
+Mount(ReactiveDemo, '#demo-reactive');
+```
+
+### Dynamic Items
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-dynamic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const DynamicDemo = () => {
+  const selected = $('');
+  const filterType = $('all');
+  
+  const allItems = {
+    fruits: ['Apple', 'Banana', 'Orange', 'Mango'],
+    vegetables: ['Carrot', 'Broccoli', 'Spinach', 'Potato'],
+    all: ['Apple', 'Banana', 'Orange', 'Mango', 'Carrot', 'Broccoli', 'Spinach', 'Potato']
+  };
+  
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Select({
+      items: [
+        { value: 'all', label: 'All items' },
+        { value: 'fruits', label: 'Fruits' },
+        { value: 'vegetables', label: 'Vegetables' }
+      ],
+      value: filterType,
+      onchange: (e) => filterType(e.target.value)
+    }),
+    Autocomplete({
+      items: () => allItems[filterType()],
+      value: selected,
+      onselect: (value) => selected(value)
+    })
+  ]);
+};
+Mount(DynamicDemo, '#demo-dynamic');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  const colors = ['Red', 'Blue', 'Green', 'Yellow', 'Purple', 'Orange', 'Pink', 'Brown', 'Black', 'White'];
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({}, [
+      Autocomplete({
+        class: 'input-primary',
+        items: colors,
+        value: $(''),
+        placeholder: 'Search colors...'
+      })
+    ]),
+    Div({}, [
+      Autocomplete({
+        class: 'input-secondary',
+        items: colors,
+        value: $(''),
+        placeholder: 'Search colors...'
+      })
+    ]),
+    Div({}, [
+      Autocomplete({
+        class: 'input-ghost',
+        items: colors,
+        value: $(''),
+        placeholder: 'Search colors...'
+      })
+    ])
+  ]);
+};
+Mount(VariantsDemo, '#demo-variants');
+```

docs/components/badge.md

@@ -0,0 +1,323 @@
+# Badge
+
+Badge component for displaying counts, labels, and status indicators.
+
+## Tag
+
+`Badge`
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI badge variants) |
+| `children` | `string \| VNode` | `-` | Badge content |
+
+## Styling
+
+Badge supports all **daisyUI Badge classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Color | `badge-primary`, `badge-secondary`, `badge-accent`, `badge-info`, `badge-success`, `badge-warning`, `badge-error` | Visual color variants |
+| Size | `badge-xs`, `badge-sm`, `badge-md`, `badge-lg` | Badge scale |
+| Style | `badge-outline`, `badge-ghost`, `badge-dash` | Visual style variants |
+
+> For further details, check the [daisyUI Badge Documentation](https://daisyui.com/components/badge) – Full reference for CSS classes.
+
+### Example
+
+```javascript
+Badge({ class: "badge-primary badge-lg" }, "New");
+// Applies: primary color, large size
+```
+
+## Live Examples
+
+### Basic Badge
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-2"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-2' }, [
+    Badge({}, 'Default'),
+    Badge({ class: 'badge-primary' }, 'Primary'),
+    Badge({ class: 'badge-secondary' }, 'Secondary'),
+    Badge({ class: 'badge-accent' }, 'Accent'),
+    Badge({ class: 'badge-info' }, 'Info'),
+    Badge({ class: 'badge-success' }, 'Success'),
+    Badge({ class: 'badge-warning' }, 'Warning'),
+    Badge({ class: 'badge-error' }, 'Error')
+  ]);
+};
+Mount(BasicDemo, '#demo-basic');
+```
+
+### Badge Sizes
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-sizes" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-2 items-center"></div>
+  </div>
+</div>
+
+```javascript
+const SizesDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-2 items-center' }, [
+    Badge({ class: 'badge-xs' }, 'Extra Small'),
+    Badge({ class: 'badge-sm' }, 'Small'),
+    Badge({}, 'Default'),
+    Badge({ class: 'badge-md' }, 'Medium'),
+    Badge({ class: 'badge-lg' }, 'Large')
+  ]);
+};
+Mount(SizesDemo, '#demo-sizes');
+```
+
+### Outline Badges
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-outline" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-2"></div>
+  </div>
+</div>
+
+```javascript
+const OutlineDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-2' }, [
+    Badge({ class: 'badge-outline' }, 'Default'),
+    Badge({ class: 'badge-outline badge-primary' }, 'Primary'),
+    Badge({ class: 'badge-outline badge-secondary' }, 'Secondary'),
+    Badge({ class: 'badge-outline badge-accent' }, 'Accent'),
+    Badge({ class: 'badge-outline badge-info' }, 'Info'),
+    Badge({ class: 'badge-outline badge-success' }, 'Success'),
+    Badge({ class: 'badge-outline badge-warning' }, 'Warning'),
+    Badge({ class: 'badge-outline badge-error' }, 'Error')
+  ]);
+};
+Mount(OutlineDemo, '#demo-outline');
+```
+
+### Ghost Badges
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-ghost" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-2"></div>
+  </div>
+</div>
+
+```javascript
+const GhostDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-2' }, [
+    Badge({ class: 'badge-ghost' }, 'Default'),
+    Badge({ class: 'badge-ghost badge-primary' }, 'Primary'),
+    Badge({ class: 'badge-ghost badge-secondary' }, 'Secondary'),
+    Badge({ class: 'badge-ghost badge-accent' }, 'Accent'),
+    Badge({ class: 'badge-ghost badge-info' }, 'Info'),
+    Badge({ class: 'badge-ghost badge-success' }, 'Success'),
+    Badge({ class: 'badge-ghost badge-warning' }, 'Warning'),
+    Badge({ class: 'badge-ghost badge-error' }, 'Error')
+  ]);
+};
+Mount(GhostDemo, '#demo-ghost');
+```
+
+### With Icons
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-icons" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-2"></div>
+  </div>
+</div>
+
+```javascript
+const IconsDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-2' }, [
+    Badge({ class: 'gap-1' }, [
+      Span({}, '✓'),
+      Span({}, 'Success')
+    ]),
+    Badge({ class: 'gap-1 badge-warning' }, [
+      Span({}, '⚠'),
+      Span({}, 'Warning')
+    ]),
+    Badge({ class: 'gap-1 badge-error' }, [
+      Span({}, '✗'),
+      Span({}, 'Error')
+    ]),
+    Badge({ class: 'gap-1 badge-info' }, [
+      Span({}, 'ℹ'),
+      Span({}, 'Info')
+    ]),
+    Badge({ class: 'gap-1' }, [
+      Span({}, '★'),
+      Span({}, '4.5')
+    ])
+  ]);
+};
+Mount(IconsDemo, '#demo-icons');
+```
+
+### Status Badges
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-status" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const StatusDemo = () => {
+  const statuses = [
+    { label: 'Active', class: 'badge-success' },
+    { label: 'Pending', class: 'badge-warning' },
+    { label: 'Completed', class: 'badge-info' },
+    { label: 'Failed', class: 'badge-error' },
+    { label: 'Archived', class: 'badge-ghost' }
+  ];
+  
+  return Div({ class: 'flex flex-col gap-2' }, [
+    Div({ class: 'text-sm font-bold mb-2' }, 'Order Status'),
+    Div({ class: 'flex flex-wrap gap-2' }, statuses.map(status =>
+      Badge({ class: status.class }, status.label)
+    ))
+  ]);
+};
+Mount(StatusDemo, '#demo-status');
+```
+
+### Count Badges
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-count" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4 items-center"></div>
+  </div>
+</div>
+
+```javascript
+const CountDemo = () => {
+  const notifications = $(3);
+  const messages = $(5);
+  const updates = $(0);
+  
+  return Div({ class: 'flex flex-wrap gap-6' }, [
+    Div({ class: 'flex items-center gap-2' }, [
+      Span({}, 'Notifications'),
+      Badge({ class: 'badge-primary' }, () => notifications())
+    ]),
+    Div({ class: 'flex items-center gap-2' }, [
+      Span({}, 'Messages'),
+      Badge({ class: 'badge-secondary' }, () => messages())
+    ]),
+    Div({ class: 'flex items-center gap-2' }, [
+      Span({}, 'Updates'),
+      Badge({ class: 'badge-ghost' }, () => updates() || '0')
+    ])
+  ]);
+};
+Mount(CountDemo, '#demo-count');
+```
+
+### Interactive Badge
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-interactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const InteractiveDemo = () => {
+  const count = $(0);
+  
+  return Div({ class: 'flex flex-col gap-4 items-center' }, [
+    Div({ class: 'flex items-center gap-4' }, [
+      Button({ class: 'btn btn-sm', onclick: () => count(count() - 1) }, '-'),
+      Badge({ class: 'badge-primary text-lg min-w-[4rem] justify-center' }, () => count()),
+      Button({ class: 'btn btn-sm', onclick: () => count(count() + 1) }, '+')
+    ]),
+    Button({ 
+      class: 'btn btn-ghost btn-sm',
+      onclick: () => count(0)
+    }, 'Reset')
+  ]);
+};
+Mount(InteractiveDemo, '#demo-interactive');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  return Div({ class: 'flex flex-col gap-6' }, [
+    Div({ class: 'flex flex-wrap gap-2' }, [
+      Badge({ class: 'badge-xs' }, 'XS'),
+      Badge({ class: 'badge-sm' }, 'SM'),
+      Badge({}, 'MD'),
+      Badge({ class: 'badge-lg' }, 'LG')
+    ]),
+    Div({ class: 'flex flex-wrap gap-2' }, [
+      Badge({ class: 'badge-primary badge-sm' }, 'Primary'),
+      Badge({ class: 'badge-secondary badge-sm' }, 'Secondary'),
+      Badge({ class: 'badge-accent badge-sm' }, 'Accent')
+    ]),
+    Div({ class: 'flex flex-wrap gap-2' }, [
+      Badge({ class: 'badge-outline badge-primary' }, 'Outline'),
+      Badge({ class: 'badge-ghost badge-primary' }, 'Ghost')
+    ])
+  ]);
+};
+Mount(VariantsDemo, '#demo-variants');
+```
+
+### Inline with Text
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-inline" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const InlineDemo = () => {
+  return Div({ class: 'space-y-2' }, [
+    Div({ class: 'text-sm' }, [
+      'Your order is ',
+      Badge({ class: 'badge-success badge-sm' }, 'Confirmed'),
+      ' and will be shipped soon.'
+    ]),
+    Div({ class: 'text-sm' }, [
+      'This feature is ',
+      Badge({ class: 'badge-warning badge-sm' }, 'Beta'),
+      ' and may change.'
+    ]),
+    Div({ class: 'text-sm' }, [
+      'Version ',
+      Badge({ class: 'badge-info badge-xs' }, 'v2.1.0'),
+      ' released on March 2026'
+    ])
+  ]);
+};
+Mount(InlineDemo, '#demo-inline');
+```

docs/components/button.md

@@ -1,100 +1,160 @@
 # 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 |
+| Prop       | Type                         | Description                                            |
+| :--------- | :--------------------------- | :----------------------------------------------------- |
+| `class`    | `string`                     | Additional CSS classes                                 |
+| `loading`  | `boolean \| Signal<boolean>` | Shows a spinner and disables the button                |
+| `disabled` | `boolean \| Signal<boolean>` | Disabled state                                         |
+| `icon`     | `string \| VNode \| Signal`  | Icon displayed before the text                         |
+| `onclick`  | `function`                   | Click event handler                                    |
+| `type`     | `string`                     | Native button type (`'button'`, `'submit'`, `'reset'`) |
 
-## Live Examples
+---
+
+## Classes (daisyUI)
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Color | `btn-primary`, `btn-secondary`, `btn-accent`, `btn-ghost`, `btn-info`, `btn-success`, `btn-warning`, `btn-error` | Visual color variants |
+| Size | `btn-xs`, `btn-sm`, `btn-md`, `btn-lg`, `btn-xl` | Button scale |
+| Style | `btn-outline`, `btn-soft`, `btn-dash`, `btn-link` | Visual style variants |
+| Shape | `btn-circle`, `btn-square`, `btn-wide`, `btn-block` | Button shape |
+| State | `btn-active`, `btn-disabled` | Forced visual states |
+
+> SigProUI supports styling via daisyUI independently or combined with the `ui` prop.
+> For further details, check the [daisyUI Button Documentation](https://daisyui.com/components/button) – Full reference for CSS classes.
+
+### Example
+
+```javascript
+Button({ class: "btn-primary btn-lg btn-circle gap-4"}, "Click Me");
+// Applies: primary color, large size, circular shape
+// class is any css class from pure css or favorite framework
+```
+
+---
+
+## Examples
 
 ### Basic Button
 
-<div id="demo-basic"></div>
+<div id="demo-basic" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
 
 ```javascript
-Button({ class: "btn-primary" }, "Click Me")
+const BasicDemo = () => {
+  return Button({ class: "btn-primary" }, "Click Me");
+};
+Mount(BasicDemo, "#demo-basic");
 ```
 
 ### With Loading State
 
-<div id="demo-loading"></div>
+<div id="demo-loading" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
 
 ```javascript
+const LoadingDemo = () => {
   const isSaving = $(false);
 
-Button({
+  return Button(
+    {
       class: "btn-success",
       loading: isSaving,
       onclick: async () => {
         isSaving(true);
-    await saveData();
+        await new Promise((resolve) => setTimeout(resolve, 2000));
         isSaving(false);
-  }
-}, "Save Changes")
+      },
+    },
+    "Save Changes",
+  );
+};
+Mount(LoadingDemo, "#demo-loading");
 ```
 
-### With Badge
+### With Icon
 
-<div id="demo-badge"></div>
+<div id="demo-icon" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
 
 ```javascript
-Button({
-  class: "btn-outline",
-  badge: "3",
-  badgeClass: "badge-accent"
-}, "Notifications")
+const IconDemo = () => {
+  return Button(
+    {
+      class: "btn-primary",
+      icon: "⭐",
+    },
+    "Favorite",
+  );
+};
+Mount(IconDemo, "#demo-icon");
+```
+
+### With Badge (using Indicator)
+
+<div id="demo-badge" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+
+```javascript
+const BadgeDemo = () => {
+  return Indicator(
+    { value: "3", class: "badge-accent" },
+    Button({ class: "btn-outline" }, "Notifications"),
+  );
+};
+Mount(BadgeDemo, "#demo-badge");
 ```
 
 ### With Tooltip
 
-<div id="demo-tooltip"></div>
+<div id="demo-tooltip" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
 
 ```javascript
-Button({
-  class: "btn-ghost",
-  tooltip: "Delete item"
-}, "Delete")
+const TooltipDemo = () => {
+  return Tooltip({ tip: "Delete item" }, Button({ class: "btn-ghost" }, "Delete"));
+};
+Mount(TooltipDemo, "#demo-tooltip");
 ```
 
-### Disabled State
+### Combined (Badge + Tooltip)
 
-<div id="demo-disabled"></div>
+<div id="demo-combined" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
 
 ```javascript
-const isDisabled = $(true);
-
-Button({
-  class: "btn-primary",
-  disabled: isDisabled
-}, "Submit")
+const CombinedDemo = () => {
+  const count = $(0);
+  return Tooltip(
+    { tip: () => `${count()} likes` },
+    Indicator(
+      { value: count, class: "badge-accent" },
+      Button(
+        {
+          class: "btn-primary btn-lg",
+          icon: "👍",
+          onclick: () => count(count() + 1),
+        },
+        "Like",
+      )
+    ),
+  );
+};
+Mount(CombinedDemo, "#demo-combined");
 ```
 
-### All Variants
+### All Color Variants
 
-<div id="demo-variants"></div>
+<div id="demo-variants" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
 
 ```javascript
-Div({ class: "flex flex-wrap gap-2" }, [
+const VariantsDemo = () => {
+  return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
     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-outline" }, "Outline"),
+  ]);
+};
+Mount(VariantsDemo, "#demo-variants");
 ```

docs/components/checkbox.md

@@ -0,0 +1,292 @@
+# Checkbox
+
+Toggle checkbox component with label support and reactive state management.
+
+## Tag
+
+`Checkbox`
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `label` | `string` | `-` | Label text for the checkbox |
+| `value` | `boolean \| Signal<boolean>` | `false` | Checked state |
+| `toggle` | `boolean` | `false` | Display as toggle switch instead of checkbox |
+| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
+| `onclick` | `function` | `-` | Click event handler |
+
+## Styling
+
+Checkbox supports all **daisyUI Checkbox and Toggle classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Color (Checkbox) | `checkbox-primary`, `checkbox-secondary`, `checkbox-accent`, `checkbox-info`, `checkbox-success`, `checkbox-warning`, `checkbox-error` | Checkbox color variants |
+| Size (Checkbox) | `checkbox-xs`, `checkbox-sm`, `checkbox-md`, `checkbox-lg` | Checkbox scale |
+| Color (Toggle) | `toggle-primary`, `toggle-secondary`, `toggle-accent`, `toggle-info`, `toggle-success`, `toggle-warning`, `toggle-error` | Toggle color variants |
+| Size (Toggle) | `toggle-xs`, `toggle-sm`, `toggle-md`, `toggle-lg` | Toggle scale |
+
+> For further details, check the [daisyUI Checkbox Documentation](https://daisyui.com/components/checkbox) and [daisyUI Toggle Documentation](https://daisyui.com/components/toggle) – Full reference for CSS classes.
+
+### Example
+
+```javascript
+// Checkbox
+Checkbox({ class: "checkbox-primary checkbox-lg", label: "Accept terms" });
+
+// Toggle switch
+Checkbox({ toggle: true, class: "toggle-success", label: "Enable feature" });
+```
+
+## Live Examples
+
+### Basic Checkbox
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  const accepted = $(false);
+  
+  return Checkbox({
+    label: 'I accept the terms and conditions',
+    value: accepted,
+    onclick: () => accepted(!accepted())
+  });
+};
+Mount(BasicDemo, '#demo-basic');
+```
+
+### Toggle Switch
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-toggle" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const ToggleDemo = () => {
+  const enabled = $(false);
+  
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Checkbox({
+      label: 'Enable notifications',
+      value: enabled,
+      toggle: true,
+      onclick: () => enabled(!enabled())
+    }),
+    () => enabled() 
+      ? Div({ class: 'alert alert-success' }, 'Notifications are ON')
+      : Div({ class: 'alert alert-soft' }, 'Notifications are OFF')
+  ]);
+};
+Mount(ToggleDemo, '#demo-toggle');
+```
+
+### Disabled State
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-disabled" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const DisabledDemo = () => {
+  return Div({ class: 'flex flex-col gap-3' }, [
+    Checkbox({
+      label: 'Checked and disabled',
+      value: true,
+      disabled: true
+    }),
+    Checkbox({
+      label: 'Unchecked and disabled',
+      value: false,
+      disabled: true
+    })
+  ]);
+};
+Mount(DisabledDemo, '#demo-disabled');
+```
+
+### Reactive Multiple Selection
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-multiple" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const MultipleDemo = () => {
+  const options = [
+    { id: 1, label: 'Option 1', selected: $(false) },
+    { id: 2, label: 'Option 2', selected: $(false) },
+    { id: 3, label: 'Option 3', selected: $(false) }
+  ];
+  
+  const selectAll = $(false);
+  
+  const toggleAll = (value) => {
+    selectAll(value);
+    options.forEach(opt => opt.selected(value));
+  };
+  
+  const updateSelectAll = () => {
+    const allSelected = options.every(opt => opt.selected());
+    selectAll(allSelected);
+  };
+  
+  return Div({ class: 'flex flex-col gap-3' }, [
+    Checkbox({
+      label: 'Select all',
+      value: selectAll,
+      onclick: () => toggleAll(!selectAll())
+    }),
+    Div({ class: 'divider my-1' }),
+    ...options.map(opt => Checkbox({
+      label: opt.label,
+      value: opt.selected,
+      onclick: () => {
+        opt.selected(!opt.selected());
+        updateSelectAll();
+      }
+    })),
+    Div({ class: 'mt-2 text-sm opacity-70' }, () => {
+      const count = options.filter(opt => opt.selected()).length;
+      return `${count} of ${options.length} selected`;
+    })
+  ]);
+};
+Mount(MultipleDemo, '#demo-multiple');
+```
+
+### With Tooltip
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-tooltip" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const TooltipDemo = () => {
+  const accepted = $(false);
+  
+  return Tooltip({ 
+    tip: "You must accept the terms to continue" 
+  }, 
+    Checkbox({
+      label: 'I accept the terms',
+      value: accepted,
+      onclick: () => accepted(!accepted())
+    })
+  );
+};
+Mount(TooltipDemo, '#demo-tooltip');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  const variant1 = $(true);
+  const variant2 = $(false);
+  const variant3 = $(true);
+  
+  return Div({ class: 'flex flex-col gap-3' }, [
+    Div({ class: 'flex items-center gap-4' }, [
+      Checkbox({
+        label: 'Primary',
+        value: variant1,
+        class: 'checkbox-primary',
+        onclick: () => variant1(!variant1())
+      }),
+      Checkbox({
+        label: 'Secondary',
+        value: variant2,
+        class: 'checkbox-secondary',
+        onclick: () => variant2(!variant2())
+      })
+    ]),
+    Div({ class: 'flex items-center gap-4' }, [
+      Checkbox({
+        label: 'Accent',
+        value: variant3,
+        class: 'checkbox-accent',
+        onclick: () => variant3(!variant3())
+      }),
+      Checkbox({
+        label: 'Toggle switch',
+        value: $(false),
+        toggle: true,
+        class: 'toggle-primary'
+      })
+    ])
+  ]);
+};
+Mount(VariantsDemo, '#demo-variants');
+```
+
+### Form Example
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-form" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const FormDemo = () => {
+  const subscribe = $(false);
+  const weekly = $(false);
+  const monthly = $(true);
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({ class: 'text-sm font-bold' }, 'Newsletter preferences'),
+    Checkbox({
+      label: 'Subscribe to newsletter',
+      value: subscribe,
+      onclick: () => subscribe(!subscribe())
+    }),
+    () => subscribe() ? Div({ class: 'ml-6 flex flex-col gap-2' }, [
+      Checkbox({
+        label: 'Weekly updates',
+        value: weekly,
+        onclick: () => weekly(!weekly())
+      }),
+      Checkbox({
+        label: 'Monthly digest',
+        value: monthly,
+        onclick: () => monthly(!monthly())
+      })
+    ]) : null,
+    () => subscribe() && (weekly() || monthly())
+      ? Div({ class: 'alert alert-success text-sm mt-2' }, 'You will receive updates!')
+      : subscribe()
+      ? Div({ class: 'alert alert-warning text-sm mt-2' }, 'Select at least one frequency')
+      : null
+  ]);
+};
+Mount(FormDemo, '#demo-form');
+```

docs/components/colorpicker.md

@@ -0,0 +1,225 @@
+# Colorpicker
+
+Color picker component with preset color palette, reactive value binding, and customizable appearance.
+
+## Tag
+
+`Colorpicker`
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `label` | `string` | `-` | Label text for the button |
+| `value` | `string \| Signal<string>` | `'#000000'` | Selected color value (hex format) |
+| `class` | `string` | `''` | Additional CSS classes (Tailwind + custom styling) |
+
+## Styling
+
+Colorpicker is a custom component built with Tailwind CSS. The button supports standard **daisyUI Button classes** for consistent styling:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Size | `btn-xs`, `btn-sm`, `btn-md`, `btn-lg` | Button scale |
+| Style | `btn-outline`, `btn-soft`, `btn-ghost` | Visual style variants |
+
+> For further details, check the [daisyUI Button Documentation](https://daisyui.com/components/button) – The color picker button accepts standard button styling classes.
+
+## Live Examples
+
+### Basic Colorpicker
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  const color = $('#3b82f6');
+  
+  return Colorpicker({
+    label: 'Pick a color',
+    value: color
+  });
+};
+Mount(BasicDemo, '#demo-basic');
+```
+
+### With Reactive Preview
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-preview" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const PreviewDemo = () => {
+  const color = $('#10b981');
+  
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Colorpicker({
+      label: 'Choose color',
+      value: color
+    }),
+    Div({ 
+      class: 'w-full h-20 rounded-lg shadow-inner transition-all duration-200 flex items-center justify-center',
+      style: () => `background-color: ${color()}`
+    }, [
+      Div({ class: 'text-center font-mono text-sm bg-black/20 px-2 py-1 rounded' }, () => color())
+    ])
+  ]);
+};
+Mount(PreviewDemo, '#demo-preview');
+```
+
+### Color Palette Grid
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-palette" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const PaletteDemo = () => {
+  const selectedColor = $('#ef4444');
+  const presets = [
+    '#ef4444', '#f97316', '#f59e0b', '#eab308',
+    '#84cc16', '#10b981', '#14b8a6', '#06b6d4',
+    '#3b82f6', '#6366f1', '#8b5cf6', '#d946ef',
+    '#ec489a', '#f43f5e', '#6b7280', '#1f2937'
+  ];
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Colorpicker({
+      label: 'Custom color',
+      value: selectedColor
+    }),
+    Div({ class: 'divider text-xs' }, 'Or choose from palette'),
+    Div({ class: 'grid grid-cols-8 gap-2' }, presets.map(color => 
+      Button({
+        class: `w-8 h-8 rounded-lg shadow-sm transition-transform hover:scale-110`,
+        style: `background-color: ${color}`,
+        onclick: () => selectedColor(color)
+      })
+    )),
+    Div({ class: 'mt-2 text-center text-sm font-mono' }, () => selectedColor())
+  ]);
+};
+Mount(PaletteDemo, '#demo-palette');
+```
+
+### With Text Color Preview
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-text" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const TextDemo = () => {
+  const bgColor = $('#1e293b');
+  const textColor = $('#f8fafc');
+  
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Div({ class: 'flex gap-4' }, [
+      Colorpicker({
+        label: 'Background',
+        value: bgColor
+      }),
+      Colorpicker({
+        label: 'Text',
+        value: textColor
+      })
+    ]),
+    Div({ 
+      class: 'p-6 rounded-lg text-center font-bold transition-all duration-200',
+      style: () => `background-color: ${bgColor()}; color: ${textColor()}`
+    }, [
+      'Preview text with your colors'
+    ])
+  ]);
+};
+Mount(TextDemo, '#demo-text');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-4 items-center' }, [
+    Colorpicker({
+      label: 'Primary',
+      value: $('#3b82f6')
+    }),
+    Colorpicker({
+      label: 'Success',
+      value: $('#10b981')
+    }),
+    Colorpicker({
+      label: 'Warning',
+      value: $('#f59e0b')
+    }),
+    Colorpicker({
+      label: 'Error',
+      value: $('#ef4444')
+    })
+  ]);
+};
+Mount(VariantsDemo, '#demo-variants');
+```
+
+### Dynamic Color Swatch
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-dynamic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const DynamicDemo = () => {
+  const primary = $('#3b82f6');
+  const secondary = $('#ef4444');
+  const accent = $('#10b981');
+  
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Div({ class: 'flex flex-wrap gap-4' }, [
+      Colorpicker({ label: 'Primary', value: primary }),
+      Colorpicker({ label: 'Secondary', value: secondary }),
+      Colorpicker({ label: 'Accent', value: accent })
+    ]),
+    Div({ class: 'grid grid-cols-3 gap-2 mt-2' }, [
+      Div({ 
+        class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
+        style: () => `background-color: ${primary()}`
+      }, 'Primary'),
+      Div({ 
+        class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
+        style: () => `background-color: ${secondary()}`
+      }, 'Secondary'),
+      Div({ 
+        class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
+        style: () => `background-color: ${accent()}`
+      }, 'Accent')
+    ])
+  ]);
+};
+Mount(DynamicDemo, '#demo-dynamic');
+```

docs/components/datepicker.md

@@ -0,0 +1,205 @@
+# Datepicker
+
+Date and date range picker component with calendar interface, time selection, and reactive state management.
+
+## Tag
+
+`Datepicker`
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `label` | `string` | `-` | Label text for the input |
+| `value` | `string \| {start: string, end: string} \| Signal` | `-` | Selected date or range |
+| `range` | `boolean` | `false` | Enable date range selection mode |
+| `hour` | `boolean` | `false` | Enable hour selection |
+| `placeholder` | `string` | `'Select date...'` | Placeholder text |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
+
+## Styling
+
+Datepicker wraps a **daisyUI Input component** internally. All Input styling classes work:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Color | `input-primary`, `input-secondary`, `input-accent`, `input-ghost`, `input-info`, `input-success`, `input-warning`, `input-error` | Input color variants |
+| Size | `input-xs`, `input-sm`, `input-md`, `input-lg` | Input scale |
+| Style | `input-bordered` (default), `input-ghost` | Visual style variants |
+
+> For further details, check the [daisyUI Input Documentation](https://daisyui.com/components/input) – Full reference for CSS classes.
+
+## Live Examples
+
+### Basic Datepicker
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  const date = $('');
+  
+  return Datepicker({
+    label: 'Select date',
+    value: date,
+    placeholder: 'Choose a date...'
+  });
+};
+Mount(BasicDemo, '#demo-basic');
+```
+
+### Date Range Picker
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-range" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const RangeDemo = () => {
+  const range = $({ start: '', end: '' });
+  
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Datepicker({
+      label: 'Date range',
+      value: range,
+      range: true,
+      placeholder: 'Select start and end date...'
+    }),
+    () => range().start && range().end ? Div({ class: 'alert alert-success' }, [
+      `Selected: ${range().start} → ${range().end}`
+    ]) : null
+  ]);
+};
+Mount(RangeDemo, '#demo-range');
+```
+
+### With Time Selection
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-time" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const TimeDemo = () => {
+  const datetime = $('');
+  
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Datepicker({
+      label: 'Select date and time',
+      value: datetime,
+      hour: true,
+      placeholder: 'Choose date and time...'
+    }),
+    () => datetime() ? Div({ class: 'alert alert-info' }, [
+      `Selected: ${datetime()}`
+    ]) : null
+  ]);
+};
+Mount(TimeDemo, '#demo-time');
+```
+
+### Range with Time
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-range-time" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const RangeTimeDemo = () => {
+  const range = $({ start: '', end: '', startHour: 9, endHour: 17 });
+  
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Datepicker({
+      label: 'Schedule range',
+      value: range,
+      range: true,
+      hour: true,
+      placeholder: 'Select date and time range...'
+    }),
+    () => range().start && range().end ? Div({ class: 'alert alert-primary' }, [
+      `From ${range().start} ${range().startHour || 9}:00 to ${range().end} ${range().endHour || 17}:00`
+    ]) : null
+  ]);
+};
+Mount(RangeTimeDemo, '#demo-range-time');
+```
+
+### Reactive Display
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const ReactiveDemo = () => {
+  const date = $('');
+  const today = new Date().toISOString().split('T')[0];
+  
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Datepicker({
+      label: 'Select date',
+      value: date,
+      placeholder: 'Choose a date...'
+    }),
+    Div({ class: 'stats shadow' }, [
+      Div({ class: 'stat' }, [
+        Div({ class: 'stat-title' }, 'Selected date'),
+        Div({ class: 'stat-value text-sm' }, () => date() || 'Not selected'),
+        Div({ class: 'stat-desc' }, () => date() === today ? 'Today' : '')
+      ])
+    ])
+  ]);
+};
+Mount(ReactiveDemo, '#demo-reactive');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Datepicker({
+      label: 'Single date',
+      value: $('2024-12-25'),
+      placeholder: 'Select date...'
+    }),
+    Datepicker({
+      label: 'Date range',
+      range: true,
+      value: $({ start: '2024-12-01', end: '2024-12-31' }),
+      placeholder: 'Select range...'
+    }),
+    Datepicker({
+      label: 'With time',
+      hour: true,
+      value: $('2024-12-25T14:00:00'),
+      placeholder: 'Select date and time...'
+    })
+  ]);
+};
+Mount(VariantsDemo, '#demo-variants');
+```

docs/components/drawer.md

@@ -0,0 +1,493 @@
+# Drawer
+
+Drawer component for creating off-canvas side panels with overlay and toggle functionality.
+
+## Tag
+
+`Drawer`
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `id` | `string` | Required | Unique identifier for the drawer |
+| `open` | `boolean \| Signal<boolean>` | `false` | Drawer open state |
+| `side` | `VNode` | Required | Content to display in the drawer panel |
+| `content` | `VNode` | Required | Main page content |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
+
+## Styling
+
+Drawer supports all **daisyUI Drawer classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Position | `drawer-end` | Drawer opens from the right side |
+| Width | `w-64`, `w-80`, `w-96` | Custom drawer width (Tailwind) |
+
+> For further details, check the [daisyUI Drawer Documentation](https://daisyui.com/components/drawer) – Full reference for CSS classes.
+
+## Live Examples
+
+### Basic Drawer
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  const isOpen = $(false);
+  
+  return Drawer({
+    id: 'basic-drawer',
+    open: isOpen,
+    side: Div({ class: 'p-4' }, [
+      Div({ class: 'text-lg font-bold mb-4' }, 'Menu'),
+      Div({ class: 'flex flex-col gap-2' }, [
+        Button({ class: 'btn btn-ghost justify-start' }, 'Home'),
+        Button({ class: 'btn btn-ghost justify-start' }, 'About'),
+        Button({ class: 'btn btn-ghost justify-start' }, 'Contact')
+      ])
+    ]),
+    content: Div({ class: 'p-4 text-center' }, [
+      Button({ 
+        class: 'btn btn-primary',
+        onclick: () => isOpen(true)
+      }, 'Open Drawer')
+    ])
+  });
+};
+Mount(BasicDemo, '#demo-basic');
+```
+
+### Navigation Drawer
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-nav" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const NavDrawer = () => {
+  const isOpen = $(false);
+  const activePage = $('home');
+  
+  const pages = {
+    home: 'Welcome to the Home Page!',
+    about: 'About Us - Learn more about our company',
+    services: 'Our Services - What we offer',
+    contact: 'Contact Us - Get in touch'
+  };
+  
+  return Drawer({
+    id: 'nav-drawer',
+    open: isOpen,
+    side: Div({ class: 'p-4 w-64' }, [
+      Div({ class: 'text-xl font-bold mb-6' }, 'MyApp'),
+      Div({ class: 'flex flex-col gap-1' }, [
+        Button({ 
+          class: `btn btn-ghost justify-start ${activePage() === 'home' ? 'btn-active' : ''}`,
+          onclick: () => {
+            activePage('home');
+            isOpen(false);
+          }
+        }, '🏠 Home'),
+        Button({ 
+          class: `btn btn-ghost justify-start ${activePage() === 'about' ? 'btn-active' : ''}`,
+          onclick: () => {
+            activePage('about');
+            isOpen(false);
+          }
+        }, 'ℹ️ About'),
+        Button({ 
+          class: `btn btn-ghost justify-start ${activePage() === 'services' ? 'btn-active' : ''}`,
+          onclick: () => {
+            activePage('services');
+            isOpen(false);
+          }
+        }, '⚙️ Services'),
+        Button({ 
+          class: `btn btn-ghost justify-start ${activePage() === 'contact' ? 'btn-active' : ''}`,
+          onclick: () => {
+            activePage('contact');
+            isOpen(false);
+          }
+        }, '📧 Contact')
+      ])
+    ]),
+    content: Div({ class: 'p-4' }, [
+      Div({ class: 'flex justify-between items-center mb-4' }, [
+        Button({ 
+          class: 'btn btn-ghost btn-circle',
+          onclick: () => isOpen(true)
+        }, '☰'),
+        Span({ class: 'text-lg font-bold' }, 'MyApp')
+      ]),
+      Div({ class: 'card bg-base-200 shadow-lg' }, [
+        Div({ class: 'card-body' }, [
+          Div({ class: 'text-2xl font-bold mb-2' }, () => activePage().charAt(0).toUpperCase() + activePage().slice(1)),
+          Div({ class: 'text-lg' }, () => pages[activePage()])
+        ])
+      ])
+    ])
+  });
+};
+Mount(NavDrawer, '#demo-nav');
+```
+
+### Settings Drawer
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-settings" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const SettingsDrawer = () => {
+  const isOpen = $(false);
+  const darkMode = $(false);
+  const notifications = $(true);
+  const autoSave = $(false);
+  
+  return Drawer({
+    id: 'settings-drawer',
+    open: isOpen,
+    side: Div({ class: 'p-4 w-80' }, [
+      Div({ class: 'flex justify-between items-center mb-6' }, [
+        Span({ class: 'text-xl font-bold' }, 'Settings'),
+        Button({ 
+          class: 'btn btn-ghost btn-circle btn-sm',
+          onclick: () => isOpen(false)
+        }, '✕')
+      ]),
+      Div({ class: 'flex flex-col gap-4' }, [
+        Div({ class: 'flex justify-between items-center' }, [
+          Span({}, 'Dark Mode'),
+          Swap({
+            value: darkMode,
+            on: "🌙",
+            off: "☀️",
+            onclick: () => darkMode(!darkMode())
+          })
+        ]),
+        Div({ class: 'flex justify-between items-center' }, [
+          Span({}, 'Notifications'),
+          Swap({
+            value: notifications,
+            on: "🔔",
+            off: "🔕",
+            onclick: () => notifications(!notifications())
+          })
+        ]),
+        Div({ class: 'flex justify-between items-center' }, [
+          Span({}, 'Auto Save'),
+          Swap({
+            value: autoSave,
+            on: "✅",
+            off: "⭕",
+            onclick: () => autoSave(!autoSave())
+          })
+        ])
+      ]),
+      Div({ class: 'divider my-4' }),
+      Div({ class: 'flex gap-2' }, [
+        Button({ 
+          class: 'btn btn-primary flex-1',
+          onclick: () => {
+            isOpen(false);
+            Toast('Settings saved!', 'alert-success', 2000);
+          }
+        }, 'Save'),
+        Button({ 
+          class: 'btn btn-ghost flex-1',
+          onclick: () => isOpen(false)
+        }, 'Cancel')
+      ])
+    ]),
+    content: Div({ class: 'p-4' }, [
+      Div({ class: 'flex justify-between items-center' }, [
+        Span({ class: 'text-lg font-bold' }, 'Dashboard'),
+        Button({ 
+          class: 'btn btn-ghost btn-circle',
+          onclick: () => isOpen(true)
+        }, '⚙️')
+      ]),
+      Div({ class: 'mt-4 grid grid-cols-2 gap-4' }, [
+        Div({ class: 'stat bg-base-200 rounded-lg p-4' }, [
+          Div({ class: 'stat-title' }, 'Users'),
+          Div({ class: 'stat-value' }, '1,234')
+        ]),
+        Div({ class: 'stat bg-base-200 rounded-lg p-4' }, [
+          Div({ class: 'stat-title' }, 'Revenue'),
+          Div({ class: 'stat-value' }, '$45K')
+        ])
+      ])
+    ])
+  });
+};
+Mount(SettingsDrawer, '#demo-settings');
+```
+
+### Cart Drawer
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-cart" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const CartDrawer = () => {
+  const isOpen = $(false);
+  const cart = $([
+    { id: 1, name: 'Product 1', price: 29, quantity: 2 },
+    { id: 2, name: 'Product 2', price: 49, quantity: 1 }
+  ]);
+  
+  const updateQuantity = (id, delta) => {
+    cart(cart().map(item => {
+      if (item.id === id) {
+        const newQty = Math.max(0, item.quantity + delta);
+        return newQty === 0 ? null : { ...item, quantity: newQty };
+      }
+      return item;
+    }).filter(Boolean));
+  };
+  
+  const total = () => cart().reduce((sum, item) => sum + (item.price * item.quantity), 0);
+  
+  return Drawer({
+    id: 'cart-drawer',
+    open: isOpen,
+    side: Div({ class: 'flex flex-col h-full' }, [
+      Div({ class: 'p-4 border-b border-base-300' }, [
+        Div({ class: 'flex justify-between items-center' }, [
+          Span({ class: 'text-xl font-bold' }, `Cart (${cart().length} items)`),
+          Button({ 
+            class: 'btn btn-ghost btn-circle btn-sm',
+            onclick: () => isOpen(false)
+          }, '✕')
+        ])
+      ]),
+      Div({ class: 'flex-1 overflow-y-auto p-4' }, cart().length === 0 
+        ? Div({ class: 'text-center text-gray-500 mt-8' }, 'Your cart is empty')
+        : Div({ class: 'flex flex-col gap-3' }, cart().map(item =>
+          Div({ class: 'flex gap-3 items-center p-2 bg-base-200 rounded-lg' }, [
+            Div({ class: 'flex-1' }, [
+              Div({ class: 'font-medium' }, item.name),
+              Div({ class: 'text-sm' }, `$${item.price} each`)
+            ]),
+            Div({ class: 'flex items-center gap-2' }, [
+              Button({ 
+                class: 'btn btn-xs btn-circle',
+                onclick: () => updateQuantity(item.id, -1)
+              }, '-'),
+              Span({ class: 'w-8 text-center' }, item.quantity),
+              Button({ 
+                class: 'btn btn-xs btn-circle',
+                onclick: () => updateQuantity(item.id, 1)
+              }, '+')
+            ]),
+            Span({ class: 'font-bold w-16 text-right' }, `$${item.price * item.quantity}`)
+          ])
+        ))
+      ),
+      Div({ class: 'p-4 border-t border-base-300' }, [
+        Div({ class: 'flex justify-between items-center mb-4' }, [
+          Span({ class: 'font-bold' }, 'Total'),
+          Span({ class: 'text-xl font-bold' }, () => `$${total()}`)
+        ]),
+        Button({ 
+          class: 'btn btn-primary w-full',
+          onclick: () => {
+            isOpen(false);
+            Toast('Checkout initiated!', 'alert-success', 2000);
+          },
+          disabled: () => cart().length === 0
+        }, 'Checkout')
+      ])
+    ]),
+    content: Div({ class: 'p-4' }, [
+      Div({ class: 'flex justify-between items-center' }, [
+        Span({ class: 'text-lg font-bold' }, 'Store'),
+        Button({ 
+          class: 'btn btn-primary',
+          onclick: () => isOpen(true)
+        }, () => `🛒 Cart (${cart().length})`)
+      ]),
+      Div({ class: 'mt-4 grid grid-cols-2 gap-4' }, [
+        Button({ 
+          class: 'btn btn-outline h-32 flex flex-col',
+          onclick: () => {
+            cart([...cart(), { id: Date.now(), name: 'New Product', price: 39, quantity: 1 }]);
+            Toast('Added to cart!', 'alert-success', 1500);
+          }
+        }, ['📦', 'Add to Cart'])
+      ])
+    ])
+  });
+};
+Mount(CartDrawer, '#demo-cart');
+```
+
+### Responsive Drawer
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-responsive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const ResponsiveDrawer = () => {
+  const isOpen = $(false);
+  const activePage = $('home');
+  
+  const MenuItems = () => Div({ class: 'flex flex-col gap-1 p-4' }, [
+    Button({ 
+      class: `btn btn-ghost justify-start ${activePage() === 'home' ? 'btn-active' : ''}`,
+      onclick: () => {
+        activePage('home');
+        if (window.innerWidth < 1024) isOpen(false);
+      }
+    }, '🏠 Home'),
+    Button({ 
+      class: `btn btn-ghost justify-start ${activePage() === 'analytics' ? 'btn-active' : ''}`,
+      onclick: () => {
+        activePage('analytics');
+        if (window.innerWidth < 1024) isOpen(false);
+      }
+    }, '📊 Analytics'),
+    Button({ 
+      class: `btn btn-ghost justify-start ${activePage() === 'settings' ? 'btn-active' : ''}`,
+      onclick: () => {
+        activePage('settings');
+        if (window.innerWidth < 1024) isOpen(false);
+      }
+    }, '⚙️ Settings')
+  ]);
+  
+  return Drawer({
+    id: 'responsive-drawer',
+    open: isOpen,
+    side: Div({ class: 'w-64' }, [
+      Div({ class: 'text-xl font-bold p-4 border-b border-base-300' }, 'Menu'),
+      MenuItems()
+    ]),
+    content: Div({ class: 'flex' }, [
+      Div({ class: 'hidden lg:block w-64 border-r border-base-300' }, [MenuItems()]),
+      Div({ class: 'flex-1 p-4' }, [
+        Div({ class: 'flex justify-between items-center lg:hidden mb-4' }, [
+          Button({ 
+            class: 'btn btn-ghost btn-circle',
+            onclick: () => isOpen(true)
+          }, '☰'),
+          Span({ class: 'text-lg font-bold' }, 'MyApp')
+        ]),
+        Div({ class: 'card bg-base-200' }, [
+          Div({ class: 'card-body' }, [
+            Div({ class: 'text-2xl font-bold' }, () => activePage().charAt(0).toUpperCase() + activePage().slice(1)),
+            Div({}, 'Content area. On desktop, the menu is always visible on the left.')
+          ])
+        ])
+      ])
+    ])
+  });
+};
+Mount(ResponsiveDrawer, '#demo-responsive');
+```
+
+### Form Drawer
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-form" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const FormDrawer = () => {
+  const isOpen = $(false);
+  const name = $('');
+  const email = $('');
+  const message = $('');
+  
+  const handleSubmit = () => {
+    if (name() && email() && message()) {
+      Toast('Message sent!', 'alert-success', 2000);
+      isOpen(false);
+      name('');
+      email('');
+      message('');
+    } else {
+      Toast('Please fill all fields', 'alert-warning', 2000);
+    }
+  };
+  
+  return Drawer({
+    id: 'form-drawer',
+    open: isOpen,
+    side: Div({ class: 'p-4 w-96' }, [
+      Div({ class: 'flex justify-between items-center mb-4' }, [
+        Span({ class: 'text-xl font-bold' }, 'Contact Us'),
+        Button({ 
+          class: 'btn btn-ghost btn-circle btn-sm',
+          onclick: () => isOpen(false)
+        }, '✕')
+      ]),
+      Div({ class: 'flex flex-col gap-4' }, [
+        Input({
+          label: 'Name',
+          value: name,
+          placeholder: 'Your name',
+          oninput: (e) => name(e.target.value)
+        }),
+        Input({
+          label: 'Email',
+          type: 'email',
+          value: email,
+          placeholder: 'your@email.com',
+          oninput: (e) => email(e.target.value)
+        }),
+        Div({ class: 'form-control' }, [
+          Span({ class: 'label-text mb-1' }, 'Message'),
+          Tag('textarea', {
+            class: 'textarea textarea-bordered h-24',
+            placeholder: 'Your message',
+            value: message,
+            oninput: (e) => message(e.target.value)
+          })
+        ]),
+        Div({ class: 'flex gap-2 mt-2' }, [
+          Button({ 
+            class: 'btn btn-primary flex-1',
+            onclick: handleSubmit
+          }, 'Send'),
+          Button({ 
+            class: 'btn btn-ghost flex-1',
+            onclick: () => isOpen(false)
+          }, 'Cancel')
+        ])
+      ])
+    ]),
+    content: Div({ class: 'p-4 text-center' }, [
+      Button({ 
+        class: 'btn btn-primary',
+        onclick: () => isOpen(true)
+      }, 'Contact Us')
+    ])
+  });
+};
+Mount(FormDrawer, '#demo-form');
+```

docs/components/dropdown.md

@@ -0,0 +1,255 @@
+# Dropdown
+
+Dropdown component for creating menus that appear when triggered. Uses DaisyUI's native details/summary pattern.
+
+## Tag
+
+`Dropdown`
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `label` | `string \| VNode \| Signal` | `-` | Button label or content |
+| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed next to label |
+| `items` | `Array<MenuItem> \| Signal<Array>` | Required | Array of menu items |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
+
+### MenuItem Structure
+
+| Property | Type | Description |
+| :--- | :--- | :--- |
+| `label` | `string \| VNode` | Menu item text |
+| `icon` | `string \| VNode` | Optional icon for the menu item |
+| `onclick` | `function` | Click handler |
+| `class` | `string` | Additional CSS classes for the menu item |
+
+## Styling
+
+Dropdown supports all **daisyUI Dropdown classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Position | `dropdown-end` | Align dropdown to the right |
+| Direction | `dropdown-top`, `dropdown-bottom`, `dropdown-left`, `dropdown-right` | Dropdown open direction |
+| Hover | `dropdown-hover` | Open on hover instead of click |
+
+> For further details, check the [daisyUI Dropdown Documentation](https://daisyui.com/components/dropdown) – Full reference for CSS classes.
+
+### Example
+
+```javascript
+Dropdown({
+  label: "Menu",
+  class: "dropdown-end dropdown-hover",
+  items: [
+    { label: "Profile", onclick: () => console.log("Profile") },
+    { label: "Settings", onclick: () => console.log("Settings") }
+  ]
+});
+```
+
+## Live Examples
+
+### Basic Dropdown
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  return Dropdown({
+    label: 'Options',
+    items: [
+      { label: 'Profile', onclick: () => Toast('Profile clicked', 'alert-info', 2000) },
+      { label: 'Settings', onclick: () => Toast('Settings clicked', 'alert-info', 2000) },
+      { label: 'Logout', onclick: () => Toast('Logged out', 'alert-warning', 2000), class: 'text-error' }
+    ]
+  });
+};
+Mount(BasicDemo, '#demo-basic');
+```
+
+### With Icons
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-icons" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const IconsDemo = () => {
+  return Dropdown({
+    label: 'Menu',
+    icon: '☰',
+    items: [
+      { icon: '👤', label: 'Profile', onclick: () => Toast('Profile', 'alert-info', 2000) },
+      { icon: '⭐', label: 'Favorites', onclick: () => Toast('Favorites', 'alert-info', 2000) },
+      { icon: '📁', label: 'Documents', onclick: () => Toast('Documents', 'alert-info', 2000) },
+      { icon: '⚙️', label: 'Settings', onclick: () => Toast('Settings', 'alert-info', 2000) }
+    ]
+  });
+};
+Mount(IconsDemo, '#demo-icons');
+```
+
+### Action Dropdown
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-actions" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const ActionsDemo = () => {
+  const handleAction = (action) => {
+    Toast(`${action} action`, 'alert-info', 2000);
+  };
+  
+  return Dropdown({
+    label: 'Actions',
+    class: 'dropdown-end',
+    items: [
+      { icon: '✏️', label: 'Edit', onclick: () => handleAction('Edit') },
+      { icon: '📋', label: 'Copy', onclick: () => handleAction('Copy') },
+      { icon: '🗑️', label: 'Delete', onclick: () => handleAction('Delete'), class: 'text-error' }
+    ]
+  });
+};
+Mount(ActionsDemo, '#demo-actions');
+```
+
+### User Dropdown
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-user" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const UserDropdown = () => {
+  return Dropdown({
+    label: Span({ class: 'flex items-center gap-2' }, [
+      Div({ class: 'avatar placeholder' }, [
+        Div({ class: 'bg-primary text-primary-content rounded-full w-8 h-8 flex items-center justify-center text-sm' }, 'JD')
+      ]),
+      'John Doe'
+    ]),
+    class: 'dropdown-end',
+    items: [
+      { label: 'Profile', onclick: () => Toast('Profile', 'alert-info', 2000) },
+      { label: 'Settings', onclick: () => Toast('Settings', 'alert-info', 2000) },
+      { label: 'Sign Out', onclick: () => Toast('Signed out', 'alert-warning', 2000), class: 'text-error' }
+    ]
+  });
+};
+Mount(UserDropdown, '#demo-user');
+```
+
+### Reactive Items
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const ReactiveDropdown = () => {
+  const count = $(0);
+  const items = () => [
+    { label: `Count: ${count()}`, onclick: () => {} },
+    { label: 'Increment', onclick: () => count(count() + 1) },
+    { label: 'Decrement', onclick: () => count(count() - 1) },
+    { label: 'Reset', onclick: () => count(0) }
+  ];
+  
+  return Dropdown({
+    label: () => `Counter (${count()})`,
+    items: items
+  });
+};
+Mount(ReactiveDropdown, '#demo-reactive');
+```
+
+### Notification Dropdown
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-notifications" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const NotificationsDropdown = () => {
+  const notifications = $([
+    { id: 1, title: 'New message', time: '5 min ago', read: false },
+    { id: 2, title: 'Update available', time: '1 hour ago', read: false },
+    { id: 3, title: 'Task completed', time: '2 hours ago', read: true }
+  ]);
+  
+  const unreadCount = () => notifications().filter(n => !n.read).length;
+  
+  const markAsRead = (id) => {
+    notifications(notifications().map(n => 
+      n.id === id ? { ...n, read: true } : n
+    ));
+  };
+  
+  return Dropdown({
+    label: Span({ class: 'relative' }, [
+      '🔔',
+      () => unreadCount() > 0 ? Span({ class: 'badge badge-xs badge-error absolute -top-1 -right-2' }, unreadCount()) : null
+    ]),
+    class: 'dropdown-end',
+    items: () => notifications().map(notif => ({
+      label: Div({ class: 'flex flex-col' }, [
+        Span({ class: 'font-medium' }, notif.title),
+        Span({ class: 'text-xs opacity-60' }, notif.time)
+      ]),
+      class: notif.read ? '' : 'bg-primary/5',
+      onclick: () => markAsRead(notif.id)
+    }))
+  });
+};
+
+Mount(NotificationsDropdown, '#demo-notifications');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4 justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  const commonItems = [
+    { label: 'Item 1', onclick: () => Toast('Item 1', 'alert-info', 2000) },
+    { label: 'Item 2', onclick: () => Toast('Item 2', 'alert-info', 2000) },
+    { label: 'Item 3', onclick: () => Toast('Item 3', 'alert-info', 2000) }
+  ];
+  
+  return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
+    Dropdown({ label: 'Default', items: commonItems }),
+    Dropdown({ label: 'With Icon', icon: '☰', items: commonItems }),
+    Dropdown({ label: 'End Position', class: 'dropdown-end', items: commonItems })
+  ]);
+};
+Mount(VariantsDemo, '#demo-variants');
+```

docs/components/fab.md

@@ -0,0 +1,378 @@
+# Fab
+
+Floating Action Button (FAB) component for primary actions with expandable menu options.
+
+## Tag
+
+`Fab`
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `icon` | `string \| VNode \| Signal` | `-` | Main FAB icon |
+| `label` | `string \| VNode \| Signal` | `-` | Text label for main button |
+| `actions` | `Array<Action> \| Signal<Array>` | `[]` | Array of action buttons that expand from FAB |
+| `position` | `string` | `'bottom-6 right-6'` | CSS position classes (e.g., 'bottom-6 left-6') |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
+
+### Action Structure
+
+| Property | Type | Description |
+| :--- | :--- | :--- |
+| `label` | `string \| VNode` | Label text shown next to action button |
+| `icon` | `string \| VNode` | Icon for the action button |
+| `onclick` | `function` | Click handler |
+| `class` | `string` | Additional CSS classes for the action button |
+| `text` | `string` | Alternative text when no icon is provided |
+
+## Styling
+
+Fab uses **daisyUI Button classes** for styling the main button and action buttons:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Color | `btn-primary`, `btn-secondary`, `btn-accent`, `btn-info`, `btn-success`, `btn-warning`, `btn-error` | Visual color variants |
+| Size | `btn-xs`, `btn-sm`, `btn-md`, `btn-lg`, `btn-xl` | Button scale |
+| Shape | `btn-circle` | Circular button shape (default for FAB) |
+
+> For further details, check the [daisyUI FAB Documentation](https://daisyui.com/components/fab) – Full reference for CSS classes.
+
+### Example
+
+```javascript
+Fab({
+  icon: "➕",
+  class: "btn-primary btn-lg",
+  position: "bottom-6 right-6",
+  actions: [
+    { icon: "📝", label: "New Note", onclick: () => console.log("Create note") }
+  ]
+});
+```
+
+## Live Examples
+
+### Basic FAB
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[300px] relative"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
+    Fab({
+      icon: '➕',
+      actions: [
+        { icon: '📝', label: 'New Note', onclick: () => Toast('Create note', 'alert-info', 2000) },
+        { icon: '📷', label: 'Take Photo', onclick: () => Toast('Open camera', 'alert-info', 2000) },
+        { icon: '📎', label: 'Attach File', onclick: () => Toast('Attach file', 'alert-info', 2000) }
+      ]
+    })
+  ]);
+};
+Mount(BasicDemo, '#demo-basic');
+```
+
+### With Label
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-label" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[300px] relative"></div>
+  </div>
+</div>
+
+```javascript
+const LabelDemo = () => {
+  return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
+    Fab({
+      label: 'Create',
+      icon: '✨',
+      actions: [
+        { icon: '📝', label: 'Document', onclick: () => Toast('New document', 'alert-success', 2000) },
+        { icon: '🎨', label: 'Design', onclick: () => Toast('New design', 'alert-success', 2000) },
+        { icon: '📊', label: 'Spreadsheet', onclick: () => Toast('New spreadsheet', 'alert-success', 2000) }
+      ]
+    })
+  ]);
+};
+Mount(LabelDemo, '#demo-label');
+```
+
+### Different Positions
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-positions" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[500px] relative"></div>
+  </div>
+</div>
+
+```javascript
+const PositionsDemo = () => {
+  const position = $('bottom-6 right-6');
+  
+  return Div({ class: 'relative h-[500px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
+    Div({ class: 'absolute top-4 left-4 z-20 bg-base-200 p-2 rounded-lg shadow' }, [
+      Select({
+        items: [
+          { value: 'bottom-6 right-6', label: 'Bottom Right' },
+          { value: 'bottom-6 left-6', label: 'Bottom Left' },
+          { value: 'top-6 right-6', label: 'Top Right' },
+          { value: 'top-6 left-6', label: 'Top Left' }
+        ],
+        value: position,
+        onchange: (e) => position(e.target.value)
+      })
+    ]),
+    Div({ class: 'absolute inset-0 flex items-center justify-center text-sm opacity-50 pointer-events-none' }, [
+      'FAB position changes relative to this container'
+    ]),
+    Fab({
+      position: () => position(),
+      icon: '🧭',
+      actions: [
+        { icon: '⬅️', label: 'Bottom Left', onclick: () => position('bottom-6 left-6') },
+        { icon: '➡️', label: 'Bottom Right', onclick: () => position('bottom-6 right-6') },
+        { icon: '⬆️', label: 'Top Right', onclick: () => position('top-6 right-6') },
+        { icon: '⬇️', label: 'Top Left', onclick: () => position('top-6 left-6') }
+      ]
+    })
+  ]);
+};
+Mount(PositionsDemo, '#demo-positions');
+```
+
+### Color Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-colors" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[300px] relative"></div>
+  </div>
+</div>
+
+```javascript
+const ColorsDemo = () => {
+  const variant = $('primary');
+  
+  const variants = {
+    primary: { class: 'btn-primary', icon: '🔵' },
+    secondary: { class: 'btn-secondary', icon: '🟣' },
+    accent: { class: 'btn-accent', icon: '🔴' },
+    info: { class: 'btn-info', icon: '🔷' },
+    success: { class: 'btn-success', icon: '🟢' },
+    warning: { class: 'btn-warning', icon: '🟡' },
+    error: { class: 'btn-error', icon: '🔴' }
+  };
+  
+  return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
+    Div({ class: 'absolute top-4 left-4 z-20 bg-base-200 p-2 rounded-lg shadow' }, [
+      Select({
+        items: Object.keys(variants).map(v => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) })),
+        value: variant,
+        onchange: (e) => variant(e.target.value)
+      })
+    ]),
+    Fab({
+      class: variants[variant()].class,
+      icon: variants[variant()].icon,
+      actions: [
+        { icon: '📝', label: 'Action 1', onclick: () => Toast('Action 1', 'alert-info', 2000) },
+        { icon: '🎨', label: 'Action 2', onclick: () => Toast('Action 2', 'alert-info', 2000) },
+        { icon: '⚙️', label: 'Action 3', onclick: () => Toast('Action 3', 'alert-info', 2000) }
+      ]
+    })
+  ]);
+};
+Mount(ColorsDemo, '#demo-colors');
+```
+
+### Reactive Actions
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[300px] relative"></div>
+  </div>
+</div>
+
+```javascript
+const ReactiveActions = () => {
+  const count = $(0);
+  
+  const actions = () => [
+    { 
+      icon: '🔢', 
+      label: `Count: ${count()}`, 
+      onclick: () => {} 
+    },
+    { 
+      icon: '➕', 
+      label: 'Increment', 
+      onclick: () => count(count() + 1) 
+    },
+    { 
+      icon: '➖', 
+      label: 'Decrement', 
+      onclick: () => count(count() - 1) 
+    },
+    { 
+      icon: '🔄', 
+      label: 'Reset', 
+      onclick: () => count(0) 
+    }
+  ];
+  
+  return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
+    Fab({
+      icon: () => count() > 0 ? `🔢 ${count()}` : '🎛️',
+      actions: actions
+    })
+  ]);
+};
+Mount(ReactiveActions, '#demo-reactive');
+```
+
+### Document Actions
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-document" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[300px] relative"></div>
+  </div>
+</div>
+
+```javascript
+const DocumentActions = () => {
+  const saved = $(false);
+  
+  const handleSave = () => {
+    saved(true);
+    Toast('Document saved!', 'alert-success', 2000);
+    setTimeout(() => saved(false), 3000);
+  };
+  
+  return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
+    Div({ class: 'absolute inset-0 flex flex-col items-center justify-center' }, [
+      Div({ class: 'text-6xl mb-4' }, '📄'),
+      Div({ class: 'text-sm opacity-70' }, 'Untitled Document'),
+      () => saved() ? Div({ class: 'mt-4' }, Alert({ type: 'success', message: '✓ Saved successfully' })) : null
+    ]),
+    Fab({
+      icon: '✏️',
+      actions: [
+        { icon: '💾', label: 'Save', onclick: handleSave },
+        { icon: '📋', label: 'Copy', onclick: () => Toast('Copied!', 'alert-info', 2000) },
+        { icon: '✂️', label: 'Cut', onclick: () => Toast('Cut!', 'alert-info', 2000) },
+        { icon: '📎', label: 'Share', onclick: () => Toast('Share dialog', 'alert-info', 2000) }
+      ]
+    })
+  ]);
+};
+Mount(DocumentActions, '#demo-document');
+```
+
+### Messaging FAB
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-messaging" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[300px] relative"></div>
+  </div>
+</div>
+
+```javascript
+const MessagingFAB = () => {
+  const unread = $(3);
+  
+  return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
+    Div({ class: 'absolute inset-0 flex flex-col items-center justify-center' }, [
+      Div({ class: 'text-6xl mb-4' }, '💬'),
+      Div({ class: 'text-sm opacity-70' }, 'Messages'),
+      () => unread() > 0 ? Div({ class: 'badge badge-error mt-2' }, `${unread()} unread`) : null
+    ]),
+    Fab({
+      icon: () => `💬${unread() > 0 ? ` ${unread()}` : ''}`,
+      class: 'btn-primary',
+      actions: [
+        { 
+          icon: '👤', 
+          label: 'New Message', 
+          onclick: () => Toast('Start new conversation', 'alert-info', 2000) 
+        },
+        { 
+          icon: '👥', 
+          label: 'Group Chat', 
+          onclick: () => Toast('Create group', 'alert-info', 2000) 
+        },
+        { 
+          icon: '📞', 
+          label: 'Voice Call', 
+          onclick: () => Toast('Start call', 'alert-info', 2000) 
+        },
+        { 
+          icon: '📹', 
+          label: 'Video Call', 
+          onclick: () => Toast('Start video call', 'alert-info', 2000) 
+        },
+        { 
+          icon: '🔔', 
+          label: () => `Mark as read (${unread()})`, 
+          onclick: () => {
+            unread(0);
+            Toast('All messages read', 'alert-success', 2000);
+          } 
+        }
+      ]
+    })
+  ]);
+};
+Mount(MessagingFAB, '#demo-messaging');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[400px] relative"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  const actions = [
+    { icon: '⭐', label: 'Favorite', onclick: () => Toast('Favorited', 'alert-info', 2000) },
+    { icon: '🔔', label: 'Remind', onclick: () => Toast('Reminder set', 'alert-info', 2000) },
+    { icon: '📅', label: 'Schedule', onclick: () => Toast('Scheduled', 'alert-info', 2000) }
+  ];
+  
+  return Div({ class: 'relative h-[400px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
+    Div({ class: 'grid grid-cols-2 gap-4 p-4 h-full' }, [
+      Div({ class: 'relative border rounded-lg bg-base-200' }, [
+        Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Primary'),
+        Fab({ icon: '🔵', class: 'btn-primary', actions, position: 'bottom-6 left-6' })
+      ]),
+      Div({ class: 'relative border rounded-lg bg-base-200' }, [
+        Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Secondary'),
+        Fab({ icon: '🟣', class: 'btn-secondary', actions, position: 'bottom-6 right-6' })
+      ]),
+      Div({ class: 'relative border rounded-lg bg-base-200' }, [
+        Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Accent'),
+        Fab({ icon: '🔴', class: 'btn-accent', actions, position: 'top-6 left-6' })
+      ]),
+      Div({ class: 'relative border rounded-lg bg-base-200' }, [
+        Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Success'),
+        Fab({ icon: '🟢', class: 'btn-success', actions, position: 'top-6 right-6' })
+      ])
+    ])
+  ]);
+};
+Mount(VariantsDemo, '#demo-variants');
+```

docs/components/fieldset.md

@@ -0,0 +1,324 @@
+# Fieldset
+
+Fieldset component for grouping form fields with optional legend and consistent styling.
+
+## Tag
+
+`Fieldset`
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `legend` | `string \| VNode \| Signal` | `-` | Fieldset legend/title |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
+| `children` | `VNode \| Array<VNode>` | Required | Form fields or content inside the fieldset |
+
+## Styling
+
+Fieldset supports all **daisyUI Fieldset classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Base | `fieldset` | Base fieldset styling |
+| Color | `fieldset-primary`, `fieldset-secondary`, `fieldset-accent` | Border color variants |
+| Size | `fieldset-xs`, `fieldset-sm`, `fieldset-md`, `fieldset-lg` | Fieldset scale |
+
+> For further details, check the [daisyUI Fieldset Documentation](https://daisyui.com/components/fieldset) – Full reference for CSS classes.
+
+### Example
+
+```javascript
+Fieldset({
+  legend: "Personal Information",
+  class: "fieldset-primary w-full max-w-md"
+}, [
+  Input({ label: "Name", placeholder: "Enter your name" }),
+  Input({ label: "Email", type: "email" })
+]);
+```
+
+## Live Examples
+
+### Basic Fieldset
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  return Fieldset({
+    legend: 'User Information',
+    class: 'w-full max-w-md mx-auto'
+  }, [
+    Div({ class: 'space-y-4' }, [
+      Input({ label: 'Full Name', placeholder: 'Enter your name' }),
+      Input({ label: 'Email', type: 'email', placeholder: 'user@example.com' }),
+      Input({ label: 'Phone', type: 'tel', placeholder: '+1 234 567 890' })
+    ])
+  ]);
+};
+Mount(BasicDemo, '#demo-basic');
+```
+
+### With Reactive Legend
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const ReactiveDemo = () => {
+  const name = $('');
+  const email = $('');
+  const isValid = () => name().length > 0 && email().includes('@');
+  
+  return Fieldset({
+    legend: () => isValid() ? '✓ Valid Form' : '✗ Incomplete Form',
+    class: 'w-full max-w-md mx-auto'
+  }, [
+    Div({ class: 'space-y-4' }, [
+      Input({ 
+        label: 'Full Name', 
+        value: name,
+        oninput: (e) => name(e.target.value),
+        placeholder: 'Enter your name'
+      }),
+      Input({ 
+        label: 'Email', 
+        type: 'email',
+        value: email,
+        oninput: (e) => email(e.target.value),
+        placeholder: 'user@example.com'
+      }),
+      () => isValid() 
+        ? Alert({ type: 'success', message: 'Form is ready to submit' })
+        : Alert({ type: 'warning', message: 'Please fill all required fields' })
+    ])
+  ]);
+};
+Mount(ReactiveDemo, '#demo-reactive');
+```
+
+### Address Form
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-address" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const AddressDemo = () => {
+  const address = $('');
+  const city = $('');
+  const zip = $('');
+  const country = $('us');
+  
+  return Fieldset({
+    legend: Span({ class: 'flex items-center gap-2' }, ['📍', 'Shipping Address']),
+    class: 'w-full max-w-md mx-auto'
+  }, [
+    Div({ class: 'space-y-4' }, [
+      Input({ label: 'Street Address', value: address, placeholder: '123 Main St', oninput: (e) => address(e.target.value) }),
+      Div({ class: 'grid grid-cols-2 gap-4' }, [
+        Input({ label: 'City', value: city, placeholder: 'City', oninput: (e) => city(e.target.value) }),
+        Input({ label: 'ZIP Code', value: zip, placeholder: 'ZIP', oninput: (e) => zip(e.target.value) })
+      ]),
+      Select({
+        label: 'Country',
+        value: country,
+        items: [
+          { value: 'us', label: 'United States' },
+          { value: 'ca', label: 'Canada' },
+          { value: 'mx', label: 'Mexico' }
+        ],
+        onchange: (e) => country(e.target.value)
+      })
+    ])
+  ]);
+};
+Mount(AddressDemo, '#demo-address');
+```
+
+### Payment Method
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-payment" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const PaymentDemo = () => {
+  const method = $('credit');
+  const cardNumber = $('');
+  const expiry = $('');
+  const cvv = $('');
+  
+  return Fieldset({
+    legend: Span({ class: 'flex items-center gap-2' }, ['💳', 'Payment Details']),
+    class: 'w-full max-w-md mx-auto'
+  }, [
+    Div({ class: 'space-y-4' }, [
+      Div({ class: 'flex gap-4' }, [
+        Radio({ label: 'Credit Card', value: method, inputValue: 'credit', onclick: () => method('credit') }),
+        Radio({ label: 'PayPal', value: method, inputValue: 'paypal', onclick: () => method('paypal') }),
+        Radio({ label: 'Bank Transfer', value: method, inputValue: 'bank', onclick: () => method('bank') })
+      ]),
+      () => method() === 'credit' ? Div({ class: 'space-y-4' }, [
+        Input({ label: 'Card Number', value: cardNumber, placeholder: '1234 5678 9012 3456', oninput: (e) => cardNumber(e.target.value) }),
+        Div({ class: 'grid grid-cols-2 gap-4' }, [
+          Input({ label: 'Expiry Date', value: expiry, placeholder: 'MM/YY', oninput: (e) => expiry(e.target.value) }),
+          Input({ label: 'CVV', type: 'password', value: cvv, placeholder: '123', oninput: (e) => cvv(e.target.value) })
+        ])
+      ]) : null,
+      () => method() === 'paypal' ? Alert({ type: 'info', message: 'You will be redirected to PayPal after confirming.' }) : null,
+      () => method() === 'bank' ? Alert({ type: 'warning', message: 'Bank transfer details will be sent via email.' }) : null
+    ])
+  ]);
+};
+Mount(PaymentDemo, '#demo-payment');
+```
+
+### Preferences Panel
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-preferences" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const PreferencesDemo = () => {
+  const theme = $('light');
+  const language = $('en');
+  const notifications = $(true);
+  
+  return Fieldset({
+    legend: Span({ class: 'flex items-center gap-2' }, ['⚙️', 'Preferences']),
+    class: 'w-full max-w-md mx-auto'
+  }, [
+    Div({ class: 'space-y-4' }, [
+      Div({ class: 'form-control' }, [
+        Span({ class: 'label-text mb-2' }, 'Theme'),
+        Div({ class: 'flex gap-4' }, [
+          Radio({ label: 'Light', value: theme, inputValue: 'light', onclick: () => theme('light') }),
+          Radio({ label: 'Dark', value: theme, inputValue: 'dark', onclick: () => theme('dark') }),
+          Radio({ label: 'System', value: theme, inputValue: 'system', onclick: () => theme('system') })
+        ])
+      ]),
+      Select({
+        label: 'Language',
+        value: language,
+        items: [
+          { value: 'en', label: 'English' },
+          { value: 'es', label: 'Español' },
+          { value: 'fr', label: 'Français' }
+        ],
+        onchange: (e) => language(e.target.value)
+      }),
+      Checkbox({
+        label: 'Enable notifications',
+        value: notifications,
+        onclick: () => notifications(!notifications())
+      })
+    ])
+  ]);
+};
+Mount(PreferencesDemo, '#demo-preferences');
+```
+
+### Registration Form
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-registration" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const RegistrationDemo = () => {
+  const username = $('');
+  const email = $('');
+  const password = $('');
+  const confirmPassword = $('');
+  const accepted = $(false);
+  
+  const passwordsMatch = () => password() === confirmPassword();
+  const isFormValid = () => username() && email().includes('@') && password().length >= 6 && passwordsMatch() && accepted();
+  
+  const handleSubmit = () => {
+    if (isFormValid()) {
+      Toast('Registration successful!', 'alert-success', 2000);
+    }
+  };
+  
+  return Fieldset({
+    legend: Span({ class: 'flex items-center gap-2' }, ['📝', 'Create Account']),
+    class: 'w-full max-w-md mx-auto'
+  }, [
+    Div({ class: 'space-y-4' }, [
+      Input({ label: 'Username', value: username, placeholder: 'Choose a username', oninput: (e) => username(e.target.value) }),
+      Input({ label: 'Email', type: 'email', value: email, placeholder: 'your@email.com', oninput: (e) => email(e.target.value) }),
+      Input({ label: 'Password', type: 'password', value: password, placeholder: 'Min. 6 characters', oninput: (e) => password(e.target.value) }),
+      Input({ 
+        label: 'Confirm Password', 
+        type: 'password', 
+        value: confirmPassword, 
+        error: () => confirmPassword() && !passwordsMatch() ? 'Passwords do not match' : '',
+        oninput: (e) => confirmPassword(e.target.value)
+      }),
+      Checkbox({
+        label: 'I accept the Terms and Conditions',
+        value: accepted,
+        onclick: () => accepted(!accepted())
+      }),
+      () => !isFormValid() && (username() || email() || password()) ? Alert({ type: 'warning', message: 'Please complete all fields correctly' }) : null,
+      Button({ 
+        class: 'btn btn-primary w-full', 
+        onclick: handleSubmit,
+        disabled: () => !isFormValid()
+      }, 'Register')
+    ])
+  ]);
+};
+Mount(RegistrationDemo, '#demo-registration');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  const commonContent = Div({ class: 'space-y-4' }, [
+    Input({ label: 'Field 1', placeholder: 'Enter value' }),
+    Input({ label: 'Field 2', placeholder: 'Enter value' }),
+    Button({ class: 'btn btn-primary' }, 'Submit')
+  ]);
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Fieldset({ legend: 'Default Fieldset', class: 'w-full' }, [commonContent]),
+    Fieldset({ legend: 'With Shadow', class: 'w-full shadow-lg' }, [commonContent]),
+    Fieldset({ legend: 'With Background', class: 'w-full bg-base-100' }, [commonContent])
+  ]);
+};
+Mount(VariantsDemo, '#demo-variants');
+```

docs/components/indicator.md

@@ -0,0 +1,284 @@
+# Indicator
+
+Indicator component for adding badges, status markers, or notifications to elements. Perfect for showing counts, online status, or alerts.
+
+## Tag
+
+`Indicator`
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `value` | `string \| VNode \| Signal` | `-` | Content to display as indicator |
+| `class` | `string` | `''` | Additional CSS classes for the badge |
+| `children` | `VNode` | `-` | Element to attach the indicator to |
+
+## Styling
+
+Indicator uses **daisyUI Indicator and Badge classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Position | `indicator-start`, `indicator-end`, `indicator-top`, `indicator-bottom` | Indicator position (default: top-end) |
+| Badge Color | `badge-primary`, `badge-secondary`, `badge-accent`, `badge-info`, `badge-success`, `badge-warning`, `badge-error` | Badge visual variants |
+| Badge Size | `badge-xs`, `badge-sm`, `badge-md`, `badge-lg` | Badge scale |
+
+> For further details, check the [daisyUI Indicator Documentation](https://daisyui.com/components/indicator) – Full reference for CSS classes.
+
+### Example
+
+```javascript
+Indicator({ value: "3", class: "badge-primary" },
+  Button({ class: "btn" }, "Notifications")
+);
+```
+
+## Live Examples
+
+### Basic Indicator
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
+    Indicator({ value: '3', class: 'badge-primary' },
+      Div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '📦')
+    ),
+    Indicator({ value: '99+', class: 'badge-secondary' },
+      Div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '🔔')
+    ),
+    Indicator({ value: 'New', class: 'badge-accent' },
+      Div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '✨')
+    )
+  ]);
+};
+Mount(BasicDemo, '#demo-basic');
+```
+
+### Online Status Indicator
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-status" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const StatusDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
+    Indicator({ value: '●', class: 'badge-success badge-xs' },
+      Div({ class: 'avatar placeholder' }, [
+        Div({ class: 'bg-neutral text-neutral-content rounded-full w-12 h-12 flex items-center justify-center' }, 'JD')
+      ])
+    ),
+    Indicator({ value: '●', class: 'badge-warning badge-xs' },
+      Div({ class: 'avatar placeholder' }, [
+        Div({ class: 'bg-neutral text-neutral-content rounded-full w-12 h-12 flex items-center justify-center' }, 'JS')
+      ])
+    ),
+    Indicator({ value: '●', class: 'badge-error badge-xs' },
+      Div({ class: 'avatar placeholder' }, [
+        Div({ class: 'bg-neutral text-neutral-content rounded-full w-12 h-12 flex items-center justify-center' }, 'BC')
+      ])
+    )
+  ]);
+};
+Mount(StatusDemo, '#demo-status');
+```
+
+### Reactive Counter
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4 items-center"></div>
+  </div>
+</div>
+
+```javascript
+const ReactiveDemo = () => {
+  const count = $(0);
+  
+  return Div({ class: 'flex flex-col gap-4 items-center' }, [
+    Indicator({ 
+      value: () => count() > 0 ? count() : null,
+      class: 'badge-primary'
+    },
+      Button({ 
+        class: 'btn btn-lg btn-primary',
+        onclick: () => count(count() + 1)
+      }, 'Notifications')
+    ),
+    Div({ class: 'flex gap-2' }, [
+      Button({ 
+        class: 'btn btn-sm',
+        onclick: () => count(Math.max(0, count() - 1))
+      }, 'Decrease'),
+      Button({ 
+        class: 'btn btn-sm btn-ghost',
+        onclick: () => count(0)
+      }, 'Clear')
+    ])
+  ]);
+};
+Mount(ReactiveDemo, '#demo-reactive');
+```
+
+### Shopping Cart
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-cart" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const CartDemo = () => {
+  const cart = $([
+    { id: 1, name: 'Product 1', price: 29 },
+    { id: 2, name: 'Product 2', price: 49 }
+  ]);
+  
+  const addItem = () => {
+    const newId = Math.max(...cart().map(i => i.id), 0) + 1;
+    cart([...cart(), { id: newId, name: `Product ${newId}`, price: Math.floor(Math.random() * 100) + 10 }]);
+    Toast('Item added to cart', 'alert-success', 1500);
+  };
+  
+  const removeItem = (id) => {
+    cart(cart().filter(item => item.id !== id));
+    Toast('Item removed', 'alert-info', 1500);
+  };
+  
+  const total = () => cart().reduce((sum, item) => sum + item.price, 0);
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({ class: 'flex justify-between items-center' }, [
+      Indicator({ 
+        value: () => cart().length,
+        class: 'badge-primary'
+      },
+        Button({ class: 'btn', onclick: addItem }, '🛒 Add to Cart')
+      ),
+      Span({ class: 'text-lg font-bold' }, () => `Total: $${total()}`)
+    ]),
+    () => cart().length === 0 
+      ? Div({ class: 'alert alert-soft text-center' }, 'Cart is empty')
+      : Div({ class: 'flex flex-col gap-2' }, cart().map(item =>
+        Div({ class: 'flex justify-between items-center p-2 bg-base-200 rounded-lg' }, [
+          Span({}, item.name),
+          Div({ class: 'flex gap-2 items-center' }, [
+            Span({ class: 'text-sm font-bold' }, `$${item.price}`),
+            Button({ 
+              class: 'btn btn-xs btn-ghost btn-circle',
+              onclick: () => removeItem(item.id)
+            }, '✕')
+          ])
+        ])
+      ))
+  ]);
+};
+
+Mount(CartDemo, '#demo-cart');
+```
+
+### Email Inbox
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-inbox" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const InboxDemo = () => {
+  const unread = $(3);
+  const messages = $([
+    { id: 1, from: 'john@example.com', subject: 'Meeting tomorrow', read: false },
+    { id: 2, from: 'jane@example.com', subject: 'Project update', read: false },
+    { id: 3, from: 'bob@example.com', subject: 'Question about design', read: false },
+    { id: 4, from: 'alice@example.com', subject: 'Weekly report', read: true }
+  ]);
+  
+  const markAsRead = (id) => {
+    const msg = messages().find(m => m.id === id);
+    if (!msg.read) {
+      msg.read = true;
+      messages([...messages()]);
+      unread(unread() - 1);
+    }
+  };
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({ class: 'flex justify-between items-center' }, [
+      Indicator({ 
+        value: () => unread(),
+        class: 'badge-primary'
+      },
+        Span({ class: 'text-lg font-bold' }, 'Inbox')
+      ),
+      Button({ 
+        class: 'btn btn-sm btn-ghost',
+        onclick: () => {
+          messages().forEach(m => m.read = true);
+          messages([...messages()]);
+          unread(0);
+        }
+      }, 'Mark all read')
+    ]),
+    Div({ class: 'flex flex-col gap-2' }, () => messages().map(msg =>
+      Div({ 
+        class: `p-3 rounded-lg cursor-pointer transition-all ${msg.read ? 'bg-base-200 opacity-60' : 'bg-primary/10 border-l-4 border-primary'}`,
+        onclick: () => markAsRead(msg.id)
+      }, [
+        Div({ class: 'font-medium' }, msg.from),
+        Div({ class: 'text-sm' }, msg.subject),
+        !msg.read && Span({ class: 'badge badge-xs badge-primary mt-1' }, 'New')
+      ])
+    ))
+  ]);
+};
+
+Mount(InboxDemo, '#demo-inbox');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
+    Indicator({ value: '3', class: 'badge-primary badge-sm' },
+      Div({ class: 'w-12 h-12 bg-base-300 rounded-lg flex items-center justify-center' }, '📧')
+    ),
+    Indicator({ value: '99+', class: 'badge-secondary badge-md' },
+      Div({ class: 'w-12 h-12 bg-base-300 rounded-lg flex items-center justify-center' }, '🔔')
+    ),
+    Indicator({ value: '●', class: 'badge-success badge-xs' },
+      Div({ class: 'avatar' }, [
+        Div({ class: 'w-10 h-10 rounded-full bg-primary' })
+      ])
+    ),
+    Indicator({ value: '!', class: 'badge-error badge-sm' },
+      Div({ class: 'w-12 h-12 bg-base-300 rounded-lg flex items-center justify-center' }, '⚠️')
+    )
+  ]);
+};
+Mount(VariantsDemo, '#demo-variants');
+```

docs/components/input.md

@@ -0,0 +1,247 @@
+# Input
+
+Form input component with icons, password toggle, and validation. Use `Label()` and `Tooltip()` as wrappers for label and tooltip functionality.
+
+## Tag
+
+`Input`
+
+## Props
+
+| Prop         | Type                         | Default    | Description                                      |
+| :----------- | :--------------------------- | :--------- | :----------------------------------------------- |
+| `type`       | `string`                     | `'text'`   | Input type (text, password, email, number, date) |
+| `value`      | `string \| Signal<string>`   | `''`       | Input value                                      |
+| `placeholder`| `string`                     | `' '`      | Placeholder text                                 |
+| `icon`       | `string \| VNode \| Signal`  | `-`        | Icon displayed inside input                      |
+| `disabled`   | `boolean \| Signal<boolean>` | `false`    | Disabled state                                   |
+| `class`      | `string`                     | `''`       | Additional CSS classes (DaisyUI + Tailwind)      |
+| `oninput`    | `function`                   | `-`        | Input event handler                              |
+| `validate`   | `function`                   | `-`        | Validation function returning error message      |
+
+## Styling
+
+Input supports all **daisyUI Input classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Style | `input-bordered`, `input-ghost` | Input style variants |
+| Color | `input-primary`, `input-secondary`, `input-accent`, `input-info`, `input-success`, `input-warning`, `input-error` | Input color variants |
+| Size | `input-xs`, `input-sm`, `input-md`, `input-lg` | Input size variants |
+
+## Live Examples
+
+### Basic Input
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  const name = $('');
+  
+  return Input({
+    placeholder: 'Enter your name',
+    value: name,
+    oninput: (e) => name(e.target.value)
+  });
+};
+Mount(BasicDemo, '#demo-basic');
+```
+
+### With Icon
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-icon" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const IconDemo = () => {
+  const email = $('');
+  
+  return Input({
+    type: 'email',
+    icon: "✉️",
+    value: email,
+    oninput: (e) => email(e.target.value)
+  });
+};
+Mount(IconDemo, '#demo-icon');
+```
+
+### Password with Toggle
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-password" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const PasswordDemo = () => {
+  const password = $('');
+  
+  return Input({
+    type: 'password',
+    value: password,
+    oninput: (e) => password(e.target.value)
+  });
+};
+Mount(PasswordDemo, '#demo-password');
+```
+
+### With Floating Label
+
+Wrap the input with `Label()` component:
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-label" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const LabelDemo = () => {
+  const email = $('');
+  
+  return Input({
+      type: 'email',
+      label: "Email",
+      floating: true,
+      value: email,
+      placeholder: ' ',
+      oninput: (e) => email(e.target.value)
+    });
+};
+Mount(LabelDemo, '#demo-label');
+```
+
+### With Tooltip & label
+
+Wrap the input with `Tooltip()` component:
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-tooltip" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const TooltipDemo = () => {
+  const username = $('');
+  
+  return Tooltip({ tip: 'Must be at least 3 characters' },
+    Input({
+      value: username,
+      label: "Username",
+      placeholder: 'Username',
+      oninput: (e) => username(e.target.value)
+    })
+  );
+};
+Mount(TooltipDemo, '#demo-tooltip');
+```
+
+### Error State
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-error" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const ErrorDemo = () => {
+  const email = $('');
+  
+  return Div({ class: 'w-full' }, [
+    Input({
+      type: 'email',
+      value: email,
+      placeholder: 'Enter your email',
+      label: 'Email',
+      icon: 'icon-[lucide--mail]',
+      validate: (value) => {
+        if (!value) return '';
+        if (!value.includes('@')) return 'Email must contain @';
+        if (!value.includes('.')) return 'Email must contain .';
+        return '';
+      },
+      oninput: (e) => email(e.target.value)
+    })
+  ]);
+};
+Mount(ErrorDemo, '#demo-error');
+```
+
+### Disabled State
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-disabled" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const DisabledDemo = () => {
+  return Input({
+    value: 'john.doe',
+    disabled: true
+  });
+};
+Mount(DisabledDemo, '#demo-disabled');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  const text = $('');
+  const number = $(0);
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Input({
+      placeholder: 'Type something...',
+      value: text,
+      oninput: (e) => text(e.target.value)
+    }),
+    Input({
+      type: 'number',
+      value: number,
+      oninput: (e) => number(parseInt(e.target.value) || 0)
+    }),
+    Input({
+      type: 'date',
+      value: $('2024-01-01')
+    }),
+    Input({class: 'input-primary', value: "Primary"}),
+    Input({class: 'input-secondary', value: "Secondary"}),
+    Input({class: 'input-accent', value: "Accent"}),
+    Input({class: 'input-ghost', value: "Ghost"}),
+    Input({class: 'input-info', value: "Info"}),
+    Input({class: 'input-success', value: "Success"}),
+    Input({class: 'input-warning', value: "Warning"}),
+    Input({class: 'input-error', value: "Error"}),
+  ]);
+};
+Mount(VariantsDemo, '#demo-variants');
+```

docs/components/list.md

@@ -0,0 +1,425 @@
+# List
+
+List component with custom item rendering, headers, and reactive data binding.
+
+## Tag
+
+`List`
+
+## Props
+
+| Prop     | Type                        | Default              | Description                                 |
+| :------- | :-------------------------- | :------------------- | :------------------------------------------ |
+| `items`  | `Array \| Signal<Array>`    | `[]`                 | Data array to display                       |
+| `header` | `string \| VNode \| Signal` | `-`                  | Optional header content                     |
+| `render` | `function(item, index)`     | Required             | Custom render function for each item        |
+| `keyFn`  | `function(item, index)`     | `(item, idx) => idx` | Unique key function for items               |
+| `class`  | `string`                    | `''`                 | Additional CSS classes (DaisyUI + Tailwind) |
+
+## Styling
+
+List supports all **daisyUI List classes**:
+
+| Category   | Keywords      | Description                |
+| :--------- | :------------ | :------------------------- |
+| Base       | `list`        | Base list styling          |
+| Variant    | `list-row`    | Row styling for list items |
+| Background | `bg-base-100` | Background color           |
+
+> For further details, check the [daisyUI List Documentation](https://daisyui.com/components/list) – Full reference for CSS classes.
+
+## Live Examples
+
+### Basic List
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  const items = ["Apple", "Banana", "Orange", "Grape", "Mango"];
+
+  return List({
+    items: items,
+    render: (item) =>
+      Div({ class: "p-3 hover:bg-base-200 transition-colors" }, [
+        Span({ class: "font-medium" }, item),
+      ]),
+  });
+};
+Mount(BasicDemo, "#demo-basic");
+```
+
+### With Header
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-header" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const HeaderDemo = () => {
+  const users = [
+    { name: "John Doe", email: "john@example.com", status: "active" },
+    { name: "Jane Smith", email: "jane@example.com", status: "inactive" },
+    { name: "Bob Johnson", email: "bob@example.com", status: "active" },
+  ];
+
+  return List({
+    items: users,
+    header: Div(
+      { class: "p-3 bg-primary/10 font-bold border-b border-base-300" },
+      "Active Users",
+    ),
+    render: (user) =>
+      Div({ class: "p-3 border-b border-base-300 hover:bg-base-200" }, [
+        Div({ class: "font-medium" }, user.name),
+        Div({ class: "text-sm opacity-70" }, user.email),
+        Span(
+          {
+            class: `badge badge-sm ${user.status === "active" ? "badge-success" : "badge-ghost"} mt-1`,
+          },
+          user.status,
+        ),
+      ]),
+  });
+};
+Mount(HeaderDemo, "#demo-header");
+```
+
+### With Icons
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-icons" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const IconsDemo = () => {
+  const settings = [
+    {
+      icon: "🔊",
+      label: "Sound",
+      description: "Adjust volume and notifications",
+    },
+    { icon: "🌙", label: "Display", description: "Brightness and dark mode" },
+    { icon: "🔒", label: "Privacy", description: "Security settings" },
+    { icon: "🌐", label: "Network", description: "WiFi and connections" },
+  ];
+
+  return List({
+    items: settings,
+    render: (item) =>
+      Div(
+        {
+          class:
+            "flex gap-3 p-3 hover:bg-base-200 transition-colors cursor-pointer",
+        },
+        [
+          Div({ class: "text-2xl" }, item.icon),
+          Div({ class: "flex-1" }, [
+            Div({ class: "font-medium" }, item.label),
+            Div({ class: "text-sm opacity-60" }, item.description),
+          ]),
+          Span({ class: "opacity-40" }, "→"),
+        ],
+      ),
+  });
+};
+Mount(IconsDemo, "#demo-icons");
+```
+
+### With Badges
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-badges" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const BadgesDemo = () => {
+  const notifications = [
+    {
+      id: 1,
+      message: "New comment on your post",
+      time: "5 min ago",
+      unread: true,
+    },
+    {
+      id: 2,
+      message: "Your order has been shipped",
+      time: "1 hour ago",
+      unread: true,
+    },
+    {
+      id: 3,
+      message: "Welcome to the platform!",
+      time: "2 days ago",
+      unread: false,
+    },
+    {
+      id: 4,
+      message: "Weekly digest available",
+      time: "3 days ago",
+      unread: false,
+    },
+  ];
+
+  return List({
+    items: notifications,
+    render: (item) =>
+      Div(
+        {
+          class: `flex justify-between items-center p-3 border-b border-base-300 hover:bg-base-200 ${item.unread ? "bg-primary/5" : ""}`,
+        },
+        [
+          Div({ class: "flex-1" }, [
+            Div({ class: "font-medium" }, item.message),
+            Div({ class: "text-xs opacity-50" }, item.time),
+          ]),
+          item.unread
+            ? Span({ class: "badge badge-primary badge-sm" }, "New")
+            : null,
+        ],
+      ),
+  });
+};
+Mount(BadgesDemo, "#demo-badges");
+```
+
+### Interactive List
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-interactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const InteractiveDemo = () => {
+  const selected = $(null);
+  const items = [
+    { id: 1, name: "Project Alpha", status: "In Progress" },
+    { id: 2, name: "Project Beta", status: "Planning" },
+    { id: 3, name: "Project Gamma", status: "Completed" },
+    { id: 4, name: "Project Delta", status: "Review" },
+  ];
+
+  const statusColors = {
+    "In Progress": "badge-warning",
+    Planning: "badge-info",
+    Completed: "badge-success",
+    Review: "badge-accent",
+  };
+
+  return Div({ class: "flex flex-col gap-4" }, [
+    List({
+      items: items,
+      render: (item) =>
+        Div(
+          {
+            class: `p-3 cursor-pointer transition-all hover:bg-base-200 ${selected() === item.id ? "bg-primary/10 border-l-4 border-primary" : "border-l-4 border-transparent"}`,
+            onclick: () => selected(item.id),
+          },
+          [
+            Div({ class: "flex justify-between items-center" }, [
+              Div({ class: "font-medium" }, item.name),
+              Span(
+                { class: `badge ${statusColors[item.status]}` },
+                item.status,
+              ),
+            ]),
+          ],
+        ),
+    }),
+    () =>
+      selected()
+        ? Div(
+            { class: "alert alert-info" },
+            `Selected: ${items.find((i) => i.id === selected()).name}`,
+          )
+        : Div({ class: "alert alert-soft" }, "Select a project to see details"),
+  ]);
+};
+Mount(InteractiveDemo, "#demo-interactive");
+```
+
+### Reactive List (Todo App)
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const ReactiveDemo = () => {
+  const todos = $([
+    { id: 1, text: 'Complete documentation', done: false },
+    { id: 2, text: 'Review pull requests', done: false },
+    { id: 3, text: 'Deploy to production', done: false }
+  ]);
+  
+  const newTodo = $('');
+  
+  const addTodo = () => {
+    if (newTodo().trim()) {
+      const newId = Math.max(...todos().map(t => t.id), 0) + 1;
+      todos([...todos(), { id: newId, text: newTodo(), done: false }]);
+      newTodo('');
+    }
+  };
+  
+  const toggleTodo = (id) => {
+    todos(todos().map(t => t.id === id ? { ...t, done: !t.done } : t));
+  };
+  
+  const deleteTodo = (id) => {
+    todos(todos().filter(t => t.id !== id));
+  };
+  
+  const pendingCount = () => todos().filter(t => !t.done).length;
+  Watch(()=> console.log(pendingCount()));
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({ class: 'flex gap-2' }, [
+      Input({
+        placeholder: 'Add new task...',
+        value: newTodo,
+        oninput: (e) => newTodo(e.target.value),
+        onkeypress: (e) => e.key === 'Enter' && addTodo()
+      }),
+      Button({ class: 'btn btn-primary', onclick: addTodo }, 'Add')
+    ]),
+    List({
+      items: todos,
+      render: (item) => {
+        // Esta función busca siempre el estado actual del item dentro del signal
+        const it = () => todos().find(t => t.id === item.id) || item;
+
+        return Div({ 
+          class: () => `flex items-center gap-3 p-2 border-b border-base-300 ${it().done ? 'opacity-60' : ''}` 
+        }, [
+          Checkbox({
+            value: () => it().done,
+            onclick: () => toggleTodo(item.id)
+          }),
+          Span({ 
+            class: () => `flex-1 ${it().done ? 'line-through' : ''}`,
+            onclick: () => toggleTodo(item.id)
+          }, () => it().text),
+          Button({ 
+            class: 'btn btn-ghost btn-xs btn-circle',
+            onclick: () => deleteTodo(item.id)
+          }, '✕')
+        ]);
+      }
+    }),
+    Div({ class: 'text-sm opacity-70 mt-2' }, () => `${pendingCount()} tasks remaining`)
+  ]);
+};
+
+Mount(ReactiveDemo, '#demo-reactive');
+```
+
+### Avatar List
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-avatar" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const AvatarDemo = () => {
+  const contacts = [
+    { name: "Alice Johnson", role: "Developer", avatar: "A", online: true },
+    { name: "Bob Smith", role: "Designer", avatar: "B", online: false },
+    { name: "Charlie Brown", role: "Manager", avatar: "C", online: true },
+    { name: "Diana Prince", role: "QA Engineer", avatar: "D", online: false },
+  ];
+
+  return List({
+    items: contacts,
+    render: (contact) =>
+      Div({ class: "flex gap-3 p-3 hover:bg-base-200 transition-colors" }, [
+        Div(
+          {
+            class: `avatar ${contact.online ? "online" : "offline"}`,
+            style: "width: 48px",
+          },
+          [
+            Div(
+              {
+                class:
+                  "rounded-full bg-primary text-primary-content flex items-center justify-center w-12 h-12 font-bold",
+              },
+              contact.avatar,
+            ),
+          ],
+        ),
+        Div({ class: "flex-1" }, [
+          Div({ class: "font-medium" }, contact.name),
+          Div({ class: "text-sm opacity-60" }, contact.role),
+        ]),
+        Div(
+          {
+            class: `badge badge-sm ${contact.online ? "badge-success" : "badge-ghost"}`,
+          },
+          contact.online ? "Online" : "Offline",
+        ),
+      ]),
+  });
+};
+Mount(AvatarDemo, "#demo-avatar");
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-6"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  const items = ["Item 1", "Item 2", "Item 3"];
+
+  return Div({ class: "flex flex-col gap-6" }, [
+    Div({ class: "text-sm font-bold" }, "Default List"),
+    List({
+      items: items,
+      render: (item) => Div({ class: "p-2" }, item),
+    }),
+
+    Div({ class: "text-sm font-bold mt-2" }, "With Shadow"),
+    List({
+      items: items,
+      render: (item) => Div({ class: "p-2" }, item),
+      class: "shadow-lg",
+    }),
+
+    Div({ class: "text-sm font-bold mt-2" }, "Rounded Corners"),
+    List({
+      items: items,
+      render: (item) => Div({ class: "p-2" }, item),
+      class: "rounded-box overflow-hidden",
+    }),
+  ]);
+};
+Mount(VariantsDemo, "#demo-variants");
+```

docs/components/menu.md

@@ -0,0 +1,426 @@
+# Menu
+
+Menu component for creating navigation menus, sidebars, and dropdowns with support for nested items, icons, and active states.
+
+## Tag
+
+`Menu`
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `items` | `Array<MenuItem>` | `[]` | Menu items configuration |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
+
+### MenuItem Structure
+
+| Property | Type | Description |
+| :--- | :--- | :--- |
+| `label` | `string \| VNode` | Menu item text or content |
+| `icon` | `string \| VNode` | Optional icon to display |
+| `active` | `boolean \| Signal<boolean>` | Active state highlighting |
+| `onclick` | `function` | Click handler |
+| `children` | `Array<MenuItem>` | Nested submenu items |
+| `open` | `boolean` | Whether submenu is open (for nested items) |
+
+## Styling
+
+Menu supports all **daisyUI Menu classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Direction | `menu-vertical` (default), `menu-horizontal` | Menu orientation |
+| Size | `menu-xs`, `menu-sm`, `menu-md`, `menu-lg` | Menu scale |
+| Style | `menu-compact` | Reduced padding |
+| Background | `bg-base-100`, `bg-base-200` | Background colors |
+
+> For further details, check the [daisyUI Menu Documentation](https://daisyui.com/components/menu) – Full reference for CSS classes.
+
+## Live Examples
+
+### Basic Menu
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  const activeItem = $('home');
+  
+  return Menu({
+    items: [
+      { 
+        label: 'Home', 
+        active: () => activeItem() === 'home',
+        onclick: () => activeItem('home')
+      },
+      { 
+        label: 'About', 
+        active: () => activeItem() === 'about',
+        onclick: () => activeItem('about')
+      },
+      { 
+        label: 'Contact', 
+        active: () => activeItem() === 'contact',
+        onclick: () => activeItem('contact')
+      }
+    ]
+  });
+};
+Mount(BasicDemo, '#demo-basic');
+```
+
+### With Icons
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-icons" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const IconsDemo = () => {
+  const activeItem = $('dashboard');
+  
+  return Menu({
+    items: [
+      { 
+        icon: '🏠', 
+        label: 'Dashboard',
+        active: () => activeItem() === 'dashboard',
+        onclick: () => activeItem('dashboard')
+      },
+      { 
+        icon: '📊', 
+        label: 'Analytics',
+        active: () => activeItem() === 'analytics',
+        onclick: () => activeItem('analytics')
+      },
+      { 
+        icon: '⚙️', 
+        label: 'Settings',
+        active: () => activeItem() === 'settings',
+        onclick: () => activeItem('settings')
+      },
+      { 
+        icon: '👤', 
+        label: 'Profile',
+        active: () => activeItem() === 'profile',
+        onclick: () => activeItem('profile')
+      }
+    ]
+  });
+};
+Mount(IconsDemo, '#demo-icons');
+```
+
+### Nested Menu
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-nested" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const NestedDemo = () => {
+  const activeItem = $('products');
+  
+  return Menu({
+    items: [
+      { 
+        label: 'Dashboard',
+        onclick: () => activeItem('dashboard'),
+        active: () => activeItem() === 'dashboard'
+      },
+      { 
+        label: 'Products',
+        icon: '📦',
+        open: true,
+        children: [
+          { 
+            label: 'All Products',
+            onclick: () => activeItem('all-products'),
+            active: () => activeItem() === 'all-products'
+          },
+          { 
+            label: 'Add New',
+            onclick: () => activeItem('add-product'),
+            active: () => activeItem() === 'add-product'
+          },
+          { 
+            label: 'Categories',
+            children: [
+              { 
+                label: 'Electronics',
+                onclick: () => activeItem('electronics'),
+                active: () => activeItem() === 'electronics'
+              },
+              { 
+                label: 'Clothing',
+                onclick: () => activeItem('clothing'),
+                active: () => activeItem() === 'clothing'
+              }
+            ]
+          }
+        ]
+      },
+      { 
+        label: 'Orders',
+        icon: '📋',
+        onclick: () => activeItem('orders'),
+        active: () => activeItem() === 'orders'
+      },
+      { 
+        label: 'Settings',
+        icon: '⚙️',
+        onclick: () => activeItem('settings'),
+        active: () => activeItem() === 'settings'
+      }
+    ]
+  });
+};
+Mount(NestedDemo, '#demo-nested');
+```
+
+### Horizontal Menu
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-horizontal" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const HorizontalDemo = () => {
+  const activeItem = $('home');
+  
+  return Menu({
+    class: 'menu-horizontal rounded-box',
+    items: [
+      { 
+        label: 'Home',
+        active: () => activeItem() === 'home',
+        onclick: () => activeItem('home')
+      },
+      { 
+        label: 'Products',
+        children: [
+          { label: 'Electronics', onclick: () => activeItem('electronics') },
+          { label: 'Clothing', onclick: () => activeItem('clothing') },
+          { label: 'Books', onclick: () => activeItem('books') }
+        ]
+      },
+      { 
+        label: 'About',
+        onclick: () => activeItem('about'),
+        active: () => activeItem() === 'about'
+      },
+      { 
+        label: 'Contact',
+        onclick: () => activeItem('contact'),
+        active: () => activeItem() === 'contact'
+      }
+    ]
+  });
+};
+Mount(HorizontalDemo, '#demo-horizontal');
+```
+
+### Sidebar Menu
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-sidebar" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const SidebarDemo = () => {
+  const activeItem = $('dashboard');
+  
+  return Div({ class: 'flex' }, [
+    Div({ class: 'w-64' }, [
+      Menu({
+        class: 'rounded-box w-full',
+        items: [
+          { 
+            icon: '📊', 
+            label: 'Dashboard',
+            active: () => activeItem() === 'dashboard',
+            onclick: () => activeItem('dashboard')
+          },
+          { 
+            icon: '👥', 
+            label: 'Users',
+            children: [
+              { 
+                label: 'All Users',
+                onclick: () => activeItem('all-users'),
+                active: () => activeItem() === 'all-users'
+              },
+              { 
+                label: 'Add User',
+                onclick: () => activeItem('add-user'),
+                active: () => activeItem() === 'add-user'
+              }
+            ]
+          },
+          { 
+            icon: '📁', 
+            label: 'Files',
+            onclick: () => activeItem('files'),
+            active: () => activeItem() === 'files'
+          },
+          { 
+            icon: '⚙️', 
+            label: 'Settings',
+            onclick: () => activeItem('settings'),
+            active: () => activeItem() === 'settings'
+          }
+        ]
+      })
+    ]),
+    Div({ class: 'flex-1 p-4' }, [
+      Div({ class: 'alert alert-info' }, () => `Current page: ${activeItem()}`)
+    ])
+  ]);
+};
+Mount(SidebarDemo, '#demo-sidebar');
+```
+
+### Account Menu
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-account" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const AccountDemo = () => {
+  const notifications = $(3);
+  
+  return Menu({
+    class: 'rounded-box w-56',
+    items: [
+      { 
+        icon: '👤', 
+        label: 'My Profile',
+        onclick: () => Toast('Profile clicked', 'alert-info', 2000)
+      },
+      { 
+        icon: '📧', 
+        label: 'Messages',
+        onclick: () => Toast('Messages opened', 'alert-info', 2000)
+      },
+      { 
+        icon: '🔔', 
+        label: 'Notifications',
+        badge: () => notifications(),
+        onclick: () => {
+          notifications(0);
+          Toast('Notifications cleared', 'alert-success', 2000);
+        }
+      },
+      { 
+        icon: '⚙️', 
+        label: 'Settings',
+        onclick: () => Toast('Settings opened', 'alert-info', 2000)
+      },
+      { 
+        icon: '🚪', 
+        label: 'Logout',
+        onclick: () => Toast('Logged out', 'alert-warning', 2000)
+      }
+    ]
+  });
+};
+Mount(AccountDemo, '#demo-account');
+```
+
+### Collapsible Sidebar
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-collapsible" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const CollapsibleDemo = () => {
+  const collapsed = $(false);
+  const activeItem = $('dashboard');
+  
+  return Div({ class: 'flex gap-4' }, [
+    Div({ class: `transition-all duration-300 ${collapsed() ? 'w-16' : 'w-64'}` }, [
+      Button({ 
+        class: 'btn btn-ghost btn-sm mb-2 w-full',
+        onclick: () => collapsed(!collapsed())
+      }, collapsed() ? '→' : '←'),
+      Menu({
+        class: `rounded-box ${collapsed() ? 'menu-compact' : ''}`,
+        items: [
+          { icon: '📊', label: collapsed() ? '' : 'Dashboard', active: () => activeItem() === 'dashboard', onclick: () => activeItem('dashboard') },
+          { icon: '👥', label: collapsed() ? '' : 'Users', active: () => activeItem() === 'users', onclick: () => activeItem('users') },
+          { icon: '📁', label: collapsed() ? '' : 'Files', active: () => activeItem() === 'files', onclick: () => activeItem('files') },
+          { icon: '⚙️', label: collapsed() ? '' : 'Settings', active: () => activeItem() === 'settings', onclick: () => activeItem('settings') }
+        ]
+      })
+    ]),
+    Div({ class: 'flex-1' }, [
+      Div({ class: 'alert alert-info' }, () => `Selected: ${activeItem()}`)
+    ])
+  ]);
+};
+Mount(CollapsibleDemo, '#demo-collapsible');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  const items = [
+    { label: 'Item 1' },
+    { label: 'Item 2' },
+    { label: 'Item 3', children: [
+      { label: 'Subitem 1' },
+      { label: 'Subitem 2' }
+    ]}
+  ];
+  
+  return Div({ class: 'flex flex-wrap gap-8' }, [
+    Div({ class: 'w-48' }, [
+      Div({ class: 'text-sm font-bold mb-2' }, 'Default'),
+      Menu({ items })
+    ]),
+    Div({ class: 'w-48' }, [
+      Div({ class: 'text-sm font-bold mb-2' }, 'Compact'),
+      Menu({ items, class: 'menu-compact' })
+    ]),
+    Div({ class: 'w-48' }, [
+      Div({ class: 'text-sm font-bold mb-2' }, 'With Shadow'),
+      Menu({ items, class: 'shadow-lg' })
+    ])
+  ]);
+};
+Mount(VariantsDemo, '#demo-variants');
+```

docs/components/modal.md

@@ -0,0 +1,378 @@
+# Modal
+
+Modal dialog component for displaying content in an overlay with customizable actions and backdrop. Uses the native HTML `<dialog>` element for better accessibility and performance.
+
+## Tag
+
+`Modal`
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `open` | `boolean \| Signal<boolean>` | `false` | Modal visibility state |
+| `title` | `string \| VNode \| Signal` | `-` | Modal title text |
+| `buttons` | `Array<VNode> \| VNode` | `-` | Action buttons to display (auto-closes on click) |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
+| `children` | `string \| VNode` | `-` | Modal content |
+
+## Styling
+
+Modal supports all **daisyUI Modal classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Size | `modal-sm`, `modal-md`, `modal-lg`, `modal-xl` | Modal scale |
+| Position | `modal-top`, `modal-middle`, `modal-bottom` | Modal vertical alignment |
+
+> For further details, check the [daisyUI Modal Documentation](https://daisyui.com/components/modal) – Full reference for CSS classes.
+
+## Live Examples
+
+### Basic Modal
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  const isOpen = $(false);
+  
+  return Div({ class: 'flex justify-center' }, [
+    Button({ 
+      class: 'btn btn-primary',
+      onclick: () => {
+        isOpen(true);
+      }
+    }, 'Open Modal'),
+    Modal({
+      open: isOpen,
+      title: 'Basic Modal',
+      buttons: Button({ 
+        class: 'btn-primary', 
+        onclick: () => {
+          isOpen(false);
+        } 
+      }, 'Custom Action')
+    }, [
+      Div({ class: 'py-4' }, 'This is a basic modal dialog. Press ESC or click Close.')
+    ])
+  ]);
+};
+Mount(BasicDemo, '#demo-basic');
+```
+
+### Modal with Actions
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-actions" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const ActionsDemo = () => {
+  const isOpen = $(false);
+  const confirmed = $(false);
+  
+  const handleConfirm = () => {
+    confirmed(true);
+    isOpen(false);
+    Toast('Action confirmed!', 'alert-success', 2000);
+  };
+  
+  return Div({ class: 'flex flex-col gap-4 items-center' }, [
+    Button({ 
+      class: 'btn btn-primary',
+      onclick: () => isOpen(true)
+    }, 'Confirm Action'),
+    () => confirmed() ? Alert({ 
+      type: 'success', 
+      message: 'You confirmed the action!' 
+    }) : null,
+    Modal({
+      open: isOpen,
+      title: 'Confirm Action',
+      buttons: [
+        Button({ 
+          class: 'btn btn-ghost',
+          onclick: () => isOpen(false)
+        }, 'Cancel'),
+        Button({ 
+          class: 'btn btn-primary',
+          onclick: handleConfirm
+        }, 'Confirm')
+      ]
+    }, [
+      Div({ class: 'py-4' }, 'Are you sure you want to perform this action? This cannot be undone.')
+    ])
+  ]);
+};
+Mount(ActionsDemo, '#demo-actions');
+```
+
+### Form Modal
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-form" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const FormModal = () => {
+  const isOpen = $(false);
+  const name = $('');
+  const email = $('');
+  const submitted = $(false);
+  
+  const handleSubmit = () => {
+    if (name() && email()) {
+      submitted(true);
+      isOpen(false);
+      Toast(`Welcome ${name()}!`, 'alert-success', 2000);
+      setTimeout(() => submitted(false), 3000);
+    }
+  };
+  
+  return Div({ class: 'flex flex-col gap-4 items-center' }, [
+    Button({ 
+      class: 'btn btn-primary',
+      onclick: () => isOpen(true)
+    }, 'Sign Up'),
+    () => submitted() ? Alert({ 
+      type: 'success', 
+      message: 'Account created successfully!' 
+    }) : null,
+    Modal({
+      open: isOpen,
+      title: 'Create Account',
+      buttons: [
+        Button({ 
+          class: 'btn btn-ghost',
+          onclick: () => isOpen(false)
+        }, 'Cancel'),
+        Button({ 
+          class: 'btn btn-primary',
+          onclick: handleSubmit
+        }, 'Sign Up')
+      ]
+    }, [
+      Div({ class: 'flex flex-col gap-4 py-2' }, [
+        Input({
+          label: 'Full Name',
+          value: name,
+          placeholder: 'Enter your name',
+          oninput: (e) => name(e.target.value)
+        }),
+        Input({
+          label: 'Email',
+          type: 'email',
+          value: email,
+          placeholder: 'Enter your email',
+          oninput: (e) => email(e.target.value)
+        })
+      ])
+    ])
+  ]);
+};
+Mount(FormModal, '#demo-form');
+```
+
+### Confirmation Modal
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-confirm" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const ConfirmDemo = () => {
+  const isOpen = $(false);
+  const items = $([
+    { id: 1, name: 'Document A' },
+    { id: 2, name: 'Document B' },
+    { id: 3, name: 'Document C' }
+  ]);
+  const pendingDelete = $(null);
+  
+  const confirmDelete = (item) => {
+    pendingDelete(item);
+    isOpen(true);
+  };
+  
+  const handleDelete = () => {
+    items(items().filter(i => i.id !== pendingDelete().id));
+    isOpen(false);
+    Toast(`Deleted: ${pendingDelete().name}`, 'alert-info', 2000);
+  };
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({ class: 'flex flex-col gap-2' }, items().map(item =>
+      Div({ class: 'flex justify-between items-center p-3 bg-base-200 rounded-lg' }, [
+        Span({}, item.name),
+        Button({ 
+          class: 'btn btn-xs btn-error',
+          onclick: () => confirmDelete(item)
+        }, 'Delete')
+      ])
+    )),
+    Modal({
+      open: isOpen,
+      title: 'Delete Confirmation',
+      buttons: [
+        Button({ 
+          class: 'btn btn-ghost',
+          onclick: () => isOpen(false)
+        }, 'Cancel'),
+        Button({ 
+          class: 'btn btn-error',
+          onclick: handleDelete
+        }, 'Delete')
+      ]
+    }, [
+      Div({ class: 'py-4' }, () => `Are you sure you want to delete "${pendingDelete()?.name}"? This action cannot be undone.`)
+    ])
+  ]);
+};
+Mount(ConfirmDemo, '#demo-confirm');
+```
+
+### Large Content Modal
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-large" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const LargeDemo = () => {
+  const isOpen = $(false);
+  
+  return Div({ class: 'flex justify-center' }, [
+    Button({ 
+      class: 'btn btn-primary',
+      onclick: () => isOpen(true)
+    }, 'Open Large Modal'),
+    Modal({
+      open: isOpen,
+      title: 'Terms and Conditions',
+      buttons: Button({ 
+        class: 'btn btn-primary',
+        onclick: () => isOpen(false)
+      }, 'I Agree')
+    }, [
+      Div({ class: 'py-4 max-h-96 overflow-y-auto' }, [
+        Div({ class: 'space-y-4' }, [
+          Div({ class: 'text-sm' }, [
+            Div({ class: 'font-bold mb-2' }, '1. Introduction'),
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.'
+          ]),
+          Div({ class: 'text-sm' }, [
+            Div({ class: 'font-bold mb-2' }, '2. User Obligations'),
+            'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.'
+          ]),
+          Div({ class: 'text-sm' }, [
+            Div({ class: 'font-bold mb-2' }, '3. Privacy Policy'),
+            'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.'
+          ]),
+          Div({ class: 'text-sm' }, [
+            Div({ class: 'font-bold mb-2' }, '4. Termination'),
+            'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.'
+          ])
+        ])
+      ])
+    ])
+  ]);
+};
+Mount(LargeDemo, '#demo-large');
+```
+
+### Multiple Modals
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-multiple" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4 justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const MultipleDemo = () => {
+  const modal1 = $(false);
+  const modal2 = $(false);
+  const modal3 = $(false);
+  
+  return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
+    Button({ class: 'btn', onclick: () => modal1(true) }, 'Info Modal'),
+    Button({ class: 'btn', onclick: () => modal2(true) }, 'Success Modal'),
+    Button({ class: 'btn', onclick: () => modal3(true) }, 'Warning Modal'),
+    
+    Modal({
+      open: modal1,
+      title: 'Information',
+      buttons: Button({ onclick: () => modal1(false) }, 'OK')
+    }, 'This is an informational message.'),
+    
+    Modal({
+      open: modal2,
+      title: 'Success!',
+      buttons: Button({ onclick: () => modal2(false) }, 'Great!')
+    }, 'Your operation was completed successfully.'),
+    
+    Modal({
+      open: modal3,
+      title: 'Warning',
+      buttons: Button({ onclick: () => modal3(false) }, 'Understood')
+    }, 'Please review your input before proceeding.')
+  ]);
+};
+Mount(MultipleDemo, '#demo-multiple');
+```
+
+### Custom Styled Modal
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-custom" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const CustomDemo = () => {
+  const isOpen = $(false);
+  
+  return Div({ class: 'flex justify-center' }, [
+    Button({ 
+      class: 'btn btn-primary',
+      onclick: () => isOpen(true)
+    }, 'Open Custom Modal'),
+    Modal({
+      open: isOpen,
+      class: 'bg-gradient-to-r from-primary to-secondary text-primary-content'
+    }, [
+      Div({ class: 'text-center py-8' }, [
+        Div({ class: 'text-6xl mb-4' }, '🎉'),
+        Div({ class: 'text-2xl font-bold mb-2' }, 'Congratulations!'),
+        Div({ class: 'mb-6' }, 'You\'ve successfully completed the tutorial.'),
+        Button({ 
+          class: 'btn btn-ghost bg-white/20 hover:bg-white/30',
+          onclick: () => isOpen(false)
+        }, 'Get Started')
+      ])
+    ])
+  ]);
+};
+Mount(CustomDemo, '#demo-custom');
+```

docs/components/navbar.md

@@ -0,0 +1,276 @@
+# Navbar
+
+Navigation bar component for creating responsive headers with logo, navigation links, and actions.
+
+## Tag
+
+`Navbar`
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
+| `children` | `VNode \| Array<VNode>` | `-` | Navbar content (should contain left, center, right sections) |
+
+## Styling
+
+Navbar supports all **daisyUI Navbar classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Base | `navbar` | Base navbar styling |
+| Sections | `navbar-start`, `navbar-center`, `navbar-end` | Content alignment sections |
+| Background | `bg-base-100`, `bg-base-200`, `bg-primary`, etc. | Background colors |
+| Shadow | `shadow`, `shadow-lg`, `shadow-md` | Box shadow variants |
+
+> For further details, check the [daisyUI Navbar Documentation](https://daisyui.com/components/navbar) – Full reference for CSS classes.
+
+## Live Examples
+
+### Basic Navbar
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  return Navbar({ class: 'rounded-box' }, [
+    Div({ class: 'navbar-start' }, [
+      Span({ class: 'text-xl font-bold' }, 'Logo')
+    ]),
+    Div({ class: 'navbar-center hidden lg:flex' }, [
+      Span({ class: 'text-sm' }, 'Navigation Items')
+    ]),
+    Div({ class: 'navbar-end' }, [
+      Button({ class: 'btn btn-ghost btn-sm' }, 'Login')
+    ])
+  ]);
+};
+Mount(BasicDemo, '#demo-basic');
+```
+
+### With Navigation Links
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-links" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const LinksDemo = () => {
+  const active = $('home');
+  
+  return Navbar({ class: 'rounded-box' }, [
+    Div({ class: 'navbar-start' }, [
+      Span({ class: 'text-xl font-bold' }, 'MyApp')
+    ]),
+    Div({ class: 'navbar-center hidden lg:flex' }, [
+      Div({ class: 'menu menu-horizontal px-1' }, [
+        Button({ 
+          class: `btn btn-ghost btn-sm ${active() === 'home' ? 'btn-active' : ''}`,
+          onclick: () => active('home')
+        }, 'Home'),
+        Button({ 
+          class: `btn btn-ghost btn-sm ${active() === 'about' ? 'btn-active' : ''}`,
+          onclick: () => active('about')
+        }, 'About'),
+        Button({ 
+          class: `btn btn-ghost btn-sm ${active() === 'contact' ? 'btn-active' : ''}`,
+          onclick: () => active('contact')
+        }, 'Contact')
+      ])
+    ]),
+    Div({ class: 'navbar-end' }, [
+      Button({ class: 'btn btn-primary btn-sm' }, 'Sign Up')
+    ])
+  ]);
+};
+Mount(LinksDemo, '#demo-links');
+```
+
+### With Search
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-search" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const SearchDemo = () => {
+  const searchQuery = $('');
+  
+  return Navbar({ class: 'rounded-box' }, [
+    Div({ class: 'navbar-start' }, [
+      Span({ class: 'text-xl font-bold' }, 'MyApp')
+    ]),
+    Div({ class: 'navbar-center' }, [
+      Div({ class: 'form-control' }, [
+        Input({
+          placeholder: 'Search...',
+          value: searchQuery,
+          class: 'input input-bordered w-48 md:w-auto',
+          oninput: (e) => searchQuery(e.target.value)
+        })
+      ])
+    ]),
+    Div({ class: 'navbar-end' }, [
+      Button({ class: 'btn btn-ghost btn-circle' }, '🔔'),
+      Button({ class: 'btn btn-ghost btn-circle' }, '👤')
+    ])
+  ]);
+};
+Mount(SearchDemo, '#demo-search');
+```
+
+### With Avatar and Dropdown
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-avatar" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const AvatarDemo = () => {
+  return Navbar({ class: 'rounded-box' }, [
+    Div({ class: 'navbar-start' }, [
+      Span({ class: 'text-xl font-bold' }, 'MyApp')
+    ]),
+    Div({ class: 'navbar-center hidden lg:flex' }, [
+      Div({ class: 'menu menu-horizontal px-1' }, [
+        Span({ class: 'text-sm' }, 'Dashboard'),
+        Span({ class: 'text-sm' }, 'Projects'),
+        Span({ class: 'text-sm' }, 'Tasks')
+      ])
+    ]),
+    Div({ class: 'navbar-end' }, [
+      Div({ class: 'dropdown dropdown-end' }, [
+        Div({ tabindex: 0, role: 'button', class: 'btn btn-ghost btn-circle avatar' }, [
+          Div({ class: 'w-8 rounded-full bg-primary text-primary-content flex items-center justify-center' }, 'JD')
+        ]),
+        Div({ tabindex: 0, class: 'dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow' }, [
+          Span({ class: 'menu-item' }, 'Profile'),
+          Span({ class: 'menu-item' }, 'Settings'),
+          Span({ class: 'menu-item' }, 'Logout')
+        ])
+      ])
+    ])
+  ]);
+};
+Mount(AvatarDemo, '#demo-avatar');
+```
+
+### Responsive Navbar
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-responsive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const ResponsiveDemo = () => {
+  const isOpen = $(false);
+  
+  return Div({ class: 'flex flex-col' }, [
+    Navbar({ class: 'rounded-box' }, [
+      Div({ class: 'navbar-start' }, [
+        Button({ 
+          class: 'btn btn-ghost btn-circle lg:hidden',
+          onclick: () => isOpen(!isOpen())
+        }, '☰')
+      ]),
+      Div({ class: 'navbar-center' }, [
+        Span({ class: 'text-xl font-bold' }, 'MyApp')
+      ]),
+      Div({ class: 'navbar-end' }, [
+        Button({ class: 'btn btn-ghost btn-circle' }, '🔔')
+      ])
+    ]),
+    () => isOpen() ? Div({ class: 'flex flex-col gap-2 p-4 bg-base-200 rounded-box mt-2' }, [
+      Button({ class: 'btn btn-ghost justify-start' }, 'Home'),
+      Button({ class: 'btn btn-ghost justify-start' }, 'About'),
+      Button({ class: 'btn btn-ghost justify-start' }, 'Services'),
+      Button({ class: 'btn btn-ghost justify-start' }, 'Contact')
+    ]) : null
+  ]);
+};
+Mount(ResponsiveDemo, '#demo-responsive');
+```
+
+### With Brand and Actions
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-brand" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const BrandDemo = () => {
+  return Navbar({ class: 'rounded-box bg-primary text-primary-content' }, [
+    Div({ class: 'navbar-start' }, [
+      Span({ class: 'text-xl font-bold' }, 'Brand')
+    ]),
+    Div({ class: 'navbar-center hidden lg:flex' }, [
+      Div({ class: 'menu menu-horizontal px-1' }, [
+        Span({ class: 'text-sm' }, 'Features'),
+        Span({ class: 'text-sm' }, 'Pricing'),
+        Span({ class: 'text-sm' }, 'About')
+      ])
+    ]),
+    Div({ class: 'navbar-end' }, [
+      Button({ class: 'btn btn-ghost btn-sm' }, 'Login'),
+      Button({ class: 'btn btn-outline btn-sm ml-2' }, 'Sign Up')
+    ])
+  ]);
+};
+Mount(BrandDemo, '#demo-brand');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({ class: 'text-sm font-bold' }, 'Default Navbar'),
+    Navbar({ class: 'rounded-box' }, [
+      Div({ class: 'navbar-start' }, [Span({}, 'Start')]),
+      Div({ class: 'navbar-center' }, [Span({}, 'Center')]),
+      Div({ class: 'navbar-end' }, [Span({}, 'End')])
+    ]),
+    
+    Div({ class: 'text-sm font-bold mt-2' }, 'With Shadow'),
+    Navbar({ class: 'rounded-box shadow-lg' }, [
+      Div({ class: 'navbar-start' }, [Span({}, 'Logo')]),
+      Div({ class: 'navbar-end' }, [Button({ class: 'btn btn-sm' }, 'Button')])
+    ]),
+    
+    Div({ class: 'text-sm font-bold mt-2' }, 'With Background'),
+    Navbar({ class: 'rounded-box bg-base-300' }, [
+      Div({ class: 'navbar-start' }, [Span({ class: 'font-bold' }, 'Colored')]),
+      Div({ class: 'navbar-end' }, [Span({ class: 'text-sm' }, 'Info')])
+    ])
+  ]);
+};
+Mount(VariantsDemo, '#demo-variants');
+```

docs/components/radio.md

@@ -0,0 +1,409 @@
+# Radio
+
+Radio button component with label, tooltip support, and reactive group selection. All radios in the same group share a common `name` attribute for proper HTML semantics.
+
+## Tag
+
+`Radio`
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `label` | `string` | `-` | Label text for the radio button |
+| `value` | `string \| Signal<string>` | `-` | Selected value signal for the group |
+| `inputValue` | `string` | `-` | Value of this radio button |
+| `name` | `string` | `-` | Group name (all radios in group should share this) |
+| `tooltip` | `string` | `-` | Tooltip text on hover |
+| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
+| `onclick` | `function` | `-` | Click event handler |
+
+## Styling
+
+Radio supports all **daisyUI Radio classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Color | `radio-primary`, `radio-secondary`, `radio-accent`, `radio-info`, `radio-success`, `radio-warning`, `radio-error` | Radio color variants |
+| Size | `radio-xs`, `radio-sm`, `radio-md`, `radio-lg` | Radio scale |
+
+> For further details, check the [daisyUI Radio Documentation](https://daisyui.com/components/radio) – Full reference for CSS classes.
+
+## Live Examples
+
+### Basic Radio Group
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-3"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  const selected = $('option1');
+  
+  return Div({ class: 'flex flex-col gap-3' }, [
+    Radio({
+      label: 'Option 1',
+      name: 'basic-group',
+      value: selected,
+      inputValue: 'option1',
+      onclick: () => selected('option1')
+    }),
+    Radio({
+      label: 'Option 2',
+      name: 'basic-group',
+      value: selected,
+      inputValue: 'option2',
+      onclick: () => selected('option2')
+    }),
+    Radio({
+      label: 'Option 3',
+      name: 'basic-group',
+      value: selected,
+      inputValue: 'option3',
+      onclick: () => selected('option3')
+    }),
+    Div({ class: 'mt-2 text-sm opacity-70' }, () => `Selected: ${selected()}`)
+  ]);
+};
+Mount(BasicDemo, '#demo-basic');
+```
+
+### With Tooltip
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-tooltip" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-3"></div>
+  </div>
+</div>
+
+```javascript
+const TooltipDemo = () => {
+  const selected = $('light');
+  
+  return Div({ class: 'flex flex-col gap-3' }, [
+    Radio({
+      label: 'Light mode',
+      name: 'theme-group',
+      value: selected,
+      inputValue: 'light',
+      tooltip: 'Light theme with white background',
+      onclick: () => selected('light')
+    }),
+    Radio({
+      label: 'Dark mode',
+      name: 'theme-group',
+      value: selected,
+      inputValue: 'dark',
+      tooltip: 'Dark theme with black background',
+      onclick: () => selected('dark')
+    })
+  ]);
+};
+Mount(TooltipDemo, '#demo-tooltip');
+```
+
+### Disabled State
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-disabled" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-3"></div>
+  </div>
+</div>
+
+```javascript
+const DisabledDemo = () => {
+  const selected = $('enabled');
+  
+  return Div({ class: 'flex flex-col gap-3' }, [
+    Radio({
+      label: 'Enabled option',
+      name: 'disabled-group',
+      value: selected,
+      inputValue: 'enabled',
+      onclick: () => selected('enabled')
+    }),
+    Radio({
+      label: 'Disabled option (cannot select)',
+      name: 'disabled-group',
+      value: selected,
+      inputValue: 'disabled',
+      disabled: true,
+      onclick: () => selected('disabled')
+    })
+  ]);
+};
+Mount(DisabledDemo, '#demo-disabled');
+```
+
+### Reactive Preview
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const ReactiveDemo = () => {
+  const size = $('medium');
+  const color = $('blue');
+  
+  const sizes = [
+    { value: 'small', label: 'Small' },
+    { value: 'medium', label: 'Medium' },
+    { value: 'large', label: 'Large' }
+  ];
+  
+  const colors = [
+    { value: 'blue', label: 'Blue' },
+    { value: 'green', label: 'Green' },
+    { value: 'red', label: 'Red' }
+  ];
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({ class: 'text-sm font-bold' }, 'Select size'),
+    Div({ class: 'flex gap-4' }, sizes.map(s => 
+      Radio({
+        label: s.label,
+        name: 'size-group',
+        value: size,
+        inputValue: s.value,
+        onclick: () => size(s.value)
+      })
+    )),
+    Div({ class: 'text-sm font-bold mt-2' }, 'Select color'),
+    Div({ class: 'flex gap-4' }, colors.map(c => 
+      Radio({
+        label: c.label,
+        name: 'color-group',
+        value: color,
+        inputValue: c.value,
+        onclick: () => color(c.value)
+      })
+    )),
+    Div({ 
+      class: 'mt-4 p-4 rounded-lg text-center transition-all',
+      style: () => {
+        const sizeMap = { small: 'text-sm', medium: 'text-base', large: 'text-lg' };
+        const colorMap = { blue: '#3b82f6', green: '#10b981', red: '#ef4444' };
+        return `background-color: ${colorMap[color()]}; color: white; ${sizeMap[size()]}`;
+      }
+    }, () => `${size()} ${color()} preview`)
+  ]);
+};
+Mount(ReactiveDemo, '#demo-reactive');
+```
+
+### Payment Method Selection
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-payment" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const PaymentDemo = () => {
+  const method = $('credit');
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({ class: 'text-sm font-bold' }, 'Payment method'),
+    Div({ class: 'flex flex-col gap-3' }, [
+      Radio({
+        label: '💳 Credit Card',
+        name: 'payment-group',
+        value: method,
+        inputValue: 'credit',
+        onclick: () => method('credit')
+      }),
+      Radio({
+        label: '🏦 Bank Transfer',
+        name: 'payment-group',
+        value: method,
+        inputValue: 'bank',
+        onclick: () => method('bank')
+      }),
+      Radio({
+        label: '📱 Digital Wallet',
+        name: 'payment-group',
+        value: method,
+        inputValue: 'wallet',
+        onclick: () => method('wallet')
+      })
+    ]),
+    Div({ class: 'alert alert-info mt-2' }, () => {
+      const messages = {
+        credit: 'You selected Credit Card. Enter your card details.',
+        bank: 'You selected Bank Transfer. Use the provided account number.',
+        wallet: 'You selected Digital Wallet. Scan the QR code to pay.'
+      };
+      return messages[method()];
+    })
+  ]);
+};
+Mount(PaymentDemo, '#demo-payment');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  const primary = $('primary1');
+  const secondary = $('secondary1');
+  const accent = $('accent1');
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({ class: 'card bg-base-200 p-4' }, [
+      Div({ class: 'text-sm font-bold mb-2' }, 'Primary variant'),
+      Div({ class: 'flex gap-4' }, [
+        Radio({
+          label: 'Option A',
+          name: 'primary-group',
+          value: primary,
+          inputValue: 'primary1',
+          class: 'radio-primary',
+          onclick: () => primary('primary1')
+        }),
+        Radio({
+          label: 'Option B',
+          name: 'primary-group',
+          value: primary,
+          inputValue: 'primary2',
+          class: 'radio-primary',
+          onclick: () => primary('primary2')
+        })
+      ])
+    ]),
+    Div({ class: 'card bg-base-200 p-4' }, [
+      Div({ class: 'text-sm font-bold mb-2' }, 'Secondary variant'),
+      Div({ class: 'flex gap-4' }, [
+        Radio({
+          label: 'Option A',
+          name: 'secondary-group',
+          value: secondary,
+          inputValue: 'secondary1',
+          class: 'radio-secondary',
+          onclick: () => secondary('secondary1')
+        }),
+        Radio({
+          label: 'Option B',
+          name: 'secondary-group',
+          value: secondary,
+          inputValue: 'secondary2',
+          class: 'radio-secondary',
+          onclick: () => secondary('secondary2')
+        })
+      ])
+    ]),
+    Div({ class: 'card bg-base-200 p-4' }, [
+      Div({ class: 'text-sm font-bold mb-2' }, 'Accent variant'),
+      Div({ class: 'flex gap-4' }, [
+        Radio({
+          label: 'Option A',
+          name: 'accent-group',
+          value: accent,
+          inputValue: 'accent1',
+          class: 'radio-accent',
+          onclick: () => accent('accent1')
+        }),
+        Radio({
+          label: 'Option B',
+          name: 'accent-group',
+          value: accent,
+          inputValue: 'accent2',
+          class: 'radio-accent',
+          onclick: () => accent('accent2')
+        })
+      ])
+    ])
+  ]);
+};
+Mount(VariantsDemo, '#demo-variants');
+```
+
+### Dynamic Options
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-dynamic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const DynamicDemo = () => {
+  const category = $('cars');
+  const selected = $('');
+  
+  const options = {
+    cars: [
+      { value: 'sedan', label: 'Sedan' },
+      { value: 'suv', label: 'SUV' },
+      { value: 'sports', label: 'Sports' }
+    ],
+    colors: [
+      { value: 'red', label: 'Red' },
+      { value: 'blue', label: 'Blue' },
+      { value: 'black', label: 'Black' }
+    ]
+  };
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({ class: 'flex gap-4' }, [
+      Radio({
+        label: 'Cars',
+        name: 'category-group',
+        value: category,
+        inputValue: 'cars',
+        onclick: () => {
+          category('cars');
+          selected('');
+        }
+      }),
+      Radio({
+        label: 'Colors',
+        name: 'category-group',
+        value: category,
+        inputValue: 'colors',
+        onclick: () => {
+          category('colors');
+          selected('');
+        }
+      })
+    ]),
+    Div({ class: 'divider my-1' }),
+    Div({ class: 'text-sm font-bold' }, () => `Select ${category()}`),
+    Div({ class: 'flex flex-col gap-2' }, () => 
+      options[category()].map(opt => 
+        Radio({
+          label: opt.label,
+          name: 'dynamic-option-group',
+          value: selected,
+          inputValue: opt.value,
+          onclick: () => selected(opt.value)
+        })
+      )
+    ),
+    () => selected() 
+      ? Div({ class: 'alert alert-success mt-2' }, () => `Selected ${category()}: ${selected()}`)
+      : null
+  ]);
+};
+Mount(DynamicDemo, '#demo-dynamic');
+```

docs/components/range.md

@@ -0,0 +1,258 @@
+# Range
+
+Range slider component for selecting numeric values with labels, tooltips, and DaisyUI styling.
+
+## Tag
+
+`Range`
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `value` | `number \| Signal<number>` | `0` | Current slider value |
+| `min` | `number` | `0` | Minimum value |
+| `max` | `number` | `100` | Maximum value |
+| `step` | `number` | `1` | Step increment |
+| `label` | `string \| VNode \| Signal` | `-` | Label text for the slider |
+| `tooltip` | `string` | `-` | Tooltip text on hover |
+| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
+| `oninput` | `function` | `-` | Input event handler |
+
+## Styling
+
+Range supports all **daisyUI Range classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Color | `range-primary`, `range-secondary`, `range-accent`, `range-info`, `range-success`, `range-warning`, `range-error` | Range color variants |
+| Size | `range-xs`, `range-sm`, `range-md`, `range-lg` | Range scale |
+
+> For further details, check the [daisyUI Range Documentation](https://daisyui.com/components/range) – Full reference for CSS classes.
+
+## Live Examples
+
+### Basic Range
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  const value = $(50);
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Range({
+      label: 'Volume',
+      value: value,
+      min: 0,
+      max: 100,
+      oninput: (e) => value(parseInt(e.target.value))
+    }),
+    Div({ class: 'text-center' }, () => `Value: ${value()}%`)
+  ]);
+};
+Mount(BasicDemo, '#demo-basic');
+```
+
+### With Tooltip
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-tooltip" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const TooltipDemo = () => {
+  const brightness = $(75);
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Range({
+      label: 'Brightness',
+      value: brightness,
+      min: 0,
+      max: 100,
+      tooltip: () => `${brightness()}% brightness`,
+      oninput: (e) => brightness(parseInt(e.target.value))
+    }),
+    Div({ class: 'w-full h-20 rounded-lg transition-all', style: () => `background-color: hsl(0, 0%, ${brightness()}%)` })
+  ]);
+};
+Mount(TooltipDemo, '#demo-tooltip');
+```
+
+### Color Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-colors" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const ColorsDemo = () => {
+  const primary = $(30);
+  const secondary = $(60);
+  const accent = $(90);
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Range({ label: 'Primary', value: primary, class: 'range-primary', oninput: (e) => primary(e.target.value) }),
+    Range({ label: 'Secondary', value: secondary, class: 'range-secondary', oninput: (e) => secondary(e.target.value) }),
+    Range({ label: 'Accent', value: accent, class: 'range-accent', oninput: (e) => accent(e.target.value) })
+  ]);
+};
+Mount(ColorsDemo, '#demo-colors');
+```
+
+### Size Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-sizes" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const SizesDemo = () => {
+  const xs = $(25);
+  const sm = $(50);
+  const md = $(75);
+  const lg = $(100);
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Range({ label: 'Extra Small', value: xs, class: 'range-xs', oninput: (e) => xs(e.target.value) }),
+    Range({ label: 'Small', value: sm, class: 'range-sm', oninput: (e) => sm(e.target.value) }),
+    Range({ label: 'Medium', value: md, class: 'range-md', oninput: (e) => md(e.target.value) }),
+    Range({ label: 'Large', value: lg, class: 'range-lg', oninput: (e) => lg(e.target.value) })
+  ]);
+};
+Mount(SizesDemo, '#demo-sizes');
+```
+
+### Price Range
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-price" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const PriceDemo = () => {
+  const price = $(500);
+  const maxPrice = 1000;
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Range({
+      label: 'Price Range',
+      value: price,
+      min: 0,
+      max: maxPrice,
+      step: 10,
+      oninput: (e) => price(parseInt(e.target.value))
+    }),
+    Div({ class: 'flex justify-between' }, [
+      Span({}, '$0'),
+      Span({}, () => `$${price()}`),
+      Span({}, `$${maxPrice}`)
+    ]),
+    Div({ class: 'mt-2 text-sm opacity-70' }, () => {
+      if (price() < 250) return 'Budget friendly';
+      if (price() < 750) return 'Mid range';
+      return 'Premium';
+    })
+  ]);
+};
+Mount(PriceDemo, '#demo-price');
+```
+
+### Audio Controls
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-audio" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const AudioDemo = () => {
+  const volume = $(50);
+  const bass = $(40);
+  const treble = $(60);
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({ class: 'flex items-center gap-3' }, [
+      Span({ class: 'w-12' }, '🔊'),
+      Range({
+        value: volume,
+        min: 0,
+        max: 100,
+        class: 'range-primary flex-1',
+        oninput: (e) => volume(e.target.value)
+      }),
+      Span({ class: 'w-12 text-right' }, () => `${volume()}%`)
+    ]),
+    Div({ class: 'flex items-center gap-3' }, [
+      Span({ class: 'w-12' }, '🎵 Bass'),
+      Range({
+        value: bass,
+        min: 0,
+        max: 100,
+        class: 'range-secondary flex-1',
+        oninput: (e) => bass(e.target.value)
+      }),
+      Span({ class: 'w-12 text-right' }, () => `${bass()}%`)
+    ]),
+    Div({ class: 'flex items-center gap-3' }, [
+      Span({ class: 'w-12' }, '🎶 Treble'),
+      Range({
+        value: treble,
+        min: 0,
+        max: 100,
+        class: 'range-accent flex-1',
+        oninput: (e) => treble(e.target.value)
+      }),
+      Span({ class: 'w-12 text-right' }, () => `${treble()}%`)
+    ])
+  ]);
+};
+Mount(AudioDemo, '#demo-audio');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  const value = $(50);
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({ class: 'text-sm font-bold' }, 'With Label'),
+    Range({ label: 'Label', value: $(50), oninput: (e) => {} }),
+    
+    Div({ class: 'text-sm font-bold mt-2' }, 'With Tooltip'),
+    Range({ tooltip: 'Tooltip message', value: $(50), oninput: (e) => {} }),
+    
+    Div({ class: 'text-sm font-bold mt-2' }, 'Disabled'),
+    Range({ disabled: true, value: $(50), oninput: (e) => {} })
+  ]);
+};
+Mount(VariantsDemo, '#demo-variants');
+```

docs/components/rating.md

@@ -0,0 +1,272 @@
+# Rating
+
+Star rating component with customizable count, icons, and read-only mode.
+
+## Tag
+
+`Rating`
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `value` | `number \| Signal<number>` | `0` | Current rating value |
+| `count` | `number \| Signal<number>` | `5` | Number of stars/items |
+| `mask` | `string` | `'mask-star'` | Mask shape (`mask-star`, `mask-star-2`, `mask-heart`) |
+| `readonly` | `boolean \| Signal<boolean>` | `false` | Disable interaction |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
+| `onchange` | `function` | `-` | Callback when rating changes |
+
+## Styling
+
+Rating supports all **daisyUI Rating classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Base | `rating` | Base rating container |
+| Color | `rating-primary`, `rating-secondary`, `rating-accent`, `rating-info`, `rating-success`, `rating-warning`, `rating-error` | Rating color variants |
+| Size | `rating-xs`, `rating-sm`, `rating-md`, `rating-lg` | Rating scale |
+| Mask | `mask-star`, `mask-star-2`, `mask-heart` | Rating icon shapes |
+
+> For further details, check the [daisyUI Rating Documentation](https://daisyui.com/components/rating) – Full reference for CSS classes.
+
+## Live Examples
+
+### Basic Rating
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  const rating = $(3);
+  
+  return Div({ class: 'flex flex-col gap-2 items-center' }, [
+    Rating({
+      value: rating,
+      count: 5,
+      onchange: (value) => rating(value)
+    }),
+    Div({ class: 'text-sm opacity-70' }, () => `Rating: ${rating()} / 5`)
+  ]);
+};
+Mount(BasicDemo, '#demo-basic');
+```
+
+### Heart Rating
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-heart" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const HeartDemo = () => {
+  const rating = $(4);
+  
+  return Div({ class: 'flex flex-col gap-2 items-center' }, [
+    Rating({
+      value: rating,
+      count: 5,
+      mask: 'mask-heart',
+      onchange: (value) => rating(value)
+    }),
+    Div({ class: 'text-sm opacity-70' }, () => `${rating()} hearts`)
+  ]);
+};
+Mount(HeartDemo, '#demo-heart');
+```
+
+### Star with Outline
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-star2" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const Star2Demo = () => {
+  const rating = $(2);
+  
+  return Div({ class: 'flex flex-col gap-2 items-center' }, [
+    Rating({
+      value: rating,
+      count: 5,
+      mask: 'mask-star-2',
+      onchange: (value) => rating(value)
+    }),
+    Div({ class: 'text-sm opacity-70' }, () => `${rating()} stars`)
+  ]);
+};
+Mount(Star2Demo, '#demo-star2');
+```
+
+### Read-only Rating
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-readonly" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const ReadonlyDemo = () => {
+  const rating = $(4.5);
+  
+  return Div({ class: 'flex flex-col gap-2 items-center' }, [
+    Rating({
+      value: rating,
+      count: 5,
+      readonly: true
+    }),
+    Div({ class: 'text-sm opacity-70' }, 'Average rating: 4.5/5 (read-only)')
+  ]);
+};
+Mount(ReadonlyDemo, '#demo-readonly');
+```
+
+### Product Review
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-review" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const ReviewDemo = () => {
+  const quality = $(4);
+  const price = $(3);
+  const support = $(5);
+  
+  const average = () => Math.round(((quality() + price() + support()) / 3) * 10) / 10;
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({ class: 'text-lg font-bold' }, 'Product Review'),
+    Div({ class: 'flex flex-col gap-2' }, [
+      Div({ class: 'flex justify-between items-center' }, [
+        Span({ class: 'text-sm w-24' }, 'Quality:'),
+        Rating({
+          value: quality,
+          count: 5,
+          onchange: (v) => quality(v)
+        })
+      ]),
+      Div({ class: 'flex justify-between items-center' }, [
+        Span({ class: 'text-sm w-24' }, 'Price:'),
+        Rating({
+          value: price,
+          count: 5,
+          onchange: (v) => price(v)
+        })
+      ]),
+      Div({ class: 'flex justify-between items-center' }, [
+        Span({ class: 'text-sm w-24' }, 'Support:'),
+        Rating({
+          value: support,
+          count: 5,
+          onchange: (v) => support(v)
+        })
+      ])
+    ]),
+    Div({ class: 'divider my-1' }),
+    Div({ class: 'flex justify-between items-center' }, [
+      Span({ class: 'font-bold' }, 'Overall:'),
+      Div({ class: 'text-2xl font-bold text-primary' }, () => average())
+    ])
+  ]);
+};
+Mount(ReviewDemo, '#demo-review');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-6"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  return Div({ class: 'flex flex-col gap-6' }, [
+    Div({ class: 'text-center' }, [
+      Div({ class: 'text-sm mb-2' }, 'Mask Star'),
+      Rating({ value: $(3), count: 5, mask: 'mask-star' })
+    ]),
+    Div({ class: 'text-center' }, [
+      Div({ class: 'text-sm mb-2' }, 'Mask Star 2 (yellow)'),
+      Rating({ value: $(4), count: 5, mask: 'mask-star-2', class: 'rating-warning' })
+    ]),
+    Div({ class: 'text-center' }, [
+      Div({ class: 'text-sm mb-2' }, 'Mask Heart'),
+      Rating({ value: $(5), count: 5, mask: 'mask-heart', class: 'rating-error' })
+    ]),
+    Div({ class: 'text-center' }, [
+      Div({ class: 'text-sm mb-2' }, 'Half Stars (read-only)'),
+      Rating({ value: $(3.5), count: 5, readonly: true })
+    ])
+  ]);
+};
+Mount(VariantsDemo, '#demo-variants');
+```
+
+### Interactive Feedback
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-feedback" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const FeedbackDemo = () => {
+  const rating = $(0);
+  
+  const messages = {
+    1: 'Very disappointed 😞',
+    2: 'Could be better 😕',
+    3: 'Good 👍',
+    4: 'Very good 😊',
+    5: 'Excellent! 🎉'
+  };
+  
+  return Div({ class: 'flex flex-col gap-4 items-center' }, [
+    Div({ class: 'text-center' }, [
+      Div({ class: 'text-sm mb-2' }, 'How was your experience?'),
+      Rating({
+        value: rating,
+        count: 5,
+        onchange: (value) => {
+          rating(value);
+          if (value >= 4) {
+            Toast('Thank you for your positive feedback!', 'alert-success', 2000);
+          } else if (value <= 2) {
+            Toast('We appreciate your feedback and will improve!', 'alert-warning', 2000);
+          } else {
+            Toast('Thanks for your rating!', 'alert-info', 2000);
+          }
+        }
+      })
+    ]),
+    () => rating() > 0 
+      ? Div({ class: 'alert alert-soft text-center' }, [
+          messages[rating()] || `Rating: ${rating()} stars`
+        ])
+      : null
+  ]);
+};
+Mount(FeedbackDemo, '#demo-feedback');
+```

docs/components/select.md

@@ -0,0 +1,217 @@
+# Select
+
+Dropdown select component with full DaisyUI styling, reactive items, and form integration.
+
+## Tag
+
+`Select`
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `label` | `string` | `-` | Label text above select |
+| `items` | `Array<{value: string, label: string}> \| Signal<Array>` | `[]` | Array of items with value and label |
+| `value` | `string \| Signal<string>` | `''` | Selected value |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
+| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
+| `onchange` | `function` | `-` | Change event handler |
+
+## Styling
+
+Select supports all **daisyUI Select classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Color | `select-primary`, `select-secondary`, `select-accent`, `select-info`, `select-success`, `select-warning`, `select-error` | Select color variants |
+| Size | `select-xs`, `select-sm`, `select-md`, `select-lg` | Select scale |
+| Style | `select-bordered` (default), `select-ghost` | Visual style variants |
+
+> For further details, check the [daisyUI Select Documentation](https://daisyui.com/components/select) – Full reference for CSS classes.
+
+## Live Examples
+
+### Basic Select
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  const selected = $('apple');
+  
+  return Select({
+    label: 'Choose a fruit',
+    items: [
+      { value: 'apple', label: '🍎 Apple' },
+      { value: 'banana', label: '🍌 Banana' },
+      { value: 'orange', label: '🍊 Orange' },
+      { value: 'grape', label: '🍇 Grape' }
+    ],
+    value: selected,
+    onchange: (e) => selected(e.target.value)
+  });
+};
+Mount(BasicDemo, '#demo-basic');
+```
+
+### With Reactive Display
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const ReactiveDemo = () => {
+  const selected = $('small');
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Select({
+      label: 'Select size',
+      items: [
+        { value: 'small', label: 'Small' },
+        { value: 'medium', label: 'Medium' },
+        { value: 'large', label: 'Large' }
+      ],
+      value: selected,
+      onchange: (e) => selected(e.target.value)
+    }),
+    Div({ class: 'alert alert-info' }, () => `You selected: ${selected()}`)
+  ]);
+};
+Mount(ReactiveDemo, '#demo-reactive');
+```
+
+### Disabled State
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-disabled" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const DisabledDemo = () => {
+  return Select({
+    label: 'Country (disabled)',
+    items: [
+      { value: 'mx', label: 'Mexico' },
+      { value: 'us', label: 'United States' },
+      { value: 'ca', label: 'Canada' }
+    ],
+    value: 'mx',
+    disabled: true
+  });
+};
+Mount(DisabledDemo, '#demo-disabled');
+```
+
+### Dynamic Items
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-dynamic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const DynamicDemo = () => {
+  const category = $('fruits');
+  const selectedItem = $('');
+  
+  const items = {
+    fruits: [
+      { value: 'apple', label: '🍎 Apple' },
+      { value: 'banana', label: '🍌 Banana' }
+    ],
+    vegetables: [
+      { value: 'carrot', label: '🥕 Carrot' },
+      { value: 'broccoli', label: '🥦 Broccoli' }
+    ]
+  };
+  
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Select({
+      label: 'Category',
+      items: [
+        { value: 'fruits', label: 'Fruits' },
+        { value: 'vegetables', label: 'Vegetables' }
+      ],
+      value: category,
+      onchange: (e) => {
+        category(e.target.value);
+        selectedItem('');
+      }
+    }),
+    Select({
+      label: 'Item',
+      items: () => items[category()] || [],
+      value: selectedItem,
+      onchange: (e) => selectedItem(e.target.value)
+    }),
+    () => selectedItem() ? Div({ class: 'alert alert-success' }, `Selected: ${selectedItem()}`) : null
+  ]);
+};
+Mount(DynamicDemo, '#demo-dynamic');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  const primary = $('option1');
+  const secondary = $('option2');
+  const ghost = $('');
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Select({
+      label: 'Primary Select',
+      class: 'select-primary',
+      items: [
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2' },
+        { value: 'option3', label: 'Option 3' }
+      ],
+      value: primary,
+      onchange: (e) => primary(e.target.value)
+    }),
+    Select({
+      label: 'Secondary Select',
+      class: 'select-secondary',
+      items: [
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2' }
+      ],
+      value: secondary,
+      onchange: (e) => secondary(e.target.value)
+    }),
+    Select({
+      label: 'Ghost Select',
+      class: 'select-ghost',
+      items: [
+        { value: '', label: 'Select an option' },
+        { value: 'opt1', label: 'Option 1' },
+        { value: 'opt2', label: 'Option 2' }
+      ],
+      value: ghost,
+      onchange: (e) => ghost(e.target.value)
+    })
+  ]);
+};
+Mount(VariantsDemo, '#demo-variants');
+```

docs/components/stack.md

@@ -0,0 +1,294 @@
+# Stack
+
+Stack component for layering multiple elements on top of each other, creating depth and visual hierarchy.
+
+## Tag
+
+`Stack`
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
+| `children` | `Array<VNode> \| VNode` | `-` | Elements to stack (first is bottom, last is top) |
+
+## Styling
+
+Stack supports all **daisyUI Stack classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Base | `stack` | Base stack container |
+| Direction | `stack-top`, `stack-bottom`, `stack-start`, `stack-end` | Stack alignment |
+| Width | `w-*` (Tailwind) | Custom width for the stack |
+
+> For further details, check the [daisyUI Stack Documentation](https://daisyui.com/components/stack) – Full reference for CSS classes.
+
+## Live Examples
+
+### Basic Stack
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  return Stack({ class: 'w-40' }, [
+    Div({ class: 'bg-primary text-primary-content rounded-lg p-4 shadow-lg' }, 'Layer 1'),
+    Div({ class: 'bg-secondary text-secondary-content rounded-lg p-4 shadow-lg' }, 'Layer 2'),
+    Div({ class: 'bg-accent text-accent-content rounded-lg p-4 shadow-lg' }, 'Layer 3')
+  ]);
+};
+Mount(BasicDemo, '#demo-basic');
+```
+
+### Card Stack
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-cards" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const CardsDemo = () => {
+  return Stack({ class: 'w-64' }, [
+    Div({ class: 'card bg-base-100 shadow-xl border border-base-300' }, [
+      Div({ class: 'card-body p-4' }, [
+        Span({ class: 'text-sm opacity-70' }, 'Back Card'),
+        Span({ class: 'font-bold' }, 'Additional info')
+      ])
+    ]),
+    Div({ class: 'card bg-primary text-primary-content shadow-xl' }, [
+      Div({ class: 'card-body p-4' }, [
+        Span({ class: 'text-sm' }, 'Front Card'),
+        Span({ class: 'font-bold text-lg' }, 'Main Content')
+      ])
+    ])
+  ]);
+};
+Mount(CardsDemo, '#demo-cards');
+```
+
+### Avatar Stack
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-avatars" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const AvatarsDemo = () => {
+  return Stack({ class: 'w-32' }, [
+    Div({ class: 'avatar placeholder' }, [
+      Div({ class: 'bg-neutral text-neutral-content rounded-full w-16 h-16 flex items-center justify-center' }, 'JD')
+    ]),
+    Div({ class: 'avatar placeholder' }, [
+      Div({ class: 'bg-primary text-primary-content rounded-full w-16 h-16 flex items-center justify-center' }, 'JS')
+    ]),
+    Div({ class: 'avatar placeholder' }, [
+      Div({ class: 'bg-secondary text-secondary-content rounded-full w-16 h-16 flex items-center justify-center' }, 'BC')
+    ])
+  ]);
+};
+Mount(AvatarsDemo, '#demo-avatars');
+```
+
+### Image Stack
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-images" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const ImagesDemo = () => {
+  return Stack({ class: 'w-48' }, [
+    Div({ class: 'w-full h-32 bg-gradient-to-r from-primary to-secondary rounded-lg shadow-lg' }, [
+      Div({ class: 'p-2 text-white text-sm' }, 'Background Image')
+    ]),
+    Div({ class: 'w-full h-32 bg-gradient-to-r from-secondary to-accent rounded-lg shadow-lg translate-x-2 translate-y-2' }, [
+      Div({ class: 'p-2 text-white text-sm' }, 'Middle Layer')
+    ]),
+    Div({ class: 'w-full h-32 bg-gradient-to-r from-accent to-primary rounded-lg shadow-lg translate-x-4 translate-y-4 flex items-center justify-center' }, [
+      Span({ class: 'text-white font-bold' }, 'Top Layer')
+    ])
+  ]);
+};
+Mount(ImagesDemo, '#demo-images');
+```
+
+### Photo Gallery Stack
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-gallery" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const GalleryDemo = () => {
+  const photos = [
+    { color: 'bg-primary', label: 'Photo 1' },
+    { color: 'bg-secondary', label: 'Photo 2' },
+    { color: 'bg-accent', label: 'Photo 3' },
+    { color: 'bg-info', label: 'Photo 4' }
+  ];
+  
+  return Stack({ class: 'w-48 cursor-pointer hover:scale-105 transition-transform' }, [
+    ...photos.map((photo, idx) => 
+      Div({ 
+        class: `${photo.color} rounded-lg shadow-lg transition-all`,
+        style: `transform: translate(${idx * 4}px, ${idx * 4}px);`
+      }, [
+        Div({ class: 'p-4 text-white font-bold' }, photo.label)
+      ])
+    )
+  ]);
+};
+Mount(GalleryDemo, '#demo-gallery');
+```
+
+### Interactive Stack
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-interactive" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const InteractiveDemo = () => {
+  const active = $(0);
+  const colors = ['primary', 'secondary', 'accent', 'info', 'success'];
+  const labels = ['Home', 'Profile', 'Settings', 'Messages', 'Notifications'];
+  
+  return Div({ class: 'flex flex-col gap-6 items-center' }, [
+    Stack({ class: 'w-56' }, colors.map((color, idx) => 
+      Div({ 
+        class: () => `bg-${color} text-${color}-content rounded-lg p-4 shadow-lg transition-all cursor-pointer ${idx === active() ? 'scale-105 z-10' : ''}`,
+        style: () => `transform: translate(${idx * 8}px, ${idx * 8}px);`,
+        onclick: () => active(idx)
+      }, [
+        Div({ class: 'font-bold' }, labels[idx]),
+        Div({ class: 'text-sm opacity-80' }, `Layer ${idx + 1}`)
+      ])
+    )),
+    Div({ class: 'mt-4 text-center' }, [
+      Span({ class: 'font-bold' }, () => `Active: ${labels[active()]}`),
+      Div({ class: 'flex gap-2 mt-2' }, colors.map((_, idx) =>
+        Button({ 
+          class: () => `btn btn-xs ${idx === active() ? 'btn-primary' : 'btn-ghost'}`,
+          onclick: () => active(idx)
+        }, `${idx + 1}`)
+      ))
+    ])
+  ]);
+};
+Mount(InteractiveDemo, '#demo-interactive');
+```
+
+### Notification Stack
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-notifications" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const NotificationsDemo = () => {
+  const notifications = $([
+    { id: 1, message: 'New message from John', type: 'info' },
+    { id: 2, message: 'Your order has shipped', type: 'success' },
+    { id: 3, message: 'Meeting in 10 minutes', type: 'warning' }
+  ]);
+  
+  const removeNotification = (id) => {
+    notifications(notifications().filter(n => n.id !== id));
+  };
+  
+  const typeClasses = {
+    info: 'bg-info text-info-content',
+    success: 'bg-success text-success-content',
+    warning: 'bg-warning text-warning-content',
+    error: 'bg-error text-error-content'
+  };
+  
+  return Div({ class: 'flex flex-col gap-4 items-center' }, [
+    Stack({ class: 'w-80' }, () => notifications().map((notif, idx) => 
+      Div({ 
+        class: () => `${typeClasses[notif.type]} rounded-lg p-3 shadow-lg transition-all cursor-pointer`,
+        style: () => `transform: translate(${idx * 4}px, ${idx * 4}px);`,
+        onclick: () => removeNotification(notif.id)
+      }, [
+        Div({ class: 'flex justify-between items-center' }, [
+          Span({ class: 'text-sm' }, notif.message),
+          Span({ class: 'text-xs opacity-70 cursor-pointer hover:opacity-100' }, '✕')
+        ])
+      ])
+    )),
+    () => notifications().length === 0 
+      ? Div({ class: 'alert alert-soft' }, 'No notifications')
+      : Button({ 
+          class: 'btn btn-sm btn-ghost mt-2',
+          onclick: () => notifications([])
+        }, 'Clear All')
+  ]);
+};
+Mount(NotificationsDemo, '#demo-notifications');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
+    Div({ class: 'text-center' }, [
+      Div({ class: 'text-sm mb-2' }, 'Small Stack'),
+      Stack({ class: 'w-24' }, [
+        Div({ class: 'bg-primary rounded p-2 text-xs' }, '1'),
+        Div({ class: 'bg-secondary rounded p-2 text-xs' }, '2'),
+        Div({ class: 'bg-accent rounded p-2 text-xs' }, '3')
+      ])
+    ]),
+    Div({ class: 'text-center' }, [
+      Div({ class: 'text-sm mb-2' }, 'Medium Stack'),
+      Stack({ class: 'w-32' }, [
+        Div({ class: 'bg-primary rounded p-3' }, 'A'),
+        Div({ class: 'bg-secondary rounded p-3' }, 'B'),
+        Div({ class: 'bg-accent rounded p-3' }, 'C')
+      ])
+    ]),
+    Div({ class: 'text-center' }, [
+      Div({ class: 'text-sm mb-2' }, 'Large Stack'),
+      Stack({ class: 'w-40' }, [
+        Div({ class: 'bg-primary rounded p-4' }, 'X'),
+        Div({ class: 'bg-secondary rounded p-4' }, 'Y'),
+        Div({ class: 'bg-accent rounded p-4' }, 'Z')
+      ])
+    ])
+  ]);
+};
+Mount(VariantsDemo, '#demo-variants');
+```

docs/components/stat.md

@@ -0,0 +1,329 @@
+# Stat
+
+Statistic card component for displaying metrics, counts, and key performance indicators with optional icons and descriptions.
+
+## Tag
+
+`Stat`
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `label` | `string \| VNode \| Signal` | `-` | Statistic label/title |
+| `value` | `string \| number \| Signal` | `-` | Main statistic value |
+| `desc` | `string \| VNode \| Signal` | `-` | Description or trend text |
+| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed in the figure area |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
+
+## Styling
+
+Stat supports all **daisyUI Stat classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Base | `stat` | Base stat container |
+| Sections | `stat-figure`, `stat-title`, `stat-value`, `stat-desc` | Stat sub-components |
+| Variants | `stat-compact` | Compact spacing variant |
+
+> For further details, check the [daisyUI Stat Documentation](https://daisyui.com/components/stat) – Full reference for CSS classes.
+
+## Live Examples
+
+### Basic Stat
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 grid grid-cols-1 md:grid-cols-3 gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [
+    Stat({
+      label: 'Total Users',
+      value: '2,345',
+      desc: '↗︎ 120 new users this month'
+    }),
+    Stat({
+      label: 'Revenue',
+      value: '$45,678',
+      desc: '↘︎ 5% decrease from last month'
+    }),
+    Stat({
+      label: 'Conversion Rate',
+      value: '3.45%',
+      desc: '↗︎ 0.5% increase'
+    })
+  ]);
+};
+Mount(BasicDemo, '#demo-basic');
+```
+
+### With Icons
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-icons" class="bg-base-100 p-6 rounded-xl border border-base-300 grid grid-cols-1 md:grid-cols-3 gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const IconsDemo = () => {
+  return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [
+    Stat({
+      label: 'Active Users',
+      value: '1,234',
+      desc: 'Currently online',
+      icon: Span({ class: 'text-4xl' }, '👥')  // text-4xl para emojis
+    }),
+    Stat({
+      label: 'New Orders',
+      value: '89',
+      desc: 'Today',
+      icon: Span({ class: 'text-4xl' }, '📦')
+    }),
+    Stat({
+      label: 'Pending Tasks',
+      value: '23',
+      desc: 'Need attention',
+      icon: Span({ class: 'text-4xl' }, '⏳')
+    })
+  ]);
+};
+Mount(IconsDemo, '#demo-icons');
+```
+
+### Reactive Values
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const ReactiveDemo = () => {
+  const count = $(0);
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({ class: 'grid grid-cols-1 md:grid-cols-2 gap-4' }, [
+      Stat({
+        label: 'Counter',
+        value: () => count(),
+        desc: 'Click the button to increase',
+        icon: Span({ class: 'text-2xl' }, '🔢')
+      }),
+      Stat({
+        label: 'Squared',
+        value: () => Math.pow(count(), 2),
+        desc: 'Square of counter',
+        icon: Span({ class: 'text-2xl' }, '📐')
+      })
+    ]),
+    Div({ class: 'flex gap-2 justify-center' }, [
+      Button({ 
+        class: 'btn btn-primary',
+        onclick: () => count(count() + 1)
+      }, 'Increment'),
+      Button({ 
+        class: 'btn btn-ghost',
+        onclick: () => count(0)
+      }, 'Reset')
+    ])
+  ]);
+};
+Mount(ReactiveDemo, '#demo-reactive');
+```
+
+### Multiple Stats in Row
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-multiple" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const MultipleDemo = () => {
+  return Div({ class: 'grid grid-cols-1 md:grid-cols-4 gap-4' }, [
+    Stat({
+      label: 'Posts',
+      value: '1,234',
+      desc: 'Total content',
+      icon: Span({ class: 'text-4xl' }, '📝')  // text-4xl
+    }),
+    Stat({
+      label: 'Comments',
+      value: '8,901',
+      desc: 'Engagement',
+      icon: Span({ class: 'text-4xl' }, '💬')
+    }),
+    Stat({
+      label: 'Likes',
+      value: '12,345',
+      desc: 'Reactions',
+      icon: Span({ class: 'text-4xl' }, '❤️')
+    }),
+    Stat({
+      label: 'Shares',
+      value: '456',
+      desc: 'Viral reach',
+      icon: Span({ class: 'text-4xl' }, '🔄')
+    })
+  ]);
+};
+Mount(MultipleDemo, '#demo-multiple');
+```
+
+### Dashboard Example
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-dashboard" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const DashboardDemo = () => {
+  const stats = $({
+    users: 1245,
+    revenue: 89342,
+    orders: 342,
+    satisfaction: 94
+  });
+  
+  const updateStats = () => {
+    stats({
+      users: stats().users + Math.floor(Math.random() * 50),
+      revenue: stats().revenue + Math.floor(Math.random() * 1000),
+      orders: stats().orders + Math.floor(Math.random() * 20),
+      satisfaction: Math.min(100, stats().satisfaction + Math.floor(Math.random() * 5) - 2)
+    });
+  };
+  
+  return Div({ class: 'flex flex-col gap-6' }, [
+    Div({ class: 'grid grid-cols-1 md:grid-cols-4 gap-4' }, [
+      Stat({
+        label: 'Total Users',
+        value: () => stats().users.toLocaleString(),
+        desc: 'Registered users',
+        icon: Span({ class: 'text-4xl' }, '👥')  // text-4xl
+      }),
+      Stat({
+        label: 'Revenue',
+        value: () => `$${stats().revenue.toLocaleString()}`,
+        desc: 'This month',
+        icon: Span({ class: 'text-4xl' }, '💰')
+      }),
+      Stat({
+        label: 'Orders',
+        value: () => stats().orders.toLocaleString(),
+        desc: 'Completed',
+        icon: Span({ class: 'text-4xl' }, '📦')
+      }),
+      Stat({
+        label: 'Satisfaction',
+        value: () => `${stats().satisfaction}%`,
+        desc: stats().satisfaction > 90 ? 'Excellent!' : 'Good',
+        icon: Span({ class: 'text-4xl' }, '😊')
+      })
+    ]),
+    Div({ class: 'flex justify-center' }, [
+      Button({ 
+        class: 'btn btn-primary',
+        onclick: updateStats
+      }, 'Refresh Data')
+    ])
+  ]);
+};
+Mount(DashboardDemo, '#demo-dashboard');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 grid grid-cols-1 md:grid-cols-2 gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  return Div({ class: 'grid grid-cols-1 md:grid-cols-2 gap-4' }, [
+    Stat({
+      label: 'Primary Stat',
+      value: '1,234',
+      desc: 'With description',
+      icon: Span({ class: 'text-4xl' }, '⭐'),  // text-4xl
+      class: 'bg-primary/10 text-primary'
+    }),
+    Stat({
+      label: 'Success Stat',
+      value: '89%',
+      desc: 'Success rate',
+      icon: Span({ class: 'text-4xl' }, '✅'),
+      class: 'bg-success/10 text-success'
+    }),
+    Stat({
+      label: 'Warning Stat',
+      value: '23',
+      desc: 'Pending items',
+      icon: Span({ class: 'text-4xl' }, '⚠️'),
+      class: 'bg-warning/10 text-warning'
+    }),
+    Stat({
+      label: 'Error Stat',
+      value: '5',
+      desc: 'Failed attempts',
+      icon: Span({ class: 'text-4xl' }, '❌'),
+      class: 'bg-error/10 text-error'
+    })
+  ]);
+};
+Mount(VariantsDemo, '#demo-variants');
+```
+
+### Compact Stats
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-compact" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const CompactDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-4' }, [
+    Stat({
+      label: 'Views',
+      value: '12.3K',
+      class: 'stat-compact'
+    }),
+    Stat({
+      label: 'Likes',
+      value: '2,456',
+      class: 'stat-compact'
+    }),
+    Stat({
+      label: 'Comments',
+      value: '345',
+      class: 'stat-compact'
+    }),
+    Stat({
+      label: 'Shares',
+      value: '89',
+      class: 'stat-compact'
+    })
+  ]);
+};
+Mount(CompactDemo, '#demo-compact');
+```

docs/components/swap.md

@@ -0,0 +1,292 @@
+# Swap
+
+Toggle component that swaps between two states (on/off) with customizable icons or content.
+
+## Tag
+
+`Swap`
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `value` | `boolean \| Signal<boolean>` | `false` | Swap state (true = on, false = off) |
+| `on` | `string \| VNode \| Signal` | `-` | Content to show when state is on |
+| `off` | `string \| VNode \| Signal` | `-` | Content to show when state is off |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
+| `onclick` | `function` | `-` | Click event handler |
+
+## Styling
+
+Swap supports all **daisyUI Swap classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Base | `swap` | Base swap container |
+| Size | `swap-xs`, `swap-sm`, `swap-md`, `swap-lg` | Swap scale |
+| Effect | `swap-rotate`, `swap-flip` | Animation effect on toggle |
+
+> For further details, check the [daisyUI Swap Documentation](https://daisyui.com/components/swap) – Full reference for CSS classes.
+
+## Live Examples
+
+### Basic Swap
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  const isOn = $(false);
+  
+  return Swap({
+    value: isOn,
+    on: "🌟 ON",
+    off: "💫 OFF",
+    onclick: () => isOn(!isOn())
+  });
+};
+Mount(BasicDemo, '#demo-basic');
+```
+
+### Icon Swap
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-icons" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const IconsDemo = () => {
+  const isOn = $(false);
+  
+  return Swap({
+    value: isOn,
+    on: "👁️",
+    off: "👁️‍🗨️",
+    onclick: () => isOn(!isOn())
+  });
+};
+Mount(IconsDemo, '#demo-icons');
+```
+
+### Emoji Swap
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-emoji" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const EmojiDemo = () => {
+  const isOn = $(false);
+  
+  return Swap({
+    value: isOn,
+    on: "❤️",
+    off: "🖤",
+    onclick: () => isOn(!isOn())
+  });
+};
+Mount(EmojiDemo, '#demo-emoji');
+```
+
+### Custom Content Swap
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-custom" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const CustomDemo = () => {
+  const isOn = $(false);
+  
+  return Swap({
+    value: isOn,
+    on: Div({ class: "badge badge-success gap-1" }, ["✅", " Active"]),
+    off: Div({ class: "badge badge-ghost gap-1" }, ["⭕", " Inactive"]),
+    onclick: () => isOn(!isOn())
+  });
+};
+Mount(CustomDemo, '#demo-custom');
+```
+
+### With Reactive State
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const ReactiveDemo = () => {
+  const isOn = $(false);
+  
+  return Div({ class: 'flex flex-col gap-4 items-center' }, [
+    Swap({
+      value: isOn,
+      on: "👁️",
+      off: "👁️‍🗨️",
+      onclick: () => isOn(!isOn())
+    }),
+    Div({ class: 'text-center' }, () => 
+      isOn() 
+        ? Div({ class: 'alert alert-success' }, 'Content is visible')
+        : Div({ class: 'alert alert-soft' }, 'Content is hidden')
+    )
+  ]);
+};
+Mount(ReactiveDemo, '#demo-reactive');
+```
+
+### Toggle Mode Swap
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-mode" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const ModeDemo = () => {
+  const darkMode = $(false);
+  const notifications = $(true);
+  const sound = $(false);
+  
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Div({ class: 'flex justify-between items-center' }, [
+      Span({}, 'Dark mode'),
+      Swap({
+        value: darkMode,
+        on: "🌙",
+        off: "☀️",
+        onclick: () => darkMode(!darkMode())
+      })
+    ]),
+    Div({ class: 'flex justify-between items-center' }, [
+      Span({}, 'Notifications'),
+      Swap({
+        value: notifications,
+        on: "🔔",
+        off: "🔕",
+        onclick: () => notifications(!notifications())
+      })
+    ]),
+    Div({ class: 'flex justify-between items-center' }, [
+      Span({}, 'Sound effects'),
+      Swap({
+        value: sound,
+        on: "🔊",
+        off: "🔇",
+        onclick: () => sound(!sound())
+      })
+    ]),
+    Div({ class: 'mt-2 p-3 rounded-lg', style: () => darkMode() ? 'background: #1f2937; color: white' : 'background: #f3f4f6' }, [
+      Div({ class: 'text-sm' }, () => `Mode: ${darkMode() ? 'Dark' : 'Light'} | Notifications: ${notifications() ? 'On' : 'Off'} | Sound: ${sound() ? 'On' : 'Off'}`)
+    ])
+  ]);
+};
+Mount(ModeDemo, '#demo-mode');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [
+    Div({ class: 'text-center' }, [
+      Div({ class: 'text-xs mb-2' }, 'Volume'),
+      Swap({
+        value: $(false),
+        on: "🔊",
+        off: "🔇"
+      })
+    ]),
+    Div({ class: 'text-center' }, [
+      Div({ class: 'text-xs mb-2' }, 'Like'),
+      Swap({
+        value: $(true),
+        on: "❤️",
+        off: "🤍"
+      })
+    ]),
+    Div({ class: 'text-center' }, [
+      Div({ class: 'text-xs mb-2' }, 'Star'),
+      Swap({
+        value: $(false),
+        on: "⭐",
+        off: "☆"
+      })
+    ]),
+    Div({ class: 'text-center' }, [
+      Div({ class: 'text-xs mb-2' }, 'Check'),
+      Swap({
+        value: $(true),
+        on: "✅",
+        off: "❌"
+      })
+    ])
+  ]);
+};
+Mount(VariantsDemo, '#demo-variants');
+```
+
+### Simple Todo Toggle
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-todo" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const TodoDemo = () => {
+  const todos = [
+    { id: 1, text: 'Complete documentation', completed: $(true) },
+    { id: 2, text: 'Review pull requests', completed: $(false) },
+    { id: 3, text: 'Deploy to production', completed: $(false) }
+  ];
+  
+  return Div({ class: 'flex flex-col gap-3' }, [
+    Div({ class: 'text-sm font-bold mb-2' }, 'Todo list'),
+    ...todos.map(todo => 
+      Div({ class: 'flex items-center justify-between p-2 bg-base-200 rounded-lg' }, [
+        Span({ class: todo.completed() ? 'line-through opacity-50' : '' }, todo.text),
+        Swap({
+          value: todo.completed,
+          on: "✅",
+          off: "⬜",
+          onclick: () => todo.completed(!todo.completed())
+        })
+      ])
+    ),
+    Div({ class: 'mt-2 text-sm opacity-70' }, () => {
+      const completed = todos.filter(t => t.completed()).length;
+      return `${completed} of ${todos.length} tasks completed`;
+    })
+  ]);
+};
+Mount(TodoDemo, '#demo-todo');
+```

docs/components/table.md

@@ -0,0 +1,412 @@
+# Table
+
+Data table component with sorting, pagination, zebra stripes, pin rows, and custom cell rendering.
+
+## Tag
+
+`Table`
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `items` | `Array \| Signal<Array>` | `[]` | Data array to display |
+| `columns` | `Array<Column>` | `[]` | Column definitions |
+| `keyFn` | `function` | `(item, idx) => idx` | Unique key function for rows |
+| `zebra` | `boolean \| Signal<boolean>` | `false` | Enable zebra striping |
+| `pinRows` | `boolean \| Signal<boolean>` | `false` | Pin header rows on scroll |
+| `empty` | `string \| VNode` | `'No data'` | Content to show when no data |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
+
+### Column Structure
+
+| Property | Type | Description |
+| :--- | :--- | :--- |
+| `label` | `string` | Column header text |
+| `key` | `string` | Property key to display from item |
+| `render` | `function(item, index)` | Custom render function for cell content |
+| `class` | `string` | Additional CSS classes for column cells |
+| `footer` | `string \| VNode` | Footer content for the column |
+
+## Styling
+
+Table supports all **daisyUI Table classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Base | `table` | Base table styling |
+| Variant | `table-zebra` | Zebra striping |
+| Size | `table-xs`, `table-sm`, `table-md`, `table-lg`, `table-xl` | Table scale |
+| Feature | `table-pin-rows`, `table-pin-cols` | Pin headers/columns |
+
+> For further details, check the [daisyUI Table Documentation](https://daisyui.com/components/table) – Full reference for CSS classes.
+
+## Live Examples
+
+### Basic Table
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  const users = [
+    { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
+    { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
+    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'Editor' }
+  ];
+  
+  return Table({
+    items: users,
+    columns: [
+      { label: 'ID', key: 'id' },
+      { label: 'Name', key: 'name' },
+      { label: 'Email', key: 'email' },
+      { label: 'Role', key: 'role' }
+    ]
+  });
+};
+Mount(BasicDemo, '#demo-basic');
+```
+
+### With Zebra Stripes
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-zebra" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const ZebraDemo = () => {
+  const products = [
+    { id: 1, name: 'Laptop', price: '$999', stock: 15 },
+    { id: 2, name: 'Mouse', price: '$29', stock: 42 },
+    { id: 3, name: 'Keyboard', price: '$79', stock: 28 },
+    { id: 4, name: 'Monitor', price: '$299', stock: 12 }
+  ];
+  
+  return Table({
+    items: products,
+    columns: [
+      { label: 'Product', key: 'name' },
+      { label: 'Price', key: 'price' },
+      { label: 'Stock', key: 'stock' }
+    ],
+    zebra: true
+  });
+};
+Mount(ZebraDemo, '#demo-zebra');
+```
+
+### With Custom Cell Rendering
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-custom" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const CustomDemo = () => {
+  const orders = [
+    { id: 101, customer: 'Alice', amount: 250, status: 'completed' },
+    { id: 102, customer: 'Bob', amount: 89, status: 'pending' },
+    { id: 103, customer: 'Charlie', amount: 450, status: 'shipped' }
+  ];
+  
+  return Table({
+    items: orders,
+    columns: [
+      { label: 'Order ID', key: 'id' },
+      { label: 'Customer', key: 'customer' },
+      { 
+        label: 'Amount', 
+        key: 'amount',
+        render: (item) => `$${item.amount}`
+      },
+      { 
+        label: 'Status', 
+        key: 'status',
+        render: (item) => {
+          const statusClass = {
+            completed: 'badge badge-success',
+            pending: 'badge badge-warning',
+            shipped: 'badge badge-info'
+          };
+          return Span({ class: statusClass[item.status] }, item.status);
+        }
+      }
+    ],
+    zebra: true
+  });
+};
+Mount(CustomDemo, '#demo-custom');
+```
+
+### With Footers
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-footer" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const FooterDemo = () => {
+  const sales = [
+    { month: 'January', revenue: 12500, expenses: 8900 },
+    { month: 'February', revenue: 14200, expenses: 9200 },
+    { month: 'March', revenue: 16800, expenses: 10100 }
+  ];
+  
+  const totalRevenue = sales.reduce((sum, item) => sum + item.revenue, 0);
+  const totalExpenses = sales.reduce((sum, item) => sum + item.expenses, 0);
+  
+  return Table({
+    items: sales,
+    columns: [
+      { label: 'Month', key: 'month' },
+      { 
+        label: 'Revenue', 
+        key: 'revenue',
+        render: (item) => `$${item.revenue.toLocaleString()}`,
+        footer: `Total: $${totalRevenue.toLocaleString()}`
+      },
+      { 
+        label: 'Expenses', 
+        key: 'expenses',
+        render: (item) => `$${item.expenses.toLocaleString()}`,
+        footer: `Total: $${totalExpenses.toLocaleString()}`
+      },
+      { 
+        label: 'Profit', 
+        render: (item) => `$${(item.revenue - item.expenses).toLocaleString()}`,
+        footer: `$${(totalRevenue - totalExpenses).toLocaleString()}`
+      }
+    ],
+    zebra: true
+  });
+};
+Mount(FooterDemo, '#demo-footer');
+```
+
+### Empty State
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-empty" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const EmptyDemo = () => {
+  const emptyList = [];
+  
+  return Table({
+    items: emptyList,
+    columns: [
+      { label: 'ID', key: 'id' },
+      { label: 'Name', key: 'name' }
+    ],
+    empty: Div({ class: 'flex flex-col items-center gap-2 p-4' }, [
+      Span({ class: 'text-2xl' }, '📭'),
+      Span({}, 'No records found')
+    ])
+  });
+};
+Mount(EmptyDemo, '#demo-empty');
+```
+
+### Reactive Data
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const ReactiveDemo = () => {
+  const filter = $('all');
+  const tasks = $([
+    { id: 1, title: 'Complete documentation', completed: true },
+    { id: 2, title: 'Review pull requests', completed: false },
+    { id: 3, title: 'Deploy to production', completed: false },
+    { id: 4, title: 'Update dependencies', completed: true }
+  ]);
+  
+  const filteredTasks = () => {
+    if (filter() === 'completed') {
+      return tasks().filter(t => t.completed);
+    } else if (filter() === 'pending') {
+      return tasks().filter(t => !t.completed);
+    }
+    return tasks();
+  };
+  
+  const addTask = () => {
+    const newId = Math.max(...tasks().map(t => t.id), 0) + 1;
+    tasks([...tasks(), { id: newId, title: `Task ${newId}`, completed: false }]);
+  };
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({ class: 'flex gap-2' }, [
+      Button({ 
+        class: 'btn btn-sm',
+        onclick: () => filter('all')
+      }, 'All'),
+      Button({ 
+        class: 'btn btn-sm',
+        onclick: () => filter('completed')
+      }, 'Completed'),
+      Button({ 
+        class: 'btn btn-sm',
+        onclick: () => filter('pending')
+      }, 'Pending'),
+      Button({ 
+        class: 'btn btn-sm btn-primary',
+        onclick: addTask
+      }, 'Add Task')
+    ]),
+    Table({
+      items: filteredTasks,
+      columns: [
+        { label: 'ID', key: 'id' },
+        { label: 'Title', key: 'title' },
+        {
+          label: 'Status',
+          render: (item) => item.completed 
+            ? Span({ class: 'badge badge-success' }, '✓ Done')
+            : Span({ class: 'badge badge-warning' }, '○ Pending')
+        }
+      ],
+      zebra: true
+    })
+  ]);
+};
+Mount(ReactiveDemo, '#demo-reactive');
+```
+
+### With Actions
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-actions" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const ActionsDemo = () => {
+  const users = $([
+    { id: 1, name: 'John Doe', email: 'john@example.com', active: true },
+    { id: 2, name: 'Jane Smith', email: 'jane@example.com', active: false },
+    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', active: true }
+  ]);
+  
+  const deleteUser = (id) => {
+    users(users().filter(u => u.id !== id));
+    Toast('User deleted', 'alert-info', 2000);
+  };
+  
+  const toggleActive = (id) => {
+    users(users().map(u => 
+      u.id === id ? { ...u, active: !u.active } : u
+    ));
+  };
+  
+  return Table({
+    items: users,
+    columns: [
+      { label: 'ID', key: 'id' },
+      { label: 'Name', key: 'name' },
+      { label: 'Email', key: 'email' },
+      {
+        label: 'Status',
+        render: (item) => item.active
+          ? Span({ class: 'badge badge-success' }, 'Active')
+          : Span({ class: 'badge badge-ghost' }, 'Inactive')
+      },
+      {
+        label: 'Actions',
+        render: (item) => Div({ class: 'flex gap-1' }, [
+          Button({
+            class: 'btn btn-xs btn-ghost',
+            onclick: () => toggleActive(item.id)
+          }, item.active ? 'Deactivate' : 'Activate'),
+          Button({
+            class: 'btn btn-xs btn-error',
+            onclick: () => deleteUser(item.id)
+          }, 'Delete')
+        ])
+      }
+    ],
+    zebra: true
+  });
+};
+Mount(ActionsDemo, '#demo-actions');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-6"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  const data = [
+    { id: 1, name: 'Item 1', value: 100 },
+    { id: 2, name: 'Item 2', value: 200 },
+    { id: 3, name: 'Item 3', value: 300 }
+  ];
+  
+  return Div({ class: 'flex flex-col gap-6' }, [
+    Div({ class: 'text-sm font-bold' }, 'Default Table'),
+    Table({
+      items: data,
+      columns: [
+        { label: 'ID', key: 'id' },
+        { label: 'Name', key: 'name' },
+        { label: 'Value', key: 'value' }
+      ]
+    }),
+    
+    Div({ class: 'text-sm font-bold mt-4' }, 'Zebra Stripes'),
+    Table({
+      items: data,
+      columns: [
+        { label: 'ID', key: 'id' },
+        { label: 'Name', key: 'name' },
+        { label: 'Value', key: 'value' }
+      ],
+      zebra: true
+    }),
+    
+    Div({ class: 'text-sm font-bold mt-4' }, 'Compact Table'),
+    Table({
+      items: data,
+      columns: [
+        { label: 'ID', key: 'id' },
+        { label: 'Name', key: 'name' },
+        { label: 'Value', key: 'value' }
+      ],
+      class: 'table-compact'
+    })
+  ]);
+};
+Mount(VariantsDemo, '#demo-variants');
+```

docs/components/tabs.md

@@ -0,0 +1,409 @@
+# Tabs
+
+Tabs component for organizing content into separate panels with tab navigation.
+
+## Tag
+
+`Tabs`
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `items` | `Array<TabItem> \| Signal<Array>` | `[]` | Array of tab items |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
+
+### TabItem Structure
+
+| Property | Type | Description |
+| :--- | :--- | :--- |
+| `label` | `string \| VNode` | Tab button label |
+| `content` | `VNode \| function` | Content to display when tab is active |
+| `active` | `boolean \| Signal<boolean>` | Whether this tab is active (only one per group) |
+| `disabled` | `boolean` | Whether tab is disabled |
+| `tip` | `string` | Tooltip text for the tab |
+| `onclick` | `function` | Click handler (optional, overrides default) |
+
+## Styling
+
+Tabs supports all **daisyUI Tabs classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Base | `tabs` | Base tabs container |
+| Variant | `tabs-box`, `tabs-lifted` | Tab style variants |
+| Size | `tabs-xs`, `tabs-sm`, `tabs-md`, `tabs-lg` | Tab scale |
+| State | `tab-active`, `tab-disabled` | Tab states |
+
+> For further details, check the [daisyUI Tabs Documentation](https://daisyui.com/components/tabs) – Full reference for CSS classes.
+
+### Example
+
+```javascript
+Tabs({
+  items: [
+    { label: "Tab 1", content: "Content 1", active: true },
+    { label: "Tab 2", content: "Content 2" }
+  ],
+  class: "tabs-box"
+});
+```
+
+## Live Examples
+
+### Basic Tabs
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  const activeTab = $('tab1');
+  
+  return Tabs({
+    items: [
+      {
+        label: 'Tab 1',
+        active: () => activeTab() === 'tab1',
+        onclick: () => activeTab('tab1'),
+        content: Div({ class: 'p-4' }, 'Content for Tab 1')
+      },
+      {
+        label: 'Tab 2',
+        active: () => activeTab() === 'tab2',
+        onclick: () => activeTab('tab2'),
+        content: Div({ class: 'p-4' }, 'Content for Tab 2')
+      },
+      {
+        label: 'Tab 3',
+        active: () => activeTab() === 'tab3',
+        onclick: () => activeTab('tab3'),
+        content: Div({ class: 'p-4' }, 'Content for Tab 3')
+      }
+    ]
+  });
+};
+Mount(BasicDemo, '#demo-basic');
+```
+
+### With Icons
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-icons" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const IconsDemo = () => {
+  const activeTab = $('home');
+  
+  return Tabs({
+    items: [
+      {
+        label: Span({ class: 'flex items-center gap-2' }, ['🏠', 'Home']),
+        active: () => activeTab() === 'home',
+        onclick: () => activeTab('home'),
+        content: Div({ class: 'p-4' }, 'Welcome to the Home tab!')
+      },
+      {
+        label: Span({ class: 'flex items-center gap-2' }, ['⭐', 'Favorites']),
+        active: () => activeTab() === 'favorites',
+        onclick: () => activeTab('favorites'),
+        content: Div({ class: 'p-4' }, 'Your favorite items appear here.')
+      },
+      {
+        label: Span({ class: 'flex items-center gap-2' }, ['⚙️', 'Settings']),
+        active: () => activeTab() === 'settings',
+        onclick: () => activeTab('settings'),
+        content: Div({ class: 'p-4' }, 'Configure your preferences.')
+      }
+    ]
+  });
+};
+Mount(IconsDemo, '#demo-icons');
+```
+
+### With Tooltips
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-tooltips" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const TooltipsDemo = () => {
+  const activeTab = $('profile');
+  
+  return Tabs({
+    items: [
+      {
+        label: 'Profile',
+        tip: 'View your profile information',
+        active: () => activeTab() === 'profile',
+        onclick: () => activeTab('profile'),
+        content: Div({ class: 'p-4' }, 'Profile information here.')
+      },
+      {
+        label: 'Settings',
+        tip: 'Adjust your preferences',
+        active: () => activeTab() === 'settings',
+        onclick: () => activeTab('settings'),
+        content: Div({ class: 'p-4' }, 'Settings configuration.')
+      },
+      {
+        label: 'Notifications',
+        tip: 'Manage notifications',
+        active: () => activeTab() === 'notifications',
+        onclick: () => activeTab('notifications'),
+        content: Div({ class: 'p-4' }, 'Notification settings.')
+      }
+    ]
+  });
+};
+Mount(TooltipsDemo, '#demo-tooltips');
+```
+
+### Disabled Tab
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-disabled" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const DisabledDemo = () => {
+  const activeTab = $('basic');
+  
+  return Tabs({
+    items: [
+      {
+        label: 'Basic',
+        active: () => activeTab() === 'basic',
+        onclick: () => activeTab('basic'),
+        content: Div({ class: 'p-4' }, 'Basic features available.')
+      },
+      {
+        label: 'Premium',
+        disabled: true,
+        tip: 'Upgrade to access',
+        content: Div({ class: 'p-4' }, 'Premium content (locked)')
+      },
+      {
+        label: 'Pro',
+        disabled: true,
+        tip: 'Coming soon',
+        content: Div({ class: 'p-4' }, 'Pro features (coming soon)')
+      }
+    ]
+  });
+};
+Mount(DisabledDemo, '#demo-disabled');
+```
+
+### Reactive Content
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const ReactiveDemo = () => {
+  const activeTab = $('counter');
+  const count = $(0);
+  
+  return Tabs({
+    items: [
+      {
+        label: 'Counter',
+        active: () => activeTab() === 'counter',
+        onclick: () => activeTab('counter'),
+        content: Div({ class: 'p-4 text-center' }, [
+          Div({ class: 'text-4xl font-bold mb-4' }, () => count()),
+          Button({ 
+            class: 'btn btn-primary',
+            onclick: () => count(count() + 1)
+          }, 'Increment')
+        ])
+      },
+      {
+        label: 'Timer',
+        active: () => activeTab() === 'timer',
+        onclick: () => activeTab('timer'),
+        content: Div({ class: 'p-4' }, () => `Current time: ${new Date().toLocaleTimeString()}`)
+      },
+      {
+        label: 'Status',
+        active: () => activeTab() === 'status',
+        onclick: () => activeTab('status'),
+        content: Div({ class: 'p-4' }, () => `Counter value: ${count()}, Last updated: ${new Date().toLocaleTimeString()}`)
+      }
+    ]
+  });
+};
+Mount(ReactiveDemo, '#demo-reactive');
+```
+
+### Form Tabs
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-form" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const FormTabs = () => {
+  const activeTab = $('personal');
+  const formData = $({
+    name: '',
+    email: '',
+    address: '',
+    city: '',
+    notifications: true,
+    newsletter: false
+  });
+  
+  const updateField = (field, value) => {
+    formData({ ...formData(), [field]: value });
+  };
+  
+  const handleSubmit = () => {
+    Toast('Form submitted!', 'alert-success', 2000);
+    console.log(formData());
+  };
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Tabs({
+      items: [
+        {
+          label: 'Personal Info',
+          active: () => activeTab() === 'personal',
+          onclick: () => activeTab('personal'),
+          content: Div({ class: 'p-4 space-y-4' }, [
+            Input({
+              label: 'Name',
+              value: () => formData().name,
+              placeholder: 'Enter your name',
+              oninput: (e) => updateField('name', e.target.value)
+            }),
+            Input({
+              label: 'Email',
+              type: 'email',
+              value: () => formData().email,
+              placeholder: 'email@example.com',
+              oninput: (e) => updateField('email', e.target.value)
+            })
+          ])
+        },
+        {
+          label: 'Address',
+          active: () => activeTab() === 'address',
+          onclick: () => activeTab('address'),
+          content: Div({ class: 'p-4 space-y-4' }, [
+            Input({
+              label: 'Address',
+              value: () => formData().address,
+              placeholder: 'Street address',
+              oninput: (e) => updateField('address', e.target.value)
+            }),
+            Input({
+              label: 'City',
+              value: () => formData().city,
+              placeholder: 'City',
+              oninput: (e) => updateField('city', e.target.value)
+            })
+          ])
+        },
+        {
+          label: 'Preferences',
+          active: () => activeTab() === 'prefs',
+          onclick: () => activeTab('prefs'),
+          content: Div({ class: 'p-4 space-y-4' }, [
+            Checkbox({
+              label: 'Email notifications',
+              value: () => formData().notifications,
+              onclick: () => updateField('notifications', !formData().notifications)
+            }),
+            Checkbox({
+              label: 'Newsletter subscription',
+              value: () => formData().newsletter,
+              onclick: () => updateField('newsletter', !formData().newsletter)
+            })
+          ])
+        }
+      ]
+    }),
+    Div({ class: 'flex justify-end mt-4' }, [
+      Button({ 
+        class: 'btn btn-primary',
+        onclick: handleSubmit
+      }, 'Submit')
+    ])
+  ]);
+};
+Mount(FormTabs, '#demo-form');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-6"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  const active1 = $('tab1');
+  const active2 = $('tab1');
+  const active3 = $('tab1');
+  
+  const createItems = (active) => [
+    {
+      label: 'Tab 1',
+      active: () => active() === 'tab1',
+      onclick: () => active('tab1'),
+      content: Div({ class: 'p-4' }, 'Content 1')
+    },
+    {
+      label: 'Tab 2',
+      active: () => active() === 'tab2',
+      onclick: () => active('tab2'),
+      content: Div({ class: 'p-4' }, 'Content 2')
+    },
+    {
+      label: 'Tab 3',
+      active: () => active() === 'tab3',
+      onclick: () => active('tab3'),
+      content: Div({ class: 'p-4' }, 'Content 3')
+    }
+  ];
+  
+  return Div({ class: 'flex flex-col gap-6' }, [
+    Div({ class: 'text-sm font-bold' }, 'Default Tabs'),
+    Tabs({ items: createItems(active1) }),
+    
+    Div({ class: 'text-sm font-bold mt-4' }, 'Boxed Tabs'),
+    Tabs({ items: createItems(active2), class: 'tabs-box' }),
+    
+    Div({ class: 'text-sm font-bold mt-4' }, 'Lifted Tabs'),
+    Tabs({ items: createItems(active3), class: 'tabs-lifted' })
+  ]);
+};
+Mount(VariantsDemo, '#demo-variants');
+```

docs/components/timeline.md

@@ -0,0 +1,294 @@
+# Timeline
+
+Timeline component for displaying chronological events, steps, or progress with customizable icons and content.
+
+## Tag
+
+`Timeline`
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `items` | `Array<TimelineItem> \| Signal` | `[]` | Timeline items to display |
+| `vertical` | `boolean \| Signal<boolean>` | `true` | Vertical or horizontal orientation |
+| `compact` | `boolean \| Signal<boolean>` | `false` | Compact mode with less padding |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
+
+### TimelineItem Structure
+
+| Property | Type | Description |
+| :--- | :--- | :--- |
+| `title` | `string \| VNode \| Signal` | Event title or main text |
+| `detail` | `string \| VNode \| Signal` | Additional details or description |
+| `icon` | `string \| VNode` | Custom icon (overrides type) |
+| `type` | `string` | Type: `'success'`, `'warning'`, `'error'`, `'info'` |
+| `completed` | `boolean` | Whether event is completed (affects connector) |
+
+## Styling
+
+Timeline supports all **daisyUI Timeline classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Base | `timeline`, `timeline-vertical`, `timeline-horizontal` | Timeline orientation |
+| Size | `timeline-compact` | Compact spacing variant |
+| Color | `bg-primary`, `bg-success`, `bg-warning`, `bg-error`, `bg-info` | Icon background colors |
+
+> For further details, check the [daisyUI Timeline Documentation](https://daisyui.com/components/timeline) – Full reference for CSS classes.
+
+## Live Examples
+
+### Basic Timeline
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  const events = [
+    { title: 'Project Started', detail: 'Initial planning and setup', type: 'info', completed: true },
+    { title: 'Design Phase', detail: 'UI/UX design completed', type: 'success', completed: true },
+    { title: 'Development', detail: 'Core features implemented', type: 'warning', completed: false },
+    { title: 'Testing', detail: 'Quality assurance', type: 'info', completed: false },
+    { title: 'Launch', detail: 'Production deployment', type: 'success', completed: false }
+  ];
+  
+  return Timeline({ items: events });
+};
+Mount(BasicDemo, '#demo-basic');
+```
+
+### Horizontal Timeline
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-horizontal" class="bg-base-100 p-6 rounded-xl border border-base-300 overflow-x-auto"></div>
+  </div>
+</div>
+
+```javascript
+const HorizontalDemo = () => {
+  const steps = [
+    { title: 'Step 1', detail: 'Requirements', type: 'success', completed: true },
+    { title: 'Step 2', detail: 'Design', type: 'success', completed: true },
+    { title: 'Step 3', detail: 'Development', type: 'warning', completed: false },
+    { title: 'Step 4', detail: 'Testing', type: 'info', completed: false },
+    { title: 'Step 5', detail: 'Deploy', type: 'info', completed: false }
+  ];
+  
+  return Timeline({ 
+    items: steps, 
+    vertical: false,
+    class: 'min-w-[600px]'
+  });
+};
+Mount(HorizontalDemo, '#demo-horizontal');
+```
+
+### Compact Timeline
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-compact" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const CompactDemo = () => {
+  const activities = [
+    { title: 'User login', detail: '10:30 AM', type: 'success', completed: true },
+    { title: 'Viewed dashboard', detail: '10:32 AM', type: 'info', completed: true },
+    { title: 'Updated profile', detail: '10:45 AM', type: 'success', completed: true },
+    { title: 'Made purchase', detail: '11:00 AM', type: 'warning', completed: false }
+  ];
+  
+  return Timeline({ 
+    items: activities, 
+    compact: true 
+  });
+};
+Mount(CompactDemo, '#demo-compact');
+```
+
+### Custom Icons
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-icons" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const IconsDemo = () => {
+  const milestones = [
+    { title: 'Kickoff', detail: 'Project kickoff meeting', icon: '🚀', completed: true },
+    { title: 'MVP', detail: 'Minimum viable product', icon: '💡', completed: true },
+    { title: 'Beta', detail: 'Beta release', icon: '⚙️', completed: false },
+    { title: 'Launch', detail: 'Public launch', icon: '🎉', completed: false }
+  ];
+  
+  return Timeline({ items: milestones });
+};
+Mount(IconsDemo, '#demo-icons');
+```
+
+### Reactive Timeline
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const ReactiveDemo = () => {
+  const currentStep = $(0);
+  const steps = [
+    { title: 'Order Placed', detail: 'Your order has been confirmed', type: 'success' },
+    { title: 'Processing', detail: 'Payment verified, preparing shipment', type: 'success' },
+    { title: 'Shipped', detail: 'Package on the way', type: 'warning' },
+    { title: 'Delivered', detail: 'Arriving soon', type: 'info' }
+  ];
+  
+  const items = () => steps.map((step, idx) => ({
+    ...step,
+    completed: idx < currentStep()
+  }));
+  
+  const nextStep = () => {
+    if (currentStep() < steps.length) {
+      currentStep(currentStep() + 1);
+      Toast(`Step ${currentStep()}: ${steps[currentStep() - 1].title}`, 'alert-info', 1500);
+    }
+  };
+  
+  const reset = () => {
+    currentStep(0);
+    Toast('Order tracking reset', 'alert-warning', 1500);
+  };
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Timeline({ items: items }),
+    Div({ class: 'flex gap-2 justify-center mt-4' }, [
+      Button({ 
+        class: 'btn btn-primary btn-sm',
+        onclick: nextStep,
+        disabled: () => currentStep() >= steps.length
+      }, 'Next Step'),
+      Button({ 
+        class: 'btn btn-ghost btn-sm',
+        onclick: reset,
+        disabled: () => currentStep() === 0
+      }, 'Reset')
+    ])
+  ]);
+};
+Mount(ReactiveDemo, '#demo-reactive');
+```
+
+### Order Status Tracker
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-order" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const OrderDemo = () => {
+  const status = $('pending');  // ← empezar en 'pending'
+  
+  const statusMap = {
+    pending: { title: 'Order Pending', detail: 'Awaiting confirmation', type: 'warning' },
+    confirmed: { title: 'Order Confirmed', detail: 'Payment received', type: 'info' },
+    processing: { title: 'Processing', detail: 'Preparing your order', type: 'info' },
+    shipped: { title: 'Shipped', detail: 'Package in transit', type: 'info' },
+    delivered: { title: 'Delivered', detail: 'Order completed', type: 'success' }
+  };
+  
+  const statusOrder = ['pending', 'confirmed', 'processing', 'shipped', 'delivered'];
+  const currentIndex = () => statusOrder.indexOf(status());
+  
+  const items = () => statusOrder.map((key, idx) => ({
+    ...statusMap[key],
+    completed: idx < currentIndex()
+  }));
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Timeline({ items, compact: true }),
+    Div({ class: 'flex gap-2 justify-center flex-wrap mt-4' }, statusOrder.map(s => 
+      Button({ 
+        class: () => `btn btn-xs ${status() === s ? 'btn-primary' : 'btn-ghost'}`,
+        onclick: () => status(s)
+      }, statusMap[s].title)
+    ))
+  ]);
+};
+Mount(OrderDemo, '#demo-order');
+```
+
+### Company History
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-history" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const HistoryDemo = () => {
+  const milestones = [
+    { title: '2015 - Founded', detail: 'Company started with 3 employees', type: 'success', completed: true },
+    { title: '2017 - First Product', detail: 'Launched first software product', type: 'success', completed: true },
+    { title: '2019 - Series A', detail: 'Raised $5M, expanded to 50 employees', type: 'success', completed: true },
+    { title: '2022 - Global Expansion', detail: 'Opened offices in Europe and Asia', type: 'info', completed: true },
+    { title: '2024 - AI Integration', detail: 'Launched AI-powered features', type: 'warning', completed: false },
+    { title: '2026 - Future Goals', detail: 'Aiming for market leadership', type: 'info', completed: false }
+  ];
+  
+  return Timeline({ items: milestones });
+};
+Mount(HistoryDemo, '#demo-history');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-8"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  const sampleItems = [
+    { title: 'Event 1', detail: 'Description here', type: 'success', completed: true },
+    { title: 'Event 2', detail: 'Description here', type: 'warning', completed: false },
+    { title: 'Event 3', detail: 'Description here', type: 'info', completed: false }
+  ];
+  
+  return Div({ class: 'flex flex-col gap-8' }, [
+    Div({ class: 'text-sm font-bold' }, 'Vertical Timeline'),
+    Timeline({ items: sampleItems }),
+    
+    Div({ class: 'text-sm font-bold mt-4' }, 'Horizontal Timeline'),
+    Timeline({ items: sampleItems, vertical: false, class: 'min-w-[500px]' }),
+    
+    Div({ class: 'text-sm font-bold mt-4' }, 'Compact Timeline'),
+    Timeline({ items: sampleItems, compact: true })
+  ]);
+};
+Mount(VariantsDemo, '#demo-variants');
+```

docs/components/toast.md

@@ -0,0 +1,343 @@
+# Toast
+
+Toast notification utility for displaying temporary messages that automatically dismiss after a specified duration. Can be used programmatically.
+
+## Function
+
+`Toast(message, type = 'alert-info', duration = 3500)`
+
+| Param | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `message` | `string \| VNode` | `-` | Message content to display |
+| `type` | `string` | `'alert-info'` | Alert type: `'alert-info'`, `'alert-success'`, `'alert-warning'`, `'alert-error'` |
+| `duration` | `number` | `3500` | Auto-dismiss duration in milliseconds |
+
+## Live Examples
+
+### Basic Toast
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-2 justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-2 justify-center' }, [
+    Button({ 
+      class: 'btn btn-info',
+      onclick: () => Toast('This is an info message', 'alert-info', 3000)
+    }, 'Info Toast'),
+    Button({ 
+      class: 'btn btn-success',
+      onclick: () => Toast('Operation successful!', 'alert-success', 3000)
+    }, 'Success Toast'),
+    Button({ 
+      class: 'btn btn-warning',
+      onclick: () => Toast('Please check your input', 'alert-warning', 3000)
+    }, 'Warning Toast'),
+    Button({ 
+      class: 'btn btn-error',
+      onclick: () => Toast('An error occurred', 'alert-error', 3000)
+    }, 'Error Toast')
+  ]);
+};
+Mount(BasicDemo, '#demo-basic');
+```
+
+### Different Durations
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-duration" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-2 justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const DurationDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-2 justify-center' }, [
+    Button({ 
+      class: 'btn btn-sm',
+      onclick: () => Toast('Short (1s)', 'alert-info', 1000)
+    }, '1 Second'),
+    Button({ 
+      class: 'btn btn-sm',
+      onclick: () => Toast('Normal (3s)', 'alert-success', 3000)
+    }, '3 Seconds'),
+    Button({ 
+      class: 'btn btn-sm',
+      onclick: () => Toast('Long (5s)', 'alert-warning', 5000)
+    }, '5 Seconds'),
+    Button({ 
+      class: 'btn btn-sm',
+      onclick: () => Toast('Very Long (8s)', 'alert-error', 8000)
+    }, '8 Seconds')
+  ]);
+};
+Mount(DurationDemo, '#demo-duration');
+```
+
+### Interactive Toast
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-interactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const InteractiveDemo = () => {
+  const count = $(0);
+  
+  const showRandomToast = () => {
+    const types = ['alert-info', 'alert-success', 'alert-warning', 'alert-error'];
+    const messages = [
+      'You clicked the button!',
+      'Action completed successfully',
+      'Processing your request...',
+      'Something interesting happened'
+    ];
+    const randomType = types[Math.floor(Math.random() * types.length)];
+    const randomMessage = messages[Math.floor(Math.random() * messages.length)];
+    count(count() + 1);
+    Toast(`${randomMessage} (${count()})`, randomType, 2000);
+  };
+  
+  return Div({ class: 'flex flex-col gap-4 items-center' }, [
+    Button({ 
+      class: 'btn btn-primary',
+      onclick: showRandomToast
+    }, 'Show Random Toast'),
+    Div({ class: 'text-sm opacity-70' }, () => `Toasts shown: ${count()}`)
+  ]);
+};
+Mount(InteractiveDemo, '#demo-interactive');
+```
+
+### Form Validation Toast
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-form" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const FormToastDemo = () => {
+  const email = $('');
+  const password = $('');
+  
+  const handleSubmit = () => {
+    if (!email()) {
+      Toast('Please enter your email', 'alert-warning', 3000);
+      return;
+    }
+    if (!email().includes('@')) {
+      Toast('Please enter a valid email address', 'alert-error', 3000);
+      return;
+    }
+    if (!password()) {
+      Toast('Please enter your password', 'alert-warning', 3000);
+      return;
+    }
+    if (password().length < 6) {
+      Toast('Password must be at least 6 characters', 'alert-error', 3000);
+      return;
+    }
+    Toast('Login successful! Redirecting...', 'alert-success', 2000);
+  };
+  
+  return Div({ class: 'flex flex-col gap-4 max-w-md mx-auto' }, [
+    Div({ class: 'text-lg font-bold text-center' }, 'Login Form'),
+    Input({
+      label: 'Email',
+      type: 'email',
+      value: email,
+      placeholder: 'user@example.com',
+      oninput: (e) => email(e.target.value)
+    }),
+    Input({
+      label: 'Password',
+      type: 'password',
+      value: password,
+      placeholder: 'Enter password',
+      oninput: (e) => password(e.target.value)
+    }),
+    Button({ 
+      class: 'btn btn-primary',
+      onclick: handleSubmit
+    }, 'Login')
+  ]);
+};
+Mount(FormToastDemo, '#demo-form');
+```
+
+### Success Feedback
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-feedback" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const FeedbackDemo = () => {
+  const items = $([
+    { id: 1, name: 'Item 1', saved: false },
+    { id: 2, name: 'Item 2', saved: false },
+    { id: 3, name: 'Item 3', saved: false }
+  ]);
+  
+  const saveItem = (id) => {
+    items(items().map(item => 
+      item.id === id ? { ...item, saved: true } : item
+    ));
+    Toast(`Item ${id} saved successfully!`, 'alert-success', 2000);
+  };
+  
+  const saveAll = () => {
+    items(items().map(item => ({ ...item, saved: true })));
+    Toast('All items saved!', 'alert-success', 2000);
+  };
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({ class: 'flex justify-between items-center' }, [
+      Span({ class: 'font-bold' }, 'Items to Save'),
+      Button({ 
+        class: 'btn btn-sm btn-primary',
+        onclick: saveAll
+      }, 'Save All')
+    ]),
+    Div({ class: 'flex flex-col gap-2' }, items().map(item =>
+      Div({ class: 'flex justify-between items-center p-3 bg-base-200 rounded-lg' }, [
+        Span({}, item.name),
+        item.saved 
+          ? Span({ class: 'badge badge-success' }, '✓ Saved')
+          : Button({ 
+              class: 'btn btn-xs btn-primary',
+              onclick: () => saveItem(item.id)
+            }, 'Save')
+      ])
+    ))
+  ]);
+};
+Mount(FeedbackDemo, '#demo-feedback');
+```
+
+### Error Handling
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-error" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const ErrorDemo = () => {
+  const simulateApiCall = () => {
+    const success = Math.random() > 0.3;
+    
+    if (success) {
+      Toast('Data loaded successfully!', 'alert-success', 2000);
+    } else {
+      Toast('Failed to load data. Please try again.', 'alert-error', 3000);
+    }
+  };
+  
+  const simulateNetworkError = () => {
+    Toast('Network error: Unable to connect to server', 'alert-error', 4000);
+  };
+  
+  const simulateTimeout = () => {
+    Toast('Request timeout (5s). Please check your connection.', 'alert-warning', 4000);
+  };
+  
+  return Div({ class: 'flex flex-wrap gap-3 justify-center' }, [
+    Button({ 
+      class: 'btn btn-primary',
+      onclick: simulateApiCall
+    }, 'Simulate API Call'),
+    Button({ 
+      class: 'btn btn-error',
+      onclick: simulateNetworkError
+    }, 'Network Error'),
+    Button({ 
+      class: 'btn btn-warning',
+      onclick: simulateTimeout
+    }, 'Timeout')
+  ]);
+};
+Mount(ErrorDemo, '#demo-error');
+```
+
+### Custom Messages
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-custom" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-2 justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const CustomDemo = () => {
+  const showCustomToast = (type, message) => {
+    Toast(message, type, 3000);
+  };
+  
+  return Div({ class: 'flex flex-wrap gap-2 justify-center' }, [
+    Button({ 
+      class: 'btn btn-info',
+      onclick: () => showCustomToast('alert-info', '📧 New email received from john@example.com')
+    }, 'Email'),
+    Button({ 
+      class: 'btn btn-success',
+      onclick: () => showCustomToast('alert-success', '💰 Payment of $49.99 completed')
+    }, 'Payment'),
+    Button({ 
+      class: 'btn btn-warning',
+      onclick: () => showCustomToast('alert-warning', '⚠️ Your session will expire in 5 minutes')
+    }, 'Session Warning'),
+    Button({ 
+      class: 'btn btn-error',
+      onclick: () => showCustomToast('alert-error', '🔒 Failed login attempt detected')
+    }, 'Security Alert')
+  ]);
+};
+Mount(CustomDemo, '#demo-custom');
+```
+
+### Multiple Toasts
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-multiple" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const MultipleDemo = () => {
+  const showMultipleToasts = () => {
+    Toast('First message', 'alert-info', 3000);
+    setTimeout(() => Toast('Second message', 'alert-success', 3000), 500);
+    setTimeout(() => Toast('Third message', 'alert-warning', 3000), 1000);
+    setTimeout(() => Toast('Fourth message', 'alert-error', 3000), 1500);
+  };
+  
+  return Div({ class: 'flex justify-center' }, [
+    Button({ 
+      class: 'btn btn-primary',
+      onclick: showMultipleToasts
+    }, 'Show Multiple Toasts')
+  ]);
+};
+Mount(MultipleDemo, '#demo-multiple');
+```

docs/components/tooltip.md

@@ -0,0 +1,319 @@
+# Tooltip
+
+Tooltip component for displaying helpful hints and additional information on hover.
+
+## Tag
+
+`Tooltip`
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `tip` | `string \| VNode \| Signal` | `-` | Tooltip content to display on hover |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
+| `children` | `VNode` | `-` | Element to attach the tooltip to |
+
+## Styling
+
+Tooltip supports all **daisyUI Tooltip classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Position | `tooltip-top` (default), `tooltip-bottom`, `tooltip-left`, `tooltip-right` | Tooltip position |
+| Color | `tooltip-primary`, `tooltip-secondary`, `tooltip-accent`, `tooltip-info`, `tooltip-success`, `tooltip-warning`, `tooltip-error` | Tooltip color variants |
+
+> For further details, check the [daisyUI Tooltip Documentation](https://daisyui.com/components/tooltip) – Full reference for CSS classes.
+
+### Example
+
+```javascript
+Tooltip({ tip: "This is a tooltip", class: "tooltip-primary" }, [
+  Button({ class: "btn" }, "Hover me")
+]);
+```
+
+## Live Examples
+
+### Basic Tooltip
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4 justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
+    Tooltip({ tip: 'This is a tooltip' }, [
+      Button({ class: 'btn btn-primary' }, 'Hover me')
+    ]),
+    Tooltip({ tip: 'Tooltips can be placed on any element' }, [
+      Span({ class: 'text-sm cursor-help border-b border-dashed' }, 'Help text')
+    ]),
+    Tooltip({ tip: 'Icons can also have tooltips' }, [
+      Span({ class: 'text-2xl' }, 'ℹ️')
+    ])
+  ]);
+};
+Mount(BasicDemo, '#demo-basic');
+```
+
+### Tooltip Positions
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-positions" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const PositionsDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
+    Tooltip({ tip: 'Top tooltip', class: 'tooltip-top' }, [
+      Button({ class: 'btn btn-sm' }, 'Top')
+    ]),
+    Tooltip({ tip: 'Bottom tooltip', class: 'tooltip-bottom' }, [
+      Button({ class: 'btn btn-sm' }, 'Bottom')
+    ]),
+    Tooltip({ tip: 'Left tooltip', class: 'tooltip-left' }, [
+      Button({ class: 'btn btn-sm' }, 'Left')
+    ]),
+    Tooltip({ tip: 'Right tooltip', class: 'tooltip-right' }, [
+      Button({ class: 'btn btn-sm' }, 'Right')
+    ])
+  ]);
+};
+Mount(PositionsDemo, '#demo-positions');
+```
+
+### Tooltip with Icons
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-icons" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const IconsDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
+    Tooltip({ tip: 'Save document' }, [
+      Button({ class: 'btn btn-ghost btn-circle' }, '💾')
+    ]),
+    Tooltip({ tip: 'Edit item' }, [
+      Button({ class: 'btn btn-ghost btn-circle' }, '✏️')
+    ]),
+    Tooltip({ tip: 'Delete permanently' }, [
+      Button({ class: 'btn btn-ghost btn-circle text-error' }, '🗑️')
+    ]),
+    Tooltip({ tip: 'Settings' }, [
+      Button({ class: 'btn btn-ghost btn-circle' }, '⚙️')
+    ])
+  ]);
+};
+Mount(IconsDemo, '#demo-icons');
+```
+
+### Form Field Tooltips
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-form" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const FormDemo = () => {
+  const username = $('');
+  const email = $('');
+  
+  return Div({ class: 'flex flex-col gap-4 max-w-md mx-auto' }, [
+    Div({ class: 'flex items-center gap-2' }, [
+      Input({
+        label: 'Username',
+        value: username,
+        placeholder: 'Choose a username',
+        oninput: (e) => username(e.target.value)
+      }),
+      Tooltip({ tip: 'Must be at least 3 characters, letters and numbers only' }, [
+        Span({ class: 'cursor-help text-info' }, '?')
+      ])
+    ]),
+    Div({ class: 'flex items-center gap-2' }, [
+      Input({
+        label: 'Email',
+        type: 'email',
+        value: email,
+        placeholder: 'Enter your email',
+        oninput: (e) => email(e.target.value)
+      }),
+      Tooltip({ tip: 'We\'ll never share your email with anyone' }, [
+        Span({ class: 'cursor-help text-info' }, '?')
+      ])
+    ])
+  ]);
+};
+Mount(FormDemo, '#demo-form');
+```
+
+### Interactive Tooltip
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-interactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const InteractiveDemo = () => {
+  const tooltipText = $('Hover over the button!');
+  
+  const updateTooltip = (text) => {
+    tooltipText(text);
+    setTimeout(() => {
+      tooltipText('Hover over the button!');
+    }, 2000);
+  };
+  
+  return Div({ class: 'flex flex-col gap-4 items-center' }, [
+    Tooltip({ tip: () => tooltipText() }, [
+      Button({ 
+        class: 'btn btn-primary btn-lg',
+        onclick: () => Toast('Button clicked!', 'alert-info', 2000)
+      }, 'Interactive Button')
+    ]),
+    Div({ class: 'flex gap-2 flex-wrap justify-center mt-4' }, [
+      Button({ 
+        class: 'btn btn-xs',
+        onclick: () => updateTooltip('You clicked the button!')
+      }, 'Change Tooltip'),
+      Button({ 
+        class: 'btn btn-xs',
+        onclick: () => updateTooltip('Try hovering now!')
+      }, 'Change Again')
+    ])
+  ]);
+};
+Mount(InteractiveDemo, '#demo-interactive');
+```
+
+### Rich Tooltip Content
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-rich" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4 justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const RichDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
+    Tooltip({ 
+      tip: Div({ class: 'text-left p-1' }, [
+        Div({ class: 'font-bold' }, 'User Info'),
+        Div({ class: 'text-xs' }, 'John Doe'),
+        Div({ class: 'text-xs' }, 'john@example.com'),
+        Div({ class: 'badge badge-xs badge-primary mt-1' }, 'Admin')
+      ])
+    }, [
+      Button({ class: 'btn btn-outline' }, 'User Profile')
+    ]),
+    Tooltip({ 
+      tip: Div({ class: 'text-left p-1' }, [
+        Div({ class: 'font-bold flex items-center gap-1' }, [
+          Span({}, '⚠️'),
+          Span({}, 'System Status')
+        ]),
+        Div({ class: 'text-xs' }, 'All systems operational'),
+        Div({ class: 'text-xs text-success' }, '✓ 99.9% uptime')
+      ])
+    }, [
+      Button({ class: 'btn btn-outline' }, 'System Status')
+    ])
+  ]);
+};
+Mount(RichDemo, '#demo-rich');
+```
+
+### Color Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-colors" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4 justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const ColorsDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
+    Tooltip({ tip: 'Primary tooltip', class: 'tooltip-primary' }, [
+      Button({ class: 'btn btn-primary btn-sm' }, 'Primary')
+    ]),
+    Tooltip({ tip: 'Secondary tooltip', class: 'tooltip-secondary' }, [
+      Button({ class: 'btn btn-secondary btn-sm' }, 'Secondary')
+    ]),
+    Tooltip({ tip: 'Accent tooltip', class: 'tooltip-accent' }, [
+      Button({ class: 'btn btn-accent btn-sm' }, 'Accent')
+    ]),
+    Tooltip({ tip: 'Info tooltip', class: 'tooltip-info' }, [
+      Button({ class: 'btn btn-info btn-sm' }, 'Info')
+    ]),
+    Tooltip({ tip: 'Success tooltip', class: 'tooltip-success' }, [
+      Button({ class: 'btn btn-success btn-sm' }, 'Success')
+    ]),
+    Tooltip({ tip: 'Warning tooltip', class: 'tooltip-warning' }, [
+      Button({ class: 'btn btn-warning btn-sm' }, 'Warning')
+    ]),
+    Tooltip({ tip: 'Error tooltip', class: 'tooltip-error' }, [
+      Button({ class: 'btn btn-error btn-sm' }, 'Error')
+    ])
+  ]);
+};
+Mount(ColorsDemo, '#demo-colors');
+```
+
+### All Tooltip Positions
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-all-positions" class="bg-base-100 p-6 rounded-xl border border-base-300 grid grid-cols-3 gap-4 justify-items-center"></div>
+  </div>
+</div>
+
+```javascript
+const AllPositionsDemo = () => {
+  return Div({ class: 'grid grid-cols-3 gap-4 justify-items-center' }, [
+    Div({ class: 'col-start-2' }, [
+      Tooltip({ tip: 'Top tooltip', class: 'tooltip-top' }, [
+        Button({ class: 'btn btn-sm w-24' }, 'Top')
+      ])
+    ]),
+    Div({ class: 'col-start-1 row-start-2' }, [
+      Tooltip({ tip: 'Left tooltip', class: 'tooltip-left' }, [
+        Button({ class: 'btn btn-sm w-24' }, 'Left')
+      ])
+    ]),
+    Div({ class: 'col-start-3 row-start-2' }, [
+      Tooltip({ tip: 'Right tooltip', class: 'tooltip-right' }, [
+        Button({ class: 'btn btn-sm w-24' }, 'Right')
+      ])
+    ]),
+    Div({ class: 'col-start-2 row-start-3' }, [
+      Tooltip({ tip: 'Bottom tooltip', class: 'tooltip-bottom' }, [
+        Button({ class: 'btn btn-sm w-24' }, 'Bottom')
+      ])
+    ])
+  ]);
+};
+Mount(AllPositionsDemo, '#demo-all-positions');
+```

docs/index.html

@@ -11,12 +11,25 @@
     />
 
     <link
-      href="https://cdn.jsdelivr.net/npm/daisyui@5"
+      href="./sigpro.css"
       rel="stylesheet"
       type="text/css"
     /> 
 
+    <!-- <link
+      href="https://cdn.jsdelivr.net/npm/daisyui@5"
+      rel="stylesheet"
+      type="text/css"
+    />  -->
+
     <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+
+    <style>
+      /* Personaliza los callouts si quieres */
+      .markdown-section .callout {
+        margin: 1.5rem 0;
+      }
+    </style>
   </head>
   <body>
     <div id="app"></div>
@@ -26,22 +39,39 @@
         name: "SigPro-UI",
         repo: "",
         loadSidebar: true,
-        subMaxLevel: 3,
         sidebarDisplayLevel: 1,
         executeScript: true,
         copyCode: {
-          buttonText:
-            '<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>',
+          buttonText: '<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>',
           errorText: "Error",
-          successText:
-            '<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="20 6 9 17 4 12"></polyline></svg>',
+          successText: '<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="20 6 9 17 4 12"></polyline></svg>',
         },
+        plugins: [
+    function(hook, vm) {
+      hook.doneEach(function() {
+        // Buscamos los bloques de código JS que queremos ejecutar
+        const codeBlocks = document.querySelectorAll('pre[data-lang="javascript"] code');
+        
+        codeBlocks.forEach(code => {
+          // Usamos un bloque try/catch por si el código del Markdown tiene errores
+          try {
+            // Ejecutamos el código. 
+            // Como tu librería ya puso $, Mount, Button, etc. en 'window', 
+            // el código los encontrará directamente.
+            const runDemo = new Function(code.innerText);
+            runDemo();
+          } catch (err) {
+            console.error("Error en la demo de SigPro:", err);
+          }
+        });
+      });
+    }
+  ]
       };
     </script>
 
-    <script src="https://unpkg.com/sigpro"> </script>
-    <script src="https://unpkg.com/sigpro-ui"> </script>
-    <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/docsify@4.13.0/lib/docsify.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
+    <script src="./sigpro-ui.min.js"></script>
   </body>
 </html>

docs/install.md

@@ -2,81 +2,60 @@
 
 Follow these steps to integrate **SigPro-UI** into your project.
 
-## Prerequisites
+---
 
-Make sure your project already has:
+!> **📘 Core Concepts**  
+**Note:** SigPro-UI now includes SigPro core internally. No need to install SigPro separately.
+ SigProUI is built on top of the [SigPro](https://natxocc.github.io/sigpro/#/) reactive core. To learn how to create signals, manage reactivity, and structure your application logic, check out the [SigPro documentation](https://natxocc.github.io/sigpro/#/). It covers everything you need to build reactive applications with signals, computed values, and effects.
+---
 
-- [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
+## 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
+## 2. Import and use in your app
 
-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`):
+### ESM / Module usage
 
 ```javascript
-// Import required modules
-import { $, $mount } from "sigpro";
-import { UI } from "sigpro-ui";
+// Import everything from sigpro-ui (includes sigpro core)
+import { $, Mount, Button, Alert, Input, tt } from "sigpro-ui";
+import "sigpro-ui/css";
 
-// Import your CSS (adjust the path if needed)
-import "./app.css";
+// Create your app
+const App = () => {
+  const count = $(0);
   
-// Import your main App component
-import { App } from "./App.js";
+  return Tag('div', { class: 'p-8 max-w-md mx-auto' }, [
+    Tag('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
     
-// Initialize SigPro-UI (English locale)
-UI("en");
+    Input({
+      placeholder: 'Enter your name...'
+    }),
     
-// 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")
+      class: 'btn-primary mt-4',
+      onclick: () => count(count() + 1)
+    }, () => `Clicks: ${count()}`),
+    
+    Alert({
+      type: 'success',
+      message: () => `Welcome to SigProUI!`
+    })
   ]);
 };
+
+// Mount your app
+Mount(App, "#app");
 ```
 
-## Optional: Use CDN (no build step)
+### CDN Usage (no build step)
 
-If you prefer not to use a build step, you can import directly from a CDN:
+Simply add the script tag and start using SigProUI:
 
 ```html
 <!DOCTYPE html>
@@ -84,46 +63,115 @@ If you prefer not to use a build step, you can import directly from a CDN:
 <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>
+  <title>SigProUI Demo</title>
+  <script src="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.js"></script>
+  <link href="https://unpkg.com/sigpro-ui@latest/css/sigpro-ui.min.css" rel="stylesheet">
   <style>
-    @import "tailwindcss";
-    @plugin "daisyui";
+    body { padding: 2rem; }
   </style>
 </head>
 <body>
   <div id="app"></div>
-  <script type="module">
-    import { $, $mount } from "sigpro";
-    import { UI, Div, Button, Alert } from "sigpro-ui";
 
-    UI("en");
+  <script>
+    // All functions are available directly in window
+    // No need to import anything!
     
-    const App = () => Div({ class: "p-4" }, [
-      Button({ class: "btn-primary", onclick: () => Alert("Hello!") }, "Click")
+    const { $, Mount, Button, Input, Alert } = window;
+    
+    const App = () => {
+      const name = $('');
+      const count = $(0);
+      
+      return Tag('div', { class: 'max-w-md mx-auto p-4' }, [
+        Tag('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
+        
+        Input({
+          value: name,
+          placeholder: 'Enter your name...'
+        }),
+        
+        Button({
+          class: 'btn-primary mt-4',
+          onclick: () => count(count() + 1)
+        }, () => `Clicks: ${count()}`),
+        
+        Alert({
+          type: 'success',
+          message: () => name() ? `Hello ${name()}!` : 'Welcome to SigProUI!'
+        })
       ]);
+    };
     
-    $mount(App, "#app");
+    Mount(App, '#app');
   </script>
 </body>
 </html>
 ```
 
+## What's included?
+
+When you install SigProUI, you get:
+
+### SigPro Core Functions
+- `$()` - Reactive signals
+- `Watch()` - Watch reactive dependencies
+- `Tag()` - Create HTML elements with reactivity
+- `If()` - Conditional rendering
+- `For()` - List rendering
+- `Router()` - Hash-based routing
+- `Mount()` - Mount components to DOM
+
+>For more information about SigPro Core visit official Docs [SigPro Docs](https://natxocc.github.io/sigpro/#/)
+
+### UI Components
+- `Button()` - Styled button with DaisyUI
+- `Input()` - Form input with floating labels
+- `Alert()` - Alert messages
+- `Modal()` - Modal dialogs
+- `Table()` - Data tables
+- `Tabs()` - Tabbed interfaces
+- And 30+ more components!
+
+### Utilities
+- `tt()` - i18n translation function
+
+## Language Support
+
+SigProUI includes 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')());
+const searchPlaceholder = Input({ placeholder: tt('search')() });
+```
+
+## TypeScript Support
+
+SigProUI includes TypeScript definitions. Import types as needed:
+
+```typescript
+import { Button, Input, type ButtonProps, type InputProps } from 'sigpro-ui';
+
+const MyButton: React.FC<ButtonProps> = (props) => {
+  return Button(props, 'Click me');
+};
+```
+
 ## 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. |
-
+| Components don't look styled | Make sure you're loading css 'sigpro.css' (either via import or CDN)|
+| `$ is not defined` | SigProUI includes sigpro core - no need to install separately. Make sure you're importing from 'sigpro-ui' |
+| `Button is not defined` | In CDN mode, all components are in window. Use `window.Button` or destructure from window |
+| Build errors | Ensure you're using a modern bundler that supports ESM |
+| CDN components not working | The CDN version exposes everything globally. Use `const { $, Button } = window;` or call directly |
+| Locale not working | Set locale with `Locale('en')` before using translations |
 
 **Happy coding!** 🎉
-

docs/quick.md

@@ -1,17 +1,13 @@
 # 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'
+import "sigpro-ui";
+import "sigpro-ui/css";
 
 // All components (Button, Input, Table, Toast, etc.) are now globally available.
 ```
@@ -23,14 +19,13 @@ UI('en'); // 'es' or 'en'
 | 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 })` |
+| **Input** | Reactive text field with validation | `Input({ value: $name, validate: (v) => !v ? "Required" : "" })` |
 | **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" })` |
@@ -42,7 +37,7 @@ UI('en'); // 'es' or 'en'
 
 | Component | Description | Example |
 | :--- | :--- | :--- |
-| **Input** | Text input with floating label, validation, password toggle | `Input({ label: "Email", type: "email", value: $email })` |
+| **Input** | Text input with floating label, validation, password toggle | `Input({ label: "Email", type: "email", value: $email, validate: validateEmail })` |
 | **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 })` |
@@ -55,6 +50,36 @@ UI('en'); // 'es' or 'en'
 
 ---
 
+## Input Validation
+
+The `Input` component supports real-time validation via the `validate` prop:
+
+```javascript
+const email = $('');
+
+Input({
+  type: 'email',
+  value: email,
+  placeholder: 'Enter your email',
+  icon: 'icon-[lucide--mail]',
+  validate: (value) => {
+    if (!value) return '';
+    if (!value.includes('@')) return 'Email must contain @';
+    if (!value.includes('.')) return 'Email must contain .';
+    return '';
+  },
+  oninput: (e) => email(e.target.value)
+})
+```
+
+**How it works:**
+- Returns `''` or `null` → no error
+- Returns a string → shows error message and adds `input-error` class
+- Validates on every keystroke
+- No external state needed for error messages
+
+---
+
 ## Data Display
 
 | Component | Description | Example |
@@ -65,7 +90,7 @@ UI('en'); // 'es' or 'en'
 | **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(...))` |
+| **Indicator** | Badge on corner of element | `Indicator({ value: () => count() }, Button(...))` |
 
 ---
 
@@ -76,8 +101,7 @@ UI('en'); // 'es' or 'en'
 | **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(...))` |
+| **Tooltip** | Hover tooltip wrapper | `Tooltip({ tip: "Help text", ui: "tooltip-top" }, Button(...))` |
 
 ---
 
@@ -100,7 +124,7 @@ UI('en'); // 'es' or 'en'
 | Component | Description | Example |
 | :--- | :--- | :--- |
 | **Fab** | Floating Action Button with actions | `Fab({ icon: "+", actions: [{ label: "Add", onclick: add }] })` |
-| **Indicator** | Badge indicator wrapper | `Indicator({ badge: "99+" }, Button(...))` |
+| **Indicator** | Badge indicator wrapper | `Indicator({ value: () => unread() }, Button(...))` |
 
 ---
 
@@ -110,12 +134,11 @@ Built-in locale system with Spanish and English support.
 
 ```javascript
 // Set global UI language
-Locale("en"); // or "es"
+Locale("en");
 
 // Get translated string (returns a reactive signal)
 const closeText = tt("close"); // "Close" or "Cerrar"
 
-// Available keys: close, confirm, cancel, search, loading, nodata
 ```
 
 ---
@@ -124,7 +147,7 @@ const closeText = tt("close"); // "Close" or "Cerrar"
 
 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.
+2.  **DaisyUI v5**: Pass any daisyUI styling via the `class` attribute.
 
     ```javascript
     Button({ class: "btn-primary btn-sm rounded-full shadow-lg" }, "Click")
@@ -142,16 +165,16 @@ const closeText = tt("close"); // "Close" or "Cerrar"
 
 ```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);
-  }
+  placeholder: "Name",
+  validate: (value) => {
+    if (!value) return "Name is required";
+    if (value.length < 3) return "Name too short";
+    return "";
+  },
+  oninput: (e) => name(e.target.value)
 })
 ```
 
@@ -160,17 +183,15 @@ Input({
 ```javascript
 const userId = $("123");
 const userData = $(null);
-const loading = $(false);
 
-$watch(userId, async (id) => {
+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))
+If(() => userData(), () => Alert({ type: "success" }, userData()?.name))
 ```
 
 ### Modal with Confirm Action
@@ -193,14 +214,14 @@ Modal({
 
 | Component | Key Props |
 | :--- | :--- |
-| `Button` | `class`, `disabled`, `loading`, `badge`, `tooltip`, `icon` |
-| `Input` | `label`, `value`, `error`, `type`, `placeholder`, `disabled`, `tip` |
+| `Button` | `class`, `disabled`, `loading`, `icon` |
+| `Input` | `value`, `validate`, `type`, `placeholder`, `icon`, `disabled` |
 | `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` |
-
+| `Autocomplete` | `options`, `value`, `onselect`, `label` |
+| `Indicator` | `value` (function that returns number/string) |
+| `Tooltip` | `tip`, `ui` (tooltip-top/bottom/left/right) |

index.d.ts

@@ -0,0 +1,498 @@
+// sigpro-ui.d.ts
+
+declare module 'sigpro-ui' {
+  // Tipos básicos
+  type Signal<T> = {
+    (): T;
+    (value: T | ((prev: T) => T)): void;
+  };
+
+  type ComponentFunction<P = {}> = (props?: P, children?: any) => HTMLElement | string | null;
+  type ComponentChild = HTMLElement | string | number | boolean | null | undefined;
+  type ComponentChildren = ComponentChild | ComponentChild[];
+
+  // Utils
+  function val<T>(value: T | (() => T)): T;
+  function ui(baseClass: string, ...additional: (string | (() => string) | undefined)[]): string | (() => string);
+  function getIcon(icon: string | (() => string) | HTMLElement | null | undefined): HTMLElement | null;
+  function tt(key: 'close' | 'confirm' | 'cancel' | 'search' | 'loading' | 'nodata'): () => string;
+
+  // Props comunes
+  interface BaseProps {
+    class?: string | (() => string);
+    style?: string | Record<string, string> | (() => string | Record<string, string>);
+    id?: string | (() => string);
+  }
+
+  interface EventProps {
+    onclick?: (event: MouseEvent) => void;
+    oninput?: (event: Event) => void;
+    onchange?: (event: Event) => void;
+    onblur?: (event: FocusEvent) => void;
+    onfocus?: (event: FocusEvent) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+    onkeyup?: (event: KeyboardEvent) => void;
+    onmouseenter?: (event: MouseEvent) => void;
+    onmouseleave?: (event: MouseEvent) => void;
+    onsubmit?: (event: Event) => void;
+    ondragover?: (event: DragEvent) => void;
+    ondragleave?: (event: DragEvent) => void;
+    ondrop?: (event: DragEvent) => void;
+    [key: `on${string}`]: ((event: any) => void) | undefined;
+  }
+
+  // Accordion
+  interface AccordionProps extends BaseProps, EventProps {
+    title: string | (() => string);
+    name?: string;
+    open?: boolean | (() => boolean);
+  }
+  function Accordion(props: AccordionProps, children: ComponentChildren): HTMLElement;
+
+  // Alert
+  type AlertType = 'info' | 'success' | 'warning' | 'error';
+  interface AlertProps extends BaseProps, EventProps {
+    type?: AlertType;
+    soft?: boolean;
+    actions?: ComponentFunction | ComponentChildren;
+    message?: string | (() => string);
+  }
+  function Alert(props: AlertProps, children?: ComponentChildren): HTMLElement;
+
+  // Autocomplete
+  interface AutocompleteOption {
+    label: string;
+    value: string;
+  }
+  interface AutocompleteProps extends BaseProps, EventProps {
+    items?: string[] | AutocompleteOption[] | (() => (string[] | AutocompleteOption[]));
+    value?: Signal<string> | string;
+    onselect?: (option: string | AutocompleteOption) => void;
+    label?: string | (() => string);
+    placeholder?: string | (() => string);
+  }
+  function Autocomplete(props: AutocompleteProps): HTMLElement;
+
+  // Badge
+  interface BadgeProps extends BaseProps, EventProps {}
+  function Badge(props: BadgeProps, children: ComponentChildren): HTMLElement;
+
+  // Button
+  interface ButtonProps extends BaseProps, EventProps {
+    disabled?: boolean | (() => boolean);
+    loading?: boolean | (() => boolean);
+    icon?: string | (() => string) | HTMLElement;
+  }
+  function Button(props: ButtonProps, children: ComponentChildren): HTMLElement;
+
+  // Checkbox
+  interface CheckboxProps extends BaseProps, EventProps {
+    value?: Signal<boolean> | boolean;
+    label?: string | (() => string);
+    tooltip?: string | (() => string);
+    toggle?: boolean | (() => boolean);
+  }
+  function Checkbox(props: CheckboxProps): HTMLElement;
+
+  // Colorpicker
+  interface ColorpickerProps extends BaseProps, EventProps {
+    value?: Signal<string> | string;
+    label?: string | (() => string);
+  }
+  function Colorpicker(props: ColorpickerProps): HTMLElement;
+
+  // Datepicker
+  interface DateRange {
+    start: string;
+    end: string | null;
+    startHour?: number;
+    endHour?: number;
+  }
+  interface DatepickerProps extends BaseProps, EventProps {
+    value?: Signal<string | DateRange> | string | DateRange;
+    range?: boolean | (() => boolean);
+    label?: string | (() => string);
+    placeholder?: string | (() => string);
+    hour?: boolean;
+  }
+  function Datepicker(props: DatepickerProps): HTMLElement;
+
+  // Drawer
+  interface DrawerProps extends BaseProps, EventProps {
+    id?: string;
+    open?: Signal<boolean> | boolean;
+    side: ComponentFunction | ComponentChildren;
+    content: ComponentFunction | ComponentChildren;
+  }
+  function Drawer(props: DrawerProps, children?: ComponentChildren): HTMLElement;
+
+  // Dropdown
+  interface DropdownItem {
+    label: string | (() => string);
+    icon?: string | HTMLElement | (() => string | HTMLElement);
+    onclick?: (event: MouseEvent) => void;
+    class?: string;
+  }
+  interface DropdownProps extends BaseProps, EventProps {
+    label?: string | (() => string);
+    icon?: string | HTMLElement | (() => string | HTMLElement);
+    items?: DropdownItem[] | (() => DropdownItem[]);
+  }
+  function Dropdown(props: DropdownProps): HTMLElement;
+
+  // Fab
+  interface FabAction {
+    label?: string;
+    icon?: string | HTMLElement;
+    text?: string;
+    onclick?: (event: MouseEvent) => void;
+    class?: string;
+  }
+  interface FabProps extends BaseProps, EventProps {
+    icon?: string | HTMLElement;
+    label?: string;
+    actions?: FabAction[] | (() => FabAction[]);
+    position?: string;
+  }
+  function Fab(props: FabProps): HTMLElement;
+
+  // Fieldset
+  interface FieldsetProps extends BaseProps, EventProps {
+    legend?: string | (() => string);
+  }
+  function Fieldset(props: FieldsetProps, children: ComponentChildren): HTMLElement;
+
+  // Fileinput
+  interface FileinputProps extends BaseProps, EventProps {
+    tooltip?: string;
+    max?: number;
+    accept?: string;
+    onselect?: (files: File[]) => void;
+  }
+  function Fileinput(props: FileinputProps): HTMLElement;
+
+  // Indicator
+  interface IndicatorProps extends BaseProps, EventProps {
+    value?: number | string | (() => number | string);
+  }
+  function Indicator(props: IndicatorProps, children: ComponentChildren): HTMLElement;
+
+  // Input
+  interface InputProps extends BaseProps, EventProps {
+    value?: Signal<string> | string;
+    type?: string;
+    icon?: string | HTMLElement | (() => string | HTMLElement);
+    placeholder?: string | (() => string);
+    disabled?: boolean | (() => boolean);
+    size?: string;
+    validate?: (value: string) => string | null | undefined;
+    label?: string | (() => string);
+  }
+  function Input(props: InputProps): HTMLElement;
+
+  // Label
+  interface LabelProps extends BaseProps, EventProps {
+    value?: string | (() => string);
+    floating?: boolean;
+    error?: string | (() => string);
+    required?: boolean;
+  }
+  function Label(props: LabelProps, children: ComponentChildren): HTMLElement;
+
+  // List
+  interface ListProps<T = any> extends BaseProps, EventProps {
+    items: T[] | (() => T[]);
+    header?: string | HTMLElement | (() => string | HTMLElement);
+    render: (item: T, index: number) => ComponentChild;
+    keyFn?: (item: T, index: number) => string | number;
+  }
+  function List<T>(props: ListProps<T>): HTMLElement;
+
+  // Menu
+  interface MenuItem {
+    label: string | (() => string);
+    icon?: string | HTMLElement;
+    onclick?: (event: MouseEvent) => void;
+    active?: boolean | (() => boolean);
+    children?: MenuItem[];
+    open?: boolean;
+  }
+  interface MenuProps extends BaseProps, EventProps {
+    items: MenuItem[] | (() => MenuItem[]);
+  }
+  function Menu(props: MenuProps): HTMLElement;
+
+  // Modal
+  interface ModalProps extends BaseProps, EventProps {
+    open?: Signal<boolean> | boolean;
+    title?: string | HTMLElement | (() => string | HTMLElement);
+    buttons?: ComponentFunction | ComponentFunction[];
+  }
+  function Modal(props: ModalProps, children: ComponentChildren): HTMLElement;
+
+  // Navbar
+  interface NavbarProps extends BaseProps, EventProps {}
+  function Navbar(props: NavbarProps, children: ComponentChildren): HTMLElement;
+
+  // Radio
+  interface RadioProps extends BaseProps, EventProps {
+    value?: Signal<any> | any;
+    inputValue?: any;
+    name?: string;
+    label?: string | (() => string);
+    tooltip?: string | (() => string);
+  }
+  function Radio(props: RadioProps): HTMLElement;
+
+  // Range
+  interface RangeProps extends BaseProps, EventProps {
+    value?: Signal<number> | number;
+    label?: string | (() => string);
+    tooltip?: string | (() => string);
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean | (() => boolean);
+  }
+  function Range(props: RangeProps): HTMLElement;
+
+  // Rating
+  interface RatingProps extends BaseProps, EventProps {
+    value?: Signal<number> | number;
+    count?: number | (() => number);
+    mask?: string;
+    readonly?: boolean | (() => boolean);
+    onchange?: (value: number) => void;
+  }
+  function Rating(props: RatingProps): HTMLElement;
+
+  // Select
+  interface SelectOption {
+    label: string;
+    value: string | number;
+  }
+  interface SelectProps extends BaseProps, EventProps {
+    label?: string | (() => string);
+    items?: SelectOption[] | (() => SelectOption[]);
+    value?: Signal<string | number> | string | number;
+  }
+  function Select(props: SelectProps): HTMLElement;
+
+  // Stack
+  interface StackProps extends BaseProps, EventProps {}
+  function Stack(props: StackProps, children: ComponentChildren): HTMLElement;
+
+  // Stat
+  interface StatProps extends BaseProps, EventProps {
+    icon?: string | HTMLElement;
+    label?: string | (() => string);
+    value?: string | number | (() => string | number);
+    desc?: string | (() => string);
+  }
+  function Stat(props: StatProps): HTMLElement;
+
+  // Swap
+  interface SwapProps extends BaseProps, EventProps {
+    value?: Signal<boolean> | boolean;
+    on: ComponentChildren;
+    off: ComponentChildren;
+  }
+  function Swap(props: SwapProps): HTMLElement;
+
+  // Table
+  interface TableColumn<T = any> {
+    label: string | (() => string);
+    key?: keyof T;
+    render?: (item: T, index: number) => ComponentChild;
+    class?: string;
+  }
+  interface TableProps<T = any> extends BaseProps, EventProps {
+    items: T[] | (() => T[]);
+    columns: TableColumn<T>[];
+    keyFn?: (item: T, index: number) => string | number;
+    zebra?: boolean | (() => boolean);
+    pinRows?: boolean | (() => boolean);
+    empty?: string | HTMLElement | (() => string | HTMLElement);
+  }
+  function Table<T>(props: TableProps<T>): HTMLElement;
+
+  // Tabs
+  interface TabItem {
+    label: string | HTMLElement | (() => string | HTMLElement);
+    content: ComponentFunction | ComponentChildren;
+    active?: boolean | (() => boolean);
+    disabled?: boolean | (() => boolean);
+    onclick?: () => void;
+  }
+  interface TabsProps extends BaseProps, EventProps {
+    items: TabItem[] | (() => TabItem[]);
+  }
+  function Tabs(props: TabsProps): HTMLElement;
+
+  // Timeline
+  interface TimelineItem {
+    title: string | HTMLElement | (() => string | HTMLElement);
+    detail: string | HTMLElement | (() => string | HTMLElement);
+    type?: 'info' | 'success' | 'warning' | 'error';
+    icon?: string | HTMLElement;
+    completed?: boolean | (() => boolean);
+  }
+  interface TimelineProps extends BaseProps, EventProps {
+    items: TimelineItem[] | (() => TimelineItem[]);
+    vertical?: boolean | (() => boolean);
+    compact?: boolean | (() => boolean);
+  }
+  function Timeline(props: TimelineProps): HTMLElement;
+
+  // Toast
+  type ToastType = 'alert-info' | 'alert-success' | 'alert-warning' | 'alert-error';
+  function Toast(
+    message: string | (() => string),
+    type?: ToastType,
+    duration?: number
+  ): () => void;
+
+  // Tooltip
+  interface TooltipProps extends BaseProps, EventProps {
+    tip: string | (() => string);
+    ui?: string;
+  }
+  function Tooltip(props: TooltipProps, children: ComponentChildren): HTMLElement;
+
+  // Objeto principal
+  const SigProUI: {
+    Accordion: typeof Accordion;
+    Alert: typeof Alert;
+    Autocomplete: typeof Autocomplete;
+    Badge: typeof Badge;
+    Button: typeof Button;
+    Checkbox: typeof Checkbox;
+    Colorpicker: typeof Colorpicker;
+    Datepicker: typeof Datepicker;
+    Drawer: typeof Drawer;
+    Dropdown: typeof Dropdown;
+    Fab: typeof Fab;
+    Fieldset: typeof Fieldset;
+    Fileinput: typeof Fileinput;
+    Indicator: typeof Indicator;
+    Input: typeof Input;
+    Label: typeof Label;
+    List: typeof List;
+    Menu: typeof Menu;
+    Modal: typeof Modal;
+    Navbar: typeof Navbar;
+    Radio: typeof Radio;
+    Range: typeof Range;
+    Rating: typeof Rating;
+    Select: typeof Select;
+    Stack: typeof Stack;
+    Stat: typeof Stat;
+    Swap: typeof Swap;
+    Table: typeof Table;
+    Tabs: typeof Tabs;
+    Timeline: typeof Timeline;
+    Toast: typeof Toast;
+    Tooltip: typeof Tooltip;
+    Utils: {
+      val: typeof val;
+      ui: typeof ui;
+      getIcon: typeof getIcon;
+    };
+    tt: typeof tt;
+    install: (target?: Window) => void;
+  };
+
+  export default SigProUI;
+  export {
+    Accordion, Alert, Autocomplete, Badge, Button, Checkbox, Colorpicker,
+    Datepicker, Drawer, Dropdown, Fab, Fieldset, Fileinput, Indicator,
+    Input, Label, List, Menu, Modal, Navbar, Radio, Range, Rating,
+    Select, Stack, Stat, Swap, Table, Tabs, Timeline, Toast, Tooltip,
+    val, ui, getIcon, tt,
+    // Tipos
+    AccordionProps, AlertProps, AutocompleteProps, BadgeProps, ButtonProps,
+    CheckboxProps, ColorpickerProps, DatepickerProps, DrawerProps, DropdownProps,
+    FabProps, FieldsetProps, FileinputProps, IndicatorProps, InputProps,
+    LabelProps, ListProps, MenuProps, ModalProps, NavbarProps, RadioProps,
+    RangeProps, RatingProps, SelectProps, StackProps, StatProps, SwapProps,
+    TableProps, TabsProps, TimelineProps, TooltipProps,
+    DateRange, AutocompleteOption, DropdownItem, FabAction, MenuItem,
+    SelectOption, TabItem, TableColumn, TimelineItem, ToastType, AlertType
+  };
+}
+
+// Declaraciones globales
+declare global {
+  const Accordion: typeof import('sigpro-ui').Accordion;
+  const Alert: typeof import('sigpro-ui').Alert;
+  const Autocomplete: typeof import('sigpro-ui').Autocomplete;
+  const Badge: typeof import('sigpro-ui').Badge;
+  const Button: typeof import('sigpro-ui').Button;
+  const Checkbox: typeof import('sigpro-ui').Checkbox;
+  const Colorpicker: typeof import('sigpro-ui').Colorpicker;
+  const Datepicker: typeof import('sigpro-ui').Datepicker;
+  const Drawer: typeof import('sigpro-ui').Drawer;
+  const Dropdown: typeof import('sigpro-ui').Dropdown;
+  const Fab: typeof import('sigpro-ui').Fab;
+  const Fieldset: typeof import('sigpro-ui').Fieldset;
+  const Fileinput: typeof import('sigpro-ui').Fileinput;
+  const Indicator: typeof import('sigpro-ui').Indicator;
+  const Input: typeof import('sigpro-ui').Input;
+  const Label: typeof import('sigpro-ui').Label;
+  const List: typeof import('sigpro-ui').List;
+  const Menu: typeof import('sigpro-ui').Menu;
+  const Modal: typeof import('sigpro-ui').Modal;
+  const Navbar: typeof import('sigpro-ui').Navbar;
+  const Radio: typeof import('sigpro-ui').Radio;
+  const Range: typeof import('sigpro-ui').Range;
+  const Rating: typeof import('sigpro-ui').Rating;
+  const Select: typeof import('sigpro-ui').Select;
+  const Stack: typeof import('sigpro-ui').Stack;
+  const Stat: typeof import('sigpro-ui').Stat;
+  const Swap: typeof import('sigpro-ui').Swap;
+  const Table: typeof import('sigpro-ui').Table;
+  const Tabs: typeof import('sigpro-ui').Tabs;
+  const Timeline: typeof import('sigpro-ui').Timeline;
+  const Toast: typeof import('sigpro-ui').Toast;
+  const Tooltip: typeof import('sigpro-ui').Tooltip;
+  const Utils: typeof import('sigpro-ui').Utils;
+  const tt: typeof import('sigpro-ui').tt;
+
+  interface Window {
+    Accordion: typeof Accordion;
+    Alert: typeof Alert;
+    Autocomplete: typeof Autocomplete;
+    Badge: typeof Badge;
+    Button: typeof Button;
+    Checkbox: typeof Checkbox;
+    Colorpicker: typeof Colorpicker;
+    Datepicker: typeof Datepicker;
+    Drawer: typeof Drawer;
+    Dropdown: typeof Dropdown;
+    Fab: typeof Fab;
+    Fieldset: typeof Fieldset;
+    Fileinput: typeof Fileinput;
+    Indicator: typeof Indicator;
+    Input: typeof Input;
+    Label: typeof Label;
+    List: typeof List;
+    Menu: typeof Menu;
+    Modal: typeof Modal;
+    Navbar: typeof Navbar;
+    Radio: typeof Radio;
+    Range: typeof Range;
+    Rating: typeof Rating;
+    Select: typeof Select;
+    Stack: typeof Stack;
+    Stat: typeof Stat;
+    Swap: typeof Swap;
+    Table: typeof Table;
+    Tabs: typeof Tabs;
+    Timeline: typeof Timeline;
+    Toast: typeof Toast;
+    Tooltip: typeof Tooltip;
+    Utils: typeof Utils;
+    tt: typeof tt;
+    SigProUI: typeof import('sigpro-ui').default;
+  }
+}

index.js

@@ -1,36 +1,56 @@
-/**
- * SigproUI - Entry Point
- */
-
+// import './src/sigpro.js';
+import { $, $$, Render, Watch, Tag, If, For, Router, Mount } from './src/sigpro.js';
 import * as Components from './src/components/index.js';
-
-import * as Icons from './src/core/icons.js';
 import * as Utils from './src/core/utils.js';
 import { tt } from './src/core/i18n.js';
 
-
 export * from './src/components/index.js';
-export * from './src/core/icons.js';
 export * from './src/core/utils.js';
-export { tt };
+export { $, $$, Render, Watch, Tag, If, For, Router, Mount,  tt };
 
-const SigproUI = {
-  ...Components,
-  Icons,
-  Utils,
-  tt,
+if (typeof window !== 'undefined') {
+  // const CoreAPI = { $, $$, Render, Watch, Tag, If, For, Router, Mount } = SigPro;
+  
+  // Object.entries(CoreAPI).forEach(([name, fn]) => {
+  //   Object.defineProperty(window, name, {
+  //     value: fn,
+  //     writable: false,
+  //     configurable: false,
+  //     enumerable: true
+  //   });
+  // });
   
-  install: (target = (typeof window !== 'undefined' ? window : {})) => {
   Object.entries(Components).forEach(([name, component]) => {
-      target[name] = component;
+    Object.defineProperty(window, name, {
+      value: component,
+      writable: false,
+      configurable: true,
+      enumerable: true
+    });
   });
   
-    target.Icons = Icons;
-    target.Utils = Utils;
-    target.tt = tt;
+  Object.entries(Utils).forEach(([name, fn]) => {
+    Object.defineProperty(window, name, {
+      value: fn,
+      writable: false,
+      configurable: true,
+      enumerable: true
+    });
+  });
   
-    console.log("🌟 SigproUI");
+  Object.defineProperty(window, 'tt', {
+    value: tt,
+    writable: false,
+    configurable: true,
+    enumerable: true
+  });
+  
+  Object.defineProperty(window, 'SigProUI', {
+    value: { ...Components, Utils, tt },
+    writable: false,
+    configurable: true,
+    enumerable: true
+  });
+  
+  console.log("🎨 SigProUI ready");
 }
-};
-
-export default SigproUI;

package.json

@@ -1,52 +1,61 @@
 {
   "name": "sigpro-ui",
-  "version": "1.0.5",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/natxocc/sigpro-ui.git"
+  "version": "1.1.4",
+  "main": "./index.js",
+  "module": "./index.js",
+  "devDependencies": {
+    "@iconify/json": "^2.2.458",
+    "@iconify/tailwind4": "^1.2.3",
+    "@tailwindcss/cli": "^4.0.0",
+    "daisyui": "^5.5.19",
+    "tailwindcss": "^4.2.2"
   },
-  "main": "./dist/sigpro-ui.cjs",
-  "module": "./dist/sigpro-ui.esm.js",
-  "unpkg": "./dist/sigpro-ui.umd.min.js",
-  "jsdelivr": "./dist/sigpro-ui.umd.min.js",
   "exports": {
     ".": {
       "import": "./dist/sigpro-ui.esm.js",
-      "require": "./dist/sigpro-ui.cjs"
+      "script": "./dist/sigpro-ui.js",
+      "types": "./index.d.ts"
+    },
+    "./css": {
+      "import": "./css/index.js",
+      "default": "./css/index.js"
     }
   },
+  "homepage": "https://natxocc.github.io/sigpro-ui/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/natxocc/sigpro-ui.git"
+  },
   "bugs": {
     "url": "https://github.com/natxocc/sigpro-ui/issues"
   },
   "files": [
     "index.js",
-    "src",
+    "index.d.ts",
     "dist",
+    "css",
     "README.md",
     "LICENSE"
   ],
-  "homepage": "https://natxocc.github.io/sigpro-ui/",
-  "keywords": [
-    "signals",
-    "reactive",
-    "sigpro",
-    "sigpro components",
-    "UI",
-    "vanilla-js",
-    "reactive-programming"
-  ],
+  "jsdelivr": "./dist/sigpro-ui.min.js",
   "license": "MIT",
+  "sideEffects": [
+    "./css/*",
+    "**/*.css"
+  ],
   "scripts": {
-    "docs": "bun x serve docs",
-    "build": "rollup -c",
-    "prepublishOnly": "npm run build"
-  },
-  "peerDependencies": {
-    "sigpro": ">=1.1.16"
+    "clean": "rm -rf ./dist ./css/*.css ./docs/*.js ./docs/*.css",
+    "build:cssmin": "tailwindcss -i ./src/css/sigpro.css -o ./css/sigpro.min.css --content './src/**/*.js' --minify",
+    "build:css": "tailwindcss -i ./src/css/sigpro.css -o ./css/sigpro.css --content './src/**/*.js'",
+    "build:cssdocs": "tailwindcss -i ./src/css/sigpro.css -o ./docs/sigpro.css --content './src/**/*.js' --minify",
+    "build:js": "bun run build:js:iife && bun run build:js:esm",
+    "build:js:iife": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.js --format=iife --global-name=SigProUI && bun build ./index.js --bundle --outfile=./dist/sigpro-ui.min.js --format=iife --global-name=SigProUI --minify",
+    "build:js:esm": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.esm.js --format=esm && bun build ./index.js --bundle --outfile=./dist/sigpro-ui.esm.min.js --format=esm --minify",
+    "build:jsdocs": "bun build ./index.js --bundle --outfile=./docs/sigpro-ui.min.js --format=iife --global-name=SigProUI --minify",
+    "build": "bun run clean && bun run build:css && bun run build:js && bun run build:jsdocs && bun run build:cssdocs && bun run build:cssmin",
+    "prepublishOnly": "bun run build",
+    "docs": "bun x serve docs"
   },
   "type": "module",
-  "devDependencies": {
-    "@rollup/plugin-terser": "^0.4.4",
-    "rollup": "^4.34.8"
-  }
+  "unpkg": "./dist/sigpro-ui.min.js"
 }

rollup.config.js

@@ -1,49 +0,0 @@
-import terser from '@rollup/plugin-terser';
-
-export default [
-  // ESM
-  {
-    input: './index.js',
-    external: ['sigpro'],
-    output: {
-      file: './dist/sigpro-ui.esm.js',
-      format: 'esm'
-    }
-  },
-  // CommonJS
-  {
-    input: './index.js',
-    external: ['sigpro'],
-    output: {
-      file: './dist/sigpro-ui.cjs',
-      format: 'cjs'
-    }
-  },
-  // UMD (IIFE para navegador)
-  {
-    input: './index.js',
-    external: ['sigpro'],
-    output: {
-      file: './dist/sigpro-ui.umd.js',
-      format: 'iife',
-      name: 'SigProUI',
-      globals: {
-        sigpro: 'SigPro'
-      }
-    }
-  },
-  // UMD minificado
-  {
-    input: './index.js',
-    external: ['sigpro'],
-    output: {
-      file: './dist/sigpro-ui.umd.min.js',
-      format: 'iife',
-      name: 'SigProUI',
-      globals: {
-        sigpro: 'SigPro'
-      },
-      plugins: [terser()]
-    }
-  }
-];

src/components/Accordion.js

@@ -1,24 +1,29 @@
-import { $html } from "sigpro";
-import { joinClass } from "../core/utils.js";
+// components/Accordion.js
+// import { Tag } from "../sigpro.js";
+import { ui, val } from "../core/utils.js";
 
-/** ACCORDION */
+/**
+ * Accordion component
+ * 
+ * daisyUI classes used:
+ * - collapse, collapse-arrow, collapse-plus, collapse-title, collapse-content
+ * - collapse-open, collapse-close
+ * - bg-base-200, bg-base-100, bg-primary, bg-secondary
+ * - mb-2, mt-2, rounded-box
+ */
 export const Accordion = (props, children) => {
-  const { title, name, open, ...rest } = props;
+  const { class: className, title, name, open, ...rest } = props;
 
-  return $html(
-    "div",
-    {
+  return Tag("div", {
     ...rest,
-      class: joinClass("collapse collapse-arrow bg-base-200 mb-2", props.class),
-    },
-    [
-      $html("input", {
+    class: ui('collapse collapse-arrow bg-base-200 mb-2', className),
+  }, [
+    Tag("input", {
       type: name ? "radio" : "checkbox",
       name: name,
-        checked: open
+      checked: val(open),
     }),
-      $html("div", { class: "collapse-title text-xl font-medium" }, title),
-      $html("div", { class: "collapse-content" }, children),
-    ],
-  );
+    Tag("div", { class: "collapse-title text-xl font-medium" }, title),
+    Tag("div", { class: "collapse-content" }, children),
+  ]);
 };

src/components/Alert.js

@@ -1,50 +1,42 @@
-import { $html } from "sigpro";
-import { val } from "../core/utils.js";
-import { iconInfo, iconSuccess, iconWarning, iconError } from "../core/icons.js";
+// components/Alert.js
+// import { Tag } from "../sigpro.js";
+import { ui, getIcon } from "../core/utils.js";
 
-/** ALERT */
+/**
+ * Alert component
+ * 
+ * daisyUI classes used:
+ * - alert, alert-info, alert-success, alert-warning, alert-error
+ * - alert-soft, alert-outline, alert-dash
+ */
 export const Alert = (props, children) => {
-  const { type = "info", soft = true, ...rest } = props;
+  const { class: className, actions, type = 'info', soft = true, ...rest } = props;
 
-  const icons = {
-    info: iconInfo,
-    success: iconSuccess,
-    warning: iconWarning,
-    error: iconError,
+  const iconMap = {
+    info: "icon-[lucide--info]",
+    success: "icon-[lucide--check-circle]",
+    warning: "icon-[lucide--alert-triangle]",
+    error: "icon-[lucide--alert-circle]",
   };
 
-  const typeClass = () => {
-    const t = val(type);
-    const map = {
-      info: "alert-info",
-      success: "alert-success",
-      warning: "alert-warning",
-      error: "alert-error",
-    };
-    return map[t] || t;
-  };
+  // Build the complete class string
+  const typeClass = `alert-${type}`;
+  const softClass = soft ? 'alert-soft' : '';
+  const allClasses = [typeClass, softClass, className].filter(Boolean).join(' ');
 
   const content = children || props.message;
 
-  return $html(
-    "div",
-    {
+  return Tag("div", {
     ...rest,
     role: "alert",
-      class: () => `alert ${typeClass()} ${val(soft) ? "alert-soft" : ""} ${props.class || ""}`,
-    },
-    [
-      $html("img", {
-        src: icons[val(type)] || icons.info,
-        class: "w-4 h-4 object-contain",
-        alt: val(type),
-      }),
-      $html("div", { class: "flex-1" }, [
-        $html("span", {}, [typeof content === "function" ? content() : content])
+    class: ui('alert', allClasses),
+  }, () => [
+    getIcon(iconMap[type]),
+    Tag("div", { class: "flex-1" }, [
+      Tag("span", {}, [typeof content === "function" ? content() : content])
     ]),
-      props.actions ? $html("div", { class: "flex-none" }, [
-        typeof props.actions === "function" ? props.actions() : props.actions
+    actions ? Tag("div", { class: "flex-none" }, [
+      typeof actions === "function" ? actions() : actions
     ]) : null,
-    ],
-  );
+  ].filter(Boolean));
 };

src/components/Autocomplete.js

@@ -1,11 +1,21 @@
-import { $, $html, $for } from "sigpro";
+// components/Autocomplete.js
+// import { $, Tag, For } from "../sigpro.js";
 import { val } from "../core/utils.js";
 import { tt } from "../core/i18n.js";
-import { Input } from "./Input.js"; // Importamos el componente hermano
+import { Input } from "./Input.js";
 
-/** AUTOCOMPLETE */
+/**
+ * Autocomplete component
+ * 
+ * daisyUI classes used:
+ * - input, input-bordered, input-primary, input-secondary
+ * - menu, menu-dropdown, menu-dropdown-show
+ * - bg-base-100, rounded-box, shadow-xl, border, border-base-300
+ * - absolute, left-0, w-full, mt-1, p-2, max-h-60, overflow-y-auto
+ * - z-50, active, bg-primary, text-primary-content
+ */
 export const Autocomplete = (props) => {
-  const { options = [], value, onSelect, label, placeholder, ...rest } = props;
+  const { class: className, items = [], value, onselect, label, placeholder, ...rest } = props;
 
   const query = $(val(value) || "");
   const isOpen = $(false);
@@ -13,7 +23,7 @@ export const Autocomplete = (props) => {
 
   const list = $(() => {
     const q = query().toLowerCase();
-    const data = val(options) || [];
+    const data = val(items) || [];
     return q 
       ? data.filter((o) => (typeof o === "string" ? o : o.label).toLowerCase().includes(q)) 
       : data;
@@ -25,7 +35,7 @@ export const Autocomplete = (props) => {
 
     query(labelStr);
     if (typeof value === "function") value(valStr);
-    onSelect?.(opt);
+    onselect?.(opt);
 
     isOpen(false);
     cursor(-1);
@@ -48,9 +58,10 @@ export const Autocomplete = (props) => {
     }
   };
 
-  return $html("div", { class: "relative w-full" }, [
+  return Tag("div", { class: 'relative w-full' }, [
     Input({
       label,
+      class: className, 
       placeholder: placeholder || tt("search")(),
       value: query,
       onfocus: () => isOpen(true),
@@ -65,18 +76,18 @@ export const Autocomplete = (props) => {
       },
       ...rest,
     }),
-    $html(
+    Tag(
       "ul",
       {
         class: "absolute left-0 w-full menu bg-base-100 rounded-box mt-1 p-2 shadow-xl max-h-60 overflow-y-auto border border-base-300 z-50",
         style: () => (isOpen() && list().length ? "display:block" : "display:none"),
       },
       [
-        $for(
+        For(
           list,
           (opt, i) =>
-            $html("li", {}, [
-              $html(
+            Tag("li", {}, [
+              Tag(
                 "a",
                 {
                   class: () => `block w-full ${cursor() === i ? "active bg-primary text-primary-content" : ""}`,
@@ -88,7 +99,7 @@ export const Autocomplete = (props) => {
             ]),
           (opt, i) => (typeof opt === "string" ? opt : opt.value) + i,
         ),
-        () => (list().length ? null : $html("li", { class: "p-2 text-center opacity-50" }, "No results")),
+        () => (list().length ? null : Tag("li", { class: "p-2 text-center opacity-50" }, tt("nodata")())),
       ],
     ),
   ]);

src/components/Badge.js

@@ -1,6 +1,21 @@
-import { $html } from "sigpro";
-import { joinClass } from "../core/utils.js";
+// components/Badge.js
+// import { Tag } from "../sigpro.js";
+import { ui } from "../core/utils.js";
 
-/** BADGE */
-export const Badge = (props, children) => 
-  $html("span", { ...props, class: joinClass("badge", props.class) }, children);
+/**
+ * Badge component
+ * 
+ * daisyUI classes used:
+ * - badge, badge-primary, badge-secondary, badge-accent
+ * - badge-info, badge-success, badge-warning, badge-error
+ * - badge-outline, badge-soft, badge-dash
+ * - badge-xs, badge-sm, badge-md, badge-lg
+ */
+export const Badge = (props, children) => {
+  const { class: className, ...rest } = props;
+
+  return Tag("span", {
+    ...rest,
+    class: ui('badge', className),
+  }, children);
+};

src/components/Button.js

@@ -1,39 +1,30 @@
-import { $html } from "sigpro";
-import { val, joinClass } from "../core/utils.js";
+// components/Button.js
+// import { Tag } from "../sigpro.js";
+import { ui, val, getIcon } from "../core/utils.js";
 
-/** BUTTON */
+/**
+ * Button component
+ * 
+ * daisyUI classes used:
+ * - btn, btn-primary, btn-secondary, btn-accent, btn-ghost
+ * - btn-info, btn-success, btn-warning, btn-error, btn-neutral
+ * - btn-xs, btn-sm, btn-md, btn-lg, btn-xl
+ * - btn-outline, btn-soft, btn-dash, btn-link
+ * - btn-circle, btn-square, btn-wide, btn-block
+ * - btn-active, btn-disabled
+ */
 export const Button = (props, children) => {
-  const { badge, badgeClass, tooltip, icon, loading, ...rest } = props;
+  const { class: className, loading, icon, ...rest } = props;
 
-  const btn = $html(
-    "button",
-    {
+  const iconEl = getIcon(icon);
+
+  return Tag("button", {
     ...rest,
-      // Usamos props.class directamente
-      class: joinClass("btn", props.class),
+    class: ui('btn', className),
     disabled: () => val(loading) || val(props.disabled),
-    },
-    [
-      () => (val(loading) ? $html("span", { class: "loading loading-spinner" }) : null),
-      icon ? $html("span", { class: "mr-1" }, icon) : null,
-      children,
-    ]
-  );
-
-  let out = btn;
-
-  if (badge) {
-    out = $html("div", { class: "indicator" }, [
-      $html(
-        "span",
-        { class: joinClass("indicator-item badge", badgeClass || "badge-secondary") },
-        badge
-      ),
-      out,
-    ]);
-  }
-
-  return tooltip 
-    ? $html("div", { class: "tooltip", "data-tip": tooltip }, out) 
-    : out;
+  }, () => [
+    val(loading) && Tag("span", { class: "loading loading-spinner" }),
+    iconEl,
+    children
+  ].filter(Boolean));
 };

src/components/Checkbox.js

@@ -1,21 +1,29 @@
-import { $html } from "sigpro";
-import { val } from "../core/utils.js";
+// components/Checkbox.js
+import { val, ui } from "../core/utils.js";
 
-/** CHECKBOX */
+/**
+ * Checkbox component
+ * 
+ * daisyUI classes used:
+ * - checkbox, checkbox-primary, checkbox-secondary, checkbox-accent
+ * - checkbox-info, checkbox-success, checkbox-warning, checkbox-error
+ * - checkbox-xs, checkbox-sm, checkbox-md, checkbox-lg
+ * - toggle, toggle-primary, toggle-secondary, toggle-accent
+ * - toggle-xs, toggle-sm, toggle-md, toggle-lg
+ * - label, label-text, cursor-pointer
+ */
 export const Checkbox = (props) => {
-  const { value, tooltip, toggle, label, ...rest } = props;
+  const { class: className, value, toggle, label, ...rest } = props;
 
-  const checkEl = $html("input", {
+  const checkEl = Tag("input", {
     ...rest,
     type: "checkbox",
-    class: () => (val(toggle) ? "toggle" : "checkbox"),
+    class: () => ui(val(toggle) ? "toggle" : "checkbox", className),
     checked: value
   });
 
-  const layout = $html("label", { class: "label cursor-pointer justify-start gap-3" }, [
+  return Tag("label", { class: "label cursor-pointer justify-start gap-3" }, [
     checkEl,
-    label ? $html("span", { class: "label-text" }, label) : null,
+    label ? Tag("span", { class: "label-text" }, label) : null,
   ]);
-
-  return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
 };

src/components/Colorpicker.js

@@ -1,9 +1,20 @@
-import { $, $html, $if } from "sigpro";
-import { val } from "../core/utils.js";
+// components/Colorpicker.js
+// import { $, Tag, If } from "../sigpro.js";
+import { val, ui } from "../core/utils.js";
 
-/** COLORPICKER */
+/**
+ * Colorpicker component
+ * 
+ * daisyUI classes used:
+ * - btn, btn-primary, btn-secondary, btn-accent, btn-ghost
+ * - bg-base-100, border, border-base-300, shadow-sm, shadow-2xl
+ * - rounded-box, rounded-sm, fixed, inset-0
+ * - z-50, z-110, absolute, left-0, mt-2, p-3, w-64
+ * - grid, grid-cols-8, gap-1, ring, ring-offset-1, ring-primary
+ * - scale-110, transition-all, hover:scale-125, active:scale-95
+ */
 export const Colorpicker = (props) => {
-  const { value, label, ...rest } = props;
+  const { class: className, value, label, ...rest } = props;
   const isOpen = $(false);
 
   const palette = [
@@ -19,8 +30,8 @@ export const Colorpicker = (props) => {
 
   const getColor = () => val(value) || "#000000";
 
-  return $html("div", { class: "relative w-fit" }, [
-    $html(
+  return Tag("div", { class: ui('relative w-fit', className) }, [
+    Tag(
       "button",
       {
         type: "button",
@@ -32,27 +43,27 @@ export const Colorpicker = (props) => {
         ...rest,
       },
       [
-        $html("div", {
+        Tag("div", {
           class: "size-5 rounded-sm shadow-inner border border-black/10 shrink-0",
           style: () => `background-color: ${getColor()}`,
         }),
-        label ? $html("span", { class: "opacity-80" }, label) : null,
+        label ? Tag("span", { class: "opacity-80" }, label) : null,
       ],
     ),
 
-    $if(isOpen, () =>
-      $html(
+    If(isOpen, () =>
+      Tag(
         "div",
         {
           class: "absolute left-0 mt-2 p-3 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[110] w-64 select-none",
           onclick: (e) => e.stopPropagation(),
         },
         [
-          $html(
+          Tag(
             "div",
             { class: "grid grid-cols-8 gap-1" },
             palette.map((c) =>
-              $html("button", {
+              Tag("button", {
                 type: "button",
                 style: `background-color: ${c}`,
                 class: () => {
@@ -71,8 +82,8 @@ export const Colorpicker = (props) => {
       ),
     ),
 
-    $if(isOpen, () =>
-      $html("div", {
+    If(isOpen, () =>
+      Tag("div", {
         class: "fixed inset-0 z-[100]",
         onclick: () => isOpen(false),
       }),

src/components/Datepicker.js

@@ -1,17 +1,23 @@
-import { $, $html, $if } from "sigpro";
-import { val } from "../core/utils.js";
-import { 
-  iconCalendar, 
-  iconLeft, 
-  iconRight, 
-  iconLLeft, 
-  iconRRight 
-} from "../core/icons.js";
+// components/Datepicker.js
+// import { $, Tag, If } from "../sigpro.js";
+import { val, ui, getIcon } from "../core/utils.js";
 import { Input } from "./Input.js";
 
-/** DATEPICKER */
+/**
+ * Datepicker component
+ * 
+ * daisyUI classes used:
+ * - input, input-bordered, input-primary
+ * - btn, btn-ghost, btn-xs, btn-circle
+ * - bg-base-100, border, border-base-300, shadow-2xl, rounded-box
+ * - absolute, left-0, mt-2, p-4, w-80, z-100, z-90
+ * - grid, grid-cols-7, gap-1, text-center
+ * - ring, ring-primary, ring-inset, font-black
+ * - range, range-xs
+ * - tooltip, tooltip-top, tooltip-bottom
+ */
 export const Datepicker = (props) => {
-  const { value, range, label, placeholder, hour = false, ...rest } = props;
+  const { class: className, value, range, label, placeholder, hour = false, ...rest } = props;
 
   const isOpen = $(false);
   const internalDate = $(new Date());
@@ -93,9 +99,9 @@ export const Datepicker = (props) => {
   };
 
   const HourSlider = ({ value: hVal, onChange }) => {
-    return $html("div", { class: "flex-1" }, [
-      $html("div", { class: "flex gap-2 items-center" }, [
-        $html("input", {
+    return Tag("div", { class: "flex-1" }, [
+      Tag("div", { class: "flex gap-2 items-center" }, [
+        Tag("input", {
           type: "range",
           min: 0,
           max: 23,
@@ -106,20 +112,20 @@ export const Datepicker = (props) => {
             onChange(newHour);
           },
         }),
-        $html("span", { class: "text-sm font-mono min-w-[48px] text-center" }, 
+        Tag("span", { class: "text-sm font-mono min-w-[48px] text-center" }, 
           () => String(val(hVal)).padStart(2, "0") + ":00"
         ),
       ]),
     ]);
   };
 
-  return $html("div", { class: "relative w-full" }, [
+  return Tag("div", { class: ui('relative w-full', className) }, [
     Input({
       label,
       placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."),
       value: displayValue,
       readonly: true,
-      icon: $html("img", { src: iconCalendar, class: "opacity-40" }),
+      icon: getIcon("icon-[lucide--calendar]"),
       onclick: (e) => {
         e.stopPropagation();
         isOpen(!isOpen());
@@ -127,38 +133,38 @@ export const Datepicker = (props) => {
       ...rest,
     }),
 
-    $if(isOpen, () =>
-      $html(
+    If(isOpen, () =>
+      Tag(
         "div",
         {
           class: "absolute left-0 mt-2 p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[100] w-80 select-none",
           onclick: (e) => e.stopPropagation(),
         },
         [
-          $html("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
-            $html("div", { class: "flex gap-0.5" }, [
-              $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, 
-                $html("img", { src: iconLLeft, class: "opacity-40" })
+          Tag("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
+            Tag("div", { class: "flex gap-0.5" }, [
+              Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, 
+                getIcon("icon-[lucide--chevrons-left]")
               ),
-              $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, 
-                $html("img", { src: iconLeft, class: "opacity-40" })
+              Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, 
+                getIcon("icon-[lucide--chevron-left]")
               ),
             ]),
-            $html("span", { class: "font-bold uppercase flex-1 text-center" }, [
+            Tag("span", { class: "font-bold uppercase flex-1 text-center" }, [
               () => internalDate().toLocaleString("es-ES", { month: "short", year: "numeric" }),
             ]),
-            $html("div", { class: "flex gap-0.5" }, [
-              $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, 
-                $html("img", { src: iconRight, class: "opacity-40" })
+            Tag("div", { class: "flex gap-0.5" }, [
+              Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, 
+                getIcon("icon-[lucide--chevron-right]")
               ),
-              $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, 
-                $html("img", { src: iconRRight, class: "opacity-40" })
+              Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, 
+                getIcon("icon-[lucide--chevrons-right]")
               ),
             ]),
           ]),
 
-          $html("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [
-            ...["L", "M", "X", "J", "V", "S", "D"].map((d) => $html("div", { class: "text-[10px] opacity-40 font-bold text-center" }, d)),
+          Tag("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [
+            ...["L", "M", "X", "J", "V", "S", "D"].map((d) => Tag("div", { class: "text-[10px] opacity-40 font-bold text-center" }, d)),
             () => {
               const d = internalDate();
               const year = d.getFullYear();
@@ -168,14 +174,14 @@ export const Datepicker = (props) => {
               const daysInMonth = new Date(year, month + 1, 0).getDate();
 
               const nodes = [];
-              for (let i = 0; i < offset; i++) nodes.push($html("div"));
+              for (let i = 0; i < offset; i++) nodes.push(Tag("div"));
 
               for (let i = 1; i <= daysInMonth; i++) {
                 const date = new Date(year, month, i);
                 const dStr = formatDate(date);
 
                 nodes.push(
-                  $html(
+                  Tag(
                     "button",
                     {
                       type: "button",
@@ -212,9 +218,9 @@ export const Datepicker = (props) => {
             },
           ]),
 
-          hour ? $html("div", { class: "mt-3 pt-2 border-t border-base-300" }, [
+          hour ? Tag("div", { class: "mt-3 pt-2 border-t border-base-300" }, [
             isRangeMode()
-              ? $html("div", { class: "flex gap-4" }, [
+              ? Tag("div", { class: "flex gap-4" }, [
                   HourSlider({
                     value: startHour,
                     onChange: (newHour) => {
@@ -247,6 +253,6 @@ export const Datepicker = (props) => {
       ),
     ),
 
-    $if(isOpen, () => $html("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })),
+    If(isOpen, () => Tag("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })),
   ]);
 };

src/components/Drawer.js

@@ -1,18 +1,46 @@
-import { $html } from "sigpro";
-import { joinClass } from "../core/utils.js";
+// components/Drawer.js
+// import { Tag } from "../sigpro.js";
+import { ui } from "../core/utils.js";
 
-/** DRAWER */
-export const Drawer = (props) =>
-  $html("div", { class: joinClass("drawer", props.class) }, [
-    $html("input", {
-      id: props.id,
+/**
+ * Drawer component
+ * 
+ * daisyUI classes used:
+ * - drawer, drawer-toggle, drawer-content, drawer-side, drawer-overlay
+ * - bg-base-200, w-80, min-h-full
+ */
+export const Drawer = (props, children) => {
+  const { class: className, id, open, side, content, ...rest } = props;
+  
+  const drawerId = id || `drawer-${Math.random().toString(36).slice(2, 9)}`;
+  
+  return Tag("div", {
+    ...rest,
+    class: ui('drawer', className),
+  }, [
+    Tag("input", {
+      id: drawerId,
       type: "checkbox",
       class: "drawer-toggle",
-      checked: props.open,
+      checked: () => typeof open === "function" ? open() : open,
+      onchange: (e) => {
+        if (typeof open === "function") open(e.target.checked);
+      }
     }),
-    $html("div", { class: "drawer-content" }, props.content),
-    $html("div", { class: "drawer-side" }, [
-      $html("label", { for: props.id, class: "drawer-overlay", onclick: () => props.open?.(false) }),
-      $html("div", { class: "min-h-full bg-base-200 w-80" }, props.side),
+    Tag("div", { class: "drawer-content" }, [
+      typeof content === "function" ? content() : content
     ]),
+    Tag("div", { class: "drawer-side" }, [
+      Tag("label", { 
+        for: drawerId, 
+        class: "drawer-overlay",
+        onclick: () => {
+          if (typeof open === "function") open(false);
+        }
+      }),
+      Tag("div", { class: "min-h-full bg-base-200 w-80" }, [
+        typeof side === "function" ? side() : side
+      ])
+    ])
   ]);
+};

src/components/Dropdown.js

@@ -1,37 +1,78 @@
-import { $html } from "sigpro";
-import { val } from "../core/utils.js";
+// components/Dropdown.js
+// import { Tag, For, Watch } from "../sigpro.js";
+import { ui } from "../core/utils.js";
 
-/** DROPDOWN */
-export const Dropdown = (props, children) => {
-  const { label, icon, ...rest } = props;
+/**
+ * Dropdown component - Solo soporta menús (items)
+ * 
+ * daisyUI classes used:
+ * - dropdown, dropdown-content, dropdown-end, dropdown-top, dropdown-bottom
+ * - menu, btn
+ * - bg-base-100, shadow, rounded-box, border
+ * - z-50, p-2, w-52
+ * - m-1, flex, items-center, gap-2
+ */
 
-  return $html(
-    "div",
-    {
+let currentOpen = null;
+
+if (typeof window !== 'undefined' && !window.__dropdownHandlerRegistered) {
+  window.addEventListener('click', (e) => {
+    if (currentOpen && !currentOpen.contains(e.target)) {
+      currentOpen.open = false;
+      currentOpen = null;
+    }
+  });
+  window.__dropdownHandlerRegistered = true;
+}
+
+export const Dropdown = (props) => {
+  const { class: className, label, icon, items, ...rest } = props;
+
+  return Tag("details", {
     ...rest,
-      class: () => `dropdown ${val(props.class) || props.class || ""}`,
-    },
-    [
-      $html(
-        "div",
-        {
-          tabindex: 0,
-          role: "button",
-          class: "btn m-1 flex items-center gap-2",
-        },
-        [
-          icon ? (typeof icon === "function" ? icon() : icon) : null, 
-          label ? (typeof label === "function" ? label() : label) : null
-        ],
-      ),
-      $html(
-        "ul",
-        {
-          tabindex: 0,
-          class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300",
-        },
-        [typeof children === "function" ? children() : children],
-      ),
-    ],
+    class: ui('dropdown', className),
+  }, [
+    Tag("summary", {
+      class: "btn m-1 flex items-center gap-2 list-none cursor-pointer",
+      style: "display: inline-flex;",
+      onclick: (e) => {
+        const details = e.currentTarget.closest('details');
+        if (currentOpen && currentOpen !== details) {
+          currentOpen.open = false;
+        }
+        setTimeout(() => {
+          currentOpen = details.open ? details : null;
+        }, 0);
+      }
+    }, [
+      () => icon ? (typeof icon === "function" ? icon() : icon) : null,
+      () => label ? (typeof label === "function" ? label() : label) : null
+    ]),
+    Tag("ul", { 
+      tabindex: "-1",
+      class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-300" 
+    }, [
+      () => {
+        const currentItems = typeof items === "function" ? items() : (items || []);
+        return currentItems.map(item => 
+          Tag("li", {}, [
+            Tag("a", { 
+              class: item.class || "",
+              onclick: (e) => {
+                if (item.onclick) item.onclick(e);
+                const details = e.currentTarget.closest('details');
+                if (details) {
+                  details.open = false;
+                  if (currentOpen === details) currentOpen = null;
+                }
+              }
+            }, [
+              item.icon ? Tag("span", {}, item.icon) : null,
+              Tag("span", {}, item.label)
+            ])
+          ])
         );
+      }
+    ])
+  ]);
 };

src/components/Fab.js

@@ -1,21 +1,29 @@
-import { $html } from "sigpro";
-import { val } from "../core/utils.js";
+// components/Fab.js
+// import { Tag } from "../sigpro.js";
+import { val, ui, getIcon } from "../core/utils.js";
 
-/** FAB (Floating Action Button) */
+/**
+ * Fab (Floating Action Button) component
+ * 
+ * daisyUI classes used:
+ * - btn, btn-lg, btn-circle, btn-primary
+ * - shadow-2xl, shadow-lg
+ * - badge, badge-ghost, shadow-sm, whitespace-nowrap
+ * - absolute, flex, flex-col-reverse, items-end, gap-3
+ * - z-100, transition-all, duration-300
+ * - bottom-6, right-6, top-6, left-6
+ */
 export const Fab = (props) => {
-  const { icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;
+  const { class: className, icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;
 
-  return $html(
+  return Tag(
     "div",
     {
       ...rest,
-      class: () => `fab fixed ${val(position)} flex flex-col-reverse items-end gap-3 z-[100] ${
-        props.class || ""
-      }`,
+      class: ui(`fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100]`, className),
     },
     [
-      // Botón principal
-      $html(
+      Tag(
         "div",
         {
           tabindex: 0,
@@ -23,16 +31,15 @@ export const Fab = (props) => {
           class: "btn btn-lg btn-circle btn-primary shadow-2xl",
         },
         [
-          icon ? (typeof icon === "function" ? icon() : icon) : null, 
+          icon ? getIcon(icon) : null, 
           !icon && label ? label : null
         ],
       ),
 
-      // Acciones secundarias (se despliegan hacia arriba)
       ...val(actions).map((act) =>
-        $html("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
-          act.label ? $html("span", { class: "badge badge-ghost shadow-sm whitespace-nowrap" }, act.label) : null,
-          $html(
+        Tag("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
+          act.label ? Tag("span", { class: "badge badge-ghost shadow-sm whitespace-nowrap" }, act.label) : null,
+          Tag(
             "button",
             {
               type: "button",
@@ -42,7 +49,7 @@ export const Fab = (props) => {
                 act.onclick?.(e);
               },
             },
-            [act.icon ? (typeof act.icon === "function" ? act.icon() : act.icon) : act.text || ""],
+            [act.icon ? getIcon(act.icon) : act.text || ""],
           ),
         ]),
       ),

src/components/Fieldset.js

@@ -1,19 +1,30 @@
-import { $html } from "sigpro";
-import { val, joinClass } from "../core/utils.js";
+// components/Fieldset.js
+// import { Tag } from "../sigpro.js";
+import { val, ui } from "../core/utils.js";
 
-/** FIELDSET */
-export const Fieldset = (props, children) =>
-  $html(
+/**
+ * Fieldset component
+ * 
+ * daisyUI classes used:
+ * - fieldset, fieldset-legend
+ * - bg-base-200, border, border-base-300
+ * - p-4, rounded-lg, font-bold
+ */
+export const Fieldset = (props, children) => {
+  const { class: className, legend, ...rest } = props;
+
+  return Tag(
     "fieldset",
     {
-      ...props,
-      class: joinClass("fieldset bg-base-200 border border-base-300 p-4 rounded-lg", props.class),
+      ...rest,
+      class: ui('fieldset bg-base-200 border border-base-300 p-4 rounded-lg', className),
     },
     [
       () => {
-        const legendText = val(props.legend);
-        return legendText ? $html("legend", { class: "fieldset-legend font-bold" }, [legendText]) : null;
+        const legendText = val(legend);
+        return legendText ? Tag("legend", { class: "fieldset-legend font-bold" }, [legendText]) : null;
       },
       children,
     ],
   );
+};

src/components/Fileinput.js

@@ -1,9 +1,26 @@
-import { $, $html, $if, $for } from "sigpro";
-import { iconUpload, iconClose } from "../core/icons.js";
+// components/Fileinput.js
+// import { $, Tag, If, For } from "../sigpro.js";
+import { ui, getIcon } from "../core/utils.js";
 
-/** FILEINPUT */
+/**
+ * Fileinput component
+ * 
+ * daisyUI classes used:
+ * - fieldset, w-full, p-0
+ * - tooltip, tooltip-top, before:z-50, after:z-50
+ * - relative, flex, items-center, justify-between, w-full, h-12, px-4
+ * - border-2, border-dashed, rounded-lg, cursor-pointer, transition-all, duration-200
+ * - border-primary, bg-primary/10, border-base-content/20, bg-base-100, hover:bg-base-200
+ * - text-sm, opacity-70, truncate, grow, text-left
+ * - text-[10px], opacity-40, shrink-0
+ * - text-error, text-[10px], mt-1, px-1, font-medium
+ * - mt-2, space-y-1
+ * - flex, items-center, justify-between, p-1.5, pl-3, text-xs, bg-base-200/50, rounded-md, border, border-base-300
+ * - gap-2, truncate, opacity-50, font-medium, max-w-[200px]
+ * - btn, btn-ghost, btn-xs, btn-circle
+ */
 export const Fileinput = (props) => {
-  const { tooltip, max = 2, accept = "*", onSelect } = props;
+  const { class: className, tooltip, max = 2, accept = "*", onselect, ...rest } = props;
 
   const selectedFiles = $([]);
   const isDragging = $(false);
@@ -21,24 +38,24 @@ export const Fileinput = (props) => {
     }
 
     selectedFiles([...selectedFiles(), ...fileList]);
-    onSelect?.(selectedFiles());
+    onselect?.(selectedFiles());
   };
 
   const removeFile = (index) => {
     const updated = selectedFiles().filter((_, i) => i !== index);
     selectedFiles(updated);
-    onSelect?.(updated);
+    onselect?.(updated);
   };
 
-  return $html("fieldset", { class: "fieldset w-full p-0" }, [
-    $html(
+  return Tag("fieldset", { ...rest, class: ui('fieldset w-full p-0', className) }, [
+    Tag(
       "div",
       {
         class: () => `w-full ${tooltip ? "tooltip tooltip-top before:z-50 after:z-50" : ""}`,
         "data-tip": tooltip,
       },
       [
-        $html(
+        Tag(
           "label",
           {
             class: () => `
@@ -59,12 +76,12 @@ export const Fileinput = (props) => {
             },
           },
           [
-            $html("div", { class: "flex items-center gap-3 w-full" }, [
-              $html("img", { src: iconUpload, class: "w-5 h-5 opacity-50 shrink-0" }),
-              $html("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."),
-              $html("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${max}MB`),
+            Tag("div", { class: "flex items-center gap-3 w-full" }, [
+              getIcon("icon-[lucide--upload]"),
+              Tag("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."),
+              Tag("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${max}MB`),
             ]),
-            $html("input", {
+            Tag("input", {
               type: "file",
               multiple: true,
               accept: accept,
@@ -76,22 +93,22 @@ export const Fileinput = (props) => {
       ],
     ),
 
-    () => (error() ? $html("span", { class: "text-[10px] text-error mt-1 px-1 font-medium" }, error()) : null),
+    () => (error() ? Tag("span", { class: "text-[10px] text-error mt-1 px-1 font-medium" }, error()) : null),
 
-    $if(
+    If(
       () => selectedFiles().length > 0,
       () =>
-        $html("ul", { class: "mt-2 space-y-1" }, [
-          $for(
+        Tag("ul", { class: "mt-2 space-y-1" }, [
+          For(
             selectedFiles,
             (file, index) =>
-              $html("li", { class: "flex items-center justify-between p-1.5 pl-3 text-xs bg-base-200/50 rounded-md border border-base-300" }, [
-                $html("div", { class: "flex items-center gap-2 truncate" }, [
-                  $html("span", { class: "opacity-50" }, "📄"),
-                  $html("span", { class: "truncate font-medium max-w-[200px]" }, file.name),
-                  $html("span", { class: "text-[9px] opacity-40" }, `(${(file.size / 1024).toFixed(0)} KB)`),
+              Tag("li", { class: "flex items-center justify-between p-1.5 pl-3 text-xs bg-base-200/50 rounded-md border border-base-300" }, [
+                Tag("div", { class: "flex items-center gap-2 truncate" }, [
+                  Tag("span", { class: "opacity-50" }, "📄"),
+                  Tag("span", { class: "truncate font-medium max-w-[200px]" }, file.name),
+                  Tag("span", { class: "text-[9px] opacity-40" }, `(${(file.size / 1024).toFixed(0)} KB)`),
                 ]),
-                $html(
+                Tag(
                   "button",
                   {
                     type: "button",
@@ -102,7 +119,7 @@ export const Fileinput = (props) => {
                       removeFile(index);
                     },
                   },
-                  [$html("img", { src: iconClose, class: "w-3 h-3 opacity-70" })],
+                  [getIcon("icon-[lucide--x]")]
                 ),
               ]),
             (file) => file.name + file.lastModified,

src/components/Indicator.js

@@ -1,9 +1,28 @@
-import { $html } from "sigpro";
-import { joinClass } from "../core/utils.js";
+// components/Indicator.js
+// import { Tag } from "../sigpro.js";
+import { ui } from "../core/utils.js";
 
-/** INDICATOR */
-export const Indicator = (props, children) =>
-  $html("div", { class: joinClass("indicator", props.class) }, [
-    children,
-    $html("span", { class: joinClass("indicator-item badge", props.badgeClass) }, props.badge),
-  ]);
+/**
+ * Indicator component
+ * 
+ * daisyUI classes used:
+ * - indicator, indicator-item
+ * - badge, badge-primary, badge-secondary, badge-accent
+ * - badge-info, badge-success, badge-warning, badge-error
+ * - badge-outline, badge-soft, badge-dash
+ * - badge-xs, badge-sm, badge-md, badge-lg
+ */
+export const Indicator = (props, children) => {
+  const { value, class: className, ...rest } = props;
+  
+  return Tag("div", {
+    ...rest,
+    class: "indicator"
+  }, () => [
+    // El indicador debe ir PRIMERO (antes que el children)
+    value ? Tag("span", { 
+      class: ui('indicator-item badge', className) 
+    }, () => typeof value === "function" ? value() : value) : null,
+    children
+  ].filter(Boolean));
+};

src/components/Input.js

@@ -1,77 +1,113 @@
-import { $, $html } from "sigpro";
-import { val, joinClass } from "../core/utils.js";
-import { tt } from "../core/i18n.js";
-import { 
-  iconAbc, 
-  iconLock, 
-  iconCalendar, 
-  icon123, 
-  iconMail, 
-  iconShow, 
-  iconHide 
-} from "../core/icons.js";
+// components/Input.js
+import { val, ui, getIcon } from "../core/utils.js";
 
-/** INPUT */
+/**
+ * Input component - Input con ícono integrado, toggle password, validación y floating label opcional
+ * 
+ * daisyUI classes used:
+ * - input, input-bordered, input-ghost, input-primary, input-secondary
+ * - input-accent, input-info, input-success, input-warning, input-error
+ * - input-xs, input-sm, input-md, input-lg
+ * - floating-label
+ * - btn, btn-ghost, btn-xs, btn-sm, btn-md, btn-circle
+ */
 export const Input = (props) => {
-  const { label, tip, value, error, isSearch, icon, type = "text", ...rest } = props;
+  const {
+    class: className,
+    value,
+    type = "text",
+    icon,
+    oninput,
+    placeholder,
+    disabled,
+    validate,
+    label,
+    ...rest
+  } = props;
+
   const isPassword = type === "password";
   const visible = $(false);
+  const errorMsg = $(null);
 
-  const iconsByType = {
-    text: iconAbc,
-    password: iconLock,
-    date: iconCalendar,
-    number: icon123,
-    email: iconMail,
+  const iconMap = {
+    text: "icon-[lucide--text]",
+    password: "icon-[lucide--lock]",
+    date: "icon-[lucide--calendar]",
+    number: "icon-[lucide--hash]",
+    email: "icon-[lucide--mail]",
+    search: "icon-[lucide--search]",
+    tel: "icon-[lucide--phone]",
+    url: "icon-[lucide--link]",
   };
 
-  const inputEl = $html("input", {
+  const leftIcon = icon ? getIcon(icon) : (iconMap[type] ? getIcon(iconMap[type]) : null);
+  const getPasswordIcon = () => getIcon(visible() ? "icon-[lucide--eye-off]" : "icon-[lucide--eye]");
+
+  const paddingLeft = leftIcon ? "pl-10" : "";
+  const paddingRight = isPassword ? "pr-10" : "";
+
+  const buttonSize = () => {
+    if (className?.includes('input-xs')) return 'btn-xs';
+    if (className?.includes('input-sm')) return 'btn-sm';
+    if (className?.includes('input-lg')) return 'btn-lg';
+    return 'btn-md';
+  };
+
+  const handleInput = (e) => {
+    const newValue = e.target.value;
+    if (validate) {
+      const result = validate(newValue);
+      errorMsg(result || null);
+    }
+    oninput?.(e);
+  };
+
+  const hasError = () => errorMsg() && errorMsg() !== '';
+
+  const inputClasses = () => {
+    let classes = `input w-full ${paddingLeft} ${paddingRight}`;
+    if (className) classes += ` ${className}`;
+    if (hasError()) classes += ' input-error';
+    return classes.trim();
+  };
+
+  const inputElement = Tag("input", {
     ...rest,
     type: () => (isPassword ? (visible() ? "text" : "password") : type),
-    placeholder: props.placeholder || label || (isSearch ? tt("search")() : " "),
-    class: joinClass("grow order-2 focus:outline-none", props.class),
+    placeholder: placeholder || (label ? " " : placeholder),
+    class: inputClasses,
     value: value,
-    oninput: (e) => props.oninput?.(e),
-    disabled: () => val(props.disabled),
+    oninput: handleInput,
+    disabled: () => val(disabled),
+    "aria-invalid": () => hasError() ? "true" : "false",
   });
 
-  const leftIcon = icon ? icon : iconsByType[type] ? $html("img", { src: iconsByType[type], class: "opacity-50", alt: type }) : null;
-
-  return $html(
-    "label",
-    {
-      class: () => joinClass("input input-bordered floating-label flex items-center gap-2 w-full relative", val(error) ? "input-error" : ""),
-    },
-    [
-      leftIcon ? $html("div", { class: "order-1 shrink-0" }, leftIcon) : null,
-      label ? $html("span", { class: "text-base-content/60 order-0" }, label) : null,
-      inputEl,
-      isPassword
-        ? $html(
-            "button",
-            {
+  const inputContent = () => [
+    inputElement,
+    leftIcon ? Tag("div", {
+      class: "absolute left-3 inset-y-0 flex items-center pointer-events-none text-base-content/60",
+    }, leftIcon) : null,
+    isPassword ? Tag("button", {
       type: "button",
-              class: "order-3 btn btn-ghost btn-xs btn-circle opacity-50 hover:opacity-100",
+      class: ui("absolute right-3 inset-y-0 flex items-center", "btn btn-ghost btn-circle opacity-50 hover:opacity-100", buttonSize()),
       onclick: (e) => {
         e.preventDefault();
         visible(!visible());
-              },
-            },
-            () =>
-              $html("img", {
-                class: "w-5 h-5",
-                src: visible() ? iconShow : iconHide,
-              }),
-          )
-        : null,
-      tip
-        ? $html(
-            "div",
-            { class: "tooltip tooltip-left order-4", "data-tip": tip },
-            $html("span", { class: "badge badge-ghost badge-xs cursor-help" }, "?"),
-          )
-        : null,
-      () => (val(error) ? $html("span", { class: "text-error text-[10px] absolute -bottom-5 left-2" }, val(error)) : null),
-    ],
-  );
+      }
+    }, () => getPasswordIcon()) : null,
+    Tag("div", {
+      class: "text-error text-xs mt-1 px-3 absolute -bottom-5 left-0",
+    }, () => hasError() ? errorMsg() : null),
+  ];
+
+  // Con floating label - añadir w-full para que ocupe todo el ancho
+  if (label) {
+    return Tag("label", { class: ui("floating-label w-full", className) }, () => [
+      Tag("div", { class: "relative w-full" }, inputContent),
+      Tag("span", {}, val(label))
+    ]);
+  }
+
+  // Sin label
+  return Tag("div", { class: "relative w-full" }, inputContent);
 };

src/components/Label.js

@@ -0,0 +1,18 @@
+// components/Label.js
+import { ui, val } from "../core/utils.js";
+
+export const Label = (props) => {
+  const { children, value, floating = false, class: className, ...rest } = props;
+
+  if (floating) {
+    return Tag("label", { class: ui("floating-label", className), ...rest }, () => [
+      typeof children === 'function' ? children() : children,
+      value ? Tag("span", {}, val(value)) : null
+    ]);
+  }
+
+  return Tag("label", { class: ui("label", className), ...rest }, () => [
+    value ? Tag("span", { class: "label-text" }, val(value)) : null,
+    typeof children === 'function' ? children() : children
+  ]);
+};

src/components/List.js

@@ -1,18 +1,33 @@
-import { $html, $if, $for } from "sigpro";
-import { joinClass, val } from "../core/utils.js";
+// components/List.js
+// import { Tag, If, For } from "../sigpro.js";
+import { ui, val } from "../core/utils.js";
 
-/** LIST */
+/**
+ * List component
+ * 
+ * daisyUI classes used:
+ * - list, list-row, list-bullet, list-image, list-none
+ * - bg-base-100, rounded-box, shadow-md
+ * - p-4, pb-2, text-xs, opacity-60
+ * - flex, items-center, gap-2
+ */
 export const List = (props) => {
-  const { items, header, render, keyFn, class: className } = props;
+  const { class: className, items, header, render = (item) => item, keyFn = (item, index) => item.id ?? index, ...rest } = props;
 
-  return $html(
-    "ul",
-    {
-      class: joinClass("list bg-base-100 rounded-box shadow-md", className),
-    },
-    [
-      $if(header, () => $html("li", { class: "p-4 pb-2 text-xs opacity-60 tracking-wide" }, [val(header)])),
-      $for(items, (item, index) => $html("li", { class: "list-row" }, [render(item, index)]), keyFn),
-    ],
+  const listItems = For(
+    items,
+    (item, index) => Tag("li", { 
+      class: "list-row", 
+      style: "width: 100%; display: block;" 
+    }, [
+      Tag("div", { style: "width: 100%;" }, [render(item, index)])
+    ]),
+    keyFn
   );
+
+  return Tag("ul", {
+    ...rest,
+    style: "display: block; width: 100%;",
+    class: ui('list bg-base-100 rounded-box shadow-md', className),
+  }, header ? [If(header, () => Tag("li", { class: "p-4 pb-2 text-xs opacity-60", style: "width: 100%;" }, [val(header)])), listItems] : listItems);
 };

src/components/Loading.js

@@ -1,13 +0,0 @@
-import { $html, $if } from "sigpro";
-
-/** LOADING (Overlay Component) */
-export const Loading = (props) => {
-  // Se espera un signal props.$show para controlar la visibilidad
-  return $if(props.$show, () =>
-    $html("div", { 
-      class: "fixed inset-0 z-[100] flex items-center justify-center backdrop-blur-sm bg-base-100/30" 
-    }, [
-      $html("span", { class: "loading loading-spinner loading-lg text-primary" }),
-    ]),
-  );
-};

src/components/Menu.js

@@ -1,25 +1,36 @@
-import { $html, $for } from "sigpro";
-import { val, joinClass } from "../core/utils.js";
+// components/Menu.js
+// import { Tag, For } from "../sigpro.js";
+import { val, ui } from "../core/utils.js";
 
-/** MENU */
+/**
+ * Menu component
+ * 
+ * daisyUI classes used:
+ * - menu, menu-dropdown, menu-dropdown-show
+ * - bg-base-200, rounded-box
+ * - details, summary, ul, li, a
+ * - mr-2, active
+ */
 export const Menu = (props) => {
+  const { class: className, items, ...rest } = props;
+
   const renderItems = (items) =>
-    $for(
+    For(
       () => items || [],
       (it) =>
-        $html("li", {}, [
+        Tag("li", {}, [
           it.children
-            ? $html("details", { open: it.open }, [
-                $html("summary", {}, [it.icon && $html("span", { class: "mr-2" }, it.icon), it.label]),
-                $html("ul", {}, renderItems(it.children)),
+            ? Tag("details", { open: it.open }, [
+                Tag("summary", {}, [it.icon && Tag("span", { class: "mr-2" }, it.icon), it.label]),
+                Tag("ul", {}, renderItems(it.children)),
               ])
-            : $html("a", { class: () => (val(it.active) ? "active" : ""), onclick: it.onclick }, [
-                it.icon && $html("span", { class: "mr-2" }, it.icon),
+            : Tag("a", { class: () => (val(it.active) ? "active" : ""), onclick: it.onclick }, [
+                it.icon && Tag("span", { class: "mr-2" }, it.icon),
                 it.label,
               ]),
         ]),
       (it, i) => it.label || i,
     );
 
-  return $html("ul", { ...props, class: joinClass("menu bg-base-200 rounded-box", props.class) }, renderItems(props.items));
+  return Tag("ul", { ...rest, class: ui('menu bg-base-200 rounded-box', className) }, renderItems(items));
 };

src/components/Modal.js

@@ -1,31 +1,65 @@
-import { $html, $if } from "sigpro";
+// components/Modal.js
+// import { Tag, Watch } from "../sigpro.js";
+import { ui } from "../core/utils.js";
 import { tt } from "../core/i18n.js";
 import { Button } from "./Button.js";
 
-/** MODAL */
+/**
+ * Modal component
+ * 
+ * daisyUI classes used:
+ * - modal, modal-box, modal-action, modal-backdrop
+ * - modal-open, modal-middle, modal-top, modal-bottom
+ * - text-lg, font-bold, mb-4, py-2
+ * - flex, gap-2
+ */
 export const Modal = (props, children) => {
-  const { title, buttons, open, ...rest } = props;
-  const close = () => open(false);
+  const { class: className, title, buttons, open, ...rest } = props;
+  let dialogElement = null;
 
-  return $if(open, () =>
-    $html("dialog", { ...rest, class: "modal modal-open" }, [
-      $html("div", { class: "modal-box" }, [
-        title ? $html("h3", { class: "text-lg font-bold mb-4" }, title) : null,
-        typeof children === "function" ? children() : children,
-        $html("div", { class: "modal-action flex gap-2" }, [
-          ...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean),
-          Button({ onclick: close }, tt("close")()),
-        ]),
-      ]),
-      $html(
-        "form",
-        {
-          method: "dialog",
-          class: "modal-backdrop",
-          onclick: (e) => (e.preventDefault(), close()),
-        },
-        [$html("button", {}, "close")],
-      ),
-    ]),
-  );
+  const handleOpen = () => {
+    const isOpen = typeof open === "function" ? open() : open;
+    if (!dialogElement) return;
+    
+    if (isOpen) {
+      if (!dialogElement.open) dialogElement.showModal();
+    } else {
+      if (dialogElement.open) dialogElement.close();
+    }
+  };
+
+  Watch(() => handleOpen());
+
+  const close = () => {
+    if (typeof open === "function") open(false);
+  };
+
+  return Tag("dialog", { 
+    ...rest,
+    ref: (el) => {
+      dialogElement = el;
+      if (el) handleOpen();
+    },
+    class: ui('modal', className),
+    onclose: close,
+    oncancel: close
+  }, [
+    Tag("div", { class: "modal-box" }, [
+      title ? Tag("h3", { class: "text-lg font-bold mb-4" }, () => 
+        typeof title === "function" ? title() : title
+      ) : null,
+      Tag("div", { class: "py-2" }, [
+        typeof children === "function" ? children() : children
+      ]),
+      Tag("div", { class: "modal-action" }, [
+        Tag("form", { method: "dialog", class: "flex gap-2" }, [
+          ...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean),
+          Button({ type: "submit" }, tt("close")())
+        ])
+      ])
+    ]),
+    Tag("form", { method: "dialog", class: "modal-backdrop" }, [
+      Tag("button", {}, "close")
+    ])
+  ]);
 };

src/components/Navbar.js

@@ -1,6 +1,16 @@
-import { $html } from "sigpro";
-import { joinClass } from "../core/utils.js";
+// components/Navbar.js
+// import { Tag } from "../sigpro.js";
+import { ui } from "../core/utils.js";
 
-/** NAVBAR */
-export const Navbar = (props, children) =>
-  $html("div", { ...props, class: joinClass("navbar bg-base-100 shadow-sm px-4", props.class) }, children);
+/**
+ * Navbar component
+ * 
+ * daisyUI classes used:
+ * - navbar, navbar-start, navbar-center, navbar-end
+ * - bg-base-100, shadow-sm, px-4
+ */
+export const Navbar = (props, children) => {
+  const { class: className, ...rest } = props;
+
+  return Tag("div", { ...rest, class: ui('navbar bg-base-100 shadow-sm px-4', className) }, children);
+};

src/components/Radio.js

@@ -1,25 +1,37 @@
-import { $html } from "sigpro";
-import { val, joinClass } from "../core/utils.js";
+// components/Radio.js
+// import { Tag } from "../sigpro.js";
+import { val, ui } from "../core/utils.js";
 
-/** RADIO */
+/**
+ * Radio component
+ * 
+ * daisyUI classes used:
+ * - radio, radio-primary, radio-secondary, radio-accent
+ * - radio-info, radio-success, radio-warning, radio-error
+ * - radio-xs, radio-sm, radio-md, radio-lg
+ * - label, label-text, cursor-pointer, justify-start, gap-3
+ * - tooltip, tooltip-top, tooltip-bottom, tooltip-left, tooltip-right
+ */
 export const Radio = (props) => {
-  const { label, tooltip, value, ...rest } = props;
+  const { class: className, label, tooltip, value, inputValue, name, ...rest } = props;
 
-  const radioEl = $html("input", {
+  const radioEl = Tag("input", {
     ...rest,
     type: "radio",
-    class: joinClass("radio", props.class),
-    checked: () => val(value) === props.value,
-    disabled: () => val(props.disabled),
-    onclick: () => typeof value === "function" && value(props.value),
+    name: name,
+    class: ui('radio', className),
+    checked: () => val(value) === inputValue,
+    onclick: () => {
+      if (typeof value === "function") value(inputValue);
+    },
   });
 
   if (!label && !tooltip) return radioEl;
 
-  const layout = $html("label", { class: "label cursor-pointer justify-start gap-3" }, [
+  const layout = Tag("label", { class: "label cursor-pointer justify-start gap-3" }, [
     radioEl,
-    label ? $html("span", { class: "label-text" }, label) : null,
+    label ? Tag("span", { class: "label-text" }, label) : null,
   ]);
 
-  return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
+  return tooltip ? Tag("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
 };

src/components/Range.js

@@ -1,24 +1,34 @@
-import { $html } from "sigpro";
-import { val, joinClass } from "../core/utils.js";
+// components/Range.js
+// import { Tag } from "../sigpro.js";
+import { val, ui } from "../core/utils.js";
 
-/** RANGE */
+/**
+ * Range component
+ * 
+ * daisyUI classes used:
+ * - range, range-primary, range-secondary, range-accent
+ * - range-info, range-success, range-warning, range-error
+ * - range-xs, range-sm, range-md, range-lg
+ * - label-text, flex, flex-col, gap-2
+ * - tooltip, tooltip-top, tooltip-bottom, tooltip-left, tooltip-right
+ */
 export const Range = (props) => {
-  const { label, tooltip, value, ...rest } = props;
+  const {class: className, label, tooltip, value, ...rest } = props;
 
-  const rangeEl = $html("input", {
+  const rangeEl = Tag("input", {
     ...rest,
     type: "range",
-    class: joinClass("range", props.class),
+    class: ui('range', className),
     value: value,
     disabled: () => val(props.disabled)
   });
 
   if (!label && !tooltip) return rangeEl;
 
-  const layout = $html("div", { class: "flex flex-col gap-2" }, [
-    label ? $html("span", { class: "label-text" }, label) : null, 
+  const layout = Tag("div", { class: "flex flex-col gap-2" }, [
+    label ? Tag("span", { class: "label-text" }, label) : null, 
     rangeEl
   ]);
 
-  return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
+  return tooltip ? Tag("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
 };

src/components/Rating.js

@@ -1,32 +1,42 @@
-import { $html } from "sigpro";
-import { val } from "../core/utils.js";
+// components/Rating.js
+// import { Tag } from "../sigpro.js";
+import { val, ui } from "../core/utils.js";
 
-/** RATING */
+/**
+ * Rating component
+ * 
+ * daisyUI classes used:
+ * - rating, rating-half, rating-hidden
+ * - mask, mask-star, mask-star-2, mask-heart, mask-circle
+ * - pointer-events-none
+ */
 export const Rating = (props) => {
-  const { value, count = 5, mask = "mask-star", readonly = false, ...rest } = props;
+  const { class: className, value, count = 5, mask = "mask-star", readonly = false, onchange, ...rest } = props;
 
-  // Generamos un ID único para el grupo de radio buttons
   const ratingGroup = `rating-${Math.random().toString(36).slice(2, 7)}`;
 
-  return $html(
+  return Tag(
     "div",
     {
       ...rest,
-      class: () => `rating ${val(readonly) ? "pointer-events-none" : ""} ${props.class || ""}`,
+      class: () => ui(`rating ${val(readonly) ? "pointer-events-none" : ""}`, className),
     },
     Array.from({ length: val(count) }, (_, i) => {
       const starValue = i + 1;
-
-      return $html("input", {
+      return Tag("input", {
         type: "radio",
         name: ratingGroup,
         class: `mask ${mask}`,
-        "aria-label": `${starValue} star`,
         checked: () => Math.round(val(value)) === starValue,
         onchange: () => {
-          if (!val(readonly) && typeof value === "function") {
+          if (!val(readonly)) {
+            if (typeof onchange === "function") {
+              onchange(starValue);
+            }
+            else if (typeof value === "function") {
               value(starValue);
             }
+          }
         },
       });
     })

src/components/Select.js

@@ -1,21 +1,30 @@
-import { $html, $for } from "sigpro";
-import { val, joinClass } from "../core/utils.js";
+// components/Select.js
+// import { Tag, For } from "../sigpro.js";
+import { val, ui } from "../core/utils.js";
 
-/** SELECT */
+/**
+ * Select component
+ * 
+ * daisyUI classes used:
+ * - select, select-bordered, select-primary, select-secondary
+ * - select-accent, select-info, select-success, select-warning, select-error
+ * - select-xs, select-sm, select-md, select-lg
+ * - fieldset-label, flex, flex-col, gap-1, w-full
+ */
 export const Select = (props) => {
-  const { label, options, value, ...rest } = props;
+  const { class: className, label, items, value, ...rest } = props;
 
-  const selectEl = $html(
+  const selectEl = Tag(
     "select",
     {
       ...rest,
-      class: joinClass("select select-bordered w-full", props.class),
+      class: ui('select select-bordered w-full', className),
       value: value
     },
-    $for(
-      () => val(options) || [],
+    For(
+      () => val(items) || [],
       (opt) =>
-        $html(
+        Tag(
           "option",
           {
             value: opt.value,
@@ -29,8 +38,8 @@ export const Select = (props) => {
 
   if (!label) return selectEl;
 
-  return $html("label", { class: "fieldset-label flex flex-col gap-1" }, [
-    $html("span", {}, label), 
+  return Tag("label", { class: "fieldset-label flex flex-col gap-1" }, [
+    Tag("span", {}, label), 
     selectEl
   ]);
 };

src/components/Stack.js

@@ -1,6 +1,15 @@
-import { $html } from "sigpro";
-import { joinClass } from "../core/utils.js";
+// components/Stack.js
+// import { Tag } from "../sigpro.js";
+import { ui } from "../core/utils.js";
 
-/** STACK */
-export const Stack = (props, children) => 
-  $html("div", { ...props, class: joinClass("stack", props.class) }, children);
+/**
+ * Stack component
+ * 
+ * daisyUI classes used:
+ * - stack, stack-top, stack-bottom, stack-start, stack-end
+ */
+export const Stack = (props, children) => {
+  const { class: className, ...rest } = props;
+
+  return Tag("div", { ...rest, class: ui('stack', className) }, children);
+};

src/components/Stat.js

@@ -1,11 +1,21 @@
-import { $html } from "sigpro";
-import { val, joinClass } from "../core/utils.js";
+// components/Stat.js
+// import { Tag } from "../sigpro.js";
+import { val, ui } from "../core/utils.js";
 
-/** STAT */
-export const Stat = (props) =>
-  $html("div", { ...props, class: joinClass("stat", props.class) }, [
-    props.icon && $html("div", { class: "stat-figure text-secondary" }, props.icon),
-    props.label && $html("div", { class: "stat-title" }, props.label),
-    $html("div", { class: "stat-value" }, () => val(props.value) ?? props.value),
-    props.desc && $html("div", { class: "stat-desc" }, props.desc),
+/**
+ * Stat component
+ * 
+ * daisyUI classes used:
+ * - stat, stat-figure, stat-title, stat-value, stat-desc
+ * - text-secondary
+ */
+export const Stat = (props) => {
+  const { class: className, icon, label, value, desc, ...rest } = props;
+
+  return Tag("div", { ...rest, class: ui('stat', className) }, [
+    icon && Tag("div", { class: "stat-figure text-secondary" }, icon),
+    label && Tag("div", { class: "stat-title" }, label),
+    Tag("div", { class: "stat-value" }, () => val(value) ?? value),
+    desc && Tag("div", { class: "stat-desc" }, desc),
   ]);
+};

src/components/Swap.js

@@ -1,13 +1,28 @@
-import { $html } from "sigpro";
-import { joinClass } from "../core/utils.js";
+// components/Swap.js
+// import { Tag } from "../sigpro.js";
+import { ui, val } from "../core/utils.js";
 
-/** SWAP */
-export const Swap = (props) =>
-  $html("label", { class: joinClass("swap", props.class) }, [
-    $html("input", {
+/**
+ * Swap component
+ * 
+ * daisyUI classes used:
+ * - swap, swap-on, swap-off, swap-active
+ * - swap-rotate, swap-flip, swap-indeterminate
+ */
+export const Swap = (props) => {
+  const { class: className, value, on, off, ...rest } = props;
+
+  return Tag("label", { ...rest, class: ui('swap', className) }, [
+    Tag("input", {
       type: "checkbox",
-      checked: props.value
+      checked: () => val(value),  // ← FUNCIÓN: se reevalúa cuando la señal cambia
+      onclick: (e) => {
+        if (typeof value === "function") {
+          value(e.target.checked);
+        }
+      }
     }),
-    $html("div", { class: "swap-on" }, props.on),
-    $html("div", { class: "swap-off" }, props.off),
+    Tag("div", { class: "swap-on" }, on),
+    Tag("div", { class: "swap-off" }, off),
   ]);
+};

src/components/Table.js

@@ -1,60 +1,65 @@
-import { $html, $for, $if } from "sigpro";
-import { val, joinClass } from "../core/utils.js";
+// components/Table.js
+// import { Tag, For, If } from "../sigpro.js";
+import { val, ui } from "../core/utils.js";
 import { tt } from "../core/i18n.js";
 
-/** TABLE */
+/**
+ * Table component
+ * 
+ * daisyUI classes used:
+ * - table, table-zebra, table-pin-rows, table-pin-cols
+ * - table-xs, table-sm, table-md, table-lg
+ * - overflow-x-auto, w-full, bg-base-100, rounded-box, border, border-base-300
+ * - thead, tbody, tfoot, tr, th, td
+ * - hover, text-center, p-10, opacity-50
+ */
 export const Table = (props) => {
-  const { 
-    items = [], 
-    columns = [], 
-    keyFn, 
-    zebra = false, 
-    pinRows = false, 
-    empty = tt("nodata")(),
-    ...rest 
-  } = props;
+  const { class: className, items = [], columns = [], keyFn, zebra = false, pinRows = false, empty = tt("nodata")(), ...rest } = props;
 
-  const tableClass = () => joinClass(
-    "table", 
-    `${val(zebra) ? "table-zebra" : ""} ${val(pinRows) ? "table-pin-rows" : ""} ${props.class || ""}`
-  );
+  const tableClass = () => {
+    const zebraClass = val(zebra) ? "table-zebra" : "";
+    const pinRowsClass = val(pinRows) ? "table-pin-rows" : "";
+    return ui('table', className, zebraClass, pinRowsClass);
+  };
 
-  return $html("div", { class: "overflow-x-auto w-full bg-base-100 rounded-box border border-base-300" }, [
-    $html("table", { ...rest, class: tableClass }, [
-      $html("thead", {}, [
-        $html("tr", {}, 
-          columns.map(col => $html("th", { class: col.class || "" }, col.label))
+  const getInternalKeyFn = keyFn || ((item, idx) => item.id || idx);
+
+  return Tag("div", { class: "overflow-x-auto w-full bg-base-100 rounded-box border border-base-300" }, [
+    Tag("table", { ...rest, class: tableClass }, [
+      Tag("thead", {}, [
+        Tag("tr", {},
+          columns.map(col => Tag("th", { class: col.class || "" }, col.label))
         )
       ]),
-      $html("tbody", {}, [
-        $for(items, (item, index) => {
-          return $html("tr", { class: "hover" }, 
+      Tag("tbody", {}, [
+        For(items, (item, index) => {
+          
+          const it = () => {
+            const currentItems = val(items);
+            const key = getInternalKeyFn(item, index);
+            return currentItems.find((u, i) => getInternalKeyFn(u, i) === key) || item;
+          };
+
+          return Tag("tr", { class: "hover" },
             columns.map(col => {
               const cellContent = () => {
-                if (col.render) return col.render(item, index);
-                const value = item[col.key];
-                return val(value);
+                const latestItem = it(); 
+                if (col.render) return col.render(latestItem, index);
+                return val(latestItem[col.key]);
               };
-              return $html("td", { class: col.class || "" }, [cellContent]);
+              return Tag("td", { class: col.class || "" }, [cellContent]);
             })
           );
-        }, keyFn || ((item, idx) => item.id || idx)),
+        }, getInternalKeyFn),
 
-        $if(() => val(items).length === 0, () => 
-          $html("tr", {}, [
-            $html("td", { colspan: columns.length, class: "text-center p-10 opacity-50" }, [
+        If(() => val(items).length === 0, () =>
+          Tag("tr", {}, [
+            Tag("td", { colspan: columns.length, class: "text-center p-10 opacity-50" }, [
               val(empty)
             ])
           ])
         )
-      ]),
-      $if(() => columns.some(c => c.footer), () => 
-        $html("tfoot", {}, [
-          $html("tr", {}, 
-            columns.map(col => $html("th", {}, col.footer || ""))
-          )
       ])
-      )
     ])
   ]);
 };

src/components/Tabs.js

@@ -1,46 +1,75 @@
-import { $html, $for } from "sigpro";
-import { val, joinClass } from "../core/utils.js";
+// components/Tabs.js
+// import { $, Tag, For } from "../sigpro.js";
+import { val, ui } from "../core/utils.js";
 
-/** TABS */
+/**
+ * Tabs component
+ * 
+ * daisyUI classes used:
+ * - tabs, tabs-box, tabs-lifted, tabs-bordered
+ * - tab, tab-content
+ * - bg-base-100, border-base-300, p-6
+ */
 export const Tabs = (props) => {
-  const { items, ...rest } = props;
+  const { items, class: className, ...rest } = props;
   const itemsSignal = typeof items === "function" ? items : () => items || [];
+  const activeIndex = $(0);
 
-  return $html("div", { ...rest, class: "flex flex-col gap-4 w-full" }, [
-    $html(
-      "div",
-      {
+  Watch(() => {
+    const idx = itemsSignal().findIndex(it => val(it.active) === true);
+    if (idx !== -1 && idx !== activeIndex()) activeIndex(idx);
+  });
+
+  return Tag("div", { ...rest, class: "w-full" }, [
+    // 1. Tab List: Aplanamos los botones para que sean hijos directos
+    Tag("div", { 
       role: "tablist", 
-        class: joinClass("tabs tabs-box", props.class),
-      },
-      $for(
-        itemsSignal,
-        (it) =>
-          $html(
-            "a",
-            {
+      class: ui('tabs', className || 'tabs-box') 
+    }, () => {
+      const list = itemsSignal();
+      return list.map((it, idx) => {
+        const isSelected = () => activeIndex() === idx;
+        
+        const tab = Tag("button", {
           role: "tab",
-              class: () => joinClass(
-                "tab", 
-                val(it.active) && "tab-active", 
-                val(it.disabled) && "tab-disabled", 
-                it.tip && "tooltip"
-              ),
-              "data-tip": it.tip,
-              onclick: (e) => !val(it.disabled) && it.onclick?.(e),
-            },
-            it.label,
-          ),
-        (t) => t.label,
-      ),
-    ),
-    () => {
-      const active = itemsSignal().find((it) => val(it.active));
-      if (!active) return null;
-      const content = val(active.content);
-      return $html("div", { class: "p-4" }, [
-        typeof content === "function" ? content() : content
+          class: () => ui("tab", isSelected() ? "tab-active" : ""),
+          onclick: (e) => {
+            e.preventDefault();
+            if (!val(it.disabled)) {
+              if (it.onclick) it.onclick();
+              activeIndex(idx);
+            }
+          }
+        });
+
+        // Mantenemos el watch para el label por si es dinámico
+        Watch(() => {
+          const content = val(it.label);
+          if (content instanceof Node) {
+            tab.replaceChildren(content);
+          } else {
+            tab.textContent = String(content);
+          }
+        });
+
+        return tab;
+      });
+    }),
+
+    // 2. Tab Content: Aquí el display:contents no molesta tanto, 
+    // pero lo aplanamos por consistencia
+    Tag("div", { class: "tab-panels" }, () => {
+      return itemsSignal().map((it, idx) => {
+        const isVisible = () => activeIndex() === idx;
+        
+        return Tag("div", {
+          role: "tabpanel",
+          class: "tab-content bg-base-100 border-base-300 p-6",
+          style: () => isVisible() ? "display: block" : "display: none"
+        }, [
+          () => typeof it.content === "function" ? it.content() : it.content
         ]);
-    },
+      });
+    })
   ]);
 };

src/components/Timeline.js

@@ -1,52 +1,59 @@
-import { $html, $for } from "sigpro";
-import { val } from "../core/utils.js";
-import { iconInfo, iconSuccess, iconWarning, iconError } from "../core/icons.js";
+// components/Timeline.js
+// import { Tag, For } from "../sigpro.js";
+import { val, ui, getIcon } from "../core/utils.js";
 
-/** TIMELINE */
+/**
+ * Timeline component
+ * 
+ * daisyUI classes used:
+ * - timeline, timeline-vertical, timeline-horizontal, timeline-compact
+ * - timeline-start, timeline-middle, timeline-end, timeline-box
+ * - flex-1, shadow-sm
+ * - hr, bg-primary
+ */
 export const Timeline = (props) => {
-  const { items = [], vertical = true, compact = false, ...rest } = props;
+  const { class: className, items = [], vertical = true, compact = false, ...rest } = props;
 
-  const icons = {
-    info: iconInfo,
-    success: iconSuccess,
-    warning: iconWarning,
-    error: iconError,
+  const iconMap = {
+    info: "icon-[lucide--info]",
+    success: "icon-[lucide--check-circle]",
+    warning: "icon-[lucide--alert-triangle]",
+    error: "icon-[lucide--alert-circle]",
   };
 
-  return $html(
+  return Tag(
     "ul",
     {
       ...rest,
-      class: () =>
-        `timeline ${val(vertical) ? "timeline-vertical" : "timeline-horizontal"} ${
-          val(compact) ? "timeline-compact" : ""
-        } ${props.class || ""}`,
+      class: () => ui(
+        `timeline ${val(vertical) ? "timeline-vertical" : "timeline-horizontal"} ${val(compact) ? "timeline-compact" : ""}`, 
+        className
+      ),
     },
-    [
-      $for(
-        items,
-        (item, i) => {
+    () => {
+      const list = (typeof items === "function" ? items() : items) || [];
+      
+      return list.map((item, i) => {
         const isFirst = i === 0;
-          const isLast = i === val(items).length - 1;
+        const isLast = i === list.length - 1;
         const itemType = item.type || "success";
+        
+        const isCompleted = () => val(item.completed);
+        // Nueva lógica: La línea de entrada se pinta si el ANTERIOR estaba completado
+        const prevCompleted = () => i > 0 && val(list[i - 1].completed);
+
         const renderSlot = (content) => (typeof content === "function" ? content() : content);
 
-          return $html("li", { class: "flex-1" }, [
-            !isFirst ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null,
-            $html("div", { class: "timeline-start" }, [renderSlot(item.title)]),
-            $html("div", { class: "timeline-middle" }, [
-              $html("img", {
-                src: icons[itemType] || item.icon || icons.success,
-                class: "w-4 h-4 object-contain mx-1",
-                alt: itemType,
-              }),
+        return Tag("li", { class: "flex-1" }, [
+          !isFirst ? Tag("hr", { class: () => prevCompleted() ? "bg-primary" : "" }) : null,
+          Tag("div", { class: "timeline-start" }, [() => renderSlot(item.title)]),
+          Tag("div", { class: "timeline-middle" }, [
+            () => item.icon ? getIcon(item.icon) : getIcon(iconMap[itemType] || iconMap.success)
           ]),
-            $html("div", { class: "timeline-end timeline-box shadow-sm" }, [renderSlot(item.detail)]),
-            !isLast ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null,
+          Tag("div", { class: "timeline-end timeline-box shadow-sm" }, [() => renderSlot(item.detail)]),
+          !isLast ? Tag("hr", { class: () => isCompleted() ? "bg-primary" : "" }) : null,
         ]);
-        },
-        (item, i) => item.id || i,
-      ),
-    ],
+      });
+    }
   );
 };

src/components/Toast.js

@@ -1,20 +1,30 @@
-import { $html, $mount } from "sigpro";
+// components/Toast.js
+// import { Tag, Mount } from "../sigpro.js";
+import { getIcon } from "../core/utils.js";
 import { Button } from "./Button.js";
 
-/** TOAST (Imperative Function) */
+/**
+ * Toast (Imperative Function)
+ * 
+ * daisyUI classes used:
+ * - alert, alert-soft, alert-info, alert-success, alert-warning, alert-error
+ * - shadow-lg, transition-all, duration-300
+ * - translate-x-10, opacity-0, pointer-events-auto
+ * - fixed, top-0, right-0, z-[9999], p-4, flex, flex-col, gap-2
+ * - btn, btn-xs, btn-circle, btn-ghost
+ */
 export const Toast = (message, type = "alert-success", duration = 3500) => {
   let container = document.getElementById("sigpro-toast-container");
   
-  // Crear el contenedor global si no existe
   if (!container) {
-    container = $html("div", {
+    container = Tag("div", {
       id: "sigpro-toast-container",
       class: "fixed top-0 right-0 z-[9999] p-4 flex flex-col gap-2 pointer-events-none",
     });
     document.body.appendChild(container);
   }
 
-  const toastHost = $html("div", { style: "display: contents" });
+  const toastHost = Tag("div", { style: "display: contents" });
   container.appendChild(toastHost);
 
   let timeoutId;
@@ -27,7 +37,6 @@ export const Toast = (message, type = "alert-success", duration = 3500) => {
       setTimeout(() => {
         instance.destroy();
         toastHost.remove();
-        // Limpiar el contenedor si ya no hay más toasts
         if (!container.hasChildNodes()) container.remove();
       }, 300);
     } else {
@@ -37,23 +46,27 @@ export const Toast = (message, type = "alert-success", duration = 3500) => {
   };
 
   const ToastComponent = () => {
-    const el = $html(
+    const closeIcon = getIcon("icon-[lucide--x]");
+    
+    const el = Tag(
       "div",
       {
         class: `alert alert-soft ${type} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto`,
       },
       [
-        $html("span", {}, [typeof message === "function" ? message() : message]), 
-        Button({ class: "btn-xs btn-circle btn-ghost", onclick: close }, "✕")
+        Tag("span", {}, [typeof message === "function" ? message() : message]), 
+        Button({ 
+          class: "btn-xs btn-circle btn-ghost", 
+          onclick: close 
+        }, closeIcon)
       ],
     );
 
-    // Animación de entrada
     requestAnimationFrame(() => el.classList.remove("translate-x-10", "opacity-0"));
     return el;
   };
 
-  const instance = $mount(ToastComponent, toastHost);
+  const instance = Mount(ToastComponent, toastHost);
 
   if (duration > 0) {
     timeoutId = setTimeout(close, duration);

src/components/Tooltip.js

@@ -1,6 +1,19 @@
-import { $html } from "sigpro";
-import { joinClass } from "../core/utils.js";
+// components/Tooltip.js
+// import { Tag } from "../sigpro.js";
+import { ui } from "../core/utils.js";
 
-/** TOOLTIP */
+/**
+ * Tooltip component
+ * 
+ * daisyUI classes used:
+ * - tooltip, tooltip-top, tooltip-bottom, tooltip-left, tooltip-right
+ * - tooltip-primary, tooltip-secondary, tooltip-accent
+ * - tooltip-info, tooltip-success, tooltip-warning, tooltip-error
+ * - tooltip-open
+ */
 export const Tooltip = (props, children) =>
-  $html("div", { ...props, class: joinClass("tooltip", props.class), "data-tip": props.tip }, children);
+  Tag("div", {
+    ...props,
+    class: () => ui('tooltip w-full', props.class),
+    "data-tip": props.tip,
+  }, children);

src/components/index.js

@@ -13,8 +13,8 @@ import * as FieldsetModule from './Fieldset.js';
 import * as FileinputModule from './Fileinput.js';
 import * as IndicatorModule from './Indicator.js';
 import * as InputModule from './Input.js';
+import * as LabelModule from './Label.js';
 import * as ListModule from './List.js';
-import * as LoadingModule from './Loading.js';
 import * as MenuModule from './Menu.js';
 import * as ModalModule from './Modal.js';
 import * as NavbarModule from './Navbar.js';
@@ -46,8 +46,8 @@ export * from './Fieldset.js';
 export * from './Fileinput.js';
 export * from './Indicator.js';
 export * from './Input.js';
+export * from './Label.js';
 export * from './List.js';
-export * from './Loading.js';
 export * from './Menu.js';
 export * from './Modal.js';
 export * from './Navbar.js';
@@ -80,8 +80,8 @@ const Components = {
   ...FileinputModule,
   ...IndicatorModule,
   ...InputModule,
+  ...LabelModule,
   ...ListModule,
-  ...LoadingModule,
   ...MenuModule,
   ...ModalModule,
   ...NavbarModule,

src/core/i18n.js

@@ -1,4 +1,4 @@
-import { $ } from "sigpro";
+// import { $ } from "../sigpro.js";
 
 export const i18n = {
   es: {

src/core/icons.js

@@ -1,17 +0,0 @@
-export const iconShow = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADjSURBVDiN3dJNSgNBEAXgz4DZeAAVJ9tko2St3kaIFxAVt4KZeAD1GKKi7vQSydI/yHgALxAXU02GxniAFBR0v1ev+3V1sZSxjxtM8BM5wTX2/hNu4gFvOMI21iJ3cIwP3GMjF/dQ4RyraOMS34GPAmvjIrBeEnfwjoPGgSM8ooh8QtngB6Ep4BWnmaMqkY1LqqzmDC8tzNDK3/RHzLL9SloUYWfQIMuw3Yl8xrDBH6qbvZWALqbqBqVmlWF7GuKEDwPr5hbXcYdPnKBv/o39wL5wG7ULY1c9NGPzQRrjKrhli1/02zEjWyWMBwAAAABJRU5ErkJggg==";
-export const iconHide = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEDSURBVDiN1dK/K8VhFAbwD+VLGSxKcu9guSQ/Zils/gNkuaX4BxRZDTdklYU/QAaDlEVGGwu2Kz/uVbKJzWDwfuv1+jHz1Km3c85znuf0Hv4jxnD2W8MItnCJ5xAX2MQcHsOQL+jEAapYQD9aQwxiDy+B3JKSe1DHCpqQYQ0PeMJOpDyAmyAAirjGbDRwFYcoYCZSzjGP+8B1gqXEUT2QxyPlqaRnGceNeENzUswwil1MBocbSU9DCAXUUI6K25HtIo5QSVaooitP9OEO65iIbE+HXSvBVRbeNZQSR9pxGil3o83HNw5hEbfYR0dKFki5ci+u8OrzIQ1/R8xx7ocL+9t4B0HPOVXjoptxAAAAAElFTkSuQmCC";
-export const iconClose = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABcSURBVDiN3dIxDoAwCIXhL563g3bSm+hlq4O6GFNbO+k/EV54QIDfsSBk9IA5ZxCQEG+0eGi5BqDHivEhV2xSXXwy2EdOR3xLV+ta0/26wvSm+KTYpPmMzY/0QTZeZR2f+FxhRQAAAABJRU5ErkJggg==";
-export const iconCalendar = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACLSURBVDiN7dO9CQJBFEXhb38K0FwQrMNEVpuwB0NjrcYabECsQk0sQ1mTF4zIjrgmBh54MMx998AEwzOrmC5e8gJjbDHCJO7PHYI0v2JT4Ig9DljGwq5DkOZTLOCOMoIhBpknpHmFWx3ldaaUo6oTc2/ab7rl+508f8GvCC5oenTn4tM1cWg/nBNmD4fBH/Kfvt2TAAAAAElFTkSuQmCC";
-export const iconLock = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAWQAAAFkBqp2phgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACQSURBVDiN7dKxDcJQDATQJ0YgXQQ1bAgDEIZBETPQwjakIjRQ8CMSyR8SiZKTrvHZd/r+JsYSNZrEI1ZR4ywzfElcJ55xwiITOECNTVDf4jDGoEEZ1Etcxxg8pmjRDiahb7BH20uKKPVUkVmL+YjQArdI+PT2bO9Pd/A34O71Rd9QeN/LAFUSckfUscWuG3oCgP8nrDH6T5AAAAAASUVORK5CYII=";
-export const iconAbc = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADFSURBVDiN7dCxSoIBFAXgr1BbgmgSB5ubxKAHaAkcgnBpySVaDET3WhzcpQfoHZojawgX0ZZcfAWDSDdBoeUKP/8ojZ7tnnPv4dzDFv+KZzwl5jf84B354C4wwjdeUV4vl7DCEsXgxmhigDpOMcMVjoKr7cTyI/ZxiE90wmCB4zi+RRatZOxd7OEavxHtBmvjIV5wH2a59N8ZXIZQisMCzkL/wgGq6EYffXzgHHNo4y5h+oBGlLjEBJVUiVP0cJJOtMUG+APtfyYzbH7eVgAAAABJRU5ErkJggg==";
-export const icon123 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAB2AAAAdgFOeyYIAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAMxJREFUOI3t0bFKwlEUBvBfmmBEr1APIDZJ9AJJQyAIvkGP0C4uQruza+DUmuIc9AC9gBG4Nmpkw/8IB3Vw1w8u95zvnvPde77LEeUUV9HAF67QRA2nmMf5A+o4x3cWOsMYy8j7WMX6jaYbLBL/mAWe8RcHm1ihs8G94gVKQQzwlAouMcQo8p/Y28HdYpYFZmsi0MVdxD1MdrxsC500wijdvgtbI1AYtDbxMwkuFAZmE1uYwkkSqOIaHyHcxEU0vUXNPSqKr37fZ6xDwD9DPS0OyHjQHQAAAABJRU5ErkJggg==";
-export const iconMail = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC4SURBVDiNxdIxagJRFIXhLzLFBNJYaJslSEylWOhq3IorMGQ16SyjYCFiZWU5pTaDFvOUyTAZ8RHID69555577oXLf/OEGaY4R3g/4IhORHg3eOXYYvSAeRQ8OWQYYoNPvDQYnxUr7zBB1grCAv3QbIlxjXmAb7Txhq+rkFUKq9NUU8vcJiizwDtOWGEdmvTKqT+61H0GXsP7jSxpEGF/R1e3wkO0FBeVRnhTSBTneBB3yvOI4D/mAnvrIwKM5s4AAAAAAElFTkSuQmCC";
-export const iconInfo = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAASVJREFUOI190r0uhFEQBuBnVxaF2PUTCkFchV0SV6BQi0rEbShFlCqNktJP0Iqf3i3YVSlXVEQozojP8e2+ySSTed+ZMzNnKnpjCFPhv+C9j/YPlnCBV3TCujhHq19iFftoYxOjBa4esTb2QvsP+7jFWJ9HxnEXRf5gGU9Z8gKucBl+sUgHTahE8AJnOCoIT/AcmhmsF7gtrGINBqWFFWcmLXMUhzjIuEbk1GA+2i/DNh4wUsK1MVfFV2GUHJO4xlsPHr8j1Eu44bAcDek2agP4lDZaxWMm3MEKbrL4hjT/8U+gJc00nglnw4qYkL5xMW9rTzqSvEiefI/dMrIaRTrSPzcKXCNinUguPeUfNKWj6kqH9Bz+aVnbvb6PtKTp8F/wUSb6Bu5YN5n7ff0kAAAAAElFTkSuQmCC";
-export const iconSuccess = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAQtJREFUOI2F0jFOAlEQBuAPImoFqyTa6TEEbfUihruYDYfwCAg3UDsTY20na0VjgqUWWuxgHsuy/skk82bmn/fPm9eyHXs4Cn+Br4baNZxjhk8UYUtMMWwitjHGHNfoJrlexObIo3YDY9zjoOGSQzxEkzVc4O0fctqkwCANzkJiE9LmI9ytDrvKB+tWGQnylIAsOB04VcrfdluO55CeYo6THfygVUne4jX8S1zho1LTDu7fCL2KxCe8oF8zUqb8G51VYGrzEffD6jDCJA0MY6bqnHXoK9d4Vk3kyk/S1KSPR9zUJdvRpAiJWZLLIlYEufYrrzBQ7nyJ97ClcuYN2dX1pejgOPwFvuuKfgHXiDR+HL1j1AAAAABJRU5ErkJggg==";
-export const iconError = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAARZJREFUOI2V0j1KQ1EQBeDPp4lWRiMoKVyAK9AoiLgJGytxD9oJNhKyDyvBnw2IugC3YGKVRk1KRbR48yC5vjzwwIHL3DPnzp2ZGdMxj9U4D/BZoZ3ANu4wQj84xC3aVYkZuujhCItjd42I9dAJ7R908YDlikeaeAyTCezgpST5IJia9LFVlA0nOMd7It4IjuMttKeFQR17uKooPcUV9lHL0ArX0T8MPqLa1hx+MDNFWDX7LHLV4/VGiWghmGJJvhu1WXzLO5rhORGeYRf3SfwQNVwWgbZ8SZqJcD04jhX5GDfTsjryJUlN0uQnXJRdZmHSx7H8nwWWItaP5NJVLrCFG3mTXoNDXJeVPW185E1ai/MAX2WiX9S3NSPYbj+uAAAAAElFTkSuQmCC";
-export const iconWarning = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAARJJREFUOI2l0r8uRFEQBvAfu9glwUYiUaxHUEl0VDpKeq+wpZBINAqFRHgTKg0tCSqVhmKDEM1u/Esodm725rq7iC+ZzMnM982ZmXP4JwpdchWsYBrXeMkj9XQQV3GEi+BMYR63v+mqiDPUUrEaTiP3I1ZxEOcySnE+jFxXVPEQPimWiCYzOdCbKbCFPe1Z+8PgBvvBycVMCIdSsY2wBEPBmcnrYBtraKRib2EJGljHjswLLuI8Z6SS9hLTl15iIR08wZLv2AzLYjk0YATP8n9lVWbrgUJohosYxCdG8Zghdvp5ldCUi6hrPd0VjvGEVzTxEYLkogGMYQ67uEtvcgKzGA8y9IV/D9/Evdb89Q7d/Q1fB8U0mpUmzV0AAAAASUVORK5CYII=";
-export const iconLeft = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABfSURBVDiNY2AY8oCZSHWxDAwMEgwMDHfJsaSAgYHhH9QQsjT/Z2BgKKe75gQGiLMLCSlkwiHOSI6t6ADmhYoBN6SIARIeidgkiUlIxxkYGB4xMDB8YmBguE6JSwYpAACvLRHTKwPjZgAAAABJRU5ErkJggg==";
-export const iconRight = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABNSURBVDiN3dAxCoAwFATRh3fU2oAHiDbi5Y1F2jT+gKLbzyy7/DYjUo8g4cTWI8koOF6XrOqc5ifDDVGJthfsj8OLujtHYJgwR+GP5QKMxA9/SolDQgAAAABJRU5ErkJggg==";
-export const iconLLeft = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABlSURBVDiN3ZLBDUBAEEUfmtCchA5woUMlOO1FCQrAwbqwf8eFhHd7mfzJn2Tg82TGvABywAmPUgOLD4XcDK9AJ/y5cOlrNsIvpCdPDL/FUbkX/t6Slv3+SjgQf6QBmIAZGAP+FzZJViOd89x8pAAAAABJRU5ErkJggg==";
-export const iconRRight = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABmSURBVDiN3dGxCoAgEMbxfz1dL1BTREJzmUv08trgDYcg6VCD3/YD7zvkoLmMgFEegLmmwAAecOJVvNeUWCAAt7IHjt9LThkyiRf9qC8oCom70u0BuDL+bngj/tNm/JqJePucW8wDvGYdzT0nMUkAAAAASUVORK5CYII=";
-export const iconUpload = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADNSURBVDiNndOxTgJRFIThz41ZDMFKqH0DLSRSq4lQ0RifUcMzUJlYQKjtLcHVSimBggPRNSzs/sk0kzPnTHEvxZyHKnGJD3yhXSWcYRnKwvvH0Y7wEG/4wQI1XOEek6LLF3FtiDoGoXp4WcxsSXILHjFCH/Nf/jy8ER6KGuTZNNhJvkFpEpygUyHbRi1BFy8VFryilyANlSVFerxn6N36IRVyG0PNEtdbkbmBU8zwdOCSJp4xRWNj3sWS5YGaRvM/f6GBa5ztafCJMb5hBQQ/MMwXLnnZAAAAAElFTkSuQmCC";

src/core/utils.js

@@ -1,5 +1,36 @@
+// core/utils.js
+// import { Tag } from "../sigpro.js";
+
 export const val = t => typeof t === "function" ? t() : t;
 
-export const joinClass = (t, l) => typeof l === "function" 
-  ? () => `${t} ${l() || ""}`.trim() 
-  : `${t} ${l || ""}`.trim();
+export const ui = (baseClass, additionalClassOrFn) =>
+  typeof additionalClassOrFn === "function"
+    ? () => `${baseClass} ${additionalClassOrFn() || ""}`.trim()
+    : `${baseClass} ${additionalClassOrFn || ""}`.trim();
+
+export const getIcon = (icon) => {
+  if (!icon) return null;
+  
+  if (typeof icon === 'function') {
+    return Tag("span", { class: "mr-1" }, icon());
+  }
+  
+  if (typeof icon === 'object') {
+    return Tag("span", { class: "mr-1" }, icon);
+  }
+  
+  if (typeof icon === 'string') {
+    const parts = icon.trim().split(/\s+/);
+    const hasRight = parts[parts.length - 1] === 'right';
+    const iconClass = hasRight ? parts.slice(0, -1).join(' ') : icon;
+    const spacing = hasRight ? 'ml-1' : 'mr-1';
+    
+    if (iconClass && !iconClass.startsWith('icon-[') && !iconClass.includes('--')) {
+      return Tag("span", { class: spacing }, iconClass);
+    }
+    
+    return Tag("span", { class: `${iconClass} ${spacing}`.trim() });
+  }
+  
+  return null;
+};

src/css/index.js

@@ -0,0 +1,4 @@
+// css/index.js
+import './sigpro.css';
+
+export default { version: '1.0.0' };

src/css/sigpro.css

@@ -0,0 +1,112 @@
+@import "tailwindcss";
+@plugin "daisyui";
+@plugin "@iconify/tailwind4";
+
+/* join join-vertical lg:join-horizontal divider divider-horizontal validator validator-hint glass */
+
+@plugin "daisyui/theme" {
+  name: "light";
+  default: true;
+  prefersdark: false;
+  color-scheme: "light";
+  --color-base-100: oklch(100% 0 0);
+  --color-base-200: oklch(98% 0 0);
+  --color-base-300: oklch(92% 0 0);
+  --color-base-content: oklch(25% 0.006 285);
+  --color-primary: oklch(25% 0.006 285);
+  --color-primary-content: oklch(98% 0 0);
+  --color-secondary: oklch(55% 0.046 257.417);
+  --color-secondary-content: oklch(98% 0 0);
+  --color-accent: oklch(96% 0 0);
+  --color-accent-content: oklch(25% 0.006 285);
+  --color-neutral: oklch(14% 0.005 285.823);
+  --color-neutral-content: oklch(92% 0.004 286.32);
+  --color-info: oklch(74% 0.16 232);
+  --color-success: oklch(62% 0.17 163);
+  --color-warning: oklch(82% 0.18 84);
+  --color-error: oklch(60% 0.25 27);
+  --radius-selector: 0.5rem;
+  --radius-field: 0.4rem;
+  --radius-box: 0.5rem;
+  --border: 1px;
+}
+
+@plugin "daisyui/theme" {
+  name: "dark";
+  default: false;
+  prefersdark: true;
+  color-scheme: "dark";
+  --color-base-100: oklch(15% 0.005 285.823);
+  --color-base-200: oklch(20% 0.005 285.823);
+  --color-base-300: oklch(30% 0.005 285.823);
+  --color-base-content: oklch(92% 0.004 286.32);
+  --color-primary: oklch(98% 0 0);
+  --color-primary-content: oklch(15% 0 0);
+  --color-secondary: oklch(65% 0.046 257.417);
+  --color-secondary-content: oklch(15% 0.005 285.823);
+  --color-accent: oklch(25% 0 0);
+  --color-accent-content: oklch(98% 0 0);
+  --color-neutral: oklch(92% 0.004 286.32);
+  --color-neutral-content: oklch(14% 0.005 285.823);
+  --color-info: oklch(70% 0.1 230);
+  --color-success: oklch(65% 0.15 160);
+  --color-warning: oklch(85% 0.15 90);
+  --color-error: oklch(55% 0.2 27);
+  --radius-selector: 0.5rem;
+  --radius-field: 0.4rem;
+  --radius-box: 0.5rem;
+  --border: 1px;
+}
+
+/* Agrupamos los selectores normales de CSS */
+.input, .select, .textarea {
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  &:focus, 
+  &:focus-within {
+    outline: 2px solid transparent !important;
+    outline-offset: 2px !important;
+  }
+
+  &:hover:not(:focus) {
+    background-color: oklch(from var(--color-base-100) calc(l - 0.03) c h);
+  }
+
+  &:focus {
+    --focus-color: var(--color-primary);
+
+    /* Selectores que detectan la variante de color sin importar el prefijo */
+    &[class*="-secondary"] { --focus-color: var(--color-secondary); }
+    &[class*="-accent"]    { --focus-color: var(--color-accent); }
+    &[class*="-neutral"]   { --focus-color: var(--color-neutral); }
+    &[class*="-ghost"]     { --focus-color: var(--color-base-content); }
+    &[class*="-info"]      { --focus-color: var(--color-info); }
+    &[class*="-success"]   { --focus-color: var(--color-success); }
+    &[class*="-warning"]   { --focus-color: var(--color-warning); }
+    &[class*="-error"]     { --focus-color: var(--color-error); }
+
+    background-color: oklch(from var(--focus-color) l c h / 0.05);
+    border-color: var(--focus-color);
+    box-shadow: 0 0 0 4px oklch(from var(--focus-color) l c h / 0.25);
+    
+    &[class*="-ghost"] {
+      border-width: 1px;
+    }
+  }
+}
+
+.floating-label span {
+  color: oklch(30% 0.01 260);  /* Gris más oscuro (30% es más oscuro que 45%) */
+  font-size: 1.2rem;             /* text-base: más grande que 0.875rem */
+  transition: all 0.2s ease;
+}
+
+.floating-label:focus-within span {
+  color: oklch(25% 0.02 260);  /* Aún más oscuro al enfocar */
+  font-size: 1.2rem;             /* Mantiene el mismo tamaño */
+}
+
+.floating-label:has(input:not(:placeholder-shown)) span {
+  color: oklch(28% 0.01 260);  /* Gris oscuro cuando tiene valor */
+  font-size: 1.2rem;             /* Mantiene el mismo tamaño */
+}

src/sigpro.js

@@ -0,0 +1,440 @@
+let activeEffect = null;
+let currentOwner = null;
+const effectQueue = new Set();
+let isFlushing = false;
+const MOUNTED_NODES = new WeakMap();
+
+const doc = document;
+const isArr = Array.isArray;
+const assign = Object.assign;
+const createEl = (t) => doc.createElement(t);
+const createText = (t) => doc.createTextNode(String(t ?? ""));
+const isFunc = (f) => typeof f === "function";
+const isObj = (o) => typeof o === "object" && o !== null;
+
+const runWithContext = (effect, callback) => {
+  const previousEffect = activeEffect;
+  activeEffect = effect;
+  try { return callback(); }
+  finally { activeEffect = previousEffect; }
+};
+
+const cleanupNode = (node) => {
+  if (node._cleanups) {
+    node._cleanups.forEach((dispose) => dispose());
+    node._cleanups.clear();
+  }
+  node.childNodes?.forEach(cleanupNode);
+};
+
+const flushEffects = () => {
+  if (isFlushing) return;
+  isFlushing = true;
+  while (effectQueue.size > 0) {
+    const sortedEffects = Array.from(effectQueue).sort((a, b) => (a.depth || 0) - (b.depth || 0));
+    effectQueue.clear();
+    for (const effect of sortedEffects) {
+      if (!effect._deleted) effect();
+    }
+  }
+  isFlushing = false;
+};
+
+const trackSubscription = (subscribers) => {
+  if (activeEffect && !activeEffect._deleted) {
+    subscribers.add(activeEffect);
+    activeEffect._deps.add(subscribers);
+  }
+};
+
+const triggerUpdate = (subscribers) => {
+  subscribers.forEach((effect) => {
+    if (effect === activeEffect || effect._deleted) return;
+    if (effect._isComputed) {
+      effect.markDirty();
+      if (effect._subs) triggerUpdate(effect._subs);
+    } else {
+      effectQueue.add(effect);
+    }
+  });
+  if (!isFlushing) queueMicrotask(flushEffects);
+};
+
+const Render = (renderFn) => {
+  const cleanups = new Set();
+  const previousOwner = currentOwner;
+  const container = createEl("div");
+  container.style.display = "contents";
+  currentOwner = { cleanups };
+
+  const processResult = (result) => {
+    if (!result) return;
+    if (result._isRuntime) {
+      cleanups.add(result.destroy);
+      container.appendChild(result.container);
+    } else if (isArr(result)) {
+      result.forEach(processResult);
+    } else {
+      container.appendChild(result instanceof Node ? result : createText(result));
+    }
+  };
+
+  try {
+    processResult(renderFn({ onCleanup: (fn) => cleanups.add(fn) }));
+  } finally { currentOwner = previousOwner; }
+
+  return {
+    _isRuntime: true,
+    container,
+    destroy: () => {
+      cleanups.forEach((fn) => fn());
+      cleanupNode(container);
+      container.remove();
+    },
+  };
+};
+
+const $ = (initialValue, storageKey = null) => {
+  const subscribers = new Set();
+
+  if (isFunc(initialValue)) {
+    let cachedValue, isDirty = true;
+    const effect = () => {
+      if (effect._deleted) return;
+      effect._deps.forEach((dep) => dep.delete(effect));
+      effect._deps.clear();
+
+      runWithContext(effect, () => {
+        const newValue = initialValue();
+        if (!Object.is(cachedValue, newValue) || isDirty) {
+          cachedValue = newValue;
+          isDirty = false;
+          triggerUpdate(subscribers);
+        }
+      });
+    };
+
+    assign(effect, {
+      _deps: new Set(),
+      _isComputed: true,
+      _subs: subscribers,
+      _deleted: false,
+      markDirty: () => (isDirty = true),
+      stop: () => {
+        effect._deleted = true;
+        effect._deps.forEach((dep) => dep.delete(effect));
+        subscribers.clear();
+      }
+    });
+
+    if (currentOwner) currentOwner.cleanups.add(effect.stop);
+    return () => { if (isDirty) effect(); trackSubscription(subscribers); return cachedValue; };
+  }
+
+  let value = initialValue;
+  if (storageKey) {
+    try {
+      const saved = localStorage.getItem(storageKey);
+      if (saved !== null) value = JSON.parse(saved);
+    } catch (e) { console.warn("SigPro Storage Lock", e); }
+  }
+
+  return (...args) => {
+    if (args.length) {
+      const nextValue = isFunc(args[0]) ? args[0](value) : args[0];
+      if (!Object.is(value, nextValue)) {
+        value = nextValue;
+        if (storageKey) localStorage.setItem(storageKey, JSON.stringify(value));
+        triggerUpdate(subscribers);
+      }
+    }
+    trackSubscription(subscribers);
+    return value;
+  };
+};
+
+const $$ = (object, cache = new WeakMap()) => {
+  if (!isObj(object)) return object;
+  if (cache.has(object)) return cache.get(object);
+
+  const keySubscribers = {};
+  const proxy = new Proxy(object, {
+    get(target, key) {
+      if (activeEffect) trackSubscription(keySubscribers[key] ??= new Set());
+      const value = Reflect.get(target, key);
+      return isObj(value) ? $$(value, cache) : value;
+    },
+    set(target, key, value) {
+      if (Object.is(target[key], value)) return true;
+      const success = Reflect.set(target, key, value);
+      if (keySubscribers[key]) triggerUpdate(keySubscribers[key]);
+      return success;
+    }
+  });
+
+  cache.set(object, proxy);
+  return proxy;
+};
+
+const Watch = (target, callbackFn) => {
+  const isExplicit = isArr(target);
+  const callback = isExplicit ? callbackFn : target;
+  if (!isFunc(callback)) return () => { };
+
+  const owner = currentOwner;
+  const runner = () => {
+    if (runner._deleted) return;
+    runner._deps.forEach((dep) => dep.delete(runner));
+    runner._deps.clear();
+    runner._cleanups.forEach((cleanup) => cleanup());
+    runner._cleanups.clear();
+
+    const previousOwner = currentOwner;
+    runner.depth = activeEffect ? activeEffect.depth + 1 : 0;
+
+    runWithContext(runner, () => {
+      currentOwner = { cleanups: runner._cleanups };
+      if (isExplicit) {
+        runWithContext(null, callback);
+        target.forEach((dep) => isFunc(dep) && dep());
+      } else {
+        callback();
+      }
+      currentOwner = previousOwner;
+    });
+  };
+
+  assign(runner, {
+    _deps: new Set(),
+    _cleanups: new Set(),
+    _deleted: false,
+    stop: () => {
+      if (runner._deleted) return;
+      runner._deleted = true;
+      effectQueue.delete(runner);
+      runner._deps.forEach((dep) => dep.delete(runner));
+      runner._cleanups.forEach((cleanup) => cleanup());
+      if (owner) owner.cleanups.delete(runner.stop);
+    }
+  });
+
+  if (owner) owner.cleanups.add(runner.stop);
+  runner();
+  return runner.stop;
+};
+
+const Tag = (tag, props = {}, children = []) => {
+  if (props instanceof Node || isArr(props) || !isObj(props)) {
+    children = props; props = {};
+  }
+
+  const isSVG = /^(svg|path|circle|rect|line|polyline|polygon|g|defs|text|tspan|use)$/.test(tag);
+  const element = isSVG
+    ? doc.createElementNS("http://www.w3.org/2000/svg", tag)
+    : createEl(tag);
+
+  element._cleanups = new Set();
+  element.onUnmount = (fn) => element._cleanups.add(fn);
+  const booleanAttributes = ["disabled", "checked", "required", "readonly", "selected", "multiple", "autofocus"];
+
+  const updateAttribute = (name, value) => {
+    const sanitized = (name === 'src' || name === 'href') && String(value).toLowerCase().includes('javascript:') ? '#' : value;
+    if (booleanAttributes.includes(name)) {
+      element[name] = !!sanitized;
+      sanitized ? element.setAttribute(name, "") : element.removeAttribute(name);
+    } else {
+      sanitized == null ? element.removeAttribute(name) : element.setAttribute(name, sanitized);
+    }
+  };
+
+  for (let [key, value] of Object.entries(props)) {
+    if (key === "ref") { (isFunc(value) ? value(element) : (value.current = element)); continue; }
+
+    const isSignal = isFunc(value);
+    if (key.startsWith("on")) {
+      const eventName = key.slice(2).toLowerCase().split(".")[0];
+      element.addEventListener(eventName, value);
+      element._cleanups.add(() => element.removeEventListener(eventName, value));
+    } else if (isSignal) {
+      element._cleanups.add(Watch(() => {
+        const currentVal = value();
+        key === "class" ? (element.className = currentVal || "") : updateAttribute(key, currentVal);
+      }));
+      if (["INPUT", "TEXTAREA", "SELECT"].includes(element.tagName) && (key === "value" || key === "checked")) {
+        const event = key === "checked" ? "change" : "input";
+        const handler = (e) => value(e.target[key]);
+        element.addEventListener(event, handler);
+        element._cleanups.add(() => element.removeEventListener(event, handler));
+      }
+    } else {
+      updateAttribute(key, value);
+    }
+  }
+
+  const appendChildNode = (child) => {
+    if (isArr(child)) return child.forEach(appendChildNode);
+    if (isFunc(child)) {
+      const marker = createText("");
+      element.appendChild(marker);
+      let currentNodes = [];
+      element._cleanups.add(Watch(() => {
+        const result = child();
+        const nextNodes = (isArr(result) ? result : [result]).map((node) =>
+          node?._isRuntime ? node.container : node instanceof Node ? node : createText(node)
+        );
+        currentNodes.forEach((node) => { cleanupNode(node); node.remove(); });
+        nextNodes.forEach((node) => marker.parentNode?.insertBefore(node, marker));
+        currentNodes = nextNodes;
+      }));
+    } else {
+      element.appendChild(child instanceof Node ? child : createText(child));
+    }
+  };
+
+  appendChildNode(children);
+  return element;
+};
+
+const If = (condition, thenVal, otherwiseVal = null, transition = null) => {
+  const marker = createText("");
+  const container = Tag("div", { style: "display:contents" }, [marker]);
+  let currentView = null, lastState = null;
+
+  Watch(() => {
+    const state = !!(isFunc(condition) ? condition() : condition);
+    if (state === lastState) return;
+    lastState = state;
+
+    const dispose = () => { if (currentView) currentView.destroy(); currentView = null; };
+
+    if (currentView && !state && transition?.out) {
+      transition.out(currentView.container, dispose);
+    } else {
+      dispose();
+    }
+
+    const branch = state ? thenVal : otherwiseVal;
+    if (branch) {
+      currentView = Render(() => isFunc(branch) ? branch() : branch);
+      container.insertBefore(currentView.container, marker);
+      if (state && transition?.in) transition.in(currentView.container);
+    }
+  });
+
+  return container;
+};
+
+const For = (source, renderFn, keyFn, tag = "div", props = { style: "display:contents" }) => {
+  const marker = createText("");
+  const container = Tag(tag, props, [marker]);
+  let viewCache = new Map();
+
+  Watch(() => {
+    const items = (isFunc(source) ? source() : source) || [];
+    const nextCache = new Map();
+    const order = [];
+
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      const key = keyFn ? keyFn(item, i) : i;
+      let view = viewCache.get(key);
+
+      if (!view) {
+        const result = renderFn(item, i);
+        view = result instanceof Node 
+          ? { container: result, destroy: () => { cleanupNode(result); result.remove(); } } 
+          : Render(() => result);
+      }
+
+      viewCache.delete(key);
+      nextCache.set(key, view);
+      order.push(key);
+    }
+
+    viewCache.forEach(v => v.destroy());
+
+    let anchor = marker;
+    for (let i = order.length - 1; i >= 0; i--) {
+      const view = nextCache.get(order[i]);
+      if (view.container.nextSibling !== anchor) {
+        container.insertBefore(view.container, anchor);
+      }
+      anchor = view.container;
+    }
+    viewCache = nextCache;
+  });
+
+  return container;
+};
+
+const Router = (routes) => {
+  const currentPath = $(window.location.hash.replace(/^#/, "") || "/");
+  window.addEventListener("hashchange", () => currentPath(window.location.hash.replace(/^#/, "") || "/"));
+  const outlet = Tag("div", { class: "router-transition" });
+  let currentView = null;
+
+  Watch([currentPath], async () => {
+    const path = currentPath();
+    const route = routes.find(r => {
+      const routeParts = r.path.split("/").filter(Boolean);
+      const pathParts = path.split("/").filter(Boolean);
+      return routeParts.length === pathParts.length && routeParts.every((part, i) => part.startsWith(":") || part === pathParts[i]);
+    }) || routes.find(r => r.path === "*");
+
+    if (route) {
+      let component = route.component;
+      if (isFunc(component) && component.toString().includes('import')) {
+        component = (await component()).default || (await component());
+      }
+
+      const params = {};
+      route.path.split("/").filter(Boolean).forEach((part, i) => {
+        if (part.startsWith(":")) params[part.slice(1)] = path.split("/").filter(Boolean)[i];
+      });
+
+      if (currentView) currentView.destroy();
+      if (Router.params) Router.params(params);
+
+      currentView = Render(() => {
+        try {
+          return isFunc(component) ? component(params) : component;
+        } catch (e) {
+          return Tag("div", { class: "p-4 text-error" }, "Error loading view");
+        }
+      });
+      outlet.appendChild(currentView.container);
+    }
+  });
+  return outlet;
+};
+
+Router.params = $({});
+Router.to = (path) => (window.location.hash = path.replace(/^#?\/?/, "#/"));
+Router.back = () => window.history.back();
+Router.path = () => window.location.hash.replace(/^#/, "") || "/";
+
+const Mount = (component, target) => {
+  const targetEl = typeof target === "string" ? doc.querySelector(target) : target;
+  if (!targetEl) return;
+  if (MOUNTED_NODES.has(targetEl)) MOUNTED_NODES.get(targetEl).destroy();
+  const instance = Render(isFunc(component) ? component : () => component);
+  targetEl.replaceChildren(instance.container);
+  MOUNTED_NODES.set(targetEl, instance);
+  return instance;
+};
+
+
+const SigPro = { $, $$, Render, Watch, Tag, If, For, Router, Mount };
+
+if (typeof window !== "undefined") {
+  assign(window, SigPro);
+  const tags = `div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer address ul ol li dl dt dd a em strong small i b u mark time sub sup pre code blockquote details summary dialog form label input textarea select button option fieldset legend table thead tbody tfoot tr th td caption img video audio canvas svg iframe picture source progress meter`.split(" ");
+  tags.forEach((tag) => {
+    const helper = tag[0].toUpperCase() + tag.slice(1);
+    if (!(helper in window)) window[helper] = (p, c) => Tag(tag, p, c);
+  });
+  window.SigPro = Object.freeze(SigPro);
+}
+
+export { $, $$, Render, Watch, Tag, If, For, Router, Mount };
+export default SigPro;