@yuno-payments/dashboard-design-system 0.0.136 → 0.0.138-beta.1

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

@@ -1,10 +1,10 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as T } from "react";
-import { RadioGroup as S, RadioGroupItem as M } from "../../../vendor/shadcn/radio-group.js";
-import { cn as _ } from "../../../lib/utils.js";
-import { DatePicker as m } from "../date-picker/date-picker.js";
-import { TimePicker as x } from "../time-picker/time-picker.js";
-const l = {
+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",
@@ -12,207 +12,231 @@ const l = {
   LAST_30_DAYS: "LAST_30_DAYS",
   THIS_MONTH: "THIS_MONTH",
   ALL_TIME: "ALL_TIME"
-}, a = T(
-  ({ label: r, description: c, value: i, className: d, ...o }, t) => {
-    const n = `date-range-${i}`;
-    return /* @__PURE__ */ e.jsxs("div", { className: "flex items-start gap-4 w-full", children: [
+}, 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: t,
-          className: _(
+          ref: m,
+          className: N(
             "flex-1 flex items-start gap-3 cursor-pointer",
-            d
+            n
           ),
-          ...o,
+          ...r,
           children: [
-            /* @__PURE__ */ e.jsx(M, { id: n, 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: r }) })
+            /* @__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 }) })
           ]
         }
       ),
-      c && /* @__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: c }) })
+      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 }) })
     ] });
   }
 );
-a.displayName = "FilterDateRangeOption";
-const b = T(
+c.displayName = "FilterDateRangeOption";
+const I = y(
   ({
-    showCustomFields: r = !1,
-    onCustomFieldsChange: c,
-    startDate: i,
-    endDate: d,
-    startTime: o = "",
-    endTime: t = "",
-    onStartDateChange: n,
-    onEndDateChange: f,
-    onStartTimeChange: p,
-    onEndTimeChange: h,
-    mode: j = "range",
-    singleDayLabel: D = "Select date",
-    showAllTime: L = !1,
-    className: O,
-    value: g,
-    onValueChange: Y,
-    ...N
-  }, y) => {
-    const u = (s) => {
-      Y?.(s), c?.(s === l.CUSTOM);
-    }, C = (s) => {
-      if (s) {
-        const v = new Date(s);
-        v.setHours(0, 0, 0, 0);
-        const A = new Date(s);
-        A.setHours(23, 59, 59, 999), n?.(v), f?.(A);
+    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
-        n?.(void 0), f?.(void 0);
+        l?.(void 0), x?.(void 0);
     };
-    return /* @__PURE__ */ e.jsxs(
+    return /* @__PURE__ */ e.jsx(
       "div",
       {
-        ref: y,
-        className: _("flex flex-col gap-4 w-full", O),
-        children: [
-          /* @__PURE__ */ e.jsx(
-            S,
-            {
-              value: g,
-              onValueChange: u,
-              ...N,
-              children: /* @__PURE__ */ e.jsx(a, { label: "Custom", value: l.CUSTOM })
-            }
-          ),
-          r && /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-4", children: [
-            j === "single" ? /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
-              m,
-              {
-                date: i,
-                onChange: C,
-                placeholder: D,
-                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,
-                  onChange: n,
-                  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: d,
-                  onChange: f,
-                  placeholder: "End date",
-                  className: "h-9",
-                  iconPosition: "none"
-                }
-              ) })
-            ] }),
-            j === "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(
-                x,
-                {
-                  value: o,
-                  onChange: p,
-                  placeholder: "10:30:00",
-                  className: "h-9"
-                }
-              ) }),
-              /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
-                x,
-                {
-                  value: t,
-                  onChange: h,
-                  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(
-                x,
-                {
-                  value: o,
-                  onChange: p,
-                  placeholder: "10:30:00",
-                  className: "h-9"
-                }
-              ) }),
-              /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
-                x,
-                {
-                  value: t,
-                  onChange: h,
-                  placeholder: "10:30:00",
-                  className: "h-9"
-                }
-              ) })
-            ] })
-          ] }),
-          /* @__PURE__ */ e.jsx(
-            S,
-            {
-              value: g,
-              onValueChange: u,
-              ...N,
-              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(
-                  a,
+                  c,
                   {
                     label: "Today",
-                    value: l.TODAY,
-                    description: "Today"
+                    value: o.TODAY,
+                    description: p.today
                   }
                 ),
                 /* @__PURE__ */ e.jsx(
-                  a,
+                  c,
                   {
                     label: "Last 3 days",
-                    value: l.LAST_3_DAYS,
-                    description: "Friday, Jan 3"
+                    value: o.LAST_3_DAYS,
+                    description: p.last3Days
                   }
                 ),
                 /* @__PURE__ */ e.jsx(
-                  a,
+                  c,
                   {
                     label: "Last 7 days",
-                    value: l.LAST_7_DAYS,
-                    description: "Dic 29 - Jan 3"
+                    value: o.LAST_7_DAYS,
+                    description: p.last7Days
                   }
                 ),
                 /* @__PURE__ */ e.jsx(
-                  a,
+                  c,
                   {
                     label: "Last 30 days",
-                    value: l.LAST_30_DAYS,
-                    description: "Dic 3 - Jan 3"
+                    value: o.LAST_30_DAYS,
+                    description: p.last30Days
                   }
                 ),
                 /* @__PURE__ */ e.jsx(
-                  a,
+                  c,
                   {
                     label: "This month",
-                    value: l.THIS_MONTH,
-                    description: "Jan 2026"
+                    value: o.THIS_MONTH,
+                    description: p.thisMonth
                   }
                 ),
-                L && /* @__PURE__ */ e.jsx(a, { label: "All time", value: l.ALL_TIME })
+                A && /* @__PURE__ */ e.jsx(c, { label: "All time", value: o.ALL_TIME })
               ] })
-            }
-          )
-        ]
+            ]
+          }
+        )
       }
     );
   }
 );
-b.displayName = "FilterDateRange";
+I.displayName = "FilterDateRange";
 export {
-  b as FilterDateRange,
-  a as FilterDateRangeOption,
-  l as FilterDateRangeValue
+  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;
@@ -52,6 +54,8 @@ interface FilterCheckboxOptionProps {
     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 {