Before repair nav components

docs/demo_overlay.md

@@ -0,0 +1,84 @@
+# Overlays
+
+## Alert
+<div id="demo-alert"></div>
+
+```js
+mount(
+  Alert({ class: 'alert-success' }, [
+    span({}, 'Operation completed successfully!'),
+    Button({ class: 'btn-sm' }, 'Undo')
+  ]),
+  '#demo-alert'
+);
+```
+
+## Modal
+<div id="demo-modal"></div>
+
+```js
+const modalOpen = $(false);
+
+mount(
+  div({ class: 'flex flex-col items-start gap-2' }, [
+    Button({
+      class: 'btn',
+      onclick: () => modalOpen(true)
+    }, 'Abrir modal'),
+    Modal({
+      open: modalOpen,
+      title: 'Congratulations!',
+      backdrop: true,
+      actions: [
+        form({ method: 'dialog' },
+          Button({ class: 'btn', onclick: () => modalOpen(false) }, 'Close')
+        )
+      ]
+    }, [
+      p({}, 'You have successfully created a reactive DaisyUI modal with SigPro.')
+    ])
+  ]),
+  '#demo-modal'
+);
+```
+
+## Toast
+<div id="demo-toast"></div>
+
+```js
+mount(
+  div({ class: 'flex flex-wrap gap-2' }, [
+    Button({ class: 'btn', onclick: () => Toast('File saved!') }, 'Simple'),
+    Button({ class: 'btn', onclick: () => Toast('Error', 'alert-error', 5000) }, 'Error (5s)'),
+    Button({ class: 'btn', onclick: () => Toast(
+      div({ class: 'flex items-center gap-2' }, [
+        span({ class: 'icon-[lucide--check] text-lg' }),
+        span({}, 'Report generated successfully')
+      ]),
+      'alert-success'
+    ) }, 'With icon'),
+    Button({ class: 'btn', onclick: () => Toast(
+      h('div', { class: 'flex flex-col' }, [
+        h('strong', {}, '¡ATTENTION!'),
+        h('span', {}, 'Error saving!'),
+        h('button', { class: 'btn btn-xs mt-1', onclick: () => console.log('retry') }, 'Retry')
+      ]),
+      'alert-warning',
+      7000
+    ) }, 'Complex')
+  ]),
+  '#demo-toast'
+);
+```
+
+## Tooltip
+<div id="demo-tooltip"></div>
+
+```js
+mount(
+  Tooltip({ tip: 'Click to save', class: 'tooltip-right' },
+    Button({ class: 'btn' }, 'Save')
+  ),
+  '#demo-tooltip'
+);
+```