@kennycorrea/ui 0.9.1 → 0.11.0

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;

package/dist/atoms/NavBar/BackButton.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUiStrings } from '../../strings.js';
+import { Icon } from '../Icon/index.js';
+/**
+ * A chevron with an optional label. The target is at least 44px square; with no `label` the
+ * accessible name comes from `UiStrings.back`.
+ */
+export function BackButton({ label, className, type = 'button', ...rest }) {
+    const strings = useUiStrings();
+    return (_jsxs("button", { type: type, "aria-label": label ? undefined : strings.back, className: ['ui-backbutton', className].filter(Boolean).join(' '), ...rest, children: [_jsx(Icon, { name: "collapse", className: "ui-backbutton__icon" }), label && _jsx("span", { className: "ui-backbutton__label", children: label })] }));
+}

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

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+export interface NavBarProps {
+    title: string;
+    /** Left slot: a `BackButton`, usually. */
+    leading?: ReactNode;
+    /** Right slot: icon buttons. */
+    trailing?: ReactNode;
+    /**
+     * A large left-aligned title in the content flow. It is the page's `h1`; once it has scrolled
+     * under the bar, a small centred copy fades in (that copy is `aria-hidden`).
+     * Without it the small title is the `h1`.
+     */
+    largeTitle?: boolean;
+    className?: string;
+}
+/**
+ * A sticky top bar for small screens. Render it as the first child of the scrolling content:
+ * the large title follows it in the flow. The bar is transparent at the top of the page and
+ * gains `--material-bar` and a hairline once content has moved beneath it. Scroll state comes
+ * from one IntersectionObserver, with no scroll listeners.
+ */
+export declare function NavBar({ title, leading, trailing, largeTitle, className }: NavBarProps): import("react").JSX.Element;

package/dist/atoms/NavBar/NavBar.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+/** Height of the bar proper, `--safe-top` excluded. Mirrored in tokens.css. */
+const BAR_HEIGHT = 44;
+/**
+ * A sticky top bar for small screens. Render it as the first child of the scrolling content:
+ * the large title follows it in the flow. The bar is transparent at the top of the page and
+ * gains `--material-bar` and a hairline once content has moved beneath it. Scroll state comes
+ * from one IntersectionObserver, with no scroll listeners.
+ */
+export function NavBar({ title, leading, trailing, largeTitle = false, className }) {
+    const [scrolled, setScrolled] = useState(false);
+    const target = useRef(null);
+    useEffect(() => {
+        const el = target.current;
+        if (!el || typeof IntersectionObserver === 'undefined')
+            return;
+        // With a large title, "scrolled" means it is gone beneath the bar; without one, that the
+        // page has moved at all (the sentinel is a zero-height element at the top of the flow).
+        const io = new IntersectionObserver(([entry]) => {
+            if (entry)
+                setScrolled(!entry.isIntersecting);
+        }, { rootMargin: largeTitle ? `-${BAR_HEIGHT}px 0px 0px 0px` : '0px' });
+        io.observe(el);
+        return () => io.disconnect();
+    }, [largeTitle]);
+    const root = ['ui-navbar', className].filter(Boolean).join(' ');
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { className: root, "data-scrolled": scrolled ? 'true' : 'false', "data-large": largeTitle ? 'true' : 'false', children: [_jsx("div", { className: "ui-navbar__side", children: leading }), largeTitle ? (_jsx("div", { className: "ui-navbar__title", "aria-hidden": "true", children: title })) : (_jsx("h1", { className: "ui-navbar__title", children: title })), _jsx("div", { className: "ui-navbar__side ui-navbar__side--trailing", children: trailing })] }), largeTitle ? (_jsx("div", { className: "ui-navbar__large", children: _jsx("h1", { ref: target, className: "ui-navbar__large-title", children: title }) })) : (_jsx("div", { ref: target, className: "ui-navbar__sentinel", "aria-hidden": "true" }))] }));
+}

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

@@ -0,0 +1,2 @@
+export * from './BackButton.js';
+export * from './NavBar.js';

package/dist/atoms/NavBar/index.js

@@ -0,0 +1,2 @@
+export * from './BackButton.js';
+export * from './NavBar.js';

package/dist/atoms/NotificationCard/NotificationCard.d.ts

@@ -0,0 +1,52 @@
+import { type ReactNode } from 'react';
+/** The viewport corner the card floats in. */
+export type NotificationCardPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+/** Why the card closed. `programmatic` is a controlled `open` turned false by the host. */
+export type NotificationCardDismissReason = 'close-button' | 'escape' | 'programmatic';
+export interface NotificationCardProps {
+    /** Viewport corner. Default `bottom-right`. */
+    position?: NotificationCardPosition;
+    /** Controlled visibility. */
+    open?: boolean;
+    /** Initial visibility when uncontrolled. Default `true`. */
+    defaultOpen?: boolean;
+    /** Called whenever the card asks to open or close. */
+    onOpenChange?: (open: boolean) => void;
+    /** Called once per close, with what closed it. */
+    onDismiss?: (reason: NotificationCardDismissReason) => void;
+    /** Optional leading media: an icon, an app logo. */
+    icon?: ReactNode;
+    /** Labels the section via `aria-labelledby`. */
+    title: ReactNode;
+    /** Wired up via `aria-describedby`. */
+    description?: ReactNode;
+    /** Collapsible body. When present the card shows a toggle for it. */
+    children?: ReactNode;
+    /** Footer row: buttons, links. */
+    actions?: ReactNode;
+    /** Controlled expansion of the body. */
+    expanded?: boolean;
+    /** Initial expansion when uncontrolled. Default `false`. */
+    defaultExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Toggle text while collapsed (otherwise the `expand` UI string). */
+    expandLabel?: string;
+    /** Toggle text while expanded (otherwise the `collapse` UI string). */
+    collapseLabel?: string;
+    /** Close button's accessible name (otherwise the `close` UI string). */
+    closeLabel?: string;
+    /** Portal target. Default: the nearest `<Theme>`, else rendered in place. */
+    container?: HTMLElement | null;
+    className?: string;
+}
+/**
+ * A persistent rich toast: floats in a viewport corner and stays until somebody closes it.
+ *
+ * Deliberately a labelled `section`, not `role="alert"` or a live region — it is the kind of
+ * card that is present on page load, and announcing it on every load would be noise. It is
+ * non-modal: no focus trap, and Escape closes it only while focus is inside it.
+ *
+ * It portals into the nearest `<Theme>` (wrapped in a nested `<Theme>`, which inherits the
+ * appearance) so dark mode reaches it; with no Theme above it, it renders in place.
+ */
+export declare function NotificationCard({ position, open: openProp, defaultOpen, onOpenChange, onDismiss, icon, title, description, children, actions, expanded: expandedProp, defaultExpanded, onExpandedChange, expandLabel, collapseLabel, closeLabel, container, className, }: NotificationCardProps): import("react").JSX.Element;

package/dist/atoms/NotificationCard/NotificationCard.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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';
+/** Longest the exit animation may take before the card unmounts anyway. */
+const EXIT_MS = 250;
+function useControllable(value, initial, onChange) {
+    const [inner, setInner] = useState(initial);
+    const controlled = value !== undefined;
+    const current = controlled ? value : inner;
+    const set = useCallback((next) => {
+        if (!controlled)
+            setInner(next);
+        onChange?.(next);
+    }, [controlled, onChange]);
+    return [current, set];
+}
+/**
+ * A persistent rich toast: floats in a viewport corner and stays until somebody closes it.
+ *
+ * Deliberately a labelled `section`, not `role="alert"` or a live region — it is the kind of
+ * card that is present on page load, and announcing it on every load would be noise. It is
+ * non-modal: no focus trap, and Escape closes it only while focus is inside it.
+ *
+ * It portals into the nearest `<Theme>` (wrapped in a nested `<Theme>`, which inherits the
+ * appearance) so dark mode reaches it; with no Theme above it, it renders in place.
+ */
+export function NotificationCard({ position = 'bottom-right', open: openProp, defaultOpen = true, onOpenChange, onDismiss, icon, title, description, children, actions, expanded: expandedProp, defaultExpanded = false, onExpandedChange, expandLabel, collapseLabel, closeLabel, container, className, }) {
+    const strings = useUiStrings();
+    const [open, setOpen] = useControllable(openProp, defaultOpen, onOpenChange);
+    const [expanded, setExpanded] = useControllable(expandedProp, defaultExpanded, onExpandedChange);
+    const { anchorRef, target, resolved } = useThemePortalTarget(container);
+    const id = useId();
+    const titleId = `${id}-title`;
+    const descId = `${id}-desc`;
+    const bodyId = `${id}-body`;
+    // Mounted while open and through the exit animation.
+    const [mounted, setMounted] = useState(open);
+    // What the card itself asked to close for; a close it did not ask for is the host's.
+    const reason = useRef(null);
+    const wasOpen = useRef(open);
+    const onDismissRef = useRef(onDismiss);
+    onDismissRef.current = onDismiss;
+    useEffect(() => {
+        const was = wasOpen.current;
+        wasOpen.current = open;
+        if (open) {
+            setMounted(true);
+            return;
+        }
+        if (!was)
+            return;
+        onDismissRef.current?.(reason.current ?? 'programmatic');
+        reason.current = null;
+        const t = setTimeout(() => setMounted(false), EXIT_MS);
+        return () => clearTimeout(t);
+    }, [open]);
+    const close = (why) => {
+        if (!open)
+            return;
+        reason.current = why;
+        setOpen(false);
+    };
+    const onKeyDown = (e) => {
+        if (e.key !== 'Escape')
+            return;
+        e.stopPropagation();
+        close('escape');
+    };
+    const anchor = _jsx("span", { ref: anchorRef, hidden: true, "data-notification-anchor": "" });
+    if (!mounted || !resolved)
+        return anchor;
+    return (_jsxs(_Fragment, { children: [anchor, _jsx(ThemePortal, { target: target, children: _jsxs("section", { "aria-labelledby": titleId, "aria-describedby": description ? descId : undefined, "data-state": open ? 'open' : 'closed', "data-position": position, onKeyDown: onKeyDown, onAnimationEnd: () => {
+                        if (!open)
+                            setMounted(false);
+                    }, className: cn('ui-notification-card', className), children: [_jsxs("div", { className: "ui-notification-card__header", children: [icon ? _jsx("div", { className: "ui-notification-card__icon", children: icon }) : null, _jsxs("div", { className: "ui-notification-card__text", children: [_jsx("h2", { id: titleId, className: "ui-notification-card__title", children: title }), description ? (_jsx("p", { id: descId, className: "ui-notification-card__description", children: description })) : null] }), _jsx("button", { type: "button", "aria-label": closeLabel ?? strings.close, onClick: () => close('close-button'), className: "ui-notification-card__close", 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" }) }) })] }), children ? (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", "aria-expanded": expanded, "aria-controls": bodyId, onClick: () => setExpanded(!expanded), className: "ui-notification-card__toggle", children: [expanded ? (collapseLabel ?? strings.collapse) : (expandLabel ?? strings.expand), _jsx("svg", { "aria-hidden": "true", width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: _jsx("path", { d: expanded ? 'M4 9.5l3.5-3.5 3.5 3.5' : 'M4 6l3.5 3.5L11 6', stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), _jsx("div", { id: bodyId, hidden: !expanded, className: "ui-notification-card__body", children: children })] })) : null, actions ? _jsx("div", { className: "ui-notification-card__actions", children: actions }) : null] }) })] }));
+}

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

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

package/dist/atoms/NotificationCard/index.js

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

package/dist/atoms/PullToRefresh/PullToRefresh.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+export interface PullToRefreshProps {
+    /** Called once the pull passes the threshold. The indicator is held until the promise settles. */
+    onRefresh: () => Promise<void>;
+    children?: ReactNode;
+    /**
+     * Which thing scrolls. `document` (default) watches the page and the wrapper is a plain block;
+     * `self` makes the wrapper the scroll container (give it a height via `className`).
+     */
+    scroller?: 'document' | 'self';
+    /** Pixels of (damped) pull that commit a refresh. Default 64. */
+    threshold?: number;
+    /** Most the content is pushed down. Default 112. */
+    maxPull?: number;
+    /** Turns the gesture off. */
+    disabled?: boolean;
+    /** Overrides the announced label (otherwise the `refreshing` UI string). */
+    label?: string;
+    className?: string;
+}
+/**
+ * Pull-to-refresh for touch screens.
+ *
+ * **A shortcut, never the only way**: the parent must still offer a visible refresh action,
+ * because the gesture is invisible, touch-only and unavailable to switch and keyboard users.
+ *
+ * Active only on coarse pointers, only when the scroller is at the very top when the touch
+ * begins, and only for a downward drag; otherwise the browser's own scroll is untouched.
+ * `onRefresh` should handle its own errors — a rejection just ends the wait.
+ */
+export declare function PullToRefresh({ onRefresh, children, scroller, threshold, maxPull, disabled, label, className, }: PullToRefreshProps): import("react").JSX.Element;