{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "search-input-with-icon",
  "title": "Search Input With Icon",
  "description": "A premium search input with a focused state and an icon that becomes a submit action as you type.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "components/input/SearchInputWithIcon.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport type { FormEvent, InputHTMLAttributes } from \"react\";\nimport { ArrowRight, Search } from \"lucide-react\";\n\ntype SearchInputWithIconProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"type\"\n> & {\n  // eslint-disable-next-line no-unused-vars\n  onSearch?: (query: string) => void;\n  className?: string;\n};\n\nexport default function SearchInputWithIcon({\n  value,\n  defaultValue = \"\",\n  onChange,\n  onSearch,\n  \"aria-label\": ariaLabel,\n  className = \"\",\n  disabled,\n  ...props\n}: SearchInputWithIconProps) {\n  const [query, setQuery] = useState(String(value ?? defaultValue));\n  const displayValue = value === undefined ? query : String(value);\n  const hasQuery = displayValue.length > 0;\n\n  const submit = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    if (displayValue.trim()) onSearch?.(displayValue);\n  };\n\n  return (\n    <form\n      onSubmit={submit}\n      className={[\n        \"group flex h-12 w-full items-center rounded-[var(--radius-xl,0.75rem)] border border-[color:var(--color-border,#e5e7eb)] bg-[var(--color-background,#fff)] p-1 shadow-sm transition-all duration-200 focus-within:border-[color:var(--color-input,#9ca3af)] focus-within:shadow-md\",\n        disabled && \"opacity-60\",\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n    >\n      <input\n        {...props}\n        type=\"search\"\n        aria-label={ariaLabel ?? \"Search\"}\n        value={displayValue}\n        disabled={disabled}\n        onChange={(event) => {\n          setQuery(event.target.value);\n          onChange?.(event);\n        }}\n        className=\"min-w-0 flex-1 bg-transparent px-3 text-sm text-[color:var(--color-foreground,#030712)] outline-none placeholder:text-[color:var(--color-muted-foreground,#9ca3af)] [&::-webkit-search-cancel-button]:hidden\"\n      />\n      <button\n        type=\"submit\"\n        aria-label={hasQuery ? \"Submit search\" : \"Search\"}\n        disabled={disabled || !hasQuery}\n        className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--radius-md,0.375rem)] text-[color:var(--color-muted-foreground,#9ca3af)] transition-all duration-200 group-focus-within:bg-[var(--color-primary,#030712)] group-focus-within:text-[color:var(--color-primary-foreground,#fff)] disabled:group-focus-within:bg-transparent disabled:group-focus-within:text-[color:var(--color-muted-foreground,#9ca3af)] disabled:cursor-default\"\n      >\n        {hasQuery ? (\n          <ArrowRight className=\"h-4 w-4\" aria-hidden=\"true\" />\n        ) : (\n          <Search\n            className=\"h-4 w-4 transition-transform duration-200 group-focus-within:scale-90\"\n            aria-hidden=\"true\"\n          />\n        )}\n      </button>\n    </form>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/input/SearchInputWithIcon.tsx"
    }
  ],
  "categories": [
    "input"
  ],
  "type": "registry:component"
}