@scalewing/react 1.47.0 → 1.49.0

package/dist/components/context-switcher/use-switcher-list.js

@@ -0,0 +1,93 @@
+'use client';
+import { useMemo, useRef, useState } from 'react';
+import { filterSections, flatEntries, switcherSections, typeaheadIndex, } from './options.js';
+/* How long typed letters build one typeahead word. */
+const typeaheadPause = 500;
+/** A key that types a letter, not a shortcut or a control key. */
+function isPrintable(event) {
+    return (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey);
+}
+/**
+ * The open popup's list model: the filter's words, the sections left by
+ * them, the active row (by its option id, so it stays put while the list
+ * changes), and the keys. Arrows move the active row (stopping at the
+ * ends), Enter chooses it; in the listbox Home and End go to the ends,
+ * Space chooses and letters jump by typeahead; in the filter field those
+ * keys edit the words, which make the first match active.
+ */
+export function useSwitcherList({ currentId, filtering, groups, listId, onChoose, }) {
+    const [query, setQuery] = useState('');
+    const [activeId, setActiveId] = useState(currentId);
+    const typed = useRef({ words: '', at: 0 });
+    const all = useMemo(() => switcherSections(listId, groups), [listId, groups]);
+    const sections = useMemo(() => filterSections(all, query), [all, query]);
+    const entries = useMemo(() => flatEntries(sections), [sections]);
+    const activeIndex = Math.max(entries.findIndex((entry) => entry.option.id === activeId), entries.length > 0 ? 0 : -1);
+    const active = entries[activeIndex];
+    function changeQuery(next) {
+        setQuery(next);
+        setActiveId(flatEntries(filterSections(all, next))[0]?.option.id);
+    }
+    function moveTo(index) {
+        const entry = entries[Math.min(Math.max(index, 0), entries.length - 1)];
+        if (entry)
+            setActiveId(entry.option.id);
+    }
+    function typeahead(letter) {
+        const now = Date.now();
+        const words = now - typed.current.at > typeaheadPause
+            ? letter
+            : typed.current.words + letter;
+        typed.current = { words, at: now };
+        const index = typeaheadIndex(entries, words, activeIndex);
+        if (index >= 0)
+            moveTo(index);
+    }
+    /** Handles a key in the listbox or the filter field; true when it was used. */
+    function onListKey(event) {
+        // Keys that build a word in an input method are the method's.
+        if (event.nativeEvent.isComposing || event.keyCode === 229)
+            return false;
+        const typing = Date.now() - typed.current.at <= typeaheadPause;
+        switch (event.key) {
+            case 'ArrowDown':
+                moveTo(activeIndex + 1);
+                return true;
+            case 'ArrowUp':
+                moveTo(activeIndex - 1);
+                return true;
+            case 'Enter':
+                if (active)
+                    onChoose(active);
+                return true;
+            case 'Home':
+            case 'End':
+                if (filtering)
+                    return false;
+                moveTo(event.key === 'Home' ? 0 : entries.length - 1);
+                return true;
+            case ' ':
+                if (filtering)
+                    return false;
+                if (typing)
+                    typeahead(' ');
+                else if (active)
+                    onChoose(active);
+                return true;
+            default:
+                if (filtering || !isPrintable(event))
+                    return false;
+                typeahead(event.key);
+                return true;
+        }
+    }
+    return {
+        active,
+        changeQuery,
+        entries,
+        onListKey,
+        query,
+        sections,
+        setActiveId,
+    };
+}

package/dist/components/context-switcher/validate.d.ts

@@ -0,0 +1,8 @@
+import { type ContextSwitcherProps } from './types.js';
+/**
+ * Fails closed on a switcher it cannot draw or name: blank words, empty or
+ * duplicate groups, options (ids unique across groups) or actions, a bad
+ * count, badge or tone, a `currentId` that names no option, a trigger that
+ * draws nothing, or an unknown appearance, width or alignment.
+ */
+export declare function assertContextSwitcher({ actions, align, currentId, filter, groups, label, trigger, triggerAppearance, width, }: ContextSwitcherProps): void;

package/dist/components/context-switcher/validate.js

@@ -0,0 +1,94 @@
+import { contextSwitcherTriggerAppearances, contextSwitcherWidths, } from '../../css/css-context-switcher-trigger.js';
+import { badgeTones } from '../../css/css-data.js';
+import { isOneOf } from '../../is-one-of.js';
+import { navCountTones } from '../NavCount.js';
+import { hasSlot } from '../slot.js';
+const name = 'ContextSwitcher';
+/** The trigger edges the popup can line up with. */
+const inlineAligns = ['start', 'end'];
+function isBlank(words) {
+    return typeof words !== 'string' || !words.trim();
+}
+function isWholeFromZero(value) {
+    return typeof value === 'number' && Number.isInteger(value) && value >= 0;
+}
+function hasDuplicates(ids) {
+    return new Set(ids).size !== ids.length;
+}
+function assertGroups(groups) {
+    if (groups.length === 0)
+        throw new RangeError(`${name} needs at least one group`);
+    if (groups.some((group) => isBlank(group.id)))
+        throw new RangeError(`${name} groups need nonempty ids`);
+    if (hasDuplicates(groups.map((group) => group.id)))
+        throw new RangeError(`${name} groups need unique ids`);
+    if (groups.some((group) => group.label !== undefined && isBlank(group.label)))
+        throw new RangeError(`${name} group labels are nonempty when given`);
+    if (groups.some((group) => group.options.length === 0))
+        throw new RangeError(`${name} groups need at least one option`);
+}
+function assertOption(option) {
+    if (isBlank(option.id) || isBlank(option.label))
+        throw new RangeError(`${name} options need nonempty ids and labels`);
+    if (option.detail !== undefined && isBlank(option.detail))
+        throw new RangeError(`${name} option details are nonempty when given`);
+    if (option.badge !== undefined &&
+        (isBlank(option.badge.label) || !isOneOf(badgeTones, option.badge.tone)))
+        throw new RangeError(`${name} option badges need a label and one of ${badgeTones.join(', ')}`);
+    if (option.count !== undefined && !isWholeFromZero(option.count))
+        throw new RangeError(`${name} option counts are whole numbers from 0`);
+    if (option.countLabel !== undefined &&
+        (isBlank(option.countLabel) || option.count === undefined))
+        throw new RangeError(`${name} option countLabel is nonempty and comes with a count`);
+    if (option.countTone !== undefined &&
+        (!isOneOf(navCountTones, option.countTone) || option.count === undefined))
+        throw new RangeError(`${name} option countTone is one of ${navCountTones.join(', ')} and comes with a count`);
+}
+function assertFilter(filter) {
+    if (filter === undefined)
+        return;
+    if (isBlank(filter.label) || isBlank(filter.emptyText))
+        throw new RangeError(`${name} filter needs a label and an emptyText`);
+    if (filter.placeholder !== undefined && isBlank(filter.placeholder))
+        throw new RangeError(`${name} filter placeholder is nonempty when given`);
+    if (filter.minOptions !== undefined && !isWholeFromZero(filter.minOptions))
+        throw new RangeError(`${name} filter minOptions is a whole number from 0`);
+}
+function assertActions(actions) {
+    if (actions === undefined)
+        return;
+    if (actions.some((action) => isBlank(action.id) || isBlank(action.label)))
+        throw new RangeError(`${name} actions need nonempty ids and labels`);
+    if (hasDuplicates(actions.map((action) => action.id)))
+        throw new RangeError(`${name} actions need unique ids`);
+}
+/**
+ * Fails closed on a switcher it cannot draw or name: blank words, empty or
+ * duplicate groups, options (ids unique across groups) or actions, a bad
+ * count, badge or tone, a `currentId` that names no option, a trigger that
+ * draws nothing, or an unknown appearance, width or alignment.
+ */
+export function assertContextSwitcher({ actions, align, currentId, filter, groups, label, trigger, triggerAppearance, width, }) {
+    if (isBlank(label))
+        throw new RangeError(`${name} label must be nonempty`);
+    if (!hasSlot(trigger) ||
+        (typeof trigger === 'string' && trigger.trim() === ''))
+        throw new RangeError(`${name} needs a trigger to draw`);
+    if (triggerAppearance !== undefined &&
+        !isOneOf(contextSwitcherTriggerAppearances, triggerAppearance))
+        throw new RangeError(`${name} triggerAppearance must be one of ${contextSwitcherTriggerAppearances.join(', ')}`);
+    if (width !== undefined && !isOneOf(contextSwitcherWidths, width))
+        throw new RangeError(`${name} width must be one of ${contextSwitcherWidths.join(', ')}`);
+    if (align !== undefined && !isOneOf(inlineAligns, align))
+        throw new RangeError(`${name} align must be one of ${inlineAligns.join(', ')}`);
+    assertGroups(groups);
+    const options = groups.flatMap((group) => group.options);
+    options.forEach(assertOption);
+    if (hasDuplicates(options.map((option) => option.id)))
+        throw new RangeError(`${name} options need unique ids`);
+    if (currentId !== undefined &&
+        !options.some((option) => option.id === currentId))
+        throw new RangeError(`${name} currentId must name one of its options`);
+    assertFilter(filter);
+    assertActions(actions);
+}

package/dist/components/fixture/fixture-list-context.d.ts

@@ -0,0 +1,4 @@
+/** Set by FixtureGroup around its list, so a FixtureRow knows it is in one. */
+export declare const FixtureListContext: import("react").Context<boolean>;
+/** Fails closed on a FixtureRow outside a FixtureGroup (its `li` needs the list). */
+export declare function useFixtureList(): void;

package/dist/components/fixture/fixture-list-context.js

@@ -0,0 +1,9 @@
+'use client';
+import { createContext, useContext } from 'react';
+/** Set by FixtureGroup around its list, so a FixtureRow knows it is in one. */
+export const FixtureListContext = createContext(false);
+/** Fails closed on a FixtureRow outside a FixtureGroup (its `li` needs the list). */
+export function useFixtureList() {
+    if (!useContext(FixtureListContext))
+        throw new RangeError('A FixtureRow lives in a FixtureGroup');
+}

package/dist/components/fixture/types.d.ts

@@ -0,0 +1,50 @@
+import { type MouseEvent, type ReactNode } from 'react';
+import { type VisibilityBreakpoint } from '../../css/breakpoints.js';
+import { type BadgeTone } from '../../css/css-data.js';
+import { type FixtureCenterKind } from '../../css/css-fixture.js';
+/** One side of a fixture: its name and an optional decorative mark (a crest). */
+export type FixtureSide = {
+    name: string;
+    /** A mark beside the name, on the centre's side; hidden from assistive technology. */
+    mark?: ReactNode;
+};
+/** A status after the row's details, such as "Final" or "To confirm". */
+export type FixtureStatus = {
+    label: string;
+    tone: BadgeTone;
+};
+export type FixtureRowProps = {
+    home: FixtureSide;
+    away: FixtureSide;
+    /** What sits between the sides: a kickoff time ("8:00") or a score ("2–1"). */
+    center: string;
+    /**
+     * `time` (default) draws the centre as a small grey chip; `score` as
+     * bold figures. Both are tabular, so the rows' centres line up.
+     */
+    centerKind?: FixtureCenterKind;
+    /** Details at the row's end, such as the field; under the sides below `md`. */
+    meta?: ReactNode;
+    /** Hides `meta` below this breakpoint (`md` or `lg`), such as a field a phone leaves out. */
+    metaHideBelow?: VisibilityBreakpoint;
+    status?: FixtureStatus;
+    /** Makes the whole row a link to this address. */
+    href?: string;
+    /**
+     * Makes the whole row a button; with `href`, a plain press on the link
+     * (main button, no modifier) is handed here for a client router.
+     */
+    onPress?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * The row's name when it is a link or a button, in the consumer's words
+     * ("Heron Marsh with Otter Pool, 8:00"); without it the
+     * name is what the row shows, in order.
+     */
+    'aria-label'?: string;
+};
+export type FixtureGroupProps = {
+    /** The run's caption, such as a date and a venue; it names the list. */
+    title: string;
+    /** The run's FixtureRows. */
+    children: ReactNode;
+};

package/dist/components/fixture/types.js

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

package/dist/components/fixture/validate.d.ts

@@ -0,0 +1,8 @@
+import { type FixtureRowProps } from './types.js';
+/**
+ * Fails closed on a row it cannot name or draw: a side without a name, a
+ * blank centre, an unknown centre kind or breakpoint, a status with blank
+ * words or an unknown tone, a blank address or `aria-label`, or an
+ * `aria-label` on a row that is neither a link nor a button.
+ */
+export declare function assertFixtureRow({ away, center, centerKind, home, href, metaHideBelow, onPress, status, 'aria-label': ariaLabel, }: FixtureRowProps): void;

package/dist/components/fixture/validate.js

@@ -0,0 +1,36 @@
+import { visibilityBreakpoints } from '../../css/breakpoints.js';
+import { badgeTones } from '../../css/css-data.js';
+import { fixtureCenterKinds } from '../../css/css-fixture.js';
+import { isOneOf } from '../../is-one-of.js';
+function isBlank(words) {
+    return typeof words !== 'string' || !words.trim();
+}
+/**
+ * Fails closed on a row it cannot name or draw: a side without a name, a
+ * blank centre, an unknown centre kind or breakpoint, a status with blank
+ * words or an unknown tone, a blank address or `aria-label`, or an
+ * `aria-label` on a row that is neither a link nor a button.
+ */
+export function assertFixtureRow({ away, center, centerKind, home, href, metaHideBelow, onPress, status, 'aria-label': ariaLabel, }) {
+    const name = 'FixtureRow';
+    if (isBlank(home?.name) || isBlank(away?.name))
+        throw new RangeError(`${name} home and away need nonempty names`);
+    if (isBlank(center))
+        throw new RangeError(`${name} center must be nonempty`);
+    if (centerKind !== undefined && !isOneOf(fixtureCenterKinds, centerKind))
+        throw new RangeError(`${name} centerKind must be one of ${fixtureCenterKinds.join(', ')}`);
+    if (metaHideBelow !== undefined &&
+        !isOneOf(visibilityBreakpoints, metaHideBelow))
+        throw new RangeError(`${name} metaHideBelow must be one of ${visibilityBreakpoints.join(', ')}`);
+    if (status !== undefined &&
+        (isBlank(status.label) || !isOneOf(badgeTones, status.tone)))
+        throw new RangeError(`${name} status needs a label and one of ${badgeTones.join(', ')}`);
+    if (href !== undefined && isBlank(href))
+        throw new RangeError(`${name} href must be nonempty when given`);
+    if (ariaLabel !== undefined) {
+        if (isBlank(ariaLabel))
+            throw new RangeError(`${name} aria-label must be nonempty when given`);
+        if (href === undefined && onPress === undefined)
+            throw new RangeError(`${name} aria-label names a link or a button: give it href or onPress`);
+    }
+}

package/dist/components/site-footer/types.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+/** One link in a footer group. */
+export type SiteFooterLink = {
+    id: string;
+    label: string;
+    href: string;
+    /** `true` when the link is the page shown: `aria-current="page"`. */
+    current?: boolean;
+    /** The language of the link's words, when they differ from the page's. */
+    lang?: string;
+    /** The language of the page it opens. */
+    hrefLang?: string;
+};
+/** A labelled group of links, drawn as a `nav` named by its label. */
+export type SiteFooterGroup = {
+    id: string;
+    label: string;
+    links: readonly SiteFooterLink[];
+};
+export type SiteFooterProps = {
+    /** The site's mark at the top, such as a logo for a dark background. */
+    brand: ReactNode;
+    /** A line under the brand. */
+    tagline?: ReactNode;
+    /** One or more groups of links, each a `nav` named by its label. */
+    groups: readonly SiteFooterGroup[];
+    /** The bottom row's start, such as the copyright. */
+    legal?: ReactNode;
+    /** The bottom row's end, such as a language switch. */
+    end?: ReactNode;
+};

package/dist/components/site-footer/types.js

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

package/dist/components/site-footer/validate.d.ts

@@ -0,0 +1,7 @@
+import { type SiteFooterGroup } from './types.js';
+/**
+ * Fails closed on the footer's groups: none at all, a group with no links,
+ * blank or repeated ids (groups, and links within a group), blank labels,
+ * and a blank `href`.
+ */
+export declare function assertSiteFooterGroups(groups: readonly SiteFooterGroup[]): void;

package/dist/components/site-footer/validate.js

@@ -0,0 +1,22 @@
+const blank = (value) => !value.trim();
+/**
+ * Fails closed on the footer's groups: none at all, a group with no links,
+ * blank or repeated ids (groups, and links within a group), blank labels,
+ * and a blank `href`.
+ */
+export function assertSiteFooterGroups(groups) {
+    if (groups.length === 0)
+        throw new RangeError('SiteFooter needs at least one group');
+    if (groups.some((group) => blank(group.id) || blank(group.label)))
+        throw new RangeError('SiteFooter groups need nonempty ids and labels');
+    if (new Set(groups.map((group) => group.id)).size !== groups.length)
+        throw new RangeError('SiteFooter groups need unique ids');
+    for (const group of groups) {
+        if (group.links.length === 0)
+            throw new RangeError(`SiteFooter group ${group.id} needs a link`);
+        if (group.links.some((link) => blank(link.id) || blank(link.label) || blank(link.href)))
+            throw new RangeError(`SiteFooter group ${group.id} links need nonempty ids, labels and hrefs`);
+        if (new Set(group.links.map((link) => link.id)).size !== group.links.length)
+            throw new RangeError(`SiteFooter group ${group.id} links need unique ids`);
+    }
+}

package/dist/components/site-header/SiteHeaderLinks.d.ts

@@ -0,0 +1,7 @@
+import { type SiteHeaderItem } from './types.js';
+/** The destinations as a labelled `nav` of links, in the bar or the menu. */
+export declare function SiteHeaderLinks({ className, items, navLabel, }: {
+    className: string;
+    items: readonly SiteHeaderItem[];
+    navLabel: string;
+}): import("react").JSX.Element;

package/dist/components/site-header/SiteHeaderLinks.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tabStop } from '../../tab-stop.js';
+import { navItemAriaCurrent } from '../nav-items.js';
+/** The destinations as a labelled `nav` of links, in the bar or the menu. */
+export function SiteHeaderLinks({ className, items, navLabel, }) {
+    return (_jsx("nav", { "aria-label": navLabel, className: className, children: _jsx("ul", { className: "sw-site-header-list", children: items.map((item) => (_jsx("li", { children: _jsx("a", { "aria-current": navItemAriaCurrent(item.current), className: "sw-site-header-link", href: item.href, tabIndex: tabStop, children: item.label }) }, item.id))) }) }));
+}

package/dist/components/site-header/types.d.ts

@@ -0,0 +1,38 @@
+import { type ReactNode } from 'react';
+import { type NavItemCurrent } from '../nav-items.js';
+/** One destination in the site's main navigation. */
+export type SiteHeaderItem = {
+    id: string;
+    label: string;
+    href: string;
+    /** `page` (or `true`) for the page shown, `location` for a page inside the item's section. */
+    current?: NavItemCurrent;
+};
+/** The menu button's names, in the consumer's words. */
+export type SiteHeaderLabels = {
+    /** The closed menu button's name, such as "Open the menu". */
+    openMenu: string;
+    /** The open menu button's name, such as "Close the menu". */
+    closeMenu: string;
+};
+export type SiteHeaderProps = {
+    /** The site's mark at the start, such as a logo linked to the home page. */
+    brand: ReactNode;
+    /** The main navigation's name, such as "Main". */
+    navLabel: string;
+    /** The main destinations: a row of links from `lg`, the menu's list below it. */
+    items: readonly SiteHeaderItem[];
+    /** The bar's end from `lg`, such as a language switch, Sign in and a ButtonLink. */
+    actions?: ReactNode;
+    /** Beside the menu button below `lg`, such as the language switch. */
+    compactActions?: ReactNode;
+    /** In the open menu under its links, such as full-width ButtonLinks. */
+    menuActions?: ReactNode;
+    labels: SiteHeaderLabels;
+    /** The closed menu button's glyph (☰), decorative. */
+    menuIcon: ReactNode;
+    /** The open menu button's glyph (✕), decorative. */
+    closeIcon: ReactNode;
+    /** Whether the bar sticks to the window's top as the page scrolls (default `true`). */
+    sticky?: boolean;
+};

package/dist/components/site-header/types.js

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

package/dist/components/site-header/use-menu-dismiss.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from 'react';
+/**
+ * What script adds to the menu, a native `details` that opens and closes
+ * without it: Escape closes it and puts focus back on its button; choosing
+ * a link in it, focus leaving it, a press outside it, or the window
+ * widening to the row of destinations closes it. Nothing traps focus.
+ */
+export declare function useMenuDismiss(menuRef: RefObject<HTMLDetailsElement | null>): void;

package/dist/components/site-header/use-menu-dismiss.js

@@ -0,0 +1,62 @@
+import { useEffect } from 'react';
+import { breakpointQuery } from '../../css/breakpoints.js';
+/** From here the bar shows its row of destinations and hides the menu. */
+const wideQuery = breakpointQuery('from', 'lg');
+/**
+ * What script adds to the menu, a native `details` that opens and closes
+ * without it: Escape closes it and puts focus back on its button; choosing
+ * a link in it, focus leaving it, a press outside it, or the window
+ * widening to the row of destinations closes it. Nothing traps focus.
+ */
+export function useMenuDismiss(menuRef) {
+    useEffect(() => {
+        const menu = menuRef.current;
+        if (!menu)
+            return;
+        const close = () => {
+            menu.open = false;
+        };
+        const onKeyDown = (event) => {
+            if (event.key !== 'Escape' || !menu.open)
+                return;
+            event.preventDefault();
+            close();
+            menu.querySelector('summary')?.focus();
+        };
+        const onClick = (event) => {
+            if (event.target instanceof Element && event.target.closest('a'))
+                close();
+        };
+        const onFocusOut = (event) => {
+            const next = event.relatedTarget;
+            if (next instanceof Node && menu.contains(next))
+                return;
+            if (next !== null)
+                close();
+        };
+        const onPointerDown = (event) => {
+            if (event.target instanceof Node && menu.contains(event.target))
+                return;
+            close();
+        };
+        const wide = typeof window.matchMedia === 'function'
+            ? window.matchMedia(wideQuery)
+            : undefined;
+        const onWiden = () => {
+            if (wide?.matches)
+                close();
+        };
+        menu.addEventListener('keydown', onKeyDown);
+        menu.addEventListener('click', onClick);
+        menu.addEventListener('focusout', onFocusOut);
+        document.addEventListener('pointerdown', onPointerDown);
+        wide?.addEventListener('change', onWiden);
+        return () => {
+            menu.removeEventListener('keydown', onKeyDown);
+            menu.removeEventListener('click', onClick);
+            menu.removeEventListener('focusout', onFocusOut);
+            document.removeEventListener('pointerdown', onPointerDown);
+            wide?.removeEventListener('change', onWiden);
+        };
+    }, [menuRef]);
+}

package/dist/components/site-header/validate.d.ts

@@ -0,0 +1,7 @@
+import { type SiteHeaderProps } from './types.js';
+/**
+ * Fails closed on the header's words and destinations: no items, blank or
+ * repeated ids, blank labels or hrefs, and a blank navigation name or menu
+ * button name.
+ */
+export declare function assertSiteHeaderProps({ items, labels, navLabel, }: Pick<SiteHeaderProps, 'items' | 'labels' | 'navLabel'>): void;

package/dist/components/site-header/validate.js

@@ -0,0 +1,17 @@
+import { assertNavItems } from '../nav-items.js';
+/**
+ * Fails closed on the header's words and destinations: no items, blank or
+ * repeated ids, blank labels or hrefs, and a blank navigation name or menu
+ * button name.
+ */
+export function assertSiteHeaderProps({ items, labels, navLabel, }) {
+    if (items.length === 0)
+        throw new RangeError('SiteHeader needs at least one item');
+    assertNavItems('SiteHeader', items);
+    if (items.some((item) => !item.href.trim()))
+        throw new RangeError('SiteHeader items need nonempty hrefs');
+    if (!navLabel.trim())
+        throw new RangeError('SiteHeader needs a nonempty navLabel');
+    if (!labels.openMenu.trim() || !labels.closeMenu.trim())
+        throw new RangeError('SiteHeader labels need nonempty openMenu and closeMenu');
+}

package/dist/components/stepper/StepperCountFrame.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+export type StepperCountFrameProps = {
+    /** The count's input. */
+    children: ReactNode;
+    /** A short word after the count; no frame is drawn without one. */
+    unit?: string;
+};
+/**
+ * The count with its unit inside one control frame ("90 min"), as Field's
+ * suffix: the frame draws the control surface and focus ring, and the input
+ * inside it drops its own. The unit is hidden from assistive technology,
+ * which hears it in the count's `aria-valuetext` instead. Without a unit the
+ * input is the frame, unchanged.
+ */
+export declare function StepperCountFrame({ children, unit }: StepperCountFrameProps): import("react").JSX.Element;

package/dist/components/stepper/StepperCountFrame.js

@@ -0,0 +1,25 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * A press on the frame's own chrome (the unit or the padding) focuses the
+ * count, as the text cursor over it promises. A press on the input itself
+ * keeps the browser's own caret placement and selection.
+ */
+function focusCount(event) {
+    const input = event.currentTarget.querySelector('input');
+    if (!input || input.disabled || event.target === input)
+        return;
+    event.preventDefault();
+    input.focus();
+}
+/**
+ * The count with its unit inside one control frame ("90 min"), as Field's
+ * suffix: the frame draws the control surface and focus ring, and the input
+ * inside it drops its own. The unit is hidden from assistive technology,
+ * which hears it in the count's `aria-valuetext` instead. Without a unit the
+ * input is the frame, unchanged.
+ */
+export function StepperCountFrame({ children, unit }) {
+    if (unit === undefined)
+        return _jsx(_Fragment, { children: children });
+    return (_jsxs("span", { className: "sw-stepper-count", onMouseDown: focusCount, children: [children, _jsx("span", { "aria-hidden": "true", className: "sw-stepper-unit", children: unit.trim() })] }));
+}

package/dist/components/use-element-height.d.ts

@@ -0,0 +1,10 @@
+import { type RefObject } from 'react';
+/**
+ * Follows the height of an element's border box, in CSS pixels: on
+ * mount, before the first paint, and whenever its box changes size. It is
+ * `null` before that, on the server, while `enabled` is false and while the
+ * element draws no box (`display: none`), so a caller can fall back to a
+ * value of its own. A browser with no ResizeObserver measures on window
+ * resizes instead.
+ */
+export declare function useElementHeight(ref: RefObject<HTMLElement | null>, enabled?: boolean): number | null;

package/dist/components/use-element-height.js

@@ -0,0 +1,35 @@
+'use client';
+import { useLayoutEffect, useState } from 'react';
+/**
+ * Follows the height of an element's border box, in CSS pixels: on
+ * mount, before the first paint, and whenever its box changes size. It is
+ * `null` before that, on the server, while `enabled` is false and while the
+ * element draws no box (`display: none`), so a caller can fall back to a
+ * value of its own. A browser with no ResizeObserver measures on window
+ * resizes instead.
+ */
+export function useElementHeight(ref, enabled = true) {
+    const [height, setHeight] = useState(null);
+    useLayoutEffect(() => {
+        const box = ref.current;
+        if (!box || !enabled) {
+            setHeight(null);
+            return;
+        }
+        function measure() {
+            if (!box)
+                return;
+            const next = box.getBoundingClientRect().height;
+            setHeight(next > 0 ? next : null);
+        }
+        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, enabled]);
+    return height;
+}

package/dist/context-switcher.test-support.d.ts

@@ -0,0 +1,9 @@
+import { type RenderResult } from '@testing-library/react';
+import { type Mock } from 'vitest';
+import { type ContextSwitcherGroup, type ContextSwitcherProps } from './components/ContextSwitcher.js';
+/** Field stations: a bare group, then a labelled one with badges and counts. */
+export declare const stations: ContextSwitcherGroup[];
+/** The switcher with its required props, and any prop overridden. */
+export declare function renderSwitcher(props?: Partial<ContextSwitcherProps>): RenderResult & {
+    onSelect: Mock;
+};