@zuilib/data-grid 0.3.0

package/dist/data-grid.js

@@ -0,0 +1,1573 @@
+"use client";
+
+// src/data-grid.tsx
+import { useMemo as useMemo3 } from "react";
+import { cn as cn8 } from "@zuilib/components/lib/cn";
+
+// src/column-manager.tsx
+import { Fragment } from "react";
+import Button2 from "@zuilib/components/button";
+import Checkbox2 from "@zuilib/components/checkbox";
+import Popover from "@zuilib/components/popover";
+import { cn as cn2 } from "@zuilib/components/lib/cn";
+
+// src/column-extras.ts
+function columnExtras(column) {
+  const def = column.columnDef;
+  const meta = column.columnDef.meta ?? {};
+  return {
+    enableInlineEdit: def.enableInlineEdit ?? meta.enableInlineEdit,
+    align: def.align ?? meta.align ?? "start",
+    width: def.width ?? meta.width,
+    filter: def.filter ?? meta.filter
+  };
+}
+function columnLabel(column) {
+  const meta = column.columnDef.meta ?? {};
+  if (meta.label) return meta.label;
+  const header = column.columnDef.header;
+  return typeof header === "string" ? header : column.id;
+}
+
+// src/context.ts
+import { createContext, useContext } from "react";
+var DataGridContext = createContext(null);
+function useDataGridContext(part) {
+  const value = useContext(DataGridContext);
+  if (!value) throw new Error(`<DataGrid.${part}> must be rendered inside <DataGrid>`);
+  return value;
+}
+
+// src/expand-column.tsx
+import Button from "@zuilib/components/button";
+import { cn } from "@zuilib/components/lib/cn";
+import { ChevronDownIcon } from "@zuilib/components/lib/icons";
+import { jsx } from "react/jsx-runtime";
+var EXPAND_COLUMN_ID = "__expand";
+function ExpandToggle({ row }) {
+  const { labels } = useDataGridContext("Body");
+  if (!row.getCanExpand()) return null;
+  const expanded = row.getIsExpanded();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      variant: "ghost",
+      size: "icon",
+      "data-slot": "data-grid-expand-toggle",
+      "data-expanded": expanded ? "" : void 0,
+      tabIndex: -1,
+      "aria-expanded": expanded,
+      "aria-label": expanded ? labels.collapseRow : labels.expandRow,
+      className: "size-6 rounded-sm text-muted-foreground",
+      onClick: (event) => {
+        event.stopPropagation();
+        row.toggleExpanded();
+      },
+      onKeyDown: (event) => {
+        if (event.key !== "Escape") event.stopPropagation();
+      },
+      children: /* @__PURE__ */ jsx(
+        ChevronDownIcon,
+        {
+          "aria-hidden": "true",
+          className: cn("size-3.5 transition-transform duration-(--duration-fast) motion-reduce:transition-none", !expanded && "-rotate-90")
+        }
+      )
+    }
+  );
+}
+function ExpandHead() {
+  const { labels } = useDataGridContext("Body");
+  return /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.expandColumn });
+}
+function createExpandColumn() {
+  return {
+    id: EXPAND_COLUMN_ID,
+    size: 40,
+    enableSorting: false,
+    enableHiding: false,
+    enableResizing: false,
+    enableColumnFilter: false,
+    header: () => /* @__PURE__ */ jsx(ExpandHead, {}),
+    cell: ({ row }) => /* @__PURE__ */ jsx(ExpandToggle, { row })
+  };
+}
+
+// src/select-column.tsx
+import Checkbox from "@zuilib/components/checkbox";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SELECT_COLUMN_ID = "__select";
+function SelectAll({ table }) {
+  const { labels } = useDataGridContext("Body");
+  return /* @__PURE__ */ jsx2(
+    Checkbox,
+    {
+      "data-slot": "data-grid-select-all",
+      size: "sm",
+      "aria-label": labels.selectAllOnPage,
+      checked: table.getIsAllPageRowsSelected(),
+      indeterminate: table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected(),
+      onCheckedChange: (checked) => table.toggleAllPageRowsSelected(checked)
+    }
+  );
+}
+function SelectRow({ row }) {
+  const { labels } = useDataGridContext("Body");
+  return /* @__PURE__ */ jsx2(
+    Checkbox,
+    {
+      "data-slot": "data-grid-select-row",
+      size: "sm",
+      tabIndex: -1,
+      "aria-label": labels.selectRow,
+      checked: row.getIsSelected(),
+      disabled: !row.getCanSelect(),
+      onCheckedChange: (checked) => row.toggleSelected(checked)
+    }
+  );
+}
+function createSelectColumn() {
+  return {
+    id: SELECT_COLUMN_ID,
+    size: 40,
+    enableSorting: false,
+    enableHiding: false,
+    enableResizing: false,
+    enableColumnFilter: false,
+    header: ({ table }) => /* @__PURE__ */ jsx2(SelectAll, { table }),
+    cell: ({ row }) => /* @__PURE__ */ jsx2(SelectRow, { row })
+  };
+}
+
+// src/labels.ts
+var defaultDataGridLabels = {
+  pinStart: "Pin to start",
+  pinEnd: "Pin to end",
+  unpin: "Unpin",
+  expandRow: "Expand row",
+  collapseRow: "Collapse row",
+  expandColumn: "Expand",
+  selectedCount: "{count} selected",
+  allMatchingSelected: "All {count} selected",
+  selectAllMatching: "Select all {count}",
+  clearSelection: "Clear selection",
+  selectionActions: "Bulk actions",
+  selectAllOnPage: "Select all rows on this page",
+  selectRow: "Select row",
+  pagination: "Pagination",
+  rowsPerPage: "Rows per page",
+  loading: "Loading\u2026",
+  range: "{first}\u2013{last} of {total}",
+  firstPage: "First page",
+  previousPage: "Previous page",
+  nextPage: "Next page",
+  lastPage: "Last page",
+  search: "Search",
+  searchPlaceholder: "Search\u2026",
+  activeFilters: "Active filters",
+  removeFilter: "Remove {column} filter",
+  columns: "Columns",
+  moveUp: "Move {column} up",
+  moveDown: "Move {column} down",
+  addColumnSection: "Add column",
+  addColumn: "Add {column}",
+  filterColumn: "Filter {column}",
+  filterColumnActive: "Filter {column} (active)",
+  filterValue: "Filter value",
+  filterPlaceholder: "Contains\u2026",
+  filterOptions: "Options",
+  from: "From",
+  to: "To",
+  clear: "Clear",
+  apply: "Apply",
+  rangeFrom: "from {date}",
+  rangeUntil: "until {date}",
+  resizeColumn: "Resize {column}",
+  editColumn: "Edit {column}",
+  noResults: "No results",
+  noResultsDescription: "Try a different search or clear the filters."
+};
+function fillLabel(template, values) {
+  return template.replace(/\{(\w+)\}/g, (match, name) => name in values ? String(values[name]) : match);
+}
+
+// src/column-manager.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var FIXED_COLUMN_IDS = [SELECT_COLUMN_ID, EXPAND_COLUMN_ID];
+function ColumnsIcon({ className }) {
+  return /* @__PURE__ */ jsx3("svg", { "aria-hidden": "true", focusable: "false", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: cn2("size-[1em] shrink-0", className), children: /* @__PURE__ */ jsx3("path", { d: "M14 17h2.75A2.25 2.25 0 0 0 19 14.75v-9.5A2.25 2.25 0 0 0 16.75 3H14v14ZM12.5 3h-5v14h5V3ZM3.25 3H6v14H3.25A2.25 2.25 0 0 1 1 14.75v-9.5A2.25 2.25 0 0 1 3.25 3Z" }) });
+}
+function DataGridColumnManagerRow({ column, index, count, onMove }) {
+  const { labels } = useDataGridContext("ColumnManager");
+  const label = columnLabel(column);
+  const pinLabels = { left: labels.pinStart, right: labels.pinEnd };
+  const pinned = column.getIsPinned();
+  const setPin = (position) => column.pin(pinned === position ? false : position);
+  return /* @__PURE__ */ jsxs("li", { "data-slot": "data-grid-column-manager-row", "data-column": column.id, className: "flex items-center gap-2 py-1", children: [
+    /* @__PURE__ */ jsx3(
+      Checkbox2,
+      {
+        size: "sm",
+        label,
+        checked: column.getIsVisible(),
+        disabled: !column.getCanHide(),
+        onCheckedChange: (checked) => column.toggleVisibility(checked)
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "ms-auto inline-flex items-center gap-0.5", children: [
+      /* @__PURE__ */ jsx3(Button2, { variant: "ghost", size: "sm", "aria-label": fillLabel(labels.moveUp, { column: label }), disabled: index === 0, onClick: () => onMove(column, -1), className: "size-7 p-0", children: /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: "\u2191" }) }),
+      /* @__PURE__ */ jsx3(Button2, { variant: "ghost", size: "sm", "aria-label": fillLabel(labels.moveDown, { column: label }), disabled: index === count - 1, onClick: () => onMove(column, 1), className: "size-7 p-0", children: /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: "\u2193" }) }),
+      ["left", "right"].map((side) => /* @__PURE__ */ jsx3(
+        Button2,
+        {
+          variant: "ghost",
+          size: "sm",
+          "aria-label": pinned === side ? `${labels.unpin} ${label}` : `${pinLabels[side]}: ${label}`,
+          "aria-pressed": pinned === side,
+          onClick: () => setPin(side),
+          className: cn2("size-7 p-0 text-xs", pinned === side && "text-primary"),
+          children: /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: side === "left" ? "\u21E4" : "\u21E5" })
+        },
+        side
+      ))
+    ] })
+  ] });
+}
+function DataGridColumnManager({ label: labelProp, className, addable, onAddColumn }) {
+  const { table, labels } = useDataGridContext("ColumnManager");
+  const label = labelProp ?? labels.columns;
+  const columns = table.getAllLeafColumns().filter((column) => !FIXED_COLUMN_IDS.includes(column.id));
+  const move = (column, direction) => {
+    const order = columns.map((c) => c.id);
+    const from = order.indexOf(column.id);
+    const to = from + direction;
+    if (to < 0 || to >= order.length) return;
+    order.splice(from, 1);
+    order.splice(to, 0, column.id);
+    const present = new Set(table.getAllLeafColumns().map((c) => c.id));
+    table.setColumnOrder([...FIXED_COLUMN_IDS.filter((id) => present.has(id)), ...order]);
+  };
+  return /* @__PURE__ */ jsxs(Popover, { "data-slot": "data-grid-column-manager", className: cn2("inline-flex", className), children: [
+    /* @__PURE__ */ jsx3(Popover.Button, { as: Fragment, children: /* @__PURE__ */ jsx3(Button2, { variant: "outline", size: "sm", leadingIcon: /* @__PURE__ */ jsx3(ColumnsIcon, {}), "data-slot": "data-grid-column-manager-button", children: label }) }),
+    /* @__PURE__ */ jsxs(Popover.Panel, { "data-slot": "data-grid-column-manager-panel", anchor: "bottom end", className: "min-w-64", children: [
+      /* @__PURE__ */ jsx3("ul", { "data-slot": "data-grid-column-manager-list", "aria-label": label, className: "m-0 flex list-none flex-col p-0", children: columns.map((column, index) => /* @__PURE__ */ jsx3(DataGridColumnManagerRow, { column, index, count: columns.length, onMove: move }, column.id)) }),
+      onAddColumn && addable && addable.length > 0 ? /* @__PURE__ */ jsxs("div", { "data-slot": "data-grid-column-manager-add", className: "mt-2 border-t border-border pt-2", children: [
+        /* @__PURE__ */ jsx3("p", { className: "m-0 pb-1 text-xs font-medium text-muted-foreground", children: labels.addColumnSection }),
+        /* @__PURE__ */ jsx3("ul", { "aria-label": labels.addColumnSection, className: "m-0 flex list-none flex-col p-0", children: addable.map((field) => /* @__PURE__ */ jsx3("li", { "data-slot": "data-grid-column-manager-add-row", "data-column": field.id, className: "flex items-center gap-2 py-0.5", children: /* @__PURE__ */ jsxs(
+          Button2,
+          {
+            variant: "ghost",
+            size: "sm",
+            "aria-label": fillLabel(labels.addColumn, { column: field.label }),
+            onClick: () => onAddColumn(field.id),
+            className: "w-full justify-start gap-2 px-1 font-normal",
+            children: [
+              /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", className: "text-muted-foreground", children: "\uFF0B" }),
+              field.label
+            ]
+          }
+        ) }, field.id)) })
+      ] }) : null
+    ] })
+  ] });
+}
+
+// src/data-grid-body.tsx
+import { flexRender as flexRender2 } from "@tanstack/react-table";
+import { Fragment as Fragment2, useEffect, useRef as useRef2, useState as useState3 } from "react";
+import Alert from "@zuilib/components/alert";
+import EmptyState from "@zuilib/components/empty-state";
+import Skeleton from "@zuilib/components/skeleton";
+import Table from "@zuilib/components/table";
+import { cn as cn4 } from "@zuilib/components/lib/cn";
+import { focusOutlineInsetClasses, focusRingInsetClasses } from "@zuilib/components/lib/focus";
+import { nativeControlResetClasses } from "@zuilib/components/lib/reset";
+
+// src/dev.ts
+function isDev() {
+  try {
+    return process.env.NODE_ENV !== "production";
+  } catch {
+    return false;
+  }
+}
+var warned = /* @__PURE__ */ new Set();
+function warnOnce(key, message) {
+  if (!isDev() || warned.has(key)) return;
+  warned.add(key);
+  console.warn(message);
+}
+
+// src/editable-cell.tsx
+import { flexRender } from "@tanstack/react-table";
+import { useRef, useState } from "react";
+import Input from "@zuilib/components/input";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function EditableCell({ cell, editing, onEditEnd, commitOnBlur, onCellCommit, labels }) {
+  const value = cell.getValue();
+  const initial = value === void 0 || value === null ? "" : String(value);
+  const [draft, setDraft] = useState(initial);
+  const settled = useRef(false);
+  const wasEditing = useRef(false);
+  if (editing && !wasEditing.current) {
+    settled.current = false;
+    if (draft !== initial) setDraft(initial);
+  }
+  wasEditing.current = editing;
+  const finish = (commit, fromKeyboard) => {
+    if (settled.current) return;
+    settled.current = true;
+    if (commit) onCellCommit?.({ rowId: cell.row.id, columnId: cell.column.id, value: draft });
+    onEditEnd(fromKeyboard);
+  };
+  const handleInputKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      event.stopPropagation();
+      finish(true, true);
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      finish(false, true);
+    } else if (event.key.startsWith("Arrow") || event.key === "Home" || event.key === "End" || event.key === " ") {
+      event.stopPropagation();
+    }
+  };
+  if (editing) {
+    return /* @__PURE__ */ jsx4(
+      Input,
+      {
+        "data-slot": "data-grid-cell-editor",
+        size: "sm",
+        autoFocus: true,
+        fullWidth: true,
+        "aria-label": fillLabel(labels.editColumn, { column: columnLabel(cell.column) }),
+        value: draft,
+        onChange: (event) => setDraft(event.target.value),
+        onKeyDown: handleInputKeyDown,
+        onBlur: () => finish(commitOnBlur, false),
+        onClick: (event) => event.stopPropagation(),
+        onDoubleClick: (event) => event.stopPropagation()
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4("div", { "data-slot": "data-grid-cell-content", "data-editable": "", className: "-mx-1 cursor-text rounded-sm px-1", children: flexRender(cell.column.columnDef.cell, cell.getContext()) });
+}
+
+// src/filter-popover.tsx
+import { useState as useState2 } from "react";
+import Button3 from "@zuilib/components/button";
+import Checkbox3 from "@zuilib/components/checkbox";
+import Input2 from "@zuilib/components/input";
+import Popover2 from "@zuilib/components/popover";
+import { cn as cn3 } from "@zuilib/components/lib/cn";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function FilterIcon({ className }) {
+  return /* @__PURE__ */ jsx5(
+    "svg",
+    {
+      "aria-hidden": "true",
+      focusable: "false",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      className: cn3("size-[1em] shrink-0", className),
+      children: /* @__PURE__ */ jsx5(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M2.628 1.601C5.028 1.206 7.49 1 10 1s4.973.206 7.372.601a.75.75 0 0 1 .628.74v2.288a2.25 2.25 0 0 1-.659 1.59l-4.682 4.683a2.25 2.25 0 0 0-.659 1.59v3.037c0 .684-.31 1.33-.844 1.757l-1.937 1.55A.75.75 0 0 1 8 18.25v-5.757a2.25 2.25 0 0 0-.659-1.591L2.659 6.22A2.25 2.25 0 0 1 2 4.629V2.34a.75.75 0 0 1 .628-.74Z",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  );
+}
+function isFilterActive(value) {
+  if (value === void 0 || value === null || value === "") return false;
+  if (Array.isArray(value)) return value.length > 0;
+  if (typeof value === "object") return Object.values(value).some((v) => v !== void 0 && v !== "");
+  return true;
+}
+function formatFilterValue(filter, value, labels = defaultDataGridLabels) {
+  if (Array.isArray(value)) {
+    if (filter?.control === "select") {
+      return value.map((v) => filter.options.find((o) => o.value === v)?.label ?? String(v)).join(", ");
+    }
+    return value.map(String).join(", ");
+  }
+  if (value && typeof value === "object") {
+    const { from, to } = value;
+    if (from && to) return `${from} \u2013 ${to}`;
+    if (from) return fillLabel(labels.rangeFrom, { date: from });
+    if (to) return fillLabel(labels.rangeUntil, { date: to });
+    return "";
+  }
+  return String(value ?? "");
+}
+function TextFilterForm({ filter, value, labels, onApply, onClear }) {
+  const [draft, setDraft] = useState2(typeof value === "string" ? value : "");
+  return /* @__PURE__ */ jsxs2(
+    "form",
+    {
+      "data-slot": "data-grid-filter-form",
+      className: "flex flex-col gap-3",
+      onSubmit: (event) => {
+        event.preventDefault();
+        onApply(draft);
+      },
+      children: [
+        /* @__PURE__ */ jsx5(
+          Input2,
+          {
+            size: "sm",
+            autoFocus: true,
+            "aria-label": labels.filterValue,
+            placeholder: filter.placeholder ?? labels.filterPlaceholder,
+            value: draft,
+            onChange: (event) => setDraft(event.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsx5(FilterActions, { labels, onClear })
+      ]
+    }
+  );
+}
+function SelectFilterForm({ filter, value, labels, onApply, onClear }) {
+  const [draft, setDraft] = useState2(Array.isArray(value) ? value : []);
+  const toggle = (option, checked) => setDraft((current) => checked ? [...current, option] : current.filter((v) => v !== option));
+  return /* @__PURE__ */ jsxs2(
+    "form",
+    {
+      "data-slot": "data-grid-filter-form",
+      className: "flex flex-col gap-3",
+      onSubmit: (event) => {
+        event.preventDefault();
+        onApply(draft);
+      },
+      children: [
+        /* @__PURE__ */ jsx5("div", { role: "group", "aria-label": labels.filterOptions, className: "flex max-h-60 flex-col gap-2 overflow-auto", children: filter.options.map((option) => /* @__PURE__ */ jsx5(
+          Checkbox3,
+          {
+            size: "sm",
+            label: option.label ?? option.value,
+            checked: draft.includes(option.value),
+            onCheckedChange: (checked) => toggle(option.value, checked)
+          },
+          option.value
+        )) }),
+        /* @__PURE__ */ jsx5(FilterActions, { labels, onClear })
+      ]
+    }
+  );
+}
+function DateRangeFilterForm({ value, labels, onApply, onClear }) {
+  const initial = value && typeof value === "object" ? value : {};
+  const [from, setFrom] = useState2(initial.from ?? "");
+  const [to, setTo] = useState2(initial.to ?? "");
+  return /* @__PURE__ */ jsxs2(
+    "form",
+    {
+      "data-slot": "data-grid-filter-form",
+      className: "flex flex-col gap-3",
+      onSubmit: (event) => {
+        event.preventDefault();
+        onApply({ from: from || void 0, to: to || void 0 });
+      },
+      children: [
+        /* @__PURE__ */ jsxs2("label", { className: "flex flex-col gap-1 text-sm text-muted-foreground", children: [
+          labels.from,
+          /* @__PURE__ */ jsx5(Input2, { size: "sm", type: "date", value: from, max: to || void 0, onChange: (event) => setFrom(event.target.value) })
+        ] }),
+        /* @__PURE__ */ jsxs2("label", { className: "flex flex-col gap-1 text-sm text-muted-foreground", children: [
+          labels.to,
+          /* @__PURE__ */ jsx5(Input2, { size: "sm", type: "date", value: to, min: from || void 0, onChange: (event) => setTo(event.target.value) })
+        ] }),
+        /* @__PURE__ */ jsx5(FilterActions, { labels, onClear })
+      ]
+    }
+  );
+}
+function FilterActions({ labels, onClear }) {
+  return /* @__PURE__ */ jsxs2("div", { "data-slot": "data-grid-filter-actions", className: "flex items-center justify-end gap-2", children: [
+    /* @__PURE__ */ jsx5(Button3, { variant: "ghost", size: "sm", onClick: onClear, children: labels.clear }),
+    /* @__PURE__ */ jsx5(Button3, { variant: "solid", size: "sm", type: "submit", children: labels.apply })
+  ] });
+}
+function FilterPopover({ column, filter }) {
+  const { labels } = useDataGridContext("Body");
+  const value = column.getFilterValue();
+  const active = isFilterActive(value);
+  const label = columnLabel(column);
+  const form = (close) => {
+    const apply = (next) => {
+      column.setFilterValue(isFilterActive(next) ? next : void 0);
+      close();
+    };
+    const clear = () => {
+      column.setFilterValue(void 0);
+      close();
+    };
+    return filter.control === "text" ? /* @__PURE__ */ jsx5(TextFilterForm, { filter, value, labels, onApply: apply, onClear: clear }) : filter.control === "select" ? /* @__PURE__ */ jsx5(SelectFilterForm, { filter, value, labels, onApply: apply, onClear: clear }) : /* @__PURE__ */ jsx5(DateRangeFilterForm, { filter, value, labels, onApply: apply, onClear: clear });
+  };
+  return /* @__PURE__ */ jsxs2(Popover2, { "data-slot": "data-grid-filter", className: "inline-flex shrink-0", children: [
+    /* @__PURE__ */ jsx5(
+      Popover2.Button,
+      {
+        "data-slot": "data-grid-filter-button",
+        "data-active": active ? "" : void 0,
+        "aria-label": fillLabel(active ? labels.filterColumnActive : labels.filterColumn, { column: label }),
+        className: cn3(
+          "inline-flex size-6 items-center justify-center rounded-sm text-muted-foreground",
+          "transition-colors duration-(--duration-fast) hover:bg-accent hover:text-accent-foreground",
+          "data-[active]:text-primary data-[open]:bg-accent"
+        ),
+        children: /* @__PURE__ */ jsx5(FilterIcon, { className: "size-3.5" })
+      }
+    ),
+    /* @__PURE__ */ jsx5(Popover2.Panel, { "data-slot": "data-grid-filter-panel", anchor: "bottom start", className: "min-w-56", children: ({ close }) => form(close) })
+  ] });
+}
+
+// src/data-grid-body.tsx
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var densityToSize = { compact: "sm", comfortable: "md" };
+function pinnedSide(column) {
+  const pinned = column.getIsPinned();
+  return pinned === "left" ? "start" : pinned === "right" ? "end" : void 0;
+}
+function pinnedStyle(column) {
+  const pinned = column.getIsPinned();
+  if (!pinned) return void 0;
+  return pinned === "left" ? { insetInlineStart: column.getStart("left") } : { insetInlineEnd: column.getAfter("right") };
+}
+function pinnedClasses(column, section) {
+  const pinned = column.getIsPinned();
+  if (!pinned) return false;
+  const lastLeft = pinned === "left" && column.getIsLastColumn("left");
+  const firstRight = pinned === "right" && column.getIsFirstColumn("right");
+  return cn4(
+    "sticky bg-background",
+    section === "head" ? "z-20" : "z-[1] group-hover/row:bg-muted group-data-[selected]/row:bg-accent",
+    lastLeft && "shadow-[inset_-1px_0_0_0_var(--color-border)] rtl:shadow-[inset_1px_0_0_0_var(--color-border)]",
+    firstRight && "shadow-[inset_1px_0_0_0_var(--color-border)] rtl:shadow-[inset_-1px_0_0_0_var(--color-border)]"
+  );
+}
+var HEADER_ROW_ID = null;
+var ROW_SELECTOR = '[data-slot="data-grid-header-row"][data-leaf], [data-slot="data-grid-row"]';
+var CELL_SELECTOR = ':scope > [data-slot="data-grid-header-cell"], :scope > [data-slot="data-grid-cell"]';
+var CELL_CONTROL_SELECTOR = '[role="checkbox"], [data-slot="data-grid-expand-toggle"]';
+function navigableRows(from) {
+  const table = from.closest("table");
+  return Array.from(table?.querySelectorAll(ROW_SELECTOR) ?? []);
+}
+var cellsOf = (row) => Array.from(row.querySelectorAll(CELL_SELECTOR));
+var clamp = (value, max) => Math.min(max, Math.max(0, value));
+function handleGridKeyDown(event, { row, expandable, activate }) {
+  const target = event.currentTarget;
+  if (event.target !== target) {
+    if (event.key === "Escape" && target.tagName !== "TR") {
+      event.preventDefault();
+      target.focus();
+    }
+    return;
+  }
+  const rowEl = target.closest("tr");
+  if (!rowEl) return;
+  const rows = navigableRows(rowEl);
+  const rowIndex = rows.indexOf(rowEl);
+  const inRowMode = target === rowEl;
+  const cells = cellsOf(rowEl);
+  const col = inRowMode ? null : cells.indexOf(target);
+  const isHeader = rowEl.dataset.slot === "data-grid-header-row";
+  const firstRow = inRowMode ? 1 : 0;
+  if (event.shiftKey && (event.key === "ArrowRight" || event.key === "ArrowLeft")) {
+    if (!expandable || !row?.getCanExpand()) return;
+    const next = event.key === "ArrowRight";
+    event.preventDefault();
+    if (next !== row.getIsExpanded()) row.toggleExpanded(next);
+    return;
+  }
+  const focusAt = (nextRow, nextCol) => {
+    event.preventDefault();
+    const targetRow = rows[clamp(nextRow, rows.length - 1)];
+    if (!targetRow) return;
+    if (nextCol === null) return targetRow.focus();
+    const targetCells = cellsOf(targetRow);
+    targetCells[clamp(nextCol, targetCells.length - 1)]?.focus();
+  };
+  switch (event.key) {
+    case "ArrowRight":
+      return focusAt(rowIndex, col === null ? 0 : col + 1);
+    case "ArrowLeft":
+      if (col === null) return;
+      return focusAt(rowIndex, col === 0 && !isHeader ? null : Math.max(0, col - 1));
+    case "ArrowDown":
+      return focusAt(rowIndex + 1, col);
+    case "ArrowUp":
+      return focusAt(Math.max(firstRow, rowIndex - 1), col);
+    case "Home":
+      if (event.ctrlKey || col === null) return focusAt(firstRow, col);
+      return focusAt(rowIndex, 0);
+    case "End":
+      if (event.ctrlKey || col === null) return focusAt(rows.length - 1, col);
+      return focusAt(rowIndex, cells.length - 1);
+    case "Enter":
+    case " ": {
+      if (col === null) return;
+      const control = target.querySelector(CELL_CONTROL_SELECTOR);
+      event.preventDefault();
+      if (control) return control.click();
+      return activate?.();
+    }
+  }
+}
+var sortDirection = (header) => {
+  const sorted = header.column.getIsSorted();
+  return sorted === false ? "none" : sorted === "asc" ? "ascending" : "descending";
+};
+function SortIcon({ direction }) {
+  return /* @__PURE__ */ jsxs3("svg", { "data-slot": "data-grid-sort-icon", "data-sort": direction, "aria-hidden": "true", className: "size-[1em] shrink-0", viewBox: "0 0 16 16", fill: "currentColor", children: [
+    /* @__PURE__ */ jsx6("path", { className: cn4(direction === "descending" && "opacity-30", direction === "none" && "opacity-40"), d: "M8 2.5 11.5 6.5h-7z" }),
+    /* @__PURE__ */ jsx6("path", { className: cn4(direction === "ascending" && "opacity-30", direction === "none" && "opacity-40"), d: "M8 13.5 4.5 9.5h7z" })
+  ] });
+}
+var headAlignClasses = { start: "justify-start", center: "justify-center", end: "justify-end" };
+function HeaderCell({ header, stickyHeader, active, onFocus }) {
+  const { table, loading, labels } = useDataGridContext("Body");
+  const column = header.column;
+  const extras = columnExtras(column);
+  const sortable = column.getCanSort();
+  const direction = sortDirection(header);
+  const filter = column.getCanFilter() ? extras.filter : void 0;
+  const unfilterable = Boolean(extras.filter) && !column.getCanFilter() && !column.accessorFn;
+  useEffect(() => {
+    if (unfilterable) {
+      warnOnce(`display-column-filter:${column.id}`, `[DataGrid] Column "${column.id}" declares a filter but has no accessorKey / accessorFn, so it cannot be filtered and shows no funnel.`);
+    }
+  }, [unfilterable, column.id]);
+  const resizable = column.getCanResize();
+  const pinned = column.getIsPinned();
+  const label = header.isPlaceholder ? null : flexRender2(column.columnDef.header, header.getContext());
+  const colIndex = (header.getLeafHeaders()[0]?.column ?? column).getIndex();
+  const minSize = column.columnDef.minSize ?? 20;
+  const maxSize = column.columnDef.maxSize ?? 1e3;
+  const leaf = header.subHeaders.length === 0;
+  return /* @__PURE__ */ jsxs3(
+    Table.Head,
+    {
+      "data-slot": "data-grid-header-cell",
+      "data-column": column.id,
+      "data-pinned": pinnedSide(column),
+      "data-sort": sortable ? direction : void 0,
+      "aria-sort": sortable ? direction : void 0,
+      "aria-colindex": colIndex + 1,
+      align: extras.align,
+      colSpan: header.colSpan,
+      style: { width: header.getSize(), minWidth: header.getSize(), ...pinnedStyle(column) },
+      className: cn4("group/head select-none p-0", !stickyHeader && !pinned && "relative", pinnedClasses(column, "head"), focusOutlineInsetClasses),
+      "aria-busy": loading || void 0,
+      tabIndex: leaf ? active ? 0 : -1 : void 0,
+      onFocus: (event) => {
+        if (event.target === event.currentTarget) onFocus(colIndex);
+      },
+      onKeyDown: (event) => handleGridKeyDown(event, {
+        expandable: false,
+        activate: sortable ? () => column.toggleSorting(void 0, column.getCanMultiSort()) : void 0
+      }),
+      children: [
+        /* @__PURE__ */ jsxs3("div", { "data-slot": "data-grid-header-content", className: cn4("flex items-center gap-1", extras.align === "end" && "flex-row-reverse"), children: [
+          sortable ? /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              type: "button",
+              "data-slot": "data-grid-sort-button",
+              "data-sort": direction,
+              onClick: (event) => column.toggleSorting(void 0, column.getCanMultiSort() && event.shiftKey),
+              className: cn4(
+                nativeControlResetClasses,
+                "flex min-w-0 flex-1 cursor-pointer items-center gap-1 px-(--table-cell-px) py-(--table-cell-py)",
+                "transition-colors duration-(--duration-fast) motion-reduce:transition-none",
+                "hover:text-foreground data-[sort=ascending]:text-foreground data-[sort=descending]:text-foreground",
+                focusRingInsetClasses,
+                headAlignClasses[extras.align ?? "start"]
+              ),
+              children: [
+                /* @__PURE__ */ jsx6("span", { className: "truncate", children: label }),
+                /* @__PURE__ */ jsx6(SortIcon, { direction })
+              ]
+            }
+          ) : /* @__PURE__ */ jsx6("span", { "data-slot": "data-grid-header-label", className: "min-w-0 flex-1 truncate px-(--table-cell-px) py-(--table-cell-py)", children: label }),
+          filter ? /* @__PURE__ */ jsx6("span", { "data-slot": "data-grid-header-tools", className: "shrink-0 px-1", children: /* @__PURE__ */ jsx6(FilterPopover, { column, filter }) }) : null
+        ] }),
+        resizable ? /* @__PURE__ */ jsx6(
+          "div",
+          {
+            "data-slot": "data-grid-resize-handle",
+            role: "separator",
+            "aria-orientation": "vertical",
+            "aria-label": fillLabel(labels.resizeColumn, { column: columnLabel(column) }),
+            "aria-valuenow": Math.round(header.getSize()),
+            "aria-valuemin": minSize,
+            "aria-valuemax": maxSize,
+            tabIndex: active ? 0 : -1,
+            onMouseDown: header.getResizeHandler(),
+            onTouchStart: header.getResizeHandler(),
+            onKeyDown: (event) => {
+              const step = event.shiftKey ? 50 : 10;
+              if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+                event.preventDefault();
+                event.stopPropagation();
+                const delta = event.key === "ArrowLeft" ? -step : step;
+                const next = Math.min(maxSize, Math.max(minSize, header.getSize() + delta));
+                table.setColumnSizing((sizing) => ({ ...sizing, [column.id]: next }));
+              } else if (event.key === "Escape") {
+                event.preventDefault();
+                event.currentTarget.closest("th")?.focus();
+              }
+            },
+            onDoubleClick: () => column.resetSize(),
+            className: cn4(
+              "absolute top-0 end-0 h-full w-1.5 cursor-col-resize touch-none select-none",
+              "opacity-0 transition-opacity duration-(--duration-fast) group-hover/head:opacity-100 focus-visible:opacity-100",
+              "bg-border hover:bg-primary focus-visible:bg-primary focus:outline-none",
+              column.getIsResizing() && "bg-primary opacity-100"
+            )
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function BodyCell({ cell, tabStop, expandable, onFocus, onActivateRow }) {
+  const { onCellCommit, commitOnBlur, labels } = useDataGridContext("Body");
+  const column = cell.column;
+  const extras = columnExtras(column);
+  const editable = Boolean(extras.enableInlineEdit);
+  const [editing, setEditing] = useState3(false);
+  const ref = useRef2(null);
+  const refocus = useRef2(false);
+  useEffect(() => {
+    if (!editing && refocus.current) {
+      refocus.current = false;
+      ref.current?.focus();
+    }
+  }, [editing]);
+  const startEdit = () => {
+    if (!editable) return;
+    setEditing(true);
+  };
+  const endEdit = (fromKeyboard) => {
+    refocus.current = fromKeyboard;
+    setEditing(false);
+  };
+  return /* @__PURE__ */ jsx6(
+    Table.Cell,
+    {
+      ref,
+      role: "gridcell",
+      "data-slot": "data-grid-cell",
+      "data-column": column.id,
+      "data-pinned": pinnedSide(column),
+      "data-editable": editable ? "" : void 0,
+      "data-editing": editing ? "" : void 0,
+      "aria-colindex": column.getIndex() + 1,
+      "aria-readonly": editable ? false : void 0,
+      align: extras.align,
+      tabIndex: tabStop ? 0 : -1,
+      style: { width: column.getSize(), minWidth: column.getSize(), ...pinnedStyle(column) },
+      className: cn4("group-data-[selected]/row:bg-accent", pinnedClasses(column, "cell"), focusOutlineInsetClasses),
+      onFocus: (event) => {
+        if (event.target === event.currentTarget) onFocus(column.getIndex());
+      },
+      onClick: editable ? (event) => event.stopPropagation() : void 0,
+      onDoubleClick: editable ? (event) => {
+        event.stopPropagation();
+        startEdit();
+      } : void 0,
+      onKeyDown: (event) => {
+        if (editing) return;
+        handleGridKeyDown(event, { row: cell.row, expandable, activate: editable ? startEdit : onActivateRow });
+      },
+      children: editable ? /* @__PURE__ */ jsx6(EditableCell, { cell, editing, onEditEnd: endEdit, commitOnBlur, onCellCommit, labels }) : flexRender2(column.columnDef.cell, cell.getContext())
+    }
+  );
+}
+function DataRow({ row, ariaRowIndex, activeCol, onFocus, onRowClick }) {
+  const { renderExpanded } = useDataGridContext("Table");
+  const expandable = Boolean(renderExpanded) && row.getCanExpand();
+  const expanded = expandable && row.getIsExpanded();
+  const ref = useRef2(null);
+  const cells = row.getVisibleCells();
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx6(
+      Table.Row,
+      {
+        ref,
+        "data-slot": "data-grid-row",
+        "data-row-id": row.id,
+        "data-expanded": expanded ? "" : void 0,
+        "aria-rowindex": ariaRowIndex,
+        selected: row.getIsSelected(),
+        interactive: true,
+        tabIndex: activeCol === null ? 0 : -1,
+        "aria-selected": row.getCanSelect() ? row.getIsSelected() : void 0,
+        onClick: onRowClick ? (event) => onRowClick(row, event) : void 0,
+        onFocus: (event) => {
+          if (event.target === event.currentTarget) onFocus(null);
+        },
+        onKeyDown: (event) => handleGridKeyDown(event, { row, expandable: Boolean(renderExpanded) }),
+        className: cn4("group/row", focusOutlineInsetClasses),
+        children: cells.map((cell, index) => /* @__PURE__ */ jsx6(
+          BodyCell,
+          {
+            cell,
+            tabStop: activeCol === index,
+            expandable: Boolean(renderExpanded),
+            onFocus,
+            onActivateRow: onRowClick ? () => ref.current?.click() : void 0
+          },
+          cell.id
+        ))
+      }
+    ),
+    expanded ? /* @__PURE__ */ jsx6(Table.Row, { "data-slot": "data-grid-expanded-row", "data-row-id": row.id, "aria-rowindex": ariaRowIndex, className: "bg-muted/40", children: /* @__PURE__ */ jsx6(Table.Cell, { "data-slot": "data-grid-expanded-cell", colSpan: cells.length, className: "whitespace-normal", children: renderExpanded?.(row) }) }) : null
+  ] });
+}
+function SkeletonRows({ count, columnCount }) {
+  return /* @__PURE__ */ jsx6(Fragment3, { children: Array.from({ length: count }, (_, rowIndex) => /* @__PURE__ */ jsx6(Table.Row, { "data-slot": "data-grid-skeleton-row", "aria-hidden": "true", children: Array.from({ length: columnCount }, (_2, cellIndex) => /* @__PURE__ */ jsx6(Table.Cell, { "data-slot": "data-grid-cell", children: /* @__PURE__ */ jsx6(Skeleton, { shape: "text", width: `${55 + (rowIndex * 7 + cellIndex * 13) % 40}%` }) }, cellIndex)) }, rowIndex)) });
+}
+function DataGridBody({
+  stickyHeader = false,
+  onRowClick,
+  error,
+  skeletonWhileRefreshing = false,
+  emptyState,
+  className,
+  scrollAreaClassName,
+  ...aria
+}) {
+  const { table, state, loading, density, rowCount, labels } = useDataGridContext("Table");
+  const rows = table.getRowModel().rows;
+  const headerGroups = table.getHeaderGroups();
+  const headerRowCount = headerGroups.length;
+  const columnCount = table.getVisibleLeafColumns().length;
+  const { pageIndex, pageSize } = state.pagination;
+  const skeletonCount = Math.min(pageSize, 10);
+  const [active, setActive] = useState3({ rowId: HEADER_ROW_ID, col: null });
+  const inHeader = active.rowId === HEADER_ROW_ID && active.col !== null;
+  const onPage = active.rowId !== HEADER_ROW_ID && rows.some((row) => row.id === active.rowId);
+  const activeRowId = inHeader || onPage ? active.rowId : rows[0]?.id ?? HEADER_ROW_ID;
+  const activeCol = activeRowId === active.rowId ? active.col : null;
+  const showSkeleton = loading && (rows.length === 0 ? !error : skeletonWhileRefreshing);
+  const messageRowIndex = headerRowCount + 1;
+  return /* @__PURE__ */ jsxs3(
+    Table,
+    {
+      role: "grid",
+      "data-slot": "data-grid-table",
+      "data-loading": loading ? "" : void 0,
+      "data-density": density,
+      "aria-busy": loading || void 0,
+      "aria-rowcount": rowCount + headerRowCount,
+      "aria-colcount": columnCount,
+      size: densityToSize[density],
+      stickyHeader,
+      fullWidth: true,
+      className: cn4("table-fixed", className),
+      scrollAreaClassName: cn4("rounded-md border border-border", scrollAreaClassName),
+      style: { width: table.getTotalSize(), minWidth: "100%" },
+      ...aria,
+      children: [
+        /* @__PURE__ */ jsx6(Table.Header, { "data-slot": "data-grid-header", children: headerGroups.map((group, groupIndex) => /* @__PURE__ */ jsx6(
+          Table.Row,
+          {
+            "data-slot": "data-grid-header-row",
+            "data-leaf": groupIndex === headerRowCount - 1 ? "" : void 0,
+            "aria-rowindex": groupIndex + 1,
+            children: group.headers.map((header) => /* @__PURE__ */ jsx6(
+              HeaderCell,
+              {
+                header,
+                stickyHeader,
+                active: activeRowId === HEADER_ROW_ID && activeCol === header.column.getIndex(),
+                onFocus: (col) => setActive({ rowId: HEADER_ROW_ID, col })
+              },
+              header.id
+            ))
+          },
+          group.id
+        )) }),
+        /* @__PURE__ */ jsxs3(Table.Body, { "data-slot": "data-grid-body", children: [
+          error ? /* @__PURE__ */ jsx6(Table.Row, { "data-slot": "data-grid-message-row", "aria-rowindex": messageRowIndex, children: /* @__PURE__ */ jsx6(Table.Cell, { colSpan: columnCount, "data-slot": "data-grid-error", children: typeof error === "string" ? /* @__PURE__ */ jsx6(Alert, { tone: "danger", children: error }) : error }) }) : null,
+          showSkeleton ? /* @__PURE__ */ jsx6(SkeletonRows, { count: skeletonCount, columnCount }) : rows.length === 0 ? error ? null : /* @__PURE__ */ jsx6(Table.Row, { "data-slot": "data-grid-message-row", "aria-rowindex": messageRowIndex, children: /* @__PURE__ */ jsx6(Table.Cell, { colSpan: columnCount, "data-slot": "data-grid-empty", children: emptyState ?? /* @__PURE__ */ jsx6(EmptyState, { size: "sm", title: labels.noResults, description: labels.noResultsDescription }) }) }) : rows.map((row, index) => /* @__PURE__ */ jsx6(
+            DataRow,
+            {
+              row,
+              ariaRowIndex: pageIndex * pageSize + index + headerRowCount + 1,
+              activeCol: row.id === activeRowId ? activeCol : false,
+              onFocus: (col) => setActive({ rowId: row.id, col }),
+              onRowClick
+            },
+            row.id
+          ))
+        ] })
+      ]
+    }
+  );
+}
+
+// src/pagination.tsx
+import { useMemo } from "react";
+import Button4 from "@zuilib/components/button";
+import NativeSelect from "@zuilib/components/native-select";
+import { cn as cn5 } from "@zuilib/components/lib/cn";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function useNumberFormat(locale) {
+  return useMemo(() => {
+    try {
+      return new Intl.NumberFormat(locale);
+    } catch {
+      warnOnce(`invalid-locale:${locale}`, `[DataGrid] "${locale}" is not a valid BCP 47 locale tag; numbers are formatted in the user's locale instead.`);
+      return new Intl.NumberFormat();
+    }
+  }, [locale]);
+}
+function sizeOptions(options, pageSize) {
+  return options.includes(pageSize) ? [...options] : [...options, pageSize].sort((a, b) => a - b);
+}
+function DataGridPagination({ locale: localeProp, className, ...props }) {
+  const { table, state, rowCount, pageSizeOptions, loading, locale, labels } = useDataGridContext("Pagination");
+  const numberFormat = useNumberFormat(localeProp ?? locale);
+  const { pageIndex, pageSize } = state.pagination;
+  const pageCount = Math.max(1, Math.ceil(rowCount / pageSize));
+  const first = rowCount === 0 ? 0 : pageIndex * pageSize + 1;
+  const last = Math.min(rowCount, (pageIndex + 1) * pageSize);
+  const canPrevious = pageIndex > 0;
+  const canNext = pageIndex < pageCount - 1;
+  const options = sizeOptions(pageSizeOptions, pageSize);
+  return /* @__PURE__ */ jsxs4(
+    "nav",
+    {
+      "data-slot": "data-grid-pagination",
+      "aria-label": labels.pagination,
+      className: cn5("flex flex-wrap items-center gap-4 text-sm text-muted-foreground", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs4("label", { "data-slot": "data-grid-page-size", className: "flex items-center gap-2", children: [
+          labels.rowsPerPage,
+          /* @__PURE__ */ jsx7(
+            NativeSelect,
+            {
+              size: "sm",
+              value: pageSize,
+              onChange: (event) => table.setPagination({ pageIndex: 0, pageSize: Number(event.target.value) }),
+              children: options.map((size) => /* @__PURE__ */ jsx7("option", { value: size, children: size }, size))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx7("p", { "data-slot": "data-grid-range", "aria-live": "polite", className: "m-0 ms-auto tabular-nums", children: loading ? labels.loading : fillLabel(labels.range, { first: numberFormat.format(first), last: numberFormat.format(last), total: numberFormat.format(rowCount) }) }),
+        /* @__PURE__ */ jsxs4("div", { "data-slot": "data-grid-page-buttons", className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx7(Button4, { variant: "ghost", size: "sm", "aria-label": labels.firstPage, disabled: !canPrevious, onClick: () => table.setPageIndex(0), children: /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\xAB" }) }),
+          /* @__PURE__ */ jsx7(Button4, { variant: "ghost", size: "sm", "aria-label": labels.previousPage, disabled: !canPrevious, onClick: () => table.previousPage(), children: /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\u2039" }) }),
+          /* @__PURE__ */ jsxs4("span", { "data-slot": "data-grid-page-indicator", className: "px-1 tabular-nums", children: [
+            pageIndex + 1,
+            " / ",
+            pageCount
+          ] }),
+          /* @__PURE__ */ jsx7(Button4, { variant: "ghost", size: "sm", "aria-label": labels.nextPage, disabled: !canNext, onClick: () => table.nextPage(), children: /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\u203A" }) }),
+          /* @__PURE__ */ jsx7(Button4, { variant: "ghost", size: "sm", "aria-label": labels.lastPage, disabled: !canNext, onClick: () => table.setPageIndex(pageCount - 1), children: /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\xBB" }) })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/selection-bar.tsx
+import { useEffect as useEffect2 } from "react";
+import Button5 from "@zuilib/components/button";
+import { cn as cn6 } from "@zuilib/components/lib/cn";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function DataGridSelectionBar({ className, ...props }) {
+  const { table, state, setState, selectionActions, rowCount, labels, locale, selectAllMatching } = useDataGridContext("SelectionBar");
+  const numberFormat = useNumberFormat(locale);
+  const selectedIds = Object.keys(state.rowSelection).filter((id) => state.rowSelection[id]);
+  const allMatching = state.allMatching === true;
+  const visible = selectedIds.length > 0 || allMatching;
+  const keyedByIndex = visible && !table.options.getRowId;
+  useEffect2(() => {
+    if (keyedByIndex) {
+      warnOnce("row-selection-without-getRowId", "[DataGrid] `rowSelection` is keyed by row index because `getRowId` is not set: the ids handed to selection actions change with every page and sort. Pass `getRowId`.");
+    }
+  }, [keyedByIndex]);
+  if (!visible) return null;
+  const pageRows = table.getRowModel().rows.length;
+  const offerAll = selectAllMatching && setState !== void 0 && !allMatching && rowCount > pageRows && table.getIsAllPageRowsSelected();
+  const count = numberFormat.format(allMatching ? rowCount : selectedIds.length);
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      "data-slot": "data-grid-selection-bar",
+      role: "region",
+      "aria-label": labels.selectionActions,
+      "data-all-matching": allMatching ? "" : void 0,
+      className: cn6(
+        "flex flex-wrap items-center gap-2 rounded-md border border-border bg-accent px-3 py-2 text-sm text-accent-foreground",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx8("span", { "data-slot": "data-grid-selection-count", "aria-live": "polite", className: "font-medium", children: fillLabel(allMatching ? labels.allMatchingSelected : labels.selectedCount, { count }) }),
+        offerAll ? /* @__PURE__ */ jsx8(
+          Button5,
+          {
+            "data-slot": "data-grid-selection-select-all",
+            size: "sm",
+            variant: "ghost",
+            onClick: () => setState?.("allMatching", true),
+            children: fillLabel(labels.selectAllMatching, { count: numberFormat.format(rowCount) })
+          }
+        ) : null,
+        /* @__PURE__ */ jsx8("span", { className: "flex flex-wrap items-center gap-1", children: selectionActions.map((action) => /* @__PURE__ */ jsx8(
+          Button5,
+          {
+            "data-slot": "data-grid-selection-action",
+            "data-action": action.id,
+            size: "sm",
+            variant: action.variant ?? "outline",
+            tone: action.tone,
+            onClick: () => action.onSelect(selectedIds, { allMatching, rowCount }),
+            children: action.label
+          },
+          action.id
+        )) }),
+        /* @__PURE__ */ jsx8(Button5, { "data-slot": "data-grid-selection-clear", size: "sm", variant: "ghost", className: "ms-auto", onClick: () => table.resetRowSelection(true), children: labels.clearSelection })
+      ]
+    }
+  );
+}
+
+// src/toolbar.tsx
+import { useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
+import Badge from "@zuilib/components/badge";
+import SearchInput from "@zuilib/components/search-input";
+import { cn as cn7 } from "@zuilib/components/lib/cn";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function DataGridToolbar({
+  showSearch = true,
+  searchPlaceholder,
+  searchDebounceMs = 300,
+  showFilterChips = true,
+  showColumnManager = true,
+  addableColumns,
+  onAddColumn,
+  children,
+  className,
+  ...props
+}) {
+  const { table, state, labels } = useDataGridContext("Toolbar");
+  const [draft, setDraft] = useState4(state.search);
+  const timer = useRef3(void 0);
+  useEffect3(() => {
+    setDraft(state.search);
+  }, [state.search]);
+  useEffect3(() => () => clearTimeout(timer.current), []);
+  const commitSearch = (value) => {
+    clearTimeout(timer.current);
+    table.setGlobalFilter(value);
+  };
+  const changeSearch = (value) => {
+    setDraft(value);
+    clearTimeout(timer.current);
+    if (value === "") return commitSearch(value);
+    timer.current = setTimeout(() => table.setGlobalFilter(value), searchDebounceMs);
+  };
+  const activeFilters = state.columnFilters.filter((filter) => isFilterActive(filter.value));
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      "data-slot": "data-grid-toolbar",
+      className: cn7("flex flex-wrap items-center gap-2", className),
+      ...props,
+      children: [
+        showSearch ? /* @__PURE__ */ jsx9(
+          SearchInput,
+          {
+            "data-slot": "data-grid-search",
+            size: "sm",
+            "aria-label": labels.search,
+            placeholder: searchPlaceholder ?? labels.searchPlaceholder,
+            value: draft,
+            onChange: (event) => changeSearch(event.target.value),
+            onSubmit: commitSearch,
+            className: "w-64 max-w-full"
+          }
+        ) : null,
+        showFilterChips && activeFilters.length > 0 ? /* @__PURE__ */ jsx9("ul", { "data-slot": "data-grid-filter-chips", "aria-label": labels.activeFilters, className: "m-0 flex list-none flex-wrap items-center gap-1 p-0", children: activeFilters.map((filter) => {
+          const column = table.getColumn(filter.id);
+          const label = column ? columnLabel(column) : filter.id;
+          return /* @__PURE__ */ jsx9("li", { children: /* @__PURE__ */ jsxs6(
+            Badge,
+            {
+              "data-slot": "data-grid-filter-chip",
+              "data-column": filter.id,
+              variant: "subtle",
+              tone: "primary",
+              shape: "pill",
+              removeLabel: fillLabel(labels.removeFilter, { column: label }),
+              onRemove: () => column?.setFilterValue(void 0),
+              children: [
+                label,
+                ": ",
+                formatFilterValue(column ? columnExtras(column).filter : void 0, filter.value, labels)
+              ]
+            }
+          ) }, filter.id);
+        }) }) : null,
+        children,
+        showColumnManager ? /* @__PURE__ */ jsx9(DataGridColumnManager, { className: "ms-auto", addable: addableColumns, onAddColumn }) : null
+      ]
+    }
+  );
+}
+
+// src/use-data-grid.ts
+import { useCallback, useEffect as useEffect4, useLayoutEffect, useMemo as useMemo2, useRef as useRef4, useState as useState5 } from "react";
+import {
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+
+// src/state.ts
+var DEFAULT_PAGE_SIZE = 25;
+var defaultDataGridState = {
+  pagination: { pageIndex: 0, pageSize: DEFAULT_PAGE_SIZE },
+  sorting: [],
+  columnFilters: [],
+  search: "",
+  columnVisibility: {},
+  columnOrder: [],
+  columnPinning: { start: [], end: [] },
+  rowSelection: {},
+  expanded: {},
+  allMatching: false
+};
+function resolveDataGridState(state) {
+  return { ...defaultDataGridState, ...state };
+}
+
+// src/use-data-grid.ts
+function resolve(updater, previous) {
+  return typeof updater === "function" ? updater(previous) : updater;
+}
+var NO_FIXED_COLUMNS = [];
+var sameList = (a, b) => a.length === b.length && a.every((id, i) => id === b[i]);
+function toTanstackPinning(pinning) {
+  return { left: pinning.start, right: pinning.end };
+}
+function fromTanstackPinning(pinning) {
+  return { start: pinning.left ?? [], end: pinning.right ?? [] };
+}
+function normalizeColumnState(state, fixedColumnIds) {
+  if (fixedColumnIds.length === 0) return state;
+  const fixed = (ids) => fixedColumnIds.filter((id) => ids.includes(id));
+  const rest = (ids) => ids.filter((id) => !fixedColumnIds.includes(id));
+  const order = state.columnOrder.length === 0 ? state.columnOrder : [...fixed(state.columnOrder), ...rest(state.columnOrder)];
+  const start = [...fixedColumnIds, ...rest(state.columnPinning.start ?? [])];
+  const end = rest(state.columnPinning.end ?? []);
+  const pinningChanged = !sameList(start, state.columnPinning.start ?? []) || !sameList(end, state.columnPinning.end ?? []);
+  const orderChanged = !sameList(order, state.columnOrder);
+  if (!pinningChanged && !orderChanged) return state;
+  return {
+    ...state,
+    columnOrder: orderChanged ? order : state.columnOrder,
+    columnPinning: pinningChanged ? { start, end } : state.columnPinning
+  };
+}
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect4 : useLayoutEffect;
+var inDateRange = (row, columnId, value) => {
+  const raw = row.getValue(columnId);
+  if (!value || !value.from && !value.to) return true;
+  if (raw === void 0 || raw === null || raw === "") return false;
+  const day = (raw instanceof Date ? raw.toISOString() : String(raw)).slice(0, 10);
+  if (value.from && day < value.from.slice(0, 10)) return false;
+  if (value.to && day > value.to.slice(0, 10)) return false;
+  return true;
+};
+inDateRange.autoRemove = (value) => !value || !value.from && !value.to;
+var filterFnByControl = { text: "includesString", select: "arrIncludesSome", "date-range": inDateRange };
+function toTanstackColumns(columns) {
+  return columns.map((column) => {
+    const filter = column.filter ?? column.meta?.filter;
+    const next = { ...column };
+    if (column.width !== void 0 && column.size === void 0) next.size = column.width;
+    if (filter && column.filterFn === void 0) next.filterFn = filterFnByControl[filter.control];
+    return next;
+  });
+}
+function useDataGrid(options) {
+  const {
+    columns,
+    rows,
+    rowCount,
+    state: partialState,
+    defaultState,
+    onStateChange,
+    fixedColumnIds,
+    manualPagination = true,
+    manualSorting = true,
+    manualFiltering = true,
+    getRowId,
+    enableRowSelection = true,
+    enableColumnResizing = true,
+    getRowCanExpand,
+    tableOptions
+  } = options;
+  const controlled = partialState !== void 0;
+  const [internalState, setInternalState] = useState5(() => resolveDataGridState(defaultState));
+  const fixedIds = fixedColumnIds ?? NO_FIXED_COLUMNS;
+  const state = useMemo2(
+    () => normalizeColumnState(controlled ? resolveDataGridState(partialState) : internalState, fixedIds),
+    [controlled, partialState, internalState, fixedIds]
+  );
+  const latest = useRef4({ state, onStateChange, pending: null });
+  useIsomorphicLayoutEffect(() => {
+    latest.current.state = state;
+    latest.current.onStateChange = onStateChange;
+    latest.current.pending = null;
+  });
+  const emit = useCallback((next) => {
+    if (!controlled) {
+      latest.current.pending = next;
+      setInternalState(next);
+    }
+    latest.current.onStateChange?.(next);
+  }, [controlled]);
+  const current = () => latest.current.pending ?? latest.current.state;
+  const [internalSizing, setInternalSizing] = useState5({});
+  const tableState = useMemo2(
+    () => ({
+      ...state,
+      globalFilter: state.search,
+      columnPinning: toTanstackPinning(state.columnPinning),
+      columnSizing: state.columnSizing ?? internalSizing
+    }),
+    [state, internalSizing]
+  );
+  const setState = useCallback((key, updater) => {
+    const previous = current();
+    const value = resolve(updater, previous[key]);
+    if (Object.is(value, previous[key])) return;
+    emit({ ...previous, [key]: value });
+  }, [emit]);
+  const replaceState = useCallback((next) => {
+    emit({ ...current(), ...next });
+  }, [emit]);
+  const tanstackColumns = useMemo2(() => toTanstackColumns(columns), [columns]);
+  const table = useReactTable({
+    ...tableOptions,
+    data: rows,
+    columns: tanstackColumns,
+    state: tableState,
+    /* Client-side paging counts the rows that pass the filters; a server total would be wrong. */
+    rowCount: manualPagination ? rowCount : void 0,
+    manualPagination,
+    manualSorting,
+    manualFiltering,
+    enableRowSelection,
+    enableColumnResizing,
+    columnResizeMode: "onChange",
+    getRowId,
+    getRowCanExpand,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: manualSorting ? void 0 : getSortedRowModel(),
+    getFilteredRowModel: manualFiltering ? void 0 : getFilteredRowModel(),
+    getPaginationRowModel: manualPagination ? void 0 : getPaginationRowModel(),
+    onPaginationChange: (updater) => setState("pagination", updater),
+    /* A new sort or filter starts from the first page: the old page index has
+       no meaning against a different ordering. */
+    onSortingChange: (updater) => {
+      const previous = current();
+      const sorting = resolve(updater, previous.sorting);
+      emit({ ...previous, sorting, pagination: { ...previous.pagination, pageIndex: 0 }, allMatching: false });
+    },
+    onColumnFiltersChange: (updater) => {
+      const previous = current();
+      const columnFilters = resolve(updater, previous.columnFilters);
+      emit({ ...previous, columnFilters, pagination: { ...previous.pagination, pageIndex: 0 }, allMatching: false });
+    },
+    onGlobalFilterChange: (updater) => {
+      const previous = current();
+      const search = resolve(updater, previous.search) ?? "";
+      if (search === previous.search) return;
+      emit({ ...previous, search, pagination: { ...previous.pagination, pageIndex: 0 }, allMatching: false });
+    },
+    onColumnVisibilityChange: (updater) => setState("columnVisibility", updater),
+    onColumnOrderChange: (updater) => setState("columnOrder", updater),
+    onColumnPinningChange: (updater) => {
+      const previous = current();
+      const pinning = resolve(updater, toTanstackPinning(previous.columnPinning));
+      setState("columnPinning", fromTanstackPinning(pinning));
+    },
+    /* "Select all N" describes the query's whole result set; any change to
+       the explicit selection (or to the query, above) is narrower than that. */
+    onRowSelectionChange: (updater) => {
+      const previous = current();
+      const rowSelection = resolve(updater, previous.rowSelection);
+      if (Object.is(rowSelection, previous.rowSelection)) return;
+      emit({ ...previous, rowSelection, allMatching: false });
+    },
+    onExpandedChange: (updater) => setState("expanded", updater),
+    onColumnSizingChange: (updater) => {
+      const previous = current();
+      if (previous.columnSizing === void 0) return setInternalSizing(updater);
+      const columnSizing = resolve(updater, previous.columnSizing);
+      if (columnSizing !== previous.columnSizing) emit({ ...previous, columnSizing });
+    }
+  });
+  return { table, state, setState, replaceState };
+}
+
+// src/server-adapter.ts
+var INTERNAL_COLUMN_IDS = /* @__PURE__ */ new Set(["__select", "__expand"]);
+function toServerState(state) {
+  const s = { ...defaultDataGridState, ...state };
+  return {
+    pagination: s.pagination,
+    sorting: s.sorting,
+    columnFilters: s.columnFilters,
+    search: s.search,
+    allMatching: s.allMatching ?? false
+  };
+}
+var isEmptyFilter = (value) => value === void 0 || value === "" || Array.isArray(value) && value.length === 0;
+function toQuery(state) {
+  const s = toServerState(state);
+  const filters = {};
+  const active = s.columnFilters.filter((filter) => !isEmptyFilter(filter.value));
+  for (const filter of [...active].sort((a, b) => a.id < b.id ? -1 : a.id > b.id ? 1 : 0)) {
+    filters[filter.id] = filter.value;
+  }
+  return {
+    page: s.pagination.pageIndex + 1,
+    pageSize: s.pagination.pageSize,
+    sort: s.sorting.map(({ id, desc }) => ({ id, desc })),
+    filters,
+    search: s.search,
+    allMatching: s.allMatching ?? false
+  };
+}
+function toQueryKey(state) {
+  return JSON.stringify(toQuery(state));
+}
+var isPositiveInteger = (value) => typeof value === "number" && Number.isInteger(value) && value > 0;
+var isPlainObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+function toSortEntry(entry) {
+  if (!isPlainObject(entry) || typeof entry.id !== "string" || entry.id === "") return null;
+  return { id: entry.id, desc: entry.desc === true };
+}
+function fromQuery(query) {
+  const pageSize = isPositiveInteger(query.pageSize) ? query.pageSize : defaultDataGridState.pagination.pageSize;
+  const page = isPositiveInteger(query.page) ? query.page : 1;
+  const sorting = [];
+  if (Array.isArray(query.sort)) {
+    for (const entry of query.sort) {
+      const sort = toSortEntry(entry);
+      if (sort) sorting.push(sort);
+    }
+  }
+  const filters = isPlainObject(query.filters) ? query.filters : {};
+  return {
+    pagination: { pageIndex: page - 1, pageSize },
+    sorting,
+    columnFilters: Object.entries(filters).filter(([, value]) => !isEmptyFilter(value)).map(([id, value]) => ({ id, value })),
+    search: typeof query.search === "string" ? query.search : "",
+    allMatching: query.allMatching === true
+  };
+}
+function toColumnState(state) {
+  const s = { ...defaultDataGridState, ...state };
+  const own = (id) => !INTERNAL_COLUMN_IDS.has(id);
+  const visibility = {};
+  for (const [id, visible] of Object.entries(s.columnVisibility)) if (own(id)) visibility[id] = visible;
+  const sizing = {};
+  for (const [id, size] of Object.entries(s.columnSizing ?? {})) if (own(id)) sizing[id] = size;
+  return {
+    columnVisibility: visibility,
+    columnOrder: s.columnOrder.filter(own),
+    columnPinning: { start: (s.columnPinning.start ?? []).filter(own), end: (s.columnPinning.end ?? []).filter(own) },
+    columnSizing: sizing
+  };
+}
+function fromColumnState(saved) {
+  const visibility = { ...saved.columnVisibility };
+  const order = [...saved.columnOrder ?? []];
+  const pinning = { start: [...saved.columnPinning?.start ?? []], end: [...saved.columnPinning?.end ?? []] };
+  return {
+    columnVisibility: visibility,
+    columnOrder: order,
+    columnPinning: pinning,
+    columnSizing: { ...saved.columnSizing }
+  };
+}
+
+// src/data-grid.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var FIXED_COLUMN_IDS2 = [SELECT_COLUMN_ID, EXPAND_COLUMN_ID];
+var DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
+function DataGridRoot({
+  columns,
+  rows,
+  rowCount,
+  state: stateProp,
+  defaultState,
+  onStateChange,
+  manualPagination,
+  manualSorting,
+  manualFiltering,
+  getRowId,
+  enableRowSelection = true,
+  enableColumnResizing,
+  getRowCanExpand,
+  renderExpanded,
+  tableOptions,
+  loading = false,
+  error,
+  skeletonWhileRefreshing = false,
+  labels: labelsProp,
+  emptyState,
+  density = "comfortable",
+  stickyHeader = false,
+  onRowClick,
+  onCellCommit,
+  commitOnBlur = true,
+  selectAllMatching = true,
+  locale,
+  selectionActions = [],
+  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
+  showPagination = true,
+  "aria-label": ariaLabel = "Data grid",
+  "aria-labelledby": ariaLabelledBy,
+  children,
+  className,
+  tableClassName,
+  scrollAreaClassName,
+  ...props
+}) {
+  const expandable = Boolean(renderExpanded);
+  const allColumns = useMemo3(() => {
+    const leading = [];
+    if (enableRowSelection) leading.push(createSelectColumn());
+    if (expandable) leading.push(createExpandColumn());
+    return leading.length ? [...leading, ...columns] : columns;
+  }, [columns, enableRowSelection, expandable]);
+  const fixedColumnIds = useMemo3(
+    () => FIXED_COLUMN_IDS2.filter((id) => id === SELECT_COLUMN_ID ? Boolean(enableRowSelection) : expandable),
+    [enableRowSelection, expandable]
+  );
+  const canExpand = useMemo3(
+    () => expandable ? getRowCanExpand ?? (() => true) : () => false,
+    [expandable, getRowCanExpand]
+  );
+  const { table, state, setState } = useDataGrid({
+    columns: allColumns,
+    rows,
+    rowCount,
+    state: stateProp,
+    defaultState,
+    onStateChange,
+    fixedColumnIds,
+    manualPagination,
+    manualSorting,
+    manualFiltering,
+    getRowId,
+    enableRowSelection,
+    enableColumnResizing,
+    getRowCanExpand: canExpand,
+    tableOptions
+  });
+  const labels = useMemo3(() => ({ ...defaultDataGridLabels, ...labelsProp }), [labelsProp]);
+  const context = {
+    table,
+    state,
+    setState,
+    loading,
+    density,
+    onCellCommit,
+    renderExpanded,
+    selectionActions,
+    pageSizeOptions,
+    /* The prop for a server-driven grid; with client-side paging, the rows that pass the filters. */
+    rowCount: table.getRowCount(),
+    labels,
+    locale,
+    commitOnBlur,
+    selectAllMatching
+  };
+  return /* @__PURE__ */ jsx10(DataGridContext.Provider, { value: context, children: /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      "data-slot": "data-grid",
+      "data-density": density,
+      "data-loading": loading ? "" : void 0,
+      className: cn8("flex flex-col gap-3 text-foreground", className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx10(DataGridSelectionBar, {}),
+        /* @__PURE__ */ jsx10(
+          DataGridBody,
+          {
+            "aria-label": ariaLabelledBy ? void 0 : ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            stickyHeader,
+            onRowClick,
+            error,
+            skeletonWhileRefreshing,
+            emptyState,
+            className: tableClassName,
+            scrollAreaClassName
+          }
+        ),
+        showPagination ? /* @__PURE__ */ jsx10(DataGridPagination, {}) : null
+      ]
+    }
+  ) });
+}
+var DataGrid = DataGridRoot;
+DataGrid.displayName = "DataGrid";
+DataGrid.Toolbar = DataGridToolbar;
+DataGrid.ColumnManager = DataGridColumnManager;
+DataGrid.SelectionBar = DataGridSelectionBar;
+DataGrid.Body = DataGridBody;
+DataGrid.Pagination = DataGridPagination;
+var data_grid_default = DataGrid;
+export {
+  DEFAULT_PAGE_SIZE,
+  DEFAULT_PAGE_SIZE_OPTIONS,
+  DataGridBody,
+  DataGridColumnManager,
+  DataGridContext,
+  DataGridPagination,
+  DataGridSelectionBar,
+  DataGridToolbar,
+  EXPAND_COLUMN_ID,
+  SELECT_COLUMN_ID,
+  data_grid_default as default,
+  defaultDataGridLabels,
+  defaultDataGridState,
+  fromColumnState,
+  fromQuery,
+  normalizeColumnState,
+  resolveDataGridState,
+  toColumnState,
+  toQuery,
+  toQueryKey,
+  toServerState,
+  useDataGrid,
+  useDataGridContext
+};