@yuno-payments/dashboard-design-system 0.0.170 → 0.0.172

package/dist/components/atoms/card/card.js

@@ -1,36 +1,64 @@
-import { j as t } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as d } from "react";
-import { Card as n, CardHeader as i, CardTitle as m, CardDescription as c, CardContent as l, CardFooter as p } from "../../../vendor/shadcn/card.js";
-import { cn as o } from "../../../lib/utils.js";
-const N = d(
-  ({ className: a, children: r, variant: e = "default", ...s }, C) => /* @__PURE__ */ t.jsx(n, { ref: C, className: o(a), variant: e, ...s, children: r })
+import { j as d } from "../../../_virtual/jsx-runtime.js";
+import { forwardRef as t } from "react";
+import { CardHeader as D, CardTitle as F, CardDescription as T, CardContent as B, CardFooter as R, Card as w } from "../../../vendor/shadcn/card.js";
+import { cn as n } from "../../../lib/utils.js";
+const C = t(
+  ({ className: s, children: a, variant: r = "default", ...e }, o) => /* @__PURE__ */ d.jsx(w, { ref: o, className: n(s), variant: r, ...e, children: a })
 );
-N.displayName = "Card";
-const x = d(
-  ({ className: a, children: r, ...e }, s) => /* @__PURE__ */ t.jsx(i, { ref: s, className: o(a), ...e, children: r })
+C.displayName = "CardBase";
+const c = t(
+  ({ className: s, children: a, ...r }, e) => /* @__PURE__ */ d.jsx(D, { ref: e, className: n(s), ...r, children: a })
 );
-x.displayName = "CardHeader";
-const j = d(
-  ({ className: a, children: r, ...e }, s) => /* @__PURE__ */ t.jsx(m, { ref: s, className: o(a), ...e, children: r })
+c.displayName = "CardHeader";
+const l = t(
+  ({ className: s, children: a, ...r }, e) => /* @__PURE__ */ d.jsx(F, { ref: e, className: n(s), ...r, children: a })
 );
-j.displayName = "CardTitle";
-const u = d(
-  ({ className: a, children: r, ...e }, s) => /* @__PURE__ */ t.jsx(c, { ref: s, className: o(a), ...e, children: r })
+l.displayName = "CardTitle";
+const m = t(
+  ({ className: s, children: a, ...r }, e) => /* @__PURE__ */ d.jsx(T, { ref: e, className: n(s), ...r, children: a })
 );
-u.displayName = "CardDescription";
-const f = d(
-  ({ className: a, children: r, ...e }, s) => /* @__PURE__ */ t.jsx(l, { ref: s, className: o(a), ...e, children: r })
+m.displayName = "CardDescription";
+const i = t(
+  ({ className: s, children: a, ...r }, e) => /* @__PURE__ */ d.jsx(B, { ref: e, className: n(s), ...r, children: a })
 );
-f.displayName = "CardContent";
-const y = d(
-  ({ className: a, children: r, ...e }, s) => /* @__PURE__ */ t.jsx(p, { ref: s, className: o(a), ...e, children: r })
+i.displayName = "CardContent";
+const N = t(
+  ({ className: s, children: a, ...r }, e) => /* @__PURE__ */ d.jsx(R, { ref: e, className: n(s), ...r, children: a })
 );
-y.displayName = "CardFooter";
+N.displayName = "CardFooter";
+const E = t(
+  ({
+    className: s,
+    title: a,
+    description: r,
+    children: e,
+    footer: o,
+    variant: p = "default",
+    headerClassName: x,
+    titleClassName: j,
+    descriptionClassName: u,
+    contentClassName: f,
+    footerClassName: y,
+    ...h
+  }, $) => {
+    const H = a || r;
+    return /* @__PURE__ */ d.jsxs(C, { ref: $, className: s, variant: p, ...h, children: [
+      H && /* @__PURE__ */ d.jsxs(c, { className: x, children: [
+        a && /* @__PURE__ */ d.jsx(l, { className: j, children: a }),
+        r && /* @__PURE__ */ d.jsx(m, { className: u, children: r })
+      ] }),
+      /* @__PURE__ */ d.jsx(i, { className: f, children: e }),
+      o && /* @__PURE__ */ d.jsx(N, { className: y, children: o })
+    ] });
+  }
+);
+E.displayName = "Card";
 export {
-  N as Card,
-  f as CardContent,
-  u as CardDescription,
-  y as CardFooter,
-  x as CardHeader,
-  j as CardTitle
+  E as Card,
+  C as CardBase,
+  i as CardContent,
+  m as CardDescription,
+  N as CardFooter,
+  c as CardHeader,
+  l as CardTitle
 };

package/dist/components/atoms/checkbox/checkbox.d.ts

@@ -1,8 +1,44 @@
-import { ComponentProps } from 'react';
+import { ComponentProps, ChangeEvent } from 'react';
 import { Checkbox as ShadcnCheckbox } from '../../../vendor/shadcn/checkbox';
-export interface CheckboxProps extends Omit<ComponentProps<typeof ShadcnCheckbox>, "children"> {
+/**
+ * Props for the Checkbox component
+ */
+export interface CheckboxProps extends Omit<ComponentProps<typeof ShadcnCheckbox>, "children" | "onCheckedChange" | "onChange"> {
+    /**
+     * Label text displayed next to the checkbox
+     */
     label?: string;
+    /**
+     * Optional description text displayed below the label
+     */
     description?: string;
+    /**
+     * Callback fired when the checkbox state changes
+     * Provides a synthetic ChangeEvent compatible with react-hook-form
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Additional CSS classes to apply to the label element
+     */
+    labelClassName?: string;
+    /**
+     * Optional info icon with tooltip
+     */
+    info?: string;
 }
+/**
+ * Checkbox component with optional label and description.
+ * Compatible with react-hook-form through synthetic ChangeEvent.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox
+ *   label="Accept terms and conditions"
+ *   description="You must agree to continue"
+ *   checked={accepted}
+ *   onChange={(e) => setAccepted(e.target.checked)}
+ * />
+ * ```
+ */
 declare const Checkbox: import('react').ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
 export { Checkbox };

package/dist/components/atoms/checkbox/checkbox.js

@@ -1,49 +1,83 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as p, useId as f } from "react";
-import { Checkbox as d } from "../../../vendor/shadcn/checkbox.js";
-import { cn as m } from "../../../lib/utils.js";
-import { Label as h } from "../../../vendor/shadcn/label.js";
-const u = p(
-  ({ label: o, description: t, id: x, name: a, disabled: r, ...n }, i) => {
-    const l = f(), s = x || a || l, c = /* @__PURE__ */ e.jsx(
-      d,
+import { forwardRef as g, useId as C } from "react";
+import { Checkbox as j } from "../../../vendor/shadcn/checkbox.js";
+import { cn as x } from "../../../lib/utils.js";
+import { Label as k } from "../label/label.js";
+const v = g(
+  ({
+    label: n,
+    description: c,
+    id: i,
+    name: t,
+    disabled: s,
+    onChange: a,
+    labelClassName: f,
+    info: l,
+    ...p
+  }, h) => {
+    const u = C(), o = i || t || u, d = (r) => {
+      if (!a) return;
+      a({
+        target: {
+          name: t || o,
+          checked: r,
+          type: "checkbox",
+          value: r ? "on" : "off"
+        },
+        currentTarget: {
+          name: t || o,
+          checked: r,
+          type: "checkbox",
+          value: r ? "on" : "off"
+        },
+        preventDefault: () => {
+        },
+        stopPropagation: () => {
+        }
+      });
+    }, m = /* @__PURE__ */ e.jsx(
+      j,
       {
-        ref: i,
-        id: s,
-        disabled: r,
-        ...n,
+        ref: h,
+        id: o,
+        name: t,
+        disabled: s,
+        onCheckedChange: d,
+        ...p,
         className: "size-3.5 cursor-pointer"
       }
     );
-    return o ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-start gap-2", children: [
-      c,
+    return n ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-start gap-2", children: [
+      m,
       /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1.5", children: [
         /* @__PURE__ */ e.jsx(
-          h,
+          k,
           {
-            htmlFor: s,
-            className: m(
+            htmlFor: o,
+            info: l,
+            className: x(
               "text-sm leading-none cursor-pointer",
-              r && "text-muted-foreground"
+              s && "text-muted-foreground",
+              f
             ),
-            children: o
+            children: n
           }
         ),
-        t && /* @__PURE__ */ e.jsx(
+        c && /* @__PURE__ */ e.jsx(
           "p",
           {
-            className: m(
-              "text-sm text-neutral-500",
-              r && "opacity-50"
+            className: x(
+              "text-sm text-muted-foreground",
+              s && "opacity-50"
             ),
-            children: t
+            children: c
           }
         )
       ] })
-    ] }) : c;
+    ] }) : m;
   }
 );
-u.displayName = "Checkbox";
+v.displayName = "Checkbox";
 export {
-  u as Checkbox
+  v as Checkbox
 };

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

@@ -1,3 +1,21 @@
 import { ComboboxProps } from './types';
+/**
+ * Multi-select combobox component with search and chips display.
+ * Features include searchable options, chip badges for selected items, and "delete all" functionality.
+ *
+ * @example
+ * ```tsx
+ * <Combobox
+ *   label="Select Users"
+ *   value={selectedIds}
+ *   options={[
+ *     { value: '1', label: 'John Doe' },
+ *     { value: '2', label: 'Jane Smith' }
+ *   ]}
+ *   onChange={(newValues) => setSelectedIds(newValues)}
+ *   onCloseChip={(id) => handleRemove(id)}
+ * />
+ * ```
+ */
 declare const ComboboxComponent: import('react').ForwardRefExoticComponent<ComboboxProps & import('react').RefAttributes<HTMLButtonElement>>;
 export { ComboboxComponent as Combobox };

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

@@ -1,11 +1,11 @@
 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 { cn as m } from "../../../lib/utils.js";
-import { Combobox as _, ComboboxTrigger as A, ComboboxContent as W } from "../../../vendor/shadcn/combobox.js";
-import { Label as P } from "../../../vendor/shadcn/label.js";
+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 { Typography as C } from "../typography/typography.js";
 import { Badge as N } from "../badge/badge.js";
-import { Icon as $ } from "../icon/icon.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(
   ({
@@ -14,29 +14,29 @@ const te = ({ message: n = "No results" }) => /* @__PURE__ */ t.jsx("div", { cla
     selectPlaceholder: z = "Select options...",
     searchPlaceholder: k = "Search...",
     onChange: w,
-    onCloseChip: f,
+    onCloseChip: x,
     valueProp: r = "value",
     fullWidth: v = !1,
     disabled: o = !1,
-    withSearch: x = !0,
+    withSearch: d = !0,
     limitTags: D = 10,
     maxHeightList: p = 320,
     emptyState: B = /* @__PURE__ */ t.jsx(te, {}),
     label: O,
     description: E,
-    error: d,
-    deleteAll: u,
+    error: u,
+    deleteAll: l,
     className: K,
-    id: l
+    id: i
   }, G) => {
     const [c, R] = y(!1), [L, M] = y(""), [S, g] = y(a), h = Z(null);
     I(() => {
       g(a);
     }, [a]), I(() => {
-      c && h.current && x && setTimeout(() => {
+      c && h.current && d && setTimeout(() => {
         h.current?.focus();
       }, 0);
-    }, [c, x]);
+    }, [c, d]);
     const b = (e) => {
       const s = e.label || e[r];
       return String(s);
@@ -45,40 +45,40 @@ const te = ({ message: n = "No results" }) => /* @__PURE__ */ t.jsx("div", { cla
       if (M(s), s === "")
         g(a);
       else {
-        const i = a.filter(
+        const m = a.filter(
           (Q) => b(Q).toLowerCase().includes(s.toLowerCase())
         );
-        g(i);
+        g(m);
       }
     }, j = (e) => {
       if (o) return;
-      const s = n.includes(e) ? n.filter((i) => i !== e) : [...n, e];
+      const s = n.includes(e) ? n.filter((m) => m !== e) : [...n, e];
       w(s);
     }, V = (e) => {
       if (!o)
-        if (f)
-          f(e);
+        if (x)
+          x(e);
         else {
-          const s = n.filter((i) => i !== e);
+          const s = n.filter((m) => m !== e);
           w(s);
         }
     }, X = () => {
-      o || !u?.onClick || u.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 = u && !o && n.length >= u.length, J = T.slice(0, D), F = T.length - D;
-    return /* @__PURE__ */ t.jsxs("div", { className: m("w-full", v && "w-full", K), children: [
+      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,
         {
-          htmlFor: l,
-          className: m("mb-2 block", o && "opacity-50"),
+          htmlFor: i,
+          className: f("mb-2 block", o && "opacity-50"),
           children: O
         }
       ),
-      E && !d && /* @__PURE__ */ t.jsx(
+      E && !u && /* @__PURE__ */ t.jsx(
         C,
         {
           variant: "sm",
-          className: m(
+          className: f(
             "text-muted-foreground mb-2",
             o && "opacity-50"
           ),
@@ -86,20 +86,20 @@ const te = ({ message: n = "No results" }) => /* @__PURE__ */ t.jsx("div", { cla
         }
       ),
       /* @__PURE__ */ t.jsxs(_, { open: c, onOpenChange: R, children: [
-        /* @__PURE__ */ t.jsx(A, { asChild: !0, children: /* @__PURE__ */ t.jsxs(
+        /* @__PURE__ */ t.jsx(W, { asChild: !0, children: /* @__PURE__ */ t.jsxs(
           "button",
           {
             ref: G,
-            id: l,
+            id: i,
             type: "button",
             disabled: o,
             role: "combobox",
             "aria-expanded": c,
             "aria-haspopup": "listbox",
-            "aria-controls": c ? `${l}-listbox` : void 0,
-            className: m(
+            "aria-controls": c ? `${i}-listbox` : void 0,
+            className: f(
               "flex h-auto min-h-[36px] 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",
-              d && "border-destructive",
+              u && "border-destructive",
               v && "w-full"
             ),
             children: [
@@ -114,8 +114,8 @@ const te = ({ message: n = "No results" }) => /* @__PURE__ */ t.jsx("div", { cla
                       N,
                       {
                         variant: "secondary",
-                        className: "gap-1 pr-1 cursor-pointer flex items-center",
-                        children: "Delete all"
+                        className: "gap-1 cursor-pointer flex items-center",
+                        children: l.label || "Delete all"
                       }
                     )
                   }
@@ -124,14 +124,14 @@ const te = ({ message: n = "No results" }) => /* @__PURE__ */ t.jsx("div", { cla
                   "div",
                   {
                     onClick: (s) => {
-                      f && !o && (s.preventDefault(), s.stopPropagation(), V(e[r]));
+                      x && !o && (s.preventDefault(), s.stopPropagation(), V(e[r]));
                     },
                     children: /* @__PURE__ */ t.jsx(
                       N,
                       {
                         variant: "outline",
-                        className: "gap-1 pr-1 flex items-center",
-                        endIcon: f && !o ? "X" : void 0,
+                        className: "gap-1 flex items-center",
+                        endIcon: x && !o ? "X" : void 0,
                         children: q(b(e), 8)
                       }
                     )
@@ -145,7 +145,7 @@ const te = ({ message: n = "No results" }) => /* @__PURE__ */ t.jsx("div", { cla
                 {
                   name: "CaretUpDown",
                   size: "sm",
-                  className: m(
+                  className: f(
                     "opacity-50 transition-transform",
                     c && "transform rotate-180"
                   )
@@ -155,15 +155,15 @@ const te = ({ message: n = "No results" }) => /* @__PURE__ */ t.jsx("div", { cla
           }
         ) }),
         /* @__PURE__ */ t.jsx(
-          W,
+          A,
           {
             className: "p-0",
             align: "start",
             style: { maxHeight: p },
-            id: l ? `${l}-listbox` : void 0,
+            id: i ? `${i}-listbox` : void 0,
             role: "listbox",
             children: /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col", children: [
-              x && a.length > 0 && /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b", 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(
                   $,
                   {
@@ -193,7 +193,7 @@ const te = ({ message: n = "No results" }) => /* @__PURE__ */ t.jsx("div", { cla
                 {
                   className: "overflow-y-auto",
                   style: {
-                    maxHeight: x ? p - 48 : p
+                    maxHeight: d ? p - 48 : p
                   },
                   children: S.length > 0 ? S.map((e) => /* @__PURE__ */ t.jsxs(
                     "div",
@@ -210,7 +210,7 @@ const te = ({ message: n = "No results" }) => /* @__PURE__ */ t.jsx("div", { cla
                           ee,
                           {
                             checked: n.includes(e[r]),
-                            onCheckedChange: () => j(e[r]),
+                            onChange: () => j(e[r]),
                             onClick: (s) => s.stopPropagation()
                           }
                         ),
@@ -225,7 +225,7 @@ const te = ({ message: n = "No results" }) => /* @__PURE__ */ t.jsx("div", { cla
           }
         )
       ] }),
-      d && /* @__PURE__ */ t.jsx(C, { variant: "sm", className: "text-destructive mt-2", children: d })
+      u && /* @__PURE__ */ t.jsx(C, { variant: "sm", className: "text-destructive mt-2", children: u })
     ] });
   }
 );

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

@@ -1,31 +1,120 @@
 import { ReactNode } from 'react';
+/**
+ * Represents a single option in the combobox
+ */
 export interface ComboboxOption {
+    /**
+     * Unique value for the option
+     */
     value: string | number;
+    /**
+     * Display label for the option
+     */
     label: string;
+    /**
+     * Additional properties can be added
+     */
     [key: string]: string | number;
 }
+/**
+ * Props for the Combobox component
+ */
 export interface ComboboxProps {
+    /**
+     * Array of selected option values
+     */
     value: Array<string | number>;
+    /**
+     * Array of available options
+     */
     options: ComboboxOption[];
+    /**
+     * Placeholder text when no options are selected
+     * @default "Select options..."
+     */
     selectPlaceholder?: string;
+    /**
+     * Placeholder text for the search input
+     * @default "Search..."
+     */
     searchPlaceholder?: string;
+    /**
+     * Callback fired when selection changes
+     */
     onChange: (values: Array<string | number>) => void;
+    /**
+     * Callback fired when a chip/tag is removed
+     */
     onCloseChip?: (value: string | number) => void;
+    /**
+     * Property name to use as the value identifier
+     * @default "value"
+     */
     valueProp?: string;
+    /**
+     * Whether the combobox should take full width
+     * @default false
+     */
     fullWidth?: boolean;
+    /**
+     * Whether the combobox is disabled
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * Whether to show the search input
+     * @default true
+     */
     withSearch?: boolean;
+    /**
+     * Maximum number of chips to display before showing "+N"
+     * @default 10
+     */
     limitTags?: number;
+    /**
+     * Maximum height of the options list in pixels
+     * @default 320
+     */
     maxHeightList?: number;
+    /**
+     * Custom empty state component when no options match search
+     */
     emptyState?: ReactNode;
+    /**
+     * Label text displayed above the combobox
+     */
     label?: string;
+    /**
+     * Helper text displayed below the combobox
+     */
     description?: string;
+    /**
+     * Error message displayed below the combobox
+     */
     error?: string;
+    /**
+     * Configuration for "Delete All" chip functionality
+     */
     deleteAll?: {
-        label: string;
+        /**
+         * Label for the delete all chip
+         */
+        label?: string;
+        /**
+         * Minimum number of selected items to show delete all
+         */
         length: number;
+        /**
+         * Callback fired when delete all is clicked
+         */
         onClick: () => void;
     };
+    /**
+     * Additional CSS classes
+     */
     className?: string;
+    /**
+     * HTML id attribute
+     */
     id?: string;
 }

package/dist/components/atoms/currency-field/currency-field.d.ts

@@ -3,12 +3,50 @@ declare const currencyFieldVariants: (props?: ({
     size?: "base" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
     fontWeight?: "bold" | "normal" | "medium" | "semibold" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Props for the CurrencyField component
+ */
 export interface CurrencyFieldProps extends VariantProps<typeof currencyFieldVariants> {
+    /**
+     * Numeric value to format as currency
+     */
     value: number;
+    /**
+     * ISO 4217 currency code
+     * @default "USD"
+     */
     currency?: string;
+    /**
+     * Locale(s) for number formatting
+     * @default "en"
+     */
     locales?: string | string[];
+    /**
+     * Additional CSS classes for the container
+     */
     className?: string;
+    /**
+     * Whether to display the currency code
+     * @default true
+     */
     showCurrencyCode?: boolean;
+    /**
+     * Additional CSS classes for the value
+     */
+    valueClassName?: string;
+    /**
+     * Additional CSS classes for the currency code
+     */
+    codeClassName?: string;
 }
+/**
+ * Displays formatted currency values with optional currency code.
+ *
+ * @example
+ * ```tsx
+ * <CurrencyField value={1234.56} currency="USD" size="lg" />
+ * <CurrencyField value={999} currency="EUR" showCurrencyCode={false} />
+ * ```
+ */
 declare const CurrencyField: import('react').ForwardRefExoticComponent<CurrencyFieldProps & import('react').RefAttributes<HTMLDivElement>>;
 export { CurrencyField };