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

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

@@ -1,16 +1,17 @@
 import { j as s } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as N, useState as E, useRef as p, useCallback as T, useEffect as q } from "react";
-import { Button as j } from "../../../vendor/shadcn/button.js";
-import { Separator as G } from "../../../vendor/shadcn/separator.js";
-import { Icon as w } from "../icon/icon.js";
-import { FilterSection as J } from "../filter/filter.js";
-import { FilterDateRangeValue as k, FilterDateRange as Ee } from "../filter/filter-date-range.js";
+import { forwardRef as S, useMemo as Ne, useState as N, useRef as F, useCallback as p, useEffect as Q } from "react";
+import { Button as T } from "../../../vendor/shadcn/button.js";
+import { Separator as Z } from "../../../vendor/shadcn/separator.js";
+import { Icon as k } from "../icon/icon.js";
+import { FilterSection as O } from "../filter/filter.js";
+import { FilterDateRangeValue as I, FilterDateRange as Fe } from "../filter/filter-date-range.js";
 import { cn as h } from "../../../lib/utils.js";
-const Q = N(
-  ({ icon: d, label: C, isActive: u = !1, showChevron: x = !1, className: b, ...c }, v) => /* @__PURE__ */ s.jsxs(
+import { getFilterTranslations as Ie, formatMoreFilters as Se } from "../filter/filter-translations.js";
+const ee = S(
+  ({ icon: d, label: D, isActive: u = !1, showChevron: x = !1, className: b, ...c }, w) => /* @__PURE__ */ s.jsxs(
     "button",
     {
-      ref: v,
+      ref: w,
       className: h(
         "flex items-center gap-2 h-8 px-2 rounded-md w-full transition-colors shrink-0 hover:bg-secondary",
         b
@@ -18,7 +19,7 @@ const Q = N(
       ...c,
       children: [
         d && /* @__PURE__ */ s.jsx(
-          w,
+          k,
           {
             name: d,
             className: h(
@@ -34,11 +35,11 @@ const Q = N(
               "flex-1 text-sm font-normal text-left truncate",
               u ? "text-primary" : "text-foreground"
             ),
-            children: C
+            children: D
           }
         ),
         (u || x) && /* @__PURE__ */ s.jsx(
-          w,
+          k,
           {
             name: "CaretRight",
             className: h(
@@ -51,9 +52,9 @@ const Q = N(
     }
   )
 );
-Q.displayName = "FilterMenuItem";
-const Z = N(
-  ({ items: d, activeItemId: C, onItemClick: u, className: x }, b) => /* @__PURE__ */ s.jsx(
+ee.displayName = "FilterMenuItem";
+const te = S(
+  ({ items: d, activeItemId: D, onItemClick: u, className: x }, b) => /* @__PURE__ */ s.jsx(
     "div",
     {
       ref: b,
@@ -62,11 +63,11 @@ const Z = N(
         x
       ),
       children: d.map((c) => /* @__PURE__ */ s.jsx(
-        Q,
+        ee,
         {
           icon: c.icon,
           label: c.label,
-          isActive: C === c.id,
+          isActive: D === c.id,
           showChevron: c.showChevron,
           onClick: () => u?.(c.id)
         },
@@ -75,125 +76,130 @@ const Z = N(
     }
   )
 );
-Z.displayName = "FilterMenu";
-const pe = N(
+te.displayName = "FilterMenu";
+const ye = S(
   ({
     filters: d,
-    buttonText: C = "Add filter",
+    buttonText: D,
     appliedFilters: u = [],
     onRemoveFilter: x,
     onClearAllFilters: b,
     onOpenChange: c,
-    maxVisibleTags: v = 4,
-    className: O,
-    disabled: ee = !1,
-    applyOnClose: o = !1
-  }, D) => {
-    const [m, I] = E(!1), [f, te] = E({}), S = p({}), F = p(d), l = T(
+    maxVisibleTags: w = 4,
+    className: ne,
+    disabled: ae = !1,
+    applyOnClose: i = !1,
+    lang: V,
+    translations: g
+  }, v) => {
+    const E = Ne(() => {
+      const e = Ie(V);
+      return g ? { ...e, ...g } : e;
+    }, [V, g]), [m, y] = N(!1), [f, re] = N({}), B = F({}), M = F(d), l = p(
       (e) => {
-        te((n) => {
+        re((n) => {
           const r = typeof e == "function" ? e(n) : e;
-          return S.current = r, r;
+          return B.current = r, r;
         });
       },
       []
     );
-    q(() => {
-      F.current = d;
+    Q(() => {
+      M.current = d;
     }, [d]);
-    const y = T(() => {
-      if (!o) return;
-      const e = S.current, n = F.current;
+    const R = p(() => {
+      if (!i) return;
+      const e = B.current, n = M.current;
       Object.entries(e).forEach(([r, a]) => {
-        const i = n.find((g) => g.id === r);
-        if (i)
+        const o = n.find((C) => C.id === r);
+        if (o)
           switch (a.type) {
             case "checkbox":
-              a.checkboxValues !== void 0 && i.onChange?.(a.checkboxValues);
+              a.checkboxValues !== void 0 && o.onChange?.(a.checkboxValues);
               break;
             case "radio":
-              a.radioValue !== void 0 && i.onValueChange?.(a.radioValue);
+              a.radioValue !== void 0 && o.onValueChange?.(a.radioValue);
               break;
             case "date":
-              a.dateValue !== void 0 && i.onDateValueChange?.(a.dateValue), a.dateInit !== void 0 && i.onDateInitChange?.(a.dateInit), a.dateEnd !== void 0 && i.onDateEndChange?.(a.dateEnd), a.startTime !== void 0 && i.onStartTimeChange?.(a.startTime), a.endTime !== void 0 && i.onEndTimeChange?.(a.endTime);
+              a.dateValue !== void 0 && o.onDateValueChange?.(a.dateValue), a.dateInit !== void 0 && o.onDateInitChange?.(a.dateInit), a.dateEnd !== void 0 && o.onDateEndChange?.(a.dateEnd), a.startTime !== void 0 && o.onStartTimeChange?.(a.startTime), a.endTime !== void 0 && o.onEndTimeChange?.(a.endTime);
               break;
             case "custom":
-              a.customValue !== void 0 && i.onCustomChange?.(a.customValue);
+              a.customValue !== void 0 && o.onCustomChange?.(a.customValue);
               break;
           }
       }), l({});
-    }, [o, l]), V = T(
+    }, [i, l]), j = p(
       (e) => {
-        if (!e && m && o) {
-          c?.(e), y(), I(e);
+        if (!e && m && i) {
+          c?.(e), R(), y(e);
           return;
         }
-        e && !m && o && l({}), I(e), c?.(e);
+        e && !m && i && l({}), y(e), c?.(e);
       },
       [
         c,
         m,
-        o,
-        y,
+        i,
+        R,
         l
       ]
-    ), [B, M] = E(
+    ), [A, H] = N(
       d.length > 0 && d[0]?.id || ""
-    ), R = p(null), ne = T(
+    ), z = F(null), se = p(
       (e) => {
-        R.current = e, typeof D == "function" ? D(e) : D && (D.current = e);
+        z.current = e, typeof v == "function" ? v(e) : v && (v.current = e);
       },
-      [D]
+      [v]
     );
-    q(() => {
+    Q(() => {
       if (!m) return;
       const e = (a) => {
-        const i = a.target;
-        R.current?.contains(i) || i.closest?.(
+        const o = a.target;
+        z.current?.contains(o) || o.closest?.(
           "[data-radix-popper-content-wrapper], [data-radix-portal]"
-        ) || i.closest?.(
+        ) || o.closest?.(
           ".rdp, .rdp-root, [data-calendar]"
-        ) || V(!1);
+        ) || j(!1);
       }, n = (a) => {
-        a.key === "Escape" && V(!1);
+        a.key === "Escape" && j(!1);
       }, r = setTimeout(() => {
         document.addEventListener("mousedown", e), document.addEventListener("keydown", n);
       }, 0);
       return () => {
         clearTimeout(r), document.removeEventListener("mousedown", e), document.removeEventListener("keydown", n);
       };
-    }, [m, V]);
-    const ae = u.length > 0, re = u.slice(0, v), A = u.length - v, H = (e) => {
+    }, [m, j]);
+    const ie = u.length > 0, oe = u.slice(0, w), L = u.length - w, P = (e) => {
       if (d.find((a) => a.id === e)) return e;
       const r = e.split("-");
       if (r.length > 1) {
         const a = r[0];
-        if (d.find((g) => g.id === a)) return a;
+        if (d.find((C) => C.id === a)) return a;
       }
       return e;
-    }, z = (e) => {
-      const n = H(e);
+    }, U = (e) => {
+      const n = P(e);
       return d.find((a) => a.id === n)?.clearable !== !1;
-    }, se = (e) => {
-      const n = H(e);
-      M(n), V(!0);
-    }, oe = u.some(
-      (e) => z(e.id)
-    ), ie = d.map((e) => ({
+    }, de = (e) => {
+      const n = P(e);
+      H(n), j(!0);
+    }, ce = u.some(
+      (e) => U(e.id)
+    ), le = d.map((e) => ({
       id: e.id,
       icon: e.icon,
       label: e.label
-    })), t = d.find((e) => e.id === B), de = (e, n) => o ? f[e]?.checkboxValues ?? n : n, ce = (e, n) => o ? f[e]?.radioValue ?? n : n, le = (e, n) => o ? f[e]?.dateValue ?? n : n, ue = (e, n) => o ? f[e]?.dateInit ?? n : n, fe = (e, n) => o ? f[e]?.dateEnd ?? n : n, me = (e, n) => o ? f[e]?.startTime ?? n : n, he = (e, n) => o ? f[e]?.endTime ?? n : n, xe = (e, n, r) => (a) => {
-      r !== void 0 && r > 0 && a.length < r || (o ? l((i) => ({
-        ...i,
+    })), t = d.find((e) => e.id === A), ue = (e, n) => i ? f[e]?.checkboxValues ?? n : n, fe = (e, n) => i ? f[e]?.radioValue ?? n : n, me = (e, n) => i ? f[e]?.dateValue ?? n : n, he = (e, n) => i ? f[e]?.dateInit ?? n : n, xe = (e, n) => i ? f[e]?.dateEnd ?? n : n, be = (e, n) => i ? f[e]?.startTime ?? n : n, ge = (e, n) => i ? f[e]?.endTime ?? n : n, Ce = (e, n, r) => (a) => {
+      r !== void 0 && r > 0 && a.length < r || (i ? l((o) => ({
+        ...o,
         [e]: {
-          ...i[e],
+          ...o[e],
           type: "checkbox",
           checkboxValues: a
         }
       })) : n?.(a));
-    }, be = (e, n) => (r) => {
-      o ? l((a) => ({
+    }, De = (e, n) => (r) => {
+      i ? l((a) => ({
         ...a,
         [e]: {
           ...a[e],
@@ -201,8 +207,8 @@ const pe = N(
           radioValue: r
         }
       })) : n?.(r);
-    }, ge = (e, n) => (r) => {
-      o ? l((a) => ({
+    }, Ve = (e, n) => (r) => {
+      i ? l((a) => ({
         ...a,
         [e]: {
           ...a[e],
@@ -210,8 +216,8 @@ const pe = N(
           dateValue: r
         }
       })) : n?.(r);
-    }, Ce = (e, n) => (r) => {
-      o ? l((a) => ({
+    }, ve = (e, n) => (r) => {
+      i ? l((a) => ({
         ...a,
         [e]: {
           ...a[e],
@@ -219,8 +225,8 @@ const pe = N(
           dateInit: r
         }
       })) : n?.(r);
-    }, De = (e, n) => (r) => {
-      o ? l((a) => ({
+    }, je = (e, n) => (r) => {
+      i ? l((a) => ({
         ...a,
         [e]: {
           ...a[e],
@@ -228,8 +234,8 @@ const pe = N(
           dateEnd: r
         }
       })) : n?.(r);
-    }, Ve = (e, n) => (r) => {
-      o ? l((a) => ({
+    }, we = (e, n) => (r) => {
+      i ? l((a) => ({
         ...a,
         [e]: {
           ...a[e],
@@ -237,8 +243,8 @@ const pe = N(
           startTime: r
         }
       })) : n?.(r);
-    }, ve = (e, n) => (r) => {
-      o ? l((a) => ({
+    }, Ee = (e, n) => (r) => {
+      i ? l((a) => ({
         ...a,
         [e]: {
           ...a[e],
@@ -246,21 +252,21 @@ const pe = N(
           endTime: r
         }
       })) : n?.(r);
-    }, Te = () => {
+    }, pe = () => {
       if (!t) return null;
       switch (t.type) {
         case "checkbox": {
-          const e = de(
+          const e = ue(
             t.id,
             t.selectedValues || []
           ), n = t.description && (t.descriptionMinSelection === void 0 || e.length >= t.descriptionMinSelection);
           return /* @__PURE__ */ s.jsx(
-            J,
+            O,
             {
               title: t.label,
               items: t.items || [],
               selectedValues: e,
-              onChange: xe(
+              onChange: Ce(
                 t.id,
                 t.onChange,
                 t.minSelection
@@ -271,22 +277,24 @@ const pe = N(
               enableSelectAll: t.enableSelectAll,
               enableInverse: t.enableInverse,
               enableNone: t.enableNone,
-              description: n ? t.description : void 0
+              description: n ? t.description : void 0,
+              lang: V,
+              translations: g
             }
           );
         }
         case "radio":
           return /* @__PURE__ */ s.jsx(
-            J,
+            O,
             {
               type: "radio",
               title: t.label,
               items: t.items || [],
-              selectedValue: ce(
+              selectedValue: fe(
                 t.id,
                 t.selectedValue || ""
               ),
-              onChange: be(
+              onChange: De(
                 t.id,
                 t.onValueChange
               ),
@@ -296,71 +304,76 @@ const pe = N(
               enableSelectAll: t.enableSelectAll,
               enableInverse: t.enableInverse,
               enableNone: t.enableNone,
-              description: t.description
+              description: t.description,
+              lang: V,
+              translations: g
             }
           );
         case "date": {
-          const e = le(
+          const e = me(
             t.id,
-            t.dateValue || k.LAST_7_DAYS
-          ), n = ue(
+            t.dateValue || I.LAST_7_DAYS
+          ), n = he(
             t.id,
             t.dateInit
-          ), r = fe(
+          ), r = xe(
             t.id,
             t.dateEnd
-          ), a = me(
+          ), a = be(
             t.id,
             t.startTime || ""
-          ), i = he(
+          ), o = ge(
             t.id,
             t.endTime || ""
-          ), g = o && f[t.id]?.dateInit !== void 0, L = o && f[t.id]?.dateEnd !== void 0, je = ge(
+          ), C = i && f[t.id]?.dateInit !== void 0, _ = i && f[t.id]?.dateEnd !== void 0, Te = Ve(
             t.id,
             t.onDateValueChange
-          ), P = Ce(
+          ), K = ve(
             t.id,
             t.onDateInitChange
-          ), U = De(
+          ), W = je(
             t.id,
             t.onDateEndChange
-          ), _ = Ve(
+          ), X = we(
             t.id,
             t.onStartTimeChange
-          ), K = ve(
+          ), Y = Ee(
             t.id,
             t.onEndTimeChange
-          ), we = (W) => {
-            if (je(W), W === k.CUSTOM && !g && !L) {
-              const X = /* @__PURE__ */ new Date(), Y = new Date(X);
-              Y.setHours(23, 59, 59, 999);
-              const $ = new Date(X);
-              $.setHours(0, 0, 0, 0), P($), U(Y), _("00:00:00"), K("23:59:59");
+          ), ke = ($) => {
+            if (Te($), $ === I.CUSTOM && !C && !_) {
+              const q = /* @__PURE__ */ new Date(), G = new Date(q);
+              G.setHours(23, 59, 59, 999);
+              const J = new Date(q);
+              J.setHours(0, 0, 0, 0), K(J), W(G), X("00:00:00"), Y("23:59:59");
             }
           };
           return /* @__PURE__ */ s.jsx(
-            Ee,
+            Fe,
             {
               value: e,
-              onValueChange: we,
-              showCustomFields: e === k.CUSTOM,
+              onValueChange: ke,
+              showCustomFields: e === I.CUSTOM,
               startDate: n,
               endDate: r,
               startTime: a,
-              endTime: i,
+              endTime: o,
               mode: t.dateMode || "range",
               singleDayLabel: t.singleDayLabel,
               showAllTime: t.showAllTime,
-              onStartDateChange: P,
-              onEndDateChange: U,
-              onStartTimeChange: _,
-              onEndTimeChange: K,
-              announcement: t.description
+              onStartDateChange: K,
+              onEndDateChange: W,
+              onStartTimeChange: X,
+              onEndTimeChange: Y,
+              announcement: t.description,
+              labels: t.dateLabels,
+              lang: V,
+              translations: g
             }
           );
         }
         case "custom": {
-          const e = o ? {
+          const e = i ? {
             bufferedValue: f[t.id]?.customValue,
             onDeferredChange: (n) => {
               l((r) => ({
@@ -383,34 +396,34 @@ const pe = N(
     return /* @__PURE__ */ s.jsxs(
       "div",
       {
-        ref: ne,
-        className: h("flex flex-col gap-1 relative", O),
+        ref: se,
+        className: h("flex flex-col gap-1 relative", ne),
         children: [
           /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-4", children: [
             /* @__PURE__ */ s.jsxs(
-              j,
+              T,
               {
                 variant: "outline",
                 size: "sm",
                 className: "gap-2",
-                onClick: () => V(!m),
-                disabled: ee,
+                onClick: () => j(!m),
+                disabled: ae,
                 children: [
-                  /* @__PURE__ */ s.jsx(w, { name: "FunnelSimple", className: "size-4" }),
-                  C
+                  /* @__PURE__ */ s.jsx(k, { name: "FunnelSimple", className: "size-4" }),
+                  D ?? E.addFilter
                 ]
               }
             ),
-            ae ? /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-              /* @__PURE__ */ s.jsx(G, { orientation: "vertical", className: "h-5" }),
+            ie ? /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+              /* @__PURE__ */ s.jsx(Z, { orientation: "vertical", className: "h-5" }),
               /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-2", children: [
-                re.map((e) => {
-                  const n = z(e.id);
+                oe.map((e) => {
+                  const n = U(e.id);
                   return /* @__PURE__ */ s.jsxs(
-                    j,
+                    T,
                     {
                       variant: "secondary",
-                      onClick: () => se(e.id),
+                      onClick: () => de(e.id),
                       className: "display-flex items-center gap-2",
                       size: "sm",
                       children: [
@@ -423,7 +436,7 @@ const pe = N(
                             },
                             className: "inline-flex items-center justify-center",
                             "aria-label": `Remove ${e.label} filter`,
-                            children: /* @__PURE__ */ s.jsx(w, { name: "X", className: "size-4" })
+                            children: /* @__PURE__ */ s.jsx(k, { name: "X", className: "size-4" })
                           }
                         )
                       ]
@@ -431,25 +444,21 @@ const pe = N(
                     e.id
                   );
                 }),
-                A > 0 && /* @__PURE__ */ s.jsxs(j, { children: [
-                  "+",
-                  A,
-                  " more"
-                ] }),
-                b && oe && /* @__PURE__ */ s.jsx(
-                  j,
+                L > 0 && /* @__PURE__ */ s.jsx(T, { children: Se(E, L) }),
+                b && ce && /* @__PURE__ */ s.jsx(
+                  T,
                   {
                     variant: "ghost",
                     size: "sm",
                     className: "h-8 px-3 py-2",
                     onClick: b,
-                    children: /* @__PURE__ */ s.jsx("span", { className: "text-xs font-medium leading-none text-primary", children: "Clear filters" })
+                    children: /* @__PURE__ */ s.jsx("span", { className: "text-xs font-medium leading-none text-primary", children: E.clearFilters })
                   }
                 )
               ] })
             ] }) : /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-              /* @__PURE__ */ s.jsx(G, { orientation: "vertical", className: "h-5" }),
-              /* @__PURE__ */ s.jsx("span", { className: "text-sm font-normal text-muted-foreground", children: "No filters applied" })
+              /* @__PURE__ */ s.jsx(Z, { orientation: "vertical", className: "h-5" }),
+              /* @__PURE__ */ s.jsx("span", { className: "text-sm font-normal text-muted-foreground", children: E.noFiltersApplied })
             ] })
           ] }),
           m && /* @__PURE__ */ s.jsxs(
@@ -464,14 +473,14 @@ const pe = N(
               ),
               children: [
                 /* @__PURE__ */ s.jsx(
-                  Z,
+                  te,
                   {
-                    items: ie,
-                    activeItemId: B,
-                    onItemClick: M
+                    items: le,
+                    activeItemId: A,
+                    onItemClick: H
                   }
                 ),
-                /* @__PURE__ */ s.jsx("div", { className: "flex flex-col gap-4 p-6 bg-popover w-[448px] h-full rounded-md overflow-y-auto", children: Te() })
+                /* @__PURE__ */ s.jsx("div", { className: "flex flex-col gap-4 p-6 bg-popover w-[448px] h-full rounded-md overflow-y-auto", children: pe() })
               ]
             }
           )
@@ -480,9 +489,9 @@ const pe = N(
     );
   }
 );
-pe.displayName = "FilterDropdown";
+ye.displayName = "FilterDropdown";
 export {
-  pe as FilterDropdown,
-  Z as FilterMenu,
-  Q as FilterMenuItem
+  ye as FilterDropdown,
+  te as FilterMenu,
+  ee as FilterMenuItem
 };

package/dist/components/atoms/icon/directional-icons.d.ts

@@ -0,0 +1,12 @@
+/**
+ * List of icon names that represent directional concepts and should be
+ * automatically mirrored in RTL (right-to-left) layouts.
+ *
+ * These icons point left/right or imply horizontal direction, so they need
+ * to be flipped when the UI direction changes from LTR to RTL.
+ *
+ * @example
+ * - ArrowLeft in LTR → points left (back)
+ * - ArrowLeft in RTL → should point right (still means "back")
+ */
+export declare const DIRECTIONAL_ICONS: Set<string>;

package/dist/components/atoms/icon/directional-icons.js

@@ -0,0 +1,38 @@
+const r = /* @__PURE__ */ new Set([
+  // Arrows - horizontal direction
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowCircleLeft",
+  "ArrowCircleRight",
+  "ArrowCircleUpLeft",
+  "ArrowBendUpLeft",
+  "ArrowBendUpRight",
+  "ArrowElbowDownRight",
+  "ArrowUpRight",
+  "ArrowSquareIn",
+  // Carets - horizontal direction
+  "CaretLeft",
+  "CaretRight",
+  "CaretDoubleLeft",
+  "CaretDoubleRight",
+  "CaretCircleRight",
+  // Actions with implied direction
+  "SignOut",
+  "Export",
+  "PhoneOutgoing",
+  // Toggle switches (thumb position implies direction)
+  "ToggleLeft",
+  "ToggleRight",
+  // Trend indicators (arrow direction)
+  "TrendUp",
+  "TrendDown",
+  // Sort indicators
+  "SortAscending",
+  "SortDescending",
+  // Play control (points right in LTR)
+  "Play",
+  "PlayCircle"
+]);
+export {
+  r as DIRECTIONAL_ICONS
+};

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

@@ -30,6 +30,12 @@ interface IconProps extends Omit<PhosphorIconProps, "size">, VariantProps<typeof
      * Additional props to pass to the Tooltip component
      */
     tooltipProps?: Partial<TooltipProps>;
+    /**
+     * Auto-mirror icon in RTL layouts.
+     * Defaults to `true` for directional icons (arrows, chevrons, carets, etc.)
+     * Set to `false` to disable auto-mirroring for a specific icon.
+     */
+    autoMirrorRtl?: boolean;
 }
 /**
  * Icon component using Phosphor Icons with size variants and optional tooltip.