import { Renderable, Value, Merge } from '@tempots/dom';
import { InputOptions } from './input-options';
import { BaseControllerOptions, ControllerOptions } from '../control';
import { DropdownOption } from './option';
/**
 * Configuration options for the {@link DropdownInput} component.
 *
 * Extends {@link InputOptions} with dropdown-specific properties including the
 * list of selectable options, custom equality comparison, and optional search
 * filtering.
 *
 * @template T - The type of the selectable option values
 */
export type DropdownOptions<T> = Merge<InputOptions<T>, {
    /** The list of selectable options, supporting value items, groups, and break separators */
    options: Value<DropdownOption<T>[]>;
    /** Label to show when no option is selected (fallback for `placeholder`). Uses i18n "selectOne" when both are omitted. */
    unselectedLabel?: Value<string>;
    /** 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>;
    /** Whether to enable keyboard search filtering (disables Space-to-toggle). @default false */
    searchable?: Value<boolean>;
}>;
/**
 * A dropdown select input component with keyboard navigation and flyout option list.
 *
 * Renders a styled dropdown trigger inside an {@link InputContainer} that opens a
 * floating listbox of options on click or keyboard interaction. Supports value options,
 * grouped options, and break separators. The display label automatically reflects the
 * currently selected value's label. Keyboard navigation supports Arrow Up/Down, Enter
 * to select, Escape to close, and optionally Space to toggle (when `searchable` is false).
 *
 * @template T - The type of the selectable option values
 * @param options - Configuration options for the dropdown
 * @returns A styled dropdown input element with a floating option list
 *
 * @example
 * ```ts
 * import { prop } from '@tempots/dom'
 * import { DropdownInput, Option } from '@tempots/beatui'
 *
 * const color = prop('red')
 * DropdownInput({
 *   value: color,
 *   onChange: color.set,
 *   options: [
 *     Option.value('red', 'Red'),
 *     Option.value('green', 'Green'),
 *     Option.value('blue', 'Blue'),
 *   ],
 *   placeholder: 'Select a color',
 * })
 * ```
 *
 * @example
 * ```ts
 * // With grouped options
 * DropdownInput({
 *   value: prop(''),
 *   onChange: (v) => console.log('Selected:', v),
 *   options: [
 *     Option.group('Warm', [
 *       Option.value('red', 'Red'),
 *       Option.value('orange', 'Orange'),
 *     ]),
 *     Option.break,
 *     Option.group('Cool', [
 *       Option.value('blue', 'Blue'),
 *       Option.value('green', 'Green'),
 *     ]),
 *   ],
 * })
 * ```
 */
export declare const DropdownInput: <T>(options: DropdownOptions<T>) => Renderable;
/**
 * A dropdown input wired to a form controller for managed form state.
 *
 * Connects a {@link DropdownInput} to a form {@link Controller}, automatically
 * mapping the controller's signal to the dropdown 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 dropdown configuration
 * @returns A controller-bound dropdown input
 */
export declare const BaseDropdownControl: <T>(options: BaseControllerOptions<T, DropdownOptions<T>>) => Renderable;
/**
 * A complete dropdown form control with label, description, error message, and validation.
 *
 * Combines {@link BaseDropdownControl} 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 dropdown configuration
 * @returns A dropdown input wrapped in a form field with label and error display
 */
export declare const DropdownControl: <T>(options: ControllerOptions<T, DropdownOptions<T>>) => Renderable;
