@yuno-payments/dashboard-design-system 2.2.0 → 2.2.1

package/dist/components/organisms/dialog/dialog.d.ts

@@ -69,6 +69,11 @@ export interface DialogProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      * Additional CSS classes for the footer
      */
     footerClassName?: string;
+    /**
+     * Optional z-index override. When provided, replaces the default z-dialog value.
+     * Useful for rendering inside high z-index containers like inspector panels.
+     */
+    zIndex?: number;
 }
 /**
  * Modal dialog component with header, content, and footer sections.

package/dist/components/organisms/dialog/dialog.js

@@ -1,15 +1,15 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import * as a from "react";
-import { createPortal as M } from "react-dom";
-import { cva as x } from "../../../node_modules/class-variance-authority/dist/index.js";
-import { cn as m, normalizeDimension as g } from "../../../lib/utils.js";
-import { useBodyScrollLock as B } from "../../../hooks/use-body-scroll-lock.js";
-import { useEscapeKey as C } from "../../../hooks/use-escape-key.js";
-import { DialogHeader as F } from "../../molecules/dialog-header/dialog-header.js";
-import { DialogContent as I } from "../../molecules/dialog-content/dialog-content.js";
-import { DialogFooter as R } from "../../molecules/dialog-footer/dialog-footer.js";
-const H = x(
-  "fixed inset-0 z-dialog flex items-center justify-center p-4",
+import * as i from "react";
+import { createPortal as F } from "react-dom";
+import { cva as p } from "../../../node_modules/class-variance-authority/dist/index.js";
+import { cn as d, normalizeDimension as w } from "../../../lib/utils.js";
+import { useBodyScrollLock as R } from "../../../hooks/use-body-scroll-lock.js";
+import { useEscapeKey as H } from "../../../hooks/use-escape-key.js";
+import { DialogHeader as I } from "../../molecules/dialog-header/dialog-header.js";
+import { DialogContent as K } from "../../molecules/dialog-content/dialog-content.js";
+import { DialogFooter as O } from "../../molecules/dialog-footer/dialog-footer.js";
+const P = p(
+  "fixed inset-0 flex items-center justify-center p-4",
   {
     variants: {
       verticalAlign: {
@@ -22,7 +22,7 @@ const H = x(
       verticalAlign: "center"
     }
   }
-), K = x(
+), W = p(
   "relative bg-background rounded-lg shadow-lg border border-border max-h-[90vh] overflow-hidden flex flex-col",
   {
     variants: {
@@ -38,94 +38,104 @@ const H = x(
       size: "default"
     }
   }
-), O = a.forwardRef(
+), q = i.forwardRef(
   ({
-    className: w,
-    verticalAlign: p,
-    title: v,
-    open: i,
+    className: y,
+    verticalAlign: b,
+    title: h,
+    open: a,
     closeIcon: o,
-    buttons: y = [],
-    widthContainer: r,
-    heightContainer: d,
-    backButtonAction: b,
-    showActions: h = !0,
-    otherActions: j,
-    withHeader: z = !0,
-    children: N,
-    headerClassName: k,
-    contentClassName: D,
-    footerClassName: E,
-    ...T
-  }, V) => {
-    const [s, S] = a.useState(!1), [l, c] = a.useState(i), [u, f] = a.useState(!1);
-    if (a.useEffect(() => {
+    buttons: j = [],
+    widthContainer: l,
+    heightContainer: c,
+    backButtonAction: z,
+    showActions: N = !0,
+    otherActions: k,
+    withHeader: D = !0,
+    children: E,
+    headerClassName: S,
+    contentClassName: T,
+    footerClassName: V,
+    zIndex: r,
+    ...A
+  }, C) => {
+    const [s, L] = i.useState(!1), [n, u] = i.useState(a), [f, g] = i.useState(!1);
+    if (i.useEffect(() => {
       const t = () => {
-        S(window.innerWidth <= 599);
+        L(window.innerWidth <= 599);
       };
       return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
-    }, []), a.useEffect(() => {
-      let t, n;
-      return i ? (c(!0), t = setTimeout(() => f(!0), 10)) : l && (f(!1), n = setTimeout(() => {
-        c(!1);
+    }, []), i.useEffect(() => {
+      let t, m;
+      return a ? (u(!0), t = setTimeout(() => g(!0), 10)) : n && (g(!1), m = setTimeout(() => {
+        u(!1);
       }, 600)), () => {
-        t && clearTimeout(t), n && clearTimeout(n);
+        t && clearTimeout(t), m && clearTimeout(m);
       };
-    }, [i, l]), B(i), C(i, o), !l) return null;
-    const A = {
-      width: r && !s ? g(r) : void 0,
-      height: d && !s ? g(d) : void 0
-    }, L = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    }, [a, n]), R(a), H(a, o), !n) return null;
+    const M = {
+      width: l && !s ? w(l) : void 0,
+      height: c && !s ? w(c) : void 0
+    }, x = r !== void 0 ? { zIndex: r } : void 0, v = r === void 0 ? "z-dialog" : void 0, B = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
       /* @__PURE__ */ e.jsx(
         "div",
         {
-          className: m(
-            "fixed inset-0 z-dialog bg-black/25 transition-opacity duration-600 ease-out",
-            u ? "opacity-100" : "opacity-0"
+          className: d(
+            "fixed inset-0 bg-black/25 transition-opacity duration-600 ease-out",
+            v,
+            f ? "opacity-100" : "opacity-0"
           ),
+          style: x,
           onClick: o,
           "aria-hidden": "true"
         }
       ),
-      /* @__PURE__ */ e.jsx("div", { className: m(H({ verticalAlign: p })), children: /* @__PURE__ */ e.jsxs(
+      /* @__PURE__ */ e.jsx(
         "div",
         {
-          ref: V,
-          className: m(
-            "yuno-dialog",
-            K({
-              size: s ? "fullscreen" : "default"
-            }),
-            "transition-all duration-600 ease-out",
-            u ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-98 -translate-y-2",
-            r && !s && "max-w-none",
-            w
-          ),
-          style: A,
-          role: "dialog",
-          "aria-modal": "true",
-          ...T,
-          children: [
-            z && /* @__PURE__ */ e.jsx(
-              F,
-              {
-                title: v,
-                onClose: o,
-                onBack: b,
-                otherActions: j,
-                className: k
-              }
-            ),
-            /* @__PURE__ */ e.jsx(I, { className: D, children: N }),
-            h && /* @__PURE__ */ e.jsx(R, { buttons: y, className: E })
-          ]
+          className: d(P({ verticalAlign: b }), v),
+          style: x,
+          children: /* @__PURE__ */ e.jsxs(
+            "div",
+            {
+              ref: C,
+              className: d(
+                "yuno-dialog",
+                W({
+                  size: s ? "fullscreen" : "default"
+                }),
+                "transition-all duration-600 ease-out",
+                f ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-98 -translate-y-2",
+                l && !s && "max-w-none",
+                y
+              ),
+              style: M,
+              role: "dialog",
+              "aria-modal": "true",
+              ...A,
+              children: [
+                D && /* @__PURE__ */ e.jsx(
+                  I,
+                  {
+                    title: h,
+                    onClose: o,
+                    onBack: z,
+                    otherActions: k,
+                    className: S
+                  }
+                ),
+                /* @__PURE__ */ e.jsx(K, { className: T, children: E }),
+                N && /* @__PURE__ */ e.jsx(O, { buttons: j, className: V })
+              ]
+            }
+          )
         }
-      ) })
+      )
     ] });
-    return M(L, document.body);
+    return F(B, document.body);
   }
 );
-O.displayName = "Dialog";
+q.displayName = "Dialog";
 export {
-  O as Dialog
+  q as Dialog
 };