Updateing Docs

css/index.js

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

dist/sigpro-ui.js

@@ -33,7 +33,6 @@
     val: () => val,
     ui: () => ui,
     tt: () => tt,
-    joinClass: () => joinClass,
     getIcon: () => getIcon,
     Tooltip: () => Tooltip,
     Toast: () => Toast,
@@ -52,6 +51,7 @@
     Menu: () => Menu,
     Loading: () => Loading,
     List: () => List,
+    Label: () => Label,
     Input: () => Input,
     Indicator: () => Indicator,
     Fileinput: () => Fileinput,
@@ -472,6 +472,7 @@
     Menu: () => Menu,
     Loading: () => Loading,
     List: () => List,
+    Label: () => Label,
     Input: () => Input,
     Indicator: () => Indicator,
     Fileinput: () => Fileinput,
@@ -500,50 +501,43 @@
   __export(exports_utils, {
     val: () => val,
     ui: () => ui,
-    joinClass: () => joinClass,
     getIcon: () => getIcon
   });
   var val = (t) => typeof t === "function" ? t() : t;
-  var joinClass = (t, l) => typeof l === "function" ? () => `${t} ${l() || ""}`.trim() : `${t} ${l || ""}`.trim();
+  var ui = (baseClass, additionalClassOrFn) => typeof additionalClassOrFn === "function" ? () => `${baseClass} ${additionalClassOrFn() || ""}`.trim() : `${baseClass} ${additionalClassOrFn || ""}`.trim();
-  var ui = (base, str) => {
-    if (!str)
-      return base;
-    const parts = typeof str === "string" ? str.split(" ") : str;
-    const classes = [base];
-    parts.forEach((part) => {
-      if (part)
-        classes.push(`${base}-${part}`);
-    });
-    return classes.join(" ");
-  };
   var getIcon = (icon) => {
     if (!icon)
       return null;
-    let position = "left";
+    if (typeof icon === "function") {
-    let iconValue = icon;
+      return $html("span", { class: "mr-1" }, icon());
+    }
+    if (typeof icon === "object") {
+      return $html("span", { class: "mr-1" }, icon);
+    }
     if (typeof icon === "string") {
       const parts = icon.trim().split(/\s+/);
-      if (parts[parts.length - 1] === "right") {
+      const hasRight = parts[parts.length - 1] === "right";
-        position = "right";
+      const iconClass = hasRight ? parts.slice(0, -1).join(" ") : icon;
-        iconValue = parts.slice(0, -1).join(" ");
+      const spacing = hasRight ? "ml-1" : "mr-1";
+      if (iconClass && !iconClass.startsWith("icon-[") && !iconClass.includes("--")) {
+        return $html("span", { class: spacing }, iconClass);
       }
+      return $html("span", { class: `${iconClass} ${spacing}`.trim() });
     }
-    const spacing = position === "left" ? "mr-1" : "ml-1";
+    return null;
-    const element = typeof iconValue === "string" && iconValue.includes("--") ? $html("span", { class: `icon-[${iconValue}]` }) : typeof iconValue === "function" ? iconValue() : $html("span", {}, iconValue);
-    return $html("span", { class: spacing }, element);
   };
 
   // src/components/Accordion.js
   var Accordion = (props, children) => {
-    const { title, name, open, ...rest } = props;
+    const { class: className, title, name, open, ...rest } = props;
     return $html("div", {
       ...rest,
-      class: joinClass("collapse collapse-arrow bg-base-200 mb-2", props.class)
+      class: ui("collapse collapse-arrow bg-base-200 mb-2", className)
     }, [
       $html("input", {
         type: name ? "radio" : "checkbox",
         name,
-        checked: open
+        checked: val(open)
       }),
       $html("div", { class: "collapse-title text-xl font-medium" }, title),
       $html("div", { class: "collapse-content" }, children)
@@ -555,63 +549,31 @@
   __export(exports_Alert, {
     Alert: () => Alert
   });
-
-  // src/core/icons.js
-  var iconShow = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADjSURBVDiN3dJNSgNBEAXgz4DZeAAVJ9tko2St3kaIFxAVt4KZeAD1GKKi7vQSydI/yHgALxAXU02GxniAFBR0v1ev+3V1sZSxjxtM8BM5wTX2/hNu4gFvOMI21iJ3cIwP3GMjF/dQ4RyraOMS34GPAmvjIrBeEnfwjoPGgSM8ooh8QtngB6Ep4BWnmaMqkY1LqqzmDC8tzNDK3/RHzLL9SloUYWfQIMuw3Yl8xrDBH6qbvZWALqbqBqVmlWF7GuKEDwPr5hbXcYdPnKBv/o39wL5wG7ULY1c9NGPzQRrjKrhli1/02zEjWyWMBwAAAABJRU5ErkJggg==";
-  var iconHide = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEDSURBVDiN1dK/K8VhFAbwD+VLGSxKcu9guSQ/Zils/gNkuaX4BxRZDTdklYU/QAaDlEVGGwu2Kz/uVbKJzWDwfuv1+jHz1Km3c85znuf0Hv4jxnD2W8MItnCJ5xAX2MQcHsOQL+jEAapYQD9aQwxiDy+B3JKSe1DHCpqQYQ0PeMJOpDyAmyAAirjGbDRwFYcoYCZSzjGP+8B1gqXEUT2QxyPlqaRnGceNeENzUswwil1MBocbSU9DCAXUUI6K25HtIo5QSVaooitP9OEO65iIbE+HXSvBVRbeNZQSR9pxGil3o83HNw5hEbfYR0dKFki5ci+u8OrzIQ1/R8xx7ocL+9t4B0HPOVXjoptxAAAAAElFTkSuQmCC";
-  var iconClose = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABcSURBVDiN3dIxDoAwCIXhL563g3bSm+hlq4O6GFNbO+k/EV54QIDfsSBk9IA5ZxCQEG+0eGi5BqDHivEhV2xSXXwy2EdOR3xLV+ta0/26wvSm+KTYpPmMzY/0QTZeZR2f+FxhRQAAAABJRU5ErkJggg==";
-  var iconCalendar = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACLSURBVDiN7dO9CQJBFEXhb38K0FwQrMNEVpuwB0NjrcYabECsQk0sQ1mTF4zIjrgmBh54MMx998AEwzOrmC5e8gJjbDHCJO7PHYI0v2JT4Ig9DljGwq5DkOZTLOCOMoIhBpknpHmFWx3ldaaUo6oTc2/ab7rl+508f8GvCC5oenTn4tM1cWg/nBNmD4fBH/Kfvt2TAAAAAElFTkSuQmCC";
-  var iconLock = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAWQAAAFkBqp2phgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACQSURBVDiN7dKxDcJQDATQJ0YgXQQ1bAgDEIZBETPQwjakIjRQ8CMSyR8SiZKTrvHZd/r+JsYSNZrEI1ZR4ywzfElcJ55xwiITOECNTVDf4jDGoEEZ1Etcxxg8pmjRDiahb7BH20uKKPVUkVmL+YjQArdI+PT2bO9Pd/A34O71Rd9QeN/LAFUSckfUscWuG3oCgP8nrDH6T5AAAAAASUVORK5CYII=";
-  var iconAbc = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADFSURBVDiN7dCxSoIBFAXgr1BbgmgSB5ubxKAHaAkcgnBpySVaDET3WhzcpQfoHZojawgX0ZZcfAWDSDdBoeUKP/8ojZ7tnnPv4dzDFv+KZzwl5jf84B354C4wwjdeUV4vl7DCEsXgxmhigDpOMcMVjoKr7cTyI/ZxiE90wmCB4zi+RRatZOxd7OEavxHtBmvjIV5wH2a59N8ZXIZQisMCzkL/wgGq6EYffXzgHHNo4y5h+oBGlLjEBJVUiVP0cJJOtMUG+APtfyYzbH7eVgAAAABJRU5ErkJggg==";
-  var icon123 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAB2AAAAdgFOeyYIAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAMxJREFUOI3t0bFKwlEUBvBfmmBEr1APIDZJ9AJJQyAIvkGP0C4uQruza+DUmuIc9AC9gBG4Nmpkw/8IB3Vw1w8u95zvnvPde77LEeUUV9HAF67QRA2nmMf5A+o4x3cWOsMYy8j7WMX6jaYbLBL/mAWe8RcHm1ihs8G94gVKQQzwlAouMcQo8p/Y28HdYpYFZmsi0MVdxD1MdrxsC500wijdvgtbI1AYtDbxMwkuFAZmE1uYwkkSqOIaHyHcxEU0vUXNPSqKr37fZ6xDwD9DPS0OyHjQHQAAAABJRU5ErkJggg==";
-  var iconMail = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC4SURBVDiNxdIxagJRFIXhLzLFBNJYaJslSEylWOhq3IorMGQ16SyjYCFiZWU5pTaDFvOUyTAZ8RHID69555577oXLf/OEGaY4R3g/4IhORHg3eOXYYvSAeRQ8OWQYYoNPvDQYnxUr7zBB1grCAv3QbIlxjXmAb7Txhq+rkFUKq9NUU8vcJiizwDtOWGEdmvTKqT+61H0GXsP7jSxpEGF/R1e3wkO0FBeVRnhTSBTneBB3yvOI4D/mAnvrIwKM5s4AAAAAAElFTkSuQmCC";
-  var iconInfo = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAASVJREFUOI190r0uhFEQBuBnVxaF2PUTCkFchV0SV6BQi0rEbShFlCqNktJP0Iqf3i3YVSlXVEQozojP8e2+ySSTed+ZMzNnKnpjCFPhv+C9j/YPlnCBV3TCujhHq19iFftoYxOjBa4esTb2QvsP+7jFWJ9HxnEXRf5gGU9Z8gKucBl+sUgHTahE8AJnOCoIT/AcmhmsF7gtrGINBqWFFWcmLXMUhzjIuEbk1GA+2i/DNh4wUsK1MVfFV2GUHJO4xlsPHr8j1Eu44bAcDek2agP4lDZaxWMm3MEKbrL4hjT/8U+gJc00nglnw4qYkL5xMW9rTzqSvEiefI/dMrIaRTrSPzcKXCNinUguPeUfNKWj6kqH9Bz+aVnbvb6PtKTp8F/wUSb6Bu5YN5n7ff0kAAAAAElFTkSuQmCC";
-  var iconSuccess = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAQtJREFUOI2F0jFOAlEQBuAPImoFqyTa6TEEbfUihruYDYfwCAg3UDsTY20na0VjgqUWWuxgHsuy/skk82bmn/fPm9eyHXs4Cn+Br4baNZxjhk8UYUtMMWwitjHGHNfoJrlexObIo3YDY9zjoOGSQzxEkzVc4O0fctqkwCANzkJiE9LmI9ytDrvKB+tWGQnylIAsOB04VcrfdluO55CeYo6THfygVUne4jX8S1zho1LTDu7fCL2KxCe8oF8zUqb8G51VYGrzEffD6jDCJA0MY6bqnHXoK9d4Vk3kyk/S1KSPR9zUJdvRpAiJWZLLIlYEufYrrzBQ7nyJ97ClcuYN2dX1pejgOPwFvuuKfgHXiDR+HL1j1AAAAABJRU5ErkJggg==";
-  var iconError = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAARZJREFUOI2V0j1KQ1EQBeDPp4lWRiMoKVyAK9AoiLgJGytxD9oJNhKyDyvBnw2IugC3YGKVRk1KRbR48yC5vjzwwIHL3DPnzp2ZGdMxj9U4D/BZoZ3ANu4wQj84xC3aVYkZuujhCItjd42I9dAJ7R908YDlikeaeAyTCezgpST5IJia9LFVlA0nOMd7It4IjuMttKeFQR17uKooPcUV9lHL0ArX0T8MPqLa1hx+MDNFWDX7LHLV4/VGiWghmGJJvhu1WXzLO5rhORGeYRf3SfwQNVwWgbZ8SZqJcD04jhX5GDfTsjryJUlN0uQnXJRdZmHSx7H8nwWWItaP5NJVLrCFG3mTXoNDXJeVPW185E1ai/MAX2WiX9S3NSPYbj+uAAAAAElFTkSuQmCC";
-  var iconWarning = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAARJJREFUOI2l0r8uRFEQBvAfu9glwUYiUaxHUEl0VDpKeq+wpZBINAqFRHgTKg0tCSqVhmKDEM1u/Esodm725rq7iC+ZzMnM982ZmXP4JwpdchWsYBrXeMkj9XQQV3GEi+BMYR63v+mqiDPUUrEaTiP3I1ZxEOcySnE+jFxXVPEQPimWiCYzOdCbKbCFPe1Z+8PgBvvBycVMCIdSsY2wBEPBmcnrYBtraKRib2EJGljHjswLLuI8Z6SS9hLTl15iIR08wZLv2AzLYjk0YATP8n9lVWbrgUJohosYxCdG8Zghdvp5ldCUi6hrPd0VjvGEVzTxEYLkogGMYQ67uEtvcgKzGA8y9IV/D9/Evdb89Q7d/Q1fB8U0mpUmzV0AAAAASUVORK5CYII=";
-  var iconLeft = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABfSURBVDiNY2AY8oCZSHWxDAwMEgwMDHfJsaSAgYHhH9QQsjT/Z2BgKKe75gQGiLMLCSlkwiHOSI6t6ADmhYoBN6SIARIeidgkiUlIxxkYGB4xMDB8YmBguE6JSwYpAACvLRHTKwPjZgAAAABJRU5ErkJggg==";
-  var iconRight = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABNSURBVDiN3dAxCoAwFATRh3fU2oAHiDbi5Y1F2jT+gKLbzyy7/DYjUo8g4cTWI8koOF6XrOqc5ifDDVGJthfsj8OLujtHYJgwR+GP5QKMxA9/SolDQgAAAABJRU5ErkJggg==";
-  var iconLLeft = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABlSURBVDiN3ZLBDUBAEEUfmtCchA5woUMlOO1FCQrAwbqwf8eFhHd7mfzJn2Tg82TGvABywAmPUgOLD4XcDK9AJ/y5cOlrNsIvpCdPDL/FUbkX/t6Slv3+SjgQf6QBmIAZGAP+FzZJViOd89x8pAAAAABJRU5ErkJggg==";
-  var iconRRight = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABmSURBVDiN3dGxCoAgEMbxfz1dL1BTREJzmUv08trgDYcg6VCD3/YD7zvkoLmMgFEegLmmwAAecOJVvNeUWCAAt7IHjt9LThkyiRf9qC8oCom70u0BuDL+bngj/tNm/JqJePucW8wDvGYdzT0nMUkAAAAASUVORK5CYII=";
-  var iconUpload = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADNSURBVDiNndOxTgJRFIThz41ZDMFKqH0DLSRSq4lQ0RifUcMzUJlYQKjtLcHVSimBggPRNSzs/sk0kzPnTHEvxZyHKnGJD3yhXSWcYRnKwvvH0Y7wEG/4wQI1XOEek6LLF3FtiDoGoXp4WcxsSXILHjFCH/Nf/jy8ER6KGuTZNNhJvkFpEpygUyHbRi1BFy8VFryilyANlSVFerxn6N36IRVyG0PNEtdbkbmBU8zwdOCSJp4xRWNj3sWS5YGaRvM/f6GBa5ztafCJMb5hBQQ/MMwXLnnZAAAAAElFTkSuQmCC";
-
-  // src/components/Alert.js
   var Alert = (props, children) => {
-    const { type = "info", soft = true, ...rest } = props;
+    const { class: className, actions, type = "info", soft = true, ...rest } = props;
-    const icons = {
+    const iconMap = {
-      info: iconInfo,
+      info: "icon-[lucide--info]",
-      success: iconSuccess,
+      success: "icon-[lucide--check-circle]",
-      warning: iconWarning,
+      warning: "icon-[lucide--alert-triangle]",
-      error: iconError
+      error: "icon-[lucide--alert-circle]"
-    };
-    const typeClass = () => {
-      const t = val(type);
-      const map = {
-        info: "alert-info",
-        success: "alert-success",
-        warning: "alert-warning",
-        error: "alert-error"
-      };
-      return map[t] || t;
     };
+    const typeClass = `alert-${type}`;
+    const softClass = soft ? "alert-soft" : "";
+    const allClasses = [typeClass, softClass, className].filter(Boolean).join(" ");
     const content = children || props.message;
     return $html("div", {
       ...rest,
       role: "alert",
-      class: () => `alert ${typeClass()} ${val(soft) ? "alert-soft" : ""} ${props.class || ""}`
+      class: ui("alert", allClasses)
-    }, [
+    }, () => [
-      $html("img", {
+      getIcon(iconMap[type]),
-        src: icons[val(type)] || icons.info,
-        class: "w-4 h-4 object-contain",
-        alt: val(type)
-      }),
       $html("div", { class: "flex-1" }, [
         $html("span", {}, [typeof content === "function" ? content() : content])
       ]),
-      props.actions ? $html("div", { class: "flex-none" }, [
+      actions ? $html("div", { class: "flex-none" }, [
-        typeof props.actions === "function" ? props.actions() : props.actions
+        typeof actions === "function" ? actions() : actions
       ]) : null
-    ]);
+    ].filter(Boolean));
   };
 
   // src/components/Autocomplete.js
@@ -648,57 +610,75 @@
     Input: () => Input
   });
   var Input = (props) => {
-    const { label, tip, value, error, isSearch, icon, type = "text", ...rest } = props;
+    const {
+      class: className,
+      value,
+      type = "text",
+      icon,
+      oninput,
+      placeholder,
+      disabled,
+      size,
+      ...rest
+    } = props;
     const isPassword = type === "password";
     const visible = $(false);
-    const iconsByType = {
+    const iconMap = {
-      text: iconAbc,
+      text: "icon-[lucide--text]",
-      password: iconLock,
+      password: "icon-[lucide--lock]",
-      date: iconCalendar,
+      date: "icon-[lucide--calendar]",
-      number: icon123,
+      number: "icon-[lucide--hash]",
-      email: iconMail
+      email: "icon-[lucide--mail]",
+      search: "icon-[lucide--search]",
+      tel: "icon-[lucide--phone]",
+      url: "icon-[lucide--link]"
     };
-    const inputEl = $html("input", {
+    const leftIcon = icon ? getIcon(icon) : iconMap[type] ? getIcon(iconMap[type]) : null;
-      ...rest,
+    const getPasswordIcon = () => getIcon(visible() ? "icon-[lucide--eye-off]" : "icon-[lucide--eye]");
-      type: () => isPassword ? visible() ? "text" : "password" : type,
+    const paddingLeft = leftIcon ? "pl-10" : "";
-      placeholder: props.placeholder || label || (isSearch ? tt("search")() : " "),
+    const paddingRight = isPassword ? "pr-10" : "";
-      class: joinClass("grow order-2 focus:outline-none", props.class),
+    const buttonSize = () => {
-      value,
+      if (className?.includes("input-xs"))
-      oninput: (e) => props.oninput?.(e),
+        return "btn-xs";
-      disabled: () => val(props.disabled)
+      if (className?.includes("input-sm"))
-    });
+        return "btn-sm";
-    const leftIcon = icon ? icon : iconsByType[type] ? $html("img", { src: iconsByType[type], class: "opacity-50", alt: type }) : null;
+      if (className?.includes("input-lg"))
-    return $html("label", {
+        return "btn-lg";
-      class: () => joinClass("input input-bordered floating-label flex items-center gap-2 w-full relative", val(error) ? "input-error" : "")
+      return "btn-md";
-    }, [
+    };
-      leftIcon ? $html("div", { class: "order-1 shrink-0" }, leftIcon) : null,
+    return $html("div", { class: "relative w-full" }, () => [
-      label ? $html("span", { class: "text-base-content/60 order-0" }, label) : null,
+      $html("input", {
-      inputEl,
+        ...rest,
+        type: () => isPassword ? visible() ? "text" : "password" : type,
+        placeholder: placeholder || " ",
+        class: ui("input w-full", `${paddingLeft} ${paddingRight} ${className || ""}`.trim()),
+        value,
+        oninput: (e) => oninput?.(e),
+        disabled: () => val(disabled)
+      }),
+      leftIcon ? $html("div", {
+        class: "absolute left-3 inset-y-0 flex items-center pointer-events-none text-base-content/60"
+      }, leftIcon) : null,
       isPassword ? $html("button", {
         type: "button",
-        class: "order-3 btn btn-ghost btn-xs btn-circle opacity-50 hover:opacity-100",
+        class: ui("absolute right-3 inset-y-0 flex items-center", "btn btn-ghost btn-circle opacity-50 hover:opacity-100", buttonSize()),
         onclick: (e) => {
           e.preventDefault();
           visible(!visible());
         }
-      }, () => $html("img", {
+      }, () => getPasswordIcon()) : null
-        class: "w-5 h-5",
-        src: visible() ? iconShow : iconHide
-      })) : null,
-      tip ? $html("div", { class: "tooltip tooltip-left order-4", "data-tip": tip }, $html("span", { class: "badge badge-ghost badge-xs cursor-help" }, "?")) : null,
-      () => val(error) ? $html("span", { class: "text-error text-[10px] absolute -bottom-5 left-2" }, val(error)) : null
     ]);
   };
 
   // src/components/Autocomplete.js
   var Autocomplete = (props) => {
-    const { options = [], value, onSelect, label, placeholder, ...rest } = props;
+    const { class: className, items = [], value, onSelect, label, placeholder, ...rest } = props;
     const query = $(val(value) || "");
     const isOpen = $(false);
     const cursor = $(-1);
     const list = $(() => {
       const q = query().toLowerCase();
-      const data = val(options) || [];
+      const data = val(items) || [];
       return q ? data.filter((o) => (typeof o === "string" ? o : o.label).toLowerCase().includes(q)) : data;
     });
     const pick = (opt) => {
@@ -712,17 +692,17 @@
       cursor(-1);
     };
     const nav = (e) => {
-      const items = list();
+      const items2 = list();
       if (e.key === "ArrowDown") {
         e.preventDefault();
         isOpen(true);
-        cursor(Math.min(cursor() + 1, items.length - 1));
+        cursor(Math.min(cursor() + 1, items2.length - 1));
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
         cursor(Math.max(cursor() - 1, 0));
       } else if (e.key === "Enter" && cursor() >= 0) {
         e.preventDefault();
-        pick(items[cursor()]);
+        pick(items2[cursor()]);
       } else if (e.key === "Escape") {
         isOpen(false);
       }
@@ -730,6 +710,7 @@
     return $html("div", { class: "relative w-full" }, [
       Input({
         label,
+        class: className,
         placeholder: placeholder || tt("search")(),
         value: query,
         onfocus: () => isOpen(true),
@@ -756,7 +737,7 @@
             onmouseenter: () => cursor(i)
           }, typeof opt === "string" ? opt : opt.label)
         ]), (opt, i) => (typeof opt === "string" ? opt : opt.value) + i),
-        () => list().length ? null : $html("li", { class: "p-2 text-center opacity-50" }, "No results")
+        () => list().length ? null : $html("li", { class: "p-2 text-center opacity-50" }, tt("nodata")())
       ])
     ]);
   };
@@ -766,7 +747,13 @@
   __export(exports_Badge, {
     Badge: () => Badge
   });
-  var Badge = (props, children) => $html("span", { ...props, class: joinClass("badge", props.class) }, children);
+  var Badge = (props, children) => {
+    const { class: className, ...rest } = props;
+    return $html("span", {
+      ...rest,
+      class: ui("badge", className)
+    }, children);
+  };
 
   // src/components/Button.js
   var exports_Button = {};
@@ -774,23 +761,17 @@
     Button: () => Button
   });
   var Button = (props, children) => {
-    const { badge, badgeClass, tooltip, icon, loading, ...rest } = props;
+    const { class: className, loading, icon, ...rest } = props;
-    const btn = $html("button", {
+    const iconEl = getIcon(icon);
+    return $html("button", {
       ...rest,
-      class: joinClass("btn", props.class)
+      class: ui("btn", className),
-    }, [
+      disabled: () => val(loading) || val(props.disabled)
-      () => val(loading) ? $html("span", { class: "loading loading-spinner" }) : null,
+    }, () => [
-      icon ? $html("span", { class: "mr-1" }, icon) : null,
+      val(loading) && $html("span", { class: "loading loading-spinner" }),
+      iconEl,
       children
-    ]);
+    ].filter(Boolean));
-    let out = btn;
-    if (badge) {
-      out = $html("div", { class: "indicator" }, [
-        $html("span", { class: joinClass("indicator-item badge", badgeClass || "badge-secondary") }, badge),
-        out
-      ]);
-    }
-    return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, out) : out;
   };
 
   // src/components/Checkbox.js
@@ -799,11 +780,11 @@
     Checkbox: () => Checkbox
   });
   var Checkbox = (props) => {
-    const { value, tooltip, toggle, label, ...rest } = props;
+    const { class: className, value, tooltip, toggle, label, ...rest } = props;
     const checkEl = $html("input", {
       ...rest,
       type: "checkbox",
-      class: () => val(toggle) ? "toggle" : "checkbox",
+      class: () => ui(val(toggle) ? "toggle" : "checkbox", className),
       checked: value
     });
     const layout = $html("label", { class: "label cursor-pointer justify-start gap-3" }, [
@@ -819,7 +800,7 @@
     Colorpicker: () => Colorpicker
   });
   var Colorpicker = (props) => {
-    const { value, label, ...rest } = props;
+    const { class: className, value, label, ...rest } = props;
     const isOpen = $(false);
     const palette = [
       ...["#000", "#1A1A1A", "#333", "#4D4D4D", "#666", "#808080", "#B3B3B3", "#FFF"],
@@ -832,7 +813,7 @@
       ...["#2e1065", "#4c1d95", "#6d28d9", "#7c3aed", "#8b5cf6", "#a855f7", "#d946ef", "#fae8ff"]
     ];
     const getColor = () => val(value) || "#000000";
-    return $html("div", { class: "relative w-fit" }, [
+    return $html("div", { class: ui("relative w-fit", className) }, [
       $html("button", {
         type: "button",
         class: "btn px-3 bg-base-100 border-base-300 hover:border-primary/50 flex items-center gap-2 shadow-sm font-normal normal-case",
@@ -880,7 +861,7 @@
     Datepicker: () => Datepicker
   });
   var Datepicker = (props) => {
-    const { value, range, label, placeholder, hour = false, ...rest } = props;
+    const { class: className, value, range, label, placeholder, hour = false, ...rest } = props;
     const isOpen = $(false);
     const internalDate = $(new Date);
     const hoverDate = $(null);
@@ -972,13 +953,13 @@
         ])
       ]);
     };
-    return $html("div", { class: "relative w-full" }, [
+    return $html("div", { class: ui("relative w-full", className) }, [
       Input({
         label,
         placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."),
         value: displayValue,
         readonly: true,
-        icon: $html("img", { src: iconCalendar, class: "opacity-40" }),
+        icon: getIcon("icon-[lucide--calendar]"),
         onclick: (e) => {
           e.stopPropagation();
           isOpen(!isOpen());
@@ -991,15 +972,15 @@
       }, [
         $html("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
           $html("div", { class: "flex gap-0.5" }, [
-            $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, $html("img", { src: iconLLeft, class: "opacity-40" })),
+            $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, getIcon("icon-[lucide--chevrons-left]")),
-            $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, $html("img", { src: iconLeft, class: "opacity-40" }))
+            $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, getIcon("icon-[lucide--chevron-left]"))
           ]),
           $html("span", { class: "font-bold uppercase flex-1 text-center" }, [
             () => internalDate().toLocaleString("es-ES", { month: "short", year: "numeric" })
           ]),
           $html("div", { class: "flex gap-0.5" }, [
-            $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, $html("img", { src: iconRight, class: "opacity-40" })),
+            $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, getIcon("icon-[lucide--chevron-right]")),
-            $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, $html("img", { src: iconRRight, class: "opacity-40" }))
+            $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, getIcon("icon-[lucide--chevrons-right]"))
           ])
         ]),
         $html("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [
@@ -1089,19 +1070,41 @@
   __export(exports_Drawer, {
     Drawer: () => Drawer
   });
-  var Drawer = (props) => $html("div", { class: joinClass("drawer", props.class) }, [
+  var Drawer = (props, children) => {
-    $html("input", {
+    const { class: className, id, open, side, content, ...rest } = props;
-      id: props.id,
+    const drawerId = id || `drawer-${Math.random().toString(36).slice(2, 9)}`;
-      type: "checkbox",
+    return $html("div", {
-      class: "drawer-toggle",
+      ...rest,
-      checked: props.open
+      class: ui("drawer", className)
-    }),
+    }, [
-    $html("div", { class: "drawer-content" }, props.content),
+      $html("input", {
-    $html("div", { class: "drawer-side" }, [
+        id: drawerId,
-      $html("label", { for: props.id, class: "drawer-overlay", onclick: () => props.open?.(false) }),
+        type: "checkbox",
-      $html("div", { class: "min-h-full bg-base-200 w-80" }, props.side)
+        class: "drawer-toggle",
-    ])
+        checked: () => typeof open === "function" ? open() : open,
-  ]);
+        onchange: (e) => {
+          if (typeof open === "function")
+            open(e.target.checked);
+        }
+      }),
+      $html("div", { class: "drawer-content" }, [
+        typeof content === "function" ? content() : content
+      ]),
+      $html("div", { class: "drawer-side" }, [
+        $html("label", {
+          for: drawerId,
+          class: "drawer-overlay",
+          onclick: () => {
+            if (typeof open === "function")
+              open(false);
+          }
+        }),
+        $html("div", { class: "min-h-full bg-base-200 w-80" }, [
+          typeof side === "function" ? side() : side
+        ])
+      ])
+    ]);
+  };
 
   // src/components/Dropdown.js
   var exports_Dropdown = {};
@@ -1109,7 +1112,7 @@
     Dropdown: () => Dropdown
   });
   var Dropdown = (props, children) => {
-    const { label, icon, items, ...rest } = props;
+    const { class: className, label, icon, items, ...rest } = props;
     const renderContent = () => {
       if (items) {
         const source = typeof items === "function" ? items : () => items;
@@ -1142,7 +1145,7 @@
     };
     return $html("div", {
       ...rest,
-      class: () => `dropdown ${val(props.class) || ""}`
+      class: ui("dropdown", className)
     }, [
       $html("div", {
         tabindex: 0,
@@ -1162,17 +1165,17 @@
     Fab: () => Fab
   });
   var Fab = (props) => {
-    const { icon, label, actions = [], position = "bottom-6 right-6", class: className = "", ...rest } = props;
+    const { class: className, icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;
     return $html("div", {
       ...rest,
-      class: `fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100] ${className}`
+      class: ui(`fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100]`, className)
     }, [
       $html("div", {
         tabindex: 0,
         role: "button",
         class: "btn btn-lg btn-circle btn-primary shadow-2xl"
       }, [
-        icon ? typeof icon === "function" ? icon() : icon : null,
+        icon ? getIcon(icon) : null,
         !icon && label ? label : null
       ]),
       ...val(actions).map((act) => $html("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
@@ -1184,7 +1187,7 @@
             e.stopPropagation();
             act.onclick?.(e);
           }
-        }, [act.icon ? typeof act.icon === "function" ? act.icon() : act.icon : act.text || ""])
+        }, [act.icon ? getIcon(act.icon) : act.text || ""])
       ]))
     ]);
   };
@@ -1194,16 +1197,19 @@
   __export(exports_Fieldset, {
     Fieldset: () => Fieldset
   });
-  var Fieldset = (props, children) => $html("fieldset", {
+  var Fieldset = (props, children) => {
-    ...props,
+    const { class: className, legend, ...rest } = props;
-    class: joinClass("fieldset bg-base-200 border border-base-300 p-4 rounded-lg", props.class)
+    return $html("fieldset", {
-  }, [
+      ...rest,
-    () => {
+      class: ui("fieldset bg-base-200 border border-base-300 p-4 rounded-lg", className)
-      const legendText = val(props.legend);
+    }, [
-      return legendText ? $html("legend", { class: "fieldset-legend font-bold" }, [legendText]) : null;
+      () => {
-    },
+        const legendText = val(legend);
-    children
+        return legendText ? $html("legend", { class: "fieldset-legend font-bold" }, [legendText]) : null;
-  ]);
+      },
+      children
+    ]);
+  };
 
   // src/components/Fileinput.js
   var exports_Fileinput = {};
@@ -1211,7 +1217,7 @@
     Fileinput: () => Fileinput
   });
   var Fileinput = (props) => {
-    const { tooltip, max = 2, accept = "*", onSelect } = props;
+    const { class: className, tooltip, max = 2, accept = "*", onSelect, ...rest } = props;
     const selectedFiles = $([]);
     const isDragging = $(false);
     const error = $(null);
@@ -1232,7 +1238,7 @@
       selectedFiles(updated);
       onSelect?.(updated);
     };
-    return $html("fieldset", { class: "fieldset w-full p-0" }, [
+    return $html("fieldset", { ...rest, class: ui("fieldset w-full p-0", className) }, [
       $html("div", {
         class: () => `w-full ${tooltip ? "tooltip tooltip-top before:z-50 after:z-50" : ""}`,
         "data-tip": tooltip
@@ -1256,7 +1262,7 @@
           }
         }, [
           $html("div", { class: "flex items-center gap-3 w-full" }, [
-            $html("img", { src: iconUpload, class: "w-5 h-5 opacity-50 shrink-0" }),
+            getIcon("icon-[lucide--upload]"),
             $html("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."),
             $html("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${max}MB`)
           ]),
@@ -1285,7 +1291,7 @@
               e.stopPropagation();
               removeFile(index);
             }
-          }, [$html("img", { src: iconClose, class: "w-3 h-3 opacity-70" })])
+          }, [getIcon("icon-[lucide--x]")])
         ]), (file) => file.name + file.lastModified)
       ]))
     ]);
@@ -1296,10 +1302,31 @@
   __export(exports_Indicator, {
     Indicator: () => Indicator
   });
-  var Indicator = (props, children) => $html("div", { class: joinClass("indicator", props.class) }, [
+  var Indicator = (props, children) => $html("div", { class: "indicator" }, () => [
     children,
-    $html("span", { class: joinClass("indicator-item badge", props.badgeClass) }, props.badge)
+    props.value && $html("span", { class: ui("indicator-item badge", props.class) }, props.value)
-  ]);
+  ].filter(Boolean));
+
+  // src/components/Label.js
+  var exports_Label = {};
+  __export(exports_Label, {
+    Label: () => Label
+  });
+  var Label = (props) => {
+    const { children, value, floating = false, error, required, class: className, ...rest } = props;
+    if (floating) {
+      return $html("label", { class: ui("floating-label w-full", className), ...rest }, () => [
+        value ? $html("span", {}, value) : null,
+        children,
+        error ? $html("span", { class: "text-error text-xs" }, val(error)) : null
+      ]);
+    }
+    return $html("label", { class: ui("input w-full", className), ...rest }, () => [
+      value ? $html("span", { class: "label" }, value) : null,
+      children,
+      error ? $html("span", { class: "text-error text-xs" }, val(error)) : null
+    ]);
+  };
 
   // src/components/List.js
   var exports_List = {};
@@ -1307,18 +1334,11 @@
     List: () => List
   });
   var List = (props) => {
-    const {
+    const { class: className, items, header, render, keyFn = (item, index) => index, ...rest } = props;
-      items,
-      header,
-      render,
-      keyFn = (item, index) => index,
-      class: className,
-      ...rest
-    } = props;
     const listItems = $for(items, (item, index) => $html("li", { class: "list-row" }, [render(item, index)]), keyFn);
     return $html("ul", {
       ...rest,
-      class: joinClass("list bg-base-100 rounded-box shadow-md", className)
+      class: ui("list bg-base-100 rounded-box shadow-md", className)
     }, header ? [$if(header, () => $html("li", { class: "p-4 pb-2 text-xs opacity-60" }, [val(header)])), listItems] : listItems);
   };
 
@@ -1341,7 +1361,8 @@
     Menu: () => Menu
   });
   var Menu = (props) => {
-    const renderItems = (items) => $for(() => items || [], (it) => $html("li", {}, [
+    const { class: className, items, ...rest } = props;
+    const renderItems = (items2) => $for(() => items2 || [], (it) => $html("li", {}, [
       it.children ? $html("details", { open: it.open }, [
         $html("summary", {}, [it.icon && $html("span", { class: "mr-2" }, it.icon), it.label]),
         $html("ul", {}, renderItems(it.children))
@@ -1350,7 +1371,7 @@
         it.label
       ])
     ]), (it, i) => it.label || i);
-    return $html("ul", { ...props, class: joinClass("menu bg-base-200 rounded-box", props.class) }, renderItems(props.items));
+    return $html("ul", { ...rest, class: ui("menu bg-base-200 rounded-box", className) }, renderItems(items));
   };
 
   // src/components/Modal.js
@@ -1359,13 +1380,13 @@
     Modal: () => Modal
   });
   var Modal = (props, children) => {
-    const { title, buttons, open, ...rest } = props;
+    const { class: className, title, buttons, open, ...rest } = props;
     const dialogRef = { current: null };
     $watch(() => {
       const dialog = dialogRef.current;
       if (!dialog)
         return;
-      if (open()) {
+      if (val(open)) {
         if (!dialog.open)
           dialog.showModal();
       } else {
@@ -1376,13 +1397,14 @@
     const close = (e) => {
       if (e && e.preventDefault)
         e.preventDefault();
-      open(false);
+      if (typeof open === "function")
+        open(false);
     };
     return $html("dialog", {
       ...rest,
       ref: dialogRef,
-      class: "modal",
+      class: ui("modal", className),
-      oncancel: () => open(false)
+      oncancel: () => typeof open === "function" && open(false)
     }, [
       $html("div", { class: "modal-box" }, [
         title ? $html("h3", { class: "text-lg font-bold mb-4" }, title) : null,
@@ -1409,7 +1431,10 @@
   __export(exports_Navbar, {
     Navbar: () => Navbar
   });
-  var Navbar = (props, children) => $html("div", { ...props, class: joinClass("navbar bg-base-100 shadow-sm px-4", props.class) }, children);
+  var Navbar = (props, children) => {
+    const { class: className, ...rest } = props;
+    return $html("div", { ...rest, class: ui("navbar bg-base-100 shadow-sm px-4", className) }, children);
+  };
 
   // src/components/Radio.js
   var exports_Radio = {};
@@ -1417,12 +1442,12 @@
     Radio: () => Radio
   });
   var Radio = (props) => {
-    const { label, tooltip, value, inputValue, name, ...rest } = props;
+    const { class: className, label, tooltip, value, inputValue, name, ...rest } = props;
     const radioEl = $html("input", {
       ...rest,
       type: "radio",
       name,
-      class: joinClass("radio", props.class),
+      class: ui("radio", className),
       checked: () => val(value) === inputValue,
       onclick: () => {
         if (typeof value === "function")
@@ -1431,10 +1456,11 @@
     });
     if (!label && !tooltip)
       return radioEl;
-    return $html("label", { class: "label cursor-pointer justify-start gap-3" }, [
+    const layout = $html("label", { class: "label cursor-pointer justify-start gap-3" }, [
       radioEl,
       label ? $html("span", { class: "label-text" }, label) : null
     ]);
+    return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
   };
 
   // src/components/Range.js
@@ -1443,11 +1469,11 @@
     Range: () => Range
   });
   var Range = (props) => {
-    const { label, tooltip, value, ...rest } = props;
+    const { class: className, label, tooltip, value, ...rest } = props;
     const rangeEl = $html("input", {
       ...rest,
       type: "range",
-      class: joinClass("range", props.class),
+      class: ui("range", className),
       value,
       disabled: () => val(props.disabled)
     });
@@ -1466,11 +1492,11 @@
     Rating: () => Rating
   });
   var Rating = (props) => {
-    const { value, count = 5, mask = "mask-star", readonly = false, onchange, ...rest } = props;
+    const { class: className, value, count = 5, mask = "mask-star", readonly = false, onchange, ...rest } = props;
     const ratingGroup = `rating-${Math.random().toString(36).slice(2, 7)}`;
     return $html("div", {
       ...rest,
-      class: () => `rating ${val(readonly) ? "pointer-events-none" : ""} ${props.class || ""}`
+      class: () => ui(`rating ${val(readonly) ? "pointer-events-none" : ""}`, className)
     }, Array.from({ length: val(count) }, (_, i) => {
       const starValue = i + 1;
       return $html("input", {
@@ -1497,12 +1523,12 @@
     Select: () => Select
   });
   var Select = (props) => {
-    const { label, options, value, ...rest } = props;
+    const { class: className, label, items, value, ...rest } = props;
     const selectEl = $html("select", {
       ...rest,
-      class: joinClass("select select-bordered w-full", props.class),
+      class: ui("select select-bordered w-full", className),
       value
-    }, $for(() => val(options) || [], (opt) => $html("option", {
+    }, $for(() => val(items) || [], (opt) => $html("option", {
       value: opt.value,
       $selected: () => String(val(value)) === String(opt.value)
     }, opt.label), (opt) => opt.value));
@@ -1519,33 +1545,42 @@
   __export(exports_Stack, {
     Stack: () => Stack
   });
-  var Stack = (props, children) => $html("div", { ...props, class: joinClass("stack", props.class) }, children);
+  var Stack = (props, children) => {
+    const { class: className, ...rest } = props;
+    return $html("div", { ...rest, class: ui("stack", className) }, children);
+  };
 
   // src/components/Stat.js
   var exports_Stat = {};
   __export(exports_Stat, {
     Stat: () => Stat
   });
-  var Stat = (props) => $html("div", { ...props, class: joinClass("stat", props.class) }, [
+  var Stat = (props) => {
-    props.icon && $html("div", { class: "stat-figure text-secondary" }, props.icon),
+    const { class: className, icon, label, value, desc, ...rest } = props;
-    props.label && $html("div", { class: "stat-title" }, props.label),
+    return $html("div", { ...rest, class: ui("stat", className) }, [
-    $html("div", { class: "stat-value" }, () => val(props.value) ?? props.value),
+      icon && $html("div", { class: "stat-figure text-secondary" }, icon),
-    props.desc && $html("div", { class: "stat-desc" }, props.desc)
+      label && $html("div", { class: "stat-title" }, label),
-  ]);
+      $html("div", { class: "stat-value" }, () => val(value) ?? value),
+      desc && $html("div", { class: "stat-desc" }, desc)
+    ]);
+  };
 
   // src/components/Swap.js
   var exports_Swap = {};
   __export(exports_Swap, {
     Swap: () => Swap
   });
-  var Swap = (props) => $html("label", { class: joinClass("swap", props.class) }, [
+  var Swap = (props) => {
-    $html("input", {
+    const { class: className, value, on, off, ...rest } = props;
-      type: "checkbox",
+    return $html("label", { ...rest, class: ui("swap", className) }, [
-      checked: props.value
+      $html("input", {
-    }),
+        type: "checkbox",
-    $html("div", { class: "swap-on" }, props.on),
+        checked: val(value)
-    $html("div", { class: "swap-off" }, props.off)
+      }),
-  ]);
+      $html("div", { class: "swap-on" }, on),
+      $html("div", { class: "swap-off" }, off)
+    ]);
+  };
 
   // src/components/Table.js
   var exports_Table = {};
@@ -1553,16 +1588,12 @@
     Table: () => Table
   });
   var Table = (props) => {
-    const {
+    const { class: className, items = [], columns = [], keyFn, zebra = false, pinRows = false, empty = tt("nodata")(), ...rest } = props;
-      items = [],
+    const tableClass = () => {
-      columns = [],
+      const zebraClass = val(zebra) ? "table-zebra" : "";
-      keyFn,
+      const pinRowsClass = val(pinRows) ? "table-pin-rows" : "";
-      zebra = false,
+      return ui("table", className, zebraClass, pinRowsClass);
-      pinRows = false,
+    };
-      empty = tt("nodata")(),
-      ...rest
-    } = props;
-    const tableClass = () => joinClass("table", `${val(zebra) ? "table-zebra" : ""} ${val(pinRows) ? "table-pin-rows" : ""} ${props.class || ""}`);
     return $html("div", { class: "overflow-x-auto w-full bg-base-100 rounded-box border border-base-300" }, [
       $html("table", { ...rest, class: tableClass }, [
         $html("thead", {}, [
@@ -1599,23 +1630,33 @@
     Tabs: () => Tabs
   });
   var Tabs = (props) => {
-    const { items, ...rest } = props;
+    const { class: className, items, activeIndex = $(0), ...rest } = props;
     const itemsSignal = typeof items === "function" ? items : () => items || [];
+    const internalActive = $(0);
+    const currentActive = activeIndex !== undefined ? activeIndex : internalActive;
+    const handleTabClick = (idx, onClick) => (e) => {
+      if (typeof currentActive === "function") {
+        currentActive(idx);
+      }
+      onClick?.(e);
+    };
     return $html("div", { ...rest, class: "flex flex-col gap-4 w-full" }, [
       $html("div", {
         role: "tablist",
-        class: joinClass("tabs tabs-box", props.class)
+        class: ui("tabs tabs-box", className)
-      }, $for(itemsSignal, (it) => $html("a", {
+      }, $for(itemsSignal, (it, idx) => {
-        role: "tab",
+        const isActive = val(it.active) ?? currentActive() === idx;
-        class: () => joinClass("tab", val(it.active) && "tab-active", val(it.disabled) && "tab-disabled", it.tip && "tooltip"),
+        return $html("a", {
-        "data-tip": it.tip,
+          role: "tab",
-        onclick: (e) => !val(it.disabled) && it.onclick?.(e)
+          class: () => ui("tab", isActive ? "tab-active" : "", val(it.disabled) ? "tab-disabled" : ""),
-      }, it.label), (t) => t.label)),
+          onclick: !val(it.disabled) ? handleTabClick(idx, it.onclick) : undefined
+        }, it.label);
+      }, (t, idx) => t.label + idx)),
       () => {
-        const active = itemsSignal().find((it) => val(it.active));
+        const activeItem = itemsSignal().find((it, idx) => val(it.active) ?? currentActive() === idx);
-        if (!active)
+        if (!activeItem)
           return null;
-        const content = val(active.content);
+        const content = val(activeItem.content);
         return $html("div", { class: "p-4" }, [
           typeof content === "function" ? content() : content
         ]);
@@ -1629,16 +1670,16 @@
     Timeline: () => Timeline
   });
   var Timeline = (props) => {
-    const { items = [], vertical = true, compact = false, ...rest } = props;
+    const { class: className, items = [], vertical = true, compact = false, ...rest } = props;
-    const icons = {
+    const iconMap = {
-      info: iconInfo,
+      info: "icon-[lucide--info]",
-      success: iconSuccess,
+      success: "icon-[lucide--check-circle]",
-      warning: iconWarning,
+      warning: "icon-[lucide--alert-triangle]",
-      error: iconError
+      error: "icon-[lucide--alert-circle]"
     };
     return $html("ul", {
       ...rest,
-      class: () => `timeline ${val(vertical) ? "timeline-vertical" : "timeline-horizontal"} ${val(compact) ? "timeline-compact" : ""} ${props.class || ""}`
+      class: () => ui(`timeline ${val(vertical) ? "timeline-vertical" : "timeline-horizontal"} ${val(compact) ? "timeline-compact" : ""}`, className)
     }, [
       $for(items, (item, i) => {
         const isFirst = i === 0;
@@ -1649,11 +1690,7 @@
           !isFirst ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null,
           $html("div", { class: "timeline-start" }, [renderSlot(item.title)]),
           $html("div", { class: "timeline-middle" }, [
-            $html("img", {
+            item.icon ? getIcon(item.icon) : getIcon(iconMap[itemType] || iconMap.success)
-              src: icons[itemType] || item.icon || icons.success,
-              class: "w-4 h-4 object-contain mx-1",
-              alt: itemType
-            })
           ]),
           $html("div", { class: "timeline-end timeline-box shadow-sm" }, [renderSlot(item.detail)]),
           !isLast ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null
@@ -1696,11 +1733,15 @@
       }
     };
     const ToastComponent = () => {
+      const closeIcon = getIcon("icon-[lucide--x]");
       const el = $html("div", {
         class: `alert alert-soft ${type} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto`
       }, [
         $html("span", {}, [typeof message === "function" ? message() : message]),
-        Button({ class: "btn-xs btn-circle btn-ghost", onclick: close }, "✕")
+        Button({
+          class: "btn-xs btn-circle btn-ghost",
+          onclick: close
+        }, closeIcon)
       ]);
       requestAnimationFrame(() => el.classList.remove("translate-x-10", "opacity-0"));
       return el;
@@ -1717,7 +1758,11 @@
   __export(exports_Tooltip, {
     Tooltip: () => Tooltip
   });
-  var Tooltip = (props, children) => $html("div", { ...props, class: joinClass("tooltip", props.class), "data-tip": props.tip }, children);
+  var Tooltip = (props, children) => $html("div", {
+    ...props,
+    class: () => ui("tooltip", props.ui, props.class),
+    "data-tip": props.tip
+  }, children);
 
   // src/components/index.js
   var Components = {
@@ -1736,6 +1781,7 @@
     ...exports_Fileinput,
     ...exports_Indicator,
     ...exports_Input,
+    ...exports_Label,
     ...exports_List,
     ...exports_Loading,
     ...exports_Menu,

docs/components/accordion.md

@@ -1,6 +1,6 @@
 # Accordion
 
-Collapsible accordion component for organizing content into expandable sections with DaisyUI styling.
+Collapsible accordion component for organizing content into expandable sections.
 
 ## Tag
 
@@ -8,13 +8,38 @@ Collapsible accordion component for organizing content into expandable sections
 
 ## Props
 
-| Prop         | Type                                    | Default     | Description                                      |
+| Prop | Type | Default | Description |
-| :----------- | :-------------------------------------- | :---------- | :----------------------------------------------- |
+| :--- | :--- | :--- | :--- |
-| `title`      | `string \| VNode \| Signal`             | Required    | Accordion section title                          |
+| `title` | `string \| VNode \| Signal` | Required | Accordion section title |
-| `open`       | `boolean \| Signal<boolean>`            | `false`     | Whether the accordion is expanded                |
+| `open` | `boolean \| Signal<boolean>` | `false` | Whether the accordion is expanded |
-| `name`       | `string`                                | `-`         | Group name for radio-style accordions (only one open at a time) |
+| `name` | `string` | `-` | Group name for radio-style accordions (only one open at a time) |
-| `class`      | `string`                                | `''`        | Additional CSS classes (DaisyUI + Tailwind)      |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
-| `children`   | `VNode \| Array<VNode>`                 | Required    | Content to display when expanded                 |
+| `children` | `VNode \| Array<VNode>` | Required | Content to display when expanded |
+
+## Styling
+
+Accordion supports all **daisyUI Collapse classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Type | `collapse-arrow`, `collapse-plus`, `collapse-minus` | Expand indicator style |
+| Color | `collapse-primary`, `collapse-secondary`, `collapse-accent` | Color variants |
+| Background | `bg-base-100`, `bg-base-200` | Background colors |
+
+> For further details, check the [daisyUI Collapse Documentation](https://daisyui.com/components/collapse) – Full reference for CSS classes.
+
+### Example
+
+```javascript
+Accordion({ 
+  title: "Click to expand",
+  class: "collapse-arrow bg-base-100",
+  open: isOpen,
+  onclick: () => isOpen(!isOpen())
+}, [
+  Div({ class: "p-4" }, "Hidden content here")
+]);
+```
 
 ## Live Examples
 
@@ -385,346 +410,4 @@ const VariantsDemo = () => {
   ]);
 };
 $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/alert.md

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

docs/components/autocomplete.md

@@ -1,6 +1,6 @@
 # Autocomplete
 
-Searchable dropdown with autocomplete functionality, keyboard navigation, and reactive options.
+Searchable dropdown with autocomplete functionality, keyboard navigation, and reactive items.
 
 ## Tag
 
@@ -8,14 +8,38 @@ Searchable dropdown with autocomplete functionality, keyboard navigation, and re
 
 ## Props
 
-| Prop         | Type                                              | Default             | Description                                      |
+| Prop | Type | Default | Description |
-| :----------- | :------------------------------------------------ | :------------------ | :----------------------------------------------- |
+| :--- | :--- | :--- | :--- |
-| `label`      | `string`                                          | `-`                 | Label text for the input                         |
+| `class` | `string` | `''` | Additional CSS classes for the container |
-| `options`    | `Array<string \| {value: string, label: string}>` | `[]`                | Options to search from                           |
+| `items` | `Array<string \| {value: string, label: string}> \| Signal` | `[]` | Items to search from |
-| `value`      | `string \| Signal<string>`                        | `''`                | Selected value                                   |
+| `value` | `string \| Signal<string>` | `''` | Selected value (reactive) |
-| `placeholder`| `string`                                          | `'Search...'`       | Placeholder text                                 |
+| `onSelect` | `function(item)` | `-` | Called when an option is selected |
-| `onSelect`   | `function`                                        | `-`                 | Called when an option is selected                |
+| `label` | `string` | `-` | Label text for the input |
-| `class`      | `string`                                          | `''`                | Additional CSS classes (DaisyUI + Tailwind)      |
+| `placeholder` | `string` | `'Search...'` | Placeholder text |
+
+## Styling
+
+Autocomplete wraps a **daisyUI Input component** internally. All Input styling classes work:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Color | `input-primary`, `input-secondary`, `input-accent`, `input-ghost`, `input-info`, `input-success`, `input-warning`, `input-error` | Input color variants |
+| Size | `input-xs`, `input-sm`, `input-md`, `input-lg` | Input scale |
+| Style | `input-bordered` (default), `input-ghost` | Visual style variants |
+
+> For further details, check the [daisyUI Input Documentation](https://daisyui.com/components/input) – Full reference for CSS classes.
+
+### Example
+
+```javascript
+Autocomplete({ 
+  class: "input-primary input-lg",
+  items: fruits,
+  value: selected,
+  onSelect: (value) => selected(value)
+});
+// Applies: primary color, large size
+```
 
 ## Live Examples
 
@@ -34,8 +58,7 @@ const BasicDemo = () => {
   const fruits = ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry', 'Mango', 'Pineapple', 'Watermelon'];
   
   return Autocomplete({
-    label: 'Search fruit',
+    items: fruits,
-    options: fruits,
     value: selected,
     onSelect: (value) => selected(value)
   });
@@ -68,8 +91,7 @@ const ObjectsDemo = () => {
   
   return Div({ class: 'flex flex-col gap-4 w-full' }, [
     Autocomplete({
-      label: 'Search country',
+      items: countries,
-      options: countries,
       value: selectedLabel,
       onSelect: (item) => {
         const selectedItem = typeof item === 'string' 
@@ -80,7 +102,7 @@ const ObjectsDemo = () => {
       }
     }),
     Div({ class: 'alert alert-success' }, [
-      `Selected: ${selected()} - ${selectedLabel()}`
+      () => `Selected: ${selected()} - ${selectedLabel()}`
     ])
   ]);
 };
@@ -106,8 +128,7 @@ const ReactiveDemo = () => {
   
   return Div({ class: 'flex flex-col gap-4 w-full' }, [
     Autocomplete({
-      label: 'Programming language',
+      items: programmingLanguages,
-      options: programmingLanguages,
       value: selected,
       onSelect: (value) => selected(value)
     }),
@@ -119,7 +140,7 @@ const ReactiveDemo = () => {
 $mount(ReactiveDemo, '#demo-reactive');
 ```
 
-### Dynamic Options
+### Dynamic Items
 
 <div class="card bg-base-200 border border-base-300 shadow-sm my-6">
   <div class="card-body">
@@ -141,8 +162,7 @@ const DynamicDemo = () => {
   
   return Div({ class: 'flex flex-col gap-4 w-full' }, [
     Select({
-      label: 'Category',
+      items: [
-      options: [
         { value: 'all', label: 'All items' },
         { value: 'fruits', label: 'Fruits' },
         { value: 'vegetables', label: 'Vegetables' }
@@ -151,8 +171,7 @@ const DynamicDemo = () => {
       onchange: (e) => filterType(e.target.value)
     }),
     Autocomplete({
-      label: 'Search item',
+      items: () => allItems[filterType()],
-      options: () => allItems[filterType()],
       value: selected,
       onSelect: (value) => selected(value)
     })
@@ -177,27 +196,24 @@ const VariantsDemo = () => {
   return Div({ class: 'flex flex-col gap-4' }, [
     Div({}, [
       Autocomplete({
-        label: 'Primary style',
         class: 'input-primary',
-        options: colors,
+        items: colors,
         value: $(''),
         placeholder: 'Search colors...'
       })
     ]),
     Div({}, [
       Autocomplete({
-        label: 'Secondary style',
         class: 'input-secondary',
-        options: colors,
+        items: colors,
         value: $(''),
         placeholder: 'Search colors...'
       })
     ]),
     Div({}, [
       Autocomplete({
-        label: 'Ghost style',
         class: 'input-ghost',
-        options: colors,
+        items: colors,
         value: $(''),
         placeholder: 'Search colors...'
       })
@@ -205,172 +221,4 @@ const VariantsDemo = () => {
   ]);
 };
 $mount(VariantsDemo, '#demo-variants');
-```
+```
-
-<script>
-  (function() {
-    const initAutocompleteExamples = () => {
-      
-      // 1. Basic Autocomplete
-      const basicTarget = document.querySelector('#demo-basic');
-      if (basicTarget && !basicTarget.hasChildNodes()) {
-        const BasicDemo = () => {
-          const selected = $('');
-          const fruits = ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry', 'Mango', 'Pineapple', 'Watermelon'];
-          
-          return Autocomplete({
-            label: 'Search fruit',
-            options: fruits,
-            value: selected,
-            onSelect: (value) => selected(value)
-          });
-        };
-        $mount(BasicDemo, basicTarget);
-      }
-
-      // 2. With Objects
-      const objectsTarget = document.querySelector('#demo-objects');
-      if (objectsTarget && !objectsTarget.hasChildNodes()) {
-        const ObjectsDemo = () => {
-          const selected = $('');
-          const selectedLabel = $('');
-          
-          const countries = [
-            { value: 'mx', label: 'Mexico' },
-            { value: 'us', label: 'United States' },
-            { value: 'ca', label: 'Canada' },
-            { value: 'br', label: 'Brazil' },
-            { value: 'ar', label: 'Argentina' },
-            { value: 'es', label: 'Spain' }
-          ];
-          
-          return Div({ class: 'flex flex-col gap-4 w-full' }, [
-            Autocomplete({
-              label: 'Search country',
-              options: countries,
-              value: selectedLabel,
-              onSelect: (item) => {
-                const selectedItem = typeof item === 'string' 
-                  ? countries.find(c => c.label === item) 
-                  : item;
-                selected(selectedItem?.value || '');
-                selectedLabel(selectedItem?.label || '');
-              }
-            }),
-            Div({ class: 'alert alert-success' }, [
-              `Selected: ${selected()} - ${selectedLabel()}`
-            ])
-          ]);
-        };
-        $mount(ObjectsDemo, objectsTarget);
-      }
-
-      // 3. Reactive Display
-      const reactiveTarget = document.querySelector('#demo-reactive');
-      if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
-        const ReactiveDemo = () => {
-          const selected = $('');
-          
-          const programmingLanguages = [
-            'JavaScript', 'Python', 'Java', 'C++', 'Ruby', 'Go', 'Rust', 'TypeScript', 'Swift', 'Kotlin'
-          ];
-          
-          return Div({ class: 'flex flex-col gap-4 w-full' }, [
-            Autocomplete({
-              label: 'Programming language',
-              options: programmingLanguages,
-              value: selected,
-              onSelect: (value) => selected(value)
-            }),
-            () => selected() ? Div({ class: 'alert alert-info' }, [
-              `You selected: ${selected()}`
-            ]) : null
-          ]);
-        };
-        $mount(ReactiveDemo, reactiveTarget);
-      }
-
-      // 4. Dynamic Options
-      const dynamicTarget = document.querySelector('#demo-dynamic');
-      if (dynamicTarget && !dynamicTarget.hasChildNodes()) {
-        const DynamicDemo = () => {
-          const selected = $('');
-          const filterType = $('all');
-          
-          const allItems = {
-            fruits: ['Apple', 'Banana', 'Orange', 'Mango'],
-            vegetables: ['Carrot', 'Broccoli', 'Spinach', 'Potato'],
-            all: ['Apple', 'Banana', 'Orange', 'Mango', 'Carrot', 'Broccoli', 'Spinach', 'Potato']
-          };
-          
-          return Div({ class: 'flex flex-col gap-4 w-full' }, [
-            Select({
-              label: 'Category',
-              options: [
-                { value: 'all', label: 'All items' },
-                { value: 'fruits', label: 'Fruits' },
-                { value: 'vegetables', label: 'Vegetables' }
-              ],
-              value: filterType,
-              onchange: (e) => filterType(e.target.value)
-            }),
-            Autocomplete({
-              label: 'Search item',
-              options: () => allItems[filterType()],
-              value: selected,
-              onSelect: (value) => selected(value)
-            })
-          ]);
-        };
-        $mount(DynamicDemo, dynamicTarget);
-      }
-
-      // 5. All Variants
-      const variantsTarget = document.querySelector('#demo-variants');
-      if (variantsTarget && !variantsTarget.hasChildNodes()) {
-        const VariantsDemo = () => {
-          const colors = ['Red', 'Blue', 'Green', 'Yellow', 'Purple', 'Orange', 'Pink', 'Brown', 'Black', 'White'];
-          
-          return Div({ class: 'flex flex-col gap-4' }, [
-            Div({}, [
-              Autocomplete({
-                label: 'Primary style',
-                class: 'input-primary',
-                options: colors,
-                value: $(''),
-                placeholder: 'Search colors...'
-              })
-            ]),
-            Div({}, [
-              Autocomplete({
-                label: 'Secondary style',
-                class: 'input-secondary',
-                options: colors,
-                value: $(''),
-                placeholder: 'Search colors...'
-              })
-            ]),
-            Div({}, [
-              Autocomplete({
-                label: 'Ghost style',
-                class: 'input-ghost',
-                options: colors,
-                value: $(''),
-                placeholder: 'Search colors...'
-              })
-            ])
-          ]);
-        };
-        $mount(VariantsDemo, variantsTarget);
-      }
-    };
-
-    initAutocompleteExamples();
-    
-    if (window.$docsify) {
-      window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
-        hook.doneEach(initAutocompleteExamples);
-      });
-    }
-  })();
-</script>

docs/components/badge.md

@@ -1,6 +1,6 @@
 # Badge
 
-Badge component for displaying counts, labels, and status indicators with DaisyUI styling.
+Badge component for displaying counts, labels, and status indicators.
 
 ## Tag
 
@@ -8,10 +8,29 @@ Badge component for displaying counts, labels, and status indicators with DaisyU
 
 ## Props
 
-| Prop         | Type                         | Default     | Description                                      |
+| Prop | Type | Default | Description |
-| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
+| :--- | :--- | :--- | :--- |
-| `class`      | `string`                     | `''`        | Additional CSS classes (DaisyUI badge variants)  |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI badge variants) |
-| `children`   | `string \| VNode`            | `-`         | Badge content                                    |
+| `children` | `string \| VNode` | `-` | Badge content |
+
+## Styling
+
+Badge supports all **daisyUI Badge classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Color | `badge-primary`, `badge-secondary`, `badge-accent`, `badge-info`, `badge-success`, `badge-warning`, `badge-error` | Visual color variants |
+| Size | `badge-xs`, `badge-sm`, `badge-md`, `badge-lg` | Badge scale |
+| Style | `badge-outline`, `badge-ghost`, `badge-dash` | Visual style variants |
+
+> For further details, check the [daisyUI Badge Documentation](https://daisyui.com/components/badge) – Full reference for CSS classes.
+
+### Example
+
+```javascript
+Badge({ class: "badge-primary badge-lg" }, "New");
+// Applies: primary color, large size
+```
 
 ## Live Examples
 
@@ -125,19 +144,19 @@ $mount(GhostDemo, '#demo-ghost');
 const IconsDemo = () => {
   return Div({ class: 'flex flex-wrap gap-2' }, [
     Badge({ class: 'gap-1' }, [
-      Icons.iconSuccess,
+      Span({}, '✓'),
       Span({}, 'Success')
     ]),
     Badge({ class: 'gap-1 badge-warning' }, [
-      Icons.iconWarning,
+      Span({}, '⚠'),
       Span({}, 'Warning')
     ]),
     Badge({ class: 'gap-1 badge-error' }, [
-      Icons.iconError,
+      Span({}, '✗'),
       Span({}, 'Error')
     ]),
     Badge({ class: 'gap-1 badge-info' }, [
-      Icons.iconInfo,
+      Span({}, 'ℹ'),
       Span({}, 'Info')
     ]),
     Badge({ class: 'gap-1' }, [
@@ -301,237 +320,4 @@ const InlineDemo = () => {
   ]);
 };
 $mount(InlineDemo, '#demo-inline');
-```
+```
-
-<script>
-  (function() {
-    const initBadgeExamples = () => {
-      
-      // 1. Basic Badge
-      const basicTarget = document.querySelector('#demo-basic');
-      if (basicTarget && !basicTarget.hasChildNodes()) {
-        const BasicDemo = () => {
-          return Div({ class: 'flex flex-wrap gap-2' }, [
-            Badge({}, 'Default'),
-            Badge({ class: 'badge-primary' }, 'Primary'),
-            Badge({ class: 'badge-secondary' }, 'Secondary'),
-            Badge({ class: 'badge-accent' }, 'Accent'),
-            Badge({ class: 'badge-info' }, 'Info'),
-            Badge({ class: 'badge-success' }, 'Success'),
-            Badge({ class: 'badge-warning' }, 'Warning'),
-            Badge({ class: 'badge-error' }, 'Error')
-          ]);
-        };
-        $mount(BasicDemo, basicTarget);
-      }
-
-      // 2. Badge Sizes
-      const sizesTarget = document.querySelector('#demo-sizes');
-      if (sizesTarget && !sizesTarget.hasChildNodes()) {
-        const SizesDemo = () => {
-          return Div({ class: 'flex flex-wrap gap-2 items-center' }, [
-            Badge({ class: 'badge-xs' }, 'Extra Small'),
-            Badge({ class: 'badge-sm' }, 'Small'),
-            Badge({}, 'Default'),
-            Badge({ class: 'badge-md' }, 'Medium'),
-            Badge({ class: 'badge-lg' }, 'Large')
-          ]);
-        };
-        $mount(SizesDemo, sizesTarget);
-      }
-
-      // 3. Outline Badges
-      const outlineTarget = document.querySelector('#demo-outline');
-      if (outlineTarget && !outlineTarget.hasChildNodes()) {
-        const OutlineDemo = () => {
-          return Div({ class: 'flex flex-wrap gap-2' }, [
-            Badge({ class: 'badge-outline' }, 'Default'),
-            Badge({ class: 'badge-outline badge-primary' }, 'Primary'),
-            Badge({ class: 'badge-outline badge-secondary' }, 'Secondary'),
-            Badge({ class: 'badge-outline badge-accent' }, 'Accent'),
-            Badge({ class: 'badge-outline badge-info' }, 'Info'),
-            Badge({ class: 'badge-outline badge-success' }, 'Success'),
-            Badge({ class: 'badge-outline badge-warning' }, 'Warning'),
-            Badge({ class: 'badge-outline badge-error' }, 'Error')
-          ]);
-        };
-        $mount(OutlineDemo, outlineTarget);
-      }
-
-      // 4. Ghost Badges
-      const ghostTarget = document.querySelector('#demo-ghost');
-      if (ghostTarget && !ghostTarget.hasChildNodes()) {
-        const GhostDemo = () => {
-          return Div({ class: 'flex flex-wrap gap-2' }, [
-            Badge({ class: 'badge-ghost' }, 'Default'),
-            Badge({ class: 'badge-ghost badge-primary' }, 'Primary'),
-            Badge({ class: 'badge-ghost badge-secondary' }, 'Secondary'),
-            Badge({ class: 'badge-ghost badge-accent' }, 'Accent'),
-            Badge({ class: 'badge-ghost badge-info' }, 'Info'),
-            Badge({ class: 'badge-ghost badge-success' }, 'Success'),
-            Badge({ class: 'badge-ghost badge-warning' }, 'Warning'),
-            Badge({ class: 'badge-ghost badge-error' }, 'Error')
-          ]);
-        };
-        $mount(GhostDemo, ghostTarget);
-      }
-
-      // 5. With Icons
-      const iconsTarget = document.querySelector('#demo-icons');
-      if (iconsTarget && !iconsTarget.hasChildNodes()) {
-        const IconsDemo = () => {
-          return Div({ class: 'flex flex-wrap gap-2' }, [
-            Badge({ class: 'gap-1' }, [
-              Img({src: Icons.iconSuccess}),
-              Span({}, 'Success')
-            ]),
-            Badge({ class: 'gap-1 badge-warning' }, [
-              Img({src: Icons.iconWarning}),
-              Span({}, 'Warning')
-            ]),
-            Badge({ class: 'gap-1 badge-error' }, [
-              Img({src: Icons.iconError}),
-              Span({}, 'Error')
-            ]),
-            Badge({ class: 'gap-1 badge-info' }, [
-              Img({src: Icons.iconInfo}),
-              Span({}, 'Info')
-            ]),
-            Badge({ class: 'gap-1' }, [
-              Span({}, '★'),
-              Span({}, '4.5')
-            ])
-          ]);
-        };
-        $mount(IconsDemo, iconsTarget);
-      }
-
-      // 6. Status Badges
-      const statusTarget = document.querySelector('#demo-status');
-      if (statusTarget && !statusTarget.hasChildNodes()) {
-        const StatusDemo = () => {
-          const statuses = [
-            { label: 'Active', class: 'badge-success' },
-            { label: 'Pending', class: 'badge-warning' },
-            { label: 'Completed', class: 'badge-info' },
-            { label: 'Failed', class: 'badge-error' },
-            { label: 'Archived', class: 'badge-ghost' }
-          ];
-          
-          return Div({ class: 'flex flex-col gap-2' }, [
-            Div({ class: 'text-sm font-bold mb-2' }, 'Order Status'),
-            Div({ class: 'flex flex-wrap gap-2' }, statuses.map(status =>
-              Badge({ class: status.class }, status.label)
-            ))
-          ]);
-        };
-        $mount(StatusDemo, statusTarget);
-      }
-
-      // 7. Count Badges
-      const countTarget = document.querySelector('#demo-count');
-      if (countTarget && !countTarget.hasChildNodes()) {
-        const CountDemo = () => {
-          const notifications = $(3);
-          const messages = $(5);
-          const updates = $(0);
-          
-          return Div({ class: 'flex flex-wrap gap-6' }, [
-            Div({ class: 'flex items-center gap-2' }, [
-              Span({}, 'Notifications'),
-              Badge({ class: 'badge-primary' }, () => notifications())
-            ]),
-            Div({ class: 'flex items-center gap-2' }, [
-              Span({}, 'Messages'),
-              Badge({ class: 'badge-secondary' }, () => messages())
-            ]),
-            Div({ class: 'flex items-center gap-2' }, [
-              Span({}, 'Updates'),
-              Badge({ class: 'badge-ghost' }, () => updates() || '0')
-            ])
-          ]);
-        };
-        $mount(CountDemo, countTarget);
-      }
-
-      // 8. Interactive Badge
-      const interactiveTarget = document.querySelector('#demo-interactive');
-      if (interactiveTarget && !interactiveTarget.hasChildNodes()) {
-        const InteractiveDemo = () => {
-          const count = $(0);
-          
-          return Div({ class: 'flex flex-col gap-4 items-center' }, [
-            Div({ class: 'flex items-center gap-4' }, [
-              Button({ class: 'btn btn-sm', onclick: () => count(count() - 1) }, '-'),
-              Badge({ class: 'badge-primary text-lg min-w-[4rem] justify-center' }, () => count()),
-              Button({ class: 'btn btn-sm', onclick: () => count(count() + 1) }, '+')
-            ]),
-            Button({ 
-              class: 'btn btn-ghost btn-sm',
-              onclick: () => count(0)
-            }, 'Reset')
-          ]);
-        };
-        $mount(InteractiveDemo, interactiveTarget);
-      }
-
-      // 9. All Variants
-      const variantsTarget = document.querySelector('#demo-variants');
-      if (variantsTarget && !variantsTarget.hasChildNodes()) {
-        const VariantsDemo = () => {
-          return Div({ class: 'flex flex-col gap-6' }, [
-            Div({ class: 'flex flex-wrap gap-2' }, [
-              Badge({ class: 'badge-xs' }, 'XS'),
-              Badge({ class: 'badge-sm' }, 'SM'),
-              Badge({}, 'MD'),
-              Badge({ class: 'badge-lg' }, 'LG')
-            ]),
-            Div({ class: 'flex flex-wrap gap-2' }, [
-              Badge({ class: 'badge-primary badge-sm' }, 'Primary'),
-              Badge({ class: 'badge-secondary badge-sm' }, 'Secondary'),
-              Badge({ class: 'badge-accent badge-sm' }, 'Accent')
-            ]),
-            Div({ class: 'flex flex-wrap gap-2' }, [
-              Badge({ class: 'badge-outline badge-primary' }, 'Outline'),
-              Badge({ class: 'badge-ghost badge-primary' }, 'Ghost')
-            ])
-          ]);
-        };
-        $mount(VariantsDemo, variantsTarget);
-      }
-
-      // 10. Inline with Text
-      const inlineTarget = document.querySelector('#demo-inline');
-      if (inlineTarget && !inlineTarget.hasChildNodes()) {
-        const InlineDemo = () => {
-          return Div({ class: 'space-y-2' }, [
-            Div({ class: 'text-sm' }, [
-              'Your order is ',
-              Badge({ class: 'badge-success badge-sm' }, 'Confirmed'),
-              ' and will be shipped soon.'
-            ]),
-            Div({ class: 'text-sm' }, [
-              'This feature is ',
-              Badge({ class: 'badge-warning badge-sm' }, 'Beta'),
-              ' and may change.'
-            ]),
-            Div({ class: 'text-sm' }, [
-              'Version ',
-              Badge({ class: 'badge-info badge-xs' }, 'v2.1.0'),
-              ' released on March 2026'
-            ])
-          ]);
-        };
-        $mount(InlineDemo, inlineTarget);
-      }
-    };
-
-    initBadgeExamples();
-    
-    if (window.$docsify) {
-      window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
-        hook.doneEach(initBadgeExamples);
-      });
-    }
-  })();
-</script>

docs/components/button.md

@@ -1,53 +1,44 @@
-> # Button(props, children?: string | Signal | [...]): HTMLElement
+# Button
 
 ---
 
 ## Props
 
-| Prop         | Type                         | Default             | Description                      |
+| Prop       | Type                         | Description                                            |
-| :----------- | :--------------------------- | :------------------ | :------------------------------- |
+| :--------- | :--------------------------- | :----------------------------------------------------- |
-| `class`      | `string`                     | `''`                | Additional CSS classes (daisyUI) |
+| `class`    | `string`                     | Additional CSS classes                                 |
-| `disabled`   | `boolean \| Signal<boolean>` | `false`             | Disabled state                   |
+| `loading`  | `boolean \| Signal<boolean>` | Shows a spinner and disables the button                |
-| `loading`    | `boolean \| Signal<boolean>` | `false`             | Shows loading spinner            |
+| `disabled` | `boolean \| Signal<boolean>` | Disabled state                                         |
-| `badge`      | `string \| Signal<string>`   | `-`                 | Badge text displayed on corner   |
+| `icon`     | `string \| VNode \| Signal`  | Icon displayed before the text                         |
-| `badgeClass` | `string`                     | `'badge-secondary'` | Badge styling classes            |
+| `onclick`  | `function`                   | Click event handler                                    |
-| `tooltip`    | `string \| Signal<string>`   | `-`                 | Tooltip text on hover            |
+| `type`     | `string`                     | Native button type (`'button'`, `'submit'`, `'reset'`) |
-| `icon`       | `string \| VNode \| Signal`  | `-`                 | Icon displayed before text       |
-| `onclick`    | `function`                   | `-`                 | Click event handler              |
-| `type`       | `string`                     | `'button'`          | Native button type               |
 
-## Class Options
+---
 
-For more detailed information about the underlying styling system, visit the daisyUI documentation:
+## Classes (daisyUI)
 
-- [daisyUI Button](https://daisyui.com/components/button)
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Color | `btn-primary`, `btn-secondary`, `btn-accent`, `btn-ghost`, `btn-info`, `btn-success`, `btn-warning`, `btn-error` | Visual color variants |
+| Size | `btn-xs`, `btn-sm`, `btn-md`, `btn-lg`, `btn-xl` | Button scale |
+| Style | `btn-outline`, `btn-soft`, `btn-dash`, `btn-link` | Visual style variants |
+| Shape | `btn-circle`, `btn-square`, `btn-wide`, `btn-block` | Button shape |
+| State | `btn-active`, `btn-disabled` | Forced visual states |
 
-| Class Name      | Category      | Description                           |
+> SigProUI supports styling via daisyUI independently or combined with the `ui` prop.
-| :-------------- | :------------ | :------------------------------------ |
+> For further details, check the [daisyUI Button Documentation](https://daisyui.com/components/button) – Full reference for CSS classes.
-| `btn-neutral`   | `Color` 🎨    | Neutral brand color                   |
+
-| `btn-primary`   | `Color` 🎨    | Primary brand color                   |
+### Example
-| `btn-secondary` | `Color` 🎨    | Secondary brand color                 |
+
-| `btn-accent`    | `Color` 🎨    | Accent brand color                    |
+```javascript
-| `btn-info`      | `Color` 🎨    | Informational blue color              |
+Button({ class: "btn-primary btn-lg btn-circle gap-4"}, "Click Me");
-| `btn-success`   | `Color` 🎨    | Success green color                   |
+// Applies: primary color, large size, circular shape
-| `btn-warning`   | `Color` 🎨    | Warning yellow color                  |
+// class is any css class from pure css or favorite framework
-| `btn-error`     | `Color` 🎨    | Error red color                       |
+```
-| `btn-xl`        | `Size` 📏     | Extra large scale                     |
+
-| `btn-lg`        | `Size` 📏     | Large scale                           |
+---
-| `btn-md`        | `Size` 📏     | Medium scale (Default)                |
+
-| `btn-sm`        | `Size` 📏     | Small scale                           |
+## Examples
-| `btn-xs`        | `Size` 📏     | Extra small scale                     |
-| `btn-outline`   | `Style` ✨    | Transparent with colored border       |
-| `btn-dash`      | `Style` ✨    | Dashed border style                   |
-| `btn-soft`      | `Style` ✨    | Low opacity background color          |
-| `btn-ghost`     | `Style` ✨    | No background, hover effect only      |
-| `btn-link`      | `Style` ✨    | Looks like a text link                |
-| `btn-square`    | `Shape` 📐    | 1:1 aspect ratio                      |
-| `btn-circle`    | `Shape` 📐    | 1:1 aspect ratio with rounded corners |
-| `btn-wide`      | `Shape` 📐    | Extra horizontal padding              |
-| `btn-block`     | `Shape` 📐    | Full width of container               |
-| `btn-active`    | `Behavior` ⚙️ | Forced active/pressed state           |
-| `btn-disabled`  | `Behavior` ⚙️ | Visual and functional disabled state  |
 
 ### Basic Button
 
@@ -84,19 +75,32 @@ const LoadingDemo = () => {
 $mount(LoadingDemo, "#demo-loading");
 ```
 
-### With Badge
+### With Icon
+
+<div id="demo-icon" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+
+```javascript
+const IconDemo = () => {
+  return Button(
+    {
+      class: "btn-primary",
+      icon: "⭐",
+    },
+    "Favorite",
+  );
+};
+$mount(IconDemo, "#demo-icon");
+```
+
+### With Badge (using Indicator)
 
 <div id="demo-badge" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
 
 ```javascript
 const BadgeDemo = () => {
-  return Button(
+  return Indicator(
-    {
+    { value: "3", class: "badge-accent" },
-      class: "btn-outline",
+    Button({ class: "btn-outline" }, "Notifications"),
-      badge: "3",
-      badgeClass: "badge-accent",
-    },
-    "Notifications",
   );
 };
 $mount(BadgeDemo, "#demo-badge");
@@ -108,36 +112,37 @@ $mount(BadgeDemo, "#demo-badge");
 
 ```javascript
 const TooltipDemo = () => {
-  return Button(
+  return Tooltip({ tip: "Delete item" }, Button({ class: "btn-ghost" }, "Delete"));
-    {
-      class: "btn-ghost",
-      tooltip: "Delete item",
-    },
-    "Delete",
-  );
 };
 $mount(TooltipDemo, "#demo-tooltip");
 ```
 
-### Disabled State
+### Combined (Badge + Tooltip)
 
-<div id="demo-disabled" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+<div id="demo-combined" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
 
 ```javascript
-const DisabledDemo = () => {
+const CombinedDemo = () => {
-  const isDisabled = $(true);
+  const count = $(0);
-
+  return Tooltip(
-  return Button(
+    { tip: () => `${count()} likes` },
-    {
+    Indicator(
-      class: "btn-primary btn-disabled",
+      { value: count, class: "badge-accent" },
-    },
+      Button(
-    "Submit",
+        {
+          class: "btn-primary btn-lg",
+          icon: "👍",
+          onclick: () => count(count() + 1),
+        },
+        "Like",
+      )
+    ),
   );
 };
-$mount(DisabledDemo, "#demo-disabled");
+$mount(CombinedDemo, "#demo-combined");
 ```
 
-### All Variants
+### All Color Variants
 
 <div id="demo-variants" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
 
@@ -153,16 +158,3 @@ const VariantsDemo = () => {
 };
 $mount(VariantsDemo, "#demo-variants");
 ```
-
-<div id="demo-test" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
-
-```javascript
-const TestDemo = () => {
-  return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
-    $html("span", {class: "indicator"},[
-      5,
-      Button('Click')])
-  ]);
-};
-$mount(TestDemo, "#demo-test");
-```

docs/components/checkbox.md

@@ -8,15 +8,38 @@ Toggle checkbox component with label, tooltip support, and reactive state manage
 
 ## Props
 
-| Prop         | Type                         | Default     | Description                                      |
+| Prop | Type | Default | Description |
-| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
+| :--- | :--- | :--- | :--- |
-| `label`      | `string`                     | `-`         | Label text for the checkbox                      |
+| `label` | `string` | `-` | Label text for the checkbox |
-| `value`      | `boolean \| Signal<boolean>` | `false`     | Checked state                                    |
+| `value` | `boolean \| Signal<boolean>` | `false` | Checked state |
-| `tooltip`    | `string`                     | `-`         | Tooltip text on hover                            |
+| `tooltip` | `string` | `-` | Tooltip text on hover |
-| `toggle`     | `boolean`                    | `false`     | Display as toggle switch instead of checkbox     |
+| `toggle` | `boolean` | `false` | Display as toggle switch instead of checkbox |
-| `disabled`   | `boolean \| Signal<boolean>` | `false`     | Disabled state                                   |
+| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
-| `class`      | `string`                     | `''`        | Additional CSS classes (DaisyUI + Tailwind)      |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
-| `onclick`    | `function`                   | `-`         | Click event handler                              |
+| `onclick` | `function` | `-` | Click event handler |
+
+## Styling
+
+Checkbox supports all **daisyUI Checkbox and Toggle classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Color (Checkbox) | `checkbox-primary`, `checkbox-secondary`, `checkbox-accent`, `checkbox-info`, `checkbox-success`, `checkbox-warning`, `checkbox-error` | Checkbox color variants |
+| Size (Checkbox) | `checkbox-xs`, `checkbox-sm`, `checkbox-md`, `checkbox-lg` | Checkbox scale |
+| Color (Toggle) | `toggle-primary`, `toggle-secondary`, `toggle-accent`, `toggle-info`, `toggle-success`, `toggle-warning`, `toggle-error` | Toggle color variants |
+| Size (Toggle) | `toggle-xs`, `toggle-sm`, `toggle-md`, `toggle-lg` | Toggle scale |
+
+> For further details, check the [daisyUI Checkbox Documentation](https://daisyui.com/components/checkbox) and [daisyUI Toggle Documentation](https://daisyui.com/components/toggle) – Full reference for CSS classes.
+
+### Example
+
+```javascript
+// Checkbox
+Checkbox({ class: "checkbox-primary checkbox-lg", label: "Accept terms" });
+
+// Toggle switch
+Checkbox({ toggle: true, class: "toggle-success", label: "Enable feature" });
+```
 
 ## Live Examples
 
@@ -264,216 +287,4 @@ const FormDemo = () => {
   ]);
 };
 $mount(FormDemo, '#demo-form');
-```
+```
-
-<script>
-  (function() {
-    const initCheckboxExamples = () => {
-      
-      // 1. Basic Checkbox
-      const basicTarget = document.querySelector('#demo-basic');
-      if (basicTarget && !basicTarget.hasChildNodes()) {
-        const BasicDemo = () => {
-          const accepted = $(false);
-          
-          return Checkbox({
-            label: 'I accept the terms and conditions',
-            value: accepted,
-            onclick: () => accepted(!accepted())
-          });
-        };
-        $mount(BasicDemo, basicTarget);
-      }
-
-      // 2. Toggle Switch
-      const toggleTarget = document.querySelector('#demo-toggle');
-      if (toggleTarget && !toggleTarget.hasChildNodes()) {
-        const ToggleDemo = () => {
-          const enabled = $(false);
-          
-          return Div({ class: 'flex flex-col gap-4 w-full' }, [
-            Checkbox({
-              label: 'Enable notifications',
-              value: enabled,
-              toggle: true,
-              onclick: () => enabled(!enabled())
-            }),
-            () => enabled() 
-              ? Div({ class: 'alert alert-success' }, 'Notifications are ON')
-              : Div({ class: 'alert alert-soft' }, 'Notifications are OFF')
-          ]);
-        };
-        $mount(ToggleDemo, toggleTarget);
-      }
-
-      // 3. With Tooltip
-      const tooltipTarget = document.querySelector('#demo-tooltip');
-      if (tooltipTarget && !tooltipTarget.hasChildNodes()) {
-        const TooltipDemo = () => {
-          const darkMode = $(false);
-          
-          return Checkbox({
-            label: 'Dark mode',
-            value: darkMode,
-            tooltip: 'Enable dark theme preference',
-            onclick: () => darkMode(!darkMode())
-          });
-        };
-        $mount(TooltipDemo, tooltipTarget);
-      }
-
-      // 4. Disabled State
-      const disabledTarget = document.querySelector('#demo-disabled');
-      if (disabledTarget && !disabledTarget.hasChildNodes()) {
-        const DisabledDemo = () => {
-          return Div({ class: 'flex flex-col gap-3' }, [
-            Checkbox({
-              label: 'Checked and disabled',
-              value: true,
-              disabled: true
-            }),
-            Checkbox({
-              label: 'Unchecked and disabled',
-              value: false,
-              disabled: true
-            })
-          ]);
-        };
-        $mount(DisabledDemo, disabledTarget);
-      }
-
-      // 5. Reactive Multiple Selection
-      const multipleTarget = document.querySelector('#demo-multiple');
-      if (multipleTarget && !multipleTarget.hasChildNodes()) {
-        const MultipleDemo = () => {
-          const options = [
-            { id: 1, label: 'Option 1', selected: $(false) },
-            { id: 2, label: 'Option 2', selected: $(false) },
-            { id: 3, label: 'Option 3', selected: $(false) }
-          ];
-          
-          const selectAll = $(false);
-          
-          const toggleAll = (value) => {
-            selectAll(value);
-            options.forEach(opt => opt.selected(value));
-          };
-          
-          const updateSelectAll = () => {
-            const allSelected = options.every(opt => opt.selected());
-            selectAll(allSelected);
-          };
-          
-          return Div({ class: 'flex flex-col gap-3' }, [
-            Checkbox({
-              label: 'Select all',
-              value: selectAll,
-              onclick: () => toggleAll(!selectAll())
-            }),
-            Div({ class: 'divider my-1' }),
-            ...options.map(opt => Checkbox({
-              label: opt.label,
-              value: opt.selected,
-              onclick: () => {
-                opt.selected(!opt.selected());
-                updateSelectAll();
-              }
-            })),
-            Div({ class: 'mt-2 text-sm opacity-70' }, () => {
-              const count = options.filter(opt => opt.selected()).length;
-              return `${count} of ${options.length} selected`;
-            })
-          ]);
-        };
-        $mount(MultipleDemo, multipleTarget);
-      }
-
-      // 6. All Variants
-      const variantsTarget = document.querySelector('#demo-variants');
-      if (variantsTarget && !variantsTarget.hasChildNodes()) {
-        const VariantsDemo = () => {
-          const variant1 = $(true);
-          const variant2 = $(false);
-          const variant3 = $(true);
-          
-          return Div({ class: 'flex flex-col gap-3' }, [
-            Div({ class: 'flex items-center gap-4' }, [
-              Checkbox({
-                label: 'Primary',
-                value: variant1,
-                class: 'checkbox-primary',
-                onclick: () => variant1(!variant1())
-              }),
-              Checkbox({
-                label: 'Secondary',
-                value: variant2,
-                class: 'checkbox-secondary',
-                onclick: () => variant2(!variant2())
-              })
-            ]),
-            Div({ class: 'flex items-center gap-4' }, [
-              Checkbox({
-                label: 'Accent',
-                value: variant3,
-                class: 'checkbox-accent',
-                onclick: () => variant3(!variant3())
-              }),
-              Checkbox({
-                label: 'Toggle switch',
-                value: $(false),
-                toggle: true,
-                class: 'toggle-primary'
-              })
-            ])
-          ]);
-        };
-        $mount(VariantsDemo, variantsTarget);
-      }
-
-      // 7. Form Example
-      const formTarget = document.querySelector('#demo-form');
-      if (formTarget && !formTarget.hasChildNodes()) {
-        const FormDemo = () => {
-          const subscribe = $(false);
-          const weekly = $(false);
-          const monthly = $(true);
-          
-          return Div({ class: 'flex flex-col gap-4' }, [
-            Div({ class: 'text-sm font-bold' }, 'Newsletter preferences'),
-            Checkbox({
-              label: 'Subscribe to newsletter',
-              value: subscribe,
-              onclick: () => subscribe(!subscribe())
-            }),
-            () => subscribe() ? Div({ class: 'ml-6 flex flex-col gap-2' }, [
-              Checkbox({
-                label: 'Weekly updates',
-                value: weekly,
-                onclick: () => weekly(!weekly())
-              }),
-              Checkbox({
-                label: 'Monthly digest',
-                value: monthly,
-                onclick: () => monthly(!monthly())
-              })
-            ]) : null,
-            () => subscribe() && (weekly() || monthly())
-              ? Div({ class: 'alert alert-success text-sm mt-2' }, 'You will receive updates!')
-              : subscribe()
-              ? Div({ class: 'alert alert-warning text-sm mt-2' }, 'Select at least one frequency')
-              : null
-          ]);
-        };
-        $mount(FormDemo, formTarget);
-      }
-    };
-
-    initCheckboxExamples();
-    
-    if (window.$docsify) {
-      window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
-        hook.doneEach(initCheckboxExamples);
-      });
-    }
-  })();
-</script>

docs/components/colorpicker.md

@@ -8,11 +8,32 @@ Color picker component with preset color palette, reactive value binding, and cu
 
 ## Props
 
-| Prop         | Type                         | Default     | Description                                      |
+| Prop | Type | Default | Description |
-| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
+| :--- | :--- | :--- | :--- |
-| `label`      | `string`                     | `-`         | Label text for the button                        |
+| `label` | `string` | `-` | Label text for the button |
-| `value`      | `string \| Signal<string>`   | `'#000000'` | Selected color value (hex format)                |
+| `value` | `string \| Signal<string>` | `'#000000'` | Selected color value (hex format) |
-| `class`      | `string`                     | `''`        | Additional CSS classes (DaisyUI + Tailwind)      |
+| `class` | `string` | `''` | Additional CSS classes (Tailwind + custom styling) |
+
+## Styling
+
+Colorpicker is a custom component built with Tailwind CSS. The button supports standard **daisyUI Button classes** for consistent styling:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Size | `btn-xs`, `btn-sm`, `btn-md`, `btn-lg` | Button scale |
+| Style | `btn-outline`, `btn-soft`, `btn-ghost` | Visual style variants |
+
+> For further details, check the [daisyUI Button Documentation](https://daisyui.com/components/button) – The color picker button accepts standard button styling classes.
+
+### Example
+
+```javascript
+Colorpicker({ 
+  class: "btn-outline btn-sm",
+  label: "Pick color",
+  value: selectedColor
+});
+```
 
 ## Live Examples
 
@@ -56,10 +77,10 @@ const PreviewDemo = () => {
       value: color
     }),
     Div({ 
-      class: 'w-full h-20 rounded-lg shadow-inner transition-all duration-200',
+      class: 'w-full h-20 rounded-lg shadow-inner transition-all duration-200 flex items-center justify-center',
       style: () => `background-color: ${color()}`
     }, [
-      Div({ class: 'text-center leading-20 pt-6 opacity-70' }, () => color())
+      Div({ class: 'text-center font-mono text-sm bg-black/20 px-2 py-1 rounded' }, () => color())
     ])
   ]);
 };
@@ -196,187 +217,19 @@ const DynamicDemo = () => {
     ]),
     Div({ class: 'grid grid-cols-3 gap-2 mt-2' }, [
       Div({ 
-        class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold',
+        class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
-        style: () => `background-color: ${primary()}; color: white`
+        style: () => `background-color: ${primary()}`
       }, 'Primary'),
       Div({ 
-        class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold',
+        class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
-        style: () => `background-color: ${secondary()}; color: white`
+        style: () => `background-color: ${secondary()}`
       }, 'Secondary'),
       Div({ 
-        class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold',
+        class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
-        style: () => `background-color: ${accent()}; color: white`
+        style: () => `background-color: ${accent()}`
       }, 'Accent')
     ])
   ]);
 };
 $mount(DynamicDemo, '#demo-dynamic');
-```
+```
-
-<script>
-  (function() {
-    const initColorpickerExamples = () => {
-      
-      // 1. Basic Colorpicker
-      const basicTarget = document.querySelector('#demo-basic');
-      if (basicTarget && !basicTarget.hasChildNodes()) {
-        const BasicDemo = () => {
-          const color = $('#3b82f6');
-          return Colorpicker({
-            label: 'Pick a color',
-            value: color
-          });
-        };
-        $mount(BasicDemo, basicTarget);
-      }
-
-      // 2. With Reactive Preview
-      const previewTarget = document.querySelector('#demo-preview');
-      if (previewTarget && !previewTarget.hasChildNodes()) {
-        const PreviewDemo = () => {
-          const color = $('#10b981');
-          return Div({ class: 'flex flex-col gap-4 w-full' }, [
-            Colorpicker({
-              label: 'Choose color',
-              value: color
-            }),
-            Div({ 
-              class: 'w-full h-20 rounded-lg shadow-inner transition-all duration-200 flex items-center justify-center',
-              style: () => `background-color: ${color()}`
-            }, [
-              Div({ class: 'text-center font-mono text-sm bg-black/20 px-2 py-1 rounded' }, () => color())
-            ])
-          ]);
-        };
-        $mount(PreviewDemo, previewTarget);
-      }
-
-      // 3. Color Palette Grid
-      const paletteTarget = document.querySelector('#demo-palette');
-      if (paletteTarget && !paletteTarget.hasChildNodes()) {
-        const PaletteDemo = () => {
-          const selectedColor = $('#ef4444');
-          const presets = [
-            '#ef4444', '#f97316', '#f59e0b', '#eab308',
-            '#84cc16', '#10b981', '#14b8a6', '#06b6d4',
-            '#3b82f6', '#6366f1', '#8b5cf6', '#d946ef',
-            '#ec489a', '#f43f5e', '#6b7280', '#1f2937'
-          ];
-          
-          return Div({ class: 'flex flex-col gap-4' }, [
-            Colorpicker({
-              label: 'Custom color',
-              value: selectedColor
-            }),
-            Div({ class: 'divider text-xs' }, 'Or choose from palette'),
-            Div({ class: 'grid grid-cols-8 gap-2' }, presets.map(color => 
-              Button({
-                class: `w-8 h-8 rounded-lg shadow-sm transition-transform hover:scale-110`,
-                style: `background-color: ${color}`,
-                onclick: () => selectedColor(color)
-              })
-            )),
-            Div({ class: 'mt-2 text-center text-sm font-mono' }, () => selectedColor())
-          ]);
-        };
-        $mount(PaletteDemo, paletteTarget);
-      }
-
-      // 4. With Text Color Preview
-      const textTarget = document.querySelector('#demo-text');
-      if (textTarget && !textTarget.hasChildNodes()) {
-        const TextDemo = () => {
-          const bgColor = $('#1e293b');
-          const textColor = $('#f8fafc');
-          
-          return Div({ class: 'flex flex-col gap-4 w-full' }, [
-            Div({ class: 'flex gap-4' }, [
-              Colorpicker({
-                label: 'Background',
-                value: bgColor
-              }),
-              Colorpicker({
-                label: 'Text',
-                value: textColor
-              })
-            ]),
-            Div({ 
-              class: 'p-6 rounded-lg text-center font-bold transition-all duration-200',
-              style: () => `background-color: ${bgColor()}; color: ${textColor()}`
-            }, [
-              'Preview text with your colors'
-            ])
-          ]);
-        };
-        $mount(TextDemo, textTarget);
-      }
-
-      // 5. All Variants
-      const variantsTarget = document.querySelector('#demo-variants');
-      if (variantsTarget && !variantsTarget.hasChildNodes()) {
-        const VariantsDemo = () => {
-          return Div({ class: 'flex flex-wrap gap-4 items-center' }, [
-            Colorpicker({
-              label: 'Primary',
-              value: $('#3b82f6')
-            }),
-            Colorpicker({
-              label: 'Success',
-              value: $('#10b981')
-            }),
-            Colorpicker({
-              label: 'Warning',
-              value: $('#f59e0b')
-            }),
-            Colorpicker({
-              label: 'Error',
-              value: $('#ef4444')
-            })
-          ]);
-        };
-        $mount(VariantsDemo, variantsTarget);
-      }
-
-      // 6. Dynamic Color Swatch
-      const dynamicTarget = document.querySelector('#demo-dynamic');
-      if (dynamicTarget && !dynamicTarget.hasChildNodes()) {
-        const DynamicDemo = () => {
-          const primary = $('#3b82f6');
-          const secondary = $('#ef4444');
-          const accent = $('#10b981');
-          
-          return Div({ class: 'flex flex-col gap-4 w-full' }, [
-            Div({ class: 'flex flex-wrap gap-4' }, [
-              Colorpicker({ label: 'Primary', value: primary }),
-              Colorpicker({ label: 'Secondary', value: secondary }),
-              Colorpicker({ label: 'Accent', value: accent })
-            ]),
-            Div({ class: 'grid grid-cols-3 gap-2 mt-2' }, [
-              Div({ 
-                class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
-                style: () => `background-color: ${primary()}`
-              }, 'Primary'),
-              Div({ 
-                class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
-                style: () => `background-color: ${secondary()}`
-              }, 'Secondary'),
-              Div({ 
-                class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
-                style: () => `background-color: ${accent()}`
-              }, 'Accent')
-            ])
-          ]);
-        };
-        $mount(DynamicDemo, dynamicTarget);
-      }
-    };
-
-    initColorpickerExamples();
-    
-    if (window.$docsify) {
-      window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
-        hook.doneEach(initColorpickerExamples);
-      });
-    }
-  })();
-</script>

docs/components/datepicker.md

@@ -8,14 +8,37 @@ Date and date range picker component with calendar interface, time selection, an
 
 ## Props
 
-| Prop         | Type                                              | Default                  | Description                                      |
+| Prop | Type | Default | Description |
-| :----------- | :------------------------------------------------ | :----------------------- | :----------------------------------------------- |
+| :--- | :--- | :--- | :--- |
-| `label`      | `string`                                          | `-`                      | Label text for the input                         |
+| `label` | `string` | `-` | Label text for the input |
-| `value`      | `string \| {start: string, end: string} \| Signal` | `-`                      | Selected date or range                           |
+| `value` | `string \| {start: string, end: string} \| Signal` | `-` | Selected date or range |
-| `range`      | `boolean`                                         | `false`                  | Enable date range selection mode                 |
+| `range` | `boolean` | `false` | Enable date range selection mode |
-| `hour`       | `boolean`                                         | `false`                  | Enable hour selection                            |
+| `hour` | `boolean` | `false` | Enable hour selection |
-| `placeholder`| `string`                                          | `'Select date...'`       | Placeholder text                                 |
+| `placeholder` | `string` | `'Select date...'` | Placeholder text |
-| `class`      | `string`                                          | `''`                     | Additional CSS classes (DaisyUI + Tailwind)      |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
+
+## Styling
+
+Datepicker wraps a **daisyUI Input component** internally. All Input styling classes work:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Color | `input-primary`, `input-secondary`, `input-accent`, `input-ghost`, `input-info`, `input-success`, `input-warning`, `input-error` | Input color variants |
+| Size | `input-xs`, `input-sm`, `input-md`, `input-lg` | Input scale |
+| Style | `input-bordered` (default), `input-ghost` | Visual style variants |
+
+> For further details, check the [daisyUI Input Documentation](https://daisyui.com/components/input) – Full reference for CSS classes.
+
+### Example
+
+```javascript
+Datepicker({ 
+  class: "input-primary input-lg",
+  label: "Select date",
+  value: selectedDate
+});
+// Applies: primary color, large size
+```
 
 ## Live Examples
 
@@ -190,150 +213,4 @@ const VariantsDemo = () => {
   ]);
 };
 $mount(VariantsDemo, '#demo-variants');
-```
+```
-
-<script>
-  (function() {
-    const initDatepickerExamples = () => {
-      
-      // 1. Basic Datepicker
-      const basicTarget = document.querySelector('#demo-basic');
-      if (basicTarget && !basicTarget.hasChildNodes()) {
-        const BasicDemo = () => {
-          const date = $('');
-          
-          return Datepicker({
-            label: 'Select date',
-            value: date,
-            placeholder: 'Choose a date...'
-          });
-        };
-        $mount(BasicDemo, basicTarget);
-      }
-
-      // 2. Date Range Picker
-      const rangeTarget = document.querySelector('#demo-range');
-      if (rangeTarget && !rangeTarget.hasChildNodes()) {
-        const RangeDemo = () => {
-          const range = $({ start: '', end: '' });
-          
-          return Div({ class: 'flex flex-col gap-4 w-full' }, [
-            Datepicker({
-              label: 'Date range',
-              value: range,
-              range: true,
-              placeholder: 'Select start and end date...'
-            }),
-            () => range().start && range().end ? Div({ class: 'alert alert-success' }, [
-              `Selected: ${range().start} → ${range().end}`
-            ]) : null
-          ]);
-        };
-        $mount(RangeDemo, rangeTarget);
-      }
-
-      // 3. With Time Selection
-      const timeTarget = document.querySelector('#demo-time');
-      if (timeTarget && !timeTarget.hasChildNodes()) {
-        const TimeDemo = () => {
-          const datetime = $('');
-          
-          return Div({ class: 'flex flex-col gap-4 w-full' }, [
-            Datepicker({
-              label: 'Select date and time',
-              value: datetime,
-              hour: true,
-              placeholder: 'Choose date and time...'
-            }),
-            () => datetime() ? Div({ class: 'alert alert-info' }, [
-              `Selected: ${datetime()}`
-            ]) : null
-          ]);
-        };
-        $mount(TimeDemo, timeTarget);
-      }
-
-      // 4. Range with Time
-      const rangeTimeTarget = document.querySelector('#demo-range-time');
-      if (rangeTimeTarget && !rangeTimeTarget.hasChildNodes()) {
-        const RangeTimeDemo = () => {
-          const range = $({ start: '', end: '', startHour: 9, endHour: 17 });
-          
-          return Div({ class: 'flex flex-col gap-4 w-full' }, [
-            Datepicker({
-              label: 'Schedule range',
-              value: range,
-              range: true,
-              hour: true,
-              placeholder: 'Select date and time range...'
-            }),
-            () => range().start && range().end ? Div({ class: 'alert alert-primary' }, [
-              `From ${range().start} ${range().startHour || 9}:00 to ${range().end} ${range().endHour || 17}:00`
-            ]) : null
-          ]);
-        };
-        $mount(RangeTimeDemo, rangeTimeTarget);
-      }
-
-      // 5. Reactive Display
-      const reactiveTarget = document.querySelector('#demo-reactive');
-      if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
-        const ReactiveDemo = () => {
-          const date = $('');
-          const today = new Date().toISOString().split('T')[0];
-          
-          return Div({ class: 'flex flex-col gap-4 w-full' }, [
-            Datepicker({
-              label: 'Select date',
-              value: date,
-              placeholder: 'Choose a date...'
-            }),
-            Div({ class: 'stats shadow' }, [
-              Div({ class: 'stat' }, [
-                Div({ class: 'stat-title' }, 'Selected date'),
-                Div({ class: 'stat-value text-sm' }, () => date() || 'Not selected'),
-                Div({ class: 'stat-desc' }, () => date() === today ? 'Today' : '')
-              ])
-            ])
-          ]);
-        };
-        $mount(ReactiveDemo, reactiveTarget);
-      }
-
-      // 6. All Variants
-      const variantsTarget = document.querySelector('#demo-variants');
-      if (variantsTarget && !variantsTarget.hasChildNodes()) {
-        const VariantsDemo = () => {
-          return Div({ class: 'flex flex-col gap-4' }, [
-            Datepicker({
-              label: 'Single date',
-              value: $('2024-12-25'),
-              placeholder: 'Select date...'
-            }),
-            Datepicker({
-              label: 'Date range',
-              range: true,
-              value: $({ start: '2024-12-01', end: '2024-12-31' }),
-              placeholder: 'Select range...'
-            }),
-            Datepicker({
-              label: 'With time',
-              hour: true,
-              value: $('2024-12-25T14:00:00'),
-              placeholder: 'Select date and time...'
-            })
-          ]);
-        };
-        $mount(VariantsDemo, variantsTarget);
-      }
-    };
-
-    initDatepickerExamples();
-    
-    if (window.$docsify) {
-      window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
-        hook.doneEach(initDatepickerExamples);
-      });
-    }
-  })();
-</script>

docs/components/drawer.md

@@ -8,13 +8,37 @@ Drawer component for creating off-canvas side panels with overlay and toggle fun
 
 ## Props
 
-| Prop         | Type                         | Default     | Description                                      |
+| Prop | Type | Default | Description |
-| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
+| :--- | :--- | :--- | :--- |
-| `id`         | `string`                     | Required    | Unique identifier for the drawer                 |
+| `id` | `string` | Required | Unique identifier for the drawer |
-| `open`       | `boolean \| Signal<boolean>` | `false`     | Drawer open state                                |
+| `open` | `boolean \| Signal<boolean>` | `false` | Drawer open state |
-| `side`       | `VNode`                      | Required    | Content to display in the drawer panel           |
+| `side` | `VNode` | Required | Content to display in the drawer panel |
-| `content`    | `VNode`                      | Required    | Main page content                                |
+| `content` | `VNode` | Required | Main page content |
-| `class`      | `string`                     | `''`        | Additional CSS classes (DaisyUI + Tailwind)      |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
+
+## Styling
+
+Drawer supports all **daisyUI Drawer classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Position | `drawer-end` | Drawer opens from the right side |
+| Width | `w-64`, `w-80`, `w-96` | Custom drawer width (Tailwind) |
+
+> For further details, check the [daisyUI Drawer Documentation](https://daisyui.com/components/drawer) – Full reference for CSS classes.
+
+### Example
+
+```javascript
+Drawer({
+  id: "my-drawer",
+  open: isOpen,
+  class: "drawer-end",
+  side: SidebarContent,
+  content: MainContent
+});
+// Applies: drawer opens from right side
+```
 
 ## Live Examples
 
@@ -479,440 +503,4 @@ const FormDrawer = () => {
   });
 };
 $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

@@ -8,22 +8,45 @@ Dropdown component for creating menus, selectors, and action panels that appear
 
 ## Props
 
-| Prop         | Type                                    | Default     | Description                                      |
+| Prop | Type | Default | Description |
-| :----------- | :-------------------------------------- | :---------- | :----------------------------------------------- |
+| :--- | :--- | :--- | :--- |
-| `label`      | `string \| VNode \| Signal`             | `-`         | Button label or content                          |
+| `label` | `string \| VNode \| Signal` | `-` | Button label or content |
-| `icon`       | `string \| VNode \| Signal`             | `-`         | Icon displayed next to label                     |
+| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed next to label |
-| `items`      | `Array<MenuItem> \| Signal<Array>`      | `-`         | Array of menu items (alternative to children)    |
+| `items` | `Array<MenuItem> \| Signal<Array>` | `-` | Array of menu items (alternative to children) |
-| `class`      | `string`                                | `''`        | Additional CSS classes (DaisyUI + Tailwind)      |
+| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
-| `children`   | `VNode \| function`                     | `-`         | Custom dropdown content (alternative to items)   |
+| `children` | `VNode \| function` | `-` | Custom dropdown content (alternative to items) |
 
 ### MenuItem Structure (when using `items`)
 
-| Property    | Type                         | Description                                      |
+| Property | Type | Description |
-| :---------- | :--------------------------- | :----------------------------------------------- |
+| :--- | :--- | :--- |
-| `label`     | `string \| VNode`            | Menu item text                                   |
+| `label` | `string \| VNode` | Menu item text |
-| `icon`      | `string \| VNode`            | Optional icon for the menu item                  |
+| `icon` | `string \| VNode` | Optional icon for the menu item |
-| `onclick`   | `function`                   | Click handler                                    |
+| `onclick` | `function` | Click handler |
-| `class`     | `string`                     | Additional CSS classes for the menu item         |
+| `class` | `string` | Additional CSS classes for the menu item |
+
+## Styling
+
+Dropdown supports all **daisyUI Dropdown classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Position | `dropdown-end` | Align dropdown to the right |
+| Direction | `dropdown-top`, `dropdown-bottom`, `dropdown-left`, `dropdown-right` | Dropdown open direction |
+| Hover | `dropdown-hover` | Open on hover instead of click |
+
+> For further details, check the [daisyUI Dropdown Documentation](https://daisyui.com/components/dropdown) – Full reference for CSS classes.
+
+### Example
+
+```javascript
+Dropdown({
+  label: "Menu",
+  class: "dropdown-end dropdown-hover",
+  items: menuItems
+});
+// Applies: right-aligned, opens on hover
+```
 
 ## Live Examples
 
@@ -276,214 +299,4 @@ const VariantsDemo = () => {
   ]);
 };
 $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/indicator.md

@@ -29,13 +29,13 @@ Indicator component for adding badges, status markers, or notifications to eleme
 ```javascript
 const BasicDemo = () => {
   return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
-    Indicator({ badge: '3', badgeClass: 'badge-primary' }, [
+    Indicator({ value: '3', ui: 'badge-primary' }, [
       Div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '📦')
     ]),
-    Indicator({ badge: '99+', badgeClass: 'badge-secondary' }, [
+    Indicator({ value: '99+', ui: 'badge-secondary' }, [
       Div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '🔔')
     ]),
-    Indicator({ badge: 'New', badgeClass: 'badge-accent' }, [
+    Indicator({ value: 'New', ui: 'badge-accent' }, [
       Div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '✨')
     ])
   ]);
@@ -55,17 +55,17 @@ $mount(BasicDemo, '#demo-basic');
 ```javascript
 const StatusDemo = () => {
   return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
-    Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [
+    Indicator({ value: '●', ui: 'badge-success badge-xs' }, [
       Div({ class: 'avatar placeholder' }, [
         Div({ class: 'bg-neutral text-neutral-content rounded-full w-12 h-12 flex items-center justify-center' }, 'JD')
       ])
     ]),
-    Indicator({ badge: '●', badgeClass: 'badge-warning badge-xs' }, [
+    Indicator({ value: '●', ui: 'badge-warning badge-xs' }, [
       Div({ class: 'avatar placeholder' }, [
         Div({ class: 'bg-neutral text-neutral-content rounded-full w-12 h-12 flex items-center justify-center' }, 'JS')
       ])
     ]),
-    Indicator({ badge: '●', badgeClass: 'badge-error badge-xs' }, [
+    Indicator({ value: '●', ui: 'badge-error badge-xs' }, [
       Div({ class: 'avatar placeholder' }, [
         Div({ class: 'bg-neutral text-neutral-content rounded-full w-12 h-12 flex items-center justify-center' }, 'BC')
       ])

docs/components/input.md

@@ -2,6 +2,7 @@
 
 Form input component with floating label, icons, password toggle, tooltip, and error states. Fully integrated with DaisyUI and Tailwind.
 
+
 ## Tag
 
 `Input`
@@ -37,7 +38,6 @@ const BasicDemo = () => {
   const name = $('');
   
   return Input({
-    label: 'Full Name',
     placeholder: 'Enter your name',
     value: name,
     oninput: (e) => name(e.target.value)
@@ -60,9 +60,8 @@ const IconDemo = () => {
   const email = $('');
   
   return Input({
-    label: 'Email',
     type: 'email',
-    icon: Icons.iconMail,
+    icon: "✉️",
     value: email,
     oninput: (e) => email(e.target.value)
   });
@@ -84,7 +83,6 @@ const PasswordDemo = () => {
   const password = $('');
   
   return Input({
-    label: 'Password',
     type: 'password',
     value: password,
     oninput: (e) => password(e.target.value)
@@ -107,7 +105,6 @@ const TooltipDemo = () => {
   const username = $('');
   
   return Input({
-    label: 'Username',
     tip: 'Must be at least 3 characters',
     value: username,
     oninput: (e) => username(e.target.value)
@@ -137,7 +134,6 @@ const ErrorDemo = () => {
   };
   
   return Input({
-    label: 'Email',
     type: 'email',
     value: email,
     error: () => !isValid() && email() ? 'Invalid email address' : '',
@@ -159,7 +155,6 @@ $mount(ErrorDemo, '#demo-error');
 ```javascript
 const DisabledDemo = () => {
   return Input({
-    label: 'Username',
     value: 'john.doe',
     disabled: true
   });
@@ -183,166 +178,30 @@ const VariantsDemo = () => {
   
   return Div({ class: 'flex flex-col gap-4' }, [
     Input({
-      label: 'Text Input',
       placeholder: 'Type something...',
       value: text,
       oninput: (e) => text(e.target.value)
     }),
     Input({
-      label: 'Number Input',
       type: 'number',
       value: number,
       oninput: (e) => number(parseInt(e.target.value) || 0)
     }),
     Input({
-      label: 'Date Input',
       type: 'date',
       value: $('2024-01-01')
-    })
+    }),
+    Input({class: 'input-primary',value:"Primary"}),
+    Input({class: 'input-secondary', value:"Secondary"}),
+    Input({class: 'input-accent', value:"Accent"}),
+    Input({class: 'input-ghost', value:"Ghost"}),
+    Input({class: 'input-link', value:"Link"}),
+    Input({class: 'input-info', value:"Info"}),
+    Input({class: 'input-success', value:"Success"}),
+    Input({class: 'input-warning', value:"Warning"}),
+    Input({class: 'input-error', value:"Error"}),
+ 
   ]);
 };
 $mount(VariantsDemo, '#demo-variants');
 ```
-
-<script>
-  (function() {
-    const initInputExamples = () => {
-      
-      // 1. Basic Input
-      const basicTarget = document.querySelector('#demo-basic');
-      if (basicTarget && !basicTarget.hasChildNodes()) {
-        const BasicDemo = () => {
-          const name = $('');
-          return Input({
-            label: 'Full Name',
-            placeholder: 'Enter your name',
-            value: name,
-            oninput: (e) => name(e.target.value)
-          });
-        };
-        $mount(BasicDemo, basicTarget);
-      }
-
-      // 2. With Icon
-      const iconTarget = document.querySelector('#demo-icon');
-      if (iconTarget && !iconTarget.hasChildNodes()) {
-        const IconDemo = () => {
-          const email = $('');
-          return Input({
-            label: 'Email',
-            type: 'email',
-            icon: Icons.iconMail,
-            value: email,
-            oninput: (e) => email(e.target.value)
-          });
-        };
-        $mount(IconDemo, iconTarget);
-      }
-
-      // 3. Password with Toggle
-      const passwordTarget = document.querySelector('#demo-password');
-      if (passwordTarget && !passwordTarget.hasChildNodes()) {
-        const PasswordDemo = () => {
-          const password = $('');
-          return Input({
-            label: 'Password',
-            type: 'password',
-            value: password,
-            oninput: (e) => password(e.target.value)
-          });
-        };
-        $mount(PasswordDemo, passwordTarget);
-      }
-
-      // 4. With Tooltip
-      const tooltipTarget = document.querySelector('#demo-tooltip');
-      if (tooltipTarget && !tooltipTarget.hasChildNodes()) {
-        const TooltipDemo = () => {
-          const username = $('');
-          return Input({
-            label: 'Username',
-            tip: 'Must be at least 3 characters',
-            value: username,
-            oninput: (e) => username(e.target.value)
-          });
-        };
-        $mount(TooltipDemo, tooltipTarget);
-      }
-
-      // 5. Error State
-      const errorTarget = document.querySelector('#demo-error');
-      if (errorTarget && !errorTarget.hasChildNodes()) {
-        const ErrorDemo = () => {
-          const email = $('');
-          const isValid = $(true);
-          
-          const validate = (value) => {
-            const valid = value.includes('@') && value.includes('.');
-            isValid(valid);
-            email(value);
-          };
-          
-          return Input({
-            label: 'Email',
-            type: 'email',
-            value: email,
-            error: () => !isValid() && email() ? 'Invalid email address' : '',
-            oninput: (e) => validate(e.target.value)
-          });
-        };
-        $mount(ErrorDemo, errorTarget);
-      }
-
-      // 6. Disabled State
-      const disabledTarget = document.querySelector('#demo-disabled');
-      if (disabledTarget && !disabledTarget.hasChildNodes()) {
-        const DisabledDemo = () => {
-          return Input({
-            label: 'Username',
-            value: 'john.doe',
-            disabled: true
-          });
-        };
-        $mount(DisabledDemo, disabledTarget);
-      }
-
-      // 7. All Variants
-      const variantsTarget = document.querySelector('#demo-variants');
-      if (variantsTarget && !variantsTarget.hasChildNodes()) {
-        const VariantsDemo = () => {
-          const text = $('');
-          const number = $(0);
-          
-          return Div({ class: 'flex flex-col gap-4' }, [
-            Input({
-              label: 'Text Input',
-              placeholder: 'Type something...',
-              value: text,
-              oninput: (e) => text(e.target.value)
-            }),
-            Input({
-              label: 'Number Input',
-              type: 'number',
-              value: number,
-              oninput: (e) => number(parseInt(e.target.value) || 0)
-            }),
-            Input({
-              label: 'Date Input',
-              type: 'date',
-              value: $('2024-01-01')
-            })
-          ]);
-        };
-        $mount(VariantsDemo, variantsTarget);
-      }
-    };
-
-    initInputExamples();
-    
-    if (window.$docsify) {
-      window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
-        hook.doneEach(initInputExamples);
-      });
-    }
-  })();
-</script>

docs/components/rating.md

@@ -140,8 +140,7 @@ const CustomDemo = () => {
       Input({
         type: 'number',
         value: count,
-        class: 'input input-sm w-24',
+        class: 'input input-sm w-24'
-        oninput: (e) => count(parseInt(e.target.value) || 1)
       })
     ]),
     Rating({

docs/components/select.md

@@ -1,6 +1,6 @@
 # Select
 
-Dropdown select component with full DaisyUI styling, reactive options, and form integration.
+Dropdown select component with full DaisyUI styling, reactive items, and form integration.
 
 ## Tag
 
@@ -11,7 +11,7 @@ Dropdown select component with full DaisyUI styling, reactive options, and form
 | Prop         | Type                                    | Default             | Description                                      |
 | :----------- | :-------------------------------------- | :------------------ | :----------------------------------------------- |
 | `label`      | `string`                                | `-`                 | Label text above select                          |
-| `options`    | `Array<{value: string, label: string}>` | `[]`                | Array of options with value and label            |
+| `items`    | `Array<{value: string, label: string}>` | `[]`                | Array of items with value and label            |
 | `value`      | `string \| Signal<string>`              | `''`                | Selected value                                   |
 | `class`      | `string`                                | `''`                | Additional CSS classes (DaisyUI + Tailwind)      |
 | `disabled`   | `boolean \| Signal<boolean>`            | `false`             | Disabled state                                   |
@@ -34,7 +34,7 @@ const BasicDemo = () => {
   
   return Select({
     label: 'Choose a fruit',
-    options: [
+    items: [
       { value: 'apple', label: '🍎 Apple' },
       { value: 'banana', label: '🍌 Banana' },
       { value: 'orange', label: '🍊 Orange' },
@@ -59,11 +59,10 @@ $mount(BasicDemo, '#demo-basic');
 ```javascript
 const ReactiveDemo = () => {
   const selected = $('small');
-  
   return Div({ class: 'flex flex-col gap-4 w-full' }, [
     Select({
       label: 'Select size',
-      options: [
+      items: [
         { value: 'small', label: 'Small' },
         { value: 'medium', label: 'Medium' },
         { value: 'large', label: 'Large' }
@@ -72,7 +71,7 @@ const ReactiveDemo = () => {
       onchange: (e) => selected(e.target.value)
     }),
     Div({ class: 'alert alert-info' }, [
-      `You selected: ${selected()}`
+      () => `You selected: ${selected()}`
     ])
   ]);
 };
@@ -92,7 +91,7 @@ $mount(ReactiveDemo, '#demo-reactive');
 const DisabledDemo = () => {
   return Select({
     label: 'Country (disabled)',
-    options: [
+    items: [
       { value: 'mx', label: 'Mexico' },
       { value: 'us', label: 'United States' },
       { value: 'ca', label: 'Canada' }
@@ -104,7 +103,7 @@ const DisabledDemo = () => {
 $mount(DisabledDemo, '#demo-disabled');
 ```
 
-### Dynamic Options
+### Dynamic items
 
 <div class="card bg-base-200 border border-base-300 shadow-sm my-6">
   <div class="card-body">
@@ -117,7 +116,7 @@ $mount(DisabledDemo, '#demo-disabled');
 const DynamicDemo = () => {
   const category = $('fruits');
   
-  const options = {
+  const items = {
     fruits: [
       { value: 'apple', label: '🍎 Apple' },
       { value: 'banana', label: '🍌 Banana' }
@@ -131,7 +130,7 @@ const DynamicDemo = () => {
   return Div({ class: 'flex flex-col gap-4 w-full' }, [
     Select({
       label: 'Category',
-      options: [
+      items: [
         { value: 'fruits', label: 'Fruits' },
         { value: 'vegetables', label: 'Vegetables' }
       ],
@@ -140,7 +139,7 @@ const DynamicDemo = () => {
     }),
     Select({
       label: 'Item',
-      options: () => options[category()] || [],
+      items: () => items[category()] || [],
       value: $(''),
       onchange: (e) => console.log('Selected:', e.target.value)
     })
@@ -168,7 +167,7 @@ const VariantsDemo = () => {
     Select({
       label: 'Primary Select',
       class: 'select-primary',
-      options: [
+      items: [
         { value: 'option1', label: 'Option 1' },
         { value: 'option2', label: 'Option 2' },
         { value: 'option3', label: 'Option 3' }
@@ -179,7 +178,7 @@ const VariantsDemo = () => {
     Select({
       label: 'Secondary Select',
       class: 'select-secondary',
-      options: [
+      items: [
         { value: 'option1', label: 'Option 1' },
         { value: 'option2', label: 'Option 2' }
       ],
@@ -189,7 +188,7 @@ const VariantsDemo = () => {
     Select({
       label: 'Ghost Select',
       class: 'select-ghost',
-      options: [
+      items: [
         { value: '', label: 'Select an option' },
         { value: 'opt1', label: 'Option 1' },
         { value: 'opt2', label: 'Option 2' }
@@ -214,7 +213,7 @@ $mount(VariantsDemo, '#demo-variants');
           
           return Select({
             label: 'Choose a fruit',
-            options: [
+            items: [
               { value: 'apple', label: '🍎 Apple' },
               { value: 'banana', label: '🍌 Banana' },
               { value: 'orange', label: '🍊 Orange' },
@@ -236,7 +235,7 @@ $mount(VariantsDemo, '#demo-variants');
           return Div({ class: 'flex flex-col gap-4 w-full' }, [
             Select({
               label: 'Select size',
-              options: [
+              items: [
                 { value: 'small', label: 'Small' },
                 { value: 'medium', label: 'Medium' },
                 { value: 'large', label: 'Large' }
@@ -258,7 +257,7 @@ $mount(VariantsDemo, '#demo-variants');
         const DisabledDemo = () => {
           return Select({
             label: 'Country (disabled)',
-            options: [
+            items: [
               { value: 'mx', label: 'Mexico' },
               { value: 'us', label: 'United States' },
               { value: 'ca', label: 'Canada' }
@@ -270,13 +269,13 @@ $mount(VariantsDemo, '#demo-variants');
         $mount(DisabledDemo, disabledTarget);
       }
 
-      // 4. Dynamic Options
+      // 4. Dynamic items
       const dynamicTarget = document.querySelector('#demo-dynamic');
       if (dynamicTarget && !dynamicTarget.hasChildNodes()) {
         const DynamicDemo = () => {
           const category = $('fruits');
           
-          const options = {
+          const items = {
             fruits: [
               { value: 'apple', label: '🍎 Apple' },
               { value: 'banana', label: '🍌 Banana' }
@@ -290,7 +289,7 @@ $mount(VariantsDemo, '#demo-variants');
           return Div({ class: 'flex flex-col gap-4 w-full' }, [
             Select({
               label: 'Category',
-              options: [
+              items: [
                 { value: 'fruits', label: 'Fruits' },
                 { value: 'vegetables', label: 'Vegetables' }
               ],
@@ -299,7 +298,7 @@ $mount(VariantsDemo, '#demo-variants');
             }),
             Select({
               label: 'Item',
-              options: () => options[category()] || [],
+              items: () => items[category()] || [],
               value: $(''),
               onchange: (e) => console.log('Selected:', e.target.value)
             })
@@ -320,7 +319,7 @@ $mount(VariantsDemo, '#demo-variants');
             Select({
               label: 'Primary Select',
               class: 'select-primary',
-              options: [
+              items: [
                 { value: 'option1', label: 'Option 1' },
                 { value: 'option2', label: 'Option 2' },
                 { value: 'option3', label: 'Option 3' }
@@ -331,7 +330,7 @@ $mount(VariantsDemo, '#demo-variants');
             Select({
               label: 'Secondary Select',
               class: 'select-secondary',
-              options: [
+              items: [
                 { value: 'option1', label: 'Option 1' },
                 { value: 'option2', label: 'Option 2' }
               ],
@@ -341,7 +340,7 @@ $mount(VariantsDemo, '#demo-variants');
             Select({
               label: 'Ghost Select',
               class: 'select-ghost',
-              options: [
+              items: [
                 { value: '', label: 'Select an option' },
                 { value: 'opt1', label: 'Option 1' },
                 { value: 'opt2', label: 'Option 2' }

docs/components_old/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_old/alert.md

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

docs/components_old/autocomplete.md

@@ -0,0 +1,376 @@
+# Autocomplete
+
+Searchable dropdown with autocomplete functionality, keyboard navigation, and reactive options.
+
+## Tag
+
+`Autocomplete`
+
+## Props
+
+| Prop         | Type                                              | Default             | Description                                      |
+| :----------- | :------------------------------------------------ | :------------------ | :----------------------------------------------- |
+| `label`      | `string`                                          | `-`                 | Label text for the input                         |
+| `options`    | `Array<string \| {value: string, label: string}>` | `[]`                | Options to search from                           |
+| `value`      | `string \| Signal<string>`                        | `''`                | Selected value                                   |
+| `placeholder`| `string`                                          | `'Search...'`       | Placeholder text                                 |
+| `onSelect`   | `function`                                        | `-`                 | Called when an option is selected                |
+| `class`      | `string`                                          | `''`                | Additional CSS classes (DaisyUI + Tailwind)      |
+
+## Live Examples
+
+### Basic Autocomplete
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  const selected = $('');
+  const fruits = ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry', 'Mango', 'Pineapple', 'Watermelon'];
+  
+  return Autocomplete({
+    label: 'Search fruit',
+    options: fruits,
+    value: selected,
+    onSelect: (value) => selected(value)
+  });
+};
+$mount(BasicDemo, '#demo-basic');
+```
+
+### With Objects
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-objects" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const ObjectsDemo = () => {
+  const selected = $('');
+  const selectedLabel = $('');
+  
+  const countries = [
+    { value: 'mx', label: 'Mexico' },
+    { value: 'us', label: 'United States' },
+    { value: 'ca', label: 'Canada' },
+    { value: 'br', label: 'Brazil' },
+    { value: 'ar', label: 'Argentina' },
+    { value: 'es', label: 'Spain' }
+  ];
+  
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Autocomplete({
+      label: 'Search country',
+      options: countries,
+      value: selectedLabel,
+      onSelect: (item) => {
+        const selectedItem = typeof item === 'string' 
+          ? countries.find(c => c.label === item) 
+          : item;
+        selected(selectedItem?.value || '');
+        selectedLabel(selectedItem?.label || '');
+      }
+    }),
+    Div({ class: 'alert alert-success' }, [
+      `Selected: ${selected()} - ${selectedLabel()}`
+    ])
+  ]);
+};
+$mount(ObjectsDemo, '#demo-objects');
+```
+
+### With Reactive Display
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const ReactiveDemo = () => {
+  const selected = $('');
+  
+  const programmingLanguages = [
+    'JavaScript', 'Python', 'Java', 'C++', 'Ruby', 'Go', 'Rust', 'TypeScript', 'Swift', 'Kotlin'
+  ];
+  
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Autocomplete({
+      label: 'Programming language',
+      options: programmingLanguages,
+      value: selected,
+      onSelect: (value) => selected(value)
+    }),
+    () => selected() ? Div({ class: 'alert alert-info' }, [
+      `You selected: ${selected()}`
+    ]) : null
+  ]);
+};
+$mount(ReactiveDemo, '#demo-reactive');
+```
+
+### Dynamic Options
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-dynamic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const DynamicDemo = () => {
+  const selected = $('');
+  const filterType = $('all');
+  
+  const allItems = {
+    fruits: ['Apple', 'Banana', 'Orange', 'Mango'],
+    vegetables: ['Carrot', 'Broccoli', 'Spinach', 'Potato'],
+    all: ['Apple', 'Banana', 'Orange', 'Mango', 'Carrot', 'Broccoli', 'Spinach', 'Potato']
+  };
+  
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Select({
+      label: 'Category',
+      options: [
+        { value: 'all', label: 'All items' },
+        { value: 'fruits', label: 'Fruits' },
+        { value: 'vegetables', label: 'Vegetables' }
+      ],
+      value: filterType,
+      onchange: (e) => filterType(e.target.value)
+    }),
+    Autocomplete({
+      label: 'Search item',
+      options: () => allItems[filterType()],
+      value: selected,
+      onSelect: (value) => selected(value)
+    })
+  ]);
+};
+$mount(DynamicDemo, '#demo-dynamic');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  const colors = ['Red', 'Blue', 'Green', 'Yellow', 'Purple', 'Orange', 'Pink', 'Brown', 'Black', 'White'];
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({}, [
+      Autocomplete({
+        label: 'Primary style',
+        class: 'input-primary',
+        options: colors,
+        value: $(''),
+        placeholder: 'Search colors...'
+      })
+    ]),
+    Div({}, [
+      Autocomplete({
+        label: 'Secondary style',
+        class: 'input-secondary',
+        options: colors,
+        value: $(''),
+        placeholder: 'Search colors...'
+      })
+    ]),
+    Div({}, [
+      Autocomplete({
+        label: 'Ghost style',
+        class: 'input-ghost',
+        options: colors,
+        value: $(''),
+        placeholder: 'Search colors...'
+      })
+    ])
+  ]);
+};
+$mount(VariantsDemo, '#demo-variants');
+```
+
+<script>
+  (function() {
+    const initAutocompleteExamples = () => {
+      
+      // 1. Basic Autocomplete
+      const basicTarget = document.querySelector('#demo-basic');
+      if (basicTarget && !basicTarget.hasChildNodes()) {
+        const BasicDemo = () => {
+          const selected = $('');
+          const fruits = ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry', 'Mango', 'Pineapple', 'Watermelon'];
+          
+          return Autocomplete({
+            label: 'Search fruit',
+            options: fruits,
+            value: selected,
+            onSelect: (value) => selected(value)
+          });
+        };
+        $mount(BasicDemo, basicTarget);
+      }
+
+      // 2. With Objects
+      const objectsTarget = document.querySelector('#demo-objects');
+      if (objectsTarget && !objectsTarget.hasChildNodes()) {
+        const ObjectsDemo = () => {
+          const selected = $('');
+          const selectedLabel = $('');
+          
+          const countries = [
+            { value: 'mx', label: 'Mexico' },
+            { value: 'us', label: 'United States' },
+            { value: 'ca', label: 'Canada' },
+            { value: 'br', label: 'Brazil' },
+            { value: 'ar', label: 'Argentina' },
+            { value: 'es', label: 'Spain' }
+          ];
+          
+          return Div({ class: 'flex flex-col gap-4 w-full' }, [
+            Autocomplete({
+              label: 'Search country',
+              options: countries,
+              value: selectedLabel,
+              onSelect: (item) => {
+                const selectedItem = typeof item === 'string' 
+                  ? countries.find(c => c.label === item) 
+                  : item;
+                selected(selectedItem?.value || '');
+                selectedLabel(selectedItem?.label || '');
+              }
+            }),
+            Div({ class: 'alert alert-success' }, [
+              `Selected: ${selected()} - ${selectedLabel()}`
+            ])
+          ]);
+        };
+        $mount(ObjectsDemo, objectsTarget);
+      }
+
+      // 3. Reactive Display
+      const reactiveTarget = document.querySelector('#demo-reactive');
+      if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
+        const ReactiveDemo = () => {
+          const selected = $('');
+          
+          const programmingLanguages = [
+            'JavaScript', 'Python', 'Java', 'C++', 'Ruby', 'Go', 'Rust', 'TypeScript', 'Swift', 'Kotlin'
+          ];
+          
+          return Div({ class: 'flex flex-col gap-4 w-full' }, [
+            Autocomplete({
+              label: 'Programming language',
+              options: programmingLanguages,
+              value: selected,
+              onSelect: (value) => selected(value)
+            }),
+            () => selected() ? Div({ class: 'alert alert-info' }, [
+              `You selected: ${selected()}`
+            ]) : null
+          ]);
+        };
+        $mount(ReactiveDemo, reactiveTarget);
+      }
+
+      // 4. Dynamic Options
+      const dynamicTarget = document.querySelector('#demo-dynamic');
+      if (dynamicTarget && !dynamicTarget.hasChildNodes()) {
+        const DynamicDemo = () => {
+          const selected = $('');
+          const filterType = $('all');
+          
+          const allItems = {
+            fruits: ['Apple', 'Banana', 'Orange', 'Mango'],
+            vegetables: ['Carrot', 'Broccoli', 'Spinach', 'Potato'],
+            all: ['Apple', 'Banana', 'Orange', 'Mango', 'Carrot', 'Broccoli', 'Spinach', 'Potato']
+          };
+          
+          return Div({ class: 'flex flex-col gap-4 w-full' }, [
+            Select({
+              label: 'Category',
+              options: [
+                { value: 'all', label: 'All items' },
+                { value: 'fruits', label: 'Fruits' },
+                { value: 'vegetables', label: 'Vegetables' }
+              ],
+              value: filterType,
+              onchange: (e) => filterType(e.target.value)
+            }),
+            Autocomplete({
+              label: 'Search item',
+              options: () => allItems[filterType()],
+              value: selected,
+              onSelect: (value) => selected(value)
+            })
+          ]);
+        };
+        $mount(DynamicDemo, dynamicTarget);
+      }
+
+      // 5. All Variants
+      const variantsTarget = document.querySelector('#demo-variants');
+      if (variantsTarget && !variantsTarget.hasChildNodes()) {
+        const VariantsDemo = () => {
+          const colors = ['Red', 'Blue', 'Green', 'Yellow', 'Purple', 'Orange', 'Pink', 'Brown', 'Black', 'White'];
+          
+          return Div({ class: 'flex flex-col gap-4' }, [
+            Div({}, [
+              Autocomplete({
+                label: 'Primary style',
+                class: 'input-primary',
+                options: colors,
+                value: $(''),
+                placeholder: 'Search colors...'
+              })
+            ]),
+            Div({}, [
+              Autocomplete({
+                label: 'Secondary style',
+                class: 'input-secondary',
+                options: colors,
+                value: $(''),
+                placeholder: 'Search colors...'
+              })
+            ]),
+            Div({}, [
+              Autocomplete({
+                label: 'Ghost style',
+                class: 'input-ghost',
+                options: colors,
+                value: $(''),
+                placeholder: 'Search colors...'
+              })
+            ])
+          ]);
+        };
+        $mount(VariantsDemo, variantsTarget);
+      }
+    };
+
+    initAutocompleteExamples();
+    
+    if (window.$docsify) {
+      window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
+        hook.doneEach(initAutocompleteExamples);
+      });
+    }
+  })();
+</script>

docs/components_old/badge.md

@@ -0,0 +1,537 @@
+# Badge
+
+Badge component for displaying counts, labels, and status indicators with DaisyUI styling.
+
+## Tag
+
+`Badge`
+
+## Props
+
+| Prop         | Type                         | Default     | Description                                      |
+| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
+| `class`      | `string`                     | `''`        | Additional CSS classes (DaisyUI badge variants)  |
+| `children`   | `string \| VNode`            | `-`         | Badge content                                    |
+
+## Live Examples
+
+### Basic Badge
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-2"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-2' }, [
+    Badge({}, 'Default'),
+    Badge({ class: 'badge-primary' }, 'Primary'),
+    Badge({ class: 'badge-secondary' }, 'Secondary'),
+    Badge({ class: 'badge-accent' }, 'Accent'),
+    Badge({ class: 'badge-info' }, 'Info'),
+    Badge({ class: 'badge-success' }, 'Success'),
+    Badge({ class: 'badge-warning' }, 'Warning'),
+    Badge({ class: 'badge-error' }, 'Error')
+  ]);
+};
+$mount(BasicDemo, '#demo-basic');
+```
+
+### Badge Sizes
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-sizes" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-2 items-center"></div>
+  </div>
+</div>
+
+```javascript
+const SizesDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-2 items-center' }, [
+    Badge({ class: 'badge-xs' }, 'Extra Small'),
+    Badge({ class: 'badge-sm' }, 'Small'),
+    Badge({}, 'Default'),
+    Badge({ class: 'badge-md' }, 'Medium'),
+    Badge({ class: 'badge-lg' }, 'Large')
+  ]);
+};
+$mount(SizesDemo, '#demo-sizes');
+```
+
+### Outline Badges
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-outline" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-2"></div>
+  </div>
+</div>
+
+```javascript
+const OutlineDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-2' }, [
+    Badge({ class: 'badge-outline' }, 'Default'),
+    Badge({ class: 'badge-outline badge-primary' }, 'Primary'),
+    Badge({ class: 'badge-outline badge-secondary' }, 'Secondary'),
+    Badge({ class: 'badge-outline badge-accent' }, 'Accent'),
+    Badge({ class: 'badge-outline badge-info' }, 'Info'),
+    Badge({ class: 'badge-outline badge-success' }, 'Success'),
+    Badge({ class: 'badge-outline badge-warning' }, 'Warning'),
+    Badge({ class: 'badge-outline badge-error' }, 'Error')
+  ]);
+};
+$mount(OutlineDemo, '#demo-outline');
+```
+
+### Ghost Badges
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-ghost" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-2"></div>
+  </div>
+</div>
+
+```javascript
+const GhostDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-2' }, [
+    Badge({ class: 'badge-ghost' }, 'Default'),
+    Badge({ class: 'badge-ghost badge-primary' }, 'Primary'),
+    Badge({ class: 'badge-ghost badge-secondary' }, 'Secondary'),
+    Badge({ class: 'badge-ghost badge-accent' }, 'Accent'),
+    Badge({ class: 'badge-ghost badge-info' }, 'Info'),
+    Badge({ class: 'badge-ghost badge-success' }, 'Success'),
+    Badge({ class: 'badge-ghost badge-warning' }, 'Warning'),
+    Badge({ class: 'badge-ghost badge-error' }, 'Error')
+  ]);
+};
+$mount(GhostDemo, '#demo-ghost');
+```
+
+### With Icons
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-icons" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-2"></div>
+  </div>
+</div>
+
+```javascript
+const IconsDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-2' }, [
+    Badge({ class: 'gap-1' }, [
+      Icons.iconSuccess,
+      Span({}, 'Success')
+    ]),
+    Badge({ class: 'gap-1 badge-warning' }, [
+      Icons.iconWarning,
+      Span({}, 'Warning')
+    ]),
+    Badge({ class: 'gap-1 badge-error' }, [
+      Icons.iconError,
+      Span({}, 'Error')
+    ]),
+    Badge({ class: 'gap-1 badge-info' }, [
+      Icons.iconInfo,
+      Span({}, 'Info')
+    ]),
+    Badge({ class: 'gap-1' }, [
+      Span({}, '★'),
+      Span({}, '4.5')
+    ])
+  ]);
+};
+$mount(IconsDemo, '#demo-icons');
+```
+
+### Status Badges
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-status" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const StatusDemo = () => {
+  const statuses = [
+    { label: 'Active', class: 'badge-success' },
+    { label: 'Pending', class: 'badge-warning' },
+    { label: 'Completed', class: 'badge-info' },
+    { label: 'Failed', class: 'badge-error' },
+    { label: 'Archived', class: 'badge-ghost' }
+  ];
+  
+  return Div({ class: 'flex flex-col gap-2' }, [
+    Div({ class: 'text-sm font-bold mb-2' }, 'Order Status'),
+    Div({ class: 'flex flex-wrap gap-2' }, statuses.map(status =>
+      Badge({ class: status.class }, status.label)
+    ))
+  ]);
+};
+$mount(StatusDemo, '#demo-status');
+```
+
+### Count Badges
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-count" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4 items-center"></div>
+  </div>
+</div>
+
+```javascript
+const CountDemo = () => {
+  const notifications = $(3);
+  const messages = $(5);
+  const updates = $(0);
+  
+  return Div({ class: 'flex flex-wrap gap-6' }, [
+    Div({ class: 'flex items-center gap-2' }, [
+      Span({}, 'Notifications'),
+      Badge({ class: 'badge-primary' }, () => notifications())
+    ]),
+    Div({ class: 'flex items-center gap-2' }, [
+      Span({}, 'Messages'),
+      Badge({ class: 'badge-secondary' }, () => messages())
+    ]),
+    Div({ class: 'flex items-center gap-2' }, [
+      Span({}, 'Updates'),
+      Badge({ class: 'badge-ghost' }, () => updates() || '0')
+    ])
+  ]);
+};
+$mount(CountDemo, '#demo-count');
+```
+
+### Interactive Badge
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-interactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const InteractiveDemo = () => {
+  const count = $(0);
+  
+  return Div({ class: 'flex flex-col gap-4 items-center' }, [
+    Div({ class: 'flex items-center gap-4' }, [
+      Button({ class: 'btn btn-sm', onclick: () => count(count() - 1) }, '-'),
+      Badge({ class: 'badge-primary text-lg min-w-[4rem] justify-center' }, () => count()),
+      Button({ class: 'btn btn-sm', onclick: () => count(count() + 1) }, '+')
+    ]),
+    Button({ 
+      class: 'btn btn-ghost btn-sm',
+      onclick: () => count(0)
+    }, 'Reset')
+  ]);
+};
+$mount(InteractiveDemo, '#demo-interactive');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  return Div({ class: 'flex flex-col gap-6' }, [
+    Div({ class: 'flex flex-wrap gap-2' }, [
+      Badge({ class: 'badge-xs' }, 'XS'),
+      Badge({ class: 'badge-sm' }, 'SM'),
+      Badge({}, 'MD'),
+      Badge({ class: 'badge-lg' }, 'LG')
+    ]),
+    Div({ class: 'flex flex-wrap gap-2' }, [
+      Badge({ class: 'badge-primary badge-sm' }, 'Primary'),
+      Badge({ class: 'badge-secondary badge-sm' }, 'Secondary'),
+      Badge({ class: 'badge-accent badge-sm' }, 'Accent')
+    ]),
+    Div({ class: 'flex flex-wrap gap-2' }, [
+      Badge({ class: 'badge-outline badge-primary' }, 'Outline'),
+      Badge({ class: 'badge-ghost badge-primary' }, 'Ghost')
+    ])
+  ]);
+};
+$mount(VariantsDemo, '#demo-variants');
+```
+
+### Inline with Text
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-inline" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const InlineDemo = () => {
+  return Div({ class: 'space-y-2' }, [
+    Div({ class: 'text-sm' }, [
+      'Your order is ',
+      Badge({ class: 'badge-success badge-sm' }, 'Confirmed'),
+      ' and will be shipped soon.'
+    ]),
+    Div({ class: 'text-sm' }, [
+      'This feature is ',
+      Badge({ class: 'badge-warning badge-sm' }, 'Beta'),
+      ' and may change.'
+    ]),
+    Div({ class: 'text-sm' }, [
+      'Version ',
+      Badge({ class: 'badge-info badge-xs' }, 'v2.1.0'),
+      ' released on March 2026'
+    ])
+  ]);
+};
+$mount(InlineDemo, '#demo-inline');
+```
+
+<script>
+  (function() {
+    const initBadgeExamples = () => {
+      
+      // 1. Basic Badge
+      const basicTarget = document.querySelector('#demo-basic');
+      if (basicTarget && !basicTarget.hasChildNodes()) {
+        const BasicDemo = () => {
+          return Div({ class: 'flex flex-wrap gap-2' }, [
+            Badge({}, 'Default'),
+            Badge({ class: 'badge-primary' }, 'Primary'),
+            Badge({ class: 'badge-secondary' }, 'Secondary'),
+            Badge({ class: 'badge-accent' }, 'Accent'),
+            Badge({ class: 'badge-info' }, 'Info'),
+            Badge({ class: 'badge-success' }, 'Success'),
+            Badge({ class: 'badge-warning' }, 'Warning'),
+            Badge({ class: 'badge-error' }, 'Error')
+          ]);
+        };
+        $mount(BasicDemo, basicTarget);
+      }
+
+      // 2. Badge Sizes
+      const sizesTarget = document.querySelector('#demo-sizes');
+      if (sizesTarget && !sizesTarget.hasChildNodes()) {
+        const SizesDemo = () => {
+          return Div({ class: 'flex flex-wrap gap-2 items-center' }, [
+            Badge({ class: 'badge-xs' }, 'Extra Small'),
+            Badge({ class: 'badge-sm' }, 'Small'),
+            Badge({}, 'Default'),
+            Badge({ class: 'badge-md' }, 'Medium'),
+            Badge({ class: 'badge-lg' }, 'Large')
+          ]);
+        };
+        $mount(SizesDemo, sizesTarget);
+      }
+
+      // 3. Outline Badges
+      const outlineTarget = document.querySelector('#demo-outline');
+      if (outlineTarget && !outlineTarget.hasChildNodes()) {
+        const OutlineDemo = () => {
+          return Div({ class: 'flex flex-wrap gap-2' }, [
+            Badge({ class: 'badge-outline' }, 'Default'),
+            Badge({ class: 'badge-outline badge-primary' }, 'Primary'),
+            Badge({ class: 'badge-outline badge-secondary' }, 'Secondary'),
+            Badge({ class: 'badge-outline badge-accent' }, 'Accent'),
+            Badge({ class: 'badge-outline badge-info' }, 'Info'),
+            Badge({ class: 'badge-outline badge-success' }, 'Success'),
+            Badge({ class: 'badge-outline badge-warning' }, 'Warning'),
+            Badge({ class: 'badge-outline badge-error' }, 'Error')
+          ]);
+        };
+        $mount(OutlineDemo, outlineTarget);
+      }
+
+      // 4. Ghost Badges
+      const ghostTarget = document.querySelector('#demo-ghost');
+      if (ghostTarget && !ghostTarget.hasChildNodes()) {
+        const GhostDemo = () => {
+          return Div({ class: 'flex flex-wrap gap-2' }, [
+            Badge({ class: 'badge-ghost' }, 'Default'),
+            Badge({ class: 'badge-ghost badge-primary' }, 'Primary'),
+            Badge({ class: 'badge-ghost badge-secondary' }, 'Secondary'),
+            Badge({ class: 'badge-ghost badge-accent' }, 'Accent'),
+            Badge({ class: 'badge-ghost badge-info' }, 'Info'),
+            Badge({ class: 'badge-ghost badge-success' }, 'Success'),
+            Badge({ class: 'badge-ghost badge-warning' }, 'Warning'),
+            Badge({ class: 'badge-ghost badge-error' }, 'Error')
+          ]);
+        };
+        $mount(GhostDemo, ghostTarget);
+      }
+
+      // 5. With Icons
+      const iconsTarget = document.querySelector('#demo-icons');
+      if (iconsTarget && !iconsTarget.hasChildNodes()) {
+        const IconsDemo = () => {
+          return Div({ class: 'flex flex-wrap gap-2' }, [
+            Badge({ class: 'gap-1' }, [
+              Img({src: Icons.iconSuccess}),
+              Span({}, 'Success')
+            ]),
+            Badge({ class: 'gap-1 badge-warning' }, [
+              Img({src: Icons.iconWarning}),
+              Span({}, 'Warning')
+            ]),
+            Badge({ class: 'gap-1 badge-error' }, [
+              Img({src: Icons.iconError}),
+              Span({}, 'Error')
+            ]),
+            Badge({ class: 'gap-1 badge-info' }, [
+              Img({src: Icons.iconInfo}),
+              Span({}, 'Info')
+            ]),
+            Badge({ class: 'gap-1' }, [
+              Span({}, '★'),
+              Span({}, '4.5')
+            ])
+          ]);
+        };
+        $mount(IconsDemo, iconsTarget);
+      }
+
+      // 6. Status Badges
+      const statusTarget = document.querySelector('#demo-status');
+      if (statusTarget && !statusTarget.hasChildNodes()) {
+        const StatusDemo = () => {
+          const statuses = [
+            { label: 'Active', class: 'badge-success' },
+            { label: 'Pending', class: 'badge-warning' },
+            { label: 'Completed', class: 'badge-info' },
+            { label: 'Failed', class: 'badge-error' },
+            { label: 'Archived', class: 'badge-ghost' }
+          ];
+          
+          return Div({ class: 'flex flex-col gap-2' }, [
+            Div({ class: 'text-sm font-bold mb-2' }, 'Order Status'),
+            Div({ class: 'flex flex-wrap gap-2' }, statuses.map(status =>
+              Badge({ class: status.class }, status.label)
+            ))
+          ]);
+        };
+        $mount(StatusDemo, statusTarget);
+      }
+
+      // 7. Count Badges
+      const countTarget = document.querySelector('#demo-count');
+      if (countTarget && !countTarget.hasChildNodes()) {
+        const CountDemo = () => {
+          const notifications = $(3);
+          const messages = $(5);
+          const updates = $(0);
+          
+          return Div({ class: 'flex flex-wrap gap-6' }, [
+            Div({ class: 'flex items-center gap-2' }, [
+              Span({}, 'Notifications'),
+              Badge({ class: 'badge-primary' }, () => notifications())
+            ]),
+            Div({ class: 'flex items-center gap-2' }, [
+              Span({}, 'Messages'),
+              Badge({ class: 'badge-secondary' }, () => messages())
+            ]),
+            Div({ class: 'flex items-center gap-2' }, [
+              Span({}, 'Updates'),
+              Badge({ class: 'badge-ghost' }, () => updates() || '0')
+            ])
+          ]);
+        };
+        $mount(CountDemo, countTarget);
+      }
+
+      // 8. Interactive Badge
+      const interactiveTarget = document.querySelector('#demo-interactive');
+      if (interactiveTarget && !interactiveTarget.hasChildNodes()) {
+        const InteractiveDemo = () => {
+          const count = $(0);
+          
+          return Div({ class: 'flex flex-col gap-4 items-center' }, [
+            Div({ class: 'flex items-center gap-4' }, [
+              Button({ class: 'btn btn-sm', onclick: () => count(count() - 1) }, '-'),
+              Badge({ class: 'badge-primary text-lg min-w-[4rem] justify-center' }, () => count()),
+              Button({ class: 'btn btn-sm', onclick: () => count(count() + 1) }, '+')
+            ]),
+            Button({ 
+              class: 'btn btn-ghost btn-sm',
+              onclick: () => count(0)
+            }, 'Reset')
+          ]);
+        };
+        $mount(InteractiveDemo, interactiveTarget);
+      }
+
+      // 9. All Variants
+      const variantsTarget = document.querySelector('#demo-variants');
+      if (variantsTarget && !variantsTarget.hasChildNodes()) {
+        const VariantsDemo = () => {
+          return Div({ class: 'flex flex-col gap-6' }, [
+            Div({ class: 'flex flex-wrap gap-2' }, [
+              Badge({ class: 'badge-xs' }, 'XS'),
+              Badge({ class: 'badge-sm' }, 'SM'),
+              Badge({}, 'MD'),
+              Badge({ class: 'badge-lg' }, 'LG')
+            ]),
+            Div({ class: 'flex flex-wrap gap-2' }, [
+              Badge({ class: 'badge-primary badge-sm' }, 'Primary'),
+              Badge({ class: 'badge-secondary badge-sm' }, 'Secondary'),
+              Badge({ class: 'badge-accent badge-sm' }, 'Accent')
+            ]),
+            Div({ class: 'flex flex-wrap gap-2' }, [
+              Badge({ class: 'badge-outline badge-primary' }, 'Outline'),
+              Badge({ class: 'badge-ghost badge-primary' }, 'Ghost')
+            ])
+          ]);
+        };
+        $mount(VariantsDemo, variantsTarget);
+      }
+
+      // 10. Inline with Text
+      const inlineTarget = document.querySelector('#demo-inline');
+      if (inlineTarget && !inlineTarget.hasChildNodes()) {
+        const InlineDemo = () => {
+          return Div({ class: 'space-y-2' }, [
+            Div({ class: 'text-sm' }, [
+              'Your order is ',
+              Badge({ class: 'badge-success badge-sm' }, 'Confirmed'),
+              ' and will be shipped soon.'
+            ]),
+            Div({ class: 'text-sm' }, [
+              'This feature is ',
+              Badge({ class: 'badge-warning badge-sm' }, 'Beta'),
+              ' and may change.'
+            ]),
+            Div({ class: 'text-sm' }, [
+              'Version ',
+              Badge({ class: 'badge-info badge-xs' }, 'v2.1.0'),
+              ' released on March 2026'
+            ])
+          ]);
+        };
+        $mount(InlineDemo, inlineTarget);
+      }
+    };
+
+    initBadgeExamples();
+    
+    if (window.$docsify) {
+      window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
+        hook.doneEach(initBadgeExamples);
+      });
+    }
+  })();
+</script>

docs/components_old/button.md

@@ -0,0 +1,168 @@
+> # Button(props, children?: string | Signal | [...]): HTMLElement
+
+---
+
+## Props
+
+| Prop         | Type                         | Default             | Description                      |
+| :----------- | :--------------------------- | :------------------ | :------------------------------- |
+| `class`      | `string`                     | `''`                | Additional CSS classes (daisyUI) |
+| `disabled`   | `boolean \| Signal<boolean>` | `false`             | Disabled state                   |
+| `loading`    | `boolean \| Signal<boolean>` | `false`             | Shows loading spinner            |
+| `badge`      | `string \| Signal<string>`   | `-`                 | Badge text displayed on corner   |
+| `badgeClass` | `string`                     | `'badge-secondary'` | Badge styling classes            |
+| `tooltip`    | `string \| Signal<string>`   | `-`                 | Tooltip text on hover            |
+| `icon`       | `string \| VNode \| Signal`  | `-`                 | Icon displayed before text       |
+| `onclick`    | `function`                   | `-`                 | Click event handler              |
+| `type`       | `string`                     | `'button'`          | Native button type               |
+
+## Class Options
+
+For more detailed information about the underlying styling system, visit the daisyUI documentation:
+
+- [daisyUI Button](https://daisyui.com/components/button)
+
+| Class Name      | Category      | Description                           |
+| :-------------- | :------------ | :------------------------------------ |
+| `btn-neutral`   | `Color` 🎨    | Neutral brand color                   |
+| `btn-primary`   | `Color` 🎨    | Primary brand color                   |
+| `btn-secondary` | `Color` 🎨    | Secondary brand color                 |
+| `btn-accent`    | `Color` 🎨    | Accent brand color                    |
+| `btn-info`      | `Color` 🎨    | Informational blue color              |
+| `btn-success`   | `Color` 🎨    | Success green color                   |
+| `btn-warning`   | `Color` 🎨    | Warning yellow color                  |
+| `btn-error`     | `Color` 🎨    | Error red color                       |
+| `btn-xl`        | `Size` 📏     | Extra large scale                     |
+| `btn-lg`        | `Size` 📏     | Large scale                           |
+| `btn-md`        | `Size` 📏     | Medium scale (Default)                |
+| `btn-sm`        | `Size` 📏     | Small scale                           |
+| `btn-xs`        | `Size` 📏     | Extra small scale                     |
+| `btn-outline`   | `Style` ✨    | Transparent with colored border       |
+| `btn-dash`      | `Style` ✨    | Dashed border style                   |
+| `btn-soft`      | `Style` ✨    | Low opacity background color          |
+| `btn-ghost`     | `Style` ✨    | No background, hover effect only      |
+| `btn-link`      | `Style` ✨    | Looks like a text link                |
+| `btn-square`    | `Shape` 📐    | 1:1 aspect ratio                      |
+| `btn-circle`    | `Shape` 📐    | 1:1 aspect ratio with rounded corners |
+| `btn-wide`      | `Shape` 📐    | Extra horizontal padding              |
+| `btn-block`     | `Shape` 📐    | Full width of container               |
+| `btn-active`    | `Behavior` ⚙️ | Forced active/pressed state           |
+| `btn-disabled`  | `Behavior` ⚙️ | Visual and functional disabled state  |
+
+### Basic Button
+
+<div id="demo-basic" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+
+```javascript
+const BasicDemo = () => {
+  return Button({ class: "btn-primary" }, "Click Me");
+};
+$mount(BasicDemo, "#demo-basic");
+```
+
+### With Loading State
+
+<div id="demo-loading" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+
+```javascript
+const LoadingDemo = () => {
+  const isSaving = $(false);
+
+  return Button(
+    {
+      class: "btn-success",
+      loading: isSaving,
+      onclick: async () => {
+        isSaving(true);
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+        isSaving(false);
+      },
+    },
+    "Save Changes",
+  );
+};
+$mount(LoadingDemo, "#demo-loading");
+```
+
+### With Badge
+
+<div id="demo-badge" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+
+```javascript
+const BadgeDemo = () => {
+  return Button(
+    {
+      class: "btn-outline",
+      badge: "3",
+      badgeClass: "badge-accent",
+    },
+    "Notifications",
+  );
+};
+$mount(BadgeDemo, "#demo-badge");
+```
+
+### With Tooltip
+
+<div id="demo-tooltip" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+
+```javascript
+const TooltipDemo = () => {
+  return Button(
+    {
+      class: "btn-ghost",
+      tooltip: "Delete item",
+    },
+    "Delete",
+  );
+};
+$mount(TooltipDemo, "#demo-tooltip");
+```
+
+### Disabled State
+
+<div id="demo-disabled" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+
+```javascript
+const DisabledDemo = () => {
+  const isDisabled = $(true);
+
+  return Button(
+    {
+      class: "btn-primary btn-disabled",
+    },
+    "Submit",
+  );
+};
+$mount(DisabledDemo, "#demo-disabled");
+```
+
+### All Variants
+
+<div id="demo-variants" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+
+```javascript
+const VariantsDemo = () => {
+  return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
+    Button({ class: "btn-primary" }, "Primary"),
+    Button({ class: "btn-secondary" }, "Secondary"),
+    Button({ class: "btn-accent" }, "Accent"),
+    Button({ class: "btn-ghost" }, "Ghost"),
+    Button({ class: "btn-outline" }, "Outline"),
+  ]);
+};
+$mount(VariantsDemo, "#demo-variants");
+```
+
+<div id="demo-test" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+
+```javascript
+const TestDemo = () => {
+  return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
+    $html("span", {class: "indicator"},[
+      5,
+      Button('Click')])
+  ]);
+};
+$mount(TestDemo, "#demo-test");
+```

docs/components_old/checkbox.md

@@ -0,0 +1,479 @@
+# Checkbox
+
+Toggle checkbox component with label, tooltip support, and reactive state management.
+
+## Tag
+
+`Checkbox`
+
+## Props
+
+| Prop         | Type                         | Default     | Description                                      |
+| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
+| `label`      | `string`                     | `-`         | Label text for the checkbox                      |
+| `value`      | `boolean \| Signal<boolean>` | `false`     | Checked state                                    |
+| `tooltip`    | `string`                     | `-`         | Tooltip text on hover                            |
+| `toggle`     | `boolean`                    | `false`     | Display as toggle switch instead of checkbox     |
+| `disabled`   | `boolean \| Signal<boolean>` | `false`     | Disabled state                                   |
+| `class`      | `string`                     | `''`        | Additional CSS classes (DaisyUI + Tailwind)      |
+| `onclick`    | `function`                   | `-`         | Click event handler                              |
+
+## Live Examples
+
+### Basic Checkbox
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  const accepted = $(false);
+  
+  return Checkbox({
+    label: 'I accept the terms and conditions',
+    value: accepted,
+    onclick: () => accepted(!accepted())
+  });
+};
+$mount(BasicDemo, '#demo-basic');
+```
+
+### Toggle Switch
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-toggle" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const ToggleDemo = () => {
+  const enabled = $(false);
+  
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Checkbox({
+      label: 'Enable notifications',
+      value: enabled,
+      toggle: true,
+      onclick: () => enabled(!enabled())
+    }),
+    () => enabled() 
+      ? Div({ class: 'alert alert-success' }, 'Notifications are ON')
+      : Div({ class: 'alert alert-soft' }, 'Notifications are OFF')
+  ]);
+};
+$mount(ToggleDemo, '#demo-toggle');
+```
+
+### With Tooltip
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-tooltip" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const TooltipDemo = () => {
+  const darkMode = $(false);
+  
+  return Checkbox({
+    label: 'Dark mode',
+    value: darkMode,
+    tooltip: 'Enable dark theme preference',
+    onclick: () => darkMode(!darkMode())
+  });
+};
+$mount(TooltipDemo, '#demo-tooltip');
+```
+
+### Disabled State
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-disabled" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const DisabledDemo = () => {
+  return Div({ class: 'flex flex-col gap-3' }, [
+    Checkbox({
+      label: 'Checked and disabled',
+      value: true,
+      disabled: true
+    }),
+    Checkbox({
+      label: 'Unchecked and disabled',
+      value: false,
+      disabled: true
+    })
+  ]);
+};
+$mount(DisabledDemo, '#demo-disabled');
+```
+
+### Reactive Multiple Selection
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-multiple" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const MultipleDemo = () => {
+  const options = [
+    { id: 1, label: 'Option 1', selected: $(false) },
+    { id: 2, label: 'Option 2', selected: $(false) },
+    { id: 3, label: 'Option 3', selected: $(false) }
+  ];
+  
+  const selectAll = $(false);
+  
+  const toggleAll = (value) => {
+    selectAll(value);
+    options.forEach(opt => opt.selected(value));
+  };
+  
+  const updateSelectAll = () => {
+    const allSelected = options.every(opt => opt.selected());
+    selectAll(allSelected);
+  };
+  
+  return Div({ class: 'flex flex-col gap-3' }, [
+    Checkbox({
+      label: 'Select all',
+      value: selectAll,
+      onclick: () => toggleAll(!selectAll())
+    }),
+    Div({ class: 'divider my-1' }),
+    ...options.map(opt => Checkbox({
+      label: opt.label,
+      value: opt.selected,
+      onclick: () => {
+        opt.selected(!opt.selected());
+        updateSelectAll();
+      }
+    })),
+    Div({ class: 'mt-2 text-sm opacity-70' }, () => {
+      const count = options.filter(opt => opt.selected()).length;
+      return `${count} of ${options.length} selected`;
+    })
+  ]);
+};
+$mount(MultipleDemo, '#demo-multiple');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  const variant1 = $(true);
+  const variant2 = $(false);
+  const variant3 = $(true);
+  
+  return Div({ class: 'flex flex-col gap-3' }, [
+    Div({ class: 'flex items-center gap-4' }, [
+      Checkbox({
+        label: 'Primary',
+        value: variant1,
+        class: 'checkbox-primary',
+        onclick: () => variant1(!variant1())
+      }),
+      Checkbox({
+        label: 'Secondary',
+        value: variant2,
+        class: 'checkbox-secondary',
+        onclick: () => variant2(!variant2())
+      })
+    ]),
+    Div({ class: 'flex items-center gap-4' }, [
+      Checkbox({
+        label: 'Accent',
+        value: variant3,
+        class: 'checkbox-accent',
+        onclick: () => variant3(!variant3())
+      }),
+      Checkbox({
+        label: 'Toggle switch',
+        value: $(false),
+        toggle: true,
+        class: 'toggle-primary'
+      })
+    ])
+  ]);
+};
+$mount(VariantsDemo, '#demo-variants');
+```
+
+### Form Example
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-form" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const FormDemo = () => {
+  const subscribe = $(false);
+  const weekly = $(false);
+  const monthly = $(true);
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({ class: 'text-sm font-bold' }, 'Newsletter preferences'),
+    Checkbox({
+      label: 'Subscribe to newsletter',
+      value: subscribe,
+      onclick: () => subscribe(!subscribe())
+    }),
+    () => subscribe() ? Div({ class: 'ml-6 flex flex-col gap-2' }, [
+      Checkbox({
+        label: 'Weekly updates',
+        value: weekly,
+        onclick: () => weekly(!weekly())
+      }),
+      Checkbox({
+        label: 'Monthly digest',
+        value: monthly,
+        onclick: () => monthly(!monthly())
+      })
+    ]) : null,
+    () => subscribe() && (weekly() || monthly())
+      ? Div({ class: 'alert alert-success text-sm mt-2' }, 'You will receive updates!')
+      : subscribe()
+      ? Div({ class: 'alert alert-warning text-sm mt-2' }, 'Select at least one frequency')
+      : null
+  ]);
+};
+$mount(FormDemo, '#demo-form');
+```
+
+<script>
+  (function() {
+    const initCheckboxExamples = () => {
+      
+      // 1. Basic Checkbox
+      const basicTarget = document.querySelector('#demo-basic');
+      if (basicTarget && !basicTarget.hasChildNodes()) {
+        const BasicDemo = () => {
+          const accepted = $(false);
+          
+          return Checkbox({
+            label: 'I accept the terms and conditions',
+            value: accepted,
+            onclick: () => accepted(!accepted())
+          });
+        };
+        $mount(BasicDemo, basicTarget);
+      }
+
+      // 2. Toggle Switch
+      const toggleTarget = document.querySelector('#demo-toggle');
+      if (toggleTarget && !toggleTarget.hasChildNodes()) {
+        const ToggleDemo = () => {
+          const enabled = $(false);
+          
+          return Div({ class: 'flex flex-col gap-4 w-full' }, [
+            Checkbox({
+              label: 'Enable notifications',
+              value: enabled,
+              toggle: true,
+              onclick: () => enabled(!enabled())
+            }),
+            () => enabled() 
+              ? Div({ class: 'alert alert-success' }, 'Notifications are ON')
+              : Div({ class: 'alert alert-soft' }, 'Notifications are OFF')
+          ]);
+        };
+        $mount(ToggleDemo, toggleTarget);
+      }
+
+      // 3. With Tooltip
+      const tooltipTarget = document.querySelector('#demo-tooltip');
+      if (tooltipTarget && !tooltipTarget.hasChildNodes()) {
+        const TooltipDemo = () => {
+          const darkMode = $(false);
+          
+          return Checkbox({
+            label: 'Dark mode',
+            value: darkMode,
+            tooltip: 'Enable dark theme preference',
+            onclick: () => darkMode(!darkMode())
+          });
+        };
+        $mount(TooltipDemo, tooltipTarget);
+      }
+
+      // 4. Disabled State
+      const disabledTarget = document.querySelector('#demo-disabled');
+      if (disabledTarget && !disabledTarget.hasChildNodes()) {
+        const DisabledDemo = () => {
+          return Div({ class: 'flex flex-col gap-3' }, [
+            Checkbox({
+              label: 'Checked and disabled',
+              value: true,
+              disabled: true
+            }),
+            Checkbox({
+              label: 'Unchecked and disabled',
+              value: false,
+              disabled: true
+            })
+          ]);
+        };
+        $mount(DisabledDemo, disabledTarget);
+      }
+
+      // 5. Reactive Multiple Selection
+      const multipleTarget = document.querySelector('#demo-multiple');
+      if (multipleTarget && !multipleTarget.hasChildNodes()) {
+        const MultipleDemo = () => {
+          const options = [
+            { id: 1, label: 'Option 1', selected: $(false) },
+            { id: 2, label: 'Option 2', selected: $(false) },
+            { id: 3, label: 'Option 3', selected: $(false) }
+          ];
+          
+          const selectAll = $(false);
+          
+          const toggleAll = (value) => {
+            selectAll(value);
+            options.forEach(opt => opt.selected(value));
+          };
+          
+          const updateSelectAll = () => {
+            const allSelected = options.every(opt => opt.selected());
+            selectAll(allSelected);
+          };
+          
+          return Div({ class: 'flex flex-col gap-3' }, [
+            Checkbox({
+              label: 'Select all',
+              value: selectAll,
+              onclick: () => toggleAll(!selectAll())
+            }),
+            Div({ class: 'divider my-1' }),
+            ...options.map(opt => Checkbox({
+              label: opt.label,
+              value: opt.selected,
+              onclick: () => {
+                opt.selected(!opt.selected());
+                updateSelectAll();
+              }
+            })),
+            Div({ class: 'mt-2 text-sm opacity-70' }, () => {
+              const count = options.filter(opt => opt.selected()).length;
+              return `${count} of ${options.length} selected`;
+            })
+          ]);
+        };
+        $mount(MultipleDemo, multipleTarget);
+      }
+
+      // 6. All Variants
+      const variantsTarget = document.querySelector('#demo-variants');
+      if (variantsTarget && !variantsTarget.hasChildNodes()) {
+        const VariantsDemo = () => {
+          const variant1 = $(true);
+          const variant2 = $(false);
+          const variant3 = $(true);
+          
+          return Div({ class: 'flex flex-col gap-3' }, [
+            Div({ class: 'flex items-center gap-4' }, [
+              Checkbox({
+                label: 'Primary',
+                value: variant1,
+                class: 'checkbox-primary',
+                onclick: () => variant1(!variant1())
+              }),
+              Checkbox({
+                label: 'Secondary',
+                value: variant2,
+                class: 'checkbox-secondary',
+                onclick: () => variant2(!variant2())
+              })
+            ]),
+            Div({ class: 'flex items-center gap-4' }, [
+              Checkbox({
+                label: 'Accent',
+                value: variant3,
+                class: 'checkbox-accent',
+                onclick: () => variant3(!variant3())
+              }),
+              Checkbox({
+                label: 'Toggle switch',
+                value: $(false),
+                toggle: true,
+                class: 'toggle-primary'
+              })
+            ])
+          ]);
+        };
+        $mount(VariantsDemo, variantsTarget);
+      }
+
+      // 7. Form Example
+      const formTarget = document.querySelector('#demo-form');
+      if (formTarget && !formTarget.hasChildNodes()) {
+        const FormDemo = () => {
+          const subscribe = $(false);
+          const weekly = $(false);
+          const monthly = $(true);
+          
+          return Div({ class: 'flex flex-col gap-4' }, [
+            Div({ class: 'text-sm font-bold' }, 'Newsletter preferences'),
+            Checkbox({
+              label: 'Subscribe to newsletter',
+              value: subscribe,
+              onclick: () => subscribe(!subscribe())
+            }),
+            () => subscribe() ? Div({ class: 'ml-6 flex flex-col gap-2' }, [
+              Checkbox({
+                label: 'Weekly updates',
+                value: weekly,
+                onclick: () => weekly(!weekly())
+              }),
+              Checkbox({
+                label: 'Monthly digest',
+                value: monthly,
+                onclick: () => monthly(!monthly())
+              })
+            ]) : null,
+            () => subscribe() && (weekly() || monthly())
+              ? Div({ class: 'alert alert-success text-sm mt-2' }, 'You will receive updates!')
+              : subscribe()
+              ? Div({ class: 'alert alert-warning text-sm mt-2' }, 'Select at least one frequency')
+              : null
+          ]);
+        };
+        $mount(FormDemo, formTarget);
+      }
+    };
+
+    initCheckboxExamples();
+    
+    if (window.$docsify) {
+      window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
+        hook.doneEach(initCheckboxExamples);
+      });
+    }
+  })();
+</script>

docs/components_old/colorpicker.md

@@ -0,0 +1,382 @@
+# Colorpicker
+
+Color picker component with preset color palette, reactive value binding, and customizable appearance.
+
+## Tag
+
+`Colorpicker`
+
+## Props
+
+| Prop         | Type                         | Default     | Description                                      |
+| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
+| `label`      | `string`                     | `-`         | Label text for the button                        |
+| `value`      | `string \| Signal<string>`   | `'#000000'` | Selected color value (hex format)                |
+| `class`      | `string`                     | `''`        | Additional CSS classes (DaisyUI + Tailwind)      |
+
+## Live Examples
+
+### Basic Colorpicker
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  const color = $('#3b82f6');
+  
+  return Colorpicker({
+    label: 'Pick a color',
+    value: color
+  });
+};
+$mount(BasicDemo, '#demo-basic');
+```
+
+### With Reactive Preview
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-preview" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const PreviewDemo = () => {
+  const color = $('#10b981');
+  
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Colorpicker({
+      label: 'Choose color',
+      value: color
+    }),
+    Div({ 
+      class: 'w-full h-20 rounded-lg shadow-inner transition-all duration-200',
+      style: () => `background-color: ${color()}`
+    }, [
+      Div({ class: 'text-center leading-20 pt-6 opacity-70' }, () => color())
+    ])
+  ]);
+};
+$mount(PreviewDemo, '#demo-preview');
+```
+
+### Color Palette Grid
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-palette" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const PaletteDemo = () => {
+  const selectedColor = $('#ef4444');
+  const presets = [
+    '#ef4444', '#f97316', '#f59e0b', '#eab308',
+    '#84cc16', '#10b981', '#14b8a6', '#06b6d4',
+    '#3b82f6', '#6366f1', '#8b5cf6', '#d946ef',
+    '#ec489a', '#f43f5e', '#6b7280', '#1f2937'
+  ];
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Colorpicker({
+      label: 'Custom color',
+      value: selectedColor
+    }),
+    Div({ class: 'divider text-xs' }, 'Or choose from palette'),
+    Div({ class: 'grid grid-cols-8 gap-2' }, presets.map(color => 
+      Button({
+        class: `w-8 h-8 rounded-lg shadow-sm transition-transform hover:scale-110`,
+        style: `background-color: ${color}`,
+        onclick: () => selectedColor(color)
+      })
+    )),
+    Div({ class: 'mt-2 text-center text-sm font-mono' }, () => selectedColor())
+  ]);
+};
+$mount(PaletteDemo, '#demo-palette');
+```
+
+### With Text Color Preview
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-text" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const TextDemo = () => {
+  const bgColor = $('#1e293b');
+  const textColor = $('#f8fafc');
+  
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Div({ class: 'flex gap-4' }, [
+      Colorpicker({
+        label: 'Background',
+        value: bgColor
+      }),
+      Colorpicker({
+        label: 'Text',
+        value: textColor
+      })
+    ]),
+    Div({ 
+      class: 'p-6 rounded-lg text-center font-bold transition-all duration-200',
+      style: () => `background-color: ${bgColor()}; color: ${textColor()}`
+    }, [
+      'Preview text with your colors'
+    ])
+  ]);
+};
+$mount(TextDemo, '#demo-text');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-4 items-center' }, [
+    Colorpicker({
+      label: 'Primary',
+      value: $('#3b82f6')
+    }),
+    Colorpicker({
+      label: 'Success',
+      value: $('#10b981')
+    }),
+    Colorpicker({
+      label: 'Warning',
+      value: $('#f59e0b')
+    }),
+    Colorpicker({
+      label: 'Error',
+      value: $('#ef4444')
+    })
+  ]);
+};
+$mount(VariantsDemo, '#demo-variants');
+```
+
+### Dynamic Color Swatch
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-dynamic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const DynamicDemo = () => {
+  const primary = $('#3b82f6');
+  const secondary = $('#ef4444');
+  const accent = $('#10b981');
+  
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Div({ class: 'flex flex-wrap gap-4' }, [
+      Colorpicker({ label: 'Primary', value: primary }),
+      Colorpicker({ label: 'Secondary', value: secondary }),
+      Colorpicker({ label: 'Accent', value: accent })
+    ]),
+    Div({ class: 'grid grid-cols-3 gap-2 mt-2' }, [
+      Div({ 
+        class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold',
+        style: () => `background-color: ${primary()}; color: white`
+      }, 'Primary'),
+      Div({ 
+        class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold',
+        style: () => `background-color: ${secondary()}; color: white`
+      }, 'Secondary'),
+      Div({ 
+        class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold',
+        style: () => `background-color: ${accent()}; color: white`
+      }, 'Accent')
+    ])
+  ]);
+};
+$mount(DynamicDemo, '#demo-dynamic');
+```
+
+<script>
+  (function() {
+    const initColorpickerExamples = () => {
+      
+      // 1. Basic Colorpicker
+      const basicTarget = document.querySelector('#demo-basic');
+      if (basicTarget && !basicTarget.hasChildNodes()) {
+        const BasicDemo = () => {
+          const color = $('#3b82f6');
+          return Colorpicker({
+            label: 'Pick a color',
+            value: color
+          });
+        };
+        $mount(BasicDemo, basicTarget);
+      }
+
+      // 2. With Reactive Preview
+      const previewTarget = document.querySelector('#demo-preview');
+      if (previewTarget && !previewTarget.hasChildNodes()) {
+        const PreviewDemo = () => {
+          const color = $('#10b981');
+          return Div({ class: 'flex flex-col gap-4 w-full' }, [
+            Colorpicker({
+              label: 'Choose color',
+              value: color
+            }),
+            Div({ 
+              class: 'w-full h-20 rounded-lg shadow-inner transition-all duration-200 flex items-center justify-center',
+              style: () => `background-color: ${color()}`
+            }, [
+              Div({ class: 'text-center font-mono text-sm bg-black/20 px-2 py-1 rounded' }, () => color())
+            ])
+          ]);
+        };
+        $mount(PreviewDemo, previewTarget);
+      }
+
+      // 3. Color Palette Grid
+      const paletteTarget = document.querySelector('#demo-palette');
+      if (paletteTarget && !paletteTarget.hasChildNodes()) {
+        const PaletteDemo = () => {
+          const selectedColor = $('#ef4444');
+          const presets = [
+            '#ef4444', '#f97316', '#f59e0b', '#eab308',
+            '#84cc16', '#10b981', '#14b8a6', '#06b6d4',
+            '#3b82f6', '#6366f1', '#8b5cf6', '#d946ef',
+            '#ec489a', '#f43f5e', '#6b7280', '#1f2937'
+          ];
+          
+          return Div({ class: 'flex flex-col gap-4' }, [
+            Colorpicker({
+              label: 'Custom color',
+              value: selectedColor
+            }),
+            Div({ class: 'divider text-xs' }, 'Or choose from palette'),
+            Div({ class: 'grid grid-cols-8 gap-2' }, presets.map(color => 
+              Button({
+                class: `w-8 h-8 rounded-lg shadow-sm transition-transform hover:scale-110`,
+                style: `background-color: ${color}`,
+                onclick: () => selectedColor(color)
+              })
+            )),
+            Div({ class: 'mt-2 text-center text-sm font-mono' }, () => selectedColor())
+          ]);
+        };
+        $mount(PaletteDemo, paletteTarget);
+      }
+
+      // 4. With Text Color Preview
+      const textTarget = document.querySelector('#demo-text');
+      if (textTarget && !textTarget.hasChildNodes()) {
+        const TextDemo = () => {
+          const bgColor = $('#1e293b');
+          const textColor = $('#f8fafc');
+          
+          return Div({ class: 'flex flex-col gap-4 w-full' }, [
+            Div({ class: 'flex gap-4' }, [
+              Colorpicker({
+                label: 'Background',
+                value: bgColor
+              }),
+              Colorpicker({
+                label: 'Text',
+                value: textColor
+              })
+            ]),
+            Div({ 
+              class: 'p-6 rounded-lg text-center font-bold transition-all duration-200',
+              style: () => `background-color: ${bgColor()}; color: ${textColor()}`
+            }, [
+              'Preview text with your colors'
+            ])
+          ]);
+        };
+        $mount(TextDemo, textTarget);
+      }
+
+      // 5. All Variants
+      const variantsTarget = document.querySelector('#demo-variants');
+      if (variantsTarget && !variantsTarget.hasChildNodes()) {
+        const VariantsDemo = () => {
+          return Div({ class: 'flex flex-wrap gap-4 items-center' }, [
+            Colorpicker({
+              label: 'Primary',
+              value: $('#3b82f6')
+            }),
+            Colorpicker({
+              label: 'Success',
+              value: $('#10b981')
+            }),
+            Colorpicker({
+              label: 'Warning',
+              value: $('#f59e0b')
+            }),
+            Colorpicker({
+              label: 'Error',
+              value: $('#ef4444')
+            })
+          ]);
+        };
+        $mount(VariantsDemo, variantsTarget);
+      }
+
+      // 6. Dynamic Color Swatch
+      const dynamicTarget = document.querySelector('#demo-dynamic');
+      if (dynamicTarget && !dynamicTarget.hasChildNodes()) {
+        const DynamicDemo = () => {
+          const primary = $('#3b82f6');
+          const secondary = $('#ef4444');
+          const accent = $('#10b981');
+          
+          return Div({ class: 'flex flex-col gap-4 w-full' }, [
+            Div({ class: 'flex flex-wrap gap-4' }, [
+              Colorpicker({ label: 'Primary', value: primary }),
+              Colorpicker({ label: 'Secondary', value: secondary }),
+              Colorpicker({ label: 'Accent', value: accent })
+            ]),
+            Div({ class: 'grid grid-cols-3 gap-2 mt-2' }, [
+              Div({ 
+                class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
+                style: () => `background-color: ${primary()}`
+              }, 'Primary'),
+              Div({ 
+                class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
+                style: () => `background-color: ${secondary()}`
+              }, 'Secondary'),
+              Div({ 
+                class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
+                style: () => `background-color: ${accent()}`
+              }, 'Accent')
+            ])
+          ]);
+        };
+        $mount(DynamicDemo, dynamicTarget);
+      }
+    };
+
+    initColorpickerExamples();
+    
+    if (window.$docsify) {
+      window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
+        hook.doneEach(initColorpickerExamples);
+      });
+    }
+  })();
+</script>

docs/components_old/datepicker.md

@@ -0,0 +1,339 @@
+# Datepicker
+
+Date and date range picker component with calendar interface, time selection, and reactive state management.
+
+## Tag
+
+`Datepicker`
+
+## Props
+
+| Prop         | Type                                              | Default                  | Description                                      |
+| :----------- | :------------------------------------------------ | :----------------------- | :----------------------------------------------- |
+| `label`      | `string`                                          | `-`                      | Label text for the input                         |
+| `value`      | `string \| {start: string, end: string} \| Signal` | `-`                      | Selected date or range                           |
+| `range`      | `boolean`                                         | `false`                  | Enable date range selection mode                 |
+| `hour`       | `boolean`                                         | `false`                  | Enable hour selection                            |
+| `placeholder`| `string`                                          | `'Select date...'`       | Placeholder text                                 |
+| `class`      | `string`                                          | `''`                     | Additional CSS classes (DaisyUI + Tailwind)      |
+
+## Live Examples
+
+### Basic Datepicker
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  const date = $('');
+  
+  return Datepicker({
+    label: 'Select date',
+    value: date,
+    placeholder: 'Choose a date...'
+  });
+};
+$mount(BasicDemo, '#demo-basic');
+```
+
+### Date Range Picker
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-range" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const RangeDemo = () => {
+  const range = $({ start: '', end: '' });
+  
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Datepicker({
+      label: 'Date range',
+      value: range,
+      range: true,
+      placeholder: 'Select start and end date...'
+    }),
+    () => range().start && range().end ? Div({ class: 'alert alert-success' }, [
+      `Selected: ${range().start} → ${range().end}`
+    ]) : null
+  ]);
+};
+$mount(RangeDemo, '#demo-range');
+```
+
+### With Time Selection
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-time" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const TimeDemo = () => {
+  const datetime = $('');
+  
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Datepicker({
+      label: 'Select date and time',
+      value: datetime,
+      hour: true,
+      placeholder: 'Choose date and time...'
+    }),
+    () => datetime() ? Div({ class: 'alert alert-info' }, [
+      `Selected: ${datetime()}`
+    ]) : null
+  ]);
+};
+$mount(TimeDemo, '#demo-time');
+```
+
+### Range with Time
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-range-time" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const RangeTimeDemo = () => {
+  const range = $({ start: '', end: '', startHour: 9, endHour: 17 });
+  
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Datepicker({
+      label: 'Schedule range',
+      value: range,
+      range: true,
+      hour: true,
+      placeholder: 'Select date and time range...'
+    }),
+    () => range().start && range().end ? Div({ class: 'alert alert-primary' }, [
+      `From ${range().start} ${range().startHour || 9}:00 to ${range().end} ${range().endHour || 17}:00`
+    ]) : null
+  ]);
+};
+$mount(RangeTimeDemo, '#demo-range-time');
+```
+
+### Reactive Display
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const ReactiveDemo = () => {
+  const date = $('');
+  const today = new Date().toISOString().split('T')[0];
+  
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Datepicker({
+      label: 'Select date',
+      value: date,
+      placeholder: 'Choose a date...'
+    }),
+    Div({ class: 'stats shadow' }, [
+      Div({ class: 'stat' }, [
+        Div({ class: 'stat-title' }, 'Selected date'),
+        Div({ class: 'stat-value text-sm' }, () => date() || 'Not selected'),
+        Div({ class: 'stat-desc' }, () => date() === today ? 'Today' : '')
+      ])
+    ])
+  ]);
+};
+$mount(ReactiveDemo, '#demo-reactive');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Datepicker({
+      label: 'Single date',
+      value: $('2024-12-25'),
+      placeholder: 'Select date...'
+    }),
+    Datepicker({
+      label: 'Date range',
+      range: true,
+      value: $({ start: '2024-12-01', end: '2024-12-31' }),
+      placeholder: 'Select range...'
+    }),
+    Datepicker({
+      label: 'With time',
+      hour: true,
+      value: $('2024-12-25T14:00:00'),
+      placeholder: 'Select date and time...'
+    })
+  ]);
+};
+$mount(VariantsDemo, '#demo-variants');
+```
+
+<script>
+  (function() {
+    const initDatepickerExamples = () => {
+      
+      // 1. Basic Datepicker
+      const basicTarget = document.querySelector('#demo-basic');
+      if (basicTarget && !basicTarget.hasChildNodes()) {
+        const BasicDemo = () => {
+          const date = $('');
+          
+          return Datepicker({
+            label: 'Select date',
+            value: date,
+            placeholder: 'Choose a date...'
+          });
+        };
+        $mount(BasicDemo, basicTarget);
+      }
+
+      // 2. Date Range Picker
+      const rangeTarget = document.querySelector('#demo-range');
+      if (rangeTarget && !rangeTarget.hasChildNodes()) {
+        const RangeDemo = () => {
+          const range = $({ start: '', end: '' });
+          
+          return Div({ class: 'flex flex-col gap-4 w-full' }, [
+            Datepicker({
+              label: 'Date range',
+              value: range,
+              range: true,
+              placeholder: 'Select start and end date...'
+            }),
+            () => range().start && range().end ? Div({ class: 'alert alert-success' }, [
+              `Selected: ${range().start} → ${range().end}`
+            ]) : null
+          ]);
+        };
+        $mount(RangeDemo, rangeTarget);
+      }
+
+      // 3. With Time Selection
+      const timeTarget = document.querySelector('#demo-time');
+      if (timeTarget && !timeTarget.hasChildNodes()) {
+        const TimeDemo = () => {
+          const datetime = $('');
+          
+          return Div({ class: 'flex flex-col gap-4 w-full' }, [
+            Datepicker({
+              label: 'Select date and time',
+              value: datetime,
+              hour: true,
+              placeholder: 'Choose date and time...'
+            }),
+            () => datetime() ? Div({ class: 'alert alert-info' }, [
+              `Selected: ${datetime()}`
+            ]) : null
+          ]);
+        };
+        $mount(TimeDemo, timeTarget);
+      }
+
+      // 4. Range with Time
+      const rangeTimeTarget = document.querySelector('#demo-range-time');
+      if (rangeTimeTarget && !rangeTimeTarget.hasChildNodes()) {
+        const RangeTimeDemo = () => {
+          const range = $({ start: '', end: '', startHour: 9, endHour: 17 });
+          
+          return Div({ class: 'flex flex-col gap-4 w-full' }, [
+            Datepicker({
+              label: 'Schedule range',
+              value: range,
+              range: true,
+              hour: true,
+              placeholder: 'Select date and time range...'
+            }),
+            () => range().start && range().end ? Div({ class: 'alert alert-primary' }, [
+              `From ${range().start} ${range().startHour || 9}:00 to ${range().end} ${range().endHour || 17}:00`
+            ]) : null
+          ]);
+        };
+        $mount(RangeTimeDemo, rangeTimeTarget);
+      }
+
+      // 5. Reactive Display
+      const reactiveTarget = document.querySelector('#demo-reactive');
+      if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
+        const ReactiveDemo = () => {
+          const date = $('');
+          const today = new Date().toISOString().split('T')[0];
+          
+          return Div({ class: 'flex flex-col gap-4 w-full' }, [
+            Datepicker({
+              label: 'Select date',
+              value: date,
+              placeholder: 'Choose a date...'
+            }),
+            Div({ class: 'stats shadow' }, [
+              Div({ class: 'stat' }, [
+                Div({ class: 'stat-title' }, 'Selected date'),
+                Div({ class: 'stat-value text-sm' }, () => date() || 'Not selected'),
+                Div({ class: 'stat-desc' }, () => date() === today ? 'Today' : '')
+              ])
+            ])
+          ]);
+        };
+        $mount(ReactiveDemo, reactiveTarget);
+      }
+
+      // 6. All Variants
+      const variantsTarget = document.querySelector('#demo-variants');
+      if (variantsTarget && !variantsTarget.hasChildNodes()) {
+        const VariantsDemo = () => {
+          return Div({ class: 'flex flex-col gap-4' }, [
+            Datepicker({
+              label: 'Single date',
+              value: $('2024-12-25'),
+              placeholder: 'Select date...'
+            }),
+            Datepicker({
+              label: 'Date range',
+              range: true,
+              value: $({ start: '2024-12-01', end: '2024-12-31' }),
+              placeholder: 'Select range...'
+            }),
+            Datepicker({
+              label: 'With time',
+              hour: true,
+              value: $('2024-12-25T14:00:00'),
+              placeholder: 'Select date and time...'
+            })
+          ]);
+        };
+        $mount(VariantsDemo, variantsTarget);
+      }
+    };
+
+    initDatepickerExamples();
+    
+    if (window.$docsify) {
+      window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
+        hook.doneEach(initDatepickerExamples);
+      });
+    }
+  })();
+</script>

docs/components_old/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_old/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_old/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_old/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_old/indicator.md

@@ -0,0 +1,556 @@
+# Indicator
+
+Indicator component for adding badges, status markers, or notifications to elements. Perfect for showing counts, online status, or alerts.
+
+## Tag
+
+`Indicator`
+
+## Props
+
+| Prop         | Type                         | Default     | Description                                      |
+| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
+| `badge`      | `string \| VNode \| Signal`  | `-`         | Content to display as indicator                  |
+| `badgeClass` | `string`                     | `''`        | Additional CSS classes for the badge             |
+| `class`      | `string`                     | `''`        | Additional CSS classes for the container         |
+| `children`   | `VNode`                      | `-`         | Element to attach the indicator to               |
+
+## Live Examples
+
+### Basic Indicator
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
+    Indicator({ badge: '3', badgeClass: 'badge-primary' }, [
+      Div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '📦')
+    ]),
+    Indicator({ badge: '99+', badgeClass: 'badge-secondary' }, [
+      Div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '🔔')
+    ]),
+    Indicator({ badge: 'New', badgeClass: 'badge-accent' }, [
+      Div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '✨')
+    ])
+  ]);
+};
+$mount(BasicDemo, '#demo-basic');
+```
+
+### Online Status Indicator
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-status" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const StatusDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
+    Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [
+      Div({ class: 'avatar placeholder' }, [
+        Div({ class: 'bg-neutral text-neutral-content rounded-full w-12 h-12 flex items-center justify-center' }, 'JD')
+      ])
+    ]),
+    Indicator({ badge: '●', badgeClass: 'badge-warning badge-xs' }, [
+      Div({ class: 'avatar placeholder' }, [
+        Div({ class: 'bg-neutral text-neutral-content rounded-full w-12 h-12 flex items-center justify-center' }, 'JS')
+      ])
+    ]),
+    Indicator({ badge: '●', badgeClass: 'badge-error badge-xs' }, [
+      Div({ class: 'avatar placeholder' }, [
+        Div({ class: 'bg-neutral text-neutral-content rounded-full w-12 h-12 flex items-center justify-center' }, 'BC')
+      ])
+    ])
+  ]);
+};
+$mount(StatusDemo, '#demo-status');
+```
+
+### Reactive Counter
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4 items-center"></div>
+  </div>
+</div>
+
+```javascript
+const ReactiveDemo = () => {
+  const count = $(0);
+  
+  return Div({ class: 'flex flex-col gap-4 items-center' }, [
+    Indicator({ 
+      badge: () => count() > 0 ? count() : null,
+      badgeClass: 'badge-primary'
+    }, [
+      Button({ 
+        class: 'btn btn-lg btn-primary',
+        onclick: () => count(count() + 1)
+      }, 'Notifications')
+    ]),
+    Div({ class: 'flex gap-2' }, [
+      Button({ 
+        class: 'btn btn-sm',
+        onclick: () => count(Math.max(0, count() - 1))
+      }, 'Decrease'),
+      Button({ 
+        class: 'btn btn-sm btn-ghost',
+        onclick: () => count(0)
+      }, 'Clear')
+    ])
+  ]);
+};
+$mount(ReactiveDemo, '#demo-reactive');
+```
+
+### Shopping Cart
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-cart" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const CartDemo = () => {
+  const cart = $([
+    { id: 1, name: 'Product 1', price: 29 },
+    { id: 2, name: 'Product 2', price: 49 }
+  ]);
+  
+  const addItem = () => {
+    const newId = Math.max(...cart().map(i => i.id), 0) + 1;
+    cart([...cart(), { id: newId, name: `Product ${newId}`, price: Math.floor(Math.random() * 100) + 10 }]);
+    Toast('Item added to cart', 'alert-success', 1500);
+  };
+  
+  const removeItem = (id) => {
+    cart(cart().filter(item => item.id !== id));
+    Toast('Item removed', 'alert-info', 1500);
+  };
+  
+  const total = () => cart().reduce((sum, item) => sum + item.price, 0);
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({ class: 'flex justify-between items-center' }, [
+      Indicator({ 
+        badge: () => cart().length,
+        badgeClass: 'badge-primary'
+      }, [
+        Button({ class: 'btn', onclick: addItem }, '🛒 Add to Cart')
+      ]),
+      Span({ class: 'text-lg font-bold' }, () => `Total: $${total()}`)
+    ]),
+    cart().length === 0 
+      ? Div({ class: 'alert alert-soft text-center' }, 'Cart is empty')
+      : Div({ class: 'flex flex-col gap-2' }, cart().map(item =>
+        Div({ class: 'flex justify-between items-center p-2 bg-base-200 rounded-lg' }, [
+          Span({}, item.name),
+          Div({ class: 'flex gap-2 items-center' }, [
+            Span({ class: 'text-sm font-bold' }, `$${item.price}`),
+            Button({ 
+              class: 'btn btn-xs btn-ghost btn-circle',
+              onclick: () => removeItem(item.id)
+            }, '✕')
+          ])
+        ])
+      ))
+  ]);
+};
+$mount(CartDemo, '#demo-cart');
+```
+
+### Email Inbox
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-inbox" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const InboxDemo = () => {
+  const unread = $(3);
+  const messages = $([
+    { id: 1, from: 'john@example.com', subject: 'Meeting tomorrow', read: false },
+    { id: 2, from: 'jane@example.com', subject: 'Project update', read: false },
+    { id: 3, from: 'bob@example.com', subject: 'Question about design', read: false },
+    { id: 4, from: 'alice@example.com', subject: 'Weekly report', read: true }
+  ]);
+  
+  const markAsRead = (id) => {
+    const msg = messages().find(m => m.id === id);
+    if (!msg.read) {
+      msg.read = true;
+      messages([...messages()]);
+      unread(unread() - 1);
+    }
+  };
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({ class: 'flex justify-between items-center' }, [
+      Indicator({ 
+        badge: () => unread(),
+        badgeClass: 'badge-primary'
+      }, [
+        Span({ class: 'text-lg font-bold' }, 'Inbox')
+      ]),
+      Button({ 
+        class: 'btn btn-sm btn-ghost',
+        onclick: () => {
+          messages().forEach(m => m.read = true);
+          messages([...messages()]);
+          unread(0);
+        }
+      }, 'Mark all read')
+    ]),
+    Div({ class: 'flex flex-col gap-2' }, messages().map(msg =>
+      Div({ 
+        class: `p-3 rounded-lg cursor-pointer transition-all ${msg.read ? 'bg-base-200 opacity-60' : 'bg-primary/10 border-l-4 border-primary'}`,
+        onclick: () => markAsRead(msg.id)
+      }, [
+        Div({ class: 'font-medium' }, msg.from),
+        Div({ class: 'text-sm' }, msg.subject),
+        !msg.read && Span({ class: 'badge badge-xs badge-primary mt-1' }, 'New')
+      ])
+    ))
+  ]);
+};
+$mount(InboxDemo, '#demo-inbox');
+```
+
+### Custom Position
+
+<div class="card bg-base-200 border border-base-300 shadow-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' }, [
+    Div({ class: 'text-center' }, [
+      Div({ class: 'text-xs mb-2' }, 'Top-Left'),
+      Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [
+        Div({ class: 'w-12 h-12 bg-base-300 rounded-lg' })
+      ])
+    ]),
+    Div({ class: 'text-center' }, [
+      Div({ class: 'text-xs mb-2' }, 'Top-Right'),
+      Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [
+        Div({ class: 'w-12 h-12 bg-base-300 rounded-lg' })
+      ])
+    ]),
+    Div({ class: 'text-center' }, [
+      Div({ class: 'text-xs mb-2' }, 'Bottom-Left'),
+      Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [
+        Div({ class: 'w-12 h-12 bg-base-300 rounded-lg' })
+      ])
+    ]),
+    Div({ class: 'text-center' }, [
+      Div({ class: 'text-xs mb-2' }, 'Bottom-Right'),
+      Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [
+        Div({ class: 'w-12 h-12 bg-base-300 rounded-lg' })
+      ])
+    ])
+  ]);
+};
+$mount(PositionsDemo, '#demo-positions');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
+    Indicator({ badge: '3', badgeClass: 'badge-primary badge-sm' }, [
+      Div({ class: 'w-12 h-12 bg-base-300 rounded-lg flex items-center justify-center' }, '📧')
+    ]),
+    Indicator({ badge: '99+', badgeClass: 'badge-secondary badge-md' }, [
+      Div({ class: 'w-12 h-12 bg-base-300 rounded-lg flex items-center justify-center' }, '🔔')
+    ]),
+    Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [
+      Div({ class: 'avatar' }, [
+        Div({ class: 'w-10 h-10 rounded-full bg-primary' })
+      ])
+    ]),
+    Indicator({ badge: '!', badgeClass: 'badge-error badge-sm' }, [
+      Div({ class: 'w-12 h-12 bg-base-300 rounded-lg flex items-center justify-center' }, '⚠️')
+    ])
+  ]);
+};
+$mount(VariantsDemo, '#demo-variants');
+```
+
+<script>
+  (function() {
+    const initIndicatorExamples = () => {
+      
+      // 1. Basic Indicator
+      const basicTarget = document.querySelector('#demo-basic');
+      if (basicTarget && !basicTarget.hasChildNodes()) {
+        const BasicDemo = () => {
+          return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
+            Indicator({ badge: '3', badgeClass: 'badge-primary' }, [
+              Div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '📦')
+            ]),
+            Indicator({ badge: '99+', badgeClass: 'badge-secondary' }, [
+              Div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '🔔')
+            ]),
+            Indicator({ badge: 'New', badgeClass: 'badge-accent' }, [
+              Div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '✨')
+            ])
+          ]);
+        };
+        $mount(BasicDemo, basicTarget);
+      }
+
+      // 2. Online Status Indicator
+      const statusTarget = document.querySelector('#demo-status');
+      if (statusTarget && !statusTarget.hasChildNodes()) {
+        const StatusDemo = () => {
+          return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
+            Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [
+              Div({ class: 'avatar placeholder' }, [
+                Div({ class: 'bg-neutral text-neutral-content rounded-full w-12 h-12 flex items-center justify-center' }, 'JD')
+              ])
+            ]),
+            Indicator({ badge: '●', badgeClass: 'badge-warning badge-xs' }, [
+              Div({ class: 'avatar placeholder' }, [
+                Div({ class: 'bg-neutral text-neutral-content rounded-full w-12 h-12 flex items-center justify-center' }, 'JS')
+              ])
+            ]),
+            Indicator({ badge: '●', badgeClass: 'badge-error badge-xs' }, [
+              Div({ class: 'avatar placeholder' }, [
+                Div({ class: 'bg-neutral text-neutral-content rounded-full w-12 h-12 flex items-center justify-center' }, 'BC')
+              ])
+            ])
+          ]);
+        };
+        $mount(StatusDemo, statusTarget);
+      }
+
+      // 3. Reactive Counter
+      const reactiveTarget = document.querySelector('#demo-reactive');
+      if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
+        const ReactiveDemo = () => {
+          const count = $(0);
+          
+          return Div({ class: 'flex flex-col gap-4 items-center' }, [
+            Indicator({ 
+              badge: () => count() > 0 ? count() : null,
+              badgeClass: 'badge-primary'
+            }, [
+              Button({ 
+                class: 'btn btn-lg btn-primary',
+                onclick: () => count(count() + 1)
+              }, 'Notifications')
+            ]),
+            Div({ class: 'flex gap-2' }, [
+              Button({ 
+                class: 'btn btn-sm',
+                onclick: () => count(Math.max(0, count() - 1))
+              }, 'Decrease'),
+              Button({ 
+                class: 'btn btn-sm btn-ghost',
+                onclick: () => count(0)
+              }, 'Clear')
+            ])
+          ]);
+        };
+        $mount(ReactiveDemo, reactiveTarget);
+      }
+
+      // 4. Shopping Cart
+      const cartTarget = document.querySelector('#demo-cart');
+      if (cartTarget && !cartTarget.hasChildNodes()) {
+        const CartDemo = () => {
+          const cart = $([
+            { id: 1, name: 'Product 1', price: 29 },
+            { id: 2, name: 'Product 2', price: 49 }
+          ]);
+          
+          const addItem = () => {
+            const newId = Math.max(...cart().map(i => i.id), 0) + 1;
+            cart([...cart(), { id: newId, name: `Product ${newId}`, price: Math.floor(Math.random() * 100) + 10 }]);
+            Toast('Item added to cart', 'alert-success', 1500);
+          };
+          
+          const removeItem = (id) => {
+            cart(cart().filter(item => item.id !== id));
+            Toast('Item removed', 'alert-info', 1500);
+          };
+          
+          const total = () => cart().reduce((sum, item) => sum + item.price, 0);
+          
+          return Div({ class: 'flex flex-col gap-4' }, [
+            Div({ class: 'flex justify-between items-center' }, [
+              Indicator({ 
+                badge: () => cart().length,
+                badgeClass: 'badge-primary'
+              }, [
+                Button({ class: 'btn', onclick: addItem }, '🛒 Add to Cart')
+              ]),
+              Span({ class: 'text-lg font-bold' }, () => `Total: $${total()}`)
+            ]),
+            cart().length === 0 
+              ? Div({ class: 'alert alert-soft text-center' }, 'Cart is empty')
+              : Div({ class: 'flex flex-col gap-2' }, cart().map(item =>
+                Div({ class: 'flex justify-between items-center p-2 bg-base-200 rounded-lg' }, [
+                  Span({}, item.name),
+                  Div({ class: 'flex gap-2 items-center' }, [
+                    Span({ class: 'text-sm font-bold' }, `$${item.price}`),
+                    Button({ 
+                      class: 'btn btn-xs btn-ghost btn-circle',
+                      onclick: () => removeItem(item.id)
+                    }, '✕')
+                  ])
+                ])
+              ))
+          ]);
+        };
+        $mount(CartDemo, cartTarget);
+      }
+
+      // 5. Email Inbox
+      const inboxTarget = document.querySelector('#demo-inbox');
+      if (inboxTarget && !inboxTarget.hasChildNodes()) {
+        const InboxDemo = () => {
+          const unread = $(3);
+          const messages = $([
+            { id: 1, from: 'john@example.com', subject: 'Meeting tomorrow', read: false },
+            { id: 2, from: 'jane@example.com', subject: 'Project update', read: false },
+            { id: 3, from: 'bob@example.com', subject: 'Question about design', read: false },
+            { id: 4, from: 'alice@example.com', subject: 'Weekly report', read: true }
+          ]);
+          
+          const markAsRead = (id) => {
+            const msg = messages().find(m => m.id === id);
+            if (!msg.read) {
+              msg.read = true;
+              messages([...messages()]);
+              unread(unread() - 1);
+            }
+          };
+          
+          return Div({ class: 'flex flex-col gap-4' }, [
+            Div({ class: 'flex justify-between items-center' }, [
+              Indicator({ 
+                badge: () => unread(),
+                badgeClass: 'badge-primary'
+              }, [
+                Span({ class: 'text-lg font-bold' }, 'Inbox')
+              ]),
+              Button({ 
+                class: 'btn btn-sm btn-ghost',
+                onclick: () => {
+                  messages().forEach(m => m.read = true);
+                  messages([...messages()]);
+                  unread(0);
+                }
+              }, 'Mark all read')
+            ]),
+            Div({ class: 'flex flex-col gap-2' }, messages().map(msg =>
+              Div({ 
+                class: `p-3 rounded-lg cursor-pointer transition-all ${msg.read ? 'bg-base-200 opacity-60' : 'bg-primary/10 border-l-4 border-primary'}`,
+                onclick: () => markAsRead(msg.id)
+              }, [
+                Div({ class: 'font-medium' }, msg.from),
+                Div({ class: 'text-sm' }, msg.subject),
+                !msg.read && Span({ class: 'badge badge-xs badge-primary mt-1' }, 'New')
+              ])
+            ))
+          ]);
+        };
+        $mount(InboxDemo, inboxTarget);
+      }
+
+      // 6. Custom Position
+      const positionsTarget = document.querySelector('#demo-positions');
+      if (positionsTarget && !positionsTarget.hasChildNodes()) {
+        const PositionsDemo = () => {
+          return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
+            Div({ class: 'text-center' }, [
+              Div({ class: 'text-xs mb-2' }, 'Top-Left'),
+              Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [
+                Div({ class: 'w-12 h-12 bg-base-300 rounded-lg' })
+              ])
+            ]),
+            Div({ class: 'text-center' }, [
+              Div({ class: 'text-xs mb-2' }, 'Top-Right'),
+              Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [
+                Div({ class: 'w-12 h-12 bg-base-300 rounded-lg' })
+              ])
+            ]),
+            Div({ class: 'text-center' }, [
+              Div({ class: 'text-xs mb-2' }, 'Bottom-Left'),
+              Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [
+                Div({ class: 'w-12 h-12 bg-base-300 rounded-lg' })
+              ])
+            ]),
+            Div({ class: 'text-center' }, [
+              Div({ class: 'text-xs mb-2' }, 'Bottom-Right'),
+              Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [
+                Div({ class: 'w-12 h-12 bg-base-300 rounded-lg' })
+              ])
+            ])
+          ]);
+        };
+        $mount(PositionsDemo, positionsTarget);
+      }
+
+      // 7. All Variants
+      const variantsTarget = document.querySelector('#demo-variants');
+      if (variantsTarget && !variantsTarget.hasChildNodes()) {
+        const VariantsDemo = () => {
+          return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
+            Indicator({ badge: '3', badgeClass: 'badge-primary badge-sm' }, [
+              Div({ class: 'w-12 h-12 bg-base-300 rounded-lg flex items-center justify-center' }, '📧')
+            ]),
+            Indicator({ badge: '99+', badgeClass: 'badge-secondary badge-md' }, [
+              Div({ class: 'w-12 h-12 bg-base-300 rounded-lg flex items-center justify-center' }, '🔔')
+            ]),
+            Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [
+              Div({ class: 'avatar' }, [
+                Div({ class: 'w-10 h-10 rounded-full bg-primary' })
+              ])
+            ]),
+            Indicator({ badge: '!', badgeClass: 'badge-error badge-sm' }, [
+              Div({ class: 'w-12 h-12 bg-base-300 rounded-lg flex items-center justify-center' }, '⚠️')
+            ])
+          ]);
+        };
+        $mount(VariantsDemo, variantsTarget);
+      }
+    };
+
+    initIndicatorExamples();
+    
+    if (window.$docsify) {
+      window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
+        hook.doneEach(initIndicatorExamples);
+      });
+    }
+  })();
+</script>

docs/components_old/input.md

@@ -0,0 +1,348 @@
+# Input
+
+Form input component with floating label, icons, password toggle, tooltip, and error states. Fully integrated with DaisyUI and Tailwind.
+
+## Tag
+
+`Input`
+
+## Props
+
+| Prop         | Type                         | Default    | Description                                      |
+| :----------- | :--------------------------- | :--------- | :----------------------------------------------- |
+| `label`      | `string`                     | `-`        | Label text (floating style)                      |
+| `type`       | `string`                     | `'text'`   | Input type (text, password, email, number, date) |
+| `value`      | `string \| Signal<string>`   | `''`       | Input value                                      |
+| `placeholder`| `string`                     | `' '`      | Placeholder text                                 |
+| `icon`       | `string \| VNode \| Signal`  | `-`        | Icon displayed inside input                      |
+| `tip`        | `string`                     | `-`        | Help tooltip text                                |
+| `error`      | `string \| Signal<string>`   | `-`        | Error message to display                         |
+| `disabled`   | `boolean \| Signal<boolean>` | `false`    | Disabled state                                   |
+| `class`      | `string`                     | `''`       | Additional CSS classes (DaisyUI + Tailwind)      |
+| `oninput`    | `function`                   | `-`        | Input event handler                              |
+
+## Live Examples
+
+### Basic Input
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  const name = $('');
+  
+  return Input({
+    label: 'Full Name',
+    placeholder: 'Enter your name',
+    value: name,
+    oninput: (e) => name(e.target.value)
+  });
+};
+$mount(BasicDemo, '#demo-basic');
+```
+
+### With Icon
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-icon" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const IconDemo = () => {
+  const email = $('');
+  
+  return Input({
+    label: 'Email',
+    type: 'email',
+    icon: Icons.iconMail,
+    value: email,
+    oninput: (e) => email(e.target.value)
+  });
+};
+$mount(IconDemo, '#demo-icon');
+```
+
+### Password with Toggle
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-password" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const PasswordDemo = () => {
+  const password = $('');
+  
+  return Input({
+    label: 'Password',
+    type: 'password',
+    value: password,
+    oninput: (e) => password(e.target.value)
+  });
+};
+$mount(PasswordDemo, '#demo-password');
+```
+
+### With Tooltip
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-tooltip" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const TooltipDemo = () => {
+  const username = $('');
+  
+  return Input({
+    label: 'Username',
+    tip: 'Must be at least 3 characters',
+    value: username,
+    oninput: (e) => username(e.target.value)
+  });
+};
+$mount(TooltipDemo, '#demo-tooltip');
+```
+
+### Error State
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-error" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const ErrorDemo = () => {
+  const email = $('');
+  const isValid = $(true);
+  
+  const validate = (value) => {
+    const valid = value.includes('@') && value.includes('.');
+    isValid(valid);
+    email(value);
+  };
+  
+  return Input({
+    label: 'Email',
+    type: 'email',
+    value: email,
+    error: () => !isValid() && email() ? 'Invalid email address' : '',
+    oninput: (e) => validate(e.target.value)
+  });
+};
+$mount(ErrorDemo, '#demo-error');
+```
+
+### Disabled State
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-disabled" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const DisabledDemo = () => {
+  return Input({
+    label: 'Username',
+    value: 'john.doe',
+    disabled: true
+  });
+};
+$mount(DisabledDemo, '#demo-disabled');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  const text = $('');
+  const number = $(0);
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Input({
+      label: 'Text Input',
+      placeholder: 'Type something...',
+      value: text,
+      oninput: (e) => text(e.target.value)
+    }),
+    Input({
+      label: 'Number Input',
+      type: 'number',
+      value: number,
+      oninput: (e) => number(parseInt(e.target.value) || 0)
+    }),
+    Input({
+      label: 'Date Input',
+      type: 'date',
+      value: $('2024-01-01')
+    })
+  ]);
+};
+$mount(VariantsDemo, '#demo-variants');
+```
+
+<script>
+  (function() {
+    const initInputExamples = () => {
+      
+      // 1. Basic Input
+      const basicTarget = document.querySelector('#demo-basic');
+      if (basicTarget && !basicTarget.hasChildNodes()) {
+        const BasicDemo = () => {
+          const name = $('');
+          return Input({
+            label: 'Full Name',
+            placeholder: 'Enter your name',
+            value: name,
+            oninput: (e) => name(e.target.value)
+          });
+        };
+        $mount(BasicDemo, basicTarget);
+      }
+
+      // 2. With Icon
+      const iconTarget = document.querySelector('#demo-icon');
+      if (iconTarget && !iconTarget.hasChildNodes()) {
+        const IconDemo = () => {
+          const email = $('');
+          return Input({
+            label: 'Email',
+            type: 'email',
+            icon: Icons.iconMail,
+            value: email,
+            oninput: (e) => email(e.target.value)
+          });
+        };
+        $mount(IconDemo, iconTarget);
+      }
+
+      // 3. Password with Toggle
+      const passwordTarget = document.querySelector('#demo-password');
+      if (passwordTarget && !passwordTarget.hasChildNodes()) {
+        const PasswordDemo = () => {
+          const password = $('');
+          return Input({
+            label: 'Password',
+            type: 'password',
+            value: password,
+            oninput: (e) => password(e.target.value)
+          });
+        };
+        $mount(PasswordDemo, passwordTarget);
+      }
+
+      // 4. With Tooltip
+      const tooltipTarget = document.querySelector('#demo-tooltip');
+      if (tooltipTarget && !tooltipTarget.hasChildNodes()) {
+        const TooltipDemo = () => {
+          const username = $('');
+          return Input({
+            label: 'Username',
+            tip: 'Must be at least 3 characters',
+            value: username,
+            oninput: (e) => username(e.target.value)
+          });
+        };
+        $mount(TooltipDemo, tooltipTarget);
+      }
+
+      // 5. Error State
+      const errorTarget = document.querySelector('#demo-error');
+      if (errorTarget && !errorTarget.hasChildNodes()) {
+        const ErrorDemo = () => {
+          const email = $('');
+          const isValid = $(true);
+          
+          const validate = (value) => {
+            const valid = value.includes('@') && value.includes('.');
+            isValid(valid);
+            email(value);
+          };
+          
+          return Input({
+            label: 'Email',
+            type: 'email',
+            value: email,
+            error: () => !isValid() && email() ? 'Invalid email address' : '',
+            oninput: (e) => validate(e.target.value)
+          });
+        };
+        $mount(ErrorDemo, errorTarget);
+      }
+
+      // 6. Disabled State
+      const disabledTarget = document.querySelector('#demo-disabled');
+      if (disabledTarget && !disabledTarget.hasChildNodes()) {
+        const DisabledDemo = () => {
+          return Input({
+            label: 'Username',
+            value: 'john.doe',
+            disabled: true
+          });
+        };
+        $mount(DisabledDemo, disabledTarget);
+      }
+
+      // 7. All Variants
+      const variantsTarget = document.querySelector('#demo-variants');
+      if (variantsTarget && !variantsTarget.hasChildNodes()) {
+        const VariantsDemo = () => {
+          const text = $('');
+          const number = $(0);
+          
+          return Div({ class: 'flex flex-col gap-4' }, [
+            Input({
+              label: 'Text Input',
+              placeholder: 'Type something...',
+              value: text,
+              oninput: (e) => text(e.target.value)
+            }),
+            Input({
+              label: 'Number Input',
+              type: 'number',
+              value: number,
+              oninput: (e) => number(parseInt(e.target.value) || 0)
+            }),
+            Input({
+              label: 'Date Input',
+              type: 'date',
+              value: $('2024-01-01')
+            })
+          ]);
+        };
+        $mount(VariantsDemo, variantsTarget);
+      }
+    };
+
+    initInputExamples();
+    
+    if (window.$docsify) {
+      window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
+        hook.doneEach(initInputExamples);
+      });
+    }
+  })();
+</script>

docs/components_old/list.md

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

docs/components_old/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_old/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_old/modal.md

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

docs/components_old/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_old/radio.md

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

docs/components_old/rating.md

@@ -0,0 +1,536 @@
+# Rating
+
+Star rating component with customizable count, icons, and read-only mode.
+
+## Tag
+
+`Rating`
+
+## Props
+
+| Prop         | Type                         | Default          | Description                                      |
+| :----------- | :--------------------------- | :--------------- | :----------------------------------------------- |
+| `value`      | `number \| Signal<number>`   | `0`              | Current rating value                             |
+| `count`      | `number \| Signal<number>`   | `5`              | Number of stars/items                            |
+| `mask`       | `string`                     | `'mask-star'`    | Mask shape (mask-star, mask-star-2, mask-heart)  |
+| `readonly`   | `boolean \| Signal<boolean>` | `false`          | Disable interaction                              |
+| `class`      | `string`                     | `''`             | Additional CSS classes (DaisyUI + Tailwind)      |
+
+## Live Examples
+
+### Basic Rating
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  const rating = $(3);
+  
+  return Div({ class: 'flex flex-col gap-2 items-center' }, [
+    Rating({
+      value: rating,
+      count: 5,
+      onchange: (value) => rating(value)
+    }),
+    Div({ class: 'text-sm opacity-70' }, () => `Rating: ${rating()} / 5`)
+  ]);
+};
+$mount(BasicDemo, '#demo-basic');
+```
+
+### Heart Rating
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-heart" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const HeartDemo = () => {
+  const rating = $(4);
+  
+  return Div({ class: 'flex flex-col gap-2 items-center' }, [
+    Rating({
+      value: rating,
+      count: 5,
+      mask: 'mask-heart',
+      onchange: (value) => rating(value)
+    }),
+    Div({ class: 'text-sm opacity-70' }, () => `${rating()} hearts`)
+  ]);
+};
+$mount(HeartDemo, '#demo-heart');
+```
+
+### Star with Outline
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-star2" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const Star2Demo = () => {
+  const rating = $(2);
+  
+  return Div({ class: 'flex flex-col gap-2 items-center' }, [
+    Rating({
+      value: rating,
+      count: 5,
+      mask: 'mask-star-2',
+      onchange: (value) => rating(value)
+    }),
+    Div({ class: 'text-sm opacity-70' }, () => `${rating()} stars`)
+  ]);
+};
+$mount(Star2Demo, '#demo-star2');
+```
+
+### Read-only Rating
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-readonly" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const ReadonlyDemo = () => {
+  const rating = $(4.5);
+  
+  return Div({ class: 'flex flex-col gap-2 items-center' }, [
+    Rating({
+      value: rating,
+      count: 5,
+      readonly: true
+    }),
+    Div({ class: 'text-sm opacity-70' }, 'Average rating: 4.5/5 (read-only)')
+  ]);
+};
+$mount(ReadonlyDemo, '#demo-readonly');
+```
+
+### Custom Count
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-custom" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const CustomDemo = () => {
+  const rating = $(3);
+  const count = $(10);
+  
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Div({ class: 'flex items-center gap-4' }, [
+      Span({ class: 'text-sm' }, 'Number of stars:'),
+      Input({
+        type: 'number',
+        value: count,
+        class: 'input input-sm w-24',
+        oninput: (e) => count(parseInt(e.target.value) || 1)
+      })
+    ]),
+    Rating({
+      value: rating,
+      count: count,
+      onchange: (value) => rating(value)
+    }),
+    Div({ class: 'text-sm opacity-70' }, () => `Rating: ${rating()} / ${count()}`)
+  ]);
+};
+$mount(CustomDemo, '#demo-custom');
+```
+
+### Product Review
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-review" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const ReviewDemo = () => {
+  const quality = $(4);
+  const price = $(3);
+  const support = $(5);
+  
+  const average = () => Math.round(((quality() + price() + support()) / 3) * 10) / 10;
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({ class: 'text-lg font-bold' }, 'Product Review'),
+    Div({ class: 'flex flex-col gap-2' }, [
+      Div({ class: 'flex justify-between items-center' }, [
+        Span({ class: 'text-sm w-24' }, 'Quality:'),
+        Rating({
+          value: quality,
+          count: 5,
+          size: 'sm',
+          onchange: (v) => quality(v)
+        })
+      ]),
+      Div({ class: 'flex justify-between items-center' }, [
+        Span({ class: 'text-sm w-24' }, 'Price:'),
+        Rating({
+          value: price,
+          count: 5,
+          size: 'sm',
+          onchange: (v) => price(v)
+        })
+      ]),
+      Div({ class: 'flex justify-between items-center' }, [
+        Span({ class: 'text-sm w-24' }, 'Support:'),
+        Rating({
+          value: support,
+          count: 5,
+          size: 'sm',
+          onchange: (v) => support(v)
+        })
+      ])
+    ]),
+    Div({ class: 'divider my-1' }),
+    Div({ class: 'flex justify-between items-center' }, [
+      Span({ class: 'font-bold' }, 'Overall:'),
+      Div({ class: 'text-2xl font-bold text-primary' }, () => average())
+    ])
+  ]);
+};
+$mount(ReviewDemo, '#demo-review');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-6"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  return Div({ class: 'flex flex-col gap-6' }, [
+    Div({ class: 'text-center' }, [
+      Div({ class: 'text-sm mb-2' }, 'Mask Star'),
+      Rating({ value: $(3), count: 5, mask: 'mask-star' })
+    ]),
+    Div({ class: 'text-center' }, [
+      Div({ class: 'text-sm mb-2' }, 'Mask Star 2 (yellow)' ),
+      Rating({ value: $(4), count: 5, mask: 'mask-star-2', class: 'rating-warning' })
+    ]),
+    Div({ class: 'text-center' }, [
+      Div({ class: 'text-sm mb-2' }, 'Mask Heart'),
+      Rating({ value: $(5), count: 5, mask: 'mask-heart', class: 'rating-error' })
+    ]),
+    Div({ class: 'text-center' }, [
+      Div({ class: 'text-sm mb-2' }, 'Half Stars (read-only)'),
+      Rating({ value: $(3.5), count: 5, readonly: true })
+    ])
+  ]);
+};
+$mount(VariantsDemo, '#demo-variants');
+```
+
+### Interactive Feedback
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-feedback" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const FeedbackDemo = () => {
+  const rating = $(0);
+  const feedback = $(false);
+  
+  const messages = {
+    1: 'Very disappointed 😞',
+    2: 'Could be better 😕',
+    3: 'Good 👍',
+    4: 'Very good 😊',
+    5: 'Excellent! 🎉'
+  };
+  
+  return Div({ class: 'flex flex-col gap-4 items-center' }, [
+    Div({ class: 'text-center' }, [
+      Div({ class: 'text-sm mb-2' }, 'How was your experience?'),
+      Rating({
+        value: rating,
+        count: 5,
+        onchange: (value) => {
+          rating(value);
+          feedback(true);
+          if (value >= 4) {
+            Toast('Thank you for your positive feedback!', 'alert-success', 2000);
+          } else if (value <= 2) {
+            Toast('We appreciate your feedback and will improve!', 'alert-warning', 2000);
+          } else {
+            Toast('Thanks for your rating!', 'alert-info', 2000);
+          }
+        }
+      })
+    ]),
+    () => rating() > 0 
+      ? Div({ class: 'alert alert-soft text-center' }, [
+          messages[rating()] || `Rating: ${rating()} stars`
+        ])
+      : null
+  ]);
+};
+$mount(FeedbackDemo, '#demo-feedback');
+```
+
+<script>
+  (function() {
+    const initRatingExamples = () => {
+      
+      // 1. Basic Rating
+      const basicTarget = document.querySelector('#demo-basic');
+      if (basicTarget && !basicTarget.hasChildNodes()) {
+        const BasicDemo = () => {
+          const rating = $(3);
+          
+          return Div({ class: 'flex flex-col gap-2 items-center' }, [
+            Rating({
+              value: rating,
+              count: 5,
+              onchange: (value) => rating(value)
+            }),
+            Div({ class: 'text-sm opacity-70' }, () => `Rating: ${rating()} / 5`)
+          ]);
+        };
+        $mount(BasicDemo, basicTarget);
+      }
+
+      // 2. Heart Rating
+      const heartTarget = document.querySelector('#demo-heart');
+      if (heartTarget && !heartTarget.hasChildNodes()) {
+        const HeartDemo = () => {
+          const rating = $(4);
+          
+          return Div({ class: 'flex flex-col gap-2 items-center' }, [
+            Rating({
+              value: rating,
+              count: 5,
+              mask: 'mask-heart',
+              onchange: (value) => rating(value)
+            }),
+            Div({ class: 'text-sm opacity-70' }, () => `${rating()} hearts`)
+          ]);
+        };
+        $mount(HeartDemo, heartTarget);
+      }
+
+      // 3. Star with Outline
+      const star2Target = document.querySelector('#demo-star2');
+      if (star2Target && !star2Target.hasChildNodes()) {
+        const Star2Demo = () => {
+          const rating = $(2);
+          
+          return Div({ class: 'flex flex-col gap-2 items-center' }, [
+            Rating({
+              value: rating,
+              count: 5,
+              mask: 'mask-star-2',
+              onchange: (value) => rating(value)
+            }),
+            Div({ class: 'text-sm opacity-70' }, () => `${rating()} stars`)
+          ]);
+        };
+        $mount(Star2Demo, star2Target);
+      }
+
+      // 4. Read-only Rating
+      const readonlyTarget = document.querySelector('#demo-readonly');
+      if (readonlyTarget && !readonlyTarget.hasChildNodes()) {
+        const ReadonlyDemo = () => {
+          const rating = $(4.5);
+          
+          return Div({ class: 'flex flex-col gap-2 items-center' }, [
+            Rating({
+              value: rating,
+              count: 5,
+              readonly: true
+            }),
+            Div({ class: 'text-sm opacity-70' }, 'Average rating: 4.5/5 (read-only)')
+          ]);
+        };
+        $mount(ReadonlyDemo, readonlyTarget);
+      }
+
+      // 5. Custom Count
+      const customTarget = document.querySelector('#demo-custom');
+      if (customTarget && !customTarget.hasChildNodes()) {
+        const CustomDemo = () => {
+          const rating = $(3);
+          const count = $(10);
+          
+          return Div({ class: 'flex flex-col gap-4 w-full' }, [
+            Div({ class: 'flex items-center gap-4' }, [
+              Span({ class: 'text-sm' }, 'Number of stars:'),
+              Input({
+                type: 'number',
+                value: count,
+                class: 'input input-sm w-24',
+                oninput: (e) => count(parseInt(e.target.value) || 1)
+              })
+            ]),
+            Rating({
+              value: rating,
+              count: count,
+              onchange: (value) => rating(value)
+            }),
+            Div({ class: 'text-sm opacity-70' }, () => `Rating: ${rating()} / ${count()}`)
+          ]);
+        };
+        $mount(CustomDemo, customTarget);
+      }
+
+      // 6. Product Review
+      const reviewTarget = document.querySelector('#demo-review');
+      if (reviewTarget && !reviewTarget.hasChildNodes()) {
+        const ReviewDemo = () => {
+          const quality = $(4);
+          const price = $(3);
+          const support = $(5);
+          
+          const average = () => Math.round(((quality() + price() + support()) / 3) * 10) / 10;
+          
+          return Div({ class: 'flex flex-col gap-4' }, [
+            Div({ class: 'text-lg font-bold' }, 'Product Review'),
+            Div({ class: 'flex flex-col gap-2' }, [
+              Div({ class: 'flex justify-between items-center' }, [
+                Span({ class: 'text-sm w-24' }, 'Quality:'),
+                Rating({
+                  value: quality,
+                  count: 5,
+                  size: 'sm',
+                  onchange: (v) => quality(v)
+                })
+              ]),
+              Div({ class: 'flex justify-between items-center' }, [
+                Span({ class: 'text-sm w-24' }, 'Price:'),
+                Rating({
+                  value: price,
+                  count: 5,
+                  size: 'sm',
+                  onchange: (v) => price(v)
+                })
+              ]),
+              Div({ class: 'flex justify-between items-center' }, [
+                Span({ class: 'text-sm w-24' }, 'Support:'),
+                Rating({
+                  value: support,
+                  count: 5,
+                  size: 'sm',
+                  onchange: (v) => support(v)
+                })
+              ])
+            ]),
+            Div({ class: 'divider my-1' }),
+            Div({ class: 'flex justify-between items-center' }, [
+              Span({ class: 'font-bold' }, 'Overall:'),
+              Div({ class: 'text-2xl font-bold text-primary' }, () => average())
+            ])
+          ]);
+        };
+        $mount(ReviewDemo, reviewTarget);
+      }
+
+      // 7. 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 mb-2' }, 'Mask Star'),
+              Rating({ value: $(3), count: 5, mask: 'mask-star' })
+            ]),
+            Div({ class: 'text-center' }, [
+              Div({ class: 'text-sm mb-2' }, 'Mask Star 2 (yellow)' ),
+              Rating({ value: $(4), count: 5, mask: 'mask-star-2', class: 'rating-warning' })
+            ]),
+            Div({ class: 'text-center' }, [
+              Div({ class: 'text-sm mb-2' }, 'Mask Heart'),
+              Rating({ value: $(5), count: 5, mask: 'mask-heart', class: 'rating-error' })
+            ]),
+            Div({ class: 'text-center' }, [
+              Div({ class: 'text-sm mb-2' }, 'Half Stars (read-only)'),
+              Rating({ value: $(3.5), count: 5, readonly: true })
+            ])
+          ]);
+        };
+        $mount(VariantsDemo, variantsTarget);
+      }
+
+      // 8. Interactive Feedback
+      const feedbackTarget = document.querySelector('#demo-feedback');
+      if (feedbackTarget && !feedbackTarget.hasChildNodes()) {
+        const FeedbackDemo = () => {
+          const rating = $(0);
+          const feedback = $(false);
+          
+          const messages = {
+            1: 'Very disappointed 😞',
+            2: 'Could be better 😕',
+            3: 'Good 👍',
+            4: 'Very good 😊',
+            5: 'Excellent! 🎉'
+          };
+          
+          return Div({ class: 'flex flex-col gap-4 items-center' }, [
+            Div({ class: 'text-center' }, [
+              Div({ class: 'text-sm mb-2' }, 'How was your experience?'),
+              Rating({
+                value: rating,
+                count: 5,
+                onchange: (value) => {
+                  rating(value);
+                  feedback(true);
+                  if (value >= 4) {
+                    Toast('Thank you for your positive feedback!', 'alert-success', 2000);
+                  } else if (value <= 2) {
+                    Toast('We appreciate your feedback and will improve!', 'alert-warning', 2000);
+                  } else {
+                    Toast('Thanks for your rating!', 'alert-info', 2000);
+                  }
+                }
+              })
+            ]),
+            () => rating() > 0 
+              ? Div({ class: 'alert alert-soft text-center' }, [
+                  messages[rating()] || `Rating: ${rating()} stars`
+                ])
+              : null
+          ]);
+        };
+        $mount(FeedbackDemo, feedbackTarget);
+      }
+    };
+
+    initRatingExamples();
+    
+    if (window.$docsify) {
+      window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
+        hook.doneEach(initRatingExamples);
+      });
+    }
+  })();
+</script>

docs/components_old/select.md

@@ -0,0 +1,366 @@
+# Select
+
+Dropdown select component with full DaisyUI styling, reactive options, and form integration.
+
+## Tag
+
+`Select`
+
+## Props
+
+| Prop         | Type                                    | Default             | Description                                      |
+| :----------- | :-------------------------------------- | :------------------ | :----------------------------------------------- |
+| `label`      | `string`                                | `-`                 | Label text above select                          |
+| `options`    | `Array<{value: string, label: string}>` | `[]`                | Array of options with value and label            |
+| `value`      | `string \| Signal<string>`              | `''`                | Selected value                                   |
+| `class`      | `string`                                | `''`                | Additional CSS classes (DaisyUI + Tailwind)      |
+| `disabled`   | `boolean \| Signal<boolean>`            | `false`             | Disabled state                                   |
+| `onchange`   | `function`                              | `-`                 | Change event handler                             |
+
+## Live Examples
+
+### Basic Select
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  const selected = $('apple');
+  
+  return Select({
+    label: 'Choose a fruit',
+    options: [
+      { value: 'apple', label: '🍎 Apple' },
+      { value: 'banana', label: '🍌 Banana' },
+      { value: 'orange', label: '🍊 Orange' },
+      { value: 'grape', label: '🍇 Grape' }
+    ],
+    value: selected,
+    onchange: (e) => selected(e.target.value)
+  });
+};
+$mount(BasicDemo, '#demo-basic');
+```
+
+### With Reactive Display
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const ReactiveDemo = () => {
+  const selected = $('small');
+  
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Select({
+      label: 'Select size',
+      options: [
+        { value: 'small', label: 'Small' },
+        { value: 'medium', label: 'Medium' },
+        { value: 'large', label: 'Large' }
+      ],
+      value: selected,
+      onchange: (e) => selected(e.target.value)
+    }),
+    Div({ class: 'alert alert-info' }, [
+      `You selected: ${selected()}`
+    ])
+  ]);
+};
+$mount(ReactiveDemo, '#demo-reactive');
+```
+
+### Disabled State
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-disabled" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const DisabledDemo = () => {
+  return Select({
+    label: 'Country (disabled)',
+    options: [
+      { value: 'mx', label: 'Mexico' },
+      { value: 'us', label: 'United States' },
+      { value: 'ca', label: 'Canada' }
+    ],
+    value: 'mx',
+    disabled: true
+  });
+};
+$mount(DisabledDemo, '#demo-disabled');
+```
+
+### Dynamic Options
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-dynamic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const DynamicDemo = () => {
+  const category = $('fruits');
+  
+  const options = {
+    fruits: [
+      { value: 'apple', label: '🍎 Apple' },
+      { value: 'banana', label: '🍌 Banana' }
+    ],
+    vegetables: [
+      { value: 'carrot', label: '🥕 Carrot' },
+      { value: 'broccoli', label: '🥦 Broccoli' }
+    ]
+  };
+  
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Select({
+      label: 'Category',
+      options: [
+        { value: 'fruits', label: 'Fruits' },
+        { value: 'vegetables', label: 'Vegetables' }
+      ],
+      value: category,
+      onchange: (e) => category(e.target.value)
+    }),
+    Select({
+      label: 'Item',
+      options: () => options[category()] || [],
+      value: $(''),
+      onchange: (e) => console.log('Selected:', e.target.value)
+    })
+  ]);
+};
+$mount(DynamicDemo, '#demo-dynamic');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  const primary = $('option1');
+  const secondary = $('option2');
+  const accent = $('');
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Select({
+      label: 'Primary Select',
+      class: 'select-primary',
+      options: [
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2' },
+        { value: 'option3', label: 'Option 3' }
+      ],
+      value: primary,
+      onchange: (e) => primary(e.target.value)
+    }),
+    Select({
+      label: 'Secondary Select',
+      class: 'select-secondary',
+      options: [
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2' }
+      ],
+      value: secondary,
+      onchange: (e) => secondary(e.target.value)
+    }),
+    Select({
+      label: 'Ghost Select',
+      class: 'select-ghost',
+      options: [
+        { value: '', label: 'Select an option' },
+        { value: 'opt1', label: 'Option 1' },
+        { value: 'opt2', label: 'Option 2' }
+      ],
+      value: accent,
+      onchange: (e) => accent(e.target.value)
+    })
+  ]);
+};
+$mount(VariantsDemo, '#demo-variants');
+```
+
+<script>
+  (function() {
+    const initSelectExamples = () => {
+      
+      // 1. Basic Select
+      const basicTarget = document.querySelector('#demo-basic');
+      if (basicTarget && !basicTarget.hasChildNodes()) {
+        const BasicDemo = () => {
+          const selected = $('apple');
+          
+          return Select({
+            label: 'Choose a fruit',
+            options: [
+              { value: 'apple', label: '🍎 Apple' },
+              { value: 'banana', label: '🍌 Banana' },
+              { value: 'orange', label: '🍊 Orange' },
+              { value: 'grape', label: '🍇 Grape' }
+            ],
+            value: selected,
+            onchange: (e) => selected(e.target.value)
+          });
+        };
+        $mount(BasicDemo, basicTarget);
+      }
+
+      // 2. Reactive Display
+      const reactiveTarget = document.querySelector('#demo-reactive');
+      if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
+        const ReactiveDemo = () => {
+          const selected = $('small');
+          
+          return Div({ class: 'flex flex-col gap-4 w-full' }, [
+            Select({
+              label: 'Select size',
+              options: [
+                { value: 'small', label: 'Small' },
+                { value: 'medium', label: 'Medium' },
+                { value: 'large', label: 'Large' }
+              ],
+              value: selected,
+              onchange: (e) => selected(e.target.value)
+            }),
+            Div({ class: 'alert alert-info' }, [
+              `You selected: ${selected()}`
+            ])
+          ]);
+        };
+        $mount(ReactiveDemo, reactiveTarget);
+      }
+
+      // 3. Disabled State
+      const disabledTarget = document.querySelector('#demo-disabled');
+      if (disabledTarget && !disabledTarget.hasChildNodes()) {
+        const DisabledDemo = () => {
+          return Select({
+            label: 'Country (disabled)',
+            options: [
+              { value: 'mx', label: 'Mexico' },
+              { value: 'us', label: 'United States' },
+              { value: 'ca', label: 'Canada' }
+            ],
+            value: 'mx',
+            disabled: true
+          });
+        };
+        $mount(DisabledDemo, disabledTarget);
+      }
+
+      // 4. Dynamic Options
+      const dynamicTarget = document.querySelector('#demo-dynamic');
+      if (dynamicTarget && !dynamicTarget.hasChildNodes()) {
+        const DynamicDemo = () => {
+          const category = $('fruits');
+          
+          const options = {
+            fruits: [
+              { value: 'apple', label: '🍎 Apple' },
+              { value: 'banana', label: '🍌 Banana' }
+            ],
+            vegetables: [
+              { value: 'carrot', label: '🥕 Carrot' },
+              { value: 'broccoli', label: '🥦 Broccoli' }
+            ]
+          };
+          
+          return Div({ class: 'flex flex-col gap-4 w-full' }, [
+            Select({
+              label: 'Category',
+              options: [
+                { value: 'fruits', label: 'Fruits' },
+                { value: 'vegetables', label: 'Vegetables' }
+              ],
+              value: category,
+              onchange: (e) => category(e.target.value)
+            }),
+            Select({
+              label: 'Item',
+              options: () => options[category()] || [],
+              value: $(''),
+              onchange: (e) => console.log('Selected:', e.target.value)
+            })
+          ]);
+        };
+        $mount(DynamicDemo, dynamicTarget);
+      }
+
+      // 5. All Variants
+      const variantsTarget = document.querySelector('#demo-variants');
+      if (variantsTarget && !variantsTarget.hasChildNodes()) {
+        const VariantsDemo = () => {
+          const primary = $('option1');
+          const secondary = $('option2');
+          const accent = $('');
+          
+          return Div({ class: 'flex flex-col gap-4' }, [
+            Select({
+              label: 'Primary Select',
+              class: 'select-primary',
+              options: [
+                { value: 'option1', label: 'Option 1' },
+                { value: 'option2', label: 'Option 2' },
+                { value: 'option3', label: 'Option 3' }
+              ],
+              value: primary,
+              onchange: (e) => primary(e.target.value)
+            }),
+            Select({
+              label: 'Secondary Select',
+              class: 'select-secondary',
+              options: [
+                { value: 'option1', label: 'Option 1' },
+                { value: 'option2', label: 'Option 2' }
+              ],
+              value: secondary,
+              onchange: (e) => secondary(e.target.value)
+            }),
+            Select({
+              label: 'Ghost Select',
+              class: 'select-ghost',
+              options: [
+                { value: '', label: 'Select an option' },
+                { value: 'opt1', label: 'Option 1' },
+                { value: 'opt2', label: 'Option 2' }
+              ],
+              value: accent,
+              onchange: (e) => accent(e.target.value)
+            })
+          ]);
+        };
+        $mount(VariantsDemo, variantsTarget);
+      }
+    };
+
+    initSelectExamples();
+    
+    if (window.$docsify) {
+      window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
+        hook.doneEach(initSelectExamples);
+      });
+    }
+  })();
+</script>

docs/components_old/stack.md

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

docs/components_old/stat.md

@@ -0,0 +1,644 @@
+# Stat
+
+Statistic card component for displaying metrics, counts, and key performance indicators with optional icons and descriptions.
+
+## Tag
+
+`Stat`
+
+## Props
+
+| Prop         | Type                         | Default     | Description                                      |
+| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
+| `label`      | `string \| VNode \| Signal`  | `-`         | Statistic label/title                            |
+| `value`      | `string \| number \| Signal` | `-`         | Main statistic value                             |
+| `desc`       | `string \| VNode \| Signal`  | `-`         | Description or trend text                        |
+| `icon`       | `string \| VNode \| Signal`  | `-`         | Icon displayed in the figure area                |
+| `class`      | `string`                     | `''`        | Additional CSS classes (DaisyUI + Tailwind)      |
+
+## Live Examples
+
+### Basic Stat
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 grid grid-cols-1 md:grid-cols-3 gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [
+    Stat({
+      label: 'Total Users',
+      value: '2,345',
+      desc: '↗︎ 120 new users this month'
+    }),
+    Stat({
+      label: 'Revenue',
+      value: '$45,678',
+      desc: '↘︎ 5% decrease from last month'
+    }),
+    Stat({
+      label: 'Conversion Rate',
+      value: '3.45%',
+      desc: '↗︎ 0.5% increase'
+    })
+  ]);
+};
+$mount(BasicDemo, '#demo-basic');
+```
+
+### With Icons
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-icons" class="bg-base-100 p-6 rounded-xl border border-base-300 grid grid-cols-1 md:grid-cols-3 gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const IconsDemo = () => {
+  return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [
+    Stat({
+      label: 'Active Users',
+      value: '1,234',
+      desc: 'Currently online',
+      icon: Icons.iconShow
+    }),
+    Stat({
+      label: 'New Orders',
+      value: '89',
+      desc: 'Today',
+      icon: Icons.iconSuccess
+    }),
+    Stat({
+      label: 'Pending Tasks',
+      value: '23',
+      desc: 'Need attention',
+      icon: Icons.iconWarning
+    })
+  ]);
+};
+$mount(IconsDemo, '#demo-icons');
+```
+
+### Reactive Values
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const ReactiveDemo = () => {
+  const count = $(0);
+  
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Div({ class: 'grid grid-cols-1 md:grid-cols-2 gap-4' }, [
+      Stat({
+        label: 'Counter',
+        value: () => count(),
+        desc: 'Click the button to increase',
+        icon: Icons.iconInfo
+      }),
+      Stat({
+        label: 'Squared',
+        value: () => Math.pow(count(), 2),
+        desc: 'Square of counter',
+        icon: Icons.iconSuccess
+      })
+    ]),
+    Div({ class: 'flex gap-2 justify-center' }, [
+      Button({ 
+        class: 'btn btn-primary',
+        onclick: () => count(count() + 1)
+      }, 'Increment'),
+      Button({ 
+        class: 'btn btn-ghost',
+        onclick: () => count(0)
+      }, 'Reset')
+    ])
+  ]);
+};
+$mount(ReactiveDemo, '#demo-reactive');
+```
+
+### With Trend Indicators
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-trends" class="bg-base-100 p-6 rounded-xl border border-base-300 grid grid-cols-1 md:grid-cols-3 gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const TrendsDemo = () => {
+  return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [
+    Stat({
+      label: 'Weekly Sales',
+      value: '$12,345',
+      desc: Div({ class: 'text-success' }, '↗︎ 15% increase'),
+      icon: Icons.iconSuccess
+    }),
+    Stat({
+      label: 'Bounce Rate',
+      value: '42%',
+      desc: Div({ class: 'text-error' }, '↘︎ 3% from last week'),
+      icon: Icons.iconError
+    }),
+    Stat({
+      label: 'Avg. Session',
+      value: '4m 32s',
+      desc: Div({ class: 'text-warning' }, '↗︎ 12 seconds'),
+      icon: Icons.iconWarning
+    })
+  ]);
+};
+$mount(TrendsDemo, '#demo-trends');
+```
+
+### Multiple Stats in Row
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-multiple" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const MultipleDemo = () => {
+  return Div({ class: 'grid grid-cols-1 md:grid-cols-4 gap-4' }, [
+    Stat({
+      label: 'Posts',
+      value: '1,234',
+      desc: 'Total content',
+      icon: Span({ class: 'text-2xl' }, '📝')
+    }),
+    Stat({
+      label: 'Comments',
+      value: '8,901',
+      desc: 'Engagement',
+      icon: Span({ class: 'text-2xl' }, '💬')
+    }),
+    Stat({
+      label: 'Likes',
+      value: '12,345',
+      desc: 'Reactions',
+      icon: Span({ class: 'text-2xl' }, '❤️')
+    }),
+    Stat({
+      label: 'Shares',
+      value: '456',
+      desc: 'Viral reach',
+      icon: Span({ class: 'text-2xl' }, '🔄')
+    })
+  ]);
+};
+$mount(MultipleDemo, '#demo-multiple');
+```
+
+### Dashboard Example
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-dashboard" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const DashboardDemo = () => {
+  const stats = $({
+    users: 1245,
+    revenue: 89342,
+    orders: 342,
+    satisfaction: 94
+  });
+  
+  const updateStats = () => {
+    stats({
+      users: stats().users + Math.floor(Math.random() * 50),
+      revenue: stats().revenue + Math.floor(Math.random() * 1000),
+      orders: stats().orders + Math.floor(Math.random() * 20),
+      satisfaction: Math.min(100, stats().satisfaction + Math.floor(Math.random() * 5) - 2)
+    });
+  };
+  
+  return Div({ class: 'flex flex-col gap-6' }, [
+    Div({ class: 'grid grid-cols-1 md:grid-cols-4 gap-4' }, [
+      Stat({
+        label: 'Total Users',
+        value: () => stats().users.toLocaleString(),
+        desc: 'Registered users',
+        icon: Icons.iconShow
+      }),
+      Stat({
+        label: 'Revenue',
+        value: () => `$${stats().revenue.toLocaleString()}`,
+        desc: 'This month',
+        icon: Icons.iconSuccess
+      }),
+      Stat({
+        label: 'Orders',
+        value: () => stats().orders.toLocaleString(),
+        desc: 'Completed',
+        icon: Icons.iconInfo
+      }),
+      Stat({
+        label: 'Satisfaction',
+        value: () => `${stats().satisfaction}%`,
+        desc: stats().satisfaction > 90 ? 'Excellent!' : 'Good',
+        icon: Icons.iconWarning
+      })
+    ]),
+    Div({ class: 'flex justify-center' }, [
+      Button({ 
+        class: 'btn btn-primary',
+        onclick: updateStats
+      }, 'Refresh Data')
+    ])
+  ]);
+};
+$mount(DashboardDemo, '#demo-dashboard');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 grid grid-cols-1 md:grid-cols-2 gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  return Div({ class: 'grid grid-cols-1 md:grid-cols-2 gap-4' }, [
+    Stat({
+      label: 'Primary Stat',
+      value: '1,234',
+      desc: 'With description',
+      icon: Icons.iconInfo,
+      class: 'bg-primary/10 text-primary'
+    }),
+    Stat({
+      label: 'Success Stat',
+      value: '89%',
+      desc: 'Success rate',
+      icon: Icons.iconSuccess,
+      class: 'bg-success/10 text-success'
+    }),
+    Stat({
+      label: 'Warning Stat',
+      value: '23',
+      desc: 'Pending items',
+      icon: Icons.iconWarning,
+      class: 'bg-warning/10 text-warning'
+    }),
+    Stat({
+      label: 'Error Stat',
+      value: '5',
+      desc: 'Failed attempts',
+      icon: Icons.iconError,
+      class: 'bg-error/10 text-error'
+    })
+  ]);
+};
+$mount(VariantsDemo, '#demo-variants');
+```
+
+### Compact Stats
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-compact" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const CompactDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-4' }, [
+    Stat({
+      label: 'Views',
+      value: '12.3K',
+      class: 'stat-compact'
+    }),
+    Stat({
+      label: 'Likes',
+      value: '2,456',
+      class: 'stat-compact'
+    }),
+    Stat({
+      label: 'Comments',
+      value: '345',
+      class: 'stat-compact'
+    }),
+    Stat({
+      label: 'Shares',
+      value: '89',
+      class: 'stat-compact'
+    })
+  ]);
+};
+$mount(CompactDemo, '#demo-compact');
+```
+
+<script>
+  (function() {
+    const initStatExamples = () => {
+      
+      // 1. Basic Stat
+      const basicTarget = document.querySelector('#demo-basic');
+      if (basicTarget && !basicTarget.hasChildNodes()) {
+        const BasicDemo = () => {
+          return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [
+            Stat({
+              label: 'Total Users',
+              value: '2,345',
+              desc: '↗︎ 120 new users this month'
+            }),
+            Stat({
+              label: 'Revenue',
+              value: '$45,678',
+              desc: '↘︎ 5% decrease from last month'
+            }),
+            Stat({
+              label: 'Conversion Rate',
+              value: '3.45%',
+              desc: '↗︎ 0.5% increase'
+            })
+          ]);
+        };
+        $mount(BasicDemo, basicTarget);
+      }
+
+      // 2. With Icons
+      const iconsTarget = document.querySelector('#demo-icons');
+      if (iconsTarget && !iconsTarget.hasChildNodes()) {
+        const IconsDemo = () => {
+          return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [
+            Stat({
+              label: 'Active Users',
+              value: '1,234',
+              desc: 'Currently online',
+              icon: Icons.iconShow
+            }),
+            Stat({
+              label: 'New Orders',
+              value: '89',
+              desc: 'Today',
+              icon: Icons.iconSuccess
+            }),
+            Stat({
+              label: 'Pending Tasks',
+              value: '23',
+              desc: 'Need attention',
+              icon: Icons.iconWarning
+            })
+          ]);
+        };
+        $mount(IconsDemo, iconsTarget);
+      }
+
+      // 3. Reactive Values
+      const reactiveTarget = document.querySelector('#demo-reactive');
+      if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
+        const ReactiveDemo = () => {
+          const count = $(0);
+          
+          return Div({ class: 'flex flex-col gap-4' }, [
+            Div({ class: 'grid grid-cols-1 md:grid-cols-2 gap-4' }, [
+              Stat({
+                label: 'Counter',
+                value: () => count(),
+                desc: 'Click the button to increase',
+                icon: Icons.iconInfo
+              }),
+              Stat({
+                label: 'Squared',
+                value: () => Math.pow(count(), 2),
+                desc: 'Square of counter',
+                icon: Icons.iconSuccess
+              })
+            ]),
+            Div({ class: 'flex gap-2 justify-center' }, [
+              Button({ 
+                class: 'btn btn-primary',
+                onclick: () => count(count() + 1)
+              }, 'Increment'),
+              Button({ 
+                class: 'btn btn-ghost',
+                onclick: () => count(0)
+              }, 'Reset')
+            ])
+          ]);
+        };
+        $mount(ReactiveDemo, reactiveTarget);
+      }
+
+      // 4. With Trend Indicators
+      const trendsTarget = document.querySelector('#demo-trends');
+      if (trendsTarget && !trendsTarget.hasChildNodes()) {
+        const TrendsDemo = () => {
+          return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [
+            Stat({
+              label: 'Weekly Sales',
+              value: '$12,345',
+              desc: Div({ class: 'text-success' }, '↗︎ 15% increase'),
+              icon: Icons.iconSuccess
+            }),
+            Stat({
+              label: 'Bounce Rate',
+              value: '42%',
+              desc: Div({ class: 'text-error' }, '↘︎ 3% from last week'),
+              icon: Icons.iconError
+            }),
+            Stat({
+              label: 'Avg. Session',
+              value: '4m 32s',
+              desc: Div({ class: 'text-warning' }, '↗︎ 12 seconds'),
+              icon: Icons.iconWarning
+            })
+          ]);
+        };
+        $mount(TrendsDemo, trendsTarget);
+      }
+
+      // 5. Multiple Stats in Row
+      const multipleTarget = document.querySelector('#demo-multiple');
+      if (multipleTarget && !multipleTarget.hasChildNodes()) {
+        const MultipleDemo = () => {
+          return Div({ class: 'grid grid-cols-1 md:grid-cols-4 gap-4' }, [
+            Stat({
+              label: 'Posts',
+              value: '1,234',
+              desc: 'Total content',
+              icon: Span({ class: 'text-2xl' }, '📝')
+            }),
+            Stat({
+              label: 'Comments',
+              value: '8,901',
+              desc: 'Engagement',
+              icon: Span({ class: 'text-2xl' }, '💬')
+            }),
+            Stat({
+              label: 'Likes',
+              value: '12,345',
+              desc: 'Reactions',
+              icon: Span({ class: 'text-2xl' }, '❤️')
+            }),
+            Stat({
+              label: 'Shares',
+              value: '456',
+              desc: 'Viral reach',
+              icon: Span({ class: 'text-2xl' }, '🔄')
+            })
+          ]);
+        };
+        $mount(MultipleDemo, multipleTarget);
+      }
+
+      // 6. Dashboard Example
+      const dashboardTarget = document.querySelector('#demo-dashboard');
+      if (dashboardTarget && !dashboardTarget.hasChildNodes()) {
+        const DashboardDemo = () => {
+          const stats = $({
+            users: 1245,
+            revenue: 89342,
+            orders: 342,
+            satisfaction: 94
+          });
+          
+          const updateStats = () => {
+            stats({
+              users: stats().users + Math.floor(Math.random() * 50),
+              revenue: stats().revenue + Math.floor(Math.random() * 1000),
+              orders: stats().orders + Math.floor(Math.random() * 20),
+              satisfaction: Math.min(100, stats().satisfaction + Math.floor(Math.random() * 5) - 2)
+            });
+          };
+          
+          return Div({ class: 'flex flex-col gap-6' }, [
+            Div({ class: 'grid grid-cols-1 md:grid-cols-4 gap-4' }, [
+              Stat({
+                label: 'Total Users',
+                value: () => stats().users.toLocaleString(),
+                desc: 'Registered users',
+                icon: Icons.iconShow
+              }),
+              Stat({
+                label: 'Revenue',
+                value: () => `$${stats().revenue.toLocaleString()}`,
+                desc: 'This month',
+                icon: Icons.iconSuccess
+              }),
+              Stat({
+                label: 'Orders',
+                value: () => stats().orders.toLocaleString(),
+                desc: 'Completed',
+                icon: Icons.iconInfo
+              }),
+              Stat({
+                label: 'Satisfaction',
+                value: () => `${stats().satisfaction}%`,
+                desc: stats().satisfaction > 90 ? 'Excellent!' : 'Good',
+                icon: Icons.iconWarning
+              })
+            ]),
+            Div({ class: 'flex justify-center' }, [
+              Button({ 
+                class: 'btn btn-primary',
+                onclick: updateStats
+              }, 'Refresh Data')
+            ])
+          ]);
+        };
+        $mount(DashboardDemo, dashboardTarget);
+      }
+
+      // 7. All Variants
+      const variantsTarget = document.querySelector('#demo-variants');
+      if (variantsTarget && !variantsTarget.hasChildNodes()) {
+        const VariantsDemo = () => {
+          return Div({ class: 'grid grid-cols-1 md:grid-cols-2 gap-4' }, [
+            Stat({
+              label: 'Primary Stat',
+              value: '1,234',
+              desc: 'With description',
+              icon: Icons.iconInfo,
+              class: 'bg-primary/10 text-primary'
+            }),
+            Stat({
+              label: 'Success Stat',
+              value: '89%',
+              desc: 'Success rate',
+              icon: Icons.iconSuccess,
+              class: 'bg-success/10 text-success'
+            }),
+            Stat({
+              label: 'Warning Stat',
+              value: '23',
+              desc: 'Pending items',
+              icon: Icons.iconWarning,
+              class: 'bg-warning/10 text-warning'
+            }),
+            Stat({
+              label: 'Error Stat',
+              value: '5',
+              desc: 'Failed attempts',
+              icon: Icons.iconError,
+              class: 'bg-error/10 text-error'
+            })
+          ]);
+        };
+        $mount(VariantsDemo, variantsTarget);
+      }
+
+      // 8. Compact Stats
+      const compactTarget = document.querySelector('#demo-compact');
+      if (compactTarget && !compactTarget.hasChildNodes()) {
+        const CompactDemo = () => {
+          return Div({ class: 'flex flex-wrap gap-4' }, [
+            Stat({
+              label: 'Views',
+              value: '12.3K',
+              class: 'stat-compact'
+            }),
+            Stat({
+              label: 'Likes',
+              value: '2,456',
+              class: 'stat-compact'
+            }),
+            Stat({
+              label: 'Comments',
+              value: '345',
+              class: 'stat-compact'
+            }),
+            Stat({
+              label: 'Shares',
+              value: '89',
+              class: 'stat-compact'
+            })
+          ]);
+        };
+        $mount(CompactDemo, compactTarget);
+      }
+    };
+
+    initStatExamples();
+    
+    if (window.$docsify) {
+      window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
+        hook.doneEach(initStatExamples);
+      });
+    }
+  })();
+</script>

docs/components_old/swap.md

@@ -0,0 +1,500 @@
+# Swap
+
+Toggle component that swaps between two states (on/off) with customizable icons or content.
+
+## Tag
+
+`Swap`
+
+## Props
+
+| Prop         | Type                         | Default     | Description                                      |
+| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
+| `value`      | `boolean \| Signal<boolean>` | `false`     | Swap state (true = on, false = off)              |
+| `on`         | `string \| VNode`            | `-`         | Content to show when state is on                 |
+| `off`        | `string \| VNode`            | `-`         | Content to show when state is off                |
+| `class`      | `string`                     | `''`        | Additional CSS classes (DaisyUI + Tailwind)      |
+| `onclick`    | `function`                   | `-`         | Click event handler                              |
+
+## Live Examples
+
+### Basic Swap
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const BasicDemo = () => {
+  const isOn = $(false);
+  
+  return Swap({
+    value: isOn,
+    on: "🌟 ON",
+    off: "💫 OFF",
+    onclick: () => isOn(!isOn())
+  });
+};
+$mount(BasicDemo, '#demo-basic');
+```
+
+### Icon Swap
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-icons" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const IconsDemo = () => {
+  const isOn = $(false);
+  
+  return Swap({
+    value: isOn,
+    on: Icons.iconShow,
+    off: Icons.iconHide,
+    onclick: () => isOn(!isOn())
+  });
+};
+$mount(IconsDemo, '#demo-icons');
+```
+
+### Emoji Swap
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-emoji" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const EmojiDemo = () => {
+  const isOn = $(false);
+  
+  return Swap({
+    value: isOn,
+    on: "❤️",
+    off: "🖤",
+    onclick: () => isOn(!isOn())
+  });
+};
+$mount(EmojiDemo, '#demo-emoji');
+```
+
+### Custom Content Swap
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-custom" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const CustomDemo = () => {
+  const isOn = $(false);
+  
+  return Swap({
+    value: isOn,
+    on: Div({ class: "badge badge-success gap-1" }, ["✅", " Active"]),
+    off: Div({ class: "badge badge-ghost gap-1" }, ["⭕", " Inactive"]),
+    onclick: () => isOn(!isOn())
+  });
+};
+$mount(CustomDemo, '#demo-custom');
+```
+
+### With Reactive State
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const ReactiveDemo = () => {
+  const isOn = $(false);
+  
+  return Div({ class: 'flex flex-col gap-4 items-center' }, [
+    Swap({
+      value: isOn,
+      on: Icons.iconShow,
+      off: Icons.iconHide,
+      onclick: () => isOn(!isOn())
+    }),
+    Div({ class: 'text-center' }, () => 
+      isOn() 
+        ? Div({ class: 'alert alert-success' }, 'Content is visible')
+        : Div({ class: 'alert alert-soft' }, 'Content is hidden')
+    )
+  ]);
+};
+$mount(ReactiveDemo, '#demo-reactive');
+```
+
+### Toggle Mode Swap
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-mode" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+  </div>
+</div>
+
+```javascript
+const ModeDemo = () => {
+  const darkMode = $(false);
+  const notifications = $(true);
+  const sound = $(false);
+  
+  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+    Div({ class: 'flex justify-between items-center' }, [
+      Span({}, 'Dark mode'),
+      Swap({
+        value: darkMode,
+        on: "🌙",
+        off: "☀️",
+        onclick: () => darkMode(!darkMode())
+      })
+    ]),
+    Div({ class: 'flex justify-between items-center' }, [
+      Span({}, 'Notifications'),
+      Swap({
+        value: notifications,
+        on: "🔔",
+        off: "🔕",
+        onclick: () => notifications(!notifications())
+      })
+    ]),
+    Div({ class: 'flex justify-between items-center' }, [
+      Span({}, 'Sound effects'),
+      Swap({
+        value: sound,
+        on: "🔊",
+        off: "🔇",
+        onclick: () => sound(!sound())
+      })
+    ]),
+    Div({ class: 'mt-2 p-3 rounded-lg', style: () => darkMode() ? 'background: #1f2937; color: white' : 'background: #f3f4f6' }, [
+      Div({ class: 'text-sm' }, () => `Mode: ${darkMode() ? 'Dark' : 'Light'} | Notifications: ${notifications() ? 'On' : 'Off'} | Sound: ${sound() ? 'On' : 'Off'}`)
+    ])
+  ]);
+};
+$mount(ModeDemo, '#demo-mode');
+```
+
+### All Variants
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const VariantsDemo = () => {
+  return Div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [
+    Div({ class: 'text-center' }, [
+      Div({ class: 'text-xs mb-2' }, 'Volume'),
+      Swap({
+        value: $(false),
+        on: "🔊",
+        off: "🔇"
+      })
+    ]),
+    Div({ class: 'text-center' }, [
+      Div({ class: 'text-xs mb-2' }, 'Like'),
+      Swap({
+        value: $(true),
+        on: "❤️",
+        off: "🤍"
+      })
+    ]),
+    Div({ class: 'text-center' }, [
+      Div({ class: 'text-xs mb-2' }, 'Star'),
+      Swap({
+        value: $(false),
+        on: "⭐",
+        off: "☆"
+      })
+    ]),
+    Div({ class: 'text-center' }, [
+      Div({ class: 'text-xs mb-2' }, 'Check'),
+      Swap({
+        value: $(true),
+        on: Icons.iconSuccess,
+        off: Icons.iconError
+      })
+    ])
+  ]);
+};
+$mount(VariantsDemo, '#demo-variants');
+```
+
+### Simple Todo Toggle
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-todo" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const TodoDemo = () => {
+  const todos = [
+    { id: 1, text: 'Complete documentation', completed: $(true) },
+    { id: 2, text: 'Review pull requests', completed: $(false) },
+    { id: 3, text: 'Deploy to production', completed: $(false) }
+  ];
+  
+  return Div({ class: 'flex flex-col gap-3' }, [
+    Div({ class: 'text-sm font-bold mb-2' }, 'Todo list'),
+    ...todos.map(todo => 
+      Div({ class: 'flex items-center justify-between p-2 bg-base-200 rounded-lg' }, [
+        Span({ class: todo.completed() ? 'line-through opacity-50' : '' }, todo.text),
+        Swap({
+          value: todo.completed,
+          on: Icons.iconSuccess,
+          off: Icons.iconClose,
+          onclick: () => todo.completed(!todo.completed())
+        })
+      ])
+    ),
+    Div({ class: 'mt-2 text-sm opacity-70' }, () => {
+      const completed = todos.filter(t => t.completed()).length;
+      return `${completed} of ${todos.length} tasks completed`;
+    })
+  ]);
+};
+$mount(TodoDemo, '#demo-todo');
+```
+
+<script>
+  (function() {
+    const initSwapExamples = () => {
+      
+      // 1. Basic Swap
+      const basicTarget = document.querySelector('#demo-basic');
+      if (basicTarget && !basicTarget.hasChildNodes()) {
+        const BasicDemo = () => {
+          const isOn = $(false);
+          
+          return Swap({
+            value: isOn,
+            on: "🌟 ON",
+            off: "💫 OFF",
+            onclick: () => isOn(!isOn())
+          });
+        };
+        $mount(BasicDemo, basicTarget);
+      }
+
+      // 2. Icon Swap
+      const iconsTarget = document.querySelector('#demo-icons');
+      if (iconsTarget && !iconsTarget.hasChildNodes()) {
+        const IconsDemo = () => {
+          const isOn = $(false);
+          
+          return Swap({
+            value: isOn,
+            on: Icons.iconShow,
+            off: Icons.iconHide,
+            onclick: () => isOn(!isOn())
+          });
+        };
+        $mount(IconsDemo, iconsTarget);
+      }
+
+      // 3. Emoji Swap
+      const emojiTarget = document.querySelector('#demo-emoji');
+      if (emojiTarget && !emojiTarget.hasChildNodes()) {
+        const EmojiDemo = () => {
+          const isOn = $(false);
+          
+          return Swap({
+            value: isOn,
+            on: "❤️",
+            off: "🖤",
+            onclick: () => isOn(!isOn())
+          });
+        };
+        $mount(EmojiDemo, emojiTarget);
+      }
+
+      // 4. Custom Content Swap
+      const customTarget = document.querySelector('#demo-custom');
+      if (customTarget && !customTarget.hasChildNodes()) {
+        const CustomDemo = () => {
+          const isOn = $(false);
+          
+          return Swap({
+            value: isOn,
+            on: Div({ class: "badge badge-success gap-1" }, ["✅", " Active"]),
+            off: Div({ class: "badge badge-ghost gap-1" }, ["⭕", " Inactive"]),
+            onclick: () => isOn(!isOn())
+          });
+        };
+        $mount(CustomDemo, customTarget);
+      }
+
+      // 5. Reactive State
+      const reactiveTarget = document.querySelector('#demo-reactive');
+      if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
+        const ReactiveDemo = () => {
+          const isOn = $(false);
+          
+          return Div({ class: 'flex flex-col gap-4 items-center' }, [
+            Swap({
+              value: isOn,
+              on: Icons.iconShow,
+              off: Icons.iconHide,
+              onclick: () => isOn(!isOn())
+            }),
+            Div({ class: 'text-center' }, () => 
+              isOn() 
+                ? Div({ class: 'alert alert-success' }, 'Content is visible')
+                : Div({ class: 'alert alert-soft' }, 'Content is hidden')
+            )
+          ]);
+        };
+        $mount(ReactiveDemo, reactiveTarget);
+      }
+
+      // 6. Toggle Mode Swap
+      const modeTarget = document.querySelector('#demo-mode');
+      if (modeTarget && !modeTarget.hasChildNodes()) {
+        const ModeDemo = () => {
+          const darkMode = $(false);
+          const notifications = $(true);
+          const sound = $(false);
+          
+          return Div({ class: 'flex flex-col gap-4 w-full' }, [
+            Div({ class: 'flex justify-between items-center' }, [
+              Span({}, 'Dark mode'),
+              Swap({
+                value: darkMode,
+                on: "🌙",
+                off: "☀️",
+                onclick: () => darkMode(!darkMode())
+              })
+            ]),
+            Div({ class: 'flex justify-between items-center' }, [
+              Span({}, 'Notifications'),
+              Swap({
+                value: notifications,
+                on: "🔔",
+                off: "🔕",
+                onclick: () => notifications(!notifications())
+              })
+            ]),
+            Div({ class: 'flex justify-between items-center' }, [
+              Span({}, 'Sound effects'),
+              Swap({
+                value: sound,
+                on: "🔊",
+                off: "🔇",
+                onclick: () => sound(!sound())
+              })
+            ]),
+            Div({ class: 'mt-2 p-3 rounded-lg', style: () => darkMode() ? 'background: #1f2937; color: white' : 'background: #f3f4f6' }, [
+              Div({ class: 'text-sm' }, () => `Mode: ${darkMode() ? 'Dark' : 'Light'} | Notifications: ${notifications() ? 'On' : 'Off'} | Sound: ${sound() ? 'On' : 'Off'}`)
+            ])
+          ]);
+        };
+        $mount(ModeDemo, modeTarget);
+      }
+
+      // 7. All Variants
+      const variantsTarget = document.querySelector('#demo-variants');
+      if (variantsTarget && !variantsTarget.hasChildNodes()) {
+        const VariantsDemo = () => {
+          return Div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [
+            Div({ class: 'text-center' }, [
+              Div({ class: 'text-xs mb-2' }, 'Volume'),
+              Swap({
+                value: $(false),
+                on: "🔊",
+                off: "🔇"
+              })
+            ]),
+            Div({ class: 'text-center' }, [
+              Div({ class: 'text-xs mb-2' }, 'Like'),
+              Swap({
+                value: $(true),
+                on: "❤️",
+                off: "🤍"
+              })
+            ]),
+            Div({ class: 'text-center' }, [
+              Div({ class: 'text-xs mb-2' }, 'Star'),
+              Swap({
+                value: $(false),
+                on: "⭐",
+                off: "☆"
+              })
+            ]),
+            Div({ class: 'text-center' }, [
+              Div({ class: 'text-xs mb-2' }, 'Check'),
+              Swap({
+                value: $(true),
+                on: Icons.iconSuccess,
+                off: Icons.iconError
+              })
+            ])
+          ]);
+        };
+        $mount(VariantsDemo, variantsTarget);
+      }
+
+      // 8. Simple Todo Toggle
+      const todoTarget = document.querySelector('#demo-todo');
+      if (todoTarget && !todoTarget.hasChildNodes()) {
+        const TodoDemo = () => {
+          const todos = [
+            { id: 1, text: 'Complete documentation', completed: $(true) },
+            { id: 2, text: 'Review pull requests', completed: $(false) },
+            { id: 3, text: 'Deploy to production', completed: $(false) }
+          ];
+          
+          return Div({ class: 'flex flex-col gap-3' }, [
+            Div({ class: 'text-sm font-bold mb-2' }, 'Todo list'),
+            ...todos.map(todo => 
+              Div({ class: 'flex items-center justify-between p-2 bg-base-200 rounded-lg' }, [
+                Span({ class: todo.completed() ? 'line-through opacity-50' : '' }, todo.text),
+                Swap({
+                  value: todo.completed,
+                  on: Icons.iconSuccess,
+                  off: Icons.iconClose,
+                  onclick: () => todo.completed(!todo.completed())
+                })
+              ])
+            ),
+            Div({ class: 'mt-2 text-sm opacity-70' }, () => {
+              const completed = todos.filter(t => t.completed()).length;
+              return `${completed} of ${todos.length} tasks completed`;
+            })
+          ]);
+        };
+        $mount(TodoDemo, todoTarget);
+      }
+    };
+
+    initSwapExamples();
+    
+    if (window.$docsify) {
+      window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
+        hook.doneEach(initSwapExamples);
+      });
+    }
+  })();
+</script>

docs/components_old/table.md

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

docs/components_old/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_old/timeline.md

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

docs/components_old/toast.md

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

docs/components_old/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

@@ -11,10 +11,16 @@
     />
 
     <link
+      href="./sigpro.css"
+      rel="stylesheet"
+      type="text/css"
+    /> 
+
+    <!-- <link
       href="https://cdn.jsdelivr.net/npm/daisyui@5"
       rel="stylesheet"
       type="text/css"
-    />
+    />  -->
 
     <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
@@ -66,7 +72,6 @@
 
     <script src="//cdn.jsdelivr.net/npm/docsify@4.13.0/lib/docsify.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
-    <script src="//cdn.jsdelivr.net/npm/docsify-plugin-flexible-alerts/docsify-plugin-flexible-alerts.min.js"></script>
     <script src="./sigpro-ui.min.js"></script>
   </body>
 </html>

docs/install.md

@@ -2,11 +2,6 @@
 
 Follow these steps to integrate **SigPro-UI** into your project.
 
-## Prerequisites
-
-- [Tailwind CSS v4](https://tailwindcss.com/) configured.
-- [daisyUI v5](https://daisyui.com/) installed.
-
 ---
 
 
@@ -21,35 +16,16 @@ Choose your preferred package manager:
 
 ```bash
 npm install sigpro-ui
-# or
-pnpm add sigpro-ui
-# or
-bun add sigpro-ui
-# or
-yarn add sigpro-ui
 ```
 
-## 2. Configure CSS
+## 2. Import and use in your app
-
-Add the following to your main CSS file (e.g., `app.css`):
-
-```css
-@import "tailwindcss";
-@plugin "daisyui";
-```
-
-> This enables Tailwind CSS v4 + daisyUI v5 styles for all SigPro-UI components.
-
-## 3. Import and use in your app
 
 ### ESM / Module usage
 
 ```javascript
 // Import everything from sigpro-ui (includes sigpro core)
 import { $, $mount, Button, Alert, Input, tt } from "sigpro-ui";
-
+import "sigpro-ui/css";
-// Import your CSS (adjust the path if needed)
-import "./app.css";
 
 // Create your app
 const App = () => {
@@ -59,7 +35,6 @@ const App = () => {
     $html('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
     
     Input({
-      label: 'Your name',
       placeholder: 'Enter your name...'
     }),
     
@@ -79,26 +54,7 @@ const App = () => {
 $mount(App, "#app");
 ```
 
-### CommonJS usage
+### CDN Usage (no build step)
-
-```javascript
-const { $, $mount, Button, Input, Alert } = require('sigpro-ui');
-
-const App = () => {
-  const count = $(0);
-  
-  return $html('div', { class: 'p-8' }, [
-    Button({ 
-      class: 'btn-primary',
-      onclick: () => count(count() + 1)
-    }, () => `Clicks: ${count()}`)
-  ]);
-};
-
-$mount(App, "#app");
-```
-
-## 4. CDN Usage (no build step)
 
 Simply add the script tag and start using SigProUI:
 
@@ -110,7 +66,7 @@ Simply add the script tag and start using SigProUI:
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>SigProUI Demo</title>
   <script src="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.js"></script>
-  <link href="https://cdn.jsdelivr.net/npm/daisyui@4/dist/full.css" rel="stylesheet">
+  <link href="https://unpkg.com/sigpro-ui@latest/css/sigpro-ui.min.css" rel="stylesheet">
   <style>
     body { padding: 2rem; }
   </style>
@@ -132,7 +88,6 @@ Simply add the script tag and start using SigProUI:
         $html('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
         
         Input({
-          label: 'Your name',
           value: name,
           placeholder: 'Enter your name...'
         }),
@@ -178,8 +133,7 @@ When you install SigProUI, you get:
 - And 30+ more components!
 
 ### Utilities
-- `Icons` - SVG icon set
+- `Utils` - Helper functions (ui, val)
-- `Utils` - Helper functions (joinClass, val)
 - `tt()` - i18n translation function
 
 ## Language Support
@@ -190,15 +144,13 @@ SigProUI includes built-in i18n with Spanish and English:
 import { tt } from 'sigpro-ui';
 
 // Change locale (default is 'es')
-tt.setLocale('en');
+Locale('en');
 
 // Use translations
 const closeButton = Button({}, tt('close')());
 const searchPlaceholder = Input({ placeholder: tt('search')() });
 ```
 
-Available translations: `close`, `confirm`, `cancel`, `search`, `loading`, `nodata`
-
 ## TypeScript Support
 
 SigProUI includes TypeScript definitions. Import types as needed:
@@ -215,27 +167,11 @@ const MyButton: React.FC<ButtonProps> = (props) => {
 
 | Problem | Solution |
 | :--- | :--- |
-| Components don't look styled | Check that you've included Tailwind + daisyUI CSS (either via import or CDN) |
+| Components don't look styled | Make sure you're loading css 'sigpro.css' (either via import or CDN)|
 | `$ is not defined` | SigProUI includes sigpro core - no need to install separately. Make sure you're importing from 'sigpro-ui' |
 | `Button is not defined` | In CDN mode, all components are in window. Use `window.Button` or destructure from window |
 | Build errors | Ensure you're using a modern bundler that supports ESM |
 | CDN components not working | The CDN version exposes everything globally. Use `const { $, Button } = window;` or call directly |
-| Locale not working | Set locale with `tt.setLocale('en')` before using translations |
+| Locale not working | Set locale with `Locale('en')` before using translations |
-
-## Migration from older versions
-
-If you were using SigProUI v1.0.x with separate SigPro installation:
-
-**Before:**
-```javascript
-import { $ } from 'sigpro';
-import { Button } from 'sigpro-ui';
-```
-
-**Now:**
-```javascript
-import { $, Button } from 'sigpro-ui';
-// That's it! Everything comes from one package.
-```
 
 **Happy coding!** 🎉

docs/quick.md

@@ -3,15 +3,14 @@
 **Version:** daisyUI v5 + Tailwind v4 Plugin  
 **Status:** Active / WIP
 
-> **Prerequisites:** Tailwind CSS v4+ and DaisyUI v5+ installed.
 
 ## Global Initialization
 
 ```javascript
-import { UI } from 'sigpro-ui';
+import "sigpro-ui";
 
 // Injects all components into window and sets default language
-UI('en'); // 'es' or 'en'
+Locale('en'); // 'es' or 'en'
 
 // All components (Button, Input, Table, Toast, etc.) are now globally available.
 ```
@@ -110,12 +109,11 @@ Built-in locale system with Spanish and English support.
 
 ```javascript
 // Set global UI language
-Locale("en"); // or "es"
+Locale("en");
 
 // Get translated string (returns a reactive signal)
 const closeText = tt("close"); // "Close" or "Cerrar"
 
-// Available keys: close, confirm, cancel, search, loading, nodata
 ```
 
 ---
@@ -124,7 +122,7 @@ const closeText = tt("close"); // "Close" or "Cerrar"
 
 1.  **Atomic Reactivity**: Components accepting `value` or `checked` bind directly to **SigPro Signals**. Updates happen instantly without full page re-renders.
 
-2.  **Tailwind v4 + DaisyUI v5**: Pass any Tailwind utility class via the `class` attribute to override default DaisyUI styling.
+2.  **DaisyUI v5**: Pass any daisyUI styling via the `class` attribute.
 
     ```javascript
     Button({ class: "btn-primary btn-sm rounded-full shadow-lg" }, "Click")
@@ -145,7 +143,6 @@ const name = $("");
 const error = $(null);
 
 Input({
-  label: "Full Name",
   value: name,
   error: error,
   oninput: (e) => {

package.json

@@ -25,9 +25,12 @@
     "LICENSE"
   ],
   "scripts": {
-    "build:css": "./node_modules/.bin/tailwindcss -i ./src/css/sigpro.css -o ./css/sigpro.css --content './src/**/*.js' --minify",
+    "build:cssmin": "./node_modules/.bin/tailwindcss -i ./src/css/sigpro.css -o ./css/sigpro.min.css --content './src/**/*.js' --minify",
+    "build:css": "./node_modules/.bin/tailwindcss -i ./src/css/sigpro.css -o ./css/sigpro.css --content './src/**/*.js'",
+    "build:cssdocs": "./node_modules/.bin/tailwindcss -i ./src/css/sigpro.css -o ./docs/sigpro.css --content './src/**/*.js' --minify",
     "build:js": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.js --format=iife --global-name=SigProUI && bun build ./index.js --bundle --outfile=./dist/sigpro-ui.min.js --format=iife --global-name=SigProUI --minify",
-    "build": "bun run build:css && bun run build:js",
+    "build:jsdocs": "bun build ./index.js --bundle --outfile=./docs/sigpro-ui.min.js --format=iife --global-name=SigProUI --minify",
+    "build": "bun run build:css && bun run build:js && bun run build:jsdocs && bun run build:cssdocs && bun run build:cssmin",
     "prepublishOnly": "bun run build",
     "docs": "bun x serve docs"
   },

src/components/Accordion.js

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

src/components/Alert.js

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

src/components/Autocomplete.js

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

src/components/Badge.js

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

src/components/Button.js

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

src/components/Checkbox.js

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

src/components/Colorpicker.js

@@ -1,9 +1,20 @@
+// components/Colorpicker.js
 import { $, $html, $if } from "sigpro";
-import { val } from "../core/utils.js";
+import { val, ui } from "../core/utils.js";
 
-/** COLORPICKER */
+/**
+ * Colorpicker component
+ * 
+ * daisyUI classes used:
+ * - btn, btn-primary, btn-secondary, btn-accent, btn-ghost
+ * - bg-base-100, border, border-base-300, shadow-sm, shadow-2xl
+ * - rounded-box, rounded-sm, fixed, inset-0
+ * - z-50, z-110, absolute, left-0, mt-2, p-3, w-64
+ * - grid, grid-cols-8, gap-1, ring, ring-offset-1, ring-primary
+ * - scale-110, transition-all, hover:scale-125, active:scale-95
+ */
 export const Colorpicker = (props) => {
-  const { value, label, ...rest } = props;
+  const { class: className, value, label, ...rest } = props;
   const isOpen = $(false);
 
   const palette = [
@@ -19,7 +30,7 @@ export const Colorpicker = (props) => {
 
   const getColor = () => val(value) || "#000000";
 
-  return $html("div", { class: "relative w-fit" }, [
+  return $html("div", { class: ui('relative w-fit', className) }, [
     $html(
       "button",
       {
@@ -78,4 +89,4 @@ export const Colorpicker = (props) => {
       }),
     ),
   ]);
-};
+};

src/components/Datepicker.js

@@ -1,17 +1,23 @@
+// components/Datepicker.js
 import { $, $html, $if } from "sigpro";
-import { val } from "../core/utils.js";
+import { val, ui, getIcon } from "../core/utils.js";
-import { 
-  iconCalendar, 
-  iconLeft, 
-  iconRight, 
-  iconLLeft, 
-  iconRRight 
-} from "../core/icons.js";
 import { Input } from "./Input.js";
 
-/** DATEPICKER */
+/**
+ * Datepicker component
+ * 
+ * daisyUI classes used:
+ * - input, input-bordered, input-primary
+ * - btn, btn-ghost, btn-xs, btn-circle
+ * - bg-base-100, border, border-base-300, shadow-2xl, rounded-box
+ * - absolute, left-0, mt-2, p-4, w-80, z-100, z-90
+ * - grid, grid-cols-7, gap-1, text-center
+ * - ring, ring-primary, ring-inset, font-black
+ * - range, range-xs
+ * - tooltip, tooltip-top, tooltip-bottom
+ */
 export const Datepicker = (props) => {
-  const { value, range, label, placeholder, hour = false, ...rest } = props;
+  const { class: className, value, range, label, placeholder, hour = false, ...rest } = props;
 
   const isOpen = $(false);
   const internalDate = $(new Date());
@@ -113,13 +119,13 @@ export const Datepicker = (props) => {
     ]);
   };
 
-  return $html("div", { class: "relative w-full" }, [
+  return $html("div", { class: ui('relative w-full', className) }, [
     Input({
       label,
       placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."),
       value: displayValue,
       readonly: true,
-      icon: $html("img", { src: iconCalendar, class: "opacity-40" }),
+      icon: getIcon("icon-[lucide--calendar]"),
       onclick: (e) => {
         e.stopPropagation();
         isOpen(!isOpen());
@@ -138,10 +144,10 @@ export const Datepicker = (props) => {
           $html("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
             $html("div", { class: "flex gap-0.5" }, [
               $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, 
-                $html("img", { src: iconLLeft, class: "opacity-40" })
+                getIcon("icon-[lucide--chevrons-left]")
               ),
               $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, 
-                $html("img", { src: iconLeft, class: "opacity-40" })
+                getIcon("icon-[lucide--chevron-left]")
               ),
             ]),
             $html("span", { class: "font-bold uppercase flex-1 text-center" }, [
@@ -149,10 +155,10 @@ export const Datepicker = (props) => {
             ]),
             $html("div", { class: "flex gap-0.5" }, [
               $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, 
-                $html("img", { src: iconRight, class: "opacity-40" })
+                getIcon("icon-[lucide--chevron-right]")
               ),
               $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, 
-                $html("img", { src: iconRRight, class: "opacity-40" })
+                getIcon("icon-[lucide--chevrons-right]")
               ),
             ]),
           ]),
@@ -249,4 +255,4 @@ export const Datepicker = (props) => {
 
     $if(isOpen, () => $html("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })),
   ]);
-};
+};

src/components/Drawer.js

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

src/components/Dropdown.js

@@ -1,8 +1,20 @@
+// components/Dropdown.js
 import { $html, $for } from "sigpro";
-import { val } from "../core/utils.js";
+import { ui } from "../core/utils.js";
 
+/**
+ * Dropdown component
+ * 
+ * daisyUI classes used:
+ * - dropdown, dropdown-content, dropdown-end, dropdown-top, dropdown-bottom
+ * - menu, menu-dropdown, menu-dropdown-show
+ * - btn, btn-ghost, btn-sm, btn-md, btn-lg
+ * - bg-base-100, shadow, rounded-box, border, border-base-300
+ * - z-50, p-2, w-52, min-w-max
+ * - m-1, flex, items-center, gap-2
+ */
 export const Dropdown = (props, children) => {
-  const { label, icon, items, ...rest } = props;
+  const { class: className, label, icon, items, ...rest } = props;
 
   const renderContent = () => {
     if (items) {
@@ -38,7 +50,7 @@ export const Dropdown = (props, children) => {
 
   return $html("div", {
     ...rest,
-    class: () => `dropdown ${val(props.class) || ""}`,
+    class: ui('dropdown', className),
   }, [
     $html("div", {
       tabindex: 0,

src/components/Fab.js

@@ -1,15 +1,26 @@
+// components/Fab.js
 import { $html } from "sigpro";
-import { val } from "../core/utils.js";
+import { val, ui, getIcon } from "../core/utils.js";
 
-/** FAB (Floating Action Button) */
+/**
+ * Fab (Floating Action Button) component
+ * 
+ * daisyUI classes used:
+ * - btn, btn-lg, btn-circle, btn-primary
+ * - shadow-2xl, shadow-lg
+ * - badge, badge-ghost, shadow-sm, whitespace-nowrap
+ * - absolute, flex, flex-col-reverse, items-end, gap-3
+ * - z-100, transition-all, duration-300
+ * - bottom-6, right-6, top-6, left-6
+ */
 export const Fab = (props) => {
-  const { icon, label, actions = [], position = "bottom-6 right-6", class: className = "", ...rest } = props;
+  const { class: className, icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;
 
   return $html(
     "div",
     {
       ...rest,
-      class: `fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100] ${className}`,
+      class: ui(`fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100]`, className),
     },
     [
       $html(
@@ -20,7 +31,7 @@ export const Fab = (props) => {
           class: "btn btn-lg btn-circle btn-primary shadow-2xl",
         },
         [
-          icon ? (typeof icon === "function" ? icon() : icon) : null, 
+          icon ? getIcon(icon) : null, 
           !icon && label ? label : null
         ],
       ),
@@ -38,7 +49,7 @@ export const Fab = (props) => {
                 act.onclick?.(e);
               },
             },
-            [act.icon ? (typeof act.icon === "function" ? act.icon() : act.icon) : act.text || ""],
+            [act.icon ? getIcon(act.icon) : act.text || ""],
           ),
         ]),
       ),

src/components/Fieldset.js

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

src/components/Fileinput.js

@@ -1,9 +1,26 @@
+// components/Fileinput.js
 import { $, $html, $if, $for } from "sigpro";
-import { iconUpload, iconClose } from "../core/icons.js";
+import { ui, getIcon } from "../core/utils.js";
 
-/** FILEINPUT */
+/**
+ * Fileinput component
+ * 
+ * daisyUI classes used:
+ * - fieldset, w-full, p-0
+ * - tooltip, tooltip-top, before:z-50, after:z-50
+ * - relative, flex, items-center, justify-between, w-full, h-12, px-4
+ * - border-2, border-dashed, rounded-lg, cursor-pointer, transition-all, duration-200
+ * - border-primary, bg-primary/10, border-base-content/20, bg-base-100, hover:bg-base-200
+ * - text-sm, opacity-70, truncate, grow, text-left
+ * - text-[10px], opacity-40, shrink-0
+ * - text-error, text-[10px], mt-1, px-1, font-medium
+ * - mt-2, space-y-1
+ * - flex, items-center, justify-between, p-1.5, pl-3, text-xs, bg-base-200/50, rounded-md, border, border-base-300
+ * - gap-2, truncate, opacity-50, font-medium, max-w-[200px]
+ * - btn, btn-ghost, btn-xs, btn-circle
+ */
 export const Fileinput = (props) => {
-  const { tooltip, max = 2, accept = "*", onSelect } = props;
+  const { class: className, tooltip, max = 2, accept = "*", onSelect, ...rest } = props;
 
   const selectedFiles = $([]);
   const isDragging = $(false);
@@ -30,7 +47,7 @@ export const Fileinput = (props) => {
     onSelect?.(updated);
   };
 
-  return $html("fieldset", { class: "fieldset w-full p-0" }, [
+  return $html("fieldset", { ...rest, class: ui('fieldset w-full p-0', className) }, [
     $html(
       "div",
       {
@@ -60,7 +77,7 @@ export const Fileinput = (props) => {
           },
           [
             $html("div", { class: "flex items-center gap-3 w-full" }, [
-              $html("img", { src: iconUpload, class: "w-5 h-5 opacity-50 shrink-0" }),
+              getIcon("icon-[lucide--upload]"),
               $html("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."),
               $html("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${max}MB`),
             ]),
@@ -102,7 +119,7 @@ export const Fileinput = (props) => {
                       removeFile(index);
                     },
                   },
-                  [$html("img", { src: iconClose, class: "w-3 h-3 opacity-70" })],
+                  [getIcon("icon-[lucide--x]")]
                 ),
               ]),
             (file) => file.name + file.lastModified,
@@ -110,4 +127,4 @@ export const Fileinput = (props) => {
         ]),
     ),
   ]);
-};
+};

src/components/Indicator.js

@@ -1,9 +1,19 @@
+// components/Indicator.js
 import { $html } from "sigpro";
-import { joinClass } from "../core/utils.js";
+import { ui } from "../core/utils.js";
 
-/** INDICATOR */
+/**
+ * Indicator component
+ * 
+ * daisyUI classes used:
+ * - indicator, indicator-item
+ * - badge, badge-primary, badge-secondary, badge-accent
+ * - badge-info, badge-success, badge-warning, badge-error
+ * - badge-outline, badge-soft, badge-dash
+ * - badge-xs, badge-sm, badge-md, badge-lg
+ */
 export const Indicator = (props, children) =>
-  $html("div", { class: joinClass("indicator", props.class) }, [
+  $html("div", { class: "indicator" }, () => [
     children,
-    $html("span", { class: joinClass("indicator-item badge", props.badgeClass) }, props.badge),
+    props.value && $html("span", { class: ui('indicator-item badge', props.class) }, props.value),
-  ]);
+  ].filter(Boolean));

src/components/Input.js

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

src/components/Label.js

@@ -0,0 +1,28 @@
+// components/Label.js
+import { $, $html } from "sigpro";
+import { ui, val } from "../core/utils.js";
+
+/**
+ * Label component
+ * 
+ * daisyUI classes used:
+ * - label
+ * - floating-label
+ */
+export const Label = (props) => {
+  const { children, value, floating = false, error, required, class: className, ...rest } = props;
+
+  if (floating) {
+    return $html("label", { class: ui("floating-label w-full", className), ...rest }, () => [
+      value ? $html("span", {}, value) : null,
+      children,
+      error ? $html("span", { class: "text-error text-xs" }, val(error)) : null,
+    ]);
+  }
+
+  return $html("label", { class: ui("input w-full", className), ...rest }, () => [
+    value ? $html("span", { class: "label" }, value) : null,
+    children,
+    error ? $html("span", { class: "text-error text-xs" }, val(error)) : null,
+  ]);
+};

src/components/List.js

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

src/components/Menu.js

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

src/components/Modal.js

@@ -1,19 +1,27 @@
+// components/Modal.js
 import { $html, $watch } from "sigpro";
+import { ui, val } from "../core/utils.js";
 import { tt } from "../core/i18n.js";
 import { Button } from "./Button.js";
 
-/** MODAL REACTIVO NATIVO */
+/**
+ * Modal component
+ * 
+ * daisyUI classes used:
+ * - modal, modal-box, modal-action, modal-backdrop
+ * - modal-open, modal-middle, modal-top, modal-bottom
+ * - text-lg, font-bold, mb-4, py-2
+ * - flex, gap-2
+ */
 export const Modal = (props, children) => {
-  const { title, buttons, open, ...rest } = props;
+  const { class: className, title, buttons, open, ...rest } = props;
   const dialogRef = { current: null };
 
-  // Sincronizamos la señal con los métodos nativos del navegador
   $watch(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
 
-    if (open()) {
+    if (val(open)) {
-      // Solo abrimos si no está ya abierto (evita bucles)
       if (!dialog.open) dialog.showModal();
     } else {
       if (dialog.open) dialog.close();
@@ -22,15 +30,14 @@ export const Modal = (props, children) => {
 
   const close = (e) => {
     if (e && e.preventDefault) e.preventDefault();
-    open(false);
+    if (typeof open === "function") open(false);
   };
 
   return $html("dialog", { 
     ...rest,
     ref: dialogRef,
-    class: "modal",
+    class: ui('modal', className),
-    // Importante: Si el usuario pulsa ESC, actualizamos la señal
+    oncancel: () => typeof open === "function" && open(false)
-    oncancel: () => open(false) 
   }, [
     $html("div", { class: "modal-box" }, [
       title ? $html("h3", { class: "text-lg font-bold mb-4" }, title) : null,
@@ -42,7 +49,6 @@ export const Modal = (props, children) => {
         Button({ type: "button", onclick: close }, tt("close")()),
       ]),
     ]),
-    // Backdrop nativo que sincroniza con la señal
     $html("form", { 
       method: "dialog", 
       class: "modal-backdrop",

src/components/Navbar.js

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

src/components/Radio.js

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

src/components/Range.js

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

src/components/Rating.js

@@ -1,16 +1,25 @@
+// components/Rating.js
 import { $html } from "sigpro";
-import { val } from "../core/utils.js";
+import { val, ui } from "../core/utils.js";
 
-/** RATING */
+/**
+ * Rating component
+ * 
+ * daisyUI classes used:
+ * - rating, rating-half, rating-hidden
+ * - mask, mask-star, mask-star-2, mask-heart, mask-circle
+ * - pointer-events-none
+ */
 export const Rating = (props) => {
-  const { value, count = 5, mask = "mask-star", readonly = false, onchange, ...rest } = props;
+  const { class: className, value, count = 5, mask = "mask-star", readonly = false, onchange, ...rest } = props;
+
   const ratingGroup = `rating-${Math.random().toString(36).slice(2, 7)}`;
 
   return $html(
     "div",
     {
       ...rest,
-      class: () => `rating ${val(readonly) ? "pointer-events-none" : ""} ${props.class || ""}`,
+      class: () => ui(`rating ${val(readonly) ? "pointer-events-none" : ""}`, className),
     },
     Array.from({ length: val(count) }, (_, i) => {
       const starValue = i + 1;

src/components/Select.js

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

src/components/Stack.js

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

src/components/Stat.js

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

src/components/Swap.js

@@ -1,13 +1,23 @@
+// components/Swap.js
 import { $html } from "sigpro";
-import { joinClass } from "../core/utils.js";
+import { ui, val } from "../core/utils.js";
 
-/** SWAP */
+/**
-export const Swap = (props) =>
+ * Swap component
-  $html("label", { class: joinClass("swap", props.class) }, [
+ * 
+ * daisyUI classes used:
+ * - swap, swap-on, swap-off, swap-active
+ * - swap-rotate, swap-flip, swap-indeterminate
+ */
+export const Swap = (props) => {
+  const { class: className, value, on, off, ...rest } = props;
+
+  return $html("label", { ...rest, class: ui('swap', className) }, [
     $html("input", {
       type: "checkbox",
-      checked: props.value
+      checked: val(value)
     }),
-    $html("div", { class: "swap-on" }, props.on),
+    $html("div", { class: "swap-on" }, on),
-    $html("div", { class: "swap-off" }, props.off),
+    $html("div", { class: "swap-off" }, off),
   ]);
+};

src/components/Table.js

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

src/components/Tabs.js

@@ -1,46 +1,65 @@
-import { $html, $for } from "sigpro";
+// components/Tabs.js
-import { val, joinClass } from "../core/utils.js";
+import { $, $html, $for } from "sigpro";
+import { val, ui } from "../core/utils.js";
 
-/** TABS */
+/**
+ * Tabs component
+ * 
+ * daisyUI classes used:
+ * - tabs, tabs-box, tabs-lifted, tabs-bordered
+ * - tab, tab-active, tab-disabled
+ * - flex, flex-col, gap-4, w-full, p-4
+ */
 export const Tabs = (props) => {
-  const { items, ...rest } = props;
+  const { class: className, items, activeIndex = $(0), ...rest } = props;
+  
   const itemsSignal = typeof items === "function" ? items : () => items || [];
 
+  // Si no se provee activeIndex, creamos uno interno
+  const internalActive = $(0);
+  const currentActive = activeIndex !== undefined ? activeIndex : internalActive;
+
+  const handleTabClick = (idx, onClick) => (e) => {
+    if (typeof currentActive === "function") {
+      currentActive(idx);
+    }
+    onClick?.(e);
+  };
+
   return $html("div", { ...rest, class: "flex flex-col gap-4 w-full" }, [
     $html(
       "div",
       {
         role: "tablist",
-        class: joinClass("tabs tabs-box", props.class),
+        class: ui('tabs tabs-box', className),
       },
       $for(
         itemsSignal,
-        (it) =>
+        (it, idx) => {
-          $html(
+          const isActive = val(it.active) ?? (currentActive() === idx);
+          
+          return $html(
             "a",
             {
               role: "tab",
-              class: () => joinClass(
+              class: () => ui('tab', isActive ? 'tab-active' : '', val(it.disabled) ? 'tab-disabled' : ''),
-                "tab", 
+              onclick: !val(it.disabled) ? handleTabClick(idx, it.onclick) : undefined,
-                val(it.active) && "tab-active", 
-                val(it.disabled) && "tab-disabled", 
-                it.tip && "tooltip"
-              ),
-              "data-tip": it.tip,
-              onclick: (e) => !val(it.disabled) && it.onclick?.(e),
             },
             it.label,
-          ),
+          );
-        (t) => t.label,
+        },
+        (t, idx) => t.label + idx,
       ),
     ),
     () => {
-      const active = itemsSignal().find((it) => val(it.active));
+      const activeItem = itemsSignal().find((it, idx) => 
-      if (!active) return null;
+        val(it.active) ?? (currentActive() === idx)
-      const content = val(active.content);
+      );
+      if (!activeItem) return null;
+      const content = val(activeItem.content);
       return $html("div", { class: "p-4" }, [
         typeof content === "function" ? content() : content
       ]);
     },
   ]);
-};
+};

src/components/Timeline.js

@@ -1,26 +1,32 @@
+// components/Timeline.js
 import { $html, $for } from "sigpro";
-import { val } from "../core/utils.js";
+import { val, ui, getIcon } from "../core/utils.js";
-import { iconInfo, iconSuccess, iconWarning, iconError } from "../core/icons.js";
 
-/** TIMELINE */
+/**
+ * Timeline component
+ * 
+ * daisyUI classes used:
+ * - timeline, timeline-vertical, timeline-horizontal, timeline-compact
+ * - timeline-start, timeline-middle, timeline-end, timeline-box
+ * - flex-1, shadow-sm
+ * - hr, bg-primary
+ */
 export const Timeline = (props) => {
-  const { items = [], vertical = true, compact = false, ...rest } = props;
+  const { class: className, items = [], vertical = true, compact = false, ...rest } = props;
 
-  const icons = {
+  const iconMap = {
-    info: iconInfo,
+    info: "icon-[lucide--info]",
-    success: iconSuccess,
+    success: "icon-[lucide--check-circle]",
-    warning: iconWarning,
+    warning: "icon-[lucide--alert-triangle]",
-    error: iconError,
+    error: "icon-[lucide--alert-circle]",
   };
 
   return $html(
     "ul",
     {
       ...rest,
-      class: () =>
+      class: () => ui(
-        `timeline ${val(vertical) ? "timeline-vertical" : "timeline-horizontal"} ${
+        `timeline ${val(vertical) ? "timeline-vertical" : "timeline-horizontal"} ${val(compact) ? "timeline-compact" : ""}`, className),
-          val(compact) ? "timeline-compact" : ""
-        } ${props.class || ""}`,
     },
     [
       $for(
@@ -35,11 +41,9 @@ export const Timeline = (props) => {
             !isFirst ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null,
             $html("div", { class: "timeline-start" }, [renderSlot(item.title)]),
             $html("div", { class: "timeline-middle" }, [
-              $html("img", {
+              item.icon
-                src: icons[itemType] || item.icon || icons.success,
+                ? getIcon(item.icon)
-                class: "w-4 h-4 object-contain mx-1",
+                : getIcon(iconMap[itemType] || iconMap.success)
-                alt: itemType,
-              }),
             ]),
             $html("div", { class: "timeline-end timeline-box shadow-sm" }, [renderSlot(item.detail)]),
             !isLast ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null,
@@ -49,4 +53,4 @@ export const Timeline = (props) => {
       ),
     ],
   );
-};
+};

src/components/Toast.js

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

src/components/Tooltip.js

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

src/components/index.js

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

src/components_OLD/Accordion.js

@@ -0,0 +1,24 @@
+import { $html } from "sigpro";
+import { joinClass } from "../core/utils.js";
+
+/** ACCORDION */
+export const Accordion = (props, children) => {
+  const { title, name, open, ...rest } = props;
+
+  return $html(
+    "div",
+    {
+      ...rest,
+      class: joinClass("collapse collapse-arrow bg-base-200 mb-2", props.class),
+    },
+    [
+      $html("input", {
+        type: name ? "radio" : "checkbox",
+        name: name,
+        checked: open
+      }),
+      $html("div", { class: "collapse-title text-xl font-medium" }, title),
+      $html("div", { class: "collapse-content" }, children),
+    ],
+  );
+};

src/components_OLD/Alert.js

@@ -0,0 +1,50 @@
+import { $html } from "sigpro";
+import { val } from "../core/utils.js";
+import { iconInfo, iconSuccess, iconWarning, iconError } from "../core/icons.js";
+
+/** ALERT */
+export const Alert = (props, children) => {
+  const { type = "info", soft = true, ...rest } = props;
+  
+  const icons = {
+    info: iconInfo,
+    success: iconSuccess,
+    warning: iconWarning,
+    error: iconError,
+  };
+
+  const typeClass = () => {
+    const t = val(type);
+    const map = {
+      info: "alert-info",
+      success: "alert-success",
+      warning: "alert-warning",
+      error: "alert-error",
+    };
+    return map[t] || t;
+  };
+
+  const content = children || props.message;
+
+  return $html(
+    "div",
+    {
+      ...rest,
+      role: "alert",
+      class: () => `alert ${typeClass()} ${val(soft) ? "alert-soft" : ""} ${props.class || ""}`,
+    },
+    [
+      $html("img", {
+        src: icons[val(type)] || icons.info,
+        class: "w-4 h-4 object-contain",
+        alt: val(type),
+      }),
+      $html("div", { class: "flex-1" }, [
+        $html("span", {}, [typeof content === "function" ? content() : content])
+      ]),
+      props.actions ? $html("div", { class: "flex-none" }, [
+        typeof props.actions === "function" ? props.actions() : props.actions
+      ]) : null,
+    ],
+  );
+};

src/components_OLD/Autocomplete.js

@@ -1,11 +1,11 @@
-// components/Autocomplete.js
 import { $, $html, $for } from "sigpro";
-import { val, ui, joinClass } from "../core/utils.js";
+import { val } from "../core/utils.js";
 import { tt } from "../core/i18n.js";
-import { Input } from "./Input.js";
+import { Input } from "./Input.js"; // Importamos el componente hermano
 
+/** AUTOCOMPLETE */
 export const Autocomplete = (props) => {
-  const { ui: uiProps, class: className, options = [], value, onSelect, label, placeholder, ...rest } = props;
+  const { options = [], value, onSelect, label, placeholder, ...rest } = props;
 
   const query = $(val(value) || "");
   const isOpen = $(false);
@@ -48,14 +48,7 @@ export const Autocomplete = (props) => {
     }
   };
 
-  const dynamicClasses = [
+  return $html("div", { class: "relative w-full" }, [
-    ui('autocomplete', uiProps),
-    className
-  ].filter(Boolean).join(' ');
-
-  const containerClasses = joinClass("relative w-full", dynamicClasses);
-
-  return $html("div", { class: containerClasses }, [
     Input({
       label,
       placeholder: placeholder || tt("search")(),
@@ -95,8 +88,8 @@ export const Autocomplete = (props) => {
             ]),
           (opt, i) => (typeof opt === "string" ? opt : opt.value) + i,
         ),
-        () => (list().length ? null : $html("li", { class: "p-2 text-center opacity-50" }, tt("nodata")())),
+        () => (list().length ? null : $html("li", { class: "p-2 text-center opacity-50" }, "No results")),
       ],
     ),
   ]);
-};
+};

src/components_OLD/Badge.js

@@ -0,0 +1,6 @@
+import { $html } from "sigpro";
+import { joinClass } from "../core/utils.js";
+
+/** BADGE */
+export const Badge = (props, children) => 
+  $html("span", { ...props, class: joinClass("badge", props.class) }, children);

src/components_OLD/Button.js

@@ -0,0 +1,37 @@
+import { $html } from "sigpro";
+import { val, joinClass } from "../core/utils.js";
+
+/** BUTTON */
+export const Button = (props, children) => {
+  const { badge, badgeClass, tooltip, icon, loading, ...rest } = props;
+
+  const btn = $html(
+    "button",
+    {
+      ...rest,
+      class: joinClass("btn", props.class)
+    },
+    [
+      () => (val(loading) ? $html("span", { class: "loading loading-spinner" }) : null),
+      icon ? $html("span", { class: "mr-1" }, icon) : null,
+      children,
+    ]
+  );
+
+  let out = btn;
+
+  if (badge) {
+    out = $html("div", { class: "indicator" }, [
+      $html(
+        "span",
+        { class: joinClass("indicator-item badge", badgeClass || "badge-secondary") },
+        badge
+      ),
+      out,
+    ]);
+  }
+
+  return tooltip 
+    ? $html("div", { class: "tooltip", "data-tip": tooltip }, out) 
+    : out;
+};

src/components_OLD/Checkbox.js

@@ -1,19 +1,14 @@
-// components/Checkbox.js
 import { $html } from "sigpro";
-import { val, ui, joinClass } from "../core/utils.js";
+import { val } from "../core/utils.js";
 
+/** CHECKBOX */
 export const Checkbox = (props) => {
-  const { ui: uiProps, class: className, value, tooltip, toggle, label, ...rest } = props;
+  const { value, tooltip, toggle, label, ...rest } = props;
-
-  const dynamicClasses = [
-    ui('checkbox', uiProps),
-    className
-  ].filter(Boolean).join(' ');
 
   const checkEl = $html("input", {
     ...rest,
     type: "checkbox",
-    class: () => joinClass(val(toggle) ? "toggle" : "checkbox", dynamicClasses),
+    class: () => (val(toggle) ? "toggle" : "checkbox"),
     checked: value
   });
 
@@ -23,4 +18,4 @@ export const Checkbox = (props) => {
   ]);
 
   return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
-};
+};

src/components_OLD/Colorpicker.js

@@ -1,9 +1,9 @@
-// components/Colorpicker.js
 import { $, $html, $if } from "sigpro";
-import { val, ui, joinClass } from "../core/utils.js";
+import { val } from "../core/utils.js";
 
+/** COLORPICKER */
 export const Colorpicker = (props) => {
-  const { ui: uiProps, class: className, value, label, ...rest } = props;
+  const { value, label, ...rest } = props;
   const isOpen = $(false);
 
   const palette = [
@@ -19,14 +19,7 @@ export const Colorpicker = (props) => {
 
   const getColor = () => val(value) || "#000000";
 
-  const dynamicClasses = [
+  return $html("div", { class: "relative w-fit" }, [
-    ui('colorpicker', uiProps),
-    className
-  ].filter(Boolean).join(' ');
-
-  const containerClasses = joinClass("relative w-fit", dynamicClasses);
-
-  return $html("div", { class: containerClasses }, [
     $html(
       "button",
       {
@@ -85,4 +78,4 @@ export const Colorpicker = (props) => {
       }),
     ),
   ]);
-};
+};

src/components_OLD/Datepicker.js

@@ -1,10 +1,17 @@
-// components/Datepicker.js
 import { $, $html, $if } from "sigpro";
-import { val, ui, joinClass, getIcon } from "../core/utils.js";
+import { val } from "../core/utils.js";
+import { 
+  iconCalendar, 
+  iconLeft, 
+  iconRight, 
+  iconLLeft, 
+  iconRRight 
+} from "../core/icons.js";
 import { Input } from "./Input.js";
 
+/** DATEPICKER */
 export const Datepicker = (props) => {
-  const { ui: uiProps, class: className, value, range, label, placeholder, hour = false, ...rest } = props;
+  const { value, range, label, placeholder, hour = false, ...rest } = props;
 
   const isOpen = $(false);
   const internalDate = $(new Date());
@@ -106,20 +113,13 @@ export const Datepicker = (props) => {
     ]);
   };
 
-  const dynamicClasses = [
+  return $html("div", { class: "relative w-full" }, [
-    ui('datepicker', uiProps),
-    className
-  ].filter(Boolean).join(' ');
-
-  const containerClasses = joinClass("relative w-full", dynamicClasses);
-
-  return $html("div", { class: containerClasses }, [
     Input({
       label,
       placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."),
       value: displayValue,
       readonly: true,
-      icon: getIcon("lucide--calendar"),
+      icon: $html("img", { src: iconCalendar, class: "opacity-40" }),
       onclick: (e) => {
         e.stopPropagation();
         isOpen(!isOpen());
@@ -138,10 +138,10 @@ export const Datepicker = (props) => {
           $html("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
             $html("div", { class: "flex gap-0.5" }, [
               $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, 
-                getIcon("lucide--chevrons-left")
+                $html("img", { src: iconLLeft, class: "opacity-40" })
               ),
               $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, 
-                getIcon("lucide--chevron-left")
+                $html("img", { src: iconLeft, class: "opacity-40" })
               ),
             ]),
             $html("span", { class: "font-bold uppercase flex-1 text-center" }, [
@@ -149,10 +149,10 @@ export const Datepicker = (props) => {
             ]),
             $html("div", { class: "flex gap-0.5" }, [
               $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, 
-                getIcon("lucide--chevron-right")
+                $html("img", { src: iconRight, class: "opacity-40" })
               ),
               $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, 
-                getIcon("lucide--chevrons-right")
+                $html("img", { src: iconRRight, class: "opacity-40" })
               ),
             ]),
           ]),
@@ -249,4 +249,4 @@ export const Datepicker = (props) => {
 
     $if(isOpen, () => $html("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })),
   ]);
-};
+};

src/components_OLD/Drawer.js

@@ -0,0 +1,18 @@
+import { $html } from "sigpro";
+import { joinClass } from "../core/utils.js";
+
+/** DRAWER */
+export const Drawer = (props) =>
+  $html("div", { class: joinClass("drawer", props.class) }, [
+    $html("input", {
+      id: props.id,
+      type: "checkbox",
+      class: "drawer-toggle",
+      checked: props.open,
+    }),
+    $html("div", { class: "drawer-content" }, props.content),
+    $html("div", { class: "drawer-side" }, [
+      $html("label", { for: props.id, class: "drawer-overlay", onclick: () => props.open?.(false) }),
+      $html("div", { class: "min-h-full bg-base-200 w-80" }, props.side),
+    ]),
+  ]);

src/components_OLD/Dropdown.js

@@ -1,16 +1,8 @@
-// components/Dropdown.js
 import { $html, $for } from "sigpro";
-import { val, ui, joinClass } from "../core/utils.js";
+import { val } from "../core/utils.js";
 
 export const Dropdown = (props, children) => {
-  const { ui: uiProps, class: className, label, icon, items, ...rest } = props;
+  const { label, icon, items, ...rest } = props;
-
-  const dynamicClasses = [
-    ui('dropdown', uiProps),
-    className
-  ].filter(Boolean).join(' ');
-
-  const containerClasses = joinClass("dropdown", dynamicClasses);
 
   const renderContent = () => {
     if (items) {
@@ -46,7 +38,7 @@ export const Dropdown = (props, children) => {
 
   return $html("div", {
     ...rest,
-    class: containerClasses,
+    class: () => `dropdown ${val(props.class) || ""}`,
   }, [
     $html("div", {
       tabindex: 0,

src/components_OLD/Fab.js

@@ -1,22 +1,15 @@
-// components/Fab.js
 import { $html } from "sigpro";
-import { val, ui, joinClass, getIcon } from "../core/utils.js";
+import { val } from "../core/utils.js";
 
+/** FAB (Floating Action Button) */
 export const Fab = (props) => {
-  const { ui: uiProps, class: className, icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;
+  const { icon, label, actions = [], position = "bottom-6 right-6", class: className = "", ...rest } = props;
-
-  const dynamicClasses = [
-    ui('fab', uiProps),
-    className
-  ].filter(Boolean).join(' ');
-
-  const containerClasses = joinClass(`fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100]`, dynamicClasses);
 
   return $html(
     "div",
     {
       ...rest,
-      class: containerClasses,
+      class: `fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100] ${className}`,
     },
     [
       $html(
@@ -27,7 +20,7 @@ export const Fab = (props) => {
           class: "btn btn-lg btn-circle btn-primary shadow-2xl",
         },
         [
-          icon ? getIcon(icon) : null, 
+          icon ? (typeof icon === "function" ? icon() : icon) : null, 
           !icon && label ? label : null
         ],
       ),
@@ -45,7 +38,7 @@ export const Fab = (props) => {
                 act.onclick?.(e);
               },
             },
-            [act.icon ? getIcon(act.icon) : act.text || ""],
+            [act.icon ? (typeof act.icon === "function" ? act.icon() : act.icon) : act.text || ""],
           ),
         ]),
       ),