@coldsmirk/ledger-mantine 0.3.1 → 0.4.0

package/dist/index.cjs

@@ -52,30 +52,74 @@ let _mantine_dates = require("@mantine/dates");
 */
 const [DataTableProvider, useDataTableContext] = (0, _mantine_core.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__ */ (0, react_jsx_runtime.jsx)(_mantine_core.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__ */ (0, react_jsx_runtime.jsx)(icons.expandRow, {})
+		children: /* @__PURE__ */ (0, react_jsx_runtime.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();
@@ -83,13 +127,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__ */ (0, react_jsx_runtime.jsx)(icons.expandRow, {})
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.expandRow, { size: SIZES[size].glyph })
 	});
 }
 //#endregion
@@ -516,7 +560,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 } = (0, _dnd_kit_react.useDraggable)({
@@ -574,13 +618,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__ */ (0, react_jsx_runtime.jsx)(icons.reorderRow, { size: 14 })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.reorderRow, { size: SIZES[size].glyph })
 		})
 	});
 }
@@ -597,7 +641,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();
@@ -606,7 +650,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();
@@ -615,7 +659,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();
@@ -626,7 +670,7 @@ function SelectionCell({ row }) {
 		checked: selected,
 		disabled: !row.getCanSelect(),
 		name: `${instanceId}-selection`,
-		size: "xs",
+		size: SIZES[size].control,
 		onChange: noop,
 		onClick: select
 	});
@@ -635,7 +679,7 @@ function SelectionCell({ row }) {
 		checked: selected,
 		disabled: !row.getCanSelect(),
 		indeterminate: !selected && row.getIsSomeSelected(),
-		size: "xs",
+		size: SIZES[size].control,
 		onChange: noop,
 		onClick: select
 	});
@@ -687,9 +731,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,
@@ -704,9 +745,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,
@@ -718,9 +756,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,
@@ -1565,7 +1600,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 = (0, react.useId)();
 	const { pageIndex, pageSize } = table.atoms.pagination.get();
 	const total = table.getRowCount();
@@ -1581,7 +1616,7 @@ function PaginationBarCore({ table, labels, pageSizeOptions, className, style })
 		wrap: "wrap",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Text, {
 			c: "dimmed",
-			size: "sm",
+			size,
 			children: labels.paginationSummary(from, to, total)
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Group, {
 			gap: "md",
@@ -1592,19 +1627,19 @@ function PaginationBarCore({ table, labels, pageSizeOptions, className, style })
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Text, {
 					c: "dimmed",
 					id: pageSizeLabelId,
-					size: "sm",
+					size,
 					children: labels.rowsPerPage
 				}, "label"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.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__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Pagination, {
-				size: "sm",
+				size: SIZES[size].control,
 				total: pageCount,
 				value: pageIndex + 1,
 				onChange: (page) => table.setPageIndex(page - 1)
@@ -1616,26 +1651,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__ */ (0, react_jsx_runtime.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 } = (0, _mantine_core.useProps)("DataTablePagination", paginationDefaultProps, props);
+	const { table, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, labels, size, className, style } = (0, _mantine_core.useProps)("DataTablePagination", paginationDefaultProps, props);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationBarCore, {
 		className: (0, clsx.default)("ledger-pagination-bar", className),
 		labels: resolveLabels(labels),
 		pageSizeOptions,
+		size,
 		style,
 		table
 	});
@@ -1793,7 +1830,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);
@@ -1842,7 +1879,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__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"aria-busy": pending || void 0,
@@ -1864,7 +1902,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;
@@ -1922,7 +1960,8 @@ function RowCellEditor({ cell }) {
 		},
 		error: editError,
 		pending,
-		label
+		label,
+		size: SIZES[size].control
 	}) : normalized.render({
 		row: cell.row,
 		column: cell.column,
@@ -1934,7 +1973,8 @@ function RowCellEditor({ cell }) {
 		pending,
 		mode: "row",
 		autoFocus,
-		label
+		label,
+		size: SIZES[size].control
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref: containerRef,
@@ -2327,7 +2367,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
@@ -2375,7 +2415,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();
@@ -2386,13 +2426,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__ */ (0, react_jsx_runtime.jsx)(icons.expandRow, { size: 12 })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.expandRow, { size: SIZES[size].glyph })
 			}),
 			(0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
@@ -2416,7 +2456,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;
@@ -2448,7 +2488,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__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Loader, {
 				"aria-label": labels.editPending,
@@ -3020,7 +3061,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;
@@ -3032,7 +3073,7 @@ function FilterPopover({ column }) {
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Popover.Target, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.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__ */ (0, react_jsx_runtime.jsx)(icons.filterColumn, {})
@@ -3474,8 +3515,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();
@@ -3551,9 +3593,9 @@ function HeaderCell({ header, table, reorder, resize, columnWidths, columnSizing
 					...getStyles("sortIndicator"),
 					"data-sorted": sorted || void 0,
 					children: [
-						sorted === "asc" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.sortAsc, { size: 14 }),
-						sorted === "desc" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.sortDesc, { size: 14 }),
-						sorted === false && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.sortable, { size: 14 }),
+						sorted === "asc" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.sortAsc, { size: glyph }),
+						sorted === "desc" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.sortDesc, { size: glyph }),
+						sorted === false && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.sortable, { size: glyph }),
 						sorted !== false && sortCount > 1 && sortIndex >= 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("sup", { children: sortIndex + 1 })
 					]
 				})]
@@ -3706,7 +3748,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] = (0, react.useState)(0);
 	const measure = (0, react.useCallback)(() => {
 		if (!viewport) return;
@@ -3725,6 +3767,12 @@ function useColumnWidths(table, columns, viewport, tableMinWidth) {
 	const resolved = (0, react.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,
@@ -3736,7 +3784,8 @@ function useColumnWidths(table, columns, viewport, tableMinWidth) {
 		columns,
 		columnSizing,
 		availableWidth,
-		defaultColumn
+		defaultColumn,
+		injectedWidth
 	]);
 	const signature = JSON.stringify([resolved.total, Object.entries(resolved.byId)]);
 	return (0, react.useMemo)(() => resolved, [signature]);
@@ -6411,8 +6460,7 @@ const defaultProps = {
 	withColumnBorders: false,
 	withRowBorders: true,
 	withBottomBorder: false,
-	verticalSpacing: "xs",
-	horizontalSpacing: "xs",
+	size: "sm",
 	tabularNums: false,
 	virtualizedRows: false,
 	virtualizedColumns: false,
@@ -6426,12 +6474,13 @@ const defaultProps = {
 function leafCol(column) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { style: { width: `var(${columnWidthVar(column.id)})` } }, column.id);
 }
-const varsResolver = (0, _mantine_core.createVarsResolver)((theme, { stripedColor, highlightOnHoverColor, borderColor, radius }) => {
+const varsResolver = (0, _mantine_core.createVarsResolver)((theme, { stripedColor, highlightOnHoverColor, borderColor, radius, size }) => {
 	return { root: {
 		"--ledger-striped-color": stripedColor ? (0, _mantine_core.getThemeColor)(stripedColor, theme) : void 0,
 		"--ledger-hover-color": highlightOnHoverColor ? (0, _mantine_core.getThemeColor)(highlightOnHoverColor, theme) : void 0,
 		"--ledger-border-color": borderColor ? (0, _mantine_core.getThemeColor)(borderColor, theme) : void 0,
-		"--ledger-radius": radius === void 0 ? void 0 : (0, _mantine_core.getRadius)(radius)
+		"--ledger-radius": radius === void 0 ? void 0 : (0, _mantine_core.getRadius)(radius),
+		"--ledger-font-size": (0, _mantine_core.getFontSize)(size)
 	} };
 });
 const OPTION_KEY_SET = /* @__PURE__ */ new Set([
@@ -6552,7 +6601,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 = (0, _mantine_core.useStyles)({
 		name: "DataTable",
 		classes,
@@ -6605,9 +6654,11 @@ function DataTableCore({ presentation, stylesProps, table }) {
 	const displayOrderSignature = JSON.stringify(displayColumns.map((column) => column.id));
 	const ledgerColumns = table.options.meta?.ledger?.columns;
 	const visibleLeafColumns = (0, react.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;
@@ -7037,11 +7088,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,
@@ -7077,6 +7128,7 @@ function DataTableCore({ presentation, stylesProps, table }) {
 			getStyles: stylesRevision,
 			labels,
 			icons,
+			size,
 			filterMode,
 			virtualizedRows: virtualEnabled,
 			withColumnHeaders: columnHeadersVisible,
@@ -7100,6 +7152,7 @@ function DataTableCore({ presentation, stylesProps, table }) {
 		stylesRevision,
 		labels,
 		icons,
+		size,
 		filterMode,
 		virtualEnabled,
 		columnHeadersVisible,
@@ -7123,6 +7176,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,
@@ -7287,14 +7341,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__ */ (0, react_jsx_runtime.jsx)(_mantine_core.TextInput, {
+const renderTextEditor = ({ value, setValue, error, pending, autoFocus, label, size }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.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)
 });
@@ -7304,13 +7359,13 @@ const renderTextEditor = ({ value, setValue, error, pending, autoFocus, label })
 function textEditor() {
 	return renderTextEditor;
 }
-const renderNumberEditor = ({ value, setValue, error, pending, autoFocus, label }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.NumberInput, {
+const renderNumberEditor = ({ value, setValue, error, pending, autoFocus, label, size }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.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)
 });
@@ -7326,7 +7381,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__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Select, {
+	return ({ value, setValue, commit, error, pending, mode, autoFocus, label, size }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Select, {
 		"aria-label": label,
 		autoFocus,
 		comboboxProps: { withinPortal: true },
@@ -7334,7 +7389,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);
@@ -7342,12 +7397,12 @@ function selectEditor(options) {
 		}
 	});
 }
-const renderCheckboxEditor = ({ value, commit, pending, error, label }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Checkbox, {
+const renderCheckboxEditor = ({ value, commit, pending, error, label, size }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Checkbox, {
 	"aria-label": label,
 	checked: Boolean(value),
 	disabled: pending,
 	error: Boolean(error),
-	size: "xs",
+	size,
 	onChange: (event) => void commit(event.currentTarget.checked)
 });
 /**