prometeo-design-system 4.6.1 → 4.6.3

package/dist/DialogModal.es.js

@@ -1,87 +1,88 @@
 import { j as o } from "./jsx-runtime-GkKLlHH4.js";
-import { forwardRef as w, memo as r, useState as C, useRef as x, useCallback as n, useImperativeHandle as R } from "react";
-import { createPortal as O } from "react-dom";
-import { c as b } from "./cn-B6yFEsav.js";
-const y = w(
-  ({ children: e, onClose: t, className: s, attachToParent: c = !1 }, i) => {
-    const [l, g] = C(!1), [u, f] = C(null), m = x(t), d = x(u);
-    m.current = t, d.current = u;
-    const D = n((a) => {
-      f(a ?? null), g(!0);
-    }, []), p = n(() => {
-      g(!1), m.current?.(d.current), setTimeout(() => f(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);
     }, []);
-    R(
+    O(
       i,
       () => ({
-        open: D,
-        close: p,
-        isOpen: l,
-        getContext: () => d.current
+        open: j,
+        close: x,
+        isOpen: u,
+        getContext: () => p.current
       }),
-      [D, p, l]
+      [j, x, u]
     );
-    const j = /* @__PURE__ */ o.jsx(o.Fragment, { children: l && /* @__PURE__ */ o.jsxs(
+    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: p,
+        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: b(
+              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",
-                s
+                r
               ),
-              children: typeof e == "function" ? e(u) : e
+              children: typeof e == "function" ? e(d) : e
             }
           )
         ]
       }
     ) });
-    return c ? j : O(j, document.body);
+    return s ? C : F(C, document.body);
   }
 );
-y.displayName = "Dialog";
-const N = r(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("div", { className: t, children: /* @__PURE__ */ o.jsx("div", { className: b("flex flex-col gap-4 h-full"), children: e }) }));
-N.displayName = "DialogContent";
-const h = r(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("h1", { className: t, children: e }));
-h.displayName = "DialogTitle";
-const v = r(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("div", { className: t, children: e }));
-v.displayName = "DialogHeader";
-const k = r(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("div", { className: t, children: e }));
-k.displayName = "DialogFooter";
-const F = Object.assign(y, {
-  Content: N,
-  Header: v,
-  Footer: k,
-  Title: h
+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
 });
-F.displayName = "DialogModal";
-const I = () => {
-  const e = x(null), t = n((l) => {
-    e.current?.open(l);
-  }, []), s = n(() => {
+H.displayName = "DialogModal";
+const M = () => {
+  const e = g(null), t = n((i) => {
+    e.current?.open(i);
+  }, []), r = n(() => {
     e.current?.close();
-  }, []), c = n(() => e.current?.isOpen ?? !1, []), i = n(() => e.current?.getContext() ?? null, []);
+  }, []), s = n(() => e.current?.isOpen ?? !1, []), c = n(() => e.current?.getContext() ?? null, []);
   return {
     ref: e,
     open: t,
-    close: s,
-    isOpen: c,
-    getContext: i
+    close: r,
+    isOpen: s,
+    getContext: c
   };
 };
 export {
-  F as default,
-  I 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 { j as m } 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()), {
-    modal: b = !1,
-    children: y,
+import { createPortal as B } from "react-dom";
+import { forwardRef as L, useRef as p, 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 = p(null), [e, u] = v(t.defaultOpen || !1), [r, s] = v(null), d = p(t.onClose), c = p(r), b = p(/* @__PURE__ */ new Set()), {
+    modal: y = !1,
+    children: f,
     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 = p(n), D = p(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 I = (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(() => {
-    if (!k.current || b || !e)
+  a(() => {
+    if (!k.current || y || !e)
       return;
-    const n = setTimeout(() => {
-      document.addEventListener("click", S);
+    const o = setTimeout(() => {
+      document.addEventListener("click", I);
     }, 0);
     return () => {
-      clearTimeout(n), document.removeEventListener("click", S);
+      clearTimeout(o), document.removeEventListener("click", I);
     };
-  }, [h, e, b]), s(() => {
+  }, [n, e, y]), 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 z = 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(() => {
+    b.current.forEach((o) => {
       try {
-        n(e);
+        o(e);
       } catch {
       }
     });
-  }, [e]), L(
+  }, [e]), Y(
     i,
     () => ({
       open: z,
       close: w,
       isOpen: e,
-      subscribeOpenChange: (n) => (p.current.add(n), () => {
-        p.current.delete(n);
+      subscribeOpenChange: (o) => (b.current.add(o), () => {
+        b.current.delete(o);
       }),
-      getContext: () => l.current
+      getContext: () => c.current
     }),
     [e, z, w]
   );
-  const E = /* @__PURE__ */ f.jsx(
-    $,
+  const S = /* @__PURE__ */ m.jsx(
+    q,
     {
       context: r,
-      ref: a,
+      ref: l,
       isOpen: e,
       close: w,
       direction: O,
-      modal: b,
+      modal: y,
       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 f == "function" ? f(r) : f)
     }
   );
-  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,
-  hideCloseButton: p = !1,
-  context: b
+  closeOnOverlayClick: c = !1,
+  hideCloseButton: b = !1,
+  context: y,
+  zindex: f = 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",
@@ -139,35 +142,37 @@ const $ = ({
       }
     }
   });
-  return /* @__PURE__ */ f.jsxs(f.Fragment, { children: [
-    r && /* @__PURE__ */ f.jsx(
+  return /* @__PURE__ */ m.jsxs(m.Fragment, { children: [
+    r && /* @__PURE__ */ m.jsx(
       "div",
       {
-        className: R(g({ isOpen: e })),
-        onClick: (c) => {
-          c.preventDefault(), c.stopPropagation(), l && u();
+        className: R(O({ isOpen: e })),
+        style: { zIndex: f },
+        onClick: (n) => {
+          n.preventDefault(), n.stopPropagation(), c && u();
         },
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ f.jsxs(
+    /* @__PURE__ */ m.jsxs(
       "div",
       {
         ref: t,
         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 }),
-          !p && "p-4 pt-10",
-          o
+          g({ isOpen: e, direction: l }),
+          !b && "p-4 pt-10",
+          s
         ),
         role: "dialog",
         "aria-modal": r,
+        style: { zIndex: f + 1 },
         children: [
-          !p && /* @__PURE__ */ f.jsx(
-            Y,
+          !b && /* @__PURE__ */ m.jsx(
+            F,
             {
-              icon: /* @__PURE__ */ f.jsx(F, { size: 24 }),
+              icon: /* @__PURE__ */ m.jsx(H, { size: 24 }),
               animate: !1,
               animateIcon: !1,
               type: "button",
@@ -178,27 +183,28 @@ const $ = ({
               color: "secondary",
               className: R(
                 "absolute top-0 z-50",
-                O({ direction: a })
+                h({ direction: l })
               ),
-              "aria-label": "Close drawer"
+              "aria-label": "Close drawer",
+              style: { zIndex: f + 2 }
             }
           ),
-          typeof i == "function" ? i(b) : i
+          typeof i == "function" ? i(y) : i
         ]
       }
     )
   ] });
-}, U = () => {
-  const t = m(null), [i, a] = v(!1), e = C((o) => {
-    t.current?.open(o);
-  }, []), u = C(() => {
+}, W = () => {
+  const t = p(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 +218,6 @@ const $ = ({
   };
 };
 export {
-  H as default,
-  U as useDrawerDesktop
+  $ as default,
+  W as useDrawerDesktop
 };

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

@@ -3,6 +3,7 @@ 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> {

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.1",
+  "version": "4.6.3",
   "type": "module",
   "description": "design kit system",
   "main": "dist/prometeo-design-system.umd.js",