prometeo-design-system 4.6.0 → 4.6.2

package/dist/DialogModal.es.js

@@ -1,84 +1,88 @@
 import { j as o } from "./jsx-runtime-GkKLlHH4.js";
-import { forwardRef as y, memo as r, useState as D, useRef as x, useCallback as l, useImperativeHandle as k } from "react";
-import { c as j } from "./cn-B6yFEsav.js";
-const C = y(
-  ({ children: e, onClose: t, className: c }, i) => {
-    const [n, s] = D(!1), [u, g] = D(null), f = x(t), p = x(u);
-    f.current = t, p.current = u;
-    const m = l((a) => {
-      g(a ?? null), s(!0);
-    }, []), d = l(() => {
-      s(!1), f.current?.(p.current), setTimeout(() => g(null), 300);
+import { forwardRef as R, memo as a, useState as b, useRef as g, useCallback as n, useImperativeHandle as O } from "react";
+import { createPortal as F } from "react-dom";
+import { c as y } from "./cn-B6yFEsav.js";
+const N = R(
+  ({ children: e, onClose: t, className: r, attachToParent: s = !1, zindex: c = 500 }, i) => {
+    const [u, f] = b(!1), [d, m] = b(null), D = g(t), p = g(d);
+    D.current = t, p.current = d;
+    const j = n((l) => {
+      m(l ?? null), f(!0);
+    }, []), x = n(() => {
+      f(!1), D.current?.(p.current), setTimeout(() => m(null), 300);
     }, []);
-    return k(
+    O(
       i,
       () => ({
-        open: m,
-        close: d,
-        isOpen: n,
+        open: j,
+        close: x,
+        isOpen: u,
         getContext: () => p.current
       }),
-      [m, d, n]
-    ), /* @__PURE__ */ o.jsx(o.Fragment, { children: n && /* @__PURE__ */ o.jsxs(
+      [j, x, u]
+    );
+    const C = /* @__PURE__ */ o.jsx(o.Fragment, { children: u && /* @__PURE__ */ o.jsxs(
       "div",
       {
         className: "fixed inset-0 z-50 flex items-center justify-center bg-black/30 backdrop-blur-[1.5px]",
-        onClick: d,
+        style: { zIndex: c },
+        onClick: x,
         children: [
           /* @__PURE__ */ o.jsx(
             "div",
             {
-              onClick: (a) => a.stopPropagation(),
+              onClick: (l) => l.stopPropagation(),
               className: "absolute bg-transparent z-[-1]  w-[calc(75%+10px)] h-[calc(75%+10px)] xl:w-[calc(75%+30px)] xl:h-[calc(83.33%+30px)] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2  "
             }
           ),
           /* @__PURE__ */ o.jsx(
             "div",
             {
-              onClick: (a) => a.stopPropagation(),
-              className: j(
+              onClick: (l) => l.stopPropagation(),
+              className: y(
                 "bg-neutral-default-default  w-3/4 h-3/4 xl:w-3/4 xl:h-10/12 rounded-lg shadow-lg border-neutral-strong-default border relative p-6",
-                c
+                r
               ),
-              children: typeof e == "function" ? e(u) : e
+              children: typeof e == "function" ? e(d) : e
             }
           )
         ]
       }
     ) });
+    return s ? C : F(C, document.body);
   }
 );
-C.displayName = "Dialog";
-const b = r(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("div", { className: t, children: /* @__PURE__ */ o.jsx("div", { className: j("flex flex-col gap-4 h-full"), children: e }) }));
-b.displayName = "DialogContent";
-const N = r(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("h1", { className: t, children: e }));
-N.displayName = "DialogTitle";
-const h = r(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("div", { className: t, children: e }));
-h.displayName = "DialogHeader";
-const v = r(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("div", { className: t, children: e }));
-v.displayName = "DialogFooter";
-const w = Object.assign(C, {
-  Content: b,
-  Header: h,
-  Footer: v,
-  Title: N
+N.displayName = "Dialog";
+const h = a(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("div", { className: t, children: /* @__PURE__ */ o.jsx("div", { className: y("flex flex-col gap-4 h-full"), children: e }) }));
+h.displayName = "DialogContent";
+const v = a(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("h1", { className: t, children: e }));
+v.displayName = "DialogTitle";
+const k = a(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("div", { className: t, children: e }));
+k.displayName = "DialogHeader";
+const w = a(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("div", { className: t, children: e }));
+w.displayName = "DialogFooter";
+const H = Object.assign(N, {
+  Content: h,
+  Header: k,
+  Footer: w,
+  Title: v
 });
-w.displayName = "DialogModal";
-const H = () => {
-  const e = x(null), t = l((s) => {
-    e.current?.open(s);
-  }, []), c = l(() => {
+H.displayName = "DialogModal";
+const M = () => {
+  const e = g(null), t = n((i) => {
+    e.current?.open(i);
+  }, []), r = n(() => {
     e.current?.close();
-  }, []), i = l(() => e.current?.isOpen ?? !1, []), n = l(() => e.current?.getContext() ?? null, []);
+  }, []), s = n(() => e.current?.isOpen ?? !1, []), c = n(() => e.current?.getContext() ?? null, []);
   return {
     ref: e,
     open: t,
-    close: c,
-    isOpen: i,
-    getContext: n
+    close: r,
+    isOpen: s,
+    getContext: c
   };
 };
 export {
-  w as default,
-  H as useDialogControl
+  H as default,
+  M as useDialogControl
 };

package/dist/DrawerDesktop.es.js

@@ -1,116 +1,119 @@
 import { j as f } from "./jsx-runtime-GkKLlHH4.js";
 import { c as R } from "./cn-B6yFEsav.js";
 import { c as j } from "./index-BOQuZ0gG.js";
-import { createPortal as P } from "react-dom";
-import { forwardRef as B, useRef as m, useState as v, useEffect as s, useCallback as C, useImperativeHandle as L } from "react";
-import Y from "./Button.es.js";
-import { Close as F } from "./Icons/Close.es.js";
-const H = B((t, i) => {
-  const a = m(null), [e, u] = v(t.defaultOpen || !1), [r, o] = v(null), d = m(t.onClose), l = m(r), p = m(/* @__PURE__ */ new Set()), {
+import { createPortal as B } from "react-dom";
+import { forwardRef as L, useRef as m, useState as v, useEffect as a, useCallback as x, useImperativeHandle as Y } from "react";
+import F from "./Button.es.js";
+import { Close as H } from "./Icons/Close.es.js";
+const $ = L((t, i) => {
+  const l = m(null), [e, u] = v(t.defaultOpen || !1), [r, s] = v(null), d = m(t.onClose), c = m(r), p = m(/* @__PURE__ */ new Set()), {
     modal: b = !1,
     children: y,
     className: g,
     direction: O = "left",
-    attachToParent: c = !1,
-    closeOnOverlayClick: h = !1,
+    attachToParent: h = !1,
+    closeOnOverlayClick: n = !1,
     hideCloseButton: N = !1,
-    unmountChildrenOnClose: x = !1
-  } = t, k = m(h), D = m(e);
-  l.current = r;
-  const [T, V] = v(() => !x);
-  s(() => {
-    x && e && V(!0);
-  }, [e, x]), s(() => {
+    unmountChildrenOnClose: C = !1,
+    zindex: T = 499
+  } = t, k = m(n), D = m(e);
+  c.current = r;
+  const [V, P] = v(() => !C);
+  a(() => {
+    C && e && P(!0);
+  }, [e, C]), a(() => {
     D.current = e;
-  }, [e]), s(() => {
-    l.current = r;
-  }, [r]), s(() => {
-    k.current = h;
-  }, [h]);
-  const S = (n) => {
-    if (!a.current)
+  }, [e]), a(() => {
+    c.current = r;
+  }, [r]), a(() => {
+    k.current = n;
+  }, [n]);
+  const z = (o) => {
+    if (!l.current)
       return;
-    const I = a.current;
-    I && !I.contains(n.target) && k.current && D.current && w();
+    const E = l.current;
+    E && !E.contains(o.target) && k.current && D.current && w();
   };
-  s(() => {
+  a(() => {
     if (!k.current || b || !e)
       return;
-    const n = setTimeout(() => {
-      document.addEventListener("click", S);
+    const o = setTimeout(() => {
+      document.addEventListener("click", z);
     }, 0);
     return () => {
-      clearTimeout(n), document.removeEventListener("click", S);
+      clearTimeout(o), document.removeEventListener("click", z);
     };
-  }, [h, e, b]), s(() => {
+  }, [n, e, b]), a(() => {
     d.current = t.onClose;
   }, [t.onClose]);
-  const z = C((n) => {
-    o(n ?? null), u(!0);
-  }, []), w = C(() => {
-    u(!1), d.current?.(l.current), setTimeout(() => o(null), 300);
+  const I = x((o) => {
+    s(o ?? null), u(!0);
+  }, []), w = x(() => {
+    u(!1), d.current?.(c.current), setTimeout(() => s(null), 300);
   }, []);
-  s(() => {
-    p.current.forEach((n) => {
+  a(() => {
+    p.current.forEach((o) => {
       try {
-        n(e);
+        o(e);
       } catch {
       }
     });
-  }, [e]), L(
+  }, [e]), Y(
     i,
     () => ({
-      open: z,
+      open: I,
       close: w,
       isOpen: e,
-      subscribeOpenChange: (n) => (p.current.add(n), () => {
-        p.current.delete(n);
+      subscribeOpenChange: (o) => (p.current.add(o), () => {
+        p.current.delete(o);
       }),
-      getContext: () => l.current
+      getContext: () => c.current
     }),
-    [e, z, w]
+    [e, I, w]
   );
-  const E = /* @__PURE__ */ f.jsx(
-    $,
+  const S = /* @__PURE__ */ f.jsx(
+    q,
     {
       context: r,
-      ref: a,
+      ref: l,
       isOpen: e,
       close: w,
       direction: O,
       modal: b,
       className: g,
-      attachToParent: c,
-      closeOnOverlayClick: h,
+      attachToParent: h,
+      closeOnOverlayClick: n,
       hideCloseButton: N,
-      children: (!x || T) && (typeof y == "function" ? y(r) : y)
+      zindex: T,
+      children: (!C || V) && (typeof y == "function" ? y(r) : y)
     }
   );
-  return c ? E : P(E, document.body);
+  return h ? S : B(S, document.body);
 });
-H.displayName = "DrawerDesktopV2";
-const $ = ({
+$.displayName = "DrawerDesktopV2";
+const q = ({
   ref: t,
   children: i,
-  direction: a = "left",
+  direction: l = "left",
   isOpen: e,
   close: u,
   modal: r = !1,
-  className: o,
+  className: s,
   attachToParent: d = !1,
-  closeOnOverlayClick: l = !1,
+  closeOnOverlayClick: c = !1,
   hideCloseButton: p = !1,
-  context: b
+  context: b,
+  zindex: y = 499
 }) => {
-  s(() => {
+  a(() => {
     if (e && r) {
-      const c = window.scrollY;
-      return document.body.style.position = "fixed", document.body.style.top = `-${c}px`, document.body.style.width = "100%", () => {
-        document.body.style.position = "", document.body.style.top = "", document.body.style.width = "", window.scrollTo(0, c);
+      const n = window.scrollY;
+      return document.body.style.position = "fixed", document.body.style.top = `-${n}px`, document.body.style.width = "100%", () => {
+        document.body.style.position = "", document.body.style.top = "", document.body.style.width = "", window.scrollTo(0, n);
       };
     }
   }, [e, r]);
-  const y = j("border-neutral-strong-default", {
+  const g = j("border-neutral-strong-default", {
     variants: {
       isOpen: {
         true: "desktop-drawer-visible",
@@ -121,7 +124,7 @@ const $ = ({
         right: "right-0 border-l-[1px] border-r-0"
       }
     }
-  }), g = j(
+  }), O = j(
     "fixed inset-0 bg-black/60 z-[55] cursor-default",
     {
       variants: {
@@ -131,7 +134,7 @@ const $ = ({
         }
       }
     }
-  ), O = j("", {
+  ), h = j("", {
     variants: {
       direction: {
         left: "right-0",
@@ -143,9 +146,10 @@ const $ = ({
     r && /* @__PURE__ */ f.jsx(
       "div",
       {
-        className: R(g({ isOpen: e })),
-        onClick: (c) => {
-          c.preventDefault(), c.stopPropagation(), l && u();
+        className: R(O({ isOpen: e })),
+        style: { zIndex: y },
+        onClick: (n) => {
+          n.preventDefault(), n.stopPropagation(), c && u();
         },
         "aria-hidden": "true"
       }
@@ -157,17 +161,17 @@ const $ = ({
         className: R(
           "bg-neutral-strong-default h-full top-0 z-60 w-max overflow-y-auto",
           d ? "absolute" : "fixed",
-          y({ isOpen: e, direction: a }),
+          g({ isOpen: e, direction: l }),
           !p && "p-4 pt-10",
-          o
+          s
         ),
         role: "dialog",
         "aria-modal": r,
         children: [
           !p && /* @__PURE__ */ f.jsx(
-            Y,
+            F,
             {
-              icon: /* @__PURE__ */ f.jsx(F, { size: 24 }),
+              icon: /* @__PURE__ */ f.jsx(H, { size: 24 }),
               animate: !1,
               animateIcon: !1,
               type: "button",
@@ -178,7 +182,7 @@ const $ = ({
               color: "secondary",
               className: R(
                 "absolute top-0 z-50",
-                O({ direction: a })
+                h({ direction: l })
               ),
               "aria-label": "Close drawer"
             }
@@ -188,17 +192,17 @@ const $ = ({
       }
     )
   ] });
-}, U = () => {
-  const t = m(null), [i, a] = v(!1), e = C((o) => {
-    t.current?.open(o);
-  }, []), u = C(() => {
+}, W = () => {
+  const t = m(null), [i, l] = v(!1), e = x((s) => {
+    t.current?.open(s);
+  }, []), u = x(() => {
     t.current?.close();
-  }, []), r = C(() => t.current?.getContext() ?? null, []);
-  return s(() => {
-    const o = t.current?.subscribeOpenChange;
-    if (!o) return;
-    const d = o((l) => {
-      a(l);
+  }, []), r = x(() => t.current?.getContext() ?? null, []);
+  return a(() => {
+    const s = t.current?.subscribeOpenChange;
+    if (!s) return;
+    const d = s((c) => {
+      l(c);
     });
     return () => {
       d && d();
@@ -212,6 +216,6 @@ const $ = ({
   };
 };
 export {
-  H as default,
-  U as useDrawerDesktop
+  $ as default,
+  W as useDrawerDesktop
 };

package/dist/components/Dialog/Dialog.d.ts

@@ -3,6 +3,8 @@ interface DialogProps<TContext = unknown> {
     children: React.ReactNode | ((context: TContext | null) => React.ReactNode);
     onClose?: (context: TContext | null) => void;
     className?: string;
+    zindex?: number;
+    attachToParent?: boolean;
 }
 export interface DialogHandle<TContext = unknown> {
     open: (context?: TContext) => void;

package/dist/components/Drawer/DrawerDesktop.d.ts

@@ -16,6 +16,7 @@ export interface DrawerDesktopProps<TContext = unknown> {
     closeOnOverlayClick?: boolean;
     hideCloseButton?: boolean;
     unmountChildrenOnClose?: boolean;
+    zindex?: number;
 }
 declare const DrawerDesktop: import('react').ForwardRefExoticComponent<DrawerDesktopProps<any> & import('react').RefAttributes<DrawerDesktopHandle<any>>>;
 export default DrawerDesktop;

package/package.json

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