@yuno-payments/dashboard-design-system 2.3.4 → 2.3.5

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

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

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

@@ -30,12 +30,6 @@ 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.