/**
 * @file Typeahead.tsx
 * @input Uses React, BaseTypeahead, Field, Token, InputGroupContext
 * @output Exports Typeahead styled typeahead component
 * @position Styled wrapper; composes BaseTypeahead with Field or InputGroup
 *
 * Owns the input wrapper (border, padding, status styles), selected value
 * token with spacing compensation, and edit mode behavior. Delegates
 * search, keyboard navigation, and dropdown to BaseTypeahead.
 *
 * SYNC: When modified, update:
 * - /packages/core/src/Typeahead/index.ts
 * - /apps/storybook/stories/Typeahead.stories.tsx
 * - /packages/cli/assets/templates/blocks/components/Typeahead/ (showcase blocks)
 */
import React, { type ReactNode } from 'react';
import { type InputStatus, type FieldStatusVariant } from '../Field';
import { type IconType } from '../Icon';
import type { BaseProps } from '../BaseProps';
import type { SizeValue } from '../utils/types';
import type { SearchableItem, SearchSource } from './types';
export type { InputStatus as TypeaheadStatus, InputStatusType as TypeaheadStatusType, } from '../Field';
export type TypeaheadSize = 'sm' | 'md' | 'lg';
export interface TypeaheadProps<T extends SearchableItem> extends Omit<BaseProps<HTMLDivElement>, 'onChange'> {
    ref?: React.Ref<HTMLDivElement>;
    /** Accessible label (required). */
    label: string;
    /** Visually hide the label. @default false */
    isLabelHidden?: boolean;
    /** Helper text. */
    description?: string;
    /** Required field. @default false */
    isRequired?: boolean;
    /** Optional field. @default false */
    isOptional?: boolean;
    /** Validation status. */
    status?: InputStatus;
    /**
     * How the status message is placed relative to the input.
     * - 'attached': message overlaps directly below the input (bordered treatment)
     * - 'detached': message floats below as a separate element with spacing
     * @default 'attached'
     */
    statusVariant?: FieldStatusVariant;
    /**
     * Icon to display at the start of the input.
     * Accepts a ReactNode (e.g. `<Icon icon={SearchIcon} />`) or an SVG icon component directly.
     */
    startIcon?: ReactNode | IconType;
    /**
     * Width of the field. Numbers are treated as pixels, strings are used as-is
     * (e.g. `'100%'`). Sizes the whole field (label, control, and status) so they
     * stay aligned, unlike setting width via `xstyle`/`className`/`style`.
     */
    width?: SizeValue;
    /** Label tooltip. */
    labelTooltip?: string;
    /** Search source providing items. */
    searchSource: SearchSource<T>;
    /** Currently selected item (null = nothing selected). */
    value: T | null;
    /** Callback when selection changes. */
    onChange: (item: T | null) => void;
    /** Render function for dropdown items. Default: TypeaheadItem. */
    renderItem?: (item: T) => ReactNode;
    /** Placeholder text. */
    placeholder?: string;
    /** Show results on focus before typing. @default false */
    hasEntriesOnFocus?: boolean;
    /** Max dropdown items. @default 10 */
    maxMenuItems?: number;
    /** Text shown when no results found. @default 'No results found' */
    emptySearchResultsText?: string;
    /** Whether the input is disabled. @default false */
    isDisabled?: boolean;
    /**
     * Explains why the input is disabled. When set together with `isDisabled`,
     * the input shows a tooltip with this text on hover and keyboard focus, and
     * the field stays focusable (via `aria-disabled`) so the reason is
     * discoverable by keyboard and assistive technology. Editing and selection
     * stay blocked.
     *
     * Use this instead of wrapping a disabled input in `Tooltip` — disabled
     * controls don't emit the pointer events an external tooltip needs.
     *
     * @example
     * ```
     * <Typeahead
     *   label="Assignee"
     *   searchSource={userSource}
     *   value={assignee}
     *   onChange={setAssignee}
     *   isDisabled
     *   disabledMessage="You need the Editor role to change this"
     * />
     * ```
     */
    disabledMessage?: string;
    /** Show clear button. @default true */
    hasClear?: boolean;
    /** Auto-focus on mount. @default false */
    hasAutoFocus?: boolean;
    /** Input size. @default 'md' */
    size?: TypeaheadSize;
    /**
     * Debounce delay in ms before triggering search after typing.
     * Set to 0 for synchronous/local search sources that don't need debouncing.
     * @default 150
     */
    debounceMs?: number;
    /** Query change callback. */
    onChangeQuery?: (query: string) => void;
    /** Callback when dropdown opens/closes. */
    onOpenChange?: (isOpen: boolean) => void;
}
/**
 * A search-as-you-type component for selecting an item from a search source.
 *
 * Wraps BaseTypeahead with Field for label, description, and status.
 * Owns the input wrapper styling, selected value token, and edit mode.
 *
 * Edit mode: clicking the token or input area removes the token, populates
 * the input with the value's label, and selects all text. Blurring without
 * selecting restores the original token. Escape also restores.
 *
 * @example
 * ```
 * <Typeahead
 *   label="Assignee"
 *   searchSource={userSource}
 *   value={assignee}
 *   onChange={setAssignee}
 *   placeholder="Search users..."
 * />
 * ```
 */
export declare function Typeahead<T extends SearchableItem>({ ref, label, isLabelHidden, description, isRequired, isOptional, status, statusVariant, startIcon, labelTooltip, searchSource, value, onChange, renderItem, placeholder, hasEntriesOnFocus, maxMenuItems, emptySearchResultsText, isDisabled, disabledMessage, hasClear, hasAutoFocus, size: sizeProp, debounceMs, onChangeQuery, onOpenChange, width, xstyle, className, style, 'data-testid': testId, }: TypeaheadProps<T>): React.JSX.Element;
export declare namespace Typeahead {
    var displayName: string;
}
//# sourceMappingURL=Typeahead.d.ts.map