@eifi1/ui-kit 0.4.1 → 0.5.0

package/dist/components/data-table.js

@@ -1,5 +1,6 @@
+"use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment2, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment2, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import {
   ArrowDown,
@@ -29,7 +30,9 @@ import { useOverlayHistory } from "../hooks/use-overlay-history.js";
 import { FullBleedDialog } from "./full-bleed-dialog.js";
 import { Popover } from "./popover.js";
 import { useMediaQuery } from "../hooks/use-media-query.js";
+import { useAnnounce } from "../hooks/use-announce.js";
 import { resolveDataTableLabels } from "./data-table-labels.js";
+import { useKitLabelOverrides, useKitLocale } from "../i18n/kit-labels.js";
 import { Tooltip } from "./tooltip.js";
 function cleanAttrs(attrs) {
   if (!attrs) return void 0;
@@ -37,6 +40,9 @@ function cleanAttrs(attrs) {
   for (const [k, v] of Object.entries(attrs)) if (v !== void 0) out[k] = v;
   return out;
 }
+function columnLabel(col) {
+  return typeof col.header === "string" ? col.header : col.key;
+}
 const isPlainLeftClick = (e) => e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;
 function RowLink({
   href,
@@ -92,7 +98,7 @@ function DataTable({
   onSortsChange,
   selection,
   labels: labelsProp,
-  locale,
+  locale: localeProp,
   storageKeyPrefix = DEFAULT_PERSIST_PREFIX,
   mobileExpandAsDialog = false,
   mobileGroupBy,
@@ -102,8 +108,20 @@ function DataTable({
   leadingRow
 }) {
   const isServer = !!serverPagination;
-  const labels = resolveDataTableLabels(labelsProp);
+  const labelOverrides = useKitLabelOverrides("dataTable");
+  const labels = useMemo(
+    () => resolveDataTableLabels(
+      labelOverrides || labelsProp ? {
+        ...labelOverrides,
+        ...labelsProp,
+        presets: { ...labelOverrides?.presets, ...labelsProp?.presets }
+      } : void 0
+    ),
+    [labelOverrides, labelsProp]
+  );
+  const locale = useKitLocale(localeProp);
   const [, setSearchParams] = useSearchParams();
+  const { announce, regionProps } = useAnnounce();
   const {
     sorts,
     filters,
@@ -130,6 +148,12 @@ function DataTable({
     sortsProp,
     filtersProp
   });
+  const columnSig = columns.map((c) => c.key).join("\0");
+  const selectOptionsSig = columns.map((c) => {
+    const f = resolveFilter(c);
+    if (!f || f.type !== "select" || !f.options) return "";
+    return `${c.key}:${f.options.map((o) => `${o.value}=${o.label ?? ""}`).join(",")}`;
+  }).join("\0");
   const selectOptionsByKey = useMemo(() => {
     const map = {};
     for (const col of columns) {
@@ -147,17 +171,17 @@ function DataTable({
       map[col.key] = Array.from(seen).sort().map((v) => ({ value: v, label: v }));
     }
     return map;
-  }, [columns, rows]);
+  }, [columnSig, selectOptionsSig, rows]);
   const filtered = useMemo(() => {
     if (isServer) return rows;
     let result = rows;
     for (const col of columns) {
       const state = filters[col.key];
       if (!state || !isFilterActive(state)) continue;
-      result = result.filter((row) => rowMatches(col, row, state));
+      result = result.filter((row) => rowMatches(col, row, state, locale));
     }
     return result;
-  }, [rows, columns, filters, isServer]);
+  }, [rows, columnSig, filters, isServer, locale]);
   const sorted = useMemo(() => {
     if (isServer) return filtered;
     const chain = sorts.map((s) => {
@@ -179,7 +203,7 @@ function DataTable({
       return 0;
     });
     return copy;
-  }, [filtered, sorts, columns, isServer]);
+  }, [filtered, sorts, columnSig, isServer]);
   const unpaged = !isServer && !paginated;
   const effectivePageSize = isServer ? serverPagination.pageSize : unpaged || pageSize === Infinity ? sorted.length || 1 : pageSize;
   const paginationTotal = isServer ? serverPagination.total : sorted.length;
@@ -191,6 +215,12 @@ function DataTable({
     const next = nextSorts(sorts, key, additive);
     if (onSortsChange) onSortsChange(next);
     else setInternalSorts(next);
+    const col = columns.find((c) => c.key === key);
+    const name = col ? columnLabel(col) : key;
+    const entry = next.find((s) => s.key === key);
+    announce(
+      !entry ? labels.sortCleared(name) : entry.dir === "asc" ? labels.sortedAscending(name) : labels.sortedDescending(name)
+    );
   };
   const setFilterValue = (key, value) => {
     if (onFiltersChange) {
@@ -230,32 +260,97 @@ function DataTable({
     });
     setPage(0);
   };
+  const filterKey = useMemo(() => JSON.stringify(filters), [filters]);
+  const announcedFilterKey = useRef(filterKey);
+  useEffect(() => {
+    if (announcedFilterKey.current === filterKey) return;
+    announcedFilterKey.current = filterKey;
+    if (isServer) return;
+    announce(labels.filterResults(filtered.length, rows.length));
+  }, [filterKey, filtered.length, rows.length, isServer, announce, labels]);
+  const goToPage = (p) => {
+    if (isServer) serverPagination.onPageChange(p);
+    else setPage(p);
+    announce(labels.pageChanged(p + 1, totalPages));
+  };
   const visibleColumns = useMemo(
     () => columns.filter((c) => !hiddenCols.has(c.key)),
     [columns, hiddenCols]
   );
   const linkColumn = rowHref ? visibleColumns.find((c) => c.mobilePrimary && !c.noRowLink) ?? visibleColumns.find((c) => !c.noRowLink) : void 0;
+  const resizing = useRef(null);
+  const columnCells = (key) => {
+    const th = headRefs.get(key);
+    if (!th) return [];
+    const table = th.closest("table");
+    if (!table) return [th];
+    return [
+      th,
+      ...Array.from(table.querySelectorAll("tbody [data-col]")).filter(
+        (el) => el.dataset.col === key
+      )
+    ];
+  };
+  const applyLiveWidth = (cells, width) => {
+    const px = width == null ? "" : `${width}px`;
+    for (const el of cells) {
+      el.style.width = px;
+      el.style.minWidth = px;
+      el.style.maxWidth = px;
+    }
+  };
+  const releaseResizeChrome = (handle, pointerId) => {
+    document.body.style.userSelect = "";
+    document.body.style.cursor = "";
+    if (handle.hasPointerCapture?.(pointerId)) handle.releasePointerCapture?.(pointerId);
+  };
   const startResize = (e, key) => {
+    if (e.button !== 0) return;
     e.preventDefault();
     e.stopPropagation();
     const th = headRefs.get(key);
     const startWidth = th?.getBoundingClientRect().width ?? 100;
-    const startX = e.clientX;
-    const onMove = (ev) => {
-      const next = Math.max(40, Math.round(startWidth + (ev.clientX - startX)));
-      setWidths((w) => ({ ...w, [key]: next }));
-    };
-    const onUp = () => {
-      window.removeEventListener("mousemove", onMove);
-      window.removeEventListener("mouseup", onUp);
-      document.body.style.userSelect = "";
-      document.body.style.cursor = "";
+    resizing.current = {
+      key,
+      pointerId: e.pointerId,
+      startX: e.clientX,
+      startWidth,
+      hadWidth: widths[key],
+      cells: columnCells(key),
+      width: startWidth,
+      moved: false
     };
+    e.currentTarget.setPointerCapture?.(e.pointerId);
     document.body.style.userSelect = "none";
     document.body.style.cursor = "col-resize";
-    window.addEventListener("mousemove", onMove);
-    window.addEventListener("mouseup", onUp);
   };
+  const moveResize = (e) => {
+    const drag = resizing.current;
+    if (!drag || drag.pointerId !== e.pointerId) return;
+    drag.width = Math.max(40, Math.round(drag.startWidth + (e.clientX - drag.startX)));
+    drag.moved = true;
+    applyLiveWidth(drag.cells, drag.width);
+  };
+  const finishResize = (e, commit) => {
+    const drag = resizing.current;
+    releaseResizeChrome(e.currentTarget, e.pointerId);
+    if (!drag || drag.pointerId !== e.pointerId) return;
+    resizing.current = null;
+    if (commit && drag.moved) {
+      setWidths((w) => ({ ...w, [drag.key]: drag.width }));
+      return;
+    }
+    applyLiveWidth(drag.cells, drag.hadWidth);
+  };
+  useEffect(
+    () => () => {
+      if (!resizing.current) return;
+      resizing.current = null;
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
+    },
+    []
+  );
   const autoSizeAll = () => {
     setWidths({});
     requestAnimationFrame(() => {
@@ -272,7 +367,7 @@ function DataTable({
   const visibleCount = visibleColumns.length;
   const totalCount = columns.length;
   const totalColSpan = visibleCount + (selection ? 1 : 0);
-  const columnsCountLabel = `${labels.columns} (${visibleCount}/${totalCount})`;
+  const columnsCountLabel = labels.columnsCount(visibleCount, totalCount);
   const isMdUp = useMediaQuery("(min-width: 768px)", true);
   const mobileColumns = visibleColumns.filter((c) => !c.mobileHidden);
   const mobilePrimaryCol = mobileColumns.find((c) => c.mobilePrimary) ?? mobileColumns[0] ?? null;
@@ -289,11 +384,16 @@ function DataTable({
   const canSelect = (row) => !!selection && (selection.isSelectable?.(row) ?? true);
   const selectRange = (toIndex) => {
     if (!selection || selectionAnchor.current === null) return false;
-    const [lo, hi] = [selectionAnchor.current, toIndex].sort((a, b) => a - b);
+    const fromIndex = slice.findIndex((r) => rowKey(r) === selectionAnchor.current);
+    if (fromIndex < 0) return false;
+    const [lo, hi] = [fromIndex, toIndex].sort((a, b) => a - b);
+    const range = [];
     for (let i = lo; i <= hi; i++) {
       const r = slice[i];
-      if (r && canSelect(r)) selection.onToggle(r, true);
+      if (r && canSelect(r)) range.push(r);
     }
+    if (selection.onToggleMany) selection.onToggleMany(range, true);
+    else for (const r of range) selection.onToggle(r, true);
     return true;
   };
   const mobileDialogRow = mobileExpandAsDialog && !isMdUp ? mobileSlice.find((r) => isExpanded?.(r)) : void 0;
@@ -320,24 +420,24 @@ function DataTable({
       // on every row of a long list, so anything larger becomes the list's personality
       // rather than feedback. `transition-transform` alone, so the existing background
       // flip stays instant.
-      interactive && "cursor-pointer transition-transform duration-100 active:scale-[0.995] active:bg-slate-50 dark:active:bg-slate-800/40 motion-reduce:transition-none motion-reduce:active:scale-100"
+      interactive && "cursor-pointer transition-transform duration-100 active:scale-[0.995] active:bg-[var(--bg-active)] motion-reduce:transition-none motion-reduce:active:scale-100"
     );
     const cardInner = /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: mobileCard ? mobileCard(row) : /* @__PURE__ */ jsxs(Fragment, { children: [
         mobilePrimaryCol && /* @__PURE__ */ jsx("div", { className: "font-medium", children: mobilePrimaryCol.cell(row) }),
         mobileSecondaryColumns.length > 0 && /* @__PURE__ */ jsx("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-sm", children: mobileSecondaryColumns.map((col) => /* @__PURE__ */ jsxs(Fragment2, { children: [
-          /* @__PURE__ */ jsx("dt", { className: "text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400 self-center", children: col.header }),
-          /* @__PURE__ */ jsx("dd", { className: "min-w-0 text-slate-700 dark:text-slate-200 self-center", children: col.cell(row) })
+          /* @__PURE__ */ jsx("dt", { className: "text-xs uppercase tracking-wide text-[var(--text-muted)] self-center", children: col.header }),
+          /* @__PURE__ */ jsx("dd", { className: "min-w-0 text-[var(--text-secondary)] self-center", children: col.cell(row) })
         ] }, col.key)) })
       ] }) }),
       opensDetail && // `aria-hidden`: the row already announces itself as a button with
       // `aria-expanded`, so the icon would only add a second, wordless stop.
-      (mobileExpandAsDialog ? /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true, className: "size-4 shrink-0 text-slate-400" }) : /* @__PURE__ */ jsx(
+      (mobileExpandAsDialog ? /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true, className: "size-4 shrink-0 text-[var(--text-placeholder)]" }) : /* @__PURE__ */ jsx(
         ChevronDown,
         {
           "aria-hidden": true,
           className: cn(
-            "size-4 shrink-0 text-slate-400 transition-transform",
+            "size-4 shrink-0 text-[var(--text-placeholder)] transition-transform",
             expanded && "rotate-180"
           )
         }
@@ -381,7 +481,7 @@ function DataTable({
     );
     return /* @__PURE__ */ jsxs("li", { className: cn(tint), ...cleanAttrs(rowAttributes?.(row)), children: [
       swipeEnabled ? /* @__PURE__ */ jsx(SwipeableRow, { enabled: true, left: swipe.left, right: swipe.right, children: body }) : body,
-      expansion && !mobileExpandAsDialog && /* @__PURE__ */ jsx("div", { className: "px-4 py-3 bg-slate-50/60 dark:bg-slate-800/20 border-t border-slate-100 dark:border-slate-800", children: expansion })
+      expansion && !mobileExpandAsDialog && /* @__PURE__ */ jsx("div", { className: "px-4 py-3 bg-[var(--bg-surface-2)] border-t border-[var(--border)]", children: expansion })
     ] }, rowKey(row));
   };
   const mobileGroups = mobileGroupBy ? mobileSlice.reduce((acc, row) => {
@@ -392,6 +492,7 @@ function DataTable({
     return acc;
   }, []) : null;
   return /* @__PURE__ */ jsxs(Card, { flush: true, className: cn("overflow-clip", fillHeight && "md:flex md:flex-1 md:flex-col md:min-h-0"), children: [
+    /* @__PURE__ */ jsx("span", { ...regionProps }),
     !isMdUp && /* @__PURE__ */ jsxs("div", { children: [
       (!isServer || onFiltersChange) && /* @__PURE__ */ jsx(
         MobileFilters,
@@ -408,17 +509,17 @@ function DataTable({
           locale
         }
       ),
-      /* @__PURE__ */ jsxs("ul", { className: "divide-y divide-slate-100 dark:divide-slate-800", children: [
+      /* @__PURE__ */ jsxs("ul", { className: "divide-y divide-[var(--border)]", children: [
         mobileGroups ? mobileGroups.map((g) => /* @__PURE__ */ jsxs(Fragment2, { children: [
-          /* @__PURE__ */ jsx("li", { className: "sticky top-0 z-10 bg-slate-50/95 px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-slate-500 backdrop-blur dark:bg-slate-800/80 dark:text-slate-400", children: mobileGroupLabel ? mobileGroupLabel(g.key) : g.key }),
+          /* @__PURE__ */ jsx("li", { className: "sticky top-0 z-10 bg-[var(--bg-surface-2)] px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)] backdrop-blur", children: mobileGroupLabel ? mobileGroupLabel(g.key) : g.key }),
           g.rows.map(renderMobileRow)
         ] }, `hb-group:${g.key}`)) : mobileSlice.map(renderMobileRow),
-        mobileSlice.length === 0 && /* @__PURE__ */ jsx("li", { className: "px-4 py-6 text-center text-sm text-slate-500 dark:text-slate-400", children: empty ?? "\u2014" }),
+        mobileSlice.length === 0 && /* @__PURE__ */ jsx("li", { className: "px-4 py-6 text-center text-sm text-[var(--text-muted)]", children: empty ?? "\u2014" }),
         canRevealMoreMobile && /* @__PURE__ */ jsx(
           "li",
           {
             ref: loadMoreRef,
-            className: "px-4 py-4 text-center text-xs text-slate-400 dark:text-slate-500",
+            className: "px-4 py-4 text-center text-xs text-[var(--text-placeholder)]",
             children: labels.loading
           }
         )
@@ -430,9 +531,10 @@ function DataTable({
           totalPages,
           pageSize: paginationPageSize,
           total: paginationTotal,
-          onPage: serverPagination.onPageChange,
+          onPage: goToPage,
           onPageSize: (n) => serverPagination.onPageSizeChange?.(n),
-          labels
+          labels,
+          locale
         }
       ),
       /* @__PURE__ */ jsx(
@@ -453,21 +555,28 @@ function DataTable({
           {
             className: cn("overflow-auto [scrollbar-gutter:stable]", fillHeight && "flex-1 min-h-0"),
             style: fillHeight ? void 0 : { maxHeight: maxBodyHeight },
-            children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
-              /* @__PURE__ */ jsx("thead", { className: "bg-slate-50 dark:bg-slate-800/40 text-slate-600 dark:text-slate-400", children: /* @__PURE__ */ jsxs("tr", { className: "text-left", children: [
-                selection && /* @__PURE__ */ jsx("th", { className: "sticky top-0 z-10 w-10 bg-slate-50 px-3 py-2 align-middle dark:bg-slate-800/95 backdrop-blur-sm", children: /* @__PURE__ */ jsx(
-                  "input",
+            children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", "aria-label": labels.table, children: [
+              /* @__PURE__ */ jsx("thead", { className: "bg-[var(--bg-surface-2)] text-[var(--text-secondary)]", children: /* @__PURE__ */ jsxs("tr", { className: "text-left", children: [
+                selection && /* @__PURE__ */ jsx(
+                  "th",
                   {
-                    type: "checkbox",
-                    className: "size-4 align-middle accent-indigo-600",
-                    checked: selection.allSelected,
-                    ref: (el) => {
-                      if (el) el.indeterminate = selection.someSelected && !selection.allSelected;
-                    },
-                    onChange: (e) => selection.onToggleAll(e.target.checked),
-                    "aria-label": labels.selectAllRows
+                    scope: "col",
+                    className: "sticky top-0 z-10 w-10 bg-[var(--bg-surface-2)] px-3 py-2 align-middle backdrop-blur-sm",
+                    children: /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "checkbox",
+                        className: "size-4 align-middle accent-indigo-600",
+                        checked: selection.allSelected,
+                        ref: (el) => {
+                          if (el) el.indeterminate = selection.someSelected && !selection.allSelected;
+                        },
+                        onChange: (e) => selection.onToggleAll(e.target.checked),
+                        "aria-label": labels.selectAllRows
+                      }
+                    )
                   }
-                ) }),
+                ),
                 visibleColumns.map((col) => {
                   const sortable = (!isServer || !!onSortsChange) && !!col.sortBy;
                   const filter = !isServer || onFiltersChange ? resolveFilter(col) : null;
@@ -485,14 +594,15 @@ function DataTable({
                         if (el) headRefs.set(col.key, el);
                         else headRefs.delete(col.key);
                       },
-                      "aria-sort": sortIdx === 0 ? sorts[0].dir === "asc" ? "ascending" : "descending" : void 0,
+                      scope: "col",
+                      "aria-sort": sortable ? sortIdx === 0 ? sorts[0].dir === "asc" ? "ascending" : "descending" : "none" : void 0,
                       style: width ? { width, minWidth: width, maxWidth: width } : void 0,
                       className: cn(
                         "relative px-3 py-2 font-medium align-middle whitespace-nowrap",
                         // Keep the header visible while the user scrolls the page.
                         // Each <th> carries its own bg so the row doesn't render
                         // transparent over the data rows underneath.
-                        "sticky top-0 z-10 bg-slate-50 dark:bg-slate-800/95 backdrop-blur-sm",
+                        "sticky top-0 z-10 bg-[var(--bg-surface-2)] backdrop-blur-sm",
                         col.headClassName
                       ),
                       children: [
@@ -512,7 +622,7 @@ function DataTable({
                                   disabled: !sortable,
                                   className: cn(
                                     "flex items-center gap-1 text-left",
-                                    sortable && "hover:text-slate-900 dark:hover:text-slate-200"
+                                    sortable && "hover:text-[var(--text-primary)]"
                                   ),
                                   children: [
                                     /* @__PURE__ */ jsx("span", { children: col.header }),
@@ -525,6 +635,7 @@ function DataTable({
                                 Popover,
                                 {
                                   width: filter.type === "date" ? 420 : void 0,
+                                  labels: { panel: labels.filter },
                                   trigger: ({ toggle, ref }) => /* @__PURE__ */ jsx(
                                     "button",
                                     {
@@ -534,7 +645,7 @@ function DataTable({
                                       "aria-label": labels.filter,
                                       className: cn(
                                         "rounded p-1 transition-colors",
-                                        filterActive ? "bg-indigo-100 text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-300" : "text-slate-400 hover:text-slate-700 hover:bg-slate-100 dark:text-slate-500 dark:hover:text-slate-200 dark:hover:bg-slate-800"
+                                        filterActive ? "bg-[var(--brand-bg)] text-[var(--brand-muted)]" : "text-[var(--text-placeholder)] hover:text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]"
                                       ),
                                       children: /* @__PURE__ */ jsx(Filter, { className: "size-3" })
                                     }
@@ -561,7 +672,10 @@ function DataTable({
                           {
                             role: "separator",
                             "aria-orientation": "vertical",
-                            onMouseDown: (e) => startResize(e, col.key),
+                            onPointerDown: (e) => startResize(e, col.key),
+                            onPointerMove: moveResize,
+                            onPointerUp: (e) => finishResize(e, true),
+                            onPointerCancel: (e) => finishResize(e, false),
                             onDoubleClick: (e) => {
                               e.preventDefault();
                               setWidths((w) => {
@@ -570,7 +684,7 @@ function DataTable({
                                 return next;
                               });
                             },
-                            className: "absolute right-0 top-0 z-10 h-full w-1.5 -translate-x-1/2 cursor-col-resize select-none hover:bg-indigo-300/60 dark:hover:bg-indigo-500/40"
+                            className: "absolute right-0 top-0 z-10 h-full w-1.5 -translate-x-1/2 cursor-col-resize select-none touch-none hover:bg-[var(--brand-bg-hover)]"
                           }
                         )
                       ]
@@ -580,7 +694,7 @@ function DataTable({
                 })
               ] }) }),
               /* @__PURE__ */ jsxs("tbody", { children: [
-                leadingRow && /* @__PURE__ */ jsx("tr", { className: "border-t border-slate-100 dark:border-slate-800", children: /* @__PURE__ */ jsx("td", { colSpan: totalColSpan, className: "p-0", children: leadingRow }) }),
+                leadingRow && /* @__PURE__ */ jsx("tr", { className: "border-t border-[var(--border)]", children: /* @__PURE__ */ jsx("td", { colSpan: totalColSpan, className: "p-0", children: leadingRow }) }),
                 slice.map((row, rowIndex) => {
                   const expanded = isExpanded?.(row) ?? false;
                   const expansion = expanded ? expandedRow?.(row) : null;
@@ -592,8 +706,8 @@ function DataTable({
                       {
                         ...cleanAttrs(rowAttributes?.(row)),
                         className: cn(
-                          "border-t border-slate-100 dark:border-slate-800",
-                          rowInteractive && "cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800/40",
+                          "border-t border-[var(--border)]",
+                          rowInteractive && "cursor-pointer hover:bg-[var(--bg-hover)]",
                           rowClassName?.(row)
                         ),
                         onClick: rowInteractive ? (e) => {
@@ -601,12 +715,12 @@ function DataTable({
                             if (e.shiftKey) {
                               window.getSelection?.()?.removeAllRanges();
                               if (selectRange(rowIndex)) return;
-                              selectionAnchor.current = rowIndex;
+                              selectionAnchor.current = rowKey(row);
                               selection.onToggle(row, !selection.isSelected(row));
                               return;
                             }
                             if (e.metaKey || e.ctrlKey) {
-                              selectionAnchor.current = rowIndex;
+                              selectionAnchor.current = rowKey(row);
                               selection.onToggle(row, !selection.isSelected(row));
                               return;
                             }
@@ -629,7 +743,7 @@ function DataTable({
                                     if (e.shiftKey && selectRange(rowIndex)) e.preventDefault();
                                   },
                                   onChange: (e) => {
-                                    selectionAnchor.current = rowIndex;
+                                    selectionAnchor.current = rowKey(row);
                                     selection.onToggle(row, e.target.checked);
                                   },
                                   "aria-label": labels.selectRow
@@ -642,6 +756,7 @@ function DataTable({
                             return /* @__PURE__ */ jsx(
                               "td",
                               {
+                                "data-col": col.key,
                                 style: width ? { width, minWidth: width, maxWidth: width } : void 0,
                                 className: cn("px-3 py-2 align-top", width && "overflow-hidden text-ellipsis", col.className),
                                 children: col === linkColumn && href ? (
@@ -657,14 +772,14 @@ function DataTable({
                         ]
                       }
                     ),
-                    expansion && /* @__PURE__ */ jsx("tr", { className: "bg-slate-50/60 dark:bg-slate-800/20 border-t border-slate-100 dark:border-slate-800", children: /* @__PURE__ */ jsx("td", { colSpan: totalColSpan, className: "p-0", children: /* @__PURE__ */ jsx("div", { className: "w-0 min-w-full px-3 py-3", children: expansion }) }) })
+                    expansion && /* @__PURE__ */ jsx("tr", { className: "bg-[var(--bg-surface-2)] border-t border-[var(--border)]", children: /* @__PURE__ */ jsx("td", { colSpan: totalColSpan, className: "p-0", children: /* @__PURE__ */ jsx("div", { className: "w-0 min-w-full px-3 py-3", children: expansion }) }) })
                   ] }, rowKey(row));
                 }),
                 slice.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
                   "td",
                   {
                     colSpan: totalColSpan,
-                    className: "px-3 py-4 text-center text-slate-500 dark:text-slate-400",
+                    className: "px-3 py-4 text-center text-[var(--text-muted)]",
                     children: empty ?? "\u2014"
                   }
                 ) })
@@ -679,12 +794,13 @@ function DataTable({
             totalPages,
             pageSize: paginationPageSize,
             total: paginationTotal,
-            onPage: isServer ? serverPagination.onPageChange : setPage,
+            onPage: goToPage,
             onPageSize: isServer ? (n) => serverPagination.onPageSizeChange?.(n) : (n) => {
               setPageSize(n);
               setPage(0);
             },
-            labels
+            labels,
+            locale
           }
         )
       ] }),
@@ -698,14 +814,14 @@ function DataTable({
           tabIndex: showSettings ? -1 : 0,
           className: cn(
             "group flex shrink-0 items-start justify-center overflow-hidden pt-3 transition-[width] duration-200 ease-out",
-            "border-l border-slate-100 dark:border-slate-800",
-            "hover:bg-slate-50 dark:hover:bg-slate-800/40",
+            "border-l border-[var(--border)]",
+            "hover:bg-[var(--bg-hover)]",
             showSettings ? "w-0 border-l-0" : "w-8 cursor-pointer"
           ),
           children: /* @__PURE__ */ jsx(
             "span",
             {
-              className: "whitespace-nowrap text-xs font-medium tracking-wide text-slate-500 group-hover:text-slate-700 dark:text-slate-400 dark:group-hover:text-slate-200",
+              className: "whitespace-nowrap text-xs font-medium tracking-wide text-[var(--text-muted)] group-hover:text-[var(--text-secondary)]",
               style: { writingMode: "vertical-rl", transform: "rotate(180deg)" },
               children: columnsCountLabel
             }
@@ -719,16 +835,16 @@ function DataTable({
             "shrink-0 overflow-hidden transition-[width] duration-200 ease-out",
             showSettings ? "w-56" : "w-0"
           ),
-          children: /* @__PURE__ */ jsxs("div", { className: "flex w-56 flex-col border-l border-slate-100 p-2 dark:border-slate-800", children: [
+          children: /* @__PURE__ */ jsxs("div", { className: "flex w-56 flex-col border-l border-[var(--border)] p-2", children: [
             /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between gap-1", children: [
-              /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-wide text-slate-500 dark:text-slate-400", children: columnsCountLabel }),
+              /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-wide text-[var(--text-muted)]", children: columnsCountLabel }),
               /* @__PURE__ */ jsx(Tooltip, { label: labels.close, portal: true, children: /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
                   onClick: () => setShowSettings(false),
                   "aria-label": labels.close,
-                  className: "rounded p-0.5 text-slate-400 hover:bg-slate-100 hover:text-slate-700 dark:text-slate-500 dark:hover:bg-slate-800 dark:hover:text-slate-200",
+                  className: "rounded p-0.5 text-[var(--text-placeholder)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]",
                   children: /* @__PURE__ */ jsx(X, { className: "size-4" })
                 }
               ) })
@@ -738,17 +854,17 @@ function DataTable({
               {
                 type: "button",
                 onClick: autoSizeAll,
-                className: "mb-2 rounded border border-slate-200 px-2 py-1 text-xs font-medium text-slate-600 hover:bg-slate-50 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800",
+                className: "mb-2 rounded border border-[var(--border)] px-2 py-1 text-xs font-medium text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]",
                 children: labels.autoSize
               }
             ),
             /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children: columns.map((col) => {
               const checked = !hiddenCols.has(col.key);
-              const headerLabel = typeof col.header === "string" ? col.header : col.key;
+              const headerLabel = columnLabel(col);
               return /* @__PURE__ */ jsxs(
                 "label",
                 {
-                  className: "inline-flex cursor-pointer items-center gap-1.5 rounded px-1 py-0.5 text-xs hover:bg-slate-100 dark:hover:bg-slate-800",
+                  className: "inline-flex cursor-pointer items-center gap-1.5 rounded px-1 py-0.5 text-xs hover:bg-[var(--bg-hover)]",
                   children: [
                     /* @__PURE__ */ jsx(
                       "input",
@@ -804,17 +920,17 @@ function MobileFilters({
     const s = filters[col.key];
     return s && isFilterActive(s);
   }).length;
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-slate-100 px-4 py-2 dark:border-slate-800", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-[var(--border)] px-4 py-2", children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
         onClick: () => setOpen(true),
-        className: "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800",
+        className: "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]",
         children: [
           /* @__PURE__ */ jsx(Filter, { className: "size-4" }),
           /* @__PURE__ */ jsx("span", { children: labels.filters }),
-          activeCount > 0 && /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-4 items-center justify-center rounded-full bg-sky-100 px-1 text-[11px] font-semibold text-sky-700 dark:bg-sky-500/20 dark:text-sky-300", children: activeCount })
+          activeCount > 0 && /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-4 items-center justify-center rounded-full bg-[var(--info-bg)] px-1 text-[11px] font-semibold text-[var(--info)]", children: activeCount })
         ]
       }
     ),
@@ -823,7 +939,7 @@ function MobileFilters({
       {
         type: "button",
         onClick: onClearAll,
-        className: "text-xs text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200",
+        className: "text-xs text-[var(--text-muted)] hover:text-[var(--text-secondary)]",
         children: labels.clearAll
       }
     ),
@@ -835,8 +951,8 @@ function MobileFilters({
           role: "dialog",
           "aria-modal": "true",
           ...backdropClose,
-          children: /* @__PURE__ */ jsxs("div", { className: "flex max-h-[85vh] w-full flex-col overflow-hidden rounded-t-2xl bg-white shadow-xl dark:bg-slate-900", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-slate-100 px-4 py-3 dark:border-slate-800", children: [
+          children: /* @__PURE__ */ jsxs("div", { className: "flex max-h-[85vh] w-full flex-col overflow-hidden rounded-t-2xl bg-[var(--bg-surface)] shadow-xl", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-[var(--border)] px-4 py-3", children: [
               /* @__PURE__ */ jsx("div", { className: "font-medium", children: labels.filters }),
               /* @__PURE__ */ jsx(
                 "button",
@@ -844,12 +960,12 @@ function MobileFilters({
                   type: "button",
                   onClick: () => setOpen(false),
                   "aria-label": labels.close,
-                  className: "-mr-1 rounded p-1.5 text-slate-500 hover:bg-slate-100 hover:text-slate-700 dark:hover:bg-slate-800 dark:hover:text-slate-200",
+                  className: "-mr-1 rounded p-1.5 text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]",
                   children: /* @__PURE__ */ jsx(X, { className: "size-5" })
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "flex-1 divide-y divide-slate-100 overflow-y-auto overscroll-contain dark:divide-slate-800", children: filterable.map(({ col, filter }) => {
+            /* @__PURE__ */ jsx("div", { className: "flex-1 divide-y divide-[var(--border)] overflow-y-auto overscroll-contain", children: filterable.map(({ col, filter }) => {
               const state = filters[col.key];
               const active = !!state && isFilterActive(state);
               const isItemOpen = expanded === col.key;
@@ -862,7 +978,7 @@ function MobileFilters({
                     "aria-expanded": isItemOpen,
                     className: "flex w-full items-center justify-between gap-2 px-4 py-3 text-left",
                     children: [
-                      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-sm font-medium text-slate-700 dark:text-slate-200", children: [
+                      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-sm font-medium text-[var(--text-secondary)]", children: [
                         col.header,
                         active && /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-brand" })
                       ] }),
@@ -870,7 +986,7 @@ function MobileFilters({
                         ChevronDown,
                         {
                           className: cn(
-                            "size-4 shrink-0 text-slate-400 transition-transform",
+                            "size-4 shrink-0 text-[var(--text-placeholder)] transition-transform",
                             isItemOpen && "rotate-180"
                           )
                         }
@@ -892,14 +1008,14 @@ function MobileFilters({
                 ) })
               ] }, col.key);
             }) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-t border-slate-100 px-4 py-3 dark:border-slate-800", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-t border-[var(--border)] px-4 py-3", children: [
               /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
                   onClick: onClearAll,
                   disabled: activeCount === 0,
-                  className: "text-sm text-slate-500 hover:text-slate-700 disabled:opacity-40 dark:text-slate-400 dark:hover:text-slate-200",
+                  className: "text-sm text-[var(--text-muted)] hover:text-[var(--text-secondary)] disabled:opacity-40",
                   children: labels.clearAll
                 }
               ),
@@ -908,7 +1024,7 @@ function MobileFilters({
                 {
                   type: "button",
                   onClick: () => setOpen(false),
-                  className: "rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white dark:bg-slate-100 dark:text-slate-900",
+                  className: "rounded-md bg-[var(--bg-inverse)] px-4 py-2 text-sm font-medium text-[var(--text-inverse)]",
                   children: labels.done
                 }
               )