BUILD BEFORE CHANGE NEW COMPONENTS WITH UI FUNCTION

2026-04-01 20:53:41 +02:00
parent c9411be600
commit 5a77deb442
55 changed files with 4137 additions and 5469 deletions
--- a/css/index.js
+++ b/css/index.js
@@ -0,0 +1,3 @@
+// css/index.js
+import './daisy.css';
+export default { version: '1.0.0' };
--- a/css/sigpro.css
+++ b/css/sigpro.css
--- a/dist/sigpro-ui.cjs
+++ b/dist/sigpro-ui.cjs
--- a/dist/sigpro-ui.esm.js
+++ b/dist/sigpro-ui.esm.js
--- a/dist/sigpro-ui.js
+++ b/dist/sigpro-ui.js
--- a/dist/sigpro-ui.min.js
+++ b/dist/sigpro-ui.min.js
--- a/dist/sigpro-ui.umd.js
+++ b/dist/sigpro-ui.umd.js
--- a/dist/sigpro-ui.umd.min.js
+++ b/dist/sigpro-ui.umd.min.js
--- a/docs/components/button
+++ b/docs/components/button
@@ -0,0 +1,248 @@
+# Button
+
+Styled button with full DaisyUI support and reactive states.
+
+## Tag
+
+`Button`
+
+## Props
+
+| Prop         | Type                         | Default             | Description                                 |
+| :----------- | :--------------------------- | :------------------ | :------------------------------------------ |
+| `class`      | `string`                     | `''`                | Additional CSS classes (DaisyUI + Tailwind) |
+| `disabled`   | `boolean \| Signal<boolean>` | `false`             | Disabled state                              |
+| `loading`    | `boolean \| Signal<boolean>` | `false`             | Shows loading spinner                       |
+| `badge`      | `string \| Signal<string>`   | `-`                 | Badge text displayed on corner              |
+| `badgeClass` | `string`                     | `'badge-secondary'` | Badge styling classes                       |
+| `tooltip`    | `string \| Signal<string>`   | `-`                 | Tooltip text on hover                       |
+| `icon`       | `string \| VNode \| Signal`  | `-`                 | Icon displayed before text                  |
+| `onclick`    | `function`                   | `-`                 | Click event handler                         |
+| `type`       | `string`                     | `'button'`          | Native button type                          |
+
+## Live Examples
+
+### Basic Button
+
+<div 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 Button({ class: "btn btn-primary" }, "Click Me");
+};
+$mount(BasicDemo, "#demo-basic");
+```
+
+### With Loading 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-loading" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const LoadingDemo = () => {
+  const isSaving = $(false);
+
+  return Button(
+    {
+      class: "btn btn-success",
+      loading: isSaving,
+      onclick: async () => {
+        isSaving(true);
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+        isSaving(false);
+      },
+    },
+    "Save Changes",
+  );
+};
+$mount(LoadingDemo, "#demo-loading");
+```
+
+### With 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-badge" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const BadgeDemo = () => {
+  return Button(
+    {
+      class: "btn btn-outline",
+      badge: "3",
+      badgeClass: "badge-accent",
+    },
+    "Notifications",
+  );
+};
+$mount(BadgeDemo, "#demo-badge");
+```
+
+### 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 items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const TooltipDemo = () => {
+  return Button(
+    {
+      class: "btn btn-ghost",
+      tooltip: "Delete item",
+    },
+    "Delete",
+  );
+};
+$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 items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const DisabledDemo = () => {
+  const isDisabled = $(true);
+
+  return Button(
+    {
+      class: "btn btn-primary",
+      disabled: isDisabled,
+    },
+    "Submit",
+  );
+};
+$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"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
+    Button({ class: "btn btn-primary" }, "Primary"),
+    Button({ class: "btn btn-secondary" }, "Secondary"),
+    Button({ class: "btn btn-accent" }, "Accent"),
+    Button({ class: "btn btn-ghost" }, "Ghost"),
+    Button({ class: "btn btn-outline" }, "Outline"),
+  ]);
+};
+$mount(VariantsDemo, "#demo-variants");
+```
+
+<script>
+  (function() {
+    const initButtonExamples = () => {
+      
+      // 1. Basic Button
+      const basicTarget = document.querySelector('#demo-basic');
+      if (basicTarget && !basicTarget.hasChildNodes()) {
+        const BasicDemo = () => Button({ class: "btn btn-primary" }, "Click Me");
+        $mount(BasicDemo, basicTarget);
+      }
+
+      // 2. Loading State
+      const loadingTarget = document.querySelector('#demo-loading');
+      if (loadingTarget && !loadingTarget.hasChildNodes()) {
+        const LoadingDemo = () => {
+          const isSaving = $(false);
+          return Button({
+            class: "btn btn-success",
+            loading: isSaving,
+            onclick: async () => {
+              isSaving(true);
+              await new Promise(resolve => setTimeout(resolve, 2000));
+              isSaving(false);
+            }
+          }, "Save Changes");
+        };
+        $mount(LoadingDemo, loadingTarget);
+      }
+
+      // 3. Badge
+      const badgeTarget = document.querySelector('#demo-badge');
+      if (badgeTarget && !badgeTarget.hasChildNodes()) {
+        const BadgeDemo = () => Button({
+          class: "btn btn-outline",
+          badge: "3",
+          badgeClass: "badge-accent"
+        }, "Notifications");
+        $mount(BadgeDemo, badgeTarget);
+      }
+
+      // 4. Tooltip
+      const tooltipTarget = document.querySelector('#demo-tooltip');
+      if (tooltipTarget && !tooltipTarget.hasChildNodes()) {
+        const TooltipDemo = () => Button({
+          class: "btn btn-ghost",
+          tooltip: "Delete item"
+        }, "Delete");
+        $mount(TooltipDemo, tooltipTarget);
+      }
+
+      // 5. Disabled State
+      const disabledTarget = document.querySelector('#demo-disabled');
+      if (disabledTarget && !disabledTarget.hasChildNodes()) {
+        const DisabledDemo = () => {
+          const isDisabled = $(true);
+          return Button({
+            class: "btn btn-primary",
+            disabled: isDisabled
+          }, "Submit");
+        };
+        $mount(DisabledDemo, disabledTarget);
+      }
+
+      // 6. All Variants
+      const variantsTarget = document.querySelector('#demo-variants');
+      if (variantsTarget && !variantsTarget.hasChildNodes()) {
+        const VariantsDemo = () => Div({ class: "flex flex-wrap gap-2 justify-center" }, [
+          Button({ class: "btn btn-primary" }, "Primary"),
+          Button({ class: "btn btn-secondary" }, "Secondary"),
+          Button({ class: "btn btn-accent" }, "Accent"),
+          Button({ class: "btn btn-ghost" }, "Ghost"),
+          Button({ class: "btn btn-outline" }, "Outline")
+        ]);
+        $mount(VariantsDemo, variantsTarget);
+      }
+    };
+
+    // Ejecutar la función después de definirla
+    initButtonExamples();
+    
+    // Registrar para navegación en Docsify
+    if (window.$docsify) {
+      window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
+        hook.doneEach(initButtonExamples);
+      });
+    }
+  })();
+</script>
--- a/docs/components/button.md
+++ b/docs/components/button.md
@@ -1,51 +1,68 @@
-# Button
+> # Button(props, children?: string | Signal | [...]): HTMLElement

-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                         | Default             | Description                      |
+| :----------- | :--------------------------- | :------------------ | :------------------------------- |
+| `class`      | `string`                     | `''`                | Additional CSS classes (daisyUI) |
+| `disabled`   | `boolean \| Signal<boolean>` | `false`             | Disabled state                   |
+| `loading`    | `boolean \| Signal<boolean>` | `false`             | Shows loading spinner            |
+| `badge`      | `string \| Signal<string>`   | `-`                 | Badge text displayed on corner   |
+| `badgeClass` | `string`                     | `'badge-secondary'` | Badge styling classes            |
+| `tooltip`    | `string \| Signal<string>`   | `-`                 | Tooltip text on hover            |
+| `icon`       | `string \| VNode \| Signal`  | `-`                 | Icon displayed before text       |
+| `onclick`    | `function`                   | `-`                 | Click event handler              |
+| `type`       | `string`                     | `'button'`          | Native button type               |

-## Live Examples
+## Class Options
+
+For more detailed information about the underlying styling system, visit the daisyUI documentation:
+
+- [daisyUI Button](https://daisyui.com/components/button)
+
+| Class Name      | Category      | Description                           |
+| :-------------- | :------------ | :------------------------------------ |
+| `btn-neutral`   | `Color` 🎨    | Neutral brand color                   |
+| `btn-primary`   | `Color` 🎨    | Primary brand color                   |
+| `btn-secondary` | `Color` 🎨    | Secondary brand color                 |
+| `btn-accent`    | `Color` 🎨    | Accent brand color                    |
+| `btn-info`      | `Color` 🎨    | Informational blue color              |
+| `btn-success`   | `Color` 🎨    | Success green color                   |
+| `btn-warning`   | `Color` 🎨    | Warning yellow color                  |
+| `btn-error`     | `Color` 🎨    | Error red color                       |
+| `btn-xl`        | `Size` 📏     | Extra large scale                     |
+| `btn-lg`        | `Size` 📏     | Large scale                           |
+| `btn-md`        | `Size` 📏     | Medium scale (Default)                |
+| `btn-sm`        | `Size` 📏     | Small scale                           |
+| `btn-xs`        | `Size` 📏     | Extra small scale                     |
+| `btn-outline`   | `Style` ✨    | Transparent with colored border       |
+| `btn-dash`      | `Style` ✨    | Dashed border style                   |
+| `btn-soft`      | `Style` ✨    | Low opacity background color          |
+| `btn-ghost`     | `Style` ✨    | No background, hover effect only      |
+| `btn-link`      | `Style` ✨    | Looks like a text link                |
+| `btn-square`    | `Shape` 📐    | 1:1 aspect ratio                      |
+| `btn-circle`    | `Shape` 📐    | 1:1 aspect ratio with rounded corners |
+| `btn-wide`      | `Shape` 📐    | Extra horizontal padding              |
+| `btn-block`     | `Shape` 📐    | Full width of container               |
+| `btn-active`    | `Behavior` ⚙️ | Forced active/pressed state           |
+| `btn-disabled`  | `Behavior` ⚙️ | Visual and functional disabled state  |

 ### Basic Button

-<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>
+<div id="demo-basic" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>

 ```javascript
 const BasicDemo = () => {
-  return Button({ class: "btn btn-primary" }, "Click Me");
+  return Button({ class: "btn-primary" }, "Click Me");
 };
 $mount(BasicDemo, "#demo-basic");
 ```

 ### With Loading 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-loading" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
-  </div>
-</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 = () => {
@@ -53,7 +70,7 @@ const LoadingDemo = () => {

  return Button(
    {
-      class: "btn btn-success",
+      class: "btn-success",
      loading: isSaving,
      onclick: async () => {
        isSaving(true);
@@ -69,18 +86,13 @@ $mount(LoadingDemo, "#demo-loading");

 ### With 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-badge" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
-  </div>
-</div>
+<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 Button(
    {
-      class: "btn btn-outline",
+      class: "btn-outline",
      badge: "3",
      badgeClass: "badge-accent",
    },
@@ -92,18 +104,13 @@ $mount(BadgeDemo, "#demo-badge");

 ### 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 items-center justify-center"></div>
-  </div>
-</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
 const TooltipDemo = () => {
  return Button(
    {
-      class: "btn btn-ghost",
+      class: "btn-ghost",
      tooltip: "Delete item",
    },
    "Delete",
@@ -114,12 +121,7 @@ $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 items-center justify-center"></div>
-  </div>
-</div>
+<div id="demo-disabled" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>

 ```javascript
 const DisabledDemo = () => {
@@ -127,8 +129,7 @@ const DisabledDemo = () => {

  return Button(
    {
-      class: "btn btn-primary",
-      disabled: isDisabled,
+      class: "btn-primary btn-disabled",
    },
    "Submit",
  );
@@ -138,111 +139,30 @@ $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"></div>
-  </div>
-</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
 const VariantsDemo = () => {
  return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
-    Button({ class: "btn btn-primary" }, "Primary"),
-    Button({ class: "btn btn-secondary" }, "Secondary"),
-    Button({ class: "btn btn-accent" }, "Accent"),
-    Button({ class: "btn btn-ghost" }, "Ghost"),
-    Button({ class: "btn btn-outline" }, "Outline"),
+    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"),
  ]);
 };
 $mount(VariantsDemo, "#demo-variants");
 ```

-<script>
-  (function() {
-    const initButtonExamples = () => {
-      
-      // 1. Basic Button
-      const basicTarget = document.querySelector('#demo-basic');
-      if (basicTarget && !basicTarget.hasChildNodes()) {
-        const BasicDemo = () => Button({ class: "btn btn-primary" }, "Click Me");
-        $mount(BasicDemo, basicTarget);
-      }
+<div id="demo-test" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>

-      // 2. Loading State
-      const loadingTarget = document.querySelector('#demo-loading');
-      if (loadingTarget && !loadingTarget.hasChildNodes()) {
-        const LoadingDemo = () => {
-          const isSaving = $(false);
-          return Button({
-            class: "btn btn-success",
-            loading: isSaving,
-            onclick: async () => {
-              isSaving(true);
-              await new Promise(resolve => setTimeout(resolve, 2000));
-              isSaving(false);
-            }
-          }, "Save Changes");
-        };
-        $mount(LoadingDemo, loadingTarget);
-      }
-
-      // 3. Badge
-      const badgeTarget = document.querySelector('#demo-badge');
-      if (badgeTarget && !badgeTarget.hasChildNodes()) {
-        const BadgeDemo = () => Button({
-          class: "btn btn-outline",
-          badge: "3",
-          badgeClass: "badge-accent"
-        }, "Notifications");
-        $mount(BadgeDemo, badgeTarget);
-      }
-
-      // 4. Tooltip
-      const tooltipTarget = document.querySelector('#demo-tooltip');
-      if (tooltipTarget && !tooltipTarget.hasChildNodes()) {
-        const TooltipDemo = () => Button({
-          class: "btn btn-ghost",
-          tooltip: "Delete item"
-        }, "Delete");
-        $mount(TooltipDemo, tooltipTarget);
-      }
-
-      // 5. Disabled State
-      const disabledTarget = document.querySelector('#demo-disabled');
-      if (disabledTarget && !disabledTarget.hasChildNodes()) {
-        const DisabledDemo = () => {
-          const isDisabled = $(true);
-          return Button({
-            class: "btn btn-primary",
-            disabled: isDisabled
-          }, "Submit");
-        };
-        $mount(DisabledDemo, disabledTarget);
-      }
-
-      // 6. All Variants
-      const variantsTarget = document.querySelector('#demo-variants');
-      if (variantsTarget && !variantsTarget.hasChildNodes()) {
-        const VariantsDemo = () => Div({ class: "flex flex-wrap gap-2 justify-center" }, [
-          Button({ class: "btn btn-primary" }, "Primary"),
-          Button({ class: "btn btn-secondary" }, "Secondary"),
-          Button({ class: "btn btn-accent" }, "Accent"),
-          Button({ class: "btn btn-ghost" }, "Ghost"),
-          Button({ class: "btn btn-outline" }, "Outline")
-        ]);
-        $mount(VariantsDemo, variantsTarget);
-      }
-    };
-
-    // Ejecutar la función después de definirla
-    initButtonExamples();
-    
-    // Registrar para navegación en Docsify
-    if (window.$docsify) {
-      window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
-        hook.doneEach(initButtonExamples);
-      });
-    }
-  })();
-</script>
+```javascript
+const TestDemo = () => {
+  return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
+    $html("span", {class: "indicator"},[
+      5,
+      Button('Click')])
+  ]);
+};
+$mount(TestDemo, "#demo-test");
+```
--- a/docs/index.html
+++ b/docs/index.html
@@ -17,6 +17,13 @@
    />

    <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,26 +33,40 @@
        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://cdn.jsdelivr.net/gh/natxocc/sigpro@main/dist/sigpro.js"></script> -->
-    <script src="./sigpro.min.js"></script>
-    <script src="./sigpro-ui.umd.min.js"></script>
-    <!-- <script src="https://cdn.jsdelivr.net/gh/natxocc/sigpro-ui@main/dist/sigpro-ui.umd.js"></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="//cdn.jsdelivr.net/npm/docsify-plugin-flexible-alerts/docsify-plugin-flexible-alerts.min.js"></script>
+    <script src="./sigpro-ui.min.js"></script>
  </body>
-</html>
+</html>
--- a/docs/install.md
+++ b/docs/install.md
@@ -4,13 +4,18 @@ Follow these steps to integrate **SigPro-UI** into your project.

 ## Prerequisites

-Make sure your project already has:
-
- [SigPro Core](https://www.npmjs.com/package/sigpro) installed.
 - [Tailwind CSS v4](https://tailwindcss.com/) configured.
 - [daisyUI v5](https://daisyui.com/) installed.

-## 1️.Install the package
+---
+
+
+!> **📘 Core Concepts**  
+**Note:** SigPro-UI now includes SigPro core internally. You no longer 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.
+---
+
+## 1. Install the package

 Choose your preferred package manager:

@@ -24,7 +29,7 @@ bun add sigpro-ui
 yarn add sigpro-ui
 ```

-## 2️.Configure CSS
+## 2. Configure CSS

 Add the following to your main CSS file (e.g., `app.css`):

@@ -35,48 +40,67 @@ Add the following to your main CSS file (e.g., `app.css`):

 > This enables Tailwind CSS v4 + daisyUI v5 styles for all SigPro-UI components.

-## 3️.Import and initialize in your app
+## 3. Import and use 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 your CSS (adjust the path if needed)
 import "./app.css";

-// Import your main App component
-import { App } from "./App.js";
-
-// Initialize SigPro-UI (English locale)
-UI("en");
+// Create your app
+const App = () => {
+  const count = $(0);
+  
+  return $html('div', { class: 'p-8 max-w-md mx-auto' }, [
+    $html('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
+    
+    Input({
+      label: 'Your name',
+      placeholder: 'Enter your name...'
+    }),
+    
+    Button({
+      class: 'btn-primary mt-4',
+      onclick: () => count(count() + 1)
+    }, () => `Clicks: ${count()}`),
+    
+    Alert({
+      type: 'success',
+      message: () => `Welcome to SigProUI!`
+    })
+  ]);
+};

 // Mount your app
 $mount(App, "#app");
 ```

-## 4️.Create your first component
-
-Example `App.js`:
+### CommonJS usage

 ```javascript
-import { Div, Button, Alert } from "sigpro-ui";
+const { $, $mount, Button, Input, Alert } = require('sigpro-ui');

-export const App = () => {
-  return Div({ class: "p-4" }, [
-    Button({
-      class: "btn-primary",
-      onclick: () => Alert("Hello SigPro-UI!")
-    }, "Click Me")
+const App = () => {
+  const count = $(0);
+  
+  return $html('div', { class: 'p-8' }, [
+    Button({ 
+      class: 'btn-primary',
+      onclick: () => count(count() + 1)
+    }, () => `Clicks: ${count()}`)
  ]);
 };
+
+$mount(App, "#app");
 ```

-## Optional: Use CDN (no build step)
+## 4. 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 +108,134 @@ 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://cdn.jsdelivr.net/npm/daisyui@4/dist/full.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");
-
-    const App = () => Div({ class: "p-4" }, [
-      Button({ class: "btn-primary", onclick: () => Alert("Hello!") }, "Click")
-    ]);
-
-    $mount(App, "#app");
+  <script>
+    // All functions are available directly in window
+    // No need to import anything!
+    
+    const { $, $mount, Button, Input, Alert } = window;
+    
+    const App = () => {
+      const name = $('');
+      const count = $(0);
+      
+      return $html('div', { class: 'max-w-md mx-auto p-4' }, [
+        $html('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
+        
+        Input({
+          label: 'Your name',
+          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');
  </script>
 </body>
 </html>
 ```

+## What's included?
+
+When you install SigProUI, you get:
+
+### SigPro Core Functions
+- `$()` - Reactive signals
+- `$watch()` - Watch reactive dependencies
+- `$html()` - Create HTML elements with reactivity
+- `$if()` - Conditional rendering
+- `$for()` - List rendering
+- `$router()` - Hash-based routing
+- `$mount()` - Mount components to DOM
+
+### UI Components
+- `Button()` - 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
+- `Icons` - SVG icon set
+- `Utils` - Helper functions (joinClass, val)
+- `tt()` - i18n translation function
+
+## Language Support
+
+SigProUI includes built-in i18n with Spanish and English:
+
+```javascript
+import { tt } from 'sigpro-ui';
+
+// Change locale (default is 'es')
+tt.setLocale('en');
+
+// Use translations
+const closeButton = Button({}, tt('close')());
+const searchPlaceholder = Input({ placeholder: tt('search')() });
+```
+
+Available translations: `close`, `confirm`, `cancel`, `search`, `loading`, `nodata`
+
+## 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 | Check that you've included Tailwind + daisyUI 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 `tt.setLocale('en')` before using translations |

+## Migration from older versions
+
+If you were using SigProUI v1.0.x with separate SigPro installation:
+
+**Before:**
+```javascript
+import { $ } from 'sigpro';
+import { Button } from 'sigpro-ui';
+```
+
+**Now:**
+```javascript
+import { $, Button } from 'sigpro-ui';
+// That's it! Everything comes from one package.
+```

 **Happy coding!** 🎉
-
--- a/docs/sigpro-ui.min.js
+++ b/docs/sigpro-ui.min.js
--- a/docs/sigpro-ui.umd.min.js
+++ b/docs/sigpro-ui.umd.min.js
--- a/docs/sigpro.min.js
+++ b/docs/sigpro.min.js
--- a/index.js
+++ b/index.js
@@ -1,40 +1,25 @@
-/**
- * SigproUI - Entry Point
- */
-
+// index.js
+import 'sigpro';
+// import './src/css/sigpro.css';  // No importes CSS en JS
 import * as Components from './src/components/index.js';
-
-import * as Icons from './src/core/icons.js';
+// import * as Icons from './src/core/icons.js';  // ELIMINAR
 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/icons.js';  // ELIMINAR
 export * from './src/core/utils.js';
 export { tt };

-const SigproUI = {
-  ...Components,
-  Icons,
-  Utils,
-  tt,
-
-  install: (target = (typeof window !== 'undefined' ? window : {})) => {
-    Object.entries(Components).forEach(([name, component]) => {
-      target[name] = component;
-    });
-
-    target.Icons = Icons;
-    target.Utils = Utils;
-    target.tt = tt;
-
-    console.log("🌟 SigproUI");
-  }
-};
-
 if (typeof window !== 'undefined') {
-  SigproUI.install(window);
-}
-
-export default SigproUI;
+  Object.entries(Components).forEach(([name, component]) => {
+    window[name] = component;
+  });
+  
+  // window.Icons = Icons;  // ELIMINAR
+  window.Utils = Utils;
+  window.tt = tt;
+  window.SigProUI = { ...Components, Utils, tt };
+  
+  console.log("🎨 SigProUI ready");
+}
--- a/package.json
+++ b/package.json
@@ -1,52 +1,44 @@
 {
  "name": "sigpro-ui",
-  "version": "1.0.6",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/natxocc/sigpro-ui.git"
-  },
-  "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",
+  "version": "1.1.0",
+  "type": "module",
+  "license": "MIT",
+  "main": "./index.js",
+  "module": "./index.js",
+  "unpkg": "./dist/sigpro-ui.min.js",
+  "jsdelivr": "./dist/sigpro-ui.min.js",
  "exports": {
    ".": {
-      "import": "./dist/sigpro-ui.esm.js",
-      "require": "./dist/sigpro-ui.cjs"
+      "import": "./index.js",
+      "script": "./dist/sigpro-ui.js"
+    },
+    "./css": {
+      "import": "./css/index.js",
+      "default": "./css/index.js"
    }
  },
-  "bugs": {
-    "url": "https://github.com/natxocc/sigpro-ui/issues"
-  },
  "files": [
    "index.js",
-    "src",
    "dist",
+    "css",
    "README.md",
    "LICENSE"
  ],
-  "homepage": "https://natxocc.github.io/sigpro-ui/",
-  "keywords": [
-    "signals",
-    "reactive",
-    "sigpro",
-    "sigpro components",
-    "UI",
-    "vanilla-js",
-    "reactive-programming"
-  ],
-  "license": "MIT",
  "scripts": {
-    "docs": "bun x serve docs",
-    "build": "rollup -c",
-    "prepublishOnly": "npm run build"
+    "build:css": "./node_modules/.bin/tailwindcss -i ./src/css/sigpro.css -o ./css/sigpro.css --content './src/**/*.js' --minify",
+    "build:js": "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": "bun run build:css && bun run build:js",
+    "prepublishOnly": "bun run build",
+    "docs": "bun x serve docs"
  },
-  "peerDependencies": {
-    "sigpro": ">=1.1.16"
+  "dependencies": {
+    "sigpro": "^1.1.18"
  },
-  "type": "module",
  "devDependencies": {
-    "@rollup/plugin-terser": "^0.4.4",
-    "rollup": "^4.34.8"
+    "@iconify/json": "^2.2.458",
+    "@iconify/tailwind4": "^1.2.3",
+    "@tailwindcss/cli": "^4.0.0",
+    "daisyui": "^5.5.19",
+    "tailwindcss": "^4.2.2"
  }
 }
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,62 +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()]
-    }
-  },
-  {
-    input: './index.js',
-    external: ['sigpro'],
-    output: {
-      file: './docs/sigpro-ui.umd.min.js',
-      format: 'iife',
-      name: 'SigProUI',
-      globals: {
-        sigpro: 'SigPro'
-      },
-      plugins: [terser()]
-    }
-  }
-];
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -9,9 +9,7 @@ export const Button = (props, children) => {
    "button",
    {
      ...rest,
-      // Usamos props.class directamente
-      class: joinClass("btn", props.class),
-      disabled: () => val(loading) || val(props.disabled),
+      class: joinClass("btn", props.class)
    },
    [
      () => (val(loading) ? $html("span", { class: "loading loading-spinner" }) : null),
--- a/src/core/utils.js
+++ b/src/core/utils.js
@@ -1,5 +1,45 @@
+import { $html } from "sigpro";
+
 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 = (base, str) => {
+  if (!str) return base;
+  
+  const parts = typeof str === 'string' ? str.split(' ') : str;
+  const classes = [base];
+  
+  parts.forEach(part => {
+    if (part) classes.push(`${base}-${part}`);
+  });
+  
+  return classes.join(' ');
+};
+
+export const getIcon = (icon) => {
+  if (!icon) return null;
+  
+  let position = 'left';
+  let iconValue = icon;
+  
+  if (typeof icon === 'string') {
+    const parts = icon.trim().split(/\s+/);
+    if (parts[parts.length - 1] === 'right') {
+      position = 'right';
+      iconValue = parts.slice(0, -1).join(' ');
+    }
+  }
+  
+  const spacing = position === 'left' ? 'mr-1' : 'ml-1';
+  
+  const element = typeof iconValue === 'string' && iconValue.includes('--')
+    ? $html("span", { class: `icon-[${iconValue}]` })
+    : typeof iconValue === 'function'
+      ? iconValue()
+      : $html("span", {}, iconValue);
+  
+  return $html("span", { class: spacing }, element);
+};
--- a/src/css/index.js
+++ b/src/css/index.js
@@ -0,0 +1,4 @@
+// css/index.js
+import './sigpro.css';
+
+export default { version: '1.0.0' };
--- a/src/css/sigpro.css
+++ b/src/css/sigpro.css
@@ -0,0 +1,3 @@
+@import "tailwindcss";
+@plugin "daisyui";
+@plugin "@iconify/tailwind4";
--- a/src/ui/Accordion.js
+++ b/src/ui/Accordion.js
@@ -0,0 +1,27 @@
+// components/Accordion.js
+import { $html } from "sigpro";
+import { ui, val, joinClass } from "../core/utils.js";
+
+export const Accordion = (props, children) => {
+  const { ui: uiProps, class: className, title, name, open, ...rest } = props;
+
+  const dynamicClasses = [
+    ui('collapse', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const classes = joinClass("collapse collapse-arrow bg-base-200 mb-2", dynamicClasses);
+
+  return $html("div", {
+    ...rest,
+    class: classes,
+  }, [
+    $html("input", {
+      type: name ? "radio" : "checkbox",
+      name: name,
+      checked: val(open),
+    }),
+    $html("div", { class: "collapse-title text-xl font-medium" }, title),
+    $html("div", { class: "collapse-content" }, children),
+  ]);
+};
--- a/src/ui/Alert.js
+++ b/src/ui/Alert.js
@@ -0,0 +1,55 @@
+// components/Alert.js
+import { $html } from "sigpro";
+import { ui, val, joinClass, getIcon } from "../core/utils.js";
+
+export const Alert = (props, children) => {
+  const { ui: uiProps, class: className, type = "info", soft = true, actions, ...rest } = props;
+
+  const dynamicClasses = [
+    ui('alert', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const typeClass = () => {
+    const t = val(type);
+    const map = {
+      info: "alert-info",
+      success: "alert-success",
+      warning: "alert-warning",
+      error: "alert-error",
+    };
+    return map[t] || t;
+  };
+
+  const softClass = () => val(soft) ? "alert-soft" : "";
+
+  const classes = joinClass(
+    ["alert", typeClass(), softClass()].filter(Boolean).join(' '),
+    dynamicClasses
+  );
+
+  const content = children || props.message;
+
+  const iconMap = {
+    info: "lucide--info",
+    success: "lucide--check-circle",
+    warning: "lucide--alert-triangle",
+    error: "lucide--alert-circle",
+  };
+
+  const iconName = iconMap[val(type)] || iconMap.info;
+
+  return $html("div", {
+    ...rest,
+    role: "alert",
+    class: classes,
+  }, [
+    getIcon(iconName),
+    $html("div", { class: "flex-1" }, [
+      $html("span", {}, [typeof content === "function" ? content() : content])
+    ]),
+    actions ? $html("div", { class: "flex-none" }, [
+      typeof actions === "function" ? actions() : actions
+    ]) : null,
+  ]);
+};
--- a/src/ui/Autocomplete.js
+++ b/src/ui/Autocomplete.js
@@ -0,0 +1,102 @@
+// components/Autocomplete.js
+import { $, $html, $for } from "sigpro";
+import { val, ui, joinClass } from "../core/utils.js";
+import { tt } from "../core/i18n.js";
+import { Input } from "./Input.js";
+
+export const Autocomplete = (props) => {
+  const { ui: uiProps, class: className, options = [], value, onSelect, label, placeholder, ...rest } = props;
+
+  const query = $(val(value) || "");
+  const isOpen = $(false);
+  const cursor = $(-1);
+
+  const list = $(() => {
+    const q = query().toLowerCase();
+    const data = val(options) || [];
+    return q 
+      ? data.filter((o) => (typeof o === "string" ? o : o.label).toLowerCase().includes(q)) 
+      : data;
+  });
+
+  const pick = (opt) => {
+    const valStr = typeof opt === "string" ? opt : opt.value;
+    const labelStr = typeof opt === "string" ? opt : opt.label;
+
+    query(labelStr);
+    if (typeof value === "function") value(valStr);
+    onSelect?.(opt);
+
+    isOpen(false);
+    cursor(-1);
+  };
+
+  const nav = (e) => {
+    const items = list();
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      isOpen(true);
+      cursor(Math.min(cursor() + 1, items.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      cursor(Math.max(cursor() - 1, 0));
+    } else if (e.key === "Enter" && cursor() >= 0) {
+      e.preventDefault();
+      pick(items[cursor()]);
+    } else if (e.key === "Escape") {
+      isOpen(false);
+    }
+  };
+
+  const dynamicClasses = [
+    ui('autocomplete', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const containerClasses = joinClass("relative w-full", dynamicClasses);
+
+  return $html("div", { class: containerClasses }, [
+    Input({
+      label,
+      placeholder: placeholder || tt("search")(),
+      value: query,
+      onfocus: () => isOpen(true),
+      onblur: () => setTimeout(() => isOpen(false), 150),
+      onkeydown: nav,
+      oninput: (e) => {
+        const v = e.target.value;
+        query(v);
+        if (typeof value === "function") value(v);
+        isOpen(true);
+        cursor(-1);
+      },
+      ...rest,
+    }),
+    $html(
+      "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(
+          list,
+          (opt, i) =>
+            $html("li", {}, [
+              $html(
+                "a",
+                {
+                  class: () => `block w-full ${cursor() === i ? "active bg-primary text-primary-content" : ""}`,
+                  onclick: () => pick(opt),
+                  onmouseenter: () => cursor(i),
+                },
+                typeof opt === "string" ? opt : opt.label,
+              ),
+            ]),
+          (opt, i) => (typeof opt === "string" ? opt : opt.value) + i,
+        ),
+        () => (list().length ? null : $html("li", { class: "p-2 text-center opacity-50" }, tt("nodata")())),
+      ],
+    ),
+  ]);
+};
--- a/src/ui/Badge.js
+++ b/src/ui/Badge.js
@@ -0,0 +1,16 @@
+// components/Badge.js
+import { $html } from "sigpro";
+import { ui, joinClass } from "../core/utils.js";
+
+export const Badge = (props, children) => {
+  const { ui: uiProps, class: className, ...rest } = props;
+
+  const dynamicClasses = [
+    ui('badge', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const classes = joinClass("badge", dynamicClasses);
+
+  return $html("span", { ...rest, class: classes }, children);
+};
--- a/src/ui/Button.js
+++ b/src/ui/Button.js
@@ -0,0 +1,28 @@
+// components/Button.js
+import { $html } from "sigpro";
+import { ui, val, getIcon, joinClass } from "../core/utils.js";
+
+export const Button = (props, children) => {
+  const { ui: uiProps, class: className, loading, icon, ...rest } = props;
+
+  const dynamicClasses = [
+    ui('btn', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const classes = joinClass("btn", dynamicClasses);
+
+  const iconEl = getIcon(icon);
+
+  const content = [
+    () => val(loading) && $html("span", { class: "loading loading-spinner" }),
+    iconEl,
+    children,
+  ].filter(Boolean);
+
+  return $html("button", {
+    ...rest,
+    class: classes,
+    disabled: () => val(loading) || val(props.disabled),
+  }, content);
+};
--- a/src/ui/Checkbox.js
+++ b/src/ui/Checkbox.js
@@ -0,0 +1,26 @@
+// components/Checkbox.js
+import { $html } from "sigpro";
+import { val, ui, joinClass } from "../core/utils.js";
+
+export const Checkbox = (props) => {
+  const { ui: uiProps, class: className, value, tooltip, toggle, label, ...rest } = props;
+
+  const dynamicClasses = [
+    ui('checkbox', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const checkEl = $html("input", {
+    ...rest,
+    type: "checkbox",
+    class: () => joinClass(val(toggle) ? "toggle" : "checkbox", dynamicClasses),
+    checked: value
+  });
+
+  const layout = $html("label", { class: "label cursor-pointer justify-start gap-3" }, [
+    checkEl,
+    label ? $html("span", { class: "label-text" }, label) : null,
+  ]);
+
+  return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
+};
--- a/src/ui/Colorpicker.js
+++ b/src/ui/Colorpicker.js
@@ -0,0 +1,88 @@
+// components/Colorpicker.js
+import { $, $html, $if } from "sigpro";
+import { val, ui, joinClass } from "../core/utils.js";
+
+export const Colorpicker = (props) => {
+  const { ui: uiProps, class: className, value, label, ...rest } = props;
+  const isOpen = $(false);
+
+  const palette = [
+    ...["#000", "#1A1A1A", "#333", "#4D4D4D", "#666", "#808080", "#B3B3B3", "#FFF"],
+    ...["#450a0a", "#7f1d1d", "#991b1b", "#b91c1c", "#dc2626", "#ef4444", "#f87171", "#fca5a5"],
+    ...["#431407", "#7c2d12", "#9a3412", "#c2410c", "#ea580c", "#f97316", "#fb923c", "#ffedd5"],
+    ...["#713f12", "#a16207", "#ca8a04", "#eab308", "#facc15", "#fde047", "#fef08a", "#fff9c4"],
+    ...["#064e3b", "#065f46", "#059669", "#10b981", "#34d399", "#4ade80", "#84cc16", "#d9f99d"],
+    ...["#082f49", "#075985", "#0284c7", "#0ea5e9", "#38bdf8", "#7dd3fc", "#22d3ee", "#cffafe"],
+    ...["#1e1b4b", "#312e81", "#4338ca", "#4f46e5", "#6366f1", "#818cf8", "#a5b4fc", "#e0e7ff"],
+    ...["#2e1065", "#4c1d95", "#6d28d9", "#7c3aed", "#8b5cf6", "#a855f7", "#d946ef", "#fae8ff"],
+  ];
+
+  const getColor = () => val(value) || "#000000";
+
+  const dynamicClasses = [
+    ui('colorpicker', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const containerClasses = joinClass("relative w-fit", dynamicClasses);
+
+  return $html("div", { class: containerClasses }, [
+    $html(
+      "button",
+      {
+        type: "button",
+        class: "btn px-3 bg-base-100 border-base-300 hover:border-primary/50 flex items-center gap-2 shadow-sm font-normal normal-case",
+        onclick: (e) => {
+          e.stopPropagation();
+          isOpen(!isOpen());
+        },
+        ...rest,
+      },
+      [
+        $html("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,
+      ],
+    ),
+
+    $if(isOpen, () =>
+      $html(
+        "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(
+            "div",
+            { class: "grid grid-cols-8 gap-1" },
+            palette.map((c) =>
+              $html("button", {
+                type: "button",
+                style: `background-color: ${c}`,
+                class: () => {
+                  const active = getColor().toLowerCase() === c.toLowerCase();
+                  return `size-6 rounded-sm cursor-pointer transition-all hover:scale-125 hover:z-10 active:scale-95 outline-none border border-black/5 
+                ${active ? "ring-2 ring-offset-1 ring-primary z-10 scale-110" : ""}`;
+                },
+                onclick: () => {
+                  if (typeof value === "function") value(c);
+                  isOpen(false);
+                },
+              }),
+            ),
+          ),
+        ],
+      ),
+    ),
+
+    $if(isOpen, () =>
+      $html("div", {
+        class: "fixed inset-0 z-[100]",
+        onclick: () => isOpen(false),
+      }),
+    ),
+  ]);
+};
--- a/src/ui/Datepicker.js
+++ b/src/ui/Datepicker.js
@@ -0,0 +1,252 @@
+// components/Datepicker.js
+import { $, $html, $if } from "sigpro";
+import { val, ui, joinClass, getIcon } from "../core/utils.js";
+import { Input } from "./Input.js";
+
+export const Datepicker = (props) => {
+  const { ui: uiProps, class: className, value, range, label, placeholder, hour = false, ...rest } = props;
+
+  const isOpen = $(false);
+  const internalDate = $(new Date());
+  const hoverDate = $(null);
+  const startHour = $(0);
+  const endHour = $(0);
+  const isRangeMode = () => val(range) === true;
+
+  const now = new Date();
+  const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
+
+  const formatDate = (d) => {
+    const year = d.getFullYear();
+    const month = String(d.getMonth() + 1).padStart(2, "0");
+    const day = String(d.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  };
+
+  const selectDate = (date) => {
+    const dateStr = formatDate(date);
+    const current = val(value);
+
+    if (isRangeMode()) {
+      if (!current?.start || (current.start && current.end)) {
+        if (typeof value === "function") {
+          value({
+            start: dateStr,
+            end: null,
+            ...(hour && { startHour: startHour() }),
+          });
+        }
+      } else {
+        const start = current.start;
+        if (typeof value === "function") {
+          const newValue = dateStr < start ? { start: dateStr, end: start } : { start, end: dateStr };
+          if (hour) {
+            newValue.startHour = current.startHour || startHour();
+            newValue.endHour = current.endHour || endHour();
+          }
+          value(newValue);
+        }
+        isOpen(false);
+      }
+    } else {
+      if (typeof value === "function") {
+        value(hour ? `${dateStr}T${String(startHour()).padStart(2, "0")}:00:00` : dateStr);
+      }
+      isOpen(false);
+    }
+  };
+
+  const displayValue = $(() => {
+    const v = val(value);
+    if (!v) return "";
+    if (typeof v === "string") {
+      if (hour && v.includes("T")) return v.replace("T", " ");
+      return v;
+    }
+    if (v.start && v.end) {
+      const startStr = hour && v.startHour ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` : v.start;
+      const endStr = hour && v.endHour ? `${v.end} ${String(v.endHour).padStart(2, "0")}:00` : v.end;
+      return `${startStr} - ${endStr}`;
+    }
+    if (v.start) {
+      const startStr = hour && v.startHour ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` : v.start;
+      return `${startStr}...`;
+    }
+    return "";
+  });
+
+  const move = (m) => {
+    const d = internalDate();
+    internalDate(new Date(d.getFullYear(), d.getMonth() + m, 1));
+  };
+
+  const moveYear = (y) => {
+    const d = internalDate();
+    internalDate(new Date(d.getFullYear() + y, d.getMonth(), 1));
+  };
+
+  const HourSlider = ({ value: hVal, onChange }) => {
+    return $html("div", { class: "flex-1" }, [
+      $html("div", { class: "flex gap-2 items-center" }, [
+        $html("input", {
+          type: "range",
+          min: 0,
+          max: 23,
+          value: hVal,
+          class: "range range-xs flex-1",
+          oninput: (e) => {
+            const newHour = parseInt(e.target.value);
+            onChange(newHour);
+          },
+        }),
+        $html("span", { class: "text-sm font-mono min-w-[48px] text-center" }, 
+          () => String(val(hVal)).padStart(2, "0") + ":00"
+        ),
+      ]),
+    ]);
+  };
+
+  const dynamicClasses = [
+    ui('datepicker', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const containerClasses = joinClass("relative w-full", dynamicClasses);
+
+  return $html("div", { class: containerClasses }, [
+    Input({
+      label,
+      placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."),
+      value: displayValue,
+      readonly: true,
+      icon: getIcon("lucide--calendar"),
+      onclick: (e) => {
+        e.stopPropagation();
+        isOpen(!isOpen());
+      },
+      ...rest,
+    }),
+
+    $if(isOpen, () =>
+      $html(
+        "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) }, 
+                getIcon("lucide--chevrons-left")
+              ),
+              $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, 
+                getIcon("lucide--chevron-left")
+              ),
+            ]),
+            $html("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) }, 
+                getIcon("lucide--chevron-right")
+              ),
+              $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, 
+                getIcon("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)),
+            () => {
+              const d = internalDate();
+              const year = d.getFullYear();
+              const month = d.getMonth();
+              const firstDay = new Date(year, month, 1).getDay();
+              const offset = firstDay === 0 ? 6 : firstDay - 1;
+              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 = 1; i <= daysInMonth; i++) {
+                const date = new Date(year, month, i);
+                const dStr = formatDate(date);
+
+                nodes.push(
+                  $html(
+                    "button",
+                    {
+                      type: "button",
+                      class: () => {
+                        const v = val(value);
+                        const h = hoverDate();
+                        const isStart = typeof v === "string" ? v.split("T")[0] === dStr : v?.start === dStr;
+                        const isEnd = v?.end === dStr;
+                        let inRange = false;
+
+                        if (isRangeMode() && v?.start) {
+                          const start = v.start;
+                          if (!v.end && h) {
+                            inRange = (dStr > start && dStr <= h) || (dStr < start && dStr >= h);
+                          } else if (v.end) {
+                            inRange = dStr > start && dStr < v.end;
+                          }
+                        }
+
+                        const base = "btn btn-xs p-0 aspect-square min-h-0 h-auto font-normal relative";
+                        const state = isStart || isEnd ? "btn-primary z-10" : inRange ? "bg-primary/20 border-none rounded-none" : "btn-ghost";
+                        const today = dStr === todayStr ? "ring-1 ring-primary ring-inset font-black text-primary" : "";
+
+                        return `${base} ${state} ${today}`;
+                      },
+                      onmouseenter: () => { if (isRangeMode()) hoverDate(dStr); },
+                      onclick: () => selectDate(date),
+                    },
+                    [i.toString()],
+                  ),
+                );
+              }
+              return nodes;
+            },
+          ]),
+
+          hour ? $html("div", { class: "mt-3 pt-2 border-t border-base-300" }, [
+            isRangeMode()
+              ? $html("div", { class: "flex gap-4" }, [
+                  HourSlider({
+                    value: startHour,
+                    onChange: (newHour) => {
+                      startHour(newHour);
+                      const currentVal = val(value);
+                      if (currentVal?.start) value({ ...currentVal, startHour: newHour });
+                    },
+                  }),
+                  HourSlider({
+                    value: endHour,
+                    onChange: (newHour) => {
+                      endHour(newHour);
+                      const currentVal = val(value);
+                      if (currentVal?.end) value({ ...currentVal, endHour: newHour });
+                    },
+                  }),
+                ])
+              : HourSlider({
+                  value: startHour,
+                  onChange: (newHour) => {
+                    startHour(newHour);
+                    const currentVal = val(value);
+                    if (currentVal && typeof currentVal === "string" && currentVal.includes("-")) {
+                      value(currentVal.split("T")[0] + "T" + String(newHour).padStart(2, "0") + ":00:00");
+                    }
+                  },
+                }),
+          ]) : null,
+        ],
+      ),
+    ),
+
+    $if(isOpen, () => $html("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })),
+  ]);
+};
--- a/src/ui/Drawer.js
+++ b/src/ui/Drawer.js
@@ -0,0 +1,28 @@
+// components/Drawer.js
+import { $html } from "sigpro";
+import { ui, val, joinClass } from "../core/utils.js";
+
+export const Drawer = (props) => {
+  const { ui: uiProps, class: className, id, open, content, side, ...rest } = props;
+
+  const dynamicClasses = [
+    ui('drawer', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const classes = joinClass("drawer", dynamicClasses);
+
+  return $html("div", { ...rest, class: classes }, [
+    $html("input", {
+      id,
+      type: "checkbox",
+      class: "drawer-toggle",
+      checked: val(open),
+    }),
+    $html("div", { class: "drawer-content" }, content),
+    $html("div", { class: "drawer-side" }, [
+      $html("label", { for: id, class: "drawer-overlay", onclick: () => open?.(false) }),
+      $html("div", { class: "min-h-full bg-base-200 w-80" }, side),
+    ]),
+  ]);
+};
--- a/src/ui/Dropdown.js
+++ b/src/ui/Dropdown.js
@@ -0,0 +1,61 @@
+// components/Dropdown.js
+import { $html, $for } from "sigpro";
+import { val, ui, joinClass } from "../core/utils.js";
+
+export const Dropdown = (props, children) => {
+  const { ui: uiProps, class: className, label, icon, items, ...rest } = props;
+
+  const dynamicClasses = [
+    ui('dropdown', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const containerClasses = joinClass("dropdown", dynamicClasses);
+
+  const renderContent = () => {
+    if (items) {
+      const source = typeof items === "function" ? items : () => items;
+      return $html("ul", { 
+        tabindex: 0, 
+        class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-300" 
+      }, [
+        $for(source, (item) => 
+          $html("li", {}, [
+            $html("a", { 
+              class: item.class || "",
+              onclick: (e) => {
+                if (item.onclick) item.onclick(e);
+                if (document.activeElement) document.activeElement.blur();
+              }
+            }, [
+              item.icon ? $html("span", {}, item.icon) : null,
+              $html("span", {}, item.label)
+            ])
+          ])
+        )
+      ]);
+    }
+
+    return $html("div", { 
+      tabindex: 0, 
+      class: "dropdown-content z-[50] p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300" 
+    }, [
+      typeof children === "function" ? children() : children
+    ]);
+  };
+
+  return $html("div", {
+    ...rest,
+    class: containerClasses,
+  }, [
+    $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
+    ]),
+    renderContent()
+  ]);
+};
--- a/src/ui/Fab.js
+++ b/src/ui/Fab.js
@@ -0,0 +1,54 @@
+// components/Fab.js
+import { $html } from "sigpro";
+import { val, ui, joinClass, getIcon } from "../core/utils.js";
+
+export const Fab = (props) => {
+  const { ui: uiProps, class: className, icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;
+
+  const dynamicClasses = [
+    ui('fab', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const containerClasses = joinClass(`fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100]`, dynamicClasses);
+
+  return $html(
+    "div",
+    {
+      ...rest,
+      class: containerClasses,
+    },
+    [
+      $html(
+        "div",
+        {
+          tabindex: 0,
+          role: "button",
+          class: "btn btn-lg btn-circle btn-primary shadow-2xl",
+        },
+        [
+          icon ? getIcon(icon) : null, 
+          !icon && label ? label : null
+        ],
+      ),
+
+      ...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(
+            "button",
+            {
+              type: "button",
+              class: `btn btn-circle shadow-lg ${act.class || ""}`,
+              onclick: (e) => {
+                e.stopPropagation();
+                act.onclick?.(e);
+              },
+            },
+            [act.icon ? getIcon(act.icon) : act.text || ""],
+          ),
+        ]),
+      ),
+    ],
+  );
+};
--- a/src/ui/Fieldset.js
+++ b/src/ui/Fieldset.js
@@ -0,0 +1,29 @@
+// components/Fieldset.js
+import { $html } from "sigpro";
+import { val, ui, joinClass } from "../core/utils.js";
+
+export const Fieldset = (props, children) => {
+  const { ui: uiProps, class: className, legend, ...rest } = props;
+
+  const dynamicClasses = [
+    ui('fieldset', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const classes = joinClass("fieldset bg-base-200 border border-base-300 p-4 rounded-lg", dynamicClasses);
+
+  return $html(
+    "fieldset",
+    {
+      ...rest,
+      class: classes,
+    },
+    [
+      () => {
+        const legendText = val(legend);
+        return legendText ? $html("legend", { class: "fieldset-legend font-bold" }, [legendText]) : null;
+      },
+      children,
+    ],
+  );
+};
--- a/src/ui/Fileinput.js
+++ b/src/ui/Fileinput.js
@@ -0,0 +1,120 @@
+// components/Fileinput.js
+import { $, $html, $if, $for } from "sigpro";
+import { val, ui, joinClass, getIcon } from "../core/utils.js";
+
+export const Fileinput = (props) => {
+  const { ui: uiProps, class: className, tooltip, max = 2, accept = "*", onSelect, ...rest } = props;
+
+  const selectedFiles = $([]);
+  const isDragging = $(false);
+  const error = $(null);
+  const MAX_BYTES = max * 1024 * 1024;
+
+  const dynamicClasses = [
+    ui('fileinput', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const fieldsetClasses = joinClass("fieldset w-full p-0", dynamicClasses);
+
+  const handleFiles = (files) => {
+    const fileList = Array.from(files);
+    error(null);
+    const oversized = fileList.find((f) => f.size > MAX_BYTES);
+
+    if (oversized) {
+      error(`Máx ${max}MB`);
+      return;
+    }
+
+    selectedFiles([...selectedFiles(), ...fileList]);
+    onSelect?.(selectedFiles());
+  };
+
+  const removeFile = (index) => {
+    const updated = selectedFiles().filter((_, i) => i !== index);
+    selectedFiles(updated);
+    onSelect?.(updated);
+  };
+
+  return $html("fieldset", { ...rest, class: fieldsetClasses }, [
+    $html(
+      "div",
+      {
+        class: () => `w-full ${tooltip ? "tooltip tooltip-top before:z-50 after:z-50" : ""}`,
+        "data-tip": tooltip,
+      },
+      [
+        $html(
+          "label",
+          {
+            class: () => `
+          relative flex items-center justify-between w-full h-12 px-4
+          border-2 border-dashed rounded-lg cursor-pointer
+          transition-all duration-200
+          ${isDragging() ? "border-primary bg-primary/10" : "border-base-content/20 bg-base-100 hover:bg-base-200"}
+        `,
+            ondragover: (e) => {
+              e.preventDefault();
+              isDragging(true);
+            },
+            ondragleave: () => isDragging(false),
+            ondrop: (e) => {
+              e.preventDefault();
+              isDragging(false);
+              handleFiles(e.dataTransfer.files);
+            },
+          },
+          [
+            $html("div", { class: "flex items-center gap-3 w-full" }, [
+              getIcon("lucide--upload"),
+              $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`),
+            ]),
+            $html("input", {
+              type: "file",
+              multiple: true,
+              accept: accept,
+              class: "hidden",
+              onchange: (e) => handleFiles(e.target.files),
+            }),
+          ],
+        ),
+      ],
+    ),
+
+    () => (error() ? $html("span", { class: "text-[10px] text-error mt-1 px-1 font-medium" }, error()) : null),
+
+    $if(
+      () => selectedFiles().length > 0,
+      () =>
+        $html("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)`),
+                ]),
+                $html(
+                  "button",
+                  {
+                    type: "button",
+                    class: "btn btn-ghost btn-xs btn-circle",
+                    onclick: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      removeFile(index);
+                    },
+                  },
+                  [getIcon("lucide--x")]
+                ),
+              ]),
+            (file) => file.name + file.lastModified,
+          ),
+        ]),
+    ),
+  ]);
+};
--- a/src/ui/Indicator.js
+++ b/src/ui/Indicator.js
@@ -0,0 +1,19 @@
+// components/Indicator.js
+import { $html } from "sigpro";
+import { ui, val, joinClass } from "../core/utils.js";
+
+export const Indicator = (props, children) => {
+  const { ui: uiProps, class: className, badge, badgeClass = "badge-secondary", ...rest } = props;
+
+  const dynamicClasses = [
+    ui('indicator', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const classes = joinClass("indicator", dynamicClasses);
+
+  return $html("div", { ...rest, class: classes }, [
+    children,
+    badge ? $html("span", { class: joinClass("indicator-item badge", badgeClass) }, val(badge)) : null,
+  ]);
+};
--- a/src/ui/Input.js
+++ b/src/ui/Input.js
@@ -0,0 +1,76 @@
+// components/Input.js
+import { $, $html } from "sigpro";
+import { val, ui, joinClass, getIcon } from "../core/utils.js";
+import { tt } from "../core/i18n.js";
+
+export const Input = (props) => {
+  const { ui: uiProps, class: className, label, tip, value, error, isSearch, icon, type = "text", ...rest } = props;
+  const isPassword = type === "password";
+  const visible = $(false);
+
+  const iconMap = {
+    text: "lucide--text",
+    password: "lucide--lock",
+    date: "lucide--calendar",
+    number: "lucide--hash",
+    email: "lucide--mail",
+    search: "lucide--search",
+  };
+
+  const dynamicClasses = [
+    ui('input', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const inputClasses = joinClass("input input-bordered floating-label flex items-center gap-2 w-full relative", val(error) ? "input-error" : "");
+
+  const inputEl = $html("input", {
+    ...rest,
+    type: () => (isPassword ? (visible() ? "text" : "password") : type),
+    placeholder: props.placeholder || label || (isSearch ? tt("search")() : " "),
+    class: joinClass("grow order-2 focus:outline-none", dynamicClasses),
+    value: value,
+    oninput: (e) => props.oninput?.(e),
+    disabled: () => val(props.disabled),
+  });
+
+  const leftIcon = icon 
+    ? getIcon(icon) 
+    : (iconMap[type] ? getIcon(iconMap[type]) : null);
+
+  const passwordIcon = getIcon(visible() ? "lucide--eye-off" : "lucide--eye");
+
+  return $html(
+    "label",
+    {
+      class: inputClasses,
+    },
+    [
+      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",
+            {
+              type: "button",
+              class: "order-3 btn btn-ghost btn-xs btn-circle opacity-50 hover:opacity-100",
+              onclick: (e) => {
+                e.preventDefault();
+                visible(!visible());
+              },
+            },
+            () => passwordIcon
+          )
+        : 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),
+    ],
+  );
+};
--- a/src/ui/List.js
+++ b/src/ui/List.js
@@ -0,0 +1,37 @@
+// components/List.js
+import { $html, $if, $for } from "sigpro";
+import { ui, joinClass, val } from "../core/utils.js";
+
+export const List = (props) => {
+  const { 
+    ui: uiProps,
+    class: className,
+    items, 
+    header, 
+    render, 
+    keyFn = (item, index) => index,
+    ...rest 
+  } = props;
+
+  const dynamicClasses = [
+    ui('list', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const listClasses = joinClass("list bg-base-100 rounded-box shadow-md", dynamicClasses);
+
+  const listItems = $for(
+    items, 
+    (item, index) => $html("li", { class: "list-row" }, [render(item, index)]), 
+    keyFn
+  );
+
+  return $html(
+    "ul",
+    {
+      ...rest,
+      class: listClasses,
+    },
+    header ? [$if(header, () => $html("li", { class: "p-4 pb-2 text-xs opacity-60" }, [val(header)])), listItems] : listItems
+  );
+};
--- a/src/ui/Loading.js
+++ b/src/ui/Loading.js
@@ -0,0 +1,13 @@
+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" }),
+    ]),
+  );
+};
--- a/src/ui/Menu.js
+++ b/src/ui/Menu.js
@@ -0,0 +1,34 @@
+// components/Menu.js
+import { $html, $for } from "sigpro";
+import { val, ui, joinClass } from "../core/utils.js";
+
+export const Menu = (props) => {
+  const { ui: uiProps, class: className, items, ...rest } = props;
+
+  const dynamicClasses = [
+    ui('menu', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const menuClasses = joinClass("menu bg-base-200 rounded-box", dynamicClasses);
+
+  const renderItems = (items) =>
+    $for(
+      () => items || [],
+      (it) =>
+        $html("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)),
+              ])
+            : $html("a", { class: () => (val(it.active) ? "active" : ""), onclick: it.onclick }, [
+                it.icon && $html("span", { class: "mr-2" }, it.icon),
+                it.label,
+              ]),
+        ]),
+      (it, i) => it.label || i,
+    );
+
+  return $html("ul", { ...rest, class: menuClasses }, renderItems(items));
+};
--- a/src/ui/Modal.js
+++ b/src/ui/Modal.js
@@ -0,0 +1,58 @@
+// components/Modal.js
+import { $html, $watch } from "sigpro";
+import { ui, val, joinClass } from "../core/utils.js";
+import { tt } from "../core/i18n.js";
+import { Button } from "./Button.js";
+
+export const Modal = (props, children) => {
+  const { ui: uiProps, class: className, title, buttons, open, ...rest } = props;
+  const dialogRef = { current: null };
+
+  const dynamicClasses = [
+    ui('modal', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const modalClasses = joinClass("modal", dynamicClasses);
+
+  $watch(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+
+    if (val(open)) {
+      if (!dialog.open) dialog.showModal();
+    } else {
+      if (dialog.open) dialog.close();
+    }
+  });
+
+  const close = (e) => {
+    if (e && e.preventDefault) e.preventDefault();
+    if (typeof open === "function") open(false);
+  };
+
+  return $html("dialog", { 
+    ...rest,
+    ref: dialogRef,
+    class: modalClasses,
+    oncancel: () => typeof open === "function" && open(false)
+  }, [
+    $html("div", { class: "modal-box" }, [
+      title ? $html("h3", { class: "text-lg font-bold mb-4" }, title) : null,
+      $html("div", { class: "py-2" }, [
+        typeof children === "function" ? children() : children
+      ]),
+      $html("div", { class: "modal-action flex gap-2" }, [
+        ...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean),
+        Button({ type: "button", onclick: close }, tt("close")()),
+      ]),
+    ]),
+    $html("form", { 
+      method: "dialog", 
+      class: "modal-backdrop",
+      onsubmit: close 
+    }, [
+      $html("button", {}, "close")
+    ])
+  ]);
+};
--- a/src/ui/Navbar.js
+++ b/src/ui/Navbar.js
@@ -0,0 +1,16 @@
+// components/Navbar.js
+import { $html } from "sigpro";
+import { ui, joinClass } from "../core/utils.js";
+
+export const Navbar = (props, children) => {
+  const { ui: uiProps, class: className, ...rest } = props;
+
+  const dynamicClasses = [
+    ui('navbar', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const classes = joinClass("navbar bg-base-100 shadow-sm px-4", dynamicClasses);
+
+  return $html("div", { ...rest, class: classes }, children);
+};
--- a/src/ui/Radio.js
+++ b/src/ui/Radio.js
@@ -0,0 +1,34 @@
+// components/Radio.js
+import { $html } from "sigpro";
+import { val, ui, joinClass } from "../core/utils.js";
+
+export const Radio = (props) => {
+  const { ui: uiProps, class: className, label, tooltip, value, inputValue, name, ...rest } = props;
+
+  const dynamicClasses = [
+    ui('radio', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const radioClasses = joinClass("radio", dynamicClasses);
+
+  const radioEl = $html("input", {
+    ...rest,
+    type: "radio",
+    name: name,
+    class: radioClasses,
+    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" }, [
+    radioEl,
+    label ? $html("span", { class: "label-text" }, label) : null,
+  ]);
+
+  return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
+};
--- a/src/ui/Range.js
+++ b/src/ui/Range.js
@@ -0,0 +1,31 @@
+// components/Range.js
+import { $html } from "sigpro";
+import { val, ui, joinClass } from "../core/utils.js";
+
+export const Range = (props) => {
+  const { ui: uiProps, class: className, label, tooltip, value, ...rest } = props;
+
+  const dynamicClasses = [
+    ui('range', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const rangeClasses = joinClass("range", dynamicClasses);
+
+  const rangeEl = $html("input", {
+    ...rest,
+    type: "range",
+    class: rangeClasses,
+    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, 
+    rangeEl
+  ]);
+
+  return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
+};
--- a/src/ui/Rating.js
+++ b/src/ui/Rating.js
@@ -0,0 +1,41 @@
+// components/Rating.js
+import { $html } from "sigpro";
+import { val, ui, joinClass } from "../core/utils.js";
+
+export const Rating = (props) => {
+  const { ui: uiProps, class: className, value, count = 5, mask = "mask-star", readonly = false, onchange, ...rest } = props;
+
+  const dynamicClasses = [
+    ui('rating', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const ratingGroup = `rating-${Math.random().toString(36).slice(2, 7)}`;
+
+  return $html(
+    "div",
+    {
+      ...rest,
+      class: () => joinClass(`rating ${val(readonly) ? "pointer-events-none" : ""}`, dynamicClasses),
+    },
+    Array.from({ length: val(count) }, (_, i) => {
+      const starValue = i + 1;
+      return $html("input", {
+        type: "radio",
+        name: ratingGroup,
+        class: `mask ${mask}`,
+        checked: () => Math.round(val(value)) === starValue,
+        onchange: () => {
+          if (!val(readonly)) {
+            if (typeof onchange === "function") {
+              onchange(starValue);
+            }
+            else if (typeof value === "function") {
+              value(starValue);
+            }
+          }
+        },
+      });
+    })
+  );
+};
--- a/src/ui/Select.js
+++ b/src/ui/Select.js
@@ -0,0 +1,43 @@
+// components/Select.js
+import { $html, $for } from "sigpro";
+import { val, ui, joinClass } from "../core/utils.js";
+
+export const Select = (props) => {
+  const { ui: uiProps, class: className, label, options, value, ...rest } = props;
+
+  const dynamicClasses = [
+    ui('select', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const selectClasses = joinClass("select select-bordered w-full", dynamicClasses);
+
+  const selectEl = $html(
+    "select",
+    {
+      ...rest,
+      class: selectClasses,
+      value: value
+    },
+    $for(
+      () => val(options) || [],
+      (opt) =>
+        $html(
+          "option",
+          {
+            value: opt.value,
+            $selected: () => String(val(value)) === String(opt.value),
+          },
+          opt.label,
+        ),
+      (opt) => opt.value,
+    ),
+  );
+
+  if (!label) return selectEl;
+
+  return $html("label", { class: "fieldset-label flex flex-col gap-1" }, [
+    $html("span", {}, label), 
+    selectEl
+  ]);
+};
--- a/src/ui/Stack.js
+++ b/src/ui/Stack.js
@@ -0,0 +1,16 @@
+// components/Stack.js
+import { $html } from "sigpro";
+import { ui, joinClass } from "../core/utils.js";
+
+export const Stack = (props, children) => {
+  const { ui: uiProps, class: className, ...rest } = props;
+
+  const dynamicClasses = [
+    ui('stack', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const classes = joinClass("stack", dynamicClasses);
+
+  return $html("div", { ...rest, class: classes }, children);
+};
--- a/src/ui/Stat.js
+++ b/src/ui/Stat.js
@@ -0,0 +1,21 @@
+// components/Stat.js
+import { $html } from "sigpro";
+import { val, ui, joinClass } from "../core/utils.js";
+
+export const Stat = (props) => {
+  const { ui: uiProps, class: className, icon, label, value, desc, ...rest } = props;
+
+  const dynamicClasses = [
+    ui('stat', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const classes = joinClass("stat", dynamicClasses);
+
+  return $html("div", { ...rest, class: classes }, [
+    icon && $html("div", { class: "stat-figure text-secondary" }, icon),
+    label && $html("div", { class: "stat-title" }, label),
+    $html("div", { class: "stat-value" }, () => val(value) ?? value),
+    desc && $html("div", { class: "stat-desc" }, desc),
+  ]);
+};
--- a/src/ui/Swap.js
+++ b/src/ui/Swap.js
@@ -0,0 +1,23 @@
+// components/Swap.js
+import { $html } from "sigpro";
+import { ui, val, joinClass } from "../core/utils.js";
+
+export const Swap = (props) => {
+  const { ui: uiProps, class: className, value, on, off, ...rest } = props;
+
+  const dynamicClasses = [
+    ui('swap', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const classes = joinClass("swap", dynamicClasses);
+
+  return $html("label", { ...rest, class: classes }, [
+    $html("input", {
+      type: "checkbox",
+      checked: val(value)
+    }),
+    $html("div", { class: "swap-on" }, on),
+    $html("div", { class: "swap-off" }, off),
+  ]);
+};
--- a/src/ui/Table.js
+++ b/src/ui/Table.js
@@ -0,0 +1,67 @@
+// components/Table.js
+import { $html, $for, $if } from "sigpro";
+import { val, ui, joinClass } from "../core/utils.js";
+import { tt } from "../core/i18n.js";
+
+export const Table = (props) => {
+  const { 
+    ui: uiProps,
+    class: className,
+    items = [], 
+    columns = [], 
+    keyFn, 
+    zebra = false, 
+    pinRows = false, 
+    empty = tt("nodata")(),
+    ...rest 
+  } = props;
+
+  const dynamicClasses = [
+    ui('table', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const tableClass = () => joinClass(
+    "table", 
+    `${val(zebra) ? "table-zebra" : ""} ${val(pinRows) ? "table-pin-rows" : ""} ${dynamicClasses}`
+  );
+
+  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))
+        )
+      ]),
+      $html("tbody", {}, [
+        $for(items, (item, index) => {
+          return $html("tr", { class: "hover" }, 
+            columns.map(col => {
+              const cellContent = () => {
+                if (col.render) return col.render(item, index);
+                const value = item[col.key];
+                return val(value);
+              };
+              return $html("td", { class: col.class || "" }, [cellContent]);
+            })
+          );
+        }, keyFn || ((item, idx) => item.id || idx)),
+        
+        $if(() => val(items).length === 0, () => 
+          $html("tr", {}, [
+            $html("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 || ""))
+          )
+        ])
+      )
+    ])
+  ]);
+};
--- a/src/ui/Tabs.js
+++ b/src/ui/Tabs.js
@@ -0,0 +1,69 @@
+// components/Tabs.js
+import { $, $html, $for } from "sigpro";
+import { val, ui, joinClass } from "../core/utils.js";
+
+export const Tabs = (props) => {
+  const { ui: uiProps, class: className, items, activeIndex = $(0), ...rest } = props;
+  
+  const dynamicClasses = [
+    ui('tabs', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const tabsClasses = joinClass("tabs tabs-box", dynamicClasses);
+  const itemsSignal = typeof items === "function" ? items : () => items || [];
+
+  // Si no se provee activeIndex, creamos uno interno
+  const internalActive = $(0);
+  const currentActive = activeIndex !== undefined ? activeIndex : internalActive;
+
+  const handleTabClick = (idx, onClick) => (e) => {
+    if (typeof currentActive === "function") {
+      currentActive(idx);
+    }
+    onClick?.(e);
+  };
+
+  return $html("div", { ...rest, class: "flex flex-col gap-4 w-full" }, [
+    $html(
+      "div",
+      {
+        role: "tablist",
+        class: tabsClasses,
+      },
+      $for(
+        itemsSignal,
+        (it, idx) => {
+          const isActive = val(it.active) ?? (currentActive() === idx);
+          
+          return $html(
+            "a",
+            {
+              role: "tab",
+              class: () => joinClass(
+                "tab", 
+                isActive && "tab-active", 
+                val(it.disabled) && "tab-disabled", 
+                it.tip && "tooltip"
+              ),
+              "data-tip": it.tip,
+              onclick: !val(it.disabled) ? handleTabClick(idx, it.onclick) : undefined,
+            },
+            it.label,
+          );
+        },
+        (t, idx) => t.label + idx,
+      ),
+    ),
+    () => {
+      const activeItem = itemsSignal().find((it, idx) => 
+        val(it.active) ?? (currentActive() === idx)
+      );
+      if (!activeItem) return null;
+      const content = val(activeItem.content);
+      return $html("div", { class: "p-4" }, [
+        typeof content === "function" ? content() : content
+      ]);
+    },
+  ]);
+};
--- a/src/ui/Timeline.js
+++ b/src/ui/Timeline.js
@@ -0,0 +1,54 @@
+// components/Timeline.js
+import { $html, $for } from "sigpro";
+import { val, ui, joinClass, getIcon } from "../core/utils.js";
+
+export const Timeline = (props) => {
+  const { ui: uiProps, class: className, items = [], vertical = true, compact = false, ...rest } = props;
+
+  const dynamicClasses = [
+    ui('timeline', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const iconMap = {
+    info: "lucide--info",
+    success: "lucide--check-circle",
+    warning: "lucide--alert-triangle",
+    error: "lucide--alert-circle",
+  };
+
+  return $html(
+    "ul",
+    {
+      ...rest,
+      class: () => joinClass(
+        `timeline ${val(vertical) ? "timeline-vertical" : "timeline-horizontal"} ${val(compact) ? "timeline-compact" : ""}`,
+        dynamicClasses
+      ),
+    },
+    [
+      $for(
+        items,
+        (item, i) => {
+          const isFirst = i === 0;
+          const isLast = i === val(items).length - 1;
+          const itemType = item.type || "success";
+          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" }, [
+              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,
+          ]);
+        },
+        (item, i) => item.id || i,
+      ),
+    ],
+  );
+};
--- a/src/ui/Toast.js
+++ b/src/ui/Toast.js
@@ -0,0 +1,67 @@
+// components/Toast.js
+import { $html, $mount } from "sigpro";
+import { getIcon } from "../core/utils.js";
+import { Button } from "./Button.js";
+
+/** TOAST (Imperative Function) */
+export const Toast = (message, type = "alert-success", duration = 3500) => {
+  let container = document.getElementById("sigpro-toast-container");
+  
+  if (!container) {
+    container = $html("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" });
+  container.appendChild(toastHost);
+
+  let timeoutId;
+
+  const close = () => {
+    clearTimeout(timeoutId);
+    const el = toastHost.firstElementChild;
+    if (el && !el.classList.contains("opacity-0")) {
+      el.classList.add("translate-x-full", "opacity-0");
+      setTimeout(() => {
+        instance.destroy();
+        toastHost.remove();
+        if (!container.hasChildNodes()) container.remove();
+      }, 300);
+    } else {
+      instance.destroy();
+      toastHost.remove();
+    }
+  };
+
+  const ToastComponent = () => {
+    const closeIcon = getIcon("lucide--x");
+    
+    const el = $html(
+      "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 
+        }, closeIcon)
+      ],
+    );
+
+    requestAnimationFrame(() => el.classList.remove("translate-x-10", "opacity-0"));
+    return el;
+  };
+
+  const instance = $mount(ToastComponent, toastHost);
+
+  if (duration > 0) {
+    timeoutId = setTimeout(close, duration);
+  }
+
+  return close;
+};
--- a/src/ui/Tooltip.js
+++ b/src/ui/Tooltip.js
@@ -0,0 +1,19 @@
+// components/Tooltip.js
+import { $html } from "sigpro";
+import { ui, val, joinClass } from "../core/utils.js";
+
+export const Tooltip = (props, children) => {
+  const { ui: uiProps, class: className, tip, position = "top", ...rest } = props;
+
+  const dynamicClasses = [
+    ui('tooltip', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const tipText = typeof tip === "function" ? tip() : tip;
+  const pos = typeof position === "function" ? position() : position;
+
+  const classes = joinClass(`tooltip tooltip-${pos}`, dynamicClasses);
+
+  return $html("div", { ...rest, class: classes, "data-tip": tipText }, children);
+};
--- a/src/ui/index.js
+++ b/src/ui/index.js
@@ -0,0 +1,110 @@
+import * as AccordionModule from './Accordion.js';
+import * as AlertModule from './Alert.js';
+import * as AutocompleteModule from './Autocomplete.js';
+import * as BadgeModule from './Badge.js';
+import * as ButtonModule from './Button.js';
+import * as CheckboxModule from './Checkbox.js';
+import * as ColorpickerModule from './Colorpicker.js';
+import * as DatepickerModule from './Datepicker.js';
+import * as DrawerModule from './Drawer.js';
+import * as DropdownModule from './Dropdown.js';
+import * as FabModule from './Fab.js';
+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 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';
+import * as RadioModule from './Radio.js';
+import * as RangeModule from './Range.js';
+import * as RatingModule from './Rating.js';
+import * as SelectModule from './Select.js';
+import * as StackModule from './Stack.js';
+import * as StatModule from './Stat.js';
+import * as SwapModule from './Swap.js';
+import * as TableModule from './Table.js';
+import * as TabsModule from './Tabs.js';
+import * as TimelineModule from './Timeline.js';
+import * as ToastModule from './Toast.js';
+import * as TooltipModule from './Tooltip.js';
+
+export * from './Accordion.js';
+export * from './Alert.js';
+export * from './Autocomplete.js';
+export * from './Badge.js';
+export * from './Button.js';
+export * from './Checkbox.js';
+export * from './Colorpicker.js';
+export * from './Datepicker.js';
+export * from './Drawer.js';
+export * from './Dropdown.js';
+export * from "./Fab.js";
+export * from './Fieldset.js';
+export * from './Fileinput.js';
+export * from './Indicator.js';
+export * from './Input.js';
+export * from './List.js';
+export * from './Loading.js';
+export * from './Menu.js';
+export * from './Modal.js';
+export * from './Navbar.js';
+export * from './Radio.js';
+export * from './Range.js';
+export * from './Rating.js';
+export * from './Select.js';
+export * from './Stack.js';
+export * from './Stat.js';
+export * from './Swap.js';
+export * from './Table.js';
+export * from './Tabs.js';
+export * from './Timeline.js';
+export * from './Toast.js';
+export * from './Tooltip.js';
+
+const Components = {
+  ...AccordionModule,
+  ...AlertModule,
+  ...AutocompleteModule,
+  ...BadgeModule,
+  ...ButtonModule,
+  ...CheckboxModule,
+  ...ColorpickerModule,
+  ...DatepickerModule,
+  ...DrawerModule,
+  ...DropdownModule,
+  ...FabModule,
+  ...FieldsetModule,
+  ...FileinputModule,
+  ...IndicatorModule,
+  ...InputModule,
+  ...ListModule,
+  ...LoadingModule,
+  ...MenuModule,
+  ...ModalModule,
+  ...NavbarModule,
+  ...RadioModule,
+  ...RangeModule,
+  ...RatingModule,
+  ...SelectModule,
+  ...StackModule,
+  ...StatModule,
+  ...SwapModule,
+  ...TableModule,
+  ...TabsModule,
+  ...TimelineModule,
+  ...ToastModule,
+  ...TooltipModule
+};
+
+export default {
+  ...Components,
+  install: (target = window) => {
+    Object.entries(Components).forEach(([name, component]) => {
+      target[name] = component;
+    });
+    console.log("🚀 SigproUI");
+  }
+};