prometeo-design-system 5.2.1 → 5.3.0

package/dist/DialogModal.es.js

@@ -1,28 +1,28 @@
 import { j as a } from "./jsx-runtime-GkKLlHH4.js";
-import { forwardRef as he, memo as D, useState as te, useRef as A, useCallback as v, useImperativeHandle as me, Children as N, isValidElement as T, createElement as j, cloneElement as ne } from "react";
-import { createPortal as Ee } from "react-dom";
-import { c as x } from "./cn-B6yFEsav.js";
-import { c as ge } from "./index-BOQuZ0gG.js";
-const oe = he(
-  ({ children: r, onClose: d, className: i, attachToParent: s = !1, zindex: f = 40, debugMode: t = !1, safeMarginSize: m = 24, title: E, scroll: p = "content", size: re = "medium" }, ae) => {
-    const [X, H] = te(!1), [k, S] = te(null), G = A(d), W = A(k);
-    G.current = d, W.current = k;
-    const V = v((g) => {
-      S(g ?? null), H(!0);
-    }, []), B = v(() => {
-      H(!1), G.current?.(W.current), setTimeout(() => S(null), 300);
+import { forwardRef as ye, memo as X, useState as ae, useRef as $, useCallback as w, useImperativeHandle as Ce, Children as P, isValidElement as G, createElement as D, cloneElement as le } from "react";
+import { createPortal as be } from "react-dom";
+import { c as u } from "./cn-B6yFEsav.js";
+import { c as ve } from "./index-BOQuZ0gG.js";
+const se = ye(
+  ({ children: r, onClose: i, className: f, attachToParent: d = !1, zindex: p = 40, debugMode: t = !1, safeMarginSize: m = 24, title: E, scroll: c = "content", size: de = "medium" }, ie) => {
+    const [k, V] = ae(!1), [W, K] = ae(null), L = $(i), B = $(W);
+    L.current = i, B.current = W;
+    const U = w((g) => {
+      K(g ?? null), V(!0);
+    }, []), F = w(() => {
+      V(!1), L.current?.(B.current), setTimeout(() => K(null), 300);
     }, []);
-    me(
-      ae,
+    Ce(
+      ie,
       () => ({
-        open: V,
-        close: B,
-        isOpen: X,
-        getContext: () => W.current
+        open: U,
+        close: F,
+        isOpen: k,
+        getContext: () => B.current
       }),
-      [V, B, X]
+      [U, F, k]
     );
-    const le = ge("max-h-[calc(100%-80px)]", {
+    const fe = ve("max-h-[calc(100%-80px)]", {
       variants: {
         size: {
           medium: " max-w-[min(740px,calc(100%-32px))]",
@@ -30,9 +30,9 @@ const oe = he(
         }
       }
     });
-    let P, F;
-    typeof r == "function" ? (P = r(k), F = N.toArray(P)) : (P = r, F = N.toArray(P));
-    const se = (g) => {
+    let I, R;
+    typeof r == "function" ? (I = r(W), R = P.toArray(I)) : (I = r, R = P.toArray(I));
+    const pe = (g) => {
       const e = {
         headerProps: null,
         titleContent: null,
@@ -47,17 +47,17 @@ const oe = he(
           footerExpandX: !1,
           footerExpandY: !1
         }
-      }, Y = (n) => {
-        if (!T(n)) return;
+      }, j = (n) => {
+        if (!G(n)) return;
         const o = n.props;
-        n.type === C ? (e.allExpandInfo.headerExpandX = e.allExpandInfo.headerExpandX || !!o?.expandX, e.allExpandInfo.headerExpandY = e.allExpandInfo.headerExpandY || !!o?.expandY) : n.type === y ? (e.allExpandInfo.contentExpandX = e.allExpandInfo.contentExpandX || !!o?.expandX, e.allExpandInfo.contentExpandY = e.allExpandInfo.contentExpandY || !!o?.expandY) : n.type === b && (e.allExpandInfo.footerExpandX = e.allExpandInfo.footerExpandX || !!o?.expandX, e.allExpandInfo.footerExpandY = e.allExpandInfo.footerExpandY || !!o?.expandY), o?.children && N.toArray(o.children).forEach(Y);
+        n.type === C ? (e.allExpandInfo.headerExpandX = e.allExpandInfo.headerExpandX || !!o?.expandX, e.allExpandInfo.headerExpandY = e.allExpandInfo.headerExpandY || !!o?.expandY) : n.type === y ? (e.allExpandInfo.contentExpandX = e.allExpandInfo.contentExpandX || !!o?.expandX, e.allExpandInfo.contentExpandY = e.allExpandInfo.contentExpandY || !!o?.expandY) : n.type === b && (e.allExpandInfo.footerExpandX = e.allExpandInfo.footerExpandX || !!o?.expandX, e.allExpandInfo.footerExpandY = e.allExpandInfo.footerExpandY || !!o?.expandY), o?.children && P.toArray(o.children).forEach(j);
       };
       return g.forEach((n) => {
-        if (Y(n), !T(n)) {
+        if (j(n), !G(n)) {
           e.middleChildren.push(n);
           return;
         }
-        if (n.type === w && !e.titleContent) {
+        if (n.type === N && !e.titleContent) {
           e.titleContent = n;
           return;
         }
@@ -78,71 +78,71 @@ const oe = he(
         }
         e.middleChildren.push(n);
       }), e;
-    }, de = (g, e, Y, n) => {
-      const o = (u) => {
-        if (!T(u))
-          return u;
-        const l = u.props;
-        if (u.type === w)
-          return /* @__PURE__ */ j(w, { ...l, debugMode: t, key: Math.random() }, l.children);
-        if (u.type === C)
-          return /* @__PURE__ */ j(C, { ...l, debugMode: t, expandWeight: e, key: Math.random() }, l.children);
-        if (u.type === y)
-          return /* @__PURE__ */ j(y, { ...l, debugMode: t, scroll: p, expandWeight: Y, key: Math.random() }, l.children);
-        if (u.type === b)
-          return /* @__PURE__ */ j(b, { ...l, debugMode: t, expandWeight: n, key: Math.random() }, l.children);
-        if (u.type === "form") {
-          const O = l?.children ? N.toArray(l.children).map(o) : [];
-          return ne(u, {
-            key: Math.random(),
-            ...l,
-            className: x(l?.className, "contents")
-          }, ...O);
+    }, ce = (g, e, j, n) => {
+      const o = (l, T) => {
+        if (!G(l))
+          return l;
+        const s = l.props, v = l.key ?? `dialog-child-${T}`;
+        if (l.type === N)
+          return /* @__PURE__ */ D(N, { ...s, debugMode: t, key: v }, s.children);
+        if (l.type === C)
+          return /* @__PURE__ */ D(C, { ...s, debugMode: t, expandWeight: e, key: v }, s.children);
+        if (l.type === y)
+          return /* @__PURE__ */ D(y, { ...s, debugMode: t, scroll: c, expandWeight: j, key: v }, s.children);
+        if (l.type === b)
+          return /* @__PURE__ */ D(b, { ...s, debugMode: t, expandWeight: n, key: v }, s.children);
+        if (l.type === "form") {
+          const A = s?.children ? P.toArray(s.children).map((H, S) => o(H, S)) : [];
+          return le(l, {
+            key: v,
+            ...s,
+            className: u(s?.className, "contents")
+          }, ...A);
         }
-        if (l?.children) {
-          const O = N.toArray(l.children).map(o);
-          return ne(u, { key: Math.random() }, ...O);
+        if (s?.children) {
+          const A = P.toArray(s.children).map((H, S) => o(H, S));
+          return le(l, { key: v }, ...A);
         }
-        return u;
+        return l;
       };
-      return g.map(o);
+      return g.map((l, T) => o(l, T));
     };
-    let { headerProps: $, titleContent: I, contentProps: L, footerProps: U, middleChildren: ie, allExpandInfo: c } = se(F), h = $ ? { ...$ } : null, R = L ? { ...L } : null, z = U ? { ...U } : null;
-    !h && E && (h = { title: E, children: null }, I = null), h && I && h.title && (h = {
+    let { headerProps: _, titleContent: Y, contentProps: q, footerProps: J, middleChildren: xe, allExpandInfo: x } = pe(R), h = _ ? { ..._ } : null, z = q ? { ...q } : null, O = J ? { ...J } : null;
+    !h && E && (h = { title: E, children: null }, Y = null), h && Y && h.title && (h = {
       ...h,
       title: "",
-      children: I
-    }, I = null);
-    const fe = c.headerExpandX || c.contentExpandX || c.footerExpandX, _ = c.headerExpandY || c.contentExpandY || c.footerExpandY, pe = [c.headerExpandY, c.contentExpandY, c.footerExpandY].filter(Boolean).length, q = c.contentExpandY ? pe > 1 ? 2 : 1 : void 0, J = c.headerExpandY ? 1 : void 0, K = c.footerExpandY ? 1 : void 0, Q = de(ie, J, q, K), ce = h ? /* @__PURE__ */ a.jsx(C, { ...h, debugMode: t, expandWeight: J, children: h.children }) : null, Z = (R ? /* @__PURE__ */ a.jsx(y, { ...R, debugMode: t, scroll: p, expandWeight: q, children: R.children }) : null) ?? (Q.length ? Q : null), xe = z ? /* @__PURE__ */ a.jsx(b, { ...z, debugMode: t, expandWeight: K, children: z.children }) : null, ue = fe ? "w-full" : "w-auto", M = {
+      children: Y
+    }, Y = null);
+    const ue = x.headerExpandX || x.contentExpandX || x.footerExpandX, Q = x.headerExpandY || x.contentExpandY || x.footerExpandY, he = [x.headerExpandY, x.contentExpandY, x.footerExpandY].filter(Boolean).length, Z = x.contentExpandY ? he > 1 ? 2 : 1 : void 0, M = x.headerExpandY ? 1 : void 0, ee = x.footerExpandY ? 1 : void 0, te = ce(xe, M, Z, ee), me = h ? /* @__PURE__ */ a.jsx(C, { ...h, debugMode: t, expandWeight: M, children: h.children }) : null, ne = (z ? /* @__PURE__ */ a.jsx(y, { ...z, debugMode: t, scroll: c, expandWeight: Z, children: z.children }) : null) ?? (te.length ? te : null), Ee = O ? /* @__PURE__ */ a.jsx(b, { ...O, debugMode: t, expandWeight: ee, children: O.children }) : null, ge = ue ? "w-full" : "w-auto", oe = {
       "--safe-margin-size": `${m}px`
     };
-    _ && (M.height = `calc(100% - ${m * 2}px)`);
-    const ee = /* @__PURE__ */ a.jsx(a.Fragment, { children: X && /* @__PURE__ */ a.jsx(
+    Q && (oe.height = `calc(100% - ${m * 2}px)`);
+    const re = /* @__PURE__ */ a.jsx(a.Fragment, { children: k && /* @__PURE__ */ a.jsx(
       "div",
       {
         className: "fixed inset-0 z-50 flex items-center justify-center bg-black/30 backdrop-blur-[1.5px]",
-        style: { zIndex: f },
-        onClick: B,
+        style: { zIndex: p },
+        onClick: F,
         children: /* @__PURE__ */ a.jsxs(
           "div",
           {
             onClick: (g) => g.stopPropagation(),
-            className: x(
+            className: u(
               "bg-neutral-default-default rounded-lg shadow-lg border-neutral-strong-default border relative ",
-              ue,
-              p === "content" ? "" : "prometeo-scrollbar-thin!",
-              p === "dialog" && "overflow-auto ",
-              p === "content" && "",
+              ge,
+              c === "content" ? "" : "prometeo-scrollbar-thin!",
+              c === "dialog" && "overflow-auto ",
+              c === "content" && "",
               "flex flex-col ",
-              le({ size: re })
+              fe({ size: de })
               // className
             ),
-            style: M,
+            style: oe,
             children: [
               /* @__PURE__ */ a.jsx(
                 "div",
                 {
-                  className: x(
+                  className: u(
                     "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 "
                   ),
@@ -152,102 +152,102 @@ const oe = he(
                   }
                 }
               ),
-              /* @__PURE__ */ a.jsxs("div", { className: x(
+              /* @__PURE__ */ a.jsxs("div", { className: u(
                 "flex flex-col h-auto prometeo-scrollbar-thin!",
-                _ && "flex-1 min-h-0",
-                p === "dialog" && "overflow-hidden min-w-max min-h-max",
-                p === "content" && "overflow-hidden",
-                i
+                Q && "flex-1 min-h-0",
+                c === "dialog" && "overflow-hidden min-w-max min-h-max",
+                c === "content" && "overflow-hidden",
+                f
               ), children: [
-                ce,
-                p === "dialog" ? /* @__PURE__ */ a.jsx("div", { className: "flex flex-col flex-1", children: Z }) : Z,
-                xe
+                me,
+                c === "dialog" ? /* @__PURE__ */ a.jsx("div", { className: "flex flex-col flex-1", children: ne }) : ne,
+                Ee
               ] })
             ]
           }
         )
       }
     ) });
-    return s ? ee : Ee(ee, document.body);
+    return d ? re : be(re, document.body);
   }
 );
-oe.displayName = "Dialog";
-const y = D(({ children: r, className: d, debugMode: i, scroll: s, expandX: f, expandY: t, expandWeight: m }) => {
-  const E = x(
-    f && "w-full min-w-0",
+se.displayName = "Dialog";
+const y = X(({ children: r, className: i, debugMode: f, scroll: d, expandX: p, expandY: t, expandWeight: m }) => {
+  const E = u(
+    p && "w-full min-w-0",
     t && "flex-1 min-h-0"
-  ), p = t ? { flexGrow: m ?? 1, flexBasis: 0 } : void 0;
-  return /* @__PURE__ */ a.jsx("div", { style: p, className: x(
+  ), c = t ? { flexGrow: m ?? 1, flexBasis: 0 } : void 0;
+  return /* @__PURE__ */ a.jsx("div", { style: c, className: u(
     "flex flex-col p-4 prometeo-scrollbar-thin!",
-    i && "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 ",
+    f && "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 ",
     E,
-    d,
+    i,
     // Para scroll='content', este componente necesita su propio scroll y altura mínima
-    s === "content" && "overflow-y-auto min-h-0  flex-1 ",
+    d === "content" && "overflow-y-auto min-h-0  flex-1 ",
     // Para scroll='dialog', el contenido debe ocupar todo el espacio disponible pero sin scroll
-    s === "dialog" && "flex-1 min-h-max "
+    d === "dialog" && "flex-1 min-h-max "
   ), children: r });
 });
 y.displayName = "DialogContent";
-const w = D(({ children: r, className: d, debugMode: i, expandX: s, expandY: f }) => {
-  const t = x(
-    s && "w-full min-w-0",
-    f && "flex-1 min-h-0"
+const N = X(({ children: r, className: i, debugMode: f, expandX: d, expandY: p }) => {
+  const t = u(
+    d && "w-full min-w-0",
+    p && "flex-1 min-h-0"
   );
-  return /* @__PURE__ */ a.jsx("h1", { className: x("prometeo-fonts-headline-small text-neutral-strong-default w-max", i && '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, d), children: r });
+  return /* @__PURE__ */ a.jsx("h1", { className: u("prometeo-fonts-headline-small text-neutral-strong-default w-max", f && '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, i), children: r });
 });
-w.displayName = "DialogTitle";
-const C = D(({ children: r, className: d, title: i, debugMode: s, expandX: f, expandY: t, expandWeight: m }) => {
-  const E = x(
-    f && "w-full min-w-0",
+N.displayName = "DialogTitle";
+const C = X(({ children: r, className: i, title: f, debugMode: d, expandX: p, expandY: t, expandWeight: m }) => {
+  const E = u(
+    p && "w-full min-w-0",
     t && "flex-1 min-h-0"
-  ), p = t ? { flexGrow: m ?? 1, flexBasis: 0 } : void 0;
-  return /* @__PURE__ */ a.jsxs("div", { style: p, className: x(
+  ), c = t ? { flexGrow: m ?? 1, flexBasis: 0 } : void 0;
+  return /* @__PURE__ */ a.jsxs("div", { style: c, className: u(
     "px-6 pt-8 pb-4 flex flex-col",
     E,
-    s && "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",
-    d
+    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",
+    i
   ), children: [
-    i && /* @__PURE__ */ a.jsx(w, { debugMode: s, children: i }),
+    f && /* @__PURE__ */ a.jsx(N, { debugMode: d, children: f }),
     r
   ] });
 });
 C.displayName = "DialogHeader";
-const b = D(({ children: r, className: d, debugMode: i, expandX: s, expandY: f, expandWeight: t }) => {
-  const m = x(
-    s && "w-full min-w-0",
-    f && "flex-1 min-h-0 flex-col"
-  ), E = f ? { flexGrow: t ?? 1, flexBasis: 0 } : void 0;
-  return /* @__PURE__ */ a.jsx("div", { style: E, className: x(
-    i && "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",
+const b = X(({ children: r, className: i, debugMode: f, expandX: d, expandY: p, expandWeight: t }) => {
+  const m = u(
+    d && "w-full min-w-0",
+    p && "flex-1 min-h-0 flex-col"
+  ), E = p ? { flexGrow: t ?? 1, flexBasis: 0 } : void 0;
+  return /* @__PURE__ */ a.jsx("div", { style: E, className: u(
+    f && "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",
     m,
-    d
+    i
   ), children: r });
 });
 b.displayName = "DialogFooter";
-const ye = Object.assign(oe, {
+const we = Object.assign(se, {
   Content: y,
   Header: C,
   Footer: b,
-  Title: w
+  Title: N
 });
-ye.displayName = "DialogModal";
-const Ie = () => {
-  const r = A(null), d = v((t) => {
+we.displayName = "DialogModal";
+const Xe = () => {
+  const r = $(null), i = w((t) => {
     r.current?.open(t);
-  }, []), i = v(() => {
+  }, []), f = w(() => {
     r.current?.close();
-  }, []), s = v(() => r.current?.isOpen ?? !1, []), f = v(() => r.current?.getContext() ?? null, []);
+  }, []), d = w(() => r.current?.isOpen ?? !1, []), p = w(() => r.current?.getContext() ?? null, []);
   return {
     ref: r,
-    open: d,
-    close: i,
-    isOpen: s,
-    getContext: f
+    open: i,
+    close: f,
+    isOpen: d,
+    getContext: p
   };
 };
 export {
-  ye as default,
-  Ie as useDialogControl
+  we as default,
+  Xe as useDialogControl
 };