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

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

@@ -1,14 +1,14 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import * as i from "react";
-import "react-dom";
+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 C } from "../../../hooks/use-body-scroll-lock.js";
-import { useEscapeKey as L } from "../../../hooks/use-escape-key.js";
-import { DialogHeader as M } from "../../molecules/dialog-header/dialog-header.js";
-import { DialogContent as B } from "../../molecules/dialog-content/dialog-content.js";
-import { DialogFooter as F } from "../../molecules/dialog-footer/dialog-footer.js";
-const I = x(
+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",
   {
     variants: {
@@ -22,7 +22,7 @@ const I = x(
       verticalAlign: "center"
     }
   }
-), R = x(
+), K = x(
   "relative bg-background rounded-lg shadow-lg border border-border max-h-[90vh] overflow-hidden flex flex-col",
   {
     variants: {
@@ -38,15 +38,15 @@ const I = x(
       size: "default"
     }
   }
-), H = i.forwardRef(
+), O = a.forwardRef(
   ({
     className: w,
     verticalAlign: p,
     title: v,
-    open: a,
-    closeIcon: l,
+    open: i,
+    closeIcon: o,
     buttons: y = [],
-    widthContainer: o,
+    widthContainer: r,
     heightContainer: d,
     backButtonAction: b,
     showActions: h = !0,
@@ -58,25 +58,24 @@ const I = x(
     footerClassName: E,
     ...T
   }, V) => {
-    const [s, S] = i.useState(!1), [r, c] = i.useState(a), [u, f] = i.useState(!1);
-    if (i.useEffect(() => {
+    const [s, S] = a.useState(!1), [l, c] = a.useState(i), [u, f] = a.useState(!1);
+    if (a.useEffect(() => {
       const t = () => {
         S(window.innerWidth <= 599);
       };
       return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
-    }, []), i.useEffect(() => {
+    }, []), a.useEffect(() => {
       let t, n;
-      return a ? (c(!0), t = setTimeout(() => f(!0), 10)) : r && (f(!1), n = setTimeout(() => {
+      return i ? (c(!0), t = setTimeout(() => f(!0), 10)) : l && (f(!1), n = setTimeout(() => {
         c(!1);
       }, 600)), () => {
         t && clearTimeout(t), n && clearTimeout(n);
       };
-    }, [a, r]), C(a), L(a, l), !r) return null;
+    }, [i, l]), B(i), C(i, o), !l) return null;
     const A = {
-      width: o && !s ? g(o) : void 0,
+      width: r && !s ? g(r) : void 0,
       height: d && !s ? g(d) : void 0
-    };
-    return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    }, L = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
       /* @__PURE__ */ e.jsx(
         "div",
         {
@@ -84,22 +83,22 @@ const I = x(
             "fixed inset-0 z-dialog bg-black/25 transition-opacity duration-600 ease-out",
             u ? "opacity-100" : "opacity-0"
           ),
-          onClick: l,
+          onClick: o,
           "aria-hidden": "true"
         }
       ),
-      /* @__PURE__ */ e.jsx("div", { className: m(I({ verticalAlign: p })), children: /* @__PURE__ */ e.jsxs(
+      /* @__PURE__ */ e.jsx("div", { className: m(H({ verticalAlign: p })), children: /* @__PURE__ */ e.jsxs(
         "div",
         {
           ref: V,
           className: m(
             "yuno-dialog",
-            R({
+            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",
-            o && !s && "max-w-none",
+            r && !s && "max-w-none",
             w
           ),
           style: A,
@@ -108,24 +107,25 @@ const I = x(
           ...T,
           children: [
             z && /* @__PURE__ */ e.jsx(
-              M,
+              F,
               {
                 title: v,
-                onClose: l,
+                onClose: o,
                 onBack: b,
                 otherActions: j,
                 className: k
               }
             ),
-            /* @__PURE__ */ e.jsx(B, { className: D, children: N }),
-            h && /* @__PURE__ */ e.jsx(F, { buttons: y, className: E })
+            /* @__PURE__ */ e.jsx(I, { className: D, children: N }),
+            h && /* @__PURE__ */ e.jsx(R, { buttons: y, className: E })
           ]
         }
       ) })
     ] });
+    return M(L, document.body);
   }
 );
-H.displayName = "Dialog";
+O.displayName = "Dialog";
 export {
-  H as Dialog
+  O as Dialog
 };

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

@@ -1,14 +1,14 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
 import * as i from "react";
-import "react-dom";
+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 B } from "../../../hooks/use-body-scroll-lock.js";
-import { useEscapeKey as H } from "../../../hooks/use-escape-key.js";
-import { Icon as M } from "../../atoms/icon/icon.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 { Button as x } from "../../atoms/button/button.js";
 import { Typography as b } from "../../atoms/typography/typography.js";
-const R = g(
+const D = g(
   "fixed z-sheet bg-background shadow-lg transition-transform duration-300 ease-in-out",
   {
     variants: {
@@ -38,7 +38,7 @@ const R = g(
       isOpen: !1
     }
   }
-), W = g(
+), F = g(
   "fixed inset-0 z-sheet bg-black/50 transition-opacity duration-300",
   {
     variants: {
@@ -51,7 +51,7 @@ const R = g(
       isOpen: !1
     }
   }
-), D = i.forwardRef(
+), K = i.forwardRef(
   ({
     className: y,
     side: s = "right",
@@ -70,9 +70,9 @@ const R = g(
     footerClassName: z,
     loading: T = !1,
     ...V
-  }, C) => {
-    const [E, f] = i.useState(!1), [u, h] = i.useState(!1);
-    if (B(a), H(a, n), i.useEffect(() => {
+  }, E) => {
+    const [I, f] = i.useState(!1), [u, h] = i.useState(!1);
+    if (M(a), R(a, n), i.useEffect(() => {
       if (a) {
         f(!0);
         const t = setTimeout(() => h(!0), 10);
@@ -82,16 +82,15 @@ const R = g(
         const t = setTimeout(() => f(!1), 300);
         return () => clearTimeout(t);
       }
-    }, [a]), !E) return null;
-    const d = p(j), m = p(v), I = {
+    }, [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 } : {}
-    };
-    return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    }, B = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
       /* @__PURE__ */ e.jsx(
         "div",
         {
-          className: W({ isOpen: u }),
+          className: F({ isOpen: u }),
           onClick: n,
           "aria-hidden": "true"
         }
@@ -99,9 +98,9 @@ const R = g(
       /* @__PURE__ */ e.jsx(
         "div",
         {
-          ref: C,
-          className: r(R({ side: s, isOpen: u }), y),
-          style: I,
+          ref: E,
+          className: r(D({ side: s, isOpen: u }), y),
+          style: A,
           role: "dialog",
           "aria-modal": "true",
           "aria-labelledby": l ? "sheet-title" : void 0,
@@ -145,7 +144,7 @@ const R = g(
                       onClick: n,
                       "aria-label": "Close",
                       className: "h-6 w-6",
-                      children: /* @__PURE__ */ e.jsx(M, { name: "X", size: "md" })
+                      children: /* @__PURE__ */ e.jsx(W, { name: "X", size: "md" })
                     }
                   )
                 ]
@@ -159,13 +158,13 @@ const R = g(
                   "flex items-center justify-end gap-3 border-t border-border p-6",
                   z
                 ),
-                children: c.map((t, A) => /* @__PURE__ */ e.jsx(
+                children: c.map((t, C) => /* @__PURE__ */ e.jsx(
                   x,
                   {
                     disabled: T || t.disabled,
                     ...t
                   },
-                  A
+                  C
                 ))
               }
             )
@@ -173,9 +172,10 @@ const R = g(
         }
       )
     ] });
+    return H(B, document.body);
   }
 );
-D.displayName = "Sheet";
+K.displayName = "Sheet";
 export {
-  D as Sheet
+  K as Sheet
 };