{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "search-field",
  "type": "registry:ui",
  "title": "Search Field",
  "description": "Search input with built-in search icon, clear button, and optional loading spinner.",
  "dependencies": [
    "@saasflare/ui"
  ],
  "files": [
    {
      "path": "components/ui/search-field.tsx",
      "type": "registry:ui",
      "content": "// @toreview\n\"use client\"\n\n/**\n * @fileoverview Saasflare SearchField — input with search icon, clear, and loading.\n * @module packages/ui/components/ui/search-field\n * @layer core\n *\n * A search-specific input with built-in search icon, clear button,\n * and optional loading spinner. Used in toolbars, command palettes,\n * and filter sections.\n *\n * @example\n * import { SearchField } from \"@saasflare/ui\";\n *\n * <SearchField\n *   placeholder=\"Search projects...\"\n *   value={query}\n *   onChange={(e) => setQuery(e.target.value)}\n *   onClear={() => setQuery(\"\")}\n * />\n */\n\nimport * as React from \"react\"\nimport { MagnifyingGlassIcon, XIcon, CircleNotchIcon } from \"@saasflare/ui\"\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\n\n/** Props for the SearchField component */\ninterface SearchFieldProps extends Omit<React.ComponentProps<\"input\">, \"type\" | keyof SaasflareComponentProps>, SaasflareComponentProps {\n  /** Show loading spinner instead of search icon */\n  loading?: boolean\n  /** Callback when clear button is clicked */\n  onClear?: () => void\n}\n\n/**\n * Search input with icon, clear button, and loading state.\n *\n * @component\n * @layer core\n *\n * @param {boolean} loading - Shows spinner in place of search icon\n * @param {function} onClear - Callback when clear button is clicked\n *\n * @example\n * const [query, setQuery] = useState(\"\");\n * <SearchField\n *   placeholder=\"Search...\"\n *   value={query}\n *   onChange={(e) => setQuery(e.target.value)}\n *   onClear={() => setQuery(\"\")}\n *   loading={isSearching}\n * />\n */\nfunction SearchField({\n  className,\n  loading = false,\n  onClear,\n  value,\n  surface,\n  radius,\n  animated,\n  iconWeight,\n  ...props\n}: SearchFieldProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n  const hasValue = typeof value === \"string\" ? value.length > 0 : false\n\n  return (\n    <div\n      data-slot=\"search-field\"\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n      className={cn(\"relative\", className)}\n    >\n      <div className=\"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground\">\n        {loading ? (\n          <CircleNotchIcon className=\"size-4 animate-spin\" aria-hidden=\"true\" />\n        ) : (\n          <MagnifyingGlassIcon weight={sf.iconWeight} className=\"size-4\" aria-hidden=\"true\" />\n        )}\n      </div>\n      <input\n        type=\"search\"\n        data-slot=\"search-field-input\"\n        className=\"h-9 w-full rounded-md border border-input bg-background pl-9 pr-9 text-sm outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50\"\n        value={value}\n        {...props}\n      />\n      {hasValue && onClear && (\n        <button\n          type=\"button\"\n          data-slot=\"search-field-clear\"\n          onClick={onClear}\n          className=\"absolute right-2 top-1/2 -translate-y-1/2 rounded-sm p-0.5 text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring\"\n          aria-label=\"Clear search\"\n        >\n          <XIcon weight={sf.iconWeight} className=\"size-3.5\" />\n        </button>\n      )}\n    </div>\n  )\n}\n\nexport { SearchField, type SearchFieldProps }\n",
      "target": "components/ui/search-field.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/search-field.json"
  }
}