@scalewing/react 1.47.0 → 1.49.0

package/dist/components/AppShell.d.ts

@@ -6,7 +6,8 @@ export type { AppShellLabels, AppShellNavGroup, AppShellNavItem, AppShellProps,
  * From 75rem the sidebar is full (glyphs, labels, counts and group
  * captions); from `lg` to 75rem it is a rail of glyphs with tooltips; below
  * `lg` a sticky top bar's menu button opens the same navigation in a modal
- * drawer from the inline start. Invalid groups, items or words throw a
- * `RangeError`.
+ * drawer from the inline start, its button optionally carrying a count.
+ * `pageBar` is a sticky band at the top of `main` on every layout. Invalid
+ * groups, items, counts or words throw a `RangeError`.
  */
-export declare function AppShell({ barEnd, barTitle, children, footer, groups, header, labels, menuIcon, navLabel, onNavigate, railFooter, railHeader, }: AppShellProps): import("react").JSX.Element;
+export declare function AppShell({ barEnd, barTitle, children, footer, groups, header, labels, menuCount, menuCountLabel, menuCountTone, menuIcon, navLabel, onNavigate, pageBar, railFooter, railHeader, }: AppShellProps): import("react").JSX.Element;

package/dist/components/AppShell.js

@@ -3,11 +3,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { breakpointQuery } from '../css/breakpoints.js';
 import { appShellWideQuery } from '../css/css-app-shell.js';
-import { AppHeader } from './AppHeader.js';
+import { appShellBarHeightVariable } from '../css/css-app-shell-page-bar.js';
+import { AppShellBar } from './app-shell/AppShellBar.js';
 import { AppShellDrawer } from './app-shell/AppShellDrawer.js';
 import { AppShellSidebar } from './app-shell/AppShellSidebar.js';
 import { assertAppShellProps } from './app-shell/validate.js';
-import { Button } from './Button.js';
+import { useElementHeight } from './use-element-height.js';
 import { useMediaQuery } from './use-media-query.js';
 const fromLg = breakpointQuery('from', 'lg');
 /**
@@ -16,18 +17,34 @@ const fromLg = breakpointQuery('from', 'lg');
  * From 75rem the sidebar is full (glyphs, labels, counts and group
  * captions); from `lg` to 75rem it is a rail of glyphs with tooltips; below
  * `lg` a sticky top bar's menu button opens the same navigation in a modal
- * drawer from the inline start. Invalid groups, items or words throw a
- * `RangeError`.
+ * drawer from the inline start, its button optionally carrying a count.
+ * `pageBar` is a sticky band at the top of `main` on every layout. Invalid
+ * groups, items, counts or words throw a `RangeError`.
  */
-export function AppShell({ barEnd, barTitle, children, footer, groups, header, labels, menuIcon, navLabel, onNavigate, railFooter, railHeader, }) {
-    assertAppShellProps({ groups, labels, navLabel });
+export function AppShell({ barEnd, barTitle, children, footer, groups, header, labels, menuCount, menuCountLabel, menuCountTone, menuIcon, navLabel, onNavigate, pageBar, railFooter, railHeader, }) {
+    assertAppShellProps({
+        groups,
+        labels,
+        menuCount,
+        menuCountLabel,
+        menuCountTone,
+        navLabel,
+    });
     const [menuOpen, setMenuOpen] = useState(false);
     const menuRef = useRef(null);
+    const barRef = useRef(null);
     // Set by a dismissal (Escape, a press outside, the close button): only
     // that hands focus back to the menu button.
     const refocusRef = useRef(false);
     const sidebarShown = useMediaQuery(fromLg, false);
     const wide = useMediaQuery(appShellWideQuery, false);
+    // A page bar sticks under the compact bar, however tall its end controls
+    // make it; the generated CSS falls back to the bar's usual height.
+    const hasPageBar = pageBar !== undefined && pageBar !== null && pageBar !== false;
+    const barHeight = useElementHeight(barRef, hasPageBar);
+    const shellStyle = barHeight === null
+        ? undefined
+        : { [appShellBarHeightVariable]: `${barHeight}px` };
     // The drawer belongs to the bar, which is gone from `lg` up: a window
     // widened while it is open closes it.
     if (sidebarShown && menuOpen)
@@ -41,7 +58,7 @@ export function AppShell({ barEnd, barTitle, children, footer, groups, header, l
         refocusRef.current = false;
         menuRef.current?.focus();
     }, [menuOpen]);
-    return (_jsxs("div", { className: "sw-app-shell", children: [_jsxs(AppHeader, { appearance: "bar", className: "sw-app-shell-bar", padding: 2, children: [_jsx(Button, { ref: menuRef, "aria-expanded": menuOpen, "aria-haspopup": "dialog", "aria-label": labels.openMenu, className: "sw-app-shell-menu", onPress: () => setMenuOpen(true), size: "sm", variant: "ghost", children: _jsx("span", { "aria-hidden": "true", className: "sw-app-shell-icon", children: menuIcon }) }), _jsx("div", { className: "sw-app-shell-bar-title", children: barTitle }), barEnd ? _jsx("div", { className: "sw-app-shell-bar-end", children: barEnd }) : null] }), _jsx(AppShellSidebar, { footer: footer, groups: groups, header: header, navLabel: navLabel, onNavigate: onNavigate, rail: sidebarShown && !wide, railFooter: railFooter, railHeader: railHeader }), _jsx("main", { className: "sw-app-shell-main", children: children }), _jsx(AppShellDrawer, { closeLabel: labels.closeMenu, footer: footer, groups: groups, header: header, navLabel: navLabel, onChoose: () => setMenuOpen(false), onClose: () => {
+    return (_jsxs("div", { className: "sw-app-shell", style: shellStyle, children: [_jsx(AppShellBar, { barEnd: barEnd, barRef: barRef, barTitle: barTitle, menuCount: menuCount, menuCountLabel: menuCountLabel, menuCountTone: menuCountTone, menuIcon: menuIcon, menuOpen: menuOpen, menuRef: menuRef, onOpenMenu: () => setMenuOpen(true), openMenuLabel: labels.openMenu }), _jsx(AppShellSidebar, { footer: footer, groups: groups, header: header, navLabel: navLabel, onNavigate: onNavigate, rail: sidebarShown && !wide, railFooter: railFooter, railHeader: railHeader }), _jsxs("main", { className: "sw-app-shell-main", children: [hasPageBar ? (_jsx("div", { className: "sw-app-shell-page-bar", children: pageBar })) : null, children] }), _jsx(AppShellDrawer, { closeLabel: labels.closeMenu, footer: footer, groups: groups, header: header, navLabel: navLabel, onChoose: () => setMenuOpen(false), onClose: () => {
                     refocusRef.current = true;
                     setMenuOpen(false);
                 }, onNavigate: onNavigate, open: menuOpen })] }));

package/dist/components/Band.d.ts

@@ -0,0 +1,30 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type BandTone, bandTones, type BandWidth, bandWidths } from '../css/css-band.js';
+import { type SpacingProps } from '../spacing-classes.js';
+export { bandTones, bandWidths, type BandTone, type BandWidth };
+export declare const bandElements: readonly ["section", "div", "aside", "footer"];
+export type BandElement = (typeof bandElements)[number];
+export type BandProps = Omit<HTMLAttributes<HTMLElement>, 'style'> & Pick<SpacingProps, 'paddingY' | 'paddingTop' | 'paddingBottom'> & {
+    /**
+     * The fill: `surface`, `subtle` (the quiet grey), or `inverse`, the dark
+     * band (`--sw-color-inverse`), inside which words, muted words,
+     * hairlines, links, the accent and a primary button read in
+     * `onInverse`, so its content needs no band-aware variant.
+     */
+    tone: BandTone;
+    /** The element: `section` (default), `div`, `aside` or `footer`. */
+    as?: BandElement;
+    /**
+     * The content column: `container` (default) is the page's width,
+     * `reading` the narrower reading width; either keeps the page gutter.
+     */
+    width?: BandWidth;
+    children: ReactNode;
+};
+/**
+ * A full-width stretch of the page in one fill, its content in a centred
+ * column with the page gutter: a site's footer, one dark closing section,
+ * a grey strip between white ones. Vertical padding is a spacing step
+ * (default 8). An unknown tone, width or element throws a `RangeError`.
+ */
+export declare function Band({ as, children, className, paddingBottom, paddingTop, paddingY, tone, width, ...rest }: BandProps): import("react").JSX.Element;

package/dist/components/Band.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../class-names.js';
+import { bandToneClass, bandTones, bandWidthClass, bandWidths, } from '../css/css-band.js';
+import { isOneOf } from '../is-one-of.js';
+import { spacingClassNames } from '../spacing-classes.js';
+export { bandTones, bandWidths };
+export const bandElements = ['section', 'div', 'aside', 'footer'];
+/**
+ * A full-width stretch of the page in one fill, its content in a centred
+ * column with the page gutter: a site's footer, one dark closing section,
+ * a grey strip between white ones. Vertical padding is a spacing step
+ * (default 8). An unknown tone, width or element throws a `RangeError`.
+ */
+export function Band({ as = 'section', children, className, paddingBottom, paddingTop, paddingY = 8, tone, width = 'container', ...rest }) {
+    if (!isOneOf(bandTones, tone))
+        throw new RangeError(`Unknown Band tone: ${String(tone)}`);
+    if (!isOneOf(bandWidths, width))
+        throw new RangeError(`Unknown Band width: ${String(width)}`);
+    if (!isOneOf(bandElements, as))
+        throw new RangeError(`Unknown Band element: ${String(as)}`);
+    const Element = as;
+    return (_jsx(Element, { className: cx('sw-band', bandToneClass(tone), ...spacingClassNames({ paddingY, paddingTop, paddingBottom }), className), ...rest, children: _jsx("div", { className: cx('sw-band-inner', bandWidthClass(width)), children: children }) }));
+}

package/dist/components/ButtonLink.d.ts

@@ -0,0 +1,33 @@
+import { type ButtonSize } from '@scalewing/tokens';
+import { type AnchorHTMLAttributes, type ReactNode } from 'react';
+import { type WebButtonVariant } from '../css/css-button.js';
+import { type ButtonWidth } from '../css/css-button-width.js';
+export type ButtonLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'style'> & {
+    /** Where the link goes. */
+    href: string;
+    children: ReactNode;
+    size?: ButtonSize;
+    /** The Button's variants: `primary` (default), `secondary`, `tertiary`, `ghost`, `danger`, `neutral`. */
+    variant?: WebButtonVariant;
+    /** `content` (default) is as wide as the words; `full` fills the container. */
+    width?: ButtonWidth;
+};
+/**
+ * A link drawn as a Button, for a destination that reads as an action, such
+ * as a site's "Contact us" or "Sign in": an `<a href>` with the Button's
+ * variants, sizes and width, so it opens like any link (a new tab, a
+ * server-rendered page with no script). `aria-current="page"` marks the
+ * one that is the current page with the pressed ring. A link has no
+ * disabled state; render no link instead. An unknown variant, size or
+ * width throws a `RangeError`.
+ */
+export declare const ButtonLink: import("react").ForwardRefExoticComponent<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "style" | "href"> & {
+    /** Where the link goes. */
+    href: string;
+    children: ReactNode;
+    size?: ButtonSize;
+    /** The Button's variants: `primary` (default), `secondary`, `tertiary`, `ghost`, `danger`, `neutral`. */
+    variant?: WebButtonVariant;
+    /** `content` (default) is as wide as the words; `full` fills the container. */
+    width?: ButtonWidth;
+} & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/components/ButtonLink.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { buttonSizes } from '@scalewing/tokens';
+import { forwardRef } from 'react';
+import { cx } from '../class-names.js';
+import { buttonClassNames, webButtonVariants, } from '../css/css-button.js';
+import { buttonWidthClass, buttonWidths, } from '../css/css-button-width.js';
+import { buttonLinkClass } from '../css/css-button-link.js';
+import { isOneOf } from '../is-one-of.js';
+import { tabStop } from '../tab-stop.js';
+/**
+ * A link drawn as a Button, for a destination that reads as an action, such
+ * as a site's "Contact us" or "Sign in": an `<a href>` with the Button's
+ * variants, sizes and width, so it opens like any link (a new tab, a
+ * server-rendered page with no script). `aria-current="page"` marks the
+ * one that is the current page with the pressed ring. A link has no
+ * disabled state; render no link instead. An unknown variant, size or
+ * width throws a `RangeError`.
+ */
+export const ButtonLink = forwardRef(function ButtonLink({ children, className, href, size = 'md', tabIndex, variant = 'primary', width = 'content', ...rest }, ref) {
+    if (!isOneOf(webButtonVariants, variant))
+        throw new RangeError(`Unknown ButtonLink variant: ${String(variant)}`);
+    if (!isOneOf(buttonSizes, size))
+        throw new RangeError(`Unknown ButtonLink size: ${String(size)}`);
+    if (!isOneOf(buttonWidths, width))
+        throw new RangeError(`Unknown ButtonLink width: ${String(width)}`);
+    return (_jsx("a", { ref: ref, className: cx(...buttonClassNames({ size, variant }), buttonLinkClass, buttonWidthClass(width), className), href: href, tabIndex: tabIndex ?? tabStop, ...rest, children: children }));
+});

package/dist/components/CommandPalette.d.ts

@@ -0,0 +1,12 @@
+import { type CommandPaletteProps } from './command-palette/types.js';
+export { commandPaletteShortcuts, type CommandPaletteGroup, type CommandPaletteItem, type CommandPaletteProps, type CommandPaletteShortcut, } from './command-palette/types.js';
+/**
+ * A search over the product, on the top layer: a modal dialog named by
+ * `label` holding a field (an ARIA combobox) over an always-open listbox of
+ * grouped results. ↑ and ↓ move the active row (wrapping), Enter chooses
+ * it; Escape, a press outside or the shortcut again close it, and focus
+ * returns to where it was. With `shortcut="mod+k"` ⌘K or Ctrl+K opens it
+ * from anywhere but another text field. Invalid words or groups throw a
+ * `RangeError`.
+ */
+export declare function CommandPalette(props: CommandPaletteProps): import("react").JSX.Element;

package/dist/components/CommandPalette.js

@@ -0,0 +1,143 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useRef, useState, } from 'react';
+import { useDialogCloseRequests } from './dialog-close-requests.js';
+import { PaletteList } from './command-palette/PaletteList.js';
+import { usePaletteShortcut } from './command-palette/shortcut.js';
+import { assertCommandPalette } from './command-palette/validate.js';
+export { commandPaletteShortcuts, } from './command-palette/types.js';
+/** The hex of an item's id, so any id makes a valid DOM id part. */
+function idPart(id) {
+    return Array.from(new TextEncoder().encode(id), (byte) => byte.toString(16).padStart(2, '0')).join('');
+}
+/** The words the status says: loading, nothing found, or the count. */
+function statusWords({ countText, emptyText, loading, loadingText }, count) {
+    if (loading)
+        return loadingText ?? '';
+    if (count === 0)
+        return emptyText;
+    return countText?.(count) ?? '';
+}
+/**
+ * A search over the product, on the top layer: a modal dialog named by
+ * `label` holding a field (an ARIA combobox) over an always-open listbox of
+ * grouped results. ↑ and ↓ move the active row (wrapping), Enter chooses
+ * it; Escape, a press outside or the shortcut again close it, and focus
+ * returns to where it was. With `shortcut="mod+k"` ⌘K or Ctrl+K opens it
+ * from anywhere but another text field. Invalid words or groups throw a
+ * `RangeError`.
+ */
+export function CommandPalette(props) {
+    assertCommandPalette(props);
+    const { groups, hint, label, loading = false, loadingText, onOpenChange, onQueryChange, open, placeholder, query, shortcut, } = props;
+    const listId = useId();
+    const inputRef = useRef(null);
+    const openerRef = useRef(null);
+    const pointerAt = useRef(null);
+    const [activeId, setActiveId] = useState();
+    // The status starts empty each time the palette opens and is filled just
+    // after, so its first words are announced as a change.
+    const [announcing, setAnnouncing] = useState(false);
+    // Each opening and closing starts the active row over at the first item.
+    const [shownOpen, setShownOpen] = useState(open);
+    if (shownOpen !== open) {
+        setShownOpen(open);
+        setActiveId(undefined);
+        setAnnouncing(false);
+    }
+    // A chosen item's action, run once the dialog has really closed, so it
+    // can move focus to the page.
+    const pendingRef = useRef(null);
+    const items = groups.flatMap((group) => group.items);
+    const active = items.find((item) => item.id === activeId) ?? items[0];
+    const rowId = (item) => `${listId}-${idPart(item.id)}`;
+    const { nodeRef, handlers } = useDialogCloseRequests({
+        open,
+        onClose: () => onOpenChange(false),
+    });
+    usePaletteShortcut(shortcut, () => inputRef.current, () => onOpenChange(!open));
+    // Opening remembers where focus was (before the dialog takes it), then,
+    // once the dialog is shown, selects the field's words so typing replaces
+    // them. Closing hands focus back unless a chosen item moved it elsewhere.
+    useLayoutEffect(() => {
+        if (open)
+            openerRef.current = document.activeElement;
+    }, [open]);
+    useEffect(() => {
+        if (open) {
+            pointerAt.current = null;
+            inputRef.current?.focus();
+            inputRef.current?.select();
+            const timer = setTimeout(() => setAnnouncing(true), 0);
+            return () => clearTimeout(timer);
+        }
+        const pending = pendingRef.current;
+        pendingRef.current = null;
+        pending?.();
+        const opener = openerRef.current;
+        openerRef.current = null;
+        const focus = document.activeElement;
+        const lost = !focus ||
+            focus === document.body ||
+            (nodeRef.current?.contains(focus) ?? false);
+        if (lost && opener instanceof HTMLElement && opener.isConnected)
+            opener.focus();
+    }, [open, nodeRef]);
+    const activeRow = active ? rowId(active) : undefined;
+    const firstActive = active !== undefined && active === items[0];
+    useEffect(() => {
+        if (!activeRow)
+            return;
+        // The first row brings its group's caption back into view too.
+        const list = document.getElementById(listId);
+        if (firstActive && list)
+            list.scrollTop = 0;
+        else
+            document
+                .getElementById(activeRow)
+                ?.scrollIntoView?.({ block: 'nearest' });
+    }, [activeRow, firstActive, listId]);
+    function choose(item) {
+        pendingRef.current = item.onSelect;
+        onOpenChange(false);
+    }
+    function move(step) {
+        if (items.length === 0)
+            return;
+        const index = active ? items.indexOf(active) : -1;
+        const next = items[(index + step + items.length) % items.length];
+        setActiveId(next?.id);
+    }
+    function onFieldKeyDown(event) {
+        if (event.nativeEvent.isComposing || event.keyCode === 229)
+            return;
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            move(event.key === 'ArrowDown' ? 1 : -1);
+        }
+        else if (event.key === 'Enter') {
+            event.preventDefault();
+            if (active)
+                choose(active);
+        }
+    }
+    function onActivate(item, event) {
+        // A list scrolled under a still pointer reports a move with no movement.
+        const last = pointerAt.current;
+        pointerAt.current = { x: event.clientX, y: event.clientY };
+        if (last && last.x === event.clientX && last.y === event.clientY)
+            return;
+        setActiveId(item.id);
+    }
+    // A press anywhere but the field keeps focus in it, so the keys work on.
+    function keepFocus(event) {
+        if (event.target !== inputRef.current)
+            event.preventDefault();
+    }
+    const status = statusWords(props, items.length);
+    const showEmpty = !loading && items.length === 0;
+    return (_jsx("dialog", { ref: nodeRef, "aria-label": label, className: "sw-command-palette", ...handlers, children: open ? (_jsxs("div", { className: "sw-command-palette-body", onMouseDown: keepFocus, children: [_jsx("input", { "aria-activedescendant": activeRow, "aria-autocomplete": "list", "aria-controls": listId, "aria-expanded": items.length > 0, "aria-label": label, autoComplete: "off", className: "sw-command-palette-field", onChange: (event) => {
+                        setActiveId(undefined);
+                        onQueryChange(event.target.value);
+                    }, onKeyDown: onFieldKeyDown, placeholder: placeholder, ref: inputRef, role: "combobox", spellCheck: false, type: "text", value: query }), _jsx(PaletteList, { activeId: active?.id, groups: groups, label: label, listId: listId, onActivate: onActivate, onChoose: choose, rowId: rowId }), loading || showEmpty ? (_jsx("p", { "aria-hidden": "true", className: "sw-command-palette-message", children: loading ? loadingText : props.emptyText })) : null, _jsx("div", { className: "sw-sr-only", role: "status", children: announcing ? status : '' }), hint ? _jsx("p", { className: "sw-command-palette-hint", children: hint }) : null] })) : null }));
+}

package/dist/components/CommandPaletteTrigger.d.ts

@@ -0,0 +1,9 @@
+import { type CommandPaletteTriggerProps } from './command-palette/types.js';
+export type { CommandPaletteTriggerProps } from './command-palette/types.js';
+/**
+ * The button that opens a CommandPalette: a search-looking pill holding the
+ * glyph, the placeholder words and a key hint, or with `compact` the glyph
+ * alone in a round quiet button. Named by `label`; the hint is hidden from
+ * assistive technology. Blank words or a missing glyph throw a `RangeError`.
+ */
+export declare function CommandPaletteTrigger(props: CommandPaletteTriggerProps): import("react").JSX.Element;

package/dist/components/CommandPaletteTrigger.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../class-names.js';
+import { tabStop } from '../tab-stop.js';
+import { assertCommandPaletteTrigger } from './command-palette/validate.js';
+/**
+ * The button that opens a CommandPalette: a search-looking pill holding the
+ * glyph, the placeholder words and a key hint, or with `compact` the glyph
+ * alone in a round quiet button. Named by `label`; the hint is hidden from
+ * assistive technology. Blank words or a missing glyph throw a `RangeError`.
+ */
+export function CommandPaletteTrigger(props) {
+    assertCommandPaletteTrigger(props);
+    const { compact = false, icon, label, onPress, placeholder, shortcutLabel, } = props;
+    return (_jsxs("button", { "aria-haspopup": "dialog", "aria-label": label, className: cx('sw-command-palette-trigger', compact && 'sw-command-palette-trigger-compact'), onClick: onPress, tabIndex: tabStop, type: "button", children: [_jsx("span", { "aria-hidden": "true", className: "sw-command-palette-trigger-icon", children: icon }), compact ? null : (_jsxs(_Fragment, { children: [_jsx("span", { className: "sw-command-palette-trigger-text", children: placeholder }), shortcutLabel ? (_jsx("span", { "aria-hidden": "true", className: "sw-command-palette-key", children: shortcutLabel })) : null] }))] }));
+}

package/dist/components/ContextSwitcher.d.ts

@@ -0,0 +1,12 @@
+import { contextSwitcherTriggerAppearances, type ContextSwitcherTriggerAppearance, contextSwitcherWidths, type ContextSwitcherWidth } from '../css/css-context-switcher-trigger.js';
+import { type ContextSwitcherProps } from './context-switcher/types.js';
+export type { ContextSwitcherAction, ContextSwitcherBadge, ContextSwitcherFilter, ContextSwitcherGroup, ContextSwitcherOption, ContextSwitcherProps, } from './context-switcher/types.js';
+export { contextSwitcherTriggerAppearances, contextSwitcherWidths, type ContextSwitcherTriggerAppearance, type ContextSwitcherWidth, };
+/**
+ * A button showing the context in use (a workspace, a competition, a
+ * season) that opens a popup to switch it: an optional filter field, the
+ * options in groups as a listbox (the current one checked), and commands
+ * in a footer. Invalid groups, options, words or props throw a
+ * `RangeError`.
+ */
+export declare function ContextSwitcher(props: ContextSwitcherProps): import("react").JSX.Element;

package/dist/components/ContextSwitcher.js

@@ -0,0 +1,62 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from 'react';
+import { cx } from '../class-names.js';
+import { contextSwitcherTriggerAppearances, contextSwitcherTriggerClass, contextSwitcherWidths, } from '../css/css-context-switcher-trigger.js';
+import { tabStop } from '../tab-stop.js';
+import { optionCount } from './context-switcher/options.js';
+import { SwitcherPopup } from './context-switcher/SwitcherPopup.js';
+import { assertContextSwitcher } from './context-switcher/validate.js';
+export { contextSwitcherTriggerAppearances, contextSwitcherWidths, };
+/**
+ * A button showing the context in use (a workspace, a competition, a
+ * season) that opens a popup to switch it: an optional filter field, the
+ * options in groups as a listbox (the current one checked), and commands
+ * in a footer. Invalid groups, options, words or props throw a
+ * `RangeError`.
+ */
+export function ContextSwitcher(props) {
+    assertContextSwitcher(props);
+    const { actions = [], align = 'start', currentId, filter, groups, label, onSelect, trigger, triggerAppearance = 'framed', width = 'content', } = props;
+    const [open, setOpen] = useState(false);
+    const triggerRef = useRef(null);
+    const pressedRef = useRef(false);
+    const labelId = useId();
+    const contentId = useId();
+    const current = groups
+        .flatMap((group) => group.options)
+        .find((option) => option.id === currentId);
+    const showFilter = filter !== undefined && optionCount(groups) >= (filter.minOptions ?? 0);
+    function close(refocus) {
+        setOpen(false);
+        if (refocus)
+            triggerRef.current?.focus();
+    }
+    function onTriggerKeyDown(event) {
+        if (!open && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+            event.preventDefault();
+            setOpen(true);
+        }
+    }
+    function runAction(action) {
+        // Focus is back on the trigger first, so a dialog the command opens
+        // returns focus there when it closes.
+        close(true);
+        action.onSelect();
+    }
+    const icon = triggerAppearance === 'icon';
+    // The name is what is switched, then what the trigger shows (for a glyph
+    // alone, the current option's label).
+    const labelledBy = icon && !current ? labelId : `${labelId} ${contentId}`;
+    return (_jsxs("div", { className: cx('sw-context-switcher', width === 'full' && 'sw-context-switcher-full'), children: [_jsxs("button", { "aria-expanded": open, "aria-haspopup": "dialog", "aria-labelledby": labelledBy, className: cx('sw-context-switcher-trigger', contextSwitcherTriggerClass(triggerAppearance)), onClick: () => (open ? close(true) : setOpen(true)), onKeyDown: onTriggerKeyDown, onPointerDown: () => {
+                    pressedRef.current = true;
+                }, onPointerUp: () => {
+                    pressedRef.current = false;
+                }, onPointerLeave: () => {
+                    pressedRef.current = false;
+                }, ref: triggerRef, tabIndex: tabStop, type: "button", children: [_jsx("span", { className: "sw-sr-only", id: labelId, children: label }), _jsx("span", { "aria-hidden": icon ? true : undefined, className: "sw-context-switcher-trigger-content", id: icon ? undefined : contentId, children: trigger }), icon && current ? (_jsx("span", { className: "sw-sr-only", id: contentId, children: current.label })) : null] }), open ? (_jsx(SwitcherPopup, { actions: actions, align: align, currentId: currentId, filter: showFilter ? filter : undefined, groups: groups, label: label, onAction: runAction, onChoose: (entry) => {
+                    close(true);
+                    if (entry.option.id !== currentId)
+                        onSelect(entry.option);
+                }, onClose: close, triggerPressed: () => pressedRef.current, triggerRef: triggerRef })) : null] }));
+}

package/dist/components/EmptyState.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+export declare const emptyStateTitleElements: readonly ["h2", "h3"];
+/** The title's heading level: `h2` (the default) in a page, `h3` in a card under its own heading. */
+export type EmptyStateTitleElement = (typeof emptyStateTitleElements)[number];
+export type EmptyStateProps = {
+    /** What is empty, in the consumer's words ("No teams in Spring 2027 yet"). */
+    title: string;
+    /** `h2` (the default) in a page column; `h3` inside a card under its own heading. */
+    titleAs?: EmptyStateTitleElement;
+    /** A muted line under the title: what to do next. Not blank. */
+    description?: string;
+    /** A decorative glyph over the title (Lucide in the consumer), hidden from assistive technology. */
+    icon?: ReactNode;
+    /** The ways out, such as Buttons, in a centred row that wraps. */
+    actions?: ReactNode;
+};
+/**
+ * Where a list or a page has nothing yet: a centred panel on the surface
+ * with a dashed hairline edge, an optional decorative glyph, a title, a
+ * muted line and the actions that fill it. It fills its column, so it fits
+ * a page column or a Card.
+ */
+export declare function EmptyState({ title, titleAs, description, icon, actions, }: EmptyStateProps): import("react").JSX.Element;

package/dist/components/EmptyState.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, Fragment, isValidElement } from 'react';
+import { isOneOf } from '../is-one-of.js';
+import { Text } from './Text.js';
+export const emptyStateTitleElements = ['h2', 'h3'];
+/** Fails closed on blank words or an unknown heading level. */
+function assertEmptyState({ title, titleAs, description }) {
+    if (typeof title !== 'string' || !title.trim())
+        throw new RangeError('EmptyState title must be nonempty');
+    if (titleAs !== undefined && !isOneOf(emptyStateTitleElements, titleAs))
+        throw new RangeError(`Unknown EmptyState titleAs: ${String(titleAs)}`);
+    if (description !== undefined &&
+        (typeof description !== 'string' || !description.trim()))
+        throw new RangeError('EmptyState description must be nonempty');
+}
+/**
+ * Whether a slot draws anything: nothing, a boolean, blank words, an empty
+ * array or a Fragment holding only those is no content, so the slot's box
+ * (and its gap) is left out.
+ */
+function hasContent(node) {
+    return Children.toArray(node).some((child) => {
+        if (typeof child === 'string')
+            return child.trim() !== '';
+        if (isValidElement(child) &&
+            child.type === Fragment)
+            return hasContent(child.props.children);
+        return true;
+    });
+}
+/**
+ * Where a list or a page has nothing yet: a centred panel on the surface
+ * with a dashed hairline edge, an optional decorative glyph, a title, a
+ * muted line and the actions that fill it. It fills its column, so it fits
+ * a page column or a Card.
+ */
+export function EmptyState({ title, titleAs = 'h2', description, icon, actions, }) {
+    assertEmptyState({ title, titleAs, description });
+    return (_jsxs("div", { className: "sw-empty-state", children: [hasContent(icon) ? (_jsx("span", { "aria-hidden": "true", className: "sw-empty-state-icon", children: icon })) : null, _jsx(Text, { as: titleAs, className: "sw-empty-state-title", variant: "title", children: title }), description !== undefined ? (_jsx(Text, { as: "p", className: "sw-empty-state-description", color: "muted", children: description })) : null, hasContent(actions) ? (_jsx("div", { className: "sw-empty-state-actions", children: actions })) : null] }));
+}

package/dist/components/FixtureGroup.d.ts

@@ -0,0 +1,9 @@
+import { type FixtureGroupProps } from './fixture/types.js';
+export type { FixtureGroupProps } from './fixture/types.js';
+/**
+ * A run of fixtures under a caption, such as a match day at a venue: the
+ * caption names a list of FixtureRows, whose columns line up across the
+ * run (one grid, each row a subgrid of it). A blank title throws a
+ * `RangeError`.
+ */
+export declare function FixtureGroup({ children, title }: FixtureGroupProps): import("react").JSX.Element;

package/dist/components/FixtureGroup.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { FixtureListContext } from './fixture/fixture-list-context.js';
+/**
+ * A run of fixtures under a caption, such as a match day at a venue: the
+ * caption names a list of FixtureRows, whose columns line up across the
+ * run (one grid, each row a subgrid of it). A blank title throws a
+ * `RangeError`.
+ */
+export function FixtureGroup({ children, title }) {
+    if (typeof title !== 'string' || !title.trim())
+        throw new RangeError('FixtureGroup title must be nonempty');
+    const titleId = useId();
+    return (_jsxs("div", { className: "sw-fixture-group", children: [_jsx("div", { className: "sw-fixture-group-title", id: titleId, children: title }), _jsx("ul", { "aria-labelledby": titleId, className: "sw-fixture-list", role: "list", children: _jsx(FixtureListContext.Provider, { value: true, children: children }) })] }));
+}

package/dist/components/FixtureRow.d.ts

@@ -0,0 +1,10 @@
+import { type FixtureRowProps } from './fixture/types.js';
+export type { FixtureRowProps, FixtureSide, FixtureStatus, } from './fixture/types.js';
+/**
+ * One fixture in a FixtureGroup: the home side ending at the centre, the
+ * kickoff time or score in the middle, the away side starting from it, then
+ * the details and a status at the end (under the sides below `md`). With
+ * `href` or `onPress` the whole row is a link or a button with a chevron.
+ * Invalid words or props throw a `RangeError`.
+ */
+export declare function FixtureRow(props: FixtureRowProps): import("react").JSX.Element;

package/dist/components/FixtureRow.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cx } from '../class-names.js';
+import { hideClass } from '../css/breakpoints.js';
+import { tabStop } from '../tab-stop.js';
+import { Badge } from './Badge.js';
+import { useFixtureList } from './fixture/fixture-list-context.js';
+import { assertFixtureRow } from './fixture/validate.js';
+import { plainPress } from './link-press.js';
+import { hasSlot } from './slot.js';
+/** One side: its name, and its mark on the centre's side (hidden). */
+function Side({ side, place }) {
+    const mark = hasSlot(side.mark) ? (_jsx("span", { "aria-hidden": "true", className: "sw-fixture-mark", children: side.mark })) : null;
+    return (_jsxs("span", { className: `sw-fixture-team sw-fixture-team-${place}`, children: [place === 'away' ? mark : null, _jsx("span", { className: "sw-fixture-name", children: side.name }), place === 'home' ? mark : null] }));
+}
+/**
+ * One fixture in a FixtureGroup: the home side ending at the centre, the
+ * kickoff time or score in the middle, the away side starting from it, then
+ * the details and a status at the end (under the sides below `md`). With
+ * `href` or `onPress` the whole row is a link or a button with a chevron.
+ * Invalid words or props throw a `RangeError`.
+ */
+export function FixtureRow(props) {
+    useFixtureList();
+    assertFixtureRow(props);
+    const { away, center, centerKind = 'time', home, href, meta, metaHideBelow, onPress, status, 'aria-label': ariaLabel, } = props;
+    const hasMeta = hasSlot(meta);
+    const pressable = href !== undefined || onPress !== undefined;
+    // Spaces as their own text nodes keep the parts apart in the name.
+    const parts = (_jsxs(_Fragment, { children: [_jsx(Side, { place: "home", side: home }), ' ', _jsx("span", { className: `sw-fixture-center sw-fixture-center-${centerKind}`, children: center }), ' ', _jsx(Side, { place: "away", side: away }), hasMeta || status ? (_jsxs(_Fragment, { children: [' ', _jsxs("span", { className: "sw-fixture-end", children: [hasMeta ? (_jsx("span", { className: cx('sw-fixture-meta', metaHideBelow && hideClass('below', metaHideBelow)), children: meta })) : null, hasMeta && status ? ' ' : null, status ? (_jsx(Badge, { size: "sm", tone: status.tone, children: status.label })) : null] })] })) : null, pressable ? (_jsx("span", { "aria-hidden": "true", className: "sw-fixture-chevron" })) : null] }));
+    let row;
+    if (href !== undefined)
+        row = (_jsx("a", { "aria-label": ariaLabel, className: "sw-fixture-row sw-fixture-row-pressable", href: href, onClick: onPress
+                ? (event) => {
+                    if (!plainPress(event))
+                        return;
+                    event.preventDefault();
+                    onPress(event);
+                }
+                : undefined, tabIndex: tabStop, children: parts }));
+    else if (onPress !== undefined)
+        row = (_jsx("button", { "aria-label": ariaLabel, className: "sw-fixture-row sw-fixture-row-pressable", onClick: onPress, tabIndex: tabStop, type: "button", children: parts }));
+    else
+        row = _jsx("div", { className: "sw-fixture-row", children: parts });
+    return _jsx("li", { className: "sw-fixture-item", children: row });
+}