Rebuild all components

components/Drawer.js

@@ -1,36 +1,31 @@
 // components/Drawer.js
 import { Tag } from "sigpro";
 
-export const Drawer = (props) => {
-  const { class: className, id, open, content, children, ...rest } = props;
-  
-  const drawerId = id || `drawer-${Math.random().toString(36).slice(2, 9)}`;
-  
-  return Tag("div", {
-    ...rest,
-    class: `drawer ${className || ''}`.trim()
-  }, [
+export const Drawer = (props, children) => {
+  children === undefined && (children = props, props = {});
+  return Tag("div", { ...props, class: `drawer ${props.class ?? ''}` }, children);
+};
+
+export const Sidebar = (props) => {
+  const id = props.id || `drawer-${Math.random().toString(36).slice(2, 9)}`;
+  return Tag("div", { ...props, class: `drawer ${props.class ?? ''}` }, [
     Tag("input", {
-      id: drawerId,
+      id,
       type: "checkbox",
       class: "drawer-toggle",
-      checked: () => typeof open === "function" ? open() : open,
-      onchange: (e) => {
-        if (typeof open === "function") open(e.target.checked);
-      }
+      checked: () => (typeof props.open === "function" ? props.open() : props.open),
+      onchange: (e) => typeof props.open === "function" && props.open(e.target.checked)
     }),
-    Tag("div", { class: "drawer-content" }, children),
+    Tag("div", { class: "drawer-content" }, props.children),
     Tag("div", { class: "drawer-side" }, [
-      Tag("label", { 
-        for: drawerId, 
+      Tag("label", {
+        for: id,
         class: "drawer-overlay",
-        onclick: () => {
-          if (typeof open === "function") open(false);
-        }
+        onclick: () => typeof props.open === "function" && props.open(false)
       }),
-      Tag("div", { class: "min-h-full bg-base-200 w-80 p-4" }, [
-        typeof content === "function" ? content() : content
-      ])
+      Tag("div", { class: "min-h-full bg-base-200 w-80 p-4" },
+        typeof props.content === "function" ? props.content() : props.content
+      )
     ])
   ]);
 };