OPtimized components

components/All.js

@@ -11,7 +11,6 @@ export const rand = (r) => `${r}-${Math.random().toString(36).slice(2, 9)}`
 export const close = () => document.activeElement?.blur()
 export const listKey = (items, isOpen) => {
   const cursor = $(-1);
-  watch(() => { if (!get(isOpen)) cursor(-1) });
   const onKey = (e, select) => {
     const list = get(items), i = cursor(), len = list.length;
     if (!len) return;
@@ -19,7 +18,7 @@ export const listKey = (items, isOpen) => {
     k === 'ArrowDown' ? (e.preventDefault(), isOpen(true), cursor(Math.min(i + 1, len - 1))) :
       k === 'ArrowUp' ? (e.preventDefault(), cursor(Math.max(i - 1, 0))) :
         k === 'Enter' ? (i >= 0 && (e.preventDefault(), select(list[i]))) :
-          k === 'Escape' ? isOpen(false) : null;
+          k === 'Escape' ? (isOpen(false), cursor(-1)) : null;
   };
   return { cursor, onKey };
 };
@@ -62,7 +61,7 @@ export const Autocomplete = ({ items, value, onselect, placeholder = 'Buscar...'
         isOpen(true);
       },
       onfocus: () => isOpen(true),
-      onblur: () => setTimeout(() => isOpen(false), 150),
+      onblur: () => setTimeout(() => { isOpen(false); cursor(-1); }, 150),
       onkeydown: (e) => onKey(e, pick)
     }),
     when(isOpen, () =>
@@ -179,14 +178,10 @@ export const Calendar = (p) => {
     ) : null
   ])
 }
-export const Card = (p, c) => {
+export const Card = (p, c) => h('div', { ...p, class: cls('card', p.class) }, c);
-  if (!p.title && !p.body && !p.actions && !c) return h('div', { ...p, class: cls('card', p.class) }, c)
+export const CardTitle = (p, c) => h('div', { ...p, class: cls('card-title', p.class) }, c);
-  return h('div', { ...p, class: cls('card', p.class) }, [
+export const CardBody = (p, c) => h('div', { ...p, class: cls('card-body', p.class) }, c);
-    p.title && h('div', { class: cls('card-title', p.titleClass) }, p.title),
+export const CardActions = (p, c) => h('div', { ...p, class: cls('card-actions', p.class) }, c);
-    (p.body || c) && h('div', { class: cls('card-body', p.bodyClass) }, p.body || c),
-    p.actions && h('div', { class: cls('card-actions', p.actionsClass) }, p.actions)
-  ].filter(Boolean))
-}
 export const Carousel = (p, c) => h("div", { ...p, class: cls("carousel", p.class) }, c);
 export const CarouselItem = (p, c) => h("div", { ...p, class: cls("carousel-item", p.class) }, c);
 export const Chat = (p, c) => h("div", { ...p, class: cls("chat", p.class) }, c);
@@ -286,20 +281,15 @@ export const Datepicker = (p) => {
     ])
   ])
 }
-export const Drawer = (p, c) => {
+export const Drawer = (p, c) => div({ ...p, class: cls('drawer', p.class) }, c)
-  const id = p.id || rand("drawer")
+export const DrawerToggle = (p) => input({ ...p, type: 'checkbox', class: 'drawer-toggle', checked: () => get(p.checked), onchange: (e) => isFn(p.checked) && p.checked(e.target.checked) })
-  return h('div', { class: cls('drawer', p.class) }, [
+export const DrawerContent = (p, c) => div({ ...p, class: cls('drawer-content', p.class) }, c)
-    h('input', { id, type: 'checkbox', class: 'drawer-toggle', checked: () => get(p.open), onchange: (e) => isFn(p.open) && p.open(e.target.checked) }),
+export const DrawerSide = (p, c) => div({ ...p, class: cls('drawer-side', p.class) }, c)
-    h('div', { class: 'drawer-side' }, [h('label', { for: id, class: 'drawer-overlay', onclick: () => isFn(p.open) && p.open(false) }), h('div', { class: 'min-h-full bg-base-200 w-80 p-4' }, () => get(p.side))]),
+export const DrawerOverlay = (p) => label({ ...p, for: p.for, class: cls('drawer-overlay', p.class) })
-    h('div', { class: 'drawer-content' }, c)])
-}
 export const Divider = (p) => h("div", { ...p, class: cls("divider", p.class) });
-export const Dropdown = (p, c) => {
+export const Dropdown = (p, c) => (h('div', { ...p, class: cls('dropdown', p.class) }, c));
-  return h('div', { ...p, class: cls('dropdown', p.class) }, [
+export const DropdownButton = (p, c) => (h('div', { ...p, tabindex: '0', role: 'button', class: cls('btn', p.class) }, c));
-    h('div', { tabindex: '0', role: 'button', class: cls('btn', p.buttonClass) }, p.label),
+export const DropdownContent = (p, c) => (h('div', { ...p, tabindex: '0', class: cls('dropdown-content', p.class) }, c));
-    h('div', { tabindex: '-1', class: 'dropdown-content' }, c)
-  ])
-}
 export const Fab = (p, c) => h("div", { class: "fab" }, [h('div', { tabindex: "0", role: "button", class: cls('btn', p.class) }, Icon(p.icon)), c]);
 export const Fieldset = (p, c) => h("fieldset", { class: cls("fieldset", p.class) }, [h("legend", { class: "fieldset-legend" }, p.label), c])
 export const Fileinput = (p) => {
@@ -380,7 +370,6 @@ export const Input = (p) => {
   const inputType = () => isPassword
     ? (get(showPassword) ? 'text' : 'password')
     : (p.type || 'text');
-
   return h("div", {
     class: "input-container",
     onfocusin: () => isFocused(true),
@@ -395,10 +384,10 @@ export const Input = (p) => {
           label && !float ? h('span', { class: 'label' }, label) : null,
           left ?? null,
           h('input', { ...rest, type: inputType, class: 'grow', pattern: pattern, placeholder: placeholder || label || ' ', value: value }), right ?? null,
-          isPassword ? h('label', { class: 'swap swap-rotate ml-2' }, [
+          isPassword ? Swap({ class: 'ml-2' }, [
-            h('input', { type: 'checkbox', onchange: (e) => showPassword(e.target.checked) }),
+            SwapToggle({ value: showPassword, class: "swap-rotate" }),
-            h('span', { class: 'swap-on icon-[lucide--eye]' }),
+            SwapOn({}, Icon('icon-[lucide--eye]')),
-            h('span', { class: 'swap-off icon-[lucide--eye-off]' })
+            SwapOff({}, Icon('icon-[lucide--eye-off]')),
           ]) : null
         ]),
       hint ? h('div', { class: "validator-hint" }, hint) : null,
@@ -524,30 +513,24 @@ export const SkeletonText = (p) => h("span", { ...p, class: cls("skeleton skelet
 export const Stack = (p, c) => h("div", { ...p, class: cls("stack", p.class) }, c);
 export const Steps = (p, c) => h("ul", { ...p, class: cls("steps", p.class) }, c);
 export const Step = (p, c) => h("li", { ...p, class: cls("step", p.class), "data-content": p.dataContent }, c);
-export const Swap = (p) => h("label", { ...p, class: cls("swap", p.class) }, [
+export const Swap = (p, c) => h('label', { ...p, class: cls('swap', p.class) }, c)
-  h("input", { type: "checkbox", checked: () => get(p.value), onchange: (e) => isFn(p.value) && p.value(e.target.checked) }),
+export const SwapToggle = (p) => h('input', { type: 'checkbox', checked: () => get(p.value), onchange: (e) => isFn(p.value) && p.value(e.target.checked), class: p.class })
-  h("div", { class: "swap-on" }, p.on),
+export const SwapOn = (p, c) => h('div', { ...p, class: cls('swap-on', p.class) }, c)
-  h("div", { class: "swap-off" }, p.off)
+export const SwapOff = (p, c) => h('div', { ...p, class: cls('swap-off', p.class) }, c)
-]);
+export const Table = (p, c) => h('table', { ...p, class: cls('table', p.class) }, c)
-export const Table = (p) => {
+export const TableItems = ({ items, columns = [], header = true }) => {
-  if (p.children !== undefined) return h('table', { class: cls('table', p.class), ...p }, p.children)
+  const head = header !== false && columns.some(c => c.label) ? h('thead', {}, h('tr', {}, columns.map(c => h('th', { class: c.class }, c.label)))) : null
-  const { items, columns = [], header = true, keyFn, ...rest } = p
+  const body = h('tbody', {}, () => {
-  const hd = header !== false && columns.some(c => c.label) ? h('thead', {}, h('tr', {}, columns.map(c => h('th', { class: c.class }, c.label)))) : null
+    const list = get(items) || []
-  const bd = h('tbody', {}, each(
+    return list.map((it, idx) => h('tr', {}, columns.map(c => { const v = c.render ? c.render(it, idx) : it[c.key]; return h('td', { class: c.class }, v) })))
-    () => get(items) || [],
+  })
-    (it, idx) => h('tr', {}, columns.map(c => {
+  return [head, body].filter(Boolean)
-      const v = c.render ? c.render(it, idx) : it[c.key]
-      return h('td', { class: c.class }, v)
-    }))
-  ))
-  return h('table', { class: cls('table', rest.class), ...rest }, [hd, bd])
 }
 export const Tabs = (p, c) => {
   if (!p.items) {
     const { class: className, ...rest } = p
     return h('div', { ...rest, class: cls('tabs', className) }, c)
   }
-
   const { items, activeIndex, onClose, class: className, ...rest } = p
   const get = x => (isFn(x) ? x() : x)
   const closeH = onClose || (isFn(items) ? (idx, item) => {
@@ -580,10 +563,7 @@ export const Tabs = (p, c) => {
   })
 }
 export const Textarea = (p) => h("textarea", { ...p, class: cls("textarea", p.class) });
-export const TextRotate = (p) => {
+export const Textrotate = (p, c) => h('span', { ...p, class: cls('text-rotate', p.class) }, c)
-  const words = Array.isArray(p.words) ? p.words : (typeof p.words === 'string' ? p.words.split(',') : []);
-  return h("span", { ...p, class: cls("text-rotate", p.class) }, h("span", {}, words.map(w => h("span", {}, w))));
-};
 export const Timeline = (p, c) => h("ul", { ...p, class: cls("timeline", p.class) }, c);
 export const Toast = (message, type = "alert-success", duration = 3500) => {
   let container = document.getElementById("sigpro-toast-container");

dist/sigpro-ui.css

@@ -19,6 +19,8 @@
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
     --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
     --text-xl: 1.25rem;
@@ -2718,6 +2720,58 @@
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
+  .chat-end {
+    @layer daisyui.l1.l2 {
+      place-items: end;
+      grid-template-columns: 1fr auto;
+      .chat-header {
+        grid-column-start: 1;
+      }
+      .chat-footer {
+        grid-column-start: 1;
+      }
+      .chat-image {
+        grid-column-start: 2;
+      }
+      .chat-bubble {
+        grid-column-start: 1;
+        border-end-end-radius: 0;
+        &:before {
+          transform: rotateY(180deg);
+          inset-inline-start: 100%;
+        }
+        [dir="rtl"] &:before {
+          transform: rotateY(0deg);
+        }
+      }
+    }
+  }
+  .chat-start {
+    @layer daisyui.l1.l2 {
+      place-items: start;
+      grid-template-columns: auto 1fr;
+      .chat-header {
+        grid-column-start: 2;
+      }
+      .chat-footer {
+        grid-column-start: 2;
+      }
+      .chat-image {
+        grid-column-start: 1;
+      }
+      .chat-bubble {
+        grid-column-start: 2;
+        border-end-start-radius: 0;
+        &:before {
+          transform: rotateY(0deg);
+          inset-inline-start: -0.75rem;
+        }
+        [dir="rtl"] &:before {
+          transform: rotateY(180deg);
+        }
+      }
+    }
+  }
   .start {
     inset-inline-start: var(--spacing);
   }
@@ -2996,9 +3050,6 @@
   .-z-0 {
     z-index: calc(0 * -1);
   }
-  .z-1 {
-    z-index: 1;
-  }
   .z-10 {
     z-index: 10;
   }
@@ -3302,6 +3353,29 @@
       grid-row-start: 2;
     }
   }
+  .drawer-end {
+    @layer daisyui.l1.l2 {
+      grid-auto-columns: auto max-content;
+      > .drawer-toggle {
+        ~ .drawer-content {
+          grid-column-start: 1;
+        }
+        ~ .drawer-side {
+          grid-column-start: 2;
+          justify-items: end;
+        }
+        ~ .drawer-side > :not(.drawer-overlay) {
+          translate: 100%;
+          [dir="rtl"] & {
+            translate: -100%;
+          }
+        }
+        &:checked ~ .drawer-side > :not(.drawer-overlay) {
+          translate: 0%;
+        }
+      }
+    }
+  }
   .stat-value {
     @layer daisyui.l1.l2.l3 {
       grid-column-start: 1;
@@ -3411,6 +3485,9 @@
   .m-1 {
     margin: calc(var(--spacing) * 1);
   }
+  .m-4 {
+    margin: calc(var(--spacing) * 4);
+  }
   .filter {
     @layer daisyui.l1.l2.l3 {
       display: flex;
@@ -3993,6 +4070,19 @@
     mask-size: 100% 100%;
     --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m22 7l-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3C/g%3E%3C/svg%3E");
   }
+  .icon-\[lucide--moon\] {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    background-color: currentColor;
+    -webkit-mask-image: var(--svg);
+    mask-image: var(--svg);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401'/%3E%3C/svg%3E");
+  }
   .icon-\[lucide--paperclip\] {
     display: inline-block;
     width: 1em;
@@ -4071,6 +4161,19 @@
     mask-size: 100% 100%;
     --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2s4-2 4-2M9 9h.01M15 9h.01'/%3E%3C/g%3E%3C/svg%3E");
   }
+  .icon-\[lucide--sun\] {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    background-color: currentColor;
+    -webkit-mask-image: var(--svg);
+    mask-image: var(--svg);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/g%3E%3C/svg%3E");
+  }
   .icon-\[lucide--text\] {
     display: inline-block;
     width: 1em;
@@ -4540,6 +4643,9 @@
   .w-56 {
     width: calc(var(--spacing) * 56);
   }
+  .w-60 {
+    width: calc(var(--spacing) * 60);
+  }
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
@@ -4719,6 +4825,9 @@
   .justify-center {
     justify-content: center;
   }
+  .justify-end {
+    justify-content: flex-end;
+  }
   .justify-start {
     justify-content: flex-start;
   }
@@ -4868,6 +4977,14 @@
       background-image: none;
     }
   }
+  .badge-outline {
+    @layer daisyui.l1.l2 {
+      color: var(--badge-color);
+      --badge-bg: #0000;
+      background-image: none;
+      border-color: currentColor;
+    }
+  }
   .border-base-200\/30 {
     border-color: var(--color-base-200);
     @supports (color: color-mix(in lab, red, red)) {
@@ -5179,6 +5296,10 @@
     font-size: var(--text-7xl);
     line-height: var(--tw-leading, var(--text-7xl--line-height));
   }
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
   .text-lg {
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
@@ -5354,9 +5475,6 @@
   .text-secondary-content {
     color: var(--color-secondary-content);
   }
-  .text-success {
-    color: var(--color-success);
-  }
   .text-transparent {
     color: transparent;
   }

dist/sigpro-ui.esm.js

@@ -28,10 +28,14 @@ __export(exports_All, {
   Toggle: () => Toggle,
   Toast: () => Toast,
   Timeline: () => Timeline,
+  Textrotate: () => Textrotate,
   Textarea: () => Textarea,
-  TextRotate: () => TextRotate,
   Tabs: () => Tabs,
+  TableItems: () => TableItems,
   Table: () => Table,
+  SwapToggle: () => SwapToggle,
+  SwapOn: () => SwapOn,
+  SwapOff: () => SwapOff,
   Swap: () => Swap,
   Steps: () => Steps,
   Step: () => Step,
@@ -56,7 +60,13 @@ __export(exports_All, {
   Fileinput: () => Fileinput,
   Fieldset: () => Fieldset,
   Fab: () => Fab,
+  DropdownContent: () => DropdownContent,
+  DropdownButton: () => DropdownButton,
   Dropdown: () => Dropdown,
+  DrawerToggle: () => DrawerToggle,
+  DrawerSide: () => DrawerSide,
+  DrawerOverlay: () => DrawerOverlay,
+  DrawerContent: () => DrawerContent,
   Drawer: () => Drawer,
   Divider: () => Divider,
   Datepicker: () => Datepicker,
@@ -69,6 +79,9 @@ __export(exports_All, {
   Chat: () => Chat,
   CarouselItem: () => CarouselItem,
   Carousel: () => Carousel,
+  CardTitle: () => CardTitle,
+  CardBody: () => CardBody,
+  CardActions: () => CardActions,
   Card: () => Card,
   Calendar: () => Calendar,
   Button: () => Button,
@@ -520,16 +533,12 @@ var rand = (r) => `${r}-${Math.random().toString(36).slice(2, 9)}`;
 var close = () => document.activeElement?.blur();
 var listKey = (items, isOpen) => {
   const cursor = S(-1);
-  R(() => {
-    if (!get(isOpen))
-      cursor(-1);
-  });
   const onKey = (e, select) => {
     const list = get(items), i = cursor(), len = list.length;
     if (!len)
       return;
     const k2 = e.key;
-    k2 === "ArrowDown" ? (e.preventDefault(), isOpen(true), cursor(Math.min(i + 1, len - 1))) : k2 === "ArrowUp" ? (e.preventDefault(), cursor(Math.max(i - 1, 0))) : k2 === "Enter" ? i >= 0 && (e.preventDefault(), select(list[i])) : k2 === "Escape" && isOpen(false);
+    k2 === "ArrowDown" ? (e.preventDefault(), isOpen(true), cursor(Math.min(i + 1, len - 1))) : k2 === "ArrowUp" ? (e.preventDefault(), cursor(Math.max(i - 1, 0))) : k2 === "Enter" ? i >= 0 && (e.preventDefault(), select(list[i])) : k2 === "Escape" && (isOpen(false), cursor(-1));
   };
   return { cursor, onKey };
 };
@@ -572,7 +581,10 @@ var Autocomplete = ({ items, value, onselect, placeholder = "Buscar...", ...prop
         isOpen(true);
       },
       onfocus: () => isOpen(true),
-      onblur: () => setTimeout(() => isOpen(false), 150),
+      onblur: () => setTimeout(() => {
+        isOpen(false);
+        cursor(-1);
+      }, 150),
       onkeydown: (e) => onKey(e, pick)
     }),
     z(isOpen, () => G({ duration: 200, slide: true }, O("ul", {
@@ -688,15 +700,10 @@ var Calendar = (p2) => {
     p2.hour ? O("div", { class: "mt-3 pt-2 border-t border-base-300" }, rangeMode() ? O("div", { class: "flex gap-4" }, [HourSlider({ value: startHour, onChange: (h) => startHour(h) }), HourSlider({ value: endHour, onChange: (h) => endHour(h) })]) : HourSlider({ value: startHour, onChange: (h) => startHour(h) })) : null
   ]);
 };
-var Card = (p2, c) => {
+var Card = (p2, c) => O("div", { ...p2, class: cls("card", p2.class) }, c);
-  if (!p2.title && !p2.body && !p2.actions && !c)
+var CardTitle = (p2, c) => O("div", { ...p2, class: cls("card-title", p2.class) }, c);
-    return O("div", { ...p2, class: cls("card", p2.class) }, c);
+var CardBody = (p2, c) => O("div", { ...p2, class: cls("card-body", p2.class) }, c);
-  return O("div", { ...p2, class: cls("card", p2.class) }, [
+var CardActions = (p2, c) => O("div", { ...p2, class: cls("card-actions", p2.class) }, c);
-    p2.title && O("div", { class: cls("card-title", p2.titleClass) }, p2.title),
-    (p2.body || c) && O("div", { class: cls("card-body", p2.bodyClass) }, p2.body || c),
-    p2.actions && O("div", { class: cls("card-actions", p2.actionsClass) }, p2.actions)
-  ].filter(Boolean));
-};
 var Carousel = (p2, c) => O("div", { ...p2, class: cls("carousel", p2.class) }, c);
 var CarouselItem = (p2, c) => O("div", { ...p2, class: cls("carousel-item", p2.class) }, c);
 var Chat = (p2, c) => O("div", { ...p2, class: cls("chat", p2.class) }, c);
@@ -857,21 +864,15 @@ var Datepicker = (p2) => {
     ])
   ]);
 };
-var Drawer = (p2, c) => {
+var Drawer = (p2, c) => div({ ...p2, class: cls("drawer", p2.class) }, c);
-  const id = p2.id || rand("drawer");
+var DrawerToggle = (p2) => input({ ...p2, type: "checkbox", class: "drawer-toggle", checked: () => get(p2.checked), onchange: (e) => isFn(p2.checked) && p2.checked(e.target.checked) });
-  return O("div", { class: cls("drawer", p2.class) }, [
+var DrawerContent = (p2, c) => div({ ...p2, class: cls("drawer-content", p2.class) }, c);
-    O("input", { id, type: "checkbox", class: "drawer-toggle", checked: () => get(p2.open), onchange: (e) => isFn(p2.open) && p2.open(e.target.checked) }),
+var DrawerSide = (p2, c) => div({ ...p2, class: cls("drawer-side", p2.class) }, c);
-    O("div", { class: "drawer-side" }, [O("label", { for: id, class: "drawer-overlay", onclick: () => isFn(p2.open) && p2.open(false) }), O("div", { class: "min-h-full bg-base-200 w-80 p-4" }, () => get(p2.side))]),
+var DrawerOverlay = (p2) => label({ ...p2, for: p2.for, class: cls("drawer-overlay", p2.class) });
-    O("div", { class: "drawer-content" }, c)
-  ]);
-};
 var Divider = (p2) => O("div", { ...p2, class: cls("divider", p2.class) });
-var Dropdown = (p2, c) => {
+var Dropdown = (p2, c) => O("div", { ...p2, class: cls("dropdown", p2.class) }, c);
-  return O("div", { ...p2, class: cls("dropdown", p2.class) }, [
+var DropdownButton = (p2, c) => O("div", { ...p2, tabindex: "0", role: "button", class: cls("btn", p2.class) }, c);
-    O("div", { tabindex: "0", role: "button", class: cls("btn", p2.buttonClass) }, p2.label),
+var DropdownContent = (p2, c) => O("div", { ...p2, tabindex: "0", class: cls("dropdown-content", p2.class) }, c);
-    O("div", { tabindex: "-1", class: "dropdown-content" }, c)
-  ]);
-};
 var Fab = (p2, c) => O("div", { class: "fab" }, [O("div", { tabindex: "0", role: "button", class: cls("btn", p2.class) }, Icon(p2.icon)), c]);
 var Fieldset = (p2, c) => O("fieldset", { class: cls("fieldset", p2.class) }, [O("legend", { class: "fieldset-legend" }, p2.label), c]);
 var Fileinput = (p2) => {
@@ -949,7 +950,7 @@ var Fileinput = (p2) => {
 var Icon = (p2) => O("span", { class: p2.startsWith("icon-") ? p2 : "" }, p2.startsWith("icon-") ? null : p2);
 var Indicator = (p2, c) => O("div", { ...p2, class: cls("indicator", p2.class) }, [p2.value && O("span", { class: cls("indicator-item badge", p2.class) }, p2.value), c]);
 var Input = (p2) => {
-  const { label, icon, float, placeholder, value, left, right, rule, hint, content, ...rest } = p2;
+  const { label: label2, icon, float, placeholder, value, left, right, rule, hint, content, ...rest } = p2;
   const showPassword = S(false);
   const isFocused = S(false);
   const isPassword = p2.type === "password";
@@ -965,16 +966,16 @@ var Input = (p2) => {
     }
   }, [
     O("label", { class: float ? "floating-label" : "" }, [
-      float ? O("span", {}, label) : null,
+      float ? O("span", {}, label2) : null,
       O("label", { pattern, class: () => cls("input validator", p2.class) }, [
-        label && !float ? O("span", { class: "label" }, label) : null,
+        label2 && !float ? O("span", { class: "label" }, label2) : null,
         left ?? null,
-        O("input", { ...rest, type: inputType, class: "grow", pattern, placeholder: placeholder || label || " ", value }),
+        O("input", { ...rest, type: inputType, class: "grow", pattern, placeholder: placeholder || label2 || " ", value }),
         right ?? null,
-        isPassword ? O("label", { class: "swap swap-rotate ml-2" }, [
+        isPassword ? Swap({ class: "ml-2" }, [
-          O("input", { type: "checkbox", onchange: (e) => showPassword(e.target.checked) }),
+          SwapToggle({ value: showPassword, class: "swap-rotate" }),
-          O("span", { class: "swap-on icon-[lucide--eye]" }),
+          SwapOn({}, Icon("icon-[lucide--eye]")),
-          O("span", { class: "swap-off icon-[lucide--eye-off]" })
+          SwapOff({}, Icon("icon-[lucide--eye-off]"))
         ]) : null
       ]),
       hint ? O("div", { class: "validator-hint" }, hint) : null,
@@ -1060,16 +1061,16 @@ var Rating = (p2) => {
 var Select = (p2, c) => {
   if (c !== undefined)
     return O("select", { class: cls("select", p2.class), ...p2 }, c);
-  const { label, float, placeholder, placeholderDisabled = true, value, left, right, hint, items, keyFn, ...rest } = p2;
+  const { label: label2, float, placeholder, placeholderDisabled = true, value, left, right, hint, items, keyFn, ...rest } = p2;
   const opts = () => {
     const raw = get(items) || [];
     const ph = placeholder ? [{ disabled: placeholderDisabled, label: placeholder, value: "" }] : [];
     return [...ph, ...raw];
   };
   return O("label", { class: float ? "floating-label" : "" }, [
-    float ? O("span", {}, label) : null,
+    float ? O("span", {}, label2) : null,
     O("label", { class: cls("select", rest.class) }, [
-      !float && label ? O("span", { class: "label" }, label) : null,
+      !float && label2 ? O("span", { class: "label" }, label2) : null,
       left ?? null,
       O("select", {
         value: () => get(value),
@@ -1089,21 +1090,21 @@ var SkeletonText = (p2) => O("span", { ...p2, class: cls("skeleton skeleton-text
 var Stack = (p2, c) => O("div", { ...p2, class: cls("stack", p2.class) }, c);
 var Steps = (p2, c) => O("ul", { ...p2, class: cls("steps", p2.class) }, c);
 var Step = (p2, c) => O("li", { ...p2, class: cls("step", p2.class), "data-content": p2.dataContent }, c);
-var Swap = (p2) => O("label", { ...p2, class: cls("swap", p2.class) }, [
+var Swap = (p2, c) => O("label", { ...p2, class: cls("swap", p2.class) }, c);
-  O("input", { type: "checkbox", checked: () => get(p2.value), onchange: (e) => isFn(p2.value) && p2.value(e.target.checked) }),
+var SwapToggle = (p2) => O("input", { type: "checkbox", checked: () => get(p2.value), onchange: (e) => isFn(p2.value) && p2.value(e.target.checked), class: p2.class });
-  O("div", { class: "swap-on" }, p2.on),
+var SwapOn = (p2, c) => O("div", { ...p2, class: cls("swap-on", p2.class) }, c);
-  O("div", { class: "swap-off" }, p2.off)
+var SwapOff = (p2, c) => O("div", { ...p2, class: cls("swap-off", p2.class) }, c);
-]);
+var Table = (p2, c) => O("table", { ...p2, class: cls("table", p2.class) }, c);
-var Table = (p2) => {
+var TableItems = ({ items, columns = [], header = true }) => {
-  if (p2.children !== undefined)
+  const head = header !== false && columns.some((c) => c.label) ? O("thead", {}, O("tr", {}, columns.map((c) => O("th", { class: c.class }, c.label)))) : null;
-    return O("table", { class: cls("table", p2.class), ...p2 }, p2.children);
+  const body = O("tbody", {}, () => {
-  const { items, columns = [], header = true, keyFn, ...rest } = p2;
+    const list = get(items) || [];
-  const hd = header !== false && columns.some((c) => c.label) ? O("thead", {}, O("tr", {}, columns.map((c) => O("th", { class: c.class }, c.label)))) : null;
+    return list.map((it, idx) => O("tr", {}, columns.map((c) => {
-  const bd = O("tbody", {}, K(() => get(items) || [], (it, idx) => O("tr", {}, columns.map((c) => {
+      const v2 = c.render ? c.render(it, idx) : it[c.key];
-    const v2 = c.render ? c.render(it, idx) : it[c.key];
+      return O("td", { class: c.class }, v2);
-    return O("td", { class: c.class }, v2);
+    })));
-  }))));
+  });
-  return O("table", { class: cls("table", rest.class), ...rest }, [hd, bd]);
+  return [head, body].filter(Boolean);
 };
 var Tabs = (p2, c) => {
   if (!p2.items) {
@@ -1149,10 +1150,7 @@ var Tabs = (p2, c) => {
   });
 };
 var Textarea = (p2) => O("textarea", { ...p2, class: cls("textarea", p2.class) });
-var TextRotate = (p2) => {
+var Textrotate = (p2, c) => O("span", { ...p2, class: cls("text-rotate", p2.class) }, c);
-  const words = Array.isArray(p2.words) ? p2.words : typeof p2.words === "string" ? p2.words.split(",") : [];
-  return O("span", { ...p2, class: cls("text-rotate", p2.class) }, O("span", {}, words.map((w2) => O("span", {}, w2))));
-};
 var Timeline = (p2, c) => O("ul", { ...p2, class: cls("timeline", p2.class) }, c);
 var Toast = (message, type = "alert-success", duration = 3500) => {
   let container = document.getElementById("sigpro-toast-container");
@@ -1209,252 +1207,6 @@ var Toast = (message, type = "alert-success", duration = 3500) => {
 var Toggle = (p2) => O("input", { ...p2, type: "checkbox", class: cls("toggle", p2.class) });
 var Tooltip = (p2, c) => O("div", { ...p2, class: cls("tooltip", p2.class), "data-tip": p2.tip }, c);
 
-// components/Editor.js
-var exports_Editor = {};
-__export(exports_Editor, {
-  Editor: () => Editor
-});
-var Editor = (p2) => {
-  const { value, class: extraClass } = p2;
-  let editorRef = null;
-  let savedRange = null;
-  const isSource = S(false);
-  const source = S("");
-  const count = S(0);
-  const refreshTick = S(0);
-  const showEmojis = S(false);
-  const emojis = ["\uD83D\uDE00", "\uD83D\uDE0A", "\uD83D\uDE09", "\uD83E\uDDD0", "\uD83D\uDE2E", "\uD83E\uDD14", "\uD83D\uDE05", "\uD83D\uDE02", "\uD83D\uDE0D", "\uD83D\uDE18", "\uD83E\uDD70", "\uD83D\uDC4D", "\uD83D\uDC4E", "\uD83D\uDC4C", "\uD83E\uDD1D", "\uD83E\uDD1E", "\uD83D\uDC4B", "\uD83D\uDC4F", "\uD83D\uDE4C", "\uD83D\uDE4F", "\uD83D\uDCAA", "☝️", "\uD83D\uDC47", "\uD83D\uDC48", "\uD83D\uDC49", "\uD83D\uDD95", "✅", "⚠️", "\uD83D\uDE80", "\uD83D\uDCE2", "✉️", "❤️"];
-  const saveSelection = () => {
-    const sel = window.getSelection();
-    if (sel.getRangeAt && sel.rangeCount)
-      savedRange = sel.getRangeAt(0);
-  };
-  const restoreSelection = () => {
-    if (savedRange) {
-      const sel = window.getSelection();
-      sel.removeAllRanges();
-      sel.addRange(savedRange);
-    }
-  };
-  const triggerRefresh = () => {
-    refreshTick(refreshTick() + 1);
-    if (editorRef)
-      count(editorRef.innerText.length);
-  };
-  const notify = () => {
-    if (!editorRef)
-      return;
-    const html = editorRef.innerHTML;
-    if (isFn(value))
-      value(html);
-    else
-      p2.onchange?.(html);
-    triggerRefresh();
-  };
-  const exec = (cmd, val = null) => {
-    if (!editorRef)
-      return;
-    editorRef.focus();
-    if (savedRange)
-      restoreSelection();
-    document.execCommand(cmd, false, val);
-    savedRange = null;
-    notify();
-  };
-  const openLightbox = (src) => {
-    const overlay = document.createElement("div");
-    overlay.style = `position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:9999;display:flex;align-items:center;justify-content:center;cursor:zoom-out;`;
-    const img = document.createElement("img");
-    img.src = src;
-    img.style = `max-width:95%;max-height:95%;box-shadow:0 0 30px rgba(0,0,0,0.5);border-radius:4px;`;
-    overlay.onclick = () => document.body.removeChild(overlay);
-    overlay.appendChild(img);
-    document.body.appendChild(overlay);
-  };
-  const handleUpload = (file) => {
-    if (!file)
-      return;
-    const reader = new FileReader;
-    reader.onload = (re) => {
-      if (file.type.startsWith("image/")) {
-        const imgHtml = `<div style="display:inline-block; resize:both; overflow:hidden; vertical-align:bottom; line-height:0; width:200px; height:auto; border:1px dashed #ccc; padding:2px; cursor:pointer;" class="resizable-img-container"><img src="${re.target.result}" style="width:100%; height:100%; object-fit:contain; pointer-events:none;"></div>&nbsp;`;
-        exec("insertHTML", imgHtml);
-      } else {
-        const linkHtml = `<a href="${re.target.result}" download="${file.name}" contenteditable="false" style="display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border:1px solid #ccc; border-radius:4px; background:#f9f9f9; text-decoration:none; color:#333; font-size:12px; margin:2px; cursor:pointer;"><span class="icon-[lucide--paperclip] w-3 h-3"></span>${file.name}</a>&nbsp;`;
-        exec("insertHTML", linkHtml);
-      }
-    };
-    reader.readAsDataURL(file);
-  };
-  const queryState = (cmd, val = null) => {
-    refreshTick();
-    if (!editorRef || isSource())
-      return false;
-    try {
-      if (cmd === "formatBlock") {
-        let node = window.getSelection().getRangeAt(0).commonAncestorContainer;
-        while (node && node !== editorRef) {
-          if (node.nodeType === 1 && node.tagName === val)
-            return true;
-          node = node.parentNode;
-        }
-        return false;
-      }
-      return document.queryCommandState(cmd);
-    } catch (e) {
-      return false;
-    }
-  };
-  const toolbar = O("div", { class: "flex flex-wrap items-center gap-1 p-2 border-b border-base-300 bg-base-200 sticky top-0 z-20" }, [
-    O("div", { class: "flex flex-wrap gap-1 flex-1 items-center" }, [
-      O("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState("bold") ? "btn-active bg-primary/20" : ""}`, onclick: () => exec("bold") }, O("span", { class: "icon-[lucide--bold]" })),
-      O("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState("italic") ? "btn-active bg-primary/20" : ""}`, onclick: () => exec("italic") }, O("span", { class: "icon-[lucide--italic]" })),
-      O("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState("underline") ? "btn-active bg-primary/20" : ""}`, onclick: () => exec("underline") }, O("span", { class: "icon-[lucide--underline]" })),
-      O("input", { type: "color", class: "w-5 h-5 p-0 border-0 bg-transparent cursor-pointer", oninput: (e) => exec("foreColor", e.target.value) }),
-      O("span", { class: "w-px h-5 bg-base-300 mx-1" }),
-      O("button", {
-        type: "button",
-        class: "btn btn-ghost btn-xs",
-        onclick: () => exec("justifyLeft")
-      }, O("span", { class: "icon-[lucide--align-left]" })),
-      O("button", {
-        type: "button",
-        class: "btn btn-ghost btn-xs",
-        onclick: () => exec("justifyCenter")
-      }, O("span", { class: "icon-[lucide--align-center]" })),
-      O("button", {
-        type: "button",
-        class: "btn btn-ghost btn-xs",
-        onclick: () => exec("justifyRight")
-      }, O("span", { class: "icon-[lucide--align-right]" })),
-      O("span", { class: "w-px h-5 bg-base-300 mx-1" }),
-      O("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("insertUnorderedList") }, O("span", { class: "icon-[lucide--list]" })),
-      O("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("insertOrderedList") }, O("span", { class: "icon-[lucide--list-ordered]" })),
-      O("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("outdent"), title: "Mover izquierda" }, O("span", { class: "icon-[lucide--indent-decrease]" })),
-      O("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("indent"), title: "Mover derecha (Tab)" }, O("span", { class: "icon-[lucide--indent-increase]" })),
-      O("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState("formatBlock", "BLOCKQUOTE") ? "btn-active" : ""}`, onclick: () => exec("formatBlock", queryState("formatBlock", "BLOCKQUOTE") ? "P" : "BLOCKQUOTE") }, O("span", { class: "icon-[lucide--quote]" })),
-      O("span", { class: "w-px h-5 bg-base-300 mx-1" }),
-      O("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => {
-        const url = window.prompt("URL:");
-        if (url)
-          exec("createLink", url);
-      } }, O("span", { class: "icon-[lucide--link]" })),
-      O("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => {
-        const input = document.createElement("input");
-        input.type = "file";
-        input.onchange = (e) => handleUpload(e.target.files[0]);
-        input.click();
-      } }, O("span", { class: "icon-[lucide--paperclip]" })),
-      O("div", { class: "relative" }, [
-        O("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: (e) => {
-          e.stopPropagation();
-          saveSelection();
-          showEmojis(!showEmojis());
-        } }, O("span", { class: "icon-[lucide--smile]" })),
-        O("div", { class: "absolute top-full left-0 mt-1 p-2 bg-base-100 border border-base-300 shadow-xl rounded-box w-52 z-50 flex flex-wrap gap-1", style: () => showEmojis() ? "display:flex" : "display:none" }, emojis.map((emo) => O("span", { class: "cursor-pointer hover:bg-base-200 p-1 rounded text-lg", onclick: (e) => {
-          e.stopPropagation();
-          exec("insertText", emo);
-          showEmojis(false);
-        } }, emo)))
-      ]),
-      O("span", { class: "w-px h-5 bg-base-300 mx-1" }),
-      O("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("removeFormat") }, O("span", { class: "icon-[lucide--eraser]" })),
-      O("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("undo"), title: "Deshacer" }, O("span", { class: "icon-[lucide--undo-2]" })),
-      O("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("redo"), title: "Rehacer" }, O("span", { class: "icon-[lucide--redo-2]" }))
-    ]),
-    O("button", { type: "button", class: () => `btn btn-ghost btn-xs ${isSource() ? "btn-active" : ""}`, onclick: () => {
-      if (!isSource())
-        source(editorRef?.innerHTML || "");
-      else if (editorRef) {
-        editorRef.innerHTML = source();
-        notify();
-      }
-      isSource(!isSource());
-    } }, O("span", { class: "icon-[lucide--code-2]" }))
-  ]);
-  if (typeof document !== "undefined" && !document.getElementById("editor-styles")) {
-    const style = document.createElement("style");
-    style.id = "editor-styles";
-    style.textContent = `
-    [contenteditable="true"] div,
-    [contenteditable="true"] p {
-      margin: 0;
-      padding: 0;
-    }
-  `;
-    document.head.appendChild(style);
-  }
-  return O("div", { class: cls("border border-base-300 rounded-box bg-base-100 overflow-hidden shadow-sm flex flex-col", extraClass) }, [
-    toolbar,
-    O("div", { class: "relative flex-1 flex flex-col", onclick: () => showEmojis(false) }, [
-      O("div", {
-        ref: (el) => {
-          if (!editorRef && el) {
-            editorRef = el;
-            el.innerHTML = get(value) || "";
-            document.execCommand("defaultParagraphSeparator", false, "br");
-            el.addEventListener("click", (e) => {
-              const container = e.target.closest(".resizable-img-container");
-              if (container) {
-                const img = container.querySelector("img");
-                if (img)
-                  openLightbox(img.src);
-              }
-            });
-          }
-        },
-        style: () => `min-height:22rem;${isSource() ? "display:none" : ""}`,
-        class: "p-4 outline-none text-base-content leading-relaxed [&>div]:m-0 [&>p]:m-0 [&>div]:min-h-[1em] [&_.resizable-img-container]:hover:border-primary [&_blockquote]:border-l-4 [&_blockquote]:border-base-300 [&_blockquote]:pl-4 [&_blockquote]:italic [&_ul]:list-disc [&_ul]:pl-8 [&_ol]:list-decimal [&_ol]:pl-8",
-        contenteditable: "true",
-        oninput: notify,
-        onkeydown: (e) => {
-          if (e.key === "Tab") {
-            e.preventDefault();
-            exec("indent");
-          }
-        },
-        onkeyup: () => {
-          triggerRefresh();
-          saveSelection();
-        },
-        onclick: (e) => {
-          triggerRefresh();
-          saveSelection();
-          e.stopPropagation();
-        },
-        onmouseup: () => {
-          notify();
-          saveSelection();
-        },
-        onpaste: (e) => {
-          e.preventDefault();
-          const text = e.clipboardData.getData("text/plain");
-          exec("insertText", text);
-        },
-        ondragover: (e) => e.preventDefault(),
-        ondrop: (e) => {
-          e.preventDefault();
-          handleUpload(e.dataTransfer.files[0]);
-        }
-      }),
-      O("textarea", {
-        class: "w-full flex-1 min-h-[22rem] p-4 outline-none font-mono text-sm bg-base-200 border-0",
-        style: () => isSource() ? "" : "display:none",
-        value: source,
-        oninput: (e) => {
-          source(e.target.value);
-          if (editorRef)
-            editorRef.innerHTML = e.target.value;
-          p2.onchange?.(e.target.value);
-        }
-      })
-    ]),
-    O("div", { class: "px-3 py-1 border-t border-base-300 bg-base-100/50 text-[10px] text-right text-base-content/60 italic" }, [
-      O("span", () => `${count()} caracteres`)
-    ])
-  ]);
-};
-
 // utils.js
 var i18n = {
   es: {
@@ -1480,8 +1232,7 @@ var tt = (t) => () => i18n[currentLocale()][t] || t;
 
 // index.js
 var Components = {
-  ...exports_All,
+  ...exports_All
-  ...exports_Editor
 };
 var Utils = {
   Locale,

dist/sigpro-ui.js

@@ -59,10 +59,14 @@
     Toggle: () => Toggle,
     Toast: () => Toast,
     Timeline: () => Timeline,
+    Textrotate: () => Textrotate,
     Textarea: () => Textarea,
-    TextRotate: () => TextRotate,
     Tabs: () => Tabs,
+    TableItems: () => TableItems,
     Table: () => Table,
+    SwapToggle: () => SwapToggle,
+    SwapOn: () => SwapOn,
+    SwapOff: () => SwapOff,
     Swap: () => Swap,
     Steps: () => Steps,
     Step: () => Step,
@@ -87,7 +91,13 @@
     Fileinput: () => Fileinput,
     Fieldset: () => Fieldset,
     Fab: () => Fab,
+    DropdownContent: () => DropdownContent,
+    DropdownButton: () => DropdownButton,
     Dropdown: () => Dropdown,
+    DrawerToggle: () => DrawerToggle,
+    DrawerSide: () => DrawerSide,
+    DrawerOverlay: () => DrawerOverlay,
+    DrawerContent: () => DrawerContent,
     Drawer: () => Drawer,
     Divider: () => Divider,
     Datepicker: () => Datepicker,
@@ -100,6 +110,9 @@
     Chat: () => Chat,
     CarouselItem: () => CarouselItem,
     Carousel: () => Carousel,
+    CardTitle: () => CardTitle,
+    CardBody: () => CardBody,
+    CardActions: () => CardActions,
     Card: () => Card,
     Calendar: () => Calendar,
     Button: () => Button,
@@ -551,16 +564,12 @@
   var close = () => document.activeElement?.blur();
   var listKey = (items, isOpen) => {
     const cursor = S(-1);
-    R(() => {
-      if (!get(isOpen))
-        cursor(-1);
-    });
     const onKey = (e, select) => {
       const list = get(items), i = cursor(), len = list.length;
       if (!len)
         return;
       const k2 = e.key;
-      k2 === "ArrowDown" ? (e.preventDefault(), isOpen(true), cursor(Math.min(i + 1, len - 1))) : k2 === "ArrowUp" ? (e.preventDefault(), cursor(Math.max(i - 1, 0))) : k2 === "Enter" ? i >= 0 && (e.preventDefault(), select(list[i])) : k2 === "Escape" && isOpen(false);
+      k2 === "ArrowDown" ? (e.preventDefault(), isOpen(true), cursor(Math.min(i + 1, len - 1))) : k2 === "ArrowUp" ? (e.preventDefault(), cursor(Math.max(i - 1, 0))) : k2 === "Enter" ? i >= 0 && (e.preventDefault(), select(list[i])) : k2 === "Escape" && (isOpen(false), cursor(-1));
     };
     return { cursor, onKey };
   };
@@ -603,7 +612,10 @@
           isOpen(true);
         },
         onfocus: () => isOpen(true),
-        onblur: () => setTimeout(() => isOpen(false), 150),
+        onblur: () => setTimeout(() => {
+          isOpen(false);
+          cursor(-1);
+        }, 150),
         onkeydown: (e) => onKey(e, pick)
       }),
       z(isOpen, () => G({ duration: 200, slide: true }, O("ul", {
@@ -719,15 +731,10 @@
       p2.hour ? O("div", { class: "mt-3 pt-2 border-t border-base-300" }, rangeMode() ? O("div", { class: "flex gap-4" }, [HourSlider({ value: startHour, onChange: (h) => startHour(h) }), HourSlider({ value: endHour, onChange: (h) => endHour(h) })]) : HourSlider({ value: startHour, onChange: (h) => startHour(h) })) : null
     ]);
   };
-  var Card = (p2, c) => {
+  var Card = (p2, c) => O("div", { ...p2, class: cls("card", p2.class) }, c);
-    if (!p2.title && !p2.body && !p2.actions && !c)
+  var CardTitle = (p2, c) => O("div", { ...p2, class: cls("card-title", p2.class) }, c);
-      return O("div", { ...p2, class: cls("card", p2.class) }, c);
+  var CardBody = (p2, c) => O("div", { ...p2, class: cls("card-body", p2.class) }, c);
-    return O("div", { ...p2, class: cls("card", p2.class) }, [
+  var CardActions = (p2, c) => O("div", { ...p2, class: cls("card-actions", p2.class) }, c);
-      p2.title && O("div", { class: cls("card-title", p2.titleClass) }, p2.title),
-      (p2.body || c) && O("div", { class: cls("card-body", p2.bodyClass) }, p2.body || c),
-      p2.actions && O("div", { class: cls("card-actions", p2.actionsClass) }, p2.actions)
-    ].filter(Boolean));
-  };
   var Carousel = (p2, c) => O("div", { ...p2, class: cls("carousel", p2.class) }, c);
   var CarouselItem = (p2, c) => O("div", { ...p2, class: cls("carousel-item", p2.class) }, c);
   var Chat = (p2, c) => O("div", { ...p2, class: cls("chat", p2.class) }, c);
@@ -888,21 +895,15 @@
       ])
     ]);
   };
-  var Drawer = (p2, c) => {
+  var Drawer = (p2, c) => div({ ...p2, class: cls("drawer", p2.class) }, c);
-    const id = p2.id || rand("drawer");
+  var DrawerToggle = (p2) => input({ ...p2, type: "checkbox", class: "drawer-toggle", checked: () => get(p2.checked), onchange: (e) => isFn(p2.checked) && p2.checked(e.target.checked) });
-    return O("div", { class: cls("drawer", p2.class) }, [
+  var DrawerContent = (p2, c) => div({ ...p2, class: cls("drawer-content", p2.class) }, c);
-      O("input", { id, type: "checkbox", class: "drawer-toggle", checked: () => get(p2.open), onchange: (e) => isFn(p2.open) && p2.open(e.target.checked) }),
+  var DrawerSide = (p2, c) => div({ ...p2, class: cls("drawer-side", p2.class) }, c);
-      O("div", { class: "drawer-side" }, [O("label", { for: id, class: "drawer-overlay", onclick: () => isFn(p2.open) && p2.open(false) }), O("div", { class: "min-h-full bg-base-200 w-80 p-4" }, () => get(p2.side))]),
+  var DrawerOverlay = (p2) => label({ ...p2, for: p2.for, class: cls("drawer-overlay", p2.class) });
-      O("div", { class: "drawer-content" }, c)
-    ]);
-  };
   var Divider = (p2) => O("div", { ...p2, class: cls("divider", p2.class) });
-  var Dropdown = (p2, c) => {
+  var Dropdown = (p2, c) => O("div", { ...p2, class: cls("dropdown", p2.class) }, c);
-    return O("div", { ...p2, class: cls("dropdown", p2.class) }, [
+  var DropdownButton = (p2, c) => O("div", { ...p2, tabindex: "0", role: "button", class: cls("btn", p2.class) }, c);
-      O("div", { tabindex: "0", role: "button", class: cls("btn", p2.buttonClass) }, p2.label),
+  var DropdownContent = (p2, c) => O("div", { ...p2, tabindex: "0", class: cls("dropdown-content", p2.class) }, c);
-      O("div", { tabindex: "-1", class: "dropdown-content" }, c)
-    ]);
-  };
   var Fab = (p2, c) => O("div", { class: "fab" }, [O("div", { tabindex: "0", role: "button", class: cls("btn", p2.class) }, Icon(p2.icon)), c]);
   var Fieldset = (p2, c) => O("fieldset", { class: cls("fieldset", p2.class) }, [O("legend", { class: "fieldset-legend" }, p2.label), c]);
   var Fileinput = (p2) => {
@@ -980,7 +981,7 @@
   var Icon = (p2) => O("span", { class: p2.startsWith("icon-") ? p2 : "" }, p2.startsWith("icon-") ? null : p2);
   var Indicator = (p2, c) => O("div", { ...p2, class: cls("indicator", p2.class) }, [p2.value && O("span", { class: cls("indicator-item badge", p2.class) }, p2.value), c]);
   var Input = (p2) => {
-    const { label, icon, float, placeholder, value, left, right, rule, hint, content, ...rest } = p2;
+    const { label: label2, icon, float, placeholder, value, left, right, rule, hint, content, ...rest } = p2;
     const showPassword = S(false);
     const isFocused = S(false);
     const isPassword = p2.type === "password";
@@ -996,16 +997,16 @@
       }
     }, [
       O("label", { class: float ? "floating-label" : "" }, [
-        float ? O("span", {}, label) : null,
+        float ? O("span", {}, label2) : null,
         O("label", { pattern, class: () => cls("input validator", p2.class) }, [
-          label && !float ? O("span", { class: "label" }, label) : null,
+          label2 && !float ? O("span", { class: "label" }, label2) : null,
           left ?? null,
-          O("input", { ...rest, type: inputType, class: "grow", pattern, placeholder: placeholder || label || " ", value }),
+          O("input", { ...rest, type: inputType, class: "grow", pattern, placeholder: placeholder || label2 || " ", value }),
           right ?? null,
-          isPassword ? O("label", { class: "swap swap-rotate ml-2" }, [
+          isPassword ? Swap({ class: "ml-2" }, [
-            O("input", { type: "checkbox", onchange: (e) => showPassword(e.target.checked) }),
+            SwapToggle({ value: showPassword, class: "swap-rotate" }),
-            O("span", { class: "swap-on icon-[lucide--eye]" }),
+            SwapOn({}, Icon("icon-[lucide--eye]")),
-            O("span", { class: "swap-off icon-[lucide--eye-off]" })
+            SwapOff({}, Icon("icon-[lucide--eye-off]"))
           ]) : null
         ]),
         hint ? O("div", { class: "validator-hint" }, hint) : null,
@@ -1091,16 +1092,16 @@
   var Select = (p2, c) => {
     if (c !== undefined)
       return O("select", { class: cls("select", p2.class), ...p2 }, c);
-    const { label, float, placeholder, placeholderDisabled = true, value, left, right, hint, items, keyFn, ...rest } = p2;
+    const { label: label2, float, placeholder, placeholderDisabled = true, value, left, right, hint, items, keyFn, ...rest } = p2;
     const opts = () => {
       const raw = get(items) || [];
       const ph = placeholder ? [{ disabled: placeholderDisabled, label: placeholder, value: "" }] : [];
       return [...ph, ...raw];
     };
     return O("label", { class: float ? "floating-label" : "" }, [
-      float ? O("span", {}, label) : null,
+      float ? O("span", {}, label2) : null,
       O("label", { class: cls("select", rest.class) }, [
-        !float && label ? O("span", { class: "label" }, label) : null,
+        !float && label2 ? O("span", { class: "label" }, label2) : null,
         left ?? null,
         O("select", {
           value: () => get(value),
@@ -1120,21 +1121,21 @@
   var Stack = (p2, c) => O("div", { ...p2, class: cls("stack", p2.class) }, c);
   var Steps = (p2, c) => O("ul", { ...p2, class: cls("steps", p2.class) }, c);
   var Step = (p2, c) => O("li", { ...p2, class: cls("step", p2.class), "data-content": p2.dataContent }, c);
-  var Swap = (p2) => O("label", { ...p2, class: cls("swap", p2.class) }, [
+  var Swap = (p2, c) => O("label", { ...p2, class: cls("swap", p2.class) }, c);
-    O("input", { type: "checkbox", checked: () => get(p2.value), onchange: (e) => isFn(p2.value) && p2.value(e.target.checked) }),
+  var SwapToggle = (p2) => O("input", { type: "checkbox", checked: () => get(p2.value), onchange: (e) => isFn(p2.value) && p2.value(e.target.checked), class: p2.class });
-    O("div", { class: "swap-on" }, p2.on),
+  var SwapOn = (p2, c) => O("div", { ...p2, class: cls("swap-on", p2.class) }, c);
-    O("div", { class: "swap-off" }, p2.off)
+  var SwapOff = (p2, c) => O("div", { ...p2, class: cls("swap-off", p2.class) }, c);
-  ]);
+  var Table = (p2, c) => O("table", { ...p2, class: cls("table", p2.class) }, c);
-  var Table = (p2) => {
+  var TableItems = ({ items, columns = [], header = true }) => {
-    if (p2.children !== undefined)
+    const head = header !== false && columns.some((c) => c.label) ? O("thead", {}, O("tr", {}, columns.map((c) => O("th", { class: c.class }, c.label)))) : null;
-      return O("table", { class: cls("table", p2.class), ...p2 }, p2.children);
+    const body = O("tbody", {}, () => {
-    const { items, columns = [], header = true, keyFn, ...rest } = p2;
+      const list = get(items) || [];
-    const hd = header !== false && columns.some((c) => c.label) ? O("thead", {}, O("tr", {}, columns.map((c) => O("th", { class: c.class }, c.label)))) : null;
+      return list.map((it, idx) => O("tr", {}, columns.map((c) => {
-    const bd = O("tbody", {}, K(() => get(items) || [], (it, idx) => O("tr", {}, columns.map((c) => {
+        const v2 = c.render ? c.render(it, idx) : it[c.key];
-      const v2 = c.render ? c.render(it, idx) : it[c.key];
+        return O("td", { class: c.class }, v2);
-      return O("td", { class: c.class }, v2);
+      })));
-    }))));
+    });
-    return O("table", { class: cls("table", rest.class), ...rest }, [hd, bd]);
+    return [head, body].filter(Boolean);
   };
   var Tabs = (p2, c) => {
     if (!p2.items) {
@@ -1180,10 +1181,7 @@
     });
   };
   var Textarea = (p2) => O("textarea", { ...p2, class: cls("textarea", p2.class) });
-  var TextRotate = (p2) => {
+  var Textrotate = (p2, c) => O("span", { ...p2, class: cls("text-rotate", p2.class) }, c);
-    const words = Array.isArray(p2.words) ? p2.words : typeof p2.words === "string" ? p2.words.split(",") : [];
-    return O("span", { ...p2, class: cls("text-rotate", p2.class) }, O("span", {}, words.map((w2) => O("span", {}, w2))));
-  };
   var Timeline = (p2, c) => O("ul", { ...p2, class: cls("timeline", p2.class) }, c);
   var Toast = (message, type = "alert-success", duration = 3500) => {
     let container = document.getElementById("sigpro-toast-container");
@@ -1240,252 +1238,6 @@
   var Toggle = (p2) => O("input", { ...p2, type: "checkbox", class: cls("toggle", p2.class) });
   var Tooltip = (p2, c) => O("div", { ...p2, class: cls("tooltip", p2.class), "data-tip": p2.tip }, c);
 
-  // components/Editor.js
-  var exports_Editor = {};
-  __export(exports_Editor, {
-    Editor: () => Editor
-  });
-  var Editor = (p2) => {
-    const { value, class: extraClass } = p2;
-    let editorRef = null;
-    let savedRange = null;
-    const isSource = S(false);
-    const source = S("");
-    const count = S(0);
-    const refreshTick = S(0);
-    const showEmojis = S(false);
-    const emojis = ["\uD83D\uDE00", "\uD83D\uDE0A", "\uD83D\uDE09", "\uD83E\uDDD0", "\uD83D\uDE2E", "\uD83E\uDD14", "\uD83D\uDE05", "\uD83D\uDE02", "\uD83D\uDE0D", "\uD83D\uDE18", "\uD83E\uDD70", "\uD83D\uDC4D", "\uD83D\uDC4E", "\uD83D\uDC4C", "\uD83E\uDD1D", "\uD83E\uDD1E", "\uD83D\uDC4B", "\uD83D\uDC4F", "\uD83D\uDE4C", "\uD83D\uDE4F", "\uD83D\uDCAA", "☝️", "\uD83D\uDC47", "\uD83D\uDC48", "\uD83D\uDC49", "\uD83D\uDD95", "✅", "⚠️", "\uD83D\uDE80", "\uD83D\uDCE2", "✉️", "❤️"];
-    const saveSelection = () => {
-      const sel = window.getSelection();
-      if (sel.getRangeAt && sel.rangeCount)
-        savedRange = sel.getRangeAt(0);
-    };
-    const restoreSelection = () => {
-      if (savedRange) {
-        const sel = window.getSelection();
-        sel.removeAllRanges();
-        sel.addRange(savedRange);
-      }
-    };
-    const triggerRefresh = () => {
-      refreshTick(refreshTick() + 1);
-      if (editorRef)
-        count(editorRef.innerText.length);
-    };
-    const notify = () => {
-      if (!editorRef)
-        return;
-      const html = editorRef.innerHTML;
-      if (isFn(value))
-        value(html);
-      else
-        p2.onchange?.(html);
-      triggerRefresh();
-    };
-    const exec = (cmd, val = null) => {
-      if (!editorRef)
-        return;
-      editorRef.focus();
-      if (savedRange)
-        restoreSelection();
-      document.execCommand(cmd, false, val);
-      savedRange = null;
-      notify();
-    };
-    const openLightbox = (src) => {
-      const overlay = document.createElement("div");
-      overlay.style = `position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:9999;display:flex;align-items:center;justify-content:center;cursor:zoom-out;`;
-      const img = document.createElement("img");
-      img.src = src;
-      img.style = `max-width:95%;max-height:95%;box-shadow:0 0 30px rgba(0,0,0,0.5);border-radius:4px;`;
-      overlay.onclick = () => document.body.removeChild(overlay);
-      overlay.appendChild(img);
-      document.body.appendChild(overlay);
-    };
-    const handleUpload = (file) => {
-      if (!file)
-        return;
-      const reader = new FileReader;
-      reader.onload = (re) => {
-        if (file.type.startsWith("image/")) {
-          const imgHtml = `<div style="display:inline-block; resize:both; overflow:hidden; vertical-align:bottom; line-height:0; width:200px; height:auto; border:1px dashed #ccc; padding:2px; cursor:pointer;" class="resizable-img-container"><img src="${re.target.result}" style="width:100%; height:100%; object-fit:contain; pointer-events:none;"></div>&nbsp;`;
-          exec("insertHTML", imgHtml);
-        } else {
-          const linkHtml = `<a href="${re.target.result}" download="${file.name}" contenteditable="false" style="display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border:1px solid #ccc; border-radius:4px; background:#f9f9f9; text-decoration:none; color:#333; font-size:12px; margin:2px; cursor:pointer;"><span class="icon-[lucide--paperclip] w-3 h-3"></span>${file.name}</a>&nbsp;`;
-          exec("insertHTML", linkHtml);
-        }
-      };
-      reader.readAsDataURL(file);
-    };
-    const queryState = (cmd, val = null) => {
-      refreshTick();
-      if (!editorRef || isSource())
-        return false;
-      try {
-        if (cmd === "formatBlock") {
-          let node = window.getSelection().getRangeAt(0).commonAncestorContainer;
-          while (node && node !== editorRef) {
-            if (node.nodeType === 1 && node.tagName === val)
-              return true;
-            node = node.parentNode;
-          }
-          return false;
-        }
-        return document.queryCommandState(cmd);
-      } catch (e) {
-        return false;
-      }
-    };
-    const toolbar = O("div", { class: "flex flex-wrap items-center gap-1 p-2 border-b border-base-300 bg-base-200 sticky top-0 z-20" }, [
-      O("div", { class: "flex flex-wrap gap-1 flex-1 items-center" }, [
-        O("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState("bold") ? "btn-active bg-primary/20" : ""}`, onclick: () => exec("bold") }, O("span", { class: "icon-[lucide--bold]" })),
-        O("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState("italic") ? "btn-active bg-primary/20" : ""}`, onclick: () => exec("italic") }, O("span", { class: "icon-[lucide--italic]" })),
-        O("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState("underline") ? "btn-active bg-primary/20" : ""}`, onclick: () => exec("underline") }, O("span", { class: "icon-[lucide--underline]" })),
-        O("input", { type: "color", class: "w-5 h-5 p-0 border-0 bg-transparent cursor-pointer", oninput: (e) => exec("foreColor", e.target.value) }),
-        O("span", { class: "w-px h-5 bg-base-300 mx-1" }),
-        O("button", {
-          type: "button",
-          class: "btn btn-ghost btn-xs",
-          onclick: () => exec("justifyLeft")
-        }, O("span", { class: "icon-[lucide--align-left]" })),
-        O("button", {
-          type: "button",
-          class: "btn btn-ghost btn-xs",
-          onclick: () => exec("justifyCenter")
-        }, O("span", { class: "icon-[lucide--align-center]" })),
-        O("button", {
-          type: "button",
-          class: "btn btn-ghost btn-xs",
-          onclick: () => exec("justifyRight")
-        }, O("span", { class: "icon-[lucide--align-right]" })),
-        O("span", { class: "w-px h-5 bg-base-300 mx-1" }),
-        O("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("insertUnorderedList") }, O("span", { class: "icon-[lucide--list]" })),
-        O("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("insertOrderedList") }, O("span", { class: "icon-[lucide--list-ordered]" })),
-        O("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("outdent"), title: "Mover izquierda" }, O("span", { class: "icon-[lucide--indent-decrease]" })),
-        O("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("indent"), title: "Mover derecha (Tab)" }, O("span", { class: "icon-[lucide--indent-increase]" })),
-        O("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState("formatBlock", "BLOCKQUOTE") ? "btn-active" : ""}`, onclick: () => exec("formatBlock", queryState("formatBlock", "BLOCKQUOTE") ? "P" : "BLOCKQUOTE") }, O("span", { class: "icon-[lucide--quote]" })),
-        O("span", { class: "w-px h-5 bg-base-300 mx-1" }),
-        O("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => {
-          const url = window.prompt("URL:");
-          if (url)
-            exec("createLink", url);
-        } }, O("span", { class: "icon-[lucide--link]" })),
-        O("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => {
-          const input = document.createElement("input");
-          input.type = "file";
-          input.onchange = (e) => handleUpload(e.target.files[0]);
-          input.click();
-        } }, O("span", { class: "icon-[lucide--paperclip]" })),
-        O("div", { class: "relative" }, [
-          O("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: (e) => {
-            e.stopPropagation();
-            saveSelection();
-            showEmojis(!showEmojis());
-          } }, O("span", { class: "icon-[lucide--smile]" })),
-          O("div", { class: "absolute top-full left-0 mt-1 p-2 bg-base-100 border border-base-300 shadow-xl rounded-box w-52 z-50 flex flex-wrap gap-1", style: () => showEmojis() ? "display:flex" : "display:none" }, emojis.map((emo) => O("span", { class: "cursor-pointer hover:bg-base-200 p-1 rounded text-lg", onclick: (e) => {
-            e.stopPropagation();
-            exec("insertText", emo);
-            showEmojis(false);
-          } }, emo)))
-        ]),
-        O("span", { class: "w-px h-5 bg-base-300 mx-1" }),
-        O("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("removeFormat") }, O("span", { class: "icon-[lucide--eraser]" })),
-        O("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("undo"), title: "Deshacer" }, O("span", { class: "icon-[lucide--undo-2]" })),
-        O("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("redo"), title: "Rehacer" }, O("span", { class: "icon-[lucide--redo-2]" }))
-      ]),
-      O("button", { type: "button", class: () => `btn btn-ghost btn-xs ${isSource() ? "btn-active" : ""}`, onclick: () => {
-        if (!isSource())
-          source(editorRef?.innerHTML || "");
-        else if (editorRef) {
-          editorRef.innerHTML = source();
-          notify();
-        }
-        isSource(!isSource());
-      } }, O("span", { class: "icon-[lucide--code-2]" }))
-    ]);
-    if (typeof document !== "undefined" && !document.getElementById("editor-styles")) {
-      const style = document.createElement("style");
-      style.id = "editor-styles";
-      style.textContent = `
-    [contenteditable="true"] div,
-    [contenteditable="true"] p {
-      margin: 0;
-      padding: 0;
-    }
-  `;
-      document.head.appendChild(style);
-    }
-    return O("div", { class: cls("border border-base-300 rounded-box bg-base-100 overflow-hidden shadow-sm flex flex-col", extraClass) }, [
-      toolbar,
-      O("div", { class: "relative flex-1 flex flex-col", onclick: () => showEmojis(false) }, [
-        O("div", {
-          ref: (el) => {
-            if (!editorRef && el) {
-              editorRef = el;
-              el.innerHTML = get(value) || "";
-              document.execCommand("defaultParagraphSeparator", false, "br");
-              el.addEventListener("click", (e) => {
-                const container = e.target.closest(".resizable-img-container");
-                if (container) {
-                  const img = container.querySelector("img");
-                  if (img)
-                    openLightbox(img.src);
-                }
-              });
-            }
-          },
-          style: () => `min-height:22rem;${isSource() ? "display:none" : ""}`,
-          class: "p-4 outline-none text-base-content leading-relaxed [&>div]:m-0 [&>p]:m-0 [&>div]:min-h-[1em] [&_.resizable-img-container]:hover:border-primary [&_blockquote]:border-l-4 [&_blockquote]:border-base-300 [&_blockquote]:pl-4 [&_blockquote]:italic [&_ul]:list-disc [&_ul]:pl-8 [&_ol]:list-decimal [&_ol]:pl-8",
-          contenteditable: "true",
-          oninput: notify,
-          onkeydown: (e) => {
-            if (e.key === "Tab") {
-              e.preventDefault();
-              exec("indent");
-            }
-          },
-          onkeyup: () => {
-            triggerRefresh();
-            saveSelection();
-          },
-          onclick: (e) => {
-            triggerRefresh();
-            saveSelection();
-            e.stopPropagation();
-          },
-          onmouseup: () => {
-            notify();
-            saveSelection();
-          },
-          onpaste: (e) => {
-            e.preventDefault();
-            const text = e.clipboardData.getData("text/plain");
-            exec("insertText", text);
-          },
-          ondragover: (e) => e.preventDefault(),
-          ondrop: (e) => {
-            e.preventDefault();
-            handleUpload(e.dataTransfer.files[0]);
-          }
-        }),
-        O("textarea", {
-          class: "w-full flex-1 min-h-[22rem] p-4 outline-none font-mono text-sm bg-base-200 border-0",
-          style: () => isSource() ? "" : "display:none",
-          value: source,
-          oninput: (e) => {
-            source(e.target.value);
-            if (editorRef)
-              editorRef.innerHTML = e.target.value;
-            p2.onchange?.(e.target.value);
-          }
-        })
-      ]),
-      O("div", { class: "px-3 py-1 border-t border-base-300 bg-base-100/50 text-[10px] text-right text-base-content/60 italic" }, [
-        O("span", () => `${count()} caracteres`)
-      ])
-    ]);
-  };
-
   // utils.js
   var i18n = {
     es: {
@@ -1511,8 +1263,7 @@
 
   // index.js
   var Components = {
-    ...exports_All,
+    ...exports_All
-    ...exports_Editor
   };
   var Utils = {
     Locale,

docs/demo_display.md

@@ -1,5 +1,28 @@
 # Display
 
+## Card
+<div id="demo-card"></div>
+
+```js
+mount(
+  Card({ class: 'bg-base-100 w-96 shadow-xl' }, [
+    figure(img({ src: 'https://picsum.photos/400/200', alt: 'Imagen' })),
+    CardBody({}, [
+      CardTitle({}, '¡Nuevo producto!'),
+      p('Esta tarjeta muestra la composición flexible. Puedes añadir imágenes, texto, badges y más.'),
+      div({ class: 'flex gap-2 mt-2' }, [
+        Badge({ class: 'badge-primary' }, 'Nuevo'),
+        Badge({ class: 'badge-outline' }, 'En stock')
+      ])
+    ]),
+    CardActions({ class: 'justify-end m-4 gap-4' }, [
+      Button({ class: 'btn-ghost btn-sm' }, 'Cancelar'),
+      Button({ class: 'btn-primary btn-sm' }, 'Comprar')
+    ])
+  ]),
+  '#demo-card'
+);
+```
 ## Badge
 <div id="demo-badge"></div>
 
@@ -64,19 +87,39 @@ const users = [
   { id: 3, name: 'Charlie', role: 'Viewer' }
 ];
 
-mount(
+mount([
-  Table({
+  Table({ class: 'table-zebra' },
-    items: users,
+    TableItems({ items: users, columns: [{ key: 'name', label: 'Name' }, { key: 'role', label: 'Role' }] })
-    columns: [
+  ),
-      { key: 'name', label: 'Name' },
+  Table({ class: 'table-zebra' }, [
-      { key: 'role', label: 'Role' },
+    h('thead', {}, h('tr', {}, [h('th', {}, 'Nombre'), h('th', {}, 'Acción')])),
-      { render: (it) => Button({ class: 'btn-xs' }, 'Edit') }
+    h('tbody', {},
-    ],
+      users.map( user => h('tr', {}, [
-    class: 'table-zebra'
+        h('td', {}, user.name),
-  }),
+        h('td', {}, Button({ class: 'btn-xs' }, 'Editar'))
+      ]))
+    )
+  ])
+  ],
   '#demo-table'
-);
+)
 ```
+## Textrotate
+<div id="demo-textrotate"></div>
+
+```js
+mount(
+  Textrotate({ class: 'text-2xl font-bold' },
+  span({class:"bg-base-200"},[
+    span({}, 'Reactivo'),
+    span({}, 'Simple'),
+    span({}, 'Rápido'),
+    span({}, 'SigPro')
+  ])),
+  '#demo-textrotate'
+)
+```
+
 
 ## Timeline
 <div id="demo-timeline"></div>

docs/demo_forms.md

@@ -88,8 +88,9 @@ mount(
 
 ```js
 const text = $('');
+const pass = $('');
 
-mount(
+mount([
   Input({
     type: 'text',
     label: 'Username',
@@ -97,6 +98,13 @@ mount(
     value: text,
     left: Icon('icon-[lucide--user]')
   }),
+  Input({
+    type: 'password',
+    label: 'Password',
+    float: true,
+    value: pass,
+    left: Icon('icon-[lucide--lock]')
+  })],
   '#demo-input'
 );
 ```
@@ -168,14 +176,14 @@ mount(
 <div id="demo-swap"></div>
 
 ```js
-const swapOn = $(false);
+const isActive = $(false)
 
 mount(
-  Swap({
+  Swap({ class: 'text-base' }, [
-    value: swapOn,
+    SwapToggle({ value: isActive, class: 'swap-rotate' }),
-    on: span({ class: 'text-success' }, 'ON'),
+    SwapOn({}, span({ class: 'icon-[lucide--moon]' })),
-    off: span({ class: 'text-error' }, 'OFF'),
+    SwapOff({}, span({ class: 'icon-[lucide--sun]' }))
-  }),
+  ]),
   '#demo-swap'
-);
+)
 ```

docs/demo_layout.md

@@ -22,24 +22,40 @@ mount(
 <div id="demo-drawer"></div>
 
 ```js
-const drawerOpen = $(false);
+const leftOpen = $(false)
+const rightOpen = $(false)
 
 mount(
-  div({}, [
+  Drawer({ open: leftOpen }, [
-    Drawer({ open: drawerOpen, id: 'drw', side: Menu({ items: [
+    DrawerToggle({ id: 'left-drawer', checked: leftOpen }),
-      { label: 'Dashboard', onclick: () => drawerOpen(false) },
+    DrawerContent({}, [
-      { label: 'Settings' },
+      Drawer({ open: rightOpen, class: 'drawer-end' }, [
-      { label: 'Help' }
+        DrawerToggle({ id: 'right-drawer', checked: rightOpen }),
-    ]}) }, [
+        DrawerContent({}, [
-      div({ class: 'p-4 border border-base-300' }, [
+          div({ class: 'p-4' }, [
-        h3({ class: 'text-lg font-bold' }, 'Main Content'),
+            h3({ class: 'text-lg font-bold' }, 'Panel central'),
-        Button({ class: 'btn', onclick: () => drawerOpen(true) }, 'Open Drawer'),
+            label({ for: 'left-drawer', class: 'btn' }, 'Abrir izquierdo'),
-        p({}, 'This is the main page. Click the button above to open the drawer.')
+            label({ for: 'right-drawer', class: 'btn ml-2' }, 'Abrir derecho'),
+            p({}, 'Contenido principal aquí...')
+          ])
+        ]),
+        DrawerSide({}, [
+          DrawerOverlay({ for: 'right-drawer' }),
+          div({ class: 'min-h-full bg-base-200 w-60 p-4' },
+            h4({ class: 'font-semibold' }, 'Menú derecho')
+          )
+        ])
       ])
+    ]),
+    DrawerSide({}, [
+      DrawerOverlay({ for: 'left-drawer' }),
+      div({ class: 'min-h-full bg-base-200 w-60 p-4' },
+        h4({ class: 'font-semibold' }, 'Menú izquierdo')
+      )
     ])
   ]),
   '#demo-drawer'
-);
+)
 ```
 
 ## Dropdown
@@ -48,35 +64,30 @@ mount(
 ```js
 mount(
   div({ class: 'flex gap-4' }, [
-    // Example 1: con Menu (cierre automático al hacer clic en un ítem)
+    Dropdown({}, [
-    Dropdown({ label: 'Options', class: 'dropdown' }, [
+      DropdownButton({}, 'Options'),
-      Menu({
+      DropdownContent({ class: 'menu bg-base-100 rounded-box w-52 p-2 shadow' }, [
-        items: [
+        Menu({
-          { label: 'Edit', onclick: () => close() },
+          items: [
-          { label: 'Delete', onclick: () => close() },
+            { label: 'Edit', onclick: () => close() },
-          { label: 'Archive' }
+            { label: 'Delete', onclick: () => close() },
-        ],
+            { label: 'Archive' }
-        class: 'dropdown-content menu bg-base-100 rounded-box w-52 p-2 shadow z-1'
+          ]
-      })
+        })
-    ]),
-    // Example 2: manual (cerrar ítems con blur)
-    Dropdown({ label: 'More', class: 'dropdown' }, [
-      ul({ class: 'dropdown-content menu bg-base-100 rounded-box w-40 p-2 shadow' }, [
-        li({}, a({ 
-          tabindex: '-1',
-          href: '#', 
-          onclick: (e) => { e.preventDefault();  close(); } 
-        }, 'Profile')),
-        li({}, a({ 
-          tabindex: '-1',
-          href: '#', 
-          onclick: (e) => { e.preventDefault();  close(); } 
-        }, 'Logout'))
       ])
+    ]),
+    Dropdown({}, [
+      DropdownButton({}, 'More'),
+      DropdownContent({ class: 'menu bg-base-100 rounded-box w-40 p-2 shadow' }, 
+        ul({}, [
+          li({}, a({ href: '#', onclick: (e) => { e.preventDefault(); close(); } }, 'Profile')),
+          li({}, a({ href: '#', onclick: (e) => { e.preventDefault(); close(); } }, 'Logout'))
+        ])
+      )
     ])
   ]),
   '#demo-dropdown'
-)
+);
 ```
 
 ## Fab

docs/demo_overlay.md

@@ -12,6 +12,42 @@ mount(
   '#demo-alert'
 );
 ```
+## Chat
+<div id="demo-chat"></div>
+
+```js
+mount(
+  div({ class: 'flex flex-col gap-4' }, [
+    // Mensaje izquierdo (Obi-Wan)
+    Chat({ class: 'chat-start' }, [
+      ChatImage({}, img({
+        src: 'https://img.daisyui.com/images/profile/demo/kenobee@192.webp',
+        alt: 'Obi-Wan Kenobi'
+      })),
+      ChatHeader({}, [
+        'Obi-Wan Kenobi',
+        time({ class: 'text-xs opacity-50' }, '12:45')
+      ]),
+      ChatBubble({}, 'You were the Chosen One!'),
+      ChatFooter({ class: 'opacity-50' }, 'Delivered')
+    ]),
+    // Mensaje derecho (Anakin)
+    Chat({ class: 'chat-end' }, [
+      ChatImage({}, img({
+        src: 'https://img.daisyui.com/images/profile/demo/anakeen@192.webp',
+        alt: 'Anakin'
+      })),
+      ChatHeader({}, [
+        'Anakin',
+        time({ class: 'text-xs opacity-50' }, '12:46')
+      ]),
+      ChatBubble({}, 'I hate you!'),
+      ChatFooter({ class: 'opacity-50' }, 'Seen at 12:46')
+    ])
+  ]),
+  '#demo-chat'
+);
+```
 
 ## Modal
 <div id="demo-modal"></div>

index.js

@@ -1,5 +1,5 @@
 import * as AllModule from './components/All.js';
-import * as EditorModule from './components/Editor.js';
+// import * as EditorModule from './components/Editor.js';
 // import * as AccordionModule from './components/accordion.js';
 // import * as AlertModule from './components/alert.js';
 // import * as AutocompleteModule from './components/discarted/Autocomplete.js';
@@ -47,7 +47,7 @@ import { Locale, tt } from './utils.js';
 
 export const Components = {
   ...AllModule,
-  ...EditorModule,
+  // ...EditorModule,
   // ...AccordionModule,
   // ...AlertModule,
   // ...AutocompleteModule,

sigpro.css

@@ -198,13 +198,16 @@
 /* Checkbox & Toggle */
 /* .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, */
 
+/* Chat */
+/* .chat .chat-end .chat-start .chat.image .chat-header .chat-footer . chat-bubble */
+
 /* Colorpicker */
 
 /* Datepicker */
 /* .icon-[lucide--calendar], .icon-[lucide--chevrons-left], .icon-[lucide--chevron-left], .icon-[lucide--chevron-right], .icon-[lucide--chevrons-right], */
 
 /* Drawer */
-/* .drawer, .drawer-toggle, .drawer-content, .drawer-side, .drawer-overlay, */
+/* .drawer, .drawer-end .drawer-toggle, .drawer-content, .drawer-side, .drawer-overlay, */
 
 /* Dropdown */
 /* .dropdown, .dropdown-content, .dropdown-end, .dropdown-top, .dropdown-bottom, */