@yuno-payments/dashboard-design-system 2.9.3 → 2.9.5

package/dist/components/molecules/select/search-select.js

@@ -1,125 +1,135 @@
-import { j as e } from "../../../_virtual/jsx-runtime.js";
+import { j as t } from "../../../_virtual/jsx-runtime.js";
 import * as l from "react";
-import { cn as a, getDirection as A } from "../../../lib/utils.js";
-import { FieldLabel as B } from "../../../vendor/shadcn/field.js";
+import { cn as c, getDirection as A } from "../../../lib/utils.js";
+import { FieldLabel as J } from "../../../vendor/shadcn/field.js";
 import { Icon as b } from "../../atoms/icon/icon.js";
-import { Combobox as H, ComboboxTrigger as J, ComboboxContent as K } from "../../../vendor/shadcn/combobox.js";
-import { Command as M, CommandInput as P, CommandList as Q, CommandEmpty as U, CommandGroup as W, CommandItem as G } from "../../../vendor/shadcn/command.js";
+import { Combobox as M, ComboboxTrigger as P, ComboboxContent as Q } from "../../../vendor/shadcn/combobox.js";
+import { Command as U, CommandInput as W, CommandList as X, CommandEmpty as Y, CommandGroup as Z, CommandItem as _ } from "../../../vendor/shadcn/command.js";
 import { Typography as x } from "../../atoms/typography/typography.js";
-const X = l.forwardRef(
+const E = "__yuno_search_select_no_highlight__", $ = "end", ee = l.forwardRef(
   ({
     label: j,
-    description: N,
+    description: C,
     error: u,
-    optional: L = !1,
+    optional: G = !1,
     placeholder: k = "Select an option",
-    value: r,
-    defaultValue: p,
-    onChange: h,
+    value: s,
+    defaultValue: h,
+    onChange: p,
     disabled: f = !1,
-    options: c = [],
+    options: o = [],
     groups: i = [],
-    className: E,
+    className: I,
     id: g,
-    searchPlaceholder: z = "Search",
-    maxHeight: F = 300
-  }, I) => {
-    const [o, C] = l.useState(!1), [v, S] = l.useState(""), d = i.length > 0, w = c.length > 0, D = l.useCallback(() => {
-      if (!r) return null;
+    searchPlaceholder: T = "Search",
+    maxHeight: V = 300
+  }, z) => {
+    const [r, N] = l.useState(!1), [S, v] = l.useState(""), [D, O] = l.useState(E), F = l.useCallback((e) => {
+      O(E), N(e);
+    }, []), d = i.length > 0, w = o.length > 0, H = l.useCallback(() => {
+      if (!s) return null;
       if (d)
-        for (const s of i) {
-          const n = s.options.find((t) => t.value === r);
-          if (n) return n.label;
+        for (const e of i) {
+          const a = e.options.find((n) => n.value === s);
+          if (a) return a.label;
         }
       else if (w) {
-        const s = c.find((n) => n.value === r);
-        if (s) return s.label;
+        const e = o.find((a) => a.value === s);
+        if (e) return e.label;
       }
       return null;
-    }, [r, i, c, d, w]), R = l.useCallback(
-      (s) => {
-        if (!s)
-          return { filteredOptions: c, filteredGroups: i };
-        const n = s.toLowerCase();
+    }, [s, i, o, d, w]), R = l.useCallback(
+      (e) => {
+        if (!e)
+          return { filteredOptions: o, filteredGroups: i };
+        const a = e.toLowerCase();
         if (d) {
-          const t = i.map((m) => ({
+          const n = i.map((m) => ({
             ...m,
             options: m.options.filter(
-              (V) => V.label.toLowerCase().includes(n)
+              (K) => K.label.toLowerCase().includes(a)
             )
           })).filter((m) => m.options.length > 0);
-          return { filteredOptions: [], filteredGroups: t };
+          return { filteredOptions: [], filteredGroups: n };
         } else
-          return { filteredOptions: c.filter(
-            (m) => m.label.toLowerCase().includes(n)
+          return { filteredOptions: o.filter(
+            (m) => m.label.toLowerCase().includes(a)
           ), filteredGroups: [] };
       },
-      [c, i, d]
-    ), { filteredOptions: T, filteredGroups: q } = R(v);
+      [o, i, d]
+    ), { filteredOptions: q, filteredGroups: B } = R(S);
     l.useEffect(() => {
-      o && setTimeout(() => {
+      r && setTimeout(() => {
         document.querySelector(
           '[data-slot="command-input"]'
         )?.focus();
       }, 0);
-    }, [o]), l.useEffect(() => {
-      o || S("");
-    }, [o]), l.useEffect(() => {
-      p && !r && h?.(p);
-    }, [p, r, h]);
-    const y = (s) => {
-      f || (h?.(s), C(!1));
-    }, O = D();
-    return /* @__PURE__ */ e.jsxs("div", { dir: A(), className: a("w-full", E), children: [
-      j && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 mb-2", children: [
-        /* @__PURE__ */ e.jsx(
-          B,
+    }, [r]), l.useEffect(() => {
+      if (!r || !s) return;
+      const e = setTimeout(() => {
+        document.querySelector(
+          '[data-slot="command-list"] [data-selected-option="true"]'
+        )?.scrollIntoView({ block: $ });
+      }, 0);
+      return () => clearTimeout(e);
+    }, [r, s]), l.useEffect(() => {
+      r || v("");
+    }, [r]), l.useEffect(() => {
+      h && !s && p?.(h);
+    }, [h, s, p]);
+    const y = (e) => {
+      f || (p?.(e), N(!1));
+    }, L = H();
+    return /* @__PURE__ */ t.jsxs("div", { dir: A(), className: c("w-full", I), children: [
+      j && /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-1 mb-2", children: [
+        /* @__PURE__ */ t.jsx(
+          J,
           {
             htmlFor: g,
-            className: a(f && "text-muted-foreground"),
+            className: c(f && "text-muted-foreground"),
             children: j
           }
         ),
-        L && /* @__PURE__ */ e.jsx(x, { variant: "sm", className: "text-muted-foreground", children: "(Optional)" })
+        G && /* @__PURE__ */ t.jsx(x, { variant: "sm", className: "text-muted-foreground", children: "(Optional)" })
       ] }),
-      N && !u && /* @__PURE__ */ e.jsx(
+      C && !u && /* @__PURE__ */ t.jsx(
         x,
         {
           variant: "sm",
-          className: a(
+          className: c(
             "text-muted-foreground mb-2",
             f && "text-muted-"
           ),
-          children: N
+          children: C
         }
       ),
-      /* @__PURE__ */ e.jsxs(H, { open: o, onOpenChange: C, children: [
-        /* @__PURE__ */ e.jsx(J, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+      /* @__PURE__ */ t.jsxs(M, { open: r, onOpenChange: F, children: [
+        /* @__PURE__ */ t.jsx(P, { asChild: !0, children: /* @__PURE__ */ t.jsxs(
           "button",
           {
-            ref: I,
+            ref: z,
             id: g,
             type: "button",
             disabled: f,
             role: "combobox",
-            "aria-expanded": o,
+            "aria-expanded": r,
             "aria-haspopup": "listbox",
-            className: a(
+            className: c(
               "flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-input px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:text-muted- shadow-xs [&>span]:min-w-0 [&>span]:truncate",
               u && "border-destructive"
             ),
             children: [
-              /* @__PURE__ */ e.jsx(
+              /* @__PURE__ */ t.jsx(
                 "span",
                 {
-                  className: a(
+                  className: c(
                     "truncate",
-                    !O && "text-muted-foreground"
+                    !L && "text-muted-foreground"
                   ),
-                  children: O || k
+                  children: L || k
                 }
               ),
-              /* @__PURE__ */ e.jsx(
+              /* @__PURE__ */ t.jsx(
                 b,
                 {
                   name: "CaretDown",
@@ -130,79 +140,89 @@ const X = l.forwardRef(
             ]
           }
         ) }),
-        /* @__PURE__ */ e.jsx(K, { className: "p-0", align: "start", children: /* @__PURE__ */ e.jsxs(M, { shouldFilter: !1, children: [
-          /* @__PURE__ */ e.jsx(
-            P,
-            {
-              placeholder: z,
-              value: v,
-              onValueChange: S
-            }
-          ),
-          /* @__PURE__ */ e.jsxs(Q, { style: { maxHeight: F }, children: [
-            /* @__PURE__ */ e.jsx(U, { children: /* @__PURE__ */ e.jsx(
-              x,
-              {
-                variant: "sm",
-                className: "text-muted-foreground py-6 text-center",
-                children: "No results found."
-              }
-            ) }),
-            d ? q.map((s, n) => /* @__PURE__ */ e.jsxs(W, { children: [
-              s.label && /* @__PURE__ */ e.jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: s.label }),
-              s.options.map((t) => /* @__PURE__ */ e.jsxs(
-                G,
+        /* @__PURE__ */ t.jsx(Q, { className: "p-0", align: "start", children: /* @__PURE__ */ t.jsxs(
+          U,
+          {
+            shouldFilter: !1,
+            value: D,
+            onValueChange: O,
+            children: [
+              /* @__PURE__ */ t.jsx(
+                W,
                 {
-                  value: t.value,
-                  onSelect: () => y(t.value),
-                  className: a(
-                    "cursor-pointer",
-                    r === t.value && "bg-accent"
-                  ),
-                  children: [
-                    /* @__PURE__ */ e.jsxs("span", { className: "flex items-center", children: [
-                      t.icon && /* @__PURE__ */ e.jsx("span", { className: "mr-2 inline-flex items-center", children: t.icon }),
-                      t.label
-                    ] }),
-                    r === t.value && /* @__PURE__ */ e.jsx(
-                      b,
-                      {
-                        name: "Check",
-                        size: "sm",
-                        className: "ml-auto"
-                      }
-                    )
-                  ]
-                },
-                t.value
-              ))
-            ] }, n)) : T.map((s) => /* @__PURE__ */ e.jsxs(
-              G,
-              {
-                value: s.value,
-                onSelect: () => y(s.value),
-                className: a(
-                  "cursor-pointer",
-                  r === s.value && "bg-accent"
-                ),
-                children: [
-                  /* @__PURE__ */ e.jsxs("span", { className: "flex items-center", children: [
-                    s.icon && /* @__PURE__ */ e.jsx("span", { className: "mr-2 inline-flex items-center", children: s.icon }),
-                    s.label
-                  ] }),
-                  r === s.value && /* @__PURE__ */ e.jsx(b, { name: "Check", size: "sm", className: "ml-auto" })
-                ]
-              },
-              s.value
-            ))
-          ] })
-        ] }) })
+                  placeholder: T,
+                  value: S,
+                  onValueChange: v
+                }
+              ),
+              /* @__PURE__ */ t.jsxs(X, { style: { maxHeight: V }, children: [
+                /* @__PURE__ */ t.jsx(Y, { children: /* @__PURE__ */ t.jsx(
+                  x,
+                  {
+                    variant: "sm",
+                    className: "text-muted-foreground py-6 text-center",
+                    children: "No results found."
+                  }
+                ) }),
+                d ? B.map((e, a) => /* @__PURE__ */ t.jsxs(Z, { children: [
+                  e.label && /* @__PURE__ */ t.jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: e.label }),
+                  e.options.map((n) => /* @__PURE__ */ t.jsxs(
+                    _,
+                    {
+                      value: n.value,
+                      onSelect: () => y(n.value),
+                      "data-selected-option": s === n.value ? !0 : void 0,
+                      className: c(
+                        "cursor-pointer",
+                        s === n.value && "bg-accent"
+                      ),
+                      children: [
+                        /* @__PURE__ */ t.jsxs("span", { className: "flex items-center", children: [
+                          n.icon && /* @__PURE__ */ t.jsx("span", { className: "mr-2 inline-flex items-center", children: n.icon }),
+                          n.label
+                        ] }),
+                        s === n.value && /* @__PURE__ */ t.jsx(
+                          b,
+                          {
+                            name: "Check",
+                            size: "sm",
+                            className: "ml-auto"
+                          }
+                        )
+                      ]
+                    },
+                    n.value
+                  ))
+                ] }, a)) : q.map((e) => /* @__PURE__ */ t.jsxs(
+                  _,
+                  {
+                    value: e.value,
+                    onSelect: () => y(e.value),
+                    "data-selected-option": s === e.value ? !0 : void 0,
+                    className: c(
+                      "cursor-pointer",
+                      s === e.value && "bg-accent"
+                    ),
+                    children: [
+                      /* @__PURE__ */ t.jsxs("span", { className: "flex items-center", children: [
+                        e.icon && /* @__PURE__ */ t.jsx("span", { className: "mr-2 inline-flex items-center", children: e.icon }),
+                        e.label
+                      ] }),
+                      s === e.value && /* @__PURE__ */ t.jsx(b, { name: "Check", size: "sm", className: "ml-auto" })
+                    ]
+                  },
+                  e.value
+                ))
+              ] })
+            ]
+          }
+        ) })
       ] }),
-      u && /* @__PURE__ */ e.jsx(x, { variant: "sm", className: "text-destructive mt-2", children: u })
+      u && /* @__PURE__ */ t.jsx(x, { variant: "sm", className: "text-destructive mt-2", children: u })
     ] });
   }
 );
-X.displayName = "SearchSelect";
+ee.displayName = "SearchSelect";
 export {
-  X as SearchSelect
+  ee as SearchSelect
 };

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
 };