import { Merge, Renderable, Signal, TNode, Value } from '@tempots/dom';
import { InputOptions } from './input-options';
import { BaseControllerOptions, ControllerOptions } from '../control';
import { DropdownOption } from './option';
/**
 * Configuration options for the {@link ComboboxInput} component.
 *
 * Extends {@link InputOptions} with combobox-specific properties including an
 * asynchronous option loader, custom renderers for options and the selected value,
 * and debounce timing for search queries.
 *
 * @template T - The type of the selectable option values
 */
export type ComboboxOptions<T> = Merge<InputOptions<T>, {
    /** Async function to fetch options dynamically based on the current search text */
    loadOptions: (search: string) => Promise<DropdownOption<T>[]>;
    /** Render function for displaying each option in the dropdown list */
    renderOption: (value: Signal<T>) => TNode;
    /** Optional render function for displaying the selected value in the closed trigger. Falls back to `renderOption`. */
    renderValue?: (value: Signal<T>) => TNode;
    /** Custom equality function for comparing option values. @default strict equality (===) */
    equality?: (a: T, b: T) => boolean;
    /** Placeholder text displayed when no option is selected */
    placeholder?: Value<string>;
    /** Placeholder text for the search input inside the dropdown. @default 'Search' */
    searchPlaceholder?: Value<string>;
    /** Debounce delay in milliseconds for the search query. @default 150 */
    debounceMs?: number;
    /** Whether to auto-focus the search input when the dropdown opens. @default true */
    autoFocusSearch?: boolean;
}>;
/**
 * A searchable combobox input component with asynchronous option loading and custom rendering.
 *
 * Renders a styled dropdown trigger inside an {@link InputContainer} that opens a
 * floating listbox with a search input at the top. Options are loaded asynchronously
 * via the `loadOptions` callback, which is debounced and triggered whenever the search
 * text changes. Each option is rendered using the custom `renderOption` function, while
 * the closed trigger shows the selected value via `renderValue` (or `renderOption` as
 * fallback). A loading spinner appears while options are being fetched.
 *
 * Keyboard navigation supports Arrow Up/Down, Enter to select, and Escape to close.
 * The search input receives focus automatically when the dropdown opens.
 *
 * @template T - The type of the selectable option values
 * @param options - Configuration options for the combobox
 * @returns A styled combobox input element with search and async option loading
 *
 * @example
 * ```ts
 * import { prop } from '@tempots/dom'
 * import { ComboboxInput, Option } from '@tempots/beatui'
 *
 * const user = prop<User | null>(null)
 * ComboboxInput({
 *   value: user,
 *   onChange: user.set,
 *   loadOptions: async (search) => {
 *     const users = await fetchUsers(search)
 *     return users.map(u => Option.value(u, u.name))
 *   },
 *   renderOption: (userSignal) => html.span(userSignal.$.name),
 *   placeholder: 'Search for a user...',
 *   debounceMs: 300,
 * })
 * ```
 */
export declare const ComboboxInput: <T>(options: ComboboxOptions<T>) => Renderable;
/**
 * A combobox input wired to a form controller for managed form state.
 *
 * Connects a {@link ComboboxInput} to a form {@link Controller}, automatically
 * mapping the controller's signal to the combobox value and routing change/blur
 * events through the controller's validation pipeline.
 *
 * @template T - The type of the selectable option values
 * @param options - Controller options including the form controller and combobox configuration
 * @returns A controller-bound combobox input
 */
export declare const BaseComboboxControl: <T>(options: BaseControllerOptions<T, ComboboxOptions<T>>) => Renderable;
/**
 * A complete combobox form control with label, description, error message, and validation.
 *
 * Combines {@link BaseComboboxControl} with an {@link InputWrapper} to provide a
 * full-featured form field with label, optional description, and validation error display.
 *
 * @template T - The type of the selectable option values
 * @param options - Controller options including wrapper label/description and combobox configuration
 * @returns A combobox input wrapped in a form field with label and error display
 */
export declare const ComboboxControl: <T>(options: ControllerOptions<T, ComboboxOptions<T>>) => Renderable;
