@yuno-payments/dashboard-design-system 2.2.0 → 2.2.1-beta.2

package/dist/components/atoms/checkbox/checkbox.js

@@ -1,9 +1,9 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as g, useId as C } from "react";
-import { Checkbox as j } from "../../../vendor/shadcn/checkbox.js";
-import { cn as x } from "../../../lib/utils.js";
-import { Label as k } from "../label/label.js";
-const v = g(
+import { forwardRef as g, useId as v } from "react";
+import { Checkbox as C } from "../../../vendor/shadcn/checkbox.js";
+import { cn as m } from "../../../lib/utils.js";
+import { Label as j } from "../label/label.js";
+const k = g(
   ({
     label: n,
     description: c,
@@ -15,7 +15,7 @@ const v = g(
     info: l,
     ...p
   }, h) => {
-    const u = C(), o = i || t || u, d = (r) => {
+    const u = v(), o = i || t || u, d = (r) => {
       if (!a) return;
       a({
         target: {
@@ -35,8 +35,8 @@ const v = g(
         stopPropagation: () => {
         }
       });
-    }, m = /* @__PURE__ */ e.jsx(
-      j,
+    }, x = /* @__PURE__ */ e.jsx(
+      C,
       {
         ref: h,
         id: o,
@@ -47,15 +47,15 @@ const v = g(
         className: "size-3.5 cursor-pointer"
       }
     );
-    return n ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-start gap-2", children: [
-      m,
+    return n ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-start gap-2 rtl:flex-row-reverse", children: [
+      x,
       /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1.5", children: [
         /* @__PURE__ */ e.jsx(
-          k,
+          j,
           {
             htmlFor: o,
             info: l,
-            className: x(
+            className: m(
               "text-sm leading-none cursor-pointer",
               s && "text-muted-foreground",
               f
@@ -66,7 +66,7 @@ const v = g(
         c && /* @__PURE__ */ e.jsx(
           "p",
           {
-            className: x(
+            className: m(
               "text-sm text-muted-foreground",
               s && "opacity-50"
             ),
@@ -74,10 +74,10 @@ const v = g(
           }
         )
       ] })
-    ] }) : m;
+    ] }) : x;
   }
 );
-v.displayName = "Checkbox";
+k.displayName = "Checkbox";
 export {
-  v as Checkbox
+  k as Checkbox
 };

package/dist/components/atoms/filter/filter-date-range.d.ts

@@ -1,5 +1,6 @@
 import { ComponentProps, ReactNode } from 'react';
 import { RadioGroup } from '../../../vendor/shadcn/radio-group';
+import { FilterLanguage, FilterTranslations } from './filter-translations';
 export declare const FilterDateRangeValue: {
     readonly CUSTOM: "CUSTOM";
     readonly TODAY: "TODAY";
@@ -16,6 +17,21 @@ interface FilterDateRangeOptionProps extends ComponentProps<"label"> {
     value: string;
 }
 declare const FilterDateRangeOption: import('react').ForwardRefExoticComponent<Omit<FilterDateRangeOptionProps, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
+/**
+ * Labels for date range filter options - allows i18n/translation support
+ * @deprecated Use `lang` prop or `translations` prop instead
+ */
+interface FilterDateRangeLabels {
+    custom?: string;
+    today?: string;
+    last3Days?: string;
+    last7Days?: string;
+    last30Days?: string;
+    thisMonth?: string;
+    allTime?: string;
+    startDate?: string;
+    endDate?: string;
+}
 interface FilterDateRangeProps extends ComponentProps<typeof RadioGroup> {
     showCustomFields?: boolean;
     onCustomFieldsChange?: (show: boolean) => void;
@@ -35,6 +51,20 @@ interface FilterDateRangeProps extends ComponentProps<typeof RadioGroup> {
      * Announcement text to display at the top of the filter (e.g., timezone info)
      */
     announcement?: ReactNode;
+    /**
+     * Labels for date preset options - enables i18n/translation support.
+     * @deprecated Use `lang` prop or `translations` prop instead
+     */
+    labels?: FilterDateRangeLabels;
+    /**
+     * Language code for translations
+     * @default "en"
+     */
+    lang?: FilterLanguage;
+    /**
+     * Custom translations (overrides lang-based translations)
+     */
+    translations?: FilterTranslations;
 }
 declare const FilterDateRange: import('react').ForwardRefExoticComponent<Omit<FilterDateRangeProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-export { FilterDateRange, FilterDateRangeOption, type FilterDateRangeProps, type FilterDateRangeOptionProps, };
+export { FilterDateRange, FilterDateRangeOption, type FilterDateRangeProps, type FilterDateRangeOptionProps, type FilterDateRangeLabels, };

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

@@ -1,11 +1,12 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as N, useMemo as b } from "react";
-import { RadioGroup as H, RadioGroupItem as R } from "../../../vendor/shadcn/radio-group.js";
-import { cn as j } from "../../../lib/utils.js";
-import { Alert as C } from "../alert/alert.js";
-import { DatePicker as h } from "../date-picker/date-picker.js";
-import { TimePicker as y } from "../time-picker/time-picker.js";
-const n = {
+import { forwardRef as L, useMemo as u } from "react";
+import { RadioGroup as U, RadioGroupItem as k } from "../../../vendor/shadcn/radio-group.js";
+import { cn as O } from "../../../lib/utils.js";
+import { getFilterTranslations as E, getDayNames as G, getMonthAbbreviations as V } from "./filter-translations.js";
+import { Alert as q } from "../alert/alert.js";
+import { DatePicker as A } from "../date-picker/date-picker.js";
+import { TimePicker as w } from "../time-picker/time-picker.js";
+const c = {
   CUSTOM: "CUSTOM",
   TODAY: "TODAY",
   LAST_3_DAYS: "LAST_3_DAYS",
@@ -13,71 +14,45 @@ const n = {
   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}`;
-}, F = (s) => {
-  const a = [
-    "Jan",
-    "Feb",
-    "Mar",
-    "Apr",
-    "May",
-    "Jun",
-    "Jul",
-    "Aug",
-    "Sep",
-    "Oct",
-    "Nov",
-    "Dec"
-  ][s.getMonth()], o = s.getFullYear();
-  return `${a} ${o}`;
-}, I = (s) => ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][s.getDay()], J = () => {
+}, D = (l, t) => {
+  const s = l.getDate();
+  return `${t[l.getMonth()]} ${s}`;
+}, z = (l, t) => {
+  const s = t[l.getMonth()], i = l.getFullYear();
+  return `${s} ${i}`;
+}, B = (l, t) => t[l.getDay()], J = (l, t) => {
   const s = /* @__PURE__ */ new Date();
   s.setHours(0, 0, 0, 0);
-  const t = `${I(s)}, ${i(s)}`, a = new Date(s);
-  a.setDate(a.getDate() - 2);
-  const o = `${i(a)} - ${i(s)}`, c = new Date(s);
-  c.setDate(c.getDate() - 6);
-  const m = `${i(c)} - ${i(s)}`, l = new Date(s);
-  l.setDate(l.getDate() - 29);
-  const x = `${i(l)} - ${i(s)}`, D = F(s);
+  const i = `${B(s, l)}, ${D(s, t)}`, x = new Date(s);
+  x.setDate(x.getDate() - 2);
+  const f = `${D(x, t)} - ${D(s, t)}`, o = new Date(s);
+  o.setDate(o.getDate() - 6);
+  const p = `${D(o, t)} - ${D(s, t)}`, m = new Date(s);
+  m.setDate(m.getDate() - 29);
+  const y = `${D(m, t)} - ${D(s, t)}`, j = z(s, t);
   return {
-    today: t,
-    last3Days: o,
-    last7Days: m,
-    last30Days: x,
-    thisMonth: D
+    today: i,
+    last3Days: f,
+    last7Days: p,
+    last30Days: y,
+    thisMonth: j
   };
-}, r = N(
-  ({ label: s, description: t, value: a, className: o, ...c }, m) => {
-    const l = `date-range-${a}`;
+}, d = L(
+  ({ label: l, description: t, value: s, className: i, ...x }, f) => {
+    const o = `date-range-${s}`;
     return /* @__PURE__ */ e.jsxs("div", { className: "flex items-start gap-4 w-full py-1", children: [
       /* @__PURE__ */ e.jsxs(
         "label",
         {
-          ref: m,
-          className: j(
-            "flex-1 flex items-start gap-3 cursor-pointer",
-            o
+          ref: f,
+          className: O(
+            "flex-1 flex items-start gap-3 cursor-pointer rtl:flex-row-reverse",
+            i
           ),
-          ...c,
+          ...x,
           children: [
-            /* @__PURE__ */ e.jsx(R, { 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 }) })
+            /* @__PURE__ */ e.jsx(k, { id: o, value: s, 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: l }) })
           ]
         }
       ),
@@ -85,82 +60,97 @@ const n = {
     ] });
   }
 );
-r.displayName = "FilterDateRangeOption";
-const P = N(
+d.displayName = "FilterDateRangeOption";
+const K = L(
   ({
-    showCustomFields: s = !1,
+    showCustomFields: l = !1,
     onCustomFieldsChange: t,
-    startDate: a,
-    endDate: o,
-    startTime: c = "",
-    endTime: m = "",
-    onStartDateChange: l,
-    onEndDateChange: x,
-    onStartTimeChange: D,
-    onEndTimeChange: A,
-    mode: S = "range",
-    singleDayLabel: T = "Select date",
-    showAllTime: v = !1,
-    className: _,
-    value: M,
-    onValueChange: L,
-    announcement: f,
-    ...w
-  }, O) => {
-    const p = b(() => J(), []), Y = (d) => {
-      L?.(d), t?.(d === n.CUSTOM);
-    }, $ = (d) => {
-      if (d) {
-        const u = new Date(d);
-        u.setHours(0, 0, 0, 0);
-        const g = new Date(d);
-        g.setHours(23, 59, 59, 999), l?.(u), x?.(g);
+    startDate: s,
+    endDate: i,
+    startTime: x = "",
+    endTime: f = "",
+    onStartDateChange: o,
+    onEndDateChange: p,
+    onStartTimeChange: m,
+    onEndTimeChange: y,
+    mode: j = "range",
+    singleDayLabel: Y,
+    showAllTime: $ = !1,
+    className: H,
+    value: R,
+    onValueChange: C,
+    announcement: h,
+    labels: n,
+    lang: v,
+    translations: T,
+    ...F
+  }, I) => {
+    const a = u(() => {
+      const r = E(v);
+      return T ? { ...r, ...T } : r;
+    }, [v, T]), S = u(() => G(a), [a]), _ = u(() => V(a), [a]), g = u(
+      () => J(S, _),
+      [S, _]
+    ), b = (r) => {
+      C?.(r), t?.(r === c.CUSTOM);
+    }, P = (r) => {
+      if (r) {
+        const N = new Date(r);
+        N.setHours(0, 0, 0, 0);
+        const M = new Date(r);
+        M.setHours(23, 59, 59, 999), o?.(N), p?.(M);
       } else
-        l?.(void 0), x?.(void 0);
+        o?.(void 0), p?.(void 0);
     };
     return /* @__PURE__ */ e.jsxs(
       "div",
       {
-        ref: O,
-        className: j("flex flex-col gap-4 w-full", _),
+        ref: I,
+        className: O("flex flex-col gap-4 w-full", H),
         children: [
-          f && (typeof f == "string" ? /* @__PURE__ */ e.jsx(C, { icon: "Info", description: f }) : f),
+          h && (typeof h == "string" ? /* @__PURE__ */ e.jsx(q, { icon: "Info", description: h }) : h),
           /* @__PURE__ */ e.jsxs(
-            H,
+            U,
             {
-              value: M,
-              onValueChange: Y,
+              value: R,
+              onValueChange: b,
               className: "gap-2",
-              ...w,
+              ...F,
               children: [
-                /* @__PURE__ */ e.jsx(r, { label: "Custom", value: n.CUSTOM }),
-                s && /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-4 pl-7 mb-2", children: [
-                  S === "single" ? /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
-                    h,
+                /* @__PURE__ */ e.jsx(
+                  d,
+                  {
+                    label: n?.custom ?? a.custom,
+                    value: c.CUSTOM
+                  }
+                ),
+                l && /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-4 ps-7 mb-2", children: [
+                  j === "single" ? /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
+                    A,
                     {
-                      date: a,
-                      onChange: $,
-                      placeholder: T,
+                      date: s,
+                      onChange: P,
+                      placeholder: Y ?? a.selectDate,
                       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(
-                      h,
+                      A,
                       {
-                        date: a,
-                        onChange: l,
-                        placeholder: "Start date",
+                        date: s,
+                        onChange: o,
+                        placeholder: n?.startDate ?? a.startDate,
                         className: "h-9",
                         iconPosition: "none"
                       }
                     ) }),
                     /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
-                      h,
+                      A,
                       {
-                        date: o,
-                        onChange: x,
-                        placeholder: "End date",
+                        date: i,
+                        onChange: p,
+                        placeholder: n?.endDate ?? a.endDate,
                         className: "h-9",
                         iconPosition: "none"
                       }
@@ -168,20 +158,20 @@ const P = N(
                   ] }),
                   /* @__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(
-                      y,
+                      w,
                       {
-                        value: c,
-                        onChange: D,
+                        value: x,
+                        onChange: m,
                         mode: "dropdown",
                         use24Hour: !0,
                         width: "100%"
                       }
                     ) }),
                     /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
-                      y,
+                      w,
                       {
-                        value: m,
-                        onChange: A,
+                        value: f,
+                        onChange: y,
                         mode: "dropdown",
                         use24Hour: !0,
                         width: "100%"
@@ -191,46 +181,52 @@ const P = N(
                 ] }),
                 /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2", children: [
                   /* @__PURE__ */ e.jsx(
-                    r,
+                    d,
                     {
-                      label: "Today",
-                      value: n.TODAY,
-                      description: p.today
+                      label: n?.today ?? a.today,
+                      value: c.TODAY,
+                      description: g.today
                     }
                   ),
                   /* @__PURE__ */ e.jsx(
-                    r,
+                    d,
                     {
-                      label: "Last 3 days",
-                      value: n.LAST_3_DAYS,
-                      description: p.last3Days
+                      label: n?.last3Days ?? a.last3Days,
+                      value: c.LAST_3_DAYS,
+                      description: g.last3Days
                     }
                   ),
                   /* @__PURE__ */ e.jsx(
-                    r,
+                    d,
                     {
-                      label: "Last 7 days",
-                      value: n.LAST_7_DAYS,
-                      description: p.last7Days
+                      label: n?.last7Days ?? a.last7Days,
+                      value: c.LAST_7_DAYS,
+                      description: g.last7Days
                     }
                   ),
                   /* @__PURE__ */ e.jsx(
-                    r,
+                    d,
                     {
-                      label: "Last 30 days",
-                      value: n.LAST_30_DAYS,
-                      description: p.last30Days
+                      label: n?.last30Days ?? a.last30Days,
+                      value: c.LAST_30_DAYS,
+                      description: g.last30Days
                     }
                   ),
                   /* @__PURE__ */ e.jsx(
-                    r,
+                    d,
                     {
-                      label: "This month",
-                      value: n.THIS_MONTH,
-                      description: p.thisMonth
+                      label: n?.thisMonth ?? a.thisMonth,
+                      value: c.THIS_MONTH,
+                      description: g.thisMonth
                     }
                   ),
-                  v && /* @__PURE__ */ e.jsx(r, { label: "All time", value: n.ALL_TIME })
+                  $ && /* @__PURE__ */ e.jsx(
+                    d,
+                    {
+                      label: n?.allTime ?? a.allTime,
+                      value: c.ALL_TIME
+                    }
+                  )
                 ] })
               ]
             }
@@ -240,9 +236,9 @@ const P = N(
     );
   }
 );
-P.displayName = "FilterDateRange";
+K.displayName = "FilterDateRange";
 export {
-  P as FilterDateRange,
-  r as FilterDateRangeOption,
-  n as FilterDateRangeValue
+  K as FilterDateRange,
+  d as FilterDateRangeOption,
+  c as FilterDateRangeValue
 };

package/dist/components/atoms/filter/filter-multi-input.d.ts

@@ -1,3 +1,4 @@
+import { FilterLanguage, FilterTranslations } from './filter-translations';
 /**
  * Props for FilterMultiInput component
  */
@@ -49,6 +50,15 @@ export interface FilterMultiInputProps {
      * @default false
      */
     allowDuplicates?: boolean;
+    /**
+     * Language code for translations
+     * @default "en"
+     */
+    lang?: FilterLanguage;
+    /**
+     * Custom translations (overrides lang-based translations)
+     */
+    translations?: FilterTranslations;
 }
 /**
  * Filter section component for entering multiple values via an input field.
@@ -62,6 +72,7 @@ export interface FilterMultiInputProps {
  *   onChange={setSelectedBins}
  *   placeholder="Enter BIN(s) separated by comma"
  *   numericOnly
+ *   lang="es"
  * />
  * ```
  */

package/dist/components/atoms/filter/filter-multi-input.js

@@ -1,50 +1,56 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as x } from "react";
-import { cn as j } from "../../../lib/utils.js";
-import { Separator as b } from "../../../vendor/shadcn/separator.js";
-import { MultiValuesField as h } from "../multi-values-field/multi-values-field.js";
-const v = x(
+import { forwardRef as h, useMemo as N } from "react";
+import { cn as y } from "../../../lib/utils.js";
+import { Separator as g } from "../../../vendor/shadcn/separator.js";
+import { getFilterTranslations as v } from "./filter-translations.js";
+import { MultiValuesField as w } from "../multi-values-field/multi-values-field.js";
+const A = h(
   ({
-    title: t,
-    value: l,
-    onChange: r,
-    placeholder: s = "Type and press Enter...",
-    description: a,
-    error: i,
-    numericOnly: o = !1,
-    maxItems: m,
-    disabled: n = !1,
-    className: f,
-    allowDuplicates: d = !1
-  }, u) => {
-    const c = o ? (p) => /^\d+$/.test(p) ? !0 : "Only numeric values are allowed" : void 0;
-    return /* @__PURE__ */ e.jsxs("div", { ref: u, className: j("flex flex-col h-full", f), children: [
-      /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-between mb-1", children: /* @__PURE__ */ e.jsx("span", { className: "text-sm font-normal text-foreground", children: t }) }),
-      /* @__PURE__ */ e.jsx(b, { className: "w-full mb-6" }),
+    title: a,
+    value: s,
+    onChange: o,
+    placeholder: m,
+    description: n,
+    error: f,
+    numericOnly: d = !1,
+    maxItems: c,
+    disabled: p = !1,
+    className: u,
+    allowDuplicates: x = !1,
+    lang: i,
+    translations: r
+  }, j) => {
+    const l = N(() => {
+      const t = v(i);
+      return r ? { ...t, ...r } : t;
+    }, [i, r]), b = d ? (t) => /^\d+$/.test(t) ? !0 : l.onlyNumericAllowed : void 0;
+    return /* @__PURE__ */ e.jsxs("div", { ref: j, className: y("flex flex-col h-full", u), children: [
+      /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-between mb-1", children: /* @__PURE__ */ e.jsx("span", { className: "text-sm font-normal text-foreground", children: a }) }),
+      /* @__PURE__ */ e.jsx(g, { className: "w-full mb-6" }),
       /* @__PURE__ */ e.jsx(
-        h,
+        w,
         {
-          value: l,
-          onChange: r,
-          placeholder: s,
-          description: a,
-          error: i,
-          disabled: n,
-          maxItems: m,
-          allowDuplicates: d,
-          validate: c,
+          value: s,
+          onChange: o,
+          placeholder: m ?? l.typeAndPressEnter,
+          description: n,
+          error: f,
+          disabled: p,
+          maxItems: c,
+          allowDuplicates: x,
+          validate: b,
           triggerKeys: ["Enter", "Tab", "Comma"],
-          deleteAll: l.length > 0 ? {
-            label: "Clear all",
+          deleteAll: s.length > 0 ? {
+            label: l.clearAll,
             length: 1,
-            onClick: () => r([])
+            onClick: () => o([])
           } : void 0
         }
       )
     ] });
   }
 );
-v.displayName = "FilterMultiInput";
+A.displayName = "FilterMultiInput";
 export {
-  v as FilterMultiInput
+  A as FilterMultiInput
 };