@atmos.build/ui 0.1.0

package/dist/components/collection-view/use-collection-selection.js

@@ -0,0 +1,203 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+function equalSets(left, right) {
+    return left.size === right.size && [...left].every((id) => right.has(id));
+}
+const alwaysSelectable = () => true;
+export function useCollectionSelection({ itemIds, isSelectable = alwaysSelectable, selectedIds: controlledSelection, defaultSelectedIds, defaultFocusedId, onSelectionChange, onOpen, onDelete, }) {
+    const [internalSelection, setInternalSelection] = useState(() => new Set(defaultSelectedIds));
+    const [focusedId, setFocusedId] = useState(defaultFocusedId);
+    const [anchorId, setAnchorId] = useState(defaultFocusedId);
+    const requestedSelection = controlledSelection ?? internalSelection;
+    const selectableIds = useMemo(() => itemIds.filter(isSelectable), [isSelectable, itemIds]);
+    const availableIds = useMemo(() => new Set(selectableIds), [selectableIds]);
+    const indexById = useMemo(() => new Map(selectableIds.map((id, index) => [id, index])), [selectableIds]);
+    const selectedIds = useMemo(() => new Set([...requestedSelection].filter((id) => availableIds.has(id))), [availableIds, requestedSelection]);
+    const reconciledFocusedId = focusedId && availableIds.has(focusedId) ? focusedId : undefined;
+    const reconciledAnchorId = anchorId && availableIds.has(anchorId) ? anchorId : undefined;
+    const commit = useCallback((next) => {
+        const ordered = new Set(selectableIds.filter((id) => next.has(id)));
+        if (controlledSelection === undefined)
+            setInternalSelection(ordered);
+        onSelectionChange?.(ordered);
+    }, [controlledSelection, onSelectionChange, selectableIds]);
+    const range = useCallback((from, to) => {
+        const first = indexById.get(from);
+        const last = indexById.get(to);
+        if (first === undefined || last === undefined)
+            return new Set([to]);
+        const start = Math.min(first, last);
+        const end = Math.max(first, last);
+        return new Set(selectableIds.slice(start, end + 1));
+    }, [indexById, selectableIds]);
+    const select = useCallback((id, modifiers = {}) => {
+        if (!availableIds.has(id))
+            return;
+        const additive = Boolean(modifiers.metaKey || modifiers.ctrlKey);
+        let next;
+        if (modifiers.shiftKey && reconciledAnchorId) {
+            const selectedRange = range(reconciledAnchorId, id);
+            next = additive ? new Set([...selectedIds, ...selectedRange]) : selectedRange;
+        }
+        else if (additive) {
+            next = new Set(selectedIds);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            setAnchorId(id);
+        }
+        else {
+            next = new Set([id]);
+            setAnchorId(id);
+        }
+        setFocusedId(id);
+        commit(next);
+    }, [availableIds, commit, range, reconciledAnchorId, selectedIds]);
+    const activate = useCallback((id, modifiers = {}) => {
+        if (modifiers.metaKey || modifiers.ctrlKey || modifiers.shiftKey) {
+            select(id, modifiers);
+            return;
+        }
+        onOpen?.(id);
+    }, [onOpen, select]);
+    const handleKeyDown = useCallback((event) => {
+        const command = Boolean(event.metaKey || event.ctrlKey);
+        if (command && event.key.toLowerCase() === 'a') {
+            event.preventDefault?.();
+            commit(new Set(selectableIds));
+            return;
+        }
+        if (command && (event.key === 'Backspace' || event.key === 'Delete') && onDelete) {
+            const targets = selectedIds.size > 0
+                ? selectableIds.filter((id) => selectedIds.has(id))
+                : reconciledFocusedId
+                    ? [reconciledFocusedId]
+                    : [];
+            if (targets.length === 0)
+                return;
+            event.preventDefault?.();
+            onDelete(targets);
+            return;
+        }
+        if (event.key === 'Enter' && reconciledFocusedId) {
+            event.preventDefault?.();
+            onOpen?.(reconciledFocusedId);
+            return;
+        }
+        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')
+            return;
+        if (selectableIds.length === 0)
+            return;
+        event.preventDefault?.();
+        const currentIndex = reconciledFocusedId ? (indexById.get(reconciledFocusedId) ?? -1) : -1;
+        const offset = event.key === 'ArrowDown' ? 1 : -1;
+        const initialIndex = event.key === 'ArrowDown' ? 0 : selectableIds.length - 1;
+        const nextIndex = currentIndex < 0
+            ? initialIndex
+            : Math.max(0, Math.min(selectableIds.length - 1, currentIndex + offset));
+        const nextId = selectableIds[nextIndex];
+        if (!nextId)
+            return;
+        const rangeAnchor = reconciledAnchorId ?? reconciledFocusedId ?? nextId;
+        setFocusedId(nextId);
+        if (event.shiftKey) {
+            setAnchorId(rangeAnchor);
+            const selectedRange = range(rangeAnchor, nextId);
+            commit(command ? new Set([...selectedIds, ...selectedRange]) : selectedRange);
+        }
+        else {
+            setAnchorId(nextId);
+            commit(new Set([nextId]));
+        }
+    }, [
+        commit,
+        indexById,
+        onDelete,
+        onOpen,
+        range,
+        reconciledAnchorId,
+        reconciledFocusedId,
+        selectableIds,
+        selectedIds,
+    ]);
+    const clearSelection = useCallback(() => {
+        setFocusedId(undefined);
+        setAnchorId(undefined);
+        commit(new Set());
+    }, [commit]);
+    const focusItem = useCallback((id, options = {}) => {
+        if (id === undefined) {
+            setFocusedId(undefined);
+            if (options.establishAnchor)
+                setAnchorId(undefined);
+            return;
+        }
+        if (!availableIds.has(id))
+            return;
+        setFocusedId(id);
+        if (options.establishAnchor)
+            setAnchorId(id);
+    }, [availableIds]);
+    useEffect(() => {
+        if (!equalSets(requestedSelection, selectedIds))
+            onSelectionChange?.(selectedIds);
+    }, [onSelectionChange, requestedSelection, selectedIds]);
+    useEffect(() => {
+        if (equalSets(internalSelection, selectedIds) &&
+            focusedId === reconciledFocusedId &&
+            anchorId === reconciledAnchorId) {
+            return;
+        }
+        let active = true;
+        queueMicrotask(() => {
+            if (!active)
+                return;
+            if (controlledSelection === undefined && !equalSets(internalSelection, selectedIds)) {
+                setInternalSelection(selectedIds);
+            }
+            if (focusedId !== reconciledFocusedId)
+                setFocusedId(reconciledFocusedId);
+            if (anchorId !== reconciledAnchorId)
+                setAnchorId(reconciledAnchorId);
+        });
+        return () => {
+            active = false;
+        };
+    }, [
+        anchorId,
+        controlledSelection,
+        focusedId,
+        internalSelection,
+        reconciledAnchorId,
+        reconciledFocusedId,
+        selectedIds,
+    ]);
+    const getItemProps = useCallback((id) => ({
+        role: 'option',
+        'aria-selected': selectedIds.has(id),
+        tabIndex: reconciledFocusedId === id ? 0 : -1,
+        onClick: (modifiers) => activate(id, modifiers),
+        onKeyDown: handleKeyDown,
+    }), [activate, handleKeyDown, reconciledFocusedId, selectedIds]);
+    return useMemo(() => ({
+        selectedIds,
+        focusedId: reconciledFocusedId,
+        anchorId: reconciledAnchorId,
+        focusItem,
+        select,
+        activate,
+        handleKeyDown,
+        clearSelection,
+        getItemProps,
+    }), [
+        clearSelection,
+        activate,
+        focusItem,
+        getItemProps,
+        handleKeyDown,
+        reconciledAnchorId,
+        reconciledFocusedId,
+        select,
+        selectedIds,
+    ]);
+}

package/dist/components/color-picker.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Button } from './button.js';
+export declare const DEFAULT_COLOR_PALETTE: readonly ["#ef4444", "#f97316", "#f59e0b", "#eab308", "#84cc16", "#22c55e", "#10b981", "#14b8a6", "#06b6d4", "#0ea5e9", "#3b82f6", "#6366f1", "#8b5cf6", "#a855f7", "#d946ef", "#ec4899", "#f43f5e", "#64748b"];
+export declare const DEFAULT_COMPACT_COLOR_PALETTE: readonly ["#64748b", "#0ea5e9", "#10b981", "#f59e0b", "#f43f5e", "#8b5cf6", "#ec4899", "#14b8a6"];
+export interface ColorPickerProps {
+    value: string | undefined;
+    onChange: (value: string) => void;
+    swatches?: readonly string[];
+    allowCustom?: boolean;
+    hexPlaceholder?: string;
+    'aria-label'?: string;
+    hexAriaLabel?: string;
+    disabled?: boolean;
+    align?: 'start' | 'center' | 'end';
+    className?: string;
+    size?: React.ComponentProps<typeof Button>['size'];
+}
+export declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/color-picker.js

@@ -0,0 +1,77 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { SwatchButton } from './swatch-button.js';
+import { Button } from './button.js';
+import { Input } from './input.js';
+import { Popover, PopoverContent, PopoverTrigger } from './popover.js';
+import { cn } from '../lib/cn.js';
+export const DEFAULT_COLOR_PALETTE = [
+    '#ef4444',
+    '#f97316',
+    '#f59e0b',
+    '#eab308',
+    '#84cc16',
+    '#22c55e',
+    '#10b981',
+    '#14b8a6',
+    '#06b6d4',
+    '#0ea5e9',
+    '#3b82f6',
+    '#6366f1',
+    '#8b5cf6',
+    '#a855f7',
+    '#d946ef',
+    '#ec4899',
+    '#f43f5e',
+    '#64748b',
+];
+export const DEFAULT_COMPACT_COLOR_PALETTE = [
+    '#64748b',
+    '#0ea5e9',
+    '#10b981',
+    '#f59e0b',
+    '#f43f5e',
+    '#8b5cf6',
+    '#ec4899',
+    '#14b8a6',
+];
+const HEX_RE = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+function normalizeHex(input) {
+    const v = input.trim();
+    const withHash = v.startsWith('#') ? v : `#${v}`;
+    if (!HEX_RE.test(withHash))
+        return null;
+    return withHash.toLowerCase();
+}
+export const ColorPicker = React.forwardRef(function ColorPicker({ value, onChange, swatches = DEFAULT_COLOR_PALETTE, allowCustom = true, hexPlaceholder, 'aria-label': ariaLabel, hexAriaLabel, disabled, align = 'start', className, size = 'icon', }, ref) {
+    const [open, setOpen] = React.useState(false);
+    const [draft, setDraft] = React.useState('');
+    React.useEffect(() => {
+        if (open)
+            setDraft(value ?? '');
+    }, [open, value]);
+    const selected = value ? normalizeHex(value) : null;
+    const commitHex = (raw) => {
+        const hex = normalizeHex(raw);
+        if (hex)
+            onChange(hex);
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { ref: ref, type: "button", variant: "outline", size: size, disabled: disabled, "aria-label": ariaLabel, "data-slot": "color-picker-trigger", className: cn('p-1', className), children: _jsx("span", { className: "size-4 rounded-[5px] ring-1 ring-black/10 dark:ring-white/15", style: { backgroundColor: selected ?? 'transparent' }, "data-slot": "color-picker-swatch" }) }) }), _jsxs(PopoverContent, { align: align, sideOffset: 6, className: "w-auto p-2.5", "data-slot": "color-picker-content", children: [_jsx("div", { role: "radiogroup", "aria-label": ariaLabel, className: "grid grid-cols-6 gap-1.5", children: swatches.map((swatch) => {
+                            const hex = normalizeHex(swatch) ?? swatch;
+                            const isActive = selected === hex;
+                            return (_jsx(SwatchButton, { color: hex, selected: isActive, label: swatch, role: "radio", "aria-checked": isActive, "data-testid": `color-${hex}`, onSelect: () => {
+                                    onChange(hex);
+                                    setOpen(false);
+                                } }, swatch));
+                        }) }), allowCustom ? (_jsx(Input, { value: draft, placeholder: hexPlaceholder ?? '#000000', "aria-label": hexAriaLabel ?? ariaLabel, "data-slot": "color-picker-hex", className: "mt-2.5 h-7 font-mono text-xs", onChange: (e) => {
+                            setDraft(e.target.value);
+                            commitHex(e.target.value);
+                        }, onKeyDown: (e) => {
+                            if (e.key === 'Enter') {
+                                e.preventDefault();
+                                if (normalizeHex(draft))
+                                    setOpen(false);
+                            }
+                        } })) : null] })] }));
+});

package/dist/components/color-swatch-list.d.ts

@@ -0,0 +1,16 @@
+import { type LabelColorSwatch } from '../lib/label-swatches.js';
+export interface ColorSwatchListLabels {
+    swatch: (token: string, fallback: string) => string;
+}
+export interface ColorSwatchListProps {
+    value?: string | null;
+    onPick: (token: string) => void;
+    onCancel?: () => void;
+    focusOnMount?: boolean;
+    swatches?: readonly LabelColorSwatch[];
+    searchPlaceholder?: string;
+    ariaLabel?: string;
+    onActiveChange?: (token: string | null) => void;
+    labels?: ColorSwatchListLabels;
+}
+export declare function ColorSwatchList({ value, onPick, onCancel, focusOnMount, swatches, searchPlaceholder, ariaLabel, onActiveChange, labels, }: ColorSwatchListProps): import("react").JSX.Element;

package/dist/components/color-swatch-list.js

@@ -0,0 +1,60 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState, } from 'react';
+import { Check } from 'lucide-react';
+import { LABEL_SWATCHES } from '../lib/label-swatches.js';
+import { cn } from '../lib/cn.js';
+const DEFAULT_LABELS = {
+    swatch: (_token, fallback) => fallback,
+};
+export function ColorSwatchList({ value, onPick, onCancel, focusOnMount = true, swatches = LABEL_SWATCHES, searchPlaceholder, ariaLabel, onActiveChange, labels = DEFAULT_LABELS, }) {
+    const [query, setQuery] = useState('');
+    const [activeOverride, setActiveOverride] = useState(null);
+    const inputRef = useRef(null);
+    const listId = useId();
+    useEffect(() => {
+        if (focusOnMount)
+            inputRef.current?.focus();
+    }, [focusOnMount]);
+    const colors = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (!q)
+            return swatches;
+        return swatches.filter((s) => s.token.toLowerCase().includes(q) ||
+            s.name.toLowerCase().includes(q) ||
+            labels.swatch(s.token, s.name).toLowerCase().includes(q));
+    }, [labels, query, swatches]);
+    const tokens = useMemo(() => colors.map((s) => s.token), [colors]);
+    const activeToken = activeOverride && tokens.includes(activeOverride) ? activeOverride : (tokens[0] ?? null);
+    useEffect(() => {
+        onActiveChange?.(activeToken);
+    }, [activeToken, onActiveChange]);
+    const handleKey = (e) => {
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+            if (tokens.length === 0)
+                return;
+            e.preventDefault();
+            const idx = activeToken ? tokens.indexOf(activeToken) : -1;
+            const delta = e.key === 'ArrowDown' ? 1 : -1;
+            setActiveOverride(tokens[(idx + delta + tokens.length) % tokens.length] ?? null);
+            return;
+        }
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            if (activeToken)
+                onPick(activeToken);
+            return;
+        }
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            onCancel?.();
+        }
+    };
+    const activeDomId = activeToken ? `${listId}-row-${activeToken}` : undefined;
+    return (_jsxs("div", { className: "-mx-3", children: [_jsx("div", { className: "border-border/60 border-b px-2.5 pb-1.5", children: _jsx("input", { ref: inputRef, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": listId, "aria-expanded": true, "aria-activedescendant": activeDomId, value: query, placeholder: searchPlaceholder, onChange: (e) => setQuery(e.target.value), onKeyDown: handleKey, className: "placeholder:text-muted-foreground/70 w-full bg-transparent text-[13px] outline-none" }) }), _jsx("ul", { id: listId, role: "listbox", "aria-label": ariaLabel, className: "max-h-[220px] overflow-y-auto py-1", children: colors.map((s) => {
+                    const active = activeToken === s.token;
+                    return (
+                    // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- keyboard handled by the parent input via aria-activedescendant
+                    _jsxs("li", { id: `${listId}-row-${s.token}`, role: "option", "aria-selected": active, "data-active": active || undefined, onMouseEnter: () => setActiveOverride(s.token), onClick: () => onPick(s.token), className: cn('text-foreground mx-1 flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-[13px]', active && 'bg-muted'), children: [_jsx("span", { "aria-hidden": true, className: cn('inline-block size-3 shrink-0 rounded-full', s.dot) }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.swatch(s.token, s.name) }), value === s.token ? (_jsx(Check, { className: "text-muted-foreground size-3.5 shrink-0", "aria-hidden": true })) : null] }, s.token));
+                }) })] }));
+}

package/dist/components/combobox/combobox.d.ts

@@ -0,0 +1,4 @@
+import { type ReactNode } from 'react';
+import { type ComboboxProps } from './types.js';
+export type { ComboboxProps, UseItemsResult } from './types.js';
+export declare function Combobox<TItem>(props: ComboboxProps<TItem>): ReactNode;

package/dist/components/combobox/combobox.js

@@ -0,0 +1,70 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, useMemo } from 'react';
+import { RefreshCw } from 'lucide-react';
+import { Button } from '../button.js';
+import { cn } from '../../lib/cn.js';
+import { ComboboxContent, ComboboxCreate, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxRoot, ComboboxTrigger, } from './compound.js';
+import { useCombobox } from './context.js';
+import { ComboboxCreateStep } from './create-step.js';
+import { DEFAULT_COMBOBOX_LABELS } from './types.js';
+export function Combobox(props) {
+    const { children, triggerClassName, contentClassName, open, onOpenChange, ...body } = props;
+    return (_jsxs(ComboboxRoot, { open: open, onOpenChange: onOpenChange, children: [_jsx(ComboboxTrigger, { className: triggerClassName, children: children }), _jsx(ComboboxContent, { className: contentClassName, children: _jsx(Body, { ...body }) })] }));
+}
+function Body({ value, onSelect, useItems, getId, getLabel, renderItem, getSection, createLabel, CreateForm, renderCreateStep, onQuickCreate, emptyText, loadingText, placeholder, allowCreate = true, showCreateWhenEmpty = false, createLabelWhenEmpty, triggerKey, labels: labelsProp, }) {
+    const labels = { ...DEFAULT_COMBOBOX_LABELS, ...labelsProp };
+    const { query, debouncedQuery, mode, setMode, setOpen } = useCombobox();
+    const result = useItems(debouncedQuery);
+    const items = useMemo(() => result.data ?? [], [result.data]);
+    const trimmedQuery = query.trim();
+    const isPending = result.isLoading || trimmedQuery !== debouncedQuery.trim();
+    const hasExactMatch = useMemo(() => {
+        if (!getLabel || !trimmedQuery)
+            return false;
+        const needle = trimmedQuery.toLowerCase();
+        return items.some((i) => getLabel(i).toLowerCase() === needle);
+    }, [items, trimmedQuery, getLabel]);
+    const canCreate = Boolean(onQuickCreate) || Boolean(CreateForm) || Boolean(renderCreateStep);
+    const showCreate = allowCreate &&
+        canCreate &&
+        (trimmedQuery.length > 0 ? !hasExactMatch : showCreateWhenEmpty);
+    const activeCreateLabel = trimmedQuery.length > 0 ? createLabel : (createLabelWhenEmpty ?? createLabel);
+    const hasStep = Boolean(renderCreateStep) || Boolean(CreateForm);
+    const handleSelectItem = (item) => {
+        onSelect(item);
+        setOpen(false);
+    };
+    const pickCreate = () => {
+        if (onQuickCreate) {
+            onQuickCreate(trimmedQuery);
+            setOpen(false);
+            return;
+        }
+        setMode('create');
+    };
+    const inCreateMode = mode === 'create' && hasStep;
+    const onStepCreated = (item) => {
+        onSelect(item);
+        setOpen(false);
+    };
+    const onStepCancel = () => setMode('list');
+    const stepBody = renderCreateStep
+        ? renderCreateStep({ query: trimmedQuery, onCreated: onStepCreated, onCancel: onStepCancel })
+        : CreateForm
+            ? (_jsx(CreateForm, { initialValue: trimmedQuery, onCreated: onStepCreated, onCancel: onStepCancel }))
+            : null;
+    if (inCreateMode) {
+        return (_jsx("div", { className: "animate-in fade-in-0 slide-in-from-top-1 duration-150", children: _jsx(ComboboxCreateStep, { label: createLabel, labels: labels, children: stepBody }) }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(ComboboxInput, { placeholder: placeholder ?? labels.searchPlaceholder, triggerKey: triggerKey, loading: isPending }), _jsxs(ComboboxList, { label: labels.searchResults, children: [result.isError && items.length === 0 ? (_jsx("li", { className: "px-1.5 py-1", children: _jsx(ErrorBanner, { onRetry: result.refetch, labels: labels }) })) : items.length === 0 && !showCreate ? (_jsx(ComboboxEmpty, { pending: isPending, pendingText: loadingText, children: trimmedQuery.length === 0 ? labels.typeToSearch : (emptyText ?? labels.noMatches) })) : (items.map((item, index) => {
+                        const id = getId(item);
+                        const section = getSection?.(item);
+                        const previous = index > 0 ? items[index - 1] : undefined;
+                        const sectionChanged = getSection && section !== undefined && (index === 0 || getSection(previous) !== section);
+                        return (_jsxs(Fragment, { children: [sectionChanged ? (_jsx("li", { role: "presentation", className: cn('text-muted-foreground px-2 pb-0.5 text-[10.5px]', index > 0 && 'border-border/60 mt-1 border-t pt-1.5'), children: section })) : null, _jsx(ComboboxItem, { value: id, selected: value === id, onSelect: () => handleSelectItem(item), children: ({ active, selected }) => renderItem(item, { active, selected }) })] }, id));
+                    })), showCreate ? (_jsx(ComboboxCreate, { query: trimmedQuery, onCreate: pickCreate, label: activeCreateLabel })) : null] })] }));
+}
+function ErrorBanner({ onRetry, labels }) {
+    return (_jsxs("div", { role: "alert", className: "flex items-center justify-between gap-2 rounded-md border border-destructive/30 bg-destructive/5 px-2.5 py-1.5 text-[12px] text-destructive", children: [_jsx("span", { children: labels.loadFailed }), onRetry ? (_jsxs(Button, { size: "xs", variant: "ghost", onClick: onRetry, type: "button", children: [_jsx(RefreshCw, { className: "size-3" }), " ", labels.retry] })) : null] }));
+}

package/dist/components/combobox/compound.d.ts

@@ -0,0 +1,68 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { StackedPopoverContent, StackedPopoverTrigger } from '../popover-stack.js';
+import { type ComboboxProviderProps } from './context.js';
+export type ComboboxRootProps = ComboboxProviderProps;
+export declare function ComboboxRoot(props: ComboboxRootProps): import("react").JSX.Element;
+export type ComboboxTriggerProps = ComponentProps<typeof StackedPopoverTrigger> & {
+    className?: string;
+};
+export declare function ComboboxTrigger({ asChild, children, className, ...rest }: ComboboxTriggerProps): import("react").JSX.Element;
+export type ComboboxContentProps = ComponentProps<typeof StackedPopoverContent>;
+export declare function ComboboxContent({ className, ...rest }: ComboboxContentProps): import("react").JSX.Element;
+export type ComboboxInputProps = {
+    placeholder?: string;
+    triggerKey?: string;
+    loading?: boolean;
+    className?: string;
+};
+export declare function ComboboxInput({ placeholder, triggerKey, loading, className }: ComboboxInputProps): import("react").JSX.Element;
+export type ComboboxListProps = {
+    children: ReactNode;
+    className?: string;
+    label?: string;
+};
+export declare function ComboboxList({ children, className, label }: ComboboxListProps): import("react").JSX.Element;
+export type ComboboxItemProps = {
+    value: string;
+    onSelect: () => void;
+    selected?: boolean;
+    children: ReactNode | ((opts: {
+        active: boolean;
+        selected: boolean;
+    }) => ReactNode);
+    className?: string;
+};
+export declare function ComboboxItem({ value, onSelect, selected, children, className, }: ComboboxItemProps): import("react").JSX.Element;
+export type ComboboxItemActionsProps = {
+    children: ReactNode;
+    className?: string;
+};
+export declare function ComboboxItemActions({ children, className }: ComboboxItemActionsProps): import("react").JSX.Element;
+export declare const comboboxPortalProps: Record<string, string>;
+export type ComboboxEmptyProps = {
+    children?: ReactNode;
+    pending?: boolean;
+    pendingText?: ReactNode;
+    className?: string;
+};
+export declare function ComboboxEmpty({ children, pending, pendingText, className }: ComboboxEmptyProps): import("react").JSX.Element;
+export type ComboboxCreateProps = {
+    query: string;
+    onCreate: () => void;
+    label: string;
+    className?: string;
+};
+export declare function ComboboxCreate({ query, onCreate, label, className }: ComboboxCreateProps): import("react").JSX.Element;
+export type ComboboxActionProps = {
+    value: string;
+    onSelect: () => void;
+    children: ReactNode;
+    className?: string;
+};
+export declare function ComboboxAction({ value, onSelect, children, className, }: ComboboxActionProps): import("react").JSX.Element;
+export type ComboboxGroupProps = {
+    label?: string;
+    children: ReactNode;
+    className?: string;
+};
+export declare function ComboboxGroup({ label, children, className }: ComboboxGroupProps): import("react").JSX.Element;