Updateing Docs

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) =>
-  $html("div", { class: joinClass("drawer", props.class) }, [
+/**
+ * Drawer component
+ * 
+ * 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-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),
+    $html("div", { class: "drawer-content" }, [
+      typeof content === "function" ? content() : content
     ]),
+    $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
+      ])
+    ])
   ]);
+};