@igne-agency/react-web-ui 0.0.0-stage → 0.3.0

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,175 @@
+import { useIntent } from "../../lib/use-intent.js";
+import tooltip_module_default from "./tooltip.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { Tooltip } from "@base-ui/react/tooltip";
+// src/components/tooltip/tooltip.tsx
+var DEFAULT_SIDE_OFFSET = 8;
+var TooltipTrigger = (t0) => {
+	const $ = c(14);
+	let onFocus;
+	let onIntent;
+	let onPointerEnter;
+	let onPointerLeave;
+	let props;
+	if ($[0] !== t0) {
+		({onIntent, onPointerEnter, onPointerLeave, onFocus, ...props} = t0);
+		$[0] = t0;
+		$[1] = onFocus;
+		$[2] = onIntent;
+		$[3] = onPointerEnter;
+		$[4] = onPointerLeave;
+		$[5] = props;
+	} else {
+		onFocus = $[1];
+		onIntent = $[2];
+		onPointerEnter = $[3];
+		onPointerLeave = $[4];
+		props = $[5];
+	}
+	const intent = useIntent(onIntent);
+	let t1;
+	if ($[6] !== intent || $[7] !== onFocus || $[8] !== onPointerEnter || $[9] !== onPointerLeave) {
+		t1 = mergeProps(intent, {
+			onPointerEnter,
+			onPointerLeave,
+			onFocus
+		});
+		$[6] = intent;
+		$[7] = onFocus;
+		$[8] = onPointerEnter;
+		$[9] = onPointerLeave;
+		$[10] = t1;
+	} else t1 = $[10];
+	let t2;
+	if ($[11] !== props || $[12] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Tooltip.Trigger, {
+			...props,
+			...t1
+		});
+		$[11] = props;
+		$[12] = t1;
+		$[13] = t2;
+	} else t2 = $[13];
+	return t2;
+};
+var TooltipPositioner = (t0) => {
+	const $ = c(6);
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({sideOffset: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = t1;
+	} else {
+		props = $[1];
+		t1 = $[2];
+	}
+	const sideOffset = t1 === void 0 ? DEFAULT_SIDE_OFFSET : t1;
+	let t2;
+	if ($[3] !== props || $[4] !== sideOffset) {
+		t2 = /* @__PURE__ */ jsx(Tooltip.Positioner, {
+			sideOffset,
+			...props
+		});
+		$[3] = props;
+		$[4] = sideOffset;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+var TooltipPopup = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(tooltip_module_default.popup, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Tooltip.Popup, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var TooltipRoot = (t0) => {
+	const $ = c(12);
+	const { content, children, side: t1, sideOffset, onIntent } = t0;
+	const side = t1 === void 0 ? "top" : t1;
+	let t2;
+	if ($[0] !== children || $[1] !== onIntent) {
+		t2 = /* @__PURE__ */ jsx(TooltipTrigger, {
+			render: children,
+			onIntent
+		});
+		$[0] = children;
+		$[1] = onIntent;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== content) {
+		t3 = /* @__PURE__ */ jsx(TooltipPopup, { children: content });
+		$[3] = content;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== side || $[6] !== sideOffset || $[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(TooltipPositioner, {
+			side,
+			sideOffset,
+			children: t3
+		}) });
+		$[5] = side;
+		$[6] = sideOffset;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t2 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Tooltip.Root, { children: [t2, t4] });
+		$[9] = t2;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+};
+/**
+* A hint on a trigger, which is supplied as `children`. Mount `Tooltip.Provider`
+* once near the app root, so that moving between triggers keeps the hint up
+* instead of waiting out the delay again. Assembled from the parts hanging off
+* it, which stay reachable for a controlled `open`, an `align`, a
+* `collisionPadding`, or a `Handle` shared by a group of triggers. There is no
+* `Arrow`: a tooltip is an unarrowed popup with its own `box-shadow`.
+*
+* @example
+* <Tooltip content="Previous page">
+* 	<button aria-label="Previous page">…</button>
+* </Tooltip>
+*/
+var Tooltip$1 = Object.assign(TooltipRoot, {
+	...Tooltip,
+	Trigger: TooltipTrigger,
+	Positioner: TooltipPositioner,
+	Popup: TooltipPopup
+});
+export { Tooltip$1 as Tooltip };

package/dist/components/tooltip/tooltip.module.js

@@ -0,0 +1,4 @@
+import './tooltip.css';// src/components/tooltip/tooltip.module.scss
+var popup = "_popup_1sb61_3";
+var tooltip_module_default = { popup };
+export { tooltip_module_default as default, popup };

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

@@ -0,0 +1,27 @@
+import type { Row } 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<{
+    /**
+     * 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`. */
+    emptyState: ReactNode;
+    /** What a failed fetch says, as the body or above rows still on screen, such as "The declarations could not be loaded." */
+    errorLabel: string;
+    /** What is announced while the first page loads, as the table's caption, such as "Loading declarations". */
+    loadingLabel: string;
+    /** What the overlay says when a refresh runs long, such as "This is taking longer than usual." */
+    slowLabel: ReactNode;
+    /** The retry's label, such as "Try again". */
+    retryLabel: string;
+    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.
+ */
+export declare const DataTableContent: <TData extends Record<string, unknown>>({ renderSubRow, emptyState, errorLabel, loadingLabel, slowLabel, retryLabel, className, }: DataTableContentProps<TData>) => ReactNode;

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

@@ -0,0 +1,311 @@
+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 { c } from "react/compiler-runtime";
+import { Fragment } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+// 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.
+*/
+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;
+	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]
+		}) : null;
+		$[4] = errorLabel;
+		$[5] = onRetry;
+		$[6] = refreshFailed;
+		$[7] = retryLabel;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== className) {
+		t4 = clsx(data_table_module_default.contentWrap, className);
+		$[9] = className;
+		$[10] = t4;
+	} else t4 = $[10];
+	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
+		})
+	}) });
+	let t7;
+	if ($[14] !== t6) {
+		t7 = /* @__PURE__ */ jsx("tbody", { children: t6 });
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== slowLabel) {
+		t8 = /* @__PURE__ */ jsx(Stale.Message, { children: slowLabel });
+		$[16] = slowLabel;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== onRetry || $[19] !== retryLabel) {
+		t9 = 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;
+};
+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);
+}
+export { DataTableContent };

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

@@ -0,0 +1,33 @@
+import type { ReactTable } 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";
+import type { DataTableFeatures } from "./table-features.ts";
+/**
+ * What the `DataTable` parts share. `table` is held as `unknown` because a
+ * table instance is invariant in its row type; {@link useDataTable}
+ * re-narrows it.
+ */
+export type DataTableContextValue = Readonly<{
+    table: unknown;
+    status: DataTableStatus;
+    isFetching: boolean;
+    /** Refetches; the stale overlay and the refresh-failed notice offer it as a retry. */
+    onRetry?: () => void;
+    /** Present only on a selectable table; the selection parts require it. */
+    selection?: RowSelectionView;
+}>;
+/** The provider `DataTable.Root` renders. */
+export declare const DataTableContext: Context<DataTableContextValue | null>;
+export type DataTableState<TData extends Record<string, unknown>> = Omit<DataTableContextValue, "table"> & Readonly<{
+    table: ReactTable<DataTableFeatures, TData>;
+}>;
+/**
+ * Reads the enclosing `DataTable.Root` and re-narrows its table instance to the
+ * caller's row type. Pass the same `TData` the table was built with.
+ *
+ * @example
+ * const { table } = useDataTable<Appointment>();
+ * 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

@@ -0,0 +1,31 @@
+import { useRequiredContext } from "../lib/use-required-context.js";
+import { c } from "react/compiler-runtime";
+import { createContext } from "react";
+// src/data-table/data-table-context.tsx
+/** The provider `DataTable.Root` renders. */
+var DataTableContext = createContext(null);
+/**
+* Reads the enclosing `DataTable.Root` and re-narrows its table instance to the
+* caller's row type. Pass the same `TData` the table was built with.
+*
+* @example
+* const { table } = useDataTable<Appointment>();
+* const rows = table.getRowModel().rows;
+*/
+var useDataTable = () => {
+	const $ = c(3);
+	const context = useRequiredContext(DataTableContext, "DataTable.* must be rendered inside <DataTable.Root>.");
+	const t0 = context.table;
+	let t1;
+	if ($[0] !== context || $[1] !== t0) {
+		t1 = {
+			...context,
+			table: t0
+		};
+		$[0] = context;
+		$[1] = t0;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+};
+export { DataTableContext, useDataTable };

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

@@ -0,0 +1,42 @@
+import type { ColumnDef } from "@tanstack/react-table";
+import { type ReactNode } from "react";
+import type { DataTableColumnMeta, DataTableFeatures } from "./table-features.ts";
+export type SelectionColumnOptions = Readonly<{
+    sticky?: DataTableColumnMeta["sticky"];
+    /** The header checkbox's name, such as "Select page". */
+    selectPageLabel: string;
+    /** Each row checkbox's name, such as "Select row". */
+    selectRowLabel: string;
+}>;
+/**
+ * The selection column: a page checkbox in the header, three-state over the
+ * current page, and a row checkbox per row, collapsed to content width. It
+ * sits with the table's other leading control columns.
+ *
+ * @example
+ * const columns = [
+ * 	selectionColumn<Declaration>({ sticky: "start", selectPageLabel: "Select page", selectRowLabel: "Select row" }),
+ * 	...dataColumns,
+ * ];
+ */
+export declare const selectionColumn: <TRow extends Record<string, unknown>>({ sticky, selectPageLabel, selectRowLabel, }: SelectionColumnOptions) => ColumnDef<DataTableFeatures, TRow>;
+export type DataTableSelectionBarProps = Readonly<{
+    /** What the bar says while nothing is selected, such as "30 declarations". */
+    total?: ReactNode;
+    totalRows: number;
+    /** How many of the matching rows are selected, such as "3 of 30 selected". */
+    countLabel: (selected: number, total: number) => string;
+    /** The button that clears the selection, such as "Clear selection". */
+    clearLabel: string;
+    /** The button that selects every matching row, such as "Select all 30". */
+    selectAllLabel: (total: number) => string;
+    /** Bulk actions to offer for the current selection. */
+    children?: ReactNode;
+    className?: string;
+}>;
+/**
+ * The bar above a selectable table: the total while nothing is selected, then
+ * the selected count, a clear button, the offer to select every matching row,
+ * and the caller's bulk actions.
+ */
+export declare const DataTableSelectionBar: ({ total, totalRows, countLabel, clearLabel, selectAllLabel, children, className, }: DataTableSelectionBarProps) => ReactNode;