@scalewing/react 1.38.0 → 1.40.0

package/dist/components/ChartLegend.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from '../class-names.js';
+import { chartFillTones, chartStrokeTones, } from '../css/chart-tones.js';
+import { chartLegendSwatches, } from '../css/css-chart-legend.js';
+import { isOneOf } from '../is-one-of.js';
+export { chartFillTones, chartLegendSwatches, chartStrokeTones };
+/** Refuses empty words, and a swatch or a tone the item cannot draw. */
+function assertLegendItem(item) {
+    if (typeof item.label !== 'string' || item.label.trim() === '')
+        throw new RangeError('ChartLegend item label must not be empty');
+    if (!isOneOf(chartLegendSwatches, item.swatch))
+        throw new RangeError(`ChartLegend swatch must be one of ${chartLegendSwatches.join(', ')}; received ${String(item.swatch)}`);
+    const tones = item.swatch === 'bar' ? chartFillTones : chartStrokeTones;
+    if (!isOneOf(tones, item.tone))
+        throw new RangeError(`ChartLegend ${item.swatch} tone must be one of ${tones.join(', ')}; received ${String(item.tone)}`);
+}
+/**
+ * A chart's key: a list of its marks, each a swatch and its words, in a
+ * wrapping row in the caption type. Put it above the chart it names, or
+ * above a statement's range bars. The swatches are decorative
+ * (`aria-hidden`), so each item reads as its words; the list keeps its
+ * list role where a style would drop it. Empty words, or a swatch or tone the
+ * item cannot draw, throw a `RangeError`.
+ */
+export const ChartLegend = forwardRef(function ChartLegend({ className, items, ...rest }, ref) {
+    for (const item of items)
+        assertLegendItem(item);
+    return (_jsx("ul", { ref: ref, className: cx('sw-chart-legend', className), 
+        // A list styled without markers loses its role in Safari.
+        role: "list", ...rest, children: items.map((item, index) => (_jsxs("li", { className: cx('sw-chart-legend-item', `sw-chart-tone-${item.tone}`), children: [_jsx("span", { "aria-hidden": "true", className: cx('sw-chart-legend-swatch', `sw-chart-legend-${item.swatch}`) }), item.label] }, `${item.label}-${index}`))) }));
+});

package/dist/components/ColumnChart.d.ts

@@ -0,0 +1,72 @@
+import { type HTMLAttributes } from 'react';
+import { type ColumnChartMode, columnChartModes } from '../column-chart-bars.js';
+import { type ColumnChartCallout, type ColumnChartLine, type ColumnChartSeries } from '../column-chart-input.js';
+export type { ColumnChartCallout, ColumnChartLine, ColumnChartMode, ColumnChartSeries, };
+export { columnChartModes };
+export type ColumnChartProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Names the chart: the caption of the table that carries its figures. */
+    label: string;
+    /** The columns' places, such as weeks, in order; each is a row's header. */
+    categories: readonly string[];
+    /** Each series: a value per category, drawn in a categorical hue. */
+    series: readonly ColumnChartSeries[];
+    /**
+     * `stacked` (the default) puts a category's columns on one another,
+     * positive values up from zero and negative ones down from it;
+     * `grouped` sets them side by side, each from zero.
+     */
+    mode?: ColumnChartMode;
+    /** A line over the columns, such as a running total, on its own scale. */
+    line?: ColumnChartLine;
+    /** The index of the category to box, such as the current week. */
+    highlight?: number;
+    /** Words pinned above a category's column, with a leader down to it. */
+    callouts?: readonly ColumnChartCallout[];
+    /**
+     * Writes each figure in the table and the line's last value, such as a
+     * currency. Defaults to a plain number with at most one decimal.
+     */
+    formatValue?: (value: number) => string;
+    /** Writes the axes' values, shorter if need be; defaults to `formatValue`. */
+    formatTick?: (value: number) => string;
+};
+/**
+ * Columns for each category (a week, a month), stacked or grouped by
+ * series, with an optional line on its own right-hand scale whose zero
+ * and grid lines are level with the columns', the current period boxed
+ * and callouts pinned above their columns. It fills its container's width
+ * and is laid out for it: a narrow chart labels fewer categories and lists
+ * its callouts under the plot, never scrolling sideways. The drawing is
+ * hidden from assistive technology; a visually hidden table named by
+ * `label` carries every figure, and the callouts stay a list. Put it on
+ * the surface (a `Card`) with a `ChartLegend` above it naming each series
+ * (`bar` in its tone), the line (`line`, `accent`) and the box (`box`,
+ * `accent`). Input it cannot draw throws a `RangeError`.
+ */
+export declare const ColumnChart: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Names the chart: the caption of the table that carries its figures. */
+    label: string;
+    /** The columns' places, such as weeks, in order; each is a row's header. */
+    categories: readonly string[];
+    /** Each series: a value per category, drawn in a categorical hue. */
+    series: readonly ColumnChartSeries[];
+    /**
+     * `stacked` (the default) puts a category's columns on one another,
+     * positive values up from zero and negative ones down from it;
+     * `grouped` sets them side by side, each from zero.
+     */
+    mode?: ColumnChartMode;
+    /** A line over the columns, such as a running total, on its own scale. */
+    line?: ColumnChartLine;
+    /** The index of the category to box, such as the current week. */
+    highlight?: number;
+    /** Words pinned above a category's column, with a leader down to it. */
+    callouts?: readonly ColumnChartCallout[];
+    /**
+     * Writes each figure in the table and the line's last value, such as a
+     * currency. Defaults to a plain number with at most one decimal.
+     */
+    formatValue?: (value: number) => string;
+    /** Writes the axes' values, shorter if need be; defaults to `formatValue`. */
+    formatTick?: (value: number) => string;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ColumnChart.js

@@ -0,0 +1,71 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatBarChartValue } from '@scalewing/tokens';
+import { forwardRef, useImperativeHandle, useRef, } from 'react';
+import { cx } from '../class-names.js';
+import { columnChartModes, } from '../column-chart-bars.js';
+import { assertColumnChartInput, } from '../column-chart-input.js';
+import { columnChartLayout } from '../column-chart-layout.js';
+import { ChartTable } from './chart/ChartTable.js';
+import { useChartWidth } from './chart/use-chart-width.js';
+import { ChartCalloutList } from './column-chart/ChartCalloutList.js';
+import { ColumnChartDrawing } from './column-chart/ColumnChartDrawing.js';
+export { columnChartModes };
+const noCallouts = [];
+/**
+ * Columns for each category (a week, a month), stacked or grouped by
+ * series, with an optional line on its own right-hand scale whose zero
+ * and grid lines are level with the columns', the current period boxed
+ * and callouts pinned above their columns. It fills its container's width
+ * and is laid out for it: a narrow chart labels fewer categories and lists
+ * its callouts under the plot, never scrolling sideways. The drawing is
+ * hidden from assistive technology; a visually hidden table named by
+ * `label` carries every figure, and the callouts stay a list. Put it on
+ * the surface (a `Card`) with a `ChartLegend` above it naming each series
+ * (`bar` in its tone), the line (`line`, `accent`) and the box (`box`,
+ * `accent`). Input it cannot draw throws a `RangeError`.
+ */
+export const ColumnChart = forwardRef(function ColumnChart({ callouts = noCallouts, categories, className, formatTick, formatValue = formatBarChartValue, highlight, label, line, mode = 'stacked', series, ...rest }, ref) {
+    assertColumnChartInput({
+        label,
+        categories,
+        series,
+        mode,
+        line,
+        highlight,
+        callouts,
+    });
+    const box = useRef(null);
+    useImperativeHandle(ref, () => box.current, []);
+    const width = useChartWidth(box);
+    const lastLineValue = line?.values.at(-1);
+    const layout = columnChartLayout({
+        width,
+        categories,
+        series: series.map((s) => s.values),
+        mode,
+        line: line
+            ? {
+                values: line.values,
+                endLabel: line.endLabel === false || lastLineValue === undefined
+                    ? null
+                    : formatValue(lastLineValue),
+            }
+            : null,
+        highlight: highlight ?? null,
+        callouts,
+        formatTick: formatTick ?? formatValue,
+    });
+    return (_jsxs("div", { ref: box, className: cx('sw-chart', className), ...rest, children: [_jsx(ColumnChartDrawing, { calloutTones: callouts.map((callout) => callout.tone), layout: layout, tones: series.map((s) => s.tone) }), _jsx(ChartTable, { caption: label, columns: [
+                    ...series.map((s) => s.label),
+                    ...(line ? [line.label] : []),
+                ], rows: categories.map((category, index) => ({
+                    key: `${category}-${index}`,
+                    header: category,
+                    cells: [
+                        ...series.map((s) => formatValue(s.values[index])),
+                        ...(line ? [formatValue(line.values[index])] : []),
+                    ],
+                    current: index === highlight,
+                })) }), _jsx(ChartCalloutList, { callouts: callouts, visible: layout.compact })] }));
+});

package/dist/components/DataBar.d.ts

@@ -13,9 +13,9 @@ export type DataBarProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'a
     max: number;
     /**
      * What the bar means (default `neutral`): `success` for money in,
-     * `muted` for money out (an outflow is not an error, so there is no
-     * danger tone), `strong` for a subtotal and `accent` for a counted or
-     * recorded figure.
+     * `muted` for money out (an outflow is not an error, so it is never
+     * danger), `strong` for a subtotal, `accent` for a counted or recorded
+     * figure and `danger` for a shortage, never for cash leaving.
      */
     tone?: DataBarTone;
 };
@@ -40,9 +40,9 @@ export declare const DataBar: import("react").ForwardRefExoticComponent<Omit<HTM
     max: number;
     /**
      * What the bar means (default `neutral`): `success` for money in,
-     * `muted` for money out (an outflow is not an error, so there is no
-     * danger tone), `strong` for a subtotal and `accent` for a counted or
-     * recorded figure.
+     * `muted` for money out (an outflow is not an error, so it is never
+     * danger), `strong` for a subtotal, `accent` for a counted or recorded
+     * figure and `danger` for a shortage, never for cash leaving.
      */
     tone?: DataBarTone;
 } & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/DateRangeButton.d.ts

@@ -0,0 +1,65 @@
+import { type WeekStart } from '../calendar-month.js';
+import { type DateRangePreset } from '../date-range-input.js';
+import { type DateRangeButtonLabels } from '../date-range-labels.js';
+import { type DateOnlyRange } from '../date-only.js';
+import { type ButtonSize, type ButtonVariant } from './Button.js';
+export type { DateRangeButtonLabels, DateRangePreset };
+/** A span of calendar days `YYYY-MM-DD`, both ends included. */
+export type DateRangeButtonValue = DateOnlyRange;
+export type DateRangeButtonProps = {
+    /**
+     * What pressing it does, such as "Choose a period". The button's name is
+     * this label, `labels.nameSeparator`, then the range it shows; the
+     * popover and the sheet are named by it.
+     */
+    label: string;
+    /**
+     * The range shown, `{ start, end }` as `YYYY-MM-DD`, start not after end.
+     * A range outside `min`/`max` or longer than `maxDays` stays the value.
+     */
+    value: DateRangeButtonValue;
+    /** Receives a new range on Apply or a preset, never converted through UTC. */
+    onChange: (value: DateRangeButtonValue) => void;
+    /**
+     * Ranges chosen in one press, such as "Last 7 days": a list beside the
+     * months (a row above the month on a phone). A press applies its range
+     * and closes. Each must lie inside `min`/`max` and `maxDays`.
+     */
+    presets?: readonly DateRangePreset[];
+    min?: string;
+    /** The last day that can be picked, such as today. */
+    max?: string;
+    /**
+     * The longest range, in days with both ends counted: once a first day is
+     * pressed, the days after this many are disabled.
+     */
+    maxDays?: number;
+    /**
+     * The calendar's today `YYYY-MM-DD`, the day it marks. Defaults to the
+     * device's local date; pass the business's day when it keeps its own.
+     */
+    today?: string;
+    disabled?: boolean;
+    /** The `<button>` element's id. */
+    id?: string;
+    /**
+     * BCP 47 tag for the dates and the calendar's month and weekday names.
+     * Defaults to the nearest `lang` attribute, then en-US.
+     */
+    locale?: string;
+    /** First column of the calendar: 0 Sunday (default) or 1 Monday. */
+    weekStartsOn?: WeekStart;
+    /** The calendar's words; English by default. */
+    labels?: Partial<DateRangeButtonLabels>;
+    /** A Button size; a coarse pointer gets a 44 px target. */
+    size?: ButtonSize;
+    /** Default `neutral`, the quiet grey of a page's period controls. */
+    variant?: ButtonVariant;
+};
+/**
+ * A button showing a range of days that opens a calendar to pick a first
+ * and a last day: from `md` up a popover with the presets and two months,
+ * below it a bottom sheet with one month. Apply gives the range; Cancel,
+ * Escape and a press outside keep the value. The ref reaches the `<button>`.
+ */
+export declare const DateRangeButton: import("react").ForwardRefExoticComponent<DateRangeButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/DateRangeButton.js

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useCallback } from 'react';
+import { breakpointQuery } from '../css/breakpoints.js';
+import { latestPick, rangeDayCount, sameRange } from '../date-range-draft.js';
+import { assertDateRangeInput, } from '../date-range-input.js';
+import { resolveDateRangeButtonLabels, } from '../date-range-labels.js';
+import { formatRangeLong, formatRangeShort } from '../date-range-words.js';
+import { todayDateOnly } from '../date-only.js';
+import { Button } from './Button.js';
+import { DateFieldGlyph } from './date-field/DateFieldGlyph.js';
+import { useLangLocale } from './date-field/use-lang-locale.js';
+import { DateRangePopover } from './date-range/DateRangePopover.js';
+import { DateRangeSheet } from './date-range/DateRangeSheet.js';
+import { useRangePopup } from './date-range/use-range-popup.js';
+import { useMediaQuery } from './use-media-query.js';
+/** Sets a forwarded ref, callback or object, to the same node. */
+function setForwardedRef(ref, node) {
+    if (typeof ref === 'function')
+        ref(node);
+    else if (ref)
+        ref.current = node;
+}
+/**
+ * A button showing a range of days that opens a calendar to pick a first
+ * and a last day: from `md` up a popover with the presets and two months,
+ * below it a bottom sheet with one month. Apply gives the range; Cancel,
+ * Escape and a press outside keep the value. The ref reaches the `<button>`.
+ */
+export const DateRangeButton = forwardRef(function DateRangeButton({ label, value, onChange, presets = [], min, max, maxDays, today, disabled = false, id, locale, weekStartsOn = 0, labels, size = 'md', variant = 'neutral', }, ref) {
+    assertDateRangeInput({
+        label,
+        value,
+        presets,
+        min,
+        max,
+        maxDays,
+        today,
+        weekStartsOn,
+    });
+    const words = resolveDateRangeButtonLabels(labels);
+    const popup = useRangePopup(value, disabled, onChange);
+    const resolvedLocale = useLangLocale(locale, popup.buttonRef);
+    const wide = useMediaQuery(breakpointQuery('from', 'md'), true);
+    const { buttonRef } = popup;
+    const setButton = useCallback((node) => {
+        buttonRef.current = node;
+        setForwardedRef(ref, node);
+    }, [buttonRef, ref]);
+    const { range } = popup.draft;
+    const shown = formatRangeShort(value, resolvedLocale);
+    const Panel = wide ? DateRangePopover : DateRangeSheet;
+    return (_jsxs(_Fragment, { children: [_jsxs(Button, { "aria-controls": popup.shown ? popup.id : undefined, "aria-expanded": popup.shown, "aria-haspopup": "dialog", className: "sw-date-range-button", disabled: disabled, id: id, onPress: popup.toggle, ref: setButton, size: size, variant: variant, children: [_jsx("span", { className: "sw-sr-only", children: `${label}${words.nameSeparator}${shown}` }), _jsx(DateFieldGlyph, { name: "calendar" }), _jsx("span", { "aria-hidden": "true", children: shown })] }), popup.shown ? (_jsx(Panel, { buttonRef: buttonRef, count: words.dayCount(rangeDayCount(range)), draft: popup.draft, id: popup.id, label: label, labels: words, latest: latestPick(popup.draft, max, maxDays), line: formatRangeLong(range, resolvedLocale), locale: resolvedLocale, max: max, min: min, onApply: () => popup.apply(range), onCancel: popup.cancel, onChoosePreset: (preset) => popup.apply(preset.range), onPress: popup.press, presets: presets, pressedPresetId: presets.find((preset) => sameRange(preset.range, range))?.id, today: today ?? todayDateOnly(), weekStartsOn: weekStartsOn })) : null] }));
+});

package/dist/components/LineChart.d.ts

@@ -0,0 +1,83 @@
+import { type HTMLAttributes } from 'react';
+import { type ChartStrokeTone } from '../css/chart-tones.js';
+import { type LineChartMarker, type LineChartPeriod, type LineChartPoint } from '../line-chart-input.js';
+import { type LineChartCurve, lineChartCurves } from '../line-chart-path.js';
+export type { LineChartCurve, LineChartMarker, LineChartPeriod, LineChartPoint, };
+export { lineChartCurves };
+export type LineChartProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Names the chart: the caption of the table that carries its figures. */
+    label: string;
+    /** Heads the table's value column; defaults to `label`. */
+    valueLabel?: string;
+    /** The values by date (`YYYY-MM-DD`), in date order. */
+    points: readonly LineChartPoint[];
+    /**
+     * `linear` (the default) joins each point to the next; `step` holds a
+     * value until the next date, as a balance that changes on a day does.
+     */
+    curve?: LineChartCurve;
+    /** Fills the area between the line and zero with a tint of its tone. */
+    area?: boolean;
+    /** The line's stroke tone (default `accent`). */
+    tone?: ChartStrokeTone;
+    /** Downward triangles on the line at some of its dates, with words. */
+    markers?: readonly LineChartMarker[];
+    /** Heads the table's column of marker words; required with markers. */
+    markersLabel?: string;
+    /** The dates labelled on the time axis; the first and last by default. */
+    ticks?: readonly string[];
+    /** A period to box, such as the current week. */
+    highlight?: LineChartPeriod;
+    /** Writes the last value beside the plot's end (default `true`). */
+    endLabel?: boolean;
+    /** Writes each figure in the table and the last value. */
+    formatValue?: (value: number) => string;
+    /** Writes the value axis; defaults to `formatValue`. */
+    formatTick?: (value: number) => string;
+    /** Writes a date for the time axis and the table; the date itself by default. */
+    formatDate?: (date: string) => string;
+};
+/**
+ * A value over time: a line through its points by date, straight or in
+ * steps, optionally over a tinted area, with markers on chosen dates, a
+ * boxed period and its last value beside the plot. It fills its
+ * container's width and is laid out for it, labelling fewer dates when
+ * they would meet, never scrolling sideways. The drawing is hidden from
+ * assistive technology; a visually hidden table named by `label` carries
+ * every date, value and marker. Pair it with a `ChartLegend` (`line` in its
+ * tone, `marker` in each marker's, `box` in `accent`), on the surface.
+ * Input it cannot draw throws a `RangeError`.
+ */
+export declare const LineChart: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Names the chart: the caption of the table that carries its figures. */
+    label: string;
+    /** Heads the table's value column; defaults to `label`. */
+    valueLabel?: string;
+    /** The values by date (`YYYY-MM-DD`), in date order. */
+    points: readonly LineChartPoint[];
+    /**
+     * `linear` (the default) joins each point to the next; `step` holds a
+     * value until the next date, as a balance that changes on a day does.
+     */
+    curve?: LineChartCurve;
+    /** Fills the area between the line and zero with a tint of its tone. */
+    area?: boolean;
+    /** The line's stroke tone (default `accent`). */
+    tone?: ChartStrokeTone;
+    /** Downward triangles on the line at some of its dates, with words. */
+    markers?: readonly LineChartMarker[];
+    /** Heads the table's column of marker words; required with markers. */
+    markersLabel?: string;
+    /** The dates labelled on the time axis; the first and last by default. */
+    ticks?: readonly string[];
+    /** A period to box, such as the current week. */
+    highlight?: LineChartPeriod;
+    /** Writes the last value beside the plot's end (default `true`). */
+    endLabel?: boolean;
+    /** Writes each figure in the table and the last value. */
+    formatValue?: (value: number) => string;
+    /** Writes the value axis; defaults to `formatValue`. */
+    formatTick?: (value: number) => string;
+    /** Writes a date for the time axis and the table; the date itself by default. */
+    formatDate?: (date: string) => string;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/LineChart.js

@@ -0,0 +1,77 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatBarChartValue } from '@scalewing/tokens';
+import { forwardRef, useImperativeHandle, useRef, } from 'react';
+import { cx } from '../class-names.js';
+import { assertLineChartInput, lineChartDay, } from '../line-chart-input.js';
+import { lineChartLayout } from '../line-chart-layout.js';
+import { lineChartRows } from '../line-chart-table.js';
+import { lineChartCurves } from '../line-chart-path.js';
+import { ChartTable } from './chart/ChartTable.js';
+import { useChartWidth } from './chart/use-chart-width.js';
+import { LineChartDrawing } from './line-chart/LineChartDrawing.js';
+export { lineChartCurves };
+const none = [];
+const sameDate = (date) => date;
+/**
+ * A value over time: a line through its points by date, straight or in
+ * steps, optionally over a tinted area, with markers on chosen dates, a
+ * boxed period and its last value beside the plot. It fills its
+ * container's width and is laid out for it, labelling fewer dates when
+ * they would meet, never scrolling sideways. The drawing is hidden from
+ * assistive technology; a visually hidden table named by `label` carries
+ * every date, value and marker. Pair it with a `ChartLegend` (`line` in its
+ * tone, `marker` in each marker's, `box` in `accent`), on the surface.
+ * Input it cannot draw throws a `RangeError`.
+ */
+export const LineChart = forwardRef(function LineChart({ area = false, className, curve = 'linear', endLabel = true, formatDate = sameDate, formatTick, formatValue = formatBarChartValue, highlight, label, markers = none, markersLabel, points, ticks, tone = 'accent', valueLabel, ...rest }, ref) {
+    assertLineChartInput({
+        label,
+        valueLabel,
+        points,
+        curve,
+        tone,
+        markers,
+        markersLabel,
+        ticks,
+        highlight,
+    });
+    const box = useRef(null);
+    useImperativeHandle(ref, () => box.current, []);
+    const width = useChartWidth(box);
+    const lastPoint = points.at(-1);
+    const tickDates = ticks ??
+        [...new Set([points[0]?.x, lastPoint?.x])].filter((date) => date !== undefined);
+    const layout = lineChartLayout({
+        width,
+        points: points.map((p) => ({ day: lineChartDay('x', p.x), y: p.y })),
+        curve,
+        area,
+        markers: markers.map((m) => ({
+            day: lineChartDay('x', m.x),
+            label: m.label,
+        })),
+        ticks: tickDates.map((date) => ({
+            day: lineChartDay('tick', date),
+            text: formatDate(date),
+        })),
+        highlight: highlight
+            ? {
+                from: lineChartDay('from', highlight.from),
+                to: lineChartDay('to', highlight.to),
+            }
+            : null,
+        endLabel: endLabel && lastPoint ? formatValue(lastPoint.y) : null,
+        formatTick: formatTick ?? formatValue,
+    });
+    return (_jsxs("div", { ref: box, className: cx('sw-chart', className), ...rest, children: [_jsx(LineChartDrawing, { layout: layout, markerTones: markers.map((m) => m.tone), tone: tone }), _jsx(ChartTable, { caption: label, columns: [
+                    valueLabel ?? label,
+                    ...(markers.length > 0 ? [markersLabel] : []),
+                ], rows: lineChartRows({
+                    formatDate,
+                    formatValue,
+                    highlight,
+                    markers,
+                    points,
+                }) })] }));
+});

package/dist/components/ListGroup.d.ts

@@ -0,0 +1,33 @@
+import { type ReactNode } from 'react';
+import { type ListGroupMaxHeight, type ListGroupVariant } from '../list-options.js';
+export type ListGroupProps = {
+    /** `ListRow` elements; the group draws a hairline between each pair. */
+    children: ReactNode;
+    /** Names the list, such as its card's heading. Required with `maxHeight`. */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    /**
+     * `panel` (the default) is one bordered panel; `plain` draws no panel
+     * and a hairline above the first row too, for rows inside a Card.
+     */
+    variant?: ListGroupVariant;
+    /**
+     * Bounds the list to a row count of its own region, `{ rows }` rows of a
+     * title and one detail line, where the rest scroll; the region is a named
+     * keyboard stop and shades an edge with more rows past it.
+     */
+    maxHeight?: ListGroupMaxHeight;
+    /**
+     * Pinned under the rows, outside the scroll, under a hairline: a total
+     * the rows add up to, such as a `ListRow` with the count and the sum.
+     */
+    footer?: ReactNode;
+    className?: string;
+    id?: string;
+};
+/**
+ * Rows in one list (`ul`, its list role kept) with hairlines between them:
+ * a panel of its own, or plain rows inside a surface. The ref reaches the
+ * outer box.
+ */
+export declare const ListGroup: import("react").ForwardRefExoticComponent<ListGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ListGroup.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from '../class-names.js';
+import { assertListGroup, listMaxHeightStyle, } from '../list-options.js';
+import { ListRowContainer } from './list/list-row-container.js';
+import { ScrollRegion } from './ScrollRegion.js';
+/**
+ * Rows in one list (`ul`, its list role kept) with hairlines between them:
+ * a panel of its own, or plain rows inside a surface. The ref reaches the
+ * outer box.
+ */
+export const ListGroup = forwardRef(function ListGroup({ children, 'aria-label': label, 'aria-labelledby': labelledBy, variant = 'panel', maxHeight, footer, className, id, }, ref) {
+    assertListGroup({ label, labelledBy, variant, maxHeight });
+    const list = (_jsx("ul", { "aria-label": label, "aria-labelledby": labelledBy, className: "sw-list", 
+        // A list styled without bullets loses its role in Safari.
+        role: "list", children: _jsx(ListRowContainer.Provider, { value: "li", children: children }) }));
+    return (_jsxs("div", { className: cx('sw-list-group', `sw-list-group-${variant}`, className), id: id, ref: ref, children: [maxHeight === undefined ? (list) : (_jsx(ScrollRegion, { "aria-label": label, "aria-labelledby": labelledBy, className: "sw-list-group-scroll", style: listMaxHeightStyle(maxHeight), children: list })), footer === undefined ? null : (_jsx("div", { className: "sw-list-group-footer", children: _jsx(ListRowContainer.Provider, { value: "div", children: footer }) }))] }));
+});

package/dist/components/ListRow.d.ts

@@ -0,0 +1,51 @@
+import { type ReactNode } from 'react';
+import { type ListRowTitleAppearance, type ListRowTone, type ListRowValueTone } from '../list-options.js';
+export type ListRowProps = {
+    title: string;
+    /** A muted line under the title. */
+    detail?: string;
+    /** A figure or word at the row's end, such as "+$1.48". */
+    value?: string;
+    /** A muted line under the value, such as "checks $3,427". */
+    valueDetail?: string;
+    /** Colours the value only, as a table cell's tone; the words say why. */
+    valueTone?: ListRowValueTone;
+    /**
+     * A consumer mark at the row's start, such as a status dot or a Lucide
+     * glyph (ADR 0008). It is hidden from assistive technology, so the words
+     * must say what it means.
+     */
+    leading?: ReactNode;
+    /**
+     * Makes the whole row a button (or, with `href`, a link's plain press
+     * for a client router) and adds the chevron.
+     */
+    onPress?: () => void;
+    /** Makes the whole row a link to `href`, with the chevron. */
+    href?: string;
+    /**
+     * Makes the row a choice: a check while true, nothing while false, and
+     * the state (`aria-pressed` on a button, `aria-current` on a link). Only
+     * on a row with `onPress` or `href`.
+     */
+    selected?: boolean;
+    /** Dims the row and blocks presses; a link row drops its `href`. */
+    disabled?: boolean;
+    /** `danger` draws the title in the danger colour, for a row that ends something. */
+    tone?: ListRowTone;
+    /** `plain` sets the title at the body weight, for a list of plain statements. */
+    titleAppearance?: ListRowTitleAppearance;
+    /** `none` hides the chevron of a pressable row that acts in place. */
+    accessory?: 'chevron' | 'none';
+    /**
+     * Replaces a pressable row's name, which is its title and value; its
+     * detail lines are its description.
+     */
+    'aria-label'?: string;
+};
+/**
+ * One row of a `ListGroup`: it opens something (`onPress` or `href`, with
+ * a chevron, the whole row pressing), picks one option in place
+ * (`selected`), or only states something (neither).
+ */
+export declare function ListRow({ title, detail, value, valueDetail, valueTone, leading, onPress, href, selected, disabled, tone, titleAppearance, accessory, 'aria-label': ariaLabel, }: ListRowProps): import("react").JSX.Element;

package/dist/components/ListRow.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useId } from 'react';
+import { cx } from '../class-names.js';
+import { assertListRow, listRowAccessory, } from '../list-options.js';
+import { tabStop } from '../tab-stop.js';
+import { plainPress } from './link-press.js';
+import { ListRowContent } from './list/ListRowContent.js';
+import { ListRowContainer } from './list/list-row-container.js';
+function ids(...parts) {
+    const joined = parts.filter(Boolean).join(' ');
+    return joined === '' ? undefined : joined;
+}
+/**
+ * One row of a `ListGroup`: it opens something (`onPress` or `href`, with
+ * a chevron, the whole row pressing), picks one option in place
+ * (`selected`), or only states something (neither).
+ */
+export function ListRow({ title, detail, value, valueDetail, valueTone, leading, onPress, href, selected, disabled = false, tone = 'default', titleAppearance = 'strong', accessory = 'chevron', 'aria-label': ariaLabel, }) {
+    const pressable = onPress !== undefined || href !== undefined;
+    assertListRow({
+        title,
+        tone,
+        titleAppearance,
+        valueTone,
+        accessory,
+        value,
+        valueDetail,
+        selected,
+        pressable,
+    });
+    const container = useContext(ListRowContainer);
+    const id = useId();
+    const kind = listRowAccessory({ pressable, selected, accessory });
+    const content = (_jsx(ListRowContent, { accessory: kind, detail: detail, id: id, leading: leading, title: title, titleAppearance: titleAppearance, tone: tone, value: value, valueDetail: valueDetail, valueTone: valueTone }));
+    const className = cx('sw-list-row', pressable && 'sw-list-row-pressable', disabled && 'sw-list-row-disabled');
+    const naming = {
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabel
+            ? undefined
+            : ids(`${id}-title`, value !== undefined && `${id}-value`),
+        'aria-describedby': ids(Boolean(detail) && `${id}-detail`, Boolean(valueDetail) && `${id}-value-detail`),
+    };
+    let row;
+    if (href !== undefined)
+        row = (_jsx("a", { ...naming, "aria-current": selected ? 'true' : undefined, "aria-disabled": disabled || undefined, className: className, href: disabled ? undefined : href, onClick: onPress && !disabled
+                ? (event) => {
+                    if (!plainPress(event))
+                        return;
+                    event.preventDefault();
+                    onPress();
+                }
+                : undefined, role: disabled ? 'link' : undefined, tabIndex: disabled ? undefined : tabStop, children: content }));
+    else if (onPress !== undefined)
+        row = (_jsx("button", { ...naming, "aria-pressed": selected, className: className, disabled: disabled, onClick: onPress, tabIndex: tabStop, type: "button", children: content }));
+    else
+        row = (_jsx("div", { "aria-label": ariaLabel, className: className, role: ariaLabel ? 'group' : undefined, children: content }));
+    return container === 'li' ? (_jsx("li", { className: "sw-list-item", children: row })) : (_jsx("div", { className: "sw-list-item", children: row }));
+}