Updateing Docs

src/components/Modal.js

@@ -1,19 +1,27 @@
+// components/Modal.js
 import { $html, $watch } from "sigpro";
+import { ui, val } from "../core/utils.js";
 import { tt } from "../core/i18n.js";
 import { Button } from "./Button.js";
 
-/** MODAL REACTIVO NATIVO */
+/**
+ * Modal component
+ * 
+ * daisyUI classes used:
+ * - modal, modal-box, modal-action, modal-backdrop
+ * - modal-open, modal-middle, modal-top, modal-bottom
+ * - text-lg, font-bold, mb-4, py-2
+ * - flex, gap-2
+ */
 export const Modal = (props, children) => {
-  const { title, buttons, open, ...rest } = props;
+  const { class: className, title, buttons, open, ...rest } = props;
   const dialogRef = { current: null };
 
-  // Sincronizamos la señal con los métodos nativos del navegador
   $watch(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
 
-    if (open()) {
-      // Solo abrimos si no está ya abierto (evita bucles)
+    if (val(open)) {
       if (!dialog.open) dialog.showModal();
     } else {
       if (dialog.open) dialog.close();
@@ -22,15 +30,14 @@ export const Modal = (props, children) => {
 
   const close = (e) => {
     if (e && e.preventDefault) e.preventDefault();
-    open(false);
+    if (typeof open === "function") open(false);
   };
 
   return $html("dialog", { 
     ...rest,
     ref: dialogRef,
-    class: "modal",
-    // Importante: Si el usuario pulsa ESC, actualizamos la señal
-    oncancel: () => open(false) 
+    class: ui('modal', className),
+    oncancel: () => typeof open === "function" && open(false)
   }, [
     $html("div", { class: "modal-box" }, [
       title ? $html("h3", { class: "text-lg font-bold mb-4" }, title) : null,
@@ -42,7 +49,6 @@ export const Modal = (props, children) => {
         Button({ type: "button", onclick: close }, tt("close")()),
       ]),
     ]),
-    // Backdrop nativo que sincroniza con la señal
     $html("form", { 
       method: "dialog", 
       class: "modal-backdrop",