@burtson-labs/ui 0.12.4 → 0.13.1

package/dist/components/data-table.js

@@ -2,7 +2,8 @@ import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { Checkbox } from "./checkbox.js";
-import { Pagination } from "./pagination.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
+import { Pagination, pageWindow, paginationSummary, usePagination } from "./pagination.js";
 import { Skeleton } from "./skeleton.js";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
 import * as React from "react";
@@ -12,6 +13,34 @@ import ChevronsUpDown from "@burtson-labs/icons/react/chevrons-up-down";
 import ArrowUp from "@burtson-labs/icons/react/arrow-up";
 import ArrowDown from "@burtson-labs/icons/react/arrow-down";
 //#region src/components/data-table.tsx
+var BREAKPOINTS = {
+	sm: 640,
+	md: 768,
+	lg: 1024,
+	xl: 1280
+};
+var hideBelowClass = {
+	sm: "hidden sm:table-cell",
+	md: "hidden md:table-cell",
+	lg: "hidden lg:table-cell",
+	xl: "hidden xl:table-cell"
+};
+var subscribeNone = () => () => void 0;
+/**
+* True while the viewport is narrower than `bp`. Without matchMedia (server
+* render, tests) it is false, so the table is the fallback.
+*/
+function useNarrowerThan(bp) {
+	const query = bp ? `(max-width: ${BREAKPOINTS[bp] - .02}px)` : null;
+	const subscribe = React.useCallback((onChange) => {
+		if (!query || typeof matchMedia !== "function") return () => void 0;
+		const mq = matchMedia(query);
+		mq.addEventListener?.("change", onChange);
+		return () => mq.removeEventListener?.("change", onChange);
+	}, [query]);
+	return React.useSyncExternalStore(query ? subscribe : subscribeNone, () => Boolean(query && typeof matchMedia === "function" && matchMedia(query).matches), () => false);
+}
+var textOf = (node) => typeof node === "string" || typeof node === "number" ? String(node) : void 0;
 var nextSort = (current, id) => {
 	if (!current || current.columnId !== id) return {
 		columnId: id,
@@ -26,15 +55,27 @@ var INTERACTIVE = "a,button,input,select,textarea,[role=\"checkbox\"],[role=\"me
 /**
 * A table recipe for records: sort, search, select, page, and row actions,
 * with loading, empty and error states. Fully controlled, so the data can
-* come from a server; the table never reorders rows itself.
+* come from a server; the table never reorders rows itself. On a phone the
+* rows become cards (`cardsBelow`), with the same columns.
 */
-function DataTable({ "aria-label": ariaLabel, columns, rows, getRowId, getRowLabel, sort, onSortChange, filter, onFilterChange, filterPlaceholder = "Search", selected, onSelectedChange, onRowAction, rowActions, page, pageCount, onPageChange, pageSummary, loading = false, error, onRetry, empty = "No results.", toolbar, density = "default", stickyHeader, className, ...props }) {
+function DataTable({ "aria-label": ariaLabel, columns, rows: rowsProp, getRowId, getRowLabel, sort, onSortChange, filter, onFilterChange, filterPlaceholder = "Search", selected, onSelectedChange, onRowAction, rowActions, page, pageCount, onPageChange, pageSummary, pageSize, pageSizeOptions, onPageSizeChange, totalRows, paginate, rowNoun, loading = false, error, onRetry, empty = "No results.", toolbar, density = "default", stickyHeader, cardsBelow = "md", className, ...props }) {
+	const paginateOptions = paginate === true ? {} : paginate || void 0;
+	const paging = usePagination(rowsProp, {
+		defaultPageSize: paginateOptions?.pageSize,
+		pageSizeOptions: paginateOptions?.pageSizeOptions,
+		storageKey: paginateOptions?.storageKey,
+		resetKey: `${filter ?? ""}\u0000${sort?.columnId ?? ""}\u0000${sort?.direction ?? ""}`
+	});
+	const rows = paginateOptions ? paging.rows : rowsProp;
+	const cards = useNarrowerThan(cardsBelow);
+	const uid = React.useId();
 	const selectable = Boolean(onSelectedChange);
 	const selectedSet = React.useMemo(() => new Set(selected ?? []), [selected]);
 	const ids = rows.map(getRowId);
 	const pageSelected = ids.filter((id) => selectedSet.has(id)).length;
 	const allState = ids.length > 0 && pageSelected === ids.length ? true : pageSelected > 0 ? "indeterminate" : false;
-	const colCount = columns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0);
+	const tableColumns = columns.filter((c) => !c.cardOnly);
+	const colCount = tableColumns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0);
 	const interactive = Boolean(onRowAction) || selectable;
 	const [active, setActive] = React.useState(0);
 	const frameRef = React.useRef(null);
@@ -89,112 +130,119 @@ function DataTable({ "aria-label": ariaLabel, columns, rows, getRowId, getRowLab
 			}
 		}
 	};
-	const showToolbar = Boolean(onFilterChange || toolbar || selectable && selectedSet.size);
-	let body;
-	if (error) body = /* @__PURE__ */ jsx(TableRow, {
-		className: "hover:bg-transparent",
-		children: /* @__PURE__ */ jsx(TableCell, {
-			colSpan: colCount,
-			className: "h-auto py-8 text-center whitespace-normal",
-			children: /* @__PURE__ */ jsxs("div", {
-				role: "alert",
-				className: "grid justify-items-center gap-3 text-sm",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "text-destructive",
-					children: error
-				}), onRetry && /* @__PURE__ */ jsx(Button, {
-					type: "button",
-					size: "sm",
-					variant: "outline",
-					onClick: onRetry,
-					children: "Try again"
+	const sortable = onSortChange ? columns.filter((c) => c.sortable) : [];
+	const columnLabel = (c) => c.cardLabel ?? textOf(c.header) ?? c.id;
+	const cardSort = cards && sortable.length > 0 && onSortChange ? /* @__PURE__ */ jsxs(Select, {
+		value: sort ? `${sort.columnId}:${sort.direction}` : "none",
+		onValueChange: (v) => {
+			if (v === "none") return onSortChange(null);
+			const [columnId = "", direction] = v.split(":");
+			onSortChange({
+				columnId,
+				direction: direction === "desc" ? "desc" : "asc"
+			});
+		},
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			"aria-label": "Sort by",
+			className: "pointer-coarse:h-11",
+			children: /* @__PURE__ */ jsx(SelectValue, {})
+		}), /* @__PURE__ */ jsxs(SelectContent, {
+			align: "end",
+			children: [/* @__PURE__ */ jsx(SelectItem, {
+				value: "none",
+				children: "Default order"
+			}), sortable.flatMap((c) => [/* @__PURE__ */ jsxs(SelectItem, {
+				value: `${c.id}:asc`,
+				children: [columnLabel(c), " ascending"]
+			}, `${c.id}:asc`), /* @__PURE__ */ jsxs(SelectItem, {
+				value: `${c.id}:desc`,
+				children: [columnLabel(c), " descending"]
+			}, `${c.id}:desc`)])]
+		})]
+	}) : null;
+	const cardSelectAll = cards && selectable ? /* @__PURE__ */ jsxs("label", {
+		htmlFor: `${uid}-all`,
+		className: "flex min-h-11 cursor-pointer items-center gap-2.5 pr-1 text-sm sm:min-h-9",
+		children: [/* @__PURE__ */ jsx(Checkbox, {
+			id: `${uid}-all`,
+			checked: allState,
+			onCheckedChange: toggleAll,
+			disabled: rows.length === 0,
+			"aria-label": "Select all rows on this page"
+		}), "Select all"]
+	}) : null;
+	const showToolbar = Boolean(onFilterChange || toolbar || selectable && selectedSet.size || cardSort || cardSelectAll);
+	const withNoun = (summary, total) => rowNoun && total ? `${summary} ${rowNoun}` : summary;
+	let pager = null;
+	if (paginateOptions) {
+		if (paging.hasPages) pager = /* @__PURE__ */ jsx(Pagination, {
+			...paging.paginationProps,
+			summary: withNoun(paging.summary, paging.total)
+		});
+	} else if (onPageChange && page !== void 0 && pageCount !== void 0 && pageCount > 0) pager = /* @__PURE__ */ jsx(Pagination, {
+		page,
+		pageCount,
+		onPageChange,
+		summary: pageSummary ?? (totalRows !== void 0 && pageSize ? withNoun(paginationSummary(pageWindow({
+			page,
+			pageSize,
+			total: totalRows
+		})), totalRows) : void 0),
+		pageSize,
+		pageSizeOptions,
+		onPageSizeChange
+	});
+	const toolbarNode = showToolbar && /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-wrap items-center gap-2",
+		children: [
+			onFilterChange && /* @__PURE__ */ jsxs("div", {
+				className: "relative min-w-0 basis-full sm:max-w-xs sm:flex-1 sm:basis-0",
+				children: [/* @__PURE__ */ jsx(Search, {
+					className: "pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground",
+					"aria-hidden": true
+				}), /* @__PURE__ */ jsx(Input, {
+					type: "search",
+					value: filter ?? "",
+					onChange: (e) => onFilterChange(e.target.value),
+					placeholder: filterPlaceholder,
+					"aria-label": `Search ${ariaLabel.toLowerCase()}`,
+					className: "pl-8"
 				})]
+			}),
+			cardSelectAll,
+			selectable && /* @__PURE__ */ jsx("span", {
+				"aria-live": "polite",
+				className: "text-xs text-muted-foreground tabular-nums",
+				children: selectedSet.size ? `${selectedSet.size} selected` : ""
+			}),
+			(toolbar || cardSort) && /* @__PURE__ */ jsxs("div", {
+				className: "ml-auto flex flex-wrap items-center gap-2",
+				children: [cardSort, toolbar]
 			})
-		})
-	});
-	else if (loading && rows.length === 0) body = Array.from({ length: 3 }, (_, r) => /* @__PURE__ */ jsx(TableRow, {
-		className: "hover:bg-transparent",
-		"aria-hidden": true,
-		children: Array.from({ length: colCount }, (_, c) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-full max-w-40" }) }, c))
-	}, `loading-${r}`));
-	else if (rows.length === 0) body = /* @__PURE__ */ jsx(TableRow, {
-		className: "hover:bg-transparent",
-		children: /* @__PURE__ */ jsx(TableCell, {
-			colSpan: colCount,
-			className: "h-auto py-10 text-center whitespace-normal text-muted-foreground",
-			children: empty
-		})
-	});
-	else body = rows.map((row, i) => {
-		const id = getRowId(row);
-		const isSelected = selectedSet.has(id);
-		const label = getRowLabel?.(row) ?? id;
-		return /* @__PURE__ */ jsxs(TableRow, {
-			selected: isSelected,
-			tabIndex: interactive ? i === activeRow ? 0 : -1 : void 0,
-			onFocus: () => setActive(i),
-			onKeyDown: interactive ? (e) => onRowKeyDown(e, i, row) : void 0,
-			onClick: onRowAction ? (e) => {
-				if (e.target.closest(INTERACTIVE)) return;
-				onRowAction(row);
-			} : void 0,
-			className: cn(interactive && "outline-none focus-visible:bg-muted/60 focus-visible:shadow-[inset_2px_0_0_var(--ring)]", onRowAction && "cursor-pointer"),
-			children: [
-				selectable && /* @__PURE__ */ jsx(TableCell, {
-					className: "w-10",
-					children: /* @__PURE__ */ jsx(Checkbox, {
-						checked: isSelected,
-						onCheckedChange: () => toggle(id),
-						"aria-label": `Select ${label}`,
-						tabIndex: -1
-					})
-				}),
-				columns.map((col) => /* @__PURE__ */ jsx(TableCell, {
-					numeric: col.numeric,
-					className: col.className,
-					children: col.cell(row)
-				}, col.id)),
-				rowActions && /* @__PURE__ */ jsx(TableCell, {
-					className: "w-12 text-right",
-					children: rowActions(row)
-				})
-			]
-		}, id);
+		]
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "data-table",
-		className: cn("grid min-w-0 gap-3", className),
+		"data-layout": cards ? "cards" : "table",
+		className: cn("grid min-w-0 grid-cols-[minmax(0,1fr)] gap-3", className),
 		...props,
 		children: [
-			showToolbar && /* @__PURE__ */ jsxs("div", {
-				className: "flex flex-wrap items-center gap-2",
-				children: [
-					onFilterChange && /* @__PURE__ */ jsxs("div", {
-						className: "relative w-full max-w-xs min-w-0 flex-1",
-						children: [/* @__PURE__ */ jsx(Search, {
-							className: "pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground",
-							"aria-hidden": true
-						}), /* @__PURE__ */ jsx(Input, {
-							type: "search",
-							value: filter ?? "",
-							onChange: (e) => onFilterChange(e.target.value),
-							placeholder: filterPlaceholder,
-							"aria-label": `Search ${ariaLabel.toLowerCase()}`,
-							className: "pl-8"
-						})]
-					}),
-					selectable && /* @__PURE__ */ jsx("span", {
-						"aria-live": "polite",
-						className: "text-xs text-muted-foreground tabular-nums",
-						children: selectedSet.size ? `${selectedSet.size} selected` : ""
-					}),
-					toolbar && /* @__PURE__ */ jsx("div", {
-						className: "ml-auto flex flex-wrap items-center gap-2",
-						children: toolbar
-					})
-				]
-			}),
-			/* @__PURE__ */ jsx("div", {
+			toolbarNode,
+			cards ? /* @__PURE__ */ jsx(DataTableCards, {
+				"aria-label": ariaLabel,
+				columns,
+				rows,
+				getRowId,
+				getRowLabel,
+				selectedSet,
+				onToggle: selectable ? toggle : void 0,
+				onRowAction,
+				rowActions,
+				loading,
+				error,
+				onRetry,
+				empty
+			}) : /* @__PURE__ */ jsx("div", {
 				ref: frameRef,
 				className: "rounded-lg border bg-surface",
 				children: /* @__PURE__ */ jsxs(Table, {
@@ -216,11 +264,11 @@ function DataTable({ "aria-label": ariaLabel, columns, rows, getRowId, getRowLab
 									"aria-label": "Select all rows on this page"
 								})
 							}),
-							columns.map((col) => {
+							tableColumns.map((col) => {
 								const sorted = sort?.columnId === col.id ? sort.direction : void 0;
 								return /* @__PURE__ */ jsx(TableHead, {
 									numeric: col.numeric,
-									className: col.className,
+									className: cn(col.hideBelow && hideBelowClass[col.hideBelow], col.className),
 									"aria-sort": col.sortable ? sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "none" : void 0,
 									children: col.sortable && onSortChange ? /* @__PURE__ */ jsxs("button", {
 										type: "button",
@@ -247,18 +295,204 @@ function DataTable({ "aria-label": ariaLabel, columns, rows, getRowId, getRowLab
 								})
 							})
 						]
-					}) }), /* @__PURE__ */ jsx(TableBody, { children: body })]
+					}) }), /* @__PURE__ */ jsx(TableBody, { children: error ? /* @__PURE__ */ jsx(TableRow, {
+						className: "hover:bg-transparent",
+						children: /* @__PURE__ */ jsx(TableCell, {
+							colSpan: colCount,
+							className: "h-auto py-8 text-center whitespace-normal",
+							children: /* @__PURE__ */ jsx(ErrorMessage, {
+								error,
+								onRetry
+							})
+						})
+					}) : loading && rows.length === 0 ? Array.from({ length: 3 }, (_, r) => /* @__PURE__ */ jsx(TableRow, {
+						className: "hover:bg-transparent",
+						"aria-hidden": true,
+						children: Array.from({ length: colCount }, (_, c) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-full max-w-40" }) }, c))
+					}, `loading-${r}`)) : rows.length === 0 ? /* @__PURE__ */ jsx(TableRow, {
+						className: "hover:bg-transparent",
+						children: /* @__PURE__ */ jsx(TableCell, {
+							colSpan: colCount,
+							className: "h-auto py-10 text-center whitespace-normal text-muted-foreground",
+							children: empty
+						})
+					}) : rows.map((row, i) => {
+						const id = getRowId(row);
+						const isSelected = selectedSet.has(id);
+						const label = getRowLabel?.(row) ?? id;
+						return /* @__PURE__ */ jsxs(TableRow, {
+							selected: isSelected,
+							tabIndex: interactive ? i === activeRow ? 0 : -1 : void 0,
+							onFocus: () => setActive(i),
+							onKeyDown: interactive ? (e) => onRowKeyDown(e, i, row) : void 0,
+							onClick: onRowAction ? (e) => {
+								if (e.target.closest(INTERACTIVE)) return;
+								onRowAction(row);
+							} : void 0,
+							className: cn(interactive && "outline-none focus-visible:bg-muted/60 focus-visible:shadow-[inset_2px_0_0_var(--ring)]", onRowAction && "cursor-pointer"),
+							children: [
+								selectable && /* @__PURE__ */ jsx(TableCell, {
+									className: "w-10",
+									children: /* @__PURE__ */ jsx(Checkbox, {
+										checked: isSelected,
+										onCheckedChange: () => toggle(id),
+										"aria-label": `Select ${label}`,
+										tabIndex: -1
+									})
+								}),
+								tableColumns.map((col) => /* @__PURE__ */ jsx(TableCell, {
+									numeric: col.numeric,
+									className: cn(col.hideBelow && hideBelowClass[col.hideBelow], col.className),
+									children: col.cell(row)
+								}, col.id)),
+								rowActions && /* @__PURE__ */ jsx(TableCell, {
+									className: "w-12 text-right",
+									children: rowActions(row)
+								})
+							]
+						}, id);
+					}) })]
 				})
 			}),
-			onPageChange && page !== void 0 && pageCount !== void 0 && pageCount > 0 && /* @__PURE__ */ jsx(Pagination, {
-				page,
-				pageCount,
-				onPageChange,
-				summary: pageSummary
-			})
+			pager
 		]
 	});
 }
+function ErrorMessage({ error, onRetry }) {
+	return /* @__PURE__ */ jsxs("div", {
+		role: "alert",
+		className: "grid justify-items-center gap-3 text-sm",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-destructive",
+			children: error
+		}), onRetry && /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			size: "sm",
+			variant: "outline",
+			onClick: onRetry,
+			children: "Try again"
+		})]
+	});
+}
+var cardLabelClass = "text-[11px] font-semibold tracking-[0.06em] text-muted-foreground uppercase";
+var liftControls = "[&_a]:relative [&_a]:z-10 [&_button]:relative [&_button]:z-10 [&_input]:relative [&_input]:z-10 [&_select]:relative [&_select]:z-10 [&_textarea]:relative [&_textarea]:z-10";
+/**
+* The phone layout: a list of articles, one per row, each named by its title.
+* The title is the row's open button (its hit area covers the card); the
+* checkbox, row actions and footer controls sit above it and keep their own
+* clicks. No roving focus: Tab walks the controls, as in any list of links.
+*/
+function DataTableCards({ "aria-label": ariaLabel, columns, rows, getRowId, getRowLabel, selectedSet, onToggle, onRowAction, rowActions, loading, error, onRetry, empty }) {
+	const uid = React.useId();
+	if (error) return /* @__PURE__ */ jsx("div", {
+		className: "rounded-lg border bg-surface px-4 py-8",
+		children: /* @__PURE__ */ jsx(ErrorMessage, {
+			error,
+			onRetry
+		})
+	});
+	if (rows.length === 0 && !loading) return /* @__PURE__ */ jsx("div", {
+		className: "rounded-lg border bg-surface px-4 py-10 text-center text-sm text-muted-foreground",
+		children: empty
+	});
+	const visible = columns.filter((c) => c.card !== "hidden");
+	const firstUnplaced = visible.some((c) => c.card === "title") ? void 0 : visible.find((c) => c.card === void 0);
+	const slotOf = (c) => c.card ?? (c === firstUnplaced ? "title" : "field");
+	const inSlot = (s) => visible.filter((c) => slotOf(c) === s);
+	const title = inSlot("title");
+	const subtitle = inSlot("subtitle");
+	const aside = inSlot("aside");
+	const fields = inSlot("field");
+	const footer = inSlot("footer");
+	const show = (c, row) => (c.cardCell ?? c.cell)(row);
+	return /* @__PURE__ */ jsx("ul", {
+		role: "list",
+		"aria-label": ariaLabel,
+		"aria-busy": loading || void 0,
+		"data-slot": "data-table-cards",
+		className: cn("grid gap-2", loading && rows.length > 0 && "opacity-60 transition-opacity"),
+		children: loading && rows.length === 0 ? Array.from({ length: 3 }, (_, r) => /* @__PURE__ */ jsxs("li", {
+			"aria-hidden": true,
+			className: "grid gap-3 rounded-lg border bg-surface p-3.5",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-3/4" })]
+		}, `loading-${r}`)) : rows.map((row, i) => {
+			const id = getRowId(row);
+			const label = getRowLabel?.(row) ?? id;
+			const isSelected = selectedSet.has(id);
+			const titleId = `${uid}-${i}`;
+			return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("article", {
+				"aria-labelledby": title.length ? titleId : void 0,
+				"aria-label": title.length ? void 0 : label,
+				"data-slot": "data-table-card",
+				"data-state": isSelected ? "selected" : void 0,
+				className: cn("relative grid gap-3 rounded-lg border bg-surface p-3.5 shadow-xs transition-colors", onRowAction && "hover:bg-muted/40 has-[[data-row-action]:focus-visible]:border-ring has-[[data-row-action]:focus-visible]:inset-ring-1 has-[[data-row-action]:focus-visible]:inset-ring-ring", "data-[state=selected]:border-brand/40 data-[state=selected]:bg-brand-soft/60"),
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-start gap-3",
+						children: [
+							onToggle && /* @__PURE__ */ jsx("label", {
+								htmlFor: `${titleId}-select`,
+								className: "relative z-10 -mx-3.5 -my-3 grid size-11 shrink-0 cursor-pointer place-items-center",
+								children: /* @__PURE__ */ jsx(Checkbox, {
+									id: `${titleId}-select`,
+									checked: isSelected,
+									onCheckedChange: () => onToggle(id),
+									"aria-label": `Select ${label}`
+								})
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "grid min-w-0 flex-1 gap-0.5",
+								children: title.map((c, j) => /* @__PURE__ */ jsx("div", {
+									id: j === 0 ? titleId : void 0,
+									className: "min-w-0 text-[15px] leading-5 font-semibold [overflow-wrap:anywhere]",
+									children: onRowAction && j === 0 ? /* @__PURE__ */ jsx("button", {
+										type: "button",
+										"data-row-action": "",
+										onClick: () => onRowAction(row),
+										className: "text-left outline-hidden! after:absolute after:inset-0 after:rounded-lg",
+										children: show(c, row)
+									}) : show(c, row)
+								}, c.id))
+							}),
+							aside.length > 0 && /* @__PURE__ */ jsx("div", {
+								className: "relative z-10 flex shrink-0 flex-col items-end gap-1",
+								children: aside.map((c) => /* @__PURE__ */ jsx("div", { children: show(c, row) }, c.id))
+							}),
+							rowActions && /* @__PURE__ */ jsx("div", {
+								className: "relative z-10 -my-2.5 -mr-1.5 shrink-0",
+								children: rowActions(row)
+							})
+						]
+					}),
+					subtitle.length > 0 && /* @__PURE__ */ jsx("div", {
+						className: cn("-mt-2 grid min-w-0 gap-0.5", liftControls, onToggle && "pl-7"),
+						children: subtitle.map((c) => /* @__PURE__ */ jsx("div", {
+							className: "min-w-0 text-sm text-muted-foreground [overflow-wrap:anywhere]",
+							children: show(c, row)
+						}, c.id))
+					}),
+					fields.length > 0 && /* @__PURE__ */ jsx("dl", {
+						className: cn("grid grid-cols-2 gap-x-4 gap-y-2.5 text-sm", liftControls),
+						children: fields.map((c) => /* @__PURE__ */ jsxs("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ jsx("dt", {
+								className: cardLabelClass,
+								children: c.cardLabel ?? c.header
+							}), /* @__PURE__ */ jsx("dd", {
+								className: cn("mt-0.5 min-w-0 [overflow-wrap:anywhere]", c.numeric && "tabular-nums"),
+								children: show(c, row)
+							})]
+						}, c.id))
+					}),
+					footer.map((c) => /* @__PURE__ */ jsx("div", {
+						className: "relative z-10 flex flex-wrap gap-2",
+						children: show(c, row)
+					}, c.id))
+				]
+			}) }, id);
+		})
+	});
+}
 //#endregion
 export { DataTable };