@instruments/materia-ui 0.1.0

package/dist/compositions/data-grid-pagination.js

@@ -0,0 +1 @@
+export { DataGridPagination } from "./data-grid-pagination/data-grid-pagination-root.js";

package/dist/compositions/data-grid-table/data-grid-table-body.d.ts

@@ -0,0 +1,54 @@
+import type { ComponentSize } from "@instruments/materia-ui/tokens/size";
+import type { DataGridCell as Cell, DataGridColumn as Column, DataGridRow as Row } from "@instruments/materia-ui/utils/data-grid-table";
+import type * as React from "react";
+import type { CSSProperties, ReactNode } from "react";
+import "../data-grid/data-grid-types.js";
+/** Decorative aria-hidden `<tbody>` that adds vertical spacing between striped/borderless rows. */
+declare const DataGridTableRowSpacer: () => React.JSX.Element;
+/** `<tbody>` wrapper; applies row-rounding classes from DataGrid context. */
+declare const DataGridTableBody: ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;
+/** Placeholder row shown in "skeleton" loading mode. */
+declare const DataGridTableBodyRowSkeleton: ({ children, }: {
+    children: ReactNode;
+}) => React.JSX.Element;
+/** Skeleton placeholder cell, sized to match the configured row height. */
+declare const DataGridTableBodyRowSkeletonCell: <TData extends object>({ children, column, }: {
+    children: ReactNode;
+    column: Column<TData>;
+}) => React.JSX.Element;
+/** Data `<tr>`; fires `props.onRowClick` and reflects selection via `data-state="selected"`. */
+declare const DataGridTableBodyRow: <TData extends object>({ children, row, dndRef, dndStyle, dataIndex, }: {
+    children: ReactNode;
+    row: Row<TData>;
+    dndRef?: React.Ref<HTMLTableRowElement>;
+    dndStyle?: CSSProperties;
+    dataIndex?: number;
+}) => React.JSX.Element;
+/** Full-width expansion row that renders the column meta `expandedContent` for its row. */
+declare const DataGridTableBodyRowExpandded: <TData extends object>({ row, }: {
+    row: Row<TData>;
+}) => React.JSX.Element;
+/** Data `<td>`; applies pinning styles and drops its bottom border while the row is expanded. */
+declare const DataGridTableBodyRowCell: <TData extends object>({ children, cell, dndRef, dndStyle, }: {
+    children: ReactNode;
+    cell: Cell<TData>;
+    dndRef?: React.Ref<HTMLTableCellElement>;
+    dndStyle?: CSSProperties;
+}) => React.JSX.Element;
+/** Empty-state row; shows `props.emptyMessage` or "No data available". */
+declare const DataGridTableEmpty: () => React.JSX.Element;
+/** Absolutely-centered loading overlay; shows `props.loadingMessage` or "Loading...". */
+declare const DataGridTableLoader: () => React.JSX.Element;
+/** Per-row selection checkbox with an active-row accent bar; supports the indeterminate state. */
+declare const DataGridTableRowSelect: <TData extends object>({ row, size, }: {
+    row: Row<TData>;
+    size?: ComponentSize;
+}) => React.JSX.Element;
+/** Header select-all checkbox for the current page; disabled while loading or when empty. */
+declare const DataGridTableRowSelectAll: ({ size }: {
+    size?: ComponentSize;
+}) => React.JSX.Element;
+export { flexRender } from "@tanstack/react-table";
+export { DataGridTableBody, DataGridTableBodyRow, DataGridTableBodyRowCell, DataGridTableBodyRowExpandded, DataGridTableBodyRowSkeleton, DataGridTableBodyRowSkeletonCell, DataGridTableEmpty, DataGridTableLoader, DataGridTableRowSelect, DataGridTableRowSelectAll, DataGridTableRowSpacer, };

package/dist/compositions/data-grid-table/data-grid-table-body.js

@@ -0,0 +1,140 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDataGrid } from "@instruments/materia-ui/compositions/data-grid";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import "../data-grid/data-grid-types.js";
+import { Flex } from "../../components/flex.js";
+import { Spinner } from "../../components/spinner/spinner-root.js";
+import { bodyCellSpacingVariants, getPinningStyles, } from "../data-grid-table/data-grid-table-styles.js";
+import { DataGridCheckbox } from "../data-grid/data-grid-checkbox.js";
+const getPinningSide = (position) => {
+    const sides = { end: "right", start: "left" };
+    return position === false ? undefined : sides[position];
+};
+const getPinnedEdgePosition = (isLastLeftPinned, isFirstRightPinned) => {
+    if (isLastLeftPinned) {
+        return "left";
+    }
+    return isFirstRightPinned ? "right" : undefined;
+};
+/**
+ * Shared className builder for body cells (skeleton and real). Destructures
+ * `tableLayout` once so the conditional chain stays free of optional chaining.
+ */
+const buildBodyCellClassName = ({ column, edgeColumnCount, isRowExpanded, props, }) => {
+    const { cellBorder, columnsPinnable, columnsResizable, dense, rowBorder, striped, } = props.tableLayout ?? {};
+    const bodyCellSpacing = bodyCellSpacingVariants({
+        size: dense === true ? "dense" : "default",
+    });
+    const columnIndex = column.getIndex();
+    const isEdgeColumn = columnIndex === 0 || columnIndex === edgeColumnCount - 1;
+    return cn("align-middle", bodyCellSpacing, striped !== true &&
+        rowBorder === true &&
+        !isRowExpanded &&
+        "border-border border-b-hairline", cellBorder === true && "border-e", columnsResizable === true && column.getCanResize() && "truncate", column.columnDef.meta?.cellClassName, columnsPinnable === true &&
+        column.getCanPin() &&
+        "data-pinned:bg-card [&[data-pinned][data-last-col]]:border-border [&[data-pinned=left][data-last-col=left]]:border-e-hairline! [&[data-pinned=right][data-last-col=right]]:border-s-hairline!", isEdgeColumn ? props.tableClassNames?.edgeCell : "");
+};
+/** Decorative aria-hidden `<tbody>` that adds vertical spacing between striped/borderless rows. */
+const DataGridTableRowSpacer = () => (_jsx("tbody", { "aria-hidden": "true", className: "h-2" }));
+/** `<tbody>` wrapper; applies row-rounding classes from DataGrid context. */
+const DataGridTableBody = ({ children }) => {
+    const { props } = useDataGrid();
+    return (_jsx("tbody", { className: cn("[&_tr:last-child_td]:border-b-0", props.tableLayout?.rowRounded === true &&
+            "[&_td:first-child]:rounded-s-lg [&_td:last-child]:rounded-e-lg", props.tableClassNames?.body), children: children }));
+};
+/** Placeholder row shown in "skeleton" loading mode. */
+const DataGridTableBodyRowSkeleton = ({ children, }) => {
+    const { table, props } = useDataGrid();
+    const rowHeight = props.tableLayout?.rowHeight ?? 72;
+    return (_jsx("tr", { className: cn("hover:bg-muted/10 data-[state=selected]:bg-muted/15", props.onRowClick !== undefined && "cursor-pointer", props.tableLayout?.cellBorder === true && "*:last:border-e-0", props.tableLayout?.striped === true &&
+            "odd:bg-muted/5 hover:bg-muted/10", table.options.enableRowSelection === true && "*:first:relative", props.tableClassNames?.bodyRow), style: { height: `${rowHeight}px` }, children: children }));
+};
+/** Skeleton placeholder cell, sized to match the configured row height. */
+const DataGridTableBodyRowSkeletonCell = ({ children, column, }) => {
+    const { props, table } = useDataGrid();
+    const rowHeight = props.tableLayout?.rowHeight ?? 72;
+    // Cell content height should account for padding (default: py-3 = 24px total)
+    const cellContentHeight = rowHeight - 24;
+    return (_jsx("td", { className: buildBodyCellClassName({
+            column,
+            edgeColumnCount: table.getVisibleFlatColumns().length,
+            isRowExpanded: false,
+            props,
+        }), style: { minHeight: `${rowHeight}px` }, children: _jsx("div", { style: { minHeight: `${cellContentHeight}px` }, children: children }) }));
+};
+/** Data `<tr>`; fires `props.onRowClick` and reflects selection via `data-state="selected"`. */
+const DataGridTableBodyRow = ({ children, row, dndRef, dndStyle, dataIndex, }) => {
+    const { props, table } = useDataGrid();
+    const rowHeight = props.tableLayout?.rowHeight ?? 72;
+    return (_jsx("tr", { className: cn("group/row hover:bg-muted/10 data-[state=selected]:bg-muted/15", props.onRowClick !== undefined && "cursor-pointer", props.tableLayout?.cellBorder === true && "*:last:border-e-0", props.tableLayout?.striped === true &&
+            "odd:bg-muted/5 hover:bg-muted/10", table.options.enableRowSelection === true && "*:first:relative", props.tableClassNames?.bodyRow), "data-index": dataIndex, "data-state": table.options.enableRowSelection === true && row.getIsSelected()
+            ? "selected"
+            : undefined, onClick: () => props.onRowClick?.(row.original), ref: dndRef, style: { height: `${rowHeight}px`, ...dndStyle }, children: children }));
+};
+/** Full-width expansion row that renders the column meta `expandedContent` for its row. */
+const DataGridTableBodyRowExpandded = ({ row, }) => {
+    const { table } = useDataGrid();
+    return (_jsx("tr", { className: "bg-gray-100", children: _jsx("td", { className: "p-0", colSpan: row.getVisibleCells().length, children: table
+                .getAllColumns()
+                .find((column) => column.columnDef.meta?.expandedContent)
+                ?.columnDef.meta?.expandedContent?.(row.original) }) }));
+};
+/** Data `<td>`; applies pinning styles and drops its bottom border while the row is expanded. */
+const DataGridTableBodyRowCell = ({ children, cell, dndRef, dndStyle, }) => {
+    const { props } = useDataGrid();
+    const { column, row } = cell;
+    const isPinned = column.getIsPinned();
+    const isLastLeftPinned = isPinned === "start" && column.getIsLastColumn("start");
+    const isFirstRightPinned = isPinned === "end" && column.getIsFirstColumn("end");
+    // Hide bottom border when row is expanded (seamless transition to expanded content)
+    const isRowExpanded = row.getIsExpanded();
+    return (_jsx("td", { ref: dndRef, ...(props.tableLayout?.columnsDraggable === true && isPinned === false
+            ? { cell }
+            : {}), className: buildBodyCellClassName({
+            column,
+            edgeColumnCount: row.getVisibleCells().length,
+            isRowExpanded,
+            props,
+        }), "data-last-col": getPinnedEdgePosition(isLastLeftPinned, isFirstRightPinned), "data-pinned": getPinningSide(isPinned), style: {
+            ...(props.tableLayout?.columnsPinnable === true && column.getCanPin()
+                ? getPinningStyles(column)
+                : undefined),
+            ...dndStyle,
+        }, children: children }, cell.id));
+};
+/** Empty-state row; shows `props.emptyMessage` or "No data available". */
+const DataGridTableEmpty = () => {
+    const { table, props } = useDataGrid();
+    const totalColumns = table.getAllColumns().length;
+    return (_jsx("tr", { children: _jsx("td", { className: "text-muted-foreground py-6 text-center", colSpan: totalColumns, children: props.emptyMessage !== undefined && props.emptyMessage !== ""
+                ? props.emptyMessage
+                : "No data available" }) }));
+};
+/** Absolutely-centered loading overlay; shows `props.loadingMessage` or "Loading...". */
+const DataGridTableLoader = () => {
+    const { props } = useDataGrid();
+    return (_jsx("div", { className: "absolute top-1/2 left-1/2 -translate-1/2", children: _jsxs(Flex, { align: "center", className: "bg-card text-muted-foreground text-paragraph-sm rounded-md border px-4 py-2 font-medium shadow-xs", gap: "xs", children: [_jsx(Spinner, { className: "text-muted-foreground -ml-1", size: "base" }), props.loadingMessage !== undefined && props.loadingMessage !== ""
+                    ? props.loadingMessage
+                    : "Loading..."] }) }));
+};
+/** Per-row selection checkbox with an active-row accent bar; supports the indeterminate state. */
+const DataGridTableRowSelect = ({ row, size, }) => {
+    const isSmOrLarger = size ? size !== "2xs" && size !== "xs" : false;
+    const dataGridSize = isSmOrLarger ? "sm" : "xs";
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn("bg-primary absolute inset-y-0 inset-s-0 hidden w-0.5", row.getIsSelected() && "block") }), _jsx(DataGridCheckbox, { "aria-label": "Select row", checked: row.getIsSelected(), indeterminate: row.getIsSomeSelected(), onCheckedChange: (value) => {
+                    row.toggleSelected(value);
+                }, size: dataGridSize })] }));
+};
+/** Header select-all checkbox for the current page; disabled while loading or when empty. */
+const DataGridTableRowSelectAll = ({ size }) => {
+    const { table, recordCount, loading } = useDataGrid();
+    const isSmOrLarger = size ? size !== "2xs" && size !== "xs" : false;
+    const dataGridSize = isSmOrLarger ? "sm" : "xs";
+    const isAllSelected = table.getIsAllPageRowsSelected();
+    const isSomeSelected = table.getIsSomePageRowsSelected();
+    return (_jsx(DataGridCheckbox, { "aria-label": "Select all", checked: isAllSelected, disabled: loading === true || recordCount === 0, indeterminate: !isAllSelected && isSomeSelected, onCheckedChange: (value) => {
+            table.toggleAllPageRowsSelected(value);
+        }, size: dataGridSize }));
+};
+export { flexRender } from "@tanstack/react-table";
+export { DataGridTableBody, DataGridTableBodyRow, DataGridTableBodyRowCell, DataGridTableBodyRowExpandded, DataGridTableBodyRowSkeleton, DataGridTableBodyRowSkeletonCell, DataGridTableEmpty, DataGridTableLoader, DataGridTableRowSelect, DataGridTableRowSelectAll, DataGridTableRowSpacer, };

package/dist/compositions/data-grid-table/data-grid-table-header.d.ts

@@ -0,0 +1,30 @@
+import type { DataGridHeader as Header, DataGridHeaderGroup as HeaderGroup } from "@instruments/materia-ui/utils/data-grid-table";
+import type * as React from "react";
+import type { CSSProperties, ReactNode } from "react";
+import "../data-grid/data-grid-types.js";
+/** Root `<table>` element; reads DataGrid context for width mode and column dragging. */
+declare const DataGridTableBase: ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;
+/** `<thead>` wrapper; applies sticky-header classes from DataGrid context. */
+declare const DataGridTableHead: ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;
+/** Header `<tr>` for a single header group. */
+declare const DataGridTableHeadRow: <TData extends object>({ children, headerGroup, }: {
+    children: ReactNode;
+    headerGroup: HeaderGroup<TData>;
+}) => React.JSX.Element;
+/** Header `<th>`; resolves column pinning position and sizing from context. */
+declare const DataGridTableHeadRowCell: <TData extends object>({ children, header, dndRef, dndStyle, }: {
+    children: ReactNode;
+    header: Header<TData>;
+    dndRef?: React.Ref<HTMLTableCellElement>;
+    dndStyle?: CSSProperties;
+}) => React.JSX.Element;
+/** Column-resize handle; drag to resize, double-click to reset the column width. */
+declare const DataGridTableHeadRowCellResize: <TData extends object>({ header, }: {
+    header: Header<TData>;
+}) => React.JSX.Element;
+export { flexRender } from "@tanstack/react-table";
+export { DataGridTableBase, DataGridTableHead, DataGridTableHeadRow, DataGridTableHeadRowCell, DataGridTableHeadRowCellResize, };

package/dist/compositions/data-grid-table/data-grid-table-header.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDataGrid } from "@instruments/materia-ui/compositions/data-grid";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import "../data-grid/data-grid-types.js";
+import { getPinningStyles, headerCellSpacingVariants, } from "../data-grid-table/data-grid-table-styles.js";
+const getPinningSide = (position) => {
+    const sides = { end: "right", start: "left" };
+    return position === false ? undefined : sides[position];
+};
+const getPinnedEdgePosition = (isLastLeftPinned, isFirstRightPinned) => {
+    if (isLastLeftPinned) {
+        return "left";
+    }
+    return isFirstRightPinned ? "right" : undefined;
+};
+const getColumnPinState = (column) => {
+    const isPinned = column.getIsPinned();
+    return {
+        isFirstRightPinned: isPinned === "end" && column.getIsFirstColumn("end"),
+        isLastLeftPinned: isPinned === "start" && column.getIsLastColumn("start"),
+        isPinned,
+    };
+};
+const getHeadCellClassName = (header, props, headerCellSpacing) => {
+    const { column, headerGroup } = header;
+    if (!headerGroup) {
+        throw new Error("DataGrid table headers must belong to a header group.");
+    }
+    return cn("text-muted-foreground text-paragraph-sm relative text-left align-middle font-normal rtl:text-right", headerCellSpacing, props.tableLayout?.cellBorder === true && "border-e", props.tableLayout?.columnsResizable === true &&
+        column.getCanResize() &&
+        "truncate", props.tableLayout?.columnsPinnable === true &&
+        column.getCanPin() &&
+        "data-pinned:bg-card [&[data-pinned][data-last-col]]:border-border [&[data-pinned=left][data-last-col=left]]:border-e-hairline! [&[data-pinned=right][data-last-col=right]]:border-s-hairline! [&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0", header.column.columnDef.meta?.headerClassName, column.getIndex() === 0 ||
+        column.getIndex() === headerGroup.headers.length - 1
+        ? props.tableClassNames?.edgeCell
+        : "");
+};
+const getHeadCellStyle = (header, props, dndStyle) => {
+    const { column } = header;
+    return {
+        ...(props.tableLayout?.width === "fixed" && {
+            width: `${header.getSize()}px`,
+        }),
+        ...(props.tableLayout?.columnsPinnable === true && column.getCanPin()
+            ? getPinningStyles(column)
+            : undefined),
+        ...dndStyle,
+    };
+};
+/** Root `<table>` element; reads DataGrid context for width mode and column dragging. */
+const DataGridTableBase = ({ children }) => {
+    const { props } = useDataGrid();
+    return (_jsx("table", { className: cn("text-foreground text-paragraph-sm w-full caption-bottom text-left align-middle font-normal rtl:text-right", props.tableLayout?.columnsDraggable !== true &&
+            "border-separate border-spacing-0", props.tableLayout?.width === "fixed" ? "table-fixed" : "table-auto", props.tableClassNames?.base), "data-component": "data-grid-table", "data-slot": "data-grid-table", children: children }));
+};
+/** `<thead>` wrapper; applies sticky-header classes from DataGrid context. */
+const DataGridTableHead = ({ children }) => {
+    const { props } = useDataGrid();
+    return (_jsx("thead", { className: cn(props.tableClassNames?.header, props.tableLayout?.headerSticky === true &&
+            props.tableClassNames?.headerSticky), children: children }));
+};
+/** Header `<tr>` for a single header group. */
+const DataGridTableHeadRow = ({ children, headerGroup, }) => {
+    const { props } = useDataGrid();
+    return (_jsx("tr", { className: cn(props.tableLayout?.headerBackground === false
+            ? "bg-transparent"
+            : "bg-card", props.tableLayout?.headerBorder === true &&
+            "[&>th]:border-border [&>th]:border-b-hairline", props.tableLayout?.cellBorder === true && "*:last:border-e-0", props.tableClassNames?.headerRow), children: children }, headerGroup.id));
+};
+/** Header `<th>`; resolves column pinning position and sizing from context. */
+const DataGridTableHeadRowCell = ({ children, header, dndRef, dndStyle, }) => {
+    const { props } = useDataGrid();
+    const { isPinned, isLastLeftPinned, isFirstRightPinned } = getColumnPinState(header.column);
+    const headerCellSpacing = headerCellSpacingVariants({
+        size: props.tableLayout?.dense === true ? "dense" : "default",
+    });
+    return (_jsx("th", { className: getHeadCellClassName(header, props, headerCellSpacing), "data-last-col": getPinnedEdgePosition(isLastLeftPinned, isFirstRightPinned), "data-pinned": getPinningSide(isPinned), ref: dndRef, style: getHeadCellStyle(header, props, dndStyle), children: children }, header.id));
+};
+/** Column-resize handle; drag to resize, double-click to reset the column width. */
+const DataGridTableHeadRowCellResize = ({ header, }) => {
+    const { column } = header;
+    return (_jsx("div", { className: "user-select-none absolute -inset-e-2 top-0 z-10 flex h-full w-4 cursor-col-resize touch-none justify-center before:absolute before:inset-y-0 before:w-px before:-translate-x-px before:bg-border",
+        onDoubleClick: () => {
+            column.resetSize();
+        },
+        onMouseDown: header.getResizeHandler(),
+        onTouchStart: header.getResizeHandler() }));
+};
+export { flexRender } from "@tanstack/react-table";
+export { DataGridTableBase, DataGridTableHead, DataGridTableHeadRow, DataGridTableHeadRowCell, DataGridTableHeadRowCellResize, };

package/dist/compositions/data-grid-table/data-grid-table-root.d.ts

@@ -0,0 +1,17 @@
+import type React from "react";
+/**
+ * Renders the virtualised header and body rows for a DataGrid.
+ *
+ * Consumes the surrounding DataGrid context, so it must live inside a DataGrid
+ * provider and shell. Rows are windowed with `@tanstack/react-virtual`.
+ *
+ * @bestPractice Render inside `DataGrid` (and its shell) - it calls `useDataGrid()` for the table and layout and throws outside the provider; it takes no `table` prop of its own.
+ * @bestPractice Sorting and filtering come from the column definitions: a plain-text `header` sorts on click, and `meta: { filter: true }` adds a values menu. Build the table with `useDataGridTable` and pair it with `PageToolbarTableFilters` / `PageToolbarTableSort` above the grid; all of them share one state.
+ * @bestPractice Rows are virtualised, so give each a stable `rowHeight` via `tableLayout` (expanded rows use `expandedRowHeight`) - variable, unmeasured heights make the window jump.
+ * @bestPractice Use `DataGridTable` for a data-driven grid; for a small static table with hand-authored `<TableRow>`s reach for `Table` instead - no virtualisation or TanStack instance needed.
+ * @category data
+ */
+declare const DataGridTable: () => React.JSX.Element;
+export { DataGridTableBody, DataGridTableBodyRow, DataGridTableBodyRowCell, DataGridTableBodyRowExpandded, DataGridTableBodyRowSkeleton, DataGridTableBodyRowSkeletonCell, DataGridTableEmpty, DataGridTableLoader, DataGridTableRowSelect, DataGridTableRowSelectAll, DataGridTableRowSpacer, } from "../data-grid-table/data-grid-table-body.js";
+export { DataGridTableBase, DataGridTableHead, DataGridTableHeadRow, DataGridTableHeadRowCell, DataGridTableHeadRowCellResize, } from "../data-grid-table/data-grid-table-header.js";
+export { DataGridTable };

package/dist/compositions/data-grid-table/data-grid-table-root.js

@@ -0,0 +1,108 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DataGridFilterableHeader, useDataGrid, } from "@instruments/materia-ui/compositions/data-grid";
+import { Fragment } from "react";
+import { Center } from "../../components/center.js";
+import { Spinner } from "../../components/spinner/spinner-root.js";
+import { DataGridTableBody, DataGridTableBodyRow, DataGridTableBodyRowCell, DataGridTableBodyRowExpandded, DataGridTableBodyRowSkeleton, DataGridTableBodyRowSkeletonCell, DataGridTableEmpty, DataGridTableRowSpacer, flexRender, } from "../data-grid-table/data-grid-table-body.js";
+import { DataGridTableBase, DataGridTableHead, DataGridTableHeadRow, DataGridTableHeadRowCell, DataGridTableHeadRowCellResize, } from "../data-grid-table/data-grid-table-header.js";
+import { getColumnFilterMeta, getColumnFilterOptions, getColumnHeaderText, } from "../data-grid/data-grid-sort-filter.js";
+import { useDataGridRowVirtualizer } from "./use-data-grid-row-virtualizer.js";
+const buildDataGridSkeletonRowKeys = (count) => Array.from({ length: count }, (_, index) => `data-grid-skeleton-row-${index}`);
+/** Placeholder skeleton rows shown while data loads in "skeleton" mode. */
+const DataGridSkeletonRows = ({ pageSize, table, }) => {
+    const skeletonRowKeys = buildDataGridSkeletonRowKeys(pageSize);
+    return skeletonRowKeys.map((rowKey) => (_jsx(DataGridTableBodyRowSkeleton, { children: table.getVisibleFlatColumns().map((column) => (_jsx(DataGridTableBodyRowSkeletonCell, { column: column, children: column.columnDef.meta?.skeleton }, column.id))) }, rowKey)));
+};
+/** Virtualised data rows with top/bottom spacer rows. */
+const DataGridDataRows = ({ measureRow, paddingBottom, paddingTop, renderedRowIndexes, rows, table, }) => (_jsxs(_Fragment, { children: [paddingTop > 0 && (_jsx("tr", { children: _jsx("td", { "aria-label": "Spacer", colSpan: table.getVisibleFlatColumns().length, style: { height: `${paddingTop}px` } }) })), renderedRowIndexes.map((rowIndex) => {
+            const row = rows[rowIndex];
+            if (row === undefined) {
+                return null;
+            }
+            return (_jsxs(Fragment, { children: [_jsx(DataGridTableBodyRow, { dataIndex: rowIndex, ...(measureRow === undefined ? {} : { dndRef: measureRow }), row: row, children: row.getVisibleCells().map((cell) => (_jsx(DataGridTableBodyRowCell, { cell: cell, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }), row.getIsExpanded() && _jsx(DataGridTableBodyRowExpandded, { row: row })] }, row.id));
+        }), paddingBottom > 0 && (_jsx("tr", { children: _jsx("td", { "aria-label": "Spacer", colSpan: table.getVisibleFlatColumns().length, style: { height: `${paddingBottom}px` } }) }))] }));
+/**
+ * Renders the table body content based on the current loading and data state:
+ * skeleton rows, a spinner, virtualised data rows, or the empty state.
+ */
+const DataGridTableBodyContent = ({ context, measureRow, paddingBottom, paddingTop, pageSize, renderedRowIndexes, rows, }) => {
+    const { table, loading, props } = context;
+    const isSkeletonLoading = loading === true && props.loadingMode === "skeleton" && pageSize > 0;
+    const isSpinnerLoading = loading === true && props.loadingMode === "spinner";
+    const hasRows = table.getRowModel().rows.length > 0;
+    if (isSkeletonLoading) {
+        // Show skeleton loading immediately
+        return _jsx(DataGridSkeletonRows, { pageSize: pageSize, table: table });
+    }
+    if (isSpinnerLoading) {
+        // Show spinner loading immediately
+        return (_jsx("tr", { children: _jsx("td", { "aria-label": "Loading", className: "p-8", colSpan: table.getVisibleFlatColumns().length, children: _jsxs(Center, { className: "gap-3", children: [_jsx(Spinner, { className: "text-muted-foreground -ml-1", size: "base" }), props.loadingMessage !== undefined && props.loadingMessage !== ""
+                            ? props.loadingMessage
+                            : "Loading..."] }) }) }));
+    }
+    if (hasRows) {
+        return (_jsx(DataGridDataRows, { measureRow: measureRow, paddingBottom: paddingBottom, paddingTop: paddingTop, renderedRowIndexes: renderedRowIndexes, rows: rows, table: table }));
+    }
+    // No data and not loading
+    return _jsx(DataGridTableEmpty, {});
+};
+/**
+ * A header's label. A plain-text header sorts and filters on its own when
+ * its column can: a click sorts, and a column marked `meta.filter` opens its
+ * values. A header given as a function renders as written.
+ */
+const DataGridTableHeadLabel = ({ header, table, }) => {
+    const { column } = header;
+    const label = getColumnHeaderText(column);
+    const filter = getColumnFilterMeta(column);
+    if (label === undefined || !(column.getCanSort() || filter)) {
+        return _jsx(_Fragment, { children: flexRender(column.columnDef.header, header.getContext()) });
+    }
+    return (_jsx(DataGridFilterableHeader, { column: column, ...(filter === undefined
+            ? {}
+            : { options: getColumnFilterOptions(column, table) }), ...(filter?.search === undefined ? {} : { showSearch: filter.search }), children: label }));
+};
+/** Renders the table header groups, including optional column-resize handles. */
+const DataGridTableHeadContent = ({ context, }) => {
+    const { table, props } = context;
+    return (_jsx(DataGridTableHead, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(DataGridTableHeadRow, { headerGroup: headerGroup, children: headerGroup.headers.map((header) => {
+                const { column } = header;
+                return (_jsxs(DataGridTableHeadRowCell, { header: header, children: [header.isPlaceholder ? null : (_jsx(DataGridTableHeadLabel, { header: header, table: table })), props.tableLayout?.columnsResizable === true &&
+                            column.getCanResize() && (_jsx(DataGridTableHeadRowCellResize, { header: header }))] }, header.id));
+            }) }, headerGroup.id))) }));
+};
+/**
+ * Renders the virtualised header and body rows for a DataGrid.
+ *
+ * Consumes the surrounding DataGrid context, so it must live inside a DataGrid
+ * provider and shell. Rows are windowed with `@tanstack/react-virtual`.
+ *
+ * @bestPractice Render inside `DataGrid` (and its shell) - it calls `useDataGrid()` for the table and layout and throws outside the provider; it takes no `table` prop of its own.
+ * @bestPractice Sorting and filtering come from the column definitions: a plain-text `header` sorts on click, and `meta: { filter: true }` adds a values menu. Build the table with `useDataGridTable` and pair it with `PageToolbarTableFilters` / `PageToolbarTableSort` above the grid; all of them share one state.
+ * @bestPractice Rows are virtualised, so give each a stable `rowHeight` via `tableLayout` (expanded rows use `expandedRowHeight`) - variable, unmeasured heights make the window jump.
+ * @bestPractice Use `DataGridTable` for a data-driven grid; for a small static table with hand-authored `<TableRow>`s reach for `Table` instead - no virtualisation or TanStack instance needed.
+ * @category data
+ */
+const DataGridTable = () => {
+    const context = useDataGrid();
+    const { table, props } = context;
+    const { pagination } = table.state;
+    const { rows } = table.getRowModel();
+    // Get row height from props or use defaults
+    const rowHeight = props.tableLayout?.rowHeight ?? 66;
+    const expandedRowHeight = props.tableLayout?.expandedRowHeight ?? 400;
+    const { measureRow, paddingBottom, paddingTop, renderedRowIndexes, tableContainerRef, } = useDataGridRowVirtualizer({
+        enabled: props.virtualization?.enabled !== false,
+        estimateSize: props.virtualization?.estimateSize,
+        expandedRowHeight,
+        overscan: props.virtualization?.overscan ?? 5,
+        rowHeight,
+        rows,
+    });
+    return (_jsx("div", { className: "overflow-auto", ref: tableContainerRef, style: { maxHeight: "calc(100vh - 8rem)" }, children: _jsxs(DataGridTableBase, { children: [_jsx(DataGridTableHeadContent, { context: context }), (props.tableLayout?.striped === true ||
+                    props.tableLayout?.rowBorder !== true) && _jsx(DataGridTableRowSpacer, {}), _jsx(DataGridTableBody, { children: _jsx(DataGridTableBodyContent, { context: context, measureRow: measureRow, paddingBottom: paddingBottom, paddingTop: paddingTop, pageSize: pagination.pageSize, renderedRowIndexes: renderedRowIndexes, rows: rows }) })] }) }));
+};
+export { DataGridTableBody, DataGridTableBodyRow, DataGridTableBodyRowCell, DataGridTableBodyRowExpandded, DataGridTableBodyRowSkeleton, DataGridTableBodyRowSkeletonCell, DataGridTableEmpty, DataGridTableLoader, DataGridTableRowSelect, DataGridTableRowSelectAll, DataGridTableRowSpacer, } from "../data-grid-table/data-grid-table-body.js";
+export { DataGridTableBase, DataGridTableHead, DataGridTableHeadRow, DataGridTableHeadRowCell, DataGridTableHeadRowCellResize, } from "../data-grid-table/data-grid-table-header.js";
+export { DataGridTable };

package/dist/compositions/data-grid-table/data-grid-table-styles.d.ts

@@ -0,0 +1,10 @@
+import type { DataGridColumn as Column } from "@instruments/materia-ui/utils/data-grid-table";
+import type { CSSProperties } from "react";
+declare const headerCellSpacingVariants: (props?: ({
+    size?: "default" | "dense" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const bodyCellSpacingVariants: (props?: ({
+    size?: "default" | "dense" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const getPinningStyles: <TData extends object>(column: Column<TData>) => CSSProperties;
+export { bodyCellSpacingVariants, getPinningStyles, headerCellSpacingVariants };

package/dist/compositions/data-grid-table/data-grid-table-styles.js

@@ -0,0 +1,34 @@
+import { cva } from "class-variance-authority";
+const headerCellSpacingVariants = cva("", {
+    defaultVariants: {
+        size: "default",
+    },
+    variants: {
+        size: {
+            dense: "h-9 px-2.5",
+            default: "h-10 px-2",
+        },
+    },
+});
+const bodyCellSpacingVariants = cva("", {
+    defaultVariants: {
+        size: "default",
+    },
+    variants: {
+        size: {
+            dense: "px-4 py-2",
+            default: "p-2",
+        },
+    },
+});
+const getPinningStyles = (column) => {
+    const isPinned = column.getIsPinned();
+    return {
+        left: isPinned === "start" ? `${column.getStart("start")}px` : undefined,
+        position: isPinned === false ? "relative" : "sticky",
+        right: isPinned === "end" ? `${column.getAfter("end")}px` : undefined,
+        width: column.getSize(),
+        zIndex: isPinned === false ? 0 : 1,
+    };
+};
+export { bodyCellSpacingVariants, getPinningStyles, headerCellSpacingVariants };

package/dist/compositions/data-grid-table/use-data-grid-row-virtualizer.d.ts

@@ -0,0 +1,25 @@
+import type { useDataGrid } from "@instruments/materia-ui/compositions/data-grid";
+type DataGridRows = ReturnType<ReturnType<typeof useDataGrid>["table"]["getRowModel"]>["rows"];
+/** Sets up row virtualisation and derives the rendered indexes + spacer padding. */
+declare const useDataGridRowVirtualizer: ({ enabled, estimateSize, expandedRowHeight, overscan, rowHeight, rows, }: {
+    enabled: boolean;
+    estimateSize: number | undefined;
+    expandedRowHeight: number;
+    overscan: number;
+    rowHeight: number;
+    rows: DataGridRows;
+}) => {
+    measureRow: undefined;
+    paddingBottom: number;
+    paddingTop: number;
+    renderedRowIndexes: number[];
+    tableContainerRef: import("react").RefObject<HTMLDivElement | null>;
+} | {
+    measureRow: (node: Element | null) => void;
+    paddingBottom: number;
+    paddingTop: number;
+    renderedRowIndexes: number[];
+    tableContainerRef: import("react").RefObject<HTMLDivElement | null>;
+};
+export type { DataGridRows };
+export { useDataGridRowVirtualizer };

package/dist/compositions/data-grid-table/use-data-grid-row-virtualizer.js

@@ -0,0 +1,51 @@
+"use client";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useRef } from "react";
+const getInitialVisibleRowIndexes = (rowCount) => Array.from({ length: Math.min(rowCount, 10) }, (_, index) => index);
+/** Sets up row virtualisation and derives the rendered indexes + spacer padding. */
+const useDataGridRowVirtualizer = ({ enabled, estimateSize, expandedRowHeight, overscan, rowHeight, rows, }) => {
+    const tableContainerRef = useRef(null);
+    // Set up virtualizer with dynamic measurement
+    const measureElement = typeof window !== "undefined" && !navigator.userAgent.includes("Firefox")
+        ? (element) => element.getBoundingClientRect().height
+        : undefined;
+    // oxlint-disable-next-line react/incompatible-library -- TanStack returns unmemoisable functions; the React Compiler skips this component by design
+    const rowVirtualizer = useVirtualizer({
+        count: enabled ? rows.length : 0,
+        estimateSize: (index) => {
+            // Check if row is expanded to provide better estimate
+            const row = rows[index];
+            return row?.getIsExpanded() === true
+                ? expandedRowHeight
+                : (estimateSize ?? rowHeight);
+        },
+        getScrollElement: () => tableContainerRef.current,
+        ...(measureElement === undefined ? undefined : { measureElement }),
+        overscan,
+    });
+    if (!enabled) {
+        // Windowing off: render every row, no spacers, no measurement.
+        return {
+            measureRow: undefined,
+            paddingBottom: 0,
+            paddingTop: 0,
+            renderedRowIndexes: rows.map((_, index) => index),
+            tableContainerRef,
+        };
+    }
+    const virtualRows = rowVirtualizer.getVirtualItems();
+    const totalSize = rowVirtualizer.getTotalSize();
+    const renderedRowIndexes = virtualRows.length > 0
+        ? virtualRows.map((virtualRow) => virtualRow.index)
+        : getInitialVisibleRowIndexes(rows.length);
+    const paddingTop = virtualRows.length > 0 ? (virtualRows[0]?.start ?? 0) : 0;
+    const paddingBottom = virtualRows.length > 0 ? totalSize - (virtualRows.at(-1)?.end ?? 0) : 0;
+    return {
+        measureRow: rowVirtualizer.measureElement,
+        paddingBottom,
+        paddingTop,
+        renderedRowIndexes,
+        tableContainerRef,
+    };
+};
+export { useDataGridRowVirtualizer };

package/dist/compositions/data-grid-table.d.ts

@@ -0,0 +1 @@
+export { DataGridTable, DataGridTableBase, DataGridTableBody, DataGridTableBodyRow, DataGridTableBodyRowCell, DataGridTableBodyRowExpandded, DataGridTableBodyRowSkeleton, DataGridTableBodyRowSkeletonCell, DataGridTableEmpty, DataGridTableHead, DataGridTableHeadRow, DataGridTableHeadRowCell, DataGridTableHeadRowCellResize, DataGridTableLoader, DataGridTableRowSelect, DataGridTableRowSelectAll, DataGridTableRowSpacer, } from "./data-grid-table/data-grid-table-root.js";

package/dist/compositions/data-grid-table.js

@@ -0,0 +1 @@
+export { DataGridTable, DataGridTableBase, DataGridTableBody, DataGridTableBodyRow, DataGridTableBodyRowCell, DataGridTableBodyRowExpandded, DataGridTableBodyRowSkeleton, DataGridTableBodyRowSkeletonCell, DataGridTableEmpty, DataGridTableHead, DataGridTableHeadRow, DataGridTableHeadRowCell, DataGridTableHeadRowCellResize, DataGridTableLoader, DataGridTableRowSelect, DataGridTableRowSelectAll, DataGridTableRowSpacer, } from "./data-grid-table/data-grid-table-root.js";

package/dist/compositions/data-grid.d.ts

@@ -0,0 +1,7 @@
+export { dataGridAnatomy } from "./data-grid/data-grid-anatomy.js";
+export { createSelectionColumn, DataGridCheckbox, DataGridRowSelect, DataGridRowSelectAll, } from "./data-grid/data-grid-checkbox.js";
+export { createExpanderColumn, DataGridExpandToggle, } from "./data-grid/data-grid-expand.js";
+export { DataGridFilterableHeader, type FilterOption, } from "./data-grid/data-grid-filterable-header.js";
+export { type DataGridAppliedFilter, filterFnInValues, getAppliedFilters, getColumnFilterOptions, getColumnFilterValues, getColumnTitle, getFilterableColumns, getSortableColumns, setColumnFilterValues, useDataGridTable, } from "./data-grid/data-grid-sort-filter.js";
+export { DataGrid, DataGridProvider, DataGridShell, useDataGrid, } from "./data-grid/data-grid-root.js";
+export type { DataGridColumnFilterMeta, DataGridApiFetchParams, DataGridApiResponse, DataGridContextProps, DataGridProps, DataGridRequestParams, } from "./data-grid/data-grid-types.js";

package/dist/compositions/data-grid.js

@@ -0,0 +1,6 @@
+export { dataGridAnatomy } from "./data-grid/data-grid-anatomy.js";
+export { createSelectionColumn, DataGridCheckbox, DataGridRowSelect, DataGridRowSelectAll, } from "./data-grid/data-grid-checkbox.js";
+export { createExpanderColumn, DataGridExpandToggle, } from "./data-grid/data-grid-expand.js";
+export { DataGridFilterableHeader, } from "./data-grid/data-grid-filterable-header.js";
+export { filterFnInValues, getAppliedFilters, getColumnFilterOptions, getColumnFilterValues, getColumnTitle, getFilterableColumns, getSortableColumns, setColumnFilterValues, useDataGridTable, } from "./data-grid/data-grid-sort-filter.js";
+export { DataGrid, DataGridProvider, DataGridShell, useDataGrid, } from "./data-grid/data-grid-root.js";

package/dist/compositions/delivery-banner/delivery-banner-root.d.ts

@@ -0,0 +1,30 @@
+import type * as React from "react";
+export interface DeliveryBannerProps extends Omit<React.ComponentProps<"section">, "children"> {
+    /** When today's delivery cut-off passes. */
+    deadline: Date | number;
+    /** Accessible name of the close button. @default "Dismiss" */
+    dismissLabel?: string;
+    /** Lead-in before the countdown. @default "Add to delivery:" */
+    label?: string;
+    /** Delivery location, e.g. "Springfield, IL". */
+    location: string;
+    /** Text before the location, shown only when the banner is wide. @default "Samples will be delivered to:" */
+    locationPrefix?: string;
+    /** Renders the close button when provided. */
+    onDismiss?: () => void;
+    /** Makes the location a button (e.g. to change address); plain text otherwise. */
+    onLocationClick?: () => void;
+    /** Below this many milliseconds left, the banner turns urgent. @default 15 * 60_000 */
+    urgentWithin?: number;
+}
+/**
+ * Full-width strip counting down to today's delivery cut-off and naming where
+ * samples will be delivered. Green while there is time, red once less than
+ * `urgentWithin` remains.
+ *
+ * @bestPractice Pass `deadline` from the server's cut-off; the banner only counts down and never decides when delivery closes.
+ * @bestPractice Give it `onLocationClick` when the address can be changed, so the location becomes a button rather than inert text.
+ * @bestPractice Place it full width directly under the header; it switches to its compact layout from its own width, not the viewport's.
+ * @category catalogue
+ */
+export declare const DeliveryBanner: ({ className, deadline, dismissLabel, label, location, locationPrefix, onDismiss, onLocationClick, urgentWithin, ...props }: DeliveryBannerProps) => React.JSX.Element;