@yuno-payments/dashboard-design-system 2.9.2 → 2.9.3-BETA.1

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

@@ -1,14 +1,15 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import * as i from "react";
+import * as a from "react";
 import { createPortal as F } from "react-dom";
-import { cva as p } from "../../../node_modules/class-variance-authority/dist/index.js";
+import { cva as y } 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(
+import { useBodyScrollLock as O } from "../../../hooks/use-body-scroll-lock.js";
+import { useOverlayPresence as P } from "../../../hooks/use-overlay-presence.js";
+import { useEscapeKey as R } from "../../../hooks/use-escape-key.js";
+import { DialogHeader as H } from "../../molecules/dialog-header/dialog-header.js";
+import { DialogContent as I } from "../../molecules/dialog-content/dialog-content.js";
+import { DialogFooter as K } from "../../molecules/dialog-footer/dialog-footer.js";
+const W = y(
   "fixed inset-0 flex items-center justify-center p-4",
   {
     variants: {
@@ -22,7 +23,7 @@ const P = p(
       verticalAlign: "center"
     }
   }
-), W = p(
+), q = y(
   "relative bg-background rounded-lg shadow-lg border border-border max-h-[90vh] overflow-hidden flex flex-col",
   {
     variants: {
@@ -38,15 +39,15 @@ const P = p(
       size: "default"
     }
   }
-), q = i.forwardRef(
+), G = a.forwardRef(
   ({
-    className: y,
+    className: p,
     verticalAlign: b,
     title: h,
-    open: a,
+    open: i,
     closeIcon: o,
     buttons: j = [],
-    widthContainer: l,
+    widthContainer: r,
     heightContainer: c,
     backButtonAction: z,
     showActions: N = !0,
@@ -56,27 +57,27 @@ const P = p(
     headerClassName: S,
     contentClassName: T,
     footerClassName: V,
-    zIndex: r,
+    zIndex: l,
     ...A
   }, C) => {
-    const [s, L] = i.useState(!1), [n, u] = i.useState(a), [f, g] = i.useState(!1);
-    if (i.useEffect(() => {
+    const [s, L] = a.useState(!1), [n, u] = a.useState(i), [f, g] = a.useState(!1);
+    if (a.useEffect(() => {
       const t = () => {
         L(window.innerWidth <= 599);
       };
       return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
-    }, []), i.useEffect(() => {
+    }, []), a.useEffect(() => {
       let t, m;
-      return a ? (u(!0), t = setTimeout(() => g(!0), 10)) : n && (g(!1), m = setTimeout(() => {
+      return i ? (u(!0), t = setTimeout(() => g(!0), 10)) : n && (g(!1), m = setTimeout(() => {
         u(!1);
       }, 600)), () => {
         t && clearTimeout(t), m && clearTimeout(m);
       };
-    }, [a, n]), R(a), H(a, o), !n) return null;
+    }, [i, n]), O(i), P(i), R(i, o), !n) return null;
     const M = {
-      width: l && !s ? w(l) : void 0,
+      width: r && !s ? w(r) : 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: [
+    }, x = l !== void 0 ? { zIndex: l } : void 0, v = l === void 0 ? "z-dialog" : void 0, B = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
       /* @__PURE__ */ e.jsx(
         "div",
         {
@@ -93,7 +94,7 @@ const P = p(
       /* @__PURE__ */ e.jsx(
         "div",
         {
-          className: d(P({ verticalAlign: b }), v),
+          className: d(W({ verticalAlign: b }), v),
           style: x,
           children: /* @__PURE__ */ e.jsxs(
             "div",
@@ -101,13 +102,13 @@ const P = p(
               ref: C,
               className: d(
                 "yuno-dialog",
-                W({
+                q({
                   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
+                r && !s && "max-w-none",
+                p
               ),
               style: M,
               role: "dialog",
@@ -115,7 +116,7 @@ const P = p(
               ...A,
               children: [
                 D && /* @__PURE__ */ e.jsx(
-                  I,
+                  H,
                   {
                     title: h,
                     onClose: o,
@@ -124,8 +125,8 @@ const P = p(
                     className: S
                   }
                 ),
-                /* @__PURE__ */ e.jsx(K, { className: T, children: E }),
-                N && /* @__PURE__ */ e.jsx(O, { buttons: j, className: V })
+                /* @__PURE__ */ e.jsx(I, { className: T, children: E }),
+                N && /* @__PURE__ */ e.jsx(K, { buttons: j, className: V })
               ]
             }
           )
@@ -135,7 +136,7 @@ const P = p(
     return F(B, document.body);
   }
 );
-q.displayName = "Dialog";
+G.displayName = "Dialog";
 export {
-  q as Dialog
+  G as Dialog
 };

package/dist/components/organisms/sheet/sheet.js

@@ -4,11 +4,12 @@ import { createPortal as H } from "react-dom";
 import { cva as g } from "../../../node_modules/class-variance-authority/dist/index.js";
 import { cn as r, normalizeDimension as p } from "../../../lib/utils.js";
 import { useBodyScrollLock as M } from "../../../hooks/use-body-scroll-lock.js";
-import { useEscapeKey as R } from "../../../hooks/use-escape-key.js";
-import { Icon as W } from "../../atoms/icon/icon.js";
+import { useOverlayPresence as R } from "../../../hooks/use-overlay-presence.js";
+import { useEscapeKey as W } from "../../../hooks/use-escape-key.js";
+import { Icon as D } from "../../atoms/icon/icon.js";
 import { Button as x } from "../../atoms/button/button.js";
 import { Typography as b } from "../../atoms/typography/typography.js";
-const D = g(
+const F = g(
   "fixed z-sheet bg-background shadow-lg transition-transform duration-300 ease-in-out",
   {
     variants: {
@@ -38,7 +39,7 @@ const D = g(
       isOpen: !1
     }
   }
-), F = g(
+), K = g(
   "fixed inset-0 z-sheet bg-black/50 transition-opacity duration-300",
   {
     variants: {
@@ -51,7 +52,7 @@ const D = g(
       isOpen: !1
     }
   }
-), K = i.forwardRef(
+), L = i.forwardRef(
   ({
     className: y,
     side: s = "right",
@@ -60,8 +61,8 @@ const D = g(
     open: a,
     onClose: n,
     buttons: c = [],
-    width: j,
-    height: v,
+    width: v,
+    height: j,
     showHeader: O = !0,
     showFooter: N = !0,
     children: w,
@@ -72,7 +73,7 @@ const D = g(
     ...V
   }, E) => {
     const [I, f] = i.useState(!1), [u, h] = i.useState(!1);
-    if (M(a), R(a, n), i.useEffect(() => {
+    if (M(a), R(a), W(a, n), i.useEffect(() => {
       if (a) {
         f(!0);
         const t = setTimeout(() => h(!0), 10);
@@ -83,14 +84,14 @@ const D = g(
         return () => clearTimeout(t);
       }
     }, [a]), !I) return null;
-    const d = p(j), m = p(v), A = {
-      ...d && (s === "left" || s === "right") ? { width: d, maxWidth: d } : {},
-      ...m && (s === "top" || s === "bottom") ? { height: m, maxHeight: m } : {}
+    const m = p(v), d = p(j), A = {
+      ...m && (s === "left" || s === "right") ? { width: m, maxWidth: m } : {},
+      ...d && (s === "top" || s === "bottom") ? { height: d, maxHeight: d } : {}
     }, B = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
       /* @__PURE__ */ e.jsx(
         "div",
         {
-          className: F({ isOpen: u }),
+          className: K({ isOpen: u }),
           onClick: n,
           "aria-hidden": "true"
         }
@@ -99,7 +100,7 @@ const D = g(
         "div",
         {
           ref: E,
-          className: r(D({ side: s, isOpen: u }), y),
+          className: r(F({ side: s, isOpen: u }), y),
           style: A,
           role: "dialog",
           "aria-modal": "true",
@@ -144,7 +145,7 @@ const D = g(
                       onClick: n,
                       "aria-label": "Close",
                       className: "h-6 w-6",
-                      children: /* @__PURE__ */ e.jsx(W, { name: "X", size: "md" })
+                      children: /* @__PURE__ */ e.jsx(D, { name: "X", size: "md" })
                     }
                   )
                 ]
@@ -175,7 +176,7 @@ const D = g(
     return H(B, document.body);
   }
 );
-K.displayName = "Sheet";
+L.displayName = "Sheet";
 export {
-  K as Sheet
+  L as Sheet
 };

package/dist/hooks/use-overlay-presence.d.ts

@@ -0,0 +1,9 @@
+export declare const OVERLAY_EVENT = "yuno-overlay";
+/**
+ * Broadcasts an overlay open/close event while `isOpen` is true. Call it from
+ * any blocking-overlay component (Dialog, Sheet) alongside its other lifecycle
+ * hooks.
+ *
+ * @param isOpen - Whether the overlay is currently open
+ */
+export declare function useOverlayPresence(isOpen: boolean): void;

package/dist/hooks/use-overlay-presence.js

@@ -0,0 +1,18 @@
+import { useEffect as r } from "react";
+const o = "yuno-overlay";
+let t = 0;
+function n(e) {
+  typeof window > "u" || window.dispatchEvent(new CustomEvent(o, { detail: { open: e } }));
+}
+function i(e) {
+  r(() => {
+    if (e)
+      return t === 0 && n(!0), t++, () => {
+        t--, t === 0 && n(!1);
+      };
+  }, [e]);
+}
+export {
+  o as OVERLAY_EVENT,
+  i as useOverlayPresence
+};