panelui-web 0.9.1 → 0.10.0

package/dist/components/inspector/index.js

@@ -0,0 +1,230 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Inspector — the settings panel beside an editor's canvas: a rail of
+ * icons, each opening a page of titled sections.
+ *
+ * ```tsx
+ * <Inspector defaultValue="pointer">
+ *   <Inspector.Rail>
+ *     <Inspector.Tab value="pointer" label="Pointer"><MousePointer2Icon /></Inspector.Tab>
+ *     <Inspector.Tab value="audio" label="Audio"><Volume2Icon /></Inspector.Tab>
+ *   </Inspector.Rail>
+ *   <Inspector.Panel>
+ *     <Inspector.Page value="pointer">
+ *       <Inspector.Section>
+ *         <Inspector.SectionTitle>Click sound</Inspector.SectionTitle>
+ *         <Inspector.SectionAction><Switch label="Click sound" /></Inspector.SectionAction>
+ *         <Inspector.SectionContent>…</Inspector.SectionContent>
+ *       </Inspector.Section>
+ *     </Inspector.Page>
+ *   </Inspector.Panel>
+ * </Inspector>
+ * ```
+ *
+ * ## The rail stands apart
+ *
+ * The rail is a pill of its own beside the panel, not a strip inside it.
+ * It is navigation, and the panel is the thing being navigated; drawn
+ * apart, the eye knows which of the two it is looking at. A filled marker
+ * slides along the rail to the chosen page, and the page arrives from the
+ * direction the marker went.
+ *
+ * ## Sections carry their own switch
+ *
+ * A section's title sits on one line with its action: the switch that turns
+ * the whole section on, or a Reset that puts its values back. The controls
+ * under it are what that switch or reset applies to, so the relation never
+ * has to be explained. A section can fold away with `collapsible`.
+ */
+import { Collapsible } from '@base-ui/react/collapsible';
+import { ScrollArea } from '@base-ui/react/scroll-area';
+import { Tabs } from '@base-ui/react/tabs';
+import { Tooltip } from '@base-ui/react/tooltip';
+import { createContext, useContext } from 'react';
+import { tv } from 'tailwind-variants';
+const EASE = 'ease-[cubic-bezier(0.3,1.2,0.4,1)]';
+const inspectorVariants = tv({
+    slots: {
+        root: 'group/inspector flex items-start gap-2 data-[orientation=vertical]:flex-row',
+        rail: [
+            'relative isolate flex shrink-0 flex-col items-center gap-1 rounded-[20px] bg-popover p-1.5 text-popover-foreground',
+            'shadow-[0_10px_30px_-12px_rgb(0_0_0/0.3)] ring-1 ring-foreground/[0.06] dark:ring-foreground/10',
+        ],
+        marker: [
+            'absolute -z-10 rounded-[14px] bg-primary shadow-[0_1px_2px_rgb(0_0_0/0.18),inset_0_1px_0_rgb(255_255_255/0.18)]',
+            'top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)',
+            `transition-[top,height] duration-[380ms] ${EASE} motion-reduce:transition-none`,
+        ],
+        tab: [
+            'relative z-10 inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-[14px] outline-none select-none',
+            'text-muted-foreground transition-[color,background-color,scale] duration-150',
+            'hover:bg-foreground/[0.06] hover:text-foreground active:scale-[0.94]',
+            'data-active:bg-transparent data-active:text-primary-foreground data-active:hover:bg-transparent',
+            'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset',
+            'data-disabled:pointer-events-none data-disabled:opacity-40',
+            '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-[1.125rem]',
+        ],
+        railSeparator: 'my-1 h-px w-5 shrink-0 rounded-full bg-foreground/15',
+        tooltip: [
+            'origin-(--transform-origin) rounded-lg bg-foreground px-2 py-1 text-xs font-medium text-background shadow-md',
+            'transition-[opacity,scale] duration-150 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:opacity-0',
+            'data-instant:duration-0 motion-reduce:transition-none',
+        ],
+        panel: [
+            'relative flex w-72 min-w-0 flex-col overflow-hidden rounded-[22px] bg-popover text-popover-foreground',
+            'shadow-[0_10px_30px_-12px_rgb(0_0_0/0.3)] ring-1 ring-foreground/[0.06] dark:ring-foreground/10',
+        ],
+        page: [
+            'flex min-h-0 flex-1 flex-col outline-none',
+            `transition-[opacity,translate] duration-300 ${EASE} motion-reduce:transition-none`,
+            'data-starting-style:opacity-0',
+            'data-[activation-direction=down]:data-starting-style:translate-y-3 data-[activation-direction=up]:data-starting-style:-translate-y-3',
+            'data-ending-style:hidden',
+        ],
+        viewport: 'min-h-0 flex-1 overscroll-contain outline-none',
+        content: 'flex flex-col gap-1 p-3.5',
+        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',
+        section: 'grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 py-1.5',
+        sectionTitle: [
+            'col-start-1 row-start-1 flex min-h-8 items-center text-left text-[13px] font-medium text-foreground',
+            // A section that folds: its title is the button, with a chevron that turns.
+            'data-[slot=inspector-section-trigger]:-mx-1.5 data-[slot=inspector-section-trigger]:cursor-pointer data-[slot=inspector-section-trigger]:gap-1.5 data-[slot=inspector-section-trigger]:rounded-lg data-[slot=inspector-section-trigger]:px-1.5',
+            'data-[slot=inspector-section-trigger]:outline-none data-[slot=inspector-section-trigger]:hover:bg-foreground/[0.04] data-[slot=inspector-section-trigger]:focus-visible:ring-2 data-[slot=inspector-section-trigger]:focus-visible:ring-ring',
+        ],
+        // Right after the title: up while the section is open, down while it is folded.
+        chevron: [
+            'size-3.5 shrink-0 rotate-180 text-muted-foreground transition-transform duration-200',
+            'in-data-panel-open:rotate-0 motion-reduce:transition-none',
+        ],
+        sectionAction: 'col-start-2 row-start-1 flex items-center gap-1.5',
+        sectionContent: [
+            'col-span-2 flex flex-col gap-2 pt-2',
+            // Folding: the height follows the content, from and to nothing.
+            'data-[slot=inspector-section-panel]:h-(--collapsible-panel-height) data-[slot=inspector-section-panel]:overflow-hidden',
+            'data-[slot=inspector-section-panel]:transition-[height,opacity] data-[slot=inspector-section-panel]:duration-300',
+            'data-[slot=inspector-section-panel]:ease-[cubic-bezier(0.3,1.2,0.4,1)]',
+            'data-starting-style:h-0 data-starting-style:opacity-0 data-ending-style:h-0 data-ending-style:opacity-0 motion-reduce:transition-none',
+        ],
+        separator: 'my-2 h-px shrink-0 bg-foreground/[0.08]',
+    },
+});
+const SectionContext = createContext(null);
+/**
+ * The rail and the panel side by side. `defaultValue`, or `value` with
+ * `onValueChange`, names the page that is open.
+ */
+function InspectorRoot({ className, ...props }) {
+    const slots = inspectorVariants();
+    return (_jsx(Tooltip.Provider, { delay: 500, closeDelay: 0, children: _jsx(Tabs.Root, { "data-slot": "inspector", orientation: "vertical", className: slots.root({ className }), ...props }) }));
+}
+InspectorRoot.displayName = 'Inspector';
+/** The column of page icons, in a pill of its own beside the panel. */
+function InspectorRail({ className, children, ...props }) {
+    const slots = inspectorVariants();
+    return (_jsxs(Tabs.List, { "data-slot": "inspector-rail", className: slots.rail({ className }), ...props, children: [children, _jsx(Tabs.Indicator, { "data-slot": "inspector-marker", className: slots.marker(), renderBeforeHydration: true })] }));
+}
+InspectorRail.displayName = 'Inspector.Rail';
+/** One page's icon on the rail. */
+function InspectorTab({ label, className, children, ...props }) {
+    const slots = inspectorVariants();
+    return (_jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { render: _jsx(Tabs.Tab, { "data-slot": "inspector-tab", "aria-label": label, className: slots.tab({ className }), ...props, children: children }) }), _jsx(Tooltip.Portal, { children: _jsx(Tooltip.Positioner, { side: "left", sideOffset: 10, className: "z-50", children: _jsx(Tooltip.Popup, { className: slots.tooltip(), children: label }) }) })] }));
+}
+InspectorTab.displayName = 'Inspector.Tab';
+/** A short line between groups of pages on the rail. */
+function InspectorRailSeparator({ className, ...props }) {
+    const slots = inspectorVariants();
+    return _jsx("span", { "aria-hidden": true, "data-slot": "inspector-rail-separator", className: slots.railSeparator({ className }), ...props });
+}
+InspectorRailSeparator.displayName = 'Inspector.RailSeparator';
+/**
+ * The card the pages open in. Give it a height, such as `h-[32rem]`, and a
+ * page longer than that scrolls inside it. Without pages, its children are
+ * one page of sections.
+ */
+function InspectorPanel({ className, children, ...props }) {
+    const slots = inspectorVariants();
+    return (_jsx("div", { "data-slot": "inspector-panel", className: slots.panel({ className }), ...props, children: hasPages(children) ? children : _jsx(Scroll, { children: children }) }));
+}
+InspectorPanel.displayName = 'Inspector.Panel';
+/** Whether the panel's children are pages, rather than sections written straight into it. */
+function hasPages(children) {
+    const list = Array.isArray(children) ? children : [children];
+    return list.some((child) => typeof child === 'object' &&
+        child !== null &&
+        'type' in child &&
+        child.type === InspectorPage);
+}
+/** The scrolling column of a page, with a thin bar that shows while it moves. */
+function Scroll({ children }) {
+    const slots = inspectorVariants();
+    return (_jsxs(ScrollArea.Root, { className: "relative flex min-h-0 flex-1 flex-col", children: [_jsx(ScrollArea.Viewport, { className: slots.viewport(), children: _jsx(ScrollArea.Content, { className: slots.content(), children: children }) }), _jsx(ScrollArea.Scrollbar, { orientation: "vertical", className: slots.scrollbar(), children: _jsx(ScrollArea.Thumb, { className: slots.thumb() }) })] }));
+}
+/** What one tab opens: a column of sections that scrolls inside the panel. */
+function InspectorPage({ className, children, ...props }) {
+    const slots = inspectorVariants();
+    return (_jsx(Tabs.Panel, { "data-slot": "inspector-page", className: slots.page({ className }), ...props, children: _jsx(Scroll, { children: children }) }));
+}
+InspectorPage.displayName = 'Inspector.Page';
+/** A titled group of settings: a title, an action on its line, and the controls under them. */
+function InspectorSection({ collapsible = false, defaultOpen = true, open, onOpenChange, className, children, ...props }) {
+    const slots = inspectorVariants();
+    if (!collapsible) {
+        return (_jsx(SectionContext.Provider, { value: { collapsible: false }, children: _jsx("div", { "data-slot": "inspector-section", className: slots.section({ className }), ...props, children: children }) }));
+    }
+    return (_jsx(SectionContext.Provider, { value: { collapsible: true }, children: _jsx(Collapsible.Root, { "data-slot": "inspector-section", defaultOpen: defaultOpen, open: open, onOpenChange: onOpenChange ? (next) => onOpenChange(next) : undefined, className: slots.section({ className }), ...props, children: children }) }));
+}
+InspectorSection.displayName = 'Inspector.Section';
+function useSection(part) {
+    const section = useContext(SectionContext);
+    if (!section)
+        throw new Error(`${part} must be used inside an <Inspector.Section>.`);
+    return section;
+}
+/** The section's name. In a collapsible section it is the button that folds it, with a chevron. */
+function InspectorSectionTitle({ className, children, ...props }) {
+    const { collapsible } = useSection('Inspector.SectionTitle');
+    const slots = inspectorVariants();
+    if (!collapsible) {
+        return (_jsx("h3", { "data-slot": "inspector-section-title", className: slots.sectionTitle({ className }), ...props, children: children }));
+    }
+    return (_jsx("h3", { className: "col-start-1 row-start-1 m-0", children: _jsxs(Collapsible.Trigger, { "data-slot": "inspector-section-trigger", className: slots.sectionTitle({ className: ['w-full', className] }), children: [children, _jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": true, className: slots.chevron(), fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m4 10 4-4 4 4" }) })] }) }));
+}
+InspectorSectionTitle.displayName = 'Inspector.SectionTitle';
+/** What sits at the end of the title's line: the switch for the whole section, or a Reset. */
+function InspectorSectionAction({ className, ...props }) {
+    useSection('Inspector.SectionAction');
+    const slots = inspectorVariants();
+    return _jsx("div", { "data-slot": "inspector-section-action", className: slots.sectionAction({ className }), ...props });
+}
+InspectorSectionAction.displayName = 'Inspector.SectionAction';
+/** The controls under the title, stacked with an even gap. */
+function InspectorSectionContent({ className, children, ...props }) {
+    const { collapsible } = useSection('Inspector.SectionContent');
+    const slots = inspectorVariants();
+    if (!collapsible) {
+        return (_jsx("div", { "data-slot": "inspector-section-content", className: slots.sectionContent({ className }), ...props, children: children }));
+    }
+    return (_jsx(Collapsible.Panel, { "data-slot": "inspector-section-panel", className: slots.sectionContent({ className }), style: props.style, children: children }));
+}
+InspectorSectionContent.displayName = 'Inspector.SectionContent';
+/** A hairline between sections that belong to different things. */
+function InspectorSeparator({ className, ...props }) {
+    const slots = inspectorVariants();
+    return _jsx("div", { role: "separator", "data-slot": "inspector-separator", className: slots.separator({ className }), ...props });
+}
+InspectorSeparator.displayName = 'Inspector.Separator';
+export const Inspector = Object.assign(InspectorRoot, {
+    Rail: InspectorRail,
+    Tab: InspectorTab,
+    RailSeparator: InspectorRailSeparator,
+    Panel: InspectorPanel,
+    Page: InspectorPage,
+    Section: InspectorSection,
+    SectionTitle: InspectorSectionTitle,
+    SectionAction: InspectorSectionAction,
+    SectionContent: InspectorSectionContent,
+    Separator: InspectorSeparator,
+});
+export { InspectorRail, InspectorTab, InspectorRailSeparator, InspectorPanel, InspectorPage, InspectorSection, InspectorSectionTitle, InspectorSectionAction, InspectorSectionContent, InspectorSeparator, inspectorVariants, };

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

@@ -84,9 +84,16 @@ export interface SheetContentProps extends Omit<ComponentProps<'div'>, 'children
      * `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. */
+    /**
+     * Show the grabber. On by default for a top or bottom sheet that a swipe
+     * can close, and off when `dismissible` is.
+     */
     showGrabber?: boolean;
-    /** Show the round close button in the top trailing corner. Default true. */
+    /**
+     * Show the round close button in the top trailing corner. Default true.
+     * Write a bare `<Sheet.Close />` into the sheet to place it somewhere else,
+     * or set this to `false` for a sheet with no close button at all.
+     */
     showClose?: boolean;
     /** Frost the page behind the sheet instead of only dimming it. */
     blur?: boolean;
@@ -150,13 +157,17 @@ declare namespace SheetFooter {
 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.
+     * Without it, and without children, this is the round close button, drawn
+     * where it is written in place of the one in the corner.
      */
     render?: ReactElement;
-    /** Draw the cross glyph. Set for you on the built-in close button. */
+    /** Draw the round close button. A `Sheet.Close` with nothing inside it already is one. */
     icon?: boolean;
 }
-/** Closes the sheet. Works even when `dismissible` is off. */
+/**
+ * Closes the sheet. Works even when `dismissible` is off. Written bare, it is
+ * the round close button, and the sheet stops drawing its own in the corner.
+ */
 declare function SheetClose({ render, icon, children, ...props }: SheetCloseProps): import("react").JSX.Element;
 declare namespace SheetClose {
     var displayName: string;

package/dist/components/sheet/index.js

@@ -46,6 +46,18 @@ 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.
  *
+ * With a mouse, the text in a sheet is for reading: a press on the title,
+ * the description, the body or the footer selects text the way it does on the
+ * page, and the sheet is dragged by its grabber and the padding around the
+ * header. A finger still swipes the sheet from anywhere.
+ *
+ * ## The close button
+ *
+ * Every sheet has a round close button in its top trailing corner. Write a
+ * bare `<Sheet.Close />` somewhere in the sheet to put it there instead, for
+ * example first in `Sheet.Header` to stand before the title, and the one in
+ * the corner steps aside. `showClose={false}` leaves the sheet with none.
+ *
  * ## Slides
  *
  * `Sheet.Slides` takes the place of the body with a column of rounded
@@ -58,7 +70,7 @@ 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 { Children, createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { Children, createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { tv } from 'tailwind-variants';
 /*
  * One curve for every movement: the sheet arriving, the one behind it stepping
@@ -116,12 +128,24 @@ const sheetVariants = tv({
             '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',
+            'relative inline-flex size-8 shrink-0 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',
+        closeCorner: 'absolute end-4 top-4 z-10',
+        /*
+         * A close button written into the header shares the title's line: the
+         * header becomes three columns, the button takes the first or the last
+         * depending on where it was written, and the text keeps the middle.
+         */
+        header: [
+            'flex shrink-0 flex-col gap-1 px-6 pt-6 pb-3',
+            'has-[>[data-slot=sheet-close]]:grid has-[>[data-slot=sheet-close]]:grid-cols-[auto_minmax(0,1fr)_auto] has-[>[data-slot=sheet-close]]:gap-x-3',
+            '[&>*]:col-start-2',
+            '[&>[data-slot=sheet-close]]:row-span-2 [&>[data-slot=sheet-close]]:row-start-1 [&>[data-slot=sheet-close]]:-my-1 [&>[data-slot=sheet-close]]:self-start',
+            '[&>[data-slot=sheet-close]:first-child]:col-start-1 [&>[data-slot=sheet-close]:not(:first-child)]:col-start-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',
@@ -319,14 +343,16 @@ function SheetFrame({ children, open, onOpenChange, defaultOpen = false, side =
         stack,
         nested,
         inline: false,
+        dismissible,
         showClose: true,
+        claimClose: () => () => { },
         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]);
+    }), [side, stack, nested, dismissible, 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.
@@ -384,8 +410,16 @@ function SheetContent({ children, detached = true, size = 'auto', showGrabber, s
         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] }));
+    // Bare close buttons written into the sheet. While there is one, the
+    // corner button is not drawn.
+    const [placed, setPlaced] = useState(0);
+    const claimClose = useCallback(() => {
+        setPlaced((count) => count + 1);
+        return () => setPlaced((count) => count - 1);
+    }, []);
+    const corner = showClose && placed === 0;
+    const context = useMemo(() => ({ ...sheet, inline, showClose: corner, claimClose }), [sheet, inline, corner, claimClose]);
+    const inside = (_jsxs(_Fragment, { children: [(showGrabber ?? (vertical && sheet.dismissible)) ? _jsx("div", { "aria-hidden": true, className: slots.grabber() }) : null, corner ? _jsx(CloseButton, { className: slots.closeCorner() }) : null, children] }));
     if (inline) {
         return (_jsx(SheetContext.Provider, { value: context, children: _jsx("div", { className: slots.popup({ className: ['[transform:none]', className] }), ...props, children: inside }) }));
     }
@@ -413,7 +447,7 @@ function SheetTitle({ className, ...props }) {
     const slots = sheetVariants();
     if (inline)
         return _jsx("h2", { className: slots.title({ className }), ...props });
-    return _jsx(Drawer.Title, { className: slots.title({ className }), ...props });
+    return _jsx(Drawer.Content, { render: _jsx(Drawer.Title, { className: slots.title({ className }), ...props }) });
 }
 SheetTitle.displayName = 'Sheet.Title';
 /** A sentence under the title, read out after it. */
@@ -422,7 +456,7 @@ function SheetDescription({ className, ...props }) {
     const slots = sheetVariants();
     if (inline)
         return _jsx("p", { className: slots.description({ className }), ...props });
-    return _jsx(Drawer.Description, { className: slots.description({ className }), ...props });
+    return (_jsx(Drawer.Content, { render: _jsx(Drawer.Description, { className: slots.description({ className }), ...props }) }));
 }
 SheetDescription.displayName = 'Sheet.Description';
 /**
@@ -430,26 +464,49 @@ SheetDescription.displayName = 'Sheet.Description';
  * the scrollbar is a thin drawn thumb that shows while the content is moving.
  */
 function SheetBody({ className, children, ...props }) {
+    const { inline } = useSheet('Sheet.Body');
     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() }) })] }));
+    const content = (_jsx(ScrollArea.Content, { className: slots.bodyContent({ className }), ...props, children: children }));
+    return (_jsxs(ScrollArea.Root, { className: slots.body(), children: [_jsx(ScrollArea.Viewport, { className: slots.bodyViewport(), children: inline ? content : _jsx(Drawer.Content, { render: content }) }), _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 { inline } = useSheet('Sheet.Footer');
     const slots = sheetVariants();
-    return _jsx("div", { className: slots.footer({ className }), ...props });
+    const footer = _jsx("div", { className: slots.footer({ className }), ...props });
+    return inline ? footer : _jsx(Drawer.Content, { render: footer });
 }
 SheetFooter.displayName = 'Sheet.Footer';
-/** Closes the sheet. Works even when `dismissible` is off. */
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+/**
+ * Closes the sheet. Works even when `dismissible` is off. Written bare, it is
+ * the round close button, and the sheet stops drawing its own in the corner.
+ */
 function SheetClose({ render, icon = false, children, ...props }) {
+    const sheet = useSheet('Sheet.Close');
+    const bare = icon || (render === undefined && children === undefined);
+    const { claimClose } = sheet;
+    useIsomorphicLayoutEffect(() => (bare ? claimClose() : undefined), [bare, claimClose]);
+    if (bare)
+        return _jsx(CloseButton, { ...props });
+    if (sheet.inline) {
+        return (_jsx("button", { type: "button", "data-slot": "sheet-close", ...props, children: children }));
+    }
+    return (_jsx(Drawer.Close, { "data-slot": "sheet-close", render: render, ...props, children: children }));
+}
+SheetClose.displayName = 'Sheet.Close';
+/** The round button with a cross in it. */
+function CloseButton({ className, 'aria-label': label = 'Close', ...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);
+    const slots = sheetVariants();
+    const glyph = (_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" }) }));
+    const shared = { 'data-slot': 'sheet-close', 'aria-label': label, className: slots.close({ className }), ...props };
     if (inline) {
-        return (_jsx("button", { type: "button", ...props, children: content }));
+        return (_jsx("button", { type: "button", ...shared, children: glyph }));
     }
-    return (_jsx(Drawer.Close, { render: render, ...props, children: content }));
+    return _jsx(Drawer.Close, { ...shared, children: glyph });
 }
-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;