panelui-web 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,148 @@
+import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
+/** Where the sheet rises from, which is also the direction it leaves in. */
+export type SheetSide = 'bottom' | 'top' | 'left' | 'right';
+export interface SheetProps {
+    children?: ReactNode;
+    /** Whether the sheet is open, when the caller holds that. */
+    open?: boolean;
+    /** Called when the sheet asks to open or close. */
+    onOpenChange?: (open: boolean) => void;
+    /** Whether it starts open, when the caller does not hold it. */
+    defaultOpen?: boolean;
+    /** The edge it rises from and is swiped back to. Default `bottom`. */
+    side?: SheetSide;
+    /**
+     * Whether a click outside, a swipe or Escape closes it. Turn it off for a
+     * sheet that must be answered; `Sheet.Close` still works.
+     */
+    dismissible?: boolean;
+}
+declare function SheetRoot({ children, open, onOpenChange, defaultOpen, side, dismissible, }: SheetProps): import("react").JSX.Element;
+declare namespace SheetRoot {
+    var displayName: string;
+}
+export interface SheetTriggerProps extends Omit<ComponentProps<'button'>, 'children'> {
+    children?: ReactNode;
+    /**
+     * Your own element to be the trigger, such as a styled button. It is given
+     * the click handler and the attributes that tie it to the sheet.
+     */
+    render?: ReactElement;
+}
+/** What opens the sheet. A plain button unless `render` supplies one. */
+declare function SheetTrigger({ render, children, ...props }: SheetTriggerProps): import("react").JSX.Element;
+declare namespace SheetTrigger {
+    var displayName: string;
+}
+export interface SheetContentProps extends Omit<ComponentProps<'div'>, 'children'> {
+    children?: ReactNode;
+    /**
+     * Stand clear of the screen edges with every corner rounded. On by default;
+     * off, the sheet meets the edges it rises from.
+     */
+    detached?: boolean;
+    /**
+     * How tall a top or bottom sheet is. `auto` fits the content; `half` and
+     * `full` take that share of the screen, and `full` meets the edges.
+     */
+    size?: 'auto' | 'half' | 'full';
+    /** Show the grabber. On by default for a top or bottom sheet. */
+    showGrabber?: boolean;
+    /** Show the round close button in the top trailing corner. Default true. */
+    showClose?: boolean;
+    /** Frost the page behind the sheet instead of only dimming it. */
+    blur?: boolean;
+    /**
+     * Draw the sheet in the page instead of over it: no backdrop, no trigger,
+     * always there. For previews and for a layout that shows the sheet as part
+     * of a screen.
+     */
+    inline?: boolean;
+}
+/** The sheet itself, with the backdrop behind it. */
+declare function SheetContent({ children, detached, size, showGrabber, showClose, blur, inline, className, ...props }: SheetContentProps): import("react").JSX.Element;
+declare namespace SheetContent {
+    var displayName: string;
+}
+export interface SheetHeaderProps extends Omit<ComponentProps<'div'>, 'title'> {
+    /** The heading. In an open sheet it is also what the sheet is announced as. */
+    title?: ReactNode;
+    /** A line under the heading. */
+    description?: ReactNode;
+}
+/**
+ * The heading block. It leaves room for the close button beside the title,
+ * so the two share the top line instead of stacking.
+ */
+declare function SheetHeader({ title, description, className, children, ...props }: SheetHeaderProps): import("react").JSX.Element;
+declare namespace SheetHeader {
+    var displayName: string;
+}
+export interface SheetTitleProps extends ComponentProps<'h2'> {
+}
+/** The sheet's name, announced when it opens. */
+declare function SheetTitle({ className, ...props }: SheetTitleProps): import("react").JSX.Element;
+declare namespace SheetTitle {
+    var displayName: string;
+}
+export interface SheetDescriptionProps extends ComponentProps<'p'> {
+}
+/** A sentence under the title, read out after it. */
+declare function SheetDescription({ className, ...props }: SheetDescriptionProps): import("react").JSX.Element;
+declare namespace SheetDescription {
+    var displayName: string;
+}
+export interface SheetBodyProps extends ComponentProps<'div'> {
+}
+/**
+ * The part that scrolls. The header and footer stay put while it moves, and
+ * the scrollbar is a thin drawn thumb that shows while the content is moving.
+ */
+declare function SheetBody({ className, children, ...props }: SheetBodyProps): import("react").JSX.Element;
+declare namespace SheetBody {
+    var displayName: string;
+}
+export interface SheetFooterProps extends ComponentProps<'div'> {
+}
+/** The actions, stacked full width at the bottom of the sheet. */
+declare function SheetFooter({ className, ...props }: SheetFooterProps): import("react").JSX.Element;
+declare namespace SheetFooter {
+    var displayName: string;
+}
+export interface SheetCloseProps extends ComponentProps<'button'> {
+    /**
+     * Your own element to close the sheet with, such as a Cancel button.
+     * Without it, and without children, this is the round close button.
+     */
+    render?: ReactElement;
+    /** Draw the cross glyph. Set for you on the built-in close button. */
+    icon?: boolean;
+}
+/** Closes the sheet. Works even when `dismissible` is off. */
+declare function SheetClose({ render, icon, children, ...props }: SheetCloseProps): import("react").JSX.Element;
+declare namespace SheetClose {
+    var displayName: string;
+}
+export interface SheetStageProps extends ComponentProps<'div'> {
+}
+/**
+ * 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
+ * inside it take part.
+ */
+declare function SheetStage({ className, children, ...props }: SheetStageProps): import("react").JSX.Element;
+declare namespace SheetStage {
+    var displayName: string;
+}
+export declare const Sheet: typeof SheetRoot & {
+    Trigger: typeof SheetTrigger;
+    Content: typeof SheetContent;
+    Header: typeof SheetHeader;
+    Title: typeof SheetTitle;
+    Description: typeof SheetDescription;
+    Body: typeof SheetBody;
+    Footer: typeof SheetFooter;
+    Close: typeof SheetClose;
+    Stage: typeof SheetStage;
+};
+export { SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, };

package/dist/components/sheet/index.js

@@ -0,0 +1,330 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Sheet — a panel that rises over the page from one of its edges, floating
+ * clear of them, and leaves with a swipe.
+ *
+ * ```tsx
+ * <Sheet>
+ *   <Sheet.Trigger render={<Button />}>Edit profile</Sheet.Trigger>
+ *   <Sheet.Content>
+ *     <Sheet.Header title="Edit profile" description="Shown on your public page." />
+ *     <Sheet.Body>…</Sheet.Body>
+ *     <Sheet.Footer>
+ *       <Button>Save</Button>
+ *       <Sheet.Close render={<Button variant="ghost" />}>Cancel</Sheet.Close>
+ *     </Sheet.Footer>
+ *   </Sheet.Content>
+ * </Sheet>
+ * ```
+ *
+ * ## It floats
+ *
+ * A sheet that holds a task for the page is a card laid over it, so by
+ * default it stands a few pixels off every edge with all four corners rounded.
+ * The corners are large and concentric with the gap around them, which is what
+ * makes the card read as belonging to the screen it sits in rather than as a
+ * box dropped onto it. `size="full"` or `detached={false}` gives the gap up and
+ * meets the edges, for a sheet that needs every pixel.
+ *
+ * ## Sheets stack
+ *
+ * A sheet opened from inside another slides over it from the same edge, and
+ * the one underneath steps back: a little smaller, pushed inward so its edge
+ * still shows, and dimmed. Only the first sheet darkens the page, so two open
+ * sheets do not stack two shades of black.
+ *
+ * ## The hand decides
+ *
+ * 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.
+ */
+import { Drawer } from '@base-ui/react/drawer';
+import { ScrollArea } from '@base-ui/react/scroll-area';
+import { createContext, useContext, useMemo, } 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 sheetVariants = tv({
+    slots: {
+        backdrop: [
+            'fixed inset-0 z-50 bg-black opacity-[calc(var(--sheet-dim)*(1-var(--drawer-swipe-progress,0)))]',
+            '[--sheet-dim:0.28] dark:[--sheet-dim:0.5]',
+            'transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0',
+            'data-starting-style:opacity-0 data-ending-style:opacity-0',
+            'data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*400ms)] motion-reduce:transition-none',
+        ],
+        /*
+         * The viewport holds the gap. The sheet is laid out inside it, so the
+         * distance to every edge is one number, and the corner radius below is
+         * that number's companion.
+         */
+        viewport: 'pointer-events-none fixed inset-0 z-50 flex [--sheet-gap:0.5rem] sm:[--sheet-gap:0.75rem]',
+        popup: [
+            'group/sheet pointer-events-auto relative flex min-h-0 flex-col bg-popover text-popover-foreground outline-none',
+            'shadow-[0_24px_64px_-16px_rgb(0_0_0/0.3)] ring-1 ring-foreground/[0.06] dark:ring-foreground/10',
+            MOVE,
+            'data-swiping:select-none data-swiping:duration-0 data-nested-drawer-swiping:duration-0',
+            'data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*400ms)]',
+            'motion-reduce:transition-none',
+            /*
+             * The stack. Each sheet behind the front one is 4% smaller and pushed
+             * 14px inward from its edge, so a strip of it shows past the one in front
+             * and the depth can be counted. It scales about its inner edge, so the
+             * strip stays put while it shrinks.
+             */
+            '[--sheet-scale:calc(1-var(--nested-drawers,0)*0.04)] [--sheet-push:calc(var(--nested-drawers,0)*14px)]',
+            // A veil in the sheet's own colour: what is on the sheet behind fades, the
+            // same way in either theme, instead of going grey under a black tint.
+            "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',
+        ],
+        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',
+        ],
+        close: [
+            'absolute end-4 top-4 z-10 inline-flex size-8 cursor-pointer items-center justify-center rounded-full',
+            'bg-muted text-muted-foreground outline-none transition-[background-color,color,scale] duration-150',
+            'after:absolute after:-inset-1.5 hover:bg-foreground/10 hover:text-foreground active:scale-95',
+            'focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none',
+        ],
+        header: 'flex shrink-0 flex-col gap-1 px-6 pt-6 pb-3',
+        title: 'text-[19px] font-semibold leading-6 tracking-[-0.01em]',
+        description: 'text-[15px] leading-5 text-muted-foreground',
+        body: 'relative flex min-h-0 flex-1 flex-col',
+        bodyViewport: 'min-h-0 flex-1 overscroll-contain outline-none',
+        bodyContent: 'px-6 pb-2',
+        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',
+        /*
+         * 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
+         * own colours and draws no outline of its own: the only edge is the strip
+         * of the surface it steps back onto, which is the muted tone of the theme
+         * rather than black, so it is quiet in light and dark alike. A rim on top
+         * of that strip doubles every border the page sits inside.
+         *
+         * It shrinks about its centre, so the strip is the same width on every
+         * side, and its corners take `--stage-radius`: set that to the radius of
+         * whatever the stage sits in, less the strip, and the two outlines are
+         * concentric instead of a second, tighter curve inside the first.
+         */
+        stage: 'relative isolate overflow-hidden [--stage-radius:1rem]',
+        stageBackground: 'absolute inset-0 -z-10 bg-muted',
+        stagePage: [
+            'relative h-full origin-center bg-background will-change-transform',
+            'transition-[transform,border-radius] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none',
+            '[--stage-progress:calc(1-var(--drawer-swipe-progress,0))]',
+            'data-active:[transform:scale(calc(1-0.03*var(--stage-progress)))]',
+            'data-active:overflow-hidden data-active:rounded-[calc(var(--stage-radius)*var(--stage-progress))]',
+        ],
+    },
+    variants: {
+        side: {
+            bottom: {
+                grabber: 'top-0 items-start pt-1.5',
+                viewport: 'items-end justify-center px-(--sheet-gap) pt-12 pb-[max(var(--sheet-gap),env(safe-area-inset-bottom))]',
+                popup: [
+                    'max-h-full w-full max-w-lg origin-[50%_0] rounded-[32px]',
+                    '[transform:translateY(calc(var(--drawer-swipe-movement-y,0px)-var(--sheet-push)))_scale(var(--sheet-scale))]',
+                    'data-starting-style:[transform:translateY(calc(100%+var(--sheet-gap)+2rem))]',
+                    'data-ending-style:[transform:translateY(calc(100%+var(--sheet-gap)+2rem))]',
+                ],
+            },
+            top: {
+                // Swiped up, so the grabber sits on the edge the hand pushes.
+                grabber: 'bottom-0 items-end pb-1.5',
+                viewport: 'items-start justify-center px-(--sheet-gap) pb-12 pt-[max(var(--sheet-gap),env(safe-area-inset-top))]',
+                popup: [
+                    'max-h-full w-full max-w-lg origin-[50%_100%] rounded-[32px]',
+                    '[transform:translateY(calc(var(--drawer-swipe-movement-y,0px)+var(--sheet-push)))_scale(var(--sheet-scale))]',
+                    'data-starting-style:[transform:translateY(calc(-100%-var(--sheet-gap)-2rem))]',
+                    'data-ending-style:[transform:translateY(calc(-100%-var(--sheet-gap)-2rem))]',
+                ],
+            },
+            left: {
+                viewport: 'items-stretch justify-start p-(--sheet-gap)',
+                popup: [
+                    'h-full w-[min(24rem,calc(100vw-2*var(--sheet-gap)))] origin-[100%_50%] rounded-[28px]',
+                    '[transform:translateX(calc(var(--drawer-swipe-movement-x,0px)+var(--sheet-push)))_scale(var(--sheet-scale))]',
+                    'data-starting-style:[transform:translateX(calc(-100%-var(--sheet-gap)-2rem))]',
+                    'data-ending-style:[transform:translateX(calc(-100%-var(--sheet-gap)-2rem))]',
+                ],
+            },
+            right: {
+                viewport: 'items-stretch justify-end p-(--sheet-gap)',
+                popup: [
+                    'h-full w-[min(24rem,calc(100vw-2*var(--sheet-gap)))] origin-[0_50%] rounded-[28px]',
+                    '[transform:translateX(calc(var(--drawer-swipe-movement-x,0px)-var(--sheet-push)))_scale(var(--sheet-scale))]',
+                    'data-starting-style:[transform:translateX(calc(100%+var(--sheet-gap)+2rem))]',
+                    'data-ending-style:[transform:translateX(calc(100%+var(--sheet-gap)+2rem))]',
+                ],
+            },
+        },
+        size: {
+            auto: {},
+            half: { popup: 'h-[min(50dvh,100%)]' },
+            full: { popup: 'h-full' },
+        },
+        // Meets the edges it rises from instead of standing clear of them.
+        attached: {
+            true: {},
+        },
+        blur: {
+            true: { backdrop: 'backdrop-blur-sm [--sheet-dim:0.16] dark:[--sheet-dim:0.36]' },
+        },
+    },
+    compoundVariants: [
+        {
+            side: 'bottom',
+            attached: true,
+            class: {
+                popup: '-mx-(--sheet-gap) -mb-[max(var(--sheet-gap),env(safe-area-inset-bottom))] max-w-[calc(100%+2*var(--sheet-gap))] rounded-b-none pb-[env(safe-area-inset-bottom)] sm:mx-0 sm:max-w-2xl',
+            },
+        },
+        {
+            side: 'top',
+            attached: true,
+            class: {
+                popup: '-mx-(--sheet-gap) -mt-[max(var(--sheet-gap),env(safe-area-inset-top))] max-w-[calc(100%+2*var(--sheet-gap))] rounded-t-none sm:mx-0 sm:max-w-2xl',
+            },
+        },
+        { side: 'left', attached: true, class: { popup: '-my-(--sheet-gap) -ms-(--sheet-gap) rounded-s-none' } },
+        { side: 'right', attached: true, class: { popup: '-my-(--sheet-gap) -me-(--sheet-gap) rounded-e-none' } },
+    ],
+    defaultVariants: { side: 'bottom', size: 'auto' },
+});
+const SWIPE = {
+    bottom: 'down',
+    top: 'up',
+    left: 'left',
+    right: 'right',
+};
+const SheetContext = createContext(null);
+function useSheet(part) {
+    const context = useContext(SheetContext);
+    if (!context)
+        throw new Error(`${part} must be used inside a <Sheet>.`);
+    return context;
+}
+function SheetRoot({ children, open, onOpenChange, defaultOpen = false, side = 'bottom', dismissible = true, }) {
+    // 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) => {
+                // The primitive has a switch for a press outside and none for
+                // Escape or a swipe, so those are refused here.
+                if (!next &&
+                    !dismissible &&
+                    details.reason !== 'close-press' &&
+                    details.reason !== 'imperative-action') {
+                    return;
+                }
+                onOpenChange?.(next);
+            }, children: children }) }));
+}
+SheetRoot.displayName = 'Sheet';
+/** What opens the sheet. A plain button unless `render` supplies one. */
+function SheetTrigger({ render, children, ...props }) {
+    return (_jsx(Drawer.Trigger, { render: render, ...props, children: children }));
+}
+SheetTrigger.displayName = 'Sheet.Trigger';
+/** 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');
+    const vertical = sheet.side === 'bottom' || sheet.side === 'top';
+    const slots = sheetVariants({
+        side: sheet.side,
+        size: vertical ? size : undefined,
+        attached: !detached || (vertical && size === 'full'),
+        blur,
+    });
+    const context = useMemo(() => ({ ...sheet, inline, showClose }), [sheet, inline, showClose]);
+    const inside = (_jsxs(_Fragment, { children: [(showGrabber ?? vertical) ? _jsx("div", { "aria-hidden": true, className: slots.grabber() }) : null, showClose ? _jsx(SheetClose, { "aria-label": "Close", className: slots.close(), icon: true }) : null, children] }));
+    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 }) }) })] }));
+}
+SheetContent.displayName = 'Sheet.Content';
+/**
+ * The heading block. It leaves room for the close button beside the title,
+ * so the two share the top line instead of stacking.
+ */
+function SheetHeader({ title, description, className, children, ...props }) {
+    const { showClose } = useSheet('Sheet.Header');
+    const slots = sheetVariants();
+    return (_jsxs("div", { className: slots.header({ className: [showClose && 'pe-14', className] }), ...props, children: [title !== undefined ? _jsx(SheetTitle, { children: title }) : null, description !== undefined ? _jsx(SheetDescription, { children: description }) : null, children] }));
+}
+SheetHeader.displayName = 'Sheet.Header';
+/** The sheet's name, announced when it opens. */
+function SheetTitle({ className, ...props }) {
+    const { inline } = useSheet('Sheet.Title');
+    const slots = sheetVariants();
+    if (inline)
+        return _jsx("h2", { className: slots.title({ className }), ...props });
+    return _jsx(Drawer.Title, { className: slots.title({ className }), ...props });
+}
+SheetTitle.displayName = 'Sheet.Title';
+/** A sentence under the title, read out after it. */
+function SheetDescription({ className, ...props }) {
+    const { inline } = useSheet('Sheet.Description');
+    const slots = sheetVariants();
+    if (inline)
+        return _jsx("p", { className: slots.description({ className }), ...props });
+    return _jsx(Drawer.Description, { className: slots.description({ className }), ...props });
+}
+SheetDescription.displayName = 'Sheet.Description';
+/**
+ * The part that scrolls. The header and footer stay put while it moves, and
+ * the scrollbar is a thin drawn thumb that shows while the content is moving.
+ */
+function SheetBody({ className, children, ...props }) {
+    const slots = sheetVariants();
+    return (_jsxs(ScrollArea.Root, { className: slots.body(), children: [_jsx(ScrollArea.Viewport, { className: slots.bodyViewport(), children: _jsx(ScrollArea.Content, { className: slots.bodyContent({ className }), ...props, children: children }) }), _jsx(ScrollArea.Scrollbar, { orientation: "vertical", className: slots.scrollbar(), children: _jsx(ScrollArea.Thumb, { className: slots.thumb() }) })] }));
+}
+SheetBody.displayName = 'Sheet.Body';
+/** The actions, stacked full width at the bottom of the sheet. */
+function SheetFooter({ className, ...props }) {
+    const slots = sheetVariants();
+    return _jsx("div", { className: slots.footer({ className }), ...props });
+}
+SheetFooter.displayName = 'Sheet.Footer';
+/** Closes the sheet. Works even when `dismissible` is off. */
+function SheetClose({ render, icon = false, children, ...props }) {
+    const { inline } = useSheet('Sheet.Close');
+    const content = icon ? (_jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": true, className: "size-4", fill: "none", stroke: "currentColor", strokeWidth: 2.4, strokeLinecap: "round", children: _jsx("path", { d: "M6 6l12 12M18 6L6 18" }) })) : (children);
+    if (inline) {
+        return (_jsx("button", { type: "button", ...props, children: content }));
+    }
+    return (_jsx(Drawer.Close, { render: render, ...props, children: content }));
+}
+SheetClose.displayName = 'Sheet.Close';
+/**
+ * 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
+ * inside it take part.
+ */
+function SheetStage({ className, children, ...props }) {
+    const slots = sheetVariants();
+    return (_jsx(Drawer.Provider, { children: _jsxs("div", { className: slots.stage({ className }), ...props, children: [_jsx(Drawer.IndentBackground, { className: slots.stageBackground() }), _jsx(Drawer.Indent, { className: slots.stagePage(), children: children })] }) }));
+}
+SheetStage.displayName = 'Sheet.Stage';
+export const Sheet = Object.assign(SheetRoot, {
+    Trigger: SheetTrigger,
+    Content: SheetContent,
+    Header: SheetHeader,
+    Title: SheetTitle,
+    Description: SheetDescription,
+    Body: SheetBody,
+    Footer: SheetFooter,
+    Close: SheetClose,
+    Stage: SheetStage,
+});
+export { SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, };

package/dist/components/tilt-card/index.d.ts

@@ -0,0 +1,60 @@
+/**
+ * TiltCard — a card that leans towards the pointer, with layers inside it
+ * that move by how near they are.
+ *
+ * ```tsx
+ * <TiltCard>
+ *   <TiltCard.Layer depth={24}>…a figure…</TiltCard.Layer>
+ *   <TiltCard.Layer depth={8}>…its caption…</TiltCard.Layer>
+ * </TiltCard>
+ * ```
+ *
+ * ## The card turns on the pointer
+ *
+ * The card is tipped a few degrees towards wherever the pointer is on it, as
+ * a card held in the hand is tipped towards the eye, and a patch of light
+ * sits under the pointer. When the pointer leaves, it settles back level.
+ *
+ * ## Layers give it depth
+ *
+ * A `TiltCard.Layer` is lifted off the card by its `depth`. As the card tips,
+ * a layer further out moves further, which is the whole of what makes a flat
+ * drawing read as a thing with a front and a back. Without layers the card
+ * still tips; with them there is something to look round.
+ *
+ * ## It is decoration
+ *
+ * Nothing is said by the tilt, so nothing is lost without it: it does not
+ * follow a finger, and it holds still for anyone who has asked their system
+ * for reduced motion. Whatever the card says is in its contents.
+ */
+import { type ComponentProps } from 'react';
+/** Which of the theme's roles the light under the pointer is drawn in. */
+export type TiltCardColor = 'primary' | 'info' | 'success' | 'warning' | 'destructive';
+export interface TiltCardProps extends Omit<ComponentProps<'div'>, 'color'> {
+    /** The furthest the card leans, in degrees. */
+    tilt?: number;
+    /** Which of the theme's roles the light under the pointer is drawn in. */
+    color?: TiltCardColor;
+    /** Set to `false` for a card with no light under the pointer. */
+    glare?: boolean;
+    /** Extra classes for the card itself. `className` goes on the box round it. */
+    cardClassName?: string;
+}
+declare function TiltCardRoot({ tilt, color, glare, className, cardClassName, children, onPointerMove, onPointerLeave, ...props }: TiltCardProps): import("react").JSX.Element;
+declare namespace TiltCardRoot {
+    var displayName: string;
+}
+export interface TiltCardLayerProps extends ComponentProps<'div'> {
+    /** How far off the card it is lifted, in pixels. Further out moves further as the card leans. */
+    depth?: number;
+}
+/** Something lifted off the card, which moves against it as the card leans. */
+declare function TiltCardLayer({ depth, className, style, ...props }: TiltCardLayerProps): import("react").JSX.Element;
+declare namespace TiltCardLayer {
+    var displayName: string;
+}
+export declare const TiltCard: typeof TiltCardRoot & {
+    Layer: typeof TiltCardLayer;
+};
+export { TiltCardLayer };

package/dist/components/tilt-card/index.js

@@ -0,0 +1,114 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * TiltCard — a card that leans towards the pointer, with layers inside it
+ * that move by how near they are.
+ *
+ * ```tsx
+ * <TiltCard>
+ *   <TiltCard.Layer depth={24}>…a figure…</TiltCard.Layer>
+ *   <TiltCard.Layer depth={8}>…its caption…</TiltCard.Layer>
+ * </TiltCard>
+ * ```
+ *
+ * ## The card turns on the pointer
+ *
+ * The card is tipped a few degrees towards wherever the pointer is on it, as
+ * a card held in the hand is tipped towards the eye, and a patch of light
+ * sits under the pointer. When the pointer leaves, it settles back level.
+ *
+ * ## Layers give it depth
+ *
+ * A `TiltCard.Layer` is lifted off the card by its `depth`. As the card tips,
+ * a layer further out moves further, which is the whole of what makes a flat
+ * drawing read as a thing with a front and a back. Without layers the card
+ * still tips; with them there is something to look round.
+ *
+ * ## It is decoration
+ *
+ * Nothing is said by the tilt, so nothing is lost without it: it does not
+ * follow a finger, and it holds still for anyone who has asked their system
+ * for reduced motion. Whatever the card says is in its contents.
+ */
+import { useRef, } from 'react';
+import { tv } from 'tailwind-variants';
+const tiltCardVariants = tv({
+    slots: {
+        // The eye's distance from the card. Nearer and the lean would be a lurch.
+        root: 'group/tilt relative [perspective:900px]',
+        /*
+         * The lean is two variables the pointer sets. They move at once while the
+         * pointer is on the card, and ease back when it has gone, so the card
+         * follows a hand exactly and then settles on its own.
+         */
+        card: 'relative overflow-hidden rounded-3xl border bg-card text-card-foreground shadow-sm transition-[transform,box-shadow,border-color] duration-500 ease-out [transform-style:preserve-3d] [transform:rotateX(var(--pu-rx,0deg))_rotateY(var(--pu-ry,0deg))] group-data-[tilting]/tilt:shadow-xl group-data-[tilting]/tilt:duration-100 motion-reduce:transition-none motion-reduce:[transform:none]',
+        // The light is the card's colour, soft and wide, centred on the pointer.
+        glare: 'pointer-events-none absolute inset-0 rounded-[inherit] bg-[radial-gradient(18rem_circle_at_var(--pu-gx,50%)_var(--pu-gy,50%),color-mix(in_oklab,var(--pu-color)_16%,transparent),transparent_70%)] opacity-0 transition-opacity duration-300 group-data-[tilting]/tilt:opacity-100',
+        layer: 'transition-transform duration-500 ease-out [transform:translate3d(calc(var(--pu-px,0)*var(--pu-depth)*1px),calc(var(--pu-py,0)*var(--pu-depth)*1px),calc(var(--pu-depth)*1px))] group-data-[tilting]/tilt:duration-100 motion-reduce:[transform:none]',
+    },
+    variants: {
+        color: {
+            primary: { card: '[--pu-color:var(--primary)]' },
+            info: { card: '[--pu-color:var(--info)]' },
+            success: { card: '[--pu-color:var(--success)]' },
+            warning: { card: '[--pu-color:var(--warning)]' },
+            destructive: { card: '[--pu-color:var(--destructive)]' },
+        },
+    },
+    defaultVariants: { color: 'primary' },
+});
+function TiltCardRoot({ tilt = 8, color = 'primary', glare = true, className, cardClassName, children, onPointerMove, onPointerLeave, ...props }) {
+    const slots = tiltCardVariants({ color });
+    const root = useRef(null);
+    const frame = useRef(0);
+    const lean = (event) => {
+        onPointerMove?.(event);
+        // A finger has no hover to end the lean, and would cover it anyway.
+        if (event.pointerType === 'touch')
+            return;
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+            return;
+        const node = root.current;
+        if (!node)
+            return;
+        const { clientX, clientY } = event;
+        cancelAnimationFrame(frame.current);
+        frame.current = requestAnimationFrame(() => {
+            const box = node.getBoundingClientRect();
+            // Where the pointer is on the card, from -1 at one edge to 1 at the other.
+            const x = ((clientX - box.left) / box.width) * 2 - 1;
+            const y = ((clientY - box.top) / box.height) * 2 - 1;
+            node.dataset.tilting = '';
+            // Towards the pointer: the near edge comes forward.
+            node.style.setProperty('--pu-rx', `${(-y * tilt).toFixed(2)}deg`);
+            node.style.setProperty('--pu-ry', `${(x * tilt).toFixed(2)}deg`);
+            node.style.setProperty('--pu-px', x.toFixed(3));
+            node.style.setProperty('--pu-py', y.toFixed(3));
+            node.style.setProperty('--pu-gx', `${(((x + 1) / 2) * 100).toFixed(1)}%`);
+            node.style.setProperty('--pu-gy', `${(((y + 1) / 2) * 100).toFixed(1)}%`);
+        });
+    };
+    const settle = (event) => {
+        onPointerLeave?.(event);
+        cancelAnimationFrame(frame.current);
+        const node = root.current;
+        if (!node)
+            return;
+        delete node.dataset.tilting;
+        for (const name of ['--pu-rx', '--pu-ry', '--pu-px', '--pu-py'])
+            node.style.removeProperty(name);
+    };
+    return (_jsx("div", { ref: root, className: slots.root({ className }), onPointerMove: lean, onPointerLeave: settle, ...props, children: _jsxs("div", { className: slots.card({ className: cardClassName }), children: [children, glare ? _jsx("span", { "aria-hidden": "true", className: slots.glare() }) : null] }) }));
+}
+TiltCardRoot.displayName = 'TiltCard';
+/** Something lifted off the card, which moves against it as the card leans. */
+function TiltCardLayer({ depth = 16, className, style, ...props }) {
+    return (_jsx("div", { className: tiltCardVariants().layer({ className }), style: { ['--pu-depth']: depth, ...style }, ...props }));
+}
+TiltCardLayer.displayName = 'TiltCard.Layer';
+export const TiltCard = Object.assign(TiltCardRoot, {
+    Layer: TiltCardLayer,
+});
+/* By name as well, for a Server Component, which cannot dot into a client
+   module. */
+export { TiltCardLayer };