@oprt/react 0.0.0-stage → 0.2.0

package/dist/DataGrid/DataGrid.js

@@ -0,0 +1,459 @@
+"use client";
+
+// src/DataGrid/DataGrid.tsx
+import {
+  forwardRef,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import clsx from "clsx";
+import { Button } from "../Button/Button.js";
+import { Checkbox } from "../Checkbox/Checkbox.js";
+import {
+  DataTable
+} from "../DataTable/DataTable.js";
+import { Select, SelectOption } from "../Select/Select.js";
+import { sortedOrder } from "../DataTable/sort.js";
+import { devValidate } from "../_internal/devValidate.js";
+import { DataGridManifest } from "./DataGrid.manifest.js";
+import { PageControls } from "./PageControls.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ColumnWidthInput({
+  value,
+  min,
+  max,
+  disabled,
+  label,
+  onCommit
+}) {
+  const [draft, setDraft] = useState(null);
+  useEffect(() => setDraft(null), [value]);
+  const text = draft?.base === value ? draft.text : String(value);
+  const commit = (requested) => {
+    setDraft(null);
+    if (!disabled && Number.isFinite(requested)) onCommit(Math.min(max, Math.max(min, requested)));
+  };
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "number",
+      "aria-label": label,
+      min,
+      max,
+      step: 1,
+      value: text,
+      disabled,
+      className: "h-oprt-md w-12u border border-oprt-border-control bg-oprt-surface-2 px-1u font-mono text-oprt-base font-medium focus-visible:outline-hidden focus-visible:border-oprt-border-focus focus-visible:shadow-oprt-focus disabled:cursor-not-allowed disabled:text-oprt-text-dim",
+      onChange: (event) => setDraft({ text: event.target.value, base: value }),
+      onBlur: () => {
+        if (draft?.base === value) commit(text.trim() === "" ? Number.NaN : Number(text));
+      },
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          setDraft(null);
+          return;
+        }
+        const base = text.trim() !== "" && Number.isFinite(Number(text)) ? Number(text) : value;
+        const next = event.key === "Enter" ? text.trim() === "" ? Number.NaN : Number(text) : event.key === "Home" ? min : event.key === "End" ? max : event.key === "ArrowUp" || event.key === "ArrowRight" ? base + 8 : event.key === "ArrowDown" || event.key === "ArrowLeft" ? base - 8 : void 0;
+        if (next !== void 0) {
+          event.preventDefault();
+          commit(next);
+        }
+      }
+    }
+  );
+}
+function withoutPage(selection, pageIds) {
+  const onPage = new Set(pageIds);
+  return selection.filter((id) => !onPage.has(id));
+}
+var DataGrid = forwardRef((allProps, ref) => {
+  const {
+    columns,
+    data,
+    getRowId,
+    caption = "Data grid",
+    selectedRowIds,
+    onSelectionChange,
+    sort,
+    onSortChange,
+    page,
+    onPageChange,
+    pageSize = 10,
+    mode = "client",
+    rowCount,
+    visibleColumnKeys,
+    onVisibleColumnsChange,
+    columnWidths,
+    onColumnWidthsChange,
+    pinnedColumnKeys,
+    onPinnedColumnsChange,
+    virtualization,
+    viewMode,
+    onViewModeChange,
+    loading = false,
+    disabled = false,
+    dense = false,
+    emptyMessage = "No results.",
+    onRowClick,
+    className,
+    ...props
+  } = allProps;
+  if (process.env.NODE_ENV !== "production") {
+    devValidate("DataGrid", DataGridManifest.DataGrid.props, allProps);
+  }
+  const [localSelection, setLocalSelection] = useState([]);
+  const [localSort, setLocalSort] = useState(null);
+  const [localPage, setLocalPage] = useState(1);
+  const [hiddenColumns, setHiddenColumns] = useState([]);
+  const [columnsOpen, setColumnsOpen] = useState(false);
+  const [localWidths, setLocalWidths] = useState({});
+  const [localPinned, setLocalPinned] = useState([]);
+  const [localView, setLocalView] = useState("virtualized");
+  const columnsId = useId();
+  const blocked = disabled || loading;
+  const selection = selectedRowIds ?? localSelection;
+  const selectionSet = useMemo(() => new Set(selection), [selection]);
+  const selectionEnabled = selectedRowIds !== void 0 || Boolean(onSelectionChange);
+  const effectiveSort = sort === void 0 ? localSort : sort;
+  const visibleKeys = visibleColumnKeys ?? columns.filter((column) => !hiddenColumns.includes(column.key)).map((column) => column.key);
+  const widths = columnWidths ?? localWidths;
+  const pinned = [...new Set(pinnedColumnKeys ?? localPinned)].filter(
+    (key) => columns.some((column) => column.key === key)
+  );
+  const visibleColumns = [
+    ...pinned.flatMap(
+      (key) => columns.filter((column) => column.key === key && visibleKeys.includes(key))
+    ),
+    ...columns.filter((column) => visibleKeys.includes(column.key) && !pinned.includes(column.key))
+  ];
+  const virtual = Boolean(virtualization) && (viewMode ?? localView) === "virtualized";
+  const widthBounds = (column) => {
+    const min = Number.isFinite(column.minWidth) ? Math.max(48, column.minWidth) : 96;
+    const max = Number.isFinite(column.maxWidth) ? Math.max(min, column.maxWidth) : Math.max(min, 640);
+    return { min, max };
+  };
+  const widthFor = (column) => {
+    const { min, max } = widthBounds(column);
+    const requested = widths[column.key] ?? (column.width?.endsWith("px") ? Number.parseFloat(column.width) : 160);
+    return Math.min(max, Math.max(min, Number.isFinite(requested) ? requested : 160));
+  };
+  const resizeColumn = (column, requested) => {
+    if (blocked || !Number.isFinite(requested)) return;
+    const { min, max } = widthBounds(column);
+    const next = { ...widths, [column.key]: Math.min(max, Math.max(min, requested)) };
+    if (columnWidths === void 0) setLocalWidths(next);
+    onColumnWidthsChange?.(next);
+  };
+  const safePageSize = Number.isFinite(pageSize) && pageSize >= 1 ? Math.floor(pageSize) : 10;
+  const count = mode === "server" && rowCount !== void 0 && Number.isFinite(rowCount) ? Math.max(0, Math.floor(rowCount)) : data.length;
+  const pageCount = Math.max(1, Math.ceil(count / safePageSize));
+  const requestedPage = page ?? localPage;
+  const currentPage = Math.min(
+    pageCount,
+    Math.max(1, Number.isFinite(requestedPage) ? Math.floor(requestedPage) : 1)
+  );
+  const correction = useRef(null);
+  useEffect(() => {
+    if (requestedPage === currentPage) {
+      correction.current = null;
+      return;
+    }
+    const key = `${requestedPage}:${currentPage}`;
+    if (correction.current === key) return;
+    correction.current = key;
+    if (page === void 0) setLocalPage(currentPage);
+    onPageChange?.(currentPage);
+  }, [requestedPage, currentPage, page, onPageChange]);
+  const changePage = (next) => {
+    if (blocked) return;
+    if (page === void 0) setLocalPage(next);
+    onPageChange?.(next);
+  };
+  const changeSort = (next) => {
+    if (blocked) return;
+    if (sort === void 0) setLocalSort(next);
+    onSortChange?.(next);
+  };
+  const changeSelection = (next) => {
+    if (blocked) return;
+    if (selectedRowIds === void 0) setLocalSelection(next);
+    onSelectionChange?.(next);
+  };
+  const sortColumn = columns.find(
+    (column) => column.key === effectiveSort?.key && column.sortable !== false
+  );
+  const sortKey = sortColumn?.key;
+  const sortCompare = sortColumn?.compare;
+  const direction = effectiveSort?.direction;
+  const sorted = useMemo(() => {
+    if (mode !== "client" || sortKey === void 0 || direction === void 0) return data;
+    return sortedOrder(
+      data.map((row) => row[sortKey]),
+      direction === "asc" ? 1 : -1,
+      sortCompare
+    ).map((position) => data[position]);
+  }, [data, mode, sortKey, direction, sortCompare]);
+  const pageStart = (currentPage - 1) * safePageSize;
+  const paged = mode === "client" && !virtual;
+  const pageRows = useMemo(
+    () => paged ? sorted.slice(pageStart, pageStart + safePageSize) : sorted,
+    [sorted, paged, pageStart, safePageSize]
+  );
+  const latestGetRowId = useRef(getRowId);
+  latestGetRowId.current = getRowId;
+  const pageIdsOf = useMemo(() => {
+    let ids = null;
+    return () => ids ??= pageRows.map((row) => latestGetRowId.current(row));
+  }, [pageRows]);
+  const { allSelected, someSelected } = useMemo(() => {
+    if (selectionSet.size === 0) return { allSelected: false, someSelected: false };
+    const pageIds = pageIdsOf();
+    let selected = 0;
+    for (const id of pageIds) if (selectionSet.has(id)) selected++;
+    return {
+      allSelected: pageIds.length > 0 && selected === pageIds.length,
+      someSelected: selected > 0
+    };
+  }, [pageIdsOf, selectionSet]);
+  let selectionKey = "__oprt_selection";
+  while (columns.some((column) => column.key === selectionKey)) selectionKey += "_";
+  const tableColumns = visibleColumns.map(
+    ({ compare: _compare, minWidth: _min, maxWidth: _max, ...column }) => column
+  );
+  if (selectionEnabled)
+    tableColumns.push({
+      key: selectionKey,
+      label: "SELECT",
+      render: (_value, row) => {
+        const id = getRowId(row);
+        return /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            "aria-label": `Select row ${id}`,
+            checked: selectionSet.has(id),
+            disabled: blocked,
+            onCheckedChange: (checked) => changeSelection(
+              checked ? [.../* @__PURE__ */ new Set([...selection, id])] : selection.filter((key) => key !== id)
+            )
+          }
+        );
+      }
+    });
+  const sized = virtual || pinned.length > 0 || Object.keys(widths).length > 0;
+  const tableWidths = Object.fromEntries(
+    visibleColumns.map((column) => [column.key, widthFor(column)])
+  );
+  if (selectionEnabled) tableWidths[selectionKey] = 96;
+  const sortableColumns = columns.filter((column) => column.sortable !== false);
+  let unsortedKey = "__oprt_unsorted";
+  while (columns.some((column) => column.key === unsortedKey)) unsortedKey += "_";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: clsx(
+        "flex min-w-0 flex-col gap-2u font-sans text-oprt-base normal-case text-oprt-text",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex flex-wrap items-center gap-x-2u gap-y-1u",
+            "aria-label": `${caption} controls`,
+            role: "group",
+            children: [
+              sortableColumns.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1u", role: "group", "aria-label": "Sort order", children: [
+                /* @__PURE__ */ jsxs(
+                  Select,
+                  {
+                    "aria-label": "SORT BY",
+                    size: "sm",
+                    value: sortColumn ? sortColumn.key : unsortedKey,
+                    disabled: blocked,
+                    onValueChange: (key) => changeSort(
+                      key === unsortedKey ? null : { key, direction: effectiveSort?.direction ?? "asc" }
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(SelectOption, { value: unsortedKey, children: "SOURCE ORDER" }),
+                      sortableColumns.map((column) => /* @__PURE__ */ jsx(SelectOption, { value: column.key, children: column.label }, column.key))
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "tertiary",
+                    size: "sm",
+                    disabled: blocked || !sortColumn,
+                    onClick: () => effectiveSort && changeSort({
+                      ...effectiveSort,
+                      direction: effectiveSort.direction === "asc" ? "desc" : "asc"
+                    }),
+                    children: effectiveSort?.direction === "desc" ? "DESCENDING" : "ASCENDING"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "tertiary",
+                  size: "sm",
+                  disabled: blocked,
+                  "aria-expanded": columnsOpen,
+                  "aria-controls": columnsOpen ? columnsId : void 0,
+                  onClick: () => setColumnsOpen(!columnsOpen),
+                  children: "COLUMNS"
+                }
+              ),
+              virtualization && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "tertiary",
+                  size: "sm",
+                  disabled: blocked,
+                  onClick: () => {
+                    const next = virtual ? "paginated" : "virtualized";
+                    if (viewMode === void 0) setLocalView(next);
+                    onViewModeChange?.(next);
+                  },
+                  children: virtual ? "Use paginated view" : "Use virtualized view"
+                }
+              ),
+              selectionEnabled && /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-1u font-medium tracking-oprt-caps", children: [
+                /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    "aria-label": virtual && mode === "client" ? "Select results" : "Select page",
+                    checked: allSelected ? true : someSelected ? "indeterminate" : false,
+                    disabled: blocked || pageRows.length === 0,
+                    onCheckedChange: (checked) => changeSelection(
+                      checked ? [.../* @__PURE__ */ new Set([...selection, ...pageIdsOf()])] : withoutPage(selection, pageIdsOf())
+                    )
+                  }
+                ),
+                virtual && mode === "client" ? "SELECT RESULTS" : "SELECT PAGE"
+              ] })
+            ]
+          }
+        ),
+        columnsOpen && /* @__PURE__ */ jsxs(
+          "fieldset",
+          {
+            id: columnsId,
+            className: "m-0 flex flex-wrap gap-2u border border-oprt-border p-2u",
+            children: [
+              /* @__PURE__ */ jsx("legend", { className: "px-1u font-medium tracking-oprt-caps", children: "COLUMN SETTINGS" }),
+              columns.map((column) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1u font-medium", children: [
+                /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-1u", children: [
+                  /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      "aria-label": column.label,
+                      checked: visibleKeys.includes(column.key),
+                      disabled: blocked,
+                      onCheckedChange: (checked) => {
+                        const next = checked ? [.../* @__PURE__ */ new Set([...visibleKeys, column.key])] : visibleKeys.filter((key) => key !== column.key);
+                        if (visibleColumnKeys === void 0)
+                          setHiddenColumns(
+                            columns.filter((item) => !next.includes(item.key)).map((item) => item.key)
+                          );
+                        onVisibleColumnsChange?.(next);
+                      }
+                    }
+                  ),
+                  column.label
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-1u", children: [
+                  /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      "aria-label": `Pin to start: ${column.label}`,
+                      checked: pinned.includes(column.key),
+                      disabled: blocked,
+                      onCheckedChange: (checked) => {
+                        const next = checked ? [...pinned, column.key] : pinned.filter((key) => key !== column.key);
+                        if (pinnedColumnKeys === void 0) setLocalPinned(next);
+                        onPinnedColumnsChange?.(next);
+                      }
+                    }
+                  ),
+                  "Pin to start"
+                ] }),
+                /* @__PURE__ */ jsxs("label", { className: "m-0 flex flex-col gap-1u font-medium", children: [
+                  column.label,
+                  " width",
+                  /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1u", children: [
+                    /* @__PURE__ */ jsx(
+                      ColumnWidthInput,
+                      {
+                        label: `${column.label} width`,
+                        min: widthBounds(column).min,
+                        max: widthBounds(column).max,
+                        value: widthFor(column),
+                        disabled: blocked,
+                        onCommit: (next) => resizeColumn(column, next)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "font-mono text-oprt-text-dim", children: "px" })
+                  ] })
+                ] })
+              ] }, column.key))
+            ]
+          }
+        ),
+        visibleColumns.length === 0 ? /* @__PURE__ */ jsx("p", { className: "m-0 border border-oprt-border p-3u text-oprt-text-dim", children: "Choose a column to display results." }) : /* @__PURE__ */ jsx(
+          DataTable,
+          {
+            columns: tableColumns,
+            data: pageRows,
+            sortDescriptor: sortColumn ? effectiveSort : null,
+            caption,
+            dense,
+            emptyMessage,
+            "aria-busy": loading,
+            getRowId,
+            totalRowCount: count,
+            rowIndexOffset: mode === "client" && virtual ? 0 : (currentPage - 1) * safePageSize,
+            pinnedColumnKeys: pinned,
+            ...sized ? { columnWidths: tableWidths } : {},
+            ...virtual && virtualization ? { virtualization } : {},
+            ...onRowClick && !blocked ? {
+              onRowClick: (row) => {
+                onRowClick(row, data.indexOf(row));
+              }
+            } : {}
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { role: "status", className: loading ? "m-0 text-oprt-text-dim" : "sr-only", children: loading ? "Loading results." : "" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2u", children: [
+          /* @__PURE__ */ jsxs("p", { className: "m-0 font-mono tabular-nums text-oprt-text-dim", children: [
+            count,
+            " ",
+            count === 1 ? "ROW" : "ROWS",
+            selectionEnabled ? ` \xB7 ${selection.length} SELECTED` : ""
+          ] }),
+          (!virtual || mode === "server") && /* @__PURE__ */ jsx(
+            PageControls,
+            {
+              page: currentPage,
+              pageCount,
+              disabled: blocked,
+              onPageChange: changePage
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+DataGrid.displayName = "DataGrid";
+export {
+  DataGrid
+};

package/dist/DataGrid/DataGrid.manifest.js

@@ -0,0 +1,135 @@
+// src/DataGrid/DataGrid.manifest.ts
+var DataGridManifest = {
+  DataGrid: {
+    description: "Native table with stable-ID selection, sorting, controlled column widths and pinning, saved-view state, pagination, and optional virtualization.",
+    props: {
+      columns: {
+        type: "array",
+        required: true,
+        description: "DataTableColumn descriptors plus render(value, originalRow) for display and compare(a, b) for raw-value sorting. compare must be pure; a new compare function sorts again, so define columns outside render or memoize them. Columns sort unless sortable is false. Keys must be unique.",
+        items: {
+          key: "string (required, unique)",
+          label: "string (required)",
+          as: "text | number | code | timestamp | badge",
+          highlight: "boolean (default: false)",
+          width: "string (CSS width; a px value seeds the column width)",
+          align: "left | right",
+          sortable: "boolean",
+          render: "(value, row) => ReactNode",
+          compare: "(a, b) => number",
+          minWidth: "number (CSS pixels; default 96; minimum 48)",
+          maxWidth: "number (CSS pixels; default 640)"
+        }
+      },
+      data: {
+        type: "array",
+        required: true,
+        description: "Client mode: complete filtered row set. Server mode: current page only; order and row count are preserved."
+      },
+      getRowId: {
+        type: "function",
+        required: true,
+        description: "(originalRow) => string. Return a unique, stable ID across filtering, sorting, and pagination; do not use an array index. Keep it pure: IDs are read again only when data changes, not when only the function does."
+      },
+      caption: {
+        type: "string",
+        default: "Data grid",
+        description: "Accessible native table caption and controls group name."
+      },
+      selectedRowIds: {
+        type: "array",
+        description: "Controlled IDs. Supplying this or onSelectionChange enables selection. IDs outside the displayed data are preserved."
+      },
+      onSelectionChange: {
+        type: "function",
+        description: "(ids: string[]) => void. Select page changes only current-page IDs. Without selectedRowIds, selection is stored internally."
+      },
+      sort: {
+        type: "node",
+        description: "Controlled { key: string, direction: 'asc' | 'desc' } or null for source order. Omit for internal sorting state. Uses raw values before custom rendering and announces the active direction with aria-sort on the corresponding table header."
+      },
+      onSortChange: {
+        type: "function",
+        description: "(sort: DataGridSort | null) => void. Server mode only reports the requested sort; the caller supplies sorted rows."
+      },
+      page: {
+        type: "number",
+        default: 1,
+        description: "One-based controlled page. Omit for internal pagination state. Out-of-range values are clamped and reported once through onPageChange."
+      },
+      onPageChange: {
+        type: "function",
+        description: "(page: number) => void. A supplied page remains controlled until its owner updates it."
+      },
+      pageSize: {
+        type: "number",
+        default: 10,
+        description: "Rows per client page and denominator for server page counts. Invalid or less-than-one values use 10; fractional values round down."
+      },
+      mode: { type: "enum", values: ["client", "server"], default: "client" },
+      rowCount: {
+        type: "number",
+        description: "Total filtered row count in server mode. Defaults to data.length; provide the total to enable navigation beyond the supplied page."
+      },
+      visibleColumnKeys: {
+        type: "array",
+        description: "Controlled displayed column keys. Omit for internal visibility state; all columns are visible initially. An empty list shows a recovery message."
+      },
+      onVisibleColumnsChange: {
+        type: "function",
+        description: "(keys: string[]) => void. Receives visibility changes from the COLUMNS controls."
+      },
+      columnWidths: {
+        type: "node",
+        description: "Controlled Record<columnKey, CSS pixel width>. Omit for internal widths. Values are clamped to each column's minWidth/maxWidth; default width is 160 or a pixel width from the descriptor. Stored keys outside the current columns are preserved in resize callbacks."
+      },
+      onColumnWidthsChange: {
+        type: "function",
+        description: "(widths: DataGridColumnWidths) => void. Columns controls support direct numeric entry, Arrow keys (8 pixels), and Home/End (bounds)."
+      },
+      pinnedColumnKeys: {
+        type: "array",
+        description: "Controlled leading-edge pinned keys in display order. Omit for internal state. Hidden pinned columns retain their preference; unknown keys are ignored for display."
+      },
+      onPinnedColumnsChange: {
+        type: "function",
+        description: "(keys: string[]) => void. Called by keyboard-accessible Pin checkboxes in Columns."
+      },
+      virtualization: {
+        type: "node",
+        description: "Opt-in { height: number, rowHeight?: number, estimateRowHeight?: number, overscan?: number }, CSS pixels. Fixed rowHeight clips overlong cell contents; omit rowHeight to measure wrapped rows with ResizeObserver, starting at estimateRowHeight (default 40). Minimum row height 24; default overscan 3, minimum 1. Client mode windows all filtered rows; server mode windows only the supplied page."
+      },
+      viewMode: {
+        type: "enum",
+        values: ["paginated", "virtualized"],
+        description: "Controlled display mode. Virtualization must be supplied for virtualized mode. Defaults to virtualized with configuration, paginated without it. The built-in toggle always offers a paginated native-table alternative."
+      },
+      onViewModeChange: {
+        type: "function",
+        description: "(mode: DataGridViewMode) => void. Controlled owners must apply the requested mode for the fallback toggle to update the table."
+      },
+      loading: {
+        type: "boolean",
+        default: false,
+        description: "Marks the table busy, announces loading, and disables grid-owned controls and row activation while retaining supplied data."
+      },
+      disabled: {
+        type: "boolean",
+        default: false,
+        description: "Disables grid-owned actions and row activation. Custom interactive cell content remains the caller's responsibility."
+      },
+      dense: { type: "boolean", default: false },
+      emptyMessage: { type: "string", default: "No results." },
+      onRowClick: {
+        type: "function",
+        description: "(originalRow, indexInSuppliedData) => void. Uses the existing DataTable's native first-cell button; independent cell controls do not activate the row."
+      }
+    },
+    composable_with: ["Card", "ComboBox"],
+    never_inside: ["DataTable", "DataGrid"],
+    example: '<DataGrid\n  caption="Station telemetry"\n  columns={[{ key: "name", label: "STATION" }, { key: "latency", label: "LATENCY / MS", as: "number" }]}\n  data={rows}\n  getRowId={(row) => String(row.id)}\n  selectedRowIds={selected}\n  onSelectionChange={setSelected}\n  pageSize={10}\n/>'
+  }
+};
+export {
+  DataGridManifest
+};

package/dist/DataGrid/PageControls.js

@@ -0,0 +1,41 @@
+// src/DataGrid/PageControls.tsx
+import { Button } from "../Button/Button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PageControls({
+  page,
+  pageCount,
+  disabled,
+  onPageChange
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1u", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "tertiary",
+        size: "sm",
+        disabled: disabled || page <= 1,
+        onClick: () => onPageChange(page - 1),
+        children: "PREVIOUS PAGE"
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "font-mono tabular-nums", "aria-live": "polite", children: [
+      "PAGE ",
+      page,
+      " OF ",
+      pageCount
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "tertiary",
+        size: "sm",
+        disabled: disabled || page >= pageCount,
+        onClick: () => onPageChange(page + 1),
+        children: "NEXT PAGE"
+      }
+    )
+  ] });
+}
+export {
+  PageControls
+};

package/dist/DataGrid/index.js

@@ -0,0 +1,9 @@
+// src/DataGrid/index.ts
+import {
+  DataGrid
+} from "./DataGrid.js";
+import { DataGridManifest } from "./DataGrid.manifest.js";
+export {
+  DataGrid,
+  DataGridManifest
+};