Modal

dist/sigpro-ui.umd.js

@@ -1071,28 +1071,33 @@ var SigProUI = (function (exports, sigpro) {
   /** MODAL */
   const Modal = (props, children) => {
     const { title, buttons, open, ...rest } = props;
-    const close = () => open(false);
+
+    const close = (e) => {
+      if (e && e.preventDefault) e.preventDefault();
+      open(false);
+    };
 
     return sigpro.$if(open, () =>
-      sigpro.$html("dialog", { ...rest, class: "modal modal-open" }, [
+      sigpro.$html("dialog", { 
+        ...rest, 
+        class: "modal modal-open",
+        oncancel: close 
+      }, [
         sigpro.$html("div", { class: "modal-box" }, [
           title ? sigpro.$html("h3", { class: "text-lg font-bold mb-4" }, title) : null,
-          typeof children === "function" ? children() : children,
+          sigpro.$html("div", { class: "py-2" }, [
+            typeof children === "function" ? children() : children
+          ]),
           sigpro.$html("div", { class: "modal-action flex gap-2" }, [
             ...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean),
-            Button({ onclick: close }, tt("close")()),
+            Button({ type: "button", onclick: close }, tt("close")()),
           ]),
         ]),
-        sigpro.$html(
-          "form",
-          {
-            method: "dialog",
-            class: "modal-backdrop",
-            onclick: (e) => (e.preventDefault(), close()),
-          },
-          [sigpro.$html("button", {}, "close")],
-        ),
-      ]),
+        sigpro.$html("div", { 
+          class: "modal-backdrop bg-black/20", 
+          onclick: close 
+        })
+      ])
     );
   };
 
@@ -1254,7 +1259,7 @@ var SigProUI = (function (exports, sigpro) {
   /** STAT */
   const Stat = (props) =>
     sigpro.$html("div", { ...props, class: joinClass("stat", props.class) }, [
-      props.icon && sigpro.$html("img", { src: props.icon }),
+      props.icon && sigpro.$html("div", { class: "stat-figure text-secondary" }, props.icon),
       props.label && sigpro.$html("div", { class: "stat-title" }, props.label),
       sigpro.$html("div", { class: "stat-value" }, () => val(props.value) ?? props.value),
       props.desc && sigpro.$html("div", { class: "stat-desc" }, props.desc),