@facetui/react 1.0.0

package/dist/index.js

@@ -0,0 +1,1209 @@
+"use client";
+
+// src/components/data-table/core/DataTableContext.tsx
+import { createContext, useContext } from "react";
+var DataTableContext = createContext(null);
+function useDataTableContext() {
+  const ctx = useContext(DataTableContext);
+  if (!ctx) {
+    throw new Error(
+      "useDataTableContext must be called inside a <DataTable> component tree."
+    );
+  }
+  return ctx;
+}
+
+// src/components/data-table/core/useDataTable.ts
+import { useCallback, useMemo, useState } from "react";
+import {
+  useReactTable,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  getPaginationRowModel,
+  functionalUpdate
+} from "@tanstack/react-table";
+var SELECT_COLUMN_ID = "__select__";
+var facetTextFilter = (row, columnId, filterValue) => {
+  const query = String(filterValue ?? "").trim().toLowerCase();
+  if (query === "") return true;
+  return String(row.getValue(columnId) ?? "").toLowerCase().includes(query);
+};
+function useDataTable(props) {
+  const {
+    data,
+    columns,
+    getRowId,
+    // pagination
+    manualPagination = false,
+    rowCount,
+    pageSizeOptions = [10, 25, 50, 100],
+    onPaginationChange,
+    // sorting
+    manualSorting = false,
+    enableMultiSort = false,
+    onSortingChange,
+    // filtering
+    manualFiltering = false,
+    onGlobalFilterChange,
+    onColumnFiltersChange,
+    // row selection
+    enableRowSelection,
+    enableMultiRowSelection = true,
+    onRowSelectionChange
+  } = props;
+  const resolvedColumns = useMemo(() => {
+    const wantsSelectionColumn = enableRowSelection !== void 0 && enableRowSelection !== false;
+    if (!wantsSelectionColumn || columns.some((c) => c.id === SELECT_COLUMN_ID)) {
+      return columns;
+    }
+    const selectColumn = {
+      id: SELECT_COLUMN_ID,
+      header: "",
+      enableSorting: false,
+      enableHiding: false,
+      size: 40
+    };
+    return [selectColumn, ...columns];
+  }, [columns, enableRowSelection]);
+  const engineColumns = useMemo(
+    () => resolvedColumns.map((c) => {
+      const accessorFn = c.accessorFn ? (row) => c.accessorFn(row) : c.accessorKey != null ? (row) => row[c.accessorKey] : void 0;
+      return {
+        id: c.id,
+        ...accessorFn ? { accessorFn } : {},
+        enableSorting: c.enableSorting ?? true,
+        enableHiding: c.enableHiding ?? true,
+        sortingFn: "basic",
+        filterFn: facetTextFilter,
+        size: c.size ?? 150
+      };
+    }),
+    [resolvedColumns]
+  );
+  const [pagination, setPaginationState] = useState({
+    pageIndex: 0,
+    pageSize: pageSizeOptions[0]
+  });
+  const [sorting, setSortingState] = useState([]);
+  const [globalFilterState, setGlobalFilterState] = useState(
+    props.globalFilter ?? ""
+  );
+  const [columnFiltersState, setColumnFiltersState] = useState(
+    props.columnFilters ?? []
+  );
+  const [rowSelection, setRowSelectionState] = useState({});
+  const [columnVisibility, setColumnVisibilityState] = useState({});
+  const globalFilter = props.globalFilter !== void 0 ? props.globalFilter : globalFilterState;
+  const columnFilters = props.columnFilters !== void 0 ? props.columnFilters : columnFiltersState;
+  const enableRowSelectionOption = useMemo(() => {
+    if (typeof enableRowSelection === "function") {
+      return (tsRow) => enableRowSelection({
+        id: tsRow.id,
+        original: tsRow.original,
+        index: tsRow.index,
+        getIsSelected: () => tsRow.getIsSelected(),
+        getCanSelect: () => true,
+        toggleSelected: (value) => tsRow.toggleSelected(value)
+      });
+    }
+    return enableRowSelection ?? true;
+  }, [enableRowSelection]);
+  const table = useReactTable({
+    data,
+    columns: engineColumns,
+    state: {
+      pagination,
+      sorting,
+      globalFilter,
+      columnFilters,
+      rowSelection,
+      columnVisibility
+    },
+    getRowId,
+    enableRowSelection: enableRowSelectionOption,
+    enableMultiRowSelection,
+    enableMultiSort,
+    enableSortingRemoval: true,
+    sortDescFirst: false,
+    manualPagination,
+    manualSorting,
+    manualFiltering,
+    ...manualPagination && rowCount != null ? { rowCount } : {},
+    // Page-reset on filter change is done explicitly in the setters below so
+    // it stays synchronous and matches FacetUI's historical behaviour.
+    autoResetPageIndex: false,
+    globalFilterFn: facetTextFilter,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: (updater) => setPaginationState((prev) => {
+      const next = functionalUpdate(updater, prev);
+      onPaginationChange?.(next);
+      return next;
+    }),
+    onSortingChange: (updater) => setSortingState((prev) => {
+      const next = functionalUpdate(updater, prev);
+      onSortingChange?.(next);
+      return next;
+    }),
+    onGlobalFilterChange: (updater) => setGlobalFilterState((prev) => {
+      const next = functionalUpdate(updater, prev);
+      onGlobalFilterChange?.(next);
+      return next;
+    }),
+    onColumnFiltersChange: (updater) => setColumnFiltersState((prev) => {
+      const next = functionalUpdate(updater, prev);
+      onColumnFiltersChange?.(next);
+      return next;
+    }),
+    onRowSelectionChange: (updater) => setRowSelectionState((prev) => {
+      const next = functionalUpdate(updater, prev);
+      onRowSelectionChange?.(next);
+      return next;
+    }),
+    onColumnVisibilityChange: setColumnVisibilityState
+  });
+  const setPagination = useCallback(
+    (updater) => table.setPagination(updater),
+    [table]
+  );
+  const setSorting = useCallback(
+    (updater) => table.setSorting(updater),
+    [table]
+  );
+  const setGlobalFilter = useCallback(
+    (value) => {
+      table.setGlobalFilter(value);
+      table.setPageIndex(0);
+    },
+    [table]
+  );
+  const setColumnFilters = useCallback(
+    (updater) => {
+      table.setColumnFilters(updater);
+      table.setPageIndex(0);
+    },
+    [table]
+  );
+  const runtimeColumns = useMemo(() => {
+    const defById = new Map(resolvedColumns.map((c) => [c.id, c]));
+    return table.getAllLeafColumns().map((tsCol) => {
+      const def = defById.get(tsCol.id);
+      return {
+        ...def,
+        enableSorting: def.enableSorting ?? true,
+        enableHiding: def.enableHiding ?? true,
+        getIsSorted: () => tsCol.getIsSorted(),
+        toggleSort: (multiSort = false) => tsCol.toggleSorting(void 0, multiSort && enableMultiSort),
+        getIsVisible: () => tsCol.getIsVisible(),
+        toggleVisibility: (value) => tsCol.toggleVisibility(value),
+        getSize: () => def.size ?? 150
+      };
+    });
+  }, [table, resolvedColumns, enableMultiSort]);
+  const rows = table.getRowModel().rows.map((r, index) => ({
+    id: r.id,
+    original: r.original,
+    index,
+    getIsSelected: () => r.getIsSelected(),
+    getCanSelect: () => r.getCanSelect(),
+    toggleSelected: (value) => r.toggleSelected(value)
+  }));
+  const getIsAllRowsSelected = useCallback(
+    () => table.getIsAllPageRowsSelected(),
+    [table]
+  );
+  const getIsSomeRowsSelected = useCallback(
+    () => table.getIsSomePageRowsSelected(),
+    [table]
+  );
+  const toggleAllRowsSelected = useCallback(
+    (value) => table.toggleAllPageRowsSelected(value),
+    [table]
+  );
+  const enginePageCount = table.getPageCount();
+  return {
+    rows,
+    columns: runtimeColumns,
+    pagination: table.getState().pagination,
+    sorting: table.getState().sorting,
+    rowSelection: table.getState().rowSelection,
+    globalFilter,
+    columnFilters,
+    // TanStack returns -1 when a manual page count is unknown; FacetUI has
+    // always reported 0 in that case.
+    pageCount: enginePageCount < 0 ? 0 : enginePageCount,
+    filteredRowCount: manualFiltering ? data.length : table.getFilteredRowModel().rows.length,
+    getIsAllRowsSelected,
+    getIsSomeRowsSelected,
+    toggleAllRowsSelected,
+    setSorting,
+    setPagination,
+    setGlobalFilter,
+    setColumnFilters
+  };
+}
+
+// src/components/data-table/primitives/DataTableToolbar.tsx
+import { SearchIcon, XIcon } from "lucide-react";
+
+// src/components/data-table/primitives/DataTableColumnToggle.tsx
+import {
+  Button,
+  Menu,
+  MenuItem,
+  MenuTrigger,
+  Popover
+} from "react-aria-components";
+import { Columns3Icon, CheckIcon } from "lucide-react";
+
+// src/components/data-table/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/data-table/primitives/DataTableColumnToggle.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DataTableColumnToggle({
+  table
+}) {
+  const toggleableColumns = table.columns.filter(
+    (col) => col.enableHiding !== false && col.id !== "__select__"
+  );
+  const selectedKeys = new Set(
+    toggleableColumns.filter((col) => col.getIsVisible()).map((col) => col.id)
+  );
+  return /* @__PURE__ */ jsxs(MenuTrigger, { children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        "aria-label": "Toggle column visibility",
+        className: cn(
+          "inline-flex h-9 items-center gap-1.5 rounded-md border border-input",
+          "bg-background px-3 text-sm shadow-xs",
+          "transition-colors hover:bg-accent hover:text-accent-foreground",
+          "data-[focus-visible]:outline-hidden data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring",
+          "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Columns3Icon, { className: "h-4 w-4", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Columns" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        placement: "bottom end",
+        offset: 4,
+        className: cn(
+          "z-50 min-w-[160px] overflow-hidden rounded-md border border-border",
+          "bg-popover p-1 text-popover-foreground shadow-md",
+          "data-[entering]:animate-in data-[entering]:fade-in-0 data-[entering]:zoom-in-95",
+          "data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95"
+        ),
+        children: /* @__PURE__ */ jsx(
+          Menu,
+          {
+            "aria-label": "Toggle columns",
+            selectionMode: "multiple",
+            selectedKeys,
+            onSelectionChange: (keys) => {
+              if (keys === "all") return;
+              for (const col of toggleableColumns) {
+                col.toggleVisibility(keys.has(col.id));
+              }
+            },
+            className: "outline-hidden",
+            children: toggleableColumns.map((col) => {
+              const label = typeof col.header === "string" ? col.header : String(col.id).replace(/_/g, " ");
+              return /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  id: col.id,
+                  textValue: label,
+                  className: cn(
+                    "relative flex cursor-pointer select-none items-center",
+                    "rounded-xs py-1.5 pl-8 pr-2 text-sm capitalize",
+                    "outline-hidden transition-colors",
+                    "data-[focused]:bg-accent data-[focused]:text-accent-foreground",
+                    "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+                  ),
+                  children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                    isSelected && /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex items-center justify-center", children: /* @__PURE__ */ jsx(CheckIcon, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) }),
+                    label
+                  ] })
+                },
+                col.id
+              );
+            })
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/components/data-table/primitives/DataTableToolbar.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function DataTableToolbar({
+  table,
+  classNames
+}) {
+  const hasFilter = table.globalFilter.length > 0;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      role: "toolbar",
+      "aria-label": "Table controls",
+      className: cn(
+        "flex flex-wrap items-center justify-between gap-2",
+        classNames?.toolbar
+      ),
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "relative flex-1 min-w-[200px] max-w-sm", children: [
+          /* @__PURE__ */ jsx2(
+            SearchIcon,
+            {
+              className: "absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground",
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              type: "search",
+              role: "searchbox",
+              "aria-label": "Search all columns",
+              placeholder: "Search\u2026",
+              value: table.globalFilter,
+              onChange: (e) => table.setGlobalFilter(e.target.value),
+              className: cn(
+                "h-9 w-full rounded-md border border-input bg-background pl-8",
+                hasFilter ? "pr-8" : "pr-3",
+                "text-sm shadow-xs placeholder:text-muted-foreground",
+                "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+                "disabled:cursor-not-allowed disabled:opacity-50"
+              )
+            }
+          ),
+          hasFilter && /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: () => table.setGlobalFilter(""),
+              "aria-label": "Clear search",
+              className: cn(
+                "absolute right-2 top-1/2 -translate-y-1/2 rounded-sm",
+                "text-muted-foreground hover:text-foreground",
+                "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
+              ),
+              children: /* @__PURE__ */ jsx2(XIcon, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+          hasFilter && /* @__PURE__ */ jsxs2(
+            "p",
+            {
+              role: "status",
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              className: "text-xs text-muted-foreground tabular-nums",
+              children: [
+                table.filteredRowCount.toLocaleString(),
+                " result",
+                table.filteredRowCount !== 1 ? "s" : ""
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx2(DataTableColumnToggle, { table })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/data-table/primitives/DataTableHeader.tsx
+import { Checkbox } from "react-aria-components";
+import { CheckIcon as CheckIcon2, MinusIcon, ChevronUpIcon, ChevronDownIcon, ChevronsUpDownIcon } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var densityPaddingTh = {
+  compact: "h-8 px-2",
+  default: "h-10 px-3",
+  comfortable: "h-12 px-4"
+};
+function DataTableHeader({
+  table,
+  density,
+  classNames
+}) {
+  const visibleColumns = table.columns.filter((col) => col.getIsVisible());
+  const hasSelection = table.columns.some((col) => col.id === "__select__");
+  return /* @__PURE__ */ jsx3(
+    "thead",
+    {
+      className: cn("border-b border-border bg-muted/50", classNames?.thead),
+      children: /* @__PURE__ */ jsxs3(
+        "tr",
+        {
+          role: "row",
+          className: cn(classNames?.theadRow),
+          children: [
+            hasSelection && /* @__PURE__ */ jsx3(
+              "th",
+              {
+                role: "columnheader",
+                scope: "col",
+                "aria-label": "Select all rows",
+                className: cn(
+                  "w-10 text-center align-middle",
+                  densityPaddingTh[density],
+                  classNames?.th
+                ),
+                children: /* @__PURE__ */ jsx3(SelectAllCheckbox, { table })
+              }
+            ),
+            visibleColumns.filter((col) => col.id !== "__select__").map((col) => {
+              const sortDir = col.getIsSorted();
+              const canSort = col.enableSorting ?? true;
+              return /* @__PURE__ */ jsx3(
+                "th",
+                {
+                  role: "columnheader",
+                  scope: "col",
+                  "aria-sort": sortDir === "asc" ? "ascending" : sortDir === "desc" ? "descending" : canSort ? "none" : void 0,
+                  style: { width: col.getSize() },
+                  className: cn(
+                    "text-left align-middle font-medium text-muted-foreground",
+                    densityPaddingTh[density],
+                    classNames?.th
+                  ),
+                  children: canSort ? /* @__PURE__ */ jsxs3(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => col.toggleSort(),
+                      className: cn(
+                        "flex items-center gap-1.5 rounded-xs",
+                        "transition-colors hover:text-foreground focus-visible:outline-hidden",
+                        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+                        sortDir && "text-foreground"
+                      ),
+                      "aria-label": `Sort by ${String(col.id)}${sortDir === "asc" ? ", currently ascending" : sortDir === "desc" ? ", currently descending" : ""}`,
+                      children: [
+                        /* @__PURE__ */ jsx3(HeaderContent, { col, table }),
+                        /* @__PURE__ */ jsx3(SortIcon, { direction: sortDir })
+                      ]
+                    }
+                  ) : /* @__PURE__ */ jsx3(HeaderContent, { col, table })
+                },
+                col.id
+              );
+            })
+          ]
+        }
+      )
+    }
+  );
+}
+function HeaderContent({
+  col,
+  table
+}) {
+  return /* @__PURE__ */ jsx3(Fragment2, { children: typeof col.header === "function" ? col.header({ column: col, table }) : col.header });
+}
+function SortIcon({ direction }) {
+  const cls = "h-3.5 w-3.5 shrink-0";
+  if (direction === "asc") return /* @__PURE__ */ jsx3(ChevronUpIcon, { className: cls, "aria-hidden": "true" });
+  if (direction === "desc") return /* @__PURE__ */ jsx3(ChevronDownIcon, { className: cls, "aria-hidden": "true" });
+  return /* @__PURE__ */ jsx3(ChevronsUpDownIcon, { className: cn(cls, "opacity-40"), "aria-hidden": "true" });
+}
+function SelectAllCheckbox({ table }) {
+  const isAll = table.getIsAllRowsSelected();
+  const isSome = table.getIsSomeRowsSelected();
+  return /* @__PURE__ */ jsx3(
+    Checkbox,
+    {
+      "aria-label": "Select all rows",
+      isSelected: isAll,
+      isIndeterminate: isSome && !isAll,
+      onChange: (checked) => table.toggleAllRowsSelected(checked),
+      className: "group mx-auto flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center",
+      children: /* @__PURE__ */ jsx3("span", { className: checkboxBox, children: isSome && !isAll ? /* @__PURE__ */ jsx3(MinusIcon, { className: "h-3 w-3", "aria-hidden": "true" }) : isAll ? /* @__PURE__ */ jsx3(CheckIcon2, { className: "h-3 w-3", "aria-hidden": "true" }) : null })
+    }
+  );
+}
+var checkboxBox = cn(
+  "flex h-4 w-4 items-center justify-center rounded-sm border border-primary shadow-sm",
+  "group-data-[focus-visible]:outline-hidden group-data-[focus-visible]:ring-2 group-data-[focus-visible]:ring-ring",
+  "group-data-[selected]:bg-primary group-data-[selected]:text-primary-foreground",
+  "group-data-[indeterminate]:bg-primary group-data-[indeterminate]:text-primary-foreground"
+);
+
+// src/components/data-table/primitives/DataTableBody.tsx
+import { Checkbox as Checkbox2 } from "react-aria-components";
+import { CheckIcon as CheckIcon3 } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var densityPaddingTd = {
+  compact: "py-1 px-2",
+  default: "py-2 px-3",
+  comfortable: "py-3 px-4"
+};
+function DataTableBody({
+  table,
+  density,
+  isLoading,
+  renderEmpty,
+  renderRowWrapper,
+  classNames
+}) {
+  const visibleColumns = table.columns.filter(
+    (col) => col.getIsVisible() && col.id !== "__select__"
+  );
+  const hasSelection = table.columns.some((col) => col.id === "__select__");
+  const colSpan = visibleColumns.length + (hasSelection ? 1 : 0);
+  if (!isLoading && table.rows.length === 0) {
+    return /* @__PURE__ */ jsx4("tbody", { children: /* @__PURE__ */ jsx4("tr", { role: "row", children: /* @__PURE__ */ jsx4(
+      "td",
+      {
+        colSpan,
+        className: "h-40 text-center align-middle text-muted-foreground",
+        children: renderEmpty ? renderEmpty() : /* @__PURE__ */ jsx4(DefaultEmpty, {})
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ jsx4("tbody", { className: cn("[&_tr:last-child]:border-0", classNames?.tbody), children: table.rows.map((row, rowIndex) => {
+    const isSelected = row.getIsSelected();
+    const ariaRowIndex = table.pagination.pageIndex * table.pagination.pageSize + rowIndex + 2;
+    const rowContent = /* @__PURE__ */ jsxs4(
+      "tr",
+      {
+        role: "row",
+        "aria-rowindex": ariaRowIndex,
+        "aria-selected": hasSelection ? isSelected : void 0,
+        "data-state": isSelected ? "selected" : void 0,
+        className: cn(
+          "border-b border-border transition-colors",
+          "hover:bg-muted/50",
+          isSelected && "bg-muted",
+          classNames?.tr
+        ),
+        children: [
+          hasSelection && /* @__PURE__ */ jsx4(
+            "td",
+            {
+              role: "gridcell",
+              className: cn(
+                "w-10 text-center align-middle",
+                densityPaddingTd[density],
+                classNames?.td
+              ),
+              children: /* @__PURE__ */ jsx4(RowCheckbox, { row })
+            }
+          ),
+          visibleColumns.map((col) => {
+            const value = getCellValue(col, row.original);
+            return /* @__PURE__ */ jsx4(
+              "td",
+              {
+                role: "gridcell",
+                className: cn(
+                  "align-middle",
+                  densityPaddingTd[density],
+                  classNames?.td
+                ),
+                children: col.cell ? col.cell({ row, column: col, value, table }) : renderValue(value)
+              },
+              col.id
+            );
+          })
+        ]
+      },
+      row.id
+    );
+    return renderRowWrapper ? renderRowWrapper(row, rowContent) : rowContent;
+  }) });
+}
+function RowCheckbox({ row }) {
+  const canSelect = row.getCanSelect();
+  const selected = row.getIsSelected();
+  return /* @__PURE__ */ jsx4(
+    Checkbox2,
+    {
+      "aria-label": `Select row ${row.index + 1}`,
+      isSelected: selected,
+      isDisabled: !canSelect,
+      onChange: (checked) => row.toggleSelected(checked),
+      className: cn(
+        "group mx-auto flex h-4 w-4 shrink-0 items-center justify-center",
+        canSelect ? "cursor-pointer" : "cursor-not-allowed opacity-50"
+      ),
+      children: /* @__PURE__ */ jsx4("span", { className: checkboxBox, children: selected ? /* @__PURE__ */ jsx4(CheckIcon3, { className: "h-3 w-3", "aria-hidden": "true" }) : null })
+    }
+  );
+}
+function DefaultEmpty() {
+  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center gap-2 py-10", children: [
+    /* @__PURE__ */ jsx4(
+      "svg",
+      {
+        className: "h-12 w-12 text-muted-foreground/40",
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx4(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 1.5,
+            d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx4("p", { className: "text-sm font-medium", children: "No results found" }),
+    /* @__PURE__ */ jsx4("p", { className: "text-xs text-muted-foreground", children: "Try adjusting your search or filters." })
+  ] });
+}
+function renderValue(value) {
+  if (value === null || value === void 0) return null;
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  return String(value);
+}
+function getCellValue(col, row) {
+  if (col.accessorFn) return col.accessorFn(row);
+  if (col.accessorKey !== void 0) return row[col.accessorKey];
+  return null;
+}
+
+// src/components/data-table/primitives/DataTablePagination.tsx
+import {
+  Button as Button2,
+  ListBox,
+  ListBoxItem,
+  Popover as Popover2,
+  Select,
+  SelectValue
+} from "react-aria-components";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronsLeftIcon,
+  ChevronsRightIcon,
+  CheckIcon as CheckIcon4,
+  ChevronDownIcon as ChevronDownIcon2
+} from "lucide-react";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function DataTablePagination({
+  table,
+  pageSizeOptions,
+  classNames
+}) {
+  const { pageIndex, pageSize } = table.pagination;
+  const canPreviousPage = pageIndex > 0;
+  const canNextPage = pageIndex < table.pageCount - 1;
+  const selectedCount = Object.keys(table.rowSelection).length;
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      role: "navigation",
+      "aria-label": "Table pagination",
+      className: cn(
+        "flex flex-wrap items-center justify-between gap-4 text-sm",
+        classNames?.pagination
+      ),
+      children: [
+        /* @__PURE__ */ jsx5(
+          "p",
+          {
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            className: "text-muted-foreground tabular-nums",
+            children: selectedCount > 0 ? `${selectedCount.toLocaleString()} of ${table.filteredRowCount.toLocaleString()} row(s) selected` : `${table.filteredRowCount.toLocaleString()} row(s) total`
+          }
+        ),
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx5(
+              "label",
+              {
+                id: "rows-per-page-label",
+                className: "text-muted-foreground whitespace-nowrap",
+                children: "Rows per page"
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              PageSizeSelect,
+              {
+                value: pageSize,
+                options: pageSizeOptions,
+                onChange: (size) => table.setPagination((prev) => ({
+                  ...prev,
+                  pageSize: size,
+                  pageIndex: 0
+                }))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs5(
+            "p",
+            {
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              className: "text-muted-foreground whitespace-nowrap tabular-nums",
+              children: [
+                "Page ",
+                (pageIndex + 1).toLocaleString(),
+                " of",
+                " ",
+                Math.max(1, table.pageCount).toLocaleString()
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1", role: "group", "aria-label": "Page navigation", children: [
+            /* @__PURE__ */ jsx5(
+              NavButton,
+              {
+                onClick: () => table.setPagination((prev) => ({ ...prev, pageIndex: 0 })),
+                disabled: !canPreviousPage,
+                "aria-label": "Go to first page",
+                children: /* @__PURE__ */ jsx5(ChevronsLeftIcon, { className: "h-4 w-4", "aria-hidden": "true" })
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              NavButton,
+              {
+                onClick: () => table.setPagination((prev) => ({
+                  ...prev,
+                  pageIndex: prev.pageIndex - 1
+                })),
+                disabled: !canPreviousPage,
+                "aria-label": "Go to previous page",
+                children: /* @__PURE__ */ jsx5(ChevronLeftIcon, { className: "h-4 w-4", "aria-hidden": "true" })
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              NavButton,
+              {
+                onClick: () => table.setPagination((prev) => ({
+                  ...prev,
+                  pageIndex: prev.pageIndex + 1
+                })),
+                disabled: !canNextPage,
+                "aria-label": "Go to next page",
+                children: /* @__PURE__ */ jsx5(ChevronRightIcon, { className: "h-4 w-4", "aria-hidden": "true" })
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              NavButton,
+              {
+                onClick: () => table.setPagination((prev) => ({
+                  ...prev,
+                  pageIndex: table.pageCount - 1
+                })),
+                disabled: !canNextPage,
+                "aria-label": "Go to last page",
+                children: /* @__PURE__ */ jsx5(ChevronsRightIcon, { className: "h-4 w-4", "aria-hidden": "true" })
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function NavButton({ children, disabled, ...props }) {
+  return /* @__PURE__ */ jsx5(
+    "button",
+    {
+      type: "button",
+      disabled,
+      ...props,
+      className: cn(
+        "inline-flex h-8 w-8 items-center justify-center rounded-md border border-input",
+        "bg-background text-sm shadow-xs transition-colors",
+        "hover:bg-accent hover:text-accent-foreground",
+        "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+        "disabled:pointer-events-none disabled:opacity-50"
+      ),
+      children
+    }
+  );
+}
+function PageSizeSelect({ value, options, onChange }) {
+  return /* @__PURE__ */ jsxs5(
+    Select,
+    {
+      "aria-label": "Rows per page",
+      selectedKey: String(value),
+      onSelectionChange: (key) => onChange(Number(key)),
+      children: [
+        /* @__PURE__ */ jsxs5(
+          Button2,
+          {
+            "aria-labelledby": "rows-per-page-label",
+            className: cn(
+              "inline-flex h-8 items-center justify-between gap-1 rounded-md border border-input",
+              "bg-background px-2.5 text-sm shadow-xs",
+              "transition-colors hover:bg-accent hover:text-accent-foreground",
+              "data-[focus-visible]:outline-hidden data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring",
+              "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
+            ),
+            children: [
+              /* @__PURE__ */ jsx5(SelectValue, {}),
+              /* @__PURE__ */ jsx5(ChevronDownIcon2, { className: "h-3.5 w-3.5 opacity-50", "aria-hidden": "true" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          Popover2,
+          {
+            offset: 4,
+            className: cn(
+              "z-50 overflow-hidden rounded-md border border-border",
+              "bg-popover text-popover-foreground shadow-md",
+              "data-[entering]:animate-in data-[entering]:fade-in-0 data-[entering]:zoom-in-95",
+              "data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95"
+            ),
+            children: /* @__PURE__ */ jsx5(ListBox, { className: "p-1 outline-hidden", children: options.map((opt) => /* @__PURE__ */ jsx5(
+              ListBoxItem,
+              {
+                id: String(opt),
+                textValue: String(opt),
+                className: cn(
+                  "relative flex cursor-pointer select-none items-center",
+                  "rounded-xs py-1.5 pl-8 pr-2 text-sm",
+                  "outline-hidden transition-colors",
+                  "data-[focused]:bg-accent data-[focused]:text-accent-foreground",
+                  "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+                ),
+                children: ({ isSelected }) => /* @__PURE__ */ jsxs5(Fragment3, { children: [
+                  isSelected && /* @__PURE__ */ jsx5("span", { className: "absolute left-2 flex items-center justify-center", children: /* @__PURE__ */ jsx5(CheckIcon4, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) }),
+                  opt
+                ] })
+              },
+              opt
+            )) })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/data-table/core/DataTable.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function DataTable({
+  renderToolbar,
+  renderEmpty,
+  renderLoading,
+  renderRowWrapper,
+  isLoading = false,
+  density = "default",
+  classNames,
+  style,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  ...rest
+}) {
+  const table = useDataTable({ ...rest, renderToolbar, renderEmpty, renderLoading, renderRowWrapper });
+  return (
+    // Cast is safe: context consumers are co-located and always receive
+    // the same TData shape via the typed useDataTableContext<TData> hook.
+    /* @__PURE__ */ jsx6(DataTableContext.Provider, { value: table, children: /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        className: cn("flex w-full flex-col gap-3", classNames?.root),
+        style,
+        children: [
+          renderToolbar ? renderToolbar(table) : /* @__PURE__ */ jsx6(DataTableToolbar, { table, classNames }),
+          /* @__PURE__ */ jsxs6("div", { className: "relative overflow-hidden rounded-md border border-border", children: [
+            isLoading && (renderLoading ? renderLoading() : /* @__PURE__ */ jsx6(
+              "div",
+              {
+                role: "status",
+                "aria-live": "polite",
+                "aria-label": "Loading table data",
+                className: "absolute inset-0 z-10 flex items-center justify-center\n                           bg-background/70 backdrop-blur-[2px]",
+                children: /* @__PURE__ */ jsx6(LoadingSpinner, {})
+              }
+            )),
+            /* @__PURE__ */ jsxs6(
+              "table",
+              {
+                role: "grid",
+                "aria-label": ariaLabel,
+                "aria-describedby": ariaDescribedBy,
+                "aria-busy": isLoading,
+                "aria-rowcount": rest.rowCount ?? rest.data.length,
+                className: cn("w-full caption-bottom text-sm", classNames?.table),
+                children: [
+                  /* @__PURE__ */ jsx6(
+                    DataTableHeader,
+                    {
+                      table,
+                      density,
+                      classNames
+                    }
+                  ),
+                  /* @__PURE__ */ jsx6(
+                    DataTableBody,
+                    {
+                      table,
+                      density,
+                      isLoading,
+                      renderEmpty,
+                      renderRowWrapper,
+                      classNames
+                    }
+                  )
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx6(
+            DataTablePagination,
+            {
+              table,
+              pageSizeOptions: rest.pageSizeOptions ?? [10, 25, 50, 100],
+              classNames
+            }
+          )
+        ]
+      }
+    ) })
+  );
+}
+function LoadingSpinner() {
+  return /* @__PURE__ */ jsxs6(
+    "svg",
+    {
+      className: "h-8 w-8 animate-spin text-primary",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx6(
+          "circle",
+          {
+            className: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          "path",
+          {
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/data-table/headless/useColumnSort.ts
+import { useCallback as useCallback2, useState as useState2 } from "react";
+function useColumnSort({
+  enableMultiSort = false,
+  onSortingChange
+} = {}) {
+  const [sorting, setSortingInternal] = useState2([]);
+  const setSorting = useCallback2(
+    (updater) => {
+      setSortingInternal((prev) => {
+        const next = typeof updater === "function" ? updater(prev) : updater;
+        onSortingChange?.(next);
+        return next;
+      });
+    },
+    [onSortingChange]
+  );
+  const toggleSort = useCallback2(
+    (columnId, multiSort = false) => {
+      setSorting((prev) => {
+        const existing = prev.find((s) => s.id === columnId);
+        const useMulti = multiSort && enableMultiSort;
+        if (!existing) {
+          return useMulti ? [...prev, { id: columnId, desc: false }] : [{ id: columnId, desc: false }];
+        }
+        if (!existing.desc) {
+          return prev.map(
+            (s) => s.id === columnId ? { ...s, desc: true } : s
+          );
+        }
+        return prev.filter((s) => s.id !== columnId);
+      });
+    },
+    [enableMultiSort, setSorting]
+  );
+  const clearSort = useCallback2(() => setSorting([]), [setSorting]);
+  return { sorting, setSorting, toggleSort, clearSort };
+}
+
+// src/components/data-table/headless/usePagination.ts
+import { useCallback as useCallback3, useState as useState3 } from "react";
+function usePagination({
+  initialPageSize = 10,
+  onPaginationChange
+} = {}) {
+  const [pagination, setPaginationInternal] = useState3({
+    pageIndex: 0,
+    pageSize: initialPageSize
+  });
+  const setPagination = useCallback3(
+    (updater) => {
+      setPaginationInternal((prev) => {
+        const next = typeof updater === "function" ? updater(prev) : updater;
+        onPaginationChange?.(next);
+        return next;
+      });
+    },
+    [onPaginationChange]
+  );
+  return {
+    pagination,
+    setPagination,
+    goToPage: (pageIndex) => setPagination((p) => ({ ...p, pageIndex })),
+    goToFirstPage: () => setPagination((p) => ({ ...p, pageIndex: 0 })),
+    goToLastPage: (pageCount) => setPagination((p) => ({ ...p, pageIndex: pageCount - 1 })),
+    nextPage: () => setPagination((p) => ({ ...p, pageIndex: p.pageIndex + 1 })),
+    previousPage: () => setPagination((p) => ({ ...p, pageIndex: Math.max(0, p.pageIndex - 1) })),
+    setPageSize: (size) => setPagination((p) => ({ ...p, pageSize: size, pageIndex: 0 }))
+  };
+}
+
+// src/components/data-table/headless/useRowSelection.ts
+import { useCallback as useCallback4, useState as useState4 } from "react";
+function useRowSelection({
+  enableMultiRowSelection = true,
+  onRowSelectionChange
+} = {}) {
+  const [rowSelection, setRowSelectionInternal] = useState4({});
+  const setRowSelection = useCallback4(
+    (next) => {
+      setRowSelectionInternal(next);
+      onRowSelectionChange?.(next);
+    },
+    [onRowSelectionChange]
+  );
+  const toggleRow = useCallback4(
+    (rowId, value) => {
+      setRowSelectionInternal((prev) => {
+        const shouldSelect = value ?? !prev[rowId];
+        let next;
+        if (shouldSelect) {
+          next = enableMultiRowSelection ? { ...prev, [rowId]: true } : { [rowId]: true };
+        } else {
+          const { [rowId]: _removed, ...rest } = prev;
+          next = rest;
+        }
+        onRowSelectionChange?.(next);
+        return next;
+      });
+    },
+    [enableMultiRowSelection, onRowSelectionChange]
+  );
+  const toggleAllRows = useCallback4(
+    (rows, value) => {
+      const allSelected = rows.every((r) => r.getIsSelected());
+      const next = value ?? !allSelected ? Object.fromEntries(rows.map((r) => [r.id, true])) : {};
+      setRowSelection(next);
+    },
+    [setRowSelection]
+  );
+  return {
+    rowSelection,
+    setRowSelection,
+    toggleRow,
+    toggleAllRows,
+    clearSelection: () => setRowSelection({}),
+    isSelected: (rowId) => !!rowSelection[rowId],
+    selectedCount: Object.keys(rowSelection).length
+  };
+}
+
+// src/components/data-table/headless/useColumnVisibility.ts
+import { useCallback as useCallback5, useState as useState5 } from "react";
+function useColumnVisibility(columns) {
+  const [columnVisibility, setColumnVisibility] = useState5(
+    () => Object.fromEntries(columns.map((c) => [c.id, true]))
+  );
+  const isVisible = useCallback5(
+    (columnId) => columnVisibility[columnId] ?? true,
+    [columnVisibility]
+  );
+  const toggleColumn = useCallback5((columnId, value) => {
+    setColumnVisibility((prev) => ({
+      ...prev,
+      [columnId]: value ?? !(prev[columnId] ?? true)
+    }));
+  }, []);
+  const showAll = useCallback5(() => {
+    setColumnVisibility(
+      (prev) => Object.fromEntries(Object.keys(prev).map((id) => [id, true]))
+    );
+  }, []);
+  const hideAll = useCallback5((hideableIds) => {
+    setColumnVisibility(
+      (prev) => Object.fromEntries(Object.keys(prev).map((id) => [id, !hideableIds.includes(id)]))
+    );
+  }, []);
+  return { columnVisibility, isVisible, toggleColumn, showAll, hideAll };
+}
+
+// src/components/data-table/headless/useGlobalFilter.ts
+import { useCallback as useCallback6, useState as useState6 } from "react";
+function useGlobalFilter(columns, { onGlobalFilterChange } = {}) {
+  const [globalFilter, setGlobalFilterInternal] = useState6("");
+  const setGlobalFilter = useCallback6(
+    (value) => {
+      setGlobalFilterInternal(value);
+      onGlobalFilterChange?.(value);
+    },
+    [onGlobalFilterChange]
+  );
+  const filterData = useCallback6(
+    (data) => {
+      if (!globalFilter.trim()) return data;
+      const lower = globalFilter.toLowerCase();
+      return data.filter(
+        (row) => columns.some((col) => {
+          const val = col.accessorFn ? col.accessorFn(row) : col.accessorKey !== void 0 ? row[col.accessorKey] : null;
+          return String(val ?? "").toLowerCase().includes(lower);
+        })
+      );
+    },
+    [columns, globalFilter]
+  );
+  return { globalFilter, setGlobalFilter, filterData };
+}
+export {
+  DataTable,
+  DataTableBody,
+  DataTableColumnToggle,
+  DataTableHeader,
+  DataTablePagination,
+  DataTableToolbar,
+  useColumnSort,
+  useColumnVisibility,
+  useDataTable,
+  useDataTableContext,
+  useGlobalFilter,
+  usePagination,
+  useRowSelection
+};