import { ComponentPropsWithoutRef } from 'react';
import { DataTrackingId, LayoutUtilProps, Size } from '../../../types';
/**
 * Props for the SearchField component
 * @extends Omit<ComponentPropsWithoutRef<"input">, "size" | "prefix" | "required" | "children">
 * @extends LayoutUtilProps
 */
export type SearchFieldProps = Omit<ComponentPropsWithoutRef<"input">, "size" | "prefix" | "required" | "children"> & LayoutUtilProps & {
    /**
     * Size of the search field
     * @default "medium"
     */
    size?: Extract<Size, "xsmall" | "small" | "medium" | "large">;
    /**
     * Whether the search field is disabled
     * @default false
     */
    disabled?: boolean;
    /**
     * Callback when the clear button is clicked or activated via keyboard (Enter/Space)
     */
    onClear?: () => void;
} & DataTrackingId;
/**
 * SearchField component for text input with search functionality.
 *
 * Features:
 * - Search icon prefix for visual clarity
 * - Clear button that appears when input has value
 * - Arrow key navigation between input and clear button (Right arrow to clear button, Left arrow back to input)
 * - Clear button activated with Enter/Space keys
 * - Focus returns to input after clearing
 * - Multiple size variants (xsmall, small, medium, large)
 * - Controlled and uncontrolled modes
 * - Disabled and read-only states
 * - Accessibility support with proper ARIA attributes
 * - Layout utility props for positioning and spacing
 * - Automatic value detection for clear button visibility
 * - Search-specific input type and autocomplete settings
 * - Screen reader support with placeholder announcements
 * - Automatic tracking ID generation for analytics
 *
 * @example
 * <SearchField
 *   placeholder="Search users..."
 *   onChange={(e) => setSearchTerm(e.target.value)}
 *   onClear={() => setSearchTerm("")}
 * />
 *
 * @example
 * <SearchField
 *   size="large"
 *   value={searchValue}
 *   onChange={(e) => setSearchValue(e.target.value)}
 *   disabled={isLoading}
 * />
 */
export declare const SearchField: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "size" | "children" | "prefix" | "required"> & LayoutUtilProps & {
    /**
     * Size of the search field
     * @default "medium"
     */
    size?: Extract<Size, "xsmall" | "small" | "medium" | "large">;
    /**
     * Whether the search field is disabled
     * @default false
     */
    disabled?: boolean;
    /**
     * Callback when the clear button is clicked or activated via keyboard (Enter/Space)
     */
    onClear?: () => void;
} & DataTrackingId & import('react').RefAttributes<HTMLInputElement>>;