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

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

@@ -1,21 +1,21 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as m, useState as M, useMemo as $ } from "react";
-import { Button as f } from "../../../vendor/shadcn/button.js";
+import { forwardRef as f, useState as A, useMemo as M } from "react";
+import { Button as j } from "../../../vendor/shadcn/button.js";
 import { Badge as C } from "../../../vendor/shadcn/badge.js";
 import { Separator as p } from "../../../vendor/shadcn/separator.js";
-import { Checkbox as L } from "../../../vendor/shadcn/checkbox.js";
-import { RadioGroup as Q, RadioGroupItem as E } from "../../../vendor/shadcn/radio-group.js";
-import { cn as x } from "../../../lib/utils.js";
-import { Icon as v } from "../icon/icon.js";
+import { Checkbox as E } from "../../../vendor/shadcn/checkbox.js";
+import { RadioGroup as Q, RadioGroupItem as L } from "../../../vendor/shadcn/radio-group.js";
+import { Icon as y } from "../icon/icon.js";
+import { cn as g } from "../../../lib/utils.js";
 import { Field as k } from "../field/field.js";
-import { Tooltip as b } from "../tooltip/tooltip.js";
-const F = m(
+import { Tooltip as v } from "../tooltip/tooltip.js";
+const F = f(
   ({ label: s, onRemove: t, className: n, ...l }, i) => /* @__PURE__ */ e.jsxs(
     C,
     {
       ref: i,
       variant: "secondary",
-      className: x("h-8 gap-2 px-3 py-2 shadow-xs", n),
+      className: g("h-8 gap-2 px-3 py-2 shadow-xs", n),
       ...l,
       children: [
         /* @__PURE__ */ e.jsx("span", { className: "text-xs font-medium leading-none", children: s }),
@@ -25,7 +25,7 @@ const F = m(
             onClick: t,
             className: "inline-flex items-center justify-center",
             "aria-label": `Remove ${s} filter`,
-            children: /* @__PURE__ */ e.jsx(v, { name: "X", className: "size-4" })
+            children: /* @__PURE__ */ e.jsx(y, { name: "X", className: "size-4" })
           }
         )
       ]
@@ -33,27 +33,27 @@ const F = m(
   )
 );
 F.displayName = "FilterTag";
-const P = m(
+const P = f(
   ({
     appliedFilters: s = [],
     onRemoveFilter: t,
     onClearAll: n,
     maxVisibleTags: l = 4,
     className: i,
-    ...r
-  }, h) => {
-    const o = s.length > 0, N = s.slice(0, l), g = s.length - l;
+    ...c
+  }, r) => {
+    const o = s.length > 0, x = s.slice(0, l), u = s.length - l;
     return /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-4", children: [
       /* @__PURE__ */ e.jsxs(
-        f,
+        j,
         {
-          ref: h,
+          ref: r,
           variant: "outline",
           size: "sm",
-          className: x("h-8 gap-2 px-3 py-2", i),
-          ...r,
+          className: g("h-8 gap-2 px-3 py-2", i),
+          ...c,
           children: [
-            /* @__PURE__ */ e.jsx(v, { name: "FunnelSimple", className: "size-4" }),
+            /* @__PURE__ */ e.jsx(y, { name: "FunnelSimple", className: "size-4" }),
             /* @__PURE__ */ e.jsx("span", { className: "text-xs font-medium leading-none", children: "Add filter" })
           ]
         }
@@ -61,21 +61,21 @@ const P = m(
       o && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
         /* @__PURE__ */ e.jsx(p, { orientation: "vertical", className: "h-5" }),
         /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
-          N.map((u) => /* @__PURE__ */ e.jsx(
+          x.map((m) => /* @__PURE__ */ e.jsx(
             F,
             {
-              label: u.label,
-              onRemove: () => t?.(u.id)
+              label: m.label,
+              onRemove: () => t?.(m.id)
             },
-            u.id
+            m.id
           )),
-          g > 0 && /* @__PURE__ */ e.jsx(C, { variant: "default", className: "h-8 px-3 py-2 shadow-xs", children: /* @__PURE__ */ e.jsxs("span", { className: "text-xs font-medium leading-none", children: [
+          u > 0 && /* @__PURE__ */ e.jsx(C, { variant: "default", className: "h-8 px-3 py-2 shadow-xs", children: /* @__PURE__ */ e.jsxs("span", { className: "text-xs font-medium leading-none", children: [
             "+",
-            g,
+            u,
             " more"
           ] }) }),
           n && /* @__PURE__ */ e.jsx(
-            f,
+            j,
             {
               variant: "ghost",
               size: "sm",
@@ -94,44 +94,44 @@ const P = m(
   }
 );
 P.displayName = "FilterButton";
-const X = m(
+const X = f(
   (s, t) => {
     const {
       title: n,
       items: l,
       className: i,
-      searchable: r = !1,
-      searchPlaceholder: h = "Search...",
+      searchable: c = !1,
+      searchPlaceholder: r = "Search...",
       showActions: o = !1,
-      enableSelectAll: N = !0,
-      enableInverse: g = !0,
-      enableNone: u = !0
-    } = s, c = s.type || "checkbox", w = c === "radio", z = c === "checkbox" || !s.type, [j, I] = M(""), y = $(() => j ? l.filter(
-      (a) => a.label.toLowerCase().includes(j.toLowerCase())
-    ) : l, [l, j]), R = () => {
-      if (c === "checkbox" && "selectedValues" in s) {
-        const a = l.map((d) => d.value);
+      enableSelectAll: x = !0,
+      enableInverse: u = !0,
+      enableNone: m = !0
+    } = s, d = s.type || "checkbox", w = d === "radio", z = d === "checkbox" || !s.type, [N, I] = A(""), b = M(() => N ? l.filter(
+      (a) => a.label.toLowerCase().includes(N.toLowerCase())
+    ) : l, [l, N]), R = () => {
+      if (d === "checkbox" && "selectedValues" in s) {
+        const a = l.map((h) => h.value);
         s.onChange(a);
       }
     }, T = () => {
-      if (c === "checkbox" && "selectedValues" in s) {
-        const a = l.filter((d) => !s.selectedValues.includes(d.value)).map((d) => d.value);
+      if (d === "checkbox" && "selectedValues" in s) {
+        const a = l.filter((h) => !s.selectedValues.includes(h.value)).map((h) => h.value);
         s.onChange(a);
       }
     }, B = () => {
-      c === "checkbox" && "selectedValues" in s ? s.onChange([]) : c === "radio" && "selectedValue" in s && s.onChange("");
+      d === "checkbox" && "selectedValues" in s ? s.onChange([]) : d === "radio" && "selectedValue" in s && s.onChange("");
     }, G = (a) => {
-      if (c === "checkbox" && "selectedValues" in s) {
-        const O = s.selectedValues.includes(a) ? s.selectedValues.filter((A) => A !== a) : [...s.selectedValues, a];
+      if (d === "checkbox" && "selectedValues" in s) {
+        const O = s.selectedValues.includes(a) ? s.selectedValues.filter(($) => $ !== a) : [...s.selectedValues, a];
         s.onChange(O);
       }
     };
-    return /* @__PURE__ */ e.jsxs("div", { ref: t, className: x("flex flex-col h-full", i), children: [
-      r && /* @__PURE__ */ e.jsx(
+    return /* @__PURE__ */ e.jsxs("div", { ref: t, className: g("flex flex-col h-full", i), children: [
+      c && /* @__PURE__ */ e.jsx(
         k,
         {
-          placeholder: h,
-          value: j,
+          placeholder: r,
+          value: N,
           onChange: (a) => I(a.target.value),
           startIcon: "MagnifyingGlass",
           className: "mb-4"
@@ -139,9 +139,9 @@ const X = m(
       ),
       /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between mb-1", children: [
         /* @__PURE__ */ e.jsx("span", { className: "text-sm font-normal text-foreground", children: n }),
-        o && c === "checkbox" && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-2", children: [
-          N && /* @__PURE__ */ e.jsx(
-            f,
+        o && d === "checkbox" && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+          x && /* @__PURE__ */ e.jsx(
+            j,
             {
               variant: "link",
               size: "sm",
@@ -150,8 +150,8 @@ const X = m(
               children: "Select all"
             }
           ),
-          g && /* @__PURE__ */ e.jsx(
-            f,
+          u && /* @__PURE__ */ e.jsx(
+            j,
             {
               variant: "link",
               size: "sm",
@@ -160,8 +160,8 @@ const X = m(
               children: "Inverse"
             }
           ),
-          u && /* @__PURE__ */ e.jsx(
-            f,
+          m && /* @__PURE__ */ e.jsx(
+            j,
             {
               variant: "link",
               size: "sm",
@@ -178,8 +178,8 @@ const X = m(
         {
           value: s.selectedValue,
           onValueChange: s.onChange,
-          className: "grid grid-cols-2 gap-4 overflow-y-auto",
-          children: y.map((a) => /* @__PURE__ */ e.jsx(
+          className: "grid grid-cols-2 gap-x-4 gap-y-5 overflow-y-auto",
+          children: b.map((a) => /* @__PURE__ */ e.jsx(
             S,
             {
               label: a.label,
@@ -189,11 +189,12 @@ const X = m(
             a.value
           ))
         }
-      ) : z && "selectedValues" in s ? /* @__PURE__ */ e.jsx("div", { className: "grid grid-cols-2 gap-4 overflow-y-auto", children: y.map((a) => /* @__PURE__ */ e.jsx(
+      ) : z && "selectedValues" in s ? /* @__PURE__ */ e.jsx("div", { className: "grid grid-cols-2 gap-x-4 gap-y-5 overflow-y-auto", children: b.map((a) => /* @__PURE__ */ e.jsx(
         V,
         {
           label: a.label,
           description: a.description,
+          icon: a.icon,
           checked: s.selectedValues.includes(a.value),
           onCheckedChange: () => G(a.value)
         },
@@ -203,51 +204,65 @@ const X = m(
   }
 );
 X.displayName = "FilterSection";
-const V = m(({ label: s, checked: t, onCheckedChange: n, description: l, className: i }, r) => /* @__PURE__ */ e.jsxs("label", { className: x("flex items-start gap-2 cursor-pointer", i), children: [
-  /* @__PURE__ */ e.jsx(L, { ref: r, checked: t, onCheckedChange: n }),
-  /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1.5", children: [
-    /* @__PURE__ */ e.jsx("span", { className: "text-sm font-medium leading-none", children: s }),
-    l && /* @__PURE__ */ e.jsx("span", { className: "text-sm font-normal leading-5 text-muted-foreground", children: l })
-  ] })
-] }));
+const V = f(({ label: s, checked: t, onCheckedChange: n, description: l, className: i, maxLabelLength: c = 14, icon: r }, o) => {
+  const x = s.length > c, u = x ? `${s.slice(0, c)}...` : s;
+  return /* @__PURE__ */ e.jsxs("label", { className: g("flex items-start gap-2 cursor-pointer", i), children: [
+    /* @__PURE__ */ e.jsx(E, { ref: o, checked: t, onCheckedChange: n }),
+    r && /* @__PURE__ */ e.jsx(
+      "img",
+      {
+        src: r,
+        alt: "",
+        className: "size-4 object-contain shrink-0",
+        onError: (m) => {
+          m.currentTarget.style.display = "none";
+        }
+      }
+    ),
+    /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1.5 min-w-0 flex-1", children: [
+      /* @__PURE__ */ e.jsx(v, { content: x ? s : "", children: /* @__PURE__ */ e.jsx("span", { className: "text-sm font-medium leading-4 truncate", children: u }) }),
+      l && /* @__PURE__ */ e.jsx("span", { className: "text-sm font-normal leading-5 text-muted-foreground truncate", children: l })
+    ] })
+  ] });
+});
 V.displayName = "FilterCheckboxOption";
-const S = m(
-  ({ label: s, value: t, description: n, className: l }, i) => /* @__PURE__ */ e.jsxs("div", { className: x("flex items-start gap-3", l), children: [
-    /* @__PURE__ */ e.jsx(E, { ref: i, value: t, id: `radio-${t}` }),
+const S = f(
+  ({ label: s, value: t, description: n, className: l }, i) => /* @__PURE__ */ e.jsxs("div", { className: g("flex items-start gap-3", l), children: [
+    /* @__PURE__ */ e.jsx(L, { ref: i, value: t, id: `radio-${t}` }),
     /* @__PURE__ */ e.jsxs(
       "label",
       {
         htmlFor: `radio-${t}`,
         className: "flex flex-col gap-1.5 cursor-pointer flex-1 truncate",
         children: [
-          /* @__PURE__ */ e.jsx(b, { content: s, children: /* @__PURE__ */ e.jsx("span", { className: "text-sm font-medium leading-none truncate", children: s }) }),
-          n && /* @__PURE__ */ e.jsx(b, { content: n, children: /* @__PURE__ */ e.jsx("span", { className: "text-sm font-normal leading-5 text-muted-foreground truncate", children: n }) })
+          /* @__PURE__ */ e.jsx(v, { content: s, children: /* @__PURE__ */ e.jsx("span", { className: "text-sm font-medium leading-4 truncate", children: s }) }),
+          n && /* @__PURE__ */ e.jsx(v, { content: n, children: /* @__PURE__ */ e.jsx("span", { className: "text-sm font-normal leading-4 text-muted-foreground truncate", children: n }) })
         ]
       }
     )
   ] })
 );
 S.displayName = "FilterRadioOption";
-const q = m(
+const q = f(
   ({
     children: s,
     showSearch: t = !1,
     searchPlaceholder: n = "Search...",
     searchValue: l,
     onSearchChange: i,
-    className: r
-  }, h) => /* @__PURE__ */ e.jsxs(
+    className: c
+  }, r) => /* @__PURE__ */ e.jsxs(
     "div",
     {
-      ref: h,
-      className: x(
-        "flex flex-col gap-6 bg-white rounded-md p-6 min-w-[448px]",
-        r
+      ref: r,
+      className: g(
+        "flex flex-col gap-6 bg-background rounded-md p-6 min-w-[448px]",
+        c
       ),
       children: [
         t && /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
           /* @__PURE__ */ e.jsx(
-            v,
+            y,
             {
               name: "MagnifyingGlass",
               className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground"

package/dist/components/atoms/filter/index.d.ts

@@ -1,2 +1,2 @@
 export { FilterButton, FilterTag, FilterSection, FilterCheckboxOption, FilterRadioOption, FilterContent, type FilterButtonProps, type FilterTagProps, type FilterSectionProps, type FilterCheckboxOptionProps, type FilterRadioOptionProps, type FilterContentProps, } from './filter';
-export { FilterDateRange, FilterDateRangeOption, type FilterDateRangeProps, type FilterDateRangeOptionProps, } from './filter-date-range';
+export { FilterDateRange, FilterDateRangeOption, FilterDateRangeValue, type FilterDateRangeProps, type FilterDateRangeOptionProps, } from './filter-date-range';

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

@@ -1,68 +1,274 @@
 import { ReactNode, ComponentProps } from 'react';
 import { IconName } from '../icon';
 import { FilterSectionItem } from '../filter/filter';
+/**
+ * Props for the FilterMenuItem component
+ */
 interface FilterMenuItemProps extends ComponentProps<"button"> {
+    /**
+     * Optional icon to display at the start of the menu item
+     */
     icon?: IconName;
+    /**
+     * Label text to display in the menu item
+     */
     label: string;
+    /**
+     * Whether the menu item is currently active/selected
+     * @default false
+     */
     isActive?: boolean;
+    /**
+     * Whether to show a chevron icon at the end of the menu item
+     * @default false
+     */
     showChevron?: boolean;
 }
+/**
+ * A single menu item in the filter sidebar
+ */
 declare const FilterMenuItem: import('react').ForwardRefExoticComponent<Omit<FilterMenuItemProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+/**
+ * Props for the FilterMenu component (Sidebar)
+ */
 interface FilterMenuProps {
+    /**
+     * Array of menu items to display in the sidebar
+     */
     items: Array<{
+        /**
+         * Unique identifier for the menu item
+         */
         id: string;
+        /**
+         * Optional icon to display in the menu item
+         */
         icon?: IconName;
+        /**
+         * Label text for the menu item
+         */
         label: string;
+        /**
+         * Whether to show a chevron icon
+         */
         showChevron?: boolean;
     }>;
+    /**
+     * ID of the currently active/selected menu item
+     */
     activeItemId?: string;
+    /**
+     * Callback fired when a menu item is clicked
+     */
     onItemClick?: (itemId: string) => void;
+    /**
+     * Optional CSS class name
+     */
     className?: string;
 }
+/**
+ * Sidebar menu displaying available filter options
+ */
 declare const FilterMenu: import('react').ForwardRefExoticComponent<FilterMenuProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Configuration for a single filter in the FilterDropdown
+ */
 interface FilterConfig {
+    /**
+     * Unique identifier for the filter
+     */
     id: string;
+    /**
+     * Optional icon to display in the filter menu
+     */
     icon?: IconName;
+    /**
+     * Label text for the filter
+     */
     label: string;
-    type: 'checkbox' | 'radio' | 'custom' | 'date';
+    /**
+     * Type of filter to render
+     */
+    type: "checkbox" | "radio" | "custom" | "date";
+    /**
+     * Items for checkbox/radio type filters
+     */
     items?: FilterSectionItem[];
+    /**
+     * Selected values for checkbox type filters
+     */
     selectedValues?: string[];
+    /**
+     * Callback fired when checkbox selections change
+     */
     onChange?: (values: string[]) => void;
+    /**
+     * Selected value for radio type filters
+     */
     selectedValue?: string;
+    /**
+     * Callback fired when radio selection changes
+     */
     onValueChange?: (value: string) => void;
+    /**
+     * Current date range selection value (e.g., "last-7-days", "custom")
+     */
     dateValue?: string;
+    /**
+     * Start date for date type filters
+     */
     dateInit?: Date;
+    /**
+     * End date for date type filters
+     */
     dateEnd?: Date;
+    /**
+     * Start time in HH:mm:ss format
+     */
     startTime?: string;
+    /**
+     * End time in HH:mm:ss format
+     */
     endTime?: string;
-    dateMode?: 'range' | 'single';
+    /**
+     * Date picker mode: 'range' shows two date pickers, 'single' shows one
+     * @default 'range'
+     */
+    dateMode?: "range" | "single";
+    /**
+     * Label for single day picker when dateMode is 'single'
+     */
     singleDayLabel?: string;
+    /**
+     * Whether to show "All time" option in date filter
+     * @default false
+     */
     showAllTime?: boolean;
+    /**
+     * Callback fired when date range selection changes
+     */
     onDateValueChange?: (value: string) => void;
+    /**
+     * Callback fired when start date changes
+     */
     onDateInitChange?: (date: Date | undefined) => void;
+    /**
+     * Callback fired when end date changes
+     */
     onDateEndChange?: (date: Date | undefined) => void;
+    /**
+     * Callback fired when start time changes
+     */
     onStartTimeChange?: (time: string) => void;
+    /**
+     * Callback fired when end time changes
+     */
     onEndTimeChange?: (time: string) => void;
+    /**
+     * Whether the filter items are searchable
+     */
     searchable?: boolean;
+    /**
+     * Placeholder text for the search input
+     */
     searchPlaceholder?: string;
+    /**
+     * Whether to show action buttons (Select All, Inverse, None)
+     */
     showActions?: boolean;
+    /**
+     * Whether to enable "Select All" action
+     */
     enableSelectAll?: boolean;
+    /**
+     * Whether to enable "Inverse" action
+     */
     enableInverse?: boolean;
+    /**
+     * Whether to enable "None" action
+     */
     enableNone?: boolean;
+    /**
+     * Whether this filter can be cleared from applied filters
+     * @default true
+     */
     clearable?: boolean;
+    /**
+     * Custom render function for 'custom' type filters
+     */
     renderContent?: () => ReactNode;
 }
+/**
+ * Props for the FilterDropdown component
+ */
 interface FilterDropdownProps {
+    /**
+     * Array of filter configurations to display
+     */
     filters: FilterConfig[];
+    /**
+     * Array of currently applied filters to display as badges
+     */
     appliedFilters?: Array<{
+        /**
+         * ID of the applied filter (should match a FilterConfig id)
+         */
         id: string;
+        /**
+         * Label to display in the badge
+         */
         label: string;
     }>;
+    /**
+     * Callback fired when a filter badge is removed
+     */
     onRemoveFilter?: (filterId: string) => void;
+    /**
+     * Callback fired when "Clear filters" button is clicked
+     */
     onClearAllFilters?: () => void;
+    /**
+     * Text to display in the trigger button
+     * @default "Add filter"
+     */
     buttonText?: string;
+    /**
+     * Maximum number of filter badges to show before displaying "+X more"
+     * @default 4
+     */
     maxVisibleTags?: number;
+    /**
+     * Optional CSS class name for the root element
+     */
     className?: string;
+    /**
+     * Whether the filter dropdown is disabled
+     * @default false
+     */
+    disabled?: boolean;
 }
+/**
+ * Advanced filter dropdown component with sidebar navigation and multiple filter types.
+ * Supports checkbox, radio, date range, and custom filters with applied filter badges.
+ *
+ * @example
+ * ```tsx
+ * <FilterDropdown
+ *   filters={[
+ *     {
+ *       id: 'status',
+ *       label: 'Status',
+ *       type: 'checkbox',
+ *       items: [{ value: 'active', label: 'Active' }],
+ *       selectedValues: ['active'],
+ *       onChange: (values) => console.log(values)
+ *     }
+ *   ]}
+ *   appliedFilters={[{ id: 'status', label: 'Status: Active' }]}
+ *   onRemoveFilter={(id) => console.log('Remove', id)}
+ *   onClearAllFilters={() => console.log('Clear all')}
+ * />
+ * ```
+ */
 declare const FilterDropdown: import('react').ForwardRefExoticComponent<FilterDropdownProps & import('react').RefAttributes<HTMLDivElement>>;
 export { FilterDropdown, FilterMenu, FilterMenuItem, type FilterDropdownProps, type FilterConfig, type FilterMenuProps, type FilterMenuItemProps, };