{
  "$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",
    "cn"
  ],
  "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 \"cn\"\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-foreground text-muted-foreground hover:text-foreground 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"
}