@nibapp/ui 0.0.0-stage → 0.1.0

package/dist/components/code-block.js

@@ -0,0 +1,124 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileCode } from "lucide-react";
+import { useDeferredValue, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { useUiStrings } from "../i18n/provider.js";
+import { cn } from "../lib/cn.js";
+import { cachedTokens, getLoadedHighlighter, isLanguageReady, languageLabel, loadLanguage, plainLines, resolveLanguage, StreamingTokenizer, storeTokens, tokenizeCached, } from "../lib/shiki.js";
+import { useCopyToClipboard } from "../lib/use-copy-to-clipboard.js";
+import { CopyButton } from "./copy-button.js";
+/** Its own module so a page can copy text without loading the highlighter. */
+export { useCopyToClipboard };
+/**
+ * Tokenized lines for `code`, without ever making a commit wait on Shiki:
+ *
+ * - **Instant** (rendered on the first pass): a {@link tokenCache} hit — e.g. a virtualized row
+ *   scrolling back into view — or a stream that only grew (`streaming`: just the newly completed
+ *   lines are tokenized; a finished stream seeds the cache with its result).
+ * - **Miss**: plain lines first, then a deferred (`useDeferredValue`, transition-priority and
+ *   interruptible) re-render tokenizes and caches. Plain and highlighted output share the same line
+ *   structure, so swapping them never changes layout or a virtualizer's measured height.
+ * - **Grammar not loaded yet**: plain lines until it is.
+ */
+export function useHighlightedLines(code, lang, streaming = false) {
+    const [loadedLang, setLoadedLang] = useState(null);
+    const ready = lang === "text" || loadedLang === lang || isLanguageReady(lang);
+    const streamer = useRef(null);
+    useEffect(() => {
+        if (ready)
+            return undefined;
+        let cancelled = false;
+        const load = async () => {
+            try {
+                await loadLanguage(lang);
+                if (!cancelled)
+                    setLoadedLang(lang);
+            }
+            catch {
+                // Unknown or failing grammar: stay on the plain-text rendering.
+            }
+        };
+        void load();
+        return () => {
+            cancelled = true;
+        };
+    }, [lang, ready]);
+    // What this render wants highlighted; its identity is the deferred value's identity.
+    const target = useMemo(() => (ready ? { code, lang, streaming } : null), [code, lang, ready, streaming]);
+    // Tokens that cost (almost) nothing now. The streamer lives in a ref as a per-instance memo: it
+    // only ever extends or resets itself, so a render React discards leaves it consistent.
+    const instant = useMemo(() => {
+        if (target === null)
+            return undefined;
+        const stream = streamer.current;
+        if (stream?.lang === target.lang && stream.isWarmFor(target.code)) {
+            const lines = stream.update(target.code);
+            if (!target.streaming) {
+                storeTokens(target.code, target.lang, lines);
+                streamer.current = null;
+            }
+            return { lines, highlighted: true };
+        }
+        if (target.streaming && target.lang !== "text")
+            return undefined;
+        const hit = cachedTokens(target.code, target.lang);
+        return hit === undefined ? undefined : { lines: hit, highlighted: true };
+    }, [target]);
+    const pending = instant === undefined ? target : null;
+    // On a miss the urgent render gets `null` (plain lines) and React schedules a deferred render that
+    // gets `pending`. No initial value on a hit, so cached blocks schedule no extra render at all.
+    const deferred = useDeferredValue(pending, pending === null ? undefined : null);
+    return useMemo(() => {
+        if (instant !== undefined)
+            return instant;
+        const h = getLoadedHighlighter();
+        if (target !== null && deferred === target && h !== null) {
+            if (!target.streaming)
+                return { lines: tokenizeCached(h, target.code, target.lang), highlighted: true };
+            if (streamer.current?.lang !== target.lang)
+                streamer.current = new StreamingTokenizer(h, target.lang);
+            return { lines: streamer.current.update(target.code), highlighted: true };
+        }
+        return { lines: plainLines(code), highlighted: false };
+    }, [instant, target, deferred, code]);
+}
+const PIN_THRESHOLD = 24;
+export function CodeBlock({ code, lang, filename, showLineNumbers = false, startLine = 1, highlightLines, wrap = false, maxHeight, streaming = false, header = true, actions, className, ...props }) {
+    const source = code.endsWith("\n") ? code.slice(0, -1) : code;
+    const resolved = resolveLanguage(lang);
+    const { lines, highlighted } = useHighlightedLines(source, resolved, streaming);
+    const highlightSet = useMemo(() => new Set(highlightLines), [highlightLines]);
+    const label = languageLabel(lang);
+    const strings = useUiStrings().codeBlock;
+    // Stick to the bottom while streaming unless the reader scrolled up.
+    const scroller = useRef(null);
+    const pinned = useRef(true);
+    const onScroll = (event) => {
+        const el = event.currentTarget;
+        pinned.current = el.scrollHeight - el.scrollTop - el.clientHeight < PIN_THRESHOLD;
+    };
+    useLayoutEffect(() => {
+        const el = scroller.current;
+        if (streaming && pinned.current && el && lines.length > 0)
+            el.scrollTop = el.scrollHeight;
+    }, [streaming, lines]);
+    const gutter = {
+        "--code-gutter": `${String(startLine + Math.max(lines.length, 1) - 1).length}ch`,
+    };
+    const preStyle = maxHeight === undefined ? undefined : { maxHeight };
+    return (_jsxs("div", { "data-slot": "code-block", "data-language": resolved, className: cn("group/code relative isolate overflow-hidden rounded-xl border border-border-subtle bg-bg-inset text-fg", className), ...props, children: [header ? (_jsxs("div", { "data-slot": "code-block-header", className: "flex min-h-9 items-center gap-2 border-b border-border-subtle py-1 pe-1.5 ps-3.5", children: [filename ? (_jsxs(_Fragment, { children: [_jsx(FileCode, { "aria-hidden": true, className: "size-3.5 shrink-0 text-fg-subtle" }), _jsx("span", { className: "min-w-0 truncate font-mono text-xs text-fg-muted", children: filename })] })) : (_jsx("span", { className: "font-mono text-xs text-fg-subtle", children: label })), _jsxs("div", { className: "ms-auto flex min-w-0 items-center gap-0.5", children: [actions, _jsx(CopyButton, { value: source, label: strings.copyCode })] })] })) : (_jsx(CopyButton, { value: source, label: strings.copyCode, className: cn("absolute top-2 end-2 z-10 bg-bg-inset opacity-0 transition-opacity", "group-hover/code:opacity-100 focus-visible:opacity-100 motion-reduce:transition-none") })), _jsx("pre", { ref: scroller, dir: "ltr", "data-shiki": true, "data-highlighted": highlighted || undefined, "data-streaming": streaming || undefined, 
+                // Scrollable regions must be reachable by keyboard (WCAG 2.1.1).
+                // biome-ignore lint/a11y/noNoninteractiveTabindex: scroll container
+                tabIndex: 0, onScroll: maxHeight === undefined ? undefined : onScroll, style: preStyle, className: cn("overflow-auto overscroll-x-contain py-3 font-mono text-xs leading-5 outline-none", "focus-visible:ring-focus focus-visible:-outline-offset-2"), children: _jsx("code", { style: gutter, className: cn("grid min-w-full", wrap ? "w-full" : "w-max"), children: lines.map((line, index) => {
+                        const n = startLine + index;
+                        const emphasized = highlightSet.has(n);
+                        return (_jsxs("span", { "data-line": n, "data-emphasized": emphasized || undefined, className: cn("flex min-h-5 px-4", emphasized && "bg-selected shadow-[inset_2px_0_0_var(--border-strong)]"), children: [showLineNumbers && (_jsx("span", { "aria-hidden": true, className: "me-4 w-(--code-gutter) shrink-0 select-none text-end tabular text-fg-subtle", children: n })), _jsx("span", { className: wrap ? "min-w-0 flex-1 whitespace-pre-wrap break-words" : "whitespace-pre", children: line.map((token, t) => (_jsx("span", { style: token.style, children: token.content }, t))) })] }, index));
+                    }) }) })] }));
+}
+/* ------------------------------------------------------------------------------------------ */
+/* Inline code                                                                                */
+/* ------------------------------------------------------------------------------------------ */
+/** Inline code span for prose: hairline chip, mono, slightly smaller than surrounding text. */
+export function Code({ className, ...props }) {
+    return (_jsx("code", { "data-slot": "code", className: cn("rounded-xs border border-border-subtle bg-bg-muted px-[0.35em] py-[0.08em]", "font-mono text-[0.86em] text-fg [overflow-wrap:anywhere] [box-decoration-break:clone]", className), ...props }));
+}

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

@@ -0,0 +1,49 @@
+import { useRender } from "@base-ui/react/use-render";
+import { type VariantProps } from "../lib/cn.js";
+import { type InputProps } from "./input.js";
+export interface CodeInputProps extends Omit<InputProps, "inputMode" | "autoComplete" | "autoCapitalize" | "spellCheck" | "pattern" | "maxLength" | "type" | "size" | "inputClassName" | "dir"> {
+    /** How many characters the code has. */
+    readonly length: number;
+    /**
+     * Letters too, typed in capitals: a device code such as `ABCD-EFGH`, which the field doesn't check
+     * (the page reads it as it likes). Otherwise digits only, offered by one-time-code autofill.
+     */
+    readonly letters?: boolean;
+}
+/**
+ * The field for a code: a one-time code from an email (digits, `length` of them, offered by the
+ * platform's one-time-code autofill), or with `letters` a device code to type in, in large spaced
+ * figures. Put it in a `<Field>` for its label and error.
+ */
+export declare function CodeInput({ length, letters, ...props }: CodeInputProps): import("react").JSX.Element;
+declare const codeDisplay: import("tailwind-variants").TVReturnType<{
+    size: {
+        /** Inside a card or a settings flow. */
+        md: "rounded-lg px-4 py-3 text-md";
+        /** The page's subject: a device code to compare or type in. */
+        lg: "px-5 py-4 text-3xl";
+    };
+}, undefined, string[], {
+    size: {
+        /** Inside a card or a settings flow. */
+        md: "rounded-lg px-4 py-3 text-md";
+        /** The page's subject: a device code to compare or type in. */
+        lg: "px-5 py-4 text-3xl";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        /** Inside a card or a settings flow. */
+        md: "rounded-lg px-4 py-3 text-md";
+        /** The page's subject: a device code to compare or type in. */
+        lg: "px-5 py-4 text-3xl";
+    };
+}, undefined>>;
+export interface CodeDisplayProps extends useRender.ComponentProps<"code">, VariantProps<typeof codeDisplay> {
+}
+/**
+ * A code a person compares or types somewhere else (a device code, a check code), in spaced
+ * monospace figures. A `<code>` by default; `render={<button type="button" />}` when a click copies
+ * it. As a button its name is the code it shows; `title` says what the click does.
+ */
+export declare function CodeDisplay({ size, className, render, ref, ...props }: CodeDisplayProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export {};

package/dist/components/code-input.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { cn, tv } from "../lib/cn.js";
+import { cardStyles } from "./card.js";
+import { Input } from "./input.js";
+/**
+ * How every code reads, typed or shown: monospace figures with one letter-spacing, so each character
+ * stands apart. The indent matches the spacing the last character carries, so a centred code sits in
+ * the middle. A code is the same characters in every language, so it always runs left to right.
+ */
+const CODE_TEXT = "text-center font-mono tabular tracking-[0.2em] indent-[0.2em]";
+/**
+ * The field for a code: a one-time code from an email (digits, `length` of them, offered by the
+ * platform's one-time-code autofill), or with `letters` a device code to type in, in large spaced
+ * figures. Put it in a `<Field>` for its label and error.
+ */
+export function CodeInput({ length, letters = false, ...props }) {
+    return (_jsx(Input, { size: "lg", inputMode: letters ? "text" : "numeric", autoComplete: letters ? "off" : "one-time-code", ...(letters ? { autoCapitalize: "characters", spellCheck: false } : { pattern: `[0-9]{${length}}` }), maxLength: length, dir: "ltr", 
+        // Touch screens keep the large figures (the field's own rule sets 16 px there).
+        inputClassName: cn(CODE_TEXT, "text-xl pointer-coarse:text-xl", letters && "uppercase"), ...props }));
+}
+const codeDisplay = tv({
+    base: [
+        cardStyles({ size: "flush" }),
+        "block outline-none",
+        CODE_TEXT,
+        // Rendered as a button (a code that copies on click), it takes the hover wash and focus ring.
+        "transition-colors duration-(--duration-fast) enabled:hover:bg-hover focus-visible:ring-focus",
+    ],
+    variants: {
+        size: {
+            /** Inside a card or a settings flow. */
+            md: "rounded-lg px-4 py-3 text-md",
+            /** The page's subject: a device code to compare or type in. */
+            lg: "px-5 py-4 text-3xl",
+        },
+    },
+    defaultVariants: { size: "md" },
+});
+/**
+ * A code a person compares or types somewhere else (a device code, a check code), in spaced
+ * monospace figures. A `<code>` by default; `render={<button type="button" />}` when a click copies
+ * it. As a button its name is the code it shows; `title` says what the click does.
+ */
+export function CodeDisplay({ size, className, render, ref, ...props }) {
+    return useRender({
+        defaultTagName: "code",
+        render,
+        ref,
+        props: {
+            "data-slot": "code-display",
+            dir: "ltr",
+            translate: "no",
+            className: cn(codeDisplay({ size }), className),
+            ...props,
+        },
+    });
+}

package/dist/components/combobox.d.ts

@@ -0,0 +1,194 @@
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import { type ComponentProps, type ReactNode } from "react";
+import { type VariantProps } from "../lib/cn.js";
+declare const comboboxInputStyles: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            group: string;
+            input: string;
+            action: string;
+        };
+        md: {
+            group: string;
+            input: string;
+            action: string;
+        };
+        lg: {
+            group: string;
+            input: string;
+            action: string;
+        };
+    };
+    /** Chips mode: the frame grows to wrap selected values. */
+    chips: {
+        true: {
+            group: string;
+        };
+    };
+}, {
+    group: string[];
+    input: string[];
+    action: string[];
+    adornment: string;
+}, undefined, {
+    size: {
+        sm: {
+            group: string;
+            input: string;
+            action: string;
+        };
+        md: {
+            group: string;
+            input: string;
+            action: string;
+        };
+        lg: {
+            group: string;
+            input: string;
+            action: string;
+        };
+    };
+    /** Chips mode: the frame grows to wrap selected values. */
+    chips: {
+        true: {
+            group: string;
+        };
+    };
+}, {
+    group: string[];
+    input: string[];
+    action: string[];
+    adornment: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            group: string;
+            input: string;
+            action: string;
+        };
+        md: {
+            group: string;
+            input: string;
+            action: string;
+        };
+        lg: {
+            group: string;
+            input: string;
+            action: string;
+        };
+    };
+    /** Chips mode: the frame grows to wrap selected values. */
+    chips: {
+        true: {
+            group: string;
+        };
+    };
+}, {
+    group: string[];
+    input: string[];
+    action: string[];
+    adornment: string;
+}>>;
+type ComboboxInputVariants = VariantProps<typeof comboboxInputStyles>;
+export declare const ComboboxRoot: typeof BaseCombobox.Root;
+/**
+ * Root for a field whose items act when picked (open a file, run a command) rather than become its
+ * value: the text stays free and nothing stays selected; `onValueChange` reports a pick with the
+ * reason `"item-press"`. Takes the same parts as `ComboboxRoot`. With `inline open` and no input,
+ * the list is the control: give `<ComboboxList>` `tabIndex={0}` and the arrows move its highlight,
+ * Enter picks.
+ */
+export declare const AutocompleteRoot: typeof BaseAutocomplete.Root;
+export interface ComboboxInputProps extends Omit<ComponentProps<typeof BaseCombobox.Input>, "size" | "className">, Omit<ComboboxInputVariants, "chips"> {
+    /** Icon before the text (e.g. a search glyph). */
+    leading?: ReactNode;
+    /** After the text, before the buttons (e.g. a spinner while results load). */
+    trailing?: ReactNode;
+    /** Show the ✕ button when a value is selected (in an autocomplete, when there's text). Default `true`. */
+    showClear?: boolean;
+    /** Accessible name of the ✕ button; default "Clear selection". A search field names what it clears. */
+    clearLabel?: string | undefined;
+    /** Show the ⌃⌄ popup button. Default `true`. */
+    showTrigger?: boolean;
+    /** Classes for the frame. */
+    className?: string | undefined;
+    inputClassName?: ComponentProps<typeof BaseCombobox.Input>["className"];
+}
+/** Text field that filters the list; includes clear and open buttons. */
+export declare function ComboboxInput({ size, leading, trailing, showClear, clearLabel, showTrigger, className, inputClassName, ...props }: ComboboxInputProps): import("react").JSX.Element;
+export interface ComboboxChipsInputProps<Value> extends Omit<ComponentProps<typeof BaseCombobox.Input>, "size" | "className" | "placeholder">, Omit<ComboboxInputVariants, "chips"> {
+    /** Text for each selected value's chip. */
+    getChipLabel: (value: Value) => ReactNode;
+    /** Shown only while nothing is selected. */
+    placeholder?: string | undefined;
+    className?: string | undefined;
+}
+/** Multiple-selection field: selected values render as removable chips before the caret. */
+export declare function ComboboxChipsInput<Value>({ size, getChipLabel, placeholder, className, ...props }: ComboboxChipsInputProps<Value>): import("react").JSX.Element;
+export interface ComboboxChipProps extends ComponentProps<typeof BaseCombobox.Chip> {
+    /** Accessible name for the remove button. */
+    removeLabel?: string;
+}
+export declare function ComboboxChip({ removeLabel, className, children, ...props }: ComboboxChipProps): import("react").JSX.Element;
+export interface ComboboxContentProps extends ComponentProps<typeof BaseCombobox.Popup> {
+    side?: ComponentProps<typeof BaseCombobox.Positioner>["side"];
+    align?: ComponentProps<typeof BaseCombobox.Positioner>["align"];
+    sideOffset?: number;
+}
+/** Portal + positioner + popup. Children: <ComboboxEmpty> and <ComboboxList>. */
+export declare function ComboboxContent({ side, align, sideOffset, className, ...props }: ComboboxContentProps): import("react").JSX.Element;
+export declare function ComboboxList({ className, ...props }: ComponentProps<typeof BaseCombobox.List>): import("react").JSX.Element;
+export declare function ComboboxEmpty({ className, ...props }: ComponentProps<typeof BaseCombobox.Empty>): import("react").JSX.Element;
+export interface ComboboxItemProps extends Omit<ComponentProps<typeof BaseCombobox.Item>, "children"> {
+    icon?: ReactNode;
+    description?: ReactNode;
+    trailing?: ReactNode;
+    children?: ReactNode;
+}
+export declare function ComboboxItem({ icon, description, trailing, className, children, ...props }: ComboboxItemProps): import("react").JSX.Element;
+export declare function ComboboxGroup({ className, ...props }: ComponentProps<typeof BaseCombobox.Group>): import("react").JSX.Element;
+export declare function ComboboxGroupLabel({ className, ...props }: ComponentProps<typeof BaseCombobox.GroupLabel>): import("react").JSX.Element;
+export declare function ComboboxSeparator({ className, ...props }: ComponentProps<typeof BaseCombobox.Separator>): import("react").JSX.Element;
+export declare const ComboboxCollection: typeof BaseAutocomplete.Collection;
+export interface ComboboxOption {
+    value: string;
+    /** Plain text — used for filtering and shown in the input/chips. */
+    label: string;
+    description?: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    /** Options sharing a `group` render under one heading (in first-seen order). */
+    group?: string;
+}
+interface ComboboxSharedProps extends Omit<ComboboxInputVariants, "chips">, Pick<BaseCombobox.Root.Props<string>, "disabled" | "readOnly" | "required" | "name" | "id" | "autoHighlight" | "open" | "onOpenChange"> {
+    items: readonly ComboboxOption[];
+    placeholder?: string | undefined;
+    /** Shown when the query matches nothing. */
+    emptyMessage?: ReactNode;
+    /** Icon before the text (single mode). */
+    leading?: ReactNode;
+    /** Required when there's no visible <Field> label. */
+    "aria-label"?: string;
+    /** Classes for the input frame. */
+    className?: string | undefined;
+}
+export interface ComboboxSingleProps extends ComboboxSharedProps {
+    multiple?: false;
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+}
+export interface ComboboxMultipleProps extends ComboboxSharedProps {
+    multiple: true;
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onValueChange?: (value: string[]) => void;
+}
+export type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;
+/**
+ * Filterable picker over string-valued options. `multiple` switches to chips.
+ * For custom item rendering or async data, compose the parts instead.
+ */
+export declare function Combobox(props: ComboboxProps): import("react").JSX.Element;
+export {};

package/dist/components/combobox.js

@@ -0,0 +1,176 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import { Check, ChevronsUpDown, X } from "lucide-react";
+import { useMemo } from "react";
+import { useUiStrings } from "../i18n/provider.js";
+import { cn, resolveClassName, tv, withBase } from "../lib/cn.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { fieldChrome } from "./input.js";
+import { ItemLabel } from "./item-label.js";
+import { listboxGroupLabelClass, listboxIconClass, listboxIndicatorClass, listboxItemClass, listboxPopupClass, listboxSeparatorClass, } from "./select.js";
+/* ------------------------------------------------------------------------------------------ */
+/* Input                                                                                      */
+/* ------------------------------------------------------------------------------------------ */
+const comboboxInputStyles = tv({
+    slots: {
+        group: [
+            "group/combobox relative flex w-full min-w-0 cursor-text items-center",
+            fieldChrome,
+            "focus-within:border-border-strong focus-within:ring-3 data-popup-open:border-border-strong",
+            "has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-45",
+            "[&_svg]:shrink-0",
+        ],
+        input: [
+            "h-full min-w-0 flex-1 bg-transparent text-fg outline-none placeholder:text-fg-subtle",
+            "focus-visible:outline-none disabled:cursor-not-allowed",
+        ],
+        action: [
+            "flex shrink-0 items-center justify-center rounded-md text-fg-subtle outline-none",
+            "transition-[background-color,color,opacity,scale] duration-(--duration-fast)",
+            "hover:bg-hover hover:text-fg focus-visible:ring-focus",
+            "data-starting-style:scale-75 data-starting-style:opacity-0 data-ending-style:scale-75 data-ending-style:opacity-0",
+        ],
+        adornment: "flex shrink-0 items-center text-fg-subtle",
+    },
+    variants: {
+        size: {
+            sm: {
+                group: "h-7 gap-1 rounded-md pe-1 ps-2 text-sm [&_svg:not([class*='size-'])]:size-3.5",
+                input: "text-sm",
+                action: "size-5",
+            },
+            md: {
+                group: "h-8 gap-1.5 rounded-lg pe-1 ps-2.5 text-base [&_svg:not([class*='size-'])]:size-4",
+                input: "text-base",
+                action: "size-6",
+            },
+            lg: {
+                group: "h-10 gap-2 rounded-xl pe-1.5 ps-3 text-md [&_svg:not([class*='size-'])]:size-4",
+                input: "text-md",
+                action: "size-7",
+            },
+        },
+        /** Chips mode: the frame grows to wrap selected values. */
+        chips: {
+            true: { group: "h-auto flex-wrap py-1 ps-1" },
+        },
+    },
+    compoundVariants: [
+        { chips: true, size: "sm", class: { group: "min-h-7 py-0.5 ps-0.5" } },
+        { chips: true, size: "md", class: { group: "min-h-8" } },
+        { chips: true, size: "lg", class: { group: "min-h-10 py-1.5 ps-1.5" } },
+    ],
+    defaultVariants: { size: "md" },
+});
+export const ComboboxRoot = BaseCombobox.Root;
+/**
+ * Root for a field whose items act when picked (open a file, run a command) rather than become its
+ * value: the text stays free and nothing stays selected; `onValueChange` reports a pick with the
+ * reason `"item-press"`. Takes the same parts as `ComboboxRoot`. With `inline open` and no input,
+ * the list is the control: give `<ComboboxList>` `tabIndex={0}` and the arrows move its highlight,
+ * Enter picks.
+ */
+export const AutocompleteRoot = BaseAutocomplete.Root;
+/** Text field that filters the list; includes clear and open buttons. */
+export function ComboboxInput({ size, leading, trailing, showClear = true, clearLabel, showTrigger = true, className, inputClassName, ...props }) {
+    const styles = comboboxInputStyles({ size });
+    const t = useUiStrings().combobox;
+    return (_jsxs(BaseCombobox.InputGroup, { "data-slot": "combobox-input", className: styles.group({ className }), children: [leading !== undefined && (_jsx("span", { "aria-hidden": true, className: styles.adornment(), children: leading })), _jsx(BaseCombobox.Input, { className: (state) => styles.input({
+                    className: resolveClassName(inputClassName, state),
+                }), ...props }), trailing !== undefined && _jsx("span", { className: styles.adornment(), children: trailing }), showClear && (_jsx(BaseCombobox.Clear, { "aria-label": clearLabel ?? t.clearSelection, className: styles.action(), children: _jsx(X, { "aria-hidden": true, className: "size-3.5" }) })), showTrigger && (_jsx(BaseCombobox.Trigger, { "aria-label": t.showOptions, className: styles.action(), children: _jsx(ChevronsUpDown, { "aria-hidden": true, className: "size-3.5" }) }))] }));
+}
+/** Multiple-selection field: selected values render as removable chips before the caret. */
+export function ComboboxChipsInput({ size, getChipLabel, placeholder, className, ...props }) {
+    const styles = comboboxInputStyles({ size, chips: true });
+    const chipSize = size === "sm" ? "h-5 text-xs" : "h-6 text-sm";
+    const t = useUiStrings().combobox;
+    return (_jsx(BaseCombobox.InputGroup, { "data-slot": "combobox-chips-input", className: styles.group({ className }), children: _jsx(BaseCombobox.Chips, { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1", children: _jsx(BaseCombobox.Value, { children: (selected) => (_jsxs(_Fragment, { children: [selected.map((value) => {
+                            const label = getChipLabel(value);
+                            return (_jsx(ComboboxChip, { className: chipSize, removeLabel: typeof label === "string" ? t.removeItem({ label }) : t.remove, children: label }, String(value)));
+                        }), _jsx(BaseCombobox.Input, { placeholder: selected.length > 0 ? undefined : placeholder, className: cn(styles.input(), "h-6 min-w-16 px-1.5"), ...props })] })) }) }) }));
+}
+export function ComboboxChip({ removeLabel, className, children, ...props }) {
+    const t = useUiStrings().combobox;
+    return (_jsxs(BaseCombobox.Chip, { "data-slot": "combobox-chip", className: withBase(cn("inline-flex max-w-full cursor-default items-center gap-0.5 rounded-md bg-active pe-0.5 ps-1.5 font-medium text-fg outline-none", "transition-[background-color,color] duration-(--duration-instant)", "focus-within:bg-primary focus-within:text-primary-fg data-highlighted:bg-primary data-highlighted:text-primary-fg"), className), ...props, children: [_jsx("span", { className: "min-w-0 truncate", children: children }), _jsx(BaseCombobox.ChipRemove, { "aria-label": removeLabel ?? t.remove, className: "flex size-4 items-center justify-center rounded-sm text-current opacity-60 outline-none transition-opacity hover:opacity-100", children: _jsx(X, { "aria-hidden": true, className: "size-3" }) })] }));
+}
+/** Portal + positioner + popup. Children: <ComboboxEmpty> and <ComboboxList>. */
+export function ComboboxContent({ side = "bottom", align = "start", sideOffset = 6, className, ...props }) {
+    const container = usePortalContainer();
+    return (_jsx(BaseCombobox.Portal, { container: container, children: _jsx(BaseCombobox.Positioner, { side: side, align: align, sideOffset: sideOffset, collisionPadding: 8, className: "z-(--z-overlay) outline-none", children: _jsx(BaseCombobox.Popup, { "data-slot": "combobox-content", className: withBase(cn(listboxPopupClass, "w-(--anchor-width)"), className), ...props }) }) }));
+}
+export function ComboboxList({ className, ...props }) {
+    return (_jsx(BaseCombobox.List, { "data-slot": "combobox-list", className: withBase(
+        // `focus-visible`: an inline list without a field takes focus itself.
+        "max-h-[min(22rem,var(--available-height))] scroll-py-1 overflow-y-auto overscroll-contain outline-none focus-visible:ring-focus scrollbar-none data-empty:hidden", className), ...props }));
+}
+export function ComboboxEmpty({ className, ...props }) {
+    return (_jsx(BaseCombobox.Empty, { "data-slot": "combobox-empty", className: withBase("px-2 py-5 text-center text-sm text-fg-subtle empty:hidden", className), ...props }));
+}
+export function ComboboxItem({ icon, description, trailing, className, children, ...props }) {
+    return (_jsxs(BaseCombobox.Item, { "data-slot": "combobox-item", className: withBase(listboxItemClass, className), ...props, children: [icon !== undefined && (_jsx("span", { "aria-hidden": true, className: listboxIconClass, children: icon })), _jsx(ItemLabel, { description: description, children: children }), trailing, _jsx(BaseCombobox.ItemIndicator, { className: listboxIndicatorClass, children: _jsx(Check, { "aria-hidden": true, strokeWidth: 2.25, className: "size-3.5" }) })] }));
+}
+export function ComboboxGroup({ className, ...props }) {
+    return (_jsx(BaseCombobox.Group, { "data-slot": "combobox-group", className: withBase("flex flex-col", className), ...props }));
+}
+export function ComboboxGroupLabel({ className, ...props }) {
+    return (_jsx(BaseCombobox.GroupLabel, { "data-slot": "combobox-group-label", className: withBase(listboxGroupLabelClass, className), ...props }));
+}
+export function ComboboxSeparator({ className, ...props }) {
+    return (_jsx(BaseCombobox.Separator, { "data-slot": "combobox-separator", className: withBase(listboxSeparatorClass, className), ...props }));
+}
+export const ComboboxCollection = BaseCombobox.Collection;
+const optionValue = (option) => option.value;
+const optionLabel = (option) => option.label;
+function groupOptions(items) {
+    const groups = new Map();
+    for (const option of items) {
+        const key = option.group ?? "";
+        const bucket = groups.get(key);
+        if (bucket)
+            bucket.push(option);
+        else
+            groups.set(key, [option]);
+    }
+    return [...groups].map(([label, options]) => ({ label, items: options }));
+}
+function renderOption(option) {
+    return (_jsx(ComboboxItem, { value: option.value, icon: option.icon, description: option.description, disabled: option.disabled === true, children: option.label }, option.value));
+}
+/**
+ * Filterable picker over string-valued options. `multiple` switches to chips.
+ * For custom item rendering or async data, compose the parts instead.
+ */
+export function Combobox(props) {
+    const { items, placeholder, emptyMessage, leading, size, className, "aria-label": ariaLabel, disabled, readOnly, required, name, id, autoHighlight = true, open, onOpenChange, } = props;
+    const t = useUiStrings().combobox;
+    const grouped = items.some((option) => option.group !== undefined);
+    const collection = useMemo(() => grouped
+        ? BaseCombobox.createItems(groupOptions(items), { getValue: optionValue, getLabel: optionLabel })
+        : BaseCombobox.createItems(items, { getValue: optionValue, getLabel: optionLabel }), [items, grouped]);
+    const labels = useMemo(() => new Map(items.map((option) => [option.value, option.label])), [items]);
+    const rootProps = {
+        items: collection,
+        autoHighlight,
+        ...(disabled === undefined ? {} : { disabled }),
+        ...(readOnly === undefined ? {} : { readOnly }),
+        ...(required === undefined ? {} : { required }),
+        ...(name === undefined ? {} : { name }),
+        ...(id === undefined ? {} : { id }),
+        ...(open === undefined ? {} : { open }),
+        ...(onOpenChange === undefined ? {} : { onOpenChange }),
+    };
+    const labelProps = ariaLabel === undefined ? {} : { "aria-label": ariaLabel };
+    const content = (_jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: emptyMessage ?? t.noMatches }), _jsx(ComboboxList, { children: grouped
+                    ? (group, index) => (_jsxs(ComboboxGroup, { items: group.items, children: [index > 0 && _jsx(ComboboxSeparator, {}), group.label !== "" && _jsx(ComboboxGroupLabel, { children: group.label }), _jsx(ComboboxCollection, { children: (option) => renderOption(option) })] }, group.label || "_"))
+                    : (option) => renderOption(option) })] }));
+    if (props.multiple === true) {
+        const { value, defaultValue, onValueChange } = props;
+        return (_jsxs(BaseCombobox.Root, { multiple: true, ...rootProps, ...(value === undefined ? {} : { value }), ...(defaultValue === undefined ? {} : { defaultValue }), ...(onValueChange === undefined ? {} : { onValueChange: (next) => onValueChange(next) }), children: [_jsx(ComboboxChipsInput, { size: size, className: className, getChipLabel: (chip) => labels.get(chip) ?? chip, ...(placeholder === undefined ? {} : { placeholder }), ...labelProps }), content] }));
+    }
+    const { value, defaultValue, onValueChange } = props;
+    return (_jsxs(BaseCombobox.Root, { ...rootProps, ...(value === undefined ? {} : { value }), ...(defaultValue === undefined ? {} : { defaultValue }), ...(onValueChange === undefined
+            ? {}
+            : { onValueChange: (next) => onValueChange(next) }), children: [_jsx(ComboboxInput, { size: size, leading: leading, className: className, ...(placeholder === undefined ? {} : { placeholder }), ...labelProps }), content] }));
+}