{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "floating-input",
  "type": "registry:component",
  "title": "Floating Input",
  "description": "An input field with floating label animation.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "components/watermelon/floating-input.tsx",
      "type": "registry:component",
      "content": "import { cn } from \"@/lib/utils\";\nimport { useState } from \"react\";\n\ninterface FloatingInputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  label: string;\n}\n\nexport function FloatingInput({ label, className, ...props }: FloatingInputProps) {\n  const [focused, setFocused] = useState(false);\n  const [hasValue, setHasValue] = useState(false);\n\n  return (\n    <div className=\"relative\">\n      <input\n        className={cn(\n          \"peer w-full px-4 py-3 border rounded-lg bg-transparent outline-none\",\n          \"border-border focus:border-primary transition-colors\",\n          className\n        )}\n        placeholder=\" \"\n        onFocus={() => setFocused(true)}\n        onBlur={(e) => {\n          setFocused(false);\n          setHasValue(e.target.value !== \"\");\n        }}\n        onChange={(e) => setHasValue(e.target.value !== \"\")}\n        {...props}\n      />\n      <label\n        className={cn(\n          \"absolute left-4 top-3 text-muted-foreground transition-all duration-200 pointer-events-none\",\n          \"peer-focus:-top-2.5 peer-focus:left-3 peer-focus:text-xs peer-focus:bg-background peer-focus:px-1\",\n          \"peer-focus:text-primary\",\n          (focused || hasValue) && \"-top-2.5 left-3 text-xs bg-background px-1\"\n        )}\n      >\n        {label}\n      </label>\n    </div>\n  );\n}\n"
    }
  ]
}