@yuno-payments/dashboard-design-system 1.1.7 → 1.2.0

package/dist/components/atoms/combobox/combobox.js

@@ -1,98 +1,100 @@
-import { j as t } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as Y, useState as y, useRef as Z, useEffect as I } from "react";
+import { j as s } from "../../../_virtual/jsx-runtime.js";
+import { forwardRef as _, useState as y, useRef as W, useEffect as z } from "react";
 import { cn as f } from "../../../lib/utils.js";
-import { Combobox as _, ComboboxTrigger as W, ComboboxContent as A } from "../../../vendor/shadcn/combobox.js";
-import { Icon as $ } from "../icon/icon.js";
-import { Label as P } from "../label/label.js";
+import { Combobox as A, ComboboxTrigger as P, ComboboxContent as ee } from "../../../vendor/shadcn/combobox.js";
+import { Icon as B } from "../icon/icon.js";
+import { Label as se } from "../label/label.js";
 import { Typography as C } from "../typography/typography.js";
 import { Badge as N } from "../badge/badge.js";
-import { Checkbox as ee } from "../checkbox/checkbox.js";
-const te = ({ message: n = "No results" }) => /* @__PURE__ */ t.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ t.jsx(C, { variant: "sm", className: "text-muted-foreground", children: n }) }), se = Y(
+import { Checkbox as te } from "../checkbox/checkbox.js";
+const ne = ({ message: n = "No results" }) => /* @__PURE__ */ s.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ s.jsx(C, { variant: "sm", className: "text-muted-foreground", children: n }) }), re = _(
   ({
     value: n,
-    options: a,
-    selectPlaceholder: z = "Select options...",
-    searchPlaceholder: w = "Search...",
+    options: o,
+    selectPlaceholder: K = "Select",
+    searchPlaceholder: w = "Search",
     onChange: k,
     onCloseChip: x,
     valueProp: r = "value",
-    fullWidth: v = !1,
-    disabled: o = !1,
+    fullWidth: D = !1,
+    disabled: a = !1,
     withSearch: d = !0,
-    limitTags: D = 10,
-    maxHeightList: p = 320,
-    emptyState: B = /* @__PURE__ */ t.jsx(te, {}),
-    label: O,
-    description: E,
+    limitTags: v = 10,
+    maxHeightList: g = 320,
+    emptyState: G = /* @__PURE__ */ s.jsx(ne, {}),
+    label: E,
+    description: O,
     error: u,
     deleteAll: l,
-    className: K,
-    id: i
-  }, G) => {
-    const [c, R] = y(!1), [L, M] = y(""), [S, g] = y(a), h = Z(null);
-    I(() => {
-      g(a);
-    }, [a]), I(() => {
+    className: L,
+    id: i,
+    renderOption: R,
+    renderChip: F
+  }, M) => {
+    const [c, S] = y(!1), [U, V] = y(""), [T, p] = y(o), h = W(null);
+    z(() => {
+      p(o);
+    }, [o]), z(() => {
       c && h.current && d && setTimeout(() => {
         h.current?.focus();
       }, 0);
     }, [c, d]);
     const b = (e) => {
-      const s = e.label || e[r];
-      return String(s);
-    }, U = (e) => {
-      const s = e.target.value;
-      if (M(s), s === "")
-        g(a);
+      const t = e.label || e[r];
+      return String(t);
+    }, X = (e) => {
+      const t = e.target.value;
+      if (V(t), t === "")
+        p(o);
       else {
-        const m = a.filter(
-          (Q) => b(Q).toLowerCase().includes(s.toLowerCase())
+        const m = o.filter(
+          (Z) => b(Z).toLowerCase().includes(t.toLowerCase())
         );
-        g(m);
+        p(m);
       }
     }, j = (e) => {
-      if (o) return;
-      const s = n.includes(e) ? n.filter((m) => m !== e) : [...n, e];
-      k(s);
-    }, V = (e) => {
-      if (!o)
+      if (a) return;
+      const t = n.includes(e) ? n.filter((m) => m !== e) : [...n, e];
+      k(t);
+    }, q = (e) => {
+      if (!a)
         if (x)
           x(e);
         else {
-          const s = n.filter((m) => m !== e);
-          k(s);
+          const t = n.filter((m) => m !== e);
+          k(t);
         }
-    }, X = () => {
-      o || !l?.onClick || l.onClick();
-    }, q = (e, s) => e?.length <= s ? e : e?.substring(0, s) + "...", T = n.map((e) => a.find((s) => s[r] === e)).filter(Boolean), H = l && !o && n.length >= l.length, J = T.slice(0, D), F = T.length - D;
-    return /* @__PURE__ */ t.jsxs("div", { className: f("w-full", v && "w-full", K), children: [
-      O && /* @__PURE__ */ t.jsx(
-        P,
+    }, H = () => {
+      a || !l?.onClick || l.onClick();
+    }, J = (e, t) => e?.length <= t ? e : e?.substring(0, t) + "...", I = n.map((e) => o.find((t) => t[r] === e)).filter(Boolean), Q = l && !a && n.length >= l.length, Y = I.slice(0, v), $ = I.length - v;
+    return /* @__PURE__ */ s.jsxs("div", { className: f("w-full", D && "w-full", L), children: [
+      E && /* @__PURE__ */ s.jsx(
+        se,
         {
           htmlFor: i,
-          className: f("mb-2 block", o && "opacity-50"),
-          children: O
+          className: f("mb-2 block", a && "opacity-50"),
+          children: E
         }
       ),
-      E && !u && /* @__PURE__ */ t.jsx(
+      O && !u && /* @__PURE__ */ s.jsx(
         C,
         {
           variant: "sm",
           className: f(
             "text-muted-foreground mb-2",
-            o && "opacity-50"
+            a && "opacity-50"
           ),
-          children: E
+          children: O
         }
       ),
-      /* @__PURE__ */ t.jsxs(_, { open: c, onOpenChange: R, children: [
-        /* @__PURE__ */ t.jsx(W, { asChild: !0, children: /* @__PURE__ */ t.jsxs(
+      /* @__PURE__ */ s.jsxs(A, { open: c, onOpenChange: S, children: [
+        /* @__PURE__ */ s.jsx(P, { asChild: !0, children: /* @__PURE__ */ s.jsxs(
           "button",
           {
-            ref: G,
+            ref: M,
             id: i,
             type: "button",
-            disabled: o,
+            disabled: a,
             role: "combobox",
             "aria-expanded": c,
             "aria-haspopup": "listbox",
@@ -100,17 +102,17 @@ const te = ({ message: n = "No results" }) => /* @__PURE__ */ t.jsx("div", { cla
             className: f(
               "flex h-auto min-h-[38px] w-full items-center justify-between gap-2 rounded-md border border-input bg-input px-3 py-1.5 text-sm shadow-xs 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",
               u && "border-destructive",
-              v && "w-full"
+              D && "w-full"
             ),
             children: [
-              /* @__PURE__ */ t.jsx("div", { className: "flex flex-wrap gap-1 flex-1 items-center", children: n.length === 0 ? /* @__PURE__ */ t.jsx("span", { className: "text-muted-foreground", children: z }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-                H && /* @__PURE__ */ t.jsx(
+              /* @__PURE__ */ s.jsx("div", { className: "flex flex-wrap gap-1 flex-1 items-center", children: n.length === 0 ? /* @__PURE__ */ s.jsx("span", { className: "text-muted-foreground", children: K }) : /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+                Q && /* @__PURE__ */ s.jsx(
                   "div",
                   {
                     onClick: (e) => {
-                      e.preventDefault(), e.stopPropagation(), X();
+                      e.preventDefault(), e.stopPropagation(), H();
                     },
-                    children: /* @__PURE__ */ t.jsx(
+                    children: /* @__PURE__ */ s.jsx(
                       N,
                       {
                         variant: "secondary",
@@ -120,28 +122,28 @@ const te = ({ message: n = "No results" }) => /* @__PURE__ */ t.jsx("div", { cla
                     )
                   }
                 ),
-                J.map((e) => /* @__PURE__ */ t.jsx(
+                Y.map((e) => /* @__PURE__ */ s.jsx(
                   "div",
                   {
-                    onClick: (s) => {
-                      x && !o && (s.preventDefault(), s.stopPropagation(), V(e[r]));
+                    onClick: (t) => {
+                      x && !a && (t.preventDefault(), t.stopPropagation(), q(e[r]));
                     },
-                    children: /* @__PURE__ */ t.jsx(
+                    children: F ? F(e) : /* @__PURE__ */ s.jsx(
                       N,
                       {
                         variant: "outline",
                         className: "gap-1 flex items-center",
-                        endIcon: x && !o ? "X" : void 0,
-                        children: q(b(e), 8)
+                        endIcon: x && !a ? "X" : void 0,
+                        children: J(b(e), 8)
                       }
                     )
                   },
                   e[r]
                 )),
-                F > 0 && /* @__PURE__ */ t.jsx(N, { variant: "outline", className: "flex items-center", children: `+${F}` })
+                $ > 0 && /* @__PURE__ */ s.jsx(N, { variant: "outline", className: "flex items-center", children: `+${$}` })
               ] }) }),
-              /* @__PURE__ */ t.jsx(
-                $,
+              /* @__PURE__ */ s.jsx(
+                B,
                 {
                   name: "CaretUpDown",
                   size: "sm",
@@ -154,82 +156,85 @@ const te = ({ message: n = "No results" }) => /* @__PURE__ */ t.jsx("div", { cla
             ]
           }
         ) }),
-        /* @__PURE__ */ t.jsx(
-          A,
+        /* @__PURE__ */ s.jsx(
+          ee,
           {
             className: "p-0",
             align: "start",
-            style: { maxHeight: p },
+            style: { maxHeight: g },
             id: i ? `${i}-listbox` : void 0,
             role: "listbox",
-            children: /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col", children: [
-              d && a.length > 0 && /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b", children: [
-                /* @__PURE__ */ t.jsx(
-                  $,
+            children: /* @__PURE__ */ s.jsxs("div", { className: "flex flex-col", children: [
+              d && o.length > 0 && /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b", children: [
+                /* @__PURE__ */ s.jsx(
+                  B,
                   {
                     name: "MagnifyingGlass",
                     size: "sm",
                     className: "text-muted-foreground"
                   }
                 ),
-                /* @__PURE__ */ t.jsx(
+                /* @__PURE__ */ s.jsx(
                   "input",
                   {
                     ref: h,
                     type: "text",
                     placeholder: w,
-                    value: L,
-                    onChange: U,
+                    value: U,
+                    onChange: X,
                     onKeyDown: (e) => {
-                      e.stopPropagation(), e.key === "Escape" && R(!1);
+                      e.stopPropagation(), e.key === "Escape" && S(!1);
                     },
                     className: "flex-1 outline-none bg-transparent text-sm placeholder:text-muted-foreground",
                     "aria-label": w
                   }
                 )
               ] }),
-              /* @__PURE__ */ t.jsx(
+              /* @__PURE__ */ s.jsx(
                 "div",
                 {
                   className: "overflow-y-auto",
                   style: {
-                    maxHeight: d ? p - 48 : p
+                    maxHeight: d ? g - 48 : g
                   },
-                  children: S.length > 0 ? S.map((e) => /* @__PURE__ */ t.jsxs(
+                  children: T.length > 0 ? T.map((e) => /* @__PURE__ */ s.jsx(
                     "div",
                     {
                       role: "option",
                       "aria-selected": n.includes(e[r]),
                       className: "flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-accent transition-colors",
                       onClick: () => j(e[r]),
-                      onKeyDown: (s) => {
-                        (s.key === "Enter" || s.key === " ") && (s.preventDefault(), j(e[r]));
+                      onKeyDown: (t) => {
+                        (t.key === "Enter" || t.key === " ") && (t.preventDefault(), j(e[r]));
                       },
-                      children: [
-                        /* @__PURE__ */ t.jsx(
-                          ee,
+                      children: R ? R(
+                        e,
+                        n.includes(e[r])
+                      ) : /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+                        /* @__PURE__ */ s.jsx(
+                          te,
                           {
                             checked: n.includes(e[r]),
                             onChange: () => j(e[r]),
-                            onClick: (s) => s.stopPropagation()
+                            onClick: (t) => t.stopPropagation()
                           }
                         ),
-                        /* @__PURE__ */ t.jsx("span", { className: "text-sm flex-1", children: b(e) })
-                      ]
+                        /* @__PURE__ */ s.jsx("span", { className: "text-sm flex-1", children: b(e) })
+                      ] })
                     },
                     e[r]
-                  )) : B
+                  )) : G
                 }
               )
             ] })
           }
         )
       ] }),
-      u && /* @__PURE__ */ t.jsx(C, { variant: "sm", className: "text-destructive mt-2", children: u })
+      u && /* @__PURE__ */ s.jsx(C, { variant: "sm", className: "text-destructive mt-2", children: u })
     ] });
   }
 );
-se.displayName = "Combobox";
+re.displayName = "Combobox";
 export {
-  se as Combobox
+  re as Combobox
 };

package/dist/components/atoms/combobox/types.d.ts

@@ -30,12 +30,12 @@ export interface ComboboxProps {
     options: ComboboxOption[];
     /**
      * Placeholder text when no options are selected
-     * @default "Select options..."
+     * @default "Select"
      */
     selectPlaceholder?: string;
     /**
      * Placeholder text for the search input
-     * @default "Search..."
+     * @default "Search"
      */
     searchPlaceholder?: string;
     /**
@@ -117,4 +117,16 @@ export interface ComboboxProps {
      * HTML id attribute
      */
     id?: string;
+    /**
+     * Custom render function for each option in the dropdown list.
+     * Replaces inner content only — the wrapper with role="option",
+     * click handlers, and hover styles is always provided by the Combobox.
+     */
+    renderOption?: (option: ComboboxOption, isSelected: boolean) => ReactNode;
+    /**
+     * Custom render function for each selected chip in the trigger area.
+     * Replaces the default truncated Badge — the wrapper div with
+     * remove-on-click behavior is always provided by the Combobox.
+     */
+    renderChip?: (option: ComboboxOption) => ReactNode;
 }

package/dist/components/atoms/filter/filter.js

@@ -101,7 +101,7 @@ const q = g(
       items: t,
       className: c,
       searchable: m = !1,
-      searchPlaceholder: u = "Search...",
+      searchPlaceholder: u = "Search",
       showActions: d = !1,
       enableSelectAll: b = !0,
       enableInverse: v = !0,
@@ -260,7 +260,7 @@ const D = g(
   ({
     children: s,
     showSearch: l = !1,
-    searchPlaceholder: n = "Search...",
+    searchPlaceholder: n = "Search",
     searchValue: t,
     onSearchChange: c,
     className: m

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

@@ -12,7 +12,7 @@ const D = c.forwardRef(
     value: s = [],
     onChange: l,
     placeholder: b = "Select items...",
-    searchPlaceholder: w = "Search...",
+    searchPlaceholder: w = "Search",
     emptyMessage: N = "No results found.",
     disabled: v = !1,
     label: i,

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

@@ -27,7 +27,7 @@ const P = D("flex gap-2 w-full", {
   }
 }), te = U(
   ({
-    placeholder: F = "Search...",
+    placeholder: F = "Search",
     onSearch: l,
     limitSearch: y = 10,
     persistKey: c = "",

package/dist/components/atoms/search-field/search-field.types.d.ts

@@ -22,7 +22,7 @@ export interface SearchValue {
 export interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "className"> {
     /**
      * Placeholder text for the input
-     * @default "Search..."
+     * @default "Search"
      */
     placeholder?: string;
     /**

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

@@ -21,7 +21,7 @@ const W = r.forwardRef(
     groups: o = [],
     className: E,
     id: g,
-    searchPlaceholder: z = "Search...",
+    searchPlaceholder: z = "Search",
     maxHeight: F = 300
   }, I) => {
     const [i, C] = r.useState(!1), [v, S] = r.useState(""), d = o.length > 0, w = c.length > 0, R = r.useCallback(() => {