@nanisoft/prism-ui 0.13.0 → 0.15.0

package/dist/components/ui/chart.js

@@ -0,0 +1,369 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, } from './table.js';
+/** The fill and the stroke a named series is drawn in, from the tone it was given. */
+const PAINT = {
+    'chart-1': { fill: 'fill-chart-1', stroke: 'stroke-chart-1' },
+    'chart-2': { fill: 'fill-chart-2', stroke: 'stroke-chart-2' },
+    'chart-3': { fill: 'fill-chart-3', stroke: 'stroke-chart-3' },
+    'chart-4': { fill: 'fill-chart-4', stroke: 'stroke-chart-4' },
+    'chart-5': { fill: 'fill-chart-5', stroke: 'stroke-chart-5' },
+};
+/**
+ * The ink a series with no tone is drawn in.
+ *
+ * The supporting ink, and not a series role, on the reasoning on `ChartData`.
+ * It is a real class string rather than a token name so that the fill and the
+ * stroke stay one entry the drawing reads the same way in both directions.
+ */
+const UNTONE = { fill: 'fill-muted-foreground', stroke: 'stroke-muted-foreground' };
+/**
+ * The field's own coordinate space, in the units the drawing is measured in.
+ *
+ * A viewBox rather than no viewBox, which is the opposite of what
+ * `chart-frame.tsx` does for its lines, and for one reason: an area is a filled
+ * region, and a region's outline is a list of coordinate pairs. That list is
+ * assembled here as a template, which is the same reason the assembly is a
+ * template in every Component in this package: a `Component` ships no
+ * reader-facing string, and a literal list of pairs is one. A viewBox is what
+ * lets the numbers be numbers. The cost is that the viewBox scales, so every
+ * stroked mark carries `vector-effect: non-scaling-stroke` and the stroke stays
+ * a device width in a box of any proportion. The alternative was percentage
+ * coordinates on HTML elements, which is what `ChartFrame` does, and a filled
+ * region has no percentage coordinate in SVG, so the region is what forced this
+ * answer.
+ */
+const FIELD = 100;
+/**
+ * The gap between neighbouring marks, in field units.
+ *
+ * A fraction of the field rather than a pixel, because a pixel is a length the
+ * viewBox would scale and a gap is a proportion. It exists because a gap nobody
+ * can see is a grouping the colour has to carry on its own, and two series
+ * side by side in the same ink are not two series.
+ */
+const GAP = 0.8;
+/** The ring's radius in the donut's own coordinate space. */
+const RING_RADIUS = 38;
+/** The ring's thickness in the same units, which sets the inner and outer edges. */
+const RING_THICKNESS = 8;
+/** The step a gridline is drawn at: one, two, five or ten times a power of ten. */
+function niceStep(rough) {
+    if (!Number.isFinite(rough) || rough <= 0)
+        return 1;
+    const magnitude = 10 ** Math.floor(Math.log10(rough));
+    const normalised = rough / magnitude;
+    const step = normalised <= 1 ? 1 : normalised <= 2 ? 2 : normalised <= 5 ? 5 : 10;
+    return step * magnitude;
+}
+/** A coordinate to two places, so the emitted markup is not a run of float noise. */
+function unit(value) {
+    return Math.round(value * 100) / 100;
+}
+/** A value held inside the axis, which is what keeps a mark off its own plot. */
+function clamp(value, low, high) {
+    return Math.min(Math.max(value, low), high);
+}
+/**
+ * The vertical scale, derived from the values that have somewhere to be drawn.
+ *
+ * **The floor is zero on purpose.** A bar's length is only a measurement when
+ * it starts at a shared baseline, so zero is always one of the gridlines and is
+ * always labelled. The cost is a line whose values sit in a narrow band above
+ * zero is drawn almost flat, and the answer to that is the caller's `yMax` and
+ * the table, not a floor this Component drops.
+ *
+ * **A negative value gets a region below the baseline** rather than a
+ * zero-height bar. A profit and loss chart that drew a loss as nothing is a
+ * chart that is confidently wrong, and the region costs one more gridline.
+ *
+ * **A ceiling, when the caller passed one, is honoured exactly** and the
+ * intermediate gridlines are the step below it. That is the cost of the opt-in
+ * stated as arithmetic: if the ceiling is not a multiple of the step, the top
+ * band is shorter than the others, and the top gridline is the caller's number
+ * rather than a readable one. The alternative was rounding the ceiling away,
+ * which would have made the prop a suggestion.
+ */
+function scaleOf(values, ceiling) {
+    let lowest = 0;
+    let highest = 0;
+    for (const value of values) {
+        if (!Number.isFinite(value))
+            continue;
+        if (value < lowest)
+            lowest = value;
+        if (value > highest)
+            highest = value;
+    }
+    const step = niceStep((Math.max(highest, ceiling ?? highest) - lowest) / 4);
+    const first = Math.floor(lowest / step) * step;
+    // Ceiled rather than rounded, because a rounded count can leave the largest
+    // value above the top gridline, and a mark drawn above its own axis is a mark
+    // off the plot.
+    const last = ceiling ?? first + Math.max(1, Math.ceil((highest - first) / step - 1e-9)) * step;
+    const span = last - first;
+    const at = (value) => unit(((last - clamp(value, first, last)) / span) * 100);
+    const count = Math.max(1, Math.round((last - first) / step));
+    return {
+        lines: Array.from({ length: count + 1 }, (_, index) => unit(first + index * step)),
+        at,
+        // The bar spans between the value and the zero line, which are the same
+        // point when the value is zero, so a zero draws nothing rather than a sliver.
+        bar: (value) => {
+            const here = at(value);
+            const baseline = at(0);
+            return { top: Math.min(here, baseline), height: Math.abs(here - baseline) };
+        },
+    };
+}
+/**
+ * Where a category sits on the horizontal axis, as a share of the field.
+ *
+ * A line's points run from the first category to the last, so the axis is the
+ * gap between them and a single category sits in the middle, which is the only
+ * place a lone category can be read against anything. A bar's category is a
+ * column rather than a point, so its position is the column's centre, and that
+ * is the same reason a bar chart's first bar is not flush with the axis.
+ */
+function categoryAt(index, total, variant) {
+    if (variant === 'bar')
+        return unit(((index + 0.5) / total) * FIELD);
+    if (total <= 1)
+        return FIELD / 2;
+    return unit((index / (total - 1)) * FIELD);
+}
+/**
+ * Where a category label is nudged to sit, so no label hangs off the plot.
+ *
+ * A line's label is centred on its point, which puts the first and the last
+ * half outside the field, so the edge labels are pinned to the edge instead. A
+ * bar's categories are column centres with room on both sides, so every label is
+ * centred.
+ */
+function labelAlign(index, total, variant) {
+    if (variant === 'bar' || total < 2)
+        return '-translate-x-1/2';
+    if (index === 0)
+        return 'translate-x-0';
+    if (index === total - 1)
+        return '-translate-x-full';
+    return '-translate-x-1/2';
+}
+/** The shares a donut may draw, as a percentage of the ring, or nothing at all. */
+function donutShares(series) {
+    const single = (entry) => entry.values.length === 1 && Number.isFinite(entry.values[0]);
+    if (series.length === 1 && single(series[0])) {
+        return [100];
+    }
+    if (series.length === 2 && series.every(single)) {
+        const parts = series.map((entry) => entry.values[0]);
+        const total = parts[0] + parts[1];
+        if (!(total > 0))
+            return null;
+        return [unit((parts[0] / total) * 100), unit((parts[1] / total) * 100)];
+    }
+    return null;
+}
+/** The fill and the stroke one series is drawn in, from the tone it was given. */
+function paintOf(entry) {
+    return entry.tone ? PAINT[entry.tone] : UNTONE;
+}
+/** The marks one series contributes to the field, for a bar chart. */
+function barsOf(entry, index, scale, columns, total, fill) {
+    const slot = FIELD / Math.max(1, columns) / Math.max(1, total);
+    return entry.values.map((value, column) => {
+        if (!Number.isFinite(value))
+            return null;
+        const { top, height } = scale.bar(value);
+        return (_jsx("rect", { "data-slot": "chart-bar", "data-series": index, x: unit(column * slot * total + index * slot + GAP / 2), y: top, width: unit(slot - GAP), height: height, className: fill }, `${index}-${column}`));
+    });
+}
+/** The polyline one series contributes to the field, for a line or an area. */
+function pathOf(entry, index, scale, columns, variant, paint, area) {
+    const points = entry.values
+        .map((value, at) => ({ at, value }))
+        .filter((point) => Number.isFinite(point.value))
+        .map((point) => ({
+        x: categoryAt(point.at, columns, variant),
+        y: scale.at(point.value),
+    }));
+    if (points.length === 0)
+        return null;
+    // A series with one value has no shape to draw, and a line chart of a single
+    // value is a flat line rather than nothing. A rule across the field says
+    // exactly that and nothing more, where a dot would have said a position and
+    // invited a reading of a trend that is not in the data.
+    if (points.length === 1) {
+        const only = points[0];
+        return (_jsx("line", { "data-slot": "chart-line", "data-series": index, vectorEffect: "non-scaling-stroke", strokeWidth: 2, strokeLinecap: "round", x1: 0, y1: only.y, x2: FIELD, y2: only.y, className: paint.stroke }, `${index}-flat`));
+    }
+    const first = points[0];
+    const last = points[points.length - 1];
+    const baseline = scale.at(0);
+    // The outline is assembled as a template rather than written out, because a
+    // literal list of coordinate pairs is a word-shaped string in a Component that
+    // ships no reader-facing copy, and because the list is not known here anyway.
+    const outline = `${first.x} ${baseline}${points.map((point) => ` ${point.x} ${point.y}`).join('')}${last.x} ${baseline}`;
+    return (_jsxs("g", { "data-slot": area ? 'chart-area' : 'chart-line', "data-series": index, children: [area ? _jsx("polygon", { points: outline, className: `${paint.fill}/40` }) : null, points.slice(1).map((point, at) => {
+                const from = points[at];
+                return (_jsx("line", { vectorEffect: "non-scaling-stroke", strokeWidth: 2, strokeLinecap: "round", x1: from.x, y1: from.y, x2: point.x, y2: point.y, className: paint.stroke }, at));
+            })] }, `${index}-path`));
+}
+/**
+ * A chart: the marks, the axes, and the numbers behind them.
+ *
+ * **The chart is never the only way to read the numbers.** That is the
+ * constraint worth making, and it is a constraint on the caller as much as on
+ * this Component. The argument is the one `carousel.tsx` makes about everything
+ * a carousel shows: everything this Component draws, a reader must be able to
+ * reach some other way, because a chart is a picture whose entire content is a
+ * position, and a position is the one thing a screen reader, a crawler and a
+ * print stylesheet cannot read. There is a concrete failure behind each of
+ * them. A screen reader given a `<figure>` full of rectangles is read a list of
+ * nothing. A crawler sees the labels and the marks and no values at all, so
+ * every figure a product site publishes is invisible to the thing that indexes
+ * it. A print stylesheet loses the channel the series were separated by, and
+ * two of the five roles measure below 3:1 on a light card and go to the same
+ * grey, so a printed chart is a chart where the legend is the only difference
+ * between two lines.
+ *
+ * So the marks and the cells are two renderings of one `series` array rather
+ * than a chart and a table a caller kept in step, and the table is in the
+ * document whether or not anybody can see it. A `<table>` with a `<caption>`,
+ * a row head for each category and a column head for each series, so a reader
+ * navigates it by row and by cell and hears the figures the marks are drawn
+ * from. The alternative was a `table` prop, and the reasoning against it is
+ * `chart-frame`'s: a chart whose accessible representation is a sibling prop is
+ * a chart whose table a consumer wrote once and updated when the data changed,
+ * which is to say a chart whose table says last quarter. There is no prop that
+ * turns it off, because a prop is a default and the default would be off and
+ * the failure would be invisible.
+ *
+ * **There is no hover tooltip, and that is the same argument from the other
+ * side.** A tooltip is the usual answer to the exact value, and it answers a
+ * question a pointer asked, which is a question a keyboard never asks and a
+ * print stylesheet cannot receive. A picture a reader cannot query is the
+ * failure the table exists to prevent, so the exact value is answered by the
+ * table rather than by a surface that appears under a pointer.
+ *
+ * **The geometry does not move.** There is no draw-in, no bar that grows, no
+ * transition on any of the marks, and the reason is that the motion law refuses
+ * entrance effects outright, so a chart would not need an argument to be
+ * refused: a bar arriving is decoration, and the reader was not waiting for it.
+ * There is also no reason for one. A bar's height is its value, and a value
+ * that changes is the caller rendering a different number, so a transition
+ * between two values is a transition between two facts, and a reader watching
+ * one arrive has learned nothing they could not have read from the second one.
+ * This is a server Component: no hook, no state, no effect, and the whole
+ * figure is arithmetic over props, which is why `check-client-budget` has no
+ * reason to know it exists.
+ *
+ * **The axis is derived and a caller's maximum is opt-in.** Prism does not take
+ * a vertical maximum by default, and the reason is specific: a caller who
+ * pre-normalises has two chances to get the axis wrong rather than one. They
+ * compute the maximum, and then they label the gridlines, and a mistake in
+ * either step is invisible in the rendered chart because the picture is drawn
+ * perfectly faithfully to the wrong number. A mislabelled axis is a lie with a
+ * typeface on it, and it is a worse lie than a flat line because a flat line
+ * looks like a flat line. `yMax` exists for the one case that genuinely needs
+ * it, a line in a narrow band high on the scale that the reader wants to see
+ * the shape of, and it costs what the prop says: the caller owns the top, a
+ * value above it is clamped to the top gridline and counted on the element as
+ * `data-clamped`, and a ceiling that is not a multiple of the step leaves a
+ * shorter band at the top. The floor stays at zero whatever is passed, because
+ * a bar measured from anywhere but the baseline is not a measurement.
+ *
+ * **The donut is here for one shape of data, and the shape is named.** A bar
+ * chart is the honest default: it is read as lengths against a common baseline,
+ * it is the mark that survives greyscale, and it holds up at eight parts where a
+ * ring does not. What it is bad at is a part-to-whole with two or three parts,
+ * because there the reader is not comparing lengths, they are reading a
+ * proportion, and two lengths that must be mentally added are the harder task.
+ * A ring answers "what share is this" in one glance where the bars answer it
+ * after a division, and the centre answers the total the reader then wants
+ * anyway. So the variant exists for that condition and refuses everything else:
+ * `donut` takes exactly two series with one value each, or one series with a
+ * single value, which is the same claim with nothing to divide. At three parts
+ * the ring stops being read as a proportion and starts being read as a puzzle,
+ * and a ring that a reader has to count the segments of is worse than three
+ * bars. Naming the condition is the point: an unmarked donut prop would let the
+ * choice be casual, and a casual donut is a pie with nine slices in a
+ * dashboard.
+ *
+ * **The five series roles are the token contract's, not this file's.** `tone` is
+ * `ChartColor` from `chart-frame`, for the reason that type's own documentation
+ * gives: `chart-1` through `chart-5` is the only five-way set the contract
+ * publishes, so a wider type here would be a wider palette and a second source
+ * of truth for something the tokens already own. Every stroke and every fill
+ * below is one of those roles, `muted-foreground`, `muted`, `foreground` or
+ * `border`, named as a utility so a scoped `data-pack` boundary above the
+ * figure restyles all of it through the cascade. The gridlines are `border`,
+ * which is the contract's own low emphasis, rather than a lighter value invented
+ * here, and there is no gradient: a gradient of contract stops would be allowed
+ * and there is no decision behind one.
+ *
+ * **What this is not.** There is no axis a caller can log, no second axis, no
+ * stacking, no curve interpolation, no zoom, no crosshair, and no per-point
+ * mark on a line. A distribution, a ranking, a correlation and a histogram are
+ * a charting library's work, and this Component is the frame and the table that
+ * library's marks should sit inside rather than the library.
+ */
+function Chart({ series, variant, labels, label, height = 240, legend, caption, yMax, centreLabel, className, }) {
+    // The legend's default is a function of the series count, so it is resolved
+    // here rather than as a default in the signature: `series.length > 1` is not a
+    // literal a caller may override, it is the answer to a question about the data
+    // that only the data can answer.
+    const wantsLegend = legend ?? series.length > 1;
+    const plotted = series.flatMap((entry) => entry.values.filter((value) => Number.isFinite(value)));
+    const shares = variant === 'donut' ? donutShares(series) : null;
+    const clamped = plotted.filter((value) => yMax !== undefined && value > yMax).length;
+    // The caption of the table names the figure and then every series in it, so a
+    // reader who has navigated into the table knows which chart they are in and
+    // which column is which. It is assembled at runtime from the caller's own
+    // words, because the punctuation is not a sentence this Component is entitled
+    // to write and a literal joining two props would be one.
+    const tableCaption = `${label}: ${series.map((entry) => entry.name).join(', ')}`;
+    const table = (_jsx("div", { "data-slot": "chart-table", className: "sr-only", children: _jsxs(Table, { children: [_jsx(TableCaption, { children: tableCaption }), _jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-24" }), series.map((entry, index) => (_jsx(TableHead, { className: "text-right tabular-nums", children: entry.name }, index)))] }) }), _jsx(TableBody, { children: Array.from({ length: labels === undefined ? 1 : Math.max(1, labels.length) }, (_, row) => (_jsxs(TableRow, { children: [_jsx(TableHead, { scope: "row", className: "font-medium", children: labels === undefined ? null : (labels[row] ?? null) }), series.map((entry, index) => (_jsx(TableCell, { className: "text-right tabular-nums", "data-series": index, children: labels === undefined ? (entry.values[0] ?? null) : (entry.values[row] ?? null) }, index)))] }, row))) })] }) }));
+    const captionNode = caption === undefined ? null : (_jsx("p", { "data-slot": "chart-caption", className: "text-muted-foreground text-sm", children: caption }));
+    const legendNode = wantsLegend ? _jsx(ChartLegend, { series: series }) : null;
+    if (variant === 'donut') {
+        return (_jsxs("figure", { "data-slot": "chart", "data-variant": "donut", "data-plotted": shares === null ? 0 : shares.length, "aria-label": label, className: cn('flex w-full flex-col gap-3', className), children: [_jsx("div", { "data-slot": "chart-field", className: "flex justify-center", children: shares === null ? null : (_jsxs("div", { "data-slot": "chart-donut", className: "relative", children: [_jsxs("svg", { "data-slot": "chart-geometry", viewBox: `0 0 ${FIELD} ${FIELD}`, "aria-hidden": "true", className: "size-40", children: [_jsx("circle", { "data-slot": "chart-donut-track", cx: FIELD / 2, cy: FIELD / 2, r: RING_RADIUS, strokeWidth: RING_THICKNESS, className: "fill-none stroke-muted" }), _jsx("g", { "data-slot": "chart-donut-segments", transform: `rotate(-90 ${FIELD / 2} ${FIELD / 2})`, children: shares.map((share, index) => {
+                                            const before = shares.slice(0, index).reduce((total, value) => total + value, 0);
+                                            return (_jsx("circle", { "data-slot": "chart-donut-segment", "data-series": index, cx: FIELD / 2, cy: FIELD / 2, r: RING_RADIUS, pathLength: FIELD, strokeWidth: RING_THICKNESS, strokeDasharray: `${share} ${FIELD - share}`, strokeDashoffset: before === 0 ? 0 : -unit(before), className: cn('fill-none', paintOf(series[index]).stroke) }, index));
+                                        }) })] }), centreLabel === undefined ? null : (_jsx("div", { "data-slot": "chart-donut-centre", className: "absolute inset-0 flex items-center justify-center px-6 text-center", children: centreLabel }))] })) }), legendNode, captionNode, table] }));
+    }
+    const scale = scaleOf(plotted, yMax);
+    const columns = labels !== undefined && labels.length > 0
+        ? labels.length
+        : series.reduce((most, entry) => Math.max(most, entry.values.length), 0);
+    const onAxis = variant === 'bar' || variant === 'line';
+    return (_jsxs("figure", { "data-slot": "chart", "data-variant": variant, "data-plotted": plotted.length, "data-clamped": clamped === 0 ? undefined : clamped, "aria-label": label, className: cn('flex w-full flex-col gap-3', className), children: [_jsxs("div", { "data-slot": "chart-plot", className: "flex flex-col gap-2", children: [_jsxs("div", { "data-slot": "chart-plot-row", className: "flex items-stretch gap-2", children: [_jsx("div", { "data-slot": "chart-axis-y", className: "relative w-12 shrink-0", children: scale.lines.map((value) => (_jsx("span", { "data-slot": "chart-tick", className: "text-muted-foreground absolute right-0 -translate-y-1/2 text-xs tabular-nums", style: { top: `${scale.at(value)}%` }, children: value }, value))) }), _jsx("div", { "data-slot": "chart-field", className: "relative flex-1", style: { height }, children: _jsxs("svg", { "data-slot": "chart-geometry", viewBox: `0 0 ${FIELD} ${FIELD}`, preserveAspectRatio: "none", "aria-hidden": "true", className: "absolute inset-0 size-full", children: [scale.lines.map((value) => (_jsx("line", { "data-slot": "chart-gridline", vectorEffect: "non-scaling-stroke", strokeWidth: 1, x1: 0, x2: FIELD, y1: scale.at(value), y2: scale.at(value), className: "stroke-border" }, value))), variant === 'bar' ? (_jsx("line", { "data-slot": "chart-baseline", vectorEffect: "non-scaling-stroke", strokeWidth: 1.5, x1: 0, x2: FIELD, y1: scale.at(0), y2: scale.at(0), className: "stroke-foreground" })) : null, series.flatMap((entry, index) => variant === 'bar'
+                                            ? barsOf(entry, index, scale, columns, series.length, paintOf(entry).fill)
+                                            : [
+                                                pathOf(entry, index, scale, columns, variant, paintOf(entry), variant === 'area'),
+                                            ])] }) })] }), onAxis && labels !== undefined && labels.length > 0 ? (_jsxs("div", { "data-slot": "chart-axis-x-row", className: "flex items-stretch gap-2", children: [_jsx("span", { "data-slot": "chart-axis-x-gutter", "aria-hidden": "true", className: "w-12 shrink-0" }), _jsx("div", { "data-slot": "chart-axis-x", className: "relative h-4 flex-1", children: labels.map((name, index) => (_jsx("span", { "data-slot": "chart-category", className: cn('text-muted-foreground absolute top-0 max-w-20 truncate text-xs', labelAlign(index, columns, variant)), style: { left: `${categoryAt(index, columns, variant)}%` }, children: name }, index))) })] })) : null] }), legendNode, captionNode, table] }));
+}
+/**
+ * A legend: a swatch and a name for each series, and nothing else.
+ *
+ * Its own export rather than a fixed position under the plot, because a legend
+ * is a layout decision the surrounding design usually has an opinion about. A
+ * chart in a dashboard card, in a full-width figure between two paragraphs, and
+ * beside a key in a table of figures are three different places, and a Component
+ * that fixed one of them made the other two a workaround. So `Chart` draws it
+ * where the figure puts it and a caller who needs it elsewhere passes
+ * `legend={false}` and renders this with the same `series` array, which is the
+ * only reason the swatch and the mark cannot disagree.
+ *
+ * It is a `<ul>` rather than a `<div>` of spans, so a reader moving by list
+ * item is told how many series there are, and each entry is a swatch and a name
+ * with the swatch hidden, because a screen reader has no use for a colour and
+ * announcing one would replace the name with the thing the name is there to
+ * avoid. The same warning applies to a printed legend: two of the five roles go
+ * to the same grey on paper, so the legend is what tells a printed chart's
+ * series apart rather than an addition to it.
+ */
+function ChartLegend({ series, className, }) {
+    return (_jsx("ul", { "data-slot": "chart-legend", className: cn('text-muted-foreground flex flex-wrap gap-x-4 gap-y-1 text-xs', className), children: series.map((entry, index) => (_jsxs("li", { "data-slot": "chart-legend-entry", className: "flex items-center gap-1.5", children: [_jsx("span", { "data-slot": "chart-swatch", "aria-hidden": "true", className: cn('size-2.5 shrink-0 rounded-sm', paintOf(entry).fill) }), entry.name] }, index))) }));
+}
+export { Chart, ChartLegend };

package/dist/components/ui/checkbox.d.ts

@@ -37,6 +37,16 @@ export interface CheckboxProps extends Omit<ComponentProps<'span'>, 'onChange'>
  * toggles the focused control, and the indeterminate state is announced as
  * `mixed` to assistive technology. Pair it with a `FieldLabel` in a `Field`,
  * and mark it invalid with `aria-invalid` when the value is rejected.
+ *
+ * **A coarse pointer gets a 44px box and the desktop 16px box is untouched.** The
+ * step is the same one `checklist.tsx` takes on the completion control it composes
+ * from this Component, and for the same reason: a queue is worked with a thumb and a
+ * form is filled with one, but neither is worked with a fingertip that can hit sixteen
+ * pixels of a bordered square. The desktop size stays `size-4` because a form
+ * checkbox is a document control and a 44px square in a column of fields is not one,
+ * and the floor is a `@media (pointer: coarse)` step rather than a second size for the
+ * same input. The price is a 44px bordered box and a row that grows to hold it, which
+ * is the price `tag-group.tsx` records for the same reason.
  */
 declare function Checkbox({ className, indeterminate, ...props }: CheckboxProps): import("react").JSX.Element;
 export { Checkbox };

package/dist/components/ui/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/ui/checkbox.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C;;;;;GAKG;AACH,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IAC7E,mEAAmE;IACnE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gEAAgE;IAChE,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,6EAA6E;IAC7E,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4CAA4C;IAC5C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CAC7C;AAED;;;;;;;;GAQG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BA4BtE;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/ui/checkbox.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C;;;;;GAKG;AACH,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IAC7E,mEAAmE;IACnE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gEAAgE;IAChE,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,6EAA6E;IAC7E,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4CAA4C;IAC5C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CAC7C;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BAoCtE;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/ui/checkbox.js

@@ -11,8 +11,26 @@ import { cn } from '../../lib/utils.js';
  * toggles the focused control, and the indeterminate state is announced as
  * `mixed` to assistive technology. Pair it with a `FieldLabel` in a `Field`,
  * and mark it invalid with `aria-invalid` when the value is rejected.
+ *
+ * **A coarse pointer gets a 44px box and the desktop 16px box is untouched.** The
+ * step is the same one `checklist.tsx` takes on the completion control it composes
+ * from this Component, and for the same reason: a queue is worked with a thumb and a
+ * form is filled with one, but neither is worked with a fingertip that can hit sixteen
+ * pixels of a bordered square. The desktop size stays `size-4` because a form
+ * checkbox is a document control and a 44px square in a column of fields is not one,
+ * and the floor is a `@media (pointer: coarse)` step rather than a second size for the
+ * same input. The price is a 44px bordered box and a row that grows to hold it, which
+ * is the price `tag-group.tsx` records for the same reason.
  */
 function Checkbox({ className, indeterminate, ...props }) {
-    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", indeterminate: indeterminate, className: cn('border-input bg-background text-primary-foreground shadow-xs peer size-4 shrink-0 rounded-sm border outline-none', 'transition-[color,box-shadow,background-color] duration-fast ease-out', 'data-[checked]:border-primary data-[checked]:bg-primary data-[indeterminate]:border-primary data-[indeterminate]:bg-primary', 'focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]', 'aria-invalid:border-destructive aria-invalid:ring-destructive/20', 'disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "flex items-center justify-center text-current", children: indeterminate ? (_jsx(MinusIcon, { className: "size-3.5" })) : (_jsx(CheckIcon, { className: "size-3.5" })) }) }));
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", indeterminate: indeterminate, className: cn('border-input bg-background text-primary-foreground shadow-xs peer size-4 shrink-0 rounded-sm border outline-none', 
+        // A `pointer-coarse:` step rather than an invisible band, and the reason is
+        // `todo-01`. A band around a 16px box reaches fourteen pixels past it in every
+        // direction, and that Block's rows are stacked against a shared border with no
+        // gap, so the band around one row's checkbox covers the top of the next row's
+        // checkbox. Growing the box grows the row with it, which cannot reach anything.
+        // See `switch.tsx` and `slider.tsx` for the cases where a band is the answer,
+        // which are the cases where nothing sits within a band of the control.
+        'pointer-coarse:size-11', 'transition-[color,box-shadow,background-color] duration-fast ease-out', 'data-[checked]:border-primary data-[checked]:bg-primary data-[indeterminate]:border-primary data-[indeterminate]:bg-primary', 'focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]', 'aria-invalid:border-destructive aria-invalid:ring-destructive/20', 'disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "flex items-center justify-center text-current", children: indeterminate ? (_jsx(MinusIcon, { className: "size-3.5" })) : (_jsx(CheckIcon, { className: "size-3.5" })) }) }));
 }
 export { Checkbox };