@igne-agency/react-web-ui 0.3.0 → 0.4.0

package/dist/data-table/data-table-content.d.ts

@@ -1,4 +1,4 @@
-import type { Row } from "@tanstack/react-table";
+import type { Row as TableRow } from "@tanstack/react-table";
 import { type ReactNode } from "react";
 import type { DataTableFeatures } from "./table-features.ts";
 export type DataTableContentProps<TData extends Record<string, unknown>> = Readonly<{
@@ -6,22 +6,30 @@ export type DataTableContentProps<TData extends Record<string, unknown>> = Reado
      * Renders the expanded content for a row (TanStack expansion API). The
      * returned node is placed in a full-width cell beneath the row.
      */
-    renderSubRow?: (row: Row<DataTableFeatures, TData>) => ReactNode;
-    /** The body when the query matched nothing, such as "No declarations yet." or an `EmptyMessage`. */
+    renderSubRow?: (row: TableRow<DataTableFeatures, TData>) => ReactNode;
+    /** The body when the query matched nothing, such as "No invoices yet." or an `EmptyMessage`. */
     emptyState: ReactNode;
-    /** What a failed fetch says, as the body or above rows still on screen, such as "The declarations could not be loaded." */
+    /** What a failed fetch says, as the body or above rows still on screen, such as "The invoices could not be loaded." */
     errorLabel: string;
-    /** What is announced while the first page loads, as the table's caption, such as "Loading declarations". */
+    /** What is announced while the first page loads, as the table's caption, such as "Loading invoices". */
     loadingLabel: string;
     /** What the overlay says when a refresh runs long, such as "This is taking longer than usual." */
-    slowLabel: ReactNode;
+    slowLabel: string;
     /** The retry's label, such as "Try again". */
     retryLabel: string;
+    /** The glyph on a header sorted ascending. */
+    sortAscendingIcon?: ReactNode;
+    /** The glyph on a header sorted descending. */
+    sortDescendingIcon?: ReactNode;
+    /** The glyph on a sortable header that is not sorted. */
+    unsortedIcon?: ReactNode;
+    /** Set on the `Scroller`. */
     className?: string;
 }>;
 /**
- * Renders the `<table>` header and body from the enclosing `DataTable`
- * instance, resolving the injected query state into one of four bodies:
- * loading, error, empty, or ready.
+ * The whole table from the enclosing `DataTable` instance: its headers, with a
+ * sort toggle on every sortable column, and one of four bodies resolved from
+ * the injected query state: loading, error, empty, or ready. Compose the parts
+ * where the table needs other markup.
  */
-export declare const DataTableContent: <TData extends Record<string, unknown>>({ renderSubRow, emptyState, errorLabel, loadingLabel, slowLabel, retryLabel, className, }: DataTableContentProps<TData>) => ReactNode;
+export declare const DataTableContent: <TData extends Record<string, unknown>>({ renderSubRow, emptyState, errorLabel, loadingLabel, slowLabel, retryLabel, sortAscendingIcon, sortDescendingIcon, unsortedIcon, className, }: DataTableContentProps<TData>) => ReactNode;

package/dist/data-table/data-table-content.js

@@ -1,311 +1,166 @@
-import SvgArrowDownward from "../vendor/@material-design-icons/svg/outlined/arrow_downward.js";
-import SvgArrowUpward from "../vendor/@material-design-icons/svg/outlined/arrow_upward.js";
-import SvgUnfoldMore from "../vendor/@material-design-icons/svg/outlined/unfold_more.js";
 import { Button } from "../components/button/button.js";
-import { Icon } from "../components/icon/icon.js";
-import { Skeleton } from "../components/skeleton/skeleton.js";
 import { Stale } from "../components/stale/stale.js";
 import { useDataTable } from "./data-table-context.js";
-import { resolveView } from "./resolve-view.js";
-import { useStickyOffsets } from "./use-sticky-offsets.js";
-import data_table_module_default from "./data-table.module.js";
+import { Body, Cell, ErrorMessage, Frame, Head, HeaderCell, HeaderRow, LoadingCaption, PlaceholderRows, RefreshFailed, Row, Scroller, SortButton, StaleOverlay, StateRow, SubRow, Table, useDataTableView } from "./data-table-parts.js";
 import { c } from "react/compiler-runtime";
-import { Fragment } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1 } from "react";
 // src/data-table/data-table-content.tsx
-var SORT_ICON = {
-	asc: SvgArrowUpward,
-	desc: SvgArrowDownward
-};
-var ARIA_SORT = {
-	asc: "ascending",
-	desc: "descending"
-};
-/**
-* The `aria-sort` value for a header cell, given its column's sort state.
-*
-* @example
-* ariaSort("desc"); // -> "descending"
-* ariaSort(false); // -> undefined
-*/
-var ariaSort = (sorted) => sorted === false ? void 0 : ARIA_SORT[sorted];
 /**
-* The props a column's layout options put on its header and body cells: the
-* data attributes the stylesheet reads, plus the inset a pinned cell sits at.
-*
-* @example
-* <td {...cellProps(cell.column.columnDef.meta, pins.get(cell.column.id))} />
-*/
-var cellProps = (meta, pin) => ({
-	"data-fit": meta?.fit ? "true" : void 0,
-	"data-numeric": meta?.numeric ? "true" : void 0,
-	"data-sticky": pin?.side,
-	style: pin === void 0 ? void 0 : pin.side === "start" ? { insetInlineStart: `var(--table-sticky-inset-${pin.index}, 0px)` } : { insetInlineEnd: `var(--table-sticky-end-${pin.index}, 0px)` }
-});
-/**
-* Maps each pinned column's id to the edge it sits at and its position in that
-* edge's group.
-*
-* @example
-* columnPins(columns).get("actions"); // -> { side: "end", index: 0 }
-*/
-var columnPins = (columns) => new Map(["start", "end"].flatMap((side) => columns.filter((column) => column.columnDef.meta?.sticky === side).map((column, index) => [column.id, {
-	side,
-	index
-}])));
-/**
-* Renders the `<table>` header and body from the enclosing `DataTable`
-* instance, resolving the injected query state into one of four bodies:
-* loading, error, empty, or ready.
+* The whole table from the enclosing `DataTable` instance: its headers, with a
+* sort toggle on every sortable column, and one of four bodies resolved from
+* the injected query state: loading, error, empty, or ready. Compose the parts
+* where the table needs other markup.
 */
 var DataTableContent = (t0) => {
-	const $ = c(24);
-	const { renderSubRow, emptyState, errorLabel, loadingLabel, slowLabel, retryLabel, className } = t0;
-	const { table, status, isFetching, onRetry } = useDataTable();
-	const rows = table.getRowModel().rows;
-	const leafColumns = table.getAllLeafColumns();
-	const columnCount = leafColumns.length;
-	const pins = columnPins(leafColumns);
-	const pinCount = (side) => [...pins.values()].filter((pin) => pin.side === side).length;
-	const startPinCount = pinCount("start");
-	const endPinCount = pinCount("end");
-	const frameRef = useStickyOffsets([...pins].map(_temp).join(","));
-	const t1 = rows.length > 0;
+	const $ = c(51);
+	const { renderSubRow, emptyState, errorLabel, loadingLabel, slowLabel, retryLabel, sortAscendingIcon, sortDescendingIcon, unsortedIcon, className } = t0;
+	const { table, onRetry } = useDataTable();
+	const { view } = useDataTableView();
+	let t1;
+	if ($[0] !== errorLabel) {
+		t1 = /* @__PURE__ */ jsx("span", { children: errorLabel });
+		$[0] = errorLabel;
+		$[1] = t1;
+	} else t1 = $[1];
 	let t2;
-	if ($[0] !== isFetching || $[1] !== status || $[2] !== t1) {
-		t2 = resolveView({
-			status,
-			isFetching,
-			hasRows: t1
-		});
-		$[0] = isFetching;
-		$[1] = status;
-		$[2] = t1;
-		$[3] = t2;
-	} else t2 = $[3];
-	const { view, stale, refreshFailed } = t2;
-	let t3;
-	if ($[4] !== errorLabel || $[5] !== onRetry || $[6] !== refreshFailed || $[7] !== retryLabel) {
-		t3 = refreshFailed ? /* @__PURE__ */ jsxs("div", {
-			className: data_table_module_default.refreshFailed,
-			role: "alert",
-			children: [/* @__PURE__ */ jsx("span", { children: errorLabel }), onRetry ? /* @__PURE__ */ jsx(Button, {
-				variant: "tertiary",
-				size: "sm",
-				onClick: onRetry,
-				children: retryLabel
-			}) : null]
+	if ($[2] !== onRetry || $[3] !== retryLabel) {
+		t2 = onRetry ? /* @__PURE__ */ jsx(Button, {
+			variant: "tertiary",
+			size: "sm",
+			onClick: onRetry,
+			children: retryLabel
 		}) : null;
-		$[4] = errorLabel;
-		$[5] = onRetry;
-		$[6] = refreshFailed;
-		$[7] = retryLabel;
-		$[8] = t3;
-	} else t3 = $[8];
+		$[2] = onRetry;
+		$[3] = retryLabel;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t1 || $[6] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(RefreshFailed, { children: [t1, t2] });
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
 	let t4;
-	if ($[9] !== className) {
-		t4 = clsx(data_table_module_default.contentWrap, className);
-		$[9] = className;
-		$[10] = t4;
-	} else t4 = $[10];
+	if ($[8] !== loadingLabel) {
+		t4 = /* @__PURE__ */ jsx(LoadingCaption, { children: loadingLabel });
+		$[8] = loadingLabel;
+		$[9] = t4;
+	} else t4 = $[9];
 	let t5;
-	if ($[11] !== loadingLabel || $[12] !== view) {
-		t5 = view === "loading" ? /* @__PURE__ */ jsx("caption", {
-			className: data_table_module_default.busyCaption,
-			children: loadingLabel
-		}) : null;
-		$[11] = loadingLabel;
-		$[12] = view;
-		$[13] = t5;
-	} else t5 = $[13];
-	const t6 = view === "ready" ? rows.map((row) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("tr", {
-		className: data_table_module_default.row,
-		"data-stripe": row.index % 2 === 1 ? "true" : void 0,
-		children: row.getAllCells().map((cell) => /* @__PURE__ */ jsx("td", {
-			className: data_table_module_default.td,
-			...cellProps(cell.column.columnDef.meta, pins.get(cell.column.id)),
-			children: /* @__PURE__ */ jsx(table.FlexRender, { cell })
-		}, cell.id))
-	}), renderSubRow && row.getIsExpanded() ? /* @__PURE__ */ jsxs("tr", {
-		className: data_table_module_default.subRow,
-		children: [
-			startPinCount > 0 ? /* @__PURE__ */ jsx("td", {
-				className: data_table_module_default.td,
-				colSpan: startPinCount,
-				"data-sticky": "start",
-				style: { insetInlineStart: 0 }
-			}) : null,
-			/* @__PURE__ */ jsx("td", {
-				colSpan: columnCount - startPinCount - endPinCount,
-				children: renderSubRow(row)
-			}),
-			endPinCount > 0 ? /* @__PURE__ */ jsx("td", {
-				className: data_table_module_default.td,
-				colSpan: endPinCount,
-				"data-sticky": "end",
-				style: { insetInlineEnd: 0 }
-			}) : null
-		]
-	}) : null] }, row.id)) : view === "loading" ? /* @__PURE__ */ jsx(PlaceholderRows, {
-		rowCount: table.state.pagination.pageSize,
-		columns: leafColumns.map((column) => ({
-			id: column.id,
-			meta: column.columnDef.meta,
-			pin: pins.get(column.id)
-		}))
-	}) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
-		colSpan: columnCount,
-		className: data_table_module_default.stateCell,
-		children: /* @__PURE__ */ jsx(StateBody, {
-			view,
-			emptyState,
-			errorLabel
-		})
-	}) });
+	if ($[10] !== sortAscendingIcon || $[11] !== sortDescendingIcon || $[12] !== table || $[13] !== unsortedIcon) {
+		let t6;
+		if ($[15] !== sortAscendingIcon || $[16] !== sortDescendingIcon || $[17] !== table.FlexRender || $[18] !== unsortedIcon) {
+			t6 = (headerGroup) => /* @__PURE__ */ jsx(HeaderRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(HeaderCell, {
+				header,
+				children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsx(SortButton, {
+					header,
+					sortAscendingIcon,
+					sortDescendingIcon,
+					unsortedIcon
+				}) : /* @__PURE__ */ jsx(table.FlexRender, { header })
+			}, header.id)) }, headerGroup.id);
+			$[15] = sortAscendingIcon;
+			$[16] = sortDescendingIcon;
+			$[17] = table.FlexRender;
+			$[18] = unsortedIcon;
+			$[19] = t6;
+		} else t6 = $[19];
+		t5 = table.getHeaderGroups().map(t6);
+		$[10] = sortAscendingIcon;
+		$[11] = sortDescendingIcon;
+		$[12] = table;
+		$[13] = unsortedIcon;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[20] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Head, { children: t5 });
+		$[20] = t5;
+		$[21] = t6;
+	} else t6 = $[21];
 	let t7;
-	if ($[14] !== t6) {
-		t7 = /* @__PURE__ */ jsx("tbody", { children: t6 });
-		$[14] = t6;
-		$[15] = t7;
-	} else t7 = $[15];
+	if ($[22] !== emptyState || $[23] !== errorLabel || $[24] !== renderSubRow || $[25] !== table || $[26] !== view) {
+		t7 = view === "ready" ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Row, {
+			row,
+			children: row.getAllCells().map(_temp)
+		}), renderSubRow && row.getIsExpanded() ? /* @__PURE__ */ jsx(SubRow, { children: renderSubRow(row) }) : null] }, row.id)) : view === "loading" ? /* @__PURE__ */ jsx(PlaceholderRows, {}) : /* @__PURE__ */ jsx(StateRow, { children: view === "error" ? /* @__PURE__ */ jsx(ErrorMessage, { children: errorLabel }) : emptyState });
+		$[22] = emptyState;
+		$[23] = errorLabel;
+		$[24] = renderSubRow;
+		$[25] = table;
+		$[26] = view;
+		$[27] = t7;
+	} else t7 = $[27];
 	let t8;
-	if ($[16] !== slowLabel) {
-		t8 = /* @__PURE__ */ jsx(Stale.Message, { children: slowLabel });
-		$[16] = slowLabel;
-		$[17] = t8;
-	} else t8 = $[17];
+	if ($[28] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Body, { children: t7 });
+		$[28] = t7;
+		$[29] = t8;
+	} else t8 = $[29];
 	let t9;
-	if ($[18] !== onRetry || $[19] !== retryLabel) {
-		t9 = onRetry ? /* @__PURE__ */ jsx(Stale.Retry, {
+	if ($[30] !== t4 || $[31] !== t6 || $[32] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Table, { children: [
+			t4,
+			t6,
+			t8
+		] });
+		$[30] = t4;
+		$[31] = t6;
+		$[32] = t8;
+		$[33] = t9;
+	} else t9 = $[33];
+	let t10;
+	if ($[34] !== className || $[35] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Scroller, {
+			className,
+			children: t9
+		});
+		$[34] = className;
+		$[35] = t9;
+		$[36] = t10;
+	} else t10 = $[36];
+	let t11;
+	if ($[37] !== slowLabel) {
+		t11 = /* @__PURE__ */ jsx(Stale.Message, { children: slowLabel });
+		$[37] = slowLabel;
+		$[38] = t11;
+	} else t11 = $[38];
+	let t12;
+	if ($[39] !== onRetry || $[40] !== retryLabel) {
+		t12 = onRetry ? /* @__PURE__ */ jsx(Stale.Retry, {
 			onRetry,
 			children: retryLabel
 		}) : null;
-		$[18] = onRetry;
-		$[19] = retryLabel;
-		$[20] = t9;
-	} else t9 = $[20];
-	let t10;
-	if ($[21] !== t8 || $[22] !== t9) {
-		t10 = /* @__PURE__ */ jsxs(Stale.Overlay, {
-			className: data_table_module_default.staleOverlay,
-			children: [t8, t9]
-		});
-		$[21] = t8;
-		$[22] = t9;
-		$[23] = t10;
-	} else t10 = $[23];
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [t3, /* @__PURE__ */ jsx("div", {
-		ref: frameRef,
-		className: data_table_module_default.scrollFrame,
-		children: /* @__PURE__ */ jsxs(Stale.Root, {
-			busy: stale,
-			className: data_table_module_default.stale,
-			children: [/* @__PURE__ */ jsx(Stale.Content, {
-				className: data_table_module_default.stale,
-				children: /* @__PURE__ */ jsx("div", {
-					"data-scroller": true,
-					className: t4,
-					children: /* @__PURE__ */ jsxs("table", {
-						className: data_table_module_default.table,
-						"aria-busy": view === "loading" ? "true" : void 0,
-						children: [
-							t5,
-							/* @__PURE__ */ jsx("thead", {
-								className: data_table_module_default.thead,
-								children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { children: headerGroup.headers.map((header) => {
-									const sorted = header.column.getIsSorted();
-									return /* @__PURE__ */ jsx("th", {
-										scope: "col",
-										colSpan: header.colSpan,
-										className: data_table_module_default.th,
-										"aria-sort": ariaSort(sorted),
-										...cellProps(header.column.columnDef.meta, pins.get(header.column.id)),
-										children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsxs("button", {
-											type: "button",
-											className: data_table_module_default.sortToggle,
-											onClick: () => {
-												header.column.toggleSorting();
-												table.setPageIndex(0);
-											},
-											children: [/* @__PURE__ */ jsx(table.FlexRender, { header }), /* @__PURE__ */ jsx(Icon, {
-												svg: sorted === false ? SvgUnfoldMore : SORT_ICON[sorted],
-												label: "",
-												className: sorted === false ? data_table_module_default.sortIconIdle : void 0
-											})]
-										}) : /* @__PURE__ */ jsx(table.FlexRender, { header })
-									}, header.id);
-								}) }, headerGroup.id))
-							}),
-							t7
-						]
-					})
-				})
-			}), t10]
-		})
-	})] });
-};
-/**
-* Inert placeholder rows for a first load: one row per row of the selected page
-* size. A column that declares a `placeholderCell` draws it; every other column
-* gets a skeleton bar.
-*/
-var PlaceholderRows = (t0) => {
-	const $ = c(5);
-	const { rowCount, columns } = t0;
-	let t1;
-	if ($[0] !== columns || $[1] !== rowCount) {
-		let t2;
-		if ($[3] !== columns) {
-			t2 = (_, index) => /* @__PURE__ */ jsx("tr", {
-				className: data_table_module_default.row,
-				"data-stripe": index % 2 === 1 ? "true" : void 0,
-				inert: true,
-				children: columns.map(_temp2)
-			}, index);
-			$[3] = columns;
-			$[4] = t2;
-		} else t2 = $[4];
-		t1 = /* @__PURE__ */ jsx(Fragment$1, { children: Array.from({ length: rowCount }, t2) });
-		$[0] = columns;
-		$[1] = rowCount;
-		$[2] = t1;
-	} else t1 = $[2];
-	return t1;
+		$[39] = onRetry;
+		$[40] = retryLabel;
+		$[41] = t12;
+	} else t12 = $[41];
+	let t13;
+	if ($[42] !== t11 || $[43] !== t12) {
+		t13 = /* @__PURE__ */ jsxs(StaleOverlay, { children: [t11, t12] });
+		$[42] = t11;
+		$[43] = t12;
+		$[44] = t13;
+	} else t13 = $[44];
+	let t14;
+	if ($[45] !== t10 || $[46] !== t13) {
+		t14 = /* @__PURE__ */ jsxs(Frame, { children: [t10, t13] });
+		$[45] = t10;
+		$[46] = t13;
+		$[47] = t14;
+	} else t14 = $[47];
+	let t15;
+	if ($[48] !== t14 || $[49] !== t3) {
+		t15 = /* @__PURE__ */ jsxs(Fragment, { children: [t3, t14] });
+		$[48] = t14;
+		$[49] = t3;
+		$[50] = t15;
+	} else t15 = $[50];
+	return t15;
 };
-var StateBody = (t0) => {
-	const $ = c(4);
-	const { view, emptyState, errorLabel } = t0;
-	if (view === "error") {
-		let t1;
-		if ($[0] !== errorLabel) {
-			t1 = /* @__PURE__ */ jsx("span", {
-				className: data_table_module_default.errorState,
-				role: "alert",
-				children: errorLabel
-			});
-			$[0] = errorLabel;
-			$[1] = t1;
-		} else t1 = $[1];
-		return t1;
-	}
-	let t1;
-	if ($[2] !== emptyState) {
-		t1 = /* @__PURE__ */ jsx(Fragment$1, { children: emptyState });
-		$[2] = emptyState;
-		$[3] = t1;
-	} else t1 = $[3];
-	return t1;
-};
-function _temp(t0) {
-	const [id, pin_0] = t0;
-	return `${id}:${pin_0.side}`;
-}
-function _temp2(column) {
-	return /* @__PURE__ */ jsx("td", {
-		className: data_table_module_default.td,
-		...cellProps(column.meta, column.pin),
-		children: column.meta?.placeholderCell?.() ?? /* @__PURE__ */ jsx(Skeleton, { className: data_table_module_default.skeletonBar })
-	}, column.id);
+function _temp(cell) {
+	return /* @__PURE__ */ jsx(Cell, { cell }, cell.id);
 }
 export { DataTableContent };

package/dist/data-table/data-table-context.d.ts

@@ -1,4 +1,4 @@
-import type { ReactTable } from "@tanstack/react-table";
+import type { ReactTable, SortingState } from "@tanstack/react-table";
 import { type Context } from "react";
 import type { RowSelectionView } from "../lib/hooks/use-row-selection.ts";
 import type { DataTableStatus } from "./resolve-view.ts";
@@ -10,6 +10,8 @@ import type { DataTableFeatures } from "./table-features.ts";
  */
 export type DataTableContextValue = Readonly<{
     table: unknown;
+    /** The table's sorting, held beside the instance so a part re-renders when it changes. */
+    sorting: SortingState;
     status: DataTableStatus;
     isFetching: boolean;
     /** Refetches; the stale overlay and the refresh-failed notice offer it as a retry. */
@@ -27,7 +29,7 @@ export type DataTableState<TData extends Record<string, unknown>> = Omit<DataTab
  * caller's row type. Pass the same `TData` the table was built with.
  *
  * @example
- * const { table } = useDataTable<Appointment>();
+ * const { table } = useDataTable<Invoice>();
  * const rows = table.getRowModel().rows;
  */
 export declare const useDataTable: <TData extends Record<string, unknown> = Record<string, unknown>>() => DataTableState<TData>;

package/dist/data-table/data-table-context.js

@@ -9,7 +9,7 @@ var DataTableContext = createContext(null);
 * caller's row type. Pass the same `TData` the table was built with.
 *
 * @example
-* const { table } = useDataTable<Appointment>();
+* const { table } = useDataTable<Invoice>();
 * const rows = table.getRowModel().rows;
 */
 var useDataTable = () => {

package/dist/data-table/data-table-parts.d.ts

@@ -0,0 +1,99 @@
+import { useRender } from "@base-ui/react/use-render";
+import type { Cell as TableCell, Header as TableHeader, Row as TableRow } from "@tanstack/react-table";
+import type { ComponentProps, ReactElement, ReactNode } from "react";
+import { type StaleOverlayProps } from "../components/stale/stale.tsx";
+import { type ResolvedView } from "./resolve-view.ts";
+import type { DataTableFeatures } from "./table-features.ts";
+/**
+ * Which body the enclosing `DataTable` shows, whether its rows are stale, and
+ * whether a refresh failed over rows still on screen.
+ *
+ * @example
+ * const { view } = useDataTableView();
+ * if (view === "empty") return <DataTable.StateRow>No invoices yet.</DataTable.StateRow>;
+ */
+export declare const useDataTableView: () => ResolvedView;
+export type DataTableRefreshFailedProps = useRender.ComponentProps<"div">;
+/** The alert above rows still on screen when a refresh fails. Renders nothing otherwise. */
+export declare const RefreshFailed: ({ render, className, ref, ...props }: DataTableRefreshFailedProps) => ReactElement | null;
+export type DataTableFrameProps = useRender.ComponentProps<"div">;
+/**
+ * The frame that stays put around the scroller: it measures the pinned columns
+ * and holds the stale state, so it takes a `Scroller` and a `StaleOverlay`.
+ */
+export declare const Frame: ({ render, className, ref, children, ...props }: DataTableFrameProps) => ReactElement;
+export type DataTableScrollerProps = useRender.ComponentProps<"div">;
+/** The scrolling card that holds the `Table`, dimmed while its rows are stale. */
+export declare const Scroller: ({ render, className, ref, ...props }: DataTableScrollerProps) => ReactNode;
+/** What covers the table once a refresh is slow: its `Stale.Message` and `Stale.Retry`. */
+export declare const StaleOverlay: ({ className, ...props }: StaleOverlayProps) => ReactNode;
+export type DataTableTableProps = useRender.ComponentProps<"table">;
+/** The `<table>`, marked busy while its first page loads. */
+export declare const Table: ({ render, className, ref, ...props }: DataTableTableProps) => ReactElement;
+export type DataTableLoadingCaptionProps = useRender.ComponentProps<"caption">;
+/** What is announced while the first page loads, such as "Loading invoices". Renders nothing otherwise. */
+export declare const LoadingCaption: ({ render, className, ref, ...props }: DataTableLoadingCaptionProps) => ReactElement | null;
+export type DataTableHeadProps = useRender.ComponentProps<"thead">;
+/** The header, stuck to the top of the scroller. */
+export declare const Head: ({ render, className, ref, ...props }: DataTableHeadProps) => ReactElement;
+export type DataTableHeaderRowProps = useRender.ComponentProps<"tr">;
+/** One row of header cells. */
+export declare const HeaderRow: ({ render, ref, ...props }: DataTableHeaderRowProps) => ReactElement;
+export type DataTableHeaderCellProps<TData extends Record<string, unknown>> = useRender.ComponentProps<"th"> & Readonly<{
+    /** The header this cell draws. */
+    header: TableHeader<DataTableFeatures, TData>;
+}>;
+/**
+ * A column header, laid out by its column's `meta` and announcing its sort.
+ * It draws the column's header unless given children, such as a `SortButton`.
+ */
+export declare const HeaderCell: <TData extends Record<string, unknown>>({ header, render, className, style: inlineStyle, ref, children, ...props }: DataTableHeaderCellProps<TData>) => ReactElement;
+export type DataTableSortButtonProps<TData extends Record<string, unknown>> = Omit<ComponentProps<"button">, "ref"> & Readonly<{
+    /** The header whose column this sorts. */
+    header: TableHeader<DataTableFeatures, TData>;
+    /** The glyph while the column sorts ascending. */
+    sortAscendingIcon?: ReactNode;
+    /** The glyph while the column sorts descending. */
+    sortDescendingIcon?: ReactNode;
+    /** The glyph while the column is not sorted. */
+    unsortedIcon?: ReactNode;
+}>;
+/**
+ * The header's sort toggle, which returns the table to its first page. It
+ * draws the column's header unless given children, followed by the glyph for
+ * the column's sort, where one is given.
+ */
+export declare const SortButton: <TData extends Record<string, unknown>>({ header, sortAscendingIcon, sortDescendingIcon, unsortedIcon, className, children, onClick, ...props }: DataTableSortButtonProps<TData>) => ReactNode;
+export type DataTableBodyProps = useRender.ComponentProps<"tbody">;
+/** The body: the page's `Row`s, the `PlaceholderRows` or a `StateRow`. */
+export declare const Body: ({ render, ref, ...props }: DataTableBodyProps) => ReactElement;
+export type DataTableRowProps<TData extends Record<string, unknown>> = useRender.ComponentProps<"tr"> & Readonly<{
+    /** The row this draws, which sets its stripe. */
+    row: TableRow<DataTableFeatures, TData>;
+}>;
+/** A body row, striped on every other row. */
+export declare const Row: <TData extends Record<string, unknown>>({ row, render, className, ref, ...props }: DataTableRowProps<TData>) => ReactElement;
+export type DataTableCellProps<TData extends Record<string, unknown>> = useRender.ComponentProps<"td"> & Readonly<{
+    /** The cell this draws. */
+    cell: TableCell<DataTableFeatures, TData>;
+}>;
+/** A body cell, laid out by its column's `meta`. It draws the column's cell unless given children. */
+export declare const Cell: <TData extends Record<string, unknown>>({ cell, render, className, style: inlineStyle, ref, children, ...props }: DataTableCellProps<TData>) => ReactElement;
+export type DataTableSubRowProps = useRender.ComponentProps<"tr">;
+/**
+ * The full-width row beneath an expanded row, holding its children. The pinned
+ * columns keep their place beside it.
+ */
+export declare const SubRow: ({ render, className, ref, children, ...props }: DataTableSubRowProps) => ReactElement;
+/**
+ * Inert placeholder rows for a first load: one row per row of the selected page
+ * size. A column that declares a `placeholderCell` draws it; every other column
+ * gets a skeleton bar.
+ */
+export declare const PlaceholderRows: () => ReactNode;
+export type DataTableStateRowProps = useRender.ComponentProps<"tr">;
+/** A row across every column for the body's state, such as the empty state or an `ErrorMessage`. */
+export declare const StateRow: ({ render, ref, children, ...props }: DataTableStateRowProps) => ReactElement;
+export type DataTableErrorMessageProps = useRender.ComponentProps<"span">;
+/** What a failed first load says, as an alert. */
+export declare const ErrorMessage: ({ render, className, ref, ...props }: DataTableErrorMessageProps) => ReactElement;