prometeo-design-system 5.0.2 → 5.1.1

package/dist/DialogModal.es.js

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