@kennycorrea/ui 0.10.0 → 0.11.0

package/dist/atoms/Card/Card.js

@@ -1,22 +1,58 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Card as ThemedCard } from '@radix-ui/themes';
+import { createContext, useContext } from 'react';
 import { cn } from '../../utils/cn.js';
+/** Radix Themes' breakpoints, in the order they apply. `initial` is the unconditional value. */
+export const CARD_BREAKPOINTS = ['initial', 'xs', 'sm', 'md', 'lg', 'xl'];
+const CardContext = createContext({});
+/**
+ * Spreads a responsive value into data attributes the stylesheet matches on: `data-<name>` for
+ * `initial`, `data-<name>-<bp>` for the rest. Breakpoints are CSS media queries in `tokens.css`,
+ * because Tailwind's `md` is not Radix's `md` and a class cannot be generated for both.
+ */
+function responsiveAttrs(name, value) {
+    const attrs = {};
+    if (value === undefined)
+        return attrs;
+    if (typeof value === 'string') {
+        attrs[`data-${name}`] = value;
+        return attrs;
+    }
+    for (const bp of CARD_BREAKPOINTS) {
+        const v = value[bp];
+        if (v !== undefined)
+            attrs[bp === 'initial' ? `data-${name}` : `data-${name}-${bp}`] = v;
+    }
+    return attrs;
+}
+function useStyleAttrs(own) {
+    const inherited = useContext(CardContext);
+    return {
+        ...responsiveAttrs('variant', own.variant ?? inherited.variant),
+        ...responsiveAttrs('density', own.density ?? inherited.density),
+    };
+}
 /**
  * Radix Themes' Card, with the padding taken off.
  *
  * Themes pads its card for you; the house card is built from a header and a body with a
  * rule between them, so the padding belongs to those rather than to the card. `p-0` is the
- * whole of the customisation.
+ * whole of the customisation. Variant and density reach the header, title and body through
+ * context, and each can still override them.
  */
-export function Card({ raised = false, className, ...props }) {
-    return (_jsx(ThemedCard, { size: "2", variant: raised ? 'classic' : 'surface', className: cn('p-0', className), ...props }));
+export function Card({ raised = false, variant = 'outlined', density = 'comfortable', className, ...props }) {
+    const attrs = useStyleAttrs({ variant, density });
+    return (_jsx(CardContext.Provider, { value: { variant, density }, children: _jsx(ThemedCard, { size: "2", variant: raised ? 'classic' : 'surface', className: cn('ui-card p-0', className), ...attrs, ...props }) }));
 }
-export function CardHeader({ className, ...props }) {
-    return _jsx("div", { className: cn('border-b border-hairline px-5 py-4', className), ...props });
+export function CardHeader({ variant, density, className, ...props }) {
+    const attrs = useStyleAttrs({ variant, density });
+    return (_jsx("div", { className: cn('ui-card-header border-b border-hairline', className), ...attrs, ...props }));
 }
-export function CardTitle({ className, ...props }) {
-    return _jsx("h2", { className: cn('font-medium text-brand-900', className), ...props });
+export function CardTitle({ density, className, ...props }) {
+    const attrs = useStyleAttrs({ density });
+    return _jsx("h2", { className: cn('ui-card-title text-brand-900', className), ...attrs, ...props });
 }
-export function CardBody({ className, ...props }) {
-    return _jsx("div", { className: cn('px-5 py-4', className), ...props });
+export function CardBody({ variant, density, className, ...props }) {
+    const attrs = useStyleAttrs({ variant, density });
+    return _jsx("div", { className: cn('ui-card-body', className), ...attrs, ...props });
 }

package/dist/atoms/ChipGroup/ChipGroup.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+export interface ChipOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+interface ChipGroupBase {
+    options: ChipOption[];
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    className?: string;
+}
+export interface ChipGroupSingleProps extends ChipGroupBase {
+    multiple?: false;
+    value: string | null;
+    onValueChange?: (value: string | null) => void;
+}
+export interface ChipGroupMultiProps extends ChipGroupBase {
+    multiple: true;
+    value: string[];
+    onValueChange?: (value: string[]) => void;
+}
+export type ChipGroupProps = ChipGroupSingleProps | ChipGroupMultiProps;
+/**
+ * Horizontally scrolling filter chips with scroll-snap and fade edges that appear only where there
+ * is more to scroll. Single mode: clicking the selected chip again clears it. Multi mode toggles
+ * each chip independently. The first selected chip is scrolled into view. Left/Right move focus
+ * (Home/End jump); Space/Enter toggles.
+ */
+export declare function ChipGroup(props: ChipGroupProps): import("react").JSX.Element;
+export {};

package/dist/atoms/ChipGroup/ChipGroup.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+/**
+ * Horizontally scrolling filter chips with scroll-snap and fade edges that appear only where there
+ * is more to scroll. Single mode: clicking the selected chip again clears it. Multi mode toggles
+ * each chip independently. The first selected chip is scrolled into view. Left/Right move focus
+ * (Home/End jump); Space/Enter toggles.
+ */
+export function ChipGroup(props) {
+    const { options, className, 'aria-label': label, 'aria-labelledby': labelledBy } = props;
+    const selected = props.multiple ? props.value : props.value === null ? [] : [props.value];
+    const scroller = useRef(null);
+    const [edges, setEdges] = useState({ start: false, end: false });
+    const key = selected.join('\u0000');
+    const measure = () => {
+        const el = scroller.current;
+        if (!el)
+            return;
+        const start = el.scrollLeft > 1;
+        const end = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
+        setEdges((e) => (e.start === start && e.end === end ? e : { start, end }));
+    };
+    // biome-ignore lint/correctness/useExhaustiveDependencies: re-run when the selection changes
+    useEffect(() => {
+        const chip = scroller.current?.querySelector('[data-selected="true"]');
+        chip?.scrollIntoView?.({ inline: 'center', block: 'nearest', behavior: 'smooth' });
+        measure();
+    }, [key]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: measure only touches refs and a bailing setState
+    useEffect(() => {
+        const el = scroller.current;
+        if (!el || typeof ResizeObserver === 'undefined')
+            return;
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
+    const toggle = (v) => {
+        if (props.multiple) {
+            props.onValueChange?.(selected.includes(v) ? selected.filter((s) => s !== v) : [...selected, v]);
+        }
+        else {
+            props.onValueChange?.(props.value === v ? null : v);
+        }
+    };
+    const onKeyDown = (e) => {
+        const chips = [...e.currentTarget.querySelectorAll('button:not(:disabled)')];
+        const i = chips.indexOf(document.activeElement);
+        if (i < 0)
+            return;
+        let to;
+        if (e.key === 'ArrowRight')
+            to = (i + 1) % chips.length;
+        else if (e.key === 'ArrowLeft')
+            to = (i - 1 + chips.length) % chips.length;
+        else if (e.key === 'Home')
+            to = 0;
+        else if (e.key === 'End')
+            to = chips.length - 1;
+        else
+            return;
+        e.preventDefault();
+        chips[to].focus();
+    };
+    return (_jsx("div", { className: ['ui-chips', className].filter(Boolean).join(' '), "data-fade-start": edges.start ? 'true' : undefined, "data-fade-end": edges.end ? 'true' : undefined, children: _jsx("div", { ref: scroller, role: "group", "aria-label": label, "aria-labelledby": labelledBy, className: "ui-chips__scroller", onScroll: measure, onKeyDown: onKeyDown, children: options.map((o) => {
+                const on = selected.includes(o.value);
+                return (_jsx("button", { type: "button", "aria-pressed": on, "data-selected": on ? 'true' : 'false', disabled: o.disabled, className: "ui-chips__chip", onClick: () => toggle(o.value), children: o.label }, o.value));
+            }) }) }));
+}

package/dist/atoms/ChipGroup/index.d.ts

@@ -0,0 +1 @@
+export * from './ChipGroup.js';

package/dist/atoms/ChipGroup/index.js

@@ -0,0 +1 @@
+export * from './ChipGroup.js';

package/dist/atoms/Input/Input.js

@@ -2,10 +2,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { TextField } from '@radix-ui/themes';
 import { forwardRef } from 'react';
 import { cn } from '../../utils/cn.js';
+/**
+ * `inputMode` and `enterKeyHint` pass straight through to the `<input>` (they are native
+ * attributes), and are worth setting on mobile: `inputMode="numeric"` / `"decimal"` / `"tel"` /
+ * `"email"` pick the keyboard, `enterKeyHint="next" | "search" | "send" | "done"` labels the
+ * return key. On coarse pointers the text is never below 16px, or iOS zooms the page on focus.
+ */
 const SIZES = { sm: '1', md: '2', lg: '3' };
 export const Input = forwardRef(function Input({ size = 'md', invalid = false, className, ...props }, ref) {
     return (_jsx(TextField.Root, { ref: ref, size: SIZES[size], 
         // Themes has no invalid variant; the red tint and the ARIA state are ours, and they
         // have to agree — a field that only looks wrong is no use to a screen reader.
-        color: invalid ? 'red' : undefined, "aria-invalid": invalid || undefined, className: cn('w-full', className), ...props }));
+        color: invalid ? 'red' : undefined, "aria-invalid": invalid || undefined, className: cn('ui-input w-full', className), ...props }));
 });

package/dist/atoms/List/List.d.ts

@@ -0,0 +1,73 @@
+import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
+import { type SwipeActions } from './swipe.js';
+export type { RowAction, RowActionTone, SwipeActions } from './swipe.js';
+export type ListSectionVariant = 'inset' | 'full';
+export interface ListSectionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Small muted text above the group, outside the surface. */
+    header?: ReactNode;
+    /** Small muted text below the group, outside the surface. */
+    footer?: ReactNode;
+    /** `inset` is a rounded tile with margins; `full` runs edge to edge with square corners. */
+    variant?: ListSectionVariant;
+}
+/**
+ * A native-style grouped list: rows on one grouped surface with hairlines between them.
+ *
+ * The list is a real `<ul role="list">` (the explicit role keeps VoiceOver announcing it once
+ * list-style is removed) and `ListRow` supplies the `<li>`. Header and footer name and describe
+ * the list, so a screen reader hears them with it.
+ */
+export declare function ListSection({ header, footer, variant, className, children, ...props }: ListSectionProps): import("react").JSX.Element;
+interface RowOwnProps {
+    /** An icon, avatar or coloured icon tile. Hairlines start after it. */
+    leading?: ReactNode;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    /** Value text, a badge, a switch or any node. Numbers are tabular. */
+    trailing?: ReactNode;
+    /** Draws a disclosure chevron after the trailing slot. */
+    chevron?: boolean;
+    disabled?: boolean;
+    /** Danger-coloured title. */
+    destructive?: boolean;
+    /**
+     * Actions behind the row. Dragging reveals them on touch devices; everywhere else (and for
+     * keyboards and screen readers) the same actions are in a menu button and in the row's
+     * context menu (right-click, long-press). One row is open at a time per `ListSection`.
+     */
+    swipeActions?: SwipeActions;
+    /** Dragging a long way past the trailing actions triggers the first of them. Opt-in. */
+    fullSwipe?: boolean;
+    /** Class for the `<li>`. */
+    className?: string;
+}
+type ButtonRow = RowOwnProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof RowOwnProps | 'title'> & {
+    href?: undefined;
+    asChild?: false;
+};
+type LinkRow = RowOwnProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof RowOwnProps | 'title'> & {
+    href: string;
+    asChild?: false;
+};
+/** The child is the row's element (a router link, say) and supplies its own content. */
+type SlotRow = Omit<RowOwnProps, 'title'> & Omit<HTMLAttributes<HTMLElement>, keyof RowOwnProps | 'title'> & {
+    asChild: true;
+    title?: ReactNode;
+    href?: string;
+};
+export type ListRowProps = ButtonRow | LinkRow | SlotRow;
+/**
+ * One row. A `button` with `onClick`, an `a` with `href`, whatever you pass with `asChild`,
+ * and a plain `div` when it does nothing — so a row that is not interactive is not announced
+ * as if it were. A row holding a switch is such a row: the switch is the control.
+ */
+export declare function ListRow(props: ListRowProps): import("react").JSX.Element;
+export interface ListRowSkeletonProps {
+    /** Reserve the leading slot. */
+    leading?: boolean;
+    /** Reserve a subtitle line. */
+    subtitle?: boolean;
+    className?: string;
+}
+/** A row-shaped placeholder; announces "Loading" once through the strings provider. */
+export declare function ListRowSkeleton({ leading, subtitle, className, }: ListRowSkeletonProps): import("react").JSX.Element;

package/dist/atoms/List/List.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronRightIcon } from '@radix-ui/react-icons';
+import { Skeleton as ThemedSkeleton } from '@radix-ui/themes';
+import { createContext, useContext, useId, useState, } from 'react';
+import { Slot } from '../../primitives/index.js';
+import { useUiStrings } from '../../strings.js';
+import { cn } from '../../utils/cn.js';
+import { ContextMenu } from '../ContextMenu/index.js';
+import { OpenRowContext, OverflowMenu, SwipeTray, useOpenRowState, useSwipeEnabled, useSwipeRow, } from './swipe.js';
+const VariantContext = createContext('inset');
+/**
+ * A native-style grouped list: rows on one grouped surface with hairlines between them.
+ *
+ * The list is a real `<ul role="list">` (the explicit role keeps VoiceOver announcing it once
+ * list-style is removed) and `ListRow` supplies the `<li>`. Header and footer name and describe
+ * the list, so a screen reader hears them with it.
+ */
+export function ListSection({ header, footer, variant = 'inset', className, children, ...props }) {
+    const id = useId();
+    const [openRowId, setOpenRowId] = useState(null);
+    const headerId = `${id}-h`;
+    const footerId = `${id}-f`;
+    return (_jsx(VariantContext.Provider, { value: variant, children: _jsx(OpenRowContext.Provider, { value: { openId: openRowId, setOpenId: setOpenRowId }, children: _jsxs("div", { className: cn('ui-list-section', className), "data-variant": variant, ...props, children: [header != null && (_jsx("div", { id: headerId, className: "ui-list-header", children: header })), _jsx("ul", { 
+                        // biome-ignore lint/a11y/noRedundantRoles: Safari drops list semantics once list-style is none
+                        role: "list", className: "ui-list", "aria-labelledby": header != null ? headerId : undefined, "aria-describedby": footer != null ? footerId : undefined, children: children }), footer != null && (_jsx("div", { id: footerId, className: "ui-list-footer", children: footer }))] }) }) }));
+}
+/**
+ * One row. A `button` with `onClick`, an `a` with `href`, whatever you pass with `asChild`,
+ * and a plain `div` when it does nothing — so a row that is not interactive is not announced
+ * as if it were. A row holding a switch is such a row: the switch is the control.
+ */
+export function ListRow(props) {
+    const { leading, title, subtitle, trailing, chevron = false, disabled = false, destructive = false, asChild = false, className, swipeActions, fullSwipe = false, ...rest } = props;
+    const rowId = useId();
+    const { moreActions } = useUiStrings();
+    const swipeEnabled = useSwipeEnabled();
+    const openState = useOpenRowState();
+    const sw = useSwipeRow({
+        id: rowId,
+        enabled: swipeEnabled && !disabled,
+        actions: swipeActions ?? {},
+        fullSwipe,
+        open: openState,
+    });
+    const variant = useContext(VariantContext);
+    const interactive = asChild || props.href !== undefined || props.onClick !== undefined;
+    const body = (_jsxs(_Fragment, { children: [leading != null && _jsx("span", { className: "ui-list-lead", children: leading }), _jsxs("span", { className: "ui-list-text", children: [_jsx("span", { className: "ui-list-title", children: title }), subtitle != null && _jsx("span", { className: "ui-list-subtitle", children: subtitle })] }), trailing != null && _jsx("span", { className: "ui-list-trailing", children: trailing }), chevron && _jsx(ChevronRightIcon, { className: "ui-list-chevron", "aria-hidden": true })] }));
+    const shared = {
+        className: 'ui-list-row',
+        'data-destructive': destructive || undefined,
+        'data-disabled': disabled || undefined,
+        'data-interactive': interactive || undefined,
+    };
+    let row;
+    if (asChild) {
+        // The child's own content is kept; the slot only lends it the row's behaviour and look.
+        const { children, ...slotProps } = rest;
+        row = (_jsx(Slot, { ...shared, ...slotProps, "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : undefined, children: children }));
+    }
+    else if (props.href !== undefined) {
+        const { href, onClick, ...a } = rest;
+        row = (_jsx("a", { ...shared, ...a, 
+            // A disabled link has no destination; `aria-disabled` alone would still navigate.
+            href: disabled ? undefined : href, onClick: disabled ? undefined : onClick, "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : undefined, children: body }));
+    }
+    else if (interactive) {
+        row = (_jsx("button", { type: "button", ...shared, ...rest, disabled: disabled, children: body }));
+    }
+    else {
+        row = (_jsx("div", { ...shared, ...rest, "aria-disabled": disabled || undefined, children: body }));
+    }
+    // Trailing first: it is the primary side, and the menus read top to bottom.
+    const all = [...(swipeActions?.trailing ?? []), ...(swipeActions?.leading ?? [])];
+    if (all.length === 0 || disabled) {
+        return (_jsx("li", { className: cn('ui-list-item', className), "data-variant": variant, "data-has-lead": leading != null || undefined, children: row }));
+    }
+    const surface = (_jsxs("div", { className: "ui-list-surface", "data-dragging": sw.dragging || undefined, "data-swipe": swipeEnabled || undefined, style: { transform: sw.offset ? `translateX(${sw.offset}px)` : undefined }, ...sw.surfaceProps, children: [row, _jsx(OverflowMenu, { label: moreActions, actions: all, hidden: swipeEnabled })] }));
+    return (_jsxs("li", { ref: sw.root, className: cn('ui-list-item', 'ui-list-item-swipe', className), "data-variant": variant, "data-has-lead": leading != null || undefined, children: [swipeEnabled && swipeActions?.leading?.length ? (_jsx(SwipeTray, { side: "leading", actions: swipeActions.leading, offset: sw.offset, active: sw.isOpen && sw.openSide === 'leading', onDone: sw.close })) : null, swipeEnabled && swipeActions?.trailing?.length ? (_jsx(SwipeTray, { side: "trailing", actions: swipeActions.trailing, offset: sw.offset, active: sw.isOpen && sw.openSide === 'trailing', onDone: sw.close })) : null, _jsx(ContextMenu, { items: all.map((a, index) => ({
+                    id: String(index),
+                    label: a.label,
+                    destructive: a.tone === 'danger',
+                })), onSelect: (key) => all[Number(key)]?.onAction(), children: surface })] }));
+}
+/** A row-shaped placeholder; announces "Loading" once through the strings provider. */
+export function ListRowSkeleton({ leading = true, subtitle = false, className, }) {
+    const { loading } = useUiStrings();
+    return (_jsx("li", { className: cn('ui-list-item', className), "data-has-lead": leading || undefined, "aria-busy": "true", children: _jsxs("div", { className: "ui-list-row", children: [_jsx("span", { className: "ui-list-sr", children: loading }), _jsxs("span", { "aria-hidden": true, className: "ui-list-skeleton", children: [leading && (_jsx("span", { className: "ui-list-lead", children: _jsx(ThemedSkeleton, { width: "100%", height: "100%", style: { borderRadius: 8 } }) })), _jsxs("span", { className: "ui-list-text", children: [_jsx(ThemedSkeleton, { height: "0.875rem", width: "55%" }), subtitle && _jsx(ThemedSkeleton, { height: "0.75rem", width: "35%" })] })] })] }) }));
+}

package/dist/atoms/List/index.d.ts

@@ -0,0 +1 @@
+export * from './List.js';

package/dist/atoms/List/index.js

@@ -0,0 +1 @@
+export * from './List.js';

package/dist/atoms/List/swipe.d.ts

@@ -0,0 +1,68 @@
+import { type ReactNode, type PointerEvent as ReactPointerEvent } from 'react';
+export type RowActionTone = 'neutral' | 'brand' | 'danger';
+export interface RowAction {
+    label: string;
+    icon?: ReactNode;
+    /** `danger` is red in the swipe tray and destructive in the menus. Default `neutral`. */
+    tone?: RowActionTone;
+    onAction: () => void;
+}
+export interface SwipeActions {
+    /** Revealed by dragging the row towards the end (right in LTR). */
+    leading?: RowAction[];
+    /** Revealed by dragging the row towards the start (left in LTR). */
+    trailing?: RowAction[];
+}
+/** Width of one revealed action button, in px. */
+export declare const ACTION_W = 72;
+/**
+ * Whether the swipe gesture is offered: a touch device and no request for reduced motion.
+ * Everywhere else the visible overflow button is the way in. False on the server, so the
+ * button is what renders before hydration decides.
+ */
+export declare function useSwipeEnabled(): boolean;
+/** One row open at a time per list: the list holds which. */
+export interface OpenRowContextValue {
+    openId: string | null;
+    setOpenId: (id: string | null) => void;
+}
+export declare const OpenRowContext: import("react").Context<OpenRowContextValue | null>;
+export declare function useOpenRowState(): OpenRowContextValue;
+interface UseSwipeArgs {
+    id: string;
+    enabled: boolean;
+    actions: SwipeActions;
+    fullSwipe: boolean;
+    open: OpenRowContextValue;
+}
+export declare function useSwipeRow({ id, enabled, actions, fullSwipe, open }: UseSwipeArgs): {
+    root: import("react").RefObject<HTMLLIElement | null>;
+    offset: number;
+    dragging: boolean;
+    isOpen: boolean;
+    openSide: "leading" | "trailing" | null;
+    close: () => void;
+    surfaceProps: {
+        onPointerDown: (e: ReactPointerEvent<HTMLElement>) => void;
+        onPointerMove: (e: ReactPointerEvent<HTMLElement>) => void;
+        onPointerUp: (e: ReactPointerEvent<HTMLElement>) => void;
+        onPointerCancel: (e: ReactPointerEvent<HTMLElement>) => void;
+        onClickCapture: (e: React.MouseEvent) => void;
+    };
+};
+/** The revealed buttons of one side. Inert unless that side is open. */
+export declare function SwipeTray({ side, actions, offset, active, onDone, }: {
+    side: 'leading' | 'trailing';
+    actions: RowAction[];
+    offset: number;
+    active: boolean;
+    onDone: () => void;
+}): import("react").JSX.Element;
+/** The same actions as a visible menu button; the way in when the gesture is not offered. */
+export declare function OverflowMenu({ label, actions, hidden, }: {
+    label: string;
+    actions: RowAction[];
+    /** Visually hidden until focused; still in the tab order for keyboards and screen readers. */
+    hidden: boolean;
+}): import("react").JSX.Element;
+export {};

package/dist/atoms/List/swipe.js

@@ -0,0 +1,207 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DotsHorizontalIcon } from '@radix-ui/react-icons';
+import { DropdownMenu as ThemedDropdownMenu } from '@radix-ui/themes';
+import { createContext, Fragment, useCallback, useContext, useEffect, useRef, useState, useSyncExternalStore, } from 'react';
+/** Width of one revealed action button, in px. */
+export const ACTION_W = 72;
+const AXIS_LOCK = 8;
+const FULL_SWIPE_RATIO = 0.6;
+/** iOS-style resistance: the further past the limit, the less the row follows the finger. */
+function rubber(excess, limit) {
+    const d = Math.max(limit, 1);
+    return (1 - 1 / ((excess * 0.55) / d + 1)) * d;
+}
+function subscribeMedia(onChange) {
+    const lists = [
+        window.matchMedia('(prefers-reduced-motion: reduce)'),
+        window.matchMedia('(pointer: coarse)'),
+    ];
+    for (const l of lists)
+        l.addEventListener?.('change', onChange);
+    return () => {
+        for (const l of lists)
+            l.removeEventListener?.('change', onChange);
+    };
+}
+function swipeSnapshot() {
+    if (typeof window === 'undefined' || !window.matchMedia)
+        return false;
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+        return false;
+    const touch = window.matchMedia('(pointer: coarse)').matches ||
+        (typeof navigator !== 'undefined' && navigator.maxTouchPoints > 0);
+    return touch;
+}
+/**
+ * Whether the swipe gesture is offered: a touch device and no request for reduced motion.
+ * Everywhere else the visible overflow button is the way in. False on the server, so the
+ * button is what renders before hydration decides.
+ */
+export function useSwipeEnabled() {
+    return useSyncExternalStore((cb) => (typeof window === 'undefined' || !window.matchMedia ? () => { } : subscribeMedia(cb)), swipeSnapshot, () => false);
+}
+export const OpenRowContext = createContext(null);
+export function useOpenRowState() {
+    const ctx = useContext(OpenRowContext);
+    const [local, setLocal] = useState(null);
+    return ctx ?? { openId: local, setOpenId: setLocal };
+}
+export function useSwipeRow({ id, enabled, actions, fullSwipe, open }) {
+    const leadingW = (actions.leading?.length ?? 0) * ACTION_W;
+    const trailingW = (actions.trailing?.length ?? 0) * ACTION_W;
+    const [side, setSide] = useState(null);
+    const [drag, setDrag] = useState(null);
+    const isOpen = side !== null && open.openId === id;
+    const rest = !isOpen ? 0 : side === 'leading' ? leadingW : -trailingW;
+    const root = useRef(null);
+    const track = useRef(null);
+    const swallowClick = useRef(false);
+    const close = useCallback(() => {
+        setSide(null);
+        setDrag(null);
+        if (open.openId === id)
+            open.setOpenId(null);
+    }, [id, open]);
+    // Tapping elsewhere, or Escape, closes an open row.
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const down = (e) => {
+            if (!root.current?.contains(e.target))
+                close();
+        };
+        const key = (e) => {
+            if (e.key === 'Escape')
+                close();
+        };
+        document.addEventListener('pointerdown', down, true);
+        document.addEventListener('keydown', key);
+        return () => {
+            document.removeEventListener('pointerdown', down, true);
+            document.removeEventListener('keydown', key);
+        };
+    }, [isOpen, close]);
+    const settle = (offset, width) => {
+        setDrag(null);
+        if (fullSwipe && trailingW > 0 && -offset >= width * FULL_SWIPE_RATIO) {
+            close();
+            actions.trailing?.[0]?.onAction();
+            return;
+        }
+        if (offset < 0 && -offset > trailingW / 2 && trailingW > 0) {
+            setSide('trailing');
+            open.setOpenId(id);
+        }
+        else if (offset > 0 && offset > leadingW / 2 && leadingW > 0) {
+            setSide('leading');
+            open.setOpenId(id);
+        }
+        else {
+            close();
+        }
+    };
+    const onPointerDown = (e) => {
+        if (!enabled || (e.pointerType === 'mouse' && e.button !== 0))
+            return;
+        track.current = {
+            pointerId: e.pointerId,
+            x: e.clientX,
+            y: e.clientY,
+            from: rest,
+            active: false,
+            width: e.currentTarget.getBoundingClientRect().width,
+            offset: rest,
+        };
+    };
+    const onPointerMove = (e) => {
+        const t = track.current;
+        if (!t || t.pointerId !== e.pointerId)
+            return;
+        const dx = e.clientX - t.x;
+        const dy = e.clientY - t.y;
+        if (!t.active) {
+            if (Math.abs(dy) > AXIS_LOCK && Math.abs(dy) > Math.abs(dx)) {
+                track.current = null; // a vertical scroll, not ours
+                return;
+            }
+            if (Math.abs(dx) <= AXIS_LOCK)
+                return;
+            t.active = true;
+            e.currentTarget.setPointerCapture?.(e.pointerId);
+            open.setOpenId(id);
+        }
+        const raw = t.from + dx;
+        let offset;
+        if (raw < 0) {
+            if (-raw <= trailingW)
+                offset = raw;
+            else if (fullSwipe && trailingW > 0)
+                offset = Math.max(raw, -t.width); // follows the finger to the edge
+            else
+                offset = -(trailingW + rubber(-raw - trailingW, 24));
+        }
+        else {
+            offset = raw <= leadingW ? raw : leadingW + rubber(raw - leadingW, 24);
+        }
+        t.offset = offset;
+        setDrag(offset);
+    };
+    const finish = (e, cancelled) => {
+        const t = track.current;
+        if (!t || t.pointerId !== e.pointerId)
+            return;
+        track.current = null;
+        if (!t.active)
+            return;
+        swallowClick.current = true;
+        setTimeout(() => {
+            swallowClick.current = false;
+        }, 50);
+        if (cancelled) {
+            setDrag(null);
+            return;
+        }
+        settle(t.offset, t.width);
+    };
+    const onClickCapture = (e) => {
+        if (swallowClick.current) {
+            swallowClick.current = false;
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        else if (isOpen) {
+            // A tap on an open row closes it instead of activating it.
+            e.preventDefault();
+            e.stopPropagation();
+            close();
+        }
+    };
+    const offset = drag ?? rest;
+    return {
+        root,
+        offset,
+        dragging: drag !== null,
+        isOpen,
+        openSide: side,
+        close,
+        surfaceProps: {
+            onPointerDown,
+            onPointerMove,
+            onPointerUp: (e) => finish(e, false),
+            onPointerCancel: (e) => finish(e, true),
+            onClickCapture,
+        },
+    };
+}
+/** The revealed buttons of one side. Inert unless that side is open. */
+export function SwipeTray({ side, actions, offset, active, onDone, }) {
+    const width = side === 'leading' ? Math.max(offset, 0) : Math.max(-offset, 0);
+    return (_jsx("div", { className: "ui-list-tray", "data-side": side, style: { width }, inert: !active || width === 0, "aria-hidden": !active || undefined, children: actions.map((a, i) => (_jsxs("button", { type: "button", className: "ui-list-action", "data-tone": a.tone ?? 'neutral', onClick: () => {
+                onDone();
+                a.onAction();
+            }, children: [a.icon != null && _jsx("span", { "aria-hidden": true, children: a.icon }), _jsx("span", { className: "ui-list-action-label", children: a.label })] }, i))) }));
+}
+/** The same actions as a visible menu button; the way in when the gesture is not offered. */
+export function OverflowMenu({ label, actions, hidden, }) {
+    return (_jsxs(ThemedDropdownMenu.Root, { children: [_jsx(ThemedDropdownMenu.Trigger, { children: _jsx("button", { type: "button", className: "ui-list-more", "data-hidden": hidden || undefined, "aria-label": label, children: _jsx(DotsHorizontalIcon, { "aria-hidden": true }) }) }), _jsx(ThemedDropdownMenu.Content, { size: "1", children: actions.map((a, i) => (_jsxs(Fragment, { children: [a.tone === 'danger' && i > 0 && actions[i - 1].tone !== 'danger' ? (_jsx(ThemedDropdownMenu.Separator, {})) : null, _jsx(ThemedDropdownMenu.Item, { color: a.tone === 'danger' ? 'red' : undefined, onSelect: () => a.onAction(), children: a.label })] }, i))) })] }));
+}

package/dist/atoms/NavBar/BackButton.d.ts

@@ -0,0 +1,10 @@
+import type { ButtonHTMLAttributes } from 'react';
+export interface BackButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** Visible text beside the chevron (the previous page's title, usually). */
+    label?: string;
+}
+/**
+ * A chevron with an optional label. The target is at least 44px square; with no `label` the
+ * accessible name comes from `UiStrings.back`.
+ */
+export declare function BackButton({ label, className, type, ...rest }: BackButtonProps): import("react").JSX.Element;