OPtimized components

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>