@kennycorrea/ui 0.9.1 → 0.11.0

package/dist/atoms/PullToRefresh/PullToRefresh.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useUiStrings } from '../../strings.js';
+import { cn } from '../../utils/cn.js';
+import { Spinner } from '../Spinner/index.js';
+/** A finger travels this many pixels for each pixel the content moves. */
+const RESISTANCE = 2;
+const query = (q) => typeof window.matchMedia === 'function' && window.matchMedia(q).matches;
+/**
+ * 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 function PullToRefresh({ onRefresh, children, scroller = 'document', threshold = 64, maxPull = 112, disabled = false, label, className, }) {
+    const strings = useUiStrings();
+    const rootRef = useRef(null);
+    const [pull, setPull] = useState(0);
+    const [dragging, setDragging] = useState(false);
+    const [refreshing, setRefreshing] = useState(false);
+    const busy = useRef(false);
+    const refresh = useRef(onRefresh);
+    refresh.current = onRefresh;
+    useEffect(() => {
+        const root = rootRef.current;
+        if (!root || disabled)
+            return;
+        let startY = 0;
+        let tracking = false;
+        let current = 0;
+        const atTop = () => (scroller === 'self' ? root.scrollTop <= 0 : window.scrollY <= 0);
+        const set = (v) => {
+            current = v;
+            setPull(v);
+        };
+        const start = (e) => {
+            tracking = false;
+            if (busy.current || e.touches.length !== 1)
+                return;
+            if (!query('(pointer: coarse)') || !atTop())
+                return;
+            startY = e.touches[0].clientY;
+            tracking = true;
+        };
+        const move = (e) => {
+            if (!tracking)
+                return;
+            const dy = e.touches[0].clientY - startY;
+            if (dy <= 0 || !atTop()) {
+                if (current > 0)
+                    set(0);
+                setDragging(false);
+                if (dy <= 0)
+                    tracking = false;
+                return;
+            }
+            if (e.cancelable)
+                e.preventDefault();
+            setDragging(true);
+            set(Math.min(maxPull, dy / RESISTANCE));
+        };
+        const end = async () => {
+            if (!tracking)
+                return;
+            tracking = false;
+            setDragging(false);
+            if (current < threshold)
+                return set(0);
+            busy.current = true;
+            setRefreshing(true);
+            set(threshold);
+            try {
+                await refresh.current();
+            }
+            catch {
+                // The caller owns error reporting; the gesture only ends the wait.
+            }
+            finally {
+                busy.current = false;
+                setRefreshing(false);
+                set(0);
+            }
+        };
+        const cancel = () => {
+            if (!tracking)
+                return;
+            tracking = false;
+            setDragging(false);
+            if (!busy.current)
+                set(0);
+        };
+        root.addEventListener('touchstart', start, { passive: true });
+        root.addEventListener('touchmove', move, { passive: false });
+        root.addEventListener('touchend', end);
+        root.addEventListener('touchcancel', cancel);
+        return () => {
+            root.removeEventListener('touchstart', start);
+            root.removeEventListener('touchmove', move);
+            root.removeEventListener('touchend', end);
+            root.removeEventListener('touchcancel', cancel);
+        };
+    }, [disabled, scroller, threshold, maxPull]);
+    const progress = Math.min(1, pull / threshold);
+    const name = label ?? strings.refreshing;
+    return (_jsxs("div", { ref: rootRef, "aria-busy": refreshing || undefined, className: cn('relative', scroller === 'self' && 'overflow-y-auto overscroll-y-contain', className), children: [_jsx("div", { className: "pointer-events-none absolute inset-x-0 top-0 flex items-center justify-center overflow-hidden", style: { height: pull, opacity: refreshing ? 1 : progress }, children: refreshing ? (_jsx(Spinner, { label: name })) : pull > 0 ? (_jsx("span", { "aria-hidden": "true", className: "size-5 rounded-full border-2 border-[var(--gray-8)] border-t-[var(--accent-9)] motion-reduce:rotate-0!", style: { transform: `rotate(${progress * 270}deg)` } })) : null }), _jsx("div", { className: cn(!dragging && 'transition-transform duration-200 ease-out motion-reduce:transition-none'), style: { transform: pull ? `translateY(${pull}px)` : undefined }, children: children })] }));
+}

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

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

package/dist/atoms/PullToRefresh/index.js

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

package/dist/atoms/ResponsiveDialog/ResponsiveDialog.d.ts

@@ -0,0 +1,13 @@
+import { type DialogProps } from '../Dialog/Dialog.js';
+import { type SheetDetent } from '../Sheet/Sheet.js';
+export interface ResponsiveDialogProps extends DialogProps {
+    /** The detent the sheet opens at below `md`. Default `fit`. */
+    sheetDetent?: SheetDetent;
+}
+/**
+ * The same props as {@link Dialog}, presented the way the screen asks: a centred dialog on a
+ * desktop, a bottom sheet on a phone. Both sit on Radix Dialog, so the role, the focus trap,
+ * Escape and the labelling are the same either way. Crossing the breakpoint while open remounts
+ * the content, which loses uncommitted state inside `children` — keep form state in the parent.
+ */
+export declare function ResponsiveDialog({ sheetDetent, ...props }: ResponsiveDialogProps): import("react").JSX.Element;

package/dist/atoms/ResponsiveDialog/ResponsiveDialog.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSyncExternalStore } from 'react';
+import { Dialog } from '../Dialog/Dialog.js';
+import { Sheet } from '../Sheet/Sheet.js';
+/** Tailwind's `md`. Below it the dialog becomes a bottom sheet. */
+const MD = '(min-width: 768px)';
+function subscribe(onChange) {
+    const query = window.matchMedia(MD);
+    query.addEventListener('change', onChange);
+    return () => query.removeEventListener('change', onChange);
+}
+/** A Dialog at `md` and up, a Sheet below. Without `matchMedia` (SSR) the Dialog. */
+function useIsMdUp() {
+    return useSyncExternalStore(subscribe, () => window.matchMedia(MD).matches, () => true);
+}
+/**
+ * The same props as {@link Dialog}, presented the way the screen asks: a centred dialog on a
+ * desktop, a bottom sheet on a phone. Both sit on Radix Dialog, so the role, the focus trap,
+ * Escape and the labelling are the same either way. Crossing the breakpoint while open remounts
+ * the content, which loses uncommitted state inside `children` — keep form state in the parent.
+ */
+export function ResponsiveDialog({ sheetDetent = 'fit', ...props }) {
+    const mdUp = useIsMdUp();
+    if (mdUp)
+        return _jsx(Dialog, { ...props });
+    return (_jsx(Sheet, { open: props.open, onOpenChange: props.onOpenChange, title: props.title, description: props.description, footer: props.footer, className: props.className, detent: sheetDetent, showCloseButton: true, children: props.children }));
+}

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

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

package/dist/atoms/ResponsiveDialog/index.js

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

package/dist/atoms/ScrollStrip/ScrollStrip.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'react';
+export type ScrollStripBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface ScrollStripProps extends HTMLAttributes<HTMLDivElement> {
+    /** From this breakpoint the strip stops scrolling and lays its children out as a grid. */
+    gridFrom?: ScrollStripBreakpoint;
+    /** Grid columns from `gridFrom`. */
+    columns?: number;
+    /** Width of each item while scrolling, so the next one peeks at the edge. Any CSS length. */
+    itemWidth?: string;
+}
+/**
+ * A horizontal scroll-snap row that becomes a grid at a breakpoint. Items snap to the start edge,
+ * the scroll padding equals the page gutter (`--page-gutter`, 16px unless the app sets it) so a
+ * snapped item lines up with the content above it, and the scrollbar is hidden. Items default to
+ * 78% of the strip so the next one shows. Use it for KPI rows and card carousels.
+ */
+export declare function ScrollStrip({ gridFrom, columns, itemWidth, className, style, ...props }: ScrollStripProps): import("react").JSX.Element;

package/dist/atoms/ScrollStrip/ScrollStrip.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../utils/cn.js';
+/**
+ * A horizontal scroll-snap row that becomes a grid at a breakpoint. Items snap to the start edge,
+ * the scroll padding equals the page gutter (`--page-gutter`, 16px unless the app sets it) so a
+ * snapped item lines up with the content above it, and the scrollbar is hidden. Items default to
+ * 78% of the strip so the next one shows. Use it for KPI rows and card carousels.
+ */
+export function ScrollStrip({ gridFrom = 'md', columns = 3, itemWidth, className, style, ...props }) {
+    return (_jsx("div", { className: cn('ui-strip', className), "data-grid-from": gridFrom, style: {
+            '--strip-cols': columns,
+            ...(itemWidth ? { '--strip-item': itemWidth } : null),
+            ...style,
+        }, ...props }));
+}

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

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

package/dist/atoms/ScrollStrip/index.js

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

package/dist/atoms/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+export interface SegmentedControlOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface SegmentedControlProps {
+    /** 2–5 options. */
+    options: SegmentedControlOption[];
+    value: string;
+    onValueChange?: (value: string) => void;
+    size?: 'sm' | 'md';
+    /** Stretch the track to its container; segments are always equal width. */
+    fullWidth?: boolean;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    className?: string;
+}
+/**
+ * A pill track with a sliding thumb: one choice from 2–5. Radio semantics with a roving tabindex —
+ * arrow keys move and select (wrapping, skipping disabled), Home/End jump to the ends.
+ */
+export declare function SegmentedControl({ options, value, onValueChange, size, fullWidth, className, ...aria }: SegmentedControlProps): import("react").JSX.Element;

package/dist/atoms/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+/**
+ * A pill track with a sliding thumb: one choice from 2–5. Radio semantics with a roving tabindex —
+ * arrow keys move and select (wrapping, skipping disabled), Home/End jump to the ends.
+ */
+export function SegmentedControl({ options, value, onValueChange, size = 'md', fullWidth = false, className, ...aria }) {
+    const refs = useRef([]);
+    const count = options.length;
+    const active = options.findIndex((o) => o.value === value);
+    const tabbable = active >= 0 && !options[active].disabled ? active : options.findIndex((o) => !o.disabled);
+    const select = (to) => {
+        refs.current[to]?.focus();
+        onValueChange?.(options[to].value);
+    };
+    const step = (from, dir) => {
+        let i = from;
+        for (let n = 0; n < count; n++) {
+            i = (i + dir + count) % count;
+            if (!options[i].disabled)
+                return select(i);
+        }
+    };
+    const onKeyDown = (e, i) => {
+        const enabled = options.map((o, k) => (o.disabled ? -1 : k)).filter((k) => k >= 0);
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown')
+            step(i, 1);
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp')
+            step(i, -1);
+        else if (e.key === 'Home')
+            select(enabled[0]);
+        else if (e.key === 'End')
+            select(enabled[enabled.length - 1]);
+        else
+            return;
+        e.preventDefault();
+    };
+    return (_jsxs("div", { role: "radiogroup", className: ['ui-segmented', className].filter(Boolean).join(' '), "data-size": size, "data-full": fullWidth ? 'true' : undefined, style: { '--seg-count': count, '--seg-index': Math.max(active, 0) }, ...aria, children: [active >= 0 && _jsx("span", { className: "ui-segmented__thumb", "aria-hidden": "true" }), options.map((o, i) => (_jsx("button", { ref: (el) => {
+                    refs.current[i] = el;
+                }, type: "button", role: "radio", "aria-checked": i === active, disabled: o.disabled, tabIndex: i === tabbable ? 0 : -1, className: "ui-segmented__item", onClick: () => onValueChange?.(o.value), onKeyDown: (e) => onKeyDown(e, i), children: o.label }, o.value)))] }));
+}

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

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

package/dist/atoms/SegmentedControl/index.js

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

package/dist/atoms/Select/Select.js

@@ -12,5 +12,5 @@ import { cn } from '../../utils/cn.js';
  */
 export const Select = forwardRef(function Select({ value, onValueChange, options, placeholder, invalid = false, disabled, required, id, name, className, ...props }, ref) {
     const strings = useUiStrings();
-    return (_jsxs(ThemedSelect.Root, { value: value, onValueChange: onValueChange, disabled: disabled, required: required, name: name, children: [_jsx(ThemedSelect.Trigger, { ref: ref, id: id, placeholder: placeholder ?? strings.select, color: invalid ? 'red' : undefined, "aria-invalid": invalid || undefined, className: cn('w-full', className), ...props }), _jsx(ThemedSelect.Content, { position: "popper", children: options.map((option) => (_jsx(ThemedSelect.Item, { value: option.value, children: option.label }, option.value))) })] }));
+    return (_jsxs(ThemedSelect.Root, { value: value, onValueChange: onValueChange, disabled: disabled, required: required, name: name, children: [_jsx(ThemedSelect.Trigger, { ref: ref, id: id, placeholder: placeholder ?? strings.select, color: invalid ? 'red' : undefined, "aria-invalid": invalid || undefined, className: cn('ui-select-trigger w-full', className), ...props }), _jsx(ThemedSelect.Content, { position: "popper", children: options.map((option) => (_jsx(ThemedSelect.Item, { value: option.value, children: option.label }, option.value))) })] }));
 });

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

@@ -0,0 +1,63 @@
+import { type ReactNode } from 'react';
+/**
+ * Resting heights of a sheet. `medium` is half the visible viewport, `large` nearly all of it, and
+ * `fit` is the content's own height, capped at 90% of the viewport.
+ */
+export type SheetDetent = 'medium' | 'large' | 'fit';
+export interface SheetProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Labels the sheet (`aria-labelledby`). */
+    title: ReactNode;
+    /** Optional, wired up via `aria-describedby`. */
+    description?: ReactNode;
+    /** The body. Scrolls inside the sheet; a drag down from its top moves the sheet instead. */
+    children?: ReactNode;
+    /** Action row pinned below the body, above the bottom safe area and above the keyboard. */
+    footer?: ReactNode;
+    /** Controlled resting detent. */
+    detent?: SheetDetent;
+    /** Initial detent when uncontrolled. Default `fit`. */
+    defaultDetent?: SheetDetent;
+    /** Called when a drag or the handle moves the sheet to another detent. */
+    onDetentChange?: (detent: SheetDetent) => void;
+    /**
+     * The detents the sheet may rest at, shortest first (`fit` < `medium` < `large`). Dragging up
+     * moves to the next, down to the previous, and down from the lowest dismisses. Default: just
+     * the current detent, so the sheet dismisses or springs back and never resizes.
+     */
+    detents?: SheetDetent[];
+    /**
+     * Scale and round the page behind while the sheet is at `large`, as iOS does. The page is
+     * everything beside the sheet inside the same Theme. Note that a transformed ancestor becomes
+     * the containing block of any `position: fixed` descendant, so fixed bars in the page scale too.
+     */
+    scaleBackground?: boolean;
+    /** Whether a drag down, Escape, the scrim or the close button may close it. Default `true`. */
+    dismissible?: boolean;
+    /** Render a close button in the header. Default `false`. */
+    showCloseButton?: boolean;
+    /** Overrides the close button's accessible name (otherwise the `close` UI string). */
+    closeLabel?: string;
+    /** Overrides the handle's accessible name when it raises the sheet (otherwise `expand`). */
+    expandLabel?: string;
+    /** Overrides the handle's accessible name when it lowers the sheet (otherwise `collapse`). */
+    collapseLabel?: string;
+    /** 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 rendered in place. */
+    container?: HTMLElement | null;
+}
+/**
+ * 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 declare function Sheet({ open, onOpenChange, title, description, children, footer, detent: detentProp, defaultDetent, onDetentChange, detents, scaleBackground, dismissible, showCloseButton, closeLabel, expandLabel, collapseLabel, maxWidthClassName, className, container, }: SheetProps): import("react").JSX.Element;

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';