@krizaka/ui 3.21.0 → 3.22.0

package/dist/chunk-R6NK6ZNY.js

@@ -0,0 +1,1080 @@
+"use client";
+import {
+  Checkbox
+} from "./chunk-7Z4KHPFC.js";
+import {
+  Button
+} from "./chunk-3BC4XQ6C.js";
+import {
+  useLayoutFallbacks,
+  useVirtualizer
+} from "./chunk-KVDB4GXV.js";
+import {
+  DropdownMenu,
+  FilterBar,
+  FilterMenu
+} from "./chunk-FKBHWS4N.js";
+import {
+  cn
+} from "./chunk-2FRWNSRO.js";
+import {
+  SearchField
+} from "./chunk-REPTKUJ6.js";
+import {
+  useControllable
+} from "./chunk-FZBWEDQI.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";
+
+// src/pagination/pagination.tsx
+import { tv } from "tailwind-variants";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var pagination = tv({
+  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__ */ jsx("a", { href, onClick, ...common, children });
+  }
+  if (href) {
+    return /* @__PURE__ */ jsx("a", { role: "link", "aria-disabled": true, ...common, children });
+  }
+  return /* @__PURE__ */ jsx("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__ */ jsxs("nav", { "aria-label": labels.nav, className: s2.root({ className }), ...props, children: [
+    status !== void 0 || pageSizeOptions ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [
+      status !== void 0 && /* @__PURE__ */ jsx("p", { className: s2.status(), children: status }),
+      pageSizeOptions && pageSize !== void 0 && /* @__PURE__ */ jsxs("label", { className: s2.size(), children: [
+        labels.pageSize,
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            className: s2.select(),
+            value: pageSize,
+            disabled,
+            onChange: (event) => onPageSizeChange?.(Number(event.target.value)),
+            children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx("option", { value: size, children: size }, size))
+          }
+        )
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsxs("ul", { className: s2.list(), children: [
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+        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__ */ jsx(ChevronGlyph, { direction: "left" }),
+            /* @__PURE__ */ jsx("span", { className: "hidden @lg:inline", children: labels.previous })
+          ]
+        }
+      ) }),
+      paged && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("li", { className: s2.pages(), children: /* @__PURE__ */ jsx("ul", { className: "contents", children: pageRange(current, count, siblings, boundaries).map(
+          (n, i) => n === "\u2026" ? /* @__PURE__ */ jsx("li", { "aria-hidden": true, className: s2.ellipsis(), children: "\u2026" }, `gap-${i}`) : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Item, { href: href(n), onClick: go(n), disabled, current: n === current, label: labels.page(n), className: s2.item(), children: n }) }, n)
+        ) }) }),
+        /* @__PURE__ */ jsx("li", { className: s2.compact(), children: labels.compact(current, count) })
+      ] }),
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+        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__ */ jsx("span", { className: "hidden @lg:inline", children: labels.next }),
+            /* @__PURE__ */ jsx(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({
+  slots: {
+    root: "@container w-full overflow-clip 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: "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: {
+        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 @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 @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",
+        caption: "block",
+        thead: "sr-only bg-transparent has-[[data-keep]]:not-sr-only has-[[data-keep]]:block",
+        headRow: "flex flex-wrap items-center gap-2 px-3 py-2",
+        th: "sr-only p-0 data-[keep]:not-sr-only data-[keep]:block",
+        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",
+        expander: "before:content-none"
+      }
+    },
+    density: {
+      comfortable: {},
+      compact: { th: "py-2", td: "py-1.5" }
+    },
+    // The header stays in view while the page scrolls (table layouts only; `--dt-top` clears a fixed bar).
+    sticky: { true: {}, false: {} },
+    // Zebra rows (the table layouts); the cards keep their frame.
+    striped: { true: {}, false: {} },
+    // Typed columns: one height per row (`typed`); untyped tables keep the height of their content.
+    typed: { true: {}, false: {} }
+  },
+  compoundVariants: [
+    { layout: "table", sticky: true, class: { th: "sticky top-(--dt-top,0px) z-[3] bg-surface-2" } },
+    { layout: "auto", sticky: true, class: { th: "@xl:sticky @xl:top-(--dt-top,0px) @xl:z-[3] @xl:bg-surface-2" } },
+    { layout: "table", striped: true, class: { tr: "even:bg-surface-2/40" } },
+    { layout: "auto", striped: true, class: { tr: "@xl:even:bg-surface-2/40" } },
+    // One row height per density (a two-line row — a name and its id — is the tallest).
+    { layout: "table", density: "comfortable", typed: true, class: { td: "h-15" } },
+    { layout: "auto", density: "comfortable", typed: true, class: { td: "@xl:h-15" } },
+    { layout: "table", density: "compact", typed: true, class: { td: "h-12" } },
+    { layout: "auto", density: "compact", typed: true, class: { td: "@xl:h-12" } }
+  ],
+  defaultVariants: { layout: "auto", density: "comfortable", sticky: false, striped: false, typed: false }
+});
+var NO_CLASS = { 2: "", 3: "", 4: "", 5: "", 6: "", 7: "" };
+var LEAVES = {
+  auto: { 2: "@xl:@max-2xl:hidden!", 3: "@max-3xl:hidden!", 4: "@max-4xl:hidden!", 5: "@max-5xl:hidden!", 6: "@max-6xl:hidden!", 7: "@max-7xl:hidden!" },
+  table: { 2: "@max-2xl:hidden!", 3: "@max-3xl:hidden!", 4: "@max-4xl:hidden!", 5: "@max-5xl:hidden!", 6: "@max-6xl:hidden!", 7: "@max-7xl:hidden!" },
+  cards: { 2: "", 3: "hidden!", 4: "hidden!", 5: "hidden!", 6: "hidden!", 7: "hidden!" }
+};
+var LEAVES_HEAD = {
+  auto: { 2: "@xl:@max-2xl:hidden!", 3: "@xl:@max-3xl:hidden!", 4: "@xl:@max-4xl:hidden!", 5: "@xl:@max-5xl:hidden!", 6: "@xl:@max-6xl:hidden!", 7: "@xl:@max-7xl:hidden!" },
+  table: LEAVES.table,
+  cards: NO_CLASS
+};
+var IN_DETAIL = {
+  auto: { 2: "hidden @xl:@max-2xl:grid", 3: "hidden @max-3xl:grid", 4: "hidden @max-4xl:grid", 5: "hidden @max-5xl:grid", 6: "hidden @max-6xl:grid", 7: "hidden @max-7xl:grid" },
+  table: { 2: "hidden @max-2xl:grid", 3: "hidden @max-3xl:grid", 4: "hidden @max-4xl:grid", 5: "hidden @max-5xl:grid", 6: "hidden @max-6xl:grid", 7: "hidden @max-7xl:grid" },
+  cards: { 2: "hidden", 3: "grid", 4: "grid", 5: "grid", 6: "grid", 7: "grid" }
+};
+var TOGGLE = {
+  auto: { 2: "hidden @xl:@max-2xl:inline-flex", 3: "hidden @max-3xl:inline-flex", 4: "hidden @max-4xl:inline-flex", 5: "hidden @max-5xl:inline-flex", 6: "hidden @max-6xl:inline-flex", 7: "hidden @max-7xl:inline-flex" },
+  table: { 2: "hidden @max-2xl:inline-flex", 3: "hidden @max-3xl:inline-flex", 4: "hidden @max-4xl:inline-flex", 5: "hidden @max-5xl:inline-flex", 6: "hidden @max-6xl:inline-flex", 7: "hidden @max-7xl:inline-flex" },
+  cards: { 2: "hidden", 3: "inline-flex", 4: "inline-flex", 5: "inline-flex", 6: "inline-flex", 7: "inline-flex" }
+};
+var PANEL = {
+  auto: { 2: "hidden @xl:@max-2xl:block", 3: "hidden @max-3xl:block", 4: "hidden @max-4xl:block", 5: "hidden @max-5xl:block", 6: "hidden @max-6xl:block", 7: "hidden @max-7xl:block" },
+  table: { 2: "hidden @max-2xl:block", 3: "hidden @max-3xl:block", 4: "hidden @max-4xl:block", 5: "hidden @max-5xl:block", 6: "hidden @max-6xl:block", 7: "hidden @max-7xl:block" },
+  cards: { 2: "hidden", 3: "block", 4: "block", 5: "block", 6: "block", 7: "block" }
+};
+var TYPE_CELL = {
+  title: { auto: "@xl:w-full @xl:max-w-0 @xl:min-w-44", table: "w-full max-w-0 min-w-44", cards: "" },
+  badge: { auto: "@xl:w-px", table: "w-px", cards: "" },
+  status: { auto: "@xl:w-px @xl:whitespace-nowrap", table: "w-px whitespace-nowrap", cards: "" },
+  number: { auto: "@xl:w-px @xl:whitespace-nowrap tabular-nums", table: "w-px whitespace-nowrap tabular-nums", cards: "tabular-nums" },
+  date: { auto: "@xl:w-px @xl:whitespace-nowrap tabular-nums", table: "w-px whitespace-nowrap tabular-nums", cards: "tabular-nums" },
+  link: { auto: "@xl:min-w-28 @xl:max-w-56", table: "min-w-28 max-w-56", cards: "" },
+  text: { auto: "@xl:min-w-36", table: "min-w-36", cards: "" }
+};
+var CLAMP = { 1: "line-clamp-1", 2: "line-clamp-2", 3: "line-clamp-3" };
+var dataTableLabels = {
+  selectAll: "Select all rows",
+  selectRow: (name) => `Select ${name}`,
+  loading: "Loading",
+  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",
+  showMore: (name) => `Show more about ${name}`,
+  export: "Export CSV"
+};
+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 TRUNCATE = { auto: "@xl:truncate", table: "truncate", cards: "" };
+var MIN = { auto: "@xl:min-w-(--dt-min)!", table: "min-w-(--dt-min)!", cards: "" };
+var MAX = { auto: "@xl:max-w-(--dt-max)!", table: "max-w-(--dt-max)!", cards: "" };
+var SHADOWS = "[background:linear-gradient(to_right,var(--kz-surface-1),transparent)_left/24px_100%_no-repeat_local,linear-gradient(to_left,var(--kz-surface-1),transparent)_right/24px_100%_no-repeat_local,linear-gradient(to_right,rgb(0_0_0/0.18),transparent)_left/10px_100%_no-repeat_scroll,linear-gradient(to_left,rgb(0_0_0/0.18),transparent)_right/10px_100%_no-repeat_scroll]";
+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,
+  getRowId,
+  caption,
+  showCaption,
+  sort: sortProp,
+  defaultSort = null,
+  onSortChange,
+  filters: filtersProp,
+  defaultFilters = NO_RECORD,
+  onFiltersChange,
+  selectable,
+  selected: selectedProp,
+  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: empty2,
+  layout = "auto",
+  density,
+  stickyHeader,
+  striped,
+  scroll,
+  stickyFirstColumn,
+  virtualized,
+  toolbar,
+  footer,
+  labels: given,
+  className
+}) {
+  const labels = { ...dataTableLabels, ...given };
+  const effectiveLayout = virtualized ? "table" : layout;
+  const L = effectiveLayout;
+  const typed = columns.some((c) => c.type || c.priority);
+  const s2 = dataTable({ layout: L, density, sticky: Boolean(stickyHeader), striped: Boolean(striped), typed });
+  const [sort, setSort] = useControllable(sortProp, defaultSort, onSortChange);
+  const [filters, setFiltersState] = useControllable(filtersProp, defaultFilters, onFiltersChange);
+  const [selected, setSelected] = useControllable(selectedProp, defaultSelected, onSelectedChange);
+  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 priorityOf = (column) => column.priority && column.priority > 1 ? column.priority : 1;
+  const maxPriority = columns.reduce((max, column) => priorityOf(column) > max ? priorityOf(column) : max, 1);
+  const inlineToggle = maxPriority > 1 && !hasExpander;
+  const detailed = Boolean(renderDetail) || inlineToggle;
+  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 firstId = columns[0]?.id;
+  const pinned = stickyFirstColumn && firstId && !pinning?.start?.length ? { ...pinning, start: [firstId] } : pinning;
+  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: detailed ? () => 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: [...pinned?.start ?? []], end: [...pinned?.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 = 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 || pinned?.start?.length || pinned?.end?.length);
+  const sideways = scroll ?? (!typed && !stickyHeader);
+  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__ */ jsx2("tr", { role: "row", className: s2.tr({ className: "hover:bg-transparent" }), children: /* @__PURE__ */ jsx2("td", { role: "cell", colSpan: span, "data-card": "message", className: s2.td({ className: s2.message() }), children: alert ? /* @__PURE__ */ jsx2("div", { role: "alert", children: content }) : content }) });
+  const cardOf = (column) => column?.card === "title" || column && !column.card && column.type === "title" ? "title" : column?.card === "hidden" ? "hidden" : void 0;
+  const contentOf = (column, original) => {
+    if (column.cell) return column.cell(original);
+    const value = valueOf(column, original);
+    const text = column.type === "date" && value instanceof Date ? value.toISOString().slice(0, 10) : display(value);
+    const cut = TRUNCATE[L];
+    switch (column.type) {
+      case "title": {
+        const sub = column.subtitle?.(original);
+        return /* @__PURE__ */ jsxs2("span", { className: "block min-w-0", children: [
+          /* @__PURE__ */ jsx2("span", { className: cn("block font-semibold text-fg", cut), title: text, children: text }),
+          sub ? /* @__PURE__ */ jsx2("span", { className: cn("block font-mono text-xs text-fg-tertiary", cut), children: sub }) : null
+        ] });
+      }
+      case "number":
+        return /* @__PURE__ */ jsxs2("span", { children: [
+          typeof value === "number" ? value.toLocaleString("en") : text,
+          column.unit ? /* @__PURE__ */ jsx2("span", { className: "ms-1 text-fg-secondary", children: column.unit }) : null
+        ] });
+      case "link": {
+        const href = column.href?.(original);
+        return href ? /* @__PURE__ */ jsx2("a", { href, title: text, className: cn("block text-fg-accent underline-offset-2 hover:underline", cut), children: text }) : /* @__PURE__ */ jsx2("span", { className: cn("block", cut), title: text, children: text });
+      }
+      default: {
+        const lines = column.clamp ?? (column.type === "text" ? 2 : void 0);
+        if (!column.nowrap && !lines) return text;
+        return /* @__PURE__ */ jsx2("span", { className: column.nowrap ? cn("block", cut || "truncate") : CLAMP[lines], title: text, children: text });
+      }
+    }
+  };
+  const dataCell = (row, cell, first) => {
+    const column = byId.get(cell.column.id);
+    if (!column) return null;
+    const { style, ...pinnedProps } = 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__ */ jsxs2("button", { type: "button", className: s2.toggle({ className: "px-1.5 font-semibold text-fg" }), "aria-expanded": row.getIsExpanded(), onClick: row.getToggleExpandedHandler(), children: [
+          /* @__PURE__ */ jsx2(ChevronGlyph, { direction: "right", className: "h-4 w-4" }),
+          labels.group(value, leaves.length)
+        ] });
+      } else content = column.aggregate ? column.aggregate(leaves) : null;
+    } else {
+      content = contentOf(column, row.original);
+      if (first && inlineToggle) {
+        content = /* @__PURE__ */ jsxs2("span", { className: "flex min-w-0 items-center gap-1", children: [
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              className: s2.toggle({ className: TOGGLE[L][maxPriority] }),
+              "aria-expanded": row.getIsExpanded(),
+              "aria-label": labels.showMore(nameOf(row)),
+              onClick: row.getToggleExpandedHandler(),
+              children: /* @__PURE__ */ jsx2(ChevronGlyph, { direction: "right", className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx2("span", { className: "min-w-0 flex-1", children: content })
+        ] });
+      }
+    }
+    const level = priorityOf(column);
+    const type = column.type;
+    const cellClass = [
+      ALIGN[column.align ?? (type === "number" ? "end" : "start")],
+      type ? TYPE_CELL[type][L] : "",
+      level > 1 ? LEAVES[L][level] : "",
+      (type || column.priority) && column.minWidth !== void 0 ? MIN[L] : "",
+      column.maxWidth !== void 0 ? MAX[L] : ""
+    ].join(" ");
+    return /* @__PURE__ */ jsx2(
+      "td",
+      {
+        role: "cell",
+        "data-label": column.header,
+        "data-card": row.getIsGrouped() ? cell.column.id === row.groupingColumnId ? "title" : column.aggregate ? void 0 : "hidden" : cardOf(column),
+        ...pinnedProps,
+        className: s2.td({ className: cellClass }),
+        style: {
+          ...style,
+          ...column.minWidth !== void 0 ? { ["--dt-min"]: `${column.minWidth}px` } : {},
+          ...column.maxWidth !== void 0 ? { ["--dt-max"]: `${column.maxWidth}px` } : {},
+          ...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 showDetail = detailed && !grouped && row.getIsExpanded() && !virtualized;
+    const cells = row.getVisibleCells();
+    const main = /* @__PURE__ */ jsxs2(
+      "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__ */ jsx2("td", { role: "cell", className: s2.td({ className: s2.select() }), children: grouped ? null : /* @__PURE__ */ jsx2(Checkbox, { checked: isChosen, onCheckedChange: () => row.toggleSelected(), "aria-label": labels.selectRow(nameOf(row)) }) }),
+          hasExpander && /* @__PURE__ */ jsx2("td", { role: "cell", className: s2.td({ className: s2.expander() }), children: canExpand ? /* @__PURE__ */ jsx2("button", { type: "button", className: s2.toggle(), "aria-expanded": row.getIsExpanded(), "aria-label": labels.expandRow(nameOf(row)), onClick: row.getToggleExpandedHandler(), children: /* @__PURE__ */ jsx2(ChevronGlyph, { direction: "right", className: "h-4 w-4" }) }) : null }),
+          cells.map((cell, i) => dataCell(row, cell, i === 0))
+        ]
+      }
+    );
+    if (!showDetail) return /* @__PURE__ */ jsx2(React.Fragment, { children: main }, row.id);
+    const left = visibleColumns.filter((c) => priorityOf(byId.get(c.id)) > 1);
+    return /* @__PURE__ */ jsxs2(React.Fragment, { children: [
+      main,
+      /* @__PURE__ */ jsx2("tr", { role: "row", className: s2.tr({ className: "hover:bg-transparent" }), children: /* @__PURE__ */ jsxs2("td", { role: "cell", colSpan: span, "data-card": "message", className: s2.td({ className: renderDetail ? s2.detail() : "bg-surface-0 p-0 text-left" }), children: [
+        left.length > 0 ? /* @__PURE__ */ jsx2("dl", { className: cn("m-0 grid gap-3 text-left", renderDetail ? "mb-4" : cn("px-4 py-4", PANEL[L][maxPriority])), children: left.map((c) => {
+          const column = byId.get(c.id);
+          return /* @__PURE__ */ jsxs2("div", { className: cn(IN_DETAIL[L][priorityOf(column)], "grid-cols-[minmax(5rem,8rem)_minmax(0,1fr)] items-baseline gap-3"), children: [
+            /* @__PURE__ */ jsx2("dt", { className: "text-xs font-semibold text-fg-secondary", children: column.header }),
+            /* @__PURE__ */ jsx2("dd", { className: "m-0 min-w-0 text-sm text-fg", children: contentOf(column, row.original) })
+          ] }, c.id);
+        }) }) : null,
+        renderDetail ? renderDetail(row.original) : null
+      ] }) })
+    ] }, row.id);
+  };
+  let body;
+  if (loading) {
+    body = Array.from({ length: loadingRows }, (_, i) => /* @__PURE__ */ jsxs2("tr", { role: "row", "aria-hidden": true, className: s2.tr(), children: [
+      selectable && /* @__PURE__ */ jsx2("td", { role: "cell", className: s2.td({ className: s2.select() }) }),
+      hasExpander && /* @__PURE__ */ jsx2("td", { role: "cell", className: s2.td({ className: s2.expander() }) }),
+      visibleColumns.map((column) => /* @__PURE__ */ jsx2("td", { role: "cell", "data-card": cardOf(byId.get(column.id)), className: s2.td(), children: /* @__PURE__ */ jsx2("div", { className: s2.skeleton() }) }, column.id))
+    ] }, `loading-${i}`));
+  } else if (error) body = message(error, true);
+  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__ */ jsxs2(
+    "table",
+    {
+      role: "table",
+      "aria-busy": loading || void 0,
+      "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 ? s2.caption() : "sr-only", children: [
+          caption,
+          loading ? /* @__PURE__ */ jsx2("span", { className: "sr-only", children: ` \u2014 ${labels.loading}` }) : null
+        ] }),
+        /* @__PURE__ */ jsx2("thead", { role: "rowgroup", className: s2.thead({ className: virtualized ? "sticky top-0 z-10 bg-surface-2" : void 0 }), children: /* @__PURE__ */ jsxs2("tr", { role: "row", "aria-rowindex": virtualized ? 1 : void 0, className: s2.headRow(), children: [
+          selectable && /* @__PURE__ */ jsx2("th", { role: "columnheader", scope: "col", "data-keep": "", className: s2.th({ className: s2.select() }), children: /* @__PURE__ */ jsx2(
+            Checkbox,
+            {
+              checked: allChosen ? true : someChosen ? "indeterminate" : false,
+              onCheckedChange: toggleAll,
+              disabled: loading || selectableIds.length === 0,
+              "aria-label": labels.selectAll
+            }
+          ) }),
+          hasExpander && /* @__PURE__ */ jsx2("th", { role: "columnheader", scope: "col", className: s2.th({ className: s2.expander() }), children: /* @__PURE__ */ jsx2("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, ...pinnedProps } = pin(header.column);
+            const level = priorityOf(column);
+            return /* @__PURE__ */ jsxs2(
+              "th",
+              {
+                role: "columnheader",
+                scope: "col",
+                "aria-sort": column.sortable ? direction ?? "none" : void 0,
+                "data-keep": column.sortable ? "" : void 0,
+                ...pinnedProps,
+                className: s2.th({ className: cn(ALIGN[column.align ?? (column.type === "number" ? "end" : "start")], level > 1 && LEAVES_HEAD[L][level]) }),
+                style: { ...style, ...typeof stickyHeader === "number" ? { ["--dt-top"]: `${stickyHeader}px` } : {}, ...width(header.column) },
+                children: [
+                  column.sortable ? /* @__PURE__ */ jsxs2("button", { type: "button", "aria-pressed": Boolean(direction), className: s2.sortButton(), onClick: () => header.column.toggleSorting(void 0, false), 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,
+                  resizing && header.column.getCanResize() ? /* @__PURE__ */ jsx2(
+                    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
+                ]
+              },
+              header.id
+            );
+          })
+        ] }) }),
+        /* @__PURE__ */ jsxs2("tbody", { role: "rowgroup", className: s2.tbody(), children: [
+          before > 0 && /* @__PURE__ */ jsx2("tr", { "aria-hidden": true, style: { height: before }, children: /* @__PURE__ */ jsx2("td", { colSpan: span }) }),
+          body,
+          after > 0 && /* @__PURE__ */ jsx2("tr", { "aria-hidden": true, style: { height: after }, children: /* @__PURE__ */ jsx2("td", { colSpan: span }) })
+        ] })
+      ]
+    }
+  );
+  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__ */ jsx2(
+    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__ */ jsx2(DataTableContext.Provider, { value: context, children: /* @__PURE__ */ jsxs2("div", { className: s2.root({ className }), children: [
+    toolbar ? /* @__PURE__ */ jsx2("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(
+        "div",
+        {
+          ref: scroller,
+          tabIndex: 0,
+          role: "region",
+          "aria-label": caption,
+          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: s2.scroller({ className: sideways ? scroll ? SHADOWS : void 0 : "overflow-x-clip" }), children: tableElement }),
+    pagination2 || footer ? /* @__PURE__ */ jsxs2("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__ */ jsx2(
+      "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/field/field.tsx
+import { tv as tv3 } from "tailwind-variants";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var field2 = tv3({
+  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__ */ jsx3("input", { ...invalidProps(invalid), className: s.control({ className }), ...props });
+}
+
+// src/data-table/toolbar.tsx
+import { jsx as jsx4, jsxs as jsxs4 } 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__ */ jsxs4(
+    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__ */ jsx4(
+              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__ */ jsx4(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__ */ jsxs4("span", { className: "inline-flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx4(
+              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__ */ jsx4("span", { "aria-hidden": true, className: "text-fg-secondary", children: "\u2013" }),
+            /* @__PURE__ */ jsx4(
+              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__ */ jsxs4(DropdownMenu.Root, { defaultOpen, modal: false, children: [
+    /* @__PURE__ */ jsx4(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs4(Button, { variant: "outline", size: "sm", className, children: [
+      labels.columns,
+      /* @__PURE__ */ jsx4(ChevronGlyph, { className: "h-4 w-4" })
+    ] }) }),
+    /* @__PURE__ */ jsx4(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__ */ jsx4(
+        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__ */ jsx4(Button, { variant: "outline", size: "sm", className, onClick: run, children: labels.export });
+}
+
+export {
+  dataTableCsv,
+  compareValues,
+  dataTable,
+  dataTableLabels,
+  useDataTable,
+  DataTable,
+  DataTableFilters,
+  DataTableColumnsMenu,
+  DataTableExport
+};
+//# sourceMappingURL=chunk-R6NK6ZNY.js.map