panelui-web 0.9.0 → 0.10.0

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

@@ -0,0 +1,242 @@
+import { Tabs } from '@base-ui/react/tabs';
+import { type ComponentProps, type ReactNode } from 'react';
+declare const inspectorVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            section?: import("tailwind-merge").ClassNameValue;
+            marker?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            scrollbar?: import("tailwind-merge").ClassNameValue;
+            separator?: import("tailwind-merge").ClassNameValue;
+            tab?: import("tailwind-merge").ClassNameValue;
+            tooltip?: import("tailwind-merge").ClassNameValue;
+            page?: import("tailwind-merge").ClassNameValue;
+            viewport?: import("tailwind-merge").ClassNameValue;
+            panel?: import("tailwind-merge").ClassNameValue;
+            thumb?: import("tailwind-merge").ClassNameValue;
+            chevron?: import("tailwind-merge").ClassNameValue;
+            sectionTitle?: import("tailwind-merge").ClassNameValue;
+            railSeparator?: import("tailwind-merge").ClassNameValue;
+            sectionAction?: import("tailwind-merge").ClassNameValue;
+            rail?: import("tailwind-merge").ClassNameValue;
+            sectionContent?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            section?: import("tailwind-merge").ClassNameValue;
+            marker?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            scrollbar?: import("tailwind-merge").ClassNameValue;
+            separator?: import("tailwind-merge").ClassNameValue;
+            tab?: import("tailwind-merge").ClassNameValue;
+            tooltip?: import("tailwind-merge").ClassNameValue;
+            page?: import("tailwind-merge").ClassNameValue;
+            viewport?: import("tailwind-merge").ClassNameValue;
+            panel?: import("tailwind-merge").ClassNameValue;
+            thumb?: import("tailwind-merge").ClassNameValue;
+            chevron?: import("tailwind-merge").ClassNameValue;
+            sectionTitle?: import("tailwind-merge").ClassNameValue;
+            railSeparator?: import("tailwind-merge").ClassNameValue;
+            sectionAction?: import("tailwind-merge").ClassNameValue;
+            rail?: import("tailwind-merge").ClassNameValue;
+            sectionContent?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    rail: string[];
+    marker: string[];
+    tab: string[];
+    railSeparator: string;
+    tooltip: string[];
+    panel: string[];
+    page: string[];
+    viewport: string;
+    content: string;
+    scrollbar: string;
+    thumb: string;
+    section: string;
+    sectionTitle: string[];
+    chevron: string[];
+    sectionAction: string;
+    sectionContent: string[];
+    separator: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            section?: import("tailwind-merge").ClassNameValue;
+            marker?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            scrollbar?: import("tailwind-merge").ClassNameValue;
+            separator?: import("tailwind-merge").ClassNameValue;
+            tab?: import("tailwind-merge").ClassNameValue;
+            tooltip?: import("tailwind-merge").ClassNameValue;
+            page?: import("tailwind-merge").ClassNameValue;
+            viewport?: import("tailwind-merge").ClassNameValue;
+            panel?: import("tailwind-merge").ClassNameValue;
+            thumb?: import("tailwind-merge").ClassNameValue;
+            chevron?: import("tailwind-merge").ClassNameValue;
+            sectionTitle?: import("tailwind-merge").ClassNameValue;
+            railSeparator?: import("tailwind-merge").ClassNameValue;
+            sectionAction?: import("tailwind-merge").ClassNameValue;
+            rail?: import("tailwind-merge").ClassNameValue;
+            sectionContent?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    rail: string[];
+    marker: string[];
+    tab: string[];
+    railSeparator: string;
+    tooltip: string[];
+    panel: string[];
+    page: string[];
+    viewport: string;
+    content: string;
+    scrollbar: string;
+    thumb: string;
+    section: string;
+    sectionTitle: string[];
+    chevron: string[];
+    sectionAction: string;
+    sectionContent: string[];
+    separator: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    root: string;
+    rail: string[];
+    marker: string[];
+    tab: string[];
+    railSeparator: string;
+    tooltip: string[];
+    panel: string[];
+    page: string[];
+    viewport: string;
+    content: string;
+    scrollbar: string;
+    thumb: string;
+    section: string;
+    sectionTitle: string[];
+    chevron: string[];
+    sectionAction: string;
+    sectionContent: string[];
+    separator: string;
+}, undefined, unknown, unknown, undefined>>;
+export interface InspectorProps extends Omit<Tabs.Root.Props, 'className' | 'orientation'> {
+    className?: string;
+}
+/**
+ * The rail and the panel side by side. `defaultValue`, or `value` with
+ * `onValueChange`, names the page that is open.
+ */
+declare function InspectorRoot({ className, ...props }: InspectorProps): import("react").JSX.Element;
+declare namespace InspectorRoot {
+    var displayName: string;
+}
+export interface InspectorRailProps extends Omit<Tabs.List.Props, 'className'> {
+    className?: string;
+}
+/** The column of page icons, in a pill of its own beside the panel. */
+declare function InspectorRail({ className, children, ...props }: InspectorRailProps): import("react").JSX.Element;
+declare namespace InspectorRail {
+    var displayName: string;
+}
+export interface InspectorTabProps extends Omit<Tabs.Tab.Props, 'className' | 'children'> {
+    /** What the page is called: the tab's tooltip and its name for a screen reader. */
+    label: string;
+    /** The icon. */
+    children?: ReactNode;
+    className?: string;
+}
+/** One page's icon on the rail. */
+declare function InspectorTab({ label, className, children, ...props }: InspectorTabProps): import("react").JSX.Element;
+declare namespace InspectorTab {
+    var displayName: string;
+}
+export interface InspectorRailSeparatorProps extends ComponentProps<'span'> {
+}
+/** A short line between groups of pages on the rail. */
+declare function InspectorRailSeparator({ className, ...props }: InspectorRailSeparatorProps): import("react").JSX.Element;
+declare namespace InspectorRailSeparator {
+    var displayName: string;
+}
+export interface InspectorPanelProps extends ComponentProps<'div'> {
+}
+/**
+ * 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.
+ */
+declare function InspectorPanel({ className, children, ...props }: InspectorPanelProps): import("react").JSX.Element;
+declare namespace InspectorPanel {
+    var displayName: string;
+}
+export interface InspectorPageProps extends Omit<Tabs.Panel.Props, 'className'> {
+    className?: string;
+}
+/** What one tab opens: a column of sections that scrolls inside the panel. */
+declare function InspectorPage({ className, children, ...props }: InspectorPageProps): import("react").JSX.Element;
+declare namespace InspectorPage {
+    var displayName: string;
+}
+export interface InspectorSectionProps extends Omit<ComponentProps<'div'>, 'onChange'> {
+    /** Fold the section away by its title. Its content then shows only while it is open. */
+    collapsible?: boolean;
+    /** Whether a collapsible section starts open. Default true. */
+    defaultOpen?: boolean;
+    /** Whether a collapsible section is open, when the caller holds it. */
+    open?: boolean;
+    /** Called when a collapsible section opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+}
+/** A titled group of settings: a title, an action on its line, and the controls under them. */
+declare function InspectorSection({ collapsible, defaultOpen, open, onOpenChange, className, children, ...props }: InspectorSectionProps): import("react").JSX.Element;
+declare namespace InspectorSection {
+    var displayName: string;
+}
+export interface InspectorSectionTitleProps extends ComponentProps<'h3'> {
+}
+/** The section's name. In a collapsible section it is the button that folds it, with a chevron. */
+declare function InspectorSectionTitle({ className, children, ...props }: InspectorSectionTitleProps): import("react").JSX.Element;
+declare namespace InspectorSectionTitle {
+    var displayName: string;
+}
+export interface InspectorSectionActionProps extends ComponentProps<'div'> {
+}
+/** What sits at the end of the title's line: the switch for the whole section, or a Reset. */
+declare function InspectorSectionAction({ className, ...props }: InspectorSectionActionProps): import("react").JSX.Element;
+declare namespace InspectorSectionAction {
+    var displayName: string;
+}
+export interface InspectorSectionContentProps extends ComponentProps<'div'> {
+}
+/** The controls under the title, stacked with an even gap. */
+declare function InspectorSectionContent({ className, children, ...props }: InspectorSectionContentProps): import("react").JSX.Element;
+declare namespace InspectorSectionContent {
+    var displayName: string;
+}
+export interface InspectorSeparatorProps extends ComponentProps<'div'> {
+}
+/** A hairline between sections that belong to different things. */
+declare function InspectorSeparator({ className, ...props }: InspectorSeparatorProps): import("react").JSX.Element;
+declare namespace InspectorSeparator {
+    var displayName: string;
+}
+export declare const Inspector: typeof InspectorRoot & {
+    Rail: typeof InspectorRail;
+    Tab: typeof InspectorTab;
+    RailSeparator: typeof InspectorRailSeparator;
+    Panel: typeof InspectorPanel;
+    Page: typeof InspectorPage;
+    Section: typeof InspectorSection;
+    SectionTitle: typeof InspectorSectionTitle;
+    SectionAction: typeof InspectorSectionAction;
+    SectionContent: typeof InspectorSectionContent;
+    Separator: typeof InspectorSeparator;
+};
+export { InspectorRail, InspectorTab, InspectorRailSeparator, InspectorPanel, InspectorPage, InspectorSection, InspectorSectionTitle, InspectorSectionAction, InspectorSectionContent, InspectorSeparator, inspectorVariants, };

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;