{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "search-input",
  "type": "registry:ui",
  "title": "Search input",
  "description": "Search input with a leading search icon and a clear button that appears once there is text. Comes in sm, default and lg sizes, controlled or uncontrolled.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/input-affix.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/search-input.tsx",
      "type": "registry:ui",
      "target": "components/ui/search-input.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { SearchIcon, XIcon } from \"lucide-react\"\nimport { InputAffix } from \"@/components/ui/input-affix\"\nimport { cn } from \"@/lib/utils\"\n\ntype SearchInputProps = Omit<React.ComponentProps<\"input\">, \"size\" | \"prefix\" | \"type\"> & {\n  size?: \"sm\" | \"default\" | \"lg\"\n  onClear?: () => void\n  containerClassName?: string\n}\n\nfunction SearchInput({ className, containerClassName, onClear, value, defaultValue, onChange, size=\"default\", ...props }: SearchInputProps) {\n  const [internal, setInternal] = React.useState(defaultValue?.toString() ?? \"\")\n  const controlled = value !== undefined\n  const current = controlled ? String(value ?? \"\") : internal\n  return (\n    <div data-slot=\"search-input\">\n      <InputAffix\n      type=\"search\"\n      size={size}\n      leading={<SearchIcon />}\n      trailing={\n        current ? (\n          <button\n            type=\"button\"\n            aria-label=\"Clear search\"\n            className=\"rounded-md p-0.5 text-fg-muted transition-[color] duration-[70ms] hover:text-fg\"\n            onClick={() => {\n              if (!controlled) setInternal(\"\")\n              onClear?.()\n              onChange?.({ target: { value: \"\" } } as React.ChangeEvent<HTMLInputElement>)\n            }}\n          >\n            <XIcon className=\"size-3.5\" />\n          </button>\n        ) : null\n      }\n      value={value}\n      defaultValue={defaultValue}\n      onChange={(e) => {\n        if (!controlled) setInternal(e.target.value)\n        onChange?.(e)\n      }}\n      containerClassName={cn(containerClassName)}\n      className={className}\n      {...props}\n    />\n    </div>\n  )\n}\nexport { SearchInput }\n"
    }
  ]
}