@yuno-payments/dashboard-design-system 2.0.4 → 2.0.6

package/dist/components/atoms/icon/icon.js

@@ -1,10 +1,11 @@
-import { j as s } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as p } from "react";
-import { cva as u } from "../../../node_modules/class-variance-authority/dist/index.js";
-import { cn as x } from "../../../lib/utils.js";
-import { IconList as z } from "./icon-list.js";
-import { Tooltip as d } from "../tooltip/tooltip.js";
-const j = u("inline-flex items-center justify-center shrink-0", {
+import { j as t } from "../../../_virtual/jsx-runtime.js";
+import { forwardRef as d } from "react";
+import { cva as z } from "../../../node_modules/class-variance-authority/dist/index.js";
+import { cn as I } from "../../../lib/utils.js";
+import { IconList as h } from "./icon-list.js";
+import { Tooltip as j } from "../tooltip/tooltip.js";
+import { DIRECTIONAL_ICONS as C } from "./directional-icons.js";
+const N = z("inline-flex items-center justify-center shrink-0", {
   variants: {
     size: {
       xs: "size-3",
@@ -17,34 +18,39 @@ const j = u("inline-flex items-center justify-center shrink-0", {
   defaultVariants: {
     size: "md"
   }
-}), g = p(
+}), g = d(
   ({
     name: r,
-    weight: t = "light",
+    weight: n = "light",
     size: e,
     className: c,
     color: l,
-    tooltip: i,
+    tooltip: o,
     tooltipProps: m,
-    ...a
-  }, f) => {
+    autoMirrorRtl: a,
+    ...f
+  }, u) => {
     if (!r)
       return null;
-    const o = z?.[r];
-    if (!o)
+    const i = h?.[r];
+    if (!i)
       return console.error("Missing icon", r), null;
-    const n = /* @__PURE__ */ s.jsx(
-      o,
+    const p = C.has(r), x = a ?? p, s = /* @__PURE__ */ t.jsx(
+      i,
       {
-        ref: f,
+        ref: u,
         "aria-label": r,
-        className: x(j({ size: e }), c),
+        className: I(
+          N({ size: e }),
+          x && "rtl:scale-x-[-1]",
+          c
+        ),
         color: l || "currentColor",
-        weight: t,
-        ...a
+        weight: n,
+        ...f
       }
     );
-    return i ? /* @__PURE__ */ s.jsx(d, { content: i, ...m, children: n }) : n;
+    return o ? /* @__PURE__ */ t.jsx(j, { content: o, ...m, children: s }) : s;
   }
 );
 g.displayName = "Icon";

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

@@ -1,2 +1,3 @@
 export { Icon, type IconProps } from './icon';
 export { IconList, type IconName } from './icon-list';
+export { DIRECTIONAL_ICONS } from './directional-icons';

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

@@ -10,7 +10,7 @@ export { CurrencyField, type CurrencyFieldProps } from './currency-field';
 export { DatePicker, type DatePickerProps } from './date-picker';
 export { DateRangePicker, type DateRangePickerProps, } from './date-range-picker';
 export { TimePicker, type TimePickerProps } from './time-picker';
-export { FilterButton, FilterTag, FilterSection, FilterCheckboxOption, FilterRadioOption, FilterContent, FilterDateRange, FilterDateRangeOption, FilterDateRangeValue, FilterMultiInput, type FilterButtonProps, type FilterTagProps, type FilterSectionProps, type FilterCheckboxOptionProps, type FilterRadioOptionProps, type FilterContentProps, type FilterDateRangeProps, type FilterDateRangeOptionProps, type FilterMultiInputProps, } from './filter';
+export { FilterButton, FilterTag, FilterSection, FilterCheckboxOption, FilterRadioOption, FilterContent, FilterDateRange, FilterDateRangeOption, FilterDateRangeValue, FilterMultiInput, type FilterButtonProps, type FilterTagProps, type FilterSectionProps, type FilterCheckboxOptionProps, type FilterRadioOptionProps, type FilterContentProps, type FilterDateRangeProps, type FilterDateRangeOptionProps, type FilterDateRangeLabels, type FilterMultiInputProps, } from './filter';
 export { FilterDropdown, FilterMenu, FilterMenuItem, type FilterDropdownProps, type FilterConfig, type FilterMenuProps, type FilterMenuItemProps, type FilterDeferredContext, } from './filter-dropdown';
 export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, type DropdownMenuProps, type DropdownMenuPortalProps, type DropdownMenuTriggerProps, type DropdownMenuContentProps, type DropdownMenuGroupProps, type DropdownMenuLabelProps, type DropdownMenuItemProps, type DropdownMenuCheckboxItemProps, type DropdownMenuRadioGroupProps, type DropdownMenuRadioItemProps, type DropdownMenuSeparatorProps, type DropdownMenuShortcutProps, type DropdownMenuSubProps, type DropdownMenuSubTriggerProps, type DropdownMenuSubContentProps, } from './dropdown-menu';
 export { DotsMenu, type DotsMenuProps, type DotsMenuAction, type DotsMenuOptions, } from './dots-menu';

package/dist/components/atoms/radio-group/radio-group-option.js

@@ -1,7 +1,7 @@
 import { j as r } from "../../../_virtual/jsx-runtime.js";
 import { RadioGroupItem as d } from "../../../vendor/shadcn/radio-group.js";
-import { cn as l } from "../../../lib/utils.js";
-import { Label as a } from "../label/label.js";
+import { cn as a } from "../../../lib/utils.js";
+import { Label as l } from "../label/label.js";
 const o = ({
   option: e,
   radioId: s,
@@ -22,23 +22,23 @@ const o = ({
       ),
       t ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
         /* @__PURE__ */ r.jsx(
-          a,
+          l,
           {
             htmlFor: s,
-            className: l(
+            className: a(
               "cursor-pointer",
               e.disabled && "text-muted-foreground"
             ),
             children: e.label
           }
         ),
-        e.description && /* @__PURE__ */ r.jsx("p", { className: "text-sm text-muted-foreground ml-auto", children: e.description })
+        e.description && /* @__PURE__ */ r.jsx("p", { className: "text-sm text-muted-foreground ms-auto", children: e.description })
       ] }) : /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col gap-1.5 flex-1", children: [
         /* @__PURE__ */ r.jsx(
-          a,
+          l,
           {
             htmlFor: s,
-            className: l(
+            className: a(
               "cursor-pointer",
               e.disabled && "text-muted-foreground"
             ),

package/dist/components/atoms/select/select.js

@@ -72,14 +72,14 @@ const $ = G.forwardRef(
               j.map((l, C) => /* @__PURE__ */ e.jsxs(V, { children: [
                 l.label && /* @__PURE__ */ e.jsx(E, { children: l.label }),
                 l.options.map((s) => /* @__PURE__ */ e.jsxs(f, { value: s.value, children: [
-                  s.icon && /* @__PURE__ */ e.jsx("span", { className: "mr-2 inline-flex items-center", children: s.icon }),
+                  s.icon && /* @__PURE__ */ e.jsx("span", { className: "me-2 inline-flex items-center", children: s.icon }),
                   s.label
                 ] }, s.value))
               ] }, C))
             ) : w ? (
               // Render flat options
               h.map((l) => /* @__PURE__ */ e.jsx(f, { value: l.value, children: /* @__PURE__ */ e.jsxs("span", { className: "flex items-center", children: [
-                l.icon && /* @__PURE__ */ e.jsx("span", { className: "mr-2 inline-flex items-center", children: l.icon }),
+                l.icon && /* @__PURE__ */ e.jsx("span", { className: "me-2 inline-flex items-center", children: l.icon }),
                 l.label
               ] }) }, l.value))
             ) : null })

package/dist/components/organisms/data-table/components/column-header/data-table-column-header-menu.d.ts

@@ -1,8 +1,10 @@
 import { Column } from '@tanstack/react-table';
+import { DataTableTranslations } from '../../data-table.types';
 interface DataTableColumnHeaderMenuProps<TData, TValue> {
     column: Column<TData, TValue>;
     isLastVisibleColumn: boolean;
     onManageColumnsClick: () => void;
+    translations: Required<DataTableTranslations>;
 }
-export declare function DataTableColumnHeaderMenu<TData, TValue>({ column, isLastVisibleColumn, onManageColumnsClick, }: DataTableColumnHeaderMenuProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableColumnHeaderMenu<TData, TValue>({ column, isLastVisibleColumn, onManageColumnsClick, translations, }: DataTableColumnHeaderMenuProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/organisms/data-table/components/column-header/data-table-column-header-menu.js

@@ -1,75 +1,76 @@
 import { j as e } from "../../../../../_virtual/jsx-runtime.js";
 import { Icon as n } from "../../../../atoms/icon/icon.js";
-import { DropdownMenuContent as g, DropdownMenuItem as i, DropdownMenuSeparator as o } from "../../../../atoms/dropdown-menu/dropdown-menu.js";
-function p({
+import { DropdownMenuContent as c, DropdownMenuItem as r, DropdownMenuSeparator as o } from "../../../../atoms/dropdown-menu/dropdown-menu.js";
+function C({
   column: s,
-  isLastVisibleColumn: r,
-  onManageColumnsClick: a
+  isLastVisibleColumn: d,
+  onManageColumnsClick: x,
+  translations: i
 }) {
-  const l = s.getCanSort(), d = s.getCanPin(), x = s.getCanHide(), t = s.getIsPinned(), c = s.getIsSorted();
-  return /* @__PURE__ */ e.jsxs(g, { align: "start", children: [
+  const l = s.getCanSort(), a = s.getCanPin(), g = s.getCanHide(), t = s.getIsPinned(), m = s.getIsSorted();
+  return /* @__PURE__ */ e.jsxs(c, { align: "start", children: [
     l && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-      /* @__PURE__ */ e.jsxs(i, { onClick: () => s.toggleSorting(!1), children: [
+      /* @__PURE__ */ e.jsxs(r, { onClick: () => s.toggleSorting(!1), children: [
         /* @__PURE__ */ e.jsx(n, { name: "ArrowUp", size: "sm" }),
-        "Ascending"
+        i.ascending
       ] }),
-      /* @__PURE__ */ e.jsxs(i, { onClick: () => s.toggleSorting(!0), children: [
+      /* @__PURE__ */ e.jsxs(r, { onClick: () => s.toggleSorting(!0), children: [
         /* @__PURE__ */ e.jsx(n, { name: "ArrowDown", size: "sm" }),
-        "Descending"
+        i.descending
       ] }),
-      c && /* @__PURE__ */ e.jsxs(i, { onClick: () => s.clearSorting(), children: [
+      m && /* @__PURE__ */ e.jsxs(r, { onClick: () => s.clearSorting(), children: [
         /* @__PURE__ */ e.jsx(n, { name: "X", size: "sm" }),
-        "Clear sorting"
+        i.clearSorting
       ] }),
       /* @__PURE__ */ e.jsx(o, {})
     ] }),
-    d && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    a && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
       /* @__PURE__ */ e.jsxs(
-        i,
+        r,
         {
           onClick: () => s.pin("left"),
           disabled: t === "left",
           children: [
             /* @__PURE__ */ e.jsx(n, { name: "PushPinSimple", size: "sm" }),
-            "Pin to the left"
+            i.pinToLeft
           ]
         }
       ),
       /* @__PURE__ */ e.jsxs(
-        i,
+        r,
         {
           onClick: () => s.pin("right"),
           disabled: t === "right",
           children: [
             /* @__PURE__ */ e.jsx(n, { name: "PushPinSimple", size: "sm" }),
-            "Pin to the right"
+            i.pinToRight
           ]
         }
       ),
-      t && /* @__PURE__ */ e.jsxs(i, { onClick: () => s.pin(!1), children: [
+      t && /* @__PURE__ */ e.jsxs(r, { onClick: () => s.pin(!1), children: [
         /* @__PURE__ */ e.jsx(n, { name: "PushPinSimpleSlash", size: "sm" }),
-        "Unpin"
+        i.unpin
       ] }),
       /* @__PURE__ */ e.jsx(o, {})
     ] }),
-    x && /* @__PURE__ */ e.jsxs(
-      i,
+    g && /* @__PURE__ */ e.jsxs(
+      r,
       {
         onClick: () => s.toggleVisibility(!1),
-        disabled: r,
+        disabled: d,
         children: [
           /* @__PURE__ */ e.jsx(n, { name: "EyeSlash", size: "sm" }),
-          "Hide",
-          r && /* @__PURE__ */ e.jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: "(Last column)" })
+          i.hide,
+          d && /* @__PURE__ */ e.jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: i.lastColumn })
         ]
       }
     ),
-    /* @__PURE__ */ e.jsxs(i, { onClick: a, children: [
+    /* @__PURE__ */ e.jsxs(r, { onClick: x, children: [
       /* @__PURE__ */ e.jsx(n, { name: "Columns", size: "sm" }),
-      "Manage columns"
+      i.manageColumns
     ] })
   ] });
 }
 export {
-  p as DataTableColumnHeaderMenu
+  C as DataTableColumnHeaderMenu
 };

package/dist/components/organisms/data-table/components/column-header/data-table-column-header.js

@@ -1,37 +1,38 @@
 import { j as e } from "../../../../../_virtual/jsx-runtime.js";
-import { Icon as b } from "../../../../atoms/icon/icon.js";
-import { cn as m } from "../../../../../lib/utils.js";
-import { useColumnHeader as D } from "../../hooks/use-column-header.js";
-import { DataTableColumnHeaderMenu as O } from "./data-table-column-header-menu.js";
+import { Icon as h } from "../../../../atoms/icon/icon.js";
+import { cn as u } from "../../../../../lib/utils.js";
+import { useColumnHeader as O } from "../../hooks/use-column-header.js";
+import { DataTableColumnHeaderMenu as b } from "./data-table-column-header-menu.js";
 import { DataTableManageColumnsDialog as v } from "../dialogs/data-table-manage-columns-dialog.js";
-import { DataTableColumnHeaderContent as H } from "./data-table-column-header-content.js";
+import { DataTableColumnHeaderContent as A } from "./data-table-column-header-content.js";
+import { DEFAULT_DATA_TABLE_TRANSLATIONS as H } from "../../data-table.types.js";
 import { DropdownMenu as I } from "../../../../atoms/dropdown-menu/dropdown-menu.js";
-function z({
+function w({
   column: o,
-  table: l,
-  title: s,
-  className: a,
+  table: s,
+  title: a,
+  className: r,
   info: n
 }) {
   const {
-    isHovered: u,
-    setIsHovered: r,
-    isMenuOpen: t,
-    setIsMenuOpen: p,
-    isManageColumnsOpen: d,
+    isHovered: p,
+    setIsHovered: t,
+    isMenuOpen: i,
+    setIsMenuOpen: d,
+    isManageColumnsOpen: c,
     setIsManageColumnsOpen: C,
-    isPinned: c,
-    canPin: x,
-    canSort: i,
+    isPinned: x,
+    canPin: f,
+    canSort: m,
     isSorted: g,
-    toggleableColumns: f,
-    visibleColumnsCount: j,
-    isLastVisibleColumn: M,
-    handleManageColumnsClick: h
-  } = D(o, l);
-  return !i && !x ? /* @__PURE__ */ e.jsxs("div", { className: m("flex items-center gap-2", a), children: [
+    toggleableColumns: j,
+    visibleColumnsCount: M,
+    isLastVisibleColumn: D,
+    handleManageColumnsClick: T
+  } = O(o, s), l = s.options.meta?.translations ?? H;
+  return !m && !f ? /* @__PURE__ */ e.jsxs("div", { className: u("flex items-center gap-2", r), children: [
     n && /* @__PURE__ */ e.jsx(
-      b,
+      h,
       {
         name: "Info",
         size: "sm",
@@ -39,43 +40,45 @@ function z({
         tooltip: n
       }
     ),
-    /* @__PURE__ */ e.jsx("span", { children: s })
+    /* @__PURE__ */ e.jsx("span", { children: a })
   ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx("div", { className: m("flex items-center gap-2", a), children: /* @__PURE__ */ e.jsxs(I, { open: t, onOpenChange: p, children: [
+    /* @__PURE__ */ e.jsx("div", { className: u("flex items-center gap-2", r), children: /* @__PURE__ */ e.jsxs(I, { open: i, onOpenChange: d, children: [
       /* @__PURE__ */ e.jsx(
-        H,
+        A,
         {
-          title: s,
+          title: a,
           info: n,
-          isPinned: c,
-          canSort: i,
+          isPinned: x,
+          canSort: m,
           sortDirection: g,
-          isHovered: u,
-          isMenuOpen: t,
-          onMouseEnter: () => r(!0),
-          onMouseLeave: () => r(!1)
+          isHovered: p,
+          isMenuOpen: i,
+          onMouseEnter: () => t(!0),
+          onMouseLeave: () => t(!1)
         }
       ),
       /* @__PURE__ */ e.jsx(
-        O,
+        b,
         {
           column: o,
-          isLastVisibleColumn: M,
-          onManageColumnsClick: h
+          isLastVisibleColumn: D,
+          onManageColumnsClick: T,
+          translations: l
         }
       )
     ] }) }),
     /* @__PURE__ */ e.jsx(
       v,
       {
-        isOpen: d,
+        isOpen: c,
         onOpenChange: C,
-        toggleableColumns: f,
-        visibleColumnsCount: j
+        toggleableColumns: j,
+        visibleColumnsCount: M,
+        translations: l
       }
     )
   ] });
 }
 export {
-  z as DataTableColumnHeader
+  w as DataTableColumnHeader
 };

package/dist/components/organisms/data-table/components/dialogs/data-table-manage-columns-dialog.d.ts

@@ -1,9 +1,11 @@
 import { Column } from '@tanstack/react-table';
+import { DataTableTranslations } from '../../data-table.types';
 interface DataTableManageColumnsDialogProps<TData> {
     isOpen: boolean;
     onOpenChange: (open: boolean) => void;
     toggleableColumns: Column<TData, unknown>[];
     visibleColumnsCount: number;
+    translations: Required<DataTableTranslations>;
 }
-export declare function DataTableManageColumnsDialog<TData>({ isOpen, onOpenChange, toggleableColumns, visibleColumnsCount, }: DataTableManageColumnsDialogProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableManageColumnsDialog<TData>({ isOpen, onOpenChange, toggleableColumns, visibleColumnsCount, translations, }: DataTableManageColumnsDialogProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/organisms/data-table/components/dialogs/data-table-manage-columns-dialog.js

@@ -1,68 +1,69 @@
-import { j as s } from "../../../../../_virtual/jsx-runtime.js";
-import { useState as x } from "react";
-import { getColumnDisplayName as c } from "../../utils/data-table-utils.js";
-import { Dialog as y } from "../../../dialog/dialog.js";
-import { SearchField as N } from "../../../../atoms/search-field/search-field.js";
-import { Switch as V } from "../../../../atoms/switch/switch.js";
+import { j as l } from "../../../../../_virtual/jsx-runtime.js";
+import { useState as y } from "react";
+import { getColumnDisplayName as d } from "../../utils/data-table-utils.js";
+import { Dialog as C } from "../../../dialog/dialog.js";
+import { SearchField as V } from "../../../../atoms/search-field/search-field.js";
+import { Switch as j } from "../../../../atoms/switch/switch.js";
 function D({
-  isOpen: d,
-  onOpenChange: m,
-  toggleableColumns: l,
-  visibleColumnsCount: t
+  isOpen: m,
+  onOpenChange: h,
+  toggleableColumns: t,
+  visibleColumnsCount: a,
+  translations: i
 }) {
-  const [a, n] = x(""), h = () => {
-    n(""), m(!1);
-  }, o = l.filter((e) => c(e).toLowerCase().includes(a.toLowerCase())), u = () => {
-    l.forEach((e) => e.toggleVisibility(!0));
-  }, p = () => {
-    const e = l.filter(
-      (i) => i.getIsVisible()
+  const [o, r] = y(""), u = () => {
+    r(""), h(!1);
+  }, n = t.filter((e) => d(e).toLowerCase().includes(o.toLowerCase())), p = () => {
+    t.forEach((e) => e.toggleVisibility(!0));
+  }, f = () => {
+    const e = t.filter(
+      (s) => s.getIsVisible()
     );
-    e.length <= 1 || e.slice(1).forEach((i) => i.toggleVisibility(!1));
-  }, f = l.every(
+    e.length <= 1 || e.slice(1).forEach((s) => s.toggleVisibility(!1));
+  }, b = t.every(
     (e) => e.getIsVisible()
-  ), b = t <= 1;
-  return /* @__PURE__ */ s.jsx(
-    y,
+  ), g = a <= 1;
+  return /* @__PURE__ */ l.jsx(
+    C,
     {
-      open: d,
-      closeIcon: h,
-      title: "Manage columns",
+      open: m,
+      closeIcon: u,
+      title: i.manageColumns,
       widthContainer: 400,
       buttons: [
         {
-          children: "Hide all",
+          children: i.hideAll,
           variant: "link",
-          onClick: p,
-          disabled: b
+          onClick: f,
+          disabled: g
         },
         {
-          children: "Show all",
+          children: i.showAll,
           variant: "link",
-          onClick: u,
-          disabled: f
+          onClick: p,
+          disabled: b
         }
       ],
-      children: /* @__PURE__ */ s.jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ s.jsx(
-          N,
+      children: /* @__PURE__ */ l.jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ l.jsx(
+          V,
           {
-            placeholder: "Search columns...",
-            value: a,
-            onSearch: n,
+            placeholder: i.searchColumns,
+            value: o,
+            onSearch: r,
             className: "mb-6"
           }
         ),
-        /* @__PURE__ */ s.jsx("div", { className: "space-y-4 max-h-[300px] overflow-y-auto", children: o.length === 0 ? /* @__PURE__ */ s.jsx("p", { className: "text-sm text-muted-foreground text-center py-4", children: "No columns found" }) : o.map((e) => {
-          const i = c(e), r = t === 1 && e.getIsVisible();
-          return /* @__PURE__ */ s.jsx(
-            V,
+        /* @__PURE__ */ l.jsx("div", { className: "space-y-4 max-h-[300px] overflow-y-auto", children: n.length === 0 ? /* @__PURE__ */ l.jsx("p", { className: "text-sm text-muted-foreground text-center py-4", children: i.noColumnsFound }) : n.map((e) => {
+          const s = d(e), c = a === 1 && e.getIsVisible();
+          return /* @__PURE__ */ l.jsx(
+            j,
             {
               id: `column-${e.id}`,
               checked: e.getIsVisible(),
-              disabled: r,
-              label: `${i}${r ? " (Last column)" : ""}`,
-              onChange: (g) => e.toggleVisibility(g.target.checked)
+              disabled: c,
+              label: `${s}${c ? ` ${i.lastColumn}` : ""}`,
+              onChange: (x) => e.toggleVisibility(x.target.checked)
             },
             e.id
           );

package/dist/components/organisms/data-table/data-table.d.ts

@@ -1,5 +1,5 @@
 import { ColumnResizeMode } from '@tanstack/react-table';
-import { DataTableActionsConfig, DataTableColumnDef } from './data-table.types';
+import { DataTableActionsConfig, DataTableColumnDef, DataTableTranslations, DataTableLanguage } from './data-table.types';
 import { EmptyProps } from '../../molecules';
 /**
  * Props for the DataTable component
@@ -117,6 +117,31 @@ export interface DataTableProps<TData, TValue> {
      * @default false
      */
     enableColumnDragDrop?: boolean;
+    /**
+     * Language code for translations.
+     * When provided, uses built-in translations for the specified language.
+     * @default "en"
+     */
+    lang?: DataTableLanguage;
+    /**
+     * Translation strings for the column menu and dialogs.
+     * All fields are optional with English defaults.
+     * Overrides lang-based translations if both are provided.
+     *
+     * @example
+     * ```tsx
+     * <DataTable
+     *   lang="es"
+     *   translations={{
+     *     ascending: t('table.ascending'),
+     *     descending: t('table.descending'),
+     *     clearSorting: t('table.clearSorting'),
+     *     // ...
+     *   }}
+     * />
+     * ```
+     */
+    translations?: DataTableTranslations;
 }
 /**
  * Advanced data table component built on TanStack Table.
@@ -134,4 +159,4 @@ export interface DataTableProps<TData, TValue> {
  * />
  * ```
  */
-export declare function DataTable<TData, TValue>({ columns, data, isLoading, empty, checkboxSelection, rowSelection: externalRowSelection, onRowSelectionChange, enableSorting, manualSorting, sorting: externalSorting, onSortingChange: externalOnSortingChange, enableColumnFilters, enableColumnResizing, columnResizeMode, enableColumnPinning, onRowClick, actions, height, rowHeight, className, persistKey, initialSettings, onUpdate, enableColumnDragDrop, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<TData, TValue>({ columns, data, isLoading, empty, checkboxSelection, rowSelection: externalRowSelection, onRowSelectionChange, enableSorting, manualSorting, sorting: externalSorting, onSortingChange: externalOnSortingChange, enableColumnFilters, enableColumnResizing, columnResizeMode, enableColumnPinning, onRowClick, actions, height, rowHeight, className, persistKey, initialSettings, onUpdate, enableColumnDragDrop, lang, translations, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;