@gntik-ai/blocks 0.5.0 → 0.6.0

package/src/tables/DataTable/block.meta.ts

@@ -1,4 +1,5 @@
 import type { BlockMeta } from '../../meta';
+import type { DataTableLabels } from './labels';
 
 export const meta: BlockMeta = {
   name: 'Data table',
@@ -9,6 +10,107 @@ export const meta: BlockMeta = {
     'Opt-in selectionMode="single" uses native radios in a labelled fieldset (never paginated or virtualized; paginated defaults to false and paginated=true is a type error). Single mode uses selectedId/onSelectedIdChange or defaultSelectedId; isRowDisabled skips unavailable rows and preserves a checked disabled choice without callbacks. Supply legend, aria-label or aria-labelledby for the group and getRowLabel for each radio (otherwise the first column labels it). selectionName is used verbatim and must be unique per page; omitted names use an instance-unique useId name, and duplicate supplied names or missing group labels warn in development. Tab enters once on the checked enabled row or first enabled row; arrows wrap and skip disabled rows, Space selects, Shift+Tab exits, and all-disabled groups have no tab stop. No select-all, group checkboxes, bulk actions or selection summary appear in single mode. ' +
     'Examples in examples/single-selection.tsx: an uncontrolled non-paginated list with legend="Available items" and a controlled versions table with legend="Available versions", selectedId="v2" and a checked disabled version.',
 
+  labels: [
+    {
+      key: 'scrollRegion',
+      type: 'string',
+      state: 'Non-virtual table overflow: focusable scroll region name; virtualized regions use the caller caption',
+    },
+    {
+      key: 'selectionCount',
+      type: '(count: number) => string',
+      state: 'Multiple selection: toolbar count and polite live region',
+    },
+    { key: 'columns', type: 'string', state: 'Column visibility trigger text and name' },
+    { key: 'visibleColumns', type: 'string', state: 'Open column menu: visibility heading' },
+    { key: 'pinColumns', type: 'string', state: 'Open column menu with pinning: pin heading' },
+    { key: 'pinnedLeft', type: 'string', state: 'Open pin submenu trigger: left side suffix' },
+    { key: 'pinnedRight', type: 'string', state: 'Open pin submenu trigger: right side suffix' },
+    { key: 'pinLeft', type: 'string', state: 'Open pin submenu: left option' },
+    { key: 'pinRight', type: 'string', state: 'Open pin submenu: right option' },
+    { key: 'unpinned', type: 'string', state: 'Open pin submenu: unpinned option' },
+    { key: 'density', type: 'string', state: 'Density group accessible name' },
+    { key: 'comfortable', type: 'string', state: 'Comfortable density button name' },
+    { key: 'compact', type: 'string', state: 'Compact density button name' },
+    {
+      key: 'resizeColumn',
+      type: '(label: string) => string',
+      state: 'Resizable header: separator name; label is caller column header',
+    },
+    {
+      key: 'columnWidth',
+      type: '(width: number) => string',
+      state: 'Resizable header: separator aria-valuetext in pixels',
+    },
+    { key: 'defaultView', type: 'string', state: 'View trigger when no active view' },
+    { key: 'defaultViewOption', type: 'string', state: 'Open views menu: default option' },
+    { key: 'modified', type: 'string', state: 'Dirty view trigger: screen reader suffix' },
+    { key: 'views', type: 'string', state: 'Open views menu: heading' },
+    { key: 'saveChanges', type: 'string', state: 'Open views menu: save current view action' },
+    { key: 'saveAs', type: 'string', state: 'Open views menu: save as action' },
+    { key: 'renameView', type: 'string', state: 'Open views menu: rename action' },
+    { key: 'deleteView', type: 'string', state: 'Open views menu: immediate delete action; no confirmation dialog' },
+    { key: 'resetChanges', type: 'string', state: 'Open views menu: reset action' },
+    { key: 'saveViewTitle', type: 'string', state: 'Save as dialog: title and accessible name' },
+    { key: 'renameViewTitle', type: 'string', state: 'Rename dialog: title and accessible name' },
+    { key: 'viewName', type: 'string', state: 'Save as and Rename dialogs: input label' },
+    { key: 'cancel', type: 'string', state: 'Save as and Rename dialogs: cancel button' },
+    { key: 'saveView', type: 'string', state: 'Save as dialog: submit button' },
+    { key: 'rename', type: 'string', state: 'Rename dialog: submit button' },
+    { key: 'closeDialog', type: 'string', state: 'Save as and Rename dialogs: close button name' },
+    { key: 'selection', type: 'string', state: 'Single selection: screen reader column heading' },
+    { key: 'selectAll', type: 'string', state: 'Multiple selection: header checkbox name' },
+    {
+      key: 'selectRow',
+      type: '(label: string) => string',
+      state: 'Multiple selection: row checkbox name; label is caller row name',
+    },
+    { key: 'selectGroup', type: '(group: string) => string', state: 'Grouped multiple selection: group checkbox name' },
+    {
+      key: 'groupRows',
+      type: '(count: number) => string',
+      state: 'Grouped header: screen reader row-count unit; numeric count stays unchanged',
+    },
+    { key: 'noGroup', type: 'string', state: 'Grouped header: fallback when group key is empty' },
+    { key: 'actions', type: 'string', state: 'Row actions present: screen reader column heading' },
+    {
+      key: 'rowActions',
+      type: '(label: string) => string',
+      state: 'Row action menu trigger name; label is caller row name',
+    },
+    { key: 'emptyTitle', type: 'string', state: 'Empty rows: default empty-state title' },
+    { key: 'emptyDescription', type: 'string', state: 'Empty rows: default empty-state description' },
+    {
+      key: 'loading',
+      type: '(caption: string) => string',
+      state: 'Loading: status announcement; receives original caller caption',
+    },
+    { key: 'editHint', type: 'string', state: 'Editable table: shared keyboard instruction description' },
+    { key: 'editLabel', type: '(column: string, row: string) => string', state: 'Editing cell: input accessible name' },
+    { key: 'editError', type: 'string', state: 'Rejected cell edit without caller error message: alert' },
+    { key: 'enterNumber', type: 'string', state: 'Editing number: invalid numeric value alert' },
+    { key: 'minimumValue', type: '(min: number) => string', state: 'Editing number below minimum: alert' },
+    { key: 'maximumValue', type: '(max: number) => string', state: 'Editing number above maximum: alert' },
+    { key: 'rowsPerPage', type: 'string', state: 'Always: visible page-size text' },
+    { key: 'rowsPerPageLabel', type: 'string', state: 'Always: page-size Select accessible name' },
+    {
+      key: 'rangeSummary',
+      type: '(from: number, to: number, total: number) => string',
+      state: 'Every page and page-size change: visible summary and polite live region',
+    },
+    {
+      key: 'paginationNav',
+      type: '(noun: string) => string',
+      state: 'Always: navigation accessible name; noun is the caller caption',
+    },
+    { key: 'previous', type: 'string', state: 'Always: previous-page button name' },
+    { key: 'next', type: 'string', state: 'Always: next-page button name' },
+    {
+      key: 'page',
+      type: '(page: number) => string',
+      state: 'Always: numbered-page button name; number stays caller content',
+    },
+  ] satisfies Array<{ key: keyof DataTableLabels; type: string; state: string }>,
   uses: [
     'Table',
     'Checkbox',

package/src/tables/DataTable/column-menu.tsx

@@ -15,6 +15,7 @@ import {
   MenuTrigger,
   useI18n,
 } from '@gntik-ai/ui';
+import type { DataTableLabels } from './labels';
 import type { PinSide } from './column-sizing';
 import type { DataTableColumn } from './data-table-utils';
 
@@ -23,6 +24,7 @@ export interface ColumnVisibilityMenuProps<T> {
   hidden: ReadonlySet<string>;
   onToggle: (columnId: string, visible: boolean) => void;
   label?: string;
+  labels?: Partial<DataTableLabels>;
   /** Pin side of a column; with `onPin`, the menu gets a "Pin columns" section. */
   pinOf?: (columnId: string) => PinSide | null;
   onPin?: (columnId: string, side: PinSide | null) => void;
@@ -39,11 +41,12 @@ export function ColumnVisibilityMenu<T>({
   hidden,
   onToggle,
   label: labelProp,
+  labels,
   pinOf,
   onPin,
 }: ColumnVisibilityMenuProps<T>) {
   const { t } = useI18n();
-  const label = labelProp ?? t('table.columns');
+  const label = labels?.columns ?? labelProp ?? t('table.columns');
   const visibleCount = columns.filter((c) => !hidden.has(c.id)).length;
   const pinnable = onPin && pinOf ? columns.filter((c) => c.pinnable !== false && !hidden.has(c.id)) : [];
   return (
@@ -53,7 +56,7 @@ export function ColumnVisibilityMenu<T>({
       </MenuTrigger>
       <MenuContent align="end" className="min-w-[200px]">
         <MenuGroup>
-          <MenuGroupLabel>{t('table.visibleColumns')}</MenuGroupLabel>
+          <MenuGroupLabel>{labels?.visibleColumns ?? t('table.visibleColumns')}</MenuGroupLabel>
           {columns
             .filter((c) => c.hideable !== false)
             .map((c) => {
@@ -74,7 +77,7 @@ export function ColumnVisibilityMenu<T>({
           <>
             <MenuSeparator />
             <MenuGroup>
-              <MenuGroupLabel>Pin columns</MenuGroupLabel>
+              <MenuGroupLabel>{labels?.pinColumns ?? 'Pin columns'}</MenuGroupLabel>
               {pinnable.map((c) => {
                 const side = pinOf(c.id);
                 return (
@@ -83,7 +86,7 @@ export function ColumnVisibilityMenu<T>({
                       {c.header}
                       {side && (
                         <span className="ms-auto ps-3 text-[11.5px] text-muted-foreground">
-                          {side === 'left' ? 'Left' : 'Right'}
+                          {side === 'left' ? (labels?.pinnedLeft ?? 'Left') : (labels?.pinnedRight ?? 'Right')}
                         </span>
                       )}
                     </MenuSubTrigger>
@@ -92,9 +95,9 @@ export function ColumnVisibilityMenu<T>({
                         value={side ?? PIN_NONE}
                         onValueChange={(v: unknown) => onPin(c.id, v === 'left' || v === 'right' ? v : null)}
                       >
-                        <MenuRadioItem value="left">Pin left</MenuRadioItem>
-                        <MenuRadioItem value="right">Pin right</MenuRadioItem>
-                        <MenuRadioItem value={PIN_NONE}>Unpinned</MenuRadioItem>
+                        <MenuRadioItem value="left">{labels?.pinLeft ?? 'Pin left'}</MenuRadioItem>
+                        <MenuRadioItem value="right">{labels?.pinRight ?? 'Pin right'}</MenuRadioItem>
+                        <MenuRadioItem value={PIN_NONE}>{labels?.unpinned ?? 'Unpinned'}</MenuRadioItem>
                       </MenuRadioGroup>
                     </MenuSubContent>
                   </MenuSub>

package/src/tables/DataTable/data-table-body.tsx

@@ -108,8 +108,8 @@ export function DataTableBody<T>(props: DataTableBodyProps<T>) {
               <EmptyState
                 icon={Inbox}
                 size="sm"
-                title={t('common.noResults')}
-                description={t('table.emptyDescription')}
+                title={props.labels?.emptyTitle ?? t('common.noResults')}
+                description={props.labels?.emptyDescription ?? t('table.emptyDescription')}
               />
             )}
           </TableCell>
@@ -130,6 +130,7 @@ export function DataTableBody<T>(props: DataTableBodyProps<T>) {
     <GroupHeaderRow
       key={`group-${group.key}`}
       group={group}
+      labels={props.labels}
       open={open}
       selectable={selectable}
       selected={selected}

package/src/tables/DataTable/data-table-props.ts

@@ -3,9 +3,12 @@ import type { ReactNode } from 'react';
 import type { ColumnWidths, PinnedColumns } from './column-sizing';
 import type { DataTableColumn, DataTableGroupBy, SortState } from './data-table-utils';
 import type { DataTableCellEditHandler } from './editable-cell';
+import type { DataTableLabels } from './labels';
 import type { DataTableView } from './views';
 
 interface DataTableCommonProps<T> {
+  /** Per-key overrides; omitted keys keep existing defaults and provider translations. */
+  labels?: Partial<DataTableLabels>;
   rows?: readonly T[];
   columns?: ReadonlyArray<DataTableColumn<T>>;
   /** Stable row id (defaults to `row.id`). */

package/src/tables/DataTable/data-table-row.tsx

@@ -10,6 +10,7 @@ import {
   type DataTableColumn,
 } from './data-table-utils';
 import { EditableCell, isCellEditable, type DataTableCellEditHandler } from './editable-cell';
+import type { DataTableLabels } from './labels';
 import type { SingleSelection } from './single-selection';
 
 /** A group as the body renders it: its rows on the current page plus header data. */
@@ -27,6 +28,7 @@ export interface DataTableBodyGroup<T> {
 
 /** Row rendering shared by the plain, grouped and virtualized bodies. */
 export interface RowContext<T> {
+  labels?: Partial<DataTableLabels>;
   columns: ReadonlyArray<DataTableColumn<T>>;
   getRowId: (row: T) => string;
   getRowLabel: (row: T) => string;
@@ -49,6 +51,7 @@ export interface DataTableRowProps<T> extends RowContext<T> {
 }
 
 export function DataTableRow<T>({
+  labels,
   row,
   columns,
   getRowId,
@@ -83,7 +86,7 @@ export function DataTableRow<T>({
             </span>
           ) : (
             <Checkbox
-              aria-label={t('table.selectRow', { label })}
+              aria-label={labels?.selectRow?.(label) ?? t('table.selectRow', { label })}
               checked={isSelected}
               onCheckedChange={() => onToggleRow(id)}
             />
@@ -110,6 +113,7 @@ export function DataTableRow<T>({
           >
             {editable ? (
               <EditableCell
+                labels={labels}
                 row={row}
                 rowId={id}
                 rowLabel={label}
@@ -131,7 +135,12 @@ export function DataTableRow<T>({
           className={cn('w-12 py-0', layout?.trail.className, tint(layout?.trail))}
           style={layout?.trail.style}
         >
-          <MoreMenu items={rowActions(row)} label={t('table.rowActions', { label })} variant="ghost" size="sm" />
+          <MoreMenu
+            items={rowActions(row)}
+            label={labels?.rowActions?.(label) ?? t('table.rowActions', { label })}
+            variant="ghost"
+            size="sm"
+          />
         </TableCell>
       )}
     </TableRow>
@@ -142,6 +151,7 @@ export const groupHeadClass =
   'h-9 bg-secondary/50 text-[12.5px] font-semibold tracking-normal normal-case text-foreground';
 
 export interface GroupHeaderRowProps<T> {
+  labels?: Partial<DataTableLabels>;
   group: DataTableBodyGroup<T>;
   open: boolean;
   selectable: boolean;
@@ -157,6 +167,7 @@ export interface GroupHeaderRowProps<T> {
 
 /** The header row of a group: group checkbox, collapse button, label and count. */
 export function GroupHeaderRow<T>({
+  labels,
   group,
   open,
   selectable,
@@ -177,7 +188,7 @@ export function GroupHeaderRow<T>({
       <span className="rounded-full bg-secondary px-1.5 font-mono text-[11px] font-medium text-muted-foreground tabular-nums">
         {count}
       </span>{' '}
-      <span className="sr-only">{count === 1 ? 'row' : 'rows'}</span>
+      <span className="sr-only">{labels?.groupRows?.(count) ?? (count === 1 ? 'row' : 'rows')}</span>
     </>
   );
   return (
@@ -185,7 +196,7 @@ export function GroupHeaderRow<T>({
       {selectable && (
         <TableCell className={cn('w-10 pe-0', groupHeadClass)}>
           <Checkbox
-            aria-label={t('table.selectRow', { label: `all in ${group.name}` })}
+            aria-label={labels?.selectGroup?.(group.name) ?? t('table.selectRow', { label: `all in ${group.name}` })}
             checked={state.checked}
             indeterminate={state.indeterminate}
             disabled={count === 0}

package/src/tables/DataTable/density-toggle.tsx

@@ -1,17 +1,20 @@
 import { Rows2, Rows3 } from '@gntik-ai/icons';
 import { Toggle, ToggleGroup, type TableDensity, useI18n } from '@gntik-ai/ui';
 
+import type { DataTableLabels } from './labels';
+
 export interface DensityToggleProps {
+  labels?: Partial<DataTableLabels>;
   value: TableDensity;
   onChange: (density: TableDensity) => void;
 }
 
 /** Two-icon segmented control: comfortable or compact rows. */
-export function DensityToggle({ value, onChange }: DensityToggleProps) {
+export function DensityToggle({ value, onChange, labels }: DensityToggleProps) {
   const { t } = useI18n();
   return (
     <ToggleGroup
-      aria-label={t('table.density')}
+      aria-label={labels?.density ?? t('table.density')}
       size="sm"
       value={[value]}
       onValueChange={(v) => {
@@ -19,10 +22,10 @@ export function DensityToggle({ value, onChange }: DensityToggleProps) {
         if (next === 'compact' || next === 'comfortable') onChange(next);
       }}
     >
-      <Toggle value="comfortable" iconOnly aria-label={t('table.comfortable')}>
+      <Toggle value="comfortable" iconOnly aria-label={labels?.comfortable ?? t('table.comfortable')}>
         <Rows2 size={15} aria-hidden />
       </Toggle>
-      <Toggle value="compact" iconOnly aria-label={t('table.compact')}>
+      <Toggle value="compact" iconOnly aria-label={labels?.compact ?? t('table.compact')}>
         <Rows3 size={15} aria-hidden />
       </Toggle>
     </ToggleGroup>

package/src/tables/DataTable/editable-cell.tsx

@@ -9,6 +9,7 @@ import {
   type KeyboardEvent,
   type ReactNode,
 } from 'react';
+import type { DataTableLabels } from './labels';
 import type { DataTableColumn } from './data-table-utils';
 
 /** One committed cell edit, as `onCellEdit` receives it. */
@@ -34,6 +35,7 @@ export type DataTableCellEditHandler<T> = (
 ) => DataTableCellEditResult | Promise<DataTableCellEditResult>;
 
 export interface EditableCellProps<T> {
+  labels?: Partial<DataTableLabels>;
   row: T;
   rowId: string;
   rowLabel: string;
@@ -72,7 +74,16 @@ function focusSibling(from: HTMLElement | null, dir: 'next' | 'prev') {
  * edits); while editing, an input or a select: Enter or Tab commits, Escape cancels. `onCellEdit`
  * can reject the value with a message, shown inline under the editor.
  */
-export function EditableCell<T>({ row, rowId, rowLabel, column, onCellEdit, hintId, children }: EditableCellProps<T>) {
+export function EditableCell<T>({
+  row,
+  rowId,
+  rowLabel,
+  column,
+  onCellEdit,
+  hintId,
+  children,
+  labels,
+}: EditableCellProps<T>) {
   const errorId = useId();
   const editor = column.editor ?? { type: 'text' as const };
   const [editing, setEditing] = useState(false);
@@ -116,9 +127,11 @@ export function EditableCell<T>({ row, rowId, rowLabel, column, onCellEdit, hint
     const text = draft.trim();
     if (text === '') return { ok: true, value: null };
     const n = Number(text);
-    if (!Number.isFinite(n)) return { ok: false, message: 'Enter a number.' };
-    if (editor.min != null && n < editor.min) return { ok: false, message: `Enter ${editor.min} or more.` };
-    if (editor.max != null && n > editor.max) return { ok: false, message: `Enter ${editor.max} or less.` };
+    if (!Number.isFinite(n)) return { ok: false, message: labels?.enterNumber ?? 'Enter a number.' };
+    if (editor.min != null && n < editor.min)
+      return { ok: false, message: labels?.minimumValue?.(editor.min) ?? `Enter ${editor.min} or more.` };
+    if (editor.max != null && n > editor.max)
+      return { ok: false, message: labels?.maximumValue?.(editor.max) ?? `Enter ${editor.max} or less.` };
     return { ok: true, value: n };
   };
 
@@ -146,11 +159,11 @@ export function EditableCell<T>({ row, rowId, rowLabel, column, onCellEdit, hint
     try {
       result = await onCellEdit({ row, rowId, columnId: column.id, value: parsed.value, previous });
     } catch (err) {
-      result = err instanceof Error && err.message ? err.message : GENERIC_ERROR;
+      result = err instanceof Error && err.message ? err.message : (labels?.editError ?? GENERIC_ERROR);
     }
     busy.current = false;
     setPending(false);
-    if (result === false) result = GENERIC_ERROR;
+    if (result === false) result = labels?.editError ?? GENERIC_ERROR;
     if (typeof result === 'string') {
       setError(result);
       if (after) field.current?.focus();
@@ -205,7 +218,7 @@ export function EditableCell<T>({ row, rowId, rowLabel, column, onCellEdit, hint
     );
   }
 
-  const label = `${column.header} for ${rowLabel}`;
+  const label = labels?.editLabel?.(column.header, rowLabel) ?? `${column.header} for ${rowLabel}`;
   const common = {
     'aria-label': label,
     'aria-invalid': error ? true : undefined,
@@ -259,7 +272,7 @@ export function EditableCell<T>({ row, rowId, rowLabel, column, onCellEdit, hint
         <p
           id={errorId}
           role="alert"
-          className="mt-1 text-start text-[11.5px] font-medium whitespace-normal text-destructive-text"
+          className="mt-1 rounded-sm border border-border bg-popover px-1.5 py-1 text-start text-[11.5px] font-medium whitespace-normal text-destructive-text"
         >
           {error}
         </p>

package/src/tables/DataTable/header-cell.tsx

@@ -2,9 +2,11 @@ import { ArrowDown, ArrowUp, ChevronsUpDown } from '@gntik-ai/icons';
 import { cn, nextSortDirection, TableHead, tableVariants, type SortDirection } from '@gntik-ai/ui';
 import { stickyTint, type CellLayout } from './column-sizing';
 import { columnAlign, type DataTableColumn } from './data-table-utils';
+import type { DataTableLabels } from './labels';
 import { ColumnResizeHandle } from './resize-handle';
 
 export interface DataTableHeadCellProps<T> {
+  labels?: Partial<DataTableLabels>;
   column: DataTableColumn<T>;
   sortDirection: SortDirection;
   onSortChange: (direction: Exclude<SortDirection, 'none'>) => void;
@@ -23,6 +25,7 @@ export function DataTableHeadCell<T>({
   onSortChange,
   layout,
   resize,
+  labels,
 }: DataTableHeadCellProps<T>) {
   const align = columnAlign(column);
   const pinnedClass = layout?.pinned
@@ -75,6 +78,7 @@ export function DataTableHeadCell<T>({
         )}
       </span>
       <ColumnResizeHandle
+        labels={labels}
         label={column.header}
         width={resize.width}
         min={resize.min}

package/src/tables/DataTable/labels.ts

@@ -0,0 +1,54 @@
+import type { PaginationFooterLabels } from '../PaginationFooter/PaginationFooter';
+
+/** Per-instance table chrome, including the composed PaginationFooter. Caller data stays caller-owned. */
+export interface DataTableLabels extends PaginationFooterLabels {
+  /** Non-virtual table overflow region; virtualized regions keep the caller caption. */
+  scrollRegion: string;
+  selectionCount: (count: number) => string;
+  columns: string;
+  visibleColumns: string;
+  pinColumns: string;
+  pinnedLeft: string;
+  pinnedRight: string;
+  pinLeft: string;
+  pinRight: string;
+  unpinned: string;
+  density: string;
+  comfortable: string;
+  compact: string;
+  resizeColumn: (label: string) => string;
+  columnWidth: (width: number) => string;
+  defaultView: string;
+  defaultViewOption: string;
+  modified: string;
+  views: string;
+  saveChanges: string;
+  saveAs: string;
+  renameView: string;
+  deleteView: string;
+  resetChanges: string;
+  saveViewTitle: string;
+  renameViewTitle: string;
+  viewName: string;
+  cancel: string;
+  saveView: string;
+  rename: string;
+  closeDialog: string;
+  selection: string;
+  selectAll: string;
+  selectRow: (label: string) => string;
+  selectGroup: (group: string) => string;
+  groupRows: (count: number) => string;
+  noGroup: string;
+  actions: string;
+  rowActions: (label: string) => string;
+  emptyTitle: string;
+  emptyDescription: string;
+  loading: (caption: string) => string;
+  editHint: string;
+  editLabel: (column: string, row: string) => string;
+  editError: string;
+  enterNumber: string;
+  minimumValue: (min: number) => string;
+  maximumValue: (max: number) => string;
+}

package/src/tables/DataTable/resize-handle.tsx

@@ -1,7 +1,10 @@
 import { cn } from '@gntik-ai/ui';
 import { useRef, type KeyboardEvent, type PointerEvent } from 'react';
 
+import type { DataTableLabels } from './labels';
+
 export interface ColumnResizeHandleProps {
+  labels?: Partial<DataTableLabels>;
   /** Column name for the accessible label ("Resize Region column"). */
   label: string;
   width: number;
@@ -20,7 +23,7 @@ const BIG_STEP = 50;
  * aria-valuenow/min/max (the width in px). Drag it with a pointer; from the keyboard,
  * ArrowLeft/ArrowRight change the width by 10px (Shift: 50px), Home/End jump to the limits.
  */
-export function ColumnResizeHandle({ label, width, min, max, onResize, onResizeEnd }: ColumnResizeHandleProps) {
+export function ColumnResizeHandle({ label, width, min, max, onResize, onResizeEnd, labels }: ColumnResizeHandleProps) {
   const drag = useRef<{ x: number; width: number; dir: 1 | -1 } | null>(null);
   const clamp = (w: number) => Math.round(Math.min(max, Math.max(min, w)));
 
@@ -63,11 +66,11 @@ export function ColumnResizeHandle({ label, width, min, max, onResize, onResizeE
       role="separator"
       tabIndex={0}
       aria-orientation="vertical"
-      aria-label={`Resize ${label} column`}
+      aria-label={labels?.resizeColumn?.(label) ?? `Resize ${label} column`}
       aria-valuenow={width}
       aria-valuemin={min}
       aria-valuemax={max}
-      aria-valuetext={`${width} pixels`}
+      aria-valuetext={labels?.columnWidth?.(width) ?? `${width} pixels`}
       data-column-resizer=""
       onPointerDown={onPointerDown}
       onPointerMove={onPointerMove}

package/src/tables/DataTable/views.tsx

@@ -21,6 +21,7 @@ import {
 } from '@gntik-ai/ui';
 import { useId, useState } from 'react';
 import type { ColumnWidths, PinnedColumns } from './column-sizing';
+import type { DataTableLabels } from './labels';
 import type { SortState } from './data-table-utils';
 
 /** What a saved view captures. Every field is optional: a missing field keeps the table's default. */
@@ -70,6 +71,7 @@ export function newViewId(name: string, views: readonly DataTableView[]): string
 }
 
 export interface ViewSwitcherProps {
+  labels?: Partial<DataTableLabels>;
   views: readonly DataTableView[];
   activeId: string | null;
   /** The table differs from the active view (or from the defaults when none is active). */
@@ -86,6 +88,7 @@ const DEFAULT_VALUE = '__default__';
 
 /** "Views" menu: switch between saved views, save the current table as a view, rename, delete, reset. */
 export function ViewSwitcher({
+  labels,
   views,
   activeId,
   dirty,
@@ -115,23 +118,23 @@ export function ViewSwitcher({
     <>
       <Menu>
         <MenuTrigger render={<Button variant="secondary" size="sm" icon={Bookmark} trailingIcon={ChevronDown} />}>
-          <span className="max-w-40 truncate">{active ? active.name : 'Default view'}</span>
+          <span className="max-w-40 truncate">{active ? active.name : (labels?.defaultView ?? 'Default view')}</span>
           {dirty && (
             <>
               {' '}
               <span aria-hidden className="size-1.5 rounded-full bg-primary" />{' '}
-              <span className="sr-only">(modified)</span>
+              <span className="sr-only">{labels?.modified ?? '(modified)'}</span>
             </>
           )}
         </MenuTrigger>
         <MenuContent align="end" className="min-w-[220px]">
           <MenuGroup>
-            <MenuGroupLabel>Views</MenuGroupLabel>
+            <MenuGroupLabel>{labels?.views ?? 'Views'}</MenuGroupLabel>
             <MenuRadioGroup
               value={activeId ?? DEFAULT_VALUE}
               onValueChange={(v: unknown) => onSelect(v === DEFAULT_VALUE ? null : String(v))}
             >
-              <MenuRadioItem value={DEFAULT_VALUE}>Default view</MenuRadioItem>
+              <MenuRadioItem value={DEFAULT_VALUE}>{labels?.defaultViewOption ?? 'Default view'}</MenuRadioItem>
               {views.map((v) => (
                 <MenuRadioItem key={v.id} value={v.id}>
                   {v.name}
@@ -141,22 +144,22 @@ export function ViewSwitcher({
           </MenuGroup>
           <MenuSeparator />
           <MenuItem disabled={!active || !dirty} onClick={onSave}>
-            Save changes
+            {labels?.saveChanges ?? 'Save changes'}
           </MenuItem>
-          <MenuItem onClick={() => open('create')}>Save as new view…</MenuItem>
+          <MenuItem onClick={() => open('create')}>{labels?.saveAs ?? 'Save as new view…'}</MenuItem>
           <MenuItem disabled={!active} onClick={() => open('rename')}>
-            Rename view…
+            {labels?.renameView ?? 'Rename view…'}
           </MenuItem>
           <MenuItem disabled={!active} onClick={() => active && onDelete(active.id)}>
-            Delete view
+            {labels?.deleteView ?? 'Delete view'}
           </MenuItem>
           <MenuItem disabled={!dirty} onClick={onReset}>
-            Reset changes
+            {labels?.resetChanges ?? 'Reset changes'}
           </MenuItem>
         </MenuContent>
       </Menu>
       <Dialog open={dialog != null} onOpenChange={(o) => !o && setDialog(null)}>
-        <DialogContent size="sm">
+        <DialogContent size="sm" closeLabel={labels?.closeDialog}>
           <form
             onSubmit={(e) => {
               e.preventDefault();
@@ -164,18 +167,22 @@ export function ViewSwitcher({
             }}
           >
             <DialogHeader>
-              <DialogTitle>{dialog === 'rename' ? 'Rename view' : 'Save view'}</DialogTitle>
+              <DialogTitle>
+                {dialog === 'rename'
+                  ? (labels?.renameViewTitle ?? 'Rename view')
+                  : (labels?.saveViewTitle ?? 'Save view')}
+              </DialogTitle>
             </DialogHeader>
             <DialogBody>
               <label htmlFor={inputId} className="mb-1.5 block text-[12.5px] font-medium text-foreground">
-                View name
+                {labels?.viewName ?? 'View name'}
               </label>
               <Input id={inputId} value={name} onChange={(e) => setName(e.target.value)} autoComplete="off" required />
             </DialogBody>
             <DialogFooter>
-              <DialogClose render={<Button variant="ghost" />}>Cancel</DialogClose>
+              <DialogClose render={<Button variant="ghost" />}>{labels?.cancel ?? 'Cancel'}</DialogClose>
               <Button type="submit" disabled={!name.trim()}>
-                {dialog === 'rename' ? 'Rename' : 'Save view'}
+                {dialog === 'rename' ? (labels?.rename ?? 'Rename') : (labels?.saveView ?? 'Save view')}
               </Button>
             </DialogFooter>
           </form>