Migrating new components

components/Modal.js

@@ -0,0 +1,36 @@
+// components/Modal.js
+import { Tag, Watch } from "sigpro";
+
+export const Modal = (props) => {
+  const { class: className, open, title, children, ...rest } = props;
+  let dialogRef = null;
+
+  Watch(() => {
+    const isOpen = typeof open === "function" ? open() : open;
+    if (!dialogRef) return;
+    isOpen ? dialogRef.showModal() : dialogRef.close();
+  });
+
+  const close = () => {
+    if (typeof open === "function") open(false);
+  };
+
+  return Tag("dialog", {
+    ...rest,
+    ref: el => dialogRef = el,
+    class: `modal ${className || ''}`.trim(),
+    onclose: close,
+    oncancel: close
+  }, [
+    Tag("div", { class: "modal-box" }, [
+      title && Tag("h3", { class: "text-lg font-bold" }, title),
+      children,
+      Tag("div", { class: "modal-action" }, [
+        props.actions || Button({ onclick: close }, "Cerrar")
+      ])
+    ]),
+    Tag("form", { method: "dialog", class: "modal-backdrop" }, [
+      Tag("button", {}, "close")
+    ])
+  ]);
+};