{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "floating-input",
  "type": "registry:ui",
  "title": "Floating Input",
  "description": "A text input whose label floats above the value on focus. Pure CSS peer states, no JavaScript needed for the animation.",
  "files": [
    {
      "path": "registry/ui/floating-input.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\n\nexport interface FloatingInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"placeholder\"> {\n  label: string;\n}\n\nexport const FloatingInput = React.forwardRef<HTMLInputElement, FloatingInputProps>(\n  ({ label, id, className = \"\", ...props }, ref) => {\n    const autoId = React.useId();\n    const inputId = id ?? autoId;\n    return (\n      <div className={[\"relative w-full\", className].join(\" \")}>\n        <input\n          ref={ref}\n          id={inputId}\n          placeholder=\" \"\n          className={[\n            \"peer h-[52px] w-full rounded-xl border border-white/15 bg-zinc-950 px-3.5 pb-1 pt-5\",\n            \"text-sm text-zinc-100 outline-none transition\",\n            \"focus:border-sky-300 focus:ring-4 focus:ring-sky-300/10\",\n          ].join(\" \")}\n          {...props}\n        />\n        <label\n          htmlFor={inputId}\n          className={[\n            \"pointer-events-none absolute left-3.5 top-1.5 text-[11px] text-sky-300 transition-all\",\n            \"peer-placeholder-shown:top-[15px] peer-placeholder-shown:text-sm peer-placeholder-shown:text-zinc-500\",\n            \"peer-focus:top-1.5 peer-focus:text-[11px] peer-focus:text-sky-300\",\n          ].join(\" \")}\n        >\n          {label}\n        </label>\n      </div>\n    );\n  }\n);\nFloatingInput.displayName = \"FloatingInput\";\n"
    }
  ]
}