Complete 1 fase docs components

dist/sigpro-ui.cjs

@@ -750,39 +750,55 @@ var DrawerModule = /*#__PURE__*/Object.freeze({
   Drawer: Drawer
 });
 
-/** DROPDOWN */
 const Dropdown = (props, children) => {
-  const { label, icon, ...rest } = props;
+  const { label, icon, items, ...rest } = props;
 
-  return sigpro.$html(
+  const renderContent = () => {
-    "div",
+    if (items) {
-    {
+      const source = typeof items === "function" ? items : () => items;
-      ...rest,
+      return sigpro.$html("ul", { 
-      class: () => `dropdown ${val(props.class) || props.class || ""}`,
+        tabindex: 0, 
-    },
+        class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-300" 
-    [
+      }, [
-      sigpro.$html(
+        sigpro.$for(source, (item) => 
-        "div",
+          sigpro.$html("li", {}, [
-        {
+            sigpro.$html("a", { 
-          tabindex: 0,
+              class: item.class || "",
-          role: "button",
+              onclick: (e) => {
-          class: "btn m-1 flex items-center gap-2",
+                if (item.onclick) item.onclick(e);
-        },
+                if (document.activeElement) document.activeElement.blur();
-        [
+              }
-          icon ? (typeof icon === "function" ? icon() : icon) : null, 
+            }, [
-          label ? (typeof label === "function" ? label() : label) : null
+              item.icon ? sigpro.$html("span", {}, item.icon) : null,
-        ],
+              sigpro.$html("span", {}, item.label)
-      ),
+            ])
-      sigpro.$html(
+          ])
-        "ul",
+        )
-        {
+      ]);
-          tabindex: 0,
+    }
-          class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300",
+
-        },
+    return sigpro.$html("div", { 
-        [typeof children === "function" ? children() : children],
+      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 sigpro.$html("div", {
+    ...rest,
+    class: () => `dropdown ${val(props.class) || ""}`,
+  }, [
+    sigpro.$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()
+  ]);
 };
 
 var DropdownModule = /*#__PURE__*/Object.freeze({
@@ -792,18 +808,15 @@ var DropdownModule = /*#__PURE__*/Object.freeze({
 
 /** FAB (Floating Action Button) */
 const Fab = (props) => {
-  const { icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;
+  const { icon, label, actions = [], position = "bottom-6 right-6", class: className = "", ...rest } = props;
 
   return sigpro.$html(
     "div",
     {
       ...rest,
-      class: () => `fab fixed ${val(position)} flex flex-col-reverse items-end gap-3 z-[100] ${
+      class: `fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100] ${className}`,
-        props.class || ""
-      }`,
     },
     [
-      // Botón principal
       sigpro.$html(
         "div",
         {
@@ -817,7 +830,6 @@ const Fab = (props) => {
         ],
       ),
 
-      // Acciones secundarias (se despliegan hacia arriba)
       ...val(actions).map((act) =>
         sigpro.$html("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
           act.label ? sigpro.$html("span", { class: "badge badge-ghost shadow-sm whitespace-nowrap" }, act.label) : null,

dist/sigpro-ui.esm.js

@@ -746,39 +746,55 @@ var DrawerModule = /*#__PURE__*/Object.freeze({
   Drawer: Drawer
 });
 
-/** DROPDOWN */
 const Dropdown = (props, children) => {
-  const { label, icon, ...rest } = props;
+  const { label, icon, items, ...rest } = props;
 
-  return $html(
+  const renderContent = () => {
-    "div",
+    if (items) {
-    {
+      const source = typeof items === "function" ? items : () => items;
-      ...rest,
+      return $html("ul", { 
-      class: () => `dropdown ${val(props.class) || props.class || ""}`,
+        tabindex: 0, 
-    },
+        class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-300" 
-    [
+      }, [
-      $html(
+        $for(source, (item) => 
-        "div",
+          $html("li", {}, [
-        {
+            $html("a", { 
-          tabindex: 0,
+              class: item.class || "",
-          role: "button",
+              onclick: (e) => {
-          class: "btn m-1 flex items-center gap-2",
+                if (item.onclick) item.onclick(e);
-        },
+                if (document.activeElement) document.activeElement.blur();
-        [
+              }
-          icon ? (typeof icon === "function" ? icon() : icon) : null, 
+            }, [
-          label ? (typeof label === "function" ? label() : label) : null
+              item.icon ? $html("span", {}, item.icon) : null,
-        ],
+              $html("span", {}, item.label)
-      ),
+            ])
-      $html(
+          ])
-        "ul",
+        )
-        {
+      ]);
-          tabindex: 0,
+    }
-          class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300",
+
-        },
+    return $html("div", { 
-        [typeof children === "function" ? children() : children],
+      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: () => `dropdown ${val(props.class) || ""}`,
+  }, [
+    $html("div", {
+      tabindex: 0,
+      role: "button",
+      class: "btn m-1 flex items-center gap-2",
+    }, [
+      icon ? (typeof icon === "function" ? icon() : icon) : null, 
+      label ? (typeof label === "function" ? label() : label) : null
+    ]),
+    renderContent()
+  ]);
 };
 
 var DropdownModule = /*#__PURE__*/Object.freeze({
@@ -788,18 +804,15 @@ var DropdownModule = /*#__PURE__*/Object.freeze({
 
 /** FAB (Floating Action Button) */
 const Fab = (props) => {
-  const { icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;
+  const { icon, label, actions = [], position = "bottom-6 right-6", class: className = "", ...rest } = props;
 
   return $html(
     "div",
     {
       ...rest,
-      class: () => `fab fixed ${val(position)} flex flex-col-reverse items-end gap-3 z-[100] ${
+      class: `fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100] ${className}`,
-        props.class || ""
-      }`,
     },
     [
-      // Botón principal
       $html(
         "div",
         {
@@ -813,7 +826,6 @@ const Fab = (props) => {
         ],
       ),
 
-      // Acciones secundarias (se despliegan hacia arriba)
       ...val(actions).map((act) =>
         $html("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
           act.label ? $html("span", { class: "badge badge-ghost shadow-sm whitespace-nowrap" }, act.label) : null,

dist/sigpro-ui.umd.js

@@ -747,39 +747,55 @@ var SigProUI = (function (exports, sigpro) {
     Drawer: Drawer
   });
 
-  /** DROPDOWN */
   const Dropdown = (props, children) => {
-    const { label, icon, ...rest } = props;
+    const { label, icon, items, ...rest } = props;
 
-    return sigpro.$html(
+    const renderContent = () => {
-      "div",
+      if (items) {
-      {
+        const source = typeof items === "function" ? items : () => items;
-        ...rest,
+        return sigpro.$html("ul", { 
-        class: () => `dropdown ${val(props.class) || props.class || ""}`,
+          tabindex: 0, 
-      },
+          class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-300" 
-      [
+        }, [
-        sigpro.$html(
+          sigpro.$for(source, (item) => 
-          "div",
+            sigpro.$html("li", {}, [
-          {
+              sigpro.$html("a", { 
-            tabindex: 0,
+                class: item.class || "",
-            role: "button",
+                onclick: (e) => {
-            class: "btn m-1 flex items-center gap-2",
+                  if (item.onclick) item.onclick(e);
-          },
+                  if (document.activeElement) document.activeElement.blur();
-          [
+                }
-            icon ? (typeof icon === "function" ? icon() : icon) : null, 
+              }, [
-            label ? (typeof label === "function" ? label() : label) : null
+                item.icon ? sigpro.$html("span", {}, item.icon) : null,
-          ],
+                sigpro.$html("span", {}, item.label)
-        ),
+              ])
-        sigpro.$html(
+            ])
-          "ul",
+          )
-          {
+        ]);
-            tabindex: 0,
+      }
-            class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300",
+
-          },
+      return sigpro.$html("div", { 
-          [typeof children === "function" ? children() : children],
+        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 sigpro.$html("div", {
+      ...rest,
+      class: () => `dropdown ${val(props.class) || ""}`,
+    }, [
+      sigpro.$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()
+    ]);
   };
 
   var DropdownModule = /*#__PURE__*/Object.freeze({
@@ -789,18 +805,15 @@ var SigProUI = (function (exports, sigpro) {
 
   /** FAB (Floating Action Button) */
   const Fab = (props) => {
-    const { icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;
+    const { icon, label, actions = [], position = "bottom-6 right-6", class: className = "", ...rest } = props;
 
     return sigpro.$html(
       "div",
       {
         ...rest,
-        class: () => `fab fixed ${val(position)} flex flex-col-reverse items-end gap-3 z-[100] ${
+        class: `fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100] ${className}`,
-        props.class || ""
-      }`,
       },
       [
-        // Botón principal
         sigpro.$html(
           "div",
           {
@@ -814,7 +827,6 @@ var SigProUI = (function (exports, sigpro) {
           ],
         ),
 
-        // Acciones secundarias (se despliegan hacia arriba)
         ...val(actions).map((act) =>
           sigpro.$html("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
             act.label ? sigpro.$html("span", { class: "badge badge-ghost shadow-sm whitespace-nowrap" }, act.label) : null,

docs/_sidebar.md

@@ -7,46 +7,43 @@
   * [Quick Reference](quick.md)
 
 * **Forms & Inputs**
-  * [Button](components/button.md)
-  * [Input](components/input.md)
-  * [Select](components/select.md)
   * [Autocomplete](components/autocomplete.md)
-  * [Datepicker](components/datepicker.md)
+  * [Button](components/button.md)
-  * [Colorpicker](components/colorpicker.md)
   * [Checkbox](components/checkbox.md)
+  * [Colorpicker](components/colorpicker.md)
+  * [Datepicker](components/datepicker.md)
+  * [Input](components/input.md)
   * [Radio](components/radio.md)
   * [Range](components/range.md)
   * [Rating](components/rating.md)
+  * [Select](components/select.md)
   * [Swap](components/swap.md)
 
 * **Data Display**
-  * [Table](components/table.md)
-  * [List](components/list.md)
   * [Badge](components/badge.md)
-  * [Stat](components/stat.md)
-  * [Timeline](components/timeline.md)
-  * [Stack](components/stack.md)
   * [Indicator](components/indicator.md)
+  * [List](components/list.md)
+  * [Stack](components/stack.md)
+  * [Stat](components/stat.md)
+  * [Table](components/table.md)
+  * [Timeline](components/timeline.md)
 
 * **Feedback & Overlays**
   * [Alert](components/alert.md)
+  * [Loading](components/loading.md)
   * [Modal](components/modal.md)
   * [Toast](components/toast.md)
-  * [Loading](components/loading.md)
   * [Tooltip](components/tooltip.md)
 
 * **Navigation & Layout**
-  * [Navbar](components/navbar.md)
-  * [Menu](components/menu.md)
-  * [Drawer](components/drawer.md)
-  * [Tabs](components/tabs.md)
   * [Accordion](components/accordion.md)
+  * [Drawer](components/drawer.md)
   * [Dropdown](components/dropdown.md)
-  * [Fieldset](components/fieldset.md)
-
-* **Utilities**
   * [Fab](components/fab.md)
-  * [Toast](components/toast.md)
+  * [Fieldset](components/fieldset.md)
+  * [Menu](components/menu.md)
+  * [Navbar](components/navbar.md)
+  * [Tabs](components/tabs.md)
 
 * **Advanced**
   * [Reactivity Guide](advanced/reactivity.md)

docs/components/accordion.md

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

docs/components/drawer.md

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

docs/components/dropdown.md

@@ -0,0 +1,489 @@
+# Dropdown
+
+Dropdown component for creating menus, selectors, and action panels that appear when triggered. Supports both array-based items and custom content.
+
+## Tag
+
+`Dropdown`
+
+## Props
+
+| Prop         | Type                                    | Default     | Description                                      |
+| :----------- | :-------------------------------------- | :---------- | :----------------------------------------------- |
+| `label`      | `string \| VNode \| Signal`             | `-`         | Button label or content                          |
+| `icon`       | `string \| VNode \| Signal`             | `-`         | Icon displayed next to label                     |
+| `items`      | `Array<MenuItem> \| Signal<Array>`      | `-`         | Array of menu items (alternative to children)    |
+| `class`      | `string`                                | `''`        | Additional CSS classes (DaisyUI + Tailwind)      |
+| `children`   | `VNode \| function`                     | `-`         | Custom dropdown content (alternative to items)   |
+
+### MenuItem Structure (when using `items`)
+
+| Property    | Type                         | Description                                      |
+| :---------- | :--------------------------- | :----------------------------------------------- |
+| `label`     | `string \| VNode`            | Menu item text                                   |
+| `icon`      | `string \| VNode`            | Optional icon for the menu item                  |
+| `onclick`   | `function`                   | Click handler                                    |
+| `class`     | `string`                     | Additional CSS classes for the menu item         |
+
+## Live Examples
+
+### Basic Dropdown (Items Array)
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  return Dropdown({
+    label: 'Options',
+    items: [
+      { label: 'Profile', onclick: () => Toast('Profile clicked', 'alert-info', 2000) },
+      { label: 'Settings', onclick: () => Toast('Settings clicked', 'alert-info', 2000) },
+      { label: 'Logout', onclick: () => Toast('Logged out', 'alert-warning', 2000), class: 'text-error' }
+    ]
+  });
+};
+$mount(BasicDemo, '#demo-basic');
+```
+
+### With Icons (Items Array)
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-icons" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const IconsDemo = () => {
+  return Dropdown({
+    label: 'Menu',
+    icon: '☰',
+    items: [
+      { icon: '👤', label: 'Profile', onclick: () => Toast('Profile', 'alert-info', 2000) },
+      { icon: '⭐', label: 'Favorites', onclick: () => Toast('Favorites', 'alert-info', 2000) },
+      { icon: '📁', label: 'Documents', onclick: () => Toast('Documents', 'alert-info', 2000) },
+      { icon: '⚙️', label: 'Settings', onclick: () => Toast('Settings', 'alert-info', 2000) }
+    ]
+  });
+};
+$mount(IconsDemo, '#demo-icons');
+```
+
+### Action Dropdown (Items Array)
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-actions" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const ActionsDemo = () => {
+  const handleAction = (action) => {
+    Toast(`${action} action`, 'alert-info', 2000);
+  };
+  
+  return Dropdown({
+    label: 'Actions',
+    class: 'dropdown-end',
+    items: [
+      { icon: '✏️', label: 'Edit', onclick: () => handleAction('Edit') },
+      { icon: '📋', label: 'Copy', onclick: () => handleAction('Copy') },
+      { icon: '🗑️', label: 'Delete', onclick: () => handleAction('Delete'), class: 'text-error' }
+    ]
+  });
+};
+$mount(ActionsDemo, '#demo-actions');
+```
+
+### User Dropdown (Items Array)
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-user" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const UserDropdown = () => {
+  return Dropdown({
+    label: Span({ class: 'flex items-center gap-2' }, [
+      Div({ class: 'avatar placeholder' }, [
+        Div({ class: 'bg-primary text-primary-content rounded-full w-8 h-8 flex items-center justify-center text-sm' }, 'JD')
+      ]),
+      'John Doe'
+    ]),
+    class: 'dropdown-end',
+    items: [
+      { label: 'Profile', onclick: () => Toast('Profile', 'alert-info', 2000) },
+      { label: 'Settings', onclick: () => Toast('Settings', 'alert-info', 2000) },
+      { label: 'Sign Out', onclick: () => Toast('Signed out', 'alert-warning', 2000), class: 'text-error' }
+    ]
+  });
+};
+$mount(UserDropdown, '#demo-user');
+```
+
+### Reactive Items
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const ReactiveDropdown = () => {
+  const count = $(0);
+  
+  const items = () => [
+    { label: `Count: ${count()}`, onclick: () => {} },
+    { label: 'Increment', onclick: () => count(count() + 1) },
+    { label: 'Decrement', onclick: () => count(count() - 1) },
+    { label: 'Reset', onclick: () => count(0) }
+  ];
+  
+  return Dropdown({
+    label: () => `Counter (${count()})`,
+    items: items
+  });
+};
+$mount(ReactiveDropdown, '#demo-reactive');
+```
+
+### Notification Dropdown (Custom Children)
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-notifications" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const NotificationsDropdown = () => {
+  const notifications = $([
+    { id: 1, title: 'New message', time: '5 min ago', read: false },
+    { id: 2, title: 'Update available', time: '1 hour ago', read: false },
+    { id: 3, title: 'Task completed', time: '2 hours ago', read: true }
+  ]);
+  
+  const markAsRead = (id) => {
+    notifications(notifications().map(n => 
+      n.id === id ? { ...n, read: true } : n
+    ));
+  };
+  
+  const unreadCount = () => notifications().filter(n => !n.read).length;
+  
+  return Dropdown({
+    label: Span({ class: 'relative' }, [
+      '🔔',
+      () => unreadCount() > 0 ? Span({ class: 'badge badge-xs badge-error absolute -top-1 -right-2' }, unreadCount()) : null
+    ]),
+    class: 'dropdown-end',
+    children: () => Div({ class: 'w-80' }, [
+      Div({ class: 'p-3 border-b border-base-300 font-bold' }, `Notifications (${unreadCount()} unread)`),
+      Div({ class: 'max-h-64 overflow-y-auto' }, notifications().map(notif =>
+        Div({ 
+          class: `p-3 border-b border-base-300 cursor-pointer hover:bg-base-200 ${!notif.read ? 'bg-primary/5' : ''}`,
+          onclick: () => markAsRead(notif.id)
+        }, [
+          Div({ class: 'font-medium' }, notif.title),
+          Div({ class: 'text-xs opacity-60' }, notif.time),
+          !notif.read && Span({ class: 'badge badge-xs badge-primary mt-1' }, 'New')
+        ])
+      )),
+      Div({ class: 'p-2 text-center' }, [
+        Button({ 
+          class: 'btn btn-xs btn-ghost w-full',
+          onclick: () => notifications([])
+        }, 'Clear all')
+      ])
+    ])
+  });
+};
+$mount(NotificationsDropdown, '#demo-notifications');
+```
+
+### Custom Content Dropdown
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-custom" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const CustomDropdown = () => {
+  const selected = $('Option 1');
+  
+  return Dropdown({
+    label: () => selected(),
+    children: () => Div({ class: 'p-4 min-w-48' }, [
+      Div({ class: 'text-sm font-bold mb-2' }, 'Select an option'),
+      Div({ class: 'flex flex-col gap-1' }, [
+        Button({ 
+          class: 'btn btn-ghost btn-sm justify-start',
+          onclick: () => selected('Option 1')
+        }, 'Option 1'),
+        Button({ 
+          class: 'btn btn-ghost btn-sm justify-start',
+          onclick: () => selected('Option 2')
+        }, 'Option 2'),
+        Button({ 
+          class: 'btn btn-ghost btn-sm justify-start',
+          onclick: () => selected('Option 3')
+        }, 'Option 3')
+      ])
+    ])
+  });
+};
+$mount(CustomDropdown, '#demo-custom');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4 justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  const commonItems = [
+    { label: 'Item 1', onclick: () => Toast('Item 1', 'alert-info', 2000) },
+    { label: 'Item 2', onclick: () => Toast('Item 2', 'alert-info', 2000) },
+    { label: 'Item 3', onclick: () => Toast('Item 3', 'alert-info', 2000) }
+  ];
+  
+  return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
+    Dropdown({ label: 'Default', items: commonItems }),
+    Dropdown({ label: 'With Icon', icon: '☰', items: commonItems }),
+    Dropdown({ label: 'End Position', class: 'dropdown-end', items: commonItems })
+  ]);
+};
+$mount(VariantsDemo, '#demo-variants');
+```
+
+<script>
+  (function() {
+    const initDropdownExamples = () => {
+      
+      // 1. Basic Dropdown (Items Array)
+      const basicTarget = document.querySelector('#demo-basic');
+      if (basicTarget && !basicTarget.hasChildNodes()) {
+        const BasicDemo = () => {
+          return Dropdown({
+            label: 'Options',
+            items: [
+              { label: 'Profile', onclick: () => Toast('Profile clicked', 'alert-info', 2000) },
+              { label: 'Settings', onclick: () => Toast('Settings clicked', 'alert-info', 2000) },
+              { label: 'Logout', onclick: () => Toast('Logged out', 'alert-warning', 2000), class: 'text-error' }
+            ]
+          });
+        };
+        $mount(BasicDemo, basicTarget);
+      }
+
+      // 2. With Icons (Items Array)
+      const iconsTarget = document.querySelector('#demo-icons');
+      if (iconsTarget && !iconsTarget.hasChildNodes()) {
+        const IconsDemo = () => {
+          return Dropdown({
+            label: 'Menu',
+            icon: '☰',
+            items: [
+              { icon: '👤', label: 'Profile', onclick: () => Toast('Profile', 'alert-info', 2000) },
+              { icon: '⭐', label: 'Favorites', onclick: () => Toast('Favorites', 'alert-info', 2000) },
+              { icon: '📁', label: 'Documents', onclick: () => Toast('Documents', 'alert-info', 2000) },
+              { icon: '⚙️', label: 'Settings', onclick: () => Toast('Settings', 'alert-info', 2000) }
+            ]
+          });
+        };
+        $mount(IconsDemo, iconsTarget);
+      }
+
+      // 3. Action Dropdown (Items Array)
+      const actionsTarget = document.querySelector('#demo-actions');
+      if (actionsTarget && !actionsTarget.hasChildNodes()) {
+        const ActionsDemo = () => {
+          const handleAction = (action) => {
+            Toast(`${action} action`, 'alert-info', 2000);
+          };
+          
+          return Dropdown({
+            label: 'Actions',
+            class: 'dropdown-end',
+            items: [
+              { icon: '✏️', label: 'Edit', onclick: () => handleAction('Edit') },
+              { icon: '📋', label: 'Copy', onclick: () => handleAction('Copy') },
+              { icon: '🗑️', label: 'Delete', onclick: () => handleAction('Delete'), class: 'text-error' }
+            ]
+          });
+        };
+        $mount(ActionsDemo, actionsTarget);
+      }
+
+      // 4. User Dropdown (Items Array)
+      const userTarget = document.querySelector('#demo-user');
+      if (userTarget && !userTarget.hasChildNodes()) {
+        const UserDropdown = () => {
+          return Dropdown({
+            label: Span({ class: 'flex items-center gap-2' }, [
+              Div({ class: 'avatar placeholder' }, [
+                Div({ class: 'bg-primary text-primary-content rounded-full w-8 h-8 flex items-center justify-center text-sm' }, 'JD')
+              ]),
+              'John Doe'
+            ]),
+            class: 'dropdown-end',
+            items: [
+              { label: 'Profile', onclick: () => Toast('Profile', 'alert-info', 2000) },
+              { label: 'Settings', onclick: () => Toast('Settings', 'alert-info', 2000) },
+              { label: 'Sign Out', onclick: () => Toast('Signed out', 'alert-warning', 2000), class: 'text-error' }
+            ]
+          });
+        };
+        $mount(UserDropdown, userTarget);
+      }
+
+      // 5. Reactive Items
+      const reactiveTarget = document.querySelector('#demo-reactive');
+      if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
+        const ReactiveDropdown = () => {
+          const count = $(0);
+          
+          const items = () => [
+            { label: `Count: ${count()}`, onclick: () => {} },
+            { label: 'Increment', onclick: () => count(count() + 1) },
+            { label: 'Decrement', onclick: () => count(count() - 1) },
+            { label: 'Reset', onclick: () => count(0) }
+          ];
+          
+          return Dropdown({
+            label: () => `Counter (${count()})`,
+            items: items
+          });
+        };
+        $mount(ReactiveDropdown, reactiveTarget);
+      }
+
+      // 6. Notification Dropdown (Custom Children)
+      const notifTarget = document.querySelector('#demo-notifications');
+      if (notifTarget && !notifTarget.hasChildNodes()) {
+        const NotificationsDropdown = () => {
+          const notifications = $([
+            { id: 1, title: 'New message', time: '5 min ago', read: false },
+            { id: 2, title: 'Update available', time: '1 hour ago', read: false },
+            { id: 3, title: 'Task completed', time: '2 hours ago', read: true }
+          ]);
+          
+          const markAsRead = (id) => {
+            notifications(notifications().map(n => 
+              n.id === id ? { ...n, read: true } : n
+            ));
+          };
+          
+          const unreadCount = () => notifications().filter(n => !n.read).length;
+          
+          return Dropdown({
+            label: Span({ class: 'relative' }, [
+              '🔔',
+              () => unreadCount() > 0 ? Span({ class: 'badge badge-xs badge-error absolute -top-1 -right-2' }, unreadCount()) : null
+            ]),
+            class: 'dropdown-end',
+            children: () => Div({ class: 'w-80' }, [
+              Div({ class: 'p-3 border-b border-base-300 font-bold' }, `Notifications (${unreadCount()} unread)`),
+              Div({ class: 'max-h-64 overflow-y-auto' }, notifications().map(notif =>
+                Div({ 
+                  class: `p-3 border-b border-base-300 cursor-pointer hover:bg-base-200 ${!notif.read ? 'bg-primary/5' : ''}`,
+                  onclick: () => markAsRead(notif.id)
+                }, [
+                  Div({ class: 'font-medium' }, notif.title),
+                  Div({ class: 'text-xs opacity-60' }, notif.time),
+                  !notif.read && Span({ class: 'badge badge-xs badge-primary mt-1' }, 'New')
+                ])
+              )),
+              Div({ class: 'p-2 text-center' }, [
+                Button({ 
+                  class: 'btn btn-xs btn-ghost w-full',
+                  onclick: () => notifications([])
+                }, 'Clear all')
+              ])
+            ])
+          });
+        };
+        $mount(NotificationsDropdown, notifTarget);
+      }
+
+      // 7. Custom Content Dropdown
+      const customTarget = document.querySelector('#demo-custom');
+      if (customTarget && !customTarget.hasChildNodes()) {
+        const CustomDropdown = () => {
+          const selected = $('Option 1');
+          
+          return Dropdown({
+            label: () => selected(),
+            children: () => Div({ class: 'p-4 min-w-48' }, [
+              Div({ class: 'text-sm font-bold mb-2' }, 'Select an option'),
+              Div({ class: 'flex flex-col gap-1' }, [
+                Button({ 
+                  class: 'btn btn-ghost btn-sm justify-start',
+                  onclick: () => selected('Option 1')
+                }, 'Option 1'),
+                Button({ 
+                  class: 'btn btn-ghost btn-sm justify-start',
+                  onclick: () => selected('Option 2')
+                }, 'Option 2'),
+                Button({ 
+                  class: 'btn btn-ghost btn-sm justify-start',
+                  onclick: () => selected('Option 3')
+                }, 'Option 3')
+              ])
+            ])
+          });
+        };
+        $mount(CustomDropdown, customTarget);
+      }
+
+      // 8. All Variants
+      const variantsTarget = document.querySelector('#demo-variants');
+      if (variantsTarget && !variantsTarget.hasChildNodes()) {
+        const VariantsDemo = () => {
+          const commonItems = [
+            { label: 'Item 1', onclick: () => Toast('Item 1', 'alert-info', 2000) },
+            { label: 'Item 2', onclick: () => Toast('Item 2', 'alert-info', 2000) },
+            { label: 'Item 3', onclick: () => Toast('Item 3', 'alert-info', 2000) }
+          ];
+          
+          return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
+            Dropdown({ label: 'Default', items: commonItems }),
+            Dropdown({ label: 'With Icon', icon: '☰', items: commonItems }),
+            Dropdown({ label: 'End Position', class: 'dropdown-end', items: commonItems })
+          ]);
+        };
+        $mount(VariantsDemo, variantsTarget);
+      }
+    };
+
+    initDropdownExamples();
+    
+    if (window.$docsify) {
+      window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
+        hook.doneEach(initDropdownExamples);
+      });
+    }
+  })();
+</script>

docs/components/fab.md

@@ -0,0 +1,688 @@
+# Fab
+
+Floating Action Button (FAB) component for primary actions with expandable menu options. Each example uses a container with `position: relative` and explicit height to position the FAB correctly.
+
+## Tag
+
+`Fab`
+
+## Props
+
+| Prop         | Type                                    | Default          | Description                                      |
+| :----------- | :-------------------------------------- | :--------------- | :----------------------------------------------- |
+| `icon`       | `string \| VNode \| Signal`             | `-`              | Main FAB icon                                    |
+| `label`      | `string \| VNode \| Signal`             | `-`              | Text label for main button                       |
+| `actions`    | `Array<Action> \| Signal<Array>`        | `[]`             | Array of action buttons that expand from FAB     |
+| `position`   | `string`                                | `'bottom-6 right-6'` | CSS position classes (e.g., 'bottom-6 left-6') |
+| `class`      | `string`                                | `''`             | Additional CSS classes (DaisyUI + Tailwind)      |
+
+### Action Structure
+
+| Property    | Type                         | Description                                      |
+| :---------- | :--------------------------- | :----------------------------------------------- |
+| `label`     | `string \| VNode`            | Label text shown next to action button           |
+| `icon`      | `string \| VNode`            | Icon for the action button                       |
+| `onclick`   | `function`                   | Click handler                                    |
+| `class`     | `string`                     | Additional CSS classes for the action button     |
+
+## Live Examples
+
+### Basic FAB
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[300px] relative"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
+    Fab({
+      icon: '➕',
+      actions: [
+        { icon: '📝', label: 'New Note', onclick: () => Toast('Create note', 'alert-info', 2000) },
+        { icon: '📷', label: 'Take Photo', onclick: () => Toast('Open camera', 'alert-info', 2000) },
+        { icon: '📎', label: 'Attach File', onclick: () => Toast('Attach file', 'alert-info', 2000) }
+      ]
+    })
+  ]);
+};
+$mount(BasicDemo, '#demo-basic');
+```
+
+### With Label
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-label" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[300px] relative"></div>
+  </div>
+</div>
+
+```javascript
+const LabelDemo = () => {
+  return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
+    Fab({
+      label: 'Create',
+      icon: '✨',
+      actions: [
+        { icon: '📝', label: 'Document', onclick: () => Toast('New document', 'alert-success', 2000) },
+        { icon: '🎨', label: 'Design', onclick: () => Toast('New design', 'alert-success', 2000) },
+        { icon: '📊', label: 'Spreadsheet', onclick: () => Toast('New spreadsheet', 'alert-success', 2000) }
+      ]
+    })
+  ]);
+};
+$mount(LabelDemo, '#demo-label');
+```
+
+### Different Positions
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-positions" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[500px] relative"></div>
+  </div>
+</div>
+
+```javascript
+const PositionsDemo = () => {
+  const position = $('bottom-6 right-6');
+  
+  return Div({ class: 'relative h-[500px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
+    Div({ class: 'absolute top-4 left-4 z-20 bg-base-200 p-2 rounded-lg shadow' }, [
+      Select({
+        value: position,
+        options: [
+          { value: 'bottom-6 right-6', label: 'Bottom Right' },
+          { value: 'bottom-6 left-6', label: 'Bottom Left' },
+          { value: 'top-6 right-6', label: 'Top Right' },
+          { value: 'top-6 left-6', label: 'Top Left' }
+        ],
+        onchange: (e) => position(e.target.value)
+      })
+    ]),
+    Div({ class: 'absolute inset-0 flex items-center justify-center text-sm opacity-50 pointer-events-none' }, [
+      'FAB position changes relative to this container'
+    ]),
+    Fab({
+      position: () => position(),
+      icon: '🧭',
+      actions: [
+        { icon: '⬅️', label: 'Bottom Left', onclick: () => position('bottom-6 left-6') },
+        { icon: '➡️', label: 'Bottom Right', onclick: () => position('bottom-6 right-6') },
+        { icon: '⬆️', label: 'Top Right', onclick: () => position('top-6 right-6') },
+        { icon: '⬇️', label: 'Top Left', onclick: () => position('top-6 left-6') }
+      ]
+    })
+  ]);
+};
+$mount(PositionsDemo, '#demo-positions');
+```
+
+### Color Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-colors" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[300px] relative"></div>
+  </div>
+</div>
+
+```javascript
+const ColorsDemo = () => {
+  const variant = $('primary');
+  
+  const variants = {
+    primary: { class: 'btn-primary', icon: '🔵' },
+    secondary: { class: 'btn-secondary', icon: '🟣' },
+    accent: { class: 'btn-accent', icon: '🔴' },
+    info: { class: 'btn-info', icon: '🔷' },
+    success: { class: 'btn-success', icon: '🟢' },
+    warning: { class: 'btn-warning', icon: '🟡' },
+    error: { class: 'btn-error', icon: '🔴' }
+  };
+  
+  return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
+    Div({ class: 'absolute top-4 left-4 z-20 bg-base-200 p-2 rounded-lg shadow' }, [
+      Select({
+        value: variant,
+        options: Object.keys(variants).map(v => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) })),
+        onchange: (e) => variant(e.target.value)
+      })
+    ]),
+    Fab({
+      class: variants[variant()].class,
+      icon: variants[variant()].icon,
+      actions: [
+        { icon: '📝', label: 'Action 1', onclick: () => Toast('Action 1', 'alert-info', 2000) },
+        { icon: '🎨', label: 'Action 2', onclick: () => Toast('Action 2', 'alert-info', 2000) },
+        { icon: '⚙️', label: 'Action 3', onclick: () => Toast('Action 3', 'alert-info', 2000) }
+      ]
+    })
+  ]);
+};
+$mount(ColorsDemo, '#demo-colors');
+```
+
+### Reactive Actions
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[300px] relative"></div>
+  </div>
+</div>
+
+```javascript
+const ReactiveActions = () => {
+  const count = $(0);
+  
+  const actions = () => [
+    { 
+      icon: '🔢', 
+      label: `Count: ${count()}`, 
+      onclick: () => {} 
+    },
+    { 
+      icon: '➕', 
+      label: 'Increment', 
+      onclick: () => count(count() + 1) 
+    },
+    { 
+      icon: '➖', 
+      label: 'Decrement', 
+      onclick: () => count(count() - 1) 
+    },
+    { 
+      icon: '🔄', 
+      label: 'Reset', 
+      onclick: () => count(0) 
+    }
+  ];
+  
+  return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
+    Fab({
+      icon: () => count() > 0 ? `🔢 ${count()}` : '🎛️',
+      actions: actions
+    })
+  ]);
+};
+$mount(ReactiveActions, '#demo-reactive');
+```
+
+### Document Actions
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-document" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[300px] relative"></div>
+  </div>
+</div>
+
+```javascript
+const DocumentActions = () => {
+  const saved = $(false);
+  
+  const handleSave = () => {
+    saved(true);
+    Toast('Document saved!', 'alert-success', 2000);
+    setTimeout(() => saved(false), 3000);
+  };
+  
+  return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
+    Div({ class: 'absolute inset-0 flex flex-col items-center justify-center' }, [
+      Div({ class: 'text-6xl mb-4' }, '📄'),
+      Div({ class: 'text-sm opacity-70' }, 'Untitled Document'),
+      () => saved() ? Div({ class: 'mt-4' }, Alert({ type: 'success', message: '✓ Saved successfully' })) : null
+    ]),
+    Fab({
+      icon: '✏️',
+      actions: [
+        { icon: '💾', label: 'Save', onclick: handleSave },
+        { icon: '📋', label: 'Copy', onclick: () => Toast('Copied!', 'alert-info', 2000) },
+        { icon: '✂️', label: 'Cut', onclick: () => Toast('Cut!', 'alert-info', 2000) },
+        { icon: '📎', label: 'Share', onclick: () => Toast('Share dialog', 'alert-info', 2000) }
+      ]
+    })
+  ]);
+};
+$mount(DocumentActions, '#demo-document');
+```
+
+### Messaging FAB
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-messaging" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[300px] relative"></div>
+  </div>
+</div>
+
+```javascript
+const MessagingFAB = () => {
+  const unread = $(3);
+  
+  return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
+    Div({ class: 'absolute inset-0 flex flex-col items-center justify-center' }, [
+      Div({ class: 'text-6xl mb-4' }, '💬'),
+      Div({ class: 'text-sm opacity-70' }, 'Messages'),
+      () => unread() > 0 ? Div({ class: 'badge badge-error mt-2' }, `${unread()} unread`) : null
+    ]),
+    Fab({
+      icon: () => `💬${unread() > 0 ? ` ${unread()}` : ''}`,
+      class: 'btn-primary',
+      actions: [
+        { 
+          icon: '👤', 
+          label: 'New Message', 
+          onclick: () => Toast('Start new conversation', 'alert-info', 2000) 
+        },
+        { 
+          icon: '👥', 
+          label: 'Group Chat', 
+          onclick: () => Toast('Create group', 'alert-info', 2000) 
+        },
+        { 
+          icon: '📞', 
+          label: 'Voice Call', 
+          onclick: () => Toast('Start call', 'alert-info', 2000) 
+        },
+        { 
+          icon: '📹', 
+          label: 'Video Call', 
+          onclick: () => Toast('Start video call', 'alert-info', 2000) 
+        },
+        { 
+          icon: '🔔', 
+          label: () => `Mark as read (${unread()})`, 
+          onclick: () => {
+            unread(0);
+            Toast('All messages read', 'alert-success', 2000);
+          } 
+        }
+      ]
+    })
+  ]);
+};
+$mount(MessagingFAB, '#demo-messaging');
+```
+
+### Flower Style FAB
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-flower" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[300px] relative"></div>
+  </div>
+</div>
+
+```javascript
+const FlowerDemo = () => {
+  return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
+    Div({ class: 'absolute inset-0 flex items-center justify-center text-sm opacity-50' }, [
+      'Flower style FAB (quarter circle arrangement)'
+    ]),
+    Fab({
+      icon: '🌸',
+      class: 'fab-flower',
+      actions: [
+        { icon: '📷', label: 'Camera', onclick: () => Toast('Camera', 'alert-info', 2000) },
+        { icon: '🎨', label: 'Gallery', onclick: () => Toast('Gallery', 'alert-info', 2000) },
+        { icon: '🎤', label: 'Voice', onclick: () => Toast('Voice', 'alert-info', 2000) },
+        { icon: '📍', label: 'Location', onclick: () => Toast('Location', 'alert-info', 2000) }
+      ]
+    })
+  ]);
+};
+$mount(FlowerDemo, '#demo-flower');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[400px] relative"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  const actions = [
+    { icon: '⭐', label: 'Favorite', onclick: () => Toast('Favorited', 'alert-info', 2000) },
+    { icon: '🔔', label: 'Remind', onclick: () => Toast('Reminder set', 'alert-info', 2000) },
+    { icon: '📅', label: 'Schedule', onclick: () => Toast('Scheduled', 'alert-info', 2000) }
+  ];
+  
+  return Div({ class: 'relative h-[400px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
+    Div({ class: 'grid grid-cols-2 gap-4 p-4 h-full' }, [
+      Div({ class: 'relative border rounded-lg bg-base-200' }, [
+        Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Primary'),
+        Fab({ icon: '🔵', class: 'btn-primary', actions, position: 'bottom-6 left-6' })
+      ]),
+      Div({ class: 'relative border rounded-lg bg-base-200' }, [
+        Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Secondary'),
+        Fab({ icon: '🟣', class: 'btn-secondary', actions, position: 'bottom-6 right-6' })
+      ]),
+      Div({ class: 'relative border rounded-lg bg-base-200' }, [
+        Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Accent'),
+        Fab({ icon: '🔴', class: 'btn-accent', actions, position: 'top-6 left-6' })
+      ]),
+      Div({ class: 'relative border rounded-lg bg-base-200' }, [
+        Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Success'),
+        Fab({ icon: '🟢', class: 'btn-success', actions, position: 'top-6 right-6' })
+      ])
+    ])
+  ]);
+};
+$mount(VariantsDemo, '#demo-variants');
+```
+
+<script>
+  (function() {
+    const initFabExamples = () => {
+      
+      // 1. Basic FAB
+      const basicTarget = document.querySelector('#demo-basic');
+      if (basicTarget && !basicTarget.hasChildNodes()) {
+        const BasicDemo = () => {
+          return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
+            Fab({
+              icon: '➕',
+              actions: [
+                { icon: '📝', label: 'New Note', onclick: () => Toast('Create note', 'alert-info', 2000) },
+                { icon: '📷', label: 'Take Photo', onclick: () => Toast('Open camera', 'alert-info', 2000) },
+                { icon: '📎', label: 'Attach File', onclick: () => Toast('Attach file', 'alert-info', 2000) }
+              ]
+            })
+          ]);
+        };
+        $mount(BasicDemo, basicTarget);
+      }
+
+      // 2. With Label
+      const labelTarget = document.querySelector('#demo-label');
+      if (labelTarget && !labelTarget.hasChildNodes()) {
+        const LabelDemo = () => {
+          return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
+            Fab({
+              label: 'Create',
+              icon: '✨',
+              actions: [
+                { icon: '📝', label: 'Document', onclick: () => Toast('New document', 'alert-success', 2000) },
+                { icon: '🎨', label: 'Design', onclick: () => Toast('New design', 'alert-success', 2000) },
+                { icon: '📊', label: 'Spreadsheet', onclick: () => Toast('New spreadsheet', 'alert-success', 2000) }
+              ]
+            })
+          ]);
+        };
+        $mount(LabelDemo, labelTarget);
+      }
+
+      // 3. Different Positions
+      const positionsTarget = document.querySelector('#demo-positions');
+      if (positionsTarget && !positionsTarget.hasChildNodes()) {
+        const PositionsDemo = () => {
+          const position = $('bottom-6 right-6');
+          
+          return Div({ class: 'relative h-[500px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
+            Div({ class: 'absolute top-4 left-4 z-20 bg-base-200 p-2 rounded-lg shadow' }, [
+              Select({
+                value: position,
+                options: [
+                  { value: 'bottom-6 right-6', label: 'Bottom Right' },
+                  { value: 'bottom-6 left-6', label: 'Bottom Left' },
+                  { value: 'top-6 right-6', label: 'Top Right' },
+                  { value: 'top-6 left-6', label: 'Top Left' }
+                ],
+                onchange: (e) => position(e.target.value)
+              })
+            ]),
+            Div({ class: 'absolute inset-0 flex items-center justify-center text-sm opacity-50 pointer-events-none' }, [
+              'FAB position changes relative to this container'
+            ]),
+            Fab({
+              position: () => position(),
+              icon: '🧭',
+              actions: [
+                { icon: '⬅️', label: 'Bottom Left', onclick: () => position('bottom-6 left-6') },
+                { icon: '➡️', label: 'Bottom Right', onclick: () => position('bottom-6 right-6') },
+                { icon: '⬆️', label: 'Top Right', onclick: () => position('top-6 right-6') },
+                { icon: '⬇️', label: 'Top Left', onclick: () => position('top-6 left-6') }
+              ]
+            })
+          ]);
+        };
+        $mount(PositionsDemo, positionsTarget);
+      }
+
+      // 4. Color Variants
+      const colorsTarget = document.querySelector('#demo-colors');
+      if (colorsTarget && !colorsTarget.hasChildNodes()) {
+        const ColorsDemo = () => {
+          const variant = $('primary');
+          
+          const variants = {
+            primary: { class: 'btn-primary', icon: '🔵' },
+            secondary: { class: 'btn-secondary', icon: '🟣' },
+            accent: { class: 'btn-accent', icon: '🔴' },
+            info: { class: 'btn-info', icon: '🔷' },
+            success: { class: 'btn-success', icon: '🟢' },
+            warning: { class: 'btn-warning', icon: '🟡' },
+            error: { class: 'btn-error', icon: '🔴' }
+          };
+          
+          return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
+            Div({ class: 'absolute top-4 left-4 z-20 bg-base-200 p-2 rounded-lg shadow' }, [
+              Select({
+                value: variant,
+                options: Object.keys(variants).map(v => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) })),
+                onchange: (e) => variant(e.target.value)
+              })
+            ]),
+            Fab({
+              class: variants[variant()].class,
+              icon: variants[variant()].icon,
+              actions: [
+                { icon: '📝', label: 'Action 1', onclick: () => Toast('Action 1', 'alert-info', 2000) },
+                { icon: '🎨', label: 'Action 2', onclick: () => Toast('Action 2', 'alert-info', 2000) },
+                { icon: '⚙️', label: 'Action 3', onclick: () => Toast('Action 3', 'alert-info', 2000) }
+              ]
+            })
+          ]);
+        };
+        $mount(ColorsDemo, colorsTarget);
+      }
+
+      // 5. Reactive Actions
+      const reactiveTarget = document.querySelector('#demo-reactive');
+      if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
+        const ReactiveActions = () => {
+          const count = $(0);
+          
+          const actions = () => [
+            { 
+              icon: '🔢', 
+              label: `Count: ${count()}`, 
+              onclick: () => {} 
+            },
+            { 
+              icon: '➕', 
+              label: 'Increment', 
+              onclick: () => count(count() + 1) 
+            },
+            { 
+              icon: '➖', 
+              label: 'Decrement', 
+              onclick: () => count(count() - 1) 
+            },
+            { 
+              icon: '🔄', 
+              label: 'Reset', 
+              onclick: () => count(0) 
+            }
+          ];
+          
+          return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
+            Fab({
+              icon: () => count() > 0 ? `🔢 ${count()}` : '🎛️',
+              actions: actions
+            })
+          ]);
+        };
+        $mount(ReactiveActions, reactiveTarget);
+      }
+
+      // 6. Document Actions
+      const documentTarget = document.querySelector('#demo-document');
+      if (documentTarget && !documentTarget.hasChildNodes()) {
+        const DocumentActions = () => {
+          const saved = $(false);
+          
+          const handleSave = () => {
+            saved(true);
+            Toast('Document saved!', 'alert-success', 2000);
+            setTimeout(() => saved(false), 3000);
+          };
+          
+          return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
+            Div({ class: 'absolute inset-0 flex flex-col items-center justify-center' }, [
+              Div({ class: 'text-6xl mb-4' }, '📄'),
+              Div({ class: 'text-sm opacity-70' }, 'Untitled Document'),
+              () => saved() ? Div({ class: 'mt-4' }, Alert({ type: 'success', message: '✓ Saved successfully' })) : null
+            ]),
+            Fab({
+              icon: '✏️',
+              actions: [
+                { icon: '💾', label: 'Save', onclick: handleSave },
+                { icon: '📋', label: 'Copy', onclick: () => Toast('Copied!', 'alert-info', 2000) },
+                { icon: '✂️', label: 'Cut', onclick: () => Toast('Cut!', 'alert-info', 2000) },
+                { icon: '📎', label: 'Share', onclick: () => Toast('Share dialog', 'alert-info', 2000) }
+              ]
+            })
+          ]);
+        };
+        $mount(DocumentActions, documentTarget);
+      }
+
+      // 7. Messaging FAB
+      const messagingTarget = document.querySelector('#demo-messaging');
+      if (messagingTarget && !messagingTarget.hasChildNodes()) {
+        const MessagingFAB = () => {
+          const unread = $(3);
+          
+          return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
+            Div({ class: 'absolute inset-0 flex flex-col items-center justify-center' }, [
+              Div({ class: 'text-6xl mb-4' }, '💬'),
+              Div({ class: 'text-sm opacity-70' }, 'Messages'),
+              () => unread() > 0 ? Div({ class: 'badge badge-error mt-2' }, `${unread()} unread`) : null
+            ]),
+            Fab({
+              icon: () => `💬${unread() > 0 ? ` ${unread()}` : ''}`,
+              class: 'btn-primary',
+              actions: [
+                { 
+                  icon: '👤', 
+                  label: 'New Message', 
+                  onclick: () => Toast('Start new conversation', 'alert-info', 2000) 
+                },
+                { 
+                  icon: '👥', 
+                  label: 'Group Chat', 
+                  onclick: () => Toast('Create group', 'alert-info', 2000) 
+                },
+                { 
+                  icon: '📞', 
+                  label: 'Voice Call', 
+                  onclick: () => Toast('Start call', 'alert-info', 2000) 
+                },
+                { 
+                  icon: '📹', 
+                  label: 'Video Call', 
+                  onclick: () => Toast('Start video call', 'alert-info', 2000) 
+                },
+                { 
+                  icon: '🔔', 
+                  label: () => `Mark as read (${unread()})`, 
+                  onclick: () => {
+                    unread(0);
+                    Toast('All messages read', 'alert-success', 2000);
+                  } 
+                }
+              ]
+            })
+          ]);
+        };
+        $mount(MessagingFAB, messagingTarget);
+      }
+
+      // 8. Flower Style FAB
+      const flowerTarget = document.querySelector('#demo-flower');
+      if (flowerTarget && !flowerTarget.hasChildNodes()) {
+        const FlowerDemo = () => {
+          return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
+            Div({ class: 'absolute inset-0 flex items-center justify-center text-sm opacity-50' }, [
+              'Flower style FAB (quarter circle arrangement)'
+            ]),
+            Fab({
+              icon: '🌸',
+              class: 'fab-flower',
+              actions: [
+                { icon: '📷', label: 'Camera', onclick: () => Toast('Camera', 'alert-info', 2000) },
+                { icon: '🎨', label: 'Gallery', onclick: () => Toast('Gallery', 'alert-info', 2000) },
+                { icon: '🎤', label: 'Voice', onclick: () => Toast('Voice', 'alert-info', 2000) },
+                { icon: '📍', label: 'Location', onclick: () => Toast('Location', 'alert-info', 2000) }
+              ]
+            })
+          ]);
+        };
+        $mount(FlowerDemo, flowerTarget);
+      }
+
+      // 9. All Variants
+      const variantsTarget = document.querySelector('#demo-variants');
+      if (variantsTarget && !variantsTarget.hasChildNodes()) {
+        const VariantsDemo = () => {
+          const actions = [
+            { icon: '⭐', label: 'Favorite', onclick: () => Toast('Favorited', 'alert-info', 2000) },
+            { icon: '🔔', label: 'Remind', onclick: () => Toast('Reminder set', 'alert-info', 2000) },
+            { icon: '📅', label: 'Schedule', onclick: () => Toast('Scheduled', 'alert-info', 2000) }
+          ];
+          
+          return Div({ class: 'relative h-[400px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
+            Div({ class: 'grid grid-cols-2 gap-4 p-4 h-full' }, [
+              Div({ class: 'relative border rounded-lg bg-base-200' }, [
+                Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Primary'),
+                Fab({ icon: '🔵', class: 'btn-primary', actions, position: 'bottom-6 left-6' })
+              ]),
+              Div({ class: 'relative border rounded-lg bg-base-200' }, [
+                Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Secondary'),
+                Fab({ icon: '🟣', class: 'btn-secondary', actions, position: 'bottom-6 right-6' })
+              ]),
+              Div({ class: 'relative border rounded-lg bg-base-200' }, [
+                Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Accent'),
+                Fab({ icon: '🔴', class: 'btn-accent', actions, position: 'top-6 left-6' })
+              ]),
+              Div({ class: 'relative border rounded-lg bg-base-200' }, [
+                Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Success'),
+                Fab({ icon: '🟢', class: 'btn-success', actions, position: 'top-6 right-6' })
+              ])
+            ])
+          ]);
+        };
+        $mount(VariantsDemo, variantsTarget);
+      }
+    };
+
+    initFabExamples();
+    
+    if (window.$docsify) {
+      window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
+        hook.doneEach(initFabExamples);
+      });
+    }
+  })();
+</script>

docs/components/fieldset.md

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

docs/components/loading.md

@@ -0,0 +1,597 @@
+# Loading
+
+Loading spinner component for indicating loading states with customizable size and colors.
+
+## Tag
+
+`Loading`
+
+## Props
+
+| Prop         | Type                         | Default          | Description                                      |
+| :----------- | :--------------------------- | :--------------- | :----------------------------------------------- |
+| `$show`      | `boolean \| Signal<boolean>` | `true`           | Show/hide the loading spinner                    |
+| `class`      | `string`                     | `''`             | Additional CSS classes (DaisyUI loading variants)|
+
+## Live Examples
+
+### Basic Loading
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center items-center"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [
+    Loading({ $show: true, class: 'loading-spinner' }),
+    Loading({ $show: true, class: 'loading-dots' }),
+    Loading({ $show: true, class: 'loading-ring' }),
+    Loading({ $show: true, class: 'loading-ball' }),
+    Loading({ $show: true, class: 'loading-bars' }),
+    Loading({ $show: true, class: 'loading-infinity' })
+  ]);
+};
+$mount(BasicDemo, '#demo-basic');
+```
+
+### Loading Sizes
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-sizes" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center items-center"></div>
+  </div>
+</div>
+
+```javascript
+const SizesDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [
+    Div({ class: 'text-center' }, [
+      Loading({ $show: true, class: 'loading-spinner loading-xs' }),
+      Div({ class: 'text-xs mt-2' }, 'Extra Small')
+    ]),
+    Div({ class: 'text-center' }, [
+      Loading({ $show: true, class: 'loading-spinner loading-sm' }),
+      Div({ class: 'text-xs mt-2' }, 'Small')
+    ]),
+    Div({ class: 'text-center' }, [
+      Loading({ $show: true, class: 'loading-spinner loading-md' }),
+      Div({ class: 'text-xs mt-2' }, 'Medium')
+    ]),
+    Div({ class: 'text-center' }, [
+      Loading({ $show: true, class: 'loading-spinner loading-lg' }),
+      Div({ class: 'text-xs mt-2' }, 'Large')
+    ])
+  ]);
+};
+$mount(SizesDemo, '#demo-sizes');
+```
+
+### Loading Colors
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-colors" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center items-center"></div>
+  </div>
+</div>
+
+```javascript
+const ColorsDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [
+    Loading({ $show: true, class: 'loading-spinner text-primary' }),
+    Loading({ $show: true, class: 'loading-spinner text-secondary' }),
+    Loading({ $show: true, class: 'loading-spinner text-accent' }),
+    Loading({ $show: true, class: 'loading-spinner text-info' }),
+    Loading({ $show: true, class: 'loading-spinner text-success' }),
+    Loading({ $show: true, class: 'loading-spinner text-warning' }),
+    Loading({ $show: true, class: 'loading-spinner text-error' })
+  ]);
+};
+$mount(ColorsDemo, '#demo-colors');
+```
+
+### Button 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-button" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4 items-center"></div>
+  </div>
+</div>
+
+```javascript
+const ButtonDemo = () => {
+  const isLoading = $(false);
+  
+  const handleClick = async () => {
+    isLoading(true);
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    isLoading(false);
+    Toast('Operation completed!', 'alert-success', 2000);
+  };
+  
+  return Div({ class: 'flex flex-col gap-4 items-center' }, [
+    Button({ 
+      class: 'btn btn-primary',
+      loading: isLoading,
+      onclick: handleClick
+    }, 'Submit'),
+    Div({ class: 'text-sm opacity-70' }, 'Click the button to see loading state')
+  ]);
+};
+$mount(ButtonDemo, '#demo-button');
+```
+
+### Async Data Loading
+
+<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-async" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const AsyncDemo = () => {
+  const loading = $(false);
+  const data = $(null);
+  const error = $(null);
+  
+  const loadData = async () => {
+    loading(true);
+    error(null);
+    data(null);
+    
+    try {
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      const result = {
+        users: 1234,
+        posts: 5678,
+        comments: 9012
+      };
+      data(result);
+      Toast('Data loaded successfully!', 'alert-success', 2000);
+    } catch (err) {
+      error('Failed to load data');
+      Toast('Error loading data', 'alert-error', 2000);
+    } finally {
+      loading(false);
+    }
+  };
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({ class: 'flex justify-center' }, [
+      Button({ 
+        class: 'btn btn-primary',
+        onclick: loadData,
+        disabled: () => loading()
+      }, loading() ? 'Loading...' : 'Load Data')
+    ]),
+    Div({ class: 'relative min-h-[200px] flex items-center justify-center' }, [
+      () => loading() ? Loading({ $show: true, class: 'loading-spinner loading-lg' }) : null,
+      () => data() ? Div({ class: 'grid grid-cols-3 gap-4 w-full' }, [
+        Div({ class: 'stat' }, [
+          Div({ class: 'stat-title' }, 'Users'),
+          Div({ class: 'stat-value' }, data().users)
+        ]),
+        Div({ class: 'stat' }, [
+          Div({ class: 'stat-title' }, 'Posts'),
+          Div({ class: 'stat-value' }, data().posts)
+        ]),
+        Div({ class: 'stat' }, [
+          Div({ class: 'stat-title' }, 'Comments'),
+          Div({ class: 'stat-value' }, data().comments)
+        ])
+      ]) : null,
+      () => error() ? Alert({ type: 'error', message: error() }) : null
+    ])
+  ]);
+};
+$mount(AsyncDemo, '#demo-async');
+```
+
+### Full Page Loading
+
+<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-fullpage" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const FullpageDemo = () => {
+  const isLoading = $(false);
+  
+  const simulatePageLoad = () => {
+    isLoading(true);
+    setTimeout(() => {
+      isLoading(false);
+      Toast('Page loaded!', 'alert-success', 2000);
+    }, 2000);
+  };
+  
+  return Div({ class: 'relative' }, [
+    Div({ class: 'flex justify-center p-8' }, [
+      Button({ 
+        class: 'btn btn-primary',
+        onclick: simulatePageLoad
+      }, 'Simulate Page Load')
+    ]),
+    () => isLoading() ? Loading({ $show: true, class: 'loading-spinner loading-lg' }) : null
+  ]);
+};
+$mount(FullpageDemo, '#demo-fullpage');
+```
+
+### Conditional Loading
+
+<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-conditional" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const ConditionalDemo = () => {
+  const loadingState = $('idle');
+  const content = $('');
+  
+  const simulateAction = (action) => {
+    loadingState('loading');
+    setTimeout(() => {
+      content(`Action: ${action} completed at ${new Date().toLocaleTimeString()}`);
+      loadingState('success');
+      setTimeout(() => loadingState('idle'), 1500);
+    }, 1500);
+  };
+  
+  const loadingStates = {
+    idle: null,
+    loading: Loading({ $show: true, class: 'loading-spinner text-primary' }),
+    success: Alert({ type: 'success', message: '✓ Done!' })
+  };
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({ class: 'flex gap-2 justify-center' }, [
+      Button({ 
+        class: 'btn btn-sm',
+        onclick: () => simulateAction('Save')
+      }, 'Save'),
+      Button({ 
+        class: 'btn btn-sm',
+        onclick: () => simulateAction('Update')
+      }, 'Update'),
+      Button({ 
+        class: 'btn btn-sm',
+        onclick: () => simulateAction('Delete')
+      }, 'Delete')
+    ]),
+    Div({ class: 'flex justify-center min-h-[100px] items-center' }, [
+      () => loadingStates[loadingState()],
+      () => content() && loadingState() === 'idle' ? Div({ class: 'text-center' }, content()) : null
+    ])
+  ]);
+};
+$mount(ConditionalDemo, '#demo-conditional');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-6"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  return Div({ class: 'flex flex-col gap-6' }, [
+    Div({ class: 'text-center' }, [
+      Div({ class: 'text-sm font-bold mb-2' }, 'Spinner'),
+      Div({ class: 'flex gap-4 justify-center' }, [
+        Loading({ $show: true, class: 'loading-spinner loading-xs' }),
+        Loading({ $show: true, class: 'loading-spinner loading-sm' }),
+        Loading({ $show: true, class: 'loading-spinner loading-md' }),
+        Loading({ $show: true, class: 'loading-spinner loading-lg' })
+      ])
+    ]),
+    Div({ class: 'text-center' }, [
+      Div({ class: 'text-sm font-bold mb-2' }, 'Dots'),
+      Div({ class: 'flex gap-4 justify-center' }, [
+        Loading({ $show: true, class: 'loading-dots loading-xs' }),
+        Loading({ $show: true, class: 'loading-dots loading-sm' }),
+        Loading({ $show: true, class: 'loading-dots loading-md' }),
+        Loading({ $show: true, class: 'loading-dots loading-lg' })
+      ])
+    ]),
+    Div({ class: 'text-center' }, [
+      Div({ class: 'text-sm font-bold mb-2' }, 'Ring'),
+      Div({ class: 'flex gap-4 justify-center' }, [
+        Loading({ $show: true, class: 'loading-ring loading-xs' }),
+        Loading({ $show: true, class: 'loading-ring loading-sm' }),
+        Loading({ $show: true, class: 'loading-ring loading-md' }),
+        Loading({ $show: true, class: 'loading-ring loading-lg' })
+      ])
+    ])
+  ]);
+};
+$mount(VariantsDemo, '#demo-variants');
+```
+
+<script>
+  (function() {
+    const initLoadingExamples = () => {
+      
+      // 1. Basic Loading
+      const basicTarget = document.querySelector('#demo-basic');
+      if (basicTarget && !basicTarget.hasChildNodes()) {
+        const BasicDemo = () => {
+          return Div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [
+            Loading({ $show: true, class: 'loading-spinner' }),
+            Loading({ $show: true, class: 'loading-dots' }),
+            Loading({ $show: true, class: 'loading-ring' }),
+            Loading({ $show: true, class: 'loading-ball' }),
+            Loading({ $show: true, class: 'loading-bars' }),
+            Loading({ $show: true, class: 'loading-infinity' })
+          ]);
+        };
+        $mount(BasicDemo, basicTarget);
+      }
+
+      // 2. Loading Sizes
+      const sizesTarget = document.querySelector('#demo-sizes');
+      if (sizesTarget && !sizesTarget.hasChildNodes()) {
+        const SizesDemo = () => {
+          return Div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [
+            Div({ class: 'text-center' }, [
+              Loading({ $show: true, class: 'loading-spinner loading-xs' }),
+              Div({ class: 'text-xs mt-2' }, 'Extra Small')
+            ]),
+            Div({ class: 'text-center' }, [
+              Loading({ $show: true, class: 'loading-spinner loading-sm' }),
+              Div({ class: 'text-xs mt-2' }, 'Small')
+            ]),
+            Div({ class: 'text-center' }, [
+              Loading({ $show: true, class: 'loading-spinner loading-md' }),
+              Div({ class: 'text-xs mt-2' }, 'Medium')
+            ]),
+            Div({ class: 'text-center' }, [
+              Loading({ $show: true, class: 'loading-spinner loading-lg' }),
+              Div({ class: 'text-xs mt-2' }, 'Large')
+            ])
+          ]);
+        };
+        $mount(SizesDemo, sizesTarget);
+      }
+
+      // 3. Loading Colors
+      const colorsTarget = document.querySelector('#demo-colors');
+      if (colorsTarget && !colorsTarget.hasChildNodes()) {
+        const ColorsDemo = () => {
+          return Div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [
+            Loading({ $show: true, class: 'loading-spinner text-primary' }),
+            Loading({ $show: true, class: 'loading-spinner text-secondary' }),
+            Loading({ $show: true, class: 'loading-spinner text-accent' }),
+            Loading({ $show: true, class: 'loading-spinner text-info' }),
+            Loading({ $show: true, class: 'loading-spinner text-success' }),
+            Loading({ $show: true, class: 'loading-spinner text-warning' }),
+            Loading({ $show: true, class: 'loading-spinner text-error' })
+          ]);
+        };
+        $mount(ColorsDemo, colorsTarget);
+      }
+
+      // 4. Button Loading State
+      const buttonTarget = document.querySelector('#demo-button');
+      if (buttonTarget && !buttonTarget.hasChildNodes()) {
+        const ButtonDemo = () => {
+          const isLoading = $(false);
+          
+          const handleClick = async () => {
+            isLoading(true);
+            await new Promise(resolve => setTimeout(resolve, 2000));
+            isLoading(false);
+            Toast('Operation completed!', 'alert-success', 2000);
+          };
+          
+          return Div({ class: 'flex flex-col gap-4 items-center' }, [
+            Button({ 
+              class: 'btn btn-primary',
+              loading: isLoading,
+              onclick: handleClick
+            }, 'Submit'),
+            Div({ class: 'text-sm opacity-70' }, 'Click the button to see loading state')
+          ]);
+        };
+        $mount(ButtonDemo, buttonTarget);
+      }
+
+      // 5. Async Data Loading
+      const asyncTarget = document.querySelector('#demo-async');
+      if (asyncTarget && !asyncTarget.hasChildNodes()) {
+        const AsyncDemo = () => {
+          const loading = $(false);
+          const data = $(null);
+          const error = $(null);
+          
+          const loadData = async () => {
+            loading(true);
+            error(null);
+            data(null);
+            
+            try {
+              await new Promise(resolve => setTimeout(resolve, 2000));
+              const result = {
+                users: 1234,
+                posts: 5678,
+                comments: 9012
+              };
+              data(result);
+              Toast('Data loaded successfully!', 'alert-success', 2000);
+            } catch (err) {
+              error('Failed to load data');
+              Toast('Error loading data', 'alert-error', 2000);
+            } finally {
+              loading(false);
+            }
+          };
+          
+          return Div({ class: 'flex flex-col gap-4' }, [
+            Div({ class: 'flex justify-center' }, [
+              Button({ 
+                class: 'btn btn-primary',
+                onclick: loadData,
+                disabled: () => loading()
+              }, loading() ? 'Loading...' : 'Load Data')
+            ]),
+            Div({ class: 'relative min-h-[200px] flex items-center justify-center' }, [
+              () => loading() ? Loading({ $show: true, class: 'loading-spinner loading-lg' }) : null,
+              () => data() ? Div({ class: 'grid grid-cols-3 gap-4 w-full' }, [
+                Div({ class: 'stat' }, [
+                  Div({ class: 'stat-title' }, 'Users'),
+                  Div({ class: 'stat-value' }, data().users)
+                ]),
+                Div({ class: 'stat' }, [
+                  Div({ class: 'stat-title' }, 'Posts'),
+                  Div({ class: 'stat-value' }, data().posts)
+                ]),
+                Div({ class: 'stat' }, [
+                  Div({ class: 'stat-title' }, 'Comments'),
+                  Div({ class: 'stat-value' }, data().comments)
+                ])
+              ]) : null,
+              () => error() ? Alert({ type: 'error', message: error() }) : null
+            ])
+          ]);
+        };
+        $mount(AsyncDemo, asyncTarget);
+      }
+
+      // 6. Full Page Loading
+      const fullpageTarget = document.querySelector('#demo-fullpage');
+      if (fullpageTarget && !fullpageTarget.hasChildNodes()) {
+        const FullpageDemo = () => {
+          const isLoading = $(false);
+          
+          const simulatePageLoad = () => {
+            isLoading(true);
+            setTimeout(() => {
+              isLoading(false);
+              Toast('Page loaded!', 'alert-success', 2000);
+            }, 2000);
+          };
+          
+          return Div({ class: 'relative' }, [
+            Div({ class: 'flex justify-center p-8' }, [
+              Button({ 
+                class: 'btn btn-primary',
+                onclick: simulatePageLoad
+              }, 'Simulate Page Load')
+            ]),
+            () => isLoading() ? Loading({ $show: true, class: 'loading-spinner loading-lg' }) : null
+          ]);
+        };
+        $mount(FullpageDemo, fullpageTarget);
+      }
+
+      // 7. Conditional Loading
+      const conditionalTarget = document.querySelector('#demo-conditional');
+      if (conditionalTarget && !conditionalTarget.hasChildNodes()) {
+        const ConditionalDemo = () => {
+          const loadingState = $('idle');
+          const content = $('');
+          
+          const simulateAction = (action) => {
+            loadingState('loading');
+            setTimeout(() => {
+              content(`Action: ${action} completed at ${new Date().toLocaleTimeString()}`);
+              loadingState('success');
+              setTimeout(() => loadingState('idle'), 1500);
+            }, 1500);
+          };
+          
+          const loadingStates = {
+            idle: null,
+            loading: Loading({ $show: true, class: 'loading-spinner text-primary' }),
+            success: Alert({ type: 'success', message: '✓ Done!' })
+          };
+          
+          return Div({ class: 'flex flex-col gap-4' }, [
+            Div({ class: 'flex gap-2 justify-center' }, [
+              Button({ 
+                class: 'btn btn-sm',
+                onclick: () => simulateAction('Save')
+              }, 'Save'),
+              Button({ 
+                class: 'btn btn-sm',
+                onclick: () => simulateAction('Update')
+              }, 'Update'),
+              Button({ 
+                class: 'btn btn-sm',
+                onclick: () => simulateAction('Delete')
+              }, 'Delete')
+            ]),
+            Div({ class: 'flex justify-center min-h-[100px] items-center' }, [
+              () => loadingStates[loadingState()],
+              () => content() && loadingState() === 'idle' ? Div({ class: 'text-center' }, content()) : null
+            ])
+          ]);
+        };
+        $mount(ConditionalDemo, conditionalTarget);
+      }
+
+      // 8. All Variants
+      const variantsTarget = document.querySelector('#demo-variants');
+      if (variantsTarget && !variantsTarget.hasChildNodes()) {
+        const VariantsDemo = () => {
+          return Div({ class: 'flex flex-col gap-6' }, [
+            Div({ class: 'text-center' }, [
+              Div({ class: 'text-sm font-bold mb-2' }, 'Spinner'),
+              Div({ class: 'flex gap-4 justify-center' }, [
+                Loading({ $show: true, class: 'loading-spinner loading-xs' }),
+                Loading({ $show: true, class: 'loading-spinner loading-sm' }),
+                Loading({ $show: true, class: 'loading-spinner loading-md' }),
+                Loading({ $show: true, class: 'loading-spinner loading-lg' })
+              ])
+            ]),
+            Div({ class: 'text-center' }, [
+              Div({ class: 'text-sm font-bold mb-2' }, 'Dots'),
+              Div({ class: 'flex gap-4 justify-center' }, [
+                Loading({ $show: true, class: 'loading-dots loading-xs' }),
+                Loading({ $show: true, class: 'loading-dots loading-sm' }),
+                Loading({ $show: true, class: 'loading-dots loading-md' }),
+                Loading({ $show: true, class: 'loading-dots loading-lg' })
+              ])
+            ]),
+            Div({ class: 'text-center' }, [
+              Div({ class: 'text-sm font-bold mb-2' }, 'Ring'),
+              Div({ class: 'flex gap-4 justify-center' }, [
+                Loading({ $show: true, class: 'loading-ring loading-xs' }),
+                Loading({ $show: true, class: 'loading-ring loading-sm' }),
+                Loading({ $show: true, class: 'loading-ring loading-md' }),
+                Loading({ $show: true, class: 'loading-ring loading-lg' })
+              ])
+            ])
+          ]);
+        };
+        $mount(VariantsDemo, variantsTarget);
+      }
+    };
+
+    initLoadingExamples();
+    
+    if (window.$docsify) {
+      window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
+        hook.doneEach(initLoadingExamples);
+      });
+    }
+  })();
+</script>

docs/components/menu.md

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

docs/components/navbar.md

@@ -0,0 +1,551 @@
+# Navbar
+
+Navigation bar component for creating responsive headers with logo, navigation links, and actions.
+
+## Tag
+
+`Navbar`
+
+## Props
+
+| Prop         | Type                         | Default     | Description                                      |
+| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
+| `class`      | `string`                     | `''`        | Additional CSS classes (DaisyUI + Tailwind)      |
+| `children`   | `VNode \| Array<VNode>`      | `-`         | Navbar content (should contain left, center, right sections) |
+
+## Live Examples
+
+### Basic Navbar
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  return Navbar({ class: 'rounded-box' }, [
+    Div({ class: 'navbar-start' }, [
+      Span({ class: 'text-xl font-bold' }, 'Logo')
+    ]),
+    Div({ class: 'navbar-center hidden lg:flex' }, [
+      Span({ class: 'text-sm' }, 'Navigation Items')
+    ]),
+    Div({ class: 'navbar-end' }, [
+      Button({ class: 'btn btn-ghost btn-sm' }, 'Login')
+    ])
+  ]);
+};
+$mount(BasicDemo, '#demo-basic');
+```
+
+### With Navigation Links
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-links" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const LinksDemo = () => {
+  const active = $('home');
+  
+  return Navbar({ class: 'rounded-box' }, [
+    Div({ class: 'navbar-start' }, [
+      Span({ class: 'text-xl font-bold' }, 'MyApp')
+    ]),
+    Div({ class: 'navbar-center hidden lg:flex' }, [
+      Div({ class: 'menu menu-horizontal px-1' }, [
+        Button({ 
+          class: `btn btn-ghost btn-sm ${active() === 'home' ? 'btn-active' : ''}`,
+          onclick: () => active('home')
+        }, 'Home'),
+        Button({ 
+          class: `btn btn-ghost btn-sm ${active() === 'about' ? 'btn-active' : ''}`,
+          onclick: () => active('about')
+        }, 'About'),
+        Button({ 
+          class: `btn btn-ghost btn-sm ${active() === 'contact' ? 'btn-active' : ''}`,
+          onclick: () => active('contact')
+        }, 'Contact')
+      ])
+    ]),
+    Div({ class: 'navbar-end' }, [
+      Button({ class: 'btn btn-primary btn-sm' }, 'Sign Up')
+    ])
+  ]);
+};
+$mount(LinksDemo, '#demo-links');
+```
+
+### With Dropdown Menu
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-dropdown" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const DropdownDemo = () => {
+  return Navbar({ class: 'rounded-box' }, [
+    Div({ class: 'navbar-start' }, [
+      Div({ class: 'dropdown' }, [
+        Div({ tabindex: 0, role: 'button', class: 'btn btn-ghost lg:hidden' }, [
+          Span({ class: 'sr-only' }, 'Open menu'),
+          Icons.iconInfo
+        ]),
+        Div({ tabindex: 0, class: 'dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow' }, [
+          Div({ class: 'menu-item' }, 'Home'),
+          Div({ class: 'menu-item' }, 'About'),
+          Div({ class: 'menu-item' }, 'Contact')
+        ])
+      ]),
+      Span({ class: 'text-xl font-bold' }, 'MyApp')
+    ]),
+    Div({ class: 'navbar-center hidden lg:flex' }, [
+      Div({ class: 'menu menu-horizontal px-1' }, [
+        Div({ class: 'menu-item' }, 'Home'),
+        Div({ class: 'menu-item' }, 'About'),
+        Div({ class: 'menu-item' }, 'Contact')
+      ])
+    ]),
+    Div({ class: 'navbar-end' }, [
+      Button({ class: 'btn btn-primary btn-sm' }, 'Login')
+    ])
+  ]);
+};
+$mount(DropdownDemo, '#demo-dropdown');
+```
+
+### With Search
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-search" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const SearchDemo = () => {
+  const searchQuery = $('');
+  
+  return Navbar({ class: 'rounded-box' }, [
+    Div({ class: 'navbar-start' }, [
+      Span({ class: 'text-xl font-bold' }, 'MyApp')
+    ]),
+    Div({ class: 'navbar-center' }, [
+      Div({ class: 'form-control' }, [
+        Input({
+          placeholder: 'Search...',
+          value: searchQuery,
+          class: 'input input-bordered w-48 md:w-auto',
+          oninput: (e) => searchQuery(e.target.value)
+        })
+      ])
+    ]),
+    Div({ class: 'navbar-end' }, [
+      Button({ class: 'btn btn-ghost btn-circle' }, '🔔'),
+      Button({ class: 'btn btn-ghost btn-circle' }, '👤')
+    ])
+  ]);
+};
+$mount(SearchDemo, '#demo-search');
+```
+
+### With Avatar and Dropdown
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-avatar" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const AvatarDemo = () => {
+  return Navbar({ class: 'rounded-box' }, [
+    Div({ class: 'navbar-start' }, [
+      Span({ class: 'text-xl font-bold' }, 'MyApp')
+    ]),
+    Div({ class: 'navbar-center hidden lg:flex' }, [
+      Div({ class: 'menu menu-horizontal px-1' }, [
+        Div({ class: 'menu-item' }, 'Dashboard'),
+        Div({ class: 'menu-item' }, 'Projects'),
+        Div({ class: 'menu-item' }, 'Tasks')
+      ])
+    ]),
+    Div({ class: 'navbar-end' }, [
+      Div({ class: 'dropdown dropdown-end' }, [
+        Div({ tabindex: 0, role: 'button', class: 'btn btn-ghost btn-circle avatar' }, [
+          Div({ class: 'w-8 rounded-full bg-primary text-primary-content flex items-center justify-center' }, 'JD')
+        ]),
+        Div({ tabindex: 0, class: 'dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow' }, [
+          Div({ class: 'menu-item' }, 'Profile'),
+          Div({ class: 'menu-item' }, 'Settings'),
+          Div({ class: 'menu-item' }, 'Logout')
+        ])
+      ])
+    ])
+  ]);
+};
+$mount(AvatarDemo, '#demo-avatar');
+```
+
+### Responsive Navbar
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-responsive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const ResponsiveDemo = () => {
+  const isOpen = $(false);
+  
+  return Div({ class: 'flex flex-col' }, [
+    Navbar({ class: 'rounded-box' }, [
+      Div({ class: 'navbar-start' }, [
+        Button({ 
+          class: 'btn btn-ghost btn-circle lg:hidden',
+          onclick: () => isOpen(!isOpen())
+        }, '☰')
+      ]),
+      Div({ class: 'navbar-center' }, [
+        Span({ class: 'text-xl font-bold' }, 'MyApp')
+      ]),
+      Div({ class: 'navbar-end' }, [
+        Button({ class: 'btn btn-ghost btn-circle' }, '🔔')
+      ])
+    ]),
+    () => isOpen() ? Div({ class: 'flex flex-col gap-2 p-4 bg-base-200 rounded-box mt-2' }, [
+      Button({ class: 'btn btn-ghost justify-start' }, 'Home'),
+      Button({ class: 'btn btn-ghost justify-start' }, 'About'),
+      Button({ class: 'btn btn-ghost justify-start' }, 'Services'),
+      Button({ class: 'btn btn-ghost justify-start' }, 'Contact')
+    ]) : null
+  ]);
+};
+$mount(ResponsiveDemo, '#demo-responsive');
+```
+
+### With Brand and Actions
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-brand" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const BrandDemo = () => {
+  return Navbar({ class: 'rounded-box bg-primary text-primary-content' }, [
+    Div({ class: 'navbar-start' }, [
+      Span({ class: 'text-xl font-bold' }, 'Brand')
+    ]),
+    Div({ class: 'navbar-center hidden lg:flex' }, [
+      Div({ class: 'menu menu-horizontal px-1' }, [
+        Span({ class: 'text-sm' }, 'Features'),
+        Span({ class: 'text-sm' }, 'Pricing'),
+        Span({ class: 'text-sm' }, 'About')
+      ])
+    ]),
+    Div({ class: 'navbar-end' }, [
+      Button({ class: 'btn btn-ghost btn-sm' }, 'Login'),
+      Button({ class: 'btn btn-outline btn-sm ml-2' }, 'Sign Up')
+    ])
+  ]);
+};
+$mount(BrandDemo, '#demo-brand');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({ class: 'text-sm font-bold' }, 'Default Navbar'),
+    Navbar({ class: 'rounded-box' }, [
+      Div({ class: 'navbar-start' }, [Span({}, 'Start')]),
+      Div({ class: 'navbar-center' }, [Span({}, 'Center')]),
+      Div({ class: 'navbar-end' }, [Span({}, 'End')])
+    ]),
+    
+    Div({ class: 'text-sm font-bold mt-2' }, 'With Shadow'),
+    Navbar({ class: 'rounded-box shadow-lg' }, [
+      Div({ class: 'navbar-start' }, [Span({}, 'Logo')]),
+      Div({ class: 'navbar-end' }, [Button({ class: 'btn btn-sm' }, 'Button')])
+    ]),
+    
+    Div({ class: 'text-sm font-bold mt-2' }, 'With Background'),
+    Navbar({ class: 'rounded-box bg-base-300' }, [
+      Div({ class: 'navbar-start' }, [Span({ class: 'font-bold' }, 'Colored')]),
+      Div({ class: 'navbar-end' }, [Span({ class: 'text-sm' }, 'Info')])
+    ])
+  ]);
+};
+$mount(VariantsDemo, '#demo-variants');
+```
+
+<script>
+  (function() {
+    const initNavbarExamples = () => {
+      
+      // 1. Basic Navbar
+      const basicTarget = document.querySelector('#demo-basic');
+      if (basicTarget && !basicTarget.hasChildNodes()) {
+        const BasicDemo = () => {
+          return Navbar({ class: 'rounded-box' }, [
+            Div({ class: 'navbar-start' }, [
+              Span({ class: 'text-xl font-bold' }, 'Logo')
+            ]),
+            Div({ class: 'navbar-center hidden lg:flex' }, [
+              Span({ class: 'text-sm' }, 'Navigation Items')
+            ]),
+            Div({ class: 'navbar-end' }, [
+              Button({ class: 'btn btn-ghost btn-sm' }, 'Login')
+            ])
+          ]);
+        };
+        $mount(BasicDemo, basicTarget);
+      }
+
+      // 2. With Navigation Links
+      const linksTarget = document.querySelector('#demo-links');
+      if (linksTarget && !linksTarget.hasChildNodes()) {
+        const LinksDemo = () => {
+          const active = $('home');
+          
+          return Navbar({ class: 'rounded-box' }, [
+            Div({ class: 'navbar-start' }, [
+              Span({ class: 'text-xl font-bold' }, 'MyApp')
+            ]),
+            Div({ class: 'navbar-center hidden lg:flex' }, [
+              Div({ class: 'menu menu-horizontal px-1' }, [
+                Button({ 
+                  class: `btn btn-ghost btn-sm ${active() === 'home' ? 'btn-active' : ''}`,
+                  onclick: () => active('home')
+                }, 'Home'),
+                Button({ 
+                  class: `btn btn-ghost btn-sm ${active() === 'about' ? 'btn-active' : ''}`,
+                  onclick: () => active('about')
+                }, 'About'),
+                Button({ 
+                  class: `btn btn-ghost btn-sm ${active() === 'contact' ? 'btn-active' : ''}`,
+                  onclick: () => active('contact')
+                }, 'Contact')
+              ])
+            ]),
+            Div({ class: 'navbar-end' }, [
+              Button({ class: 'btn btn-primary btn-sm' }, 'Sign Up')
+            ])
+          ]);
+        };
+        $mount(LinksDemo, linksTarget);
+      }
+
+      // 3. With Dropdown Menu
+      const dropdownTarget = document.querySelector('#demo-dropdown');
+      if (dropdownTarget && !dropdownTarget.hasChildNodes()) {
+        const DropdownDemo = () => {
+          return Navbar({ class: 'rounded-box' }, [
+            Div({ class: 'navbar-start' }, [
+              Div({ class: 'dropdown' }, [
+                Div({ tabindex: 0, role: 'button', class: 'btn btn-ghost lg:hidden' }, [
+                  Span({ class: 'sr-only' }, 'Open menu'),
+                  Icons.iconInfo
+                ]),
+                Div({ tabindex: 0, class: 'dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow' }, [
+                  Div({ class: 'menu-item' }, 'Home'),
+                  Div({ class: 'menu-item' }, 'About'),
+                  Div({ class: 'menu-item' }, 'Contact')
+                ])
+              ]),
+              Span({ class: 'text-xl font-bold' }, 'MyApp')
+            ]),
+            Div({ class: 'navbar-center hidden lg:flex' }, [
+              Div({ class: 'menu menu-horizontal px-1' }, [
+                Div({ class: 'menu-item' }, 'Home'),
+                Div({ class: 'menu-item' }, 'About'),
+                Div({ class: 'menu-item' }, 'Contact')
+              ])
+            ]),
+            Div({ class: 'navbar-end' }, [
+              Button({ class: 'btn btn-primary btn-sm' }, 'Login')
+            ])
+          ]);
+        };
+        $mount(DropdownDemo, dropdownTarget);
+      }
+
+      // 4. With Search
+      const searchTarget = document.querySelector('#demo-search');
+      if (searchTarget && !searchTarget.hasChildNodes()) {
+        const SearchDemo = () => {
+          const searchQuery = $('');
+          
+          return Navbar({ class: 'rounded-box' }, [
+            Div({ class: 'navbar-start' }, [
+              Span({ class: 'text-xl font-bold' }, 'MyApp')
+            ]),
+            Div({ class: 'navbar-center' }, [
+              Div({ class: 'form-control' }, [
+                Input({
+                  placeholder: 'Search...',
+                  value: searchQuery,
+                  class: 'input input-bordered w-48 md:w-auto',
+                  oninput: (e) => searchQuery(e.target.value)
+                })
+              ])
+            ]),
+            Div({ class: 'navbar-end' }, [
+              Button({ class: 'btn btn-ghost btn-circle' }, '🔔'),
+              Button({ class: 'btn btn-ghost btn-circle' }, '👤')
+            ])
+          ]);
+        };
+        $mount(SearchDemo, searchTarget);
+      }
+
+      // 5. With Avatar and Dropdown
+      const avatarTarget = document.querySelector('#demo-avatar');
+      if (avatarTarget && !avatarTarget.hasChildNodes()) {
+        const AvatarDemo = () => {
+          return Navbar({ class: 'rounded-box' }, [
+            Div({ class: 'navbar-start' }, [
+              Span({ class: 'text-xl font-bold' }, 'MyApp')
+            ]),
+            Div({ class: 'navbar-center hidden lg:flex' }, [
+              Div({ class: 'menu menu-horizontal px-1' }, [
+                Div({ class: 'menu-item' }, 'Dashboard'),
+                Div({ class: 'menu-item' }, 'Projects'),
+                Div({ class: 'menu-item' }, 'Tasks')
+              ])
+            ]),
+            Div({ class: 'navbar-end' }, [
+              Div({ class: 'dropdown dropdown-end' }, [
+                Div({ tabindex: 0, role: 'button', class: 'btn btn-ghost btn-circle avatar' }, [
+                  Div({ class: 'w-8 rounded-full bg-primary text-primary-content flex items-center justify-center' }, 'JD')
+                ]),
+                Div({ tabindex: 0, class: 'dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow' }, [
+                  Div({ class: 'menu-item' }, 'Profile'),
+                  Div({ class: 'menu-item' }, 'Settings'),
+                  Div({ class: 'menu-item' }, 'Logout')
+                ])
+              ])
+            ])
+          ]);
+        };
+        $mount(AvatarDemo, avatarTarget);
+      }
+
+      // 6. Responsive Navbar
+      const responsiveTarget = document.querySelector('#demo-responsive');
+      if (responsiveTarget && !responsiveTarget.hasChildNodes()) {
+        const ResponsiveDemo = () => {
+          const isOpen = $(false);
+          
+          return Div({ class: 'flex flex-col' }, [
+            Navbar({ class: 'rounded-box' }, [
+              Div({ class: 'navbar-start' }, [
+                Button({ 
+                  class: 'btn btn-ghost btn-circle lg:hidden',
+                  onclick: () => isOpen(!isOpen())
+                }, '☰')
+              ]),
+              Div({ class: 'navbar-center' }, [
+                Span({ class: 'text-xl font-bold' }, 'MyApp')
+              ]),
+              Div({ class: 'navbar-end' }, [
+                Button({ class: 'btn btn-ghost btn-circle' }, '🔔')
+              ])
+            ]),
+            () => isOpen() ? Div({ class: 'flex flex-col gap-2 p-4 bg-base-200 rounded-box mt-2' }, [
+              Button({ class: 'btn btn-ghost justify-start' }, 'Home'),
+              Button({ class: 'btn btn-ghost justify-start' }, 'About'),
+              Button({ class: 'btn btn-ghost justify-start' }, 'Services'),
+              Button({ class: 'btn btn-ghost justify-start' }, 'Contact')
+            ]) : null
+          ]);
+        };
+        $mount(ResponsiveDemo, responsiveTarget);
+      }
+
+      // 7. With Brand and Actions
+      const brandTarget = document.querySelector('#demo-brand');
+      if (brandTarget && !brandTarget.hasChildNodes()) {
+        const BrandDemo = () => {
+          return Navbar({ class: 'rounded-box bg-primary text-primary-content' }, [
+            Div({ class: 'navbar-start' }, [
+              Span({ class: 'text-xl font-bold' }, 'Brand')
+            ]),
+            Div({ class: 'navbar-center hidden lg:flex' }, [
+              Div({ class: 'menu menu-horizontal px-1' }, [
+                Span({ class: 'text-sm' }, 'Features'),
+                Span({ class: 'text-sm' }, 'Pricing'),
+                Span({ class: 'text-sm' }, 'About')
+              ])
+            ]),
+            Div({ class: 'navbar-end' }, [
+              Button({ class: 'btn btn-ghost btn-sm' }, 'Login'),
+              Button({ class: 'btn btn-outline btn-sm ml-2' }, 'Sign Up')
+            ])
+          ]);
+        };
+        $mount(BrandDemo, brandTarget);
+      }
+
+      // 8. All Variants
+      const variantsTarget = document.querySelector('#demo-variants');
+      if (variantsTarget && !variantsTarget.hasChildNodes()) {
+        const VariantsDemo = () => {
+          return Div({ class: 'flex flex-col gap-4' }, [
+            Div({ class: 'text-sm font-bold' }, 'Default Navbar'),
+            Navbar({ class: 'rounded-box' }, [
+              Div({ class: 'navbar-start' }, [Span({}, 'Start')]),
+              Div({ class: 'navbar-center' }, [Span({}, 'Center')]),
+              Div({ class: 'navbar-end' }, [Span({}, 'End')])
+            ]),
+            
+            Div({ class: 'text-sm font-bold mt-2' }, 'With Shadow'),
+            Navbar({ class: 'rounded-box shadow-lg' }, [
+              Div({ class: 'navbar-start' }, [Span({}, 'Logo')]),
+              Div({ class: 'navbar-end' }, [Button({ class: 'btn btn-sm' }, 'Button')])
+            ]),
+            
+            Div({ class: 'text-sm font-bold mt-2' }, 'With Background'),
+            Navbar({ class: 'rounded-box bg-base-300' }, [
+              Div({ class: 'navbar-start' }, [Span({ class: 'font-bold' }, 'Colored')]),
+              Div({ class: 'navbar-end' }, [Span({ class: 'text-sm' }, 'Info')])
+            ])
+          ]);
+        };
+        $mount(VariantsDemo, variantsTarget);
+      }
+    };
+
+    initNavbarExamples();
+    
+    if (window.$docsify) {
+      window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
+        hook.doneEach(initNavbarExamples);
+      });
+    }
+  })();
+</script>

docs/components/tabs.md

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

docs/components/tooltip.md

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

docs/index.html

@@ -40,8 +40,10 @@
     </script>
 
     <!-- <script src="https://unpkg.com/sigpro"></script> -->
-    <script src="https://cdn.jsdelivr.net/gh/natxocc/sigpro@main/dist/sigpro.js"></script>
+    <!-- <script src="https://cdn.jsdelivr.net/gh/natxocc/sigpro@main/dist/sigpro.js"></script> -->
-    <script src="https://cdn.jsdelivr.net/gh/natxocc/sigpro-ui@main/dist/sigpro-ui.umd.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-copy-code/dist/docsify-copy-code.min.js"></script>

rollup.config.js

@@ -45,5 +45,18 @@ export default [
       },
       plugins: [terser()]
     }
+  },
+  {
+    input: './index.js',
+    external: ['sigpro'],
+    output: {
+      file: './docs/sigpro-ui.umd.min.js',
+      format: 'iife',
+      name: 'SigProUI',
+      globals: {
+        sigpro: 'SigPro'
+      },
+      plugins: [terser()]
+    }
   }
 ];

src/components/Dropdown.js

@@ -1,37 +1,53 @@
-import { $html } from "sigpro";
+import { $html, $for } from "sigpro";
 import { val } from "../core/utils.js";
 
-/** DROPDOWN */
 export const Dropdown = (props, children) => {
-  const { label, icon, ...rest } = props;
+  const { label, icon, items, ...rest } = props;
 
-  return $html(
+  const renderContent = () => {
-    "div",
+    if (items) {
-    {
+      const source = typeof items === "function" ? items : () => items;
-      ...rest,
+      return $html("ul", { 
-      class: () => `dropdown ${val(props.class) || props.class || ""}`,
+        tabindex: 0, 
-    },
+        class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-300" 
-    [
+      }, [
-      $html(
+        $for(source, (item) => 
-        "div",
+          $html("li", {}, [
-        {
+            $html("a", { 
-          tabindex: 0,
+              class: item.class || "",
-          role: "button",
+              onclick: (e) => {
-          class: "btn m-1 flex items-center gap-2",
+                if (item.onclick) item.onclick(e);
-        },
+                if (document.activeElement) document.activeElement.blur();
-        [
+              }
-          icon ? (typeof icon === "function" ? icon() : icon) : null, 
+            }, [
-          label ? (typeof label === "function" ? label() : label) : null
+              item.icon ? $html("span", {}, item.icon) : null,
-        ],
+              $html("span", {}, item.label)
-      ),
+            ])
-      $html(
+          ])
-        "ul",
+        )
-        {
+      ]);
-          tabindex: 0,
+    }
-          class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300",
+
-        },
+    return $html("div", { 
-        [typeof children === "function" ? children() : children],
+      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: () => `dropdown ${val(props.class) || ""}`,
+  }, [
+    $html("div", {
+      tabindex: 0,
+      role: "button",
+      class: "btn m-1 flex items-center gap-2",
+    }, [
+      icon ? (typeof icon === "function" ? icon() : icon) : null, 
+      label ? (typeof label === "function" ? label() : label) : null
+    ]),
+    renderContent()
+  ]);
 };

src/components/Fab.js

@@ -3,18 +3,15 @@ import { val } from "../core/utils.js";
 
 /** FAB (Floating Action Button) */
 export const Fab = (props) => {
-  const { icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;
+  const { icon, label, actions = [], position = "bottom-6 right-6", class: className = "", ...rest } = props;
 
   return $html(
     "div",
     {
       ...rest,
-      class: () => `fab fixed ${val(position)} flex flex-col-reverse items-end gap-3 z-[100] ${
+      class: `fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100] ${className}`,
-        props.class || ""
-      }`,
     },
     [
-      // Botón principal
       $html(
         "div",
         {
@@ -28,7 +25,6 @@ export const Fab = (props) => {
         ],
       ),
 
-      // Acciones secundarias (se despliegan hacia arriba)
       ...val(actions).map((act) =>
         $html("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
           act.label ? $html("span", { class: "badge badge-ghost shadow-sm whitespace-nowrap" }, act.label) : null,