{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "search-field",
  "title": "search-field",
  "description": "search-field",
  "dependencies": [
    "@heroicons/react",
    "react-aria-components",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://intentui.com/r/field",
    "https://intentui.com/r/primitive",
    "https://intentui.com/r/input"
  ],
  "files": [
    {
      "path": "src/components/ui/search-field.tsx",
      "content": "'use client'\n\nimport { MagnifyingGlassIcon, XMarkIcon } from '@heroicons/react/20/solid'\nimport { Button } from 'react-aria-components/Button'\nimport type { InputProps } from 'react-aria-components/Input'\nimport {\n  SearchField as SearchFieldPrimitive,\n  type SearchFieldProps,\n} from 'react-aria-components/SearchField'\nimport { twJoin } from 'tailwind-merge'\nimport { fieldStyles } from '@/components/ui/field'\nimport { cx } from '@/lib/primitive'\nimport { Input, InputGroup } from './input'\n\nexport function SearchField({ className, ...props }: SearchFieldProps) {\n  return (\n    <SearchFieldPrimitive\n      data-slot=\"control\"\n      aria-label={props['aria-label'] ?? 'Search'}\n      className={cx(fieldStyles({ className: 'group/search-field' }), className)}\n      {...props}\n    />\n  )\n}\n\nexport function SearchInput(props: InputProps) {\n  return (\n    <InputGroup className=\"[--input-gutter-end:--spacing(8)]\">\n      <MagnifyingGlassIcon className=\"in-disabled:opacity-50\" />\n      <Input {...props} />\n      <Button\n        className={twJoin(\n          'touch-target grid place-content-center pressed:text-fg text-muted-fg hover:text-fg group-empty/search-field:invisible',\n          'px-3 py-2 sm:px-2.5 sm:py-1.5 sm:text-sm/5'\n        )}\n      >\n        <XMarkIcon className=\"size-5 sm:size-4\" />\n      </Button>\n    </InputGroup>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}