import "./combobox.css";
import type * as React from "react";
import { type ReactNode } from "react";
import { Combobox as Base } from "@base-ui/react/combobox";
import { type IconName } from "./icon";
import { type FieldOptionsSource } from "./option_picker";
import { type StyleProps } from "./style_props";
import type { SelectOption } from "./select";
/** The surrounding `Combobox`'s state, for a part or its children — `close()` to
 *  dismiss the popup, plus the live flags. Throws outside a `Combobox`. */
export declare function useCombobox(): {
    close: () => void;
    setOpen: (open: boolean) => void;
    query: string;
    open: boolean;
    searching: boolean;
};
export interface ComboboxProps<T extends string = string, D = unknown> {
    /** With `onSearchChange` the consumer refreshes these server-side; without it,
     *  they are filtered locally by label. */
    options?: SelectOption<T, D>[];
    /** A SELECT FIELD, straight from the SDK (`useFieldOptions().fields.<column>`) —
     *  its whole option set becomes this picker's options, keys and colours intact.
     *  `options` wins where both are stated. */
    fieldOptions?: FieldOptionsSource<T>;
    /** DRAW EACH OF THE FIELD'S OPTIONS AS ITS OWN MARK — `dot` in a list of
     *  choices, `tonal` for the one prominent status of a surface. */
    badge?: "tonal" | "dot";
    onValueChange: (option: SelectOption<T, D>) => void;
    /** Debounced, fires as the user types. Omit for local label filtering. */
    onSearchChange?: (query: string) => void;
    value?: SelectOption<T, D> | null;
    /** Reflect the picked label in the input (classic autocomplete). Default true;
     *  `false` keeps the input a pure search. For a multi-value CHIP field use
     *  `Select multi`. */
    reflectSelection?: boolean;
    /** Accept free text: `onValueChange` then receives `{ value: query, label:
     *  query }`. */
    allowCustom?: boolean;
    /** Default: `Add "<query>"`. Return null to suppress it for a given query. */
    customOptionLabel?: (query: string) => string | null;
    /** Default "bottom"; "top" pins it above the results, where the keyboard
     *  highlight still lands on the first MATCH so Enter never duplicates. */
    customOptionPlacement?: "top" | "bottom";
    /** Shown — under a heading — when the input is focused but empty. */
    recentOptions?: SelectOption<T, D>[];
    /** Rich row content, on the root so its `option` is typed against `<T, D>`. */
    renderOptionContent?: (option: SelectOption<T, D>) => ReactNode;
    /** A single-line subtitle under the label (e.g. a code or company). */
    getOptionDescription?: (option: SelectOption<T, D>) => string | undefined;
    loading?: boolean;
    searchDebounceMs?: number;
    disabled?: boolean;
    /** Focus the input (and open) on mount. */
    autoFocus?: boolean;
    /** `ComboboxInput` then `ComboboxContent`. */
    children: ReactNode;
}
/**
 * The ARIA combobox, composed — a styled Base UI `Combobox` whose input sits
 * OUTSIDE the popup: typing drives a (debounced) search and the results are a
 * listbox below. On an empty field it browses the full set (or `recentOptions`).
 *
 * The root holds the data and provides it via context; the parts render the
 * chrome, so per-row content, the empty state and recents are COMPOSED:
 *
 * ```tsx
 * <Combobox options={hits} value={sel} onSearchChange={setQ} onValueChange={pick} allowCustom>
 *   <ComboboxInput icon="search" clearable placeholder="Search…" />
 *   <ComboboxContent recentsLabel="Recent" footer={validity}>
 *     <ComboboxEmpty>No matches — type a name to create one</ComboboxEmpty>
 *   </ComboboxContent>
 * </Combobox>
 * ```
 */
export declare function Combobox<T extends string = string, D = unknown>(props: ComboboxProps<T, D>): React.JSX.Element;
export interface ComboboxInputProps extends StyleProps {
    /** OMIT (the default) for a SELECT — no leading glyph, a trailing chevron;
     *  `icon="search"` is the search-box look. */
    icon?: IconName;
    placeholder?: string;
    /** An in-input ✕ whenever the input has text; it empties the input, resets the
     *  search and fires `onClear`. */
    clearable?: boolean;
    onClear?: () => void;
    /** Default "Clear". */
    clearLabel?: string;
    accessibilityLabel?: string;
    testID?: string;
    /** Defaults to the root's `autoFocus`, which lands here. */
    autoFocus?: boolean;
    /** The field SHELL — the box that paints the border and holds the slots. */
    ref?: React.Ref<HTMLDivElement>;
    render?: Base.InputGroup.Props["render"];
}
/** The editable text field that drives the search and owns the keyboard: DOM
 *  focus stays here, the active row riding `aria-activedescendant`. */
export declare function ComboboxInput(props: ComboboxInputProps): React.JSX.Element;
export interface ComboboxContentProps extends StyleProps {
    /** Heading over the idle list when `recentOptions` were supplied. */
    recentsLabel?: string;
    /** Shown when a non-empty query matches nothing; a `<ComboboxEmpty>` child wins
     *  over it. */
    emptyText?: string;
    accessibilityLabel?: string;
    testID?: string;
    /** A pinned row below the results and OUTSIDE the listbox, so its content is
     *  auxiliary — never an option, never in keyboard option-nav. */
    footer?: ReactNode;
    children?: ReactNode;
    /** The POPUP — the panel this entry is, which `className` and `style` land on. */
    ref?: React.Ref<HTMLDivElement>;
    render?: Base.Popup.Props["render"];
}
/** The popup body: an optional recents heading, the row list, then the `footer`. */
export declare function ComboboxContent(props: ComboboxContentProps): React.JSX.Element;
/** A richer empty state for `ComboboxContent` — used INSTEAD of its `emptyText`
 *  string. Renders only when a non-empty query matches nothing. */
export declare function ComboboxEmpty(props: {
    children: ReactNode;
}): React.JSX.Element;