@tulipfarm/sprout 0.0.0-stage → 0.1.0

package/dist/components/code-block.d.ts

@@ -0,0 +1,35 @@
+import { type HTMLAttributes } from "react";
+import { type CodeLanguage } from "../internal/languages.js";
+import { languageForFilename } from "../internal/syntax.js";
+export type { CodeLanguage };
+export { languageForFilename };
+export declare const codeBlockVariantNames: readonly ["inline", "file", "preview"];
+export type CodeBlockVariant = (typeof codeBlockVariantNames)[number];
+/** Every language that gets syntax colors. Aliases and file extensions such as `ts`, `py`, and `yml` work too. */
+export declare const codeBlockLanguages: readonly ["abap", "actionscript-3", "ada", "ahk", "ahk2", "angular-html", "angular-ts", "apache", "apex", "apl", "applescript", "ara", "asciidoc", "asm", "astro", "awk", "ballerina", "bat", "beancount", "berry", "bibtex", "bicep", "bird2", "blade", "bsl", "c", "c3", "cadence", "cairo", "chapel", "clarity", "clojure", "cmake", "cobol", "codeowners", "codeql", "coffee", "common-lisp", "coq", "cpp", "crystal", "csharp", "css", "csv", "cue", "cypher", "d", "dart", "dax", "desktop", "diff", "docker", "dotenv", "dream-maker", "edge", "elixir", "elm", "emacs-lisp", "erb", "erlang", "fennel", "fish", "fluent", "fortran-fixed-form", "fortran-free-form", "fsharp", "gdresource", "gdscript", "gdshader", "genie", "gherkin", "git-commit", "git-rebase", "gleam", "glimmer-js", "glimmer-ts", "glsl", "gn", "gnuplot", "go", "graphql", "groovy", "hack", "haml", "handlebars", "haskell", "haxe", "hcl", "hjson", "hlsl", "html", "html-derivative", "http", "hurl", "hxml", "hy", "imba", "ini", "java", "javascript", "jinja", "jison", "json", "json5", "jsonc", "jsonl", "jsonnet", "jssm", "jsx", "julia", "just", "kdl", "kotlin", "kusto", "latex", "lean", "less", "liquid", "llvm", "log", "logo", "lua", "luau", "make", "markdown", "marko", "matlab", "mdc", "mdx", "mermaid", "mipsasm", "mojo", "moonbit", "move", "narrat", "nextflow", "nextflow-groovy", "nginx", "nim", "nix", "nsis", "nushell", "objective-c", "objective-cpp", "ocaml", "odin", "openscad", "org", "pascal", "perl", "php", "pkl", "plsql", "po", "polar", "postcss", "powerquery", "powershell", "prisma", "prolog", "proto", "pug", "puppet", "purescript", "python", "qml", "qmldir", "qss", "r", "racket", "raku", "razor", "rbs", "reg", "regexp", "rel", "riscv", "ron", "rosmsg", "rst", "ruby", "rust", "sas", "sass", "scala", "scheme", "scss", "sdbl", "shaderlab", "shellscript", "shellsession", "smalltalk", "smithy", "solidity", "soy", "sparql", "splunk", "sql", "ssh-config", "stata", "stylus", "surrealql", "svelte", "swift", "system-verilog", "systemd", "talonscript", "tasl", "tcl", "templ", "terraform", "tex", "toml", "ts-tags", "tsv", "tsx", "turtle", "twig", "typescript", "typespec", "typst", "v", "vala", "vb", "verilog", "vhdl", "viml", "vue", "vue-html", "vue-vine", "vyper", "wasm", "wenyan", "wgsl", "wikitext", "wit", "wolfram", "xml", "xsl", "yaml", "zenscript", "zig"];
+export type CodeBlockCopyState = "idle" | "copying" | "copied" | "error";
+export interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    code: string;
+    /** A language name, alias, or extension. Defaults to the one `filename` implies, else plain text. */
+    language?: string | undefined;
+    /** Shown in the header instead of the language, and names the copy button and the scroll region. */
+    filename?: string | undefined;
+    lineNumbers?: boolean | undefined;
+    /** Wraps long lines instead of scrolling sideways, for prose such as notes and Markdown. Hides line numbers. */
+    wrap?: boolean | undefined;
+    /**
+     * `inline` is a bordered card capped at 24rem. `file` fills its parent's
+     * height without a frame. `preview` is a frameless, headerless snippet
+     * clipped to its parent, for hover cards and thumbnails.
+     */
+    variant?: CodeBlockVariant | undefined;
+}
+export declare function isHighlightedLanguage(language: string): boolean;
+/** The display name for a language, alias, or extension, such as “TypeScript” for `ts`. */
+export declare function codeLanguageName(language: string): string;
+/**
+ * Loads the grammars for these languages, so the next render colors them
+ * at once. Await it before server rendering to send highlighted HTML.
+ */
+export declare function preloadCodeLanguages(...languages: string[]): Promise<void>;
+export declare function CodeBlock({ code, language, filename, lineNumbers, wrap, variant, className, ...props }: CodeBlockProps): import("react").JSX.Element;

package/dist/components/code-block.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useMemo, useRef, useState, } from "react";
+import { Check } from "reicon-react/icons/Check";
+import { Copy } from "reicon-react/icons/Copy";
+import { cn } from "../internal/classes.js";
+import { codeLanguageIds, codeLanguageNames, } from "../internal/languages.js";
+import { codeTokens, embeddedLanguages, isLanguageReady, languageForFilename, loadCodeLanguage, maxHighlightedLength, resolveCodeLanguage, } from "../internal/syntax.js";
+import { Button } from "./button.js";
+export { languageForFilename };
+export const codeBlockVariantNames = ["inline", "file", "preview"];
+/** Every language that gets syntax colors. Aliases and file extensions such as `ts`, `py`, and `yml` work too. */
+export const codeBlockLanguages = codeLanguageIds;
+const copiedResetMs = 2000;
+export function isHighlightedLanguage(language) {
+    return resolveCodeLanguage(language) !== null;
+}
+/** The display name for a language, alias, or extension, such as “TypeScript” for `ts`. */
+export function codeLanguageName(language) {
+    const resolved = resolveCodeLanguage(language);
+    return resolved ? codeLanguageNames[resolved] : "Plain text";
+}
+/**
+ * Loads the grammars for these languages, so the next render colors them
+ * at once. Await it before server rendering to send highlighted HTML.
+ */
+export async function preloadCodeLanguages(...languages) {
+    await Promise.all(languages.flatMap((language) => {
+        const resolved = resolveCodeLanguage(language);
+        return resolved ? [loadCodeLanguage(resolved)] : [];
+    }));
+}
+function useCodeTokens(code, language) {
+    const [loaded, setLoaded] = useState(0);
+    const highlightable = language !== null && code.length <= maxHighlightedLength;
+    const needed = useMemo(() => highlightable ? [language, ...embeddedLanguages(code, language)] : [], [code, language, highlightable]);
+    const missing = needed.filter((name) => !isLanguageReady(name));
+    const key = missing.join(" ");
+    useEffect(() => {
+        if (!key)
+            return;
+        let live = true;
+        void Promise.all(key.split(" ").map((name) => loadCodeLanguage(name))).then(() => live && setLoaded((value) => value + 1), () => undefined);
+        return () => {
+            live = false;
+        };
+    }, [key]);
+    return useMemo(() => (highlightable ? codeTokens(code, language) : null), 
+    // `loaded` and `key` re-run this once the grammars arrive.
+    [code, language, highlightable, loaded, key]);
+}
+const fontStyleClasses = [
+    [1, "sprout-syntax-italic"],
+    [2, "sprout-syntax-bold"],
+    [4, "sprout-syntax-underline"],
+];
+function tokenClass(token) {
+    const role = /--sprout-syntax-(?:token-)?([a-z-]+)/.exec(token.color ?? "")?.[1];
+    const classes = role && role !== "foreground" ? [`sprout-syntax-${role}`] : [];
+    for (const [flag, name] of fontStyleClasses)
+        if ((token.fontStyle ?? 0) & flag)
+            classes.push(name);
+    return classes.length ? classes.join(" ") : undefined;
+}
+export function CodeBlock({ code, language, filename, lineNumbers = true, wrap = false, variant = "inline", className, ...props }) {
+    const [copyState, setCopyState] = useState("idle");
+    const timer = useRef(undefined);
+    useEffect(() => () => clearTimeout(timer.current), []);
+    const resolved = resolveCodeLanguage(language, filename);
+    const tokens = useCodeTokens(code, resolved);
+    const lineCount = useMemo(() => code.split("\n").length, [code]);
+    const copy = async () => {
+        clearTimeout(timer.current);
+        setCopyState("copying");
+        try {
+            await navigator.clipboard.writeText(code);
+            setCopyState("copied");
+            timer.current = setTimeout(() => setCopyState("idle"), copiedResetMs);
+        }
+        catch {
+            setCopyState("error");
+        }
+    };
+    const languageLabel = resolved ? codeLanguageNames[resolved] : "Plain text";
+    const label = filename ?? languageLabel;
+    const copied = copyState === "copied";
+    const preview = variant === "preview";
+    return (_jsxs("div", { "data-slot": "code-block", "data-variant": variant, "data-language": resolved ?? "text", "data-highlighted": tokens ? "" : undefined, "data-wrap": wrap ? "" : undefined, "data-copy-state": copyState, ...props, className: cn("sprout-code-block", className), children: [!preview && (_jsxs("div", { className: "sprout-code-block-header", children: [_jsx("span", { className: "sprout-code-block-label", children: label }), _jsxs(Button, { variant: "ghost", size: "sm", focusableWhenDisabled: true, disabled: copyState === "copying", onClick: () => void copy(), "aria-label": `Copy ${filename ?? "code"}`, className: "sprout-code-block-copy", children: [_jsx("span", { className: "sprout-code-block-icon", "aria-hidden": "true", children: copied ? _jsx(Check, { size: 14 }) : _jsx(Copy, { size: 14 }) }), copied ? "Copied" : "Copy"] })] })), _jsxs("div", { className: "sprout-code-block-viewport", ...(preview
+                    ? {}
+                    : {
+                        tabIndex: 0,
+                        role: "region",
+                        "aria-label": filename ?? `${languageLabel} code`,
+                    }), children: [lineNumbers && !wrap && (_jsx("pre", { "aria-hidden": "true", className: "sprout-code-block-gutter", children: Array.from({ length: lineCount }, (_, index) => index + 1).join("\n") })), _jsx("pre", { className: "sprout-code-block-pre", children: tokens ? (_jsx("code", { className: "sprout-code-block-syntax", children: tokens.map((line, row) => (_jsxs(Fragment, { children: [row > 0 && "\n", line.map((token, index) => (_jsx("span", { className: tokenClass(token), children: token.content }, index)))] }, row))) })) : (_jsx("code", { children: code })) })] }), copyState === "error" && (_jsx("p", { role: "alert", className: "sprout-code-block-error", children: "Clipboard unavailable. Select the code to copy it, or try Copy again." })), !preview && (_jsx("span", { className: "sprout-code-block-sr-only", role: "status", children: copied ? "Code copied to clipboard." : "" }))] }));
+}

package/dist/components/collapsible.d.ts

@@ -0,0 +1,24 @@
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
+export declare const collapsibleContentVariantNames: readonly ["default", "sidebar", "card"];
+export type CollapsibleContentVariant = (typeof collapsibleContentVariantNames)[number];
+export type CollapsibleProps = BaseCollapsible.Root.Props;
+/**
+ * Shows and hides one region. Pass `open` and `onOpenChange` to control it,
+ * or `defaultOpen` to let it manage itself.
+ */
+export declare function Collapsible({ className, ...props }: CollapsibleProps): import("react").JSX.Element;
+export type CollapsibleTriggerProps = BaseCollapsible.Trigger.Props;
+/**
+ * The button that opens and closes the content. Use `render` to make a
+ * Sprout `Button` or another control the trigger. Mark a chevron with
+ * `data-slot="collapsible-indicator"` and it turns while the content is open.
+ */
+export declare function CollapsibleTrigger({ className, ...props }: CollapsibleTriggerProps): import("react").JSX.Element;
+export interface CollapsibleContentProps extends BaseCollapsible.Panel.Props {
+    /**
+     * `default` shows and hides at once. `sidebar` grows and fades for
+     * navigation lists. `card` grows inside bordered cards.
+     */
+    variant?: CollapsibleContentVariant;
+}
+export declare function CollapsibleContent({ variant, className, ...props }: CollapsibleContentProps): import("react").JSX.Element;

package/dist/components/collapsible.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
+import { stateClassName } from "../internal/classes.js";
+export const collapsibleContentVariantNames = [
+    "default",
+    "sidebar",
+    "card",
+];
+/**
+ * Shows and hides one region. Pass `open` and `onOpenChange` to control it,
+ * or `defaultOpen` to let it manage itself.
+ */
+export function Collapsible({ className, ...props }) {
+    return (_jsx(BaseCollapsible.Root, { "data-slot": "collapsible", ...props, className: stateClassName("sprout-collapsible", className) }));
+}
+/**
+ * The button that opens and closes the content. Use `render` to make a
+ * Sprout `Button` or another control the trigger. Mark a chevron with
+ * `data-slot="collapsible-indicator"` and it turns while the content is open.
+ */
+export function CollapsibleTrigger({ className, ...props }) {
+    return (_jsx(BaseCollapsible.Trigger, { "data-slot": "collapsible-trigger", ...props, className: stateClassName("sprout-collapsible-trigger", className) }));
+}
+export function CollapsibleContent({ variant = "default", className, ...props }) {
+    return (_jsx(BaseCollapsible.Panel, { "data-slot": "collapsible-content", "data-variant": variant, ...props, className: stateClassName(`sprout-collapsible-content sprout-collapsible-content-${variant}`, className) }));
+}

package/dist/components/combobox.d.ts

@@ -0,0 +1,95 @@
+import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
+export type ComboboxProps<Value, Multiple extends boolean | undefined = false> = ComboboxPrimitive.Root.Props<Value, Multiple>;
+/**
+ * Holds the value, the typed query, and the open state. It takes every Base
+ * UI combobox root prop, including `items`, `multiple`, `value`,
+ * `defaultValue`, `onValueChange`, `filter`, `disabled`, and `name`. Pass
+ * `items` so the list can filter and `ComboboxEmpty` knows when nothing
+ * matches.
+ */
+export declare const Combobox: typeof ComboboxPrimitive.Root;
+export type ComboboxValueProps = ComboboxPrimitive.Value.Props;
+/**
+ * Renders the chosen value. Pass a function as children to turn the value
+ * into chips or a label, for example `(values) => values.map(...)`.
+ */
+export declare function ComboboxValue(props: ComboboxValueProps): import("react").JSX.Element;
+export type ComboboxTriggerProps = ComboboxPrimitive.Trigger.Props;
+/**
+ * Opens the list. With no children it is an icon button named “Show
+ * options”. With children, such as a `ComboboxValue`, it shows them before
+ * the chevron; render it as a `Button` with `render` for a picker that keeps
+ * its search field inside the list.
+ */
+export declare function ComboboxTrigger({ className, children, ...props }: ComboboxTriggerProps): import("react").JSX.Element;
+export interface ComboboxInputProps extends Omit<ComboboxPrimitive.Input.Props, "className"> {
+    /** Classes for the surrounding `InputGroup`. */
+    className?: string;
+    /** Shows the chevron button that opens the list. On by default. */
+    showTrigger?: boolean;
+    /**
+     * Shows a clear button once there is a value. It replaces the chevron
+     * while it shows.
+     */
+    showClear?: boolean;
+}
+/**
+ * A search field in a Sprout `InputGroup`. Typing filters the list; the
+ * arrow keys, Enter, and Escape work as in a native list box. `className`
+ * goes on the group; children are added after the addon, for example an
+ * inline-start `InputGroupAddon` with an icon.
+ */
+export declare function ComboboxInput({ className, children, disabled, showTrigger, showClear, ...props }: ComboboxInputProps): import("react").JSX.Element;
+type PositionerProps = Pick<ComboboxPrimitive.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor">;
+export interface ComboboxContentProps extends ComboboxPrimitive.Popup.Props, PositionerProps {
+}
+/**
+ * The list surface. It renders its own portal and positioner, opens below
+ * the field lined up to its start, and is at least as wide as the field.
+ * Pass `anchor` from `useComboboxAnchor` to line it up with a whole chips
+ * field instead of the text input.
+ */
+export declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, ...props }: ComboboxContentProps): import("react").JSX.Element;
+export type ComboboxListProps = ComboboxPrimitive.List.Props;
+/** Holds the items. Pass a function as children to render each filtered item. */
+export declare function ComboboxList({ className, ...props }: ComboboxListProps): import("react").JSX.Element;
+export type ComboboxItemProps = ComboboxPrimitive.Item.Props;
+/** One choice. Long text wraps. A check mark shows when it is chosen. */
+export declare function ComboboxItem({ className, children, ...props }: ComboboxItemProps): import("react").JSX.Element;
+export type ComboboxGroupProps = ComboboxPrimitive.Group.Props;
+/** Groups related items. Pass `items` and a `ComboboxCollection` to filter inside it. */
+export declare function ComboboxGroup({ className, ...props }: ComboboxGroupProps): import("react").JSX.Element;
+export type ComboboxLabelProps = ComboboxPrimitive.GroupLabel.Props;
+/** A small muted heading that names a `ComboboxGroup`. */
+export declare function ComboboxLabel({ className, ...props }: ComboboxLabelProps): import("react").JSX.Element;
+export type ComboboxCollectionProps = ComboboxPrimitive.Collection.Props;
+/** Renders the filtered items of the surrounding group with a function child. */
+export declare function ComboboxCollection(props: ComboboxCollectionProps): import("react").JSX.Element;
+export type ComboboxEmptyProps = ComboboxPrimitive.Empty.Props;
+/**
+ * Shows its children only when no item matches, and announces them to
+ * screen readers. Keep it mounted; it takes no space while the list has
+ * items.
+ */
+export declare function ComboboxEmpty({ className, ...props }: ComboboxEmptyProps): import("react").JSX.Element;
+export type ComboboxSeparatorProps = ComboboxPrimitive.Separator.Props;
+export declare function ComboboxSeparator({ className, ...props }: ComboboxSeparatorProps): import("react").JSX.Element;
+export type ComboboxChipsProps = ComboboxPrimitive.Chips.Props;
+/**
+ * The bordered field for `multiple` comboboxes. Put a `ComboboxValue` that
+ * renders `ComboboxChip`s and a `ComboboxChipsInput` inside it. Arrow left
+ * and right move between chips; Backspace removes one.
+ */
+export declare function ComboboxChips({ className, ...props }: ComboboxChipsProps): import("react").JSX.Element;
+export interface ComboboxChipProps extends ComboboxPrimitive.Chip.Props {
+    /** Shows the × button that removes the chip. On by default. */
+    showRemove?: boolean;
+}
+/** One chosen value inside `ComboboxChips`. */
+export declare function ComboboxChip({ className, children, showRemove, ...props }: ComboboxChipProps): import("react").JSX.Element;
+export type ComboboxChipsInputProps = ComboboxPrimitive.Input.Props;
+/** The text input that sits after the chips and fills the rest of the row. */
+export declare function ComboboxChipsInput({ className, ...props }: ComboboxChipsInputProps): import("react").JSX.Element;
+/** A ref for `ComboboxChips` to pass as `ComboboxContent`’s `anchor`. */
+export declare function useComboboxAnchor(): import("react").RefObject<HTMLDivElement | null>;
+export {};

package/dist/components/combobox.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
+import { Check } from "reicon-react/icons/Check";
+import { ChevronDown } from "reicon-react/icons/ChevronDown";
+import { X } from "reicon-react/icons/X";
+import { cn, stateClassName } from "../internal/classes.js";
+import { Button } from "./button.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from "./input-group.js";
+/**
+ * Holds the value, the typed query, and the open state. It takes every Base
+ * UI combobox root prop, including `items`, `multiple`, `value`,
+ * `defaultValue`, `onValueChange`, `filter`, `disabled`, and `name`. Pass
+ * `items` so the list can filter and `ComboboxEmpty` knows when nothing
+ * matches.
+ */
+export const Combobox = ComboboxPrimitive.Root;
+/**
+ * Renders the chosen value. Pass a function as children to turn the value
+ * into chips or a label, for example `(values) => values.map(...)`.
+ */
+export function ComboboxValue(props) {
+    return _jsx(ComboboxPrimitive.Value, { "data-slot": "combobox-value", ...props });
+}
+/**
+ * Opens the list. With no children it is an icon button named “Show
+ * options”. With children, such as a `ComboboxValue`, it shows them before
+ * the chevron; render it as a `Button` with `render` for a picker that keeps
+ * its search field inside the list.
+ */
+export function ComboboxTrigger({ className, children, ...props }) {
+    return (_jsxs(ComboboxPrimitive.Trigger, { "data-slot": "combobox-trigger", "aria-label": children == null ? "Show options" : undefined, ...props, className: stateClassName("sprout-combobox-trigger", className), children: [children, _jsx(ChevronDown, { "aria-hidden": "true", className: "sprout-combobox-trigger-icon" })] }));
+}
+function ComboboxClear({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.Clear, { "data-slot": "combobox-clear", "aria-label": "Clear selection", render: _jsx(InputGroupButton, { variant: "ghost", size: "icon-xs" }), ...props, className: stateClassName("sprout-combobox-clear", className), children: _jsx(X, { "aria-hidden": "true" }) }));
+}
+/**
+ * A search field in a Sprout `InputGroup`. Typing filters the list; the
+ * arrow keys, Enter, and Escape work as in a native list box. `className`
+ * goes on the group; children are added after the addon, for example an
+ * inline-start `InputGroupAddon` with an icon.
+ */
+export function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
+    return (_jsxs(InputGroup, { className: cn("sprout-combobox-input-group", className), children: [_jsx(ComboboxPrimitive.Input, { render: _jsx(InputGroupInput, {}), disabled: disabled, ...props }), _jsxs(InputGroupAddon, { align: "inline-end", children: [showTrigger && (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: _jsx(ComboboxTrigger, {}), "data-slot": "input-group-button", className: "sprout-combobox-input-trigger", disabled: disabled })), showClear && _jsx(ComboboxClear, { disabled: disabled })] }), children] }));
+}
+/**
+ * The list surface. It renders its own portal and positioner, opens below
+ * the field lined up to its start, and is at least as wide as the field.
+ * Pass `anchor` from `useComboboxAnchor` to line it up with a whole chips
+ * field instead of the text input.
+ */
+export function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
+    return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { className: "sprout-combobox-positioner", side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, collisionPadding: 8, children: _jsx(ComboboxPrimitive.Popup, { "data-slot": "combobox-content", "data-chips": !!anchor, ...props, className: stateClassName("sprout-combobox-content", className) }) }) }));
+}
+/** Holds the items. Pass a function as children to render each filtered item. */
+export function ComboboxList({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.List, { "data-slot": "combobox-list", ...props, className: stateClassName("sprout-combobox-list", className) }));
+}
+/** One choice. Long text wraps. A check mark shows when it is chosen. */
+export function ComboboxItem({ className, children, ...props }) {
+    return (_jsxs(ComboboxPrimitive.Item, { "data-slot": "combobox-item", ...props, className: stateClassName("sprout-combobox-item", className), children: [children, _jsx(ComboboxPrimitive.ItemIndicator, { className: "sprout-combobox-item-indicator", render: _jsx("span", {}), children: _jsx(Check, { "aria-hidden": "true" }) })] }));
+}
+/** Groups related items. Pass `items` and a `ComboboxCollection` to filter inside it. */
+export function ComboboxGroup({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.Group, { "data-slot": "combobox-group", ...props, className: stateClassName("sprout-combobox-group", className) }));
+}
+/** A small muted heading that names a `ComboboxGroup`. */
+export function ComboboxLabel({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.GroupLabel, { "data-slot": "combobox-label", ...props, className: stateClassName("sprout-combobox-label", className) }));
+}
+/** Renders the filtered items of the surrounding group with a function child. */
+export function ComboboxCollection(props) {
+    return (_jsx(ComboboxPrimitive.Collection, { "data-slot": "combobox-collection", ...props }));
+}
+/**
+ * Shows its children only when no item matches, and announces them to
+ * screen readers. Keep it mounted; it takes no space while the list has
+ * items.
+ */
+export function ComboboxEmpty({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.Empty, { "data-slot": "combobox-empty", ...props, className: stateClassName("sprout-combobox-empty", className) }));
+}
+export function ComboboxSeparator({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.Separator, { "data-slot": "combobox-separator", ...props, className: stateClassName("sprout-combobox-separator", className) }));
+}
+/**
+ * The bordered field for `multiple` comboboxes. Put a `ComboboxValue` that
+ * renders `ComboboxChip`s and a `ComboboxChipsInput` inside it. Arrow left
+ * and right move between chips; Backspace removes one.
+ */
+export function ComboboxChips({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.Chips, { "data-slot": "combobox-chips", ...props, className: stateClassName("sprout-combobox-chips", className) }));
+}
+/** One chosen value inside `ComboboxChips`. */
+export function ComboboxChip({ className, children, showRemove = true, ...props }) {
+    return (_jsxs(ComboboxPrimitive.Chip, { "data-slot": "combobox-chip", ...props, className: stateClassName("sprout-combobox-chip", className), children: [children, showRemove && (_jsx(ComboboxPrimitive.ChipRemove, { "aria-label": typeof children === "string" ? `Remove ${children}` : "Remove item", render: _jsx(Button, { variant: "ghost", size: "icon-xs" }), className: "sprout-combobox-chip-remove", "data-slot": "combobox-chip-remove", children: _jsx(X, { "aria-hidden": "true" }) }))] }));
+}
+/** The text input that sits after the chips and fills the rest of the row. */
+export function ComboboxChipsInput({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.Input, { "data-slot": "combobox-chip-input", ...props, className: stateClassName("sprout-combobox-chips-input", className) }));
+}
+/** A ref for `ComboboxChips` to pass as `ComboboxContent`’s `anchor`. */
+export function useComboboxAnchor() {
+    return useRef(null);
+}

package/dist/components/command.d.ts

@@ -0,0 +1,94 @@
+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;
+/**
+ * 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 declare const defaultCommandFilter: CommandFilter;
+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. */
+    shouldFilter?: boolean;
+    /** Custom scoring. Return `0` to hide an item. */
+    filter?: CommandFilter;
+    /** Wrap from the last item to the first with the arrow keys. */
+    loop?: boolean;
+}
+/**
+ * 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 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"> {
+    /** Controlled search text. */
+    value?: string;
+    onValueChange?: (search: string) => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+/** 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">;
+/**
+ * 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">;
+/** 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"> {
+    /** Small muted label above the items. Omit for an unlabeled group. */
+    heading?: ReactNode;
+    /** Keep the group visible even when none of its items match. */
+    forceMount?: boolean;
+}
+/** 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"> {
+    /** 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"> {
+    /** 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. */
+    keywords?: readonly string[];
+    disabled?: boolean;
+    /** Runs on click or Enter. */
+    onSelect?: (value: string) => void;
+    /** 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;
+}
+/**
+ * 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">;
+/** 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"> {
+    /** Visually hidden dialog title. */
+    title?: string;
+    /** Visually hidden dialog description. */
+    description?: string;
+    className?: string;
+    /** Adds the corner close button. Defaults to `false`; Escape closes the palette. */
+    showCloseButton?: boolean;
+    closeLabel?: string;
+    /** Where the portal renders. Defaults to `document.body`. */
+    container?: DialogContentProps["container"];
+    /** Usually a `Command`. */
+    children: ReactNode;
+}
+/** A command palette pinned near the top of the viewport. */
+export declare function CommandDialog({ title, description, className, showCloseButton, closeLabel, container, children, ...props }: CommandDialogProps): import("react").JSX.Element;