import { CommonProps } from "@trackunit/react-components";
import { IconName } from "@trackunit/ui-icons";
import { CSSProperties, ChangeEvent, FocusEvent, KeyboardEvent, ReactElement } from "react";
import { TextBaseInputProps } from "../TextField/TextBaseInput/TextBaseInput";
export interface SearchProps extends CommonProps, TextBaseInputProps {
    /**
     * The name for the HTML element.
     */
    name?: string;
    /**
     * Placeholder string to be shown in the search box.
     */
    placeholder?: string;
    /**
     * Whether the search box should widen to take up full width while in focus or not.
     * If disabled, the search box takes up full width when not in focus.
     */
    widenInputOnFocus?: boolean;
    /**
     * Whether the border for the search box should be displayed while the search box is not in focus.
     */
    hideBorderWhenNotInFocus?: boolean;
    /**
     * Value rendered in the search box.
     */
    value?: string;
    /**
     * Whether the search box is disabled or not.
     */
    disabled?: boolean;
    /**
     * Specify what if any permission the user agent has to provide automated assistance in filling out search values.
     */
    autoComplete?: string;
    /**
     * Event that occurs when the user releases a key.
     */
    onKeyUp?: (evt: KeyboardEvent<HTMLInputElement>) => void;
    /**
     * Event that occurs when there is a change.
     */
    onChange?: (evt: ChangeEvent<HTMLInputElement>) => void;
    /**
     * Event that occurs when the search box is on focus.
     */
    onFocus?: (evt: FocusEvent<HTMLInputElement>) => void;
    /**
     * Event that occurs when search box is blurred.
     */
    onBlur?: (evt: FocusEvent<HTMLInputElement>) => void;
    /**
     * Event that search box is cleared.
     */
    onClear?: () => void;
    /**
     * A custom class name to be attached to input element
     */
    inputClassName?: string;
    /**
     * Indicates whether a loading spinner should be displayed in the search box.
     */
    loading?: boolean;
    /**
     * A custom icon to be displayed in the search box.
     */
    iconName?: IconName;
    /**
     * Inline CSS styles applied to the root search container element.
     */
    style?: CSSProperties;
}
/**
 * Search renders a styled search input with a magnifying glass icon, an optional loading spinner,
 * and a clear button that appears when a value is present. It supports visual variants such as
 * widening on focus and hiding the border when not focused.
 *
 * ### When to use
 * Use Search for filtering or querying data sets — for example, a search box above a table or list to narrow down results.
 *
 * ### When not to use
 * Do not use Search for multi-filter scenarios — use `FilterBar`.
 * Do not use it as a general text input — use `TextField`.
 *
 * @example Basic search input with change handler
 * ```tsx
 * import { Search } from "@trackunit/react-form-components";
 * import { useState, ChangeEvent } from "react";
 *
 * const AssetSearch = () => {
 *   const [query, setQuery] = useState("");
 *   return (
 *     <Search
 *       value={query}
 *       onChange={(e: ChangeEvent<HTMLInputElement>) => setQuery(e.target.value)}
 *       onClear={() => setQuery("")}
 *       placeholder="Search assets..."
 *     />
 *   );
 * };
 * ```
 * @example Compact search that widens on focus
 * ```tsx
 * import { Search } from "@trackunit/react-form-components";
 *
 * const CompactSearch = () => (
 *   <Search widenInputOnFocus hideBorderWhenNotInFocus placeholder="Search..." />
 * );
 * ```
 * @param {SearchProps} props - The props for the Search component
 * @returns {ReactElement} Search component
 */
export declare const Search: {
    ({ className, placeholder, value, widenInputOnFocus, hideBorderWhenNotInFocus, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, "data-testid": dataTestId, autoComplete, loading, inputClassName, iconName, style, ref, fieldSize, id, ...rest }: SearchProps): ReactElement;
    displayName: string;
};