@scalewing/react 1.38.0 → 1.40.0

package/dist/components/NavCount.d.ts

@@ -0,0 +1,21 @@
+export type NavCountProps = {
+    /**
+     * How many things wait behind the destination, such as tasks to do: a
+     * filled pill after its words, read in the link's name ("Tasks 8"). A
+     * whole number; 0 shows nothing.
+     */
+    count: number;
+    /**
+     * What the count means, in the consumer's words ("8 tasks to do"): read
+     * in the name in place of the bare number ("Tasks 8 tasks to do"), the
+     * pill then hidden from assistive technology.
+     */
+    countLabel?: string;
+};
+/**
+ * A count after a Nav destination's words, placed inside its link or
+ * Button: `<a href="/tasks">Tasks<NavCount count={8} /></a>`. It is the
+ * pill SectionNav's item count draws, and it is part of the destination's
+ * accessible name, as there.
+ */
+export declare function NavCount({ count, countLabel }: NavCountProps): import("react").JSX.Element | null;

package/dist/components/NavCount.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/** Fails closed on a count that is not a whole number or an empty label. */
+function assertNavCount({ count, countLabel }) {
+    if (!Number.isInteger(count) || count < 0)
+        throw new RangeError(`NavCount count must be a whole number from 0: ${String(count)}`);
+    if (countLabel !== undefined &&
+        (typeof countLabel !== 'string' || !countLabel.trim()))
+        throw new RangeError('NavCount countLabel must be non-empty text');
+}
+/**
+ * A count after a Nav destination's words, placed inside its link or
+ * Button: `<a href="/tasks">Tasks<NavCount count={8} /></a>`. It is the
+ * pill SectionNav's item count draws, and it is part of the destination's
+ * accessible name, as there.
+ */
+export function NavCount({ count, countLabel }) {
+    assertNavCount({ count, countLabel });
+    if (count === 0)
+        return null;
+    // The space is its own text node, so every browser and the name's
+    // computation keep it between the words and the count.
+    return (_jsxs(_Fragment, { children: [' ', countLabel ? _jsx("span", { className: "sw-sr-only", children: countLabel }) : null, _jsx("span", { "aria-hidden": countLabel ? true : undefined, className: "sw-nav-count", children: count })] }));
+}

package/dist/components/SectionNav.js

@@ -4,15 +4,8 @@ import { breakpoints } from '../css/breakpoints.js';
 import { sectionNavVerticalClass } from '../css/css-section-nav.js';
 import { assertSectionNavAppearance, } from '../css/css-section-nav-filled.js';
 import { tabStop } from '../tab-stop.js';
+import { plainPress } from './link-press.js';
 export { sectionNavAppearances } from '../css/css-section-nav-filled.js';
-function plainPress(event) {
-    return (event.button === 0 &&
-        !event.defaultPrevented &&
-        !event.metaKey &&
-        !event.ctrlKey &&
-        !event.shiftKey &&
-        !event.altKey);
-}
 function ariaCurrent(current) {
     if (current === true)
         return 'true';

package/dist/components/StatTile.d.ts

@@ -1,7 +1,7 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
-import { type StatTileTone, statTileTones } from '../css/css-stat-tile.js';
-export type { StatTileTone };
-export { statTileTones };
+import { type StatTileAppearance, statTileAppearances, type StatTileTone, statTileTones } from '../css/css-stat-tile.js';
+export type { StatTileAppearance, StatTileTone };
+export { statTileAppearances, statTileTones };
 export type StatTileEmphasis = 'default' | 'primary';
 export type StatTileProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
     /** A short name for the figure, set in the label variant. */
@@ -16,10 +16,17 @@ export type StatTileProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
     caption?: ReactNode;
     /** `primary` fills the tile in the accent for the one figure a page leads with. */
     emphasis?: StatTileEmphasis;
+    /**
+     * `plain` drops the tile's surface, edge and padding, so the figure sits
+     * inside a card that already has them, such as four answers in a row
+     * with hairlines between them. A plain tile cannot be `primary`, which
+     * is a fill. Default `card`.
+     */
+    appearance?: StatTileAppearance;
 };
 /**
  * One prominent figure with its label: the tiles a report or a list opens
  * with. Presentation only; the consumer formats the number and picks the
  * glyph.
  */
-export declare function StatTile({ caption, className, emphasis, glyph, label, tone, value, ...rest }: StatTileProps): import("react").JSX.Element;
+export declare function StatTile({ appearance, caption, className, emphasis, glyph, label, tone, value, ...rest }: StatTileProps): import("react").JSX.Element;

package/dist/components/StatTile.js

@@ -1,14 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../class-names.js';
-import { statTileTones } from '../css/css-stat-tile.js';
+import { statTileAppearances, statTileTones, } from '../css/css-stat-tile.js';
 import { Text } from './Text.js';
-export { statTileTones };
+export { statTileAppearances, statTileTones };
+function assertStatTile(appearance, emphasis) {
+    if (!statTileAppearances.includes(appearance))
+        throw new RangeError(`Unknown StatTile appearance: ${String(appearance)}`);
+    if (appearance === 'plain' && emphasis === 'primary')
+        throw new RangeError('A plain StatTile has no surface to fill; emphasis primary needs appearance card');
+}
 /**
  * One prominent figure with its label: the tiles a report or a list opens
  * with. Presentation only; the consumer formats the number and picks the
  * glyph.
  */
-export function StatTile({ caption, className, emphasis = 'default', glyph, label, tone = 'default', value, ...rest }) {
+export function StatTile({ appearance = 'card', caption, className, emphasis = 'default', glyph, label, tone = 'default', value, ...rest }) {
+    assertStatTile(appearance, emphasis);
     const primary = emphasis === 'primary';
-    return (_jsxs("section", { className: cx('sw-stat-tile', primary && 'sw-stat-tile-primary', className), ...rest, children: [glyph ? (_jsx("span", { "aria-hidden": "true", className: "sw-stat-tile-glyph", children: glyph })) : null, _jsxs("span", { className: "sw-stat-tile-body", children: [_jsx(Text, { as: "span", className: "sw-stat-tile-label", color: primary ? 'onAccent' : 'muted', variant: "label", children: label }), _jsx(Text, { as: "strong", className: "sw-stat-tile-value", color: primary ? 'onAccent' : tone === 'default' ? 'text' : tone, variant: "heading", children: value }), caption ? (_jsx(Text, { as: "span", className: "sw-stat-tile-caption", color: primary ? 'onAccent' : 'muted', variant: "caption", children: caption })) : null] })] }));
+    return (_jsxs("section", { className: cx('sw-stat-tile', appearance === 'plain' && 'sw-stat-tile-plain', primary && 'sw-stat-tile-primary', className), ...rest, children: [glyph ? (_jsx("span", { "aria-hidden": "true", className: "sw-stat-tile-glyph", children: glyph })) : null, _jsxs("span", { className: "sw-stat-tile-body", children: [_jsx(Text, { as: "span", className: "sw-stat-tile-label", color: primary ? 'onAccent' : 'muted', variant: "label", children: label }), _jsx(Text, { as: "strong", className: "sw-stat-tile-value", color: primary ? 'onAccent' : tone === 'default' ? 'text' : tone, variant: "heading", children: value }), caption ? (_jsx(Text, { as: "span", className: "sw-stat-tile-caption", color: primary ? 'onAccent' : 'muted', variant: "caption", children: caption })) : null] })] }));
 }

package/dist/components/{date-field → calendar}/CalendarGrid.d.ts

@@ -13,7 +13,22 @@ export type CalendarGridProps = {
     onSelect: (value: string) => void;
     /** Days to tint as a span, such as the period a page shows. */
     range?: DateOnlyRange;
-    selected: string;
+    /**
+     * The selected day; `''` for none. A range instead selects every day in
+     * it (the grid is then multiselectable) and tints it as `range` does.
+     */
+    selected: string | DateOnlyRange;
+    /**
+     * The last day a press may pick when it is earlier than `max`, such as a
+     * range's longest end. Later days are `aria-disabled`; keys still reach
+     * them up to `max`, for orientation.
+     */
+    latest?: string;
+    /**
+     * Leave the neighbouring months' days blank, so months shown side by
+     * side hold each day once. By default they are shown, muted.
+     */
+    blankOutside?: boolean;
     titleId: string;
     today: string;
     weekStartsOn: WeekStart;
@@ -23,4 +38,4 @@ export type CalendarGridProps = {
  * `[min, max]` stay focusable for orientation but are `aria-disabled`;
  * padding past the four-digit years is blank and inert.
  */
-export declare function CalendarGrid({ focusDate, locale, max, min, month, onFocusDate, onMoveFocus, onSelect, range, selected, titleId, today, weekStartsOn, }: CalendarGridProps): import("react").JSX.Element;
+export declare function CalendarGrid({ focusDate, locale, max, min, month, onFocusDate, onMoveFocus, onSelect, range, selected, latest, blankOutside, titleId, today, weekStartsOn, }: CalendarGridProps): import("react").JSX.Element;

package/dist/components/{date-field → calendar}/CalendarGrid.js

@@ -12,14 +12,22 @@ function rangeClassNames(place) {
         (place === 'end' || place === 'only') && 'sw-date-field-day-range-end',
     ];
 }
+function isSelectedDay(value, selected) {
+    return typeof selected === 'string'
+        ? value === selected
+        : dayInRange(value, selected) !== null;
+}
 /**
  * The month as a WAI-ARIA grid with one roving tab stop. Days outside
  * `[min, max]` stay focusable for orientation but are `aria-disabled`;
  * padding past the four-digit years is blank and inert.
  */
-export function CalendarGrid({ focusDate, locale, max, min, month, onFocusDate, onMoveFocus, onSelect, range, selected, titleId, today, weekStartsOn, }) {
+export function CalendarGrid({ focusDate, locale, max, min, month, onFocusDate, onMoveFocus, onSelect, range, selected, latest, blankOutside = false, titleId, today, weekStartsOn, }) {
+    const pickMax = latest !== undefined && (max === undefined || latest < max) ? latest : max;
+    const tint = typeof selected === 'string' ? range : selected;
+    const unavailable = (value) => isOutsideDateRange(value, min, pickMax);
     function choose(value) {
-        if (!isOutsideDateRange(value, min, max))
+        if (!unavailable(value))
             onSelect(value);
     }
     function onKeyDown(event) {
@@ -35,7 +43,7 @@ export function CalendarGrid({ focusDate, locale, max, min, month, onFocusDate,
         event.preventDefault();
         onMoveFocus(target);
     }
-    return (_jsxs("table", { "aria-labelledby": titleId, className: "sw-date-field-grid", onKeyDown: onKeyDown, role: "grid", children: [_jsx("thead", { children: _jsx("tr", { children: weekdayLabels(locale, weekStartsOn).map((weekday) => (_jsx("th", { abbr: weekday.long, scope: "col", children: weekday.short }, weekday.long))) }) }), _jsx("tbody", { children: monthGrid(month, weekStartsOn).map((row, rowIndex) => (_jsx("tr", { children: row.map((cell, column) => cell === null ? (_jsx("td", { "aria-disabled": "true", className: "sw-date-field-day sw-date-field-day-outside", role: "gridcell" }, `blank-${column}`)) : (_jsx("td", { "aria-current": cell.value === today ? 'date' : undefined, "aria-disabled": isOutsideDateRange(cell.value, min, max) || undefined, "aria-label": formatDateLabel(cell.value, locale), "aria-selected": cell.value === selected, className: cx('sw-date-field-day', !cell.inMonth && 'sw-date-field-day-outside', ...rangeClassNames(dayInRange(cell.value, range))), "data-date": cell.value, onClick: () => choose(cell.value), onFocus: () => {
+    return (_jsxs("table", { "aria-labelledby": titleId, "aria-multiselectable": typeof selected === 'string' ? undefined : true, className: "sw-date-field-grid", onKeyDown: onKeyDown, role: "grid", children: [_jsx("thead", { children: _jsx("tr", { children: weekdayLabels(locale, weekStartsOn).map((weekday) => (_jsx("th", { abbr: weekday.long, scope: "col", children: weekday.short }, weekday.long))) }) }), _jsx("tbody", { children: monthGrid(month, weekStartsOn).map((row, rowIndex) => (_jsx("tr", { children: row.map((cell, column) => cell === null || (blankOutside && !cell.inMonth) ? (_jsx("td", { "aria-disabled": "true", className: "sw-date-field-day sw-date-field-day-outside", role: "gridcell" }, `blank-${column}`)) : (_jsx("td", { "aria-current": cell.value === today ? 'date' : undefined, "aria-disabled": unavailable(cell.value) || undefined, "aria-label": formatDateLabel(cell.value, locale), "aria-selected": isSelectedDay(cell.value, selected), className: cx('sw-date-field-day', !cell.inMonth && 'sw-date-field-day-outside', ...rangeClassNames(dayInRange(cell.value, tint))), "data-date": cell.value, onClick: () => choose(cell.value), onFocus: () => {
                             // A press on a neighboring month's day selects it; moving
                             // the grid first would pull the day out from under it.
                             if (cell.inMonth && cell.value !== focusDate)

package/dist/components/calendar/CalendarPopover.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode, type RefObject } from 'react';
+import { type GridFocus } from './use-grid-focus.js';
+export type CalendarPopoverProps = {
+    /** The element the popover sits beside, such as the field or button. */
+    anchorRef: RefObject<HTMLElement | null>;
+    /** The button that toggles it; a press there is not a press outside. */
+    buttonRef: RefObject<HTMLElement | null>;
+    popoverRef: RefObject<HTMLDivElement | null>;
+    id: string;
+    /** Names the dialog by an element, or by `aria-label`. */
+    'aria-labelledby'?: string;
+    'aria-label'?: string;
+    /** `true` returns focus to the button: Escape does, a press outside does not. */
+    onClose: (restoreFocus: boolean) => void;
+    /** Follows focus in the grid when the popover itself holds it. */
+    focusHandlers?: GridFocus['focusHandlers'];
+    className?: string;
+    children: ReactNode;
+};
+/**
+ * A calendar's popover: a modal dialog on the top layer beside its anchor,
+ * as the WAI-ARIA date picker dialog pattern asks. Escape closes it and
+ * returns focus; Tab stays inside; a press outside closes it.
+ */
+export declare function CalendarPopover({ anchorRef, buttonRef, popoverRef, id, 'aria-labelledby': labelledBy, 'aria-label': label, onClose, focusHandlers, className, children, }: CalendarPopoverProps): import("react").JSX.Element;

package/dist/components/calendar/CalendarPopover.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+import { useAnchoredPopover } from '../use-anchored-popover.js';
+import { wrapTab } from './wrap-tab.js';
+/**
+ * A calendar's popover: a modal dialog on the top layer beside its anchor,
+ * as the WAI-ARIA date picker dialog pattern asks. Escape closes it and
+ * returns focus; Tab stays inside; a press outside closes it.
+ */
+export function CalendarPopover({ anchorRef, buttonRef, popoverRef, id, 'aria-labelledby': labelledBy, 'aria-label': label, onClose, focusHandlers, className, children, }) {
+    useAnchoredPopover(popoverRef, anchorRef, buttonRef, () => onClose(false));
+    function onKeyDown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            onClose(true);
+        }
+        else if (event.key === 'Tab')
+            wrapTab(event);
+    }
+    return (_jsx("div", { ...focusHandlers, "aria-label": label, "aria-labelledby": labelledBy, "aria-modal": "true", className: cx('sw-date-field-calendar', className), id: id, onKeyDown: onKeyDown, ref: popoverRef, role: "dialog", children: children }));
+}

package/dist/components/calendar/MonthStep.d.ts

@@ -0,0 +1,16 @@
+import { type CalendarMonth } from '../../calendar-month.js';
+export type MonthStepProps = {
+    /** The month the step leaves from: the first or the last month shown. */
+    month: CalendarMonth;
+    delta: 1 | -1;
+    label: string;
+    min?: string;
+    max?: string;
+    onMonthChange: (month: CalendarMonth) => void;
+};
+/**
+ * A calendar's previous or next month step. Past the four-digit years or
+ * outside `[min, max]` it is `aria-disabled`, so it keeps focus and its
+ * press does nothing.
+ */
+export declare function MonthStep({ delta, label, max, min, month, onMonthChange, }: MonthStepProps): import("react").JSX.Element;

package/dist/components/calendar/MonthStep.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { monthInRange, shiftMonth, } from '../../calendar-month.js';
+import { tabStop } from '../../tab-stop.js';
+import { DateFieldGlyph } from '../date-field/DateFieldGlyph.js';
+/**
+ * A calendar's previous or next month step. Past the four-digit years or
+ * outside `[min, max]` it is `aria-disabled`, so it keeps focus and its
+ * press does nothing.
+ */
+export 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' }) }));
+}

package/dist/components/calendar/use-grid-focus.d.ts

@@ -0,0 +1,18 @@
+import { type FocusEvent, type RefObject } from 'react';
+export type GridFocus = {
+    /** The next focus date takes DOM focus, as after a grid key. */
+    requestFocus: () => void;
+    /** Spread on the element holding the grids, to follow where focus is. */
+    focusHandlers: {
+        onBlur: () => void;
+        onFocus: (event: FocusEvent<HTMLElement>) => void;
+    };
+};
+/**
+ * Moves DOM focus to a calendar's focus date when asked (on mount when
+ * `focusOnMount`, and after a grid key) and while a day already holds
+ * focus, so a new value or new bounds never strand focus on a removed day.
+ * Header controls and presses change the date without taking focus from
+ * where it is. Shared by DateField's calendar and DateRangeButton.
+ */
+export declare function useGridFocus(containerRef: RefObject<HTMLElement | null>, focusDate: string, focusOnMount: boolean): GridFocus;

package/dist/components/calendar/use-grid-focus.js

@@ -0,0 +1,35 @@
+import { useLayoutEffect, useRef, } from 'react';
+/**
+ * Moves DOM focus to a calendar's focus date when asked (on mount when
+ * `focusOnMount`, and after a grid key) and while a day already holds
+ * focus, so a new value or new bounds never strand focus on a removed day.
+ * Header controls and presses change the date without taking focus from
+ * where it is. Shared by DateField's calendar and DateRangeButton.
+ */
+export function useGridFocus(containerRef, focusDate, focusOnMount) {
+    const focusGrid = useRef(focusOnMount);
+    // 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;
+        containerRef.current
+            ?.querySelector(`[role="grid"] [data-date="${focusDate}"]`)
+            ?.focus({ preventScroll: true });
+    }, [containerRef, focusDate]);
+    return {
+        requestFocus: () => {
+            focusGrid.current = true;
+        },
+        focusHandlers: {
+            onBlur: () => {
+                gridFocused.current = false;
+            },
+            onFocus: (event) => {
+                gridFocused.current = event.target.closest('[role="grid"]') !== null;
+            },
+        },
+    };
+}

package/dist/components/calendar/wrap-tab.d.ts

@@ -0,0 +1,7 @@
+import { type KeyboardEvent } from 'react';
+/**
+ * Keeps Tab and Shift+Tab inside a calendar popover, as a modal dialog
+ * does: from the last stop to the first, and back. Shared by DateField's
+ * calendar and DateRangeButton's popover.
+ */
+export declare function wrapTab(event: KeyboardEvent<HTMLElement>): void;

package/dist/components/calendar/wrap-tab.js

@@ -0,0 +1,29 @@
+/** A calendar popover's tab stops: enabled buttons and a 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 a calendar popover, as a modal dialog
+ * does: from the last stop to the first, and back. Shared by DateField's
+ * calendar and DateRangeButton's popover.
+ */
+export 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();
+    }
+}

package/dist/components/chart/ChartTable.d.ts

@@ -0,0 +1,16 @@
+import { type ChartTableRow } from '../../chart-table-rows.js';
+export type ChartTableProps = {
+    caption: string;
+    /** The columns' headers, after the rows' own header column. */
+    columns: readonly string[];
+    rows: readonly ChartTableRow[];
+};
+/**
+ * Every figure a chart draws, as a table kept for assistive technology and
+ * not drawn: it sits in a `sw-sr-only` box, because a table is never
+ * narrower than its contents and would widen the page. Its caption is the
+ * chart's name, with a header per column and per row, and the boxed
+ * period's row marked current. The drawing itself is hidden, so this is
+ * what a screen reader reads.
+ */
+export declare function ChartTable({ caption, columns, rows }: ChartTableProps): import("react").JSX.Element;

package/dist/components/chart/ChartTable.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Every figure a chart draws, as a table kept for assistive technology and
+ * not drawn: it sits in a `sw-sr-only` box, because a table is never
+ * narrower than its contents and would widen the page. Its caption is the
+ * chart's name, with a header per column and per row, and the boxed
+ * period's row marked current. The drawing itself is hidden, so this is
+ * what a screen reader reads.
+ */
+export function ChartTable({ caption, columns, rows }) {
+    return (_jsx("div", { className: "sw-sr-only", children: _jsxs("table", { children: [_jsx("caption", { children: caption }), columns.length > 0 ? (_jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", {}), columns.map((column, index) => (_jsx("th", { scope: "col", children: column }, `${column}-${index}`)))] }) })) : null, _jsx("tbody", { children: rows.map((row) => (_jsxs("tr", { "aria-current": row.current ? 'true' : undefined, children: [_jsx("th", { scope: "row", children: row.header }), row.cells.map((cell, index) => (_jsx("td", { children: cell }, index)))] }, row.key))) })] }) }));
+}

package/dist/components/chart/ChartValueAxis.d.ts

@@ -0,0 +1,14 @@
+import { type ChartPlot, type ChartTick } from '../../chart-axis.js';
+export type ChartValueAxisProps = {
+    plot: ChartPlot;
+    ticks: readonly ChartTick[];
+    /** The side its words sit on: the plot's start, or its end for a line's own scale. */
+    side: 'start' | 'end';
+    /** Draws the grid lines across the plot (the start axis does). */
+    grid?: boolean;
+};
+/**
+ * A value axis inside a chart's SVG: a grid line at each tick across the
+ * plot, the zero line set apart, and each tick's words beside the plot.
+ */
+export declare function ChartValueAxis({ grid, plot, side, ticks, }: ChartValueAxisProps): import("react").JSX.Element;

package/dist/components/chart/ChartValueAxis.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { chartGap } from '../../chart-metrics.js';
+import { cx } from '../../class-names.js';
+/**
+ * A value axis inside a chart's SVG: a grid line at each tick across the
+ * plot, the zero line set apart, and each tick's words beside the plot.
+ */
+export function ChartValueAxis({ grid = false, plot, side, ticks, }) {
+    const x = side === 'start' ? plot.left - chartGap : plot.right + chartGap;
+    return (_jsx("g", { children: ticks.map((tick) => (_jsxs("g", { children: [grid ? (_jsx("line", { className: tick.value === 0 ? 'sw-chart-zero' : 'sw-chart-grid', x1: plot.left, x2: plot.right, y1: tick.y, y2: tick.y })) : null, _jsx("text", { className: cx('sw-chart-tick', side === 'end' && 'sw-chart-tick-line'), dominantBaseline: "central", textAnchor: side === 'start' ? 'end' : 'start', x: x, y: tick.y, children: tick.label })] }, tick.value))) }));
+}

package/dist/components/chart/use-chart-width.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from 'react';
+/**
+ * Follows the width a chart is given, so its drawing is laid out in its
+ * own pixels: on mount, before the first paint, and whenever its box
+ * changes size. On the server it reports `chartFallbackWidth`, and a browser with
+ * no ResizeObserver measures on window resizes instead.
+ */
+export declare function useChartWidth(ref: RefObject<HTMLElement | null>): number;

package/dist/components/chart/use-chart-width.js

@@ -0,0 +1,34 @@
+'use client';
+import { useLayoutEffect, useState } from 'react';
+import { chartFallbackWidth } from '../../chart-metrics.js';
+/**
+ * Follows the width a chart is given, so its drawing is laid out in its
+ * own pixels: on mount, before the first paint, and whenever its box
+ * changes size. On the server it reports `chartFallbackWidth`, and a browser with
+ * no ResizeObserver measures on window resizes instead.
+ */
+export function useChartWidth(ref) {
+    const [width, setWidth] = useState(chartFallbackWidth);
+    // Before paint, so a phone never shows the wide layout first.
+    useLayoutEffect(() => {
+        const box = ref.current;
+        if (!box)
+            return;
+        function measure() {
+            if (!box)
+                return;
+            const next = Math.round(box.getBoundingClientRect().width);
+            if (next > 0)
+                setWidth(next);
+        }
+        measure();
+        if (typeof ResizeObserver === 'undefined') {
+            window.addEventListener('resize', measure);
+            return () => window.removeEventListener('resize', measure);
+        }
+        const observer = new ResizeObserver(measure);
+        observer.observe(box);
+        return () => observer.disconnect();
+    }, [ref]);
+    return width;
+}

package/dist/components/column-chart/ChartCalloutList.d.ts

@@ -0,0 +1,16 @@
+import { type CategoricalColor } from '@scalewing/tokens';
+export type ChartCalloutListProps = {
+    callouts: readonly {
+        text: string;
+        tone?: CategoricalColor;
+    }[];
+    /** Shows the list under the plot; otherwise it is kept for assistive technology only. */
+    visible: boolean;
+};
+/**
+ * A chart's callouts as a list of their words, each after a dot in its
+ * hue: shown under the plot on a compact chart, where they no longer fit
+ * above it, and otherwise kept for assistive technology (`sw-sr-only`)
+ * while the drawing pins them above their columns.
+ */
+export declare function ChartCalloutList({ callouts, visible }: ChartCalloutListProps): import("react").JSX.Element | null;

package/dist/components/column-chart/ChartCalloutList.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+/**
+ * A chart's callouts as a list of their words, each after a dot in its
+ * hue: shown under the plot on a compact chart, where they no longer fit
+ * above it, and otherwise kept for assistive technology (`sw-sr-only`)
+ * while the drawing pins them above their columns.
+ */
+export function ChartCalloutList({ callouts, visible }) {
+    if (callouts.length === 0)
+        return null;
+    return (_jsx("ul", { className: cx('sw-chart-callouts', !visible && 'sw-sr-only'), role: "list", children: callouts.map((callout, index) => (_jsxs("li", { className: cx('sw-chart-callout', callout.tone && `sw-chart-tone-${callout.tone}`), children: [_jsx("span", { "aria-hidden": "true", className: "sw-chart-callout-dot" }), callout.text] }, `${callout.text}-${index}`))) }));
+}

package/dist/components/column-chart/ColumnChartDrawing.d.ts

@@ -0,0 +1,17 @@
+import { type CategoricalColor } from '@scalewing/tokens';
+import { type ColumnChartLayout } from '../../column-chart-layout.js';
+export type ColumnChartDrawingProps = {
+    layout: ColumnChartLayout;
+    /** Each series' hue, in series order. */
+    tones: readonly CategoricalColor[];
+    /** Each callout's hue, in callout order. */
+    calloutTones: readonly (CategoricalColor | undefined)[];
+};
+/**
+ * A column chart's picture, hidden from assistive technology (the table
+ * beside it carries every figure): the grid and value axes, the boxed
+ * period, the columns, the line and its last value, the category labels
+ * and the callouts with their leaders. It is laid out in its own pixels,
+ * left to right whatever the writing direction, as a time axis reads.
+ */
+export declare function ColumnChartDrawing({ calloutTones, layout, tones, }: ColumnChartDrawingProps): import("react").JSX.Element;

package/dist/components/column-chart/ColumnChartDrawing.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { chartBoxRadius, chartColumnRadius, chartDotRadius, } from '../../chart-metrics.js';
+import { cx } from '../../class-names.js';
+import { ChartValueAxis } from '../chart/ChartValueAxis.js';
+function toneClass(tone) {
+    return tone ? `sw-chart-tone-${tone}` : undefined;
+}
+/**
+ * A column chart's picture, hidden from assistive technology (the table
+ * beside it carries every figure): the grid and value axes, the boxed
+ * period, the columns, the line and its last value, the category labels
+ * and the callouts with their leaders. It is laid out in its own pixels,
+ * left to right whatever the writing direction, as a time axis reads.
+ */
+export function ColumnChartDrawing({ calloutTones, layout, tones, }) {
+    const { 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, layout.columns.map((column) => (_jsx("rect", { className: cx('sw-chart-column', toneClass(tones[column.series])), height: column.height, rx: Math.min(chartColumnRadius, column.width / 2, column.height / 2), width: column.width, x: column.x, y: column.y }, `${column.series}-${column.category}`))), layout.line ? (_jsxs("g", { className: "sw-chart-tone-accent", children: [_jsx("polyline", { className: "sw-chart-line", points: layout.line.points.map((p) => `${p.x},${p.y}`).join(' ') }), _jsx(ChartValueAxis, { plot: plot, side: "end", ticks: layout.lineTicks }), layout.line.end || layout.line.points.length === 1 ? (_jsx("circle", { className: "sw-chart-dot", cx: layout.line.points.at(-1).x, cy: layout.line.points.at(-1).y, r: chartDotRadius })) : null, layout.line.end ? (_jsx("text", { className: "sw-chart-end-label", dominantBaseline: "central", x: layout.line.end.x, y: layout.line.end.y, children: layout.line.end.text })) : null] })) : null, layout.categoryLabels.map((label) => (_jsx("text", { className: "sw-chart-category", textAnchor: "middle", x: label.x, y: label.y, children: label.text }, label.index))), layout.callouts.map((callout) => (_jsxs("g", { className: toneClass(calloutTones[callout.order]), children: [_jsx("line", { className: "sw-chart-leader", x1: callout.x, x2: callout.x, y1: callout.leaderStart, y2: callout.leaderEnd }), _jsx("text", { className: "sw-chart-callout-text", textAnchor: callout.anchor, x: callout.textX, y: callout.textY, children: callout.text })] }, callout.order)))] }));
+}