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

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

@@ -1,22 +1,24 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as g, useState as M, useMemo as $ } from "react";
-import { Button as p } from "../../../vendor/shadcn/button.js";
-import { Badge as V } from "../../../vendor/shadcn/badge.js";
-import { Separator as C } from "../../../vendor/shadcn/separator.js";
-import { Checkbox as E } from "../../../vendor/shadcn/checkbox.js";
-import { RadioGroupItem as L, RadioGroup as Q } from "../../../vendor/shadcn/radio-group.js";
-import { Icon as w } from "../icon/icon.js";
-import { cn as j } from "../../../lib/utils.js";
-import { Tooltip as y } from "../tooltip/tooltip.js";
-import { Field as F } from "../field/field.js";
-const S = g(
-  ({ label: s, onRemove: l, className: n, ...t }, c) => /* @__PURE__ */ e.jsxs(
-    V,
+import { forwardRef as p, useMemo as k, useState as Q } from "react";
+import { Button as w } from "../../../vendor/shadcn/button.js";
+import { Badge as I } from "../../../vendor/shadcn/badge.js";
+import { Separator as S } from "../../../vendor/shadcn/separator.js";
+import { Checkbox as D } from "../../../vendor/shadcn/checkbox.js";
+import { RadioGroupItem as U, RadioGroup as X } from "../../../vendor/shadcn/radio-group.js";
+import { Icon as R } from "../icon/icon.js";
+import { cn as v } from "../../../lib/utils.js";
+import { getFilterTranslations as T, formatMoreFilters as q } from "./filter-translations.js";
+import { DEFAULT_FILTER_TRANSLATIONS as de, FILTER_TRANSLATIONS as xe } from "./filter-translations.js";
+import { Tooltip as V } from "../tooltip/tooltip.js";
+import { Field as z } from "../field/field.js";
+const A = p(
+  ({ label: s, onRemove: l, className: n, ...a }, r) => /* @__PURE__ */ e.jsxs(
+    I,
     {
-      ref: c,
+      ref: r,
       variant: "secondary",
-      className: j("h-8 gap-2 px-3 py-2 shadow-xs", n),
-      ...t,
+      className: v("h-8 gap-2 px-3 py-2 shadow-xs", n),
+      ...a,
       children: [
         /* @__PURE__ */ e.jsx("span", { className: "text-xs font-medium leading-none", children: s }),
         l && /* @__PURE__ */ e.jsx(
@@ -25,203 +27,209 @@ const S = g(
             onClick: l,
             className: "inline-flex items-center justify-center",
             "aria-label": `Remove ${s} filter`,
-            children: /* @__PURE__ */ e.jsx(w, { name: "X", className: "size-4" })
+            children: /* @__PURE__ */ e.jsx(R, { name: "X", className: "size-4" })
           }
         )
       ]
     }
   )
 );
-S.displayName = "FilterTag";
-const X = g(
+A.displayName = "FilterTag";
+const H = p(
   ({
     appliedFilters: s = [],
     onRemoveFilter: l,
     onClearAll: n,
-    maxVisibleTags: t = 4,
-    className: c,
-    ...m
-  }, u) => {
-    const d = s.length > 0, b = s.slice(0, t), v = s.length - t;
+    maxVisibleTags: a = 4,
+    className: r,
+    lang: m,
+    translations: c,
+    ...d
+  }, y) => {
+    const f = k(() => {
+      const o = T(m);
+      return c ? { ...o, ...c } : o;
+    }, [m, c]), x = s.length > 0, F = s.slice(0, a), b = s.length - a;
     return /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-4", children: [
       /* @__PURE__ */ e.jsxs(
-        p,
+        w,
         {
-          ref: u,
+          ref: y,
           variant: "outline",
           size: "sm",
-          className: j("h-8 gap-2 px-3 py-2", c),
-          ...m,
+          className: v("h-8 gap-2 px-3 py-2", r),
+          ...d,
           children: [
-            /* @__PURE__ */ e.jsx(w, { name: "FunnelSimple", className: "size-4" }),
-            /* @__PURE__ */ e.jsx("span", { className: "text-xs font-medium leading-none", children: "Add filter" })
+            /* @__PURE__ */ e.jsx(R, { name: "FunnelSimple", className: "size-4" }),
+            /* @__PURE__ */ e.jsx("span", { className: "text-xs font-medium leading-none", children: f.addFilter })
           ]
         }
       ),
-      d && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-        /* @__PURE__ */ e.jsx(C, { orientation: "vertical", className: "h-5" }),
+      x && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        /* @__PURE__ */ e.jsx(S, { orientation: "vertical", className: "h-5" }),
         /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
-          b.map((N) => /* @__PURE__ */ e.jsx(
-            S,
+          F.map((o) => /* @__PURE__ */ e.jsx(
+            A,
             {
-              label: N.label,
-              onRemove: () => l?.(N.id)
+              label: o.label,
+              onRemove: () => l?.(o.id)
             },
-            N.id
+            o.id
           )),
-          v > 0 && /* @__PURE__ */ e.jsx(V, { variant: "default", className: "h-8 px-3 py-2 shadow-xs", children: /* @__PURE__ */ e.jsxs("span", { className: "text-xs font-medium leading-none", children: [
-            "+",
-            v,
-            " more"
-          ] }) }),
+          b > 0 && /* @__PURE__ */ e.jsx(I, { variant: "default", className: "h-8 px-3 py-2 shadow-xs", children: /* @__PURE__ */ e.jsx("span", { className: "text-xs font-medium leading-none", children: q(f, b) }) }),
           n && /* @__PURE__ */ e.jsx(
-            p,
+            w,
             {
               variant: "ghost",
               size: "sm",
               onClick: n,
               className: "h-8 px-3 py-2",
-              children: /* @__PURE__ */ e.jsx("span", { className: "text-xs font-medium leading-none text-primary", children: "Clear filters" })
+              children: /* @__PURE__ */ e.jsx("span", { className: "text-xs font-medium leading-none text-primary", children: f.clearFilters })
             }
           )
         ] })
       ] }),
-      !d && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-        /* @__PURE__ */ e.jsx(C, { orientation: "vertical", className: "h-5" }),
-        /* @__PURE__ */ e.jsx("span", { className: "text-sm font-normal text-muted-foreground", children: "No filters applied" })
+      !x && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        /* @__PURE__ */ e.jsx(S, { orientation: "vertical", className: "h-5" }),
+        /* @__PURE__ */ e.jsx("span", { className: "text-sm font-normal text-muted-foreground", children: f.noFiltersApplied })
       ] })
     ] });
   }
 );
-X.displayName = "FilterButton";
-const q = g(
+H.displayName = "FilterButton";
+const J = p(
   (s, l) => {
     const {
       title: n,
-      items: t,
-      className: c,
+      items: a,
+      className: r,
       searchable: m = !1,
-      searchPlaceholder: u = "Search",
+      searchPlaceholder: c,
       showActions: d = !1,
-      enableSelectAll: b = !0,
-      enableInverse: v = !0,
-      enableNone: N = !0,
-      description: k
-    } = s, x = s.type || "checkbox", R = x === "radio", T = x === "checkbox" || !s.type, [h, P] = M(""), f = $(() => h ? t.filter(
-      (a) => a.label.toLowerCase().includes(h.toLowerCase())
-    ) : t, [t, h]), B = () => {
-      if (x === "checkbox" && "selectedValues" in s) {
-        const a = f.map((r) => r.value), i = h ? [.../* @__PURE__ */ new Set([...s.selectedValues, ...a])] : a;
+      enableSelectAll: y = !0,
+      enableInverse: f = !0,
+      enableNone: x = !0,
+      description: F,
+      lang: b,
+      translations: o
+    } = s, C = k(() => {
+      const t = T(b);
+      return o ? { ...t, ...o } : t;
+    }, [b, o]), g = s.type || "checkbox", E = g === "radio", P = g === "checkbox" || !s.type, [j, B] = Q(""), N = k(() => j ? a.filter(
+      (t) => t.label.toLowerCase().includes(j.toLowerCase())
+    ) : a, [a, j]), G = () => {
+      if (g === "checkbox" && "selectedValues" in s) {
+        const t = N.map((u) => u.value), i = j ? [.../* @__PURE__ */ new Set([...s.selectedValues, ...t])] : t;
         s.onChange(i);
       }
-    }, G = () => {
-      if (x === "checkbox" && "selectedValues" in s)
-        if (h) {
-          const a = new Set(f.map((o) => o.value)), i = s.selectedValues.filter(
-            (o) => !a.has(o)
-          ), r = f.filter((o) => !s.selectedValues.includes(o.value)).map((o) => o.value);
-          s.onChange([...i, ...r]);
+    }, M = () => {
+      if (g === "checkbox" && "selectedValues" in s)
+        if (j) {
+          const t = new Set(N.map((h) => h.value)), i = s.selectedValues.filter(
+            (h) => !t.has(h)
+          ), u = N.filter((h) => !s.selectedValues.includes(h.value)).map((h) => h.value);
+          s.onChange([...i, ...u]);
         } else {
-          const a = t.filter((i) => !s.selectedValues.includes(i.value)).map((i) => i.value);
-          s.onChange(a);
+          const t = a.filter((i) => !s.selectedValues.includes(i.value)).map((i) => i.value);
+          s.onChange(t);
         }
-    }, O = () => {
-      if (x === "checkbox" && "selectedValues" in s)
-        if (h) {
-          const a = new Set(f.map((r) => r.value)), i = s.selectedValues.filter(
-            (r) => !a.has(r)
+    }, _ = () => {
+      if (g === "checkbox" && "selectedValues" in s)
+        if (j) {
+          const t = new Set(N.map((u) => u.value)), i = s.selectedValues.filter(
+            (u) => !t.has(u)
           );
           s.onChange(i);
         } else
           s.onChange([]);
-      else x === "radio" && "selectedValue" in s && s.onChange("");
-    }, A = (a, i) => {
-      if (x === "checkbox" && "selectedValues" in s) {
-        const r = i ? [...s.selectedValues, a] : s.selectedValues.filter((o) => o !== a);
-        s.onChange(r);
+      else g === "radio" && "selectedValue" in s && s.onChange("");
+    }, $ = (t, i) => {
+      if (g === "checkbox" && "selectedValues" in s) {
+        const u = i ? [...s.selectedValues, t] : s.selectedValues.filter((h) => h !== t);
+        s.onChange(u);
       }
     };
-    return /* @__PURE__ */ e.jsxs("div", { ref: l, className: j("flex flex-col h-full", c), children: [
+    return /* @__PURE__ */ e.jsxs("div", { ref: l, className: v("flex flex-col h-full", r), children: [
       m && /* @__PURE__ */ e.jsx(
-        F,
+        z,
         {
-          placeholder: u,
-          value: h,
-          onChange: (a) => P(a.target.value),
+          placeholder: c ?? C.search,
+          value: j,
+          onChange: (t) => B(t.target.value),
           startIcon: "MagnifyingGlass",
           className: "mb-4"
         }
       ),
-      k && /* @__PURE__ */ e.jsx("p", { className: "text-xs font-normal text-muted-foreground mb-4", children: k }),
+      F && /* @__PURE__ */ e.jsx("p", { className: "text-xs font-normal text-muted-foreground mb-4", children: F }),
       /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between mb-1", children: [
         /* @__PURE__ */ e.jsx("span", { className: "text-sm font-normal text-foreground", children: n }),
-        d && x === "checkbox" && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-4", children: [
-          b && /* @__PURE__ */ e.jsx(
-            p,
+        d && g === "checkbox" && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-4", children: [
+          y && /* @__PURE__ */ e.jsx(
+            w,
             {
               variant: "link",
               size: "sm",
-              onClick: B,
+              onClick: G,
               className: "h-auto p-0 text-xs font-medium text-primary hover:text-primary/80",
-              children: "Select all"
+              children: C.selectAll
             }
           ),
-          v && /* @__PURE__ */ e.jsx(
-            p,
+          f && /* @__PURE__ */ e.jsx(
+            w,
             {
               variant: "link",
               size: "sm",
-              onClick: G,
+              onClick: M,
               className: "h-auto p-0 text-xs font-medium text-primary hover:text-primary/80",
-              children: "Inverse"
+              children: C.inverse
             }
           ),
-          N && /* @__PURE__ */ e.jsx(
-            p,
+          x && /* @__PURE__ */ e.jsx(
+            w,
             {
               variant: "link",
               size: "sm",
-              onClick: O,
+              onClick: _,
               className: "h-auto p-0 text-xs font-medium text-primary hover:text-primary/80",
-              children: "None"
+              children: C.none
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ e.jsx(C, { className: "w-full mb-6" }),
-      R && "selectedValue" in s ? /* @__PURE__ */ e.jsx(
-        Q,
+      /* @__PURE__ */ e.jsx(S, { className: "w-full mb-6" }),
+      E && "selectedValue" in s ? /* @__PURE__ */ e.jsx(
+        X,
         {
           value: s.selectedValue,
           onValueChange: s.onChange,
           className: "grid grid-cols-2 gap-x-4 gap-y-5 overflow-y-auto",
-          children: f.map((a) => /* @__PURE__ */ e.jsx(
-            I,
+          children: N.map((t) => /* @__PURE__ */ e.jsx(
+            O,
             {
-              label: a.label,
-              value: a.value,
-              description: a.description
+              label: t.label,
+              value: t.value,
+              description: t.description
             },
-            a.value
+            t.value
           ))
         }
-      ) : T && "selectedValues" in s ? /* @__PURE__ */ e.jsx("div", { className: "grid grid-cols-2 gap-x-4 gap-y-5 overflow-y-auto", children: f.map((a) => /* @__PURE__ */ e.jsx(
-        z,
+      ) : P && "selectedValues" in s ? /* @__PURE__ */ e.jsx("div", { className: "grid grid-cols-2 gap-x-4 gap-y-5 overflow-y-auto", children: N.map((t) => /* @__PURE__ */ e.jsx(
+        L,
         {
-          label: a.label,
-          description: a.description,
-          icon: a.icon,
-          checked: s.selectedValues.includes(a.value),
-          onCheckedChange: (i) => A(a.value, i)
+          label: t.label,
+          description: t.description,
+          icon: t.icon,
+          checked: s.selectedValues.includes(t.value),
+          onCheckedChange: (i) => $(t.value, i)
         },
-        a.value
+        t.value
       )) }) : null
     ] });
   }
 );
-q.displayName = "FilterSection";
-const z = g(({ label: s, checked: l, onCheckedChange: n, description: t, className: c, icon: m }, u) => /* @__PURE__ */ e.jsxs("label", { className: j("flex items-start gap-2 cursor-pointer", c), children: [
-  /* @__PURE__ */ e.jsx(E, { ref: u, checked: l, onCheckedChange: n }),
+J.displayName = "FilterSection";
+const L = p(({ label: s, checked: l, onCheckedChange: n, description: a, className: r, icon: m }, c) => /* @__PURE__ */ e.jsxs("label", { className: v("flex items-start gap-2 cursor-pointer rtl:flex-row-reverse", r), children: [
+  /* @__PURE__ */ e.jsx(D, { ref: c, checked: l, onCheckedChange: n }),
   m && /* @__PURE__ */ e.jsx(
     "img",
     {
@@ -234,74 +242,86 @@ const z = g(({ label: s, checked: l, onCheckedChange: n, description: t, classNa
     }
   ),
   /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-0.5 min-w-0 flex-1", children: [
-    /* @__PURE__ */ e.jsx(y, { content: s, triggerProps: { className: "w-fit" }, children: /* @__PURE__ */ e.jsx("p", { className: "text-sm font-medium leading-4 truncate max-w-[165px]", children: s }) }),
-    t && /* @__PURE__ */ e.jsx(y, { content: t, triggerProps: { className: "w-fit mt-2" }, children: /* @__PURE__ */ e.jsx("p", { className: "text-sm font-normal leading-5 text-muted-foreground truncate max-w-[165px]", children: t }) })
+    /* @__PURE__ */ e.jsx(V, { content: s, triggerProps: { className: "w-fit" }, children: /* @__PURE__ */ e.jsx("p", { className: "text-sm font-medium leading-4 truncate max-w-[165px]", children: s }) }),
+    a && /* @__PURE__ */ e.jsx(V, { content: a, triggerProps: { className: "w-fit mt-2" }, children: /* @__PURE__ */ e.jsx("p", { className: "text-sm font-normal leading-5 text-muted-foreground truncate max-w-[165px]", children: a }) })
   ] })
 ] }));
-z.displayName = "FilterCheckboxOption";
-const I = g(
-  ({ label: s, value: l, description: n, className: t }, c) => /* @__PURE__ */ e.jsxs("div", { className: j("flex items-start gap-3", t), children: [
-    /* @__PURE__ */ e.jsx(L, { ref: c, value: l, id: `radio-${l}` }),
+L.displayName = "FilterCheckboxOption";
+const O = p(
+  ({ label: s, value: l, description: n, className: a }, r) => /* @__PURE__ */ e.jsxs("div", { className: v("flex items-start gap-3 rtl:flex-row-reverse", a), children: [
+    /* @__PURE__ */ e.jsx(U, { ref: r, value: l, id: `radio-${l}` }),
     /* @__PURE__ */ e.jsxs(
       "label",
       {
         htmlFor: `radio-${l}`,
         className: "flex flex-col gap-0.5 cursor-pointer flex-1 truncate",
         children: [
-          /* @__PURE__ */ e.jsx(y, { content: s, triggerProps: { className: "w-fit" }, children: /* @__PURE__ */ e.jsx("p", { className: "text-sm font-medium leading-4 truncate max-w-[165px]", children: s }) }),
-          n && /* @__PURE__ */ e.jsx(y, { content: n, triggerProps: { className: "w-fit mt-2" }, children: /* @__PURE__ */ e.jsx("p", { className: "w-fittext-sm font-normal leading-4 text-muted-foreground truncate max-w-[165px]", children: n }) })
+          /* @__PURE__ */ e.jsx(V, { content: s, triggerProps: { className: "w-fit" }, children: /* @__PURE__ */ e.jsx("p", { className: "text-sm font-medium leading-4 truncate max-w-[165px]", children: s }) }),
+          n && /* @__PURE__ */ e.jsx(V, { content: n, triggerProps: { className: "w-fit mt-2" }, children: /* @__PURE__ */ e.jsx("p", { className: "w-fittext-sm font-normal leading-4 text-muted-foreground truncate max-w-[165px]", children: n }) })
         ]
       }
     )
   ] })
 );
-I.displayName = "FilterRadioOption";
-const D = g(
+O.displayName = "FilterRadioOption";
+const K = p(
   ({
     children: s,
     showSearch: l = !1,
-    searchPlaceholder: n = "Search",
-    searchValue: t,
-    onSearchChange: c,
-    className: m
-  }, u) => /* @__PURE__ */ e.jsxs(
-    "div",
-    {
-      ref: u,
-      className: j(
-        "flex flex-col gap-6 bg-input rounded-md p-6 min-w-[448px]",
-        m
-      ),
-      children: [
-        l && /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ e.jsx(
-            w,
-            {
-              name: "MagnifyingGlass",
-              className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground"
-            }
-          ),
-          /* @__PURE__ */ e.jsx(
-            F,
-            {
-              placeholder: n,
-              value: t,
-              onChange: (d) => c?.(d.target.value),
-              className: "pl-9"
-            }
-          )
-        ] }) }),
-        /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-6", children: s })
-      ]
-    }
-  )
+    searchPlaceholder: n,
+    searchValue: a,
+    onSearchChange: r,
+    className: m,
+    lang: c,
+    translations: d
+  }, y) => {
+    const f = k(() => {
+      const x = T(c);
+      return d ? { ...x, ...d } : x;
+    }, [c, d]);
+    return /* @__PURE__ */ e.jsxs(
+      "div",
+      {
+        ref: y,
+        className: v(
+          "flex flex-col gap-6 bg-input rounded-md p-6 min-w-[448px]",
+          m
+        ),
+        children: [
+          l && /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ e.jsx(
+              R,
+              {
+                name: "MagnifyingGlass",
+                className: "absolute start-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground"
+              }
+            ),
+            /* @__PURE__ */ e.jsx(
+              z,
+              {
+                placeholder: n ?? f.search,
+                value: a,
+                onChange: (x) => r?.(x.target.value),
+                className: "ps-9"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-6", children: s })
+        ]
+      }
+    );
+  }
 );
-D.displayName = "FilterContent";
+K.displayName = "FilterContent";
 export {
-  X as FilterButton,
-  z as FilterCheckboxOption,
-  D as FilterContent,
-  I as FilterRadioOption,
-  q as FilterSection,
-  S as FilterTag
+  de as DEFAULT_FILTER_TRANSLATIONS,
+  xe as FILTER_TRANSLATIONS,
+  H as FilterButton,
+  L as FilterCheckboxOption,
+  K as FilterContent,
+  O as FilterRadioOption,
+  J as FilterSection,
+  A as FilterTag,
+  q as formatMoreFilters,
+  T as getFilterTranslations
 };

package/dist/components/atoms/filter/index.d.ts

@@ -1,3 +1,3 @@
-export { FilterButton, FilterTag, FilterSection, FilterCheckboxOption, FilterRadioOption, FilterContent, type FilterButtonProps, type FilterTagProps, type FilterSectionProps, type FilterCheckboxOptionProps, type FilterRadioOptionProps, type FilterContentProps, } from './filter';
-export { FilterDateRange, FilterDateRangeOption, FilterDateRangeValue, type FilterDateRangeProps, type FilterDateRangeOptionProps, } from './filter-date-range';
+export { FilterButton, FilterTag, FilterSection, FilterCheckboxOption, FilterRadioOption, FilterContent, type FilterButtonProps, type FilterTagProps, type FilterSectionProps, type FilterCheckboxOptionProps, type FilterRadioOptionProps, type FilterContentProps, type FilterLanguage, type FilterTranslations, FILTER_TRANSLATIONS, DEFAULT_FILTER_TRANSLATIONS, getFilterTranslations, } from './filter';
+export { FilterDateRange, FilterDateRangeOption, FilterDateRangeValue, type FilterDateRangeProps, type FilterDateRangeOptionProps, type FilterDateRangeLabels, } from './filter-date-range';
 export { FilterMultiInput, type FilterMultiInputProps, } from './filter-multi-input';

package/dist/components/atoms/filter-dropdown/filter-dropdown.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode, ComponentProps } from 'react';
 import { IconName } from '../icon';
-import { FilterSectionItem } from '../filter/filter';
+import { FilterSectionItem, FilterLanguage, FilterTranslations } from '../filter/filter';
+import { FilterDateRangeLabels } from '../filter/filter-date-range';
 /**
  * Props for the FilterMenuItem component
  */
@@ -170,6 +171,11 @@ interface FilterConfig {
      * Callback fired when end time changes
      */
     onEndTimeChange?: (time: string) => void;
+    /**
+     * Labels for date range filter options - enables i18n/translation support.
+     * If not provided, defaults to English strings.
+     */
+    dateLabels?: FilterDateRangeLabels;
     /**
      * Whether the filter items are searchable
      */
@@ -274,7 +280,7 @@ interface FilterDropdownProps {
     onOpenChange?: (isOpen: boolean) => void;
     /**
      * Text to display in the trigger button
-     * @default "Add filter"
+     * @deprecated Use `lang` or `translations` prop instead
      */
     buttonText?: string;
     /**
@@ -297,6 +303,15 @@ interface FilterDropdownProps {
      * @default false
      */
     applyOnClose?: boolean;
+    /**
+     * Language code for translations
+     * @default "en"
+     */
+    lang?: FilterLanguage;
+    /**
+     * Custom translations (overrides lang-based translations)
+     */
+    translations?: FilterTranslations;
 }
 declare const FilterDropdown: import('react').ForwardRefExoticComponent<FilterDropdownProps & import('react').RefAttributes<HTMLDivElement>>;
 export { FilterDropdown, FilterMenu, FilterMenuItem, type FilterDropdownProps, type FilterConfig, type FilterMenuProps, type FilterMenuItemProps, type FilterDeferredContext, };