@tulipfarm/sprout 0.3.1 → 0.4.0

package/dist/components/command.d.ts

@@ -1,5 +1,5 @@
-import { type ChangeEvent, type ComponentProps, type ReactNode } from "react";
-import { type DialogContentProps, type DialogProps } from "./dialog.js";
+import { type ChangeEvent, type ComponentProps, type ReactNode } from 'react';
+import { type DialogContentProps, type DialogProps } from './dialog.js';
 /** Scores how well `value` and `keywords` match `search`. `0` hides the item; higher ranks first. */
 export type CommandFilter = (value: string, search: string, keywords?: readonly string[]) => number;
 /**
@@ -8,7 +8,7 @@ export type CommandFilter = (value: string, search: string, keywords?: readonly
  * rank above loose ones. Case and accents are ignored.
  */
 export declare const defaultCommandFilter: CommandFilter;
-export interface CommandProps extends ComponentProps<"div"> {
+export interface CommandProps extends ComponentProps<'div'> {
     /** Accessible name for the search input when it has no `aria-label`. */
     label?: string;
     /** Set to `false` to filter items yourself and render only the matches. */
@@ -24,7 +24,7 @@ export interface CommandProps extends ComponentProps<"div"> {
  * active item is announced through `aria-activedescendant`.
  */
 export declare function Command({ label, shouldFilter, filter, loop, className, children, onKeyDown, ref, ...props }: CommandProps): import("react").JSX.Element;
-export interface CommandInputProps extends Omit<ComponentProps<"input">, "value" | "defaultValue" | "onChange" | "type"> {
+export interface CommandInputProps extends Omit<ComponentProps<'input'>, 'value' | 'defaultValue' | 'onChange' | 'type'> {
     /** Controlled search text. */
     value?: string;
     onValueChange?: (search: string) => void;
@@ -32,17 +32,17 @@ export interface CommandInputProps extends Omit<ComponentProps<"input">, "value"
 }
 /** The search field with a leading magnifier. It drives filtering and keyboard navigation. */
 export declare function CommandInput({ value, onValueChange, onChange, className, id, ...props }: CommandInputProps): import("react").JSX.Element;
-export type CommandListProps = ComponentProps<"div">;
+export type CommandListProps = ComponentProps<'div'>;
 /**
  * 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 declare function CommandList({ className, children, ...props }: CommandListProps): import("react").JSX.Element;
-export type CommandEmptyProps = ComponentProps<"div">;
+export type CommandEmptyProps = ComponentProps<'div'>;
 /** Shown only when no item matches the search. It can hold a recovery action. */
 export declare function CommandEmpty({ className, ...props }: CommandEmptyProps): import("react").JSX.Element | null;
-export interface CommandGroupProps extends Omit<ComponentProps<"div">, "value"> {
+export interface CommandGroupProps extends Omit<ComponentProps<'div'>, 'value'> {
     /** Small muted label above the items. Omit for an unlabeled group. */
     heading?: ReactNode;
     /** Keep the group visible even when none of its items match. */
@@ -50,12 +50,12 @@ export interface CommandGroupProps extends Omit<ComponentProps<"div">, "value">
 }
 /** Groups related items under an optional heading. It hides when none of its items match. */
 export declare function CommandGroup({ heading, forceMount, className, children, style, ...props }: CommandGroupProps): import("react").JSX.Element;
-export interface CommandSeparatorProps extends ComponentProps<"div"> {
+export interface CommandSeparatorProps extends ComponentProps<'div'> {
     /** Keep the line while searching. By default it hides once the user types. */
     alwaysRender?: boolean;
 }
 export declare function CommandSeparator({ alwaysRender, className, ...props }: CommandSeparatorProps): import("react").JSX.Element | null;
-export interface CommandItemProps extends Omit<ComponentProps<"div">, "value" | "onSelect"> {
+export interface CommandItemProps extends Omit<ComponentProps<'div'>, 'value' | 'onSelect'> {
     /** Text the filter matches and `onSelect` receives. Defaults to the item's text. */
     value?: string;
     /** Extra words that match this item, such as a name when `value` is an id. */
@@ -66,17 +66,17 @@ export interface CommandItemProps extends Omit<ComponentProps<"div">, "value" |
     /** Keep the item visible even when it doesn't match the search. */
     forceMount?: boolean;
     /** `true` shows a trailing check for the current choice. Hidden when the item has a shortcut. */
-    "data-checked"?: boolean;
+    'data-checked'?: boolean;
 }
 /**
  * One choice. Put an icon first, then the label. A trailing check marks the
  * current choice with `data-checked`; a `CommandShortcut` replaces it.
  */
 export declare function CommandItem({ value, keywords, disabled, onSelect, forceMount, className, children, style, onClick, onPointerMove, onPointerDown, ...props }: CommandItemProps): import("react").JSX.Element | null;
-export type CommandShortcutProps = ComponentProps<"span">;
+export type CommandShortcutProps = ComponentProps<'span'>;
 /** A keyboard hint at the end of an item. */
 export declare function CommandShortcut({ className, ...props }: CommandShortcutProps): import("react").JSX.Element;
-export interface CommandDialogProps extends Omit<DialogProps, "children"> {
+export interface CommandDialogProps extends Omit<DialogProps, 'children'> {
     /** Visually hidden dialog title. */
     title?: string;
     /** Visually hidden dialog description. */
@@ -86,7 +86,7 @@ export interface CommandDialogProps extends Omit<DialogProps, "children"> {
     showCloseButton?: boolean;
     closeLabel?: string;
     /** Where the portal renders. Defaults to `document.body`. */
-    container?: DialogContentProps["container"];
+    container?: DialogContentProps['container'];
     /** Usually a `Command`. */
     children: ReactNode;
 }

package/dist/components/command.js

@@ -1,13 +1,13 @@
-"use client";
+'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";
+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, "")
+    .normalize('NFD')
+    .replace(/\p{Diacritic}/gu, '')
     .toLowerCase();
 function tokenScore(haystack, token) {
     const index = haystack.indexOf(token);
@@ -35,7 +35,7 @@ function tokenScore(haystack, token) {
  * rank above loose ones. Case and accents are ignored.
  */
 export const defaultCommandFilter = (value, search, keywords = []) => {
-    const haystack = normalize([value, ...keywords].join(" "));
+    const haystack = normalize([value, ...keywords].join(' '));
     const tokens = normalize(search).trim().split(/\s+/).filter(Boolean);
     let score = 1;
     for (const token of tokens)
@@ -43,7 +43,7 @@ export const defaultCommandFilter = (value, search, keywords = []) => {
     return score;
 };
 class CommandStore {
-    search = "";
+    search = '';
     active = null;
     ready = false;
     count = 0;
@@ -60,7 +60,7 @@ class CommandStore {
         return () => this.listeners.delete(listener);
     };
     get filtering() {
-        return this.options.shouldFilter && this.search.trim() !== "";
+        return this.options.shouldFilter && this.search.trim() !== '';
     }
     emit() {
         this.version++;
@@ -72,9 +72,7 @@ class CommandStore {
         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;
+            const score = this.filtering ? this.options.filter(entry.value, this.search, entry.keywords) : 1;
             if (score <= 0)
                 continue;
             count++;
@@ -135,10 +133,8 @@ function orderOf(element) {
 }
 /** 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 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) }
@@ -165,8 +161,7 @@ export function Command({ label, shouldFilter = true, filter = defaultCommandFil
     context.label = label;
     const version = useStore(store, () => store.version);
     useLayoutEffect(() => {
-        const changed = store.options.filter !== filter ||
-            store.options.shouldFilter !== shouldFilter;
+        const changed = store.options.filter !== filter || store.options.shouldFilter !== shouldFilter;
         store.options = { filter, shouldFilter };
         if (changed && store.ready) {
             store.refilter();
@@ -186,9 +181,7 @@ export function Command({ label, shouldFilter = true, filter = defaultCommandFil
         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 });
+        root.current.querySelector('[data-slot="command-list"]')?.scrollTo({ top: 0 });
     }, [store, version]);
     const move = (to) => {
         if (!root.current)
@@ -202,12 +195,10 @@ export function Command({ label, shouldFilter = true, filter = defaultCommandFil
             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" });
+        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" });
+            next.item.scrollIntoView({ block: 'nearest' });
     };
     const step = (delta) => move((items, index) => {
         if (index === -1)
@@ -232,42 +223,41 @@ export function Command({ label, shouldFilter = true, filter = defaultCommandFil
         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]"))
+        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;
+            case 'ArrowDown':
+            case 'ArrowUp': {
+                const delta = event.key === 'ArrowDown' ? 1 : -1;
                 if (event.metaKey)
-                    move((items) => (delta === 1 ? items.length - 1 : 0));
+                    move(items => (delta === 1 ? items.length - 1 : 0));
                 else if (event.altKey)
                     jumpGroup(delta);
                 else
                     step(delta);
                 break;
             }
-            case "n":
-            case "j":
+            case 'n':
+            case 'j':
                 if (!vim)
                     return;
                 step(1);
                 break;
-            case "p":
-            case "k":
+            case 'p':
+            case 'k':
                 if (!vim)
                     return;
                 step(-1);
                 break;
-            case "Home":
+            case 'Home':
                 move(() => 0);
                 break;
-            case "End":
-                move((items) => items.length - 1);
+            case 'End':
+                move(items => items.length - 1);
                 break;
-            case "Enter": {
+            case 'Enter': {
                 if (!store.active)
                     return;
                 const entry = store.items.get(store.active);
@@ -282,17 +272,17 @@ export function Command({ label, shouldFilter = true, filter = defaultCommandFil
         }
         event.preventDefault();
     };
-    return (_jsx(CommandContext.Provider, { value: context, children: _jsxs("div", { "data-slot": "command", ...props, ref: (node) => {
+    return (_jsx(CommandContext.Provider, { value: context, children: _jsxs("div", { "data-slot": "command", ...props, ref: node => {
                 root.current = node;
-                if (typeof ref === "function")
+                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] }) }));
+            }, 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 { 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);
@@ -300,12 +290,12 @@ export function CommandInput({ value, onValueChange, onChange, className, id, ..
         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) => {
+    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) })] }) }));
+                    }, className: cn('sprout-command-input', className) })] }) }));
 }
 /**
  * The scrolling listbox. It caps at 18rem and keeps the active item in view.
@@ -313,53 +303,51 @@ export function CommandInput({ value, onValueChange, onChange, className, id, ..
  * ordinary content such as a Clear search button.
  */
 export function CommandList({ className, children, ...props }) {
-    const { store, listId, label } = useCommandContext("CommandList");
+    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 }) }));
+    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 { 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) }));
+    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 { 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 }) })] }));
+    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 !== "");
+    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) }));
+    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")
+    if (typeof node === 'string' || typeof node === 'number')
         return String(node);
     if (Array.isArray(node))
-        return node.map(textOf).join("");
+        return node.map(textOf).join('');
     if (isValidElement(node))
         return textOf(node.props.children);
-    return "";
+    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 { store } = useCommandContext('CommandItem');
     const group = useContext(GroupContext);
     const id = useId();
     const resolved = (value ?? textOf(children)).trim();
@@ -368,11 +356,11 @@ export function CommandItem({ value, keywords, disabled = false, onSelect, force
         if (!disabled)
             onSelect?.(resolved);
     };
-    const keywordKey = (keywords ?? []).join("\u0000");
+    const keywordKey = (keywords ?? []).join('\u0000');
     useLayoutEffect(() => {
         store.items.set(id, {
             value: resolved,
-            keywords: keywordKey ? keywordKey.split("\u0000") : [],
+            keywords: keywordKey ? keywordKey.split('\u0000') : [],
             group,
             select: () => select.current(),
         });
@@ -389,16 +377,16 @@ export function CommandItem({ value, keywords, disabled = false, onSelect, force
     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) => {
+    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 => {
             onPointerMove?.(event);
             if (!disabled && !event.defaultPrevented)
                 store.setActive(id);
-        }, onClick: (event) => {
+        }, onClick: event => {
             onClick?.(event);
             if (!event.defaultPrevented)
                 select.current();
@@ -406,9 +394,9 @@ export function CommandItem({ value, keywords, disabled = false, onSelect, force
 }
 /** 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) }));
+    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] }) }));
+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

@@ -1,5 +1,5 @@
-import type { ComponentProps } from "react";
-import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu";
+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;
@@ -10,10 +10,10 @@ export declare function ContextMenuPortal(props: ContextMenuPortalProps): import
 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">;
+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"];
+    container?: ContextMenuPrimitive.Portal.Props['container'];
 }
 /**
  * The menu surface. It renders its own portal and positioner and opens beside
@@ -51,7 +51,7 @@ export interface ContextMenuRadioItemProps extends ContextMenuPrimitive.RadioIte
 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">;
+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

@@ -1,60 +1,60 @@
-"use client";
+'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"];
+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 }));
+    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) }));
+    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 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 }));
+    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) }));
+    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 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" })] }));
+    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 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] }));
+    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 }));
+    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] }));
+    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) }));
+    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) }));
+    return (_jsx("span", { "data-slot": "context-menu-shortcut", ...props, className: cn('sprout-context-menu-shortcut', className) }));
 }

package/dist/components/dialog.d.ts

@@ -1,5 +1,5 @@
-import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
-import { useRender } from "@base-ui/react/use-render";
+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];
@@ -23,18 +23,18 @@ export interface DialogContentProps extends DialogPrimitive.Popup.Props {
     /** `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"];
+    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";
+type PartSlot = 'dialog-header' | 'dialog-body';
 export interface DialogPartState extends Record<string, unknown> {
-    slot: PartSlot | "dialog-footer";
+    slot: PartSlot | 'dialog-footer';
 }
-export type DialogPartProps = useRender.ComponentProps<"div", DialogPartState>;
+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>>;
 /**