{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "floating-label-input-shadcnui",
  "type": "registry:component",
  "title": "Floating Label Input",
  "description": "Input with animated floating label",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/components/inputs/floating-label-input.tsx",
      "content": "\"use client\";\n\nimport { Input } from \"@/components/ui/input\";\nimport { motion } from \"framer-motion\";\nimport { useState } from \"react\";\n\nexport function FloatingLabelInput() {\n  const [isFocused, setIsFocused] = useState(false);\n  const [value, setValue] = useState(\"\");\n\n  const isFloating = isFocused || value.length > 0;\n\n  return (\n    <div className=\"flex items-center justify-center p-12\">\n      <div className=\"relative w-64\">\n        <Input\n          type=\"text\"\n          value={value}\n          onChange={(e) => setValue(e.target.value)}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n          className=\"peer\"\n        />\n        <motion.label\n          animate={{\n            y: isFloating ? -24 : 10,\n            scale: isFloating ? 0.85 : 1,\n          }}\n          transition={{ duration: 0.2, ease: \"easeInOut\" }}\n          className=\"pointer-events-none absolute left-3 origin-left text-sm text-gray-500\"\n        >\n          Email address\n        </motion.label>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/floating-label-input-shadcnui.tsx"
    }
  ]
}