@tulipfarm/sprout 0.0.0-stage → 0.2.0

package/dist/components/command.js

@@ -0,0 +1,414 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, isValidElement, useContext, useId, useLayoutEffect, useRef, useState, useSyncExternalStore, } from "react";
+import { Check } from "reicon-react/icons/Check";
+import { Search } from "reicon-react/icons/Search";
+import { cn } from "../internal/classes.js";
+import { Dialog, DialogContent, DialogDescription, DialogTitle, } from "./dialog.js";
+const normalize = (text) => text
+    .normalize("NFD")
+    .replace(/\p{Diacritic}/gu, "")
+    .toLowerCase();
+function tokenScore(haystack, token) {
+    const index = haystack.indexOf(token);
+    if (index === 0)
+        return 1;
+    if (index > 0)
+        return /[\s\-_/.(]/.test(haystack[index - 1]) ? 0.9 : 0.7;
+    let from = 0;
+    let last = -1;
+    let gaps = 0;
+    for (const char of token) {
+        const found = haystack.indexOf(char, from);
+        if (found === -1)
+            return 0;
+        if (last >= 0)
+            gaps += found - last - 1;
+        last = found;
+        from = found + 1;
+    }
+    return Math.max(0.05, 0.5 - gaps * 0.02);
+}
+/**
+ * The default filter. Every word of the search must appear in the value or a
+ * keyword, as a substring or in order with gaps. Prefix and word-start matches
+ * rank above loose ones. Case and accents are ignored.
+ */
+export const defaultCommandFilter = (value, search, keywords = []) => {
+    const haystack = normalize([value, ...keywords].join(" "));
+    const tokens = normalize(search).trim().split(/\s+/).filter(Boolean);
+    let score = 1;
+    for (const token of tokens)
+        score = Math.min(score, tokenScore(haystack, token));
+    return score;
+};
+class CommandStore {
+    search = "";
+    active = null;
+    ready = false;
+    count = 0;
+    version = 0;
+    needsFirst = true;
+    options = { filter: defaultCommandFilter, shouldFilter: true };
+    items = new Map();
+    scores = new Map();
+    groupScores = new Map();
+    listeners = new Set();
+    scheduled = false;
+    subscribe = (listener) => {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    };
+    get filtering() {
+        return this.options.shouldFilter && this.search.trim() !== "";
+    }
+    emit() {
+        this.version++;
+        for (const listener of this.listeners)
+            listener();
+    }
+    refilter() {
+        this.scores.clear();
+        this.groupScores.clear();
+        let count = 0;
+        for (const [id, entry] of this.items) {
+            const score = this.filtering
+                ? this.options.filter(entry.value, this.search, entry.keywords)
+                : 1;
+            if (score <= 0)
+                continue;
+            count++;
+            this.scores.set(id, score);
+            if (entry.group)
+                this.groupScores.set(entry.group, Math.max(score, this.groupScores.get(entry.group) ?? 0));
+        }
+        this.count = count;
+    }
+    /** Coalesces item registrations into one refilter and render. */
+    schedule() {
+        if (this.scheduled)
+            return;
+        this.scheduled = true;
+        queueMicrotask(() => {
+            this.scheduled = false;
+            this.refilter();
+            if (this.active && !this.scores.has(this.active))
+                this.needsFirst = true;
+            this.emit();
+        });
+    }
+    setSearch(search) {
+        if (search === this.search)
+            return;
+        this.search = search;
+        this.refilter();
+        this.needsFirst = true;
+        this.emit();
+    }
+    setActive(id) {
+        if (id === this.active)
+            return;
+        this.active = id;
+        this.emit();
+    }
+    isVisible(id) {
+        return !this.filtering || this.scores.has(id);
+    }
+    order(score) {
+        return this.filtering && score ? -Math.round(score * 1000) : undefined;
+    }
+}
+const CommandContext = createContext(null);
+const GroupContext = createContext(null);
+function useCommandContext(part) {
+    const context = useContext(CommandContext);
+    if (!context)
+        throw new Error(`${part} must be inside Command.`);
+    return context;
+}
+function useStore(store, read) {
+    return useSyncExternalStore(store.subscribe, read, read);
+}
+const ITEM = '[data-slot="command-item"]';
+function orderOf(element) {
+    return element instanceof HTMLElement ? Number(element.style.order || 0) : 0;
+}
+/** Enabled items in visual order: groups and items reorder by score while searching. */
+function enabledItems(root) {
+    const items = [
+        ...root.querySelectorAll(`${ITEM}:not([aria-disabled="true"])`),
+    ].filter((item) => item.closest('[data-slot="command"]') === root);
+    const keyed = items.map((item) => {
+        const group = item.closest('[data-slot="command-group"]');
+        return group && root.contains(group)
+            ? { item, group, outer: orderOf(group), inner: orderOf(item) }
+            : { item, group: null, outer: orderOf(item), inner: 0 };
+    });
+    return keyed.sort((a, b) => a.outer - b.outer || a.inner - b.inner);
+}
+/**
+ * A searchable list of actions. Type to filter, move with the arrow keys,
+ * and press Enter to choose. Focus stays in the search input while the
+ * active item is announced through `aria-activedescendant`.
+ */
+export function Command({ label, shouldFilter = true, filter = defaultCommandFilter, loop = false, className, children, onKeyDown, ref, ...props }) {
+    const [store] = useState(() => new CommandStore());
+    const root = useRef(null);
+    const id = useId();
+    const context = useRef({
+        store,
+        listId: `${id}-list`,
+        inputId: `${id}-input`,
+        labelId: `${id}-label`,
+        label,
+    }).current;
+    context.label = label;
+    const version = useStore(store, () => store.version);
+    useLayoutEffect(() => {
+        const changed = store.options.filter !== filter ||
+            store.options.shouldFilter !== shouldFilter;
+        store.options = { filter, shouldFilter };
+        if (changed && store.ready) {
+            store.refilter();
+            store.needsFirst = true;
+            store.emit();
+        }
+    }, [store, filter, shouldFilter]);
+    useLayoutEffect(() => {
+        if (!store.ready) {
+            store.ready = true;
+            store.refilter();
+            store.emit();
+            return;
+        }
+        if (!store.needsFirst || !root.current)
+            return;
+        store.needsFirst = false;
+        const first = enabledItems(root.current)[0]?.item;
+        store.setActive(first?.id ?? null);
+        root.current
+            .querySelector('[data-slot="command-list"]')
+            ?.scrollTo({ top: 0 });
+    }, [store, version]);
+    const move = (to) => {
+        if (!root.current)
+            return;
+        const items = enabledItems(root.current);
+        if (!items.length)
+            return;
+        const index = items.findIndex(({ item }) => item.id === store.active);
+        const next = items[to(items, index)];
+        if (!next)
+            return;
+        store.setActive(next.item.id);
+        const firstInGroup = next.group && items.find(({ group }) => group === next.group) === next;
+        const heading = firstInGroup
+            ? next.group.querySelector('[data-slot="command-group-heading"]')
+            : null;
+        (heading ?? next.item).scrollIntoView({ block: "nearest" });
+        if (heading)
+            next.item.scrollIntoView({ block: "nearest" });
+    };
+    const step = (delta) => move((items, index) => {
+        if (index === -1)
+            return delta === 1 ? 0 : items.length - 1;
+        const next = index + delta;
+        if (loop)
+            return (next + items.length) % items.length;
+        return Math.min(Math.max(next, 0), items.length - 1);
+    });
+    const jumpGroup = (delta) => move((items, index) => {
+        const current = items[index];
+        if (!current)
+            return 0;
+        const groups = [...new Set(items.map(({ group }) => group))];
+        const next = groups[groups.indexOf(current.group) + delta];
+        if (next === undefined)
+            return index;
+        return items.findIndex(({ group }) => group === next);
+    });
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || event.nativeEvent.isComposing)
+            return;
+        const target = event.target;
+        const fromInput = target.dataset.slot === "command-input";
+        if (!fromInput &&
+            target.closest("button, a[href], input, textarea, select, [contenteditable]"))
+            return;
+        const vim = event.ctrlKey && !event.metaKey && !event.altKey;
+        switch (event.key) {
+            case "ArrowDown":
+            case "ArrowUp": {
+                const delta = event.key === "ArrowDown" ? 1 : -1;
+                if (event.metaKey)
+                    move((items) => (delta === 1 ? items.length - 1 : 0));
+                else if (event.altKey)
+                    jumpGroup(delta);
+                else
+                    step(delta);
+                break;
+            }
+            case "n":
+            case "j":
+                if (!vim)
+                    return;
+                step(1);
+                break;
+            case "p":
+            case "k":
+                if (!vim)
+                    return;
+                step(-1);
+                break;
+            case "Home":
+                move(() => 0);
+                break;
+            case "End":
+                move((items) => items.length - 1);
+                break;
+            case "Enter": {
+                if (!store.active)
+                    return;
+                const entry = store.items.get(store.active);
+                if (!entry)
+                    return;
+                event.preventDefault();
+                entry.select();
+                return;
+            }
+            default:
+                return;
+        }
+        event.preventDefault();
+    };
+    return (_jsx(CommandContext.Provider, { value: context, children: _jsxs("div", { "data-slot": "command", ...props, ref: (node) => {
+                root.current = node;
+                if (typeof ref === "function")
+                    return ref(node);
+                if (ref)
+                    ref.current = node;
+            }, className: cn("sprout-command", className), onKeyDown: handleKeyDown, children: [label && (_jsx("label", { id: context.labelId, htmlFor: context.inputId, className: "sprout-command-sr-only", children: label })), children] }) }));
+}
+/** The search field with a leading magnifier. It drives filtering and keyboard navigation. */
+export function CommandInput({ value, onValueChange, onChange, className, id, ...props }) {
+    const { store, listId, inputId, labelId, label } = useCommandContext("CommandInput");
+    const search = useStore(store, () => store.search);
+    const active = useStore(store, () => store.active);
+    const empty = useStore(store, () => store.ready && store.count === 0);
+    useLayoutEffect(() => {
+        if (value !== undefined)
+            store.setSearch(value);
+    }, [store, value]);
+    return (_jsx("div", { "data-slot": "command-input-wrapper", className: "sprout-command-input-wrapper", children: _jsxs("div", { "data-slot": "command-input-group", className: "sprout-command-input-group", children: [_jsx(Search, { size: 16, "aria-hidden": "true", className: "sprout-command-input-icon" }), _jsx("input", { id: id ?? inputId, type: "text", role: "combobox", autoComplete: "off", autoCorrect: "off", spellCheck: false, "aria-autocomplete": "list", "aria-expanded": !empty, "aria-controls": listId, "aria-labelledby": label && !props["aria-label"] ? labelId : undefined, "aria-activedescendant": active ?? undefined, "data-slot": "command-input", ...props, value: value ?? search, onChange: (event) => {
+                        onChange?.(event);
+                        onValueChange?.(event.target.value);
+                        if (value === undefined)
+                            store.setSearch(event.target.value);
+                    }, className: cn("sprout-command-input", className) })] }) }));
+}
+/**
+ * The scrolling listbox. It caps at 18rem and keeps the active item in view.
+ * While nothing matches it drops the listbox role so `CommandEmpty` can hold
+ * ordinary content such as a Clear search button.
+ */
+export function CommandList({ className, children, ...props }) {
+    const { store, listId, label } = useCommandContext("CommandList");
+    const empty = useStore(store, () => store.ready && store.count === 0);
+    const { "aria-label": ariaLabel = props["aria-labelledby"]
+        ? undefined
+        : (label ?? "Suggestions"), "aria-labelledby": ariaLabelledBy, ...rest } = props;
+    return (_jsx("div", { id: listId, role: empty ? undefined : "listbox", tabIndex: empty ? undefined : -1, "aria-label": empty ? undefined : ariaLabel, "aria-labelledby": empty ? undefined : ariaLabelledBy, "data-slot": "command-list", "data-empty": empty || undefined, ...rest, className: cn("sprout-command-list", className), children: _jsx("div", { "data-slot": "command-list-sizer", className: "sprout-command-list-sizer", children: children }) }));
+}
+/** Shown only when no item matches the search. It can hold a recovery action. */
+export function CommandEmpty({ className, ...props }) {
+    const { store } = useCommandContext("CommandEmpty");
+    const empty = useStore(store, () => store.ready && store.count === 0);
+    if (!empty)
+        return null;
+    return (_jsx("div", { role: "presentation", "data-slot": "command-empty", ...props, className: cn("sprout-command-empty", className) }));
+}
+/** Groups related items under an optional heading. It hides when none of its items match. */
+export function CommandGroup({ heading, forceMount = false, className, children, style, ...props }) {
+    const { store } = useCommandContext("CommandGroup");
+    const id = useId();
+    const headingId = `${id}-heading`;
+    const score = useStore(store, () => store.groupScores.get(id));
+    const filtering = useStore(store, () => store.filtering);
+    const hidden = filtering && score === undefined && !forceMount;
+    return (_jsxs("div", { role: "presentation", "data-slot": "command-group", hidden: hidden || undefined, ...props, style: { order: store.order(score), ...style }, className: cn("sprout-command-group", className), children: [heading != null && heading !== false && (_jsx("div", { id: headingId, "aria-hidden": "true", "data-slot": "command-group-heading", className: "sprout-command-group-heading", children: heading })), _jsx("div", { role: "group", "aria-labelledby": heading != null && heading !== false ? headingId : undefined, "data-slot": "command-group-items", className: "sprout-command-group-items", children: _jsx(GroupContext.Provider, { value: id, children: children }) })] }));
+}
+export function CommandSeparator({ alwaysRender = false, className, ...props }) {
+    const { store } = useCommandContext("CommandSeparator");
+    const searching = useStore(store, () => store.search !== "");
+    if (searching && !alwaysRender)
+        return null;
+    return (_jsx("div", { "aria-hidden": "true", "data-slot": "command-separator", ...props, className: cn("sprout-command-separator", className) }));
+}
+function textOf(node) {
+    if (typeof node === "string" || typeof node === "number")
+        return String(node);
+    if (Array.isArray(node))
+        return node.map(textOf).join("");
+    if (isValidElement(node))
+        return textOf(node.props.children);
+    return "";
+}
+/**
+ * One choice. Put an icon first, then the label. A trailing check marks the
+ * current choice with `data-checked`; a `CommandShortcut` replaces it.
+ */
+export function CommandItem({ value, keywords, disabled = false, onSelect, forceMount = false, className, children, style, onClick, onPointerMove, onPointerDown, ...props }) {
+    const { store } = useCommandContext("CommandItem");
+    const group = useContext(GroupContext);
+    const id = useId();
+    const resolved = (value ?? textOf(children)).trim();
+    const select = useRef(() => { });
+    select.current = () => {
+        if (!disabled)
+            onSelect?.(resolved);
+    };
+    const keywordKey = (keywords ?? []).join("\u0000");
+    useLayoutEffect(() => {
+        store.items.set(id, {
+            value: resolved,
+            keywords: keywordKey ? keywordKey.split("\u0000") : [],
+            group,
+            select: () => select.current(),
+        });
+        store.schedule();
+        return () => {
+            store.items.delete(id);
+            if (store.active === id)
+                store.needsFirst = true;
+            store.schedule();
+        };
+    }, [store, id, resolved, keywordKey, group]);
+    const visible = useStore(store, () => forceMount || store.isVisible(id));
+    const active = useStore(store, () => store.active === id);
+    const score = useStore(store, () => store.scores.get(id));
+    if (!visible)
+        return null;
+    return (_jsxs("div", { id: id, role: "option", "aria-selected": active, "aria-disabled": disabled || undefined, "data-selected": active || undefined, "data-disabled": disabled || undefined, "data-value": resolved, "data-slot": "command-item", ...props, style: { order: store.order(score), ...style }, className: cn("sprout-command-item", className), onPointerDown: (event) => {
+            onPointerDown?.(event);
+            // Keep focus in the search input so typing and arrows keep working.
+            if (!event.defaultPrevented)
+                event.preventDefault();
+        }, onPointerMove: (event) => {
+            onPointerMove?.(event);
+            if (!disabled && !event.defaultPrevented)
+                store.setActive(id);
+        }, onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                select.current();
+        }, children: [children, _jsx(Check, { size: 16, "aria-hidden": "true", className: "sprout-command-item-check" })] }));
+}
+/** A keyboard hint at the end of an item. */
+export function CommandShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "command-shortcut", ...props, className: cn("sprout-command-shortcut", className) }));
+}
+/** A command palette pinned near the top of the viewport. */
+export function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", className, showCloseButton = false, closeLabel, container, children, ...props }) {
+    return (_jsx(Dialog, { ...props, children: _jsxs(DialogContent, { placement: "top", showCloseButton: showCloseButton, closeLabel: closeLabel, container: container, className: cn("sprout-command-dialog", className), children: [_jsx(DialogTitle, { className: "sprout-command-sr-only", children: title }), _jsx(DialogDescription, { className: "sprout-command-sr-only", children: description }), children] }) }));
+}

package/dist/components/context-menu.d.ts

@@ -0,0 +1,57 @@
+import type { ComponentProps } from "react";
+import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu";
+export declare const contextMenuItemVariantNames: readonly ["default", "destructive"];
+export type ContextMenuItemVariant = (typeof contextMenuItemVariantNames)[number];
+export type ContextMenuProps = ContextMenuPrimitive.Root.Props;
+/** Opens a menu at the pointer on right-click, or after a long press on touch screens. */
+export declare function ContextMenu(props: ContextMenuProps): import("react").JSX.Element;
+export type ContextMenuPortalProps = ContextMenuPrimitive.Portal.Props;
+export declare function ContextMenuPortal(props: ContextMenuPortalProps): import("react").JSX.Element;
+export type ContextMenuTriggerProps = ContextMenuPrimitive.Trigger.Props;
+/** The area that opens the menu. It renders a `div`; pass `render` to use another element. */
+export declare function ContextMenuTrigger({ className, ...props }: ContextMenuTriggerProps): import("react").JSX.Element;
+type PositionerProps = Pick<ContextMenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "collisionPadding" | "collisionAvoidance" | "sticky" | "positionMethod">;
+export interface ContextMenuContentProps extends ContextMenuPrimitive.Popup.Props, PositionerProps {
+    /** Where the portal renders. Defaults to `document.body`. */
+    container?: ContextMenuPrimitive.Portal.Props["container"];
+}
+/**
+ * The menu surface. It renders its own portal and positioner and opens beside
+ * the pointer, so place it directly inside `ContextMenu` or `ContextMenuSub`.
+ */
+export declare function ContextMenuContent({ align, alignOffset, side, sideOffset, collisionPadding, collisionAvoidance, sticky, positionMethod, container, className, ...props }: ContextMenuContentProps): import("react").JSX.Element;
+export type ContextMenuGroupProps = ContextMenuPrimitive.Group.Props;
+export declare function ContextMenuGroup(props: ContextMenuGroupProps): import("react").JSX.Element;
+interface Inset {
+    /** Indents the text to line up with items that have a leading icon. */
+    inset?: boolean;
+}
+export interface ContextMenuLabelProps extends ContextMenuPrimitive.GroupLabel.Props, Inset {
+}
+export declare function ContextMenuLabel({ className, inset, ...props }: ContextMenuLabelProps): import("react").JSX.Element;
+export interface ContextMenuItemProps extends ContextMenuPrimitive.Item.Props, Inset {
+    variant?: ContextMenuItemVariant;
+}
+export declare function ContextMenuItem({ className, inset, variant, ...props }: ContextMenuItemProps): import("react").JSX.Element;
+export type ContextMenuSubProps = ContextMenuPrimitive.SubmenuRoot.Props;
+export declare function ContextMenuSub(props: ContextMenuSubProps): import("react").JSX.Element;
+export interface ContextMenuSubTriggerProps extends ContextMenuPrimitive.SubmenuTrigger.Props, Inset {
+}
+export declare function ContextMenuSubTrigger({ className, inset, children, ...props }: ContextMenuSubTriggerProps): import("react").JSX.Element;
+export type ContextMenuSubContentProps = ContextMenuContentProps;
+/** A nested menu surface. It opens to the side of its sub trigger. */
+export declare function ContextMenuSubContent({ alignOffset, side, className, ...props }: ContextMenuSubContentProps): import("react").JSX.Element;
+export interface ContextMenuCheckboxItemProps extends ContextMenuPrimitive.CheckboxItem.Props, Inset {
+}
+export declare function ContextMenuCheckboxItem({ className, inset, children, ...props }: ContextMenuCheckboxItemProps): import("react").JSX.Element;
+export type ContextMenuRadioGroupProps = ContextMenuPrimitive.RadioGroup.Props;
+export declare function ContextMenuRadioGroup(props: ContextMenuRadioGroupProps): import("react").JSX.Element;
+export interface ContextMenuRadioItemProps extends ContextMenuPrimitive.RadioItem.Props, Inset {
+}
+export declare function ContextMenuRadioItem({ className, inset, children, ...props }: ContextMenuRadioItemProps): import("react").JSX.Element;
+export type ContextMenuSeparatorProps = ContextMenuPrimitive.Separator.Props;
+export declare function ContextMenuSeparator({ className, ...props }: ContextMenuSeparatorProps): import("react").JSX.Element;
+export type ContextMenuShortcutProps = ComponentProps<"span">;
+/** Right-aligned hint text, such as a keyboard shortcut. It does not bind keys. */
+export declare function ContextMenuShortcut({ className, ...props }: ContextMenuShortcutProps): import("react").JSX.Element;
+export {};

package/dist/components/context-menu.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu";
+import { Check } from "reicon-react/icons/Check";
+import { ChevronRight } from "reicon-react/icons/ChevronRight";
+import { cn, stateClassName } from "../internal/classes.js";
+export const contextMenuItemVariantNames = ["default", "destructive"];
+/** Opens a menu at the pointer on right-click, or after a long press on touch screens. */
+export function ContextMenu(props) {
+    return _jsx(ContextMenuPrimitive.Root, { ...props });
+}
+export function ContextMenuPortal(props) {
+    return (_jsx(ContextMenuPrimitive.Portal, { "data-slot": "context-menu-portal", ...props }));
+}
+/** The area that opens the menu. It renders a `div`; pass `render` to use another element. */
+export function ContextMenuTrigger({ className, ...props }) {
+    return (_jsx(ContextMenuPrimitive.Trigger, { "data-slot": "context-menu-trigger", ...props, className: stateClassName("sprout-context-menu-trigger", className) }));
+}
+/**
+ * The menu surface. It renders its own portal and positioner and opens beside
+ * the pointer, so place it directly inside `ContextMenu` or `ContextMenuSub`.
+ */
+export function ContextMenuContent({ align = "start", alignOffset = 4, side = "right", sideOffset = 0, collisionPadding = 8, collisionAvoidance, sticky, positionMethod, container, className, ...props }) {
+    return (_jsx(ContextMenuPrimitive.Portal, { container: container, children: _jsx(ContextMenuPrimitive.Positioner, { className: "sprout-context-menu-positioner", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, collisionPadding: collisionPadding, collisionAvoidance: collisionAvoidance, sticky: sticky, positionMethod: positionMethod, children: _jsx(ContextMenuPrimitive.Popup, { "data-slot": "context-menu-content", ...props, className: stateClassName("sprout-context-menu-content", className) }) }) }));
+}
+export function ContextMenuGroup(props) {
+    return (_jsx(ContextMenuPrimitive.Group, { "data-slot": "context-menu-group", ...props }));
+}
+export function ContextMenuLabel({ className, inset, ...props }) {
+    return (_jsx(ContextMenuPrimitive.GroupLabel, { "data-slot": "context-menu-label", "data-inset": inset || undefined, ...props, className: stateClassName("sprout-context-menu-label", className) }));
+}
+export function ContextMenuItem({ className, inset, variant = "default", ...props }) {
+    return (_jsx(ContextMenuPrimitive.Item, { "data-slot": "context-menu-item", "data-inset": inset || undefined, "data-variant": variant, ...props, className: stateClassName("sprout-context-menu-item", className) }));
+}
+export function ContextMenuSub(props) {
+    return _jsx(ContextMenuPrimitive.SubmenuRoot, { ...props });
+}
+export function ContextMenuSubTrigger({ className, inset, children, ...props }) {
+    return (_jsxs(ContextMenuPrimitive.SubmenuTrigger, { "data-slot": "context-menu-sub-trigger", "data-inset": inset || undefined, ...props, className: stateClassName("sprout-context-menu-item sprout-context-menu-sub-trigger", className), children: [children, _jsx(ChevronRight, { size: 16, "aria-hidden": "true", className: "sprout-context-menu-sub-chevron" })] }));
+}
+/** A nested menu surface. It opens to the side of its sub trigger. */
+export function ContextMenuSubContent({ alignOffset = -5, side = "right", className, ...props }) {
+    return (_jsx(ContextMenuContent, { "data-slot": "context-menu-sub-content", alignOffset: alignOffset, side: side, ...props, className: stateClassName("sprout-context-menu-sub-content", className) }));
+}
+export function ContextMenuCheckboxItem({ className, inset, children, ...props }) {
+    return (_jsxs(ContextMenuPrimitive.CheckboxItem, { "data-slot": "context-menu-checkbox-item", "data-inset": inset || undefined, ...props, className: stateClassName("sprout-context-menu-item sprout-context-menu-choice", className), children: [_jsx("span", { className: "sprout-context-menu-indicator", "data-slot": "context-menu-checkbox-item-indicator", children: _jsx(ContextMenuPrimitive.CheckboxItemIndicator, { children: _jsx(Check, { size: 16, "aria-hidden": "true" }) }) }), children] }));
+}
+export function ContextMenuRadioGroup(props) {
+    return (_jsx(ContextMenuPrimitive.RadioGroup, { "data-slot": "context-menu-radio-group", ...props }));
+}
+export function ContextMenuRadioItem({ className, inset, children, ...props }) {
+    return (_jsxs(ContextMenuPrimitive.RadioItem, { "data-slot": "context-menu-radio-item", "data-inset": inset || undefined, ...props, className: stateClassName("sprout-context-menu-item sprout-context-menu-choice", className), children: [_jsx("span", { className: "sprout-context-menu-indicator", "data-slot": "context-menu-radio-item-indicator", children: _jsx(ContextMenuPrimitive.RadioItemIndicator, { children: _jsx(Check, { size: 16, "aria-hidden": "true" }) }) }), children] }));
+}
+export function ContextMenuSeparator({ className, ...props }) {
+    return (_jsx(ContextMenuPrimitive.Separator, { "data-slot": "context-menu-separator", ...props, className: stateClassName("sprout-context-menu-separator", className) }));
+}
+/** Right-aligned hint text, such as a keyboard shortcut. It does not bind keys. */
+export function ContextMenuShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "context-menu-shortcut", ...props, className: cn("sprout-context-menu-shortcut", className) }));
+}

package/dist/components/dialog.d.ts

@@ -0,0 +1,60 @@
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { useRender } from "@base-ui/react/use-render";
+export declare const dialogSizeNames: readonly ["default", "form", "split", "fullscreen"];
+export declare const dialogPlacementNames: readonly ["center", "top"];
+export type DialogSize = (typeof dialogSizeNames)[number];
+export type DialogPlacement = (typeof dialogPlacementNames)[number];
+export type DialogProps = DialogPrimitive.Root.Props;
+export declare function Dialog(props: DialogProps): import("react").JSX.Element;
+export type DialogTriggerProps = DialogPrimitive.Trigger.Props;
+export declare function DialogTrigger(props: DialogTriggerProps): import("react").JSX.Element;
+export type DialogPortalProps = DialogPrimitive.Portal.Props;
+export declare function DialogPortal(props: DialogPortalProps): import("react").JSX.Element;
+export type DialogCloseProps = DialogPrimitive.Close.Props;
+export declare function DialogClose(props: DialogCloseProps): import("react").JSX.Element;
+export type DialogOverlayProps = DialogPrimitive.Backdrop.Props;
+export declare function DialogOverlay({ className, ...props }: DialogOverlayProps): import("react").JSX.Element;
+export interface DialogContentProps extends DialogPrimitive.Popup.Props {
+    /** Adds a ghost icon button in the top-right corner. Defaults to `true`. */
+    showCloseButton?: boolean;
+    /** Accessible name of the corner close button. */
+    closeLabel?: string;
+    size?: DialogSize;
+    /** `top` pins the dialog near the top of the viewport for search and command palettes. */
+    placement?: DialogPlacement;
+    /** Where the portal renders. Defaults to `document.body`. */
+    container?: DialogPrimitive.Portal.Props["container"];
+}
+/**
+ * The dialog surface. It renders its own portal and overlay, so place it
+ * directly inside `Dialog`.
+ */
+export declare function DialogContent({ className, children, showCloseButton, closeLabel, size, placement, container, ...props }: DialogContentProps): import("react").JSX.Element;
+type PartSlot = "dialog-header" | "dialog-body";
+export interface DialogPartState extends Record<string, unknown> {
+    slot: PartSlot | "dialog-footer";
+}
+export type DialogPartProps = useRender.ComponentProps<"div", DialogPartState>;
+/** Stacks the title and description. */
+export declare const DialogHeader: ({ className, render, ref, ...props }: DialogPartProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * The scrolling middle of a `form` dialog. It bleeds to the dialog edges so
+ * scrollbars and focus rings are not clipped.
+ */
+export declare const DialogBody: ({ className, render, ref, ...props }: DialogPartProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export interface DialogFooterProps extends DialogPartProps {
+    /** Appends an outline Close button after the other actions. */
+    showCloseButton?: boolean;
+    closeLabel?: string;
+}
+/**
+ * A tinted action bar pinned to the bottom edge. Actions stack in reverse
+ * order on narrow screens and align right from 640px. A leading `<p>` becomes
+ * a hint that sits at the start.
+ */
+export declare function DialogFooter({ className, render, ref, showCloseButton, closeLabel, children, ...props }: DialogFooterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type DialogTitleProps = DialogPrimitive.Title.Props;
+export declare function DialogTitle({ className, ...props }: DialogTitleProps): import("react").JSX.Element;
+export type DialogDescriptionProps = DialogPrimitive.Description.Props;
+export declare function DialogDescription({ className, ...props }: DialogDescriptionProps): import("react").JSX.Element;
+export {};