@lotics/ui 3.2.0 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/pagination.tsx

@@ -3,6 +3,34 @@ import { View, StyleSheet } from "react-native";
 import { IconButton } from "./icon_button";
 import { Text } from "./text";
 
+/**
+ * Localizable strings for `Pagination`. Every field is optional; an omitted
+ * field keeps the English default, so an app that needs another language passes
+ * only what it overrides (mirrors `DateRangeFilterField`'s `labels`). The
+ * formatters receive 1-indexed display numbers and the raw total, so a caller
+ * controls its own locale (e.g. `total.toLocaleString("vi-VN")`).
+ */
+export interface PaginationLabels {
+  /** Range summary with a known total. Default `${start}–${end} of ${total}`. */
+  rangeWithTotal?: (start: number, end: number, total: number) => string;
+  /** Range summary without a total. Default `${start}–${end}`. */
+  range?: (start: number, end: number) => string;
+  /** Page indicator with a known total. Default `Page ${page} of ${pageCount}`. */
+  pageWithTotal?: (page: number, pageCount: number) => string;
+  /** Page indicator without a total. Default `Page ${page}`. */
+  page?: (page: number) => string;
+  /** Previous-page button tooltip. Default "Previous". */
+  previous?: string;
+  /** Next-page button tooltip. Default "Next". */
+  next?: string;
+}
+
+const defaultRangeWithTotal = (start: number, end: number, total: number): string =>
+  `${start}–${end} of ${total.toLocaleString()}`;
+const defaultRange = (start: number, end: number): string => `${start}–${end}`;
+const defaultPageWithTotal = (page: number, pageCount: number): string => `Page ${page} of ${pageCount}`;
+const defaultPage = (page: number): string => `Page ${page}`;
+
 export interface PaginationProps {
   /** 0-indexed. */
   page: number;
@@ -18,6 +46,8 @@ export interface PaginationProps {
   total?: number;
   loading?: boolean;
   onPageChange: (page: number) => void;
+  /** Override the English strings for localization. Omit to keep defaults. */
+  labels?: PaginationLabels;
 }
 
 /**
@@ -28,21 +58,21 @@ export interface PaginationProps {
  * doubling up a border.
  */
 export function Pagination(props: PaginationProps): React.ReactNode {
-  const { page, pageSize, rowCount, hasMore, total, loading, onPageChange } = props;
+  const { page, pageSize, rowCount, hasMore, total, loading, onPageChange, labels } = props;
   const start = page * pageSize + 1;
   const end = page * pageSize + rowCount;
   const showRange = !loading && rowCount > 0;
 
   const summary = showRange
     ? total !== undefined
-      ? `${start}–${end} of ${total.toLocaleString()}`
-      : `${start}–${end}`
+      ? (labels?.rangeWithTotal ?? defaultRangeWithTotal)(start, end, total)
+      : (labels?.range ?? defaultRange)(start, end)
     : "";
 
   const pageLabel =
     total !== undefined
-      ? `Page ${page + 1} of ${Math.max(1, Math.ceil(total / pageSize))}`
-      : `Page ${page + 1}`;
+      ? (labels?.pageWithTotal ?? defaultPageWithTotal)(page + 1, Math.max(1, Math.ceil(total / pageSize)))
+      : (labels?.page ?? defaultPage)(page + 1);
 
   return (
     <View style={styles.container}>
@@ -60,14 +90,14 @@ export function Pagination(props: PaginationProps): React.ReactNode {
           color="secondary"
           onPress={() => onPageChange(Math.max(0, page - 1))}
           disabled={page === 0 || !!loading}
-          tooltip="Previous"
+          tooltip={labels?.previous ?? "Previous"}
         />
         <IconButton
           icon="chevron-right"
           color="secondary"
           onPress={() => onPageChange(page + 1)}
           disabled={!hasMore || !!loading}
-          tooltip="Next"
+          tooltip={labels?.next ?? "Next"}
         />
       </View>
     </View>

package/src/sort_header.tsx

@@ -39,6 +39,20 @@ export function sortBy<T>(
   });
 }
 
+/**
+ * Localizable a11y fragments for `SortHeader`. The visible header is the app's
+ * own `label`; only the screen-reader announcement is built here, so these
+ * cover that string. Omit any field to keep the English default.
+ */
+export interface SortHeaderLabels {
+  /** a11y prefix around the column label. Default `(label) => `Sort by ${label}``. */
+  sortBy?: (label: string) => string;
+  /** Appended when sorted ascending. Default ", ascending". */
+  ascending?: string;
+  /** Appended when sorted descending. Default ", descending". */
+  descending?: string;
+}
+
 export interface SortHeaderProps {
   label: string;
   sortKey: string;
@@ -47,6 +61,8 @@ export interface SortHeaderProps {
   /** Right-align for numeric columns — the arrow then sits LEFT of the label. */
   align?: "left" | "right";
   style?: ViewStyle;
+  /** Override the English a11y strings for localization. Omit to keep defaults. */
+  labels?: SortHeaderLabels;
 }
 
 /**
@@ -57,15 +73,20 @@ export interface SortHeaderProps {
  * flush with the column content beneath it.
  */
 export function SortHeader(props: SortHeaderProps) {
-  const { label, sortKey, sort, onSort, align = "left", style } = props;
+  const { label, sortKey, sort, onSort, align = "left", style, labels } = props;
   const active = sort?.key === sortKey;
   const arrow = active ? (sort.dir === "asc" ? "chevron-up" : "chevron-down") : undefined;
-  const dirText = active ? (sort.dir === "asc" ? ", ascending" : ", descending") : "";
+  const dirText = active
+    ? sort.dir === "asc"
+      ? (labels?.ascending ?? ", ascending")
+      : (labels?.descending ?? ", descending")
+    : "";
+  const sortByLabel = (labels?.sortBy ?? ((l: string) => `Sort by ${l}`))(label);
 
   return (
     <PressableHighlight
       accessibilityRole="button"
-      accessibilityLabel={`Sort by ${label}${dirText}`}
+      accessibilityLabel={`${sortByLabel}${dirText}`}
       onPress={() => onSort(sortKey)}
       style={[styles.header, align === "right" ? styles.right : null, style]}
     >

package/src/table.tsx

@@ -11,7 +11,7 @@ import { StyleSheet, View, Pressable, type ViewStyle } from "react-native";
 import { Text } from "./text";
 import { Divider } from "./divider";
 import { PressableRow } from "./pressable_row";
-import { SortHeader, type SortState } from "./sort_header";
+import { SortHeader, type SortState, type SortHeaderLabels } from "./sort_header";
 
 /**
  * One column of a register — its width/flex/align/label/sortability defined ONCE,
@@ -50,6 +50,8 @@ export interface TableProps {
   sort?: SortState | null;
   /** Cycles the sort (none→asc→desc→none) — pair with `cycleSort` in the parent. */
   onSort?: (key: string) => void;
+  /** Localized a11y strings for the sortable headers. Omit to keep English. */
+  sortLabels?: SortHeaderLabels;
   /** Reserve a leading gutter (px) for rows that render a `leading` slot (a checkbox). */
   leading?: number;
   /** Reserve a trailing gutter (px) for rows that render a `trailing` slot (a ⋯ / button). */
@@ -67,7 +69,7 @@ export interface TableProps {
  * non-columnar list (entity piles, card stacks) use `PressableRow` directly.
  */
 export function Table(props: TableProps) {
-  const { columns, sort, onSort, leading = 0, trailing = 0, children } = props;
+  const { columns, sort, onSort, sortLabels, leading = 0, trailing = 0, children } = props;
   const rows = Children.toArray(children).filter(isValidElement);
 
   return (
@@ -78,7 +80,7 @@ export function Table(props: TableProps) {
           <View key={col.key} style={colStyle(col)}>
             {col.label ? (
               col.sortable && onSort ? (
-                <SortHeader label={col.label} sortKey={col.key} sort={sort ?? null} onSort={onSort} align={col.align} />
+                <SortHeader label={col.label} sortKey={col.key} sort={sort ?? null} onSort={onSort} align={col.align} labels={sortLabels} />
               ) : (
                 <Text size="xs" color="muted" transform="uppercase" numberOfLines={1}>
                   {col.label}