panelui-web 0.6.0 → 0.8.0

package/dist/components/prompt/index.js

@@ -32,6 +32,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * and closes with its `open` prop, folding under the card, so a band can come
  * and go without the page jumping by more than its own height.
  *
+ * ## Modes
+ *
+ * A prompt that changes with what the app is doing names its states with
+ * `mode`, and each band says which of them it belongs to with its own
+ * `mode`. The bands that match open and the others fold, in one movement,
+ * so the card moves once, by the difference between them. A band's own
+ * `open` still wins over its mode.
+ *
  * ## Sending
  *
  * Enter sends and Shift+Enter starts a new line; Enter while a character is
@@ -120,8 +128,10 @@ const promptVariants = tv({
         submitRing: 'pointer-events-none absolute -inset-[3px] size-[calc(100%+6px)] text-primary transition-opacity duration-200',
         statusText: 'min-w-0 truncate bg-[linear-gradient(90deg,var(--muted-foreground)_35%,var(--foreground)_50%,var(--muted-foreground)_65%)] bg-[length:250%_100%] bg-clip-text text-transparent',
         statusSpinner: 'ms-auto size-4 animate-spin text-muted-foreground motion-reduce:animate-none',
+        // The strip folds like a band: its tuck under the card moves with it.
+        contextFold: 'mx-4 grid transition-[grid-template-rows,margin,opacity] duration-300 ease-[cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none',
         context: [
-            'relative mx-4 -mt-5 flex items-center gap-x-4 gap-y-1 rounded-b-[1rem] border bg-muted px-3.5 pb-2 pt-6.5 text-xs text-muted-foreground',
+            'relative flex items-center gap-x-4 gap-y-1 rounded-b-[1rem] border bg-muted px-3.5 pb-2 pt-6.5 text-xs text-muted-foreground',
             'flex-wrap [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-3.5',
         ],
         contextItem: 'inline-flex min-w-0 items-center gap-1.5 whitespace-nowrap',
@@ -209,7 +219,7 @@ function attach(file) {
         preview: file.type.startsWith('image/') ? URL.createObjectURL(file) : undefined,
     };
 }
-function PromptRoot({ value: controlledValue, defaultValue = '', onValueChange, onSubmit, status = 'idle', onStop, disabled = false, defaultFiles, accept, maxFiles, onReject, className, children, ...props }) {
+function PromptRoot({ value: controlledValue, defaultValue = '', onValueChange, onSubmit, status = 'idle', onStop, disabled = false, defaultFiles, accept, maxFiles, onReject, mode, className, children, ...props }) {
     const [internalValue, setInternalValue] = useState(defaultValue);
     const value = controlledValue ?? internalValue;
     const [attachments, setAttachments] = useState(() => (defaultFiles ?? []).map(attach));
@@ -274,6 +284,7 @@ function PromptRoot({ value: controlledValue, defaultValue = '', onValueChange,
         removeAttachment,
         openFileDialog,
         status,
+        mode,
         busy,
         disabled,
         empty,
@@ -287,12 +298,12 @@ function PromptRoot({ value: controlledValue, defaultValue = '', onValueChange,
         keyHandler,
         listbox,
         setListbox,
-    }), [value, setValue, attachments, addFiles, removeAttachment, openFileDialog, status, busy, disabled, empty, submit, stop, onStop, dragging, fieldId, listbox]);
+    }), [value, setValue, attachments, addFiles, removeAttachment, openFileDialog, status, mode, busy, disabled, empty, submit, stop, onStop, dragging, fieldId, listbox]);
     const send = (event) => {
         event.preventDefault();
         submit();
     };
-    return (_jsx(PromptStore.Provider, { value: context, children: _jsxs("form", { "data-slot": "prompt", "data-status": status, "aria-busy": busy || undefined, className: promptVariants().root({ className }), onSubmit: send, ...props, children: [children, _jsx("input", { ref: fileInput, type: "file", multiple: maxFiles !== 1, accept: accept, tabIndex: -1, "aria-hidden": "true", className: "hidden", onChange: (event) => {
+    return (_jsx(PromptStore.Provider, { value: context, children: _jsxs("form", { "data-slot": "prompt", "data-status": status, "data-mode": mode, "aria-busy": busy || undefined, className: promptVariants().root({ className }), onSubmit: send, ...props, children: [children, _jsx("input", { ref: fileInput, type: "file", multiple: maxFiles !== 1, accept: accept, tabIndex: -1, "aria-hidden": "true", className: "hidden", onChange: (event) => {
                         if (event.target.files)
                             addFiles(event.target.files);
                         // Cleared, so choosing the same file again still counts as a change.
@@ -311,9 +322,22 @@ function Band({ edge, open, slot, className, children, ...props }) {
     }, [open]);
     return (_jsx("div", { "data-slot": slot, "data-open": open ? '' : undefined, className: slots.band(), children: _jsx("div", { ref: clip, className: slots.bandClip(), children: _jsx("div", { className: slots.bandInner({ className }), ...props, children: children }) }) }));
 }
+/**
+ * Whether a band is open: its own `open` if given, else whether the
+ * prompt's mode is one of the band's, else what the band does by default.
+ */
+function useBandOpen(part, open, mode, fallback) {
+    const prompt = usePrompt(part);
+    if (open !== undefined)
+        return open;
+    if (mode !== undefined)
+        return prompt.mode !== undefined && (Array.isArray(mode) ? mode : [mode]).includes(prompt.mode);
+    return fallback(prompt);
+}
 /** A band above the field, for something to do before or while writing: connect an account, pick a project. */
-function PromptBanner({ open = true, ...props }) {
-    return _jsx(Band, { edge: "top", open: open, slot: "prompt-banner", ...props });
+function PromptBanner({ open, mode, ...props }) {
+    const shown = useBandOpen('Prompt.Banner', open, mode, () => true);
+    return _jsx(Band, { edge: "top", open: shown, slot: "prompt-banner", ...props });
 }
 PromptBanner.displayName = 'Prompt.Banner';
 /** The banner's button, at its end. */
@@ -340,17 +364,22 @@ function useShimmer(active) {
     return ref;
 }
 /** A band under the field saying what the answer is doing, with the words lit by a moving sweep. */
-function PromptStatus({ open, icon, spinner = true, children, ...props }) {
-    const prompt = usePrompt('Prompt.Status');
-    const shown = open ?? prompt.busy;
+function PromptStatus({ open, mode, icon, spinner = true, children, ...props }) {
+    const shown = useBandOpen('Prompt.Status', open, mode, (prompt) => prompt.busy);
     const slots = promptVariants();
     const text = useShimmer(shown);
     return (_jsxs(Band, { edge: "bottom", open: shown, slot: "prompt-status", role: "status", ...props, children: [icon, _jsx("span", { ref: text, className: slots.statusText(), children: children }), spinner ? (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", className: slots.statusSpinner(), children: _jsx("path", { d: "M21 12a9 9 0 1 1-6.22-8.56" }) })) : null] }));
 }
 PromptStatus.displayName = 'Prompt.Status';
 /** A strip under the field, inset from its edges, for where the message is going: a branch, a folder, a ticket. */
-function PromptContext({ className, ...props }) {
-    return _jsx("div", { "data-slot": "prompt-context", className: promptVariants().context({ className }), ...props });
+function PromptContext({ open, mode, className, ...props }) {
+    const shown = useBandOpen('Prompt.Context', open, mode, () => true);
+    const slots = promptVariants();
+    const clip = useRef(null);
+    useEffect(() => {
+        clip.current?.toggleAttribute('inert', !shown);
+    }, [shown]);
+    return (_jsx("div", { "data-slot": "prompt-context", "data-open": shown ? '' : undefined, className: slots.contextFold({ className: shown ? '-mt-5 grid-rows-[1fr] opacity-100' : 'mt-0 grid-rows-[0fr] opacity-0' }), children: _jsx("div", { ref: clip, className: "min-h-0 overflow-hidden", children: _jsx("div", { className: slots.context({ className }), ...props }) }) }));
 }
 PromptContext.displayName = 'Prompt.Context';
 /** One fact in the context strip, with an icon before it. */
@@ -567,7 +596,8 @@ function ProgressRing({ done, total }) {
  * fills as they are done, opening into the list. The list scrolls past
  * `maxHeight`, and keeps the task in progress in view.
  */
-function PromptTasks({ open = true, title, expanded, defaultExpanded = false, onExpandedChange, maxHeight = '10rem', className, children, ...props }) {
+function PromptTasks({ open, mode, title, expanded, defaultExpanded = false, onExpandedChange, maxHeight = '10rem', className, children, ...props }) {
+    const shown = useBandOpen('Prompt.Tasks', open, mode, () => true);
     const slots = promptVariants();
     const [inner, setInner] = useState(defaultExpanded);
     const isExpanded = expanded ?? inner;
@@ -593,7 +623,7 @@ function PromptTasks({ open = true, title, expanded, defaultExpanded = false, on
             setInner(!isExpanded);
         onExpandedChange?.(!isExpanded);
     };
-    return (_jsxs(Band, { edge: "top", open: open, slot: "prompt-tasks", className: ['flex-col items-stretch gap-0 px-0 pt-0.5', className].filter(Boolean).join(' '), ...props, children: [_jsxs("button", { type: "button", "aria-expanded": isExpanded, "aria-controls": listId, onClick: toggle, className: slots.tasksHeader(), children: [_jsx(ProgressRing, { done: done, total: tasks.length }), _jsx("span", { className: slots.tasksTitle(), children: title }), _jsxs("span", { className: slots.tasksCount(), children: [done, "/", tasks.length] }), _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: slots.tasksChevron({ className: isExpanded ? 'rotate-180' : undefined }), children: _jsx("path", { d: "m6 9 6 6 6-6" }) })] }), _jsx("div", { className: slots.tasksBody({ className: isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]' }), children: _jsx("div", { className: "min-h-0 overflow-hidden", children: _jsx("ol", { ref: list, id: listId, "aria-label": "Tasks", className: slots.tasksList(), style: { maxHeight }, children: children }) }) })] }));
+    return (_jsxs(Band, { edge: "top", open: shown, slot: "prompt-tasks", className: ['flex-col items-stretch gap-0 px-0 pt-0.5', className].filter(Boolean).join(' '), ...props, children: [_jsxs("button", { type: "button", "aria-expanded": isExpanded, "aria-controls": listId, onClick: toggle, className: slots.tasksHeader(), children: [_jsx(ProgressRing, { done: done, total: tasks.length }), _jsx("span", { className: slots.tasksTitle(), children: title }), _jsxs("span", { className: slots.tasksCount(), children: [done, "/", tasks.length] }), _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: slots.tasksChevron({ className: isExpanded ? 'rotate-180' : undefined }), children: _jsx("path", { d: "m6 9 6 6 6-6" }) })] }), _jsx("div", { className: slots.tasksBody({ className: isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]' }), children: _jsx("div", { className: "min-h-0 overflow-hidden", children: _jsx("ol", { ref: list, id: listId, "aria-label": "Tasks", className: slots.tasksList(), style: { maxHeight }, children: children }) }) })] }));
 }
 PromptTasks.displayName = 'Prompt.Tasks';
 /** One task in `Prompt.Tasks`. */

package/dist/components/sheet/index.d.ts

@@ -161,6 +161,50 @@ declare function SheetClose({ render, icon, children, ...props }: SheetCloseProp
 declare namespace SheetClose {
     var displayName: string;
 }
+export interface SheetSlidesProps extends Omit<ComponentProps<'div'>, 'onChange'> {
+    /**
+     * `true` makes it a deck: each slide fills the height, and a scroll
+     * glides to the next one. `false` makes it a numbered column of smaller
+     * slides that scrolls freely. Default `true`.
+     */
+    snap?: boolean;
+    /** The current slide, counted from 0, when the caller holds it. Setting it scrolls that slide into view. */
+    index?: number;
+    /** The slide to start on, when the caller does not hold it. Default `0`. */
+    defaultIndex?: number;
+    /**
+     * Called with the new index when the current slide changes: scrolled to
+     * in a deck, pressed in a column. In a column, passing it makes each
+     * slide a button.
+     */
+    onIndexChange?: (index: number) => void;
+    /** Show "3 / 8" under the current slide. Default: on in a deck. */
+    counter?: boolean;
+    /** The shape of a slide in a column, as a CSS aspect ratio. Default `16 / 9`. */
+    aspect?: string;
+}
+/**
+ * A column of rounded slides in place of `Sheet.Body`: a deck that moves one
+ * slide at a time, or with `snap={false}`, a numbered column to choose from.
+ */
+declare function SheetSlides({ snap, index, defaultIndex, onIndexChange, counter, aspect, className, style, children, 'aria-label': label, ...props }: SheetSlidesProps): import("react").JSX.Element;
+declare namespace SheetSlides {
+    var displayName: string;
+}
+export interface SheetSlideProps extends ComponentProps<'div'> {
+    /**
+     * What a screen reader calls it, after its place: "3 of 8, Harbour at
+     * dawn". An image's `alt` usually says it already.
+     */
+    label?: string;
+    /** Its shape in a column, overriding `Sheet.Slides`' `aspect`. */
+    aspect?: string;
+}
+/** One slide: a rounded frame that fills with an image, a video or anything drawn. */
+declare function SheetSlide({ label, aspect, className, style, children, ...props }: SheetSlideProps): import("react").JSX.Element;
+declare namespace SheetSlide {
+    var displayName: string;
+}
 export interface SheetStageProps extends ComponentProps<'div'> {
 }
 /**
@@ -183,5 +227,7 @@ export declare const Sheet: typeof SheetRoot & {
     Footer: typeof SheetFooter;
     Close: typeof SheetClose;
     Stage: typeof SheetStage;
+    Slides: typeof SheetSlides;
+    Slide: typeof SheetSlide;
 };
-export { SheetTrigger, SheetNext, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, };
+export { SheetTrigger, SheetNext, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, SheetSlides, SheetSlide, };

package/dist/components/sheet/index.js

@@ -45,10 +45,20 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  *
  * Every sheet follows a drag and leaves on a flick toward its own edge. The
  * grabber on a top or bottom sheet says so before anybody tries.
+ *
+ * ## Slides
+ *
+ * `Sheet.Slides` takes the place of the body with a column of rounded
+ * slides, for photos or a deck. By default it is a deck: each slide fills
+ * the sheet's height, a turn of the wheel or a swipe of the trackpad glides
+ * to the next slide, an arrow key moves one, and a counter under it says
+ * which. Without `snap` it is a numbered column of smaller slides that
+ * scrolls freely, the way a presentation's slide panel does, and pressing
+ * one chooses it.
  */
 import { Drawer } from '@base-ui/react/drawer';
 import { ScrollArea } from '@base-ui/react/scroll-area';
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { Children, createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import { tv } from 'tailwind-variants';
 /*
  * One curve for every movement: the sheet arriving, the one behind it stepping
@@ -120,6 +130,32 @@ const sheetVariants = tv({
         scrollbar: 'my-3 me-1 flex w-1.5 opacity-0 transition-opacity delay-300 data-hovering:opacity-100 data-hovering:delay-0 data-scrolling:opacity-100 data-scrolling:delay-0',
         thumb: 'relative flex-1 rounded-full bg-foreground/20',
         footer: 'flex shrink-0 flex-col gap-2 px-6 pt-3 pb-6',
+        /*
+         * Slides. As a deck the viewport is a size container, so a slide can be
+         * exactly its height less the padding, which is what lets one flick land
+         * on one slide. The minimum height is for a sheet that sizes itself to
+         * its content, where a deck would otherwise have no height to fill.
+         */
+        slides: 'relative flex min-h-0 flex-1 flex-col',
+        // Focus is shown on the current slide, not as a square round the scroller.
+        slidesViewport: 'group/slides min-h-0 flex-1 overscroll-contain outline-none',
+        slidesContent: 'flex flex-col gap-3 px-3',
+        // 20px is the sheet's 32 less the 12px it is set in by: one corner, two curves.
+        slide: [
+            'relative shrink-0 overflow-hidden rounded-[20px] bg-muted',
+            '[&>img]:size-full [&>img]:object-cover [&>video]:size-full [&>video]:object-cover',
+            // A hairline over the picture, so a photo keeps an edge on a sheet of its own colour.
+            "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:ring-1 after:ring-inset after:ring-foreground/[0.08] after:content-['']",
+            'group-focus-visible/slides:data-current:ring-2 group-focus-visible/slides:data-current:ring-ring',
+        ],
+        slideRow: 'grid grid-cols-[1.25rem_minmax(0,1fr)] items-start gap-2.5',
+        slideNumber: 'pt-1 text-end text-xs font-medium tabular-nums text-muted-foreground',
+        slideButton: [
+            'group/slide block w-full cursor-pointer rounded-[14px] text-start outline-none transition-shadow duration-150',
+            'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-popover',
+        ],
+        // No blur behind it: a filter over a scrolling picture repaints on every frame.
+        counter: 'pointer-events-none absolute inset-x-0 bottom-5 mx-auto w-fit rounded-full bg-black/60 px-2.5 py-1 text-xs font-medium tabular-nums text-white',
         /*
          * The page behind steps back by 3%, not more: enough to read as a layer
          * underneath, not so much that the page looks like it shrank. It keeps its
@@ -414,6 +450,217 @@ function SheetClose({ render, icon = false, children, ...props }) {
     return (_jsx(Drawer.Close, { render: render, ...props, children: content }));
 }
 SheetClose.displayName = 'Sheet.Close';
+const SlidesContext = createContext(null);
+/** The rounded frame of a slide: the slide itself in a deck, inside its row in a column. */
+const frameOf = (slide) => slide.querySelector('[data-slide-frame]') ?? slide;
+const SlideIndexContext = createContext(0);
+function reduceMotion() {
+    return typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+/**
+ * A column of rounded slides in place of `Sheet.Body`: a deck that moves one
+ * slide at a time, or with `snap={false}`, a numbered column to choose from.
+ */
+function SheetSlides({ snap = true, index, defaultIndex = 0, onIndexChange, counter, aspect = '16 / 9', className, style, children, 'aria-label': label = 'Slides', ...props }) {
+    const slots = sheetVariants();
+    const viewport = useRef(null);
+    const slides = Children.toArray(children);
+    const count = slides.length;
+    const [internal, setInternal] = useState(defaultIndex);
+    const current = Math.min(Math.max(index ?? internal, 0), Math.max(count - 1, 0));
+    const live = useRef({ current, onIndexChange, controlled: index !== undefined });
+    live.current = { current, onIndexChange, controlled: index !== undefined };
+    const slideAt = (at) => viewport.current?.querySelectorAll('[data-slot=sheet-slide]')[at] ?? null;
+    // Scrolls the slides alone. `scrollIntoView` would move every scroller
+    // above them too, the page included when a sheet is drawn inline.
+    const reveal = useCallback((at, smooth) => {
+        const root = viewport.current;
+        const slide = slideAt(at);
+        if (!root || !slide)
+            return;
+        const box = root.getBoundingClientRect();
+        const frame = frameOf(slide).getBoundingClientRect();
+        const above = frame.top - box.top;
+        const below = frame.bottom - box.bottom;
+        const by = snap ? above - (box.height - frame.height) / 2 : above < 0 ? above - 8 : below > 0 ? below + 8 : 0;
+        if (by === 0)
+            return;
+        const behavior = smooth && !reduceMotion() ? 'smooth' : 'auto';
+        if (!snap) {
+            root.scrollBy({ top: by, behavior });
+            return;
+        }
+        // A deck stops at every slide on the way, which is right for a hand
+        // and wrong for Home or End. Snapping is off for the length of a jump.
+        root.style.scrollSnapType = 'none';
+        root.scrollBy({ top: by, behavior });
+        let restored = false;
+        const restore = () => {
+            if (restored)
+                return;
+            restored = true;
+            root.style.scrollSnapType = '';
+        };
+        if (behavior === 'smooth' && 'onscrollend' in window) {
+            root.addEventListener('scrollend', restore, { once: true });
+            window.setTimeout(restore, 1200);
+        }
+        else {
+            requestAnimationFrame(restore);
+        }
+    }, [snap]);
+    // The slide last brought into view. One that became current by being
+    // scrolled to is already in view, and must not be scrolled to again: that
+    // would pull a deck back to it in the middle of a longer scroll.
+    const shown = useRef(null);
+    const settle = useCallback((next) => {
+        shown.current = next;
+        if (next === live.current.current)
+            return;
+        if (!live.current.controlled)
+            setInternal(next);
+        live.current.onIndexChange?.(next);
+    }, []);
+    // A deck's current slide is the one most in view.
+    useEffect(() => {
+        const root = viewport.current;
+        if (!snap || !root || typeof IntersectionObserver === 'undefined')
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting)
+                    settle(Number(entry.target.dataset.index));
+            }
+        }, { root, threshold: 0.6 });
+        root.querySelectorAll('[data-slot=sheet-slide]').forEach((slide) => observer.observe(slide));
+        return () => observer.disconnect();
+    }, [snap, count, settle]);
+    // Opens on the current slide, and follows `index` when it is set from outside.
+    useEffect(() => {
+        const first = shown.current === null;
+        if (!first && shown.current === current)
+            return;
+        shown.current = current;
+        if (first && current === 0)
+            return;
+        const box = viewport.current?.getBoundingClientRect();
+        const slide = slideAt(current);
+        const frame = slide ? frameOf(slide).getBoundingClientRect() : undefined;
+        const visible = box && frame && frame.top >= box.top - 1 && frame.bottom <= box.bottom + 1;
+        // A deck that scrolled there by itself is already on it.
+        if (!visible || (first && snap))
+            reveal(current, !first);
+    }, [current, reveal, snap]);
+    const go = (next) => {
+        const at = Math.min(Math.max(next, 0), count - 1);
+        if (snap)
+            reveal(at, true);
+        else {
+            settle(at);
+            reveal(at, true);
+            slideAt(at)?.querySelector('button')?.focus();
+        }
+    };
+    const goNow = useRef(go);
+    goNow.current = go;
+    /*
+     * A wheel or a trackpad turns a deck one slide per gesture. Left to the
+     * browser, a slow scroll drifts part of the way, eases off and springs
+     * back, and a fast one runs past several slides. Here a deliberate scroll
+     * glides to the next slide, and the rest of the same gesture, the
+     * trackpad's momentum included, is absorbed rather than fought. A touch
+     * screen keeps the browser's own snapping, which follows the finger.
+     */
+    useEffect(() => {
+        const root = viewport.current;
+        if (!snap || !root)
+            return;
+        let pending = 0;
+        let lastWheel = 0;
+        let lockedUntil = 0;
+        const onWheel = (event) => {
+            // Sideways scrolling and pinch-zoom are not turns.
+            if (event.ctrlKey || Math.abs(event.deltaX) > Math.abs(event.deltaY))
+                return;
+            event.preventDefault();
+            const now = performance.now();
+            const gap = now - lastWheel;
+            lastWheel = now;
+            if (now < lockedUntil) {
+                // Still the same gesture: keep it from turning a second slide.
+                lockedUntil = Math.max(lockedUntil, now + 140);
+                return;
+            }
+            if (gap > 200)
+                pending = 0;
+            pending += event.deltaMode === 1 ? event.deltaY * 16 : event.deltaY;
+            if (Math.abs(pending) < 24)
+                return;
+            const step = Math.sign(pending);
+            pending = 0;
+            lockedUntil = now + 500;
+            goNow.current(live.current.current + step);
+        };
+        root.addEventListener('wheel', onWheel, { passive: false });
+        return () => root.removeEventListener('wheel', onWheel);
+    }, [snap]);
+    const keys = (event) => {
+        const step = event.key === 'ArrowDown' || event.key === 'PageDown' || (event.key === ' ' && !event.shiftKey)
+            ? 1
+            : event.key === 'ArrowUp' || event.key === 'PageUp' || (event.key === ' ' && event.shiftKey)
+                ? -1
+                : 0;
+        if (step !== 0) {
+            event.preventDefault();
+            go(current + step);
+        }
+        else if (event.key === 'Home' || event.key === 'End') {
+            event.preventDefault();
+            go(event.key === 'Home' ? 0 : count - 1);
+        }
+    };
+    const context = useMemo(() => ({ snap, count, current, choose: settle, pressable: !snap && onIndexChange !== undefined }), [snap, count, current, settle, onIndexChange]);
+    return (_jsx(SlidesContext.Provider, { value: context, children: _jsxs(ScrollArea.Root, { "data-slot": "sheet-slides", "data-snap": snap ? '' : undefined, className: slots.slides({ className }), style: { ...style, ['--slide-aspect']: aspect }, ...props, children: [_jsx(ScrollArea.Viewport, { ref: viewport, tabIndex: 0, "aria-roledescription": "carousel", "aria-label": label, onKeyDown: keys, className: slots.slidesViewport({
+                        className: snap
+                            ? 'min-h-[min(60dvh,32rem)] snap-y snap-mandatory [container-type:size]'
+                            : undefined,
+                    }), children: _jsx(ScrollArea.Content, { className: slots.slidesContent({ className: snap ? 'py-1.5' : 'gap-2 pb-3 pt-1' }), children: slides.map((slide, at) => (_jsx(SlideIndexContext.Provider, { value: at, children: slide }, at))) }) }), _jsx(ScrollArea.Scrollbar, { orientation: "vertical", className: slots.scrollbar(), children: _jsx(ScrollArea.Thumb, { className: slots.thumb() }) }), (counter ?? snap) && count > 1 ? (_jsxs("div", { "data-slot": "sheet-slides-counter", "aria-hidden": "true", className: slots.counter(), children: [current + 1, " / ", count] })) : null] }) }));
+}
+SheetSlides.displayName = 'Sheet.Slides';
+/** One slide: a rounded frame that fills with an image, a video or anything drawn. */
+function SheetSlide({ label, aspect, className, style, children, ...props }) {
+    const slides = useContext(SlidesContext);
+    if (!slides)
+        throw new Error('Sheet.Slide must be used inside <Sheet.Slides>.');
+    const at = useContext(SlideIndexContext);
+    const slots = sheetVariants();
+    const place = `${at + 1} of ${slides.count}`;
+    const selected = at === slides.current;
+    const name = label ? `${place}, ${label}` : place;
+    const frameClass = slots.slide({
+        className: [
+            slides.snap
+                ? 'h-[calc(100cqh-0.75rem)] snap-center'
+                : // In a column a slide sits on the sheet's own colour, so it takes the
+                    // theme's border as a real edge, and a shadow to stand off the sheet.
+                    'aspect-(--slide-aspect) rounded-[14px] shadow-xs ring-1 ring-border transition-shadow duration-150 after:hidden',
+            !slides.snap && !selected && slides.pressable && 'group-hover/slide:ring-foreground/25',
+            // Chosen in a column: a ring in the info colour, the theme's colour for
+            // something switched on, clear of the slide's edge.
+            !slides.snap && selected && 'shadow-none ring-2 ring-[var(--info)] ring-offset-2 ring-offset-popover',
+            className,
+        ],
+    });
+    const frameStyle = aspect ? { ...style, aspectRatio: aspect } : style;
+    // In a deck the slide is the frame, so the observer that finds the current
+    // one has a box to watch.
+    if (slides.snap) {
+        return (_jsx("div", { "data-slot": "sheet-slide", "data-slide-frame": "", "data-index": at, "data-current": selected ? '' : undefined, role: "group", "aria-roledescription": "slide", "aria-label": name, className: frameClass, style: frameStyle, ...props, children: children }));
+    }
+    const frame = (_jsx("div", { "data-slide-frame": "", "data-current": selected ? '' : undefined, className: frameClass, style: frameStyle, children: children }));
+    return (_jsxs("div", { "data-slot": "sheet-slide", "data-index": at, "data-selected": selected ? '' : undefined, className: slots.slideRow(), ...props, children: [_jsx("span", { "aria-hidden": "true", className: slots.slideNumber({ className: selected ? 'text-[var(--info)]' : undefined }), children: at + 1 }), slides.pressable ? (_jsx("button", { type: "button", "aria-label": label ? name : `Slide ${place}`, "aria-current": selected ? 'true' : undefined, className: slots.slideButton(), onClick: () => slides.choose(at), children: frame })) : (_jsx("div", { role: "group", "aria-roledescription": "slide", "aria-label": name, children: frame }))] }));
+}
+SheetSlide.displayName = 'Sheet.Slide';
 /**
  * Wrap the app — or the part of the page a sheet belongs to — in this, and
  * the page steps back slightly while a sheet is open. Sheets opened anywhere
@@ -435,5 +682,7 @@ export const Sheet = Object.assign(SheetRoot, {
     Footer: SheetFooter,
     Close: SheetClose,
     Stage: SheetStage,
+    Slides: SheetSlides,
+    Slide: SheetSlide,
 });
-export { SheetTrigger, SheetNext, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, };
+export { SheetTrigger, SheetNext, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, SheetSlides, SheetSlide, };