{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-animated",
  "type": "registry:block",
  "title": "Input animated",
  "description": "Input animated",
  "files": [
    {
      "path": "components/usages/inputanimatedusage.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport { InputAnimated } from \"@/registry/open-source/input-animated\";\n\nconst InputPreview = () => {\n\tconst [value, setValue] = useState(\"\");\n\n\treturn (\n\t\t<InputAnimated\n\t\t\tlabel=\"Email Address\"\n\t\t\tvalue={value}\n\t\t\tonChange={(e) => setValue(e.target.value)}\n\t\t/>\n\t);\n};\n\nexport default InputPreview;\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/inputanimatedusage.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport { InputAnimated } from \"@/registry/open-source/input-animated\";\n\nconst InputPreview = () => {\n\tconst [value, setValue] = useState(\"\");\n\n\treturn (\n\t\t<InputAnimated\n\t\t\tlabel=\"Email Address\"\n\t\t\tvalue={value}\n\t\t\tonChange={(e) => setValue(e.target.value)}\n\t\t/>\n\t);\n};\n\nexport default InputPreview;\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/input-animated.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport { motion } from \"motion/react\";\n\ninterface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n\tlabel: string;\n\tvalue: string;\n\tclassName?: string;\n}\n\nconst containerVariants = {\n\tinitial: {},\n\tanimate: {\n\t\ttransition: {\n\t\t\tstaggerChildren: 0.05,\n\t\t},\n\t},\n};\n\nconst letterVariants = {\n\tinitial: {\n\t\ty: 0,\n\t\tcolor: \"inherit\",\n\t},\n\tanimate: {\n\t\ty: \"-120%\",\n\t\tcolor: \"var(--color-zinc-500)\",\n\t\ttransition: {\n\t\t\ttype: \"spring\",\n\t\t\tstiffness: 300,\n\t\t\tdamping: 20,\n\t\t},\n\t},\n};\n\nexport const InputAnimated = ({\n\tlabel,\n\tclassName = \"\",\n\tvalue,\n\t...props\n}: InputProps) => {\n\tconst [isFocused, setIsFocused] = useState(false);\n\tconst showLabel = isFocused || value.length > 0;\n\n\treturn (\n\t\t<div className={cn(\"relative\", className)}>\n\t\t\t<motion.div\n\t\t\t\tclassName=\"absolute top-1/2 -translate-y-1/2 pointer-events-none text-foreground dark:text-foreground\"\n\t\t\t\tvariants={containerVariants}\n\t\t\t\tinitial=\"initial\"\n\t\t\t\tanimate={showLabel ? \"animate\" : \"initial\"}\n\t\t\t>\n\t\t\t\t{label.split(\"\").map((char, index) => (\n\t\t\t\t\t<motion.span\n\t\t\t\t\t\tkey={index + \"input-animated\"}\n\t\t\t\t\t\tclassName=\"inline-block text-sm\"\n\t\t\t\t\t\tvariants={letterVariants}\n\t\t\t\t\t\tstyle={{ willChange: \"transform\" }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{char === \" \" ? \"\\u00A0\" : char}\n\t\t\t\t\t</motion.span>\n\t\t\t\t))}\n\t\t\t</motion.div>\n\n\t\t\t<input\n\t\t\t\ttype=\"text\"\n\t\t\t\tonFocus={() => setIsFocused(true)}\n\t\t\t\tonBlur={() => setIsFocused(false)}\n\t\t\t\t{...props}\n\t\t\t\tclassName=\"outline-hidden border-b-2 border-zinc-900 dark:border-zinc-50 py-2 w-full text-base font-medium text-foreground dark:text-foreground bg-transparent placeholder-transparent\"\n\t\t\t/>\n\t\t</div>\n\t);\n};\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}