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 LinkValueProps } from "./link_value";
import { type StyleProps } from "./style_props";
import type { SelectOption } from "./select";
/** Throws outside a `Combobox`. */
export declare function useCombobox(): {
    close: () => void;
    setOpen: (open: boolean) => void;
    query: string;
    open: boolean;
    searching: boolean;
};
/** What an option that names a row reads beside its label: the row's picture, the line under it, its figure. */
export type ComboboxOptionRow = Pick<LinkValueProps, "image" | "subtitle" | "due" | "stage" | "figure">;
export interface ComboboxProps<T extends string = string, D = unknown> {
    /** With `onSearchChange` the consumer refreshes these; without, they filter locally by label. */
    options?: SelectOption<T, D>[];
    /**
     * A select field from the SDK (`useFieldOptions().fields.<column>`), keys and colours intact.
     * `options` wins.
     */
    fieldOptions?: FieldOptionsSource<T>;
    /** `dot` in a list; `tonal` for a surface's one prominent status. */
    badge?: "tonal" | "dot";
    onValueChange: (option: SelectOption<T, D>) => void;
    /** Debounced. Omit for local label filtering. */
    onSearchChange?: (query: string) => void;
    /** The option chosen — or, an array, the rows chosen (a multi-link): they rest inside the field, each as its
     *  `LinkValue` with its removal (`ComboboxInput`'s `onClear` names it), and a pick adds one. */
    value?: SelectOption<T, D> | readonly SelectOption<T, D>[] | null;
    /** Default true; `false` keeps the field on its placeholder — a search box whose picks land elsewhere. */
    reflectSelection?: boolean;
    /** `onValueChange` then receives `{ value: query, label: query }`. */
    allowCustom?: boolean;
    /** Default `Add "<query>"`; null suppresses it. */
    customOptionLabel?: (query: string) => string | null;
    /**
     * Default "bottom"; with "top" the highlight still lands on the first match, so Enter never
     * duplicates.
     */
    customOptionPlacement?: "top" | "bottom";
    /** Shown under a heading while the search is empty. */
    recentOptions?: SelectOption<T, D>[];
    /** For an option that is not a row (a coloured choice); an option that names a row is a `LinkValue`. On
     *  the root so `option` is typed against `<T, D>`. */
    renderOptionContent?: (option: SelectOption<T, D>) => ReactNode;
    /** Every option is drawn as a `LinkValue` — its label the title; this adds the row's picture, the line
     *  under the title and its figure. The chosen option reads the same in the field. */
    getOptionRow?: (option: SelectOption<T, D>) => ComboboxOptionRow;
    loading?: boolean;
    searchDebounceMs?: number;
    disabled?: boolean;
    autoFocus?: boolean;
    children: ReactNode;
}
/**
 * A searchable pick over Base UI's combobox with the search inside the popup: the field is a trigger that
 * reads its choice, and the popup's top is the search — a debounced query over the rows under it; an empty
 * search browses all (or `recentOptions`). The root provides data via context; the parts compose the chrome.
 */
export declare function Combobox<T extends string = string, D = unknown>(props: ComboboxProps<T, D>): React.JSX.Element;
export interface ComboboxInputProps extends StyleProps {
    /** Omit for a select (trailing chevron); `icon="search"` is the search-box look. */
    icon?: IconName;
    /** The field's words while nothing is chosen. */
    placeholder?: string;
    /** A × beside a chosen value, firing `onClear` with it: the caller empties the value, or takes that row out
     *  of the set. */
    clearable?: boolean;
    onClear?: (option: SelectOption<string, unknown>) => void;
    clearLabel?: string;
    accessibilityLabel?: string;
    testID?: string;
    autoFocus?: boolean;
    /** The shell holding the field. */
    ref?: React.Ref<HTMLDivElement>;
    render?: Base.InputGroup.Props["render"];
}
/** THE FIELD NEVER TURNS INTO AN INPUT: it reads its choice as the list draws it — the same `LinkValue` (its
 *  picture, line, stage and figure) at the same size, in a frame that grows to it — with the chevron to change
 *  it and the × to clear it, before, while and after the popup is open. A set rests the same way, every chosen
 *  row in the one frame with its own ×, as `Select multi` rests its chips, and the popup adds to it. A press,
 *  Enter, Space or ArrowDown opens the popup, whose search takes the focus; a key typed on the field starts
 *  that search. */
export declare function ComboboxInput(props: ComboboxInputProps): React.JSX.Element;
export interface ComboboxContentProps extends StyleProps {
    recentsLabel?: string;
    /** A `<ComboboxEmpty>` child wins. */
    emptyText?: string;
    accessibilityLabel?: string;
    testID?: string;
    /** Outside the listbox: never an option or in keyboard nav. */
    footer?: ReactNode;
    children?: ReactNode;
    /** The popup, which `className` and `style` land on. */
    ref?: React.Ref<HTMLDivElement>;
    render?: Base.Popup.Props["render"];
}
/** The popup: the search on top — DOM focus stays in it, the active row rides `aria-activedescendant` — the
 *  rows under it, and the footer below them. */
export declare function ComboboxContent(props: ComboboxContentProps): React.JSX.Element;
/** Used instead of `emptyText`. */
export declare function ComboboxEmpty(props: {
    children: ReactNode;
}): React.JSX.Element;