@scalewing/react 1.39.0 → 1.41.0

package/dist/components/action-bar/ActionBarSummary.d.ts

@@ -5,18 +5,26 @@ export type ActionBarSummaryTone = (typeof actionBarSummaryTones)[number];
 export type ActionBarSummary = {
     /** What the figure is, such as "Counted". */
     label: string;
-    /** The figure, formatted by the consumer, such as "$33,790.00". */
+    /**
+     * The figure, formatted by the consumer, such as "$33,790.00". An empty
+     * string (or only spaces) means there is no figure yet, such as before
+     * anything is counted: the summary line is left out and the live region
+     * stays, so the first figure is announced when it arrives.
+     */
     value: string;
     /** A short line after the figure, such as "short $4,000.00". */
     detail?: string;
     /** Colors the value only; the words say why. Defaults to `default`. */
     tone?: ActionBarSummaryTone;
 };
+/** Whether the summary has a figure to show; an empty value has none yet. */
+export declare function hasActionBarSummaryFigure(summary: ActionBarSummary): boolean;
 export declare function assertActionBarSummary(summary: ActionBarSummary): void;
 /**
  * The bar's figure: its label, the value in the heading variant at tabular
  * figures, and its detail, on one baseline, wrapping as one phrase.
+ * Nothing while the value is empty.
  */
 export declare function ActionBarSummaryLine({ summary, }: {
     summary: ActionBarSummary;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;

package/dist/components/action-bar/ActionBarSummary.js

@@ -4,9 +4,15 @@ export const actionBarSummaryTones = ['default', 'danger', 'success'];
 function isBlank(text) {
     return typeof text !== 'string' || !text.trim();
 }
+/** Whether the summary has a figure to show; an empty value has none yet. */
+export function hasActionBarSummaryFigure(summary) {
+    return !isBlank(summary.value);
+}
 export function assertActionBarSummary(summary) {
-    if (isBlank(summary.label) || isBlank(summary.value))
-        throw new RangeError('ActionBar summary needs a label and a value');
+    if (isBlank(summary.label))
+        throw new RangeError('ActionBar summary needs a label');
+    if (typeof summary.value !== 'string')
+        throw new RangeError('ActionBar summary value must be a string');
     if (summary.detail !== undefined && isBlank(summary.detail))
         throw new RangeError('ActionBar summary detail must not be empty');
     if (summary.tone !== undefined &&
@@ -16,8 +22,11 @@ export function assertActionBarSummary(summary) {
 /**
  * The bar's figure: its label, the value in the heading variant at tabular
  * figures, and its detail, on one baseline, wrapping as one phrase.
+ * Nothing while the value is empty.
  */
 export function ActionBarSummaryLine({ summary, }) {
+    if (!hasActionBarSummaryFigure(summary))
+        return null;
     const tone = summary.tone ?? 'default';
     return (_jsxs("span", { className: cx('sw-action-bar-summary', tone !== 'default' && `sw-action-bar-summary-${tone}`), children: [_jsx("span", { className: "sw-action-bar-summary-label", children: summary.label }), ' ', _jsx("span", { className: "sw-action-bar-summary-value sw-text-heading sw-tabular", children: summary.value }), summary.detail ? (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "sw-action-bar-summary-detail", children: summary.detail })] })) : 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/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/CalendarEntryButton.d.ts

@@ -0,0 +1,24 @@
+import { type Ref } from 'react';
+import { type CalendarPopup } from './use-calendar-popup.js';
+export type CalendarEntryButtonProps = {
+    id: string;
+    /** The field's label element, which names the button with its words. */
+    labelId: string;
+    describedBy: string | undefined;
+    value: string;
+    locale: string;
+    /** What an empty field shows, such as "Choose a day". */
+    emptyText: string;
+    disabled: boolean;
+    invalid: boolean;
+    buttonRef: Ref<HTMLButtonElement>;
+    trigger: CalendarPopup['trigger'];
+    onPress: () => void;
+};
+/**
+ * DateField's calendar entry: a neutral Button showing the calendar glyph
+ * and the chosen day, or the words that ask for one, that opens the
+ * calendar. It is named by the field's label and its own words ("Hire date
+ * Choose a day", "Hire date Oct 6, 2026") and described as the field is.
+ */
+export declare function CalendarEntryButton({ id, labelId, describedBy, value, locale, emptyText, disabled, invalid, buttonRef, trigger, onPress, }: CalendarEntryButtonProps): import("react").JSX.Element;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { formatDateMedium } from '../../calendar-labels.js';
+import { cx } from '../../class-names.js';
+import { Button } from '../Button.js';
+import { DateFieldGlyph } from './DateFieldGlyph.js';
+/**
+ * DateField's calendar entry: a neutral Button showing the calendar glyph
+ * and the chosen day, or the words that ask for one, that opens the
+ * calendar. It is named by the field's label and its own words ("Hire date
+ * Choose a day", "Hire date Oct 6, 2026") and described as the field is.
+ */
+export function CalendarEntryButton({ id, labelId, describedBy, value, locale, emptyText, disabled, invalid, buttonRef, trigger, onPress, }) {
+    const textId = useId();
+    return (_jsxs(Button, { ...trigger, "aria-describedby": describedBy, "aria-labelledby": `${labelId} ${textId}`, className: cx('sw-date-field-calendar-entry', invalid && 'sw-date-field-calendar-entry-invalid'), disabled: disabled, id: id, onPress: onPress, ref: buttonRef, variant: "neutral", children: [_jsx(DateFieldGlyph, { name: "calendar" }), _jsx("span", { className: "sw-date-field-calendar-entry-text", id: textId, children: value ? formatDateMedium(value, locale) : emptyText })] }));
+}

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-field/TypedEntry.d.ts

@@ -0,0 +1,26 @@
+import { type Ref } from 'react';
+import { type CalendarPopup } from './use-calendar-popup.js';
+import { type DateEntry } from './use-date-entry.js';
+export type TypedEntryProps = {
+    id: string;
+    /** The field's label element, which describes the calendar button. */
+    labelId: string;
+    describedBy: string | undefined;
+    entry: DateEntry;
+    placeholder: string;
+    /** The calendar button's name, `labels.chooseDate`. */
+    toggleName: string;
+    disabled: boolean;
+    required: boolean;
+    invalid: boolean;
+    controlRef: Ref<HTMLDivElement>;
+    inputRef: Ref<HTMLInputElement>;
+    buttonRef: Ref<HTMLButtonElement>;
+    trigger: CalendarPopup['trigger'];
+    onToggle: () => void;
+};
+/**
+ * DateField's typed entry: the text input in the locale's order, checked
+ * on blur and Enter, and the calendar button inside its end.
+ */
+export declare function TypedEntry({ id, labelId, describedBy, entry, placeholder, toggleName, disabled, required, invalid, controlRef, inputRef, buttonRef, trigger, onToggle, }: TypedEntryProps): import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tabStop } from '../../tab-stop.js';
+import { DateFieldGlyph } from './DateFieldGlyph.js';
+/**
+ * DateField's typed entry: the text input in the locale's order, checked
+ * on blur and Enter, and the calendar button inside its end.
+ */
+export function TypedEntry({ id, labelId, describedBy, entry, placeholder, toggleName, disabled, required, invalid, controlRef, inputRef, buttonRef, trigger, onToggle, }) {
+    return (_jsxs("div", { className: "sw-date-field-control", ref: controlRef, children: [_jsx("input", { "aria-describedby": describedBy, "aria-invalid": invalid, autoComplete: "off", className: "sw-date-field-input", disabled: disabled, id: id, onBlur: entry.check, onChange: (event) => entry.change(event.currentTarget.value), onKeyDown: (event) => {
+                    if (event.key === 'Enter')
+                        entry.check();
+                }, placeholder: placeholder, ref: inputRef, required: required, spellCheck: false, type: "text", value: entry.text }), _jsxs("button", { ...trigger, "aria-describedby": labelId, className: "sw-date-field-button", disabled: disabled, onClick: onToggle, ref: buttonRef, tabIndex: tabStop, type: "button", children: [_jsx("span", { className: "sw-sr-only", children: toggleName }), _jsx(DateFieldGlyph, { name: "calendar" })] })] }));
+}

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;