@stealthscale/component-tables 0.1.0

package/dist/recipe-DKCE3olL.js

@@ -0,0 +1,488 @@
+import { CONTROL_INSET_END, CONTROL_INSET_START, defineSlotRecipe, dense } from "@stealthscale/theme/authoring";
+//#region src/data-table/properties.ts
+/**
+* Names the custom properties the collections table's rows and cells state, which the data table's
+* recipes read and set.
+*/
+/**
+* Custom property of a row's fill, which the collections table's rows state and paint.
+*/
+const ROW_FILL = "--table-row-fill";
+/**
+* Custom property of the ink the collections table's rows rule their cells in.
+*/
+const RULE_INK = "--table-rule";
+/**
+* Custom property of the width of the rule under the collections table's rows.
+*/
+const RULE_WIDTH = "--table-rule-width";
+/**
+* Custom property of a cell's inline inset at the table's size, which the collections table's
+* cells state and an editor's control starts its text at.
+*/
+const CELL_INSET = "--table-cell-inset";
+//#endregion
+//#region src/data-table/gridded.ts
+/**
+* Styles a grid's cells and the editor over a cell: the selected fill, the line along the
+* selection's outer edges, the focus ring, the unsaved mark, the editor's control and the reason a
+* value was refused.
+*
+* @remarks
+*   In a grid a selected cell fills with the palette's subtle role over its row, a line in the
+*   palette's solid runs along the selection's outer edges, and the cell with the tab stop rings
+*   its edge inside while it has keyboard focus. An open editor covers its cell. The cell's content
+*   remains under it, hidden, so the cell keeps its size. The editor's control fills the cell with
+*   square corners and starts its text at the cell's inline inset less its edge, where the cell's
+*   text starts, and ends it there in a column of figures. The reason a value was refused is placed
+*   under the cell in the error inks, over the rows below, or above the cell in a body's last row,
+*   so the scroller never clips it. It is as wide as its words up to `sizes.xs`, from the cell's
+*   end in a column of figures. A cell with an unsaved change marks its inline start with a bar in
+*   the warning palette's solid, `CanvasText` under forced colours.
+*/
+/**
+* Styles a cell of a grid: the selected fill, the line along the selection's outer edges, the
+* unsaved mark, and the focus ring inside the cell with the tab stop.
+*
+* @remarks
+*   A selected cell paints the fill it states over its row, as a pinned cell paints its row's fill
+*   over the panel. The line is a box over the cell, as wide as the indicator on each side
+*   `data-edges` lists, in the palette's solid, which is at least 3:1 against the panel. Each side
+*   reads its own custom property, so no rule depends on the order of another. Under forced colours
+*   a selected cell fills with `Highlight` over `Canvas`, and its text, its rule, its line and its
+*   focus ring take `HighlightText`. A cell whose editor is open shows no line and takes no forced
+*   fill. Its editor covers the cell with a field in the forced colours of every field.
+*/
+const GRIDDED = {
+	"&:is([data-edges], [data-editing], [data-unsaved]):not([data-pinned])": { position: "relative" },
+	"&[aria-selected=true]": {
+		backgroundImage: `linear-gradient(var(${ROW_FILL}), var(${ROW_FILL}))`,
+		[ROW_FILL]: "colors.colorPalette.subtle"
+	},
+	"&[aria-selected=true]:not([data-editing])": { _highContrast: {
+		"& *": { color: "HighlightText" },
+		backgroundColor: "Canvas",
+		color: "HighlightText",
+		focusRingColor: "HighlightText",
+		forcedColorAdjust: "none",
+		[ROW_FILL]: "Highlight",
+		[RULE_INK]: "HighlightText"
+	} },
+	"&[data-edges]": { _after: {
+		_highContrast: { borderColor: "HighlightText" },
+		borderBlockEndWidth: "var(--edge-block-end, 0)",
+		borderBlockStartWidth: "var(--edge-block-start, 0)",
+		borderColor: "colorPalette.solid",
+		borderInlineEndWidth: "var(--edge-inline-end, 0)",
+		borderInlineStartWidth: "var(--edge-inline-start, 0)",
+		borderStyle: "solid",
+		content: "\"\"",
+		inset: "0",
+		pointerEvents: "none",
+		position: "absolute"
+	} },
+	"&[data-edges~=block-end]": { "--edge-block-end": "borderWidths.indicator" },
+	"&[data-edges~=block-start]": { "--edge-block-start": "borderWidths.indicator" },
+	"&[data-edges~=inline-end]": { "--edge-inline-end": "borderWidths.indicator" },
+	"&[data-edges~=inline-start]": { "--edge-inline-start": "borderWidths.indicator" },
+	"&[data-editing]": { _after: { display: "none" } },
+	"&[data-unsaved]": { _before: {
+		_highContrast: {
+			background: "CanvasText",
+			forcedColorAdjust: "none"
+		},
+		background: "warning.solid",
+		content: "\"\"",
+		inlineSize: "{borderWidths.indicator}",
+		insetBlock: "0",
+		insetInlineStart: "0",
+		pointerEvents: "none",
+		position: "absolute"
+	} },
+	"&[tabindex]": {
+		_focusVisible: { outlineOffset: "calc({borderWidths.ring} * -1)" },
+		focusRingColor: "colorPalette.focusRing",
+		focusVisibleRing: "inside"
+	}
+};
+/**
+* Styles the editor over a cell: a flex box over the cell's padding box, whose control fills it
+* with square corners and starts its text where the cell's text starts.
+*/
+const EDITOR = {
+	"[data-numeric] > &": { "& input": { textAlign: "end" } },
+	"& > :first-child": {
+		borderRadius: "none",
+		[CONTROL_INSET_END]: `calc(var(${CELL_INSET}) - {borderWidths.control})`,
+		[CONTROL_INSET_START]: `calc(var(${CELL_INSET}) - {borderWidths.control})`,
+		flex: "1",
+		maxBlockSize: "full",
+		minBlockSize: "full",
+		minInlineSize: "0"
+	},
+	display: "flex",
+	inset: "0",
+	position: "absolute"
+};
+/**
+* Styles the reason a value was refused: a box in the error inks under the cell, above it in a
+* body's last row, as wide as its words up to `sizes.xs`.
+*/
+const EDITOR_ERROR = {
+	"[data-numeric] > * > &": {
+		insetInlineEnd: "0",
+		insetInlineStart: "auto"
+	},
+	background: "bg.panel",
+	borderColor: "border.error",
+	borderRadius: "l2",
+	borderStyle: "solid",
+	borderWidth: "hairline",
+	color: "fg.error",
+	inlineSize: "max-content",
+	insetBlockStart: "100%",
+	insetInlineStart: "0",
+	marginBlockStart: dense("{spacing.gap.xs}"),
+	maxInlineSize: "xs",
+	paddingBlock: dense("{spacing.gap.xs}"),
+	paddingInline: dense("{spacing.inset.xs}"),
+	position: "absolute",
+	textStyle: "body.sm",
+	"tr:last-child > * > * > &": {
+		insetBlockEnd: "100%",
+		insetBlockStart: "auto",
+		marginBlockEnd: dense("{spacing.gap.xs}"),
+		marginBlockStart: "0"
+	},
+	zIndex: "3"
+};
+//#endregion
+//#region src/data-table/recipe.ts
+/**
+* Recipe for the parts a data table adds around the collections table: the column that stacks the
+* table and its controls, the row of a header's name and its column actions, the indicators in a
+* header and a row, the resize separator, the cells of a pinned column, the widths of a sized
+* table, and words that render only for assistive technology.
+*
+* @remarks
+*   The table's own look (its surface, rules, stripes and sizes) is the collections table's recipe,
+*   which `DataTable.Table` passes its axes to. The sort indicator is the caller's glyph, pointing
+*   up. It turns half a circle for a descending sort. On a sortable column that is not sorted it is
+*   transparent until the pointer is over the sort button or the button has keyboard focus. The
+*   expand indicator is the caller's glyph, pointing to the inline end, and turns a quarter while
+*   the row's detail is open. A pinned column's cells stick at `--pin-offset` from their region's
+*   edge on the panel under their row's fill, and the column at a region's edge rules its side next
+*   to the scrolling columns. A sized table is as wide as `--table-size`, each column as wide as
+*   its `--column-size`, and its scroller as wide as the table and never wider than its room. A
+*   header with column actions lays its name and the actions out in an inline row, which the header
+*   aligns as it aligns its name, so the actions follow the name, or precede it in a column of
+*   figures, where the header renders them first. The actions take a negative block margin of half
+*   the difference between an `xs` button and a line, so a header with actions is as tall as one
+*   without. A range filter lays its two fields out side by side, and a value filter writes each
+*   value's count in the muted ink with tabular figures. The column manager stacks its list over
+*   its reset button, which keeps its own width. The page size select follows its label in a row,
+*   the label in the muted ink at the small body size. A body row that ends a region of rows
+*   another region follows, such as the last row pinned to the top, rules its end at the indicator
+*   width. A cell whose rows span ends on the body's last row takes no rule before a footer, as the
+*   last row's cells do. The search field is at most `sizes.xs` wide. A resize separator is centred
+*   on its column's end, and the last column's is inside the table's end, so the table overflows
+*   nothing. Its line is transparent at rest and takes the palette's solid under the pointer, with
+*   keyboard focus and while it resizes, `Highlight` under forced colours. In a windowed table a
+*   group of pinned rows sticks on the panel over the rows that scroll: the top group under the
+*   header at `--table-head-size`, the bottom group at the viewport's end. A spacer row is as tall
+*   as `--spacer-size`, and its cell has no padding. A row with a tab stop, in a table with levels,
+*   rings its edge inside while it has keyboard focus. A cell that leads with a row's toggle lays
+*   the toggle and its content out in a row, indented `spacing.6` for each of `--row-depth` levels.
+*   A button in a body cell, a row's toggle, a detail button or a pin toggle, is in a box as wide
+*   as an `xs` button with the same negative block margin, so a row with a button is as tall as one
+*   without. A checkbox of the select column is in a box one line tall that centres it, so a row or
+*   a header with a checkbox is as tall as one without. A `Code` chip in a cell aligns to the
+*   bottom of the cell's text, so a small chip keeps its row's height. A grid's cells, the editor
+*   over a cell and the reason a value was refused take `GRIDDED`, `EDITOR` and `EDITOR_ERROR`, and
+*   an open editor's cell content is hidden under it.
+*/
+/**
+* Styles an indicator that turns: a box around the caller's glyph that turns at the press pace,
+* at once under reduced motion.
+*/
+const TURNING = {
+	_motionReduce: { transitionDuration: "0s" },
+	alignItems: "center",
+	display: "inline-flex",
+	flexShrink: "0",
+	transitionDuration: "press",
+	transitionProperty: "opacity, rotate",
+	transitionTimingFunction: "press"
+};
+/**
+* Styles the cells of a pinned column: sticky at the offset, the panel under the row's fill, and
+* a rule in the row's ink at the side of the region's edge.
+*
+* @remarks
+*   The row's fill is its stripe, its hover fill or its selected fill, so a pinned cell matches
+*   its row and hides the figures scrolled under it. Under forced colours a selected row's fill is
+*   `Highlight` and its ink `HighlightText`. A pinned cell paints `Canvas` under it, the row's own
+*   composite, because Chromium's `Highlight` is 80% opaque.
+*/
+const PINNED = {
+	"&[data-pinned]": {
+		backgroundColor: "bg.panel",
+		backgroundImage: `linear-gradient(var(${ROW_FILL}), var(${ROW_FILL}))`,
+		position: "sticky",
+		"tr[aria-selected=true] > &": { _highContrast: { backgroundColor: "Canvas" } },
+		zIndex: "1"
+	},
+	"&[data-pinned=end]": { insetInlineEnd: "var(--pin-offset)" },
+	"&[data-pinned=end][data-pinned-edge]": {
+		borderInlineStartColor: `var(${RULE_INK}, {colors.border})`,
+		borderInlineStartWidth: "indicator"
+	},
+	"&[data-pinned=start]": { insetInlineStart: "var(--pin-offset)" },
+	"&[data-pinned=start][data-pinned-edge]": {
+		borderInlineEndColor: `var(${RULE_INK}, {colors.border})`,
+		borderInlineEndWidth: "indicator"
+	}
+};
+/**
+* Styles the cells of a column that fits its content: as narrow as the content while the table
+* lays out its columns by their content, where a column declaration sizes a sized table's.
+*/
+const FIT = { "&[data-fit]": { inlineSize: "0" } };
+/**
+* Styles a cell whose rows span ends on the body's last row: before a footer it takes no rule, as
+* the collections table's last row does, because the footer rules its own start.
+*/
+const SPAN_END = { "&[data-span-end]": { "tbody:has(+ tfoot) > tr > &": { [RULE_WIDTH]: "0" } } };
+/**
+* Aligns typography's `Code` chip in a cell to the bottom of the cell's text.
+*
+* @remarks
+*   A chip at `sm` then keeps its row at 41px, and its text's middle is within a third of a pixel
+*   of the next cell's text in Firefox and Chromium. A chip at `md` is as tall as the line and
+*   makes a 42px row.
+*/
+const CHIP = { "& .code": { verticalAlign: "text-bottom" } };
+/**
+* Height of the smallest button, which an action or a toggle in a line of text is.
+*/
+const BUTTON = dense("{sizes.control.xs}");
+/**
+* Styles the box around a button in a line of text with a negative block margin of half the
+* difference between the button and the line, so the line keeps its height.
+*/
+const ONE_LINE = { marginBlock: `calc((1lh - ${BUTTON}) / 2)` };
+/**
+* Defines the data table recipe.
+*/
+const recipe = defineSlotRecipe({
+	base: {
+		actions: {
+			...ONE_LINE,
+			alignItems: "center",
+			display: "flex",
+			flexShrink: "0"
+		},
+		branch: {
+			alignItems: "center",
+			display: "flex",
+			gap: dense("{spacing.gap.xs}"),
+			paddingInlineStart: `calc(var(--row-depth, 0) * ${dense("{spacing.6}")})`
+		},
+		cell: {
+			...PINNED,
+			...FIT,
+			...SPAN_END,
+			...CHIP,
+			...GRIDDED
+		},
+		column: { inlineSize: "var(--column-size)" },
+		columnHeader: {
+			...PINNED,
+			...FIT,
+			"&[data-resizable]:not([data-pinned])": { position: "relative" }
+		},
+		count: {
+			color: "fg.muted",
+			fontVariantNumeric: "tabular-nums"
+		},
+		covered: { visibility: "hidden" },
+		editor: EDITOR,
+		editorError: EDITOR_ERROR,
+		expandIndicator: {
+			...TURNING,
+			_open: { rotate: "90deg" },
+			_rtl: {
+				_open: { rotate: "90deg" },
+				rotate: "180deg"
+			}
+		},
+		frame: { "&[data-sized]": {
+			inlineSize: "fit-content",
+			maxInlineSize: "full"
+		} },
+		heading: {
+			alignItems: "center",
+			display: "inline-flex",
+			gap: dense("{spacing.gap.xs}"),
+			verticalAlign: "middle"
+		},
+		manager: {
+			display: "flex",
+			flexDirection: "column",
+			gap: dense("{spacing.gap.sm}")
+		},
+		pageSize: {
+			alignItems: "center",
+			display: "inline-flex",
+			gap: dense("{spacing.gap.sm}")
+		},
+		pageSizeLabel: {
+			color: "fg.muted",
+			textStyle: "body.sm",
+			whiteSpace: "nowrap"
+		},
+		panel: { inlineSize: "60" },
+		range: {
+			display: "grid",
+			gap: dense("{spacing.gap.sm}"),
+			gridTemplateColumns: "repeat(2, minmax(0, 1fr))"
+		},
+		region: {
+			"&[data-pinned=bottom]": { insetBlockEnd: "0" },
+			"&[data-pinned=top]": { insetBlockStart: "var(--table-head-size)" },
+			backgroundColor: "bg.panel",
+			position: "sticky",
+			zIndex: "2"
+		},
+		reset: { alignSelf: "flex-end" },
+		resizer: {
+			_after: {
+				background: "transparent",
+				content: "\"\"",
+				forcedColorAdjust: "none",
+				inlineSize: "{borderWidths.indicator}",
+				insetBlock: "0",
+				insetInlineStart: "50%",
+				marginInlineStart: "calc({borderWidths.indicator} / -2)",
+				position: "absolute"
+			},
+			"&:is(:hover, :focus-visible, [data-resizing])": { _after: {
+				_highContrast: { background: "Highlight" },
+				background: "colorPalette.solid"
+			} },
+			background: "transparent",
+			blockSize: "full",
+			borderStyle: "none",
+			cursor: "resizeColumn",
+			focusVisibleRing: "inside",
+			inlineSize: "3",
+			insetBlock: "0",
+			insetInlineEnd: "calc({sizes.3} / -2)",
+			margin: "0",
+			position: "absolute",
+			"th:last-child > &": {
+				_after: {
+					insetInlineStart: "calc(100% - {borderWidths.indicator})",
+					marginInlineStart: "0"
+				},
+				insetInlineEnd: "0"
+			},
+			touchAction: "none",
+			userSelect: "none",
+			zIndex: "1"
+		},
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: dense("{spacing.gap.md}"),
+			minInlineSize: "0"
+		},
+		row: {
+			"&[data-region-end]": { [RULE_WIDTH]: "borderWidths.indicator" },
+			"&[tabindex]": {
+				_focusVisible: { outlineOffset: "calc({borderWidths.ring} * -1)" },
+				focusRingColor: "colorPalette.focusRing",
+				focusVisibleRing: "inside"
+			}
+		},
+		rowHeader: {
+			...PINNED,
+			...FIT,
+			...SPAN_END,
+			...CHIP,
+			...GRIDDED
+		},
+		search: { maxInlineSize: "xs" },
+		selectBox: {
+			alignItems: "center",
+			blockSize: "1lh",
+			display: "flex"
+		},
+		sortIndicator: {
+			...TURNING,
+			"&[data-direction=descending]": { rotate: "180deg" },
+			"&[data-direction=none]": {
+				"*:is(:hover, :focus-visible) > &": { opacity: "muted" },
+				opacity: "0"
+			}
+		},
+		spacer: {
+			"& > td": { padding: "0" },
+			blockSize: "var(--spacer-size)"
+		},
+		table: { "&[data-sized]": { inlineSize: "var(--table-size)" } },
+		toggle: {
+			...ONE_LINE,
+			display: "flex",
+			flexShrink: "0",
+			inlineSize: BUTTON,
+			justifyContent: "center"
+		},
+		value: { alignSelf: "stretch" },
+		valueLabel: {
+			display: "flex",
+			flex: "1",
+			gap: dense("{spacing.gap.md}"),
+			justifyContent: "space-between"
+		},
+		visuallyHidden: { srOnly: true }
+	},
+	className: "data-table",
+	jsx: [/^DataTable\.\w+$/u],
+	slots: [
+		"root",
+		"frame",
+		"table",
+		"column",
+		"columnHeader",
+		"heading",
+		"actions",
+		"region",
+		"row",
+		"spacer",
+		"rowHeader",
+		"cell",
+		"covered",
+		"editor",
+		"editorError",
+		"branch",
+		"toggle",
+		"selectBox",
+		"search",
+		"panel",
+		"range",
+		"value",
+		"valueLabel",
+		"count",
+		"manager",
+		"reset",
+		"pageSize",
+		"pageSizeLabel",
+		"sortIndicator",
+		"expandIndicator",
+		"resizer",
+		"visuallyHidden"
+	]
+});
+//#endregion
+export { recipe as t };

package/dist/rolldown-runtime-D7D4PA-g.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll as t };

package/dist/theme.d.ts

@@ -0,0 +1,11 @@
+//#region src/theme.d.ts
+/**
+ * Registers every recipe in the package in the preset an application's style compiler installs.
+ *
+ * @remarks
+ *   The list is written by hand. `theme.spec.ts` fails when a recipe file is missing from it, so no
+ *   generator writes it.
+ */
+declare const _default: import("@stealthscale/theme/authoring").Preset;
+//#endregion
+export { _default as default };

package/dist/theme.js

@@ -0,0 +1,16 @@
+import { t as recipe } from "./recipe-DKCE3olL.js";
+import { definePreset } from "@stealthscale/theme/authoring";
+//#region src/theme.ts
+/**
+* Registers every recipe in the package in the preset an application's style compiler installs.
+*
+* @remarks
+*   The list is written by hand. `theme.spec.ts` fails when a recipe file is missing from it, so no
+*   generator writes it.
+*/
+var theme_default = definePreset({
+	name: "@stealthscale/component-tables",
+	theme: { extend: { slotRecipes: { dataTable: recipe } } }
+});
+//#endregion
+export { theme_default as default };

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@stealthscale/component-tables",
+  "version": "0.1.0",
+  "description": "Renders records in data tables over TanStack Table: sorting, filtering, selection, pages, column sizes and pins, rows with levels, windowed rows, pivots and editable grids.",
+  "keywords": [
+    "components",
+    "data-table",
+    "grid",
+    "react",
+    "table"
+  ],
+  "homepage": "https://github.com/stealth-scale/scale/tree/main/components/tables#readme",
+  "bugs": "https://github.com/stealth-scale/scale/issues",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stealth-scale/scale.git",
+    "directory": "components/tables"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "imports": {
+    "#*": "./src/*"
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./theme": "./dist/theme.js",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@stealthscale/component-actions": "^0.1.0",
+    "@stealthscale/component-collections": "^0.0.1",
+    "@stealthscale/component-data": "^0.1.0",
+    "@stealthscale/component-disclosure": "^0.1.0",
+    "@stealthscale/component-feedback": "^0.1.0",
+    "@stealthscale/component-forms": "^0.1.0",
+    "@stealthscale/component-navigation": "^0.1.0",
+    "@tanstack/react-table": "^9.2",
+    "@tanstack/react-virtual": "^3.14"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/core": "^0.18",
+    "@stealthscale/component-a11y": "^0.1.0",
+    "@stealthscale/component-primitives": "^0.1.0",
+    "@stealthscale/hooks": "^0.1.0",
+    "@stealthscale/provider-locale": "^0.1.0",
+    "@stealthscale/theme": "^0.3.0",
+    "@stealthscale/vite-config": "^0.6.0",
+    "@stealthscale/vite-config-i18n": "^0.1.0",
+    "@stealthscale/vite-config-react": "^0.8.0",
+    "@stealthscale/vite-config-specimen": "^0.1.0",
+    "@stealthscale/vite-config-theme": "^0.1.0",
+    "@stealthscale/vite-config-typescript": "^0.3.0",
+    "@testing-library/react": "^16.3",
+    "@types/react": "^19.3",
+    "@types/react-dom": "^19.3",
+    "happy-dom": "^20.14",
+    "lucide-react": "^1.48",
+    "oxc-transform-react": "^0.151",
+    "publint": "^0.3",
+    "react": "^19.3",
+    "react-dom": "^19.3",
+    "typescript": "^7.0",
+    "vitest": "5.0.1"
+  },
+  "peerDependencies": {
+    "@stealthscale/component-a11y": "^0.1.0",
+    "@stealthscale/component-primitives": "^0.1.0",
+    "@stealthscale/hooks": "^0.1.0",
+    "@stealthscale/provider-locale": "^0.1.0",
+    "@stealthscale/theme": "^0.3.0",
+    "react": "^19.3",
+    "react-dom": "^19.3"
+  },
+  "engines": {
+    "node": ">=26.0.0"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "check": "vp check",
+    "test": "vp test"
+  }
+}