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

package/dist/components/atoms/filter/filter-date-range.js

@@ -1,207 +1,242 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as b } from "react";
-import { RadioGroup as y, RadioGroupItem as O } from "../../../vendor/shadcn/radio-group.js";
-import { cn as D } from "../../../lib/utils.js";
-import { DatePicker as m } from "../date-picker/date-picker.js";
-import { TimePicker as n } from "../time-picker/time-picker.js";
-const l = b(
-  ({ label: o, description: s, value: i, className: x, ...t }, c) => /* @__PURE__ */ e.jsxs("div", { className: "flex items-start gap-4 w-full", children: [
-    /* @__PURE__ */ e.jsxs(
-      "button",
-      {
-        ref: c,
-        className: D(
-          "flex-1 flex items-start gap-3 cursor-pointer",
-          x
-        ),
-        type: "button",
-        ...t,
-        children: [
-          /* @__PURE__ */ e.jsx(O, { value: i, className: "mt-px" }),
-          /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-1.5 items-start justify-center pb-0 pt-px px-0", children: /* @__PURE__ */ e.jsx("span", { className: "text-sm font-medium leading-none text-foreground", children: o }) })
-        ]
-      }
-    ),
-    s && /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ e.jsx("span", { className: "text-xs font-normal leading-none text-muted-foreground whitespace-nowrap", children: s }) })
-  ] })
+import { forwardRef as y, useMemo as $ } from "react";
+import { RadioGroup as b, RadioGroupItem as H } from "../../../vendor/shadcn/radio-group.js";
+import { cn as N } from "../../../lib/utils.js";
+import { DatePicker as f } from "../date-picker/date-picker.js";
+import { TimePicker as g } from "../time-picker/time-picker.js";
+const o = {
+  CUSTOM: "CUSTOM",
+  TODAY: "TODAY",
+  LAST_3_DAYS: "LAST_3_DAYS",
+  LAST_7_DAYS: "LAST_7_DAYS",
+  LAST_30_DAYS: "LAST_30_DAYS",
+  THIS_MONTH: "THIS_MONTH",
+  ALL_TIME: "ALL_TIME"
+}, i = (s) => {
+  const t = s.getDate();
+  return `${[
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec"
+  ][s.getMonth()]} ${t}`;
+}, R = (s) => {
+  const a = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec"
+  ][s.getMonth()], n = s.getFullYear();
+  return `${a} ${n}`;
+}, C = (s) => ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][s.getDay()], F = () => {
+  const s = /* @__PURE__ */ new Date();
+  s.setHours(0, 0, 0, 0);
+  const t = `${C(s)}, ${i(s)}`, a = new Date(s);
+  a.setDate(a.getDate() - 2);
+  const n = `${i(a)} - ${i(s)}`, r = new Date(s);
+  r.setDate(r.getDate() - 6);
+  const m = `${i(r)} - ${i(s)}`, l = new Date(s);
+  l.setDate(l.getDate() - 29);
+  const x = `${i(l)} - ${i(s)}`, D = R(s);
+  return {
+    today: t,
+    last3Days: n,
+    last7Days: m,
+    last30Days: x,
+    thisMonth: D
+  };
+}, c = y(
+  ({ label: s, description: t, value: a, className: n, ...r }, m) => {
+    const l = `date-range-${a}`;
+    return /* @__PURE__ */ e.jsxs("div", { className: "flex items-start gap-4 w-full py-1", children: [
+      /* @__PURE__ */ e.jsxs(
+        "label",
+        {
+          ref: m,
+          className: N(
+            "flex-1 flex items-start gap-3 cursor-pointer",
+            n
+          ),
+          ...r,
+          children: [
+            /* @__PURE__ */ e.jsx(H, { id: l, value: a, className: "mt-px" }),
+            /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-1.5 items-start justify-center pb-0 pt-px px-0", children: /* @__PURE__ */ e.jsx("span", { className: "text-sm font-medium leading-none text-foreground", children: s }) })
+          ]
+        }
+      ),
+      t && /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ e.jsx("span", { className: "text-xs font-normal leading-none text-muted-foreground whitespace-nowrap", children: t }) })
+    ] });
+  }
 );
-l.displayName = "FilterDateRangeOption";
-const T = b(
+c.displayName = "FilterDateRangeOption";
+const I = y(
   ({
-    showCustomFields: o = !1,
-    onCustomFieldsChange: s,
-    startDate: i,
-    endDate: x,
-    startTime: t = "",
-    endTime: c = "",
-    onStartDateChange: r,
-    onEndDateChange: d,
-    onStartTimeChange: f,
-    onEndTimeChange: p,
-    mode: h = "range",
-    singleDayLabel: w = "Select date",
-    showAllTime: R = !1,
-    className: C,
-    value: j,
-    onValueChange: F,
-    ...u
-  }, P) => {
-    const g = (a) => {
-      F?.(a), s?.(a === "custom");
-    }, J = (a) => {
-      if (a) {
-        const N = new Date(a);
-        N.setHours(0, 0, 0, 0);
-        const v = new Date(a);
-        v.setHours(23, 59, 59, 999), r?.(N), d?.(v);
+    showCustomFields: s = !1,
+    onCustomFieldsChange: t,
+    startDate: a,
+    endDate: n,
+    startTime: r = "",
+    endTime: m = "",
+    onStartDateChange: l,
+    onEndDateChange: x,
+    onStartTimeChange: D,
+    onEndTimeChange: j,
+    mode: S = "range",
+    singleDayLabel: T = "Select date",
+    showAllTime: A = !1,
+    className: v,
+    value: _,
+    onValueChange: M,
+    ...L
+  }, w) => {
+    const p = $(() => F(), []), O = (d) => {
+      M?.(d), t?.(d === o.CUSTOM);
+    }, Y = (d) => {
+      if (d) {
+        const h = new Date(d);
+        h.setHours(0, 0, 0, 0);
+        const u = new Date(d);
+        u.setHours(23, 59, 59, 999), l?.(h), x?.(u);
       } else
-        r?.(void 0), d?.(void 0);
+        l?.(void 0), x?.(void 0);
     };
-    return /* @__PURE__ */ e.jsxs(
+    return /* @__PURE__ */ e.jsx(
       "div",
       {
-        ref: P,
-        className: D("flex flex-col gap-4 w-full", C),
-        children: [
-          /* @__PURE__ */ e.jsx(
-            y,
-            {
-              value: j,
-              onValueChange: g,
-              ...u,
-              children: /* @__PURE__ */ e.jsx(l, { label: "Custom", value: "custom" })
-            }
-          ),
-          o && /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-4", children: [
-            h === "single" ? /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
-              m,
-              {
-                date: i,
-                onDateChange: J,
-                placeholder: w,
-                className: "h-9",
-                iconPosition: "none"
-              }
-            ) }) : /* @__PURE__ */ e.jsxs("div", { className: "flex gap-4 items-start w-full", children: [
-              /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
-                m,
-                {
-                  date: i,
-                  onDateChange: r,
-                  placeholder: "Start date",
-                  className: "h-9",
-                  iconPosition: "none"
-                }
-              ) }),
-              /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
-                m,
-                {
-                  date: x,
-                  onDateChange: d,
-                  placeholder: "End date",
-                  className: "h-9",
-                  iconPosition: "none"
-                }
-              ) })
-            ] }),
-            h === "single" ? /* @__PURE__ */ e.jsxs("div", { className: "flex gap-4 items-start w-full", children: [
-              /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
-                n,
-                {
-                  value: t,
-                  onTimeChange: f,
-                  placeholder: "10:30:00",
-                  className: "h-9"
-                }
-              ) }),
-              /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
-                n,
-                {
-                  value: c,
-                  onTimeChange: p,
-                  placeholder: "10:30:00",
-                  className: "h-9"
-                }
-              ) })
-            ] }) : /* @__PURE__ */ e.jsxs("div", { className: "flex gap-4 items-start w-full", children: [
-              /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
-                n,
-                {
-                  value: t,
-                  onTimeChange: f,
-                  placeholder: "10:30:00",
-                  className: "h-9"
-                }
-              ) }),
-              /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
-                n,
-                {
-                  value: c,
-                  onTimeChange: p,
-                  placeholder: "10:30:00",
-                  className: "h-9"
-                }
-              ) })
-            ] })
-          ] }),
-          /* @__PURE__ */ e.jsx(
-            y,
-            {
-              value: j,
-              onValueChange: g,
-              ...u,
-              children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-4", children: [
+        ref: w,
+        className: N("flex flex-col gap-4 w-full", v),
+        children: /* @__PURE__ */ e.jsxs(
+          b,
+          {
+            value: _,
+            onValueChange: O,
+            ...L,
+            children: [
+              /* @__PURE__ */ e.jsx(c, { label: "Custom", value: o.CUSTOM }),
+              s && /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-4 pl-7", children: [
+                S === "single" ? /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
+                  f,
+                  {
+                    date: a,
+                    onChange: Y,
+                    placeholder: T,
+                    className: "h-9",
+                    iconPosition: "none"
+                  }
+                ) }) : /* @__PURE__ */ e.jsxs("div", { className: "flex gap-4 items-start w-full", children: [
+                  /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
+                    f,
+                    {
+                      date: a,
+                      onChange: l,
+                      placeholder: "Start date",
+                      className: "h-9",
+                      iconPosition: "none"
+                    }
+                  ) }),
+                  /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
+                    f,
+                    {
+                      date: n,
+                      onChange: x,
+                      placeholder: "End date",
+                      className: "h-9",
+                      iconPosition: "none"
+                    }
+                  ) })
+                ] }),
+                /* @__PURE__ */ e.jsxs("div", { className: "flex gap-4 items-start w-full", children: [
+                  /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
+                    g,
+                    {
+                      value: r,
+                      onChange: D,
+                      mode: "dropdown",
+                      use24Hour: !0,
+                      width: "100%"
+                    }
+                  ) }),
+                  /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
+                    g,
+                    {
+                      value: m,
+                      onChange: j,
+                      mode: "dropdown",
+                      use24Hour: !0,
+                      width: "100%"
+                    }
+                  ) })
+                ] })
+              ] }),
+              /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2", children: [
                 /* @__PURE__ */ e.jsx(
-                  l,
+                  c,
                   {
                     label: "Today",
-                    value: "today",
-                    description: "Today"
+                    value: o.TODAY,
+                    description: p.today
                   }
                 ),
                 /* @__PURE__ */ e.jsx(
-                  l,
+                  c,
                   {
                     label: "Last 3 days",
-                    value: "last-3-days",
-                    description: "Friday, Jan 3"
+                    value: o.LAST_3_DAYS,
+                    description: p.last3Days
                   }
                 ),
                 /* @__PURE__ */ e.jsx(
-                  l,
+                  c,
                   {
                     label: "Last 7 days",
-                    value: "last-7-days",
-                    description: "Dic 29 - Jan 3"
+                    value: o.LAST_7_DAYS,
+                    description: p.last7Days
                   }
                 ),
                 /* @__PURE__ */ e.jsx(
-                  l,
+                  c,
                   {
                     label: "Last 30 days",
-                    value: "last-30-days",
-                    description: "Dic 3 - Jan 3"
+                    value: o.LAST_30_DAYS,
+                    description: p.last30Days
                   }
                 ),
                 /* @__PURE__ */ e.jsx(
-                  l,
+                  c,
                   {
                     label: "This month",
-                    value: "this-month",
-                    description: "Jan 2026"
+                    value: o.THIS_MONTH,
+                    description: p.thisMonth
                   }
                 ),
-                R && /* @__PURE__ */ e.jsx(l, { label: "All time", value: "all-time" })
+                A && /* @__PURE__ */ e.jsx(c, { label: "All time", value: o.ALL_TIME })
               ] })
-            }
-          )
-        ]
+            ]
+          }
+        )
       }
     );
   }
 );
-T.displayName = "FilterDateRange";
+I.displayName = "FilterDateRange";
 export {
-  T as FilterDateRange,
-  l as FilterDateRangeOption
+  I as FilterDateRange,
+  c as FilterDateRangeOption,
+  o as FilterDateRangeValue
 };

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

@@ -20,6 +20,8 @@ interface FilterSectionItem {
     value: string;
     label: string;
     description?: string;
+    /** Optional icon URL to display before the label */
+    icon?: string;
 }
 interface FilterSectionPropsBase {
     title: string;
@@ -50,6 +52,10 @@ interface FilterCheckboxOptionProps {
     onCheckedChange?: (checked: boolean) => void;
     description?: string;
     className?: string;
+    /** Maximum label length before truncating (default: 14) */
+    maxLabelLength?: number;
+    /** Optional icon URL to display before the label */
+    icon?: string;
 }
 declare const FilterCheckboxOption: import('react').ForwardRefExoticComponent<FilterCheckboxOptionProps & import('react').RefAttributes<HTMLButtonElement>>;
 interface FilterRadioOptionProps {