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

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

@@ -1,8 +1,8 @@
 import { j as r } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as f } from "react";
-import { cn as n } from "../../../lib/utils.js";
+import { forwardRef as u } from "react";
+import { cn as s } from "../../../lib/utils.js";
 import { cva as l } from "../../../node_modules/class-variance-authority/dist/index.js";
-const u = l("", {
+const p = l("", {
   variants: {
     size: {
       xs: "text-xs",
@@ -39,32 +39,35 @@ const u = l("", {
   defaultVariants: {
     size: "sm"
   }
-}), p = f(
+}), g = u(
   ({
     value: t,
     currency: e = "USD",
-    locales: o = "en",
-    size: s = "sm",
-    fontWeight: a = "bold",
+    locales: a = "en",
+    size: n,
+    fontWeight: i = "bold",
     className: m,
-    showCurrencyCode: i = !0
-  }, x) => {
+    showCurrencyCode: o = !0,
+    valueClassName: x,
+    codeClassName: c
+  }, d) => {
     if (!t && t !== 0) return null;
-    const c = new Intl.NumberFormat(o, {
+    const f = new Intl.NumberFormat(a, {
       style: "currency",
       currency: e.length === 3 ? e : "USD",
       currencyDisplay: "narrowSymbol",
       minimumFractionDigits: 0,
       maximumFractionDigits: 20
-    }).format(t), d = s === "3xl" ? "lg" : s === "2xl" ? "base" : "sm";
-    return /* @__PURE__ */ r.jsxs("div", { ref: x, className: n("flex items-center gap-1", m), children: [
-      /* @__PURE__ */ r.jsx("span", { className: n(u({ size: s, fontWeight: a })), children: c }),
-      i && /* @__PURE__ */ r.jsx(
+    }).format(t);
+    return /* @__PURE__ */ r.jsxs("div", { ref: d, className: s("flex items-center gap-1", m), children: [
+      /* @__PURE__ */ r.jsx("span", { className: s(p({ size: n, fontWeight: i }), x), children: f }),
+      o && /* @__PURE__ */ r.jsx(
         "span",
         {
-          className: n(
-            b({ size: d }),
-            "text-muted-foreground font-bold"
+          className: s(
+            b({ size: n }),
+            "text-muted-foreground",
+            c
           ),
           children: e?.toUpperCase()
         }
@@ -72,7 +75,7 @@ const u = l("", {
     ] });
   }
 );
-p.displayName = "CurrencyField";
+g.displayName = "CurrencyField";
 export {
-  p as CurrencyField
+  g as CurrencyField
 };

package/dist/components/atoms/date-picker/date-picker.d.ts

@@ -1,4 +1,19 @@
 import { DatePicker as DatePickerPrimitive, DatePickerProps as DatePickerPrimitiveProps } from '../../../vendor/shadcn/date-picker';
+/**
+ * Props for the DatePicker component
+ */
 export type DatePickerProps = DatePickerPrimitiveProps;
+/**
+ * Calendar-based date picker for selecting a single date.
+ *
+ * @example
+ * ```tsx
+ * <DatePicker
+ *   value={selectedDate}
+ *   onChange={(date) => setSelectedDate(date)}
+ *   placeholder="Pick a date"
+ * />
+ * ```
+ */
 declare const DatePicker: typeof DatePickerPrimitive;
 export { DatePicker };

package/dist/components/atoms/date-range-picker/date-range-picker.d.ts

@@ -1,4 +1,19 @@
 import { DateRangePicker as DateRangePickerPrimitive, DateRangePickerProps as DateRangePickerPrimitiveProps } from '../../../vendor/shadcn/date-range-picker';
+/**
+ * Props for the DateRangePicker component
+ */
 export type DateRangePickerProps = DateRangePickerPrimitiveProps;
+/**
+ * Calendar-based picker for selecting a date range (start and end dates).
+ *
+ * @example
+ * ```tsx
+ * <DateRangePicker
+ *   value={{ from: startDate, to: endDate }}
+ *   onChange={(range) => setDateRange(range)}
+ *   placeholder="Select date range"
+ * />
+ * ```
+ */
 declare const DateRangePicker: typeof DateRangePickerPrimitive;
 export { DateRangePicker };

package/dist/components/atoms/dots-menu/dots-menu.d.ts

@@ -1,4 +1,20 @@
 import { DotsMenuProps } from './dots-menu.types';
+/**
+ * Dropdown menu triggered by a three-dot icon button.
+ * Supports action items with icons, permissions, and disabled states.
+ *
+ * @example
+ * ```tsx
+ * <DotsMenu
+ *   options={{
+ *     actions: [
+ *       { key: 'edit', name: 'Edit', icon: 'PencilSimple', handleClick: handleEdit },
+ *       { key: 'delete', name: 'Delete', icon: 'Trash', allowed: canDelete, handleClick: handleDelete }
+ *     ]
+ *   }}
+ * />
+ * ```
+ */
 export declare const DotsMenu: {
     ({ options, icon, className, disabled, marginBottom, }: DotsMenuProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;

package/dist/components/atoms/dots-menu/dots-menu.js

@@ -1,9 +1,9 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
 import * as h from "react";
-import { cn as l } from "../../../lib/utils.js";
-import { DropdownMenu as x, DropdownMenuTrigger as f, DropdownMenuContent as j, DropdownMenuItem as w } from "../dropdown-menu/dropdown-menu.js";
-import { Button as g } from "../button/button.js";
+import { Button as x } from "../button/button.js";
 import { Icon as c } from "../icon/icon.js";
+import { cn as l } from "../../../lib/utils.js";
+import { DropdownMenu as f, DropdownMenuTrigger as j, DropdownMenuContent as w, DropdownMenuItem as g } from "../dropdown-menu/dropdown-menu.js";
 import { Tooltip as C } from "../tooltip/tooltip.js";
 const k = ({
   allowed: r,
@@ -24,9 +24,9 @@ const k = ({
   if (!r.actions || r.actions.length === 0)
     return null;
   const p = {};
-  return i !== void 0 && (p.marginBottom = `${i}px`), /* @__PURE__ */ e.jsx("div", { className: l("inline-flex relative", a), style: p, children: /* @__PURE__ */ e.jsxs(x, { open: o, onOpenChange: d, children: [
-    /* @__PURE__ */ e.jsx(f, { asChild: !0, disabled: t, children: /* @__PURE__ */ e.jsx(
-      g,
+  return i !== void 0 && (p.marginBottom = `${i}px`), /* @__PURE__ */ e.jsx("div", { className: l("inline-flex relative", a), style: p, children: /* @__PURE__ */ e.jsxs(f, { open: o, onOpenChange: d, children: [
+    /* @__PURE__ */ e.jsx(j, { asChild: !0, disabled: t, children: /* @__PURE__ */ e.jsx(
+      x,
       {
         disabled: t,
         variant: "ghost",
@@ -50,7 +50,7 @@ const k = ({
       }
     ) }),
     /* @__PURE__ */ e.jsx(
-      j,
+      w,
       {
         id: "dots-menu",
         align: "end",
@@ -60,7 +60,7 @@ const k = ({
           {
             allowed: s.allowed ?? !0,
             children: /* @__PURE__ */ e.jsxs(
-              w,
+              g,
               {
                 onClick: () => u(s),
                 disabled: !s.allowed,

package/dist/components/atoms/dots-menu/dots-menu.types.d.ts

@@ -1,20 +1,72 @@
 import { IconName } from '../icon';
+/**
+ * Represents a single action in the dots menu
+ */
 export interface DotsMenuAction {
+    /**
+     * Display name for the action
+     */
     name?: string;
+    /**
+     * Unique identifier for the action
+     */
     key: number | string;
+    /**
+     * Icon to display for the action
+     */
     icon: IconName;
+    /**
+     * Whether the action is allowed (shows tooltip if false)
+     * @default true
+     */
     allowed?: boolean;
+    /**
+     * Callback fired when the action is clicked
+     */
     handleClick?: (options?: unknown) => void;
 }
+/**
+ * Options configuration for the dots menu
+ */
 export interface DotsMenuOptions {
+    /**
+     * Array of actions to display in the menu
+     */
     actions?: DotsMenuAction[];
+    /**
+     * Additional data that can be passed to action handlers
+     */
     [key: string]: unknown;
 }
+/**
+ * Props for the DotsMenu component
+ */
 export interface DotsMenuProps {
+    /**
+     * Configuration object containing actions and data
+     */
     options: DotsMenuOptions;
+    /**
+     * Whether the menu trigger is disabled
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * Custom icon for the menu trigger (null uses default dots)
+     * @default null
+     */
     icon?: IconName | null;
+    /**
+     * Additional CSS classes
+     */
     className?: string;
+    /**
+     * Whether to remove absolute positioning
+     * @default false
+     */
     withoutAbsolute?: boolean;
+    /**
+     * Bottom margin in pixels
+     */
     marginBottom?: number;
 }

package/dist/components/atoms/dropdown-menu/dropdown-menu.d.ts

@@ -1,20 +1,51 @@
 import { DropdownMenu as ShadcnDropdownMenu, DropdownMenuPortal as ShadcnDropdownMenuPortal, DropdownMenuTrigger as ShadcnDropdownMenuTrigger, DropdownMenuContent as ShadcnDropdownMenuContent, DropdownMenuGroup as ShadcnDropdownMenuGroup, DropdownMenuLabel as ShadcnDropdownMenuLabel, DropdownMenuItem as ShadcnDropdownMenuItem, DropdownMenuCheckboxItem as ShadcnDropdownMenuCheckboxItem, DropdownMenuRadioGroup as ShadcnDropdownMenuRadioGroup, DropdownMenuRadioItem as ShadcnDropdownMenuRadioItem, DropdownMenuSeparator as ShadcnDropdownMenuSeparator, DropdownMenuSub as ShadcnDropdownMenuSub, DropdownMenuSubTrigger as ShadcnDropdownMenuSubTrigger, DropdownMenuSubContent as ShadcnDropdownMenuSubContent } from '../../../vendor/shadcn/dropdown-menu';
 import * as React from "react";
+/**
+ * Props for the DropdownMenu root component
+ */
 export interface DropdownMenuProps extends React.ComponentPropsWithoutRef<typeof ShadcnDropdownMenu> {
 }
+/**
+ * Props for the DropdownMenuPortal component
+ */
 export interface DropdownMenuPortalProps extends React.ComponentPropsWithoutRef<typeof ShadcnDropdownMenuPortal> {
 }
+/**
+ * Props for the DropdownMenuTrigger component
+ */
 export interface DropdownMenuTriggerProps extends React.ComponentPropsWithoutRef<typeof ShadcnDropdownMenuTrigger> {
 }
+/**
+ * Props for the DropdownMenuContent component
+ */
 export interface DropdownMenuContentProps extends React.ComponentPropsWithoutRef<typeof ShadcnDropdownMenuContent> {
 }
+/**
+ * Props for the DropdownMenuGroup component
+ */
 export interface DropdownMenuGroupProps extends React.ComponentPropsWithoutRef<typeof ShadcnDropdownMenuGroup> {
 }
+/**
+ * Props for the DropdownMenuLabel component
+ */
 export interface DropdownMenuLabelProps extends React.ComponentPropsWithoutRef<typeof ShadcnDropdownMenuLabel> {
+    /**
+     * Whether to apply inset padding
+     */
     inset?: boolean;
 }
+/**
+ * Props for the DropdownMenuItem component
+ */
 export interface DropdownMenuItemProps extends React.ComponentPropsWithoutRef<typeof ShadcnDropdownMenuItem> {
+    /**
+     * Whether to apply inset padding
+     */
     inset?: boolean;
+    /**
+     * Visual variant of the menu item
+     * @default "default"
+     */
     variant?: "default" | "destructive";
 }
 export interface DropdownMenuCheckboxItemProps extends React.ComponentPropsWithoutRef<typeof ShadcnDropdownMenuCheckboxItem> {
@@ -34,6 +65,25 @@ export interface DropdownMenuSubTriggerProps extends React.ComponentPropsWithout
 }
 export interface DropdownMenuSubContentProps extends React.ComponentPropsWithoutRef<typeof ShadcnDropdownMenuSubContent> {
 }
+/**
+ * Dropdown menu component for displaying a list of actions or options.
+ * Composed of multiple sub-components for flexible menu structures.
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenu>
+ *   <DropdownMenuTrigger asChild>
+ *     <Button>Open Menu</Button>
+ *   </DropdownMenuTrigger>
+ *   <DropdownMenuContent>
+ *     <DropdownMenuItem>Profile</DropdownMenuItem>
+ *     <DropdownMenuItem>Settings</DropdownMenuItem>
+ *     <DropdownMenuSeparator />
+ *     <DropdownMenuItem variant="destructive">Logout</DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ * ```
+ */
 declare const DropdownMenu: {
     ({ children, ...props }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

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

@@ -1,18 +1,73 @@
 import { ComponentProps, InputHTMLAttributes } from 'react';
 import { ButtonProps } from '../button';
 import { Icon, IconName } from '../icon';
+/**
+ * Props for the Field component
+ */
 export interface FieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "className"> {
+    /**
+     * Label text displayed above the input
+     */
     label?: string;
+    /**
+     * Helper text displayed below the input
+     */
     description?: string;
+    /**
+     * Error message displayed below the input (overrides description)
+     */
     error?: string;
+    /**
+     * Optional button to display next to the input
+     */
     button?: ButtonProps;
+    /**
+     * Icon to display at the start (left side) of the input
+     */
     startIcon?: IconName;
+    /**
+     * Additional props to pass to the start icon
+     */
     startIconProps?: ComponentProps<typeof Icon>;
+    /**
+     * Icon to display at the end (right side) of the input
+     */
     endIcon?: IconName;
+    /**
+     * Additional props to pass to the end icon
+     */
     endIconProps?: Partial<ComponentProps<typeof Icon>>;
+    /**
+     * Layout orientation of the label and input
+     * @default "vertical"
+     */
     orientation?: "vertical" | "horizontal" | "responsive";
+    /**
+     * Additional CSS classes for the field container
+     */
     className?: string;
+    /**
+     * Additional props to pass to the input element
+     */
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
 }
+/**
+ * Form field component with label, description, error handling, and icon support.
+ *
+ * @example
+ * ```tsx
+ * <Field
+ *   label="Email"
+ *   placeholder="Enter your email"
+ *   startIcon="Envelope"
+ *   description="We'll never share your email"
+ * />
+ * <Field
+ *   label="Search"
+ *   endIcon="MagnifyingGlass"
+ *   error="Invalid search query"
+ * />
+ * ```
+ */
 declare const Field: import('react').ForwardRefExoticComponent<FieldProps & import('react').RefAttributes<HTMLInputElement>>;
 export { Field };

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

@@ -1,84 +1,91 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as $, useId as b } from "react";
-import { InputGroup as E, InputGroupAddon as f, InputGroupInput as G } from "../../../vendor/shadcn/input-group.js";
-import { cn as l } from "../../../lib/utils.js";
-import { Field as w, FieldLabel as y, FieldDescription as z, FieldError as B } from "../../../vendor/shadcn/field.js";
+import { forwardRef as $, useId as E } from "react";
+import { InputGroup as G, InputGroupAddon as f, InputGroupInput as b } from "../../../vendor/shadcn/input-group.js";
+import { cn as a } from "../../../lib/utils.js";
+import { Button as w } from "../button/button.js";
 import { Icon as j } from "../icon/icon.js";
-import { Button as I } from "../button/button.js";
+import { Field as y, FieldLabel as z, FieldDescription as B, FieldError as I } from "../../../vendor/shadcn/field.js";
 const R = $(
   ({
     className: p,
-    orientation: h = "vertical",
-    label: n,
-    description: a,
+    orientation: N = "vertical",
+    label: c,
+    description: l,
     error: i,
-    id: N,
-    button: c,
-    disabled: o,
-    startIcon: x,
-    startIconProps: d,
-    endIcon: u,
-    endIconProps: r,
-    inputProps: m,
+    id: h,
+    button: o,
+    disabled: d,
+    startIcon: u,
+    startIconProps: r,
+    endIcon: x,
+    endIconProps: m,
+    inputProps: t,
     ...v
-  }, F) => {
-    const g = b(), s = N || m?.id || g, t = !!i;
+  }, g) => {
+    const F = E(), s = h || t?.id || F, n = !!i;
     return /* @__PURE__ */ e.jsxs(
-      w,
+      y,
       {
-        orientation: h,
-        "data-invalid": t,
-        className: l("w-full", p),
+        orientation: N,
+        "data-invalid": n,
+        className: a("w-full", p),
         children: [
-          n && /* @__PURE__ */ e.jsx(y, { htmlFor: s, children: n }),
+          c && /* @__PURE__ */ e.jsx(
+            z,
+            {
+              htmlFor: s,
+              className: a(d && "text-muted-foreground"),
+              children: c
+            }
+          ),
           /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
             /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2 items-center", children: [
-              /* @__PURE__ */ e.jsxs(E, { className: "flex-1", children: [
-                x && /* @__PURE__ */ e.jsx(f, { align: "inline-start", children: /* @__PURE__ */ e.jsx(
+              /* @__PURE__ */ e.jsxs(G, { className: "flex-1", children: [
+                u && /* @__PURE__ */ e.jsx(f, { align: "inline-start", children: /* @__PURE__ */ e.jsx(
                   j,
                   {
-                    name: d?.name || x,
+                    name: r?.name || u,
                     size: "sm",
-                    ...d,
-                    className: l(
+                    ...r,
+                    className: a(
                       "cursor-default text-muted-foreground",
-                      d?.className
+                      r?.className
                     )
                   }
                 ) }),
                 /* @__PURE__ */ e.jsx(
-                  G,
+                  b,
                   {
-                    ref: F,
-                    disabled: o,
-                    className: l(
-                      t && "border-destructive focus-visible:border-destructive",
-                      m?.className
+                    ref: g,
+                    disabled: d,
+                    className: a(
+                      n && "border-destructive focus-visible:border-destructive",
+                      t?.className
                     ),
-                    "aria-invalid": t ? !0 : void 0,
-                    "aria-describedby": a || i ? `${s}-description` : void 0,
+                    "aria-invalid": n ? !0 : void 0,
+                    "aria-describedby": l || i ? `${s}-description` : void 0,
                     ...v,
-                    ...m,
+                    ...t,
                     id: s
                   }
                 ),
-                u && /* @__PURE__ */ e.jsx(f, { align: "inline-end", children: /* @__PURE__ */ e.jsx(
+                x && /* @__PURE__ */ e.jsx(f, { align: "inline-end", children: /* @__PURE__ */ e.jsx(
                   j,
                   {
-                    name: r?.name || u,
+                    name: m?.name || x,
                     size: "sm",
-                    ...r,
-                    className: l(
+                    ...m,
+                    className: a(
                       "cursor-default text-muted-foreground",
-                      r?.className
+                      m?.className
                     )
                   }
                 ) })
               ] }),
-              c && /* @__PURE__ */ e.jsx(I, { disabled: o, ...c })
+              o && /* @__PURE__ */ e.jsx(w, { disabled: d, ...o })
             ] }),
-            a && !i && /* @__PURE__ */ e.jsx(z, { id: `${s}-description`, children: a }),
-            i && /* @__PURE__ */ e.jsx(B, { id: `${s}-description`, children: i })
+            l && !i && /* @__PURE__ */ e.jsx(B, { id: `${s}-description`, children: l }),
+            i && /* @__PURE__ */ e.jsx(I, { id: `${s}-description`, children: i })
           ] })
         ]
       }

package/dist/components/atoms/filter/filter-date-range.d.ts

@@ -1,11 +1,21 @@
 import { ComponentProps } from 'react';
 import { RadioGroup } from '../../../vendor/shadcn/radio-group';
-interface FilterDateRangeOptionProps extends ComponentProps<"button"> {
+export declare const FilterDateRangeValue: {
+    readonly CUSTOM: "CUSTOM";
+    readonly TODAY: "TODAY";
+    readonly LAST_3_DAYS: "LAST_3_DAYS";
+    readonly LAST_7_DAYS: "LAST_7_DAYS";
+    readonly LAST_30_DAYS: "LAST_30_DAYS";
+    readonly THIS_MONTH: "THIS_MONTH";
+    readonly ALL_TIME: "ALL_TIME";
+};
+export type FilterDateRangeValueType = typeof FilterDateRangeValue[keyof typeof FilterDateRangeValue];
+interface FilterDateRangeOptionProps extends ComponentProps<"label"> {
     label: string;
     description?: string;
     value: string;
 }
-declare const FilterDateRangeOption: import('react').ForwardRefExoticComponent<Omit<FilterDateRangeOptionProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+declare const FilterDateRangeOption: import('react').ForwardRefExoticComponent<Omit<FilterDateRangeOptionProps, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
 interface FilterDateRangeProps extends ComponentProps<typeof RadioGroup> {
     showCustomFields?: boolean;
     onCustomFieldsChange?: (show: boolean) => void;