@kennycorrea/ui 0.9.1 → 0.11.0

package/dist/atoms/ActionSheet/ActionSheet.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as AlertDialog from '@radix-ui/react-alert-dialog';
+import { Theme } from '@radix-ui/themes';
+import { useSyncExternalStore } from 'react';
+import { useUiStrings } from '../../strings.js';
+import { cn } from '../../utils/cn.js';
+import { useThemePortalTarget } from '../../utils/themePortal.js';
+/** Tailwind's `md`. At and above it the sheet becomes a small centred dialog. */
+const MD = '(min-width: 768px)';
+function subscribe(onChange) {
+    const query = window.matchMedia(MD);
+    query.addEventListener('change', onChange);
+    return () => query.removeEventListener('change', onChange);
+}
+function useIsMdUp() {
+    return useSyncExternalStore(subscribe, () => window.matchMedia(MD).matches, () => true);
+}
+const TONE = {
+    neutral: 'text-ink',
+    brand: 'text-brand-700',
+    danger: 'text-[var(--red-11)]',
+};
+/**
+ * A short list of actions to choose between, on Radix `AlertDialog`: below `md` anchored to the
+ * bottom as a grouped list with a separated Cancel; at `md` and up a small centred dialog.
+ *
+ * AlertDialog rather than Dialog because the user is being asked to decide — it cannot be
+ * dismissed by clicking outside, and focus lands on Cancel, so Enter never fires a destructive
+ * action by accident. Escape and Cancel both close it without running anything.
+ */
+export function ActionSheet({ open, onOpenChange, actions, title, message, cancelLabel, container, }) {
+    const strings = useUiStrings();
+    const mdUp = useIsMdUp();
+    const { anchorRef, target, resolved } = useThemePortalTarget(container);
+    const cancel = cancelLabel ?? strings.cancel;
+    const hasHeader = title != null || message != null;
+    const header = hasHeader ? (_jsxs("div", { className: "px-4 py-3 text-center", children: [title != null ? (_jsx(AlertDialog.Title, { className: "m-0 text-sm font-medium text-ink", children: title })) : (_jsx(AlertDialog.Title, { className: "sr-only", children: cancel })), message != null ? (_jsx(AlertDialog.Description, { className: "m-0 mt-0.5 text-sm text-ink-muted", children: message })) : null] })) : null;
+    const rows = actions.map((a) => (_jsxs(AlertDialog.Action, { onClick: a.onSelect, "data-tone": a.tone ?? 'neutral', className: cn('flex min-h-[var(--tap-min,44px)] w-full items-center justify-center gap-2 border-t border-hairline px-4 text-base', 'outline-none hover:bg-[var(--gray-a3)] focus-visible:bg-[var(--gray-a3)] active:bg-[var(--gray-a4)]', TONE[a.tone ?? 'neutral']), children: [a.icon ? _jsx("span", { "aria-hidden": "true", children: a.icon }) : null, a.label] }, a.label)));
+    const cancelButton = (_jsx(AlertDialog.Cancel, { className: cn('flex min-h-[var(--tap-min,44px)] w-full items-center justify-center px-4 text-base font-medium text-ink', 'outline-none hover:bg-[var(--gray-a3)] focus-visible:bg-[var(--gray-a3)] active:bg-[var(--gray-a4)]'), children: cancel }));
+    const body = mdUp ? (_jsxs(AlertDialog.Content, { "data-presentation": "dialog", ...(message == null ? { 'aria-describedby': undefined } : {}), className: "ui-sheet-dialog fixed left-1/2 top-1/2 z-50 w-[calc(100%-2rem)] max-w-sm -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-2xl bg-sheet text-ink shadow-2xl outline-none ring-1 ring-hairline", children: [header, _jsx("div", { className: cn(!hasHeader && '[&>*:first-child]:border-t-0'), children: rows }), _jsx("div", { className: "border-t border-hairline", children: cancelButton })] })) : (_jsxs(AlertDialog.Content, { "data-presentation": "sheet", ...(message == null ? { 'aria-describedby': undefined } : {}), className: "ui-sheet fixed inset-x-0 bottom-0 z-50 mx-auto flex w-full max-w-lg flex-col gap-2 px-2 pb-[max(0.5rem,var(--safe-bottom,0px))] outline-none", children: [_jsxs("div", { className: "overflow-hidden rounded-xl bg-grouped", children: [header, _jsx("div", { className: cn(!hasHeader && '[&>*:first-child]:border-t-0'), children: rows })] }), _jsx("div", { className: "overflow-hidden rounded-xl bg-grouped", children: cancelButton })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("span", { ref: anchorRef, hidden: true }), resolved ? (_jsx(AlertDialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsx(AlertDialog.Portal, { container: target ?? undefined, children: _jsxs(Theme, { hasBackground: false, children: [_jsx(AlertDialog.Overlay, { className: "ui-sheet-scrim fixed inset-0 z-40 bg-scrim" }), body] }) }) })) : null] }));
+}

package/dist/atoms/ActionSheet/confirm.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+import { type ActionSheetTone } from './ActionSheet.js';
+export interface ConfirmOptions {
+    title: ReactNode;
+    message?: ReactNode;
+    /** The accept button. Default: the `confirm` UI string. */
+    confirmLabel?: string;
+    /** The dismiss button. Default: the `cancel` UI string. */
+    cancelLabel?: string;
+    /** `danger` for destructive confirmations. Default `neutral`. */
+    tone?: ActionSheetTone;
+}
+/**
+ * Asks and resolves `true` on accept, `false` on Cancel, Escape or any other dismissal.
+ * Never rejects.
+ *
+ *     if (await confirm({ title: 'Delete booking?', confirmLabel: 'Delete', tone: 'danger' })) …
+ */
+export declare function confirm(options: ConfirmOptions): Promise<boolean>;
+/** Renders the pending confirmation. Mount once, inside `<Theme>`, next to `<Toaster>`. */
+export declare function ConfirmProvider(): import("react").JSX.Element | null;

package/dist/atoms/ActionSheet/confirm.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSyncExternalStore } from 'react';
+import { useUiStrings } from '../../strings.js';
+import { ActionSheet } from './ActionSheet.js';
+/**
+ * A module-level queue, like `toast()`: `confirm()` can be called from any handler without
+ * threading a hook through. One `<ConfirmProvider>` per app; calls made while one is showing
+ * wait their turn rather than replacing it, so nobody's question is silently answered "no".
+ */
+let queue = [];
+const listeners = new Set();
+/** A fresh array per change, so `useSyncExternalStore` sees it. */
+let snapshot;
+function emit(next) {
+    queue = next;
+    snapshot = queue[0];
+    for (const l of listeners)
+        l();
+}
+function subscribe(l) {
+    listeners.add(l);
+    return () => listeners.delete(l);
+}
+/**
+ * Asks and resolves `true` on accept, `false` on Cancel, Escape or any other dismissal.
+ * Never rejects.
+ *
+ *     if (await confirm({ title: 'Delete booking?', confirmLabel: 'Delete', tone: 'danger' })) …
+ */
+export function confirm(options) {
+    return new Promise((resolve) => emit([...queue, { ...options, resolve }]));
+}
+/** Renders the pending confirmation. Mount once, inside `<Theme>`, next to `<Toaster>`. */
+export function ConfirmProvider() {
+    const current = useSyncExternalStore(subscribe, () => snapshot, () => undefined);
+    const strings = useUiStrings();
+    if (!current)
+        return null;
+    const settle = (ok) => {
+        if (queue[0] !== current)
+            return;
+        current.resolve(ok);
+        emit(queue.slice(1));
+    };
+    return (_jsx(ActionSheet, { open: true, onOpenChange: (open) => {
+            if (!open)
+                settle(false);
+        }, title: current.title, message: current.message, cancelLabel: current.cancelLabel, actions: [
+            {
+                label: current.confirmLabel ?? strings.confirm,
+                tone: current.tone,
+                onSelect: () => settle(true),
+            },
+        ] }, queue.length === 0 ? 'none' : String(queueId(current))));
+}
+const ids = new WeakMap();
+let nextId = 0;
+function queueId(p) {
+    let id = ids.get(p);
+    if (id === undefined) {
+        id = ++nextId;
+        ids.set(p, id);
+    }
+    return id;
+}

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

@@ -0,0 +1,2 @@
+export * from './ActionSheet.js';
+export * from './confirm.js';

package/dist/atoms/ActionSheet/index.js

@@ -0,0 +1,2 @@
+export * from './ActionSheet.js';
+export * from './confirm.js';

package/dist/atoms/Button/Button.js

@@ -18,8 +18,8 @@ const VARIANTS = {
     danger: { variant: 'solid', color: 'red' },
 };
 /** Themes sizes are 1–4; ours are the three a form actually needs. */
-const SIZES = { sm: '2', md: '3', lg: '4' };
-export const Button = forwardRef(function Button({ variant = 'primary', size = 'md', loading = false, fullWidth = false, asChild = false, href, className, disabled, children, ...props }, ref) {
+const SIZES = { sm: '2', md: '3', lg: '4', touch: '3' };
+export const Button = forwardRef(function Button({ variant = 'primary', size = 'md', loading = false, fullWidth = false, iconOnly = false, asChild = false, href, className, disabled, children, ...props }, ref) {
     const intent = VARIANTS[variant];
     // An anchor is `asChild` underneath, so everything below treats the two the same: neither a
     // link nor a slotted child may be given `loading` or `disabled`, because those are button
@@ -29,6 +29,6 @@ export const Button = forwardRef(function Button({ variant = 'primary', size = '
         // Themes renders its own spinner and keeps the label's width while it spins, so the
         // button does not jump. It does not disable the button, which is why `disabled` still
         // accounts for it.
-        loading: slotted ? undefined : loading, disabled: slotted ? undefined : disabled || loading, className: cn(fullWidth && 'w-full', className), ...props, children: href !== undefined ? _jsx("a", { href: href, children: children }) : children }));
+        loading: slotted ? undefined : loading, disabled: slotted ? undefined : disabled || loading, "data-variant": variant, "data-size": size, "data-icon-only": iconOnly || undefined, className: cn('ui-button', fullWidth && 'w-full', className), ...props, children: href !== undefined ? _jsx("a", { href: href, children: children }) : children }));
     return themed;
 });

package/dist/atoms/Button/Button.types.d.ts

@@ -12,7 +12,8 @@ import type { ComponentPropsWithoutRef, ReactNode } from 'react';
  * panel. So `secondary` means exactly one thing everywhere and the other look has its own name.
  */
 export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
-export type ButtonSize = 'sm' | 'md' | 'lg';
+/** `touch` is `md` type with a 44px minimum height, for primary actions on touch screens. */
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'touch';
 /**
  * Derived from Themes' own props rather than from `ButtonHTMLAttributes`.
  *
@@ -26,6 +27,11 @@ export interface ButtonProps extends Omit<ComponentPropsWithoutRef<typeof Themed
     /** Renders a spinner and disables the button. */
     loading?: boolean;
     fullWidth?: boolean;
+    /**
+     * The button holds only an icon. Its visual size is unchanged, but on coarse pointers the hit
+     * area grows to 44px with an invisible `::before`, so neighbours do not shrink.
+     */
+    iconOnly?: boolean;
     /** Renders the child element instead of a `button`, e.g. a router `Link`. */
     asChild?: boolean;
     /**

package/dist/atoms/Card/Card.d.ts

@@ -1,5 +1,19 @@
-import type { HTMLAttributes } from 'react';
-export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+import { type HTMLAttributes } from 'react';
+export type CardVariant = 'outlined' | 'grouped' | 'plain';
+export type CardDensity = 'comfortable' | 'compact';
+/** Radix Themes' breakpoints, in the order they apply. `initial` is the unconditional value. */
+export declare const CARD_BREAKPOINTS: readonly ["initial", "xs", "sm", "md", "lg", "xl"];
+export type CardBreakpoint = (typeof CARD_BREAKPOINTS)[number];
+/** A value, or one per breakpoint — Radix Themes' responsive prop convention. */
+export type Responsive<T> = T | Partial<Record<CardBreakpoint, T>>;
+interface CardStyleProps {
+    /** `outlined` is the bordered card; `grouped` a borderless rounded tile for tinted canvases;
+     * `plain` has no surface at all. Grouped and plain ignore `raised`. */
+    variant?: Responsive<CardVariant>;
+    /** `compact` tightens padding to the row spacing tokens and quietens the title. */
+    density?: Responsive<CardDensity>;
+}
+export interface CardProps extends HTMLAttributes<HTMLDivElement>, CardStyleProps {
     /** Lifts the card off the ground — for dialogs and anything that floats. */
     raised?: boolean;
 }
@@ -8,9 +22,16 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
  *
  * 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 declare function Card({ raised, className, ...props }: CardProps): import("react").JSX.Element;
-export declare function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
-export declare function CardTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>): import("react").JSX.Element;
-export declare function CardBody({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function Card({ raised, variant, density, className, ...props }: CardProps): import("react").JSX.Element;
+export interface CardPartProps extends HTMLAttributes<HTMLDivElement>, CardStyleProps {
+}
+export declare function CardHeader({ variant, density, className, ...props }: CardPartProps): import("react").JSX.Element;
+export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    density?: Responsive<CardDensity>;
+}
+export declare function CardTitle({ density, className, ...props }: CardTitleProps): import("react").JSX.Element;
+export declare function CardBody({ variant, density, className, ...props }: CardPartProps): import("react").JSX.Element;
+export {};

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

@@ -43,7 +43,7 @@ export interface DrawerProps {
     /** Caps the width on wider screens. Default `max-w-lg`; pass `max-w-none` for full width. */
     maxWidthClassName?: string;
     className?: string;
-    /** Where the portal mounts. Default: the nearest `<Theme>` (`.radix-themes`), else `document.body`. */
+    /** Where the portal mounts. Default: the nearest `<Theme>` (`.radix-themes`), else rendered in place. */
     container?: HTMLElement | null;
 }
 /**

package/dist/atoms/Drawer/Drawer.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState, } from 'react';
-import { createPortal } from 'react-dom';
+import { useCallback, useEffect, useId, useRef, useState, } from 'react';
 import { useUiStrings } from '../../strings.js';
 import { cn } from '../../utils/cn.js';
+import { ThemePortal, useThemePortalTarget } from '../../utils/themePortal.js';
 /** Pixels of travel that commit a drag regardless of speed. */
 const DISTANCE = 60;
 /** Pixels per millisecond that commit a flick regardless of distance. */
@@ -55,16 +55,12 @@ export function Drawer({ mode = 'modal', open: openProp, defaultOpen = true, onO
     }, [setOpen, onClose]);
     // Portal into the nearest <Theme> so the sheet inherits its appearance, accent and tokens;
     // a portal under <body> would sit outside `.radix-themes`, where none of them are defined.
-    const anchorRef = useRef(null);
-    const [themeRoot, setThemeRoot] = useState(null);
-    useLayoutEffect(() => {
-        setThemeRoot(anchorRef.current?.closest('.radix-themes') ?? document.body);
-    }, []);
-    const target = container ?? themeRoot;
+    // With no Theme above it the sheet renders in place rather than escaping to <body>.
+    const { anchorRef, target, resolved } = useThemePortalTarget(container);
     // Modal: everything else on the page goes inert, focus moves in, and comes back on close.
     useEffect(() => {
         // The wrapper only exists once the target is known, so wait for it.
-        if (!open || !modal || !target)
+        if (!open || !modal || !resolved)
             return;
         const wrapper = wrapperRef.current;
         const previous = document.activeElement;
@@ -87,7 +83,7 @@ export function Drawer({ mode = 'modal', open: openProp, defaultOpen = true, onO
                 el.removeAttribute('inert');
             previous?.focus?.();
         };
-    }, [open, modal, target]);
+    }, [open, modal, resolved]);
     useEffect(() => {
         if (!open || !modal || !dismissible)
             return;
@@ -189,13 +185,13 @@ export function Drawer({ mode = 'modal', open: openProp, defaultOpen = true, onO
     };
     // A hidden marker stays in the React tree's DOM position, so the portal can find its Theme.
     const anchor = _jsx("span", { ref: anchorRef, hidden: true, "data-drawer-anchor": "" });
-    if (!open || !target)
+    if (!open || !resolved)
         return anchor;
     const dragHandlers = {
         onPointerMove: move,
         onPointerUp: end,
         onPointerCancel: cancel,
     };
-    return (_jsxs(_Fragment, { children: [anchor, createPortal(_jsxs("div", { ref: wrapperRef, "data-drawer-root": "", children: [modal ? (_jsx("div", { "data-testid": "drawer-scrim", "aria-hidden": "true", className: "fixed inset-0 z-40 bg-scrim", onClick: dismissible ? close : undefined })) : null, _jsxs("div", { ref: sheetRef, role: modal ? 'dialog' : 'region', "aria-modal": modal ? true : undefined, "aria-labelledby": titleId, "aria-describedby": description ? descId : undefined, tabIndex: -1, "data-snap": snap, "data-mode": mode, onKeyDown: trapTab, style: { transform: `translateY(${Math.max(offset, -40)}px)` }, className: cn('fixed inset-x-0 bottom-0 z-50 mx-auto flex w-full flex-col', 'rounded-t-2xl border border-b-0 border-hairline bg-sheet text-ink shadow-2xl', 'pb-[env(safe-area-inset-bottom)] outline-none', !dragging &&
-                            'transition-transform duration-200 ease-out motion-reduce:transition-none', maxWidthClassName, className), children: [_jsxs("div", { className: "touch-none select-none px-5 pt-2", onPointerDown: (e) => begin(e, false), ...dragHandlers, children: [_jsx("button", { type: "button", "aria-expanded": expanded, "aria-controls": bodyId, "aria-label": expanded ? (collapseLabel ?? strings.collapse) : (expandLabel ?? strings.expand), onClick: onHandleClick, className: "mx-auto flex h-6 w-16 cursor-grab items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-brand-700 active:cursor-grabbing", children: _jsx("span", { "aria-hidden": "true", className: "h-1.5 w-10 rounded-full bg-hairline" }) }), _jsxs("div", { className: "flex items-start gap-3 pb-3 pt-1", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h2", { id: titleId, className: "m-0 text-base font-medium text-brand-900", children: title }), description ? (_jsx("p", { id: descId, className: "m-0 mt-1 text-sm text-ink-muted", children: description })) : null] }), showCloseButton && dismissible ? (_jsx("button", { type: "button", "aria-label": closeLabel ?? strings.close, onClick: close, className: "-mr-1 flex size-8 shrink-0 items-center justify-center rounded-full text-ink-muted hover:bg-brand-700/8 focus-visible:outline-2 focus-visible:outline-brand-700", children: _jsx("svg", { "aria-hidden": "true", width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: _jsx("path", { d: "M3.5 3.5l8 8m0-8l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })) : null] })] }), !expanded && peek ? _jsx("div", { className: "px-5 pb-4", children: peek }) : null, _jsx("div", { ref: bodyRef, id: bodyId, hidden: !expanded, className: "max-h-[80vh] overflow-y-auto overscroll-contain px-5 pb-4", onPointerDown: (e) => begin(e, true), ...dragHandlers, children: children }), footer ? (_jsx("div", { className: "flex justify-end gap-2 border-t border-hairline px-5 py-3", children: footer })) : null] })] }), target)] }));
+    return (_jsxs(_Fragment, { children: [anchor, _jsx(ThemePortal, { target: target, children: _jsxs("div", { ref: wrapperRef, "data-drawer-root": "", children: [modal ? (_jsx("div", { "data-testid": "drawer-scrim", "aria-hidden": "true", className: "fixed inset-0 z-40 bg-scrim", onClick: dismissible ? close : undefined })) : null, _jsxs("div", { ref: sheetRef, role: modal ? 'dialog' : 'region', "aria-modal": modal ? true : undefined, "aria-labelledby": titleId, "aria-describedby": description ? descId : undefined, tabIndex: -1, "data-snap": snap, "data-mode": mode, onKeyDown: trapTab, style: { transform: `translateY(${Math.max(offset, -40)}px)` }, className: cn('fixed inset-x-0 bottom-0 z-50 mx-auto flex w-full flex-col', 'rounded-t-2xl border border-b-0 border-hairline bg-sheet text-ink shadow-2xl', 'pb-[env(safe-area-inset-bottom)] outline-none', !dragging &&
+                                'transition-transform duration-200 ease-out motion-reduce:transition-none', maxWidthClassName, className), children: [_jsxs("div", { className: "touch-none select-none px-5 pt-2", onPointerDown: (e) => begin(e, false), ...dragHandlers, children: [_jsx("button", { type: "button", "aria-expanded": expanded, "aria-controls": bodyId, "aria-label": expanded ? (collapseLabel ?? strings.collapse) : (expandLabel ?? strings.expand), onClick: onHandleClick, className: "mx-auto flex h-6 w-16 cursor-grab items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-brand-700 active:cursor-grabbing", children: _jsx("span", { "aria-hidden": "true", className: "h-1.5 w-10 rounded-full bg-hairline" }) }), _jsxs("div", { className: "flex items-start gap-3 pb-3 pt-1", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h2", { id: titleId, className: "m-0 text-base font-medium text-brand-900", children: title }), description ? (_jsx("p", { id: descId, className: "m-0 mt-1 text-sm text-ink-muted", children: description })) : null] }), showCloseButton && dismissible ? (_jsx("button", { type: "button", "aria-label": closeLabel ?? strings.close, onClick: close, className: "-mr-1 flex size-8 shrink-0 items-center justify-center rounded-full text-ink-muted hover:bg-brand-700/8 focus-visible:outline-2 focus-visible:outline-brand-700", children: _jsx("svg", { "aria-hidden": "true", width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: _jsx("path", { d: "M3.5 3.5l8 8m0-8l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })) : null] })] }), !expanded && peek ? _jsx("div", { className: "px-5 pb-4", children: peek }) : null, _jsx("div", { ref: bodyRef, id: bodyId, hidden: !expanded, className: "max-h-[80vh] overflow-y-auto overscroll-contain px-5 pb-4", onPointerDown: (e) => begin(e, true), ...dragHandlers, children: children }), footer ? (_jsx("div", { className: "flex justify-end gap-2 border-t border-hairline px-5 py-3", children: footer })) : null] })] }) })] }));
 }

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;