@elabs-ai/components-data 4.0.0

package/dist/index.js

@@ -0,0 +1,933 @@
+"use client";
+
+// src/data-table/data-table.tsx
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import {
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
+import { Button, Skeleton, Spinner, useLocale } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ROW_CLICK_GUARD_SELECTOR = 'button, a[href], input, select, textarea, label, summary, [role="button"], [role="link"], [role="menuitem"], [role="checkbox"], [role="radio"], [role="switch"], [role="tab"], [contenteditable="true"]';
+function isInteractiveEventTarget(target) {
+  return target instanceof Element && target.closest(ROW_CLICK_GUARD_SELECTOR) !== null;
+}
+function isActiveTextSelection() {
+  if (typeof window === "undefined" || typeof window.getSelection !== "function") return false;
+  return window.getSelection()?.type === "Range";
+}
+var PINNED_SEAM_CLASS = "after:pointer-events-none after:absolute after:inset-y-0 after:w-px after:bg-border-strong after:content-['']";
+function unsizedColumnIds(defs) {
+  const out = /* @__PURE__ */ new Set();
+  const walk = (list) => {
+    for (const def of list) {
+      const group = def;
+      if (group.columns) {
+        walk(group.columns);
+        continue;
+      }
+      if (def.size !== void 0) continue;
+      const accessorKey = def.accessorKey;
+      const id = def.id ?? (accessorKey !== void 0 ? String(accessorKey).replace(/\./gu, "_") : typeof def.header === "string" ? def.header : void 0);
+      if (id) out.add(id);
+    }
+  };
+  walk(defs);
+  return out;
+}
+function DataTableInner({
+  columns,
+  data,
+  toolbar,
+  enablePagination = false,
+  pageSize = 10,
+  hidePaginationWhenSingle = true,
+  // Global filter
+  globalFilter: globalFilterProp,
+  onGlobalFilterChange,
+  // Controlled slices
+  sorting: sortingProp,
+  onSortingChange: onSortingChangeProp,
+  columnVisibility: columnVisibilityProp,
+  onColumnVisibilityChange: onColumnVisibilityChangeProp,
+  columnFilters: columnFiltersProp,
+  onColumnFiltersChange: onColumnFiltersChangeProp,
+  pagination: paginationProp,
+  onPaginationChange: onPaginationChangeProp,
+  columnPinning: columnPinningProp,
+  onColumnPinningChange: onColumnPinningChangeProp,
+  // Saved views rehydration
+  initialView,
+  // Server-side model
+  manualSorting = false,
+  manualFiltering = false,
+  manualPagination = false,
+  rowCount,
+  pageCount,
+  onServerChange,
+  // Loading
+  loading = false,
+  loadingRows,
+  // Virtualization
+  enableRowVirtualization = false,
+  estimateRowHeight = 40,
+  overscan = 8,
+  maxBodyHeight = "32rem",
+  zebra = true,
+  onRowClick,
+  rowActionLabel,
+  rowClassName,
+  caption,
+  emptyMessage = "No results.",
+  className,
+  ...rest
+}, ref) {
+  const { t } = useLocale();
+  const isSortingControlled = sortingProp !== void 0;
+  const isColumnVisibilityControlled = columnVisibilityProp !== void 0;
+  const isColumnFiltersControlled = columnFiltersProp !== void 0;
+  const isPaginationControlled = paginationProp !== void 0;
+  const isFilterControlled = globalFilterProp !== void 0;
+  const isColumnPinningControlled = columnPinningProp !== void 0;
+  const [internalSorting, setInternalSorting] = useState(
+    () => initialView?.sorting ?? []
+  );
+  const [internalColumnVisibility, setInternalColumnVisibility] = useState(
+    () => initialView?.columnVisibility ?? {}
+  );
+  const [internalColumnFilters, setInternalColumnFilters] = useState(
+    () => initialView?.columnFilters ?? []
+  );
+  const [internalPagination, setInternalPagination] = useState(
+    () => initialView?.pagination ?? {
+      pageIndex: 0,
+      pageSize
+    }
+  );
+  const [internalGlobalFilter, setInternalGlobalFilter] = useState(
+    () => initialView?.globalFilter ?? ""
+  );
+  const [internalColumnPinning, setInternalColumnPinning] = useState(
+    () => initialView?.columnPinning ?? { left: [], right: [] }
+  );
+  const sorting = isSortingControlled ? sortingProp : internalSorting;
+  const columnVisibility = isColumnVisibilityControlled ? columnVisibilityProp : internalColumnVisibility;
+  const columnFilters = isColumnFiltersControlled ? columnFiltersProp : internalColumnFilters;
+  const pagination = isPaginationControlled ? paginationProp : internalPagination;
+  const globalFilter = isFilterControlled ? globalFilterProp : internalGlobalFilter;
+  const columnPinning = isColumnPinningControlled ? columnPinningProp : internalColumnPinning;
+  const sortingRef = useRef(sorting);
+  sortingRef.current = sorting;
+  const columnFiltersRef = useRef(columnFilters);
+  columnFiltersRef.current = columnFilters;
+  const paginationRef = useRef(pagination);
+  paginationRef.current = pagination;
+  const globalFilterRef = useRef(globalFilter);
+  globalFilterRef.current = globalFilter;
+  const columnVisibilityRef = useRef(columnVisibility);
+  columnVisibilityRef.current = columnVisibility;
+  const columnPinningRef = useRef(columnPinning);
+  columnPinningRef.current = columnPinning;
+  const warnedMissingRowCountRef = useRef(false);
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "production" && manualPagination && rowCount === void 0 && pageCount === void 0 && !warnedMissingRowCountRef.current) {
+      warnedMissingRowCountRef.current = true;
+      console.warn(
+        '[DataTable] `manualPagination` is true but neither `rowCount` nor `pageCount` was provided \u2014 the pager will appear stuck ("Page 1 of 1", Next disabled). Pass `rowCount` (or `pageCount`) so the pager can compute the total.'
+      );
+    }
+  }, [manualPagination, rowCount, pageCount]);
+  function fireServerChange(overrides = {}) {
+    if (!onServerChange) return;
+    onServerChange({
+      pagination: paginationRef.current,
+      sorting: sortingRef.current,
+      columnFilters: columnFiltersRef.current,
+      globalFilter: globalFilterRef.current,
+      ...overrides
+    });
+  }
+  function resolveSorting(updater) {
+    return typeof updater === "function" ? updater(sortingRef.current) : updater;
+  }
+  function resolveColumnVisibility(updater) {
+    return typeof updater === "function" ? updater(columnVisibilityRef.current) : updater;
+  }
+  function resolveColumnFilters(updater) {
+    return typeof updater === "function" ? updater(columnFiltersRef.current) : updater;
+  }
+  function resolvePagination(updater) {
+    return typeof updater === "function" ? updater(paginationRef.current) : updater;
+  }
+  function resolveGlobalFilter(updater) {
+    return typeof updater === "function" ? updater(globalFilterRef.current) : updater;
+  }
+  function resolveColumnPinning(updater) {
+    return typeof updater === "function" ? updater(columnPinningRef.current) : updater;
+  }
+  const sortedRowModel = manualSorting ? {} : { getSortedRowModel: getSortedRowModel() };
+  const filteredRowModel = manualFiltering ? {} : { getFilteredRowModel: getFilteredRowModel() };
+  const paginationRowModel = enablePagination && !manualPagination ? { getPaginationRowModel: getPaginationRowModel() } : {};
+  const table = useReactTable({
+    data,
+    columns,
+    state: { sorting, columnVisibility, columnFilters, globalFilter, pagination, columnPinning },
+    // Sorting
+    onSortingChange: (updater) => {
+      const next = resolveSorting(updater);
+      if (!isSortingControlled) setInternalSorting(next);
+      onSortingChangeProp?.(updater);
+      if (manualSorting) {
+        sortingRef.current = next;
+        fireServerChange({ sorting: next });
+      }
+    },
+    // Column visibility
+    onColumnVisibilityChange: (updater) => {
+      const next = resolveColumnVisibility(updater);
+      if (!isColumnVisibilityControlled) setInternalColumnVisibility(next);
+      onColumnVisibilityChangeProp?.(updater);
+    },
+    // Column filters
+    onColumnFiltersChange: (updater) => {
+      const next = resolveColumnFilters(updater);
+      if (!isColumnFiltersControlled) setInternalColumnFilters(next);
+      onColumnFiltersChangeProp?.(updater);
+      if (manualFiltering) {
+        columnFiltersRef.current = next;
+        fireServerChange({ columnFilters: next });
+      }
+    },
+    // Global filter
+    onGlobalFilterChange: (updater) => {
+      const next = resolveGlobalFilter(updater);
+      if (!isFilterControlled) setInternalGlobalFilter(next);
+      onGlobalFilterChange?.(next);
+      if (manualFiltering) {
+        globalFilterRef.current = next;
+        fireServerChange({ globalFilter: next });
+      }
+    },
+    // Pagination
+    onPaginationChange: (updater) => {
+      const next = resolvePagination(updater);
+      if (!isPaginationControlled) setInternalPagination(next);
+      onPaginationChangeProp?.(updater);
+      if (manualPagination) {
+        paginationRef.current = next;
+        fireServerChange({ pagination: next });
+      }
+    },
+    // Column pinning — a LAYOUT slice, so unlike sorting/filtering/pagination it
+    // never fires `onServerChange`: freezing a column changes nothing the server
+    // would need to re-query.
+    onColumnPinningChange: (updater) => {
+      const next = resolveColumnPinning(updater);
+      if (!isColumnPinningControlled) setInternalColumnPinning(next);
+      onColumnPinningChangeProp?.(updater);
+    },
+    getCoreRowModel: getCoreRowModel(),
+    ...sortedRowModel,
+    ...filteredRowModel,
+    ...paginationRowModel,
+    // Server-side options
+    manualSorting,
+    manualFiltering,
+    manualPagination,
+    ...rowCount !== void 0 ? { rowCount } : {},
+    ...pageCount !== void 0 ? { pageCount } : {}
+    // No `initialState`: every slice is driven explicitly via `state` above
+    // (internal slices are seeded from `initialView` at useState init), so a
+    // TanStack `initialState` would be dead/misleading.
+  });
+  const rows = table.getRowModel().rows;
+  const colCount = table.getVisibleLeafColumns().length;
+  const headerRowCount = table.getHeaderGroups().length;
+  const ariaRowCount = (rowCount ?? rows.length) + headerRowCount;
+  const hasLeftPinned = (columnPinning.left?.length ?? 0) > 0;
+  const hasRightPinned = (columnPinning.right?.length ?? 0) > 0;
+  const pinnedScrollPadding = {
+    ...hasLeftPinned ? { scrollPaddingInlineStart: table.getLeftTotalSize() } : {},
+    ...hasRightPinned ? { scrollPaddingInlineEnd: table.getRightTotalSize() } : {}
+  };
+  const warnedUnsizedPinnedRef = useRef(false);
+  const pinnedIds = [...columnPinning.left ?? [], ...columnPinning.right ?? []];
+  const unsizedIds = process.env.NODE_ENV === "production" || pinnedIds.length === 0 ? null : unsizedColumnIds(columns);
+  const pinnedWithoutSizeKey = unsizedIds ? pinnedIds.filter((id) => unsizedIds.has(id)).join(",") : "";
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "production" && pinnedWithoutSizeKey !== "" && !warnedUnsizedPinnedRef.current) {
+      warnedUnsizedPinnedRef.current = true;
+      console.warn(
+        `[DataTable] Pinned column(s) without an explicit \`size\` in their \`ColumnDef\`: ${pinnedWithoutSizeKey}. Sticky offsets are computed from the declared sizes, so an auto-width pinned column will render at a width that doesn't match its own offset. Give every pinned column a \`size\`.`
+      );
+    }
+  }, [pinnedWithoutSizeKey]);
+  function pinnedCellGeometry(column) {
+    const pinned = column.getIsPinned();
+    if (pinned === false) return null;
+    const size = column.getSize();
+    const style = {
+      width: size,
+      minWidth: size,
+      maxWidth: size,
+      ...pinned === "left" ? { left: column.getStart("left") } : { right: column.getAfter("right") }
+    };
+    return {
+      pinned,
+      style,
+      // The seam between the frozen block and the scrolling block is the SOLE
+      // structural cue between two regions that share one row fill and one
+      // zebra stripe — delete it and a sighted user cannot tell them apart — so
+      // it takes the strong rung (ADR 0010 decision test). No shadow: ADR 0020's
+      // `--shadow-strength: 0` (`data-decoration="8|9|10"`) would
+      // erase a shadow-only cue entirely.
+      //
+      // It is drawn as a 1px `::after` INSIDE the cell, NOT as `border-e` /
+      // `border-s`. A real border cannot work here: Tailwind's Preflight puts
+      // the table in the COLLAPSED border model, and a collapsed border is
+      // painted by the <table> at the cell's STATIC position — it does not
+      // travel with a `position: sticky` cell, and the cell's own opaque fill
+      // (which it needs, see `pinnedCellFillClass`) then paints over it. Measured
+      // in Chromium on `Data/DataTable → PinnedColumns`: with `border-e` the
+      // seam pixel read `143,143,143` (light `--border-strong`) at
+      // scrollLeft 0 and `245,245,245` (the plain cell fill — i.e. GONE) once
+      // scrolled, in all three themes and on both edges. So the one cue vanished
+      // exactly when the freeze was doing something. The `::after` lives in the
+      // sticky cell's own stacking context, so it moves with it.
+      edgeClass: pinned === "left" ? column.getIsLastColumn("left") ? PINNED_SEAM_CLASS + " after:end-0" : "" : column.getIsFirstColumn("right") ? PINNED_SEAM_CLASS + " after:start-0" : ""
+    };
+  }
+  const scrollRef = useRef(null);
+  const virtualizer = useVirtualizer({
+    count: enableRowVirtualization ? rows.length : 0,
+    getScrollElement: () => enableRowVirtualization ? scrollRef.current : null,
+    estimateSize: () => estimateRowHeight,
+    overscan,
+    enabled: enableRowVirtualization
+  });
+  const virtualItems = enableRowVirtualization ? virtualizer.getVirtualItems() : [];
+  const totalSize = enableRowVirtualization ? virtualizer.getTotalSize() : 0;
+  const paddingTop = virtualItems.length > 0 ? virtualItems[0]?.start ?? 0 : 0;
+  const paddingBottom = totalSize > 0 ? totalSize - (virtualItems[virtualItems.length - 1]?.end ?? 0) : 0;
+  const plainScrollRef = useRef(null);
+  const [scrollOverflows, setScrollOverflows] = useState(false);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+  const updateScrollAffordance = useCallback(() => {
+    const el = plainScrollRef.current;
+    if (!el) return;
+    setScrollOverflows(
+      el.scrollWidth > el.clientWidth + 1 || el.scrollHeight > el.clientHeight + 1
+    );
+    setCanScrollLeft(el.scrollLeft > 0);
+    setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+  }, []);
+  useEffect(() => {
+    const el = plainScrollRef.current;
+    if (!el) return;
+    updateScrollAffordance();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(updateScrollAffordance);
+    observer.observe(el);
+    if (el.firstElementChild) observer.observe(el.firstElementChild);
+    return () => observer.disconnect();
+  }, [updateScrollAffordance, colCount, rows.length]);
+  const showEmpty = !loading && rows.length === 0;
+  const showSkeletons = loading && rows.length === 0;
+  const skeletonRowCount = loadingRows ?? pageSize;
+  function renderThead(sticky, withRowIndex = false) {
+    return /* @__PURE__ */ jsx(
+      "thead",
+      {
+        className: cn(
+          // #173: header bottom is the only cue between header and first data row → border-strong
+          "border-b border-border-strong",
+          // A sticky header scrolls OVER the body, so its fill must be opaque or data
+          // rows bleed through the labels; the non-sticky header keeps the /60 wash.
+          // z-20 (raised from z-10 for #333) puts the header row above the pinned
+          // body cells (z-10) and below the pinned header corner (z-30). No visual
+          // delta: nothing else in the table sits between those rungs.
+          sticky ? "sticky top-0 z-20 bg-surface-muted" : "bg-surface-muted/60"
+        ),
+        children: table.getHeaderGroups().map((headerGroup, groupIndex) => /* @__PURE__ */ jsx("tr", { "aria-rowindex": withRowIndex ? groupIndex + 1 : void 0, children: headerGroup.headers.map((header) => {
+          const geometry = pinnedCellGeometry(header.column);
+          const canSort = header.column.getCanSort();
+          const sorted = header.column.getIsSorted();
+          const headerLabel = typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : header.column.id;
+          const sortStateLabel = sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "not sorted";
+          const SortIcon = sorted === "asc" ? ArrowUp : sorted === "desc" ? ArrowDown : ArrowUpDown;
+          return /* @__PURE__ */ jsx(
+            "th",
+            {
+              scope: "col",
+              "aria-sort": canSort ? sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "none" : void 0,
+              "data-pinned": geometry?.pinned ?? void 0,
+              style: geometry?.style,
+              className: cn(
+                "h-10 px-3 text-start align-middle font-medium text-muted-foreground",
+                // A pinned HEADER cell is the corner where both freezes meet,
+                // so it stacks above the sticky header row (z-20) which is
+                // above the pinned body cells (z-10). It needs an OPAQUE
+                // fill (scrolled header cells pass underneath it), and that
+                // fill has to composite to exactly what its unpinned
+                // neighbours show — same problem, same two-layer answer as
+                // `pinnedCellFillClass`:
+                //   sticky branch   → the row is already opaque `surface-muted`, so match it.
+                //   plain branch    → the row is `surface-muted/60` over the
+                //                     container's `card`, so paint `card` and
+                //                     re-apply the /60 wash on `::before`.
+                // Painting the plain branch's corner solid `surface-muted`
+                // read 4-5/255 darker than the header beside it in every
+                // theme (measured: 242 vs 247 light, 43 vs 40
+                // dark) — the same "floating pill"
+                // artefact #333 was filed about, moved into the header.
+                geometry && "sticky z-30",
+                geometry && (sticky ? "bg-surface-muted" : "bg-card before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:bg-surface-muted/60 before:content-['']"),
+                // Separate cn() argument on purpose: the seam is the sole
+                // structural cue between the frozen and scrolling blocks, so
+                // it must not read as a "boundary + fill in one class string"
+                // redundancy (separation:check).
+                geometry?.edgeClass
+              ),
+              children: header.isPlaceholder ? null : canSort ? /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: header.column.getToggleSortingHandler(),
+                  "aria-label": `Sort by ${headerLabel}, ${sortStateLabel}`,
+                  className: "inline-flex items-center gap-1 rounded-sm transition-colors duration-fast ease-standard hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  children: [
+                    flexRender(header.column.columnDef.header, header.getContext()),
+                    /* @__PURE__ */ jsx(
+                      SortIcon,
+                      {
+                        "aria-hidden": "true",
+                        className: "size-3 shrink-0 transition-colors duration-fast ease-standard"
+                      }
+                    )
+                  ]
+                }
+              ) : flexRender(header.column.columnDef.header, header.getContext())
+            },
+            header.id
+          );
+        }) }, headerGroup.id))
+      }
+    );
+  }
+  function rowSeparationClass(rowIndex) {
+    if (!zebra) return "border-b border-border-strong last:border-b-0";
+    return rowIndex % 2 === 1 ? "bg-foreground/5" : "";
+  }
+  function pinnedCellFillClass(rowIndex) {
+    return cn(
+      "bg-card",
+      "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:content-['']",
+      zebra && rowIndex % 2 === 1 && "before:bg-foreground/5",
+      "group-hover/row:before:bg-foreground/10",
+      "group-data-[state=selected]/row:before:bg-accent"
+    );
+  }
+  function rowActionName(row) {
+    const explicit = rowActionLabel?.(row);
+    if (explicit) return explicit;
+    const firstValue = row.getVisibleCells()[0]?.getValue();
+    if (typeof firstValue === "string" && firstValue.trim() !== "") return firstValue;
+    if (typeof firstValue === "number") return String(firstValue);
+    return t("data.table.rowAction");
+  }
+  function renderRow(row, rowIndex, extras) {
+    const clickable = Boolean(onRowClick);
+    function handleRowClick(event) {
+      if (isInteractiveEventTarget(event.target)) return;
+      if (isActiveTextSelection()) return;
+      onRowClick?.(row, event);
+    }
+    return /* @__PURE__ */ jsx(
+      "tr",
+      {
+        "data-state": row.getIsSelected() ? "selected" : void 0,
+        onClick: clickable ? handleRowClick : void 0,
+        className: cn(
+          // Color-only feedback (no transform/movement) → per
+          // docs/MOTION_GUIDELINES.md item 3 this stays under OS reduced-motion
+          // (only movement is neutralized); the gated duration-fast/ease-standard
+          // pair already collapses toward ~0ms via --motion-factor when the user
+          // or OS asks for reduced motion, matching the header sort button.
+          "transition-colors duration-fast ease-standard hover:bg-foreground/10 data-[state=selected]:bg-accent",
+          // Named group (#333) so a PINNED cell can re-apply the row's hover /
+          // selected wash on top of its own opaque fill — only CSS knows the
+          // pointer is over a sibling cell. Purely a selector hook: `group/row`
+          // emits no style of its own.
+          "group/row",
+          rowSeparationClass(rowIndex),
+          // `<tr>` isn't in the global auto-cursor-pointer role list (button/
+          // menuitem/tab/…), so a clickable row needs its own cursor. The focus
+          // ring is driven off the hidden button's `:focus-visible` (same
+          // `has-[[data-slot=…]:focus-visible]` pattern as InputGroup) so the
+          // ring paints on the ROW the user is about to activate, even though
+          // focus lives on the sr-only control inside it.
+          clickable && "cursor-pointer has-[[data-slot=data-table-row-action]:focus-visible]:outline-2 has-[[data-slot=data-table-row-action]:focus-visible]:-outline-offset-2 has-[[data-slot=data-table-row-action]:focus-visible]:outline-ring",
+          rowClassName?.(row)
+        ),
+        ...extras,
+        children: row.getVisibleCells().map((cell, cellIndex) => {
+          const geometry = pinnedCellGeometry(cell.column);
+          return /* @__PURE__ */ jsxs(
+            "td",
+            {
+              "data-pinned": geometry?.pinned ?? void 0,
+              style: geometry?.style,
+              className: cn(
+                "px-3 py-2 align-middle",
+                // z-10: above the normal (unpositioned) cells it scrolls over,
+                // below the sticky header row (z-20) and the pinned corner (z-30).
+                geometry && "sticky z-10",
+                geometry && pinnedCellFillClass(rowIndex),
+                // Separate cn() argument — see pinnedCellGeometry's edgeClass.
+                geometry?.edgeClass
+              ),
+              children: [
+                clickable && cellIndex === 0 && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-slot": "data-table-row-action",
+                    className: "sr-only",
+                    onClick: (event) => onRowClick?.(row, event),
+                    children: rowActionName(row)
+                  }
+                ),
+                flexRender(cell.column.columnDef.cell, cell.getContext())
+              ]
+            },
+            cell.id
+          );
+        })
+      },
+      row.id
+    );
+  }
+  function renderSkeletonBody(count) {
+    return Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", className: rowSeparationClass(i), children: Array.from({ length: colCount }).map((_2, j) => /* @__PURE__ */ jsx("td", { className: "px-3 py-2 align-middle", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }) }, j)) }, `skeleton-${i}`));
+  }
+  function renderEmptyBody() {
+    return /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: colCount, className: "h-24 px-3 text-center text-muted-foreground", children: emptyMessage }) });
+  }
+  function renderTbodyNormal() {
+    if (showSkeletons) {
+      return /* @__PURE__ */ jsx("tbody", { children: renderSkeletonBody(skeletonRowCount) });
+    }
+    return /* @__PURE__ */ jsx("tbody", { children: showEmpty ? renderEmptyBody() : rows.map((row, i) => renderRow(row, i)) });
+  }
+  function renderTbodyVirtualized() {
+    if (showSkeletons) {
+      const virtualSkeletonCount = loadingRows ?? Math.min(10, pageSize);
+      return /* @__PURE__ */ jsx("tbody", { children: renderSkeletonBody(virtualSkeletonCount) });
+    }
+    return /* @__PURE__ */ jsx("tbody", { children: showEmpty ? renderEmptyBody() : /* @__PURE__ */ jsxs(Fragment, { children: [
+      paddingTop > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("td", { style: { height: paddingTop }, colSpan: colCount }) }),
+      virtualItems.map((virtualRow) => {
+        const row = rows[virtualRow.index];
+        if (!row) return null;
+        return renderRow(row, virtualRow.index, {
+          ref: virtualizer.measureElement,
+          "data-index": virtualRow.index,
+          // Absolute 1-based row position; header row(s) occupy 1..headerRowCount.
+          "aria-rowindex": headerRowCount + virtualRow.index + 1
+        });
+      }),
+      paddingBottom > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("td", { style: { height: paddingBottom }, colSpan: colCount }) })
+    ] }) });
+  }
+  function renderPagination() {
+    if (enableRowVirtualization) return null;
+    if (!enablePagination && !manualPagination) return null;
+    const pageCountUnknown = manualPagination && rowCount === void 0 && pageCount === void 0;
+    if (hidePaginationWhenSingle && !pageCountUnknown && table.getPageCount() <= 1) return null;
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-body text-muted-foreground", children: [
+        "Page ",
+        table.getState().pagination.pageIndex + 1,
+        " of ",
+        table.getPageCount() || 1
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => table.previousPage(),
+            disabled: !table.getCanPreviousPage(),
+            children: "Previous"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => table.nextPage(),
+            disabled: !table.getCanNextPage(),
+            children: "Next"
+          }
+        )
+      ] })
+    ] });
+  }
+  const captionElement = caption != null ? /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }) : null;
+  if (enableRowVirtualization) {
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("space-y-3", className), ...rest, children: [
+      toolbar ? toolbar(table) : null,
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: scrollRef,
+          tabIndex: 0,
+          "aria-label": t("data.table.scrollRegion"),
+          "aria-busy": loading || void 0,
+          className: "relative overflow-auto rounded-lg border bg-card focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          style: { maxHeight: maxBodyHeight, ...pinnedScrollPadding },
+          children: [
+            loading && rows.length > 0 && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: "status",
+                "aria-live": "polite",
+                className: "absolute inset-0 z-40 flex items-center justify-center rounded-lg bg-card/80",
+                children: [
+                  /* @__PURE__ */ jsx(Spinner, { "aria-hidden": "true", className: "text-foreground" }),
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading table data\u2026" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "table",
+              {
+                "aria-busy": loading || void 0,
+                "aria-rowcount": ariaRowCount,
+                className: "w-full caption-bottom text-body",
+                children: [
+                  captionElement,
+                  renderThead(true, true),
+                  renderTbodyVirtualized()
+                ]
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("space-y-3", className), ...rest, children: [
+    toolbar ? toolbar(table) : null,
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-busy": loading || void 0,
+        className: "relative overflow-hidden rounded-lg border bg-card",
+        children: [
+          loading && rows.length > 0 && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "status",
+              "aria-live": "polite",
+              className: "absolute inset-0 z-40 flex items-center justify-center rounded-lg bg-card/80",
+              children: [
+                /* @__PURE__ */ jsx(Spinner, { "aria-hidden": "true", className: "text-foreground" }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading table data\u2026" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: plainScrollRef,
+              "data-slot": "data-table-scroll-region",
+              tabIndex: scrollOverflows ? 0 : void 0,
+              "aria-label": scrollOverflows ? t("data.table.scrollRegion") : void 0,
+              onScroll: updateScrollAffordance,
+              className: "overflow-auto rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+              style: hasLeftPinned || hasRightPinned ? pinnedScrollPadding : void 0,
+              children: /* @__PURE__ */ jsxs("table", { "aria-busy": loading || void 0, className: "w-full caption-bottom text-body", children: [
+                captionElement,
+                renderThead(false),
+                renderTbodyNormal()
+              ] })
+            }
+          ),
+          canScrollLeft && !hasLeftPinned && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              "data-slot": "data-table-scroll-fade-left",
+              className: "pointer-events-none absolute inset-y-0 left-0 z-10 w-8 rounded-lg bg-gradient-to-r from-card to-transparent"
+            }
+          ),
+          canScrollRight && !hasRightPinned && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              "data-slot": "data-table-scroll-fade-right",
+              className: "pointer-events-none absolute inset-y-0 right-0 z-10 w-8 rounded-lg bg-gradient-to-l from-card to-transparent"
+            }
+          )
+        ]
+      }
+    ),
+    renderPagination()
+  ] });
+}
+var DataTableWithRef = forwardRef(DataTableInner);
+
+// src/search-input/search-input.tsx
+import { useId } from "react";
+import { Input } from "@elabs-ai/components-ui";
+import { cn as cn2 } from "@elabs-ai/components-ui/lib/cn";
+import { SearchIcon } from "@elabs-ai/components-icons";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function SearchInput({
+  value,
+  onValueChange,
+  label = "Search",
+  placeholder = "Search\u2026",
+  className,
+  containerClassName,
+  disabled,
+  ...props
+}) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs2("div", { className: cn2("relative w-full max-w-xs", containerClassName), children: [
+    /* @__PURE__ */ jsx2("label", { htmlFor: id, className: "sr-only", children: label }),
+    /* @__PURE__ */ jsx2(
+      SearchIcon,
+      {
+        size: 16,
+        className: "pointer-events-none absolute start-2.5 top-1/2 -translate-y-1/2 text-muted-foreground"
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      Input,
+      {
+        id,
+        value,
+        onChange: (e) => onValueChange(e.target.value),
+        placeholder,
+        disabled,
+        className: cn2("ps-8", value && "pe-8", className),
+        ...props
+      }
+    ),
+    value && !disabled ? /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        onClick: () => onValueChange(""),
+        "aria-label": "Clear search",
+        className: "absolute end-2 top-1/2 -translate-y-1/2 rounded-sm p-0.5 text-muted-foreground transition-colors duration-fast ease-standard hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring animate-in fade-in zoom-in-95 duration-fast ease-entrance",
+        children: /* @__PURE__ */ jsx2(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx2("path", { d: "M18 6 6 18M6 6l12 12" })
+          }
+        )
+      }
+    ) : null
+  ] });
+}
+
+// src/filter-bar/filter-bar.tsx
+import "react";
+import { cn as cn3 } from "@elabs-ai/components-ui/lib/cn";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function FilterBar({ children, actions, className }) {
+  return /* @__PURE__ */ jsxs3("div", { className: cn3("flex flex-wrap items-center justify-between gap-2", className), children: [
+    /* @__PURE__ */ jsx3("div", { className: "flex flex-wrap items-center gap-2", children }),
+    actions ? /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-2", children: actions }) : null
+  ] });
+}
+
+// src/facet-filter/facet-filter.tsx
+import { forwardRef as forwardRef2 } from "react";
+import {
+  Badge,
+  Button as Button2,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "@elabs-ai/components-ui";
+import { cn as cn4 } from "@elabs-ai/components-ui/lib/cn";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var FacetFilter = forwardRef2(function FacetFilter2({ title, options, selected, onSelectedChange, className, ...props }, ref) {
+  const selectedSet = new Set(selected);
+  const toggle = (value) => {
+    const next = new Set(selectedSet);
+    if (next.has(value)) next.delete(value);
+    else next.add(value);
+    onSelectedChange([...next]);
+  };
+  return /* @__PURE__ */ jsxs4(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx4(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs4(Button2, { ref, variant: "outline", className: cn4("border-dashed", className), ...props, children: [
+      title,
+      selected.length > 0 ? /* @__PURE__ */ jsx4(
+        Badge,
+        {
+          variant: "secondary",
+          className: "ms-1 rounded px-1.5 animate-in fade-in zoom-in-95 duration-fast ease-entrance",
+          children: selected.length
+        }
+      ) : null
+    ] }) }),
+    /* @__PURE__ */ jsxs4(DropdownMenuContent, { className: "min-w-[12rem]", children: [
+      /* @__PURE__ */ jsx4(DropdownMenuLabel, { children: title }),
+      options.map((opt) => {
+        const checked = selectedSet.has(opt.value);
+        return /* @__PURE__ */ jsxs4(
+          DropdownMenuItem,
+          {
+            onSelect: (e) => {
+              e.preventDefault();
+              toggle(opt.value);
+            },
+            children: [
+              /* @__PURE__ */ jsx4(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "flex size-4 items-center justify-center rounded border transition-colors duration-fast ease-standard " + (checked ? "border-primary bg-primary text-primary-foreground" : "border-input"),
+                  children: checked ? "\u2713" : ""
+                }
+              ),
+              opt.label
+            ]
+          },
+          opt.value
+        );
+      }),
+      selected.length > 0 ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+        /* @__PURE__ */ jsx4(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsx4(DropdownMenuItem, { onSelect: () => onSelectedChange([]), children: "Clear filters" })
+      ] }) : null
+    ] })
+  ] });
+});
+FacetFilter.displayName = "FacetFilter";
+
+// src/column-picker/column-picker.tsx
+import "@tanstack/react-table";
+import { forwardRef as forwardRef3 } from "react";
+import {
+  Button as Button3,
+  DropdownMenu as DropdownMenu2,
+  DropdownMenuContent as DropdownMenuContent2,
+  DropdownMenuItem as DropdownMenuItem2,
+  DropdownMenuLabel as DropdownMenuLabel2,
+  DropdownMenuSeparator as DropdownMenuSeparator2,
+  DropdownMenuTrigger as DropdownMenuTrigger2
+} from "@elabs-ai/components-ui";
+import { cn as cn5 } from "@elabs-ai/components-ui/lib/cn";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function ColumnPickerInner({ table, label = "Columns", className, ...props }, ref) {
+  const columns = table.getAllColumns().filter((c) => c.getCanHide());
+  return /* @__PURE__ */ jsxs5(DropdownMenu2, { children: [
+    /* @__PURE__ */ jsx5(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsx5(Button3, { ref, variant: "outline", size: "sm", className: cn5(className), ...props, children: label }) }),
+    /* @__PURE__ */ jsxs5(DropdownMenuContent2, { align: "end", className: "min-w-[12rem]", children: [
+      /* @__PURE__ */ jsx5(DropdownMenuLabel2, { children: "Toggle columns" }),
+      /* @__PURE__ */ jsx5(DropdownMenuSeparator2, {}),
+      columns.map((column) => /* @__PURE__ */ jsxs5(
+        DropdownMenuItem2,
+        {
+          onSelect: (e) => {
+            e.preventDefault();
+            column.toggleVisibility(!column.getIsVisible());
+          },
+          children: [
+            /* @__PURE__ */ jsx5(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "flex size-4 items-center justify-center rounded border transition-colors duration-fast ease-standard " + (column.getIsVisible() ? "border-primary bg-primary text-primary-foreground" : "border-input"),
+                children: column.getIsVisible() ? "\u2713" : ""
+              }
+            ),
+            /* @__PURE__ */ jsx5("span", { className: "capitalize", children: column.id })
+          ]
+        },
+        column.id
+      ))
+    ] })
+  ] });
+}
+ColumnPickerInner.displayName = "ColumnPicker";
+var ColumnPicker = forwardRef3(ColumnPickerInner);
+
+// src/to-csv.ts
+import { downloadBlob } from "@elabs-ai/components-ui";
+var INJECTION_PREFIXES = ["=", "+", "-", "@"];
+function stringifyValue(value) {
+  if (value === null || value === void 0) return "";
+  if (value instanceof Date) return value.toISOString();
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+function quoteField(field, delimiter) {
+  if (INJECTION_PREFIXES.some((p) => field.startsWith(p))) {
+    field = "'" + field;
+  }
+  if (field.includes(delimiter) || field.includes('"') || field.includes("\n") || field.includes("\r")) {
+    return '"' + field.replaceAll('"', '""') + '"';
+  }
+  return field;
+}
+function toCsv(rows, opts) {
+  const delimiter = opts?.delimiter ?? ",";
+  const includeHeader = opts?.header !== false;
+  const firstRow = rows[0];
+  const cols = opts?.columns ?? (firstRow !== void 0 ? Object.keys(firstRow).map((k) => ({ key: k })) : []);
+  const lines = [];
+  if (includeHeader && cols.length > 0) {
+    const headerRow = cols.map((c) => quoteField(c.header ?? c.key, delimiter)).join(delimiter);
+    lines.push(headerRow);
+  }
+  for (const row of rows) {
+    const line = cols.map((c) => quoteField(stringifyValue(row[c.key]), delimiter)).join(delimiter);
+    lines.push(line);
+  }
+  return lines.join("\r\n") + (lines.length > 0 ? "\r\n" : "");
+}
+function downloadCsv(rows, opts) {
+  if (typeof document === "undefined") return;
+  const csv = toCsv(rows, opts);
+  const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+  downloadBlob(blob, (opts?.filename ?? "download") + ".csv");
+}
+export {
+  ColumnPicker,
+  DataTableWithRef as DataTable,
+  FacetFilter,
+  FilterBar,
+  SearchInput,
+  downloadCsv,
+  toCsv
+};
+//# sourceMappingURL=index.js.map