@krizaka/ui 2.9.0 → 3.0.0

package/dist/data-table.js

@@ -1,14 +1,46 @@
 "use client";
+import {
+  useLayoutFallbacks,
+  useVirtualizer
+} from "./chunk-HCNOOPZE.js";
+import {
+  DropdownMenu,
+  FilterBar,
+  FilterMenu
+} from "./chunk-OGJI5X4W.js";
+import "./chunk-YH4LMWRU.js";
+import "./chunk-2USC2YT6.js";
+import {
+  SearchField
+} from "./chunk-FDCMBWUU.js";
+import "./chunk-ZIXB33X7.js";
 import {
   useControllable
-} from "./chunk-EUPTXKH7.js";
+} from "./chunk-BRKMQ6JV.js";
 import {
+  ChevronGlyph,
   SortGlyph
 } from "./chunk-CPA5CF35.js";
 
+// src/data-table/csv.ts
+var FORMULA = /^[=+\-@\t\r]/;
+function field(value) {
+  let text = value == null ? "" : value instanceof Date ? value.toISOString() : String(value);
+  if (typeof value === "string" && FORMULA.test(text)) text = `'${text}`;
+  return /[",\n\r;]/.test(text) || text !== text.trim() ? `"${text.replace(/"/g, '""')}"` : text;
+}
+function dataTableCsv(rows, columns, separator = ",") {
+  const lines = [columns.map((column) => field(column.header)).join(separator)];
+  for (const row of rows) {
+    lines.push(columns.map((column) => field(column.value ? column.value(row) : row[column.id])).join(separator));
+  }
+  return lines.join("\r\n");
+}
+
 // src/data-table/data-table.tsx
+import { useTable } from "@tanstack/react-table";
 import * as React from "react";
-import { tv as tv2 } from "tailwind-variants";
+import { tv as tv3 } from "tailwind-variants";
 
 // src/checkbox/checkbox.tsx
 import { Checkbox as CheckboxPrimitive } from "radix-ui";
@@ -28,58 +60,270 @@ function Dash() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-3.5 w-3.5", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" }) });
 }
 function Checkbox({ invalid, className, children, ...props }) {
-  const s = checkbox();
+  const s2 = checkbox();
   const box = /* @__PURE__ */ jsx(
     CheckboxPrimitive.Root,
     {
       "aria-invalid": invalid || void 0,
       "data-invalid": invalid ? "" : void 0,
-      className: s.root({ className: children ? "mt-0.5" : className }),
+      className: s2.root({ className: children ? "mt-0.5" : className }),
       ...props,
-      children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: s.indicator(), children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Dash, {}) : /* @__PURE__ */ jsx(Check, {}) })
+      children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: s2.indicator(), children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Dash, {}) : /* @__PURE__ */ jsx(Check, {}) })
     }
   );
   if (!children) return box;
-  return /* @__PURE__ */ jsxs("label", { className: s.label({ className }), children: [
+  return /* @__PURE__ */ jsxs("label", { className: s2.label({ className }), children: [
     box,
     /* @__PURE__ */ jsx("span", { className: "min-w-0", children })
   ] });
 }
 
+// src/pagination/pagination.tsx
+import { tv as tv2 } from "tailwind-variants";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var pagination = tv2({
+  slots: {
+    root: "@container flex w-full flex-wrap items-center justify-between gap-3 text-sm",
+    list: "flex items-center gap-1",
+    pages: "hidden items-center gap-1 @md:flex",
+    compact: "px-2 text-xs font-semibold tabular-nums text-fg-secondary @md:hidden",
+    item: "inline-flex h-9 min-w-9 select-none items-center justify-center gap-1.5 rounded-lg px-2.5 text-sm font-semibold tabular-nums text-fg-secondary transition-colors hover:bg-surface-2 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:bg-accent aria-[current=page]:text-on-accent aria-[current=page]:hover:bg-accent aria-disabled:pointer-events-none aria-disabled:opacity-40 disabled:pointer-events-none disabled:opacity-40",
+    edge: "border border-border-default bg-surface-1 px-3",
+    ellipsis: "inline-flex h-9 min-w-6 items-end justify-center pb-2 text-fg-muted",
+    status: "text-xs text-fg-secondary tabular-nums",
+    size: "flex items-center gap-2 text-xs text-fg-secondary",
+    select: "h-9 rounded-lg border border-border-default bg-surface-2 px-2 text-sm text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
+  }
+});
+var paginationLabels = {
+  nav: "Pagination",
+  previous: "Previous",
+  next: "Next",
+  page: (page) => `Page ${page}`,
+  compact: (page, count) => `Page ${page} of ${count}`,
+  pageSize: "Rows per page"
+};
+function pageRange(page, pageCount, siblings = 1, boundaries = 1) {
+  if (pageCount <= 2 * boundaries + 2 * siblings + 3) return Array.from({ length: Math.max(0, pageCount) }, (_, i) => i + 1);
+  const pages = /* @__PURE__ */ new Set();
+  for (let i = 1; i <= Math.min(boundaries, pageCount); i += 1) pages.add(i);
+  for (let i = Math.max(1, pageCount - boundaries + 1); i <= pageCount; i += 1) pages.add(i);
+  for (let i = Math.max(1, page - siblings); i <= Math.min(pageCount, page + siblings); i += 1) pages.add(i);
+  const sorted = [...pages].sort((a, b) => a - b);
+  const out = [];
+  sorted.forEach((n, i) => {
+    const prev = sorted[i - 1];
+    if (prev !== void 0 && n - prev === 2) out.push(prev + 1);
+    else if (prev !== void 0 && n - prev > 2) out.push("\u2026");
+    out.push(n);
+  });
+  return out;
+}
+function Item({ href, onClick, disabled, current, label, className, children }) {
+  const common = { "aria-label": label, "aria-current": current ? "page" : void 0, className };
+  if (href && !disabled) {
+    return /* @__PURE__ */ jsx2("a", { href, onClick, ...common, children });
+  }
+  if (href) {
+    return /* @__PURE__ */ jsx2("a", { role: "link", "aria-disabled": true, ...common, children });
+  }
+  return /* @__PURE__ */ jsx2("button", { type: "button", onClick, disabled, ...common, children });
+}
+function Pagination({
+  page = 1,
+  pageCount,
+  onPageChange,
+  getHref,
+  hasPrevious,
+  hasNext,
+  onPrevious,
+  onNext,
+  siblings = 1,
+  boundaries = 1,
+  status,
+  pageSize,
+  pageSizeOptions,
+  onPageSizeChange,
+  disabled,
+  labels: given,
+  className,
+  ...props
+}) {
+  const s2 = pagination();
+  const labels = { ...paginationLabels, ...given };
+  const paged = pageCount !== void 0;
+  const count = Math.max(1, pageCount ?? 1);
+  const current = Math.min(Math.max(1, page), count);
+  const canPrevious = paged ? current > 1 : Boolean(hasPrevious);
+  const canNext = paged ? current < count : Boolean(hasNext);
+  const go = (target) => () => onPageChange?.(target);
+  const href = (target) => paged && getHref ? getHref(target) : void 0;
+  return /* @__PURE__ */ jsxs2("nav", { "aria-label": labels.nav, className: s2.root({ className }), ...props, children: [
+    status !== void 0 || pageSizeOptions ? /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap items-center gap-4", children: [
+      status !== void 0 && /* @__PURE__ */ jsx2("p", { className: s2.status(), children: status }),
+      pageSizeOptions && pageSize !== void 0 && /* @__PURE__ */ jsxs2("label", { className: s2.size(), children: [
+        labels.pageSize,
+        /* @__PURE__ */ jsx2(
+          "select",
+          {
+            className: s2.select(),
+            value: pageSize,
+            disabled,
+            onChange: (event) => onPageSizeChange?.(Number(event.target.value)),
+            children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx2("option", { value: size, children: size }, size))
+          }
+        )
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsxs2("ul", { className: s2.list(), children: [
+      /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsxs2(
+        Item,
+        {
+          href: href(current - 1),
+          onClick: paged ? go(current - 1) : onPrevious,
+          disabled: disabled || !canPrevious,
+          label: labels.previous,
+          className: s2.item({ className: s2.edge() }),
+          children: [
+            /* @__PURE__ */ jsx2(ChevronGlyph, { direction: "left" }),
+            /* @__PURE__ */ jsx2("span", { className: "hidden @lg:inline", children: labels.previous })
+          ]
+        }
+      ) }),
+      paged && /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx2("li", { className: s2.pages(), children: /* @__PURE__ */ jsx2("ul", { className: "contents", children: pageRange(current, count, siblings, boundaries).map(
+          (n, i) => n === "\u2026" ? /* @__PURE__ */ jsx2("li", { "aria-hidden": true, className: s2.ellipsis(), children: "\u2026" }, `gap-${i}`) : /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsx2(Item, { href: href(n), onClick: go(n), disabled, current: n === current, label: labels.page(n), className: s2.item(), children: n }) }, n)
+        ) }) }),
+        /* @__PURE__ */ jsx2("li", { className: s2.compact(), children: labels.compact(current, count) })
+      ] }),
+      /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsxs2(
+        Item,
+        {
+          href: href(current + 1),
+          onClick: paged ? go(current + 1) : onNext,
+          disabled: disabled || !canNext,
+          label: labels.next,
+          className: s2.item({ className: s2.edge() }),
+          children: [
+            /* @__PURE__ */ jsx2("span", { className: "hidden @lg:inline", children: labels.next }),
+            /* @__PURE__ */ jsx2(ChevronGlyph, { direction: "right" })
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+
+// src/data-table/engine.ts
+import {
+  columnFacetingFeature,
+  columnFilteringFeature,
+  columnGroupingFeature,
+  columnPinningFeature,
+  columnResizingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createExpandedRowModel,
+  createFacetedMinMaxValues,
+  createFacetedRowModel,
+  createFacetedUniqueValues,
+  createFilteredRowModel,
+  createGroupedRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  rowExpandingFeature,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  tableFeatures
+} from "@tanstack/react-table";
+var features = tableFeatures({
+  columnFilteringFeature,
+  filteredRowModel: createFilteredRowModel(),
+  columnFacetingFeature,
+  facetedRowModel: createFacetedRowModel(),
+  facetedUniqueValues: createFacetedUniqueValues(),
+  facetedMinMaxValues: createFacetedMinMaxValues(),
+  columnGroupingFeature,
+  groupedRowModel: createGroupedRowModel(),
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  rowExpandingFeature,
+  expandedRowModel: createExpandedRowModel(),
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+  rowSelectionFeature,
+  columnVisibilityFeature,
+  columnPinningFeature,
+  columnSizingFeature,
+  columnResizingFeature
+});
+var empty = (value) => value == null || value === "";
+function compareValues(a, b) {
+  if (empty(a)) return empty(b) ? 0 : 1;
+  if (empty(b)) return -1;
+  if (a instanceof Date || b instanceof Date) return Number(a) - Number(b);
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  return String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
+}
+var sortByValue = (a, b, id) => compareValues(a.getValue(id), b.getValue(id));
+var filterText = (row, id, query) => String(row.getValue(id) ?? "").normalize("NFD").toLocaleLowerCase().includes(query.normalize("NFD").toLocaleLowerCase().trim());
+filterText.autoRemove = (value) => typeof value !== "string" || value.trim() === "";
+var filterFacet = (row, id, chosen) => chosen.includes(String(row.getValue(id) ?? ""));
+filterFacet.autoRemove = (value) => !Array.isArray(value) || value.length === 0;
+var filterRange = (row, id, [min, max]) => {
+  const raw = row.getValue(id);
+  if (empty(raw)) return false;
+  const value = Number(raw);
+  return (min == null || value >= min) && (max == null || value <= max);
+};
+filterRange.autoRemove = (value) => !Array.isArray(value) || value[0] == null && value[1] == null;
+var FILTERS = { text: filterText, facet: filterFacet, range: filterRange };
+
 // src/data-table/data-table.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var dataTable = tv2({
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var dataTable = tv3({
   slots: {
     root: "@container w-full overflow-hidden rounded-xl border border-border-default bg-surface-1",
+    toolbar: "border-b border-border-default p-3",
     scroller: "w-full overflow-x-auto",
     table: "w-full border-collapse text-left text-sm text-fg",
     caption: "px-4 pt-4 pb-2 text-left text-sm font-semibold text-fg",
     thead: "bg-surface-2/60",
     headRow: "border-b border-border-default",
-    th: "whitespace-nowrap px-4 py-3 text-xs font-semibold text-fg-secondary",
+    th: "relative whitespace-nowrap px-4 py-3 text-xs font-semibold text-fg-secondary",
     sortButton: "-mx-1.5 inline-flex items-center gap-1 rounded-md px-1.5 py-1 hover:bg-surface-3 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[pressed=true]:text-fg",
+    resizer: "absolute top-0 right-0 h-full w-1.5 cursor-col-resize touch-none select-none bg-transparent hover:bg-border-strong focus-visible:bg-accent focus-visible:outline-hidden data-[resizing]:bg-accent",
     tbody: "",
     tr: "border-b border-border-subtle transition-colors last:border-b-0 hover:bg-surface-2/50 data-[state=selected]:bg-accent-soft",
+    groupRow: "bg-surface-2/40 font-semibold",
     td: "px-4 py-3 align-middle",
     select: "w-10",
+    expander: "w-10",
+    toggle: "inline-flex h-7 min-w-7 items-center justify-center gap-1.5 rounded-md text-fg-secondary hover:bg-surface-3 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring [&[aria-expanded=true]>svg]:rotate-90 [&>svg]:transition-transform motion-reduce:[&>svg]:transition-none",
+    detail: "bg-surface-0 px-4 py-4",
     message: "px-4 py-10 text-center text-sm text-fg-secondary",
     skeleton: "h-4 w-full max-w-40 animate-pulse rounded bg-surface-3 motion-reduce:animate-none",
     footer: "border-t border-border-default px-4 py-3"
   },
   variants: {
     layout: {
-      table: {},
+      table: {
+        th: "data-[pin]:sticky data-[pin]:z-[2] data-[pin]:bg-surface-2 data-[pin=start]:left-(--dt-pin) data-[pin=end]:right-(--dt-pin)",
+        td: "data-[pin]:sticky data-[pin]:z-[1] data-[pin]:bg-surface-1 data-[pin=start]:left-(--dt-pin) data-[pin=end]:right-(--dt-pin)"
+      },
       // Below 36rem of container: cards. The sortable headers stay, as a row of sort buttons above the cards.
       auto: {
         table: "@max-xl:block",
         caption: "@max-xl:block",
         thead: "@max-xl:sr-only @max-xl:bg-transparent @max-xl:has-[[data-keep]]:not-sr-only @max-xl:has-[[data-keep]]:block",
         headRow: "@max-xl:flex @max-xl:flex-wrap @max-xl:items-center @max-xl:gap-2 @max-xl:px-3 @max-xl:py-2",
-        th: "@max-xl:sr-only @max-xl:data-[keep]:not-sr-only @max-xl:data-[keep]:block @max-xl:p-0",
+        th: "@max-xl:sr-only @max-xl:data-[keep]:not-sr-only @max-xl:data-[keep]:block @max-xl:p-0 @xl:data-[pin]:sticky @xl:data-[pin]:z-[2] @xl:data-[pin]:bg-surface-2 @xl:data-[pin=start]:left-(--dt-pin) @xl:data-[pin=end]:right-(--dt-pin)",
         tbody: "@max-xl:grid @max-xl:gap-3 @max-xl:p-3",
         tr: "@max-xl:relative @max-xl:grid @max-xl:gap-1.5 @max-xl:rounded-xl @max-xl:border @max-xl:border-border-default @max-xl:bg-surface-0 @max-xl:p-4 @max-xl:last:border-b",
-        td: "@max-xl:flex @max-xl:items-baseline @max-xl:justify-between @max-xl:gap-4 @max-xl:p-0 @max-xl:text-right @max-xl:before:shrink-0 @max-xl:before:text-xs @max-xl:before:font-semibold @max-xl:before:text-fg-secondary @max-xl:before:content-[attr(data-label)] @max-xl:data-[card=title]:order-first @max-xl:data-[card=title]:pr-8 @max-xl:data-[card=title]:text-left @max-xl:data-[card=title]:text-base @max-xl:data-[card=title]:font-semibold @max-xl:data-[card=title]:before:content-none @max-xl:data-[card=hidden]:hidden @max-xl:data-[card=message]:block @max-xl:data-[card=message]:text-center @max-xl:data-[card=message]:before:content-none",
-        select: "@max-xl:absolute @max-xl:right-3 @max-xl:top-3 @max-xl:w-auto @max-xl:before:content-none"
+        td: "@max-xl:flex @max-xl:items-baseline @max-xl:justify-between @max-xl:gap-4 @max-xl:p-0 @max-xl:text-right @max-xl:before:shrink-0 @max-xl:before:text-xs @max-xl:before:font-semibold @max-xl:before:text-fg-secondary @max-xl:before:content-[attr(data-label)] @max-xl:data-[card=title]:order-first @max-xl:data-[card=title]:pr-8 @max-xl:data-[card=title]:text-left @max-xl:data-[card=title]:text-base @max-xl:data-[card=title]:font-semibold @max-xl:data-[card=title]:before:content-none @max-xl:data-[card=hidden]:hidden @max-xl:data-[card=message]:block @max-xl:data-[card=message]:text-center @max-xl:data-[card=message]:before:content-none @xl:data-[pin]:sticky @xl:data-[pin]:z-[1] @xl:data-[pin]:bg-surface-1 @xl:data-[pin=start]:left-(--dt-pin) @xl:data-[pin=end]:right-(--dt-pin)",
+        select: "@max-xl:absolute @max-xl:right-3 @max-xl:top-3 @max-xl:w-auto @max-xl:before:content-none",
+        expander: "@max-xl:before:content-none"
       },
       cards: {
         table: "block",
@@ -90,7 +334,8 @@ var dataTable = tv2({
         tbody: "grid gap-3 p-3",
         tr: "relative grid gap-1.5 rounded-xl border border-border-default bg-surface-0 p-4 last:border-b",
         td: "flex items-baseline justify-between gap-4 p-0 text-right before:shrink-0 before:text-xs before:font-semibold before:text-fg-secondary before:content-[attr(data-label)] data-[card=title]:order-first data-[card=title]:pr-8 data-[card=title]:text-left data-[card=title]:text-base data-[card=title]:font-semibold data-[card=title]:before:content-none data-[card=hidden]:hidden data-[card=message]:block data-[card=message]:text-center data-[card=message]:before:content-none",
-        select: "absolute right-3 top-3 w-auto before:content-none"
+        select: "absolute right-3 top-3 w-auto before:content-none",
+        expander: "before:content-none"
       }
     },
     density: {
@@ -104,17 +349,34 @@ var dataTableLabels = {
   selectAll: "Select all rows",
   selectRow: (name) => `Select ${name}`,
   loading: "Loading",
-  empty: "Nothing to show"
+  empty: "Nothing to show",
+  details: "Details",
+  expandRow: (name) => `Show details of ${name}`,
+  group: (value, count) => `${value}, ${count} ${count === 1 ? "row" : "rows"}`,
+  resize: (header) => `Resize ${header}`,
+  results: (count) => `${count.toLocaleString("en")} ${count === 1 ? "row" : "rows"}`,
+  filters: "Filter the table",
+  clearFilters: "Clear filters",
+  removeFilter: (label) => `Remove ${label}`,
+  activeFilter: (header, value) => `${header}: ${value}`,
+  search: (header) => `Search ${header.toLocaleLowerCase()}`,
+  rangeFrom: (header) => `${header} from`,
+  rangeTo: (header) => `${header} to`,
+  columns: "Columns",
+  export: "Export CSV"
 };
-function compare(a, b) {
-  if (a == null || a === "") return b == null || b === "" ? 0 : 1;
-  if (b == null || b === "") return -1;
-  if (a instanceof Date || b instanceof Date) return Number(a) - Number(b);
-  if (typeof a === "number" && typeof b === "number") return a - b;
-  return String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
+var DataTableContext = React.createContext(null);
+function useDataTable() {
+  const context = React.useContext(DataTableContext);
+  if (!context) throw new Error("useDataTable: call it inside a DataTable (its `toolbar`, `footer` or a cell)");
+  return context;
 }
-var nextSort = (sort, column) => sort?.column !== column ? { column, direction: "ascending" } : sort.direction === "ascending" ? { column, direction: "descending" } : null;
 var ALIGN = { start: "text-left", center: "text-center", end: "text-right" };
+var NONE = [];
+var NO_RECORD = {};
+var apply = (updater, old) => typeof updater === "function" ? updater(old) : updater;
+var valueOf = (column, row) => column.value ? column.value(row) : row[column.id];
+var display = (value) => value instanceof Date ? value.toISOString() : String(value ?? "");
 function DataTable({
   rows,
   columns,
@@ -124,167 +386,698 @@ function DataTable({
   sort: sortProp,
   defaultSort = null,
   onSortChange,
-  manualSort,
+  filters: filtersProp,
+  defaultFilters = NO_RECORD,
+  onFiltersChange,
   selectable,
   selected: selectedProp,
-  defaultSelected = [],
+  defaultSelected = NONE,
   onSelectedChange,
   rowLabel,
+  groupBy: groupByProp,
+  defaultGroupBy = NONE,
+  onGroupByChange,
+  columnVisibility: visibilityProp,
+  defaultColumnVisibility = NO_RECORD,
+  onColumnVisibilityChange,
+  pinning,
+  resizing,
+  getSubRows,
+  renderDetail,
+  expanded: expandedProp,
+  defaultExpanded = NO_RECORD,
+  onExpandedChange,
+  pageSize: pageSizeProp,
+  defaultPageSize,
+  onPageSizeChange,
+  pageSizeOptions,
+  page: pageProp,
+  defaultPage = 1,
+  onPageChange,
+  manual,
+  rowCount,
+  onStateChange,
   loading,
   loadingRows = 5,
   error,
-  empty,
+  empty: empty2,
   layout = "auto",
   density,
-  virtualize,
+  virtualized,
+  toolbar,
   footer,
   labels: given,
   className
 }) {
   const labels = { ...dataTableLabels, ...given };
-  const s = dataTable({ layout: virtualize ? "table" : layout, density });
+  const effectiveLayout = virtualized ? "table" : layout;
+  const s2 = dataTable({ layout: effectiveLayout, density });
   const [sort, setSort] = useControllable(sortProp, defaultSort, onSortChange);
+  const [filters, setFiltersState] = useControllable(filtersProp, defaultFilters, onFiltersChange);
   const [selected, setSelected] = useControllable(selectedProp, defaultSelected, onSelectedChange);
-  const [scrollTop, setScrollTop] = React.useState(0);
-  const valueOf = (column, row) => column.value ? column.value(row) : row[column.id];
-  const sorted = React.useMemo(() => {
-    const column = sort && columns.find((c) => c.id === sort.column);
-    if (!column || manualSort) return rows;
-    const factor = sort.direction === "ascending" ? 1 : -1;
-    return [...rows].sort((a, b) => factor * compare(valueOf(column, a), valueOf(column, b)));
-  }, [rows, columns, sort, manualSort]);
-  const ids = sorted.map(getRowId);
+  const [groupBy, setGroupBy] = useControllable(groupByProp, defaultGroupBy, onGroupByChange);
+  const [visibility, setVisibility] = useControllable(visibilityProp, defaultColumnVisibility, onColumnVisibilityChange);
+  const [expanded, setExpanded] = useControllable(expandedProp, defaultExpanded, onExpandedChange);
+  const paginated = pageSizeProp !== void 0 || defaultPageSize !== void 0;
+  const [pageSize, setPageSize] = useControllable(pageSizeProp, defaultPageSize ?? Number.POSITIVE_INFINITY, onPageSizeChange);
+  const [page, setPage] = useControllable(pageProp, defaultPage, onPageChange);
+  const [sizing, setSizing] = React.useState({});
+  const [resizeState, setResizeState] = React.useState(void 0);
+  const announce = (next) => onStateChange?.({ sort, filters, page: paginated ? page : 1, pageSize: paginated ? pageSize : Number.POSITIVE_INFINITY, ...next });
+  const changeSort = (next) => {
+    setSort(next);
+    if (paginated && page !== 1) setPage(1);
+    announce({ sort: next, page: 1 });
+  };
+  const changeFilters = (next) => {
+    setFiltersState(next);
+    if (paginated && page !== 1) setPage(1);
+    announce({ filters: next, page: 1 });
+  };
+  const changePage = (next) => {
+    setPage(next);
+    announce({ page: next });
+  };
+  const changePageSize = (next) => {
+    setPageSize(next);
+    setPage(1);
+    announce({ pageSize: next, page: 1 });
+  };
+  const hasExpander = Boolean(renderDetail || getSubRows);
+  const defs = React.useMemo(
+    () => columns.map((column) => ({
+      id: column.id,
+      accessorFn: (row) => valueOf(column, row),
+      header: column.header,
+      enableSorting: Boolean(column.sortable),
+      sortFn: sortByValue,
+      sortUndefined: "last",
+      enableColumnFilter: Boolean(column.filter),
+      filterFn: column.filter ? FILTERS[column.filter] : FILTERS.text,
+      enableGrouping: Boolean(column.groupable),
+      enableHiding: column.hideable !== false,
+      enableResizing: Boolean(resizing),
+      ...column.width ? { size: column.width } : {},
+      minSize: column.minWidth ?? 64
+    })),
+    [columns, resizing]
+  );
+  const pageIndex = Math.max(0, page - 1);
+  const table = useTable({
+    features,
+    columns: defs,
+    data: rows,
+    getRowId: (row) => getRowId(row),
+    getSubRows: getSubRows ? (row) => getSubRows(row) : void 0,
+    getRowCanExpand: renderDetail ? () => true : void 0,
+    state: {
+      sorting: sort ? [{ id: sort.column, desc: sort.direction === "descending" }] : [],
+      columnFilters: Object.entries(filters).map(([id, value]) => ({ id, value })),
+      rowSelection: Object.fromEntries(selected.map((id) => [id, true])),
+      grouping: [...groupBy],
+      columnVisibility: { ...visibility },
+      expanded: { ...expanded },
+      pagination: { pageIndex, pageSize: paginated ? pageSize : Math.max(1, rows.length) },
+      columnPinning: { start: [...pinning?.start ?? []], end: [...pinning?.end ?? []] },
+      columnSizing: sizing,
+      ...resizeState ? { columnResizing: resizeState } : {}
+    },
+    onSortingChange: (updater) => {
+      const [first] = apply(updater, sort ? [{ id: sort.column, desc: sort.direction === "descending" }] : []);
+      changeSort(first ? { column: first.id, direction: first.desc ? "descending" : "ascending" } : null);
+    },
+    onColumnFiltersChange: (updater) => {
+      const next = apply(updater, Object.entries(filters).map(([id, value]) => ({ id, value })));
+      changeFilters(Object.fromEntries(next.map((f) => [f.id, f.value])));
+    },
+    onRowSelectionChange: (updater) => {
+      const next = apply(updater, Object.fromEntries(selected.map((id) => [id, true])));
+      setSelected(Object.keys(next).filter((id) => next[id]));
+    },
+    onGroupingChange: (updater) => setGroupBy(apply(updater, [...groupBy])),
+    onColumnVisibilityChange: (updater) => setVisibility(apply(updater, { ...visibility })),
+    onExpandedChange: (updater) => {
+      const next = apply(updater, { ...expanded });
+      setExpanded(next === true ? Object.fromEntries(table.getRowModel().rows.map((r) => [r.id, true])) : next);
+    },
+    onColumnSizingChange: (updater) => setSizing((old) => apply(updater, old)),
+    onColumnResizingChange: (updater) => setResizeState((old) => apply(updater, old)),
+    enableSortingRemoval: true,
+    sortDescFirst: false,
+    manualSorting: manual?.sorting,
+    manualFiltering: manual?.filtering,
+    manualPagination: manual?.pagination || !paginated,
+    rowCount: manual?.pagination ? rowCount : void 0,
+    autoResetPageIndex: false,
+    autoResetExpanded: false,
+    groupedColumnMode: false,
+    columnResizeMode: "onChange",
+    enableRowSelection: (row) => !row.getIsGrouped()
+  });
+  const visibleColumns = table.getVisibleLeafColumns();
+  const byId = new Map(columns.map((c) => [c.id, c]));
+  const pageRows = table.getRowModel().rows;
+  const leafCount = (manual?.pagination || manual?.filtering) && rowCount !== void 0 ? rowCount : table.getFilteredRowModel().rows.length;
+  const pageCount = paginated ? Math.max(1, manual?.pagination ? Math.ceil((rowCount ?? rows.length) / pageSize) : table.getPageCount()) : 1;
+  React.useEffect(() => {
+    if (paginated && !loading && page > pageCount) changePage(pageCount);
+  }, [pageCount]);
+  const selectableIds = pageRows.filter((r) => !r.getIsGrouped()).map((r) => r.id);
   const chosen = new Set(selected);
-  const allChosen = ids.length > 0 && ids.every((id) => chosen.has(id));
-  const someChosen = ids.some((id) => chosen.has(id));
-  const toggleAll = () => setSelected(allChosen ? selected.filter((id) => !ids.includes(id)) : [.../* @__PURE__ */ new Set([...selected, ...ids])]);
-  const toggle = (id) => setSelected(chosen.has(id) ? selected.filter((x) => x !== id) : [...selected, id]);
-  const span = columns.length + (selectable ? 1 : 0);
-  let windowed = sorted;
-  let before = 0;
-  let after = 0;
-  let offset = 0;
-  if (virtualize && !loading) {
-    const overscan = virtualize.overscan ?? 6;
-    const start = Math.max(0, Math.floor(scrollTop / virtualize.rowHeight) - overscan);
-    const end = Math.min(sorted.length, Math.ceil((scrollTop + virtualize.height) / virtualize.rowHeight) + overscan);
-    windowed = sorted.slice(start, end);
-    before = start * virtualize.rowHeight;
-    after = (sorted.length - end) * virtualize.rowHeight;
-    offset = start;
-  }
-  const message = (content, alert) => /* @__PURE__ */ jsx2("tr", { role: "row", className: s.tr({ className: "hover:bg-transparent" }), children: /* @__PURE__ */ jsx2("td", { role: "cell", colSpan: span, "data-card": "message", className: s.td({ className: s.message() }), children: alert ? /* @__PURE__ */ jsx2("div", { role: "alert", children: content }) : content }) });
+  const allChosen = selectableIds.length > 0 && selectableIds.every((id) => chosen.has(id));
+  const someChosen = selectableIds.some((id) => chosen.has(id));
+  const toggleAll = () => setSelected(allChosen ? selected.filter((id) => !selectableIds.includes(id)) : [.../* @__PURE__ */ new Set([...selected, ...selectableIds])]);
+  const span = visibleColumns.length + (selectable ? 1 : 0) + (hasExpander ? 1 : 0);
+  const fixedLayout = Boolean(resizing || pinning?.start?.length || pinning?.end?.length);
+  const nameOf = (row) => rowLabel ? rowLabel(row.original) : row.id;
+  const scroller = React.useRef(null);
+  const fallbacks = useLayoutFallbacks(virtualized?.height ?? 0, virtualized?.estimateRowHeight ?? 44);
+  const virtualizer = useVirtualizer({
+    ...fallbacks,
+    count: pageRows.length,
+    getScrollElement: () => scroller.current,
+    estimateSize: () => virtualized?.estimateRowHeight ?? 44,
+    overscan: virtualized?.overscan ?? 6,
+    initialRect: { width: 0, height: virtualized?.height ?? 0 },
+    getItemKey: (index) => pageRows[index]?.id ?? index,
+    enabled: Boolean(virtualized) && !loading
+  });
+  const windowItems = virtualized && !loading ? virtualizer.getVirtualItems() : null;
+  const before = windowItems?.[0]?.start ?? 0;
+  const after = windowItems && windowItems.length > 0 ? virtualizer.getTotalSize() - (windowItems.at(-1)?.end ?? 0) : 0;
+  const pin = (column) => {
+    const position = column.getIsPinned();
+    if (!position) return {};
+    const offset = position === "start" ? column.getStart("start") : column.getAfter("end");
+    return { "data-pin": position, style: { ["--dt-pin"]: `${offset}px` } };
+  };
+  const width = (column) => fixedLayout || byId.get(column.id)?.width ? { width: column.getSize() } : void 0;
+  const message = (content, alert) => /* @__PURE__ */ jsx3("tr", { role: "row", className: s2.tr({ className: "hover:bg-transparent" }), children: /* @__PURE__ */ jsx3("td", { role: "cell", colSpan: span, "data-card": "message", className: s2.td({ className: s2.message() }), children: alert ? /* @__PURE__ */ jsx3("div", { role: "alert", children: content }) : content }) });
+  const cardOf = (column) => column?.card === "title" ? "title" : column?.card === "hidden" ? "hidden" : void 0;
+  const dataCell = (row, cell, first) => {
+    const column = byId.get(cell.column.id);
+    if (!column) return null;
+    const { style, ...pinned } = pin(cell.column);
+    let content;
+    if (row.getIsGrouped()) {
+      const leaves = row.getLeafRows().filter((r) => !r.getIsGrouped()).map((r) => r.original);
+      if (cell.column.id === row.groupingColumnId) {
+        const value = display(row.groupingValue);
+        content = /* @__PURE__ */ jsxs3("button", { type: "button", className: s2.toggle({ className: "px-1.5 font-semibold text-fg" }), "aria-expanded": row.getIsExpanded(), onClick: row.getToggleExpandedHandler(), children: [
+          /* @__PURE__ */ jsx3(ChevronGlyph, { direction: "right", className: "h-4 w-4" }),
+          labels.group(value, leaves.length)
+        ] });
+      } else content = column.aggregate ? column.aggregate(leaves) : null;
+    } else content = column.cell ? column.cell(row.original) : display(valueOf(column, row.original));
+    return /* @__PURE__ */ jsx3(
+      "td",
+      {
+        role: "cell",
+        "data-label": column.header,
+        "data-card": row.getIsGrouped() ? cell.column.id === row.groupingColumnId ? "title" : column.aggregate ? void 0 : "hidden" : cardOf(column),
+        ...pinned,
+        className: s2.td({ className: ALIGN[column.align ?? "start"] }),
+        style: { ...style, ...first && row.depth > 0 && !row.getIsGrouped() ? { paddingInlineStart: `${1 + row.depth * 1.25}rem` } : {} },
+        children: content
+      },
+      cell.id
+    );
+  };
+  const renderRow = (row, index) => {
+    const isChosen = chosen.has(row.id);
+    const grouped = row.getIsGrouped();
+    const canExpand = !grouped && (renderDetail ? true : row.getCanExpand());
+    const cells = row.getVisibleCells();
+    const main = /* @__PURE__ */ jsxs3(
+      "tr",
+      {
+        role: "row",
+        "data-index": windowItems ? index : void 0,
+        ref: windowItems ? virtualizer.measureElement : void 0,
+        "aria-rowindex": virtualized ? index + 2 : void 0,
+        "data-state": isChosen ? "selected" : void 0,
+        "data-group": grouped ? "" : void 0,
+        className: s2.tr({ className: grouped ? s2.groupRow() : void 0 }),
+        children: [
+          selectable && /* @__PURE__ */ jsx3("td", { role: "cell", className: s2.td({ className: s2.select() }), children: grouped ? null : /* @__PURE__ */ jsx3(Checkbox, { checked: isChosen, onCheckedChange: () => row.toggleSelected(), "aria-label": labels.selectRow(nameOf(row)) }) }),
+          hasExpander && /* @__PURE__ */ jsx3("td", { role: "cell", className: s2.td({ className: s2.expander() }), children: canExpand ? /* @__PURE__ */ jsx3("button", { type: "button", className: s2.toggle(), "aria-expanded": row.getIsExpanded(), "aria-label": labels.expandRow(nameOf(row)), onClick: row.getToggleExpandedHandler(), children: /* @__PURE__ */ jsx3(ChevronGlyph, { direction: "right", className: "h-4 w-4" }) }) : null }),
+          cells.map((cell, i) => dataCell(row, cell, i === 0))
+        ]
+      },
+      row.id
+    );
+    if (!renderDetail || grouped || !row.getIsExpanded() || virtualized) return main;
+    return /* @__PURE__ */ jsxs3(React.Fragment, { children: [
+      main,
+      /* @__PURE__ */ jsx3("tr", { role: "row", className: s2.tr({ className: "hover:bg-transparent" }), children: /* @__PURE__ */ jsx3("td", { role: "cell", colSpan: span, "data-card": "message", className: s2.td({ className: s2.detail() }), children: renderDetail(row.original) }) })
+    ] }, row.id);
+  };
   let body;
   if (loading) {
-    body = Array.from({ length: loadingRows }, (_, i) => /* @__PURE__ */ jsxs2("tr", { role: "row", "aria-hidden": true, className: s.tr(), children: [
-      selectable && /* @__PURE__ */ jsx2("td", { role: "cell", className: s.td({ className: s.select() }) }),
-      columns.map((column) => /* @__PURE__ */ jsx2("td", { role: "cell", "data-card": column.card === "title" ? "title" : column.card === "hidden" ? "hidden" : void 0, className: s.td(), children: /* @__PURE__ */ jsx2("div", { className: s.skeleton() }) }, column.id))
+    body = Array.from({ length: loadingRows }, (_, i) => /* @__PURE__ */ jsxs3("tr", { role: "row", "aria-hidden": true, className: s2.tr(), children: [
+      selectable && /* @__PURE__ */ jsx3("td", { role: "cell", className: s2.td({ className: s2.select() }) }),
+      hasExpander && /* @__PURE__ */ jsx3("td", { role: "cell", className: s2.td({ className: s2.expander() }) }),
+      visibleColumns.map((column) => /* @__PURE__ */ jsx3("td", { role: "cell", "data-card": cardOf(byId.get(column.id)), className: s2.td(), children: /* @__PURE__ */ jsx3("div", { className: s2.skeleton() }) }, column.id))
     ] }, `loading-${i}`));
   } else if (error) body = message(error, true);
-  else if (sorted.length === 0) body = message(empty ?? labels.empty);
-  else {
-    body = windowed.map((row, i) => {
-      const id = getRowId(row);
-      const isChosen = chosen.has(id);
-      return /* @__PURE__ */ jsxs2(
-        "tr",
-        {
-          role: "row",
-          "aria-rowindex": virtualize ? offset + i + 2 : void 0,
-          "data-state": isChosen ? "selected" : void 0,
-          className: s.tr(),
-          style: virtualize ? { height: virtualize.rowHeight } : void 0,
-          children: [
-            selectable && /* @__PURE__ */ jsx2("td", { role: "cell", className: s.td({ className: s.select() }), children: /* @__PURE__ */ jsx2(Checkbox, { checked: isChosen, onCheckedChange: () => toggle(id), "aria-label": labels.selectRow(rowLabel ? rowLabel(row) : id) }) }),
-            columns.map((column) => /* @__PURE__ */ jsx2(
-              "td",
-              {
-                role: "cell",
-                "data-label": column.header,
-                "data-card": column.card === "title" ? "title" : column.card === "hidden" ? "hidden" : void 0,
-                className: s.td({ className: ALIGN[column.align ?? "start"] }),
-                children: column.cell ? column.cell(row) : String(valueOf(column, row) ?? "")
-              },
-              column.id
-            ))
-          ]
-        },
-        id
-      );
-    });
-  }
-  const table = /* @__PURE__ */ jsxs2(
+  else if (pageRows.length === 0) body = message(empty2 ?? labels.empty);
+  else if (windowItems) body = windowItems.map((item) => renderRow(pageRows[item.index], item.index));
+  else body = pageRows.map((row, i) => renderRow(row, i));
+  const headers = table.getHeaderGroups().at(-1)?.headers ?? [];
+  const tableElement = /* @__PURE__ */ jsxs3(
     "table",
     {
       role: "table",
       "aria-busy": loading || void 0,
-      "aria-rowcount": virtualize ? sorted.length + 1 : void 0,
-      className: s.table(),
+      "aria-rowcount": virtualized ? pageRows.length + 1 : void 0,
+      className: s2.table({ className: fixedLayout ? "table-fixed" : void 0 }),
+      style: fixedLayout ? { minWidth: table.getTotalSize() + (selectable ? 40 : 0) + (hasExpander ? 40 : 0) } : void 0,
       children: [
-        /* @__PURE__ */ jsxs2("caption", { className: showCaption ? s.caption() : "sr-only", children: [
+        /* @__PURE__ */ jsxs3("caption", { className: showCaption ? s2.caption() : "sr-only", children: [
           caption,
-          loading ? /* @__PURE__ */ jsx2("span", { className: "sr-only", children: ` \u2014 ${labels.loading}` }) : null
+          loading ? /* @__PURE__ */ jsx3("span", { className: "sr-only", children: ` \u2014 ${labels.loading}` }) : null
         ] }),
-        /* @__PURE__ */ jsx2("thead", { role: "rowgroup", className: s.thead({ className: virtualize ? "sticky top-0 z-10 bg-surface-2" : void 0 }), children: /* @__PURE__ */ jsxs2("tr", { role: "row", "aria-rowindex": virtualize ? 1 : void 0, className: s.headRow(), children: [
-          selectable && /* @__PURE__ */ jsx2("th", { role: "columnheader", scope: "col", "data-keep": "", className: s.th({ className: s.select() }), children: /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx3("thead", { role: "rowgroup", className: s2.thead({ className: virtualized ? "sticky top-0 z-10 bg-surface-2" : void 0 }), children: /* @__PURE__ */ jsxs3("tr", { role: "row", "aria-rowindex": virtualized ? 1 : void 0, className: s2.headRow(), children: [
+          selectable && /* @__PURE__ */ jsx3("th", { role: "columnheader", scope: "col", "data-keep": "", className: s2.th({ className: s2.select() }), children: /* @__PURE__ */ jsx3(
             Checkbox,
             {
               checked: allChosen ? true : someChosen ? "indeterminate" : false,
               onCheckedChange: toggleAll,
-              disabled: loading || ids.length === 0,
+              disabled: loading || selectableIds.length === 0,
               "aria-label": labels.selectAll
             }
           ) }),
-          columns.map((column) => {
-            const direction = sort?.column === column.id ? sort.direction : void 0;
-            return /* @__PURE__ */ jsx2(
+          hasExpander && /* @__PURE__ */ jsx3("th", { role: "columnheader", scope: "col", className: s2.th({ className: s2.expander() }), children: /* @__PURE__ */ jsx3("span", { className: "sr-only", children: labels.details }) }),
+          headers.map((header) => {
+            const column = byId.get(header.column.id);
+            if (!column) return null;
+            const sorted = header.column.getIsSorted();
+            const direction = sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : void 0;
+            const { style, ...pinned } = pin(header.column);
+            return /* @__PURE__ */ jsxs3(
               "th",
               {
                 role: "columnheader",
                 scope: "col",
                 "aria-sort": column.sortable ? direction ?? "none" : void 0,
                 "data-keep": column.sortable ? "" : void 0,
-                className: s.th({ className: ALIGN[column.align ?? "start"] }),
-                style: column.width ? { width: column.width } : void 0,
-                children: column.sortable ? /* @__PURE__ */ jsxs2("button", { type: "button", "aria-pressed": Boolean(direction), className: s.sortButton(), onClick: () => setSort(nextSort(sort, column.id)), children: [
-                  column.header,
-                  /* @__PURE__ */ jsx2(SortGlyph, { direction, className: "h-3.5 w-3.5" })
-                ] }) : column.headerHidden ? /* @__PURE__ */ jsx2("span", { className: "sr-only", children: column.header }) : column.header
+                ...pinned,
+                className: s2.th({ className: ALIGN[column.align ?? "start"] }),
+                style: { ...style, ...width(header.column) },
+                children: [
+                  column.sortable ? /* @__PURE__ */ jsxs3("button", { type: "button", "aria-pressed": Boolean(direction), className: s2.sortButton(), onClick: () => header.column.toggleSorting(void 0, false), children: [
+                    column.header,
+                    /* @__PURE__ */ jsx3(SortGlyph, { direction, className: "h-3.5 w-3.5" })
+                  ] }) : column.headerHidden ? /* @__PURE__ */ jsx3("span", { className: "sr-only", children: column.header }) : column.header,
+                  resizing && header.column.getCanResize() ? /* @__PURE__ */ jsx3(
+                    ResizeHandle,
+                    {
+                      label: labels.resize(column.header),
+                      size: header.column.getSize(),
+                      min: column.minWidth ?? 64,
+                      resizing: header.column.getIsResizing(),
+                      className: s2.resizer(),
+                      onPointerStart: header.getResizeHandler(),
+                      onSize: (size) => setSizing((old) => ({ ...old, [header.column.id]: size }))
+                    }
+                  ) : null
+                ]
               },
-              column.id
+              header.id
             );
           })
         ] }) }),
-        /* @__PURE__ */ jsxs2("tbody", { role: "rowgroup", className: s.tbody(), children: [
-          before > 0 && /* @__PURE__ */ jsx2("tr", { "aria-hidden": true, style: { height: before }, children: /* @__PURE__ */ jsx2("td", { colSpan: span }) }),
+        /* @__PURE__ */ jsxs3("tbody", { role: "rowgroup", className: s2.tbody(), children: [
+          before > 0 && /* @__PURE__ */ jsx3("tr", { "aria-hidden": true, style: { height: before }, children: /* @__PURE__ */ jsx3("td", { colSpan: span }) }),
           body,
-          after > 0 && /* @__PURE__ */ jsx2("tr", { "aria-hidden": true, style: { height: after }, children: /* @__PURE__ */ jsx2("td", { colSpan: span }) })
+          after > 0 && /* @__PURE__ */ jsx3("tr", { "aria-hidden": true, style: { height: after }, children: /* @__PURE__ */ jsx3("td", { colSpan: span }) })
         ] })
       ]
     }
   );
-  return /* @__PURE__ */ jsxs2("div", { className: s.root({ className }), children: [
-    virtualize ? (
+  const context = {
+    table,
+    columns,
+    labels,
+    filters,
+    setFilters: changeFilters,
+    resultCount: leafCount,
+    exportRows: () => table.getSortedRowModel().flatRows.filter((r) => !r.getIsGrouped()).map((r) => r.original),
+    manualFiltering: Boolean(manual?.filtering)
+  };
+  const pagination2 = paginated ? /* @__PURE__ */ jsx3(
+    Pagination,
+    {
+      page: Math.min(page, pageCount),
+      pageCount,
+      onPageChange: changePage,
+      pageSize: pageSizeOptions ? pageSize : void 0,
+      pageSizeOptions,
+      onPageSizeChange: pageSizeOptions ? changePageSize : void 0,
+      disabled: loading,
+      labels: labels.pagination
+    }
+  ) : null;
+  return /* @__PURE__ */ jsx3(DataTableContext.Provider, { value: context, children: /* @__PURE__ */ jsxs3("div", { className: s2.root({ className }), children: [
+    toolbar ? /* @__PURE__ */ jsx3("div", { className: s2.toolbar(), children: toolbar }) : null,
+    virtualized ? (
       // A scrolling region the keyboard can reach: Tab lands on it, the arrows scroll it.
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3(
         "div",
         {
+          ref: scroller,
           tabIndex: 0,
           role: "region",
           "aria-label": caption,
-          className: s.scroller({ className: "overflow-y-auto focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring" }),
-          style: { height: virtualize.height },
-          onScroll: (event) => setScrollTop(event.currentTarget.scrollTop),
-          children: table
+          className: s2.scroller({ className: "overflow-y-auto focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring" }),
+          style: { height: virtualized.height },
+          children: tableElement
         }
       )
-    ) : /* @__PURE__ */ jsx2("div", { className: s.scroller(), children: table }),
-    footer ? /* @__PURE__ */ jsx2("div", { className: s.footer(), children: footer }) : null
+    ) : /* @__PURE__ */ jsx3("div", { className: s2.scroller(), children: tableElement }),
+    pagination2 || footer ? /* @__PURE__ */ jsxs3("div", { className: s2.footer({ className: "flex flex-col gap-3" }), children: [
+      pagination2,
+      footer
+    ] }) : null
+  ] }) });
+}
+function ResizeHandle({
+  label,
+  size,
+  min,
+  resizing,
+  className,
+  onPointerStart,
+  onSize
+}) {
+  return (
+    // A focusable separator is interactive (WAI-ARIA "window splitter"): its value is the width, the arrows change it.
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        role: "separator",
+        "aria-orientation": "vertical",
+        "aria-label": label,
+        "aria-valuenow": Math.round(size),
+        "aria-valuemin": min,
+        tabIndex: 0,
+        "data-resizing": resizing ? "" : void 0,
+        className,
+        onMouseDown: onPointerStart,
+        onTouchStart: onPointerStart,
+        onClick: (event) => event.stopPropagation(),
+        onKeyDown: (event) => {
+          const step = event.shiftKey ? 48 : 16;
+          if (event.key === "ArrowLeft") onSize(Math.max(min, size - step));
+          else if (event.key === "ArrowRight") onSize(size + step);
+          else return;
+          event.preventDefault();
+        }
+      }
+    )
+  );
+}
+
+// src/button/button.tsx
+import { Slot } from "radix-ui";
+import { tv as tv4 } from "tailwind-variants";
+
+// src/spinner/glyph.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var HEX = "M12 3 19.79 7.5 19.79 16.5 12 21 4.21 16.5 4.21 7.5Z";
+function LoaderGlyph({ state = "loading", value, ...props }) {
+  const known = typeof value === "number" && Number.isFinite(value);
+  const fill = state !== "loading" ? 100 : known ? Math.round(Math.min(1, Math.max(0, value)) * 100) : null;
+  return /* @__PURE__ */ jsxs4("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, "data-state": state, "data-progress": fill === null ? void 0 : fill, ...props, children: [
+    /* @__PURE__ */ jsx4("path", { d: HEX, stroke: "currentColor", strokeOpacity: "0.22", strokeWidth: "2.2", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx4(
+      "path",
+      {
+        d: HEX,
+        pathLength: 100,
+        stroke: "currentColor",
+        strokeWidth: "2.2",
+        strokeLinejoin: "round",
+        strokeLinecap: "round",
+        className: "kz-loader-trace",
+        strokeDasharray: fill === null ? void 0 : `${fill} ${100 - fill}`
+      }
+    ),
+    state === "loading" && /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "2.6", fill: "currentColor", className: "kz-loader-node" }),
+    state === "success" && /* @__PURE__ */ jsx4("path", { d: "M8.3 12.3l2.6 2.6 4.9-5.3", pathLength: 20, stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", className: "kz-loader-mark" }),
+    state === "error" && /* @__PURE__ */ jsx4("path", { d: "M9.4 9.4l5.2 5.2M14.6 9.4l-5.2 5.2", pathLength: 20, stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", className: "kz-loader-mark" })
   ] });
 }
+
+// src/button/button.tsx
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var buttonVariants = tv4({
+  base: "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98] [&[data-loading]]:opacity-100",
+  variants: {
+    variant: {
+      primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover",
+      // The brand's signature: accent → accent-2 (on-accent reads on both stops, tested in @krizaka/tokens).
+      gradient: "bg-linear-to-r from-accent to-accent-2 text-on-accent shadow-sm hover:brightness-110",
+      secondary: "border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3",
+      outline: "border border-border-default bg-transparent text-fg hover:border-accent hover:text-fg-accent",
+      ghost: "text-fg-secondary hover:bg-surface-2 hover:text-fg",
+      // The border and the tint carry the danger; the label stays the primary text role, legible on the tint at rest
+      // and hovered over every surface (`text-fg-danger` is for text set directly on a surface).
+      danger: "border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20"
+    },
+    size: { sm: "h-8 px-3 text-xs", md: "h-10 px-4 text-sm", lg: "h-12 px-6 text-sm", icon: "h-10 w-10" },
+    // `cut`: the Krizaka chamfer — 45° corners (CSS corner-shape, where supported; rounded elsewhere). The border, the
+    // focus ring and the hover follow the cut, unlike a clip-path.
+    shape: { rounded: "rounded-lg", pill: "rounded-full", cut: "rounded-[10px] [corner-shape:bevel]" }
+  },
+  defaultVariants: { variant: "secondary", size: "md", shape: "rounded" }
+});
+var STATUS_TEXT = { success: "text-fg-success", error: "text-fg-danger" };
+function Button({
+  asChild,
+  loading,
+  progress,
+  status,
+  announce,
+  indicator = true,
+  shimmer,
+  magnetic,
+  variant,
+  size,
+  shape,
+  className,
+  disabled,
+  children,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button";
+  const known = loading && typeof progress === "number" && Number.isFinite(progress);
+  const ratio = known ? Math.min(1, Math.max(0, progress)) : 0;
+  const glyph = indicator && !asChild && (loading || status) ? status ?? "loading" : null;
+  const filled = variant === "primary" || variant === "gradient";
+  const button = /* @__PURE__ */ jsx5(
+    Comp,
+    {
+      type: asChild ? void 0 : "button",
+      "aria-busy": loading || void 0,
+      "data-loading": loading ? "" : void 0,
+      "data-variant": variant ?? "secondary",
+      "data-kz-status": status ?? void 0,
+      "data-kz-magnetic": magnetic ? "" : void 0,
+      disabled: asChild ? void 0 : disabled || loading,
+      "aria-disabled": asChild && (disabled || loading) ? true : void 0,
+      className: buttonVariants({
+        variant,
+        size,
+        shape,
+        className: [known && "relative isolate overflow-hidden", shimmer && "kz-sheen", className].filter(Boolean).join(" ") || void 0
+      }),
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsxs5(Fragment3, { children: [
+        known && /* @__PURE__ */ jsx5("span", { "aria-hidden": true, className: "absolute inset-y-0 left-0 -z-10 bg-current opacity-15 transition-[width] duration-500", style: { width: `${ratio * 100}%` } }),
+        glyph && /* @__PURE__ */ jsx5(
+          "span",
+          {
+            "aria-hidden": true,
+            "data-slot": "indicator",
+            className: "-my-1 grid grid-cols-[1fr] transition-[grid-template-columns,margin,opacity] duration-300 starting:-mr-2 starting:grid-cols-[0fr] starting:opacity-0",
+            children: /* @__PURE__ */ jsx5("span", { className: "overflow-hidden", children: /* @__PURE__ */ jsx5(LoaderGlyph, { state: glyph, value: known ? ratio : null, className: ["h-4 w-4", glyph !== "loading" && !filled && STATUS_TEXT[glyph]].filter(Boolean).join(" ") }) })
+          }
+        ),
+        children
+      ] })
+    }
+  );
+  if (announce === void 0 || asChild) return button;
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    button,
+    /* @__PURE__ */ jsx5("span", { role: "status", className: "sr-only", children: announce })
+  ] });
+}
+
+// src/field/field.tsx
+import { tv as tv5 } from "tailwind-variants";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var field2 = tv5({
+  slots: {
+    root: "flex flex-col gap-1.5",
+    label: "text-xs font-semibold text-fg-secondary",
+    control: "flex h-11 w-full rounded-lg border border-border-default bg-surface-2 px-3 text-sm text-fg placeholder:text-fg-muted transition-[border-color,box-shadow] focus-visible:border-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-danger/30",
+    hint: "text-xs text-fg-secondary",
+    // The message reads in the danger text role (≥ 4.5:1 on every surface, both themes); the dot is the danger fill.
+    error: "flex items-center gap-1.5 text-xs font-medium text-fg-danger before:h-1.5 before:w-1.5 before:shrink-0 before:rounded-full before:bg-danger",
+    selectWrap: "relative flex w-full",
+    chevron: "pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-fg-secondary"
+  }
+});
+var s = field2();
+var invalidProps = (invalid) => invalid ? { "aria-invalid": true, "data-invalid": "" } : {};
+function Input({ invalid, className, ...props }) {
+  return /* @__PURE__ */ jsx6("input", { ...invalidProps(invalid), className: s.control({ className }), ...props });
+}
+
+// src/data-table/toolbar.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var asRange = (value) => Array.isArray(value) && value.length === 2 && (typeof value[0] !== "string" || typeof value[1] !== "string") ? [value[0], value[1]] : [null, null];
+var asList = (value) => Array.isArray(value) ? value : [];
+var number = (text) => text.trim() === "" || Number.isNaN(Number(text)) ? null : Number(text);
+function DataTableFilters({ debounce = 250, children, className }) {
+  const { table, columns, labels, filters, setFilters, resultCount, manualFiltering } = useDataTable();
+  const set = (id, value) => {
+    const next = { ...filters };
+    if (value === null || value === "" || Array.isArray(value) && (value.length === 0 || value.length === 2 && value[0] == null && value[1] == null)) delete next[id];
+    else next[id] = value;
+    setFilters(next);
+  };
+  const filterable = columns.filter((column) => column.filter);
+  const optionsOf = (column) => {
+    if (column.options) return column.options;
+    const facets = manualFiltering ? /* @__PURE__ */ new Map() : table.getColumn(column.id)?.getFacetedUniqueValues() ?? /* @__PURE__ */ new Map();
+    return [...facets.entries()].filter(([value]) => value != null && value !== "").map(([value, count]) => ({ value: String(value), label: String(value), count })).sort((a, b) => a.label.localeCompare(b.label, void 0, { numeric: true }));
+  };
+  const active = filterable.flatMap((column) => {
+    const value = filters[column.id];
+    if (value === void 0) return [];
+    let text;
+    if (column.filter === "facet") {
+      const options = optionsOf(column);
+      text = asList(value).map((v) => options.find((o) => o.value === v)?.label ?? v).join(", ");
+    } else if (column.filter === "range") {
+      const [min, max] = asRange(value);
+      text = `${min ?? "\u2026"}\u2013${max ?? "\u2026"}`;
+    } else text = String(value);
+    const label = labels.activeFilter(column.header, text);
+    return [{ id: column.id, label, onRemove: () => set(column.id, null) }];
+  });
+  return /* @__PURE__ */ jsxs7(
+    FilterBar,
+    {
+      label: labels.filters,
+      active,
+      onClearAll: () => setFilters({}),
+      clearLabel: labels.clearFilters,
+      removeLabel: labels.removeFilter,
+      results: labels.results(resultCount),
+      className,
+      children: [
+        filterable.map((column) => {
+          if (column.filter === "text")
+            return /* @__PURE__ */ jsx7(
+              SearchField,
+              {
+                label: labels.search(column.header),
+                placeholder: labels.search(column.header),
+                value: typeof filters[column.id] === "string" ? void 0 : "",
+                defaultValue: typeof filters[column.id] === "string" ? filters[column.id] : void 0,
+                debounce,
+                onSearch: (query) => set(column.id, query),
+                landmark: false,
+                size: "sm",
+                className: "min-w-48 flex-1"
+              },
+              column.id
+            );
+          if (column.filter === "facet")
+            return /* @__PURE__ */ jsx7(FilterMenu, { label: column.header, options: optionsOf(column), value: asList(filters[column.id]), onValueChange: (value) => set(column.id, value) }, column.id);
+          const [min, max] = asRange(filters[column.id]);
+          const bounds = manualFiltering ? void 0 : table.getColumn(column.id)?.getFacetedMinMaxValues();
+          return /* @__PURE__ */ jsxs7("span", { className: "inline-flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx7(
+              Input,
+              {
+                type: "number",
+                inputMode: "decimal",
+                "aria-label": labels.rangeFrom(column.header),
+                placeholder: bounds ? String(bounds[0]) : labels.rangeFrom(column.header),
+                value: min ?? "",
+                onChange: (event) => set(column.id, [number(event.currentTarget.value), max]),
+                className: "h-11 w-28"
+              }
+            ),
+            /* @__PURE__ */ jsx7("span", { "aria-hidden": true, className: "text-fg-secondary", children: "\u2013" }),
+            /* @__PURE__ */ jsx7(
+              Input,
+              {
+                type: "number",
+                inputMode: "decimal",
+                "aria-label": labels.rangeTo(column.header),
+                placeholder: bounds ? String(bounds[1]) : labels.rangeTo(column.header),
+                value: max ?? "",
+                onChange: (event) => set(column.id, [min, number(event.currentTarget.value)]),
+                className: "h-11 w-28"
+              }
+            )
+          ] }, column.id);
+        }),
+        children
+      ]
+    }
+  );
+}
+function DataTableColumnsMenu({ defaultOpen, className }) {
+  const { table, columns, labels } = useDataTable();
+  return /* @__PURE__ */ jsxs7(DropdownMenu.Root, { defaultOpen, modal: false, children: [
+    /* @__PURE__ */ jsx7(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs7(Button, { variant: "outline", size: "sm", className, children: [
+      labels.columns,
+      /* @__PURE__ */ jsx7(ChevronGlyph, { className: "h-4 w-4" })
+    ] }) }),
+    /* @__PURE__ */ jsx7(DropdownMenu.Content, { align: "end", "aria-label": labels.columns, children: columns.filter((column) => column.hideable !== false).map((column) => {
+      const instance = table.getColumn(column.id);
+      return /* @__PURE__ */ jsx7(
+        DropdownMenu.CheckboxItem,
+        {
+          checked: instance?.getIsVisible() ?? true,
+          onSelect: (event) => event.preventDefault(),
+          onCheckedChange: (checked) => instance?.toggleVisibility(Boolean(checked)),
+          children: column.header
+        },
+        column.id
+      );
+    }) })
+  ] });
+}
+function DataTableExport({ filename = "export.csv", onExport, className }) {
+  const { table, columns, labels, exportRows } = useDataTable();
+  const run = () => {
+    const visible = columns.filter((column) => table.getColumn(column.id)?.getIsVisible() !== false);
+    const csv = dataTableCsv(exportRows(), visible);
+    if (onExport) return onExport(csv);
+    const url = URL.createObjectURL(new Blob(["\uFEFF", csv], { type: "text/csv;charset=utf-8" }));
+    const link = Object.assign(document.createElement("a"), { href: url, download: filename });
+    link.click();
+    setTimeout(() => URL.revokeObjectURL(url), 0);
+  };
+  return /* @__PURE__ */ jsx7(Button, { variant: "outline", size: "sm", className, onClick: run, children: labels.export });
+}
 export {
   DataTable,
+  DataTableColumnsMenu,
+  DataTableExport,
+  DataTableFilters,
+  compareValues,
   dataTable,
-  dataTableLabels
+  dataTableCsv,
+  dataTableLabels,
+  useDataTable
 };
 //# sourceMappingURL=data-table.js.map