@yuno-payments/dashboard-design-system 0.0.135 → 0.0.137

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 { forwardRef as T, useMemo as b } from "react";
+import { RadioGroup as S, RadioGroupItem as C } 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 { DatePicker as D } from "../date-picker/date-picker.js";
+import { TimePicker as p } from "../time-picker/time-picker.js";
+const c = {
   CUSTOM: "CUSTOM",
   TODAY: "TODAY",
   LAST_3_DAYS: "LAST_3_DAYS",
@@ -12,142 +12,191 @@ 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: [
+}, r = (s) => {
+  const l = s.getDate();
+  return `${[
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec"
+  ][s.getMonth()]} ${l}`;
+}, R = (s) => {
+  const a = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec"
+  ][s.getMonth()], n = s.getFullYear();
+  return `${a} ${n}`;
+}, F = (s) => ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][s.getDay()], H = () => {
+  const s = /* @__PURE__ */ new Date();
+  s.setHours(0, 0, 0, 0);
+  const l = `${F(s)}, ${r(s)}`, a = new Date(s);
+  a.setDate(a.getDate() - 2);
+  const n = `${r(a)} - ${r(s)}`, o = new Date(s);
+  o.setDate(o.getDate() - 6);
+  const d = `${r(o)} - ${r(s)}`, t = new Date(s);
+  t.setDate(t.getDate() - 29);
+  const m = `${r(t)} - ${r(s)}`, f = R(s);
+  return {
+    today: l,
+    last3Days: n,
+    last7Days: d,
+    last30Days: m,
+    thisMonth: f
+  };
+}, i = T(
+  ({ label: s, description: l, value: a, className: n, ...o }, d) => {
+    const t = `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,
+          ref: d,
           className: _(
             "flex-1 flex items-start gap-3 cursor-pointer",
-            d
+            n
           ),
           ...o,
           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(C, { id: t, 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 }) })
+      l && /* @__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: l }) })
     ] });
   }
 );
-a.displayName = "FilterDateRangeOption";
-const b = T(
+i.displayName = "FilterDateRangeOption";
+const I = T(
   ({
-    showCustomFields: r = !1,
-    onCustomFieldsChange: c,
-    startDate: i,
-    endDate: d,
+    showCustomFields: s = !1,
+    onCustomFieldsChange: l,
+    startDate: a,
+    endDate: n,
     startTime: o = "",
-    endTime: t = "",
-    onStartDateChange: n,
-    onEndDateChange: f,
-    onStartTimeChange: p,
-    onEndTimeChange: h,
-    mode: j = "range",
-    singleDayLabel: D = "Select date",
+    endTime: d = "",
+    onStartDateChange: t,
+    onEndDateChange: m,
+    onStartTimeChange: f,
+    onEndTimeChange: g,
+    mode: u = "range",
+    singleDayLabel: M = "Select date",
     showAllTime: L = !1,
     className: O,
-    value: g,
+    value: y,
     onValueChange: Y,
     ...N
-  }, y) => {
-    const u = (s) => {
-      Y?.(s), c?.(s === l.CUSTOM);
-    }, C = (s) => {
-      if (s) {
-        const v = new Date(s);
+  }, w) => {
+    const h = b(() => H(), []), j = (x) => {
+      Y?.(x), l?.(x === c.CUSTOM);
+    }, $ = (x) => {
+      if (x) {
+        const v = new Date(x);
         v.setHours(0, 0, 0, 0);
-        const A = new Date(s);
-        A.setHours(23, 59, 59, 999), n?.(v), f?.(A);
+        const A = new Date(x);
+        A.setHours(23, 59, 59, 999), t?.(v), m?.(A);
       } else
-        n?.(void 0), f?.(void 0);
+        t?.(void 0), m?.(void 0);
     };
     return /* @__PURE__ */ e.jsxs(
       "div",
       {
-        ref: y,
+        ref: w,
         className: _("flex flex-col gap-4 w-full", O),
         children: [
           /* @__PURE__ */ e.jsx(
             S,
             {
-              value: g,
-              onValueChange: u,
+              value: y,
+              onValueChange: j,
               ...N,
-              children: /* @__PURE__ */ e.jsx(a, { label: "Custom", value: l.CUSTOM })
+              children: /* @__PURE__ */ e.jsx(i, { label: "Custom", value: c.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,
+          s && /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-4", children: [
+            u === "single" ? /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
+              D,
               {
-                date: i,
-                onChange: C,
-                placeholder: D,
+                date: a,
+                onChange: $,
+                placeholder: M,
                 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,
+                D,
                 {
-                  date: i,
-                  onChange: n,
+                  date: a,
+                  onChange: t,
                   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,
+                D,
                 {
-                  date: d,
-                  onChange: f,
+                  date: n,
+                  onChange: m,
                   placeholder: "End date",
                   className: "h-9",
                   iconPosition: "none"
                 }
               ) })
             ] }),
-            j === "single" ? /* @__PURE__ */ e.jsxs("div", { className: "flex gap-4 items-start w-full", children: [
+            u === "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,
+                p,
                 {
                   value: o,
-                  onChange: p,
+                  onChange: f,
                   placeholder: "10:30:00",
                   className: "h-9"
                 }
               ) }),
               /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
-                x,
+                p,
                 {
-                  value: t,
-                  onChange: h,
+                  value: d,
+                  onChange: g,
                   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,
+                p,
                 {
                   value: o,
-                  onChange: p,
+                  onChange: f,
                   placeholder: "10:30:00",
                   className: "h-9"
                 }
               ) }),
               /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
-                x,
+                p,
                 {
-                  value: t,
-                  onChange: h,
+                  value: d,
+                  onChange: g,
                   placeholder: "10:30:00",
                   className: "h-9"
                 }
@@ -157,51 +206,51 @@ const b = T(
           /* @__PURE__ */ e.jsx(
             S,
             {
-              value: g,
-              onValueChange: u,
+              value: y,
+              onValueChange: j,
               ...N,
-              children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-4", children: [
+              children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2", children: [
                 /* @__PURE__ */ e.jsx(
-                  a,
+                  i,
                   {
                     label: "Today",
-                    value: l.TODAY,
-                    description: "Today"
+                    value: c.TODAY,
+                    description: h.today
                   }
                 ),
                 /* @__PURE__ */ e.jsx(
-                  a,
+                  i,
                   {
                     label: "Last 3 days",
-                    value: l.LAST_3_DAYS,
-                    description: "Friday, Jan 3"
+                    value: c.LAST_3_DAYS,
+                    description: h.last3Days
                   }
                 ),
                 /* @__PURE__ */ e.jsx(
-                  a,
+                  i,
                   {
                     label: "Last 7 days",
-                    value: l.LAST_7_DAYS,
-                    description: "Dic 29 - Jan 3"
+                    value: c.LAST_7_DAYS,
+                    description: h.last7Days
                   }
                 ),
                 /* @__PURE__ */ e.jsx(
-                  a,
+                  i,
                   {
                     label: "Last 30 days",
-                    value: l.LAST_30_DAYS,
-                    description: "Dic 3 - Jan 3"
+                    value: c.LAST_30_DAYS,
+                    description: h.last30Days
                   }
                 ),
                 /* @__PURE__ */ e.jsx(
-                  a,
+                  i,
                   {
                     label: "This month",
-                    value: l.THIS_MONTH,
-                    description: "Jan 2026"
+                    value: c.THIS_MONTH,
+                    description: h.thisMonth
                   }
                 ),
-                L && /* @__PURE__ */ e.jsx(a, { label: "All time", value: l.ALL_TIME })
+                L && /* @__PURE__ */ e.jsx(i, { label: "All time", value: c.ALL_TIME })
               ] })
             }
           )
@@ -210,9 +259,9 @@ const b = T(
     );
   }
 );
-b.displayName = "FilterDateRange";
+I.displayName = "FilterDateRange";
 export {
-  b as FilterDateRange,
-  a as FilterDateRangeOption,
-  l as FilterDateRangeValue
+  I as FilterDateRange,
+  i as FilterDateRangeOption,
+  c as FilterDateRangeValue
 };

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

@@ -106,7 +106,7 @@ const X = x(
       enableSelectAll: h = !0,
       enableInverse: j = !0,
       enableNone: f = !0
-    } = s, o = s.type || "checkbox", S = o === "radio", z = o === "checkbox" || !s.type, [N, I] = A(""), b = M(() => N ? l.filter(
+    } = s, o = s.type || "checkbox", w = o === "radio", z = o === "checkbox" || !s.type, [N, I] = A(""), b = M(() => N ? l.filter(
       (a) => a.label.toLowerCase().includes(N.toLowerCase())
     ) : l, [l, N]), R = () => {
       if (o === "checkbox" && "selectedValues" in s) {
@@ -173,14 +173,14 @@ const X = x(
         ] })
       ] }),
       /* @__PURE__ */ e.jsx(p, { className: "w-full mb-6" }),
-      S && "selectedValue" in s ? /* @__PURE__ */ e.jsx(
+      w && "selectedValue" in s ? /* @__PURE__ */ e.jsx(
         E,
         {
           value: s.selectedValue,
           onValueChange: s.onChange,
-          className: "grid grid-cols-2 gap-4 overflow-y-auto",
+          className: "grid grid-cols-2 gap-x-4 gap-y-5 overflow-y-auto",
           children: b.map((a) => /* @__PURE__ */ e.jsx(
-            w,
+            S,
             {
               label: a.label,
               value: a.value,
@@ -189,7 +189,7 @@ const X = x(
             a.value
           ))
         }
-      ) : z && "selectedValues" in s ? /* @__PURE__ */ e.jsx("div", { className: "grid grid-cols-2 gap-4 overflow-y-auto", children: b.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,
@@ -214,7 +214,7 @@ const V = x(({ label: s, checked: t, onCheckedChange: n, description: l, classNa
   ] });
 });
 V.displayName = "FilterCheckboxOption";
-const w = x(
+const S = x(
   ({ label: s, value: t, description: n, className: l }, i) => /* @__PURE__ */ e.jsxs("div", { className: u("flex items-start gap-3", l), children: [
     /* @__PURE__ */ e.jsx(L, { ref: i, value: t, id: `radio-${t}` }),
     /* @__PURE__ */ e.jsxs(
@@ -230,7 +230,7 @@ const w = x(
     )
   ] })
 );
-w.displayName = "FilterRadioOption";
+S.displayName = "FilterRadioOption";
 const q = x(
   ({
     children: s,
@@ -244,7 +244,7 @@ const q = x(
     {
       ref: d,
       className: u(
-        "flex flex-col gap-6 bg-white rounded-md p-6 min-w-[448px]",
+        "flex flex-col gap-6 bg-background rounded-md p-6 min-w-[448px]",
         r
       ),
       children: [
@@ -276,7 +276,7 @@ export {
   P as FilterButton,
   V as FilterCheckboxOption,
   q as FilterContent,
-  w as FilterRadioOption,
+  S as FilterRadioOption,
   X as FilterSection,
   F as FilterTag
 };