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

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

@@ -1,21 +1,21 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as f, useState as A, useMemo as M } from "react";
-import { Button as j } from "../../../vendor/shadcn/button.js";
+import { forwardRef as m, useState as M, useMemo as $ } from "react";
+import { Button as f } 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 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 { 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 { Field as k } from "../field/field.js";
-import { Tooltip as v } from "../tooltip/tooltip.js";
-const F = f(
+import { Tooltip as b } from "../tooltip/tooltip.js";
+const F = m(
   ({ label: s, onRemove: t, className: n, ...l }, i) => /* @__PURE__ */ e.jsxs(
     C,
     {
       ref: i,
       variant: "secondary",
-      className: g("h-8 gap-2 px-3 py-2 shadow-xs", n),
+      className: x("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 = f(
             onClick: t,
             className: "inline-flex items-center justify-center",
             "aria-label": `Remove ${s} filter`,
-            children: /* @__PURE__ */ e.jsx(y, { name: "X", className: "size-4" })
+            children: /* @__PURE__ */ e.jsx(v, { name: "X", className: "size-4" })
           }
         )
       ]
@@ -33,27 +33,27 @@ const F = f(
   )
 );
 F.displayName = "FilterTag";
-const P = f(
+const P = m(
   ({
     appliedFilters: s = [],
     onRemoveFilter: t,
     onClearAll: n,
     maxVisibleTags: l = 4,
     className: i,
-    ...c
-  }, r) => {
-    const o = s.length > 0, x = s.slice(0, l), u = s.length - l;
+    ...r
+  }, h) => {
+    const o = s.length > 0, N = s.slice(0, l), g = s.length - l;
     return /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-4", children: [
       /* @__PURE__ */ e.jsxs(
-        j,
+        f,
         {
-          ref: r,
+          ref: h,
           variant: "outline",
           size: "sm",
-          className: g("h-8 gap-2 px-3 py-2", i),
-          ...c,
+          className: x("h-8 gap-2 px-3 py-2", i),
+          ...r,
           children: [
-            /* @__PURE__ */ e.jsx(y, { name: "FunnelSimple", className: "size-4" }),
+            /* @__PURE__ */ e.jsx(v, { 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 = f(
       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: [
-          x.map((m) => /* @__PURE__ */ e.jsx(
+          N.map((u) => /* @__PURE__ */ e.jsx(
             F,
             {
-              label: m.label,
-              onRemove: () => t?.(m.id)
+              label: u.label,
+              onRemove: () => t?.(u.id)
             },
-            m.id
+            u.id
           )),
-          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 > 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,
+            g,
             " more"
           ] }) }),
           n && /* @__PURE__ */ e.jsx(
-            j,
+            f,
             {
               variant: "ghost",
               size: "sm",
@@ -94,44 +94,44 @@ const P = f(
   }
 );
 P.displayName = "FilterButton";
-const X = f(
+const X = m(
   (s, t) => {
     const {
       title: n,
       items: l,
       className: i,
-      searchable: c = !1,
-      searchPlaceholder: r = "Search...",
+      searchable: r = !1,
+      searchPlaceholder: h = "Search...",
       showActions: o = !1,
-      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);
+      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);
         s.onChange(a);
       }
     }, T = () => {
-      if (d === "checkbox" && "selectedValues" in s) {
-        const a = l.filter((h) => !s.selectedValues.includes(h.value)).map((h) => h.value);
+      if (c === "checkbox" && "selectedValues" in s) {
+        const a = l.filter((d) => !s.selectedValues.includes(d.value)).map((d) => d.value);
         s.onChange(a);
       }
     }, B = () => {
-      d === "checkbox" && "selectedValues" in s ? s.onChange([]) : d === "radio" && "selectedValue" in s && s.onChange("");
+      c === "checkbox" && "selectedValues" in s ? s.onChange([]) : c === "radio" && "selectedValue" in s && s.onChange("");
     }, G = (a) => {
-      if (d === "checkbox" && "selectedValues" in s) {
-        const O = s.selectedValues.includes(a) ? s.selectedValues.filter(($) => $ !== a) : [...s.selectedValues, a];
+      if (c === "checkbox" && "selectedValues" in s) {
+        const O = s.selectedValues.includes(a) ? s.selectedValues.filter((A) => A !== a) : [...s.selectedValues, a];
         s.onChange(O);
       }
     };
-    return /* @__PURE__ */ e.jsxs("div", { ref: t, className: g("flex flex-col h-full", i), children: [
-      c && /* @__PURE__ */ e.jsx(
+    return /* @__PURE__ */ e.jsxs("div", { ref: t, className: x("flex flex-col h-full", i), children: [
+      r && /* @__PURE__ */ e.jsx(
         k,
         {
-          placeholder: r,
-          value: N,
+          placeholder: h,
+          value: j,
           onChange: (a) => I(a.target.value),
           startIcon: "MagnifyingGlass",
           className: "mb-4"
@@ -139,9 +139,9 @@ const X = f(
       ),
       /* @__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 && d === "checkbox" && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-2", children: [
-          x && /* @__PURE__ */ e.jsx(
-            j,
+        o && c === "checkbox" && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+          N && /* @__PURE__ */ e.jsx(
+            f,
             {
               variant: "link",
               size: "sm",
@@ -150,8 +150,8 @@ const X = f(
               children: "Select all"
             }
           ),
-          u && /* @__PURE__ */ e.jsx(
-            j,
+          g && /* @__PURE__ */ e.jsx(
+            f,
             {
               variant: "link",
               size: "sm",
@@ -160,8 +160,8 @@ const X = f(
               children: "Inverse"
             }
           ),
-          m && /* @__PURE__ */ e.jsx(
-            j,
+          u && /* @__PURE__ */ e.jsx(
+            f,
             {
               variant: "link",
               size: "sm",
@@ -178,8 +178,8 @@ const X = f(
         {
           value: s.selectedValue,
           onValueChange: s.onChange,
-          className: "grid grid-cols-2 gap-x-4 gap-y-5 overflow-y-auto",
-          children: b.map((a) => /* @__PURE__ */ e.jsx(
+          className: "grid grid-cols-2 gap-4 overflow-y-auto",
+          children: y.map((a) => /* @__PURE__ */ e.jsx(
             S,
             {
               label: a.label,
@@ -189,12 +189,11 @@ const X = f(
             a.value
           ))
         }
-      ) : 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(
+      ) : 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(
         V,
         {
           label: a.label,
           description: a.description,
-          icon: a.icon,
           checked: s.selectedValues.includes(a.value),
           onCheckedChange: () => G(a.value)
         },
@@ -204,65 +203,51 @@ const X = f(
   }
 );
 X.displayName = "FilterSection";
-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 })
-    ] })
-  ] });
-});
+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 })
+  ] })
+] }));
 V.displayName = "FilterCheckboxOption";
-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}` }),
+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}` }),
     /* @__PURE__ */ e.jsxs(
       "label",
       {
         htmlFor: `radio-${t}`,
         className: "flex flex-col gap-1.5 cursor-pointer flex-1 truncate",
         children: [
-          /* @__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 }) })
+          /* @__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 }) })
         ]
       }
     )
   ] })
 );
 S.displayName = "FilterRadioOption";
-const q = f(
+const q = m(
   ({
     children: s,
     showSearch: t = !1,
     searchPlaceholder: n = "Search...",
     searchValue: l,
     onSearchChange: i,
-    className: c
-  }, r) => /* @__PURE__ */ e.jsxs(
+    className: r
+  }, h) => /* @__PURE__ */ e.jsxs(
     "div",
     {
-      ref: r,
-      className: g(
-        "flex flex-col gap-6 bg-background rounded-md p-6 min-w-[448px]",
-        c
+      ref: h,
+      className: x(
+        "flex flex-col gap-6 bg-white rounded-md p-6 min-w-[448px]",
+        r
       ),
       children: [
         t && /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
           /* @__PURE__ */ e.jsx(
-            y,
+            v,
             {
               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, FilterDateRangeValue, type FilterDateRangeProps, type FilterDateRangeOptionProps, } from './filter-date-range';
+export { FilterDateRange, FilterDateRangeOption, type FilterDateRangeProps, type FilterDateRangeOptionProps, } from './filter-date-range';

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

@@ -1,274 +1,68 @@
 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 of filter to render
-     */
-    type: "checkbox" | "radio" | "custom" | "date";
-    /**
-     * Items for checkbox/radio type filters
-     */
+    type: 'checkbox' | 'radio' | 'custom' | 'date';
     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;
-    /**
-     * 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'
-     */
+    dateMode?: 'range' | '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, };