prometeo-design-system 5.7.2 → 5.7.4

package/dist/DialogModal.es.js

@@ -1,43 +1,65 @@
-import { j as i } from "./jsx-runtime-GkKLlHH4.js";
-import { forwardRef as Ne, memo as W, useState as $, useRef as R, useCallback as I, useImperativeHandle as Pe, useEffect as ie, Children as j, isValidElement as V, createElement as k, cloneElement as fe } from "react";
-import { createPortal as Ie } from "react-dom";
-import { c as f } from "./cn-B6yFEsav.js";
-import { c as Ye } from "./index-BOQuZ0gG.js";
-const pe = Ne(
-  ({ children: o, onClose: p, className: c, attachToParent: d = !1, zindex: x = 40, debugMode: t = !1, safeMarginSize: E = 24, title: g, scroll: h = "content", size: ce = "medium", unmountChildrenOnClose: w = !0 }, xe) => {
-    const [N, K] = $(!1), [B, U] = $(null), [ue, _] = $(
-      () => w ? N : !0
-    ), q = R(p), z = R(B), J = R(null);
-    q.current = p, z.current = B;
-    const Q = I((a) => {
-      U(a ?? {}), K(!0);
-    }, []), A = I(() => {
-      K(!1), q.current?.(z.current);
+import { j as c } from "./jsx-runtime-GkKLlHH4.js";
+import { forwardRef as Pe, memo as B, useState as S, useRef as Y, useCallback as R, useEffect as T, useImperativeHandle as Ye, Children as D, isValidElement as J, createElement as A, cloneElement as pe } from "react";
+import { createPortal as je } from "react-dom";
+import { c as p } from "./cn-B6yFEsav.js";
+import { c as De } from "./index-BOQuZ0gG.js";
+const Te = 50, xe = Pe(
+  ({ children: o, onClose: x, className: u, attachToParent: i = !1, zindex: h = 40, debugMode: t = !1, safeMarginSize: d = 24, title: g, scroll: m = "content", size: ue = "medium", unmountChildrenOnClose: v = !0 }, he) => {
+    const [y, Q] = S(!1), [W, F] = S(null), [me, z] = S(
+      () => v ? y : !0
+    ), Z = Y(x), O = Y(W), M = Y(null), f = Y(null), L = Y(/* @__PURE__ */ new Set());
+    Z.current = x, O.current = W;
+    const ee = R((r) => {
+      F(r ?? {}), Q(!0);
+    }, []), H = R(() => {
+      Q(!1), Z.current?.(O.current);
     }, []);
-    Pe(
-      xe,
+    T(() => {
+      L.current.forEach((r) => {
+        try {
+          r(y);
+        } catch {
+        }
+      });
+    }, [y]), Ye(
+      he,
       () => ({
-        open: Q,
-        close: A,
-        isOpen: N,
-        getContext: () => z.current
+        open: ee,
+        close: H,
+        isOpen: y,
+        getContext: () => O.current,
+        subscribeOpenChange: (r) => (L.current.add(r), () => {
+          L.current.delete(r);
+        })
       }),
-      [Q, A, N]
-    ), ie(() => {
-      w && N && _(!0);
-    }, [N, w]), ie(() => {
-      if (!w) return;
-      const a = J.current;
-      if (!a) return;
-      const e = (y) => {
-        const n = a.hasAttribute("open");
-        y.target === a && (y.propertyName === "opacity" || y.propertyName === "display") && !n && (_(!1), U(null));
+      [ee, H, y]
+    ), T(() => {
+      v && y && z(!0);
+    }, [y, v]), T(() => {
+      if (v) {
+        if (y) {
+          f.current && (clearTimeout(f.current), f.current = null);
+          return;
+        }
+        return f.current && clearTimeout(f.current), f.current = setTimeout(() => {
+          z(!1), F(null), f.current = null;
+        }, Te), () => {
+          f.current && (clearTimeout(f.current), f.current = null);
+        };
+      }
+    }, [y, v]), T(() => {
+      if (!v) return;
+      const r = M.current;
+      if (!r) return;
+      const e = (w) => {
+        const n = r.hasAttribute("open");
+        w.target === r && (!["opacity", "display", "transform"].includes(w.propertyName) || n || (f.current && (clearTimeout(f.current), f.current = null), z(!1), F(null)));
       };
-      return a.addEventListener("transitionend", e), a.addEventListener("transitioncancel", e), () => {
-        a.removeEventListener("transitionend", e), a.removeEventListener("transitioncancel", e);
+      return r.addEventListener("transitionend", e), r.addEventListener("transitioncancel", e), () => {
+        r.removeEventListener("transitionend", e), r.removeEventListener("transitioncancel", e);
       };
-    }, [w]);
-    const he = Ye("max-h-[calc(100%-80px)]", {
+    }, [v]);
+    const Ee = De("max-h-[calc(100%-80px)]", {
       variants: {
         size: {
           medium: " max-w-[min(740px,calc(100%-32px))]",
@@ -45,9 +67,9 @@ const pe = Ne(
         }
       }
     });
-    let D, F;
-    typeof o == "function" ? (D = o(B), F = j.toArray(D)) : (D = o, F = j.toArray(D));
-    const me = (a) => {
+    let X, G;
+    typeof o == "function" ? (X = o(W), G = D.toArray(X)) : (X = o, G = D.toArray(X));
+    const ge = (r) => {
       const e = {
         headerProps: null,
         titleContent: null,
@@ -62,107 +84,107 @@ const pe = Ne(
           footerExpandX: !1,
           footerExpandY: !1
         }
-      }, y = (n) => {
-        if (!V(n)) return;
-        const r = n.props;
-        n.type === v ? (e.allExpandInfo.headerExpandX = e.allExpandInfo.headerExpandX || !!r?.expandX, e.allExpandInfo.headerExpandY = e.allExpandInfo.headerExpandY || !!r?.expandY) : n.type === b ? (e.allExpandInfo.contentExpandX = e.allExpandInfo.contentExpandX || !!r?.expandX, e.allExpandInfo.contentExpandY = e.allExpandInfo.contentExpandY || !!r?.expandY) : n.type === C && (e.allExpandInfo.footerExpandX = e.allExpandInfo.footerExpandX || !!r?.expandX, e.allExpandInfo.footerExpandY = e.allExpandInfo.footerExpandY || !!r?.expandY), r?.children && j.toArray(r.children).forEach(y);
+      }, w = (n) => {
+        if (!J(n)) return;
+        const a = n.props;
+        n.type === N ? (e.allExpandInfo.headerExpandX = e.allExpandInfo.headerExpandX || !!a?.expandX, e.allExpandInfo.headerExpandY = e.allExpandInfo.headerExpandY || !!a?.expandY) : n.type === C ? (e.allExpandInfo.contentExpandX = e.allExpandInfo.contentExpandX || !!a?.expandX, e.allExpandInfo.contentExpandY = e.allExpandInfo.contentExpandY || !!a?.expandY) : n.type === I && (e.allExpandInfo.footerExpandX = e.allExpandInfo.footerExpandX || !!a?.expandX, e.allExpandInfo.footerExpandY = e.allExpandInfo.footerExpandY || !!a?.expandY), a?.children && D.toArray(a.children).forEach(w);
       };
-      return a.forEach((n) => {
-        if (y(n), !V(n)) {
+      return r.forEach((n) => {
+        if (w(n), !J(n)) {
           e.middleChildren.push(n);
           return;
         }
-        if (n.type === Y && !e.titleContent) {
+        if (n.type === j && !e.titleContent) {
           e.titleContent = n;
           return;
         }
-        if (n.type === v && !e.headerProps) {
-          const r = n.props;
-          e.headerProps = r;
+        if (n.type === N && !e.headerProps) {
+          const a = n.props;
+          e.headerProps = a;
           return;
         }
-        if (n.type === b && !e.contentProps) {
-          const r = n.props;
-          e.contentProps = r;
+        if (n.type === C && !e.contentProps) {
+          const a = n.props;
+          e.contentProps = a;
           return;
         }
-        if (n.type === C && !e.footerProps) {
-          const r = n.props;
-          e.footerProps = r;
+        if (n.type === I && !e.footerProps) {
+          const a = n.props;
+          e.footerProps = a;
           return;
         }
         e.middleChildren.push(n);
       }), e;
-    }, Ee = (a, e, y, n) => {
-      const r = (l, S) => {
-        if (!V(l))
+    }, ye = (r, e, w, n) => {
+      const a = (l, K) => {
+        if (!J(l))
           return l;
-        const s = l.props, P = l.key ?? `dialog-child-${S}`;
-        if (l.type === Y)
-          return /* @__PURE__ */ k(Y, { ...s, debugMode: t, key: P }, s.children);
-        if (l.type === v)
-          return /* @__PURE__ */ k(v, { ...s, debugMode: t, expandWeight: e, key: P }, s.children);
-        if (l.type === b)
-          return /* @__PURE__ */ k(b, { ...s, debugMode: t, scroll: h, expandWeight: y, key: P }, s.children);
+        const s = l.props, P = l.key ?? `dialog-child-${K}`;
+        if (l.type === j)
+          return /* @__PURE__ */ A(j, { ...s, debugMode: t, key: P }, s.children);
+        if (l.type === N)
+          return /* @__PURE__ */ A(N, { ...s, debugMode: t, expandWeight: e, key: P }, s.children);
         if (l.type === C)
-          return /* @__PURE__ */ k(C, { ...s, debugMode: t, expandWeight: n, key: P }, s.children);
+          return /* @__PURE__ */ A(C, { ...s, debugMode: t, scroll: m, expandWeight: w, key: P }, s.children);
+        if (l.type === I)
+          return /* @__PURE__ */ A(I, { ...s, debugMode: t, expandWeight: n, key: P }, s.children);
         if (l.type === "form") {
-          const L = s?.children ? j.toArray(s.children).map((O, G) => r(O, G)) : [];
-          return fe(l, {
+          const V = s?.children ? D.toArray(s.children).map((U, q) => a(U, q)) : [];
+          return pe(l, {
             key: P,
             ...s,
-            className: f(s?.className, "contents")
-          }, ...L);
+            className: p(s?.className, "contents")
+          }, ...V);
         }
         if (s?.children) {
-          const L = j.toArray(s.children).map((O, G) => r(O, G));
-          return fe(l, { key: P }, ...L);
+          const V = D.toArray(s.children).map((U, q) => a(U, q));
+          return pe(l, { key: P }, ...V);
         }
         return l;
       };
-      return a.map((l, S) => r(l, S));
+      return r.map((l, K) => a(l, K));
     };
-    let { headerProps: Z, titleContent: X, contentProps: M, footerProps: ee, middleChildren: ge, allExpandInfo: u } = me(F), m = Z ? { ...Z } : null, T = M ? { ...M } : null, H = ee ? { ...ee } : null;
-    !m && g && (m = { title: g, children: null }, X = null), m && X && m.title && (m = {
-      ...m,
+    let { headerProps: te, titleContent: k, contentProps: ne, footerProps: re, middleChildren: be, allExpandInfo: E } = ge(G), b = te ? { ...te } : null, _ = ne ? { ...ne } : null, $ = re ? { ...re } : null;
+    !b && g && (b = { title: g, children: null }, k = null), b && k && b.title && (b = {
+      ...b,
       title: "",
-      children: X
-    }, X = null);
-    const ye = u.headerExpandX || u.contentExpandX || u.footerExpandX, te = u.headerExpandY || u.contentExpandY || u.footerExpandY, be = [u.headerExpandY, u.contentExpandY, u.footerExpandY].filter(Boolean).length, ne = u.contentExpandY ? be > 1 ? 2 : 1 : void 0, re = u.headerExpandY ? 1 : void 0, oe = u.footerExpandY ? 1 : void 0, ae = Ee(ge, re, ne, oe), ve = m ? /* @__PURE__ */ i.jsx(v, { ...m, debugMode: t, expandWeight: re, children: m.children }) : null, le = (T ? /* @__PURE__ */ i.jsx(b, { ...T, debugMode: t, scroll: h, expandWeight: ne, children: T.children }) : null) ?? (ae.length ? ae : null), Ce = H ? /* @__PURE__ */ i.jsx(C, { ...H, debugMode: t, expandWeight: oe, children: H.children }) : null, we = ye ? "w-full" : "w-auto", se = {
-      "--safe-margin-size": `${E}px`
+      children: k
+    }, k = null);
+    const ve = E.headerExpandX || E.contentExpandX || E.footerExpandX, oe = E.headerExpandY || E.contentExpandY || E.footerExpandY, we = [E.headerExpandY, E.contentExpandY, E.footerExpandY].filter(Boolean).length, ae = E.contentExpandY ? we > 1 ? 2 : 1 : void 0, le = E.headerExpandY ? 1 : void 0, se = E.footerExpandY ? 1 : void 0, ie = ye(be, le, ae, se), Ce = b ? /* @__PURE__ */ c.jsx(N, { ...b, debugMode: t, expandWeight: le, children: b.children }) : null, de = (_ ? /* @__PURE__ */ c.jsx(C, { ..._, debugMode: t, scroll: m, expandWeight: ae, children: _.children }) : null) ?? (ie.length ? ie : null), Ne = $ ? /* @__PURE__ */ c.jsx(I, { ...$, debugMode: t, expandWeight: se, children: $.children }) : null, Ie = ve ? "w-full" : "w-auto", fe = {
+      "--safe-margin-size": `${d}px`
     };
-    te && (se.height = `calc(100% - ${E * 2}px)`);
-    const de = /* @__PURE__ */ i.jsx(
+    oe && (fe.height = `calc(100% - ${d * 2}px)`);
+    const ce = /* @__PURE__ */ c.jsx(
       "dialog",
       {
-        ref: J,
-        open: N,
-        className: f(
+        ref: M,
+        open: y,
+        className: p(
           "prometeo-dialog fixed inset-0 w-screen h-screen z-50 flex items-center justify-center bg-black/30 backdrop-blur-[1.5px]",
           "open:flex",
           "hidden"
         ),
-        style: { zIndex: x },
-        onClick: A,
-        children: /* @__PURE__ */ i.jsxs(
+        style: { zIndex: h },
+        onClick: H,
+        children: /* @__PURE__ */ c.jsxs(
           "div",
           {
-            onClick: (a) => a.stopPropagation(),
-            className: f(
+            onClick: (r) => r.stopPropagation(),
+            className: p(
               "prometeo-dialog-panel bg-neutral-default-default rounded-lg shadow-lg border-neutral-strong-default border relative ",
-              we,
-              h === "content" ? "" : "prometeo-scrollbar-thin!",
+              Ie,
+              m === "content" ? "" : "prometeo-scrollbar-thin!",
               // scroll === 'dialog' && 'overflow-auto ',
               "flex flex-col ",
-              he({ size: ce })
+              Ee({ size: ue })
               // className
             ),
-            style: se,
+            style: fe,
             children: [
-              /* @__PURE__ */ i.jsx(
+              /* @__PURE__ */ c.jsx(
                 "div",
                 {
-                  className: f(
+                  className: p(
                     "absolute bg-transparent z-[-1] -top-(--safe-margin-size) -left-(--safe-margin-size) -right-(--safe-margin-size) -bottom-(--safe-margin-size)",
                     t && "after:content-['SECURE_MARGIN'] after:text-red-300 after:prometeo-fonts-label-small after:ml-2 "
                   ),
@@ -172,102 +194,113 @@ const pe = Ne(
                   }
                 }
               ),
-              (!w || ue) && /* @__PURE__ */ i.jsxs("div", { className: f(
+              (!v || me) && /* @__PURE__ */ c.jsxs("div", { className: p(
                 "flex flex-col h-auto prometeo-scrollbar-thin!",
-                te && "flex-1 min-h-0",
-                h === "dialog" && "overflow-auto *:min-w-max *:min-h-max",
-                h === "content" && "overflow-hidden",
-                c
+                oe && "flex-1 min-h-0",
+                m === "dialog" && "overflow-auto *:min-w-max *:min-h-max",
+                m === "content" && "overflow-hidden",
+                u
               ), children: [
-                ve,
-                h === "dialog" ? /* @__PURE__ */ i.jsx("div", { className: "flex flex-col flex-1", children: le }) : le,
-                Ce
+                Ce,
+                m === "dialog" ? /* @__PURE__ */ c.jsx("div", { className: "flex flex-col flex-1", children: de }) : de,
+                Ne
               ] })
             ]
           }
         )
       }
     );
-    return d ? de : Ie(de, document.body);
+    return i ? ce : je(ce, document.body);
   }
 );
-pe.displayName = "Dialog";
-const b = W(({ children: o, className: p, debugMode: c, scroll: d, expandX: x, expandY: t, expandWeight: E }) => {
-  const g = f(
-    x && "w-full min-w-0",
+xe.displayName = "Dialog";
+const C = B(({ children: o, className: x, debugMode: u, scroll: i, expandX: h, expandY: t, expandWeight: d }) => {
+  const g = p(
+    h && "w-full min-w-0",
     t && "flex-1 min-h-0"
-  ), h = t ? { flexGrow: E ?? 1, flexBasis: 0 } : void 0;
-  return /* @__PURE__ */ i.jsx("div", { style: h, className: f(
+  ), m = t ? { flexGrow: d ?? 1, flexBasis: 0 } : void 0;
+  return /* @__PURE__ */ c.jsx("div", { style: m, className: p(
     "flex flex-col p-4 prometeo-scrollbar-thin!",
-    c && "border-2 border-dashed border-red-500 bg-red-200/40 relative after:content-['CONTENT'] after:absolute after:top-2 after:left-1/2 after:w-max after:h-full after:text-red-500 ",
+    u && "border-2 border-dashed border-red-500 bg-red-200/40 relative after:content-['CONTENT'] after:absolute after:top-2 after:left-1/2 after:w-max after:h-full after:text-red-500 ",
     g,
-    p,
+    x,
     // Para scroll='content', este componente necesita su propio scroll y altura mínima
-    d === "content" && "overflow-y-auto min-h-0  flex-1 ",
+    i === "content" && "overflow-y-auto min-h-0  flex-1 ",
     // Para scroll='dialog', el contenido debe ocupar todo el espacio disponible pero sin scroll
-    d === "dialog" && "flex-1 min-h-max "
+    i === "dialog" && "flex-1 min-h-max "
   ), children: o });
 });
-b.displayName = "DialogContent";
-const Y = W(({ children: o, className: p, debugMode: c, expandX: d, expandY: x }) => {
-  const t = f(
-    d && "w-full min-w-0",
-    x && "flex-1 min-h-0"
+C.displayName = "DialogContent";
+const j = B(({ children: o, className: x, debugMode: u, expandX: i, expandY: h }) => {
+  const t = p(
+    i && "w-full min-w-0",
+    h && "flex-1 min-h-0"
   );
-  return /* @__PURE__ */ i.jsx("h1", { className: f("prometeo-fonts-headline-small text-neutral-strong-default w-max", c && 'bg-red-400/40 relative after:content-["TITLE"] after:absolute after:top-0 after:-translate-y-5 after:left-0 after:w-max after:h-full after:text-red-500 after:prometeo-fonts-label-large', t, p), children: o });
+  return /* @__PURE__ */ c.jsx("h1", { className: p("prometeo-fonts-headline-small text-neutral-strong-default w-max", u && 'bg-red-400/40 relative after:content-["TITLE"] after:absolute after:top-0 after:-translate-y-5 after:left-0 after:w-max after:h-full after:text-red-500 after:prometeo-fonts-label-large', t, x), children: o });
 });
-Y.displayName = "DialogTitle";
-const v = W(({ children: o, className: p, title: c, debugMode: d, expandX: x, expandY: t, expandWeight: E }) => {
-  const g = f(
-    x && "w-full min-w-0",
+j.displayName = "DialogTitle";
+const N = B(({ children: o, className: x, title: u, debugMode: i, expandX: h, expandY: t, expandWeight: d }) => {
+  const g = p(
+    h && "w-full min-w-0",
     t && "flex-1 min-h-0"
-  ), h = t ? { flexGrow: E ?? 1, flexBasis: 0 } : void 0;
-  return /* @__PURE__ */ i.jsxs("div", { style: h, className: f(
+  ), m = t ? { flexGrow: d ?? 1, flexBasis: 0 } : void 0;
+  return /* @__PURE__ */ c.jsxs("div", { style: m, className: p(
     "px-6 pt-8 pb-4 flex flex-col",
     g,
-    d && "border-2 border-dashed border-red-600 bg-red-200/40! relative after:content-['HEADER'] after:absolute after:top-1 after:left-1/2 after:w-max after:h-full after:text-red-500",
-    p
+    i && "border-2 border-dashed border-red-600 bg-red-200/40! relative after:content-['HEADER'] after:absolute after:top-1 after:left-1/2 after:w-max after:h-full after:text-red-500",
+    x
   ), children: [
-    c && /* @__PURE__ */ i.jsx(Y, { debugMode: d, children: c }),
+    u && /* @__PURE__ */ c.jsx(j, { debugMode: i, children: u }),
     o
   ] });
 });
-v.displayName = "DialogHeader";
-const C = W(({ children: o, className: p, debugMode: c, expandX: d, expandY: x, expandWeight: t }) => {
-  const E = f(
-    d && "w-full min-w-0",
-    x && "flex-1 min-h-0 flex-col"
-  ), g = x ? { flexGrow: t ?? 1, flexBasis: 0 } : void 0;
-  return /* @__PURE__ */ i.jsx("div", { style: g, className: f(
-    c && "border-2 border-dashed border-red-600 bg-red-200/40! relative after:content-['FOOTER'] after:absolute after:top-1 after:left-1/2 after:w-max after:h-full after:text-red-500",
+N.displayName = "DialogHeader";
+const I = B(({ children: o, className: x, debugMode: u, expandX: i, expandY: h, expandWeight: t }) => {
+  const d = p(
+    i && "w-full min-w-0",
+    h && "flex-1 min-h-0 flex-col"
+  ), g = h ? { flexGrow: t ?? 1, flexBasis: 0 } : void 0;
+  return /* @__PURE__ */ c.jsx("div", { style: g, className: p(
+    u && "border-2 border-dashed border-red-600 bg-red-200/40! relative after:content-['FOOTER'] after:absolute after:top-1 after:left-1/2 after:w-max after:h-full after:text-red-500",
     "border-t border-neutral-strong-default p-4 w-full flex flex-row justify-end gap-4",
-    E,
-    p
+    d,
+    x
   ), children: o });
 });
-C.displayName = "DialogFooter";
-const je = Object.assign(pe, {
-  Content: b,
-  Header: v,
-  Footer: C,
-  Title: Y
+I.displayName = "DialogFooter";
+const Re = Object.assign(xe, {
+  Content: C,
+  Header: N,
+  Footer: I,
+  Title: j
 });
-je.displayName = "DialogModal";
-const ze = () => {
-  const o = R(null), p = I((t) => {
-    o.current?.open(t);
-  }, []), c = I(() => {
+Re.displayName = "DialogModal";
+const Fe = () => {
+  const o = Y(null), [x, u] = S(!1), i = R((d) => {
+    o.current?.open(d);
+  }, []), h = R(() => {
     o.current?.close();
-  }, []), d = I(() => o.current?.isOpen ?? !1, []), x = I(() => o.current?.getContext() ?? null, []);
+  }, []);
+  T(() => {
+    const d = o.current?.subscribeOpenChange;
+    if (!d) return;
+    const g = d((m) => {
+      u(m);
+    });
+    return () => {
+      g && g();
+    };
+  }, [o.current?.subscribeOpenChange]);
+  const t = R(() => o.current?.getContext() ?? null, []);
   return {
     ref: o,
-    open: p,
-    close: c,
-    isOpen: d,
-    getContext: x
+    open: i,
+    close: h,
+    isOpen: x,
+    getContext: t
   };
 };
 export {
-  je as default,
-  ze as useDialogControl
+  Re as default,
+  Fe as useDialogControl
 };

package/dist/IconButton.es.js

@@ -254,7 +254,7 @@ const b = {
   children: r,
   hideSpinner: y = !1,
   spinner: w = /* @__PURE__ */ a.jsx(T, { size: "small", variant: "clip", color: "var(--neutral-600)", className: "size-4 " }),
-  type: S,
+  type: S = "button",
   className: z,
   disabled: m,
   variant: s = "fill",