{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "search-field",
  "title": "Search field",
  "description": "Input + search icon + clear",
  "dependencies": [
    "cn@^0.4.0",
    "lucide-react@^1.52.0"
  ],
  "registryDependencies": [
    "input"
  ],
  "files": [
    {
      "path": "components/kit/search-field.tsx",
      "content": "'use client';\nimport { cn } from 'cn';\nimport { SearchIcon, XIcon } from 'lucide-react';\nimport type * as React from 'react';\nimport { Input } from '@/components/ui/input';\n\ntype Props = Omit<React.ComponentProps<typeof Input>, 'value' | 'onChange'> & {\n  value: string;\n  onChangeText: (text: string) => void;\n  containerClassName?: string;\n};\n\n/** Input with a leading search icon and a clear button. */\nexport function SearchField({ value, onChangeText, className, containerClassName, ...props }: Props) {\n  return (\n    <div className={cn('relative', containerClassName)}>\n      <SearchIcon className=\"text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2\" aria-hidden />\n      <Input type=\"search\" value={value} onChange={(e) => onChangeText(e.target.value)} className={cn('pr-9 pl-9 [&::-webkit-search-cancel-button]:hidden', className)} {...props} />\n      {value ? (\n        <button\n          type=\"button\"\n          aria-label=\"Clear search\"\n          onClick={() => onChangeText('')}\n          className=\"text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 absolute top-1/2 right-2 flex size-6 -translate-y-1/2 items-center justify-center rounded-sm outline-none focus-visible:ring-[3px]\">\n          <XIcon className=\"size-4\" aria-hidden />\n        </button>\n      ) : null}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/search-field.tsx"
    }
  ],
  "meta": {
    "exports": [
      "SearchField"
    ],
    "api": "<SearchField value onChangeText placeholder />"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "inputs"
  ],
  "type": "registry:component"
}