OPtimized components

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(
-  Table({
-    items: users,
-    columns: [
-      { key: 'name', label: 'Name' },
-      { key: 'role', label: 'Role' },
-      { render: (it) => Button({ class: 'btn-xs' }, 'Edit') }
-    ],
-    class: 'table-zebra'
-  }),
+mount([
+  Table({ class: 'table-zebra' },
+    TableItems({ items: users, columns: [{ key: 'name', label: 'Name' }, { key: 'role', label: 'Role' }] })
+  ),
+  Table({ class: 'table-zebra' }, [
+    h('thead', {}, h('tr', {}, [h('th', {}, 'Nombre'), h('th', {}, 'Acción')])),
+    h('tbody', {},
+      users.map( user => h('tr', {}, [
+        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({
-    value: swapOn,
-    on: span({ class: 'text-success' }, 'ON'),
-    off: span({ class: 'text-error' }, 'OFF'),
-  }),
+  Swap({ class: 'text-base' }, [
+    SwapToggle({ value: isActive, class: 'swap-rotate' }),
+    SwapOn({}, span({ class: 'icon-[lucide--moon]' })),
+    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: drawerOpen, id: 'drw', side: Menu({ items: [
-      { label: 'Dashboard', onclick: () => drawerOpen(false) },
-      { label: 'Settings' },
-      { label: 'Help' }
-    ]}) }, [
-      div({ class: 'p-4 border border-base-300' }, [
-        h3({ class: 'text-lg font-bold' }, 'Main Content'),
-        Button({ class: 'btn', onclick: () => drawerOpen(true) }, 'Open Drawer'),
-        p({}, 'This is the main page. Click the button above to open the drawer.')
+  Drawer({ open: leftOpen }, [
+    DrawerToggle({ id: 'left-drawer', checked: leftOpen }),
+    DrawerContent({}, [
+      Drawer({ open: rightOpen, class: 'drawer-end' }, [
+        DrawerToggle({ id: 'right-drawer', checked: rightOpen }),
+        DrawerContent({}, [
+          div({ class: 'p-4' }, [
+            h3({ class: 'text-lg font-bold' }, 'Panel central'),
+            label({ for: 'left-drawer', class: 'btn' }, 'Abrir izquierdo'),
+            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({ label: 'Options', class: 'dropdown' }, [
-      Menu({
-        items: [
-          { label: 'Edit', onclick: () => close() },
-          { 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({}, 'Options'),
+      DropdownContent({ class: 'menu bg-base-100 rounded-box w-52 p-2 shadow' }, [
+        Menu({
+          items: [
+            { label: 'Edit', onclick: () => close() },
+            { label: 'Delete', onclick: () => close() },
+            { label: 'Archive' }
+          ]
+        })
       ])
+    ]),
+    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>