@seekalfred/primitives 0.5.1 → 0.7.1

package/dist/table/table.js

@@ -1,11 +1,15 @@
 "use client";
 import { cn, cnAll } from "../lib/cn.js";
 import { Button as Button$1 } from "../button/button.js";
+import { SwapText } from "../lib/swap-text.js";
+import { useFlip } from "../lib/flip.js";
+import { Checkbox as Checkbox$1 } from "../checkbox/checkbox.js";
 import { Select as Select$1, SelectItem } from "../select/select.js";
 import { cva } from "class-variance-authority";
-import { forwardRef, useMemo, useState } from "react";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import { Cell, Column, Row, Table, TableBody, TableFooter, TableHeader } from "react-aria-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { flushSync } from "react-dom";
 //#region src/table/table.tsx
 /**
 * Table, ported from the legacy shadcn table onto React Aria's Table.
@@ -58,10 +62,29 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 *
 * overflow-hidden is load-bearing: the header fill runs to the table's edge and
 * would square off the rounded corners without it.
+*
+* THE EDGE SHADOWS. A table wider than its card scrolls inside it, and on a
+* trackpad the scrollbar only shows while scrolling, so a cut-off column looks
+* like the table's last one. The card carries `data-overflow-start` and
+* `data-overflow-end` while columns are hidden on that side (the Table sets
+* them from its scroll position), and each draws a shadow on that edge: the
+* text colour fading to nothing at 15%, so it follows the theme. With a sticky
+* first column the start is never hidden behind the card's edge, so the start
+* shadow stays off and the sticky column's own divider does that job.
 */
-const tableCardVariants = cva(["w-full box-border overflow-hidden"], {
+const tableCardVariants = cva([
+	"w-full box-border overflow-hidden relative isolate",
+	"before:pointer-events-none before:absolute before:inset-y-0 before:start-0 before:z-2 before:w-6",
+	"before:bg-linear-to-r rtl:before:bg-linear-to-l before:from-foreground before:to-transparent",
+	"before:opacity-0 motion-safe:before:transition-opacity",
+	"data-[overflow-start]:not-data-[sticky-first]:before:opacity-15",
+	"after:pointer-events-none after:absolute after:inset-y-0 after:end-0 after:z-2 after:w-6",
+	"after:bg-linear-to-l rtl:after:bg-linear-to-r after:from-foreground after:to-transparent",
+	"after:opacity-0 motion-safe:after:transition-opacity",
+	"data-[overflow-end]:after:opacity-15"
+], {
 	variants: { frame: {
-		card: "rounded-md border-(length:--border-width) border-separator bg-background",
+		card: "rounded-panel border-(length:--border-width) border-separator bg-surface",
 		none: ""
 	} },
 	defaultVariants: { frame: "card" }
@@ -85,12 +108,16 @@ function renderValue(column, value, row) {
 /** Reserved id for the chevron column, so it cannot collide with a real one. */
 const CHEVRON_COLUMN_ID = "__table_row_action";
 const CHEVRON_CELL = "w-10 px-0 text-center";
+/** Reserved id for the checkbox column of a selectable table. */
+const SELECT_COLUMN_ID = "__table_row_select";
+/** The checkbox column is as wide as its box needs, with the table's usual inset on its leading side. */
+const SELECT_CELL = "w-11 px-0 ps-(--density-row-pad-x)";
 /** The horizontal scroll container. The table owns it; 5 of 6 consumers built one by hand. */
 const tableScrollVariants = cva(["w-full overflow-x-auto box-border"]);
 const tableVariants = cva([
 	"w-full border-collapse box-border",
 	"font-sans text-base leading-(--leading-normal)",
-	"bg-background text-foreground"
+	"bg-surface text-foreground"
 ]);
 /**
 * The header is near-white, not a grey band.
@@ -116,8 +143,24 @@ const tablePaginationVariants = cva([
 	"px-(--density-row-pad-x) py-(--density-row-pad-y)",
 	"font-sans text-sm leading-(--leading-normal) text-muted-foreground"
 ]);
+/**
+* The bar under a selectable table: how many rows, or how many are selected,
+* and the action that clears them. A sibling of the table, like the pagination.
+*/
+const tableSelectionBarVariants = cva([
+	"flex min-h-11 items-center justify-between gap-(--density-control-gap) box-border",
+	"border-t-(length:--border-width) border-t-separator",
+	"ps-(--density-row-pad-x) pe-2 font-sans text-sm leading-(--leading-normal)",
+	"text-muted-foreground data-[active]:text-foreground",
+	"motion-safe:transition-colors motion-safe:duration-(--duration-standard) motion-safe:ease-settle"
+]);
+/**
+* What stands in for the rows when there are none: centred, muted, and tall
+* enough to read as a state rather than as a squashed row.
+*/
+const tableEmptyVariants = cva(["flex min-h-30 items-center justify-center px-(--density-row-pad-x) py-6", "box-border text-center text-sm text-muted-foreground wrap-anywhere"]);
 /** The footer band. Heavier than a row rule, because it closes the table. */
-const tableFooterVariants = cva(["bg-background font-semibold text-foreground", "border-t-(length:--border-width) border-t-border"]);
+const tableFooterVariants = cva(["bg-surface font-semibold text-foreground", "border-t-(length:--border-width) border-t-border"]);
 /** Shared focus treatment. Authored once; both the column header and the row take it. */
 const FOCUS_RING = [
 	"outline-none",
@@ -129,6 +172,7 @@ const FOCUS_RING = [
 const tableColumnVariants = cva([
 	"px-(--density-row-pad-x) py-(--density-row-pad-y)",
 	"box-border align-middle text-sm font-semibold select-none",
+	"data-[sorted]:bg-foreground/3 data-[sorted]:text-foreground",
 	...FOCUS_RING,
 	"data-[allows-sorting]:cursor-pointer"
 ], {
@@ -149,9 +193,10 @@ const tableColumnVariants = cva([
 	}
 });
 const tableRowVariants = cva([
-	"box-border",
+	"group/row box-border bg-surface",
 	"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard",
 	"hover:bg-muted data-[hovered]:bg-muted data-[focused]:bg-muted",
+	"data-[selected]:bg-muted data-[selected]:hover:bg-separator data-[selected]:data-[hovered]:bg-separator",
 	"data-[highlighted]:bg-primary-subtle",
 	...FOCUS_RING
 ], {
@@ -172,7 +217,8 @@ const tableRowVariants = cva([
 });
 const tableCellVariants = cva([
 	"px-(--density-row-pad-x) py-(--density-row-pad-y)",
-	"box-border align-middle",
+	"box-border align-middle wrap-anywhere",
+	"data-[sorted]:bg-foreground/3",
 	...FOCUS_RING
 ], {
 	variants: {
@@ -182,7 +228,7 @@ const tableCellVariants = cva([
 			end: "text-end"
 		},
 		numeric: {
-			true: "tabular-nums",
+			true: "tabular-nums whitespace-nowrap",
 			false: ""
 		}
 	},
@@ -192,6 +238,78 @@ const tableCellVariants = cva([
 	}
 });
 /**
+* The first cell of every row, held in place while the rest scroll under it
+* (`stickyFirstColumn`).
+*
+* A sticky cell is opaque -- otherwise the scrolled cells show through it -- so
+* it repaints whatever fill its row has: the row's hover, focus and highlight
+* through `group/row`, the stripe when striped. A divider on its trailing edge
+* marks where the frozen column ends.
+*/
+const tableStickyCellVariants = cva(["sticky start-0 z-1", "border-e-(length:--border-width) border-e-separator"], {
+	variants: {
+		part: {
+			header: "bg-header-fill",
+			bare: "bg-surface",
+			body: [
+				"bg-surface",
+				"group-hover/row:bg-muted group-data-[hovered]/row:bg-muted group-data-[focused]/row:bg-muted",
+				"group-data-[highlighted]/row:bg-primary-subtle"
+			]
+		},
+		striped: {
+			true: "",
+			false: ""
+		}
+	},
+	compoundVariants: [{
+		part: "body",
+		striped: true,
+		class: "group-even/row:bg-row-stripe"
+	}],
+	defaultVariants: {
+		part: "body",
+		striped: false
+	}
+});
+/**
+* Which sides of a scroll container hide content right now.
+*
+* Read from the container on scroll and whenever it or the table resizes, so
+* a window resize or rows arriving later update it too. scrollLeft runs
+* negative in a right-to-left layout; the distance travelled is what counts.
+*/
+function useScrollEdges(scroller) {
+	const [edges, setEdges] = useState({
+		start: false,
+		end: false
+	});
+	useEffect(() => {
+		const el = scroller.current;
+		if (!el) return;
+		const update = () => {
+			const hidden = el.scrollWidth - el.clientWidth;
+			const travelled = Math.abs(el.scrollLeft);
+			const start = hidden > 1 && travelled > 1;
+			const end = hidden > 1 && travelled < hidden - 1;
+			setEdges((prev) => prev.start === start && prev.end === end ? prev : {
+				start,
+				end
+			});
+		};
+		update();
+		el.addEventListener("scroll", update, { passive: true });
+		const resize = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(update);
+		resize?.observe(el);
+		if (el.firstElementChild) resize?.observe(el.firstElementChild);
+		return () => {
+			el.removeEventListener("scroll", update);
+			resize?.disconnect();
+		};
+	}, [scroller]);
+	return edges;
+}
+/**
 * Both glyphs are aria-hidden and neither is focusable.
 *
 * The chevron says "this row does something"; the ROW is what React Aria makes
@@ -258,7 +376,7 @@ function RowChevronGlyph() {
 	});
 }
 function SortCaretGlyph({ direction }) {
-	return /* @__PURE__ */ jsx("svg", {
+	return /* @__PURE__ */ jsxs("svg", {
 		"data-slot": "table-sort-caret",
 		"data-direction": direction,
 		"aria-hidden": "true",
@@ -268,8 +386,67 @@ function SortCaretGlyph({ direction }) {
 		strokeWidth: "1.5",
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
-		className: "size-(--icon-sm) ms-1 inline-block align-middle",
-		children: direction === "none" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "m4 7 4-4 4 4" }), /* @__PURE__ */ jsx("path", { d: "m4 9 4 4 4-4" })] }) : /* @__PURE__ */ jsx("path", { d: direction === "ascending" ? "m4 10 4-4 4 4" : "m4 6 4 4 4-4" })
+		className: "table-sort-caret size-(--icon-sm) ms-1 inline-block align-middle",
+		children: [/* @__PURE__ */ jsxs("g", {
+			className: "table-sort-idle",
+			children: [/* @__PURE__ */ jsx("path", { d: "m4 7 4-4 4 4" }), /* @__PURE__ */ jsx("path", { d: "m4 9 4 4 4-4" })]
+		}), /* @__PURE__ */ jsxs("g", {
+			className: "table-sort-arrow",
+			children: [/* @__PURE__ */ jsx("path", { d: "M8 13V3" }), /* @__PURE__ */ jsx("path", { d: "m4.5 6.5 3.5-3.5 3.5 3.5" })]
+		})]
+	});
+}
+/** 1 when the value grew, -1 when it shrank: the way a changed number swaps. Updated during render. */
+function useChangeDirection(value) {
+	const [seen, setSeen] = useState({
+		value,
+		dir: 1
+	});
+	if (seen.value !== value) setSeen({
+		value,
+		dir: value < seen.value ? -1 : 1
+	});
+	return seen.dir;
+}
+/**
+* The bar under a selectable table. With nothing chosen it counts the rows
+* ("12 rows"); with some chosen it counts them ("3 selected") and offers the
+* way back. The number and the word swap in place as they change.
+*/
+function SelectionBar({ count, total, labels, onClear }) {
+	const shown = count || total;
+	const noun = count ? labels.selected : shown === 1 ? labels.item.one : labels.item.other;
+	const direction = useChangeDirection(shown);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "table-selection-bar",
+		"data-active": count > 0 || void 0,
+		className: cnAll(tableSelectionBarVariants()),
+		children: [/* @__PURE__ */ jsxs("span", {
+			"data-slot": "table-selection-count",
+			className: "inline-flex items-baseline gap-1",
+			children: [
+				/* @__PURE__ */ jsx(SwapText, {
+					swapKey: String(shown),
+					dir: direction,
+					className: "inline-block tabular-nums",
+					children: shown
+				}),
+				" ",
+				/* @__PURE__ */ jsx(SwapText, {
+					swapKey: noun,
+					dir: count ? 1 : -1,
+					className: "inline-block",
+					children: noun
+				})
+			]
+		}), count > 0 ? /* @__PURE__ */ jsx(Button$1, {
+			variant: "ghost",
+			size: "sm",
+			"data-slot": "table-selection-clear",
+			className: "motion-safe:animate-fade-in",
+			onPress: onClear,
+			children: labels.clear
+		}) : null]
 	});
 }
 /** Builds columns that keep each column's own value type. */
@@ -279,9 +456,11 @@ function createColumns() {
 /**
 * A data table.
 *
-* Maturity: **beta**. Selection, row expansion, filtering, grouping, the total
-* row and pagination are deliberately absent -- each had one consumer or none
-* across the six legacy tables, and the stateful ones belong to DataGrid.
+* Maturity: **beta**. Row expansion, filtering and grouping are deliberately
+* absent -- each had one consumer or none across the six legacy tables, and the
+* stateful ones belong to DataGrid. Sorting glides: when a sort reorders the
+* rows, each slides to its new place instead of jumping (the lib/flip helper).
+* Selection is opt-in with `selectionMode="multiple"`.
 *
 * @example
 * const { column } = createColumns<Channel>();
@@ -317,7 +496,7 @@ function compareKeys(a, b) {
 	if (typeof a === "number" && typeof b === "number") return a - b;
 	return String(a).localeCompare(String(b));
 }
-const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant, sortDescriptor, defaultSortDescriptor, onSortChange, onRowAction, isRowHighlighted, rowClassName, frame, headerType, headerFill, striped, totalRow, empty, minWidth, pageSize, pageSizeOptions, onPageSizeChange, pageLabels, className, ...props }, ref) {
+const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant, sortDescriptor, defaultSortDescriptor, onSortChange, onRowAction, isRowHighlighted, rowClassName, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, selectionLabels, frame, headerType, headerFill, striped, totalRow, empty, minWidth, stickyFirstColumn, pageSize, pageSizeOptions, onPageSizeChange, pageLabels, className, ...props }, ref) {
 	const isControlled = sortDescriptor !== void 0;
 	const [uncontrolledSort, setUncontrolledSort] = useState(defaultSortDescriptor);
 	const activeSort = isControlled ? sortDescriptor : uncontrolledSort;
@@ -348,167 +527,264 @@ const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant,
 		rowsPerPage: pageLabels?.rowsPerPage ?? "Rows per page"
 	};
 	const rowsByKey = new Map(data.map((row) => [getRowId(row), row]));
+	const selectable = selectionMode === "multiple";
+	const [uncontrolledSelection, setUncontrolledSelection] = useState(defaultSelectedKeys ?? /* @__PURE__ */ new Set());
+	const selection = selectedKeys ?? uncontrolledSelection;
+	const commitSelection = (keys) => {
+		if (selectedKeys === void 0) setUncontrolledSelection(keys);
+		onSelectionChange?.(keys);
+	};
+	const selectedCount = selection === "all" ? visibleRows.length : [...selection].filter((key) => rowsByKey.has(key)).length;
+	const selectLabels = {
+		item: selectionLabels?.item ?? {
+			one: "row",
+			other: "rows"
+		},
+		selected: selectionLabels?.selected ?? "selected",
+		clear: selectionLabels?.clear ?? "Clear selection"
+	};
+	const sortedColumn = activeSort?.column;
 	const hasWidths = columns.some((column) => column.width !== void 0);
 	const tableStyle = {};
 	if (minWidth !== void 0) tableStyle.minWidth = minWidth;
 	if (hasWidths) tableStyle.tableLayout = "fixed";
+	const scrollRef = useRef(null);
+	const edges = useScrollEdges(scrollRef);
+	const [rowOrder, setRowOrder] = useState("");
+	useEffect(() => {
+		const root = scrollRef.current;
+		if (!root) return;
+		let last = "";
+		const look = () => {
+			const next = Array.from(root.querySelectorAll("tbody > [data-flip]")).map((row) => row.dataset.flip).join("\0");
+			if (next === last) return;
+			last = next;
+			flushSync(() => setRowOrder(next));
+		};
+		look();
+		const observer = new MutationObserver(look);
+		observer.observe(root, {
+			childList: true,
+			subtree: true
+		});
+		return () => observer.disconnect();
+	}, []);
+	useFlip(scrollRef, rowOrder, "var(--duration-smooth)", "var(--ease-smooth)", true);
+	const stickyCell = (part) => tableStickyCellVariants({
+		part,
+		striped: part === "body" && !!striped
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "table-card",
+		"data-overflow-start": edges.start || void 0,
+		"data-overflow-end": edges.end || void 0,
+		"data-sticky-first": stickyFirstColumn || void 0,
 		className: cnAll(tableCardVariants({ frame })),
-		children: [/* @__PURE__ */ jsx("div", {
-			"data-slot": "table-scroll",
-			className: cnAll(tableScrollVariants()),
-			children: /* @__PURE__ */ jsxs(Table, {
-				ref,
-				...props,
-				"data-slot": "table",
-				className: cn(tableVariants(), className),
-				style: tableStyle,
-				sortDescriptor: activeSort,
-				onSortChange: (descriptor) => {
-					if (!isControlled) setUncontrolledSort(descriptor);
-					setPage(1);
-					onSortChange?.(descriptor);
-				},
-				onRowAction: onRowAction ? (key) => {
-					const row = rowsByKey.get(key);
-					if (row !== void 0) onRowAction(row);
-				} : void 0,
-				children: [
-					/* @__PURE__ */ jsxs(TableHeader, {
-						"data-slot": "table-header",
-						className: cnAll(tableHeaderVariants({ headerFill })),
-						children: [columns.map((column) => /* @__PURE__ */ jsxs(Column, {
-							id: column.id,
-							isRowHeader: column === columns[0],
-							allowsSorting: column.sortable,
-							"data-slot": "table-column",
-							className: cnAll(tableColumnVariants({
-								align: column.align ?? (column.numeric ? "end" : void 0),
-								headerType
-							})),
-							style: column.width === void 0 ? void 0 : { width: column.width },
-							children: [column.header, column.sortable ? /* @__PURE__ */ jsx(SortCaretGlyph, { direction: activeSort?.column === column.id ? activeSort.direction : "none" }) : null]
-						}, column.id)), onRowAction ? /* @__PURE__ */ jsx(Column, {
-							id: CHEVRON_COLUMN_ID,
-							"data-slot": "table-column",
-							className: cnAll(tableColumnVariants({ headerType }), CHEVRON_CELL),
-							children: ""
-						}) : null]
-					}),
-					/* @__PURE__ */ jsx(TableBody, {
-						"data-slot": "table-body",
-						renderEmptyState: empty === void 0 ? void 0 : () => empty,
-						children: visibleRows.map((row, index) => /* @__PURE__ */ jsxs(Row, {
-							id: getRowId(row),
-							"data-slot": "table-row",
-							"data-highlighted": isRowHighlighted?.(row) || void 0,
-							className: cn(cnAll(tableRowVariants({
-								variant,
-								striped
-							}), onRowAction && "cursor-pointer"), rowClassName?.(row)),
-							children: [columns.map((column) => {
-								const value = column.accessor(row);
-								return /* @__PURE__ */ jsx(Cell, {
-									"data-slot": "table-cell",
-									className: cnAll(tableCellVariants({
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: scrollRef,
+				"data-slot": "table-scroll",
+				className: cnAll(tableScrollVariants()),
+				children: /* @__PURE__ */ jsxs(Table, {
+					ref,
+					...props,
+					"data-slot": "table",
+					className: cn(tableVariants(), className),
+					style: tableStyle,
+					selectionMode: selectable ? "multiple" : void 0,
+					selectedKeys: selectable ? selection : void 0,
+					onSelectionChange: selectable ? commitSelection : void 0,
+					sortDescriptor: activeSort,
+					onSortChange: (descriptor) => {
+						if (!isControlled) setUncontrolledSort(descriptor);
+						setPage(1);
+						onSortChange?.(descriptor);
+					},
+					onRowAction: onRowAction ? (key) => {
+						const row = rowsByKey.get(key);
+						if (row !== void 0) onRowAction(row);
+					} : void 0,
+					children: [
+						/* @__PURE__ */ jsxs(TableHeader, {
+							"data-slot": "table-header",
+							className: cnAll(tableHeaderVariants({ headerFill })),
+							children: [
+								selectable ? /* @__PURE__ */ jsx(Column, {
+									id: SELECT_COLUMN_ID,
+									"data-slot": "table-column",
+									className: cnAll(tableColumnVariants({ headerType }), SELECT_CELL, stickyFirstColumn && stickyCell(headerFill === "none" ? "bare" : "header"), stickyFirstColumn && "border-e-0"),
+									children: /* @__PURE__ */ jsx(Checkbox$1, {
+										slot: "selection",
+										"aria-label": selectionLabels?.selectAll
+									})
+								}) : null,
+								columns.map((column) => /* @__PURE__ */ jsxs(Column, {
+									id: column.id,
+									isRowHeader: column === columns[0],
+									allowsSorting: column.sortable,
+									"data-slot": "table-column",
+									"data-sorted": sortedColumn === column.id || void 0,
+									className: cnAll(tableColumnVariants({
 										align: column.align ?? (column.numeric ? "end" : void 0),
-										numeric: column.numeric
-									})),
-									children: column.cell ? column.cell({
-										value,
-										row,
-										index
-									}) : renderValue(column, value, row)
-								}, column.id);
-							}), onRowAction ? /* @__PURE__ */ jsx(Cell, {
-								"data-slot": "table-cell",
-								className: cnAll(tableCellVariants(), CHEVRON_CELL),
-								children: /* @__PURE__ */ jsx(RowChevronGlyph, {})
-							}) : null]
-						}, String(getRowId(row))))
-					}),
-					totalRow ? /* @__PURE__ */ jsx(TableFooter, {
-						"data-slot": "table-footer",
-						className: cnAll(tableFooterVariants()),
-						children: /* @__PURE__ */ jsxs(Row, {
-							id: "__table_total",
-							children: [columns.map((col) => /* @__PURE__ */ jsx(Cell, {
-								"data-slot": "table-cell",
-								className: cnAll(tableCellVariants({
-									align: col.align ?? (col.numeric ? "end" : void 0),
-									numeric: col.numeric
-								})),
-								children: totalRow(col)
-							}, col.id)), onRowAction ? /* @__PURE__ */ jsx(Cell, {
-								"data-slot": "table-cell",
-								className: cnAll(tableCellVariants(), CHEVRON_CELL),
-								children: ""
-							}) : null]
+										headerType
+									}), stickyFirstColumn && column === columns[0] && stickyCell(headerFill === "none" ? "bare" : "header"), stickyFirstColumn && selectable && column === columns[0] && "start-11"),
+									style: column.width === void 0 ? void 0 : { width: column.width },
+									children: [column.header, column.sortable ? /* @__PURE__ */ jsx(SortCaretGlyph, { direction: activeSort?.column === column.id ? activeSort.direction : "none" }) : null]
+								}, column.id)),
+								onRowAction ? /* @__PURE__ */ jsx(Column, {
+									id: CHEVRON_COLUMN_ID,
+									"data-slot": "table-column",
+									className: cnAll(tableColumnVariants({ headerType }), CHEVRON_CELL),
+									children: ""
+								}) : null
+							]
+						}),
+						/* @__PURE__ */ jsx(TableBody, {
+							"data-slot": "table-body",
+							renderEmptyState: empty === void 0 ? void 0 : () => /* @__PURE__ */ jsx("div", {
+								"data-slot": "table-empty",
+								className: cnAll(tableEmptyVariants()),
+								children: empty
+							}),
+							children: visibleRows.map((row, index) => /* @__PURE__ */ jsxs(Row, {
+								id: getRowId(row),
+								"data-slot": "table-row",
+								"data-flip": String(getRowId(row)),
+								"data-highlighted": isRowHighlighted?.(row) || void 0,
+								className: cn(cnAll(tableRowVariants({
+									variant,
+									striped
+								}), onRowAction && "cursor-pointer"), rowClassName?.(row)),
+								children: [
+									selectable ? /* @__PURE__ */ jsx(Cell, {
+										"data-slot": "table-cell",
+										className: cnAll(tableCellVariants(), SELECT_CELL, stickyFirstColumn && stickyCell("body"), stickyFirstColumn && "border-e-0"),
+										children: /* @__PURE__ */ jsx(Checkbox$1, {
+											slot: "selection",
+											"aria-label": selectionLabels?.selectRow
+										})
+									}) : null,
+									columns.map((column) => {
+										const value = column.accessor(row);
+										return /* @__PURE__ */ jsx(Cell, {
+											"data-slot": "table-cell",
+											"data-sorted": sortedColumn === column.id || void 0,
+											className: cnAll(tableCellVariants({
+												align: column.align ?? (column.numeric ? "end" : void 0),
+												numeric: column.numeric
+											}), stickyFirstColumn && column === columns[0] && stickyCell("body"), stickyFirstColumn && selectable && column === columns[0] && "start-11"),
+											children: column.cell ? column.cell({
+												value,
+												row,
+												index
+											}) : renderValue(column, value, row)
+										}, column.id);
+									}),
+									onRowAction ? /* @__PURE__ */ jsx(Cell, {
+										"data-slot": "table-cell",
+										className: cnAll(tableCellVariants(), CHEVRON_CELL),
+										children: /* @__PURE__ */ jsx(RowChevronGlyph, {})
+									}) : null
+								]
+							}, String(getRowId(row))))
+						}),
+						totalRow ? /* @__PURE__ */ jsx(TableFooter, {
+							"data-slot": "table-footer",
+							className: cnAll(tableFooterVariants()),
+							children: /* @__PURE__ */ jsxs(Row, {
+								id: "__table_total",
+								children: [
+									selectable ? /* @__PURE__ */ jsx(Cell, {
+										"data-slot": "table-cell",
+										className: cnAll(tableCellVariants(), SELECT_CELL, stickyFirstColumn && stickyCell("bare"), stickyFirstColumn && "border-e-0"),
+										children: ""
+									}) : null,
+									columns.map((col) => /* @__PURE__ */ jsx(Cell, {
+										"data-slot": "table-cell",
+										className: cnAll(tableCellVariants({
+											align: col.align ?? (col.numeric ? "end" : void 0),
+											numeric: col.numeric
+										}), stickyFirstColumn && col === columns[0] && stickyCell("bare"), stickyFirstColumn && selectable && col === columns[0] && "start-11"),
+										children: totalRow(col)
+									}, col.id)),
+									onRowAction ? /* @__PURE__ */ jsx(Cell, {
+										"data-slot": "table-cell",
+										className: cnAll(tableCellVariants(), CHEVRON_CELL),
+										children: ""
+									}) : null
+								]
+							})
+						}) : null
+					]
+				})
+			}),
+			selectable ? /* @__PURE__ */ jsx(SelectionBar, {
+				count: selectedCount,
+				total: data.length,
+				labels: selectLabels,
+				onClear: () => commitSelection(/* @__PURE__ */ new Set())
+			}) : null,
+			rowsPerPage === void 0 || pageCount <= 1 && !pageSizeOptions ? null : /* @__PURE__ */ jsxs("nav", {
+				"data-slot": "table-pagination",
+				"aria-label": `${props["aria-label"]} pagination`,
+				className: cnAll(tablePaginationVariants()),
+				children: [/* @__PURE__ */ jsx("div", {
+					"data-slot": "table-pagination-pages",
+					className: "flex items-center gap-1",
+					children: pageCount <= 1 ? null : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						/* @__PURE__ */ jsx(Button$1, {
+							variant: "ghost",
+							size: "sm",
+							className: "w-(--density-control-h-sm) px-0",
+							"aria-label": labels.previous,
+							isDisabled: currentPage <= 1,
+							onPress: () => setPage(currentPage - 1),
+							children: /* @__PURE__ */ jsx(PageChevronGlyph, { direction: "previous" })
+						}),
+						pageWindow(currentPage, pageCount).map((entry, index) => entry === "ellipsis" ? /* @__PURE__ */ jsx("span", {
+							"data-slot": "table-pagination-ellipsis",
+							"aria-hidden": "true",
+							className: "px-2 text-sm text-muted-foreground",
+							children: "…"
+						}, `ellipsis-${String(index)}`) : /* @__PURE__ */ jsx(Button$1, {
+							variant: entry === currentPage ? "primary" : "ghost",
+							size: "sm",
+							className: "min-w-(--density-control-h-sm) px-2",
+							"aria-label": labels.page(entry, entry === currentPage),
+							onPress: () => setPage(entry),
+							children: entry
+						}, entry)),
+						/* @__PURE__ */ jsx(Button$1, {
+							variant: "ghost",
+							size: "sm",
+							className: "w-(--density-control-h-sm) px-0",
+							"aria-label": labels.next,
+							isDisabled: currentPage >= pageCount,
+							onPress: () => setPage(currentPage + 1),
+							children: /* @__PURE__ */ jsx(PageChevronGlyph, { direction: "next" })
 						})
-					}) : null
-				]
+					] })
+				}), pageSizeOptions === void 0 ? null : /* @__PURE__ */ jsx(Select$1, {
+					className: "w-auto",
+					label: labels.rowsPerPage,
+					labelHidden: true,
+					selectedKey: String(rowsPerPage),
+					onSelectionChange: (key) => {
+						const size = Number(key);
+						setChosenSize(size);
+						setPage(1);
+						onPageSizeChange?.(size);
+					},
+					children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+						id: String(option),
+						children: labels.perPage(option)
+					}, option))
+				})]
 			})
-		}), rowsPerPage === void 0 || pageCount <= 1 && !pageSizeOptions ? null : /* @__PURE__ */ jsxs("nav", {
-			"data-slot": "table-pagination",
-			"aria-label": `${props["aria-label"]} pagination`,
-			className: cnAll(tablePaginationVariants()),
-			children: [/* @__PURE__ */ jsx("div", {
-				"data-slot": "table-pagination-pages",
-				className: "flex items-center gap-1",
-				children: pageCount <= 1 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
-					/* @__PURE__ */ jsx(Button$1, {
-						variant: "ghost",
-						size: "sm",
-						className: "w-(--density-control-h-sm) px-0",
-						"aria-label": labels.previous,
-						isDisabled: currentPage <= 1,
-						onPress: () => setPage(currentPage - 1),
-						children: /* @__PURE__ */ jsx(PageChevronGlyph, { direction: "previous" })
-					}),
-					pageWindow(currentPage, pageCount).map((entry, index) => entry === "ellipsis" ? /* @__PURE__ */ jsx("span", {
-						"data-slot": "table-pagination-ellipsis",
-						"aria-hidden": "true",
-						className: "px-2 text-sm text-muted-foreground",
-						children: "…"
-					}, `ellipsis-${String(index)}`) : /* @__PURE__ */ jsx(Button$1, {
-						variant: entry === currentPage ? "primary" : "ghost",
-						size: "sm",
-						className: "min-w-(--density-control-h-sm) px-2",
-						"aria-label": labels.page(entry, entry === currentPage),
-						onPress: () => setPage(entry),
-						children: entry
-					}, entry)),
-					/* @__PURE__ */ jsx(Button$1, {
-						variant: "ghost",
-						size: "sm",
-						className: "w-(--density-control-h-sm) px-0",
-						"aria-label": labels.next,
-						isDisabled: currentPage >= pageCount,
-						onPress: () => setPage(currentPage + 1),
-						children: /* @__PURE__ */ jsx(PageChevronGlyph, { direction: "next" })
-					})
-				] })
-			}), pageSizeOptions === void 0 ? null : /* @__PURE__ */ jsx(Select$1, {
-				className: "w-auto",
-				label: labels.rowsPerPage,
-				labelHidden: true,
-				selectedKey: String(rowsPerPage),
-				onSelectionChange: (key) => {
-					const size = Number(key);
-					setChosenSize(size);
-					setPage(1);
-					onPageSizeChange?.(size);
-				},
-				children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, {
-					id: String(option),
-					children: labels.perPage(option)
-				}, option))
-			})]
-		})]
+		]
 	});
 });
 //#endregion
-export { Table$1 as Table, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableVariants };
+export { Table$1 as Table, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableStickyCellVariants, tableVariants };
 
 //# sourceMappingURL=table.js.map