@scalewing/react 1.38.0 → 1.40.0

package/dist/components/date-field/CalendarDialog.js

@@ -1,43 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useLayoutEffect, useRef, useState, } from 'react';
-import { monthOf, } from '../../calendar-month.js';
-import { clampDateOnly, daysInMonth, formatDateOnly, isOutsideDateRange, parseDateOnly, } from '../../date-only.js';
+import { useId, useRef, useState } from 'react';
+import { monthOf, sameDayIn } from '../../calendar-month.js';
+import { clampDateOnly, isOutsideDateRange, } from '../../date-only.js';
 import { Button } from '../Button.js';
-import { CalendarGrid } from './CalendarGrid.js';
+import { CalendarGrid } from '../calendar/CalendarGrid.js';
 import { CalendarHeader } from './CalendarHeader.js';
-import { useAnchoredPopover } from '../use-anchored-popover.js';
-/** The dialog's tab stops: enabled buttons and the grid's roving day. */
-function isTabStop(node) {
-    if (node instanceof HTMLButtonElement)
-        return !node.disabled;
-    return node.getAttribute('tabindex') === '0';
-}
-/** Keeps Tab and Shift+Tab inside the dialog, as a modal dialog does. */
-function wrapTab(event) {
-    // One universal selector keeps document order in every DOM implementation.
-    const items = [
-        ...event.currentTarget.querySelectorAll('*'),
-    ].filter(isTabStop);
-    const first = items[0];
-    const last = items[items.length - 1];
-    if (!first || !last)
-        return;
-    if (event.shiftKey && document.activeElement === first) {
-        event.preventDefault();
-        last.focus();
-    }
-    else if (!event.shiftKey && document.activeElement === last) {
-        event.preventDefault();
-        first.focus();
-    }
-}
-function sameDayIn(month, focused) {
-    const day = parseDateOnly(focused)?.day ?? 1;
-    return formatDateOnly({
-        ...month,
-        day: Math.min(day, daysInMonth(month.year, month.month)),
-    });
-}
+import { CalendarPopover } from '../calendar/CalendarPopover.js';
+import { useGridFocus } from '../calendar/use-grid-focus.js';
 /**
  * The calendar popover: a labelled modal dialog anchored under the field,
  * following the WAI-ARIA date picker dialog pattern. It opens on the
@@ -57,37 +26,10 @@ export function CalendarDialog({ anchorRef, buttonRef, id, labelId, labels, loca
     // Clamped on every render, so new bounds while open move it inside.
     const focusDate = clampDateOnly(rawFocusDate, min, max);
     const month = monthOf(focusDate);
-    // Opening and grid keys move DOM focus to the focus date; header controls
-    // and presses change the date without taking focus from where it is.
-    const focusGrid = useRef(true);
-    useAnchoredPopover(dialogRef, anchorRef, buttonRef, () => onClose(false));
-    // Whether a day holds DOM focus. Removing that day fires no blur, so this
-    // stays true when a new value or bounds move the grid out from under it.
-    const gridFocused = useRef(false);
-    useLayoutEffect(() => {
-        if (!focusGrid.current && !gridFocused.current)
-            return;
-        focusGrid.current = false;
-        dialogRef.current
-            ?.querySelector(`[role="grid"] [data-date="${focusDate}"]`)
-            ?.focus({ preventScroll: true });
-    }, [focusDate]);
-    function onKeyDown(event) {
-        if (event.key === 'Escape') {
-            event.preventDefault();
-            event.stopPropagation();
-            onClose(true);
-        }
-        else if (event.key === 'Tab')
-            wrapTab(event);
-    }
+    const { requestFocus, focusHandlers } = useGridFocus(dialogRef, focusDate, true);
     const todayUnavailable = isOutsideDateRange(today, min, max);
-    return (_jsxs("div", { "aria-labelledby": labelId, "aria-modal": "true", className: "sw-date-field-calendar", id: id, onBlur: () => {
-            gridFocused.current = false;
-        }, onFocus: (event) => {
-            gridFocused.current = event.target.closest('[role="grid"]') !== null;
-        }, onKeyDown: onKeyDown, ref: dialogRef, role: "dialog", children: [_jsx(CalendarHeader, { labels: labels, locale: locale, max: max, min: min, month: month, onMonthChange: (next) => setFocusDate(sameDayIn(next, focusDate)), titleId: titleId, todayYear: monthOf(today).year }), _jsx(CalendarGrid, { focusDate: focusDate, locale: locale, max: max, min: min, month: month, onFocusDate: setFocusDate, onMoveFocus: (next) => {
-                    focusGrid.current = true;
+    return (_jsxs(CalendarPopover, { anchorRef: anchorRef, "aria-labelledby": labelId, buttonRef: buttonRef, focusHandlers: focusHandlers, id: id, onClose: onClose, popoverRef: dialogRef, children: [_jsx(CalendarHeader, { labels: labels, locale: locale, max: max, min: min, month: month, onMonthChange: (next) => setFocusDate(sameDayIn(next, focusDate)), titleId: titleId, todayYear: monthOf(today).year }), _jsx(CalendarGrid, { focusDate: focusDate, locale: locale, max: max, min: min, month: month, onFocusDate: setFocusDate, onMoveFocus: (next) => {
+                    requestFocus();
                     setFocusDate(next);
                 }, onSelect: onSelect, range: range, selected: value, titleId: titleId, today: today, weekStartsOn: weekStartsOn }), _jsxs("div", { className: "sw-date-field-footer", children: [required ? null : (_jsx(Button, { disabled: value === '', onPress: () => onSelect(''), size: "sm", variant: "ghost", children: labels.clear })), _jsx(Button, { disabled: todayUnavailable, onPress: () => onSelect(today), size: "sm", variant: "ghost", children: labels.today })] })] }));
 }

package/dist/components/date-field/CalendarHeader.js

@@ -1,18 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { monthNames, monthTitle } from '../../calendar-labels.js';
-import { monthInRange, monthsInRange, shiftMonth, } from '../../calendar-month.js';
+import { monthsInRange } from '../../calendar-month.js';
 import { calendarYearRange, yearsIn } from '../../calendar-years.js';
 import { Select } from '../Select.js';
-import { DateFieldGlyph } from './DateFieldGlyph.js';
-import { tabStop } from '../../tab-stop.js';
-function MonthStep({ delta, label, max, min, month, onMonthChange, }) {
-    const target = shiftMonth(month, delta);
-    const unavailable = target.year < 1 || target.year > 9999 || !monthInRange(target, min, max);
-    return (_jsx("button", { "aria-disabled": unavailable || undefined, "aria-label": label, className: "sw-date-field-step", onClick: () => {
-            if (!unavailable)
-                onMonthChange(target);
-        }, tabIndex: tabStop, type: "button", children: _jsx(DateFieldGlyph, { name: delta < 0 ? 'previous' : 'next' }) }));
-}
+import { MonthStep } from '../calendar/MonthStep.js';
 /**
  * Month stepping plus month and year selectors for jumping far, both cut to
  * `min` and `max`, over a visually hidden title that announces the shown

package/dist/components/date-range/DateRangePopover.d.ts

@@ -0,0 +1,7 @@
+import { type RangePanelProps } from './range-panel-props.js';
+/**
+ * DateRangeButton from `md` up: a popover beside the button with the
+ * presets, two months, the range being picked, Cancel and Apply. Escape
+ * and a press outside cancel.
+ */
+export declare function DateRangePopover(props: RangePanelProps): import("react").JSX.Element;

package/dist/components/date-range/DateRangePopover.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { Button } from '../Button.js';
+import { CalendarPopover } from '../calendar/CalendarPopover.js';
+import { RangeMonths } from './RangeMonths.js';
+import { RangePresets } from './RangePresets.js';
+import { RangeSummary } from './RangeSummary.js';
+/**
+ * DateRangeButton from `md` up: a popover beside the button with the
+ * presets, two months, the range being picked, Cancel and Apply. Escape
+ * and a press outside cancel.
+ */
+export function DateRangePopover(props) {
+    const popoverRef = useRef(null);
+    const { labels, presets } = props;
+    return (_jsxs(CalendarPopover, { anchorRef: props.buttonRef, "aria-label": props.label, buttonRef: props.buttonRef, className: "sw-date-range-popover", id: props.id, onClose: props.onCancel, popoverRef: popoverRef, children: [_jsxs("div", { className: "sw-date-range-body", children: [presets.length > 0 ? (_jsx(RangePresets, { label: labels.presets, layout: "list", onChoose: props.onChoosePreset, presets: presets, pressedId: props.pressedPresetId })) : null, _jsx(RangeMonths, { count: 2, draft: props.draft, focusOnMount: true, labels: labels, latest: props.latest, locale: props.locale, max: props.max, min: props.min, onPress: props.onPress, today: props.today, weekStartsOn: props.weekStartsOn })] }), _jsxs("div", { className: "sw-date-range-footer", children: [_jsx(RangeSummary, { count: props.count, hint: labels.hint, line: props.line }), _jsxs("div", { className: "sw-date-range-actions", children: [_jsx(Button, { onPress: () => props.onCancel(true), size: "sm", variant: "neutral", children: labels.cancel }), _jsx(Button, { onPress: props.onApply, size: "sm", children: labels.apply })] })] })] }));
+}

package/dist/components/date-range/DateRangeSheet.d.ts

@@ -0,0 +1,7 @@
+import { type RangePanelProps } from './range-panel-props.js';
+/**
+ * DateRangeButton below `md`: a bottom sheet titled by its label, the
+ * range being picked under the title, the presets in a row, one month,
+ * and the hint over Cancel and Apply. Closing it any other way cancels.
+ */
+export declare function DateRangeSheet(props: RangePanelProps): import("react").JSX.Element;

package/dist/components/date-range/DateRangeSheet.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../Button.js';
+import { Dialog } from '../Dialog.js';
+import { RangeMonths } from './RangeMonths.js';
+import { RangePresets } from './RangePresets.js';
+import { RangeSummary } from './RangeSummary.js';
+/**
+ * DateRangeButton below `md`: a bottom sheet titled by its label, the
+ * range being picked under the title, the presets in a row, one month,
+ * and the hint over Cancel and Apply. Closing it any other way cancels.
+ */
+export function DateRangeSheet(props) {
+    const { labels, presets } = props;
+    return (_jsxs(Dialog, { className: "sw-date-range-sheet", closeLabel: labels.close, description: `${props.line} · ${props.count}`, footer: _jsxs("div", { className: "sw-date-range-sheet-footer", children: [_jsx("span", { className: "sw-date-range-hint", children: labels.hint }), _jsxs("div", { className: "sw-date-range-actions", children: [_jsx(Button, { onPress: () => props.onCancel(true), variant: "neutral", children: labels.cancel }), _jsx(Button, { onPress: props.onApply, children: labels.apply })] })] }), id: props.id, onClose: () => props.onCancel(true), open: true, sheetBelow: "md", title: props.label, children: [_jsx(RangeSummary, { count: props.count, line: props.line, visuallyHidden: true }), presets.length > 0 ? (_jsx(RangePresets, { label: labels.presets, layout: "row", onChoose: props.onChoosePreset, presets: presets, pressedId: props.pressedPresetId })) : null, _jsx(RangeMonths, { count: 1, draft: props.draft, focusOnMount: false, labels: labels, latest: props.latest, locale: props.locale, max: props.max, min: props.min, onPress: props.onPress, today: props.today, weekStartsOn: props.weekStartsOn })] }));
+}

package/dist/components/date-range/RangeMonths.d.ts

@@ -0,0 +1,28 @@
+import { type WeekStart } from '../../calendar-month.js';
+import { type RangeDraft } from '../../date-range-draft.js';
+import { type RangeMonthCount } from '../../date-range-view.js';
+export type RangeMonthsProps = {
+    count: RangeMonthCount;
+    draft: RangeDraft;
+    onPress: (day: string) => void;
+    /** The last day a press may pick (`max`, or `maxDays` from the start). */
+    latest: string | undefined;
+    min?: string;
+    max?: string;
+    locale: string;
+    today: string;
+    weekStartsOn: WeekStart;
+    labels: {
+        previousMonth: string;
+        nextMonth: string;
+    };
+    /** Take DOM focus on the focus day when shown, as a popover does. */
+    focusOnMount: boolean;
+};
+/**
+ * One month, or two side by side, of the range being picked: each a
+ * labelled grid with one roving day across them, the previous step before
+ * the first month and the next step after the last. It opens on the
+ * range's end, and the months follow the focus day.
+ */
+export declare function RangeMonths({ count, draft, onPress, latest, min, max, locale, today, weekStartsOn, labels, focusOnMount, }: RangeMonthsProps): import("react").JSX.Element;

package/dist/components/date-range/RangeMonths.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from 'react';
+import { monthTitle } from '../../calendar-labels.js';
+import { firstOfMonth, lastOfMonth, monthsBetween, sameDayIn, shiftMonth, } from '../../calendar-month.js';
+import { firstShownMonth, shownMonths, } from '../../date-range-view.js';
+import { clampDateOnly } from '../../date-only.js';
+import { CalendarGrid } from '../calendar/CalendarGrid.js';
+import { MonthStep } from '../calendar/MonthStep.js';
+import { useGridFocus } from '../calendar/use-grid-focus.js';
+/** `focusDate` moved into the shown months, after a month step. */
+function keepInView(focusDate, first, count) {
+    const months = shownMonths(first, count);
+    const last = months[months.length - 1] ?? first;
+    if (focusDate < firstOfMonth(first))
+        return sameDayIn(first, focusDate);
+    if (focusDate > lastOfMonth(last))
+        return sameDayIn(last, focusDate);
+    return focusDate;
+}
+/**
+ * One month, or two side by side, of the range being picked: each a
+ * labelled grid with one roving day across them, the previous step before
+ * the first month and the next step after the last. It opens on the
+ * range's end, and the months follow the focus day.
+ */
+export function RangeMonths({ count, draft, onPress, latest, min, max, locale, today, weekStartsOn, labels, focusOnMount, }) {
+    const id = useId();
+    const containerRef = useRef(null);
+    const [rawFocusDate, setFocusDate] = useState(draft.range.end);
+    // Clamped on every render, so new bounds while open move it inside.
+    const focusDate = clampDateOnly(rawFocusDate, min, max);
+    const [first, setFirst] = useState(() => firstShownMonth(focusDate, count, undefined, min));
+    const shown = firstShownMonth(focusDate, count, first, min);
+    if (monthsBetween(first, shown) !== 0)
+        setFirst(shown);
+    const { requestFocus, focusHandlers } = useGridFocus(containerRef, focusDate, focusOnMount);
+    function stepBy(delta) {
+        const nextFirst = shiftMonth(shown, delta);
+        setFirst(nextFirst);
+        setFocusDate(clampDateOnly(keepInView(focusDate, nextFirst, count), min, max));
+    }
+    const months = shownMonths(shown, count);
+    return (_jsxs("div", { className: "sw-date-range-months", ref: containerRef, ...focusHandlers, children: [_jsx("div", { "aria-live": "polite", className: "sw-sr-only", children: months.map((month) => (_jsx("div", { children: monthTitle(month, locale) }, `${month.year}-${month.month}`))) }), months.map((month, index) => {
+                const titleId = `${id}-${index}`;
+                return (_jsxs("div", { className: "sw-date-range-month", children: [_jsxs("div", { className: "sw-date-range-month-header", children: [index === 0 ? (_jsx(MonthStep, { delta: -1, label: labels.previousMonth, max: max, min: min, month: month, onMonthChange: () => stepBy(-1) })) : null, _jsx("div", { className: "sw-date-range-month-title", id: titleId, children: monthTitle(month, locale) }), index === months.length - 1 ? (_jsx(MonthStep, { delta: 1, label: labels.nextMonth, max: max, min: min, month: month, onMonthChange: () => stepBy(1) })) : null] }), _jsx(CalendarGrid, { blankOutside: true, focusDate: focusDate, latest: latest, locale: locale, max: max, min: min, month: month, onFocusDate: setFocusDate, onMoveFocus: (next) => {
+                                requestFocus();
+                                setFocusDate(next);
+                            }, onSelect: onPress, selected: draft.range, titleId: titleId, today: today, weekStartsOn: weekStartsOn })] }, titleId));
+            })] }));
+}

package/dist/components/date-range/RangePresets.d.ts

@@ -0,0 +1,16 @@
+import { type DateRangePreset } from '../../date-range-input.js';
+export type RangePresetsProps = {
+    presets: readonly DateRangePreset[];
+    /** Names the group, such as "Quick ranges". */
+    label: string;
+    /** The preset whose range is the one shown, if any. */
+    pressedId: string | undefined;
+    onChoose: (preset: DateRangePreset) => void;
+    /** `list` beside the months; `row` above one month, scrolling sideways. */
+    layout: 'list' | 'row';
+};
+/**
+ * DateRangeButton's presets: a named group of buttons, the one matching
+ * the range shown `aria-pressed`. A press applies its range at once.
+ */
+export declare function RangePresets({ presets, label, pressedId, onChoose, layout, }: RangePresetsProps): import("react").JSX.Element;

package/dist/components/date-range/RangePresets.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+import { tabStop } from '../../tab-stop.js';
+/**
+ * DateRangeButton's presets: a named group of buttons, the one matching
+ * the range shown `aria-pressed`. A press applies its range at once.
+ */
+export function RangePresets({ presets, label, pressedId, onChoose, layout, }) {
+    return (_jsx("div", { "aria-label": label, className: cx('sw-date-range-presets', layout === 'row' && 'sw-date-range-presets-row'), role: "group", children: presets.map((preset) => (_jsx("button", { "aria-pressed": preset.id === pressedId, className: "sw-date-range-preset", onClick: () => onChoose(preset), tabIndex: tabStop, type: "button", children: preset.label }, preset.id))) }));
+}

package/dist/components/date-range/RangeSummary.d.ts

@@ -0,0 +1,15 @@
+export type RangeSummaryProps = {
+    /** The range being picked, with its weekdays. */
+    line: string;
+    /** Its length, such as "7 days". */
+    count: string;
+    /** How to pick, after the length; left out where the page shows it elsewhere. */
+    hint?: string;
+    /** Keep the words for assistive technology only, where the page shows them elsewhere. */
+    visuallyHidden?: boolean;
+};
+/**
+ * The range being picked, in a polite live region so each press is heard:
+ * the range on its own line, then its length and the hint.
+ */
+export declare function RangeSummary({ line, count, hint, visuallyHidden, }: RangeSummaryProps): import("react").JSX.Element;

package/dist/components/date-range/RangeSummary.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The range being picked, in a polite live region so each press is heard:
+ * the range on its own line, then its length and the hint.
+ */
+export function RangeSummary({ line, count, hint, visuallyHidden = false, }) {
+    const status = (_jsxs("div", { "aria-atomic": "true", className: "sw-date-range-status", role: "status", children: [_jsx("span", { className: "sw-date-range-line", children: line }), ' ', _jsx("span", { className: "sw-date-range-count", children: count })] }));
+    if (visuallyHidden)
+        return _jsx("div", { className: "sw-sr-only", children: status });
+    return (_jsxs("div", { className: "sw-date-range-summary", children: [status, hint === undefined ? null : (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "sw-date-range-separator", children: ' · ' }), _jsx("span", { className: "sw-date-range-hint", children: hint })] }))] }));
+}

package/dist/components/date-range/range-panel-props.d.ts

@@ -0,0 +1,31 @@
+import { type RefObject } from 'react';
+import { type WeekStart } from '../../calendar-month.js';
+import { type RangeDraft } from '../../date-range-draft.js';
+import { type DateRangePreset } from '../../date-range-input.js';
+import { type DateRangeButtonLabels } from '../../date-range-labels.js';
+/** What both of DateRangeButton's presentations, popover and sheet, draw. */
+export type RangePanelProps = {
+    id: string;
+    /** Names the popover or titles the sheet. */
+    label: string;
+    labels: DateRangeButtonLabels;
+    draft: RangeDraft;
+    onPress: (day: string) => void;
+    presets: readonly DateRangePreset[];
+    pressedPresetId: string | undefined;
+    onChoosePreset: (preset: DateRangePreset) => void;
+    /** Applies the draft. */
+    onApply: () => void;
+    /** Keeps the value; `true` returns focus to the button. */
+    onCancel: (restoreFocus: boolean) => void;
+    latest: string | undefined;
+    min?: string;
+    max?: string;
+    locale: string;
+    today: string;
+    weekStartsOn: WeekStart;
+    buttonRef: RefObject<HTMLButtonElement | null>;
+    /** The draft's words: the range with weekdays, and its length. */
+    line: string;
+    count: string;
+};

package/dist/components/date-range/range-panel-props.js

@@ -0,0 +1 @@
+export {};

package/dist/components/date-range/use-range-popup.d.ts

@@ -0,0 +1,21 @@
+import { type RefObject } from 'react';
+import { type RangeDraft } from '../../date-range-draft.js';
+import { type DateOnlyRange } from '../../date-only.js';
+export type RangePopup = {
+    buttonRef: RefObject<HTMLButtonElement | null>;
+    id: string;
+    shown: boolean;
+    toggle: () => void;
+    draft: RangeDraft;
+    press: (day: string) => void;
+    /** Closes and gives `range` to `onChange` when it is a new range. */
+    apply: (range: DateOnlyRange) => void;
+    /** Closes and keeps the value; `true` returns focus to the button. */
+    cancel: (restoreFocus: boolean) => void;
+};
+/**
+ * DateRangeButton's open state and the range being picked. Opening starts
+ * from the value; a new value while open starts over from it. Disabling
+ * closes it for good.
+ */
+export declare function useRangePopup(value: DateOnlyRange, disabled: boolean, onChange: (value: DateOnlyRange) => void): RangePopup;

package/dist/components/date-range/use-range-popup.js

@@ -0,0 +1,53 @@
+import { useId, useLayoutEffect, useRef, useState, } from 'react';
+import { pressDay, sameRange, settledDraft, } from '../../date-range-draft.js';
+/**
+ * DateRangeButton's open state and the range being picked. Opening starts
+ * from the value; a new value while open starts over from it. Disabling
+ * closes it for good.
+ */
+export function useRangePopup(value, disabled, onChange) {
+    const buttonRef = useRef(null);
+    const id = useId();
+    const [open, setOpen] = useState(false);
+    const [draft, setDraft] = useState(() => settledDraft(value));
+    const [openedWith, setOpenedWith] = useState(value);
+    if (!sameRange(openedWith, value)) {
+        setOpenedWith(value);
+        setDraft(settledDraft(value));
+    }
+    if (disabled && open)
+        setOpen(false);
+    const shown = open && !disabled;
+    // Focus returns once the calendar is gone: while the sheet is still a
+    // modal dialog, the page behind it, the button included, is inert.
+    const restoreFocus = useRef(false);
+    useLayoutEffect(() => {
+        if (shown || !restoreFocus.current)
+            return;
+        restoreFocus.current = false;
+        buttonRef.current?.focus();
+    }, [shown]);
+    function cancel(restore) {
+        restoreFocus.current = restore;
+        setOpen(false);
+    }
+    return {
+        buttonRef,
+        id,
+        shown,
+        toggle: () => {
+            if (shown)
+                return cancel(true);
+            setDraft(settledDraft(value));
+            setOpen(true);
+        },
+        draft,
+        press: (day) => setDraft((current) => pressDay(current, day)),
+        apply: (range) => {
+            cancel(true);
+            if (!sameRange(range, value))
+                onChange(range);
+        },
+        cancel,
+    };
+}

package/dist/components/line-chart/LineChartDrawing.d.ts

@@ -0,0 +1,17 @@
+import { type ChartStrokeTone } from '../../css/chart-tones.js';
+import { type LineChartLayout } from '../../line-chart-layout.js';
+export type LineChartDrawingProps = {
+    layout: LineChartLayout;
+    tone: ChartStrokeTone;
+    /** Each marker's tone, in marker order. */
+    markerTones: readonly ChartStrokeTone[];
+};
+/**
+ * A line chart's picture, hidden from assistive technology (the table
+ * beside it carries every figure): the grid and value axis, the boxed
+ * period, the area and line in the line's tone with a dot and words at its
+ * last value, the date labels, and each marker's triangle and words in its
+ * own tone. It is laid out in its own pixels, left to right whatever the
+ * writing direction, as a time axis reads.
+ */
+export declare function LineChartDrawing({ layout, markerTones, tone, }: LineChartDrawingProps): import("react").JSX.Element;

package/dist/components/line-chart/LineChartDrawing.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { chartBoxRadius, chartDotRadius } from '../../chart-metrics.js';
+import { svgPoints } from '../../line-chart-path.js';
+import { ChartValueAxis } from '../chart/ChartValueAxis.js';
+/**
+ * A line chart's picture, hidden from assistive technology (the table
+ * beside it carries every figure): the grid and value axis, the boxed
+ * period, the area and line in the line's tone with a dot and words at its
+ * last value, the date labels, and each marker's triangle and words in its
+ * own tone. It is laid out in its own pixels, left to right whatever the
+ * writing direction, as a time axis reads.
+ */
+export function LineChartDrawing({ layout, markerTones, tone, }) {
+    const { last, plot } = layout;
+    return (_jsxs("svg", { "aria-hidden": "true", className: "sw-chart-svg", direction: "ltr", focusable: "false", height: layout.height, viewBox: `0 0 ${layout.width} ${layout.height}`, width: layout.width, children: [_jsx(ChartValueAxis, { grid: true, plot: plot, side: "start", ticks: layout.ticks }), layout.highlight ? (_jsx("rect", { className: "sw-chart-highlight sw-chart-tone-accent", height: layout.highlight.height, rx: chartBoxRadius, width: layout.highlight.width, x: layout.highlight.x, y: layout.highlight.y })) : null, _jsxs("g", { className: `sw-chart-tone-${tone}`, children: [layout.area.length > 0 ? (_jsx("polygon", { className: "sw-chart-area", points: svgPoints(layout.area) })) : null, _jsx("polyline", { className: "sw-chart-line", points: svgPoints(layout.path) }), last && (layout.end || layout.path.length === 1) ? (_jsx("circle", { className: "sw-chart-dot", cx: last.x, cy: last.y, r: chartDotRadius })) : null, layout.end ? (_jsx("text", { className: "sw-chart-end-label", dominantBaseline: "central", x: layout.end.x, y: layout.end.y, children: layout.end.text })) : null] }), layout.markers.map((marker) => (_jsxs("g", { className: `sw-chart-tone-${markerTones[marker.order]}`, children: [_jsx("polygon", { className: "sw-chart-marker", points: marker.triangle }), marker.labelShown ? (_jsx("text", { className: "sw-chart-marker-label", textAnchor: "middle", x: marker.labelX, y: marker.labelY, children: marker.label })) : null] }, marker.order))), layout.dateLabels.map((label) => (_jsx("text", { className: "sw-chart-category", textAnchor: "middle", x: label.x, y: label.y, children: label.text }, label.day)))] }));
+}

package/dist/components/link-press.d.ts

@@ -0,0 +1,7 @@
+import { type MouseEvent } from 'react';
+/**
+ * Whether a press on a link is a plain one a client router may take: the
+ * primary button, no modifier key (which opens a tab or a window) and not
+ * already handled. Shared by SectionNav and ListRow.
+ */
+export declare function plainPress(event: MouseEvent<HTMLAnchorElement>): boolean;

package/dist/components/link-press.js

@@ -0,0 +1,13 @@
+/**
+ * Whether a press on a link is a plain one a client router may take: the
+ * primary button, no modifier key (which opens a tab or a window) and not
+ * already handled. Shared by SectionNav and ListRow.
+ */
+export function plainPress(event) {
+    return (event.button === 0 &&
+        !event.defaultPrevented &&
+        !event.metaKey &&
+        !event.ctrlKey &&
+        !event.shiftKey &&
+        !event.altKey);
+}

package/dist/components/list/ListRowAccessoryMark.d.ts

@@ -0,0 +1,5 @@
+import { type ListRowAccessory } from '../../list-options.js';
+/** A row's chevron or check: control chrome drawn by the generated CSS. */
+export declare function ListRowAccessoryMark({ kind }: {
+    kind: ListRowAccessory;
+}): import("react").JSX.Element | null;

package/dist/components/list/ListRowAccessoryMark.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** A row's chevron or check: control chrome drawn by the generated CSS. */
+export function ListRowAccessoryMark({ kind }) {
+    if (kind === 'none')
+        return null;
+    return (_jsx("span", { "aria-hidden": "true", className: kind === 'check' ? 'sw-list-row-check' : 'sw-list-row-chevron' }));
+}

package/dist/components/list/ListRowContent.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+import { type ListRowAccessory, type ListRowTitleAppearance, type ListRowTone, type ListRowValueTone } from '../../list-options.js';
+export type ListRowContentProps = {
+    /** Prefixes the ids that name and describe a pressable row. */
+    id: string;
+    title: string;
+    detail?: string;
+    value?: string;
+    valueDetail?: string;
+    valueTone?: ListRowValueTone;
+    leading?: ReactNode;
+    tone: ListRowTone;
+    titleAppearance: ListRowTitleAppearance;
+    accessory: ListRowAccessory;
+};
+/**
+ * A list row's parts in reading order: the hidden leading mark, the title
+ * over its detail, the value over its detail, then the chevron or check.
+ */
+export declare function ListRowContent({ id, title, detail, value, valueDetail, valueTone, leading, tone, titleAppearance, accessory, }: ListRowContentProps): import("react").JSX.Element;

package/dist/components/list/ListRowContent.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+import { ListRowAccessoryMark } from './ListRowAccessoryMark.js';
+/**
+ * A list row's parts in reading order: the hidden leading mark, the title
+ * over its detail, the value over its detail, then the chevron or check.
+ */
+export function ListRowContent({ id, title, detail, value, valueDetail, valueTone, leading, tone, titleAppearance, accessory, }) {
+    return (_jsxs(_Fragment, { children: [leading === undefined ? null : (_jsx("span", { "aria-hidden": "true", className: "sw-list-row-leading", children: leading })), _jsxs("span", { className: "sw-list-row-label", children: [_jsx("span", { className: cx('sw-list-row-title', titleAppearance === 'plain' && 'sw-list-row-title-plain', tone === 'danger' && 'sw-list-row-title-danger'), id: `${id}-title`, children: title }), detail ? (_jsx("span", { className: "sw-list-row-detail", id: `${id}-detail`, children: detail })) : null] }), value === undefined ? null : (_jsxs("span", { className: "sw-list-row-end", children: [_jsx("span", { className: cx('sw-list-row-value', valueTone && `sw-list-row-value-${valueTone}`), id: `${id}-value`, children: value }), valueDetail ? (_jsx("span", { className: "sw-list-row-value-detail", id: `${id}-value-detail`, children: valueDetail })) : null] })), _jsx(ListRowAccessoryMark, { kind: accessory })] }));
+}

package/dist/components/list/list-row-container.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The element a ListRow renders as: an `li` in a ListGroup's list, a `div`
+ * anywhere else, such as a ListGroup's `footer`.
+ */
+export declare const ListRowContainer: import("react").Context<"div" | "li">;

package/dist/components/list/list-row-container.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+/**
+ * The element a ListRow renders as: an `li` in a ListGroup's list, a `div`
+ * anywhere else, such as a ListGroup's `footer`.
+ */
+export const ListRowContainer = createContext('div');

package/dist/components/use-media-query.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Whether a media query matches now, following its changes. Where there is
+ * no `matchMedia` (a server render, jsdom) it reads as `fallback`.
+ */
+export declare function useMediaQuery(query: string, fallback: boolean): boolean;

package/dist/components/use-media-query.js

@@ -0,0 +1,18 @@
+import { useCallback, useSyncExternalStore } from 'react';
+function canMatch() {
+    return (typeof window !== 'undefined' && typeof window.matchMedia === 'function');
+}
+/**
+ * Whether a media query matches now, following its changes. Where there is
+ * no `matchMedia` (a server render, jsdom) it reads as `fallback`.
+ */
+export function useMediaQuery(query, fallback) {
+    const subscribe = useCallback((onChange) => {
+        if (!canMatch())
+            return () => undefined;
+        const list = window.matchMedia(query);
+        list.addEventListener('change', onChange);
+        return () => list.removeEventListener('change', onChange);
+    }, [query]);
+    return useSyncExternalStore(subscribe, () => (canMatch() ? window.matchMedia(query).matches : fallback), () => fallback);
+}

package/dist/css/chart-marks.d.ts

@@ -0,0 +1,10 @@
+/** A line's thickness (a chart's line and a legend's line swatch), in px. */
+export declare const chartLineWidth = 2;
+/** A hairline: a grid line, a leader, the boxed period's dashed edge. */
+export declare const chartHairline = 1;
+/** The boxed period's dashes: 3 px drawn, 3 px left out. */
+export declare const chartBoxDash = "3 3";
+/** A callout's leader: finer dashes, 2 px drawn, 2 px left out. */
+export declare const chartLeaderDash = "2 2";
+/** The gap between grouped columns side by side, at most. */
+export declare const chartColumnGap = 2;

package/dist/css/chart-marks.js

@@ -0,0 +1,15 @@
+/*
+ * The sizes every chart's marks share, so a legend swatch is drawn at the
+ * size of the mark it names. They are geometry, not theme values: the
+ * colours come from `chart-tones.ts` and the type from the caption variant.
+ */
+/** A line's thickness (a chart's line and a legend's line swatch), in px. */
+export const chartLineWidth = 2;
+/** A hairline: a grid line, a leader, the boxed period's dashed edge. */
+export const chartHairline = 1;
+/** The boxed period's dashes: 3 px drawn, 3 px left out. */
+export const chartBoxDash = '3 3';
+/** A callout's leader: finer dashes, 2 px drawn, 2 px left out. */
+export const chartLeaderDash = '2 2';
+/** The gap between grouped columns side by side, at most. */
+export const chartColumnGap = chartLineWidth;