@arqel-dev/ui 0.14.0 → 0.15.1

package/dist/{chunk-PZEVKMZX.js → chunk-S5UNPCMQ.js}

@@ -1,7 +1,8 @@
 import { resolveLucideIcon } from './chunk-RMPOR2YZ.js';
-import { Button } from './chunk-FHRQ7PWE.js';
+import { Button } from './chunk-H23VX3RR.js';
 import { cn } from './chunk-B7ULUJVO.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { useArqelTranslations, useArqelLocale } from '@arqel-dev/react/utils';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import { useRef, useMemo, useCallback } from 'react';
 
@@ -94,46 +95,93 @@ function BadgeCell({ column, value }) {
   );
 }
 function BooleanCell({ column, value }) {
+  const t = useArqelTranslations();
   const truthy = Boolean(value);
-  return /* @__PURE__ */ jsx("span", { role: "img", "aria-label": truthy ? "true" : "false", children: truthy ? column.props.trueIcon ?? "\u2713" : column.props.falseIcon ?? "\u2014" });
+  const ariaLabel = truthy ? t("table.boolean.true_label", "true") : t("table.boolean.false_label", "false");
+  return /* @__PURE__ */ jsx("span", { role: "img", "aria-label": ariaLabel, children: truthy ? column.props.trueIcon ?? "\u2713" : column.props.falseIcon ?? "\u2014" });
 }
 function DateCell({ column, value }) {
+  const locale = useArqelLocale();
   if (!value) return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u2014" });
   const raw = String(value);
   const date = new Date(raw);
   if (Number.isNaN(date.getTime())) return /* @__PURE__ */ jsx("span", { children: raw });
+  const timeZone = column.props.timezone || void 0;
   if (column.props.mode === "since") {
-    return /* @__PURE__ */ jsx("time", { dateTime: date.toISOString(), children: formatRelative(date) });
+    return /* @__PURE__ */ jsx("time", { dateTime: date.toISOString(), children: formatRelative(date, locale) });
   }
   if (column.props.mode === "datetime") {
-    return /* @__PURE__ */ jsx("time", { dateTime: date.toISOString(), children: date.toLocaleString() });
+    return /* @__PURE__ */ jsx("time", { dateTime: date.toISOString(), children: formatDate(date, locale, "datetime", timeZone) });
   }
-  return /* @__PURE__ */ jsx("time", { dateTime: date.toISOString(), children: date.toLocaleDateString() });
+  return /* @__PURE__ */ jsx("time", { dateTime: date.toISOString(), children: formatDate(date, locale, "date", timeZone) });
 }
-function formatRelative(date) {
+function formatDate(date, locale, mode, timeZone) {
+  const options = mode === "datetime" ? { dateStyle: "medium", timeStyle: "short" } : { dateStyle: "medium" };
+  if (timeZone !== void 0) options.timeZone = timeZone;
+  try {
+    return new Intl.DateTimeFormat(locale, options).format(date);
+  } catch {
+    if (timeZone !== void 0) {
+      const { timeZone: _drop, ...rest } = options;
+      return new Intl.DateTimeFormat(locale, rest).format(date);
+    }
+    return mode === "datetime" ? date.toISOString() : date.toISOString().slice(0, 10);
+  }
+}
+function formatRelative(date, locale) {
   const seconds = Math.round((Date.now() - date.getTime()) / 1e3);
-  if (seconds < 60) return `${seconds}s ago`;
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+  const absSeconds = Math.abs(seconds);
+  if (absSeconds < 60) return rtf.format(-seconds, "second");
   const minutes = Math.round(seconds / 60);
-  if (minutes < 60) return `${minutes}m ago`;
+  if (Math.abs(minutes) < 60) return rtf.format(-minutes, "minute");
   const hours = Math.round(minutes / 60);
-  if (hours < 24) return `${hours}h ago`;
+  if (Math.abs(hours) < 24) return rtf.format(-hours, "hour");
   const days = Math.round(hours / 24);
-  return `${days}d ago`;
+  return rtf.format(-days, "day");
 }
 function NumberCell({ column, value }) {
+  const locale = useArqelLocale();
   if (value === null || value === void 0) return /* @__PURE__ */ jsx("span", { children: "\u2014" });
   const num = typeof value === "number" ? value : Number(value);
   if (Number.isNaN(num)) return /* @__PURE__ */ jsx("span", { children: asString(value) });
-  const formatted = num.toFixed(column.props.decimals ?? 0);
-  const [whole, dec] = formatted.split(".");
-  const safeWhole = whole ?? "0";
+  if (column.props.currency) {
+    try {
+      const formatted = new Intl.NumberFormat(locale, {
+        style: "currency",
+        currency: column.props.currency,
+        ...column.props.decimals !== void 0 ? {
+          minimumFractionDigits: column.props.decimals,
+          maximumFractionDigits: column.props.decimals
+        } : {}
+      }).format(num);
+      return /* @__PURE__ */ jsxs("span", { children: [
+        column.props.prefix ?? "",
+        formatted,
+        column.props.suffix ?? ""
+      ] });
+    } catch {
+    }
+  }
+  const decimals = column.props.decimals ?? 0;
   const ts = column.props.thousandsSeparator;
-  const finalWhole = ts ? safeWhole.replace(/\B(?=(\d{3})+(?!\d))/g, ts) : safeWhole;
-  const ds = column.props.decimalSeparator ?? ".";
+  const ds = column.props.decimalSeparator;
+  let body;
+  if (ts === void 0 && ds === void 0) {
+    body = new Intl.NumberFormat(locale, {
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals
+    }).format(num);
+  } else {
+    const formatted = num.toFixed(decimals);
+    const [whole, dec] = formatted.split(".");
+    const safeWhole = whole ?? "0";
+    const finalWhole = ts ? safeWhole.replace(/\B(?=(\d{3})+(?!\d))/g, ts) : safeWhole;
+    body = dec ? `${finalWhole}${ds ?? "."}${dec}` : finalWhole;
+  }
   return /* @__PURE__ */ jsxs("span", { children: [
     column.props.prefix ?? "",
-    finalWhole,
-    dec ? `${ds}${dec}` : "",
+    body,
     column.props.suffix ?? ""
   ] });
 }
@@ -181,6 +229,7 @@ function DataTable({
   emptyState,
   className
 }) {
+  const t = useArqelTranslations();
   const lastClickedIndexRef = useRef(null);
   const visibleColumns = useMemo(() => columns.filter((col) => !col.hidden), [columns]);
   const tableColumns = useMemo(
@@ -233,114 +282,213 @@ function DataTable({
     if (!sort || sort.column !== columnName) return null;
     return sort.direction === "desc" ? "desc" : "asc";
   };
-  return /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-sm", children: [
-    /* @__PURE__ */ jsx("thead", { className: "sticky top-0 bg-background", children: table.getHeaderGroups().map((group) => /* @__PURE__ */ jsxs("tr", { className: "border-b border-border", children: [
-      enableSelection && /* @__PURE__ */ jsx("th", { scope: "col", className: "w-10 px-3 py-2 text-left", children: /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "checkbox",
-          "aria-label": "Select all rows",
-          checked: allSelected,
-          ref: (el) => {
-            if (el) el.indeterminate = someSelected;
-          },
-          onChange: toggleAll
-        }
-      ) }),
-      group.headers.map((header) => {
-        const col = visibleColumns.find((c) => c.name === header.column.id);
-        const sortable = col?.sortable && onSortChange;
-        const direction = headerSortDirection(header.column.id);
-        return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: cn("hidden w-full min-w-0 overflow-x-auto md:block", className), children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-sm", children: [
+      /* @__PURE__ */ jsx("thead", { className: "sticky top-0 bg-background", children: table.getHeaderGroups().map((group) => /* @__PURE__ */ jsxs("tr", { className: "border-b border-border", children: [
+        enableSelection && /* @__PURE__ */ jsx("th", { scope: "col", className: "w-10 px-3 py-2 text-left", children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            "aria-label": t("table.bulk.select_all_rows", "Select all rows"),
+            checked: allSelected,
+            ref: (el) => {
+              if (el) el.indeterminate = someSelected;
+            },
+            onChange: toggleAll
+          }
+        ) }),
+        group.headers.map((header) => {
+          const col = visibleColumns.find((c) => c.name === header.column.id);
+          const sortable = col?.sortable && onSortChange;
+          const direction = headerSortDirection(header.column.id);
+          return /* @__PURE__ */ jsx(
+            "th",
+            {
+              scope: "col",
+              className: cn(
+                "px-3 py-2 text-left font-medium text-muted-foreground",
+                col?.align === "center" && "text-center",
+                col?.align === "end" && "text-right",
+                col?.hiddenOnMobile && "hidden md:table-cell"
+              ),
+              "aria-sort": direction === "asc" ? "ascending" : direction === "desc" ? "descending" : "none",
+              children: sortable ? /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: cn(
+                    // -mx-3 px-3 stretches the button across the cell's
+                    // horizontal padding; min-h-11 + w-full give a ≥44px
+                    // touch target on mobile (WCAG 2.5.5) without changing
+                    // the header's visual density.
+                    "-mx-3 inline-flex min-h-11 w-full items-center gap-1 px-3 hover:text-foreground",
+                    col?.align === "center" && "justify-center",
+                    col?.align === "end" && "justify-end"
+                  ),
+                  onClick: () => onSortChange(header.column.id, direction === "asc" ? "desc" : "asc"),
+                  children: [
+                    flexRender(header.column.columnDef.header, header.getContext()),
+                    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: direction === "asc" ? "\u25B2" : direction === "desc" ? "\u25BC" : "\u2195" })
+                  ]
+                }
+              ) : flexRender(header.column.columnDef.header, header.getContext())
+            },
+            header.id
+          );
+        }),
+        rowActions && /* @__PURE__ */ jsx(
           "th",
           {
             scope: "col",
-            className: cn(
-              "px-3 py-2 text-left font-medium text-muted-foreground",
-              col?.align === "center" && "text-center",
-              col?.align === "end" && "text-right"
-            ),
-            "aria-sort": direction === "asc" ? "ascending" : direction === "desc" ? "descending" : "none",
-            children: sortable ? /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                className: "inline-flex items-center gap-1 hover:text-foreground",
-                onClick: () => onSortChange(header.column.id, direction === "asc" ? "desc" : "asc"),
-                children: [
-                  flexRender(header.column.columnDef.header, header.getContext()),
-                  /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: direction === "asc" ? "\u25B2" : direction === "desc" ? "\u25BC" : "\u2195" })
-                ]
-              }
-            ) : flexRender(header.column.columnDef.header, header.getContext())
-          },
-          header.id
-        );
-      }),
-      rowActions && /* @__PURE__ */ jsx("th", { scope: "col", className: "w-24 px-3 py-2 text-right", "aria-label": "Actions" })
-    ] }, group.id)) }),
-    /* @__PURE__ */ jsxs("tbody", { children: [
-      loading && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-        "td",
-        {
-          colSpan: visibleColumns.length + (enableSelection ? 1 : 0) + (rowActions ? 1 : 0),
-          className: "px-3 py-4 text-center text-muted-foreground",
-          children: "Loading\u2026"
-        }
-      ) }),
-      !loading && records.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-        "td",
-        {
-          colSpan: visibleColumns.length + (enableSelection ? 1 : 0) + (rowActions ? 1 : 0),
-          className: "px-3 py-8 text-center text-muted-foreground",
-          children: emptyState ?? "No records found."
-        }
-      ) }),
-      !loading && table.getRowModel().rows.map((row, index) => {
-        const record = row.original;
-        const checked = selectedIds.includes(record.id);
-        return /* @__PURE__ */ jsxs(
-          "tr",
+            className: "w-24 px-3 py-2 text-right",
+            "aria-label": t("table.column.actions", "Actions")
+          }
+        )
+      ] }, group.id)) }),
+      /* @__PURE__ */ jsxs("tbody", { children: [
+        loading && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+          "td",
           {
-            "data-selected": checked || void 0,
-            className: cn("border-b border-border", checked && "bg-muted"),
-            children: [
-              enableSelection && /* @__PURE__ */ jsx("td", { className: "w-10 px-3 py-2", children: /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "checkbox",
-                  "aria-label": `Select row ${record.id}`,
-                  checked,
-                  onChange: (event) => {
-                    const native = event.nativeEvent;
-                    toggleRow(record.id, index, native.shiftKey === true);
+            colSpan: visibleColumns.length + (enableSelection ? 1 : 0) + (rowActions ? 1 : 0),
+            className: "px-3 py-4 text-center text-muted-foreground",
+            children: t("table.loading", "Loading\u2026")
+          }
+        ) }),
+        !loading && records.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+          "td",
+          {
+            colSpan: visibleColumns.length + (enableSelection ? 1 : 0) + (rowActions ? 1 : 0),
+            className: "px-3 py-8 text-center text-muted-foreground",
+            children: emptyState ?? t("table.empty", "No records found.")
+          }
+        ) }),
+        !loading && table.getRowModel().rows.map((row, index) => {
+          const record = row.original;
+          const checked = selectedIds.includes(record.id);
+          return /* @__PURE__ */ jsxs(
+            "tr",
+            {
+              "data-selected": checked || void 0,
+              className: cn("border-b border-border", checked && "bg-muted"),
+              children: [
+                enableSelection && /* @__PURE__ */ jsx("td", { className: "w-10 px-3 py-2", children: /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    "aria-label": t("table.bulk.select_row", `Select row ${record.id}`, {
+                      id: String(record.id)
+                    }),
+                    checked,
+                    onChange: (event) => {
+                      const native = event.nativeEvent;
+                      toggleRow(record.id, index, native.shiftKey === true);
+                    }
                   }
+                ) }),
+                row.getVisibleCells().map((cell) => {
+                  const col = visibleColumns.find((c) => c.name === cell.column.id);
+                  return /* @__PURE__ */ jsx(
+                    "td",
+                    {
+                      className: cn(
+                        "px-3 py-2",
+                        col?.align === "center" && "text-center",
+                        col?.align === "end" && "text-right",
+                        col?.hiddenOnMobile && "hidden md:table-cell"
+                      ),
+                      children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                    },
+                    cell.id
+                  );
+                }),
+                rowActions && /* @__PURE__ */ jsx("td", { className: "w-24 px-3 py-2 text-right", children: rowActions(record) })
+              ]
+            },
+            row.id
+          );
+        })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      DataCards,
+      {
+        columns: visibleColumns,
+        rows: table.getRowModel().rows,
+        enableSelection,
+        selectedIds,
+        onToggleRow: toggleRow,
+        rowActions,
+        loading,
+        emptyState
+      }
+    )
+  ] });
+}
+function DataCards({
+  columns,
+  rows,
+  enableSelection,
+  selectedIds,
+  onToggleRow,
+  rowActions,
+  loading,
+  emptyState
+}) {
+  const t = useArqelTranslations();
+  const cardColumns = columns.filter((col) => !col.hiddenOnMobile);
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: "px-3 py-4 text-center text-muted-foreground md:hidden", children: t("table.loading", "Loading\u2026") });
+  }
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "px-3 py-8 text-center text-muted-foreground md:hidden", children: emptyState ?? t("table.empty", "No records found.") });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 md:hidden", children: rows.map((row, index) => {
+    const record = row.original;
+    const checked = selectedIds.includes(record.id);
+    return /* @__PURE__ */ jsxs(
+      "article",
+      {
+        "data-arqel-data-card": "",
+        "data-selected": checked || void 0,
+        className: cn("rounded-lg border border-border p-4 text-sm", checked && "bg-muted"),
+        children: [
+          (enableSelection || rowActions) && /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between gap-2", children: [
+            enableSelection ? /* @__PURE__ */ jsx("label", { className: "-m-2.5 inline-flex size-11 cursor-pointer items-center justify-center p-2.5", children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                "aria-label": t("table.bulk.select_row", `Select row ${record.id}`, {
+                  id: String(record.id)
+                }),
+                className: "size-5",
+                checked,
+                onChange: (event) => {
+                  const native = event.nativeEvent;
+                  onToggleRow(record.id, index, native.shiftKey === true);
                 }
-              ) }),
-              row.getVisibleCells().map((cell) => {
-                const col = visibleColumns.find((c) => c.name === cell.column.id);
-                return /* @__PURE__ */ jsx(
-                  "td",
-                  {
-                    className: cn(
-                      "px-3 py-2",
-                      col?.align === "center" && "text-center",
-                      col?.align === "end" && "text-right",
-                      col?.hiddenOnMobile && "hidden md:table-cell"
-                    ),
-                    children: flexRender(cell.column.columnDef.cell, cell.getContext())
-                  },
-                  cell.id
-                );
-              }),
-              rowActions && /* @__PURE__ */ jsx("td", { className: "w-24 px-3 py-2 text-right", children: rowActions(record) })
-            ]
-          },
-          row.id
-        );
-      })
-    ] })
-  ] }) });
+              }
+            ) }) : /* @__PURE__ */ jsx("span", {}),
+            rowActions ? /* @__PURE__ */ jsx("div", { className: "ml-auto", children: rowActions(record) }) : null
+          ] }),
+          /* @__PURE__ */ jsx("dl", { className: "grid grid-cols-[minmax(0,auto)_1fr] gap-x-3 gap-y-2", children: cardColumns.map((col) => /* @__PURE__ */ jsxs("div", { className: "contents", children: [
+            /* @__PURE__ */ jsx("dt", { className: "font-medium text-muted-foreground", children: col.label ?? col.name }),
+            /* @__PURE__ */ jsx(
+              "dd",
+              {
+                className: cn(
+                  "min-w-0 break-words",
+                  col.align === "end" && "text-right",
+                  col.align === "center" && "text-center"
+                ),
+                children: /* @__PURE__ */ jsx(TableCell, { column: col, value: record[col.name] })
+              }
+            )
+          ] }, col.name)) })
+        ]
+      },
+      row.id
+    );
+  }) });
 }
 function TableFilters({
   filters,
@@ -349,13 +497,14 @@ function TableFilters({
   onClearAll,
   className
 }) {
+  const t = useArqelTranslations();
   if (filters.length === 0) return null;
   const activeCount = filters.reduce((acc, f) => {
     const v = values[f.name];
     return v !== void 0 && v !== null && v !== "" ? acc + 1 : acc;
   }, 0);
   return /* @__PURE__ */ jsxs("fieldset", { className: cn("flex flex-wrap items-end gap-2 border-0 p-0", className), children: [
-    /* @__PURE__ */ jsx("legend", { className: "sr-only", children: "Filters" }),
+    /* @__PURE__ */ jsx("legend", { className: "sr-only", children: t("table.filters.legend", "Filters") }),
     filters.map((filter) => /* @__PURE__ */ jsx(
       FilterControl,
       {
@@ -365,11 +514,7 @@ function TableFilters({
       },
       filter.name
     )),
-    activeCount > 0 && onClearAll && /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: onClearAll, children: [
-      "Clear filters (",
-      activeCount,
-      ")"
-    ] })
+    activeCount > 0 && onClearAll && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onClearAll, children: t("table.filters.clear", `Clear filters (${activeCount})`, { count: activeCount }) })
   ] });
 }
 function FilterControl({
@@ -393,7 +538,8 @@ function FilterControl({
 }
 function controlClasses() {
   return cn(
-    "h-9 rounded-sm border border-[var(--input)]",
+    // 44px touch target on mobile (WCAG 2.5.5); dense 36px on >=md.
+    "h-11 rounded-sm border border-[var(--input)] md:h-9",
     "bg-background px-3 text-sm",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
   );
@@ -403,6 +549,7 @@ function SelectFilter({
   value,
   onChange
 }) {
+  const t = useArqelTranslations();
   return /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-xs text-muted-foreground", children: [
     filter.label ?? filter.name,
     /* @__PURE__ */ jsxs(
@@ -412,7 +559,7 @@ function SelectFilter({
         value: value === void 0 || value === null ? "" : String(value),
         onChange: (e) => onChange(e.target.value === "" ? null : e.target.value),
         children: [
-          /* @__PURE__ */ jsx("option", { value: "", children: "All" }),
+          /* @__PURE__ */ jsx("option", { value: "", children: t("table.filters.all", "All") }),
           filter.props.options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
         ]
       }
@@ -431,7 +578,7 @@ function MultiSelectFilter({
       "select",
       {
         multiple: true,
-        className: cn(controlClasses(), "h-auto min-h-[2.25rem] py-1"),
+        className: cn(controlClasses(), "h-auto min-h-11 py-1 md:min-h-[2.25rem]"),
         value: arr.map(String),
         onChange: (e) => {
           const next = Array.from(e.target.selectedOptions, (o) => o.value);
@@ -465,6 +612,7 @@ function TernaryFilter({
   value,
   onChange
 }) {
+  const t = useArqelTranslations();
   const current = value === void 0 || value === null ? "all" : String(value);
   return /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-xs text-muted-foreground", children: [
     filter.label ?? filter.name,
@@ -478,9 +626,9 @@ function TernaryFilter({
           onChange(v === "all" ? null : v);
         },
         children: [
-          /* @__PURE__ */ jsx("option", { value: "all", children: filter.props.allLabel ?? "All" }),
-          /* @__PURE__ */ jsx("option", { value: "true", children: filter.props.trueLabel ?? "Yes" }),
-          /* @__PURE__ */ jsx("option", { value: "false", children: filter.props.falseLabel ?? "No" })
+          /* @__PURE__ */ jsx("option", { value: "all", children: filter.props.allLabel ?? t("table.filters.all", "All") }),
+          /* @__PURE__ */ jsx("option", { value: "true", children: filter.props.trueLabel ?? t("table.filters.yes", "Yes") }),
+          /* @__PURE__ */ jsx("option", { value: "false", children: filter.props.falseLabel ?? t("table.filters.no", "No") })
         ]
       }
     )
@@ -493,8 +641,14 @@ function TablePagination({
   perPageOptions = [10, 25, 50, 100],
   className
 }) {
-  const from = (meta.currentPage - 1) * meta.perPage + 1;
-  const to = Math.min(meta.currentPage * meta.perPage, meta.total);
+  const t = useArqelTranslations();
+  const locale = useArqelLocale();
+  const numberFormatter = useMemo(() => new Intl.NumberFormat(locale), [locale]);
+  const fromRaw = (meta.currentPage - 1) * meta.perPage + 1;
+  const toRaw = Math.min(meta.currentPage * meta.perPage, meta.total);
+  const from = numberFormatter.format(fromRaw);
+  const to = numberFormatter.format(toRaw);
+  const total = numberFormatter.format(meta.total);
   const isFirst = meta.currentPage <= 1;
   const isLast = meta.currentPage >= meta.lastPage;
   return /* @__PURE__ */ jsxs(
@@ -504,16 +658,23 @@ function TablePagination({
         "flex flex-wrap items-center justify-between gap-2 border-t border-border px-3 py-2 text-sm",
         className
       ),
-      "aria-label": "Pagination",
+      "aria-label": t("table.pagination.label", "Pagination"),
       children: [
-        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: meta.total === 0 ? "No results" : `${from}\u2013${to} of ${meta.total}` }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: meta.total === 0 ? t("table.empty", "No records found.") : t(
+          "table.pagination.showing",
+          // Fallback is rendered verbatim when the key is missing, so it must
+          // already carry the interpolated values (the replacements map only
+          // applies to a resolved dictionary string).
+          `Showing ${from} to ${to} of ${total} results`,
+          { from, to, total }
+        ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
           onPerPageChange && /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
-            "Per page",
+            t("table.per_page", "Per page"),
             /* @__PURE__ */ jsx(
               "select",
               {
-                className: "h-8 rounded-sm border border-[var(--input)] bg-background px-2",
+                className: "h-11 rounded-sm border border-[var(--input)] bg-background px-2 md:h-8",
                 value: meta.perPage,
                 onChange: (e) => onPerPageChange(Number(e.target.value)),
                 children: perPageOptions.map((n) => /* @__PURE__ */ jsx("option", { value: n, children: n }, n))
@@ -525,26 +686,28 @@ function TablePagination({
             {
               variant: "outline",
               size: "sm",
+              className: "h-11 md:h-8",
               disabled: isFirst,
               onClick: () => onPageChange(meta.currentPage - 1),
-              "aria-label": "Previous page",
-              children: "Prev"
+              "aria-label": t("table.pagination.previous_page", "Previous page"),
+              children: t("table.pagination.previous", "Prev")
             }
           ),
           /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
-            meta.currentPage,
+            numberFormatter.format(meta.currentPage),
             " / ",
-            meta.lastPage
+            numberFormatter.format(meta.lastPage)
           ] }),
           /* @__PURE__ */ jsx(
             Button,
             {
               variant: "outline",
               size: "sm",
+              className: "h-11 md:h-8",
               disabled: isLast,
               onClick: () => onPageChange(meta.currentPage + 1),
-              "aria-label": "Next page",
-              children: "Next"
+              "aria-label": t("table.pagination.next_page", "Next page"),
+              children: t("table.pagination.next", "Next")
             }
           )
         ] })
@@ -560,6 +723,7 @@ function TableToolbar({
   onClearSelection,
   className
 }) {
+  const t = useArqelTranslations();
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3 px-3 py-3", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-end gap-2", children: [
       search,
@@ -569,12 +733,11 @@ function TableToolbar({
       "section",
       {
         className: "flex flex-wrap items-center gap-2 rounded-sm border border-border bg-muted px-3 py-2",
-        "aria-label": "Bulk actions",
+        "aria-label": t("table.bulk.label", "Bulk actions"),
         children: [
-          /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium", children: [
-            selectedCount,
-            " selected"
-          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: t("table.bulk.selected", "{one} :count selected|{other} :count selected", {
+            count: selectedCount
+          }) }),
           /* @__PURE__ */ jsxs("div", { className: "ml-auto flex flex-wrap items-center gap-2", children: [
             bulkActions,
             onClearSelection && /* @__PURE__ */ jsx(
@@ -583,7 +746,7 @@ function TableToolbar({
                 type: "button",
                 className: "text-sm text-muted-foreground hover:underline",
                 onClick: onClearSelection,
-                children: "Clear"
+                children: t("table.bulk.clear", "Clear")
               }
             )
           ] })
@@ -594,5 +757,5 @@ function TableToolbar({
 }
 
 export { DataTable, TableCell, TableFilters, TablePagination, TableToolbar };
-//# sourceMappingURL=chunk-PZEVKMZX.js.map
-//# sourceMappingURL=chunk-PZEVKMZX.js.map
+//# sourceMappingURL=chunk-S5UNPCMQ.js.map
+//# sourceMappingURL=chunk-S5UNPCMQ.js.map