panelui-web 0.4.0 → 0.6.0

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

@@ -0,0 +1,134 @@
+/**
+ * Select — a button that opens a list of options, one of which is chosen.
+ *
+ * ```tsx
+ * <Select items={plans} defaultValue="team">
+ *   <Select.Trigger>
+ *     <Select.Value placeholder="Pick a plan" />
+ *   </Select.Trigger>
+ *   <Select.Content>
+ *     {plans.map((plan) => (
+ *       <Select.Item key={plan.value} value={plan.value} description={plan.price}>
+ *         {plan.label}
+ *       </Select.Item>
+ *     ))}
+ *   </Select.Content>
+ * </Select>
+ * ```
+ *
+ * ## The list opens over the trigger
+ *
+ * Opened with a pointer, the list is placed so the chosen option sits exactly
+ * over the trigger, and the eye does not have to go looking for it. Where
+ * there is no room for that, or `alignItemWithTrigger` is false, it opens
+ * below. Opened from the keyboard, the arrow keys move through the options,
+ * typing jumps to one by its first letters, and Enter chooses.
+ *
+ * ## Labels
+ *
+ * Pass `items` to the root, as `{ value, label }` pairs, and `Select.Value`
+ * shows the chosen option's label rather than its value. Without `items`,
+ * give `Select.Value` a function that turns a value into what to show.
+ *
+ * ## Three triggers
+ *
+ * `default` is a field, for a form. `ghost` has no box until it is hovered,
+ * for a choice set into a toolbar or a line of text. `pill` is a rounded chip
+ * with an edge, for a choice that sits among other chips, such as the model
+ * in a prompt.
+ */
+import { Select as BaseSelect } from '@base-ui/react/select';
+import type { ComponentProps, ReactNode } from 'react';
+export type SelectProps<Value = string, Multiple extends boolean | undefined = false> = BaseSelect.Root.Props<Value, Multiple>;
+/** Holds the chosen value. Takes `value`/`onValueChange`, `defaultValue`, `items`, `name`, `disabled` and `multiple`. */
+declare function SelectRoot<Value = string, Multiple extends boolean | undefined = false>(props: SelectProps<Value, Multiple>): import("react").JSX.Element;
+declare namespace SelectRoot {
+    var displayName: string;
+}
+export interface SelectTriggerProps extends BaseSelect.Trigger.Props {
+    /** `default` is a field, `ghost` has no box until hovered, `pill` is a rounded chip. Default `default`. */
+    variant?: 'default' | 'ghost' | 'pill';
+    /** Its height and text size. Default `md`. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Replaces the chevron at the end. Pass `null` for none. */
+    icon?: ReactNode;
+    className?: string;
+}
+/** The button that opens the list. Put a `Select.Value` in it. */
+declare function SelectTrigger({ variant, size, icon, className, children, ...props }: SelectTriggerProps): import("react").JSX.Element;
+declare namespace SelectTrigger {
+    var displayName: string;
+}
+export interface SelectValueProps extends BaseSelect.Value.Props {
+    className?: string;
+}
+/** The chosen option's label, or `placeholder` while there is none. */
+declare function SelectValue({ className, ...props }: SelectValueProps): import("react").JSX.Element;
+declare namespace SelectValue {
+    var displayName: string;
+}
+export interface SelectContentProps extends BaseSelect.Popup.Props {
+    /** Which side of the trigger it opens on, when it is not placed over it. Default `bottom`. */
+    side?: BaseSelect.Positioner.Props['side'];
+    /** How it lines up with the trigger along that side. Default `start`. */
+    align?: BaseSelect.Positioner.Props['align'];
+    /** The gap between the trigger and the list, in pixels. Default `6`. */
+    sideOffset?: number;
+    /** Whether a pointer opens it with the chosen option over the trigger. Default `true`. */
+    alignItemWithTrigger?: boolean;
+    /** Where in the document the list is put. Default `document.body`. */
+    container?: BaseSelect.Portal.Props['container'];
+    className?: string;
+}
+/** The list of options, opened in a layer over the page. */
+declare function SelectContent({ side, align, sideOffset, alignItemWithTrigger, container, className, children, ...props }: SelectContentProps): import("react").JSX.Element;
+declare namespace SelectContent {
+    var displayName: string;
+}
+export interface SelectItemProps extends Omit<BaseSelect.Item.Props, 'children'> {
+    /** The option's label: what the trigger shows once it is chosen. */
+    children?: ReactNode;
+    /** A second, quieter line under the label. */
+    description?: ReactNode;
+    /** An icon before the label. */
+    icon?: ReactNode;
+    className?: string;
+}
+/** One option. A check marks the chosen one. */
+declare function SelectItem({ description, icon, className, children, ...props }: SelectItemProps): import("react").JSX.Element;
+declare namespace SelectItem {
+    var displayName: string;
+}
+export interface SelectGroupProps extends BaseSelect.Group.Props {
+    className?: string;
+}
+/** Options that belong together, under a `Select.GroupLabel`. */
+declare function SelectGroup({ className, ...props }: SelectGroupProps): import("react").JSX.Element;
+declare namespace SelectGroup {
+    var displayName: string;
+}
+export interface SelectGroupLabelProps extends BaseSelect.GroupLabel.Props {
+    className?: string;
+}
+/** The heading of a group. Screen readers announce the group by it. */
+declare function SelectGroupLabel({ className, ...props }: SelectGroupLabelProps): import("react").JSX.Element;
+declare namespace SelectGroupLabel {
+    var displayName: string;
+}
+export interface SelectSeparatorProps extends ComponentProps<'div'> {
+}
+/** A rule between groups of options. */
+declare function SelectSeparator({ className, ...props }: SelectSeparatorProps): import("react").JSX.Element;
+declare namespace SelectSeparator {
+    var displayName: string;
+}
+export declare const Select: typeof SelectRoot & {
+    Trigger: typeof SelectTrigger;
+    Value: typeof SelectValue;
+    Content: typeof SelectContent;
+    Item: typeof SelectItem;
+    Group: typeof SelectGroup;
+    GroupLabel: typeof SelectGroupLabel;
+    Separator: typeof SelectSeparator;
+};
+export { SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectGroupLabel, SelectSeparator };

package/dist/components/select/index.js

@@ -0,0 +1,164 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Select — a button that opens a list of options, one of which is chosen.
+ *
+ * ```tsx
+ * <Select items={plans} defaultValue="team">
+ *   <Select.Trigger>
+ *     <Select.Value placeholder="Pick a plan" />
+ *   </Select.Trigger>
+ *   <Select.Content>
+ *     {plans.map((plan) => (
+ *       <Select.Item key={plan.value} value={plan.value} description={plan.price}>
+ *         {plan.label}
+ *       </Select.Item>
+ *     ))}
+ *   </Select.Content>
+ * </Select>
+ * ```
+ *
+ * ## The list opens over the trigger
+ *
+ * Opened with a pointer, the list is placed so the chosen option sits exactly
+ * over the trigger, and the eye does not have to go looking for it. Where
+ * there is no room for that, or `alignItemWithTrigger` is false, it opens
+ * below. Opened from the keyboard, the arrow keys move through the options,
+ * typing jumps to one by its first letters, and Enter chooses.
+ *
+ * ## Labels
+ *
+ * Pass `items` to the root, as `{ value, label }` pairs, and `Select.Value`
+ * shows the chosen option's label rather than its value. Without `items`,
+ * give `Select.Value` a function that turns a value into what to show.
+ *
+ * ## Three triggers
+ *
+ * `default` is a field, for a form. `ghost` has no box until it is hovered,
+ * for a choice set into a toolbar or a line of text. `pill` is a rounded chip
+ * with an edge, for a choice that sits among other chips, such as the model
+ * in a prompt.
+ */
+import { Select as BaseSelect } from '@base-ui/react/select';
+import { tv } from 'tailwind-variants';
+const selectVariants = tv({
+    slots: {
+        trigger: [
+            'group/select-trigger inline-flex min-w-0 cursor-pointer select-none items-center justify-between gap-2 whitespace-nowrap text-foreground outline-none',
+            'transition-[background-color,border-color,box-shadow,color] duration-150',
+            'focus-visible:ring-[3px] focus-visible:ring-ring/30',
+            'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+            '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
+        ],
+        icon: 'flex text-muted-foreground transition-transform duration-200 group-data-popup-open/select-trigger:rotate-180 motion-reduce:transition-none',
+        value: 'flex min-w-0 flex-1 items-center gap-2 truncate text-start data-placeholder:text-muted-foreground/80',
+        positioner: 'z-50 outline-none',
+        popup: [
+            'min-w-(--anchor-width) origin-(--transform-origin) overflow-hidden rounded-xl border bg-popover text-popover-foreground shadow-lg outline-none',
+            'transition-[opacity,scale] duration-150 ease-out',
+            'data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0',
+            // Placed over the trigger, it only fades: growing from a point inside
+            // the list would look like it came from nowhere.
+            'data-[side=none]:data-starting-style:scale-100 data-[side=none]:data-ending-style:scale-100',
+            'motion-reduce:transition-none',
+        ],
+        list: 'max-h-(--available-height) scroll-py-1 overflow-y-auto p-1 [scrollbar-color:var(--border)_transparent] [scrollbar-width:thin]',
+        item: [
+            'flex cursor-default items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm outline-none select-none',
+            'data-highlighted:bg-accent data-highlighted:text-accent-foreground',
+            'data-disabled:pointer-events-none data-disabled:opacity-50',
+            'in-data-[side=none]:min-w-[calc(var(--anchor-width)+0.5rem)]',
+            '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
+        ],
+        itemIcon: 'flex size-4 shrink-0 items-center justify-center text-muted-foreground',
+        itemBody: 'flex min-w-0 flex-1 flex-col',
+        itemText: 'truncate',
+        itemDescription: 'truncate text-xs text-muted-foreground',
+        // The box is always there, so an option does not change width as it is chosen.
+        indicator: 'flex size-4 shrink-0 items-center justify-center text-foreground',
+        group: 'flex flex-col',
+        groupLabel: 'px-2 pb-1 pt-2 text-xs font-medium text-muted-foreground',
+        separator: 'mx-2 my-1 h-px bg-border',
+    },
+    variants: {
+        variant: {
+            default: {
+                trigger: 'rounded-lg border border-input bg-background shadow-xs hover:bg-accent/40 data-popup-open:border-ring dark:bg-input/30',
+            },
+            ghost: {
+                trigger: 'rounded-lg text-muted-foreground hover:bg-accent hover:text-foreground data-popup-open:bg-accent data-popup-open:text-foreground',
+            },
+            pill: {
+                trigger: 'rounded-full border bg-background shadow-xs hover:bg-accent data-popup-open:bg-accent dark:bg-input/30',
+            },
+        },
+        size: {
+            sm: { trigger: 'h-8 px-2.5 text-[0.8125rem]' },
+            md: { trigger: 'h-9 px-3 text-sm' },
+            lg: { trigger: 'h-11 px-3.5 text-[0.9375rem]' },
+        },
+    },
+    compoundVariants: [
+        // A field is as wide as its column; a ghost or a pill is as wide as its label.
+        { variant: 'default', className: { trigger: 'w-full' } },
+        { variant: 'ghost', size: 'sm', className: { trigger: 'px-2' } },
+    ],
+    defaultVariants: { variant: 'default', size: 'md' },
+});
+/** Holds the chosen value. Takes `value`/`onValueChange`, `defaultValue`, `items`, `name`, `disabled` and `multiple`. */
+function SelectRoot(props) {
+    return _jsx(BaseSelect.Root, { ...props });
+}
+SelectRoot.displayName = 'Select';
+function Chevron({ variant }) {
+    // A field shows both directions, since its list can open either way over it.
+    // A chip shows one, and turns over while its list is open.
+    return (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: variant === 'default' || variant === undefined ? _jsx("path", { d: "m7 15 5 5 5-5M7 9l5-5 5 5" }) : _jsx("path", { d: "m6 9 6 6 6-6" }) }));
+}
+/** The button that opens the list. Put a `Select.Value` in it. */
+function SelectTrigger({ variant, size, icon, className, children, ...props }) {
+    const slots = selectVariants({ variant, size });
+    return (_jsxs(BaseSelect.Trigger, { "data-slot": "select-trigger", className: slots.trigger({ className }), ...props, children: [children, icon === null ? null : (_jsx(BaseSelect.Icon, { "data-slot": "select-icon", className: slots.icon({ className: variant === 'default' || variant === undefined ? 'rotate-0!' : undefined }), children: icon ?? _jsx(Chevron, { variant: variant }) }))] }));
+}
+SelectTrigger.displayName = 'Select.Trigger';
+/** The chosen option's label, or `placeholder` while there is none. */
+function SelectValue({ className, ...props }) {
+    return _jsx(BaseSelect.Value, { "data-slot": "select-value", className: selectVariants().value({ className }), ...props });
+}
+SelectValue.displayName = 'Select.Value';
+/** The list of options, opened in a layer over the page. */
+function SelectContent({ side = 'bottom', align = 'start', sideOffset = 6, alignItemWithTrigger = true, container, className, children, ...props }) {
+    const slots = selectVariants();
+    return (_jsx(BaseSelect.Portal, { container: container, children: _jsx(BaseSelect.Positioner, { side: side, align: align, sideOffset: sideOffset, alignItemWithTrigger: alignItemWithTrigger, className: slots.positioner(), children: _jsx(BaseSelect.Popup, { "data-slot": "select-content", className: slots.popup({ className }), ...props, children: _jsx(BaseSelect.List, { className: slots.list(), children: children }) }) }) }));
+}
+SelectContent.displayName = 'Select.Content';
+/** One option. A check marks the chosen one. */
+function SelectItem({ description, icon, className, children, ...props }) {
+    const slots = selectVariants();
+    return (_jsxs(BaseSelect.Item, { "data-slot": "select-item", className: slots.item({ className }), ...props, children: [icon ? (_jsx("span", { "data-slot": "select-item-icon", "aria-hidden": "true", className: slots.itemIcon(), children: icon })) : null, _jsxs("span", { className: slots.itemBody(), children: [_jsx(BaseSelect.ItemText, { className: slots.itemText(), children: children }), description ? _jsx("span", { className: slots.itemDescription(), children: description }) : null] }), _jsx("span", { className: slots.indicator(), children: _jsx(BaseSelect.ItemIndicator, { className: "flex", children: _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M20 6 9 17l-5-5" }) }) }) })] }));
+}
+SelectItem.displayName = 'Select.Item';
+/** Options that belong together, under a `Select.GroupLabel`. */
+function SelectGroup({ className, ...props }) {
+    return _jsx(BaseSelect.Group, { "data-slot": "select-group", className: selectVariants().group({ className }), ...props });
+}
+SelectGroup.displayName = 'Select.Group';
+/** The heading of a group. Screen readers announce the group by it. */
+function SelectGroupLabel({ className, ...props }) {
+    return (_jsx(BaseSelect.GroupLabel, { "data-slot": "select-group-label", className: selectVariants().groupLabel({ className }), ...props }));
+}
+SelectGroupLabel.displayName = 'Select.GroupLabel';
+/** A rule between groups of options. */
+function SelectSeparator({ className, ...props }) {
+    return _jsx("div", { role: "separator", "data-slot": "select-separator", className: selectVariants().separator({ className }), ...props });
+}
+SelectSeparator.displayName = 'Select.Separator';
+export const Select = Object.assign(SelectRoot, {
+    Trigger: SelectTrigger,
+    Value: SelectValue,
+    Content: SelectContent,
+    Item: SelectItem,
+    Group: SelectGroup,
+    GroupLabel: SelectGroupLabel,
+    Separator: SelectSeparator,
+});
+export { SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectGroupLabel, SelectSeparator };

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

@@ -17,7 +17,7 @@ export interface SheetProps {
      */
     dismissible?: boolean;
 }
-declare function SheetRoot({ children, open, onOpenChange, defaultOpen, side, dismissible, }: SheetProps): import("react").JSX.Element;
+declare function SheetRoot(props: SheetProps): import("react").JSX.Element;
 declare namespace SheetRoot {
     var displayName: string;
 }
@@ -28,12 +28,50 @@ export interface SheetTriggerProps extends Omit<ComponentProps<'button'>, 'child
      * the click handler and the attributes that tie it to the sheet.
      */
     render?: ReactElement;
+    /**
+     * The `name` of a `Sheet.Next` to open instead of the sheet this trigger is
+     * in. Any button in a sheet can open the next one this way, wherever it sits.
+     */
+    to?: string;
+    /**
+     * Handed to the `Sheet.Next` that `to` names, as the argument of its
+     * children function. Use it to open one sheet for every row of a list.
+     */
+    payload?: unknown;
 }
-/** What opens the sheet. A plain button unless `render` supplies one. */
-declare function SheetTrigger({ render, children, ...props }: SheetTriggerProps): import("react").JSX.Element;
+/**
+ * What opens a sheet: its own, or with `to`, the `Sheet.Next` of that name.
+ * A plain button unless `render` supplies one.
+ */
+declare function SheetTrigger({ render, children, to, payload, ...props }: SheetTriggerProps): import("react").JSX.Element;
 declare namespace SheetTrigger {
     var displayName: string;
 }
+export interface SheetNextProps extends Omit<SheetContentProps, 'children' | 'inline'> {
+    /** What a `Sheet.Trigger` passes as `to` to open this sheet. Unique within one stack of sheets. */
+    name: string;
+    /**
+     * The sheet's parts. Pass a function to read the `payload` of the trigger
+     * that opened it; it is `undefined` when that trigger has none.
+     */
+    children?: ReactNode | ((payload: any) => ReactNode);
+    /** The edge it rises from. Default: the edge of the sheet it is declared in. */
+    side?: SheetSide;
+    /** Whether a click outside, a swipe or Escape closes it. Default true. */
+    dismissible?: boolean;
+    /** Called when it opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * A sheet opened from the one it is declared in, by any `Sheet.Trigger` whose
+ * `to` is its `name`. Put it anywhere inside the first sheet's content; it
+ * takes `Sheet.Content`'s props and draws its own content, so its children are
+ * the header, body and footer.
+ */
+declare function SheetNext({ name, children, side, dismissible, onOpenChange, ...content }: SheetNextProps): import("react").JSX.Element;
+declare namespace SheetNext {
+    var displayName: string;
+}
 export interface SheetContentProps extends Omit<ComponentProps<'div'>, 'children'> {
     children?: ReactNode;
     /**
@@ -136,6 +174,7 @@ declare namespace SheetStage {
 }
 export declare const Sheet: typeof SheetRoot & {
     Trigger: typeof SheetTrigger;
+    Next: typeof SheetNext;
     Content: typeof SheetContent;
     Header: typeof SheetHeader;
     Title: typeof SheetTitle;
@@ -145,4 +184,4 @@ export declare const Sheet: typeof SheetRoot & {
     Close: typeof SheetClose;
     Stage: typeof SheetStage;
 };
-export { SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, };
+export { SheetTrigger, SheetNext, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, };

package/dist/components/sheet/index.js

@@ -34,6 +34,13 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * still shows, and dimmed. Only the first sheet darkens the page, so two open
  * sheets do not stack two shades of black.
  *
+ * The next sheet is declared once, as `Sheet.Next` with a `name`, and opened
+ * by any `Sheet.Trigger to="name"` in the sheet: a row in the body, an icon in
+ * the header, a button in the footer. The trigger and the sheet it opens are
+ * apart in the markup because they are apart on the screen: a list of rows
+ * that each open a sheet should not have to wrap every row in one. A trigger
+ * can carry a `payload`, so one `Sheet.Next` serves every row of a list.
+ *
  * ## The hand decides
  *
  * Every sheet follows a drag and leaves on a flick toward its own edge. The
@@ -41,14 +48,14 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  */
 import { Drawer } from '@base-ui/react/drawer';
 import { ScrollArea } from '@base-ui/react/scroll-area';
-import { createContext, useContext, useMemo, } from 'react';
+import { 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
  * back, the page receding. A fast start that eases into place reads as weight,
  * where a symmetric ease reads as a slide show.
  */
-const MOVE = '[transition:transform_450ms_cubic-bezier(0.32,0.72,0,1),border-radius_450ms_cubic-bezier(0.32,0.72,0,1),margin_450ms_cubic-bezier(0.32,0.72,0,1)]';
+const MOVE = '[transition:transform_450ms_cubic-bezier(0.32,0.72,0,1),border-radius_450ms_cubic-bezier(0.32,0.72,0,1),margin_450ms_cubic-bezier(0.32,0.72,0,1),height_450ms_cubic-bezier(0.32,0.72,0,1)]';
 const sheetVariants = tv({
     slots: {
         backdrop: [
@@ -83,6 +90,17 @@ const sheetVariants = tv({
             "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-popover after:opacity-0 after:transition-opacity after:duration-[450ms] after:content-['']",
             'data-nested-drawer-open:after:opacity-50',
         ],
+        /*
+         * A top or bottom sheet behind another takes the front one's height, so
+         * the strip that shows past it is the same whichever of the two is taller.
+         * A taller sheet behind would otherwise stand above the stack, and a
+         * shorter one would vanish behind the front one entirely.
+         */
+        stacked: [
+            'data-nested-drawer-open:h-(--drawer-frontmost-height) data-nested-drawer-open:overflow-hidden',
+            // Lets the height animate to and from `auto` where the browser can.
+            '[interpolate-size:allow-keywords]',
+        ],
         grabber: [
             'pointer-events-none absolute inset-x-0 z-10 mx-auto flex h-6 w-24 justify-center',
             'before:h-[5px] before:w-9 before:rounded-full before:bg-muted-foreground/35',
@@ -206,6 +224,19 @@ const SWIPE = {
     left: 'left',
     right: 'right',
 };
+function createStack() {
+    const handles = new Map();
+    return {
+        handle(name) {
+            let handle = handles.get(name);
+            if (!handle) {
+                handle = Drawer.createHandle();
+                handles.set(name, handle);
+            }
+            return handle;
+        },
+    };
+}
 const SheetContext = createContext(null);
 function useSheet(part) {
     const context = useContext(SheetContext);
@@ -213,11 +244,54 @@ function useSheet(part) {
         throw new Error(`${part} must be used inside a <Sheet>.`);
     return context;
 }
-function SheetRoot({ children, open, onOpenChange, defaultOpen = false, side = 'bottom', dismissible = true, }) {
+function SheetRoot(props) {
+    return _jsx(SheetFrame, { ...props });
+}
+SheetRoot.displayName = 'Sheet';
+function SheetFrame({ children, open, onOpenChange, defaultOpen = false, side = 'bottom', dismissible = true, handle: drawerHandle, }) {
     // A sheet inside another sheet's content finds that sheet's context.
     const parent = useContext(SheetContext);
-    const context = useMemo(() => ({ side, nested: parent !== null && !parent.inline, inline: false, showClose: true }), [side, parent]);
-    return (_jsx(SheetContext.Provider, { value: context, children: _jsx(Drawer.Root, { open: open, defaultOpen: defaultOpen, swipeDirection: SWIPE[side], disablePointerDismissal: !dismissible, onOpenChange: (next, details) => {
+    const nested = parent !== null && !parent.inline;
+    const [ownStack] = useState(createStack);
+    const stack = nested && parent ? parent.stack : ownStack;
+    // Held here as well as by the primitive, so a sheet opened from this one
+    // can close it.
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const isOpen = open ?? internalOpen;
+    const setOpen = useCallback((next) => {
+        if (open === undefined)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [open, onOpenChange]);
+    // The sheets opened from this one, so a press on the page behind them all
+    // can close the whole stack. The primitive gives that press to no one
+    // while a second sheet is open.
+    const opened = useRef(new Set());
+    const live = useRef({ isOpen, setOpen });
+    live.current = { isOpen, setOpen };
+    const handle = useMemo(() => ({
+        isOpen: () => live.current.isOpen,
+        closeTree: () => {
+            opened.current.forEach((child) => child.closeTree());
+            if (live.current.isOpen)
+                live.current.setOpen(false);
+        },
+    }), []);
+    useEffect(() => (nested && parent ? parent.register(handle) : undefined), [nested, parent, handle]);
+    const context = useMemo(() => ({
+        side,
+        stack,
+        nested,
+        inline: false,
+        showClose: true,
+        register: (child) => {
+            opened.current.add(child);
+            return () => opened.current.delete(child);
+        },
+        closeTree: handle.closeTree,
+        hasOpenChild: () => [...opened.current].some((child) => child.isOpen()),
+    }), [side, stack, nested, handle]);
+    return (_jsx(SheetContext.Provider, { value: context, children: _jsx(Drawer.Root, { open: isOpen, handle: drawerHandle, swipeDirection: SWIPE[side], disablePointerDismissal: !dismissible, onOpenChange: (next, details) => {
                 // The primitive has a switch for a press outside and none for
                 // Escape or a swipe, so those are refused here.
                 if (!next &&
@@ -226,15 +300,44 @@ function SheetRoot({ children, open, onOpenChange, defaultOpen = false, side = '
                     details.reason !== 'imperative-action') {
                     return;
                 }
-                onOpenChange?.(next);
-            }, children: children }) }));
+                setOpen(next);
+            }, children: typeof children === 'function'
+                ? ({ payload }) => children(payload)
+                : children }) }));
 }
-SheetRoot.displayName = 'Sheet';
-/** What opens the sheet. A plain button unless `render` supplies one. */
-function SheetTrigger({ render, children, ...props }) {
+/**
+ * What opens a sheet: its own, or with `to`, the `Sheet.Next` of that name.
+ * A plain button unless `render` supplies one.
+ */
+function SheetTrigger({ render, children, to, payload, ...props }) {
+    const sheet = useContext(SheetContext);
+    if (to !== undefined) {
+        if (!sheet)
+            throw new Error('Sheet.Trigger with `to` must be used inside a <Sheet>.');
+        return (_jsx(Drawer.Trigger, { handle: sheet.stack.handle(to), payload: payload, render: render, ...props, children: children }));
+    }
     return (_jsx(Drawer.Trigger, { render: render, ...props, children: children }));
 }
 SheetTrigger.displayName = 'Sheet.Trigger';
+/**
+ * A sheet opened from the one it is declared in, by any `Sheet.Trigger` whose
+ * `to` is its `name`. Put it anywhere inside the first sheet's content; it
+ * takes `Sheet.Content`'s props and draws its own content, so its children are
+ * the header, body and footer.
+ */
+function SheetNext({ name, children, side, dismissible, onOpenChange, ...content }) {
+    const parent = useSheet('Sheet.Next');
+    return (_jsx(SheetFrame, { handle: parent.stack.handle(name), side: side ?? parent.side, dismissible: dismissible, onOpenChange: onOpenChange, children: (payload) => (_jsx(SheetContent, { ...content, children: typeof children === 'function' ? _jsx(NextParts, { render: children, payload: payload }) : children })) }));
+}
+SheetNext.displayName = 'Sheet.Next';
+/**
+ * Calls a `Sheet.Next` children function. As a component of its own it only
+ * runs once the sheet is open and its content mounted, which is when the
+ * trigger has handed over its payload.
+ */
+function NextParts({ render, payload }) {
+    return _jsx(_Fragment, { children: render(payload) });
+}
 /** The sheet itself, with the backdrop behind it. */
 function SheetContent({ children, detached = true, size = 'auto', showGrabber, showClose = true, blur = false, inline = false, className, ...props }) {
     const sheet = useSheet('Sheet.Content');
@@ -250,7 +353,12 @@ function SheetContent({ children, detached = true, size = 'auto', showGrabber, s
     if (inline) {
         return (_jsx(SheetContext.Provider, { value: context, children: _jsx("div", { className: slots.popup({ className: ['[transform:none]', className] }), ...props, children: inside }) }));
     }
-    return (_jsxs(Drawer.Portal, { children: [sheet.nested ? null : _jsx(Drawer.Backdrop, { className: slots.backdrop() }), _jsx(Drawer.Viewport, { className: slots.viewport(), children: _jsx(Drawer.Popup, { className: slots.popup({ className }), ...props, children: _jsx(SheetContext.Provider, { value: context, children: inside }) }) })] }));
+    return (_jsxs(Drawer.Portal, { children: [sheet.nested ? null : (_jsx(Drawer.Backdrop, { className: slots.backdrop(), 
+                // With a second sheet open, a press here is outside both, and closes both.
+                onClick: () => {
+                    if (sheet.hasOpenChild())
+                        sheet.closeTree();
+                } })), _jsx(Drawer.Viewport, { className: slots.viewport(), children: _jsx(Drawer.Popup, { className: slots.popup({ className: [vertical && slots.stacked(), className] }), ...props, children: _jsx(SheetContext.Provider, { value: context, children: inside }) }) })] }));
 }
 SheetContent.displayName = 'Sheet.Content';
 /**
@@ -318,6 +426,7 @@ function SheetStage({ className, children, ...props }) {
 SheetStage.displayName = 'Sheet.Stage';
 export const Sheet = Object.assign(SheetRoot, {
     Trigger: SheetTrigger,
+    Next: SheetNext,
     Content: SheetContent,
     Header: SheetHeader,
     Title: SheetTitle,
@@ -327,4 +436,4 @@ export const Sheet = Object.assign(SheetRoot, {
     Close: SheetClose,
     Stage: SheetStage,
 });
-export { SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, };
+export { SheetTrigger, SheetNext, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, };

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

@@ -0,0 +1,51 @@
+/**
+ * Switch — on or off, for a setting that takes effect the moment it changes.
+ *
+ * ```tsx
+ * <Switch label="Dark mode" defaultChecked />
+ *
+ * <Label>
+ *   <Label.Text>Email me a receipt</Label.Text>
+ *   <Label.Action><Switch /></Label.Action>
+ * </Label>
+ * ```
+ *
+ * ## It moves like a thing with weight
+ *
+ * The colour does not fade in. It sweeps along the track behind the thumb,
+ * so the track fills from the side the thumb left and reads as the thumb's
+ * doing. While it is pressed, the thumb stretches towards where it is going,
+ * so a press that has not yet let go already says which way it will flip.
+ *
+ * ## While a change is saved
+ *
+ * A setting saved to a server is not on until the server says so. `pending`
+ * puts a turning ring in the thumb and stops the switch being pressed again,
+ * so the switch can show the new state at once and still be honest that it
+ * has not landed yet.
+ */
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
+import type { CSSProperties } from 'react';
+export type SwitchSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SwitchColor = 'primary' | 'success' | 'info' | 'destructive';
+export interface SwitchProps extends Omit<BaseSwitch.Root.Props, 'className' | 'color'> {
+    /** Default `md`. */
+    size?: SwitchSize;
+    /** The colour it fills with when on. `primary` by default; pick another for what it means. */
+    color?: SwitchColor;
+    /**
+     * What a screen reader calls it, when there is no visible label tied to it.
+     * A `Label` wrapped round it, or pointing at its `id`, is better when there is room.
+     */
+    label?: string;
+    /** A change is being saved: a ring turns in the thumb, and it cannot be pressed again until it is done. */
+    pending?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/** A switch. Takes `checked`/`onCheckedChange` or `defaultChecked`, and `name` for a form. */
+declare function Switch({ size, color, label, pending, className, style, readOnly, ...props }: SwitchProps): import("react").JSX.Element;
+declare namespace Switch {
+    var displayName: string;
+}
+export { Switch };