@yuno-payments/dashboard-design-system 0.0.78 → 0.0.80

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

@@ -1,111 +1,111 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import * as a from "react";
-import { cn as l } from "../../../lib/utils.js";
-import { Combobox as B, ComboboxTrigger as H, ComboboxContent as J } from "../../../vendor/shadcn/combobox.js";
-import { Command as K, CommandInput as M, CommandList as P, CommandEmpty as Q, CommandGroup as U, CommandItem as k } from "../../../vendor/shadcn/command.js";
-import { Label as W } from "../../../vendor/shadcn/label.js";
+import * as l from "react";
+import { cn as a } from "../../../lib/utils.js";
+import { FieldLabel as B } from "../../../vendor/shadcn/field.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 k } from "../../../vendor/shadcn/command.js";
 import { Typography as x } from "../typography/typography.js";
 import { Icon as b } from "../icon/icon.js";
-const X = a.forwardRef(
+const X = l.forwardRef(
   ({
     label: j,
     description: N,
-    error: f,
+    error: u,
     optional: G = !1,
     placeholder: L = "Select an option",
-    value: n,
+    value: r,
     defaultValue: p,
     onValueChange: h,
-    disabled: u = !1,
+    disabled: f = !1,
     options: c = [],
     groups: o = [],
     className: E,
     id: g,
     searchPlaceholder: z = "Search...",
-    maxHeight: I = 300
-  }, F) => {
-    const [i, C] = a.useState(!1), [v, y] = a.useState(""), d = o.length > 0, S = c.length > 0, R = a.useCallback(() => {
-      if (!n) return null;
+    maxHeight: F = 300
+  }, I) => {
+    const [i, C] = l.useState(!1), [v, S] = l.useState(""), d = o.length > 0, w = c.length > 0, R = l.useCallback(() => {
+      if (!r) return null;
       if (d)
         for (const s of o) {
-          const r = s.options.find((t) => t.value === n);
-          if (r) return r.label;
+          const n = s.options.find((t) => t.value === r);
+          if (n) return n.label;
         }
-      else if (S) {
-        const s = c.find((r) => r.value === n);
+      else if (w) {
+        const s = c.find((n) => n.value === r);
         if (s) return s.label;
       }
       return null;
-    }, [n, o, c, d, S]), T = a.useCallback(
+    }, [r, o, c, d, w]), T = l.useCallback(
       (s) => {
         if (!s)
           return { filteredOptions: c, filteredGroups: o };
-        const r = s.toLowerCase();
+        const n = s.toLowerCase();
         if (d) {
           const t = o.map((m) => ({
             ...m,
             options: m.options.filter(
-              (A) => A.label.toLowerCase().includes(r)
+              (A) => A.label.toLowerCase().includes(n)
             )
           })).filter((m) => m.options.length > 0);
           return { filteredOptions: [], filteredGroups: t };
         } else
           return { filteredOptions: c.filter(
-            (m) => m.label.toLowerCase().includes(r)
+            (m) => m.label.toLowerCase().includes(n)
           ), filteredGroups: [] };
       },
       [c, o, d]
     ), { filteredOptions: q, filteredGroups: D } = T(v);
-    a.useEffect(() => {
+    l.useEffect(() => {
       i && setTimeout(() => {
         document.querySelector(
           '[data-slot="command-input"]'
         )?.focus();
       }, 0);
-    }, [i]), a.useEffect(() => {
-      i || y("");
-    }, [i]), a.useEffect(() => {
-      p && !n && h?.(p);
-    }, [p, n, h]);
-    const w = (s) => {
-      u || (h?.(s), C(!1));
+    }, [i]), l.useEffect(() => {
+      i || S("");
+    }, [i]), l.useEffect(() => {
+      p && !r && h?.(p);
+    }, [p, r, h]);
+    const y = (s) => {
+      f || (h?.(s), C(!1));
     }, O = R();
-    return /* @__PURE__ */ e.jsxs("div", { className: l("w-full", E), children: [
+    return /* @__PURE__ */ e.jsxs("div", { className: a("w-full", E), children: [
       j && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 mb-2", children: [
-        /* @__PURE__ */ e.jsx(W, { htmlFor: g, className: l(u && "opacity-50"), children: j }),
+        /* @__PURE__ */ e.jsx(B, { htmlFor: g, className: a(f && "text-muted-foreground"), children: j }),
         G && /* @__PURE__ */ e.jsx(x, { variant: "sm", className: "text-muted-foreground", children: "(Optional)" })
       ] }),
-      N && !f && /* @__PURE__ */ e.jsx(
+      N && !u && /* @__PURE__ */ e.jsx(
         x,
         {
           variant: "sm",
-          className: l(
+          className: a(
             "text-muted-foreground mb-2",
-            u && "opacity-50"
+            f && "text-muted-"
           ),
           children: N
         }
       ),
-      /* @__PURE__ */ e.jsxs(B, { open: i, onOpenChange: C, children: [
-        /* @__PURE__ */ e.jsx(H, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+      /* @__PURE__ */ e.jsxs(H, { open: i, onOpenChange: C, children: [
+        /* @__PURE__ */ e.jsx(J, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
           "button",
           {
-            ref: F,
+            ref: I,
             id: g,
             type: "button",
-            disabled: u,
+            disabled: f,
             role: "combobox",
             "aria-expanded": i,
             "aria-haspopup": "listbox",
-            className: l(
-              "flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-background 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:opacity-50 shadow-xs [&>span]:min-w-0 [&>span]:truncate",
-              f && "border-destructive"
+            className: a(
+              "flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-background 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(
                 "span",
                 {
-                  className: l(
+                  className: a(
                     "truncate",
                     !O && "text-muted-foreground"
                   ),
@@ -117,23 +117,23 @@ const X = a.forwardRef(
                 {
                   name: "CaretDown",
                   size: "sm",
-                  className: "opacity-50 shrink-0"
+                  className: "text-muted- shrink-0"
                 }
               )
             ]
           }
         ) }),
-        /* @__PURE__ */ e.jsx(J, { className: "p-0", align: "start", children: /* @__PURE__ */ e.jsxs(K, { shouldFilter: !1, children: [
+        /* @__PURE__ */ e.jsx(K, { className: "p-0", align: "start", children: /* @__PURE__ */ e.jsxs(M, { shouldFilter: !1, children: [
           /* @__PURE__ */ e.jsx(
-            M,
+            P,
             {
               placeholder: z,
               value: v,
-              onValueChange: y
+              onValueChange: S
             }
           ),
-          /* @__PURE__ */ e.jsxs(P, { style: { maxHeight: I }, children: [
-            /* @__PURE__ */ e.jsx(Q, { children: /* @__PURE__ */ e.jsx(
+          /* @__PURE__ */ e.jsxs(Q, { style: { maxHeight: F }, children: [
+            /* @__PURE__ */ e.jsx(U, { children: /* @__PURE__ */ e.jsx(
               x,
               {
                 variant: "sm",
@@ -141,23 +141,23 @@ const X = a.forwardRef(
                 children: "No results found."
               }
             ) }),
-            d ? D.map((s, r) => /* @__PURE__ */ e.jsxs(U, { children: [
+            d ? D.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(
                 k,
                 {
                   value: t.value,
-                  onSelect: () => w(t.value),
-                  className: l(
+                  onSelect: () => y(t.value),
+                  className: a(
                     "cursor-pointer",
-                    n === t.value && "bg-accent"
+                    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
                     ] }),
-                    n === t.value && /* @__PURE__ */ e.jsx(
+                    r === t.value && /* @__PURE__ */ e.jsx(
                       b,
                       {
                         name: "Check",
@@ -169,21 +169,21 @@ const X = a.forwardRef(
                 },
                 t.value
               ))
-            ] }, r)) : q.map((s) => /* @__PURE__ */ e.jsxs(
+            ] }, n)) : q.map((s) => /* @__PURE__ */ e.jsxs(
               k,
               {
                 value: s.value,
-                onSelect: () => w(s.value),
-                className: l(
+                onSelect: () => y(s.value),
+                className: a(
                   "cursor-pointer",
-                  n === s.value && "bg-accent"
+                  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
                   ] }),
-                  n === s.value && /* @__PURE__ */ e.jsx(b, { name: "Check", size: "sm", className: "ml-auto" })
+                  r === s.value && /* @__PURE__ */ e.jsx(b, { name: "Check", size: "sm", className: "ml-auto" })
                 ]
               },
               s.value
@@ -191,7 +191,7 @@ const X = a.forwardRef(
           ] })
         ] }) })
       ] }),
-      f && /* @__PURE__ */ e.jsx(x, { variant: "sm", className: "text-destructive mt-2", children: f })
+      u && /* @__PURE__ */ e.jsx(x, { variant: "sm", className: "text-destructive mt-2", children: u })
     ] });
   }
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuno-payments/dashboard-design-system",
-  "version": "0.0.78",
+  "version": "0.0.80",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",