prometeo-design-system 4.6.4 → 4.6.5

package/dist/DialogModal.es.js

@@ -1,162 +1,173 @@
-import { j as t } from "./jsx-runtime-DKDX3adD.js";
-import { forwardRef as _, memo as b, useState as H, useRef as R, useCallback as p, useImperativeHandle as $, Children as q, isValidElement as I } from "react";
-import { createPortal as B } from "react-dom";
-import { c } from "./cn-B6yFEsav.js";
-const A = _(
-  ({ children: r, onClose: a, className: n, attachToParent: o = !1, zindex: y = 40, debugMode: l = !1, safeMarginSize: S = 24, title: j, scroll: x = "content" }, G) => {
-    const [C, F] = H(!1), [v, T] = H(null), z = R(a), N = R(v);
-    z.current = a, N.current = v;
-    const O = p((e) => {
-      T(e ?? null), F(!0);
-    }, []), D = p(() => {
-      F(!1), z.current?.(N.current), setTimeout(() => T(null), 300);
+import { j as e } from "./jsx-runtime-DKDX3adD.js";
+import { forwardRef as Q, memo as j, useState as L, useRef as F, useCallback as x, useImperativeHandle as W, Children as R, isValidElement as U } from "react";
+import { createPortal as X } from "react-dom";
+import { c as p } from "./cn-B6yFEsav.js";
+const V = Q(
+  ({ children: t, onClose: n, className: o, attachToParent: s = !1, zindex: v = 40, debugMode: a = !1, safeMarginSize: _ = 24, title: T, scroll: m = "content" }, $) => {
+    const [N, z] = L(!1), [D, O] = L(null), k = F(n), w = F(D);
+    k.current = n, w.current = D;
+    const P = x((f) => {
+      O(f ?? null), z(!0);
+    }, []), E = x(() => {
+      z(!1), k.current?.(w.current), setTimeout(() => O(null), 300);
     }, []);
-    $(
-      G,
+    W(
+      $,
       () => ({
-        open: O,
-        close: D,
-        isOpen: C,
-        getContext: () => N.current
+        open: P,
+        close: E,
+        isOpen: N,
+        getContext: () => w.current
       }),
-      [O, D, C]
+      [P, E, N]
     );
-    const L = `max-[500px]:max-w-[calc(100%-32px)]
+    const q = `max-[500px]:max-w-[calc(100%-32px)]
       max-[1200px]:max-w-[min(800px,calc(100%-32px))]
-      min-[1200px]:max-w-[min(1224px,calc(100%-100px))] min-[1200px]:min-w-[1100px]`, U = typeof r == "function" ? r(v) : r, V = q.toArray(U);
-    let s = null, u = null, w = null;
-    const h = [];
-    let E = null;
-    if (V.forEach((e) => {
-      if (!I(e)) {
-        h.push(e);
-        return;
-      }
-      if (e.type === g && !j) {
-        u = e;
-        return;
-      }
-      if (e.type === i && !s) {
-        const f = e.props;
-        s = /* @__PURE__ */ t.jsx(i, { ...f, debugMode: l, children: f.children });
-        return;
-      }
-      if (e.type === d && !w) {
-        const f = e.props;
-        w = /* @__PURE__ */ t.jsx(d, { ...f, debugMode: l, scroll: x, children: f.children });
-        return;
-      }
-      if (e.type === m && !E) {
-        const f = e.props;
-        E = /* @__PURE__ */ t.jsx(m, { ...f, debugMode: l, children: f.children });
-        return;
-      }
-      e.type !== i && e.type !== d && e.type !== m && e.type !== g && h.push(e);
-    }), !s && j && (s = /* @__PURE__ */ t.jsx(i, { title: j, debugMode: l }), u = null), s && u && I(s)) {
-      const e = s.props;
-      e.title && (s = /* @__PURE__ */ t.jsx(i, { ...e, title: "", debugMode: l, children: u }), u = null);
+      min-[1200px]:max-w-[min(1224px,calc(100%-100px))] min-[1200px]:min-w-[1100px]`;
+    let C, b;
+    typeof t == "function" ? (console.log("es un child de tipo function"), C = t(D), b = R.toArray(C), console.log(b, "Child array")) : (C = t, b = R.toArray(C));
+    const B = (f) => {
+      const l = {
+        header: null,
+        titleContent: null,
+        content: null,
+        footer: null,
+        middleChildren: []
+      }, S = (r) => {
+        if (!U(r)) {
+          l.middleChildren.push(r);
+          return;
+        }
+        if (r.type === g && !l.titleContent) {
+          l.titleContent = r;
+          return;
+        }
+        if (r.type === d && !l.header) {
+          const i = r.props;
+          l.header = /* @__PURE__ */ e.jsx(d, { ...i, debugMode: a, children: i.children });
+          return;
+        }
+        if (r.type === u && !l.content) {
+          const i = r.props;
+          l.content = /* @__PURE__ */ e.jsx(u, { ...i, debugMode: a, scroll: m, children: i.children });
+          return;
+        }
+        if (r.type === h && !l.footer) {
+          const i = r.props;
+          l.footer = /* @__PURE__ */ e.jsx(h, { ...i, debugMode: a, children: i.children });
+          return;
+        }
+        const G = r.props;
+        G?.children && R.toArray(G.children).forEach(S), r.type !== d && r.type !== u && r.type !== h && r.type !== g && l.middleChildren.push(r);
+      };
+      return f.forEach(S), l;
+    };
+    let { header: c, titleContent: y, content: J, footer: K, middleChildren: A } = B(b);
+    if (!c && T && (c = /* @__PURE__ */ e.jsx(d, { title: T, debugMode: a }), y = null), c && y && U(c)) {
+      const f = c.props;
+      f.title && (c = /* @__PURE__ */ e.jsx(d, { ...f, title: "", debugMode: a, children: y }), y = null);
     }
-    const k = w ?? (h.length ? /* @__PURE__ */ t.jsx(d, { debugMode: l, scroll: x, children: h }) : null), P = /* @__PURE__ */ t.jsx(t.Fragment, { children: C && /* @__PURE__ */ t.jsx(
+    const H = J ?? (A.length ? /* @__PURE__ */ e.jsx(u, { debugMode: a, scroll: m, children: A }) : null), I = /* @__PURE__ */ e.jsx(e.Fragment, { children: N && /* @__PURE__ */ e.jsx(
       "div",
       {
         className: "fixed inset-0 z-50 flex items-center justify-center bg-black/30 backdrop-blur-[1.5px]",
-        style: { zIndex: y },
-        onClick: D,
-        children: /* @__PURE__ */ t.jsxs(
+        style: { zIndex: v },
+        onClick: E,
+        children: /* @__PURE__ */ e.jsxs(
           "div",
           {
-            onClick: (e) => e.stopPropagation(),
-            className: c(
+            onClick: (f) => f.stopPropagation(),
+            className: p(
               "bg-neutral-default-default rounded-lg shadow-lg border-neutral-strong-default border relative ",
               "max-h-[calc(100%-128px)] h-dvh w-full",
               "flex flex-col ",
-              L,
-              n
+              q,
+              o
             ),
             style: {
-              "--safe-margin-size": `${S}px`
+              "--safe-margin-size": `${_}px`
             },
             children: [
-              /* @__PURE__ */ t.jsx(
+              /* @__PURE__ */ e.jsx(
                 "div",
                 {
-                  className: c(
+                  className: p(
                     "absolute bg-transparent z-[-1] -top-(--safe-margin-size) -left-(--safe-margin-size) -right-(--safe-margin-size) -bottom-(--safe-margin-size)",
-                    l && "after:content-['SECURE_MARGIN'] after:text-red-300 after:prometeo-fonts-label-small after:ml-2 "
+                    a && "after:content-['SECURE_MARGIN'] after:text-red-300 after:prometeo-fonts-label-small after:ml-2 "
                   ),
                   style: {
-                    background: l ? "#FF393973" : "auto",
-                    border: l ? "solid 1px #FF3939" : ""
+                    background: a ? "#FF393973" : "auto",
+                    border: a ? "solid 1px #FF3939" : ""
                   }
                 }
               ),
-              /* @__PURE__ */ t.jsxs("div", { className: c(
+              /* @__PURE__ */ e.jsxs("div", { className: p(
                 "flex flex-col h-full",
-                x === "dialog" && "overflow-y-auto",
-                x === "content" && "overflow-hidden"
+                m === "dialog" && "overflow-y-auto",
+                m === "content" && "overflow-hidden"
               ), children: [
-                s,
-                x === "dialog" ? /* @__PURE__ */ t.jsx("div", { className: "flex flex-col flex-1", children: k }) : k,
-                E
+                c,
+                m === "dialog" ? /* @__PURE__ */ e.jsx("div", { className: "flex flex-col flex-1", children: H }) : H,
+                K
               ] })
             ]
           }
         )
       }
     ) });
-    return o ? P : B(P, document.body);
+    return s ? I : X(I, document.body);
   }
 );
-A.displayName = "Dialog";
-const d = b(({ children: r, className: a, debugMode: n, scroll: o }) => /* @__PURE__ */ t.jsx("div", { className: c(
-  "flex flex-col gap-4 p-4",
-  n && "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 ",
-  a,
+V.displayName = "Dialog";
+const u = j(({ children: t, className: n, debugMode: o, scroll: s }) => /* @__PURE__ */ e.jsx("div", { className: p(
+  "flex flex-col p-4",
+  o && "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 ",
+  n,
   // Para scroll='content', este componente necesita su propio scroll y altura mínima
-  o === "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
-  o === "dialog" && "flex-1 min-h-max "
-), children: r }));
-d.displayName = "DialogContent";
-const g = b(({ children: r, className: a, debugMode: n }) => /* @__PURE__ */ t.jsx("h1", { className: c("prometeo-fonts-headline-small text-neutral-strong-default w-max", n && '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', a), children: r }));
+  s === "dialog" && "flex-1 min-h-max "
+), children: t }));
+u.displayName = "DialogContent";
+const g = j(({ children: t, className: n, debugMode: o }) => /* @__PURE__ */ e.jsx("h1", { className: p("prometeo-fonts-headline-small text-neutral-strong-default w-max", o && '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', n), children: t }));
 g.displayName = "DialogTitle";
-const i = b(({ children: r, className: a, title: n, debugMode: o }) => /* @__PURE__ */ t.jsxs("div", { className: c(
+const d = j(({ children: t, className: n, title: o, debugMode: s }) => /* @__PURE__ */ e.jsxs("div", { className: p(
   "p-4",
-  o && "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",
-  a
+  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",
+  n
 ), children: [
-  n && /* @__PURE__ */ t.jsx(g, { debugMode: o, children: n }),
-  r
+  o && /* @__PURE__ */ e.jsx(g, { debugMode: s, children: o }),
+  t
 ] }));
-i.displayName = "DialogHeader";
-const m = b(({ children: r, className: a, debugMode: n }) => /* @__PURE__ */ t.jsx("div", { className: c(
-  n && "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",
+d.displayName = "DialogHeader";
+const h = j(({ children: t, className: n, debugMode: o }) => /* @__PURE__ */ e.jsx("div", { className: p(
+  o && "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",
-  a
-), children: r }));
-m.displayName = "DialogFooter";
-const J = Object.assign(A, {
-  Content: d,
-  Header: i,
-  Footer: m,
+  n
+), children: t }));
+h.displayName = "DialogFooter";
+const Y = Object.assign(V, {
+  Content: u,
+  Header: d,
+  Footer: h,
   Title: g
 });
-J.displayName = "DialogModal";
-const Y = () => {
-  const r = R(null), a = p((l) => {
-    r.current?.open(l);
-  }, []), n = p(() => {
-    r.current?.close();
-  }, []), o = p(() => r.current?.isOpen ?? !1, []), y = p(() => r.current?.getContext() ?? null, []);
+Y.displayName = "DialogModal";
+const re = () => {
+  const t = F(null), n = x((a) => {
+    t.current?.open(a);
+  }, []), o = x(() => {
+    t.current?.close();
+  }, []), s = x(() => t.current?.isOpen ?? !1, []), v = x(() => t.current?.getContext() ?? null, []);
   return {
-    ref: r,
-    open: a,
-    close: n,
-    isOpen: o,
-    getContext: y
+    ref: t,
+    open: n,
+    close: o,
+    isOpen: s,
+    getContext: v
   };
 };
 export {
-  J as default,
-  Y as useDialogControl
+  Y as default,
+  re as useDialogControl
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "prometeo-design-system",
   "private": false,
-  "version": "4.6.4",
+  "version": "4.6.5",
   "type": "module",
   "description": "design kit system",
   "main": "dist/prometeo-design-system.umd.js",