@fairgarden/design 0.1.0-alpha.0 → 0.1.0-alpha.2

package/components/Chart/Chart.d.ts

@@ -1,135 +0,0 @@
-import * as React from 'react';
-import { type VariantProps } from 'class-variance-authority';
-import { type SequentialStep, type SeriesSlot } from '../../utils/seriesPatterns';
-export type { SeriesSlot, SequentialStep };
-export declare const chart: (props?: ({
-    kind?: "area" | "line" | "column" | "bar" | null | undefined;
-    oneInk?: boolean | null | undefined;
-    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
-    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type ChartVariants = VariantProps<typeof chart>;
-/** The chart's structural build. */
-export type ChartKind = NonNullable<ChartVariants['kind']>;
-/** One series: a numeric field of the rows, drawn in one pattern slot. */
-export interface ChartSeries<Key extends string = string> {
-    /** The row field holding this series' values. */
-    key: Key;
-    /** The series name: direct label, legend entry, tooltip and table column head. */
-    name: string;
-    /**
-     * The pattern slot (§8.7): 1 solid, 2 hatch 45°, 3 dot screen, 4 hatch
-     * 0°, 5 crossed hatch, 6 outline ("Other", always the remainder).
-     * Default: the series' position, so the first series is the emphasis
-     * series. A series keeps its slot on screen, in print and in the legend.
-     */
-    slot?: SeriesSlot;
-}
-/** A sequential encoding: each row's step, 1–5, drawn as a stepped fill (§8.7). */
-export interface ChartSteps<Key extends string = string> {
-    /** The row field holding the step, an integer from 1 to 5. */
-    key: Key;
-    /** The step's name, for the tooltip and the data-table column head. */
-    name: string;
-    /** End labels of the stepped legend, e.g. `['0/5', '5/5 available']`. */
-    labels?: readonly [React.ReactNode, React.ReactNode];
-}
-type FieldKey<Row> = Extract<keyof Row, string>;
-/** Props for Chart: `div` props plus the data, the encoding and the figure text. */
-export type ChartProps<Row extends object = Record<string, unknown>> = Omit<React.ComponentPropsWithRef<'div'>, 'children'> & {
-    /**
-     * `bar` (default): horizontal bars, labels left, values at the bar ends,
-     * the form preferred on mobile. `column`: horizontal bars below 1024 px of
-     * the container and in print, columns from 1024 px. `line`: lines told
-     * apart by point markers (● ○ ■ □ ▲), never by dashes. `area`: stacked
-     * areas; several series always stack, because patterns never overlap.
-     */
-    kind?: ChartVariants['kind'];
-    /** The rows, one per category, in display order. */
-    data: readonly Row[];
-    /** The row field naming each category (bar label, column or time tick). */
-    categoryKey: FieldKey<Row>;
-    /** Head of the category column in the data table. Default "Category". */
-    categoryLabel?: string;
-    /**
-     * The series, in the semantic order: at most 4 (6 at the hard limit;
-     * beyond that, small multiples). Extra series are not drawn.
-     */
-    series: readonly ChartSeries<FieldKey<Row>>[];
-    /** The figure caption, which is the chart's title: say what to notice. */
-    caption: React.ReactNode;
-    /** The figure label, e.g. "Fig. 3", on its own line above the caption. */
-    figureLabel?: React.ReactNode;
-    /** Source and method notes, e.g. "Source: Trail counters, 2026." */
-    source?: React.ReactNode;
-    /** Value axis title with its units, e.g. "Visitors (thousands)". */
-    valueLabel?: string;
-    /**
-     * Formats every value: labels, ticks, tooltip and table. Default: grouped
-     * digits (`toLocaleString('en-US')`).
-     */
-    formatValue?: (value: number) => string;
-    /** Stacks bar and column series into one bar per category. Area series always stack. */
-    stacked?: boolean;
-    /**
-     * Single highlight: this series takes slot 1 and every other series
-     * slot 6 (outline), the preferred form for "one against the rest".
-     */
-    highlight?: FieldKey<Row>;
-    /**
-     * A sequential encoding for a single-series bar or column chart: each bar
-     * takes its row's step fill (secondary 4 / 6 / 8 / 11 / 12 on screen), and
-     * its print pattern as a print-only layer.
-     */
-    steps?: ChartSteps<FieldKey<Row>>;
-    /**
-     * Direct labels (`LabelList`): values at bar ends, series names and last
-     * values at line ends, names inside areas. Default `true`.
-     */
-    labels?: boolean;
-    /**
-     * The custom legend above the chart (beside it from 1024 px), with 16 px
-     * swatches showing the fill drawn. Default: shown for grouped or stacked
-     * bars with more than one series, where direct labels cannot name them.
-     */
-    legend?: boolean;
-    /**
-     * Plot height in px on screen. Default: bars from their rows (16 px bars),
-     * other charts 320.
-     */
-    height?: number;
-    /** Plot height in px in print. Default: the screen height. */
-    printHeight?: number;
-    /**
-     * Forces one ink: every slot in --primary12 and sequential cells as
-     * patterns. Not needed for the ground: the scope already draws one ink
-     * everywhere but a light base (`paper`, `white`) or a nested `white`
-     * plate (§8.7). Default `false`.
-     */
-    oneInk?: ChartVariants['oneInk'];
-    /**
-     * Primary Radix scale: even slots, slot 6, edges, axes and labels. Never
-     * defaulted; omitted, it inherits the scope [D133].
-     */
-    primary?: ChartVariants['primary'];
-    /**
-     * Secondary Radix scale: odd slots and sequential steps. Keep step 11 at
-     * 3:1 on the ground (§2 pairing matrix) [D128]. Never defaulted.
-     */
-    secondary?: ChartVariants['secondary'];
-    /** The data-table trigger label. Default "Show Data Table". */
-    tableLabel?: React.ReactNode;
-    /** The trigger label while the table is open. Default "Hide Data Table". */
-    tableOpenLabel?: React.ReactNode;
-};
-/**
- * A chart figure (§8.7) built with Recharts [D167]. Categories are told
- * apart by the `pattern-series` slots, on screen as in print: odd slots in
- * --secondary11, even in --primary12, slot 1 solid, slot 6 outline, every
- * shape edged in --border-size-1 --primary12 [D125]. Values are labelled
- * directly; the tooltip and the keyboard accessibility layer repeat them;
- * the "Show Data Table" Collapsible holds them all. The chart follows its
- * container's width on screen and prints at a fixed 174 mm, animation off.
- */
-export declare function Chart<Row extends object = Record<string, unknown>>(props: ChartProps<Row>): React.JSX.Element;
-//# sourceMappingURL=Chart.d.ts.map

package/components/Chart/Chart.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/components/Chart/Chart.tsx"],"names":[],"mappings":"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"}

package/components/Chart/Chart.js

@@ -1,453 +0,0 @@
-'use client';
-import * as React from 'react';
-import { cva } from 'class-variance-authority';
-import { Area, AreaChart, Bar, BarChart, CartesianGrid, LabelList, Line, LineChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, useYAxisScale, } from 'recharts';
-import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from '../Collapsible';
-import { Figure, FigureCaption, FigureMedia } from '../Figure';
-import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeaderCell, TableRow, } from '../Table';
-import { cx } from '../../utils/className';
-import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
-import { useScopeAttributes } from '../../utils/scope';
-import { GROUND, HALO, INK_PRIMARY, PatternDefs, SEQUENTIAL_FILLS, safeId, slotFill, slotInk, stepPatternFill, } from '../../utils/seriesPatterns';
-import { useMediaQuery } from '../../utils/useMediaQuery';
-import styles from './chart.module.css';
-/*
- * Chart (§8.7) [D167, D125]: a Recharts SVG chart in a figure, with a
- * custom legend, a caption and the "Show Data Table" Collapsible.
- *
- * Implementation (CSS Modules + CVA)
- * - Module: chart.module.css; CVA function `chart`.
- * - Axes: `kind` → bar | column | line | area (the structural build);
- *   `oneInk` → `oneInk` (forces one ink: every slot in --primary12,
- *   sequential cells as their patterns on screen); `primary`, `secondary` →
- *   scales module classes. `secondary` carries the odd slots and the
- *   sequential steps, `primary` the even slots, slot 6, every edge, axis and
- *   label.
- * - Inks by ground, with no prop: odd slots take --role-series-odd and the
- *   sequential cells follow the --ds-series-fill / --ds-series-pattern
- *   switches, which roles.css resolves per scope: two inks and flat steps
- *   on a light base ground or a nested `white` plate, one ink and patterns
- *   everywhere else, the pastels included (§8.7) [D125].
- * - Compound variants: none.
- * - Defaults: kind bar, oneInk false; color axes: none.
- * - Color fallback: inherits the scope.
- * - States: the Recharts surface's `:focus-visible` → the ring; the active
- *   category (hover or arrow keys, the accessibility layer) → the tooltip,
- *   the cursor, and a --border-size-2 edge on the active bars, markers one
- *   size up; nothing fades. The table trigger per §10.13.
- * - Parts: base, body (the FigureMedia), legend, legendItem, swatch,
- *   stepLegend, chartArea, axisTitle, plot, plotBars, plotColumns, print,
- *   tooltip, dataTable (the Collapsible holding the §8.2 Table). The
- *   caption is the Figure's FigureCaption (§8.5): label, caption, source.
- * - Scope: none. Container: `base`, named `chart` because it holds the
- *   Figure's own container. Baseline: horizontal bars,
- *   legend above; from 1024 px a column chart draws columns and the legend
- *   moves to the side (§5.10.2). Print: a fixed 174 mm chart.
- *
- * Every fill, stroke and label is a role-variable string passed to Recharts
- * (never a Radix variable or literal), fills are opaque (fillOpacity 1), and
- * nothing is a gradient, shadow or opacity animation [D16, D21, D91].
- */
-export const chart = cva(styles.base, {
-    variants: {
-        // Only a column chart restructures by container width; the other builds
-        // differ inside the SVG, so their classes carry no rules.
-        kind: {
-            bar: '',
-            column: styles.column,
-            line: '',
-            area: '',
-        },
-        oneInk: {
-            true: styles.oneInk,
-        },
-        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
-        primary: primaryScaleVariants,
-        secondary: secondaryScaleVariants,
-    },
-    defaultVariants: {
-        kind: 'bar',
-        oneInk: false,
-    },
-});
-/*
- * Token mirrors. SVG attributes and Recharts' layout take numbers, so these
- * values mirror their tokens (like TOOLTIP_DELAY_MS mirrors its token).
- */
-/** Bar thickness, --size-px-3: at least --ds-space-12 (12 px) at every size [I7]. */
-const BAR_THICKNESS = 16;
-/** Gap between bars in one category: at least 0.3 × the thickness. */
-const BAR_GAP = 6;
-/** Gap between categories, --size-px-3. */
-const CATEGORY_GAP = 16;
-/** --border-size-1. */
-const STROKE_1 = 1;
-/** --ds-stroke-1-5. */
-const STROKE_1_5 = 1.5;
-/** --border-size-2. */
-const STROKE_2 = 2;
-/** Point marker radius: an 8 px marker. */
-const MARKER_RADIUS = 4;
-/** A column never grows wider than --size-px-8. */
-const MAX_COLUMN = 48;
-/** --ds-duration-disclosure: growth by length only, under --motionOK. */
-const DURATION = 200;
-/** --ds-print-live-width, 174 mm at 96 px per inch. */
-const PRINT_WIDTH = 658;
-/** Plot height of column, line and area charts. */
-const DEFAULT_HEIGHT = 320;
-/** Space the value axis takes when it shows under horizontal bars. */
-const AXIS_HEIGHT = 28;
-/** Advance of one `type-data` character: IBM Plex Mono is 0.6 em at 14 px. */
-const DATA_CHAR = 8.4;
-/** Average advance of one `type-caption` character at 14 px. */
-const TEXT_CHAR = 7.5;
-/** The thinnest area band that takes a direct label. */
-const MIN_LABEL_BAND = 18;
-/** Open Props' --motionOK. */
-const MOTION_QUERY = '(prefers-reduced-motion: no-preference)';
-/** Pattern part classes, for this module's print and forced-colors rules. */
-const patternClassNames = {
-    mark: styles.patternMark,
-    dot: styles.patternDot,
-    ground: styles.patternGround,
-};
-const defaultFormat = (value) => value.toLocaleString('en-US');
-function valueOf(row, key) {
-    const value = row?.[key];
-    return typeof value === 'number' && Number.isFinite(value) ? value : null;
-}
-function stepOf(row, key) {
-    const value = Math.round(valueOf(row, key) ?? 1);
-    return Math.min(5, Math.max(1, value));
-}
-function textOf(value) {
-    return value == null ? '' : String(value);
-}
-/* ------------------------------------------------------------------ */
-/* SVG parts rendered inside Recharts                                  */
-/* ------------------------------------------------------------------ */
-/** A relation gridline: `line-dotted-fine` in --role-rule, drawn as true dots. */
-function gridLine(props) {
-    return (React.createElement("line", { key: props.key ?? undefined, x1: props.x1, y1: props.y1, x2: props.x2, y2: props.y2, fill: "none", stroke: "var(--role-rule)", className: styles.gridLine }));
-}
-/** Point markers by slot: ● ○ ■ □ ▲ △ (filled odd slots, open even slots). */
-const markerShapes = {
-    1: 'circle',
-    2: 'circle',
-    3: 'square',
-    4: 'square',
-    5: 'triangle',
-    6: 'triangle',
-};
-/** A line's point marker in its slot's shape; one size up and heavier when active. */
-function MarkerGlyph({ cx, cy, slot, ink, active = false }) {
-    if (cx == null || cy == null || !Number.isFinite(cx) || !Number.isFinite(cy))
-        return null;
-    const r = active ? MARKER_RADIUS + 1 : MARKER_RADIUS;
-    const filled = slot % 2 === 1 && slot !== 6;
-    const fill = filled ? ink : GROUND;
-    const stroke = filled ? INK_PRIMARY : ink;
-    const strokeWidth = active ? STROKE_2 : filled ? STROKE_1 : STROKE_1_5;
-    const shape = markerShapes[slot];
-    if (shape === 'circle') {
-        return React.createElement("circle", { cx: cx, cy: cy, r: r, fill: fill, stroke: stroke, strokeWidth: strokeWidth });
-    }
-    if (shape === 'square') {
-        return (React.createElement("rect", { x: cx - r, y: cy - r, width: r * 2, height: r * 2, fill: fill, stroke: stroke, strokeWidth: strokeWidth }));
-    }
-    const h = r * 1.15;
-    return (React.createElement("path", { d: `M${cx} ${cy - h}L${cx + h} ${cy + h * 0.8}L${cx - h} ${cy + h * 0.8}Z`, fill: fill, stroke: stroke, strokeWidth: strokeWidth, strokeLinejoin: "round" }));
-}
-/**
- * A sequential bar: its flat screen fill and, as a second layer, its print
- * pattern. The print block hides the fill and shows the pattern [D126, D167].
- */
-function StepShape({ x = 0, y = 0, width = 0, height = 0, payload, prefix, stepKey }) {
-    const step = stepOf(payload, stepKey);
-    const box = {
-        x: width < 0 ? x + width : x,
-        y: height < 0 ? y + height : y,
-        width: Math.abs(width),
-        height: Math.abs(height),
-    };
-    return (React.createElement("g", null,
-        React.createElement("rect", { ...box, className: styles.stepFill, fill: SEQUENTIAL_FILLS[step], fillOpacity: 1, stroke: INK_PRIMARY, strokeWidth: STROKE_1 }),
-        React.createElement("rect", { ...box, className: styles.stepPattern, fill: stepPatternFill(prefix, step), fillOpacity: 1, stroke: INK_PRIMARY, strokeWidth: STROKE_1 })));
-}
-/** A line's direct label at its end point: the series name and the last value. */
-function EndLabel({ viewBox, index, value, last, name, format }) {
-    const box = viewBox;
-    if (index !== last || box?.x == null || box.y == null)
-        return null;
-    return (React.createElement("text", { x: box.x + MARKER_RADIUS + 6, y: box.y, dy: "0.35em", textAnchor: "start", fill: INK_PRIMARY, className: styles.endLabel },
-        React.createElement("tspan", { className: styles.endName }, name),
-        typeof value === 'number' ? (React.createElement("tspan", { className: styles.endValue, dx: "6" }, format(value))) : null));
-}
-/** An area's direct label: its name inside its band at the last point, on a --role-halo knockout. */
-function AreaLabel({ viewBox, index, last, low, high, name }) {
-    const yScale = useYAxisScale();
-    const box = viewBox;
-    if (index !== last || !yScale || box?.x == null)
-        return null;
-    const top = yScale(high);
-    const bottom = yScale(low);
-    if (top == null || bottom == null || Math.abs(bottom - top) < MIN_LABEL_BAND)
-        return null;
-    return (React.createElement("text", { x: box.x - 8, y: (top + bottom) / 2, dy: "0.35em", textAnchor: "end", fill: INK_PRIMARY, stroke: HALO, className: styles.areaLabel }, name));
-}
-/** A 16 px swatch showing the fill actually drawn, edged in --border-size-1 --primary12. */
-function Swatch({ slot, ink, prefix, oneInk, line }) {
-    return (React.createElement("svg", { className: styles.swatch, viewBox: "0 0 16 16", "aria-hidden": "true", focusable: "false" }, line ? (React.createElement(React.Fragment, null,
-        React.createElement("line", { x1: 0, y1: 8, x2: 16, y2: 8, stroke: ink, strokeWidth: STROKE_2 }),
-        React.createElement(MarkerGlyph, { cx: 8, cy: 8, slot: slot, ink: ink }))) : (React.createElement("rect", { x: 0.5, y: 0.5, width: 15, height: 15, fill: slotFill(prefix, slot, oneInk), fillOpacity: 1, stroke: INK_PRIMARY, strokeWidth: STROKE_1 }))));
-}
-/**
- * The tooltip panel: an anchored overlay with a --border-size-2 --primary12
- * edge, the Tooltip roles (--primary1 face, --primary12 text) and values in
- * `type-data`; no shadow. It repeats the row's values in series order, the
- * same values the table holds, and never adds one.
- */
-function ChartTooltip({ active, payload, series, categoryKey, steps, prefix, oneInk, line, format, }) {
-    const row = payload?.[0]?.payload;
-    if (!active || !row)
-        return null;
-    return (React.createElement("div", { className: styles.tooltip },
-        React.createElement("p", { className: styles.tooltipLabel }, textOf(row[categoryKey])),
-        React.createElement("ul", { className: styles.tooltipList },
-            series.map((entry) => {
-                const value = valueOf(row, entry.key);
-                return (React.createElement("li", { key: entry.key, className: styles.tooltipItem },
-                    React.createElement(Swatch, { slot: entry.slot, ink: entry.ink, prefix: prefix, oneInk: oneInk, line: line }),
-                    React.createElement("span", { className: styles.tooltipName }, entry.name),
-                    React.createElement("span", { className: styles.tooltipValue }, value == null ? '—' : format(value))));
-            }),
-            steps ? (React.createElement("li", { className: styles.tooltipItem },
-                React.createElement("span", { "aria-hidden": "true" }),
-                React.createElement("span", { className: styles.tooltipName }, steps.name),
-                React.createElement("span", { className: styles.tooltipValue },
-                    stepOf(row, steps.key),
-                    "/5"))) : null)));
-}
-function Plot(props) {
-    const { variant, prefix, print, width, height, rows, categoryKey, series, stacked, steps, labels, oneInk, animate, format, title, } = props;
-    const last = rows.length - 1;
-    const labelFormatter = (value) => (typeof value === 'number' ? format(value) : textOf(value));
-    const longestValue = Math.max(1, ...rows.flatMap((row) => series.map((entry) => {
-        const value = stacked
-            ? series.reduce((sum, item) => sum + (valueOf(row, item.key) ?? 0), 0)
-            : valueOf(row, entry.key);
-        return value == null ? 0 : format(value).length;
-    })));
-    const longestName = Math.max(1, ...series.map((entry) => entry.name.length));
-    const shared = {
-        id: prefix,
-        data: rows,
-        accessibilityLayer: !print,
-        title,
-        width,
-        height: width == null ? undefined : height,
-        tabIndex: print ? -1 : undefined,
-        style: print
-            ? { width: '100%', height: 'auto', aspectRatio: `${width} / ${height}` }
-            : undefined,
-    };
-    // Lines are told apart by markers, so they need no pattern slots.
-    const defs = (React.createElement(PatternDefs, { prefix: prefix, oneInk: oneInk, slots: variant === 'line' ? [] : series.map((entry) => entry.slot), steps: steps != null, classNames: patternClassNames }));
-    const tooltip = (cursor) => print ? null : (React.createElement(Tooltip, { content: React.createElement(ChartTooltip, { series: series, categoryKey: categoryKey, steps: steps, prefix: prefix, oneInk: oneInk, line: variant === 'line', format: format }), cursor: cursor === 'band'
-            ? { className: styles.cursorBand, fill: 'none', stroke: INK_PRIMARY, strokeWidth: STROKE_1 }
-            : { className: styles.cursorLine, stroke: INK_PRIMARY }, isAnimationActive: animate, animationDuration: DURATION, animationEasing: "ease-out" }));
-    const animation = {
-        isAnimationActive: animate,
-        animationDuration: DURATION,
-        animationEasing: 'ease-out',
-    };
-    const categoryTick = { className: styles.categoryTick, fill: INK_PRIMARY };
-    // Value ticks sit on their rules (Crab Fit): the numeral just above its gridline.
-    const valueTick = { className: styles.valueTick, fill: INK_PRIMARY, dy: -6 };
-    if (variant === 'bars' || variant === 'columns') {
-        const horizontal = variant === 'bars';
-        const onFill = stacked;
-        const labelPosition = onFill ? 'center' : horizontal ? 'right' : 'top';
-        const endSpace = labels && !onFill ? Math.ceil(longestValue * DATA_CHAR) + 12 : 12;
-        return (React.createElement(BarChart, { ...shared, layout: horizontal ? 'vertical' : 'horizontal', barGap: BAR_GAP, barCategoryGap: horizontal ? CATEGORY_GAP : '30%', margin: horizontal
-                ? { top: 4, right: endSpace, bottom: 4, left: 0 }
-                : { top: labels && !onFill ? 24 : 12, right: 8, bottom: 0, left: 0 } },
-            defs,
-            React.createElement(CartesianGrid, { horizontal: horizontal ? false : gridLine, vertical: horizontal && !labels ? gridLine : false }),
-            horizontal ? (React.createElement(React.Fragment, null,
-                React.createElement(XAxis, { type: "number", hide: labels, axisLine: false, tickLine: false, tick: { ...valueTick, dy: 4 }, tickFormatter: format, height: AXIS_HEIGHT }),
-                React.createElement(YAxis, { type: "category", dataKey: categoryKey, width: "auto", axisLine: false, tickLine: false, tickMargin: 8, interval: 0, tick: categoryTick }),
-                React.createElement(ReferenceLine, { x: 0, stroke: INK_PRIMARY, strokeWidth: STROKE_1, className: styles.zeroLine, ifOverflow: "discard" }))) : (React.createElement(React.Fragment, null,
-                React.createElement(XAxis, { type: "category", dataKey: categoryKey, axisLine: false, tickLine: false, tickMargin: 8, tick: categoryTick }),
-                React.createElement(YAxis, { type: "number", width: "auto", axisLine: false, tickLine: false, tickMargin: 8, tick: valueTick, tickFormatter: format }),
-                React.createElement(ReferenceLine, { y: 0, stroke: INK_PRIMARY, strokeWidth: STROKE_1, className: styles.zeroLine, ifOverflow: "discard" }))),
-            tooltip('band'),
-            series.map((entry) => (React.createElement(Bar, { key: entry.key, dataKey: entry.key, name: entry.name, fill: slotFill(prefix, entry.slot, oneInk), fillOpacity: 1, stroke: INK_PRIMARY, strokeWidth: STROKE_1, radius: 0, stackId: stacked ? 'stack' : undefined, barSize: horizontal ? BAR_THICKNESS : undefined, maxBarSize: horizontal ? undefined : MAX_COLUMN, shape: steps ? React.createElement(StepShape, { prefix: prefix, stepKey: steps.key }) : undefined, activeBar: steps || print ? false : { strokeWidth: STROKE_2 }, ...animation }, labels ? (React.createElement(LabelList, { dataKey: entry.key, position: labelPosition, offset: 8, formatter: labelFormatter, fill: INK_PRIMARY, stroke: onFill ? HALO : undefined, className: onFill ? styles.labelOnFill : styles.valueLabel })) : null)))));
-    }
-    const categoryAxis = (React.createElement(XAxis, { type: "category", dataKey: categoryKey, axisLine: false, tickLine: false, tickMargin: 8, tick: categoryTick }));
-    const valueAxis = (React.createElement(YAxis, { type: "number", width: "auto", axisLine: false, tickLine: false, tickMargin: 8, tick: valueTick, tickFormatter: format }));
-    const zeroLine = (React.createElement(ReferenceLine, { y: 0, stroke: INK_PRIMARY, strokeWidth: STROKE_1, className: styles.zeroLine, ifOverflow: "discard" }));
-    if (variant === 'line') {
-        const endSpace = labels
-            ? Math.ceil(longestName * TEXT_CHAR + longestValue * DATA_CHAR) + MARKER_RADIUS + 20
-            : 12;
-        return (React.createElement(LineChart, { ...shared, margin: { top: 12, right: endSpace, bottom: 0, left: 0 } },
-            defs,
-            React.createElement(CartesianGrid, { horizontal: gridLine, vertical: false }),
-            categoryAxis,
-            valueAxis,
-            zeroLine,
-            tooltip('line'),
-            series.map((entry) => (React.createElement(Line, { key: entry.key, type: "linear", dataKey: entry.key, name: entry.name, stroke: entry.ink, strokeWidth: STROKE_2, fill: "none", dot: React.createElement(MarkerGlyph, { slot: entry.slot, ink: entry.ink }), activeDot: print ? false : React.createElement(MarkerGlyph, { slot: entry.slot, ink: entry.ink, active: true }), ...animation }, labels ? (React.createElement(LabelList, { content: React.createElement(EndLabel, { last: last, name: entry.name, format: format }) })) : null)))));
-    }
-    // Stacked areas: each band's low and high at the last point, for its label.
-    const lastRow = rows[last];
-    let running = 0;
-    const bands = series.map((entry) => {
-        const low = running;
-        running += valueOf(lastRow, entry.key) ?? 0;
-        return { low, high: running };
-    });
-    return (React.createElement(AreaChart, { ...shared, margin: { top: 12, right: 12, bottom: 0, left: 0 } },
-        defs,
-        React.createElement(CartesianGrid, { horizontal: gridLine, vertical: false }),
-        categoryAxis,
-        valueAxis,
-        tooltip('line'),
-        series.map((entry, index) => (React.createElement(Area, { key: entry.key, type: "linear", dataKey: entry.key, name: entry.name, stackId: "stack", fill: slotFill(prefix, entry.slot, oneInk), fillOpacity: 1, stroke: INK_PRIMARY, strokeWidth: STROKE_1, dot: false, activeDot: print ? false : { r: MARKER_RADIUS, fill: HALO, stroke: INK_PRIMARY, strokeWidth: STROKE_2 }, ...animation }, labels ? (React.createElement(LabelList, { content: React.createElement(AreaLabel, { last: last, low: bands[index].low, high: bands[index].high, name: entry.name }) })) : null))),
-        zeroLine));
-}
-/**
- * The custom legend (Recharts' own is never used): 16 px swatches showing
- * the fill drawn, in the chart's inks, and for a sequential encoding a
- * framed stepped bar with end labels. Its patterns are defined in its own
- * defs, so it never depends on a chart copy that is hidden.
- */
-function Legend({ series, prefix, oneInk, line, showSeries, steps }) {
-    return (React.createElement("div", { className: styles.legend },
-        React.createElement("svg", { className: styles.defs, "aria-hidden": "true", focusable: "false" },
-            React.createElement(PatternDefs, { prefix: prefix, oneInk: oneInk, slots: series.map((entry) => entry.slot), steps: steps != null, classNames: patternClassNames })),
-        showSeries ? (React.createElement("ul", { className: styles.legendList }, series.map((entry) => (React.createElement("li", { key: entry.key, className: styles.legendItem },
-            React.createElement(Swatch, { slot: entry.slot, ink: entry.ink, prefix: prefix, oneInk: oneInk, line: line }),
-            React.createElement("span", { className: styles.legendLabel }, entry.name)))))) : null,
-        steps ? (React.createElement("div", { className: styles.stepLegend },
-            steps.labels ? React.createElement("span", { className: styles.stepLabel }, steps.labels[0]) : null,
-            React.createElement("svg", { className: styles.stepBar, viewBox: "0 0 81 17", "aria-hidden": "true", focusable: "false" }, [1, 2, 3, 4, 5].map((step) => {
-                const cell = { x: (step - 1) * 16 + 0.5, y: 0.5, width: 16, height: 16 };
-                return (React.createElement("g", { key: step },
-                    React.createElement("rect", { ...cell, className: styles.stepFill, fill: SEQUENTIAL_FILLS[step], stroke: INK_PRIMARY, strokeWidth: STROKE_1 }),
-                    React.createElement("rect", { ...cell, className: styles.stepPattern, fill: stepPatternFill(prefix, step), stroke: INK_PRIMARY, strokeWidth: STROKE_1 })));
-            })),
-            steps.labels ? React.createElement("span", { className: styles.stepLabel }, steps.labels[1]) : null)) : null));
-}
-/**
- * The data-table alternative, a §8.2 Table with the chart's series names
- * and units: right-aligned tabular numerals, "—" for an empty cell, the
- * five-row cadence past 10 rows. Up to four columns it fits at every width;
- * wider, it scrolls with the category column pinned.
- */
-function DataTable({ caption, valueLabel, categoryLabel, rows, categoryKey, series, steps, format, }) {
-    const columns = 1 + series.length + (steps ? 1 : 0);
-    return (React.createElement(Table, { strategy: columns <= 4 ? 'fit' : 'scroll' },
-        React.createElement(TableCaption, { note: valueLabel }, caption),
-        React.createElement(TableHead, null,
-            React.createElement(TableRow, null,
-                React.createElement(TableHeaderCell, null, categoryLabel),
-                series.map((entry) => (React.createElement(TableHeaderCell, { key: entry.key, numeric: true }, entry.name))),
-                steps ? React.createElement(TableHeaderCell, { numeric: true }, steps.name) : null)),
-        React.createElement(TableBody, null, rows.map((row, index) => (React.createElement(TableRow, { key: `${textOf(row[categoryKey])}-${index}` },
-            React.createElement(TableHeaderCell, null, textOf(row[categoryKey])),
-            series.map((entry) => {
-                const value = valueOf(row, entry.key);
-                return (React.createElement(TableCell, { key: entry.key, numeric: true }, value == null ? '—' : format(value)));
-            }),
-            steps ? (React.createElement(TableCell, { numeric: true }, valueOf(row, steps.key) == null ? '—' : `${stepOf(row, steps.key)}/5`)) : null))))));
-}
-/* ------------------------------------------------------------------ */
-/* Chart                                                               */
-/* ------------------------------------------------------------------ */
-/**
- * A chart figure (§8.7) built with Recharts [D167]. Categories are told
- * apart by the `pattern-series` slots, on screen as in print: odd slots in
- * --secondary11, even in --primary12, slot 1 solid, slot 6 outline, every
- * shape edged in --border-size-1 --primary12 [D125]. Values are labelled
- * directly; the tooltip and the keyboard accessibility layer repeat them;
- * the "Show Data Table" Collapsible holds them all. The chart follows its
- * container's width on screen and prints at a fixed 174 mm, animation off.
- */
-export function Chart(props) {
-    const { kind, data, categoryKey, categoryLabel = 'Category', series, caption, figureLabel, source, valueLabel, formatValue, stacked = false, highlight, steps, labels = true, legend, height, printHeight, oneInk, primary, secondary, tableLabel = 'Show Data Table', tableOpenLabel = 'Hide Data Table', className, ...rest } = props;
-    const scope = useScopeAttributes();
-    const motionOK = useMediaQuery(MOTION_QUERY);
-    const id = safeId(React.useId(), 'chart');
-    const resolvedKind = kind ?? 'bar';
-    const ink = oneInk === true;
-    const format = formatValue ?? defaultFormat;
-    const rows = data;
-    const isBar = resolvedKind === 'bar' || resolvedKind === 'column';
-    const stepEncoding = isBar && steps ? { key: steps.key, name: steps.name } : undefined;
-    const stack = resolvedKind === 'area' || (isBar && stacked && !stepEncoding);
-    const resolved = React.useMemo(() => series.slice(0, stepEncoding ? 1 : 6).map((entry, index) => {
-        const slot = highlight
-            ? entry.key === highlight
-                ? 1
-                : 6
-            : (entry.slot ?? Math.min(index + 1, 6));
-        return { key: entry.key, name: entry.name, slot, ink: slotInk(slot, ink) };
-    }), [series, highlight, ink, stepEncoding]);
-    const showSeriesLegend = legend ?? (isBar && resolved.length > 1);
-    const showLegend = showSeriesLegend || stepEncoding != null;
-    // Values that live only in the tooltip (every line point but the last,
-    // area values, unlabelled charts) print as the data table beside the chart.
-    const printTable = !labels || resolvedKind === 'line' || resolvedKind === 'area';
-    const groupSize = stack || stepEncoding ? 1 : Math.max(1, resolved.length);
-    const barsHeight = rows.length * (groupSize * BAR_THICKNESS + (groupSize - 1) * BAR_GAP + CATEGORY_GAP) +
-        8 +
-        (labels ? 0 : AXIS_HEIGHT);
-    const screenHeight = height ?? (resolvedKind === 'bar' ? barsHeight : DEFAULT_HEIGHT);
-    const columnsHeight = height ?? DEFAULT_HEIGHT;
-    const plotProps = {
-        rows,
-        categoryKey,
-        series: resolved,
-        stacked: stack,
-        steps: stepEncoding,
-        labels,
-        oneInk: ink,
-        format,
-        title: typeof caption === 'string' ? caption : undefined,
-    };
-    const screenVariant = isBar ? 'bars' : resolvedKind;
-    // Print resolves against the printed column (174 mm, under 1024 px), so a
-    // column chart prints as horizontal bars.
-    const printVariant = screenVariant;
-    const printPlotHeight = printHeight ?? (isBar ? (resolvedKind === 'bar' ? screenHeight : barsHeight) : screenHeight);
-    return (React.createElement("div", { ...rest, ...scope, className: chart({
-            kind,
-            oneInk,
-            primary,
-            secondary,
-            className: cx(printTable && styles.printTable, className) || undefined,
-        }) },
-        React.createElement(Figure, { kind: "technical" },
-            React.createElement(FigureMedia, { className: cx(styles.body, showLegend && styles.withLegend) },
-                showLegend ? (React.createElement(Legend, { series: resolved, prefix: `${id}-legend`, oneInk: ink, line: resolvedKind === 'line', showSeries: showSeriesLegend, steps: stepEncoding ? steps : undefined })) : null,
-                React.createElement("div", { className: styles.chartArea },
-                    valueLabel ? React.createElement("p", { className: styles.axisTitle }, valueLabel) : null,
-                    React.createElement("div", { className: styles.plot },
-                        React.createElement("div", { className: styles.plotBars },
-                            React.createElement(ResponsiveContainer, { width: "100%", height: isBar ? barsHeight : screenHeight },
-                                React.createElement(Plot, { ...plotProps, variant: screenVariant, prefix: `${id}-screen`, print: false, height: isBar ? barsHeight : screenHeight, animate: motionOK }))),
-                        resolvedKind === 'column' ? (React.createElement("div", { className: styles.plotColumns },
-                            React.createElement(ResponsiveContainer, { width: "100%", height: columnsHeight },
-                                React.createElement(Plot, { ...plotProps, variant: "columns", prefix: `${id}-columns`, print: false, height: columnsHeight, animate: motionOK })))) : null),
-                    React.createElement("div", { className: styles.print, "aria-hidden": "true", inert: true },
-                        React.createElement(Plot, { ...plotProps, variant: printVariant, prefix: `${id}-print`, print: true, width: PRINT_WIDTH, height: printPlotHeight, animate: false })))),
-            React.createElement(FigureCaption, { label: figureLabel, credit: source }, caption)),
-        React.createElement(Collapsible, { className: styles.dataTable },
-            React.createElement(CollapsibleTrigger, { openLabel: tableOpenLabel }, tableLabel),
-            React.createElement(CollapsiblePanel, null,
-                React.createElement(DataTable, { caption: caption, valueLabel: valueLabel, categoryLabel: categoryLabel, rows: rows, categoryKey: categoryKey, series: resolved, steps: stepEncoding ? steps : undefined, format: format })))));
-}
-//# sourceMappingURL=Chart.js.map