@coldsmirk/ledger-mantine 0.3.1 → 0.4.0

package/dist/index.js

@@ -2,7 +2,7 @@
 import { move } from "@dnd-kit/helpers";
 import { DragDropProvider, PointerSensor, useDraggable } from "@dnd-kit/react";
 import { useSortable } from "@dnd-kit/react/sortable";
-import { ActionIcon, Box, Button, Center, Checkbox, CloseButton, EmptyState, Group, Loader, LoadingOverlay, MultiSelect, NumberInput, Pagination, Popover, Portal, Radio, ScrollArea, SegmentedControl, Select, Skeleton, Stack, Table, Text, TextInput, Tooltip, VisuallyHidden, createSafeContext, createVarsResolver, genericFactory, getRadius, getThemeColor, useMantineClassNamesPrefix, useMantineIsHeadless, useMantineStylesTransform, useMantineTheme, useMantineWithStaticClasses, useProps, useStyles } from "@mantine/core";
+import { ActionIcon, Box, Button, Center, Checkbox, CloseButton, EmptyState, Group, Loader, LoadingOverlay, MultiSelect, NumberInput, Pagination, Popover, Portal, Radio, ScrollArea, SegmentedControl, Select, Skeleton, Stack, Table, Text, TextInput, Tooltip, VisuallyHidden, createSafeContext, createVarsResolver, genericFactory, getFontSize, getRadius, getThemeColor, useMantineClassNamesPrefix, useMantineIsHeadless, useMantineStylesTransform, useMantineTheme, useMantineWithStaticClasses, useProps, useStyles } from "@mantine/core";
 import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { AutoScroller, Cursor, PointerActivationConstraints, PreventSelection } from "@dnd-kit/dom";
@@ -28,30 +28,74 @@ import { DatePicker } from "@mantine/dates";
 */
 const [DataTableProvider, useDataTableContext] = createSafeContext("DataTable parts must be rendered inside <DataTable>");
 //#endregion
+//#region src/size.ts
+const SIZES = {
+	xs: {
+		verticalSpacing: 5,
+		horizontalSpacing: 8,
+		rowHeight: 31,
+		control: "xs",
+		glyph: 12,
+		injectedWidth: 36
+	},
+	sm: {
+		verticalSpacing: 7,
+		horizontalSpacing: 10,
+		rowHeight: 37,
+		control: "xs",
+		glyph: 14,
+		injectedWidth: 40
+	},
+	md: {
+		verticalSpacing: 8,
+		horizontalSpacing: 12,
+		rowHeight: 43,
+		control: "sm",
+		glyph: 16,
+		injectedWidth: 48
+	},
+	lg: {
+		verticalSpacing: 10,
+		horizontalSpacing: 16,
+		rowHeight: 51,
+		control: "md",
+		glyph: 18,
+		injectedWidth: 62
+	},
+	xl: {
+		verticalSpacing: 14,
+		horizontalSpacing: 20,
+		rowHeight: 61,
+		control: "lg",
+		glyph: 20,
+		injectedWidth: 76
+	}
+};
+//#endregion
 //#region src/expander.tsx
 /**
 * The injected expander column: a per-row chevron (detail panels and sub-row trees share it)
 * and an expand-all header affordance for trees. Clicks never reach `onRowClick`.
 */
 function ExpanderHeaderCell({ table }) {
-	const { labels, icons, expansion } = useDataTableContext();
+	const { labels, icons, expansion, size } = useDataTableContext();
 	if (!table.options.getSubRows) return null;
 	const allExpanded = table.getIsAllRowsExpanded();
 	const canSomeExpand = table.getCanSomeRowsExpand();
 	return /* @__PURE__ */ jsx(ActionIcon, {
 		"aria-label": allExpanded ? labels.collapseAll : labels.expandAll,
 		"data-expanded": allExpanded || void 0,
-		size: "sm",
+		size: SIZES[size].control,
 		variant: "subtle",
 		onClick: (event) => {
 			event.stopPropagation();
 			expansion?.toggleAll(!allExpanded, canSomeExpand);
 		},
-		children: /* @__PURE__ */ jsx(icons.expandRow, {})
+		children: /* @__PURE__ */ jsx(icons.expandRow, { size: SIZES[size].glyph })
 	});
 }
 function ExpanderCell({ row }) {
-	const { labels, icons, expansion } = useDataTableContext();
+	const { labels, icons, expansion, size } = useDataTableContext();
 	const canExpand = row.getCanExpand();
 	if (!canExpand) return null;
 	const expanded = row.getIsExpanded();
@@ -59,13 +103,13 @@ function ExpanderCell({ row }) {
 		"aria-expanded": expanded,
 		"aria-label": expanded ? labels.collapseRow : labels.expandRow,
 		"data-expanded": expanded || void 0,
-		size: "sm",
+		size: SIZES[size].control,
 		variant: "subtle",
 		onClick: (event) => {
 			event.stopPropagation();
 			expansion?.toggle(row.id, expanded, canExpand);
 		},
-		children: /* @__PURE__ */ jsx(icons.expandRow, {})
+		children: /* @__PURE__ */ jsx(icons.expandRow, { size: SIZES[size].glyph })
 	});
 }
 //#endregion
@@ -492,7 +536,7 @@ function RowReorderOverlay({ session }) {
 * why (docs/rows.md#row-ordering).
 */
 function RowDragCell({ row, table }) {
-	const { labels, icons, rowReorderKeyboard } = useDataTableContext();
+	const { labels, icons, rowReorderKeyboard, size } = useDataTableContext();
 	const orderable = table.options.meta?.ledger?.rowOrdering.orderable === true;
 	const pinned = table.options.enableRowPinning === true && row.getIsPinned() !== false;
 	const { ref, isDragSource } = useDraggable({
@@ -550,13 +594,13 @@ function RowDragCell({ row, table }) {
 			"aria-label": labels.reorderRow,
 			"aria-pressed": lifted || void 0,
 			color: "gray",
-			size: "sm",
+			size: SIZES[size].control,
 			variant: "subtle",
 			onBlur: () => {
 				if (lifted) rowReorderKeyboard?.cancel();
 			},
 			onKeyDown: handleKeyDown,
-			children: /* @__PURE__ */ jsx(icons.reorderRow, { size: 14 })
+			children: /* @__PURE__ */ jsx(icons.reorderRow, { size: SIZES[size].glyph })
 		})
 	});
 }
@@ -573,7 +617,7 @@ function RowDragCell({ row, table }) {
 */
 function noop() {}
 function SelectionHeaderCell({ table }) {
-	const { labels, selection } = useDataTableContext();
+	const { labels, selection, size } = useDataTableContext();
 	if (table.options.enableMultiRowSelection === false) return null;
 	const scope = table.options.meta?.ledger?.selectAllScope ?? "all";
 	const allSelected = scope === "page" ? table.getIsAllPageRowsSelected() : table.getIsAllRowsSelected();
@@ -582,7 +626,7 @@ function SelectionHeaderCell({ table }) {
 		"aria-label": labels.selectAllRows,
 		checked: allSelected,
 		indeterminate: !allSelected && someSelected,
-		size: "xs",
+		size: SIZES[size].control,
 		onChange: noop,
 		onClick: (event) => {
 			event.stopPropagation();
@@ -591,7 +635,7 @@ function SelectionHeaderCell({ table }) {
 	});
 }
 function SelectionCell({ row }) {
-	const { labels, instanceId, selection } = useDataTableContext();
+	const { labels, instanceId, selection, size } = useDataTableContext();
 	const selected = row.getIsSelected();
 	const select = (event) => {
 		event.stopPropagation();
@@ -602,7 +646,7 @@ function SelectionCell({ row }) {
 		checked: selected,
 		disabled: !row.getCanSelect(),
 		name: `${instanceId}-selection`,
-		size: "xs",
+		size: SIZES[size].control,
 		onChange: noop,
 		onClick: select
 	});
@@ -611,7 +655,7 @@ function SelectionCell({ row }) {
 		checked: selected,
 		disabled: !row.getCanSelect(),
 		indeterminate: !selected && row.getIsSomeSelected(),
-		size: "xs",
+		size: SIZES[size].control,
 		onChange: noop,
 		onClick: select
 	});
@@ -663,9 +707,6 @@ function buildColumns({ columns, withRowDrag, withSelection, withExpander, rowDr
 	const result = [];
 	if (withRowDrag) result.push(injectedColumn({
 		id: ROW_DRAG_COLUMN_ID,
-		size: 36,
-		minSize: 36,
-		maxSize: 36,
 		enableSorting: false,
 		enableHiding: false,
 		enableResizing: false,
@@ -680,9 +721,6 @@ function buildColumns({ columns, withRowDrag, withSelection, withExpander, rowDr
 	}, rowDragColumn));
 	if (withSelection) result.push(injectedColumn({
 		id: SELECTION_COLUMN_ID,
-		size: 40,
-		minSize: 40,
-		maxSize: 40,
 		enableSorting: false,
 		enableHiding: false,
 		enableResizing: false,
@@ -694,9 +732,6 @@ function buildColumns({ columns, withRowDrag, withSelection, withExpander, rowDr
 	}, selectionColumn));
 	if (withExpander) result.push(injectedColumn({
 		id: EXPANDER_COLUMN_ID,
-		size: 36,
-		minSize: 36,
-		maxSize: 36,
 		enableSorting: false,
 		enableHiding: false,
 		enableResizing: false,
@@ -1541,7 +1576,7 @@ const DEFAULT_PAGE_SIZE_OPTIONS = [
 	50,
 	100
 ];
-function PaginationBarCore({ table, labels, pageSizeOptions, className, style }) {
+function PaginationBarCore({ table, labels, pageSizeOptions, size, className, style }) {
 	const pageSizeLabelId = useId();
 	const { pageIndex, pageSize } = table.atoms.pagination.get();
 	const total = table.getRowCount();
@@ -1557,7 +1592,7 @@ function PaginationBarCore({ table, labels, pageSizeOptions, className, style })
 		wrap: "wrap",
 		children: [/* @__PURE__ */ jsx(Text, {
 			c: "dimmed",
-			size: "sm",
+			size,
 			children: labels.paginationSummary(from, to, total)
 		}), /* @__PURE__ */ jsxs(Group, {
 			gap: "md",
@@ -1568,19 +1603,19 @@ function PaginationBarCore({ table, labels, pageSizeOptions, className, style })
 				children: [/* @__PURE__ */ jsx(Text, {
 					c: "dimmed",
 					id: pageSizeLabelId,
-					size: "sm",
+					size,
 					children: labels.rowsPerPage
 				}, "label"), /* @__PURE__ */ jsx(Select, {
 					allowDeselect: false,
 					"aria-labelledby": pageSizeLabelId,
 					data: sizeOptions.map(String),
-					size: "xs",
+					size: SIZES[size].control,
 					value: String(pageSize),
 					w: 84,
 					onChange: (value) => value !== null && table.setPageSize(Number(value))
 				})]
 			}), /* @__PURE__ */ jsx(Pagination, {
-				size: "sm",
+				size: SIZES[size].control,
 				total: pageCount,
 				value: pageIndex + 1,
 				onChange: (page) => table.setPageIndex(page - 1)
@@ -1592,26 +1627,28 @@ function PaginationBarCore({ table, labels, pageSizeOptions, className, style })
 * The built-in bar rendered by <DataTable> (context-styled).
 */
 function PaginationBar({ table, pageSizeOptions }) {
-	const { labels, getStyles } = useDataTableContext();
+	const { labels, getStyles, size } = useDataTableContext();
 	const { className, style } = getStyles("paginationBar");
 	return /* @__PURE__ */ jsx(PaginationBarCore, {
 		className,
 		labels,
 		pageSizeOptions,
+		size,
 		style,
 		table
 	});
 }
-const paginationDefaultProps = {};
+const paginationDefaultProps = { size: "sm" };
 /**
 * Standalone compound (`DataTable.Pagination`) — place it anywhere, theme it via defaultProps.
 */
 function DataTablePagination(props) {
-	const { table, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, labels, className, style } = useProps("DataTablePagination", paginationDefaultProps, props);
+	const { table, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, labels, size, className, style } = useProps("DataTablePagination", paginationDefaultProps, props);
 	return /* @__PURE__ */ jsx(PaginationBarCore, {
 		className: clsx("ledger-pagination-bar", className),
 		labels: resolveLabels(labels),
 		pageSizeOptions,
+		size,
 		style,
 		table
 	});
@@ -1769,7 +1806,7 @@ function canEditCell(cell, row) {
 * commit, and the pending presentation around it.
 */
 function CellEditor({ cell }) {
-	const { labels, getStyles } = useDataTableContext();
+	const { labels, getStyles, size } = useDataTableContext();
 	const { table } = cell.getContext();
 	const editing = table.options.meta?.ledger?.editing;
 	const normalized = normalizeEdit(cell.column.columnDef.meta?.edit);
@@ -1818,7 +1855,8 @@ function CellEditor({ cell }) {
 		pending,
 		mode: "cell",
 		autoFocus: true,
-		label: labels.editColumn(columnHeaderText(cell.column))
+		label: labels.editColumn(columnHeaderText(cell.column)),
+		size: SIZES[size].control
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		"aria-busy": pending || void 0,
@@ -1840,7 +1878,7 @@ function CellEditor({ cell }) {
 * a virtualized unmount), blur never commits, and Enter/Escape commit or cancel the whole row.
 */
 function RowCellEditor({ cell }) {
-	const { labels, getStyles } = useDataTableContext();
+	const { labels, getStyles, size } = useDataTableContext();
 	const { table } = cell.getContext();
 	const editing = table.options.meta?.ledger?.editing;
 	const rowApi = editing?.row;
@@ -1898,7 +1936,8 @@ function RowCellEditor({ cell }) {
 		},
 		error: editError,
 		pending,
-		label
+		label,
+		size: SIZES[size].control
 	}) : normalized.render({
 		row: cell.row,
 		column: cell.column,
@@ -1910,7 +1949,8 @@ function RowCellEditor({ cell }) {
 		pending,
 		mode: "row",
 		autoFocus,
-		label
+		label,
+		size: SIZES[size].control
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		ref: containerRef,
@@ -2303,7 +2343,7 @@ function usePinnedRowOffsets(topCount, bottomCount) {
 * variables).
 */
 const TREE_INDENT_PX = 20;
-const DEFAULT_ESTIMATED_ROW_HEIGHT = 44;
+const DEFAULT_ESTIMATED_ROW_HEIGHT = SIZES.sm.rowHeight;
 const DEFAULT_OVERSCAN = 8;
 /**
 * Whether any leaf definition declares a merge — the gate that keeps span-index reads (and the
@@ -2351,7 +2391,7 @@ function countDisplayRows(rows, withDetailPanels) {
 * Grouped cell: expander, the grouped value, and the group size.
 */
 function GroupCell({ cell }) {
-	const { labels, icons, expansion } = useDataTableContext();
+	const { labels, icons, expansion, size } = useDataTableContext();
 	const { row } = cell;
 	const expandedGroup = row.getIsExpanded();
 	const canExpandGroup = row.getCanExpand();
@@ -2362,13 +2402,13 @@ function GroupCell({ cell }) {
 				"aria-expanded": expandedGroup,
 				"aria-label": expandedGroup ? labels.collapseRow : labels.expandRow,
 				"data-expanded": expandedGroup || void 0,
-				size: "xs",
+				size: SIZES[size].control,
 				variant: "subtle",
 				onClick: (event) => {
 					event.stopPropagation();
 					expansion?.toggle(row.id, expandedGroup, canExpandGroup);
 				},
-				children: /* @__PURE__ */ jsx(icons.expandRow, { size: 12 })
+				children: /* @__PURE__ */ jsx(icons.expandRow, { size: SIZES[size].glyph })
 			}),
 			flexRender$1(cell.column.columnDef.cell, cell.getContext()),
 			/* @__PURE__ */ jsxs("span", {
@@ -2392,7 +2432,7 @@ function GroupCell({ cell }) {
 * `onRowClick` out.
 */
 function InstantCell({ cell, render }) {
-	const { labels, getStyles } = useDataTableContext();
+	const { labels, getStyles, size } = useDataTableContext();
 	const { table } = cell.getContext();
 	const instant = table.options.meta?.ledger?.editing.instant;
 	const rowId = cell.row.id;
@@ -2424,7 +2464,8 @@ function InstantCell({ cell, render }) {
 				commit: (next) => instant.commit(rowId, columnId, next),
 				pending,
 				error,
-				label: labels.editColumn(columnHeaderText(cell.column))
+				label: labels.editColumn(columnHeaderText(cell.column)),
+				size: SIZES[size].control
 			}),
 			pending && /* @__PURE__ */ jsx(Loader, {
 				"aria-label": labels.editPending,
@@ -2996,7 +3037,7 @@ function autosizeColumn(setColumnSizing, { columnId, minSize, maxSize, hasFilter
 */
 const FACETED_OPTIONS_CAP = 100;
 function FilterPopover({ column }) {
-	const { labels, icons, getStyles, filterMode } = useDataTableContext();
+	const { labels, icons, getStyles, filterMode, size } = useDataTableContext();
 	const filter = column.columnDef.meta?.filter;
 	if (!filter || !column.getCanFilter()) return null;
 	const active = column.getFilterValue() !== void 0;
@@ -3008,7 +3049,7 @@ function FilterPopover({ column }) {
 		children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(ActionIcon, {
 			"aria-label": name,
 			"data-active": active || void 0,
-			size: "sm",
+			size: SIZES[size].control,
 			variant: active ? "light" : "subtle",
 			onClick: (event) => event.stopPropagation(),
 			children: /* @__PURE__ */ jsx(icons.filterColumn, {})
@@ -3450,8 +3491,9 @@ function TableHeader({ table, columnWidths, columnSizing, columnWindow }) {
 	});
 }
 function HeaderCell({ header, table, reorder, resize, columnWidths, columnSizing, colSpan, ariaColIndex }) {
-	const { getStyles, labels, icons } = useDataTableContext();
+	const { getStyles, labels, icons, size } = useDataTableContext();
 	const { column } = header;
+	const { glyph } = SIZES[size];
 	const { meta } = column.columnDef;
 	const internal = isInternalColumn(column.id);
 	const canSort = column.getCanSort();
@@ -3527,9 +3569,9 @@ function HeaderCell({ header, table, reorder, resize, columnWidths, columnSizing
 					...getStyles("sortIndicator"),
 					"data-sorted": sorted || void 0,
 					children: [
-						sorted === "asc" && /* @__PURE__ */ jsx(icons.sortAsc, { size: 14 }),
-						sorted === "desc" && /* @__PURE__ */ jsx(icons.sortDesc, { size: 14 }),
-						sorted === false && /* @__PURE__ */ jsx(icons.sortable, { size: 14 }),
+						sorted === "asc" && /* @__PURE__ */ jsx(icons.sortAsc, { size: glyph }),
+						sorted === "desc" && /* @__PURE__ */ jsx(icons.sortDesc, { size: glyph }),
+						sorted === false && /* @__PURE__ */ jsx(icons.sortable, { size: glyph }),
 						sorted !== false && sortCount > 1 && sortIndex >= 0 && /* @__PURE__ */ jsx("sup", { children: sortIndex + 1 })
 					]
 				})]
@@ -3682,7 +3724,7 @@ function minWidthPx(tableMinWidth, viewport) {
 	if (!tableElement) return Number.parseFloat(tableMinWidth) || 0;
 	return Number.parseFloat(getComputedStyle(tableElement).minWidth) || 0;
 }
-function useColumnWidths(table, columns, viewport, tableMinWidth) {
+function useColumnWidths(table, columns, viewport, tableMinWidth, injectedWidth) {
 	const [availableWidth, setAvailableWidth] = useState(0);
 	const measure = useCallback(() => {
 		if (!viewport) return;
@@ -3701,6 +3743,12 @@ function useColumnWidths(table, columns, viewport, tableMinWidth) {
 	const resolved = useMemo(() => {
 		return resolveColumnWidths(columns.map((column) => {
 			const raw = rawColumnSizing(column.columnDef);
+			if (isInternalColumn(column.id)) return {
+				id: column.id,
+				size: raw?.size ?? injectedWidth,
+				minSize: raw?.minSize ?? injectedWidth,
+				maxSize: raw?.maxSize ?? injectedWidth
+			};
 			return {
 				id: column.id,
 				size: raw ? raw.size ?? defaultColumn?.size : column.columnDef.size,
@@ -3712,7 +3760,8 @@ function useColumnWidths(table, columns, viewport, tableMinWidth) {
 		columns,
 		columnSizing,
 		availableWidth,
-		defaultColumn
+		defaultColumn,
+		injectedWidth
 	]);
 	const signature = JSON.stringify([resolved.total, Object.entries(resolved.byId)]);
 	return useMemo(() => resolved, [signature]);
@@ -6387,8 +6436,7 @@ const defaultProps = {
 	withColumnBorders: false,
 	withRowBorders: true,
 	withBottomBorder: false,
-	verticalSpacing: "xs",
-	horizontalSpacing: "xs",
+	size: "sm",
 	tabularNums: false,
 	virtualizedRows: false,
 	virtualizedColumns: false,
@@ -6402,12 +6450,13 @@ const defaultProps = {
 function leafCol(column) {
 	return /* @__PURE__ */ jsx("col", { style: { width: `var(${columnWidthVar(column.id)})` } }, column.id);
 }
-const varsResolver = createVarsResolver((theme, { stripedColor, highlightOnHoverColor, borderColor, radius }) => {
+const varsResolver = createVarsResolver((theme, { stripedColor, highlightOnHoverColor, borderColor, radius, size }) => {
 	return { root: {
 		"--ledger-striped-color": stripedColor ? getThemeColor(stripedColor, theme) : void 0,
 		"--ledger-hover-color": highlightOnHoverColor ? getThemeColor(highlightOnHoverColor, theme) : void 0,
 		"--ledger-border-color": borderColor ? getThemeColor(borderColor, theme) : void 0,
-		"--ledger-radius": radius === void 0 ? void 0 : getRadius(radius)
+		"--ledger-radius": radius === void 0 ? void 0 : getRadius(radius),
+		"--ledger-font-size": getFontSize(size)
 	} };
 });
 const OPTION_KEY_SET = /* @__PURE__ */ new Set([
@@ -6528,7 +6577,7 @@ function DataTableFromOptions({ props }) {
 	});
 }
 function DataTableCore({ presentation, stylesProps, table }) {
-	const { striped, stripedColor: _stripedColor, highlightOnHover, highlightOnHoverColor: _highlightOnHoverColor, withTableBorder, withColumnBorders, withRowBorders, withBottomBorder, borderColor: _borderColor, radius: _radius, verticalSpacing, horizontalSpacing, tabularNums, tableMinWidth, virtualizedRows, virtualizedColumns, onEndReached, endReachedOffset, loadingMore, loadMoreError, loading, emptyState, error, onRetry, withColumnHeaders, withPaginationBar, pageSizeOptions, onRowClick, onRowActivate, onRowDoubleClick, onRowContextMenu, rowProps, headerRowProps, footerRowProps, viewportProps, labels: labelsProp, icons: iconsProp, handleRef, ref: rootRef, classNames, styles, unstyled, vars, className, style, attributes, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...others } = presentation;
+	const { striped, stripedColor: _stripedColor, highlightOnHover, highlightOnHoverColor: _highlightOnHoverColor, withTableBorder, withColumnBorders, withRowBorders, withBottomBorder, borderColor: _borderColor, radius: _radius, size: sizeProp, verticalSpacing, horizontalSpacing, tabularNums, tableMinWidth, virtualizedRows, virtualizedColumns, onEndReached, endReachedOffset, loadingMore, loadMoreError, loading, emptyState, error, onRetry, withColumnHeaders, withPaginationBar, pageSizeOptions, onRowClick, onRowActivate, onRowDoubleClick, onRowContextMenu, rowProps, headerRowProps, footerRowProps, viewportProps, labels: labelsProp, icons: iconsProp, handleRef, ref: rootRef, classNames, styles, unstyled, vars, className, style, attributes, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...others } = presentation;
 	const getStyles = useStyles({
 		name: "DataTable",
 		classes,
@@ -6581,9 +6630,11 @@ function DataTableCore({ presentation, stylesProps, table }) {
 	const displayOrderSignature = JSON.stringify(displayColumns.map((column) => column.id));
 	const ledgerColumns = table.options.meta?.ledger?.columns;
 	const visibleLeafColumns = useMemo(() => displayColumns, [displayOrderSignature, ledgerColumns]);
-	const columnWidths = useColumnWidths(table, visibleLeafColumns, viewport, tableMinWidth);
+	const size = sizeProp ?? "sm";
+	const scale = SIZES[size];
+	const columnWidths = useColumnWidths(table, visibleLeafColumns, viewport, tableMinWidth, scale.injectedWidth);
 	const virtualization = virtualizedRows ? {
-		estimateHeight: typeof virtualizedRows === "object" && virtualizedRows.estimateHeight !== void 0 ? virtualizedRows.estimateHeight : 44,
+		estimateHeight: typeof virtualizedRows === "object" && virtualizedRows.estimateHeight !== void 0 ? virtualizedRows.estimateHeight : scale.rowHeight,
 		overscan: typeof virtualizedRows === "object" && virtualizedRows.overscan !== void 0 ? virtualizedRows.overscan : 8
 	} : null;
 	const virtualEnabled = virtualization !== null;
@@ -7013,11 +7064,11 @@ function DataTableCore({ presentation, stylesProps, table }) {
 	]);
 	const stripedMode = striped === true ? "odd" : striped || void 0;
 	const sharedTableProps = {
-		horizontalSpacing,
+		horizontalSpacing: horizontalSpacing ?? scale.horizontalSpacing,
 		layout: "fixed",
 		role: "presentation",
 		tabularNums,
-		verticalSpacing
+		verticalSpacing: verticalSpacing ?? scale.verticalSpacing
 	};
 	const tableStyleProps = () => getStyles("table", { style: {
 		width: columnWidths.total > 0 ? columnWidths.total : void 0,
@@ -7053,6 +7104,7 @@ function DataTableCore({ presentation, stylesProps, table }) {
 			getStyles: stylesRevision,
 			labels,
 			icons,
+			size,
 			filterMode,
 			virtualizedRows: virtualEnabled,
 			withColumnHeaders: columnHeadersVisible,
@@ -7076,6 +7128,7 @@ function DataTableCore({ presentation, stylesProps, table }) {
 		stylesRevision,
 		labels,
 		icons,
+		size,
 		filterMode,
 		virtualEnabled,
 		columnHeadersVisible,
@@ -7099,6 +7152,7 @@ function DataTableCore({ presentation, stylesProps, table }) {
 				"data-loading": loading || void 0,
 				"data-scrolled-end": scrollEdges.end || void 0,
 				"data-scrolled-start": scrollEdges.start || void 0,
+				"data-size": size,
 				"data-striped": stripedMode,
 				"data-virtualized-columns": columnWindow !== null || void 0,
 				"data-virtualized-rows": virtualEnabled || void 0,
@@ -7263,14 +7317,15 @@ DataTable.SelectionBar = DataTableSelectionBar;
 * The shipped editor renderers — conveniences, never the mechanism. Each is an ordinary
 * renderer over the public editing contexts (docs/editing.md#editors), which is the proof the
 * contexts suffice: anything these do, an application's own renderer can do the same way.
-* All are default-variant Mantine inputs — the border marks the cell as an open editor.
+* All are default-variant Mantine inputs at the context's `size` — the border marks the cell as an
+* open editor, and the size keeps it inside the row.
 */
-const renderTextEditor = ({ value, setValue, error, pending, autoFocus, label }) => /* @__PURE__ */ jsx(TextInput, {
+const renderTextEditor = ({ value, setValue, error, pending, autoFocus, label, size }) => /* @__PURE__ */ jsx(TextInput, {
 	"aria-label": label,
 	autoFocus,
 	disabled: pending,
 	error,
-	size: "xs",
+	size,
 	value: value === null || value === void 0 ? "" : String(value),
 	onChange: (event) => setValue(event.currentTarget.value)
 });
@@ -7280,13 +7335,13 @@ const renderTextEditor = ({ value, setValue, error, pending, autoFocus, label })
 function textEditor() {
 	return renderTextEditor;
 }
-const renderNumberEditor = ({ value, setValue, error, pending, autoFocus, label }) => /* @__PURE__ */ jsx(NumberInput, {
+const renderNumberEditor = ({ value, setValue, error, pending, autoFocus, label, size }) => /* @__PURE__ */ jsx(NumberInput, {
 	hideControls: true,
 	"aria-label": label,
 	autoFocus,
 	disabled: pending,
 	error,
-	size: "xs",
+	size,
 	value: typeof value === "number" || typeof value === "string" ? value : "",
 	onChange: (next) => setValue(next === "" ? null : next)
 });
@@ -7302,7 +7357,7 @@ function numberEditor() {
 * draft-bound field among the row's others, and the row's own commit decides.
 */
 function selectEditor(options) {
-	return ({ value, setValue, commit, error, pending, mode, autoFocus, label }) => /* @__PURE__ */ jsx(Select, {
+	return ({ value, setValue, commit, error, pending, mode, autoFocus, label, size }) => /* @__PURE__ */ jsx(Select, {
 		"aria-label": label,
 		autoFocus,
 		comboboxProps: { withinPortal: true },
@@ -7310,7 +7365,7 @@ function selectEditor(options) {
 		defaultDropdownOpened: mode === "cell",
 		disabled: pending,
 		error,
-		size: "xs",
+		size,
 		value: value === null || value === void 0 ? null : String(value),
 		onChange: (next) => {
 			setValue(next);
@@ -7318,12 +7373,12 @@ function selectEditor(options) {
 		}
 	});
 }
-const renderCheckboxEditor = ({ value, commit, pending, error, label }) => /* @__PURE__ */ jsx(Checkbox, {
+const renderCheckboxEditor = ({ value, commit, pending, error, label, size }) => /* @__PURE__ */ jsx(Checkbox, {
 	"aria-label": label,
 	checked: Boolean(value),
 	disabled: pending,
 	error: Boolean(error),
-	size: "xs",
+	size,
 	onChange: (event) => void commit(event.currentTarget.checked)
 });
 /**