@eifi1/ui-kit 0.4.0

package/dist/components/data-table.js

@@ -0,0 +1,926 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import {
+  ArrowDown,
+  ArrowUp,
+  ArrowUpDown,
+  ChevronDown,
+  ChevronRight,
+  Filter,
+  X
+} from "lucide-react";
+import { useSearchParams } from "react-router";
+import { Card } from "./ui.js";
+import { cn } from "../lib/cn.js";
+import {
+  defaultFilterState,
+  isFilterActive,
+  resolveFilter,
+  rowMatches
+} from "./data-table-filters.js";
+import { nextSorts } from "./data-table-sort.js";
+import { FilterPopover } from "./data-table-filter-popover.js";
+import { Pagination } from "./data-table-pagination.js";
+import { SwipeableRow } from "./swipeable-row.js";
+import { useBackdropClose } from "./modal.js";
+import { useBodyScrollLock } from "../hooks/use-body-scroll-lock.js";
+import { useOverlayHistory } from "../hooks/use-overlay-history.js";
+import { FullBleedDialog } from "./full-bleed-dialog.js";
+import { Popover } from "./popover.js";
+import { useMediaQuery } from "../hooks/use-media-query.js";
+import { resolveDataTableLabels } from "./data-table-labels.js";
+import { Tooltip } from "./tooltip.js";
+function cleanAttrs(attrs) {
+  if (!attrs) return void 0;
+  const out = {};
+  for (const [k, v] of Object.entries(attrs)) if (v !== void 0) out[k] = v;
+  return out;
+}
+const isPlainLeftClick = (e) => e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;
+function RowLink({
+  href,
+  onActivate,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...rest,
+      href,
+      draggable: false,
+      className,
+      onClickCapture: (e) => {
+        if (isPlainLeftClick(e)) e.preventDefault();
+      },
+      onClick: (e) => {
+        if (!isPlainLeftClick(e)) {
+          e.stopPropagation();
+          return;
+        }
+        onActivate?.();
+      },
+      children
+    }
+  );
+}
+import { DEFAULT_PERSIST_PREFIX, useTableState } from "./use-table-state.js";
+import { useMobileReveal } from "./use-mobile-reveal.js";
+function DataTable({
+  rows,
+  columns,
+  rowKey,
+  defaultPageSize = 25,
+  onRowClick,
+  rowHref,
+  expandedRow,
+  isExpanded,
+  rowClassName,
+  rowAttributes,
+  paginated = true,
+  empty,
+  storageKey,
+  urlSync = false,
+  fillHeight = false,
+  maxBodyHeight = "calc(100dvh - 12rem)",
+  serverPagination,
+  filters: filtersProp,
+  onFiltersChange,
+  sorts: sortsProp,
+  onSortsChange,
+  selection,
+  labels: labelsProp,
+  locale,
+  storageKeyPrefix = DEFAULT_PERSIST_PREFIX,
+  mobileExpandAsDialog = false,
+  mobileGroupBy,
+  mobileGroupLabel,
+  mobileCard,
+  mobileSwipeActions,
+  leadingRow
+}) {
+  const isServer = !!serverPagination;
+  const labels = resolveDataTableLabels(labelsProp);
+  const [, setSearchParams] = useSearchParams();
+  const {
+    sorts,
+    filters,
+    setInternalSorts,
+    setInternalFilters,
+    page,
+    setPage,
+    pageSize,
+    setPageSize,
+    widths,
+    setWidths,
+    hiddenCols,
+    setHiddenCols,
+    showSettings,
+    setShowSettings,
+    headRefs
+  } = useTableState({
+    columns,
+    storageKey,
+    storageKeyPrefix,
+    urlSync,
+    setSearchParams,
+    defaultPageSize,
+    sortsProp,
+    filtersProp
+  });
+  const selectOptionsByKey = useMemo(() => {
+    const map = {};
+    for (const col of columns) {
+      const f = resolveFilter(col);
+      if (!f || f.type !== "select") continue;
+      if (f.options && f.options.length > 0) {
+        map[col.key] = f.options.map((o) => ({ value: o.value, label: o.label ?? o.value }));
+        continue;
+      }
+      const seen = /* @__PURE__ */ new Set();
+      for (const row of rows) {
+        const v = f.getValue(row);
+        if (v && !seen.has(v)) seen.add(v);
+      }
+      map[col.key] = Array.from(seen).sort().map((v) => ({ value: v, label: v }));
+    }
+    return map;
+  }, [columns, rows]);
+  const filtered = useMemo(() => {
+    if (isServer) return rows;
+    let result = rows;
+    for (const col of columns) {
+      const state = filters[col.key];
+      if (!state || !isFilterActive(state)) continue;
+      result = result.filter((row) => rowMatches(col, row, state));
+    }
+    return result;
+  }, [rows, columns, filters, isServer]);
+  const sorted = useMemo(() => {
+    if (isServer) return filtered;
+    const chain = sorts.map((s) => {
+      const col = columns.find((c) => c.key === s.key);
+      return col?.sortBy ? { sortBy: col.sortBy, dir: s.dir } : null;
+    }).filter((c) => c !== null);
+    if (!chain.length) return filtered;
+    const copy = [...filtered];
+    copy.sort((a, b) => {
+      for (const { sortBy, dir } of chain) {
+        const av = sortBy(a);
+        const bv = sortBy(b);
+        if (av == null && bv == null) continue;
+        if (av == null) return 1;
+        if (bv == null) return -1;
+        if (av < bv) return dir === "asc" ? -1 : 1;
+        if (av > bv) return dir === "asc" ? 1 : -1;
+      }
+      return 0;
+    });
+    return copy;
+  }, [filtered, sorts, columns, isServer]);
+  const unpaged = !isServer && !paginated;
+  const effectivePageSize = isServer ? serverPagination.pageSize : unpaged || pageSize === Infinity ? sorted.length || 1 : pageSize;
+  const paginationTotal = isServer ? serverPagination.total : sorted.length;
+  const paginationPageSize = isServer ? serverPagination.pageSize : pageSize;
+  const totalPages = isServer ? Math.max(1, Math.ceil(serverPagination.total / Math.max(1, serverPagination.pageSize))) : Math.max(1, Math.ceil(sorted.length / effectivePageSize));
+  const safePage = isServer ? Math.min(Math.max(0, serverPagination.page), totalPages - 1) : Math.min(page, totalPages - 1);
+  const slice = isServer || unpaged || pageSize === Infinity ? sorted : sorted.slice(safePage * effectivePageSize, safePage * effectivePageSize + effectivePageSize);
+  const toggleSort = (key, additive) => {
+    const next = nextSorts(sorts, key, additive);
+    if (onSortsChange) onSortsChange(next);
+    else setInternalSorts(next);
+  };
+  const setFilterValue = (key, value) => {
+    if (onFiltersChange) {
+      onFiltersChange({ ...filters, [key]: value });
+      return;
+    }
+    setInternalFilters((s) => ({ ...s, [key]: value }));
+    setPage(0);
+  };
+  const clearFilter = (key) => {
+    if (onFiltersChange) {
+      const rest = { ...filters };
+      delete rest[key];
+      onFiltersChange(rest);
+      return;
+    }
+    setInternalFilters((s) => {
+      const rest = { ...s };
+      delete rest[key];
+      return rest;
+    });
+    setPage(0);
+  };
+  const clearAllFilters = () => {
+    const keys = columns.filter((col) => !isServer || onFiltersChange ? resolveFilter(col) : null).map((col) => col.key);
+    if (!keys.length) return;
+    if (onFiltersChange) {
+      const rest = { ...filters };
+      for (const k of keys) delete rest[k];
+      onFiltersChange(rest);
+      return;
+    }
+    setInternalFilters((s) => {
+      const rest = { ...s };
+      for (const k of keys) delete rest[k];
+      return rest;
+    });
+    setPage(0);
+  };
+  const visibleColumns = useMemo(
+    () => columns.filter((c) => !hiddenCols.has(c.key)),
+    [columns, hiddenCols]
+  );
+  const linkColumn = rowHref ? visibleColumns.find((c) => c.mobilePrimary && !c.noRowLink) ?? visibleColumns.find((c) => !c.noRowLink) : void 0;
+  const startResize = (e, key) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const th = headRefs.get(key);
+    const startWidth = th?.getBoundingClientRect().width ?? 100;
+    const startX = e.clientX;
+    const onMove = (ev) => {
+      const next = Math.max(40, Math.round(startWidth + (ev.clientX - startX)));
+      setWidths((w) => ({ ...w, [key]: next }));
+    };
+    const onUp = () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
+    };
+    document.body.style.userSelect = "none";
+    document.body.style.cursor = "col-resize";
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  };
+  const autoSizeAll = () => {
+    setWidths({});
+    requestAnimationFrame(() => {
+      const next = {};
+      const cols = columns.filter((c) => !hiddenCols.has(c.key));
+      cols.forEach((col, idx) => {
+        if (idx === cols.length - 1) return;
+        const th = headRefs.get(col.key);
+        if (th) next[col.key] = Math.ceil(th.getBoundingClientRect().width);
+      });
+      setWidths(next);
+    });
+  };
+  const visibleCount = visibleColumns.length;
+  const totalCount = columns.length;
+  const totalColSpan = visibleCount + (selection ? 1 : 0);
+  const columnsCountLabel = `${labels.columns} (${visibleCount}/${totalCount})`;
+  const isMdUp = useMediaQuery("(min-width: 768px)", true);
+  const mobileColumns = visibleColumns.filter((c) => !c.mobileHidden);
+  const mobilePrimaryCol = mobileColumns.find((c) => c.mobilePrimary) ?? mobileColumns[0] ?? null;
+  const mobileSecondaryColumns = mobileColumns.filter((c) => c !== mobilePrimaryCol);
+  const mobileCardLinkable = mobileColumns.every((c) => !c.noRowLink);
+  const { mobileSlice, canRevealMoreMobile, loadMoreRef } = useMobileReveal({
+    rows: sorted,
+    slice,
+    isServer,
+    isMdUp,
+    defaultPageSize
+  });
+  const selectionAnchor = useRef(null);
+  const canSelect = (row) => !!selection && (selection.isSelectable?.(row) ?? true);
+  const selectRange = (toIndex) => {
+    if (!selection || selectionAnchor.current === null) return false;
+    const [lo, hi] = [selectionAnchor.current, toIndex].sort((a, b) => a - b);
+    for (let i = lo; i <= hi; i++) {
+      const r = slice[i];
+      if (r && canSelect(r)) selection.onToggle(r, true);
+    }
+    return true;
+  };
+  const mobileDialogRow = mobileExpandAsDialog && !isMdUp ? mobileSlice.find((r) => isExpanded?.(r)) : void 0;
+  const mobileDialogContent = mobileDialogRow ? expandedRow?.(mobileDialogRow) : null;
+  const dialogOpen = !!(mobileDialogRow && mobileDialogContent);
+  const closeDialog = () => {
+    if (mobileDialogRow) onRowClick?.(mobileDialogRow);
+  };
+  const renderMobileRow = (row) => {
+    const expanded = isExpanded?.(row) ?? false;
+    const expansion = expanded ? expandedRow?.(row) : null;
+    const tint = rowClassName?.(row);
+    const interactive = !!onRowClick;
+    const opensDetail = interactive && !!expandedRow;
+    const swipe = mobileSwipeActions?.(row);
+    const swipeEnabled = !!swipe && !expanded;
+    const href = mobileCardLinkable ? rowHref?.(row) : void 0;
+    const cardClass = cn(
+      "w-full px-4 py-3 text-left flex items-center gap-3",
+      // Live #320's other half: the card acknowledges the touch before the sheet
+      // arrives. On a cold route the data can take a beat, and an unacknowledged tap
+      // reads as "did that register?" — which is most of what "abrupt" means here.
+      // `origin-center` + a 0.5% squeeze is deliberately almost subliminal: this fires
+      // on every row of a long list, so anything larger becomes the list's personality
+      // rather than feedback. `transition-transform` alone, so the existing background
+      // flip stays instant.
+      interactive && "cursor-pointer transition-transform duration-100 active:scale-[0.995] active:bg-slate-50 dark:active:bg-slate-800/40 motion-reduce:transition-none motion-reduce:active:scale-100"
+    );
+    const cardInner = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: mobileCard ? mobileCard(row) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        mobilePrimaryCol && /* @__PURE__ */ jsx("div", { className: "font-medium", children: mobilePrimaryCol.cell(row) }),
+        mobileSecondaryColumns.length > 0 && /* @__PURE__ */ jsx("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-sm", children: mobileSecondaryColumns.map((col) => /* @__PURE__ */ jsxs(Fragment2, { children: [
+          /* @__PURE__ */ jsx("dt", { className: "text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400 self-center", children: col.header }),
+          /* @__PURE__ */ jsx("dd", { className: "min-w-0 text-slate-700 dark:text-slate-200 self-center", children: col.cell(row) })
+        ] }, col.key)) })
+      ] }) }),
+      opensDetail && // `aria-hidden`: the row already announces itself as a button with
+      // `aria-expanded`, so the icon would only add a second, wordless stop.
+      (mobileExpandAsDialog ? /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true, className: "size-4 shrink-0 text-slate-400" }) : /* @__PURE__ */ jsx(
+        ChevronDown,
+        {
+          "aria-hidden": true,
+          className: cn(
+            "size-4 shrink-0 text-slate-400 transition-transform",
+            expanded && "rotate-180"
+          )
+        }
+      ))
+    ] });
+    const body = interactive && href ? (
+      // A card with a URL of its own is a LINK, not a div wearing role="button"
+      // (feedback #451): the phone's long-press "open in new tab" and a screen
+      // reader's link semantics both come free, and the fake role goes away.
+      /* @__PURE__ */ jsx(
+        RowLink,
+        {
+          href,
+          onActivate: () => onRowClick(row),
+          "aria-expanded": expandedRow ? expanded : void 0,
+          className: cardClass,
+          onKeyDown: (e) => {
+            if (e.key !== " ") return;
+            e.preventDefault();
+            onRowClick(row);
+          },
+          children: cardInner
+        }
+      )
+    ) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: interactive ? "button" : void 0,
+        tabIndex: interactive ? 0 : void 0,
+        onClick: interactive ? () => onRowClick(row) : void 0,
+        onKeyDown: interactive ? (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onRowClick(row);
+          }
+        } : void 0,
+        "aria-expanded": expandedRow ? expanded : void 0,
+        className: cardClass,
+        children: cardInner
+      }
+    );
+    return /* @__PURE__ */ jsxs("li", { className: cn(tint), ...cleanAttrs(rowAttributes?.(row)), children: [
+      swipeEnabled ? /* @__PURE__ */ jsx(SwipeableRow, { enabled: true, left: swipe.left, right: swipe.right, children: body }) : body,
+      expansion && !mobileExpandAsDialog && /* @__PURE__ */ jsx("div", { className: "px-4 py-3 bg-slate-50/60 dark:bg-slate-800/20 border-t border-slate-100 dark:border-slate-800", children: expansion })
+    ] }, rowKey(row));
+  };
+  const mobileGroups = mobileGroupBy ? mobileSlice.reduce((acc, row) => {
+    const key = mobileGroupBy(row);
+    const last = acc[acc.length - 1];
+    if (last && last.key === key) last.rows.push(row);
+    else acc.push({ key, rows: [row] });
+    return acc;
+  }, []) : null;
+  return /* @__PURE__ */ jsxs(Card, { flush: true, className: cn("overflow-clip", fillHeight && "md:flex md:flex-1 md:flex-col md:min-h-0"), children: [
+    !isMdUp && /* @__PURE__ */ jsxs("div", { children: [
+      (!isServer || onFiltersChange) && /* @__PURE__ */ jsx(
+        MobileFilters,
+        {
+          columns,
+          filters,
+          selectOptionsByKey,
+          isServer,
+          hasFilterCallback: !!onFiltersChange,
+          onSetFilter: setFilterValue,
+          onClearFilter: clearFilter,
+          onClearAll: clearAllFilters,
+          labels,
+          locale
+        }
+      ),
+      /* @__PURE__ */ jsxs("ul", { className: "divide-y divide-slate-100 dark:divide-slate-800", children: [
+        mobileGroups ? mobileGroups.map((g) => /* @__PURE__ */ jsxs(Fragment2, { children: [
+          /* @__PURE__ */ jsx("li", { className: "sticky top-0 z-10 bg-slate-50/95 px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-slate-500 backdrop-blur dark:bg-slate-800/80 dark:text-slate-400", children: mobileGroupLabel ? mobileGroupLabel(g.key) : g.key }),
+          g.rows.map(renderMobileRow)
+        ] }, `hb-group:${g.key}`)) : mobileSlice.map(renderMobileRow),
+        mobileSlice.length === 0 && /* @__PURE__ */ jsx("li", { className: "px-4 py-6 text-center text-sm text-slate-500 dark:text-slate-400", children: empty ?? "\u2014" }),
+        canRevealMoreMobile && /* @__PURE__ */ jsx(
+          "li",
+          {
+            ref: loadMoreRef,
+            className: "px-4 py-4 text-center text-xs text-slate-400 dark:text-slate-500",
+            children: labels.loading
+          }
+        )
+      ] }),
+      isServer && /* @__PURE__ */ jsx(
+        Pagination,
+        {
+          page: safePage,
+          totalPages,
+          pageSize: paginationPageSize,
+          total: paginationTotal,
+          onPage: serverPagination.onPageChange,
+          onPageSize: (n) => serverPagination.onPageSizeChange?.(n),
+          labels
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FullBleedDialog,
+        {
+          open: dialogOpen,
+          onClose: closeDialog,
+          closeLabel: labels.close,
+          header: mobileDialogRow ? mobilePrimaryCol?.cell(mobileDialogRow) : null,
+          children: mobileDialogContent
+        }
+      )
+    ] }),
+    isMdUp && /* @__PURE__ */ jsxs("div", { className: cn("flex", fillHeight && "min-h-0 flex-1"), children: [
+      /* @__PURE__ */ jsxs("div", { className: cn("relative min-w-0 flex-1", fillHeight && "flex flex-col min-h-0"), children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("overflow-auto [scrollbar-gutter:stable]", fillHeight && "flex-1 min-h-0"),
+            style: fillHeight ? void 0 : { maxHeight: maxBodyHeight },
+            children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
+              /* @__PURE__ */ jsx("thead", { className: "bg-slate-50 dark:bg-slate-800/40 text-slate-600 dark:text-slate-400", children: /* @__PURE__ */ jsxs("tr", { className: "text-left", children: [
+                selection && /* @__PURE__ */ jsx("th", { className: "sticky top-0 z-10 w-10 bg-slate-50 px-3 py-2 align-middle dark:bg-slate-800/95 backdrop-blur-sm", children: /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    className: "size-4 align-middle accent-indigo-600",
+                    checked: selection.allSelected,
+                    ref: (el) => {
+                      if (el) el.indeterminate = selection.someSelected && !selection.allSelected;
+                    },
+                    onChange: (e) => selection.onToggleAll(e.target.checked),
+                    "aria-label": labels.selectAllRows
+                  }
+                ) }),
+                visibleColumns.map((col) => {
+                  const sortable = (!isServer || !!onSortsChange) && !!col.sortBy;
+                  const filter = !isServer || onFiltersChange ? resolveFilter(col) : null;
+                  const filterState = filters[col.key] ?? (filter ? defaultFilterState(filter) : void 0);
+                  const sortIdx = sorts.findIndex((s) => s.key === col.key);
+                  const active = sortIdx !== -1;
+                  const Icon = active ? sorts[sortIdx].dir === "asc" ? ArrowUp : ArrowDown : ArrowUpDown;
+                  const filterActive = filterState && isFilterActive(filterState);
+                  const isRightAligned = col.headClassName?.includes("text-right");
+                  const width = widths[col.key];
+                  return /* @__PURE__ */ jsxs(
+                    "th",
+                    {
+                      ref: (el) => {
+                        if (el) headRefs.set(col.key, el);
+                        else headRefs.delete(col.key);
+                      },
+                      "aria-sort": sortIdx === 0 ? sorts[0].dir === "asc" ? "ascending" : "descending" : void 0,
+                      style: width ? { width, minWidth: width, maxWidth: width } : void 0,
+                      className: cn(
+                        "relative px-3 py-2 font-medium align-middle whitespace-nowrap",
+                        // Keep the header visible while the user scrolls the page.
+                        // Each <th> carries its own bg so the row doesn't render
+                        // transparent over the data rows underneath.
+                        "sticky top-0 z-10 bg-slate-50 dark:bg-slate-800/95 backdrop-blur-sm",
+                        col.headClassName
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            className: cn(
+                              "flex items-center gap-1",
+                              isRightAligned && "flex-row-reverse"
+                            ),
+                            children: [
+                              /* @__PURE__ */ jsx(Tooltip, { label: sortable ? labels.sortHint : void 0, portal: true, children: /* @__PURE__ */ jsxs(
+                                "button",
+                                {
+                                  type: "button",
+                                  onClick: (e) => sortable && toggleSort(col.key, e.shiftKey),
+                                  disabled: !sortable,
+                                  className: cn(
+                                    "flex items-center gap-1 text-left",
+                                    sortable && "hover:text-slate-900 dark:hover:text-slate-200"
+                                  ),
+                                  children: [
+                                    /* @__PURE__ */ jsx("span", { children: col.header }),
+                                    sortable && /* @__PURE__ */ jsx(Icon, { className: cn("size-3", active ? "opacity-100" : "opacity-40") }),
+                                    active && sorts.length > 1 && /* @__PURE__ */ jsx("span", { className: "text-[9px] font-semibold leading-none text-brand", children: sortIdx + 1 })
+                                  ]
+                                }
+                              ) }),
+                              filter && /* @__PURE__ */ jsx(
+                                Popover,
+                                {
+                                  width: filter.type === "date" ? 420 : void 0,
+                                  trigger: ({ toggle, ref }) => /* @__PURE__ */ jsx(
+                                    "button",
+                                    {
+                                      type: "button",
+                                      ref,
+                                      onClick: toggle,
+                                      "aria-label": labels.filter,
+                                      className: cn(
+                                        "rounded p-1 transition-colors",
+                                        filterActive ? "bg-indigo-100 text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-300" : "text-slate-400 hover:text-slate-700 hover:bg-slate-100 dark:text-slate-500 dark:hover:text-slate-200 dark:hover:bg-slate-800"
+                                      ),
+                                      children: /* @__PURE__ */ jsx(Filter, { className: "size-3" })
+                                    }
+                                  ),
+                                  children: () => /* @__PURE__ */ jsx(
+                                    FilterPopover,
+                                    {
+                                      column: col,
+                                      state: filterState ?? defaultFilterState(filter),
+                                      onChange: (next) => setFilterValue(col.key, next),
+                                      onClear: () => clearFilter(col.key),
+                                      selectOptions: selectOptionsByKey[col.key] ?? [],
+                                      labels,
+                                      locale
+                                    }
+                                  )
+                                }
+                              )
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            role: "separator",
+                            "aria-orientation": "vertical",
+                            onMouseDown: (e) => startResize(e, col.key),
+                            onDoubleClick: (e) => {
+                              e.preventDefault();
+                              setWidths((w) => {
+                                const next = { ...w };
+                                delete next[col.key];
+                                return next;
+                              });
+                            },
+                            className: "absolute right-0 top-0 z-10 h-full w-1.5 -translate-x-1/2 cursor-col-resize select-none hover:bg-indigo-300/60 dark:hover:bg-indigo-500/40"
+                          }
+                        )
+                      ]
+                    },
+                    col.key
+                  );
+                })
+              ] }) }),
+              /* @__PURE__ */ jsxs("tbody", { children: [
+                leadingRow && /* @__PURE__ */ jsx("tr", { className: "border-t border-slate-100 dark:border-slate-800", children: /* @__PURE__ */ jsx("td", { colSpan: totalColSpan, className: "p-0", children: leadingRow }) }),
+                slice.map((row, rowIndex) => {
+                  const expanded = isExpanded?.(row) ?? false;
+                  const expansion = expanded ? expandedRow?.(row) : null;
+                  const rowInteractive = !!onRowClick || !!selection;
+                  const href = rowHref?.(row);
+                  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+                    /* @__PURE__ */ jsxs(
+                      "tr",
+                      {
+                        ...cleanAttrs(rowAttributes?.(row)),
+                        className: cn(
+                          "border-t border-slate-100 dark:border-slate-800",
+                          rowInteractive && "cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800/40",
+                          rowClassName?.(row)
+                        ),
+                        onClick: rowInteractive ? (e) => {
+                          if (selection && canSelect(row)) {
+                            if (e.shiftKey) {
+                              window.getSelection?.()?.removeAllRanges();
+                              if (selectRange(rowIndex)) return;
+                              selectionAnchor.current = rowIndex;
+                              selection.onToggle(row, !selection.isSelected(row));
+                              return;
+                            }
+                            if (e.metaKey || e.ctrlKey) {
+                              selectionAnchor.current = rowIndex;
+                              selection.onToggle(row, !selection.isSelected(row));
+                              return;
+                            }
+                          }
+                          onRowClick?.(row);
+                        } : void 0,
+                        children: [
+                          selection && /* @__PURE__ */ jsx(
+                            "td",
+                            {
+                              className: "w-10 px-3 py-2 align-top",
+                              onClick: (e) => e.stopPropagation(),
+                              children: canSelect(row) && /* @__PURE__ */ jsx(
+                                "input",
+                                {
+                                  type: "checkbox",
+                                  className: "size-4 accent-indigo-600",
+                                  checked: selection.isSelected(row),
+                                  onClick: (e) => {
+                                    if (e.shiftKey && selectRange(rowIndex)) e.preventDefault();
+                                  },
+                                  onChange: (e) => {
+                                    selectionAnchor.current = rowIndex;
+                                    selection.onToggle(row, e.target.checked);
+                                  },
+                                  "aria-label": labels.selectRow
+                                }
+                              )
+                            }
+                          ),
+                          visibleColumns.map((col) => {
+                            const width = widths[col.key];
+                            return /* @__PURE__ */ jsx(
+                              "td",
+                              {
+                                style: width ? { width, minWidth: width, maxWidth: width } : void 0,
+                                className: cn("px-3 py-2 align-top", width && "overflow-hidden text-ellipsis", col.className),
+                                children: col === linkColumn && href ? (
+                                  // No `onActivate`: the click is left to bubble to the
+                                  // <tr> handler above, which already owns expand-vs-select.
+                                  // Calling it here as well would toggle the row twice.
+                                  /* @__PURE__ */ jsx(RowLink, { href, className: "block", children: col.cell(row) })
+                                ) : col.cell(row)
+                              },
+                              col.key
+                            );
+                          })
+                        ]
+                      }
+                    ),
+                    expansion && /* @__PURE__ */ jsx("tr", { className: "bg-slate-50/60 dark:bg-slate-800/20 border-t border-slate-100 dark:border-slate-800", children: /* @__PURE__ */ jsx("td", { colSpan: totalColSpan, className: "p-0", children: /* @__PURE__ */ jsx("div", { className: "w-0 min-w-full px-3 py-3", children: expansion }) }) })
+                  ] }, rowKey(row));
+                }),
+                slice.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    colSpan: totalColSpan,
+                    className: "px-3 py-4 text-center text-slate-500 dark:text-slate-400",
+                    children: empty ?? "\u2014"
+                  }
+                ) })
+              ] })
+            ] })
+          }
+        ),
+        !unpaged && /* @__PURE__ */ jsx(
+          Pagination,
+          {
+            page: safePage,
+            totalPages,
+            pageSize: paginationPageSize,
+            total: paginationTotal,
+            onPage: isServer ? serverPagination.onPageChange : setPage,
+            onPageSize: isServer ? (n) => serverPagination.onPageSizeChange?.(n) : (n) => {
+              setPageSize(n);
+              setPage(0);
+            },
+            labels
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Tooltip, { label: columnsCountLabel, portal: true, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowSettings(true),
+          "aria-label": columnsCountLabel,
+          "aria-hidden": showSettings,
+          tabIndex: showSettings ? -1 : 0,
+          className: cn(
+            "group flex shrink-0 items-start justify-center overflow-hidden pt-3 transition-[width] duration-200 ease-out",
+            "border-l border-slate-100 dark:border-slate-800",
+            "hover:bg-slate-50 dark:hover:bg-slate-800/40",
+            showSettings ? "w-0 border-l-0" : "w-8 cursor-pointer"
+          ),
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "whitespace-nowrap text-xs font-medium tracking-wide text-slate-500 group-hover:text-slate-700 dark:text-slate-400 dark:group-hover:text-slate-200",
+              style: { writingMode: "vertical-rl", transform: "rotate(180deg)" },
+              children: columnsCountLabel
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "shrink-0 overflow-hidden transition-[width] duration-200 ease-out",
+            showSettings ? "w-56" : "w-0"
+          ),
+          children: /* @__PURE__ */ jsxs("div", { className: "flex w-56 flex-col border-l border-slate-100 p-2 dark:border-slate-800", children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between gap-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-wide text-slate-500 dark:text-slate-400", children: columnsCountLabel }),
+              /* @__PURE__ */ jsx(Tooltip, { label: labels.close, portal: true, children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowSettings(false),
+                  "aria-label": labels.close,
+                  className: "rounded p-0.5 text-slate-400 hover:bg-slate-100 hover:text-slate-700 dark:text-slate-500 dark:hover:bg-slate-800 dark:hover:text-slate-200",
+                  children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: autoSizeAll,
+                className: "mb-2 rounded border border-slate-200 px-2 py-1 text-xs font-medium text-slate-600 hover:bg-slate-50 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800",
+                children: labels.autoSize
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children: columns.map((col) => {
+              const checked = !hiddenCols.has(col.key);
+              const headerLabel = typeof col.header === "string" ? col.header : col.key;
+              return /* @__PURE__ */ jsxs(
+                "label",
+                {
+                  className: "inline-flex cursor-pointer items-center gap-1.5 rounded px-1 py-0.5 text-xs hover:bg-slate-100 dark:hover:bg-slate-800",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "checkbox",
+                        className: "size-3.5",
+                        checked,
+                        onChange: (e) => {
+                          setHiddenCols((s) => {
+                            const next = new Set(s);
+                            if (e.target.checked) next.delete(col.key);
+                            else next.add(col.key);
+                            return next;
+                          });
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "truncate", children: headerLabel })
+                  ]
+                },
+                col.key
+              );
+            }) })
+          ] })
+        }
+      )
+    ] })
+  ] });
+}
+function MobileFilters({
+  columns,
+  filters,
+  selectOptionsByKey,
+  isServer,
+  hasFilterCallback,
+  onSetFilter,
+  onClearFilter,
+  onClearAll,
+  labels,
+  locale
+}) {
+  const [open, setOpen] = useState(false);
+  const [expanded, setExpanded] = useState(null);
+  const backdropClose = useBackdropClose(() => setOpen(false));
+  useBodyScrollLock(open);
+  useOverlayHistory(open, () => setOpen(false));
+  const filterable = useMemo(
+    () => columns.map((col) => ({ col, filter: !isServer || hasFilterCallback ? resolveFilter(col) : null })).filter((x) => !!x.filter),
+    [columns, isServer, hasFilterCallback]
+  );
+  if (filterable.length === 0) return null;
+  const activeCount = filterable.filter(({ col }) => {
+    const s = filters[col.key];
+    return s && isFilterActive(s);
+  }).length;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-slate-100 px-4 py-2 dark:border-slate-800", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(true),
+        className: "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800",
+        children: [
+          /* @__PURE__ */ jsx(Filter, { className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { children: labels.filters }),
+          activeCount > 0 && /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-4 items-center justify-center rounded-full bg-sky-100 px-1 text-[11px] font-semibold text-sky-700 dark:bg-sky-500/20 dark:text-sky-300", children: activeCount })
+        ]
+      }
+    ),
+    activeCount > 0 && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onClearAll,
+        className: "text-xs text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200",
+        children: labels.clearAll
+      }
+    ),
+    open && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fixed inset-0 z-50 flex items-end justify-center bg-black/40",
+          role: "dialog",
+          "aria-modal": "true",
+          ...backdropClose,
+          children: /* @__PURE__ */ jsxs("div", { className: "flex max-h-[85vh] w-full flex-col overflow-hidden rounded-t-2xl bg-white shadow-xl dark:bg-slate-900", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-slate-100 px-4 py-3 dark:border-slate-800", children: [
+              /* @__PURE__ */ jsx("div", { className: "font-medium", children: labels.filters }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setOpen(false),
+                  "aria-label": labels.close,
+                  className: "-mr-1 rounded p-1.5 text-slate-500 hover:bg-slate-100 hover:text-slate-700 dark:hover:bg-slate-800 dark:hover:text-slate-200",
+                  children: /* @__PURE__ */ jsx(X, { className: "size-5" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex-1 divide-y divide-slate-100 overflow-y-auto overscroll-contain dark:divide-slate-800", children: filterable.map(({ col, filter }) => {
+              const state = filters[col.key];
+              const active = !!state && isFilterActive(state);
+              const isItemOpen = expanded === col.key;
+              return /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setExpanded(isItemOpen ? null : col.key),
+                    "aria-expanded": isItemOpen,
+                    className: "flex w-full items-center justify-between gap-2 px-4 py-3 text-left",
+                    children: [
+                      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-sm font-medium text-slate-700 dark:text-slate-200", children: [
+                        col.header,
+                        active && /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-brand" })
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        ChevronDown,
+                        {
+                          className: cn(
+                            "size-4 shrink-0 text-slate-400 transition-transform",
+                            isItemOpen && "rotate-180"
+                          )
+                        }
+                      )
+                    ]
+                  }
+                ),
+                isItemOpen && /* @__PURE__ */ jsx("div", { className: "px-4 pb-3", children: /* @__PURE__ */ jsx(
+                  FilterPopover,
+                  {
+                    column: col,
+                    state: state ?? defaultFilterState(filter),
+                    onChange: (next) => onSetFilter(col.key, next),
+                    onClear: () => onClearFilter(col.key),
+                    selectOptions: selectOptionsByKey[col.key] ?? [],
+                    labels,
+                    locale
+                  }
+                ) })
+              ] }, col.key);
+            }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-t border-slate-100 px-4 py-3 dark:border-slate-800", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onClearAll,
+                  disabled: activeCount === 0,
+                  className: "text-sm text-slate-500 hover:text-slate-700 disabled:opacity-40 dark:text-slate-400 dark:hover:text-slate-200",
+                  children: labels.clearAll
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setOpen(false),
+                  className: "rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white dark:bg-slate-100 dark:text-slate-900",
+                  children: labels.done
+                }
+              )
+            ] })
+          ] })
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+export {
+  DataTable
+};
+//# sourceMappingURL=data-table.js.map