BUILD BEFORE CHANGE NEW COMPONENTS WITH UI FUNCTION

src/ui/Drawer.js

@@ -0,0 +1,28 @@
+// components/Drawer.js
+import { $html } from "sigpro";
+import { ui, val, joinClass } from "../core/utils.js";
+
+export const Drawer = (props) => {
+  const { ui: uiProps, class: className, id, open, content, side, ...rest } = props;
+
+  const dynamicClasses = [
+    ui('drawer', uiProps),
+    className
+  ].filter(Boolean).join(' ');
+
+  const classes = joinClass("drawer", dynamicClasses);
+
+  return $html("div", { ...rest, class: classes }, [
+    $html("input", {
+      id,
+      type: "checkbox",
+      class: "drawer-toggle",
+      checked: val(open),
+    }),
+    $html("div", { class: "drawer-content" }, content),
+    $html("div", { class: "drawer-side" }, [
+      $html("label", { for: id, class: "drawer-overlay", onclick: () => open?.(false) }),
+      $html("div", { class: "min-h-full bg-base-200 w-80" }, side),
+    ]),
+  ]);
+};