@kennycorrea/ui 0.10.0 → 0.11.1

package/dist/atoms/Sheet/Sheet.js

@@ -0,0 +1,261 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { Theme } from '@radix-ui/themes';
+import { useCallback, useEffect, useRef, useState, } from 'react';
+import { useUiStrings } from '../../strings.js';
+import { cn } from '../../utils/cn.js';
+import { useThemePortalTarget } from '../../utils/themePortal.js';
+const RANK = { fit: 0, medium: 1, large: 2 };
+/** Share of the visible viewport each detent may take. */
+const SHARE = { fit: 0.9, medium: 0.5, large: 0.92 };
+/** Pixels per millisecond that commit a flick regardless of distance. */
+const VELOCITY = 0.5;
+/** Pixels of upward travel that commit a drag regardless of speed. */
+const RAISE_DISTANCE = 60;
+/** Fraction of the sheet's height a downward drag must cover to commit. */
+const LOWER_FRACTION = 0.25;
+function useControllable(value, initial, onChange) {
+    const [inner, setInner] = useState(initial);
+    const controlled = value !== undefined;
+    const set = useCallback((next) => {
+        if (!controlled)
+            setInner(next);
+        onChange?.(next);
+    }, [controlled, onChange]);
+    return [controlled ? value : inner, set];
+}
+/**
+ * The visible viewport: its height, and how far the on-screen keyboard covers the layout viewport.
+ *
+ * On Android Chrome the keyboard resizes the layout viewport, so `kb` stays 0 and the sheet's
+ * `bottom: 0` is already above it. On iOS Safari it only shrinks the *visual* viewport, which is
+ * where `innerHeight - height - offsetTop` comes from. Either way `height` is what is left.
+ */
+function useVisibleViewport(active, contentRef) {
+    const [vv, setVv] = useState(null);
+    useEffect(() => {
+        const viewport = window.visualViewport;
+        if (!active || !viewport)
+            return;
+        const read = () => {
+            const kb = Math.max(0, Math.round(window.innerHeight - viewport.height - viewport.offsetTop));
+            setVv({ height: Math.round(viewport.height), kb });
+            // Keep the focused field on screen once the layout has caught up with the keyboard.
+            const focused = document.activeElement;
+            if (focused && contentRef.current?.contains(focused) && focused !== contentRef.current) {
+                requestAnimationFrame(() => focused.scrollIntoView?.({ block: 'nearest' }));
+            }
+        };
+        read();
+        viewport.addEventListener('resize', read);
+        viewport.addEventListener('scroll', read);
+        return () => {
+            viewport.removeEventListener('resize', read);
+            viewport.removeEventListener('scroll', read);
+            setVv(null);
+        };
+    }, [active, contentRef]);
+    return vv;
+}
+/**
+ * A native-feeling bottom sheet on Radix Dialog.
+ *
+ * Radix owns what must not be reimplemented: the focus trap and its return on close, Escape,
+ * the scrim, `aria-modal`, and the page behind being hidden from assistive technology. This adds
+ * the sheet: a drag handle, detents, velocity-based dismissal, a body that scrolls until it is at
+ * its top and only then hands the gesture to the sheet, a footer that stays above the safe area
+ * and the keyboard, and an optional iOS-style scaled page behind the `large` detent.
+ *
+ * Like every floating atom here it portals into the nearest `<Theme>` rather than `<body>`.
+ */
+export function Sheet({ open, onOpenChange, title, description, children, footer, detent: detentProp, defaultDetent = 'fit', onDetentChange, detents, scaleBackground = false, dismissible = true, showCloseButton = false, closeLabel, expandLabel, collapseLabel, maxWidthClassName = 'max-w-lg', className, container, }) {
+    const strings = useUiStrings();
+    const [detent, setDetent] = useControllable(detentProp, defaultDetent, onDetentChange);
+    const [offset, setOffset] = useState(0);
+    const [dragging, setDragging] = useState(false);
+    const drag = useRef(null);
+    const suppressClick = useRef(false);
+    const contentRef = useRef(null);
+    const bodyRef = useRef(null);
+    const rootRef = useRef(null);
+    const { anchorRef, target, resolved } = useThemePortalTarget(container);
+    const vv = useVisibleViewport(open, contentRef);
+    const ladder = [...new Set([...(detents ?? []), detent])].sort((a, b) => RANK[a] - RANK[b]);
+    const index = ladder.indexOf(detent);
+    const higher = ladder[index + 1];
+    const lower = ladder[index - 1];
+    const requestClose = useCallback(() => onOpenChange(false), [onOpenChange]);
+    // The page behind scales while the sheet is at `large`; everything is put back on the way out.
+    const scaled = open && scaleBackground && detent === 'large';
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `resolved` is when the content first mounts.
+    useEffect(() => {
+        if (!scaled || !rootRef.current)
+            return;
+        // rootRef sits inside the nested Theme; its parent is the element the portal appended.
+        const mine = rootRef.current.parentElement;
+        const host = mine?.parentElement;
+        if (!mine || !host)
+            return;
+        const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+        const pages = Array.from(host.children).filter((el) => el instanceof HTMLElement && el !== mine && !el.hasAttribute('data-sheet-root'));
+        const saved = pages.map((el) => el.getAttribute('style'));
+        for (const el of pages) {
+            el.style.transformOrigin = 'top center';
+            el.style.transform = 'translateY(calc(var(--safe-top, 0px) + 8px)) scale(0.94)';
+            el.style.borderRadius = '12px';
+            el.style.overflow = 'hidden';
+            el.style.filter = 'brightness(0.85)';
+            if (!reduce)
+                el.style.transition = 'transform 250ms ease-out, filter 250ms ease-out';
+        }
+        return () => {
+            pages.forEach((el, i) => {
+                if (saved[i] === null)
+                    el.removeAttribute('style');
+                else
+                    el.setAttribute('style', saved[i]);
+            });
+        };
+    }, [scaled, resolved]);
+    // A body that is scrolled to its top and pulled down would normally start a native overscroll
+    // and cancel the pointer stream; cancelling the touch lets the sheet take the gesture instead.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `resolved` is when the body first mounts.
+    useEffect(() => {
+        const body = bodyRef.current;
+        if (!open || !body)
+            return;
+        let startY = 0;
+        const onStart = (e) => {
+            startY = e.touches[0]?.clientY ?? 0;
+        };
+        const onMove = (e) => {
+            const y = e.touches[0]?.clientY ?? 0;
+            if (e.cancelable && body.scrollTop <= 0 && y > startY)
+                e.preventDefault();
+        };
+        body.addEventListener('touchstart', onStart, { passive: true });
+        body.addEventListener('touchmove', onMove, { passive: false });
+        return () => {
+            body.removeEventListener('touchstart', onStart);
+            body.removeEventListener('touchmove', onMove);
+        };
+    }, [open, resolved]);
+    const begin = (e, fromBody) => {
+        if (e.button !== 0)
+            return;
+        if (fromBody && (bodyRef.current?.scrollTop ?? 0) > 0)
+            return;
+        drag.current = {
+            pointerId: e.pointerId,
+            startY: e.clientY,
+            lastY: e.clientY,
+            lastT: e.timeStamp,
+            velocity: 0,
+            moved: false,
+            fromBody,
+        };
+    };
+    const move = (e) => {
+        const d = drag.current;
+        if (!d || d.pointerId !== e.pointerId)
+            return;
+        const dy = e.clientY - d.startY;
+        if (!d.moved) {
+            if (Math.abs(dy) < 4)
+                return;
+            // Scrolling the content up is the content's business, not the sheet's.
+            if (d.fromBody && dy < 0) {
+                drag.current = null;
+                return;
+            }
+            d.moved = true;
+            setDragging(true);
+            e.currentTarget.setPointerCapture?.(e.pointerId);
+        }
+        // At least one frame, so two events in the same tick do not read as an infinite flick.
+        const dt = Math.max(16, e.timeStamp - d.lastT);
+        d.velocity = (e.clientY - d.lastY) / dt;
+        d.lastY = e.clientY;
+        d.lastT = e.timeStamp;
+        // Pulling up resists; pulling down past a sheet that cannot close resists too.
+        const resists = dy < 0 || (!lower && !dismissible);
+        setOffset(resists ? Math.max(dy / 4, -40) : dy);
+    };
+    const end = (e) => {
+        const d = drag.current;
+        if (!d || d.pointerId !== e.pointerId)
+            return;
+        drag.current = null;
+        if (!d.moved)
+            return;
+        suppressClick.current = true;
+        // The click that follows a drag is swallowed; if none arrives, do not eat the next real one.
+        setTimeout(() => {
+            suppressClick.current = false;
+        }, 0);
+        const dy = e.clientY - d.startY;
+        const height = contentRef.current?.getBoundingClientRect().height || 0;
+        const up = dy < -RAISE_DISTANCE || d.velocity < -VELOCITY;
+        const down = dy > height * LOWER_FRACTION || d.velocity > VELOCITY;
+        setDragging(false);
+        if (down && dy > 0 && lower) {
+            setOffset(0);
+            setDetent(lower);
+        }
+        else if (down && dy > 0 && dismissible) {
+            // Leave the offset where the finger let go: the exit animation starts from it.
+            requestClose();
+        }
+        else {
+            setOffset(0);
+            if (up && higher)
+                setDetent(higher);
+        }
+    };
+    const cancel = () => {
+        drag.current = null;
+        setDragging(false);
+        setOffset(0);
+    };
+    const onHandleClick = () => {
+        if (suppressClick.current) {
+            suppressClick.current = false;
+            return;
+        }
+        // Keyboard and pointer alike: raise until the top, then lower back down.
+        if (higher)
+            setDetent(higher);
+        else if (lower)
+            setDetent(lower);
+    };
+    const dragHandlers = { onPointerMove: move, onPointerUp: end, onPointerCancel: cancel };
+    const cycles = ladder.length > 1;
+    const raising = !!higher;
+    const keyboard = (vv?.kb ?? 0) > 0;
+    const viewport = vv ? `${vv.height}px` : '100dvh';
+    const style = {
+        '--sheet-vh': viewport,
+        '--sheet-drag': `${offset}px`,
+        bottom: vv?.kb ? `${vv.kb}px` : undefined,
+        height: detent === 'fit' ? undefined : `calc(var(--sheet-vh) * ${SHARE[detent]})`,
+        maxHeight: `calc(var(--sheet-vh) * ${SHARE[detent]})`,
+    };
+    const dismissGuard = dismissible
+        ? undefined
+        : (e) => {
+            e.preventDefault();
+        };
+    const content = (_jsxs("div", { ref: rootRef, "data-sheet-root": "", className: "contents", children: [_jsx(RadixDialog.Overlay, { "data-testid": "sheet-scrim", className: "ui-sheet-scrim fixed inset-0 z-40 bg-scrim" }), _jsxs(RadixDialog.Content, { ref: contentRef, "data-detent": detent, "data-dragging": dragging ? '' : undefined, ...(description ? {} : { 'aria-describedby': undefined }), onEscapeKeyDown: dismissGuard, onPointerDownOutside: dismissGuard, onInteractOutside: dismissGuard, 
+                // The sheet moves focus to its first control; for a sheet that is the handle or close
+                // button, which is correct, so Radix's default is kept.
+                style: style, className: cn('ui-sheet fixed inset-x-0 bottom-0 z-50 mx-auto flex w-full flex-col overflow-hidden', 'rounded-t-2xl border border-b-0 border-hairline bg-sheet text-ink shadow-2xl outline-none', maxWidthClassName, className), children: [_jsxs("div", { className: "touch-none select-none px-5 pt-2", onPointerDown: (e) => begin(e, false), ...dragHandlers, children: [cycles ? (_jsx("button", { type: "button", "aria-label": raising ? (expandLabel ?? strings.expand) : (collapseLabel ?? strings.collapse), 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" }) })) : (_jsx("div", { "aria-hidden": "true", className: "mx-auto flex h-6 w-16 items-center justify-center", children: _jsx("span", { 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(RadixDialog.Title, { className: "m-0 text-base font-medium text-brand-900", children: title }), description ? (_jsx(RadixDialog.Description, { className: "m-0 mt-1 text-sm text-ink-muted", children: description })) : null] }), showCloseButton && dismissible ? (_jsx(RadixDialog.Close, { "aria-label": closeLabel ?? strings.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] })] }), _jsx("div", { ref: bodyRef, "data-sheet-body": "", className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 pb-4", onPointerDown: (e) => begin(e, true), ...dragHandlers, children: children }), footer ? (_jsx("div", { "data-sheet-footer": "", className: "flex shrink-0 justify-end gap-2 border-t border-hairline px-5 pt-3", 
+                        // Over the keyboard there is no home indicator to clear, only a gap to leave.
+                        style: {
+                            paddingBottom: keyboard ? '0.75rem' : 'max(0.75rem, var(--safe-bottom, 0px))',
+                        }, children: footer })) : (_jsx("div", { "aria-hidden": "true", className: "shrink-0", style: { height: keyboard ? 0 : 'var(--safe-bottom, 0px)' } }))] })] }));
+    // A hidden marker keeps the component's DOM position so the portal can find its Theme.
+    const anchor = _jsx("span", { ref: anchorRef, hidden: true, "data-sheet-anchor": "" });
+    if (!resolved)
+        return anchor;
+    return (_jsxs(RadixDialog.Root, { open: open, onOpenChange: onOpenChange, children: [anchor, target ? (_jsx(RadixDialog.Portal, { container: target, children: _jsx(Theme, { hasBackground: false, children: content }) })) : (content)] }));
+}

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

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

package/dist/atoms/Sheet/index.js

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

package/dist/atoms/StatTile/StatTile.d.ts

@@ -0,0 +1,36 @@
+import type { AnchorHTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+import { type CardDensity, type CardVariant, type Responsive } from '../Card/index.js';
+export type StatTone = 'positive' | 'negative' | 'neutral';
+export type StatDirection = 'up' | 'down' | 'flat';
+export interface StatDelta {
+    /** The change as the reader should see it, already formatted: "+12%", "−€40". */
+    value: ReactNode;
+    /** Which way the number moved — picks the arrow. `flat` shows none. */
+    direction?: StatDirection;
+    /** Whether the move is good news. Independent of direction: fewer no-shows is down and positive. */
+    tone?: StatTone;
+    /** Spoken context for the change, e.g. "versus last month". Visually hidden. */
+    label?: string;
+}
+export interface StatTileProps {
+    label: ReactNode;
+    /** Already formatted; rendered with tabular numerals so a row of tiles lines up. */
+    value: ReactNode;
+    delta?: StatDelta;
+    /** A small chart, rendered under the value in a fixed-height slot. */
+    sparkline?: ReactNode;
+    /** Makes the tile a link, with a chevron. */
+    href?: string;
+    linkProps?: Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'className' | 'children'>;
+    /** Makes the tile a button (or, with `href`, also fires on the link), with a chevron. */
+    onClick?: MouseEventHandler<HTMLElement>;
+    variant?: Responsive<CardVariant>;
+    density?: Responsive<CardDensity>;
+    className?: string;
+}
+/**
+ * A compact KPI tile: label, value, optional delta and sparkline. Built on `Card`, so `variant`
+ * and `density` mean what they mean there. With `href` or `onClick` the whole tile is the target
+ * and a chevron says so.
+ */
+export declare function StatTile({ label, value, delta, sparkline, href, linkProps, onClick, variant, density, className, }: StatTileProps): import("react").JSX.Element;

package/dist/atoms/StatTile/StatTile.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ArrowDownIcon, ArrowUpIcon, ChevronRightIcon } from '@radix-ui/react-icons';
+import { cn } from '../../utils/cn.js';
+import { Card } from '../Card/index.js';
+const ARROWS = { up: ArrowUpIcon, down: ArrowDownIcon };
+/**
+ * A compact KPI tile: label, value, optional delta and sparkline. Built on `Card`, so `variant`
+ * and `density` mean what they mean there. With `href` or `onClick` the whole tile is the target
+ * and a chevron says so.
+ */
+export function StatTile({ label, value, delta, sparkline, href, linkProps, onClick, variant, density, className, }) {
+    const interactive = href !== undefined || onClick !== undefined;
+    const direction = delta?.direction ?? 'flat';
+    const Arrow = direction === 'flat' ? null : ARROWS[direction];
+    const body = (_jsxs(_Fragment, { children: [_jsx("span", { className: "ui-stat-label", children: label }), _jsxs("span", { className: "ui-stat-row", children: [_jsx("span", { className: "ui-stat-value", children: value }), delta && (_jsxs("span", { className: "ui-stat-delta", "data-tone": delta.tone ?? 'neutral', children: [Arrow && _jsx(Arrow, { "aria-hidden": true }), delta.value, delta.label && _jsxs("span", { className: "sr-only", children: [" ", delta.label] })] }))] }), sparkline && (_jsx("span", { className: "ui-stat-spark", "aria-hidden": true, children: sparkline })), interactive && _jsx(ChevronRightIcon, { className: "ui-stat-chevron", "aria-hidden": true })] }));
+    return (_jsx(Card, { variant: variant, density: density, className: cn('ui-stat-card', className), children: href !== undefined ? (_jsx("a", { ...linkProps, href: href, className: "ui-stat", "data-interactive": true, onClick: onClick, children: body })) : onClick ? (_jsx("button", { type: "button", className: "ui-stat", "data-interactive": true, onClick: onClick, children: body })) : (_jsx("div", { className: "ui-stat", children: body })) }));
+}

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

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

package/dist/atoms/StatTile/index.js

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

package/dist/atoms/TabBar/TabBar.d.ts

@@ -0,0 +1,42 @@
+import type { ReactElement, ReactNode } from 'react';
+export type TabBarBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** What a `render` function must spread onto the element it returns (a router link, say). */
+export interface TabBarItemRenderProps {
+    className: string;
+    'aria-current'?: 'page';
+    'aria-label'?: string;
+    'data-active': 'true' | 'false';
+    onClick: () => void;
+    children: ReactNode;
+}
+export interface TabBarItem {
+    value: string;
+    label: string;
+    icon: ReactNode;
+    /** Shown instead of `icon` while active (a filled glyph, usually). */
+    activeIcon?: ReactNode;
+    /** A number shows a count (99+ caps); `true` shows a dot. */
+    badge?: number | boolean;
+    /** Wrap a router link: spread the props onto the element you return. */
+    render?: (props: TabBarItemRenderProps) => ReactElement;
+}
+export interface TabBarProps {
+    items: TabBarItem[];
+    value: string;
+    onValueChange?: (value: string) => void;
+    /** Breakpoint (Radix Themes' scale) from which the bar is hidden. Default `md`. */
+    hideFrom?: TabBarBreakpoint;
+    'aria-label'?: string;
+    className?: string;
+}
+/**
+ * A fixed bottom navigation bar for small screens. 3–5 items; the active one is in the brand
+ * colour and carries `aria-current="page"`. Height is `--tabbar-height` (49px + `--safe-bottom`);
+ * render a {@link TabBarSpacer} (or pad by that variable) so content is not covered.
+ * Press feedback is `:active`; nothing depends on hover.
+ */
+export declare function TabBar({ items, value, onValueChange, hideFrom, className, 'aria-label': ariaLabel, }: TabBarProps): import("react").JSX.Element;
+/** Reserves the bar's height in the flow, hidden at the same breakpoint as the bar. */
+export declare function TabBarSpacer({ hideFrom }: {
+    hideFrom?: TabBarBreakpoint;
+}): import("react").JSX.Element;

package/dist/atoms/TabBar/TabBar.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function badgeText(badge) {
+    if (badge === undefined || badge === false || badge === 0)
+        return null;
+    if (badge === true)
+        return '';
+    return badge > 99 ? '99+' : String(badge);
+}
+/**
+ * A fixed bottom navigation bar for small screens. 3–5 items; the active one is in the brand
+ * colour and carries `aria-current="page"`. Height is `--tabbar-height` (49px + `--safe-bottom`);
+ * render a {@link TabBarSpacer} (or pad by that variable) so content is not covered.
+ * Press feedback is `:active`; nothing depends on hover.
+ */
+export function TabBar({ items, value, onValueChange, hideFrom = 'md', className, 'aria-label': ariaLabel, }) {
+    return (_jsx("nav", { className: ['ui-tabbar', className].filter(Boolean).join(' '), "data-hide-from": hideFrom, "aria-label": ariaLabel, children: items.map((item) => {
+            const active = item.value === value;
+            const text = badgeText(item.badge);
+            const children = (_jsxs(_Fragment, { children: [_jsxs("span", { className: "ui-tabbar__icon", "aria-hidden": "true", children: [active && item.activeIcon ? item.activeIcon : item.icon, text !== null && (_jsx("span", { className: "ui-tabbar__badge", "data-dot": text === '' ? 'true' : undefined, children: text }))] }), _jsx("span", { className: "ui-tabbar__label", children: item.label })] }));
+            const props = {
+                className: 'ui-tabbar__item',
+                'aria-current': active ? 'page' : undefined,
+                'aria-label': typeof item.badge === 'number' && item.badge > 0
+                    ? `${item.label}, ${item.badge}`
+                    : undefined,
+                'data-active': active ? 'true' : 'false',
+                onClick: () => onValueChange?.(item.value),
+                children,
+            };
+            return (_jsx("span", { className: "ui-tabbar__cell", children: item.render ? item.render(props) : _jsx("button", { type: "button", ...props }) }, item.value));
+        }) }));
+}
+/** Reserves the bar's height in the flow, hidden at the same breakpoint as the bar. */
+export function TabBarSpacer({ hideFrom = 'md' }) {
+    return _jsx("div", { className: "ui-tabbar-spacer", "data-hide-from": hideFrom, "aria-hidden": "true" });
+}

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

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

package/dist/atoms/TabBar/index.js

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

package/dist/atoms/Textarea/Textarea.d.ts

@@ -1,5 +1,9 @@
 import { TextArea } from '@radix-ui/themes';
 import { type ComponentPropsWithoutRef } from 'react';
+/**
+ * `inputMode` and `enterKeyHint` pass through to the `<textarea>`. On coarse pointers the text is
+ * never below 16px, or iOS zooms the page on focus.
+ */
 export interface TextareaProps extends Omit<ComponentPropsWithoutRef<typeof TextArea>, 'size' | 'color'> {
     invalid?: boolean;
 }

package/dist/atoms/Textarea/Textarea.js

@@ -3,5 +3,5 @@ import { TextArea } from '@radix-ui/themes';
 import { forwardRef } from 'react';
 import { cn } from '../../utils/cn.js';
 export const Textarea = forwardRef(function Textarea({ invalid = false, className, rows = 3, ...props }, ref) {
-    return (_jsx(TextArea, { ref: ref, rows: rows, size: "2", color: invalid ? 'red' : undefined, "aria-invalid": invalid || undefined, className: cn('w-full', className), ...props }));
+    return (_jsx(TextArea, { ref: ref, rows: rows, size: "2", color: invalid ? 'red' : undefined, "aria-invalid": invalid || undefined, className: cn('ui-textarea w-full', className), ...props }));
 });

package/dist/atoms/Toast/Toast.d.ts

@@ -44,7 +44,13 @@ export declare const toast: typeof show & {
 export interface ToasterProps {
     /** Milliseconds a toast stays when it was not given its own `duration`. */
     duration?: number;
-    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+    /**
+     * Distance from the anchored edge (top for `top-*`, bottom for `bottom-*`). A number is px; a
+     * string is any CSS length, so a toast can sit under a nav bar or above a tab bar:
+     * `offset="var(--navbar-height)"`, `offset="calc(var(--tabbar-height) + 8px)"`.
+     */
+    offset?: number | string;
     /** The landmark name screen readers announce, e.g. "Notificações ({hotkey})". */
     label?: string;
 }
@@ -55,5 +61,5 @@ export interface ToasterProps {
  * stack its live-region announcements, the F8 hotkey to reach it, pause-on-hover and swipe to
  * dismiss.
  */
-export declare function Toaster({ duration, position, label }: ToasterProps): import("react").JSX.Element;
+export declare function Toaster({ duration, position, offset, label, }: ToasterProps): import("react").JSX.Element;
 export {};

package/dist/atoms/Toast/Toast.js

@@ -68,6 +68,8 @@ const POSITIONS = {
     'top-left': 'top-0 left-0',
     'bottom-right': 'bottom-0 right-0 flex-col-reverse',
     'bottom-left': 'bottom-0 left-0 flex-col-reverse',
+    'top-center': 'top-0 left-1/2 -translate-x-1/2',
+    'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2 flex-col-reverse',
 };
 /**
  * Renders the stack. Mount once, inside `<Theme>` so the toasts take the app's palette.
@@ -76,10 +78,21 @@ const POSITIONS = {
  * stack its live-region announcements, the F8 hotkey to reach it, pause-on-hover and swipe to
  * dismiss.
  */
-export function Toaster({ duration = 5000, position = 'bottom-right', label }) {
+export function Toaster({ duration = 5000, position = 'bottom-right', offset, label, }) {
     const items = useSyncExternalStore(subscribe, () => records, () => records);
     const strings = useUiStrings();
-    const swipeDirection = position.endsWith('left') ? 'left' : 'right';
+    // Centred stacks dismiss vertically, towards the edge they are anchored to: that is the way a
+    // thumb flicks a banner away, and sideways would fight the browser's back-swipe.
+    const swipeDirection = position.endsWith('center')
+        ? position.startsWith('top')
+            ? 'up'
+            : 'down'
+        : position.endsWith('left')
+            ? 'left'
+            : 'right';
+    const vertical = swipeDirection === 'up' || swipeDirection === 'down';
+    const edge = position.startsWith('top') ? 'top' : 'bottom';
+    const edgeOffset = typeof offset === 'number' ? `${offset}px` : offset;
     return (_jsxs(RadixToast.Provider, { duration: duration, swipeDirection: swipeDirection, label: label, children: [items.map((item) => {
                 const { color, icon } = TYPES[item.type];
                 return (_jsxs(RadixToast.Root, { open: item.open, duration: item.duration, type: item.type === 'error' ? 'foreground' : 'background', onOpenChange: (open) => {
@@ -88,10 +101,12 @@ export function Toaster({ duration = 5000, position = 'bottom-right', label }) {
                     }, onAnimationEnd: () => {
                         if (!item.open)
                             remove(item.id);
-                    }, "data-accent-color": color, className: "ui-toast panel pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden py-3 pr-3 pl-4", children: [_jsx("span", { "aria-hidden": true, className: "absolute inset-y-0 left-0 w-1 bg-[var(--accent-9)]" }), _jsx(Icon, { name: icon, className: "mt-0.5 text-[var(--accent-11)]" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(RadixToast.Title, { className: "text-sm font-medium text-ink", children: item.title }), item.description ? (_jsx(RadixToast.Description, { className: "mt-0.5 text-sm text-ink-muted", children: item.description })) : null] }), item.action ? (_jsx(RadixToast.Action, { altText: item.action.label, onClick: (event) => {
+                    }, "data-accent-color": color, "data-swipe-axis": vertical ? 'y' : undefined, style: vertical
+                        ? { '--ui-toast-swipe-sign': swipeDirection === 'up' ? -1 : 1 }
+                        : undefined, className: "ui-toast panel pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden py-3 pr-3 pl-4", children: [_jsx("span", { "aria-hidden": true, className: "absolute inset-y-0 left-0 w-1 bg-[var(--accent-9)]" }), _jsx(Icon, { name: icon, className: "mt-0.5 text-[var(--accent-11)]" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(RadixToast.Title, { className: "text-sm font-medium text-ink", children: item.title }), item.description ? (_jsx(RadixToast.Description, { className: "mt-0.5 text-sm text-ink-muted", children: item.description })) : null] }), item.action ? (_jsx(RadixToast.Action, { altText: item.action.label, onClick: (event) => {
                                 item.action?.onClick();
                                 if (item.action?.keepOpen)
                                     event.preventDefault();
                             }, className: cn('shrink-0 rounded-md px-2 py-1 text-sm font-medium', 'text-[var(--accent-11)] hover:bg-[var(--accent-a3)]'), children: item.action.label })) : null, _jsx(RadixToast.Close, { "aria-label": strings.dismiss, className: "shrink-0 rounded-md p-1 text-ink-muted hover:bg-[var(--gray-a3)]", children: _jsx(Icon, { name: "close", className: "size-4" }) })] }, item.id));
-            }), _jsx(RadixToast.Viewport, { ref: warnMissingScales, className: cn('fixed z-50 m-0 flex w-full max-w-sm list-none flex-col gap-2 p-4 outline-none', POSITIONS[position]) })] }));
+            }), _jsx(RadixToast.Viewport, { ref: warnMissingScales, style: edgeOffset === undefined ? undefined : { [edge]: edgeOffset }, className: cn('fixed z-50 m-0 flex w-full max-w-sm list-none flex-col gap-2 p-4 outline-none', POSITIONS[position]) })] }));
 }

package/dist/atoms/index.d.ts

@@ -1,25 +1,36 @@
+export * from './ActionSheet/index.js';
 export * from './Alert/index.js';
 export * from './Avatar/index.js';
 export * from './Badge/index.js';
 export * from './Button/index.js';
 export * from './Card/index.js';
 export * from './Checkbox/index.js';
+export * from './ChipGroup/index.js';
 export * from './ContextMenu/index.js';
 export * from './Dialog/index.js';
 export * from './Drawer/index.js';
 export * from './Icon/index.js';
 export * from './Input/index.js';
 export * from './Label/index.js';
+export * from './List/index.js';
+export * from './NavBar/index.js';
 export * from './NotificationCard/index.js';
 export * from './Popover/index.js';
 export * from './Progress/index.js';
+export * from './PullToRefresh/index.js';
+export * from './ResponsiveDialog/index.js';
 export * from './RichText/index.js';
+export * from './ScrollStrip/index.js';
+export * from './SegmentedControl/index.js';
 export * from './Select/index.js';
 export * from './Separator/index.js';
+export * from './Sheet/index.js';
 export * from './Skeleton/index.js';
 export * from './Slider/index.js';
 export * from './Spinner/index.js';
+export * from './StatTile/index.js';
 export * from './Switch/index.js';
+export * from './TabBar/index.js';
 export * from './Textarea/index.js';
 export * from './Toast/index.js';
 export * from './Tooltip/index.js';

package/dist/atoms/index.js

@@ -1,25 +1,36 @@
+export * from './ActionSheet/index.js';
 export * from './Alert/index.js';
 export * from './Avatar/index.js';
 export * from './Badge/index.js';
 export * from './Button/index.js';
 export * from './Card/index.js';
 export * from './Checkbox/index.js';
+export * from './ChipGroup/index.js';
 export * from './ContextMenu/index.js';
 export * from './Dialog/index.js';
 export * from './Drawer/index.js';
 export * from './Icon/index.js';
 export * from './Input/index.js';
 export * from './Label/index.js';
+export * from './List/index.js';
+export * from './NavBar/index.js';
 export * from './NotificationCard/index.js';
 export * from './Popover/index.js';
 export * from './Progress/index.js';
+export * from './PullToRefresh/index.js';
+export * from './ResponsiveDialog/index.js';
 export * from './RichText/index.js';
+export * from './ScrollStrip/index.js';
+export * from './SegmentedControl/index.js';
 export * from './Select/index.js';
 export * from './Separator/index.js';
+export * from './Sheet/index.js';
 export * from './Skeleton/index.js';
 export * from './Slider/index.js';
 export * from './Spinner/index.js';
+export * from './StatTile/index.js';
 export * from './Switch/index.js';
+export * from './TabBar/index.js';
 export * from './Textarea/index.js';
 export * from './Toast/index.js';
 export * from './Tooltip/index.js';

package/dist/primitives/index.d.ts

@@ -6,4 +6,4 @@
  * reaches for a `Table` or `Tabs` through this package rather than importing Themes beside it
  * and drifting from the version the atoms were built against.
  */
-export { AccessibleIcon, AlertDialog, AspectRatio, Blockquote, Box, Callout, CheckboxCards, CheckboxGroup, Code, Container, DataList, DropdownMenu, Em, Flex, Grid, Heading, HoverCard, IconButton, Inset, Kbd, Link, Portal, Quote, Radio, RadioCards, RadioGroup, Reset, ScrollArea, Section, SegmentedControl, Slot, Slottable, Strong, Table, TabNav, Tabs, Text, TextField, Theme as ThemeRoot, ThemePanel, VisuallyHidden, } from '@radix-ui/themes';
+export { AccessibleIcon, AlertDialog, AspectRatio, Blockquote, Box, Callout, CheckboxCards, CheckboxGroup, Code, Container, DataList, DropdownMenu, Em, Flex, Grid, Heading, HoverCard, IconButton, Inset, Kbd, Link, Portal, Quote, Radio, RadioCards, RadioGroup, Reset, ScrollArea, Section, SegmentedControl as RadixSegmentedControl, Slot, Slottable, Strong, Table, TabNav, Tabs, Text, TextField, Theme as ThemeRoot, ThemePanel, VisuallyHidden, } from '@radix-ui/themes';

package/dist/primitives/index.js

@@ -6,4 +6,4 @@
  * reaches for a `Table` or `Tabs` through this package rather than importing Themes beside it
  * and drifting from the version the atoms were built against.
  */
-export { AccessibleIcon, AlertDialog, AspectRatio, Blockquote, Box, Callout, CheckboxCards, CheckboxGroup, Code, Container, DataList, DropdownMenu, Em, Flex, Grid, Heading, HoverCard, IconButton, Inset, Kbd, Link, Portal, Quote, Radio, RadioCards, RadioGroup, Reset, ScrollArea, Section, SegmentedControl, Slot, Slottable, Strong, Table, TabNav, Tabs, Text, TextField, Theme as ThemeRoot, ThemePanel, VisuallyHidden, } from '@radix-ui/themes';
+export { AccessibleIcon, AlertDialog, AspectRatio, Blockquote, Box, Callout, CheckboxCards, CheckboxGroup, Code, Container, DataList, DropdownMenu, Em, Flex, Grid, Heading, HoverCard, IconButton, Inset, Kbd, Link, Portal, Quote, Radio, RadioCards, RadioGroup, Reset, ScrollArea, Section, SegmentedControl as RadixSegmentedControl, Slot, Slottable, Strong, Table, TabNav, Tabs, Text, TextField, Theme as ThemeRoot, ThemePanel, VisuallyHidden, } from '@radix-ui/themes';

package/dist/strings.d.ts

@@ -34,6 +34,18 @@ export interface UiStrings {
     expand: string;
     /** Drawer handle / NotificationCard toggle, while expanded. */
     collapse: string;
+    /** ListRow: the accessible name of the overflow button holding a row's actions. */
+    moreActions: string;
+    /** ActionSheet's separated button, and confirm()'s dismiss button. */
+    cancel: string;
+    /** confirm()'s default accept button. */
+    confirm: string;
+    /** BackButton's accessible name when it has no visible label. */
+    back: string;
+    /** PullToRefresh: announced while a refresh is in progress. */
+    refreshing: string;
+    /** ScrollStrip: the accessible name of the scrollable region, when none is passed. */
+    scrollableRegion: string;
 }
 /**
  * Feeds the atoms their strings, once, near the root.

package/dist/strings.js

@@ -14,6 +14,12 @@ const DEFAULTS = {
     close: 'Close',
     expand: 'Expand',
     collapse: 'Collapse',
+    moreActions: 'More actions',
+    cancel: 'Cancel',
+    confirm: 'Confirm',
+    back: 'Back',
+    refreshing: 'Refreshing',
+    scrollableRegion: 'Scrollable content',
 };
 const StringsContext = createContext(DEFAULTS);
 /**