/**
 * @fileoverview Saasflare SearchField — input with search icon, clear, and loading.
 * @module packages/ui/components/ui/search-field
 * @layer core
 *
 * A search-specific input with built-in search icon, clear button,
 * and optional loading spinner. Used in toolbars, command palettes,
 * and filter sections.
 *
 * @example
 * import { SearchField } from "@saasflare/ui";
 *
 * <SearchField
 *   placeholder="Search projects..."
 *   value={query}
 *   onChange={(e) => setQuery(e.target.value)}
 *   onClear={() => setQuery("")}
 * />
 */
import * as React from "react";
import { type SaasflareComponentProps } from "../../providers";
/** Props for the SearchField component */
interface SearchFieldProps extends Omit<React.ComponentProps<"input">, "type" | keyof SaasflareComponentProps>, SaasflareComponentProps {
    /** Show loading spinner instead of search icon */
    loading?: boolean;
    /** Callback when clear button is clicked */
    onClear?: () => void;
}
/**
 * Search input with icon, clear button, and loading state.
 *
 * @component
 * @layer core
 *
 * @param {boolean} loading - Shows spinner in place of search icon
 * @param {function} onClear - Callback when clear button is clicked
 *
 * @example
 * const [query, setQuery] = useState("");
 * <SearchField
 *   placeholder="Search..."
 *   value={query}
 *   onChange={(e) => setQuery(e.target.value)}
 *   onClear={() => setQuery("")}
 *   loading={isSearching}
 * />
 */
declare function SearchField({ className, loading, onClear, value, surface, radius, animated, iconWeight, ...props }: SearchFieldProps): import("react/jsx-runtime").JSX.Element;
export { SearchField, type SearchFieldProps };