{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-form-motion",
  "type": "registry:component",
  "description": "An input form component with spotlight effect.",
  "dependencies": [
    "motion/react"
  ],
  "registryDependencies": [
    "input",
    "button"
  ],
  "files": [
    {
      "path": "src/app/components/animatedComponents/forms/input-forms/InputFormMotion.tsx",
      "content": "\"use client\";\r\nimport * as React from \"react\";\r\nimport { motion, useMotionTemplate, useMotionValue } from \"motion/react\";\r\nimport { Input as ShadcnInput } from \"@/components/ui/input\"; \r\nimport { cn } from \"@/lib/utils\";\r\nimport { Button } from \"@/components/ui/button\";\r\n\r\n\r\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}\r\n\r\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\r\n  ({ className, type, placeholder , ...props }, ref) => {\r\n    const radius = 100;\r\n    const mouseX = useMotionValue(0);\r\n    const mouseY = useMotionValue(0);\r\n    const [active, setActive] = React.useState(false);\r\n\r\n    const handleMove = (e: React.MouseEvent<HTMLDivElement>) => {\r\n      const rect = e.currentTarget.getBoundingClientRect();\r\n      mouseX.set(e.clientX - rect.left);\r\n      mouseY.set(e.clientY - rect.top);\r\n    };\r\n\r\n    return (\r\n      <motion.div\r\n        onMouseMove={handleMove}\r\n        onMouseEnter={() => setActive(true)}\r\n        onMouseLeave={() => setActive(false)}\r\n        style={{\r\n          background: useMotionTemplate`\r\n            radial-gradient(${active ? `${radius}px` : \"0px\"} circle at ${mouseX}px ${mouseY}px,\r\n            var(--color-primary), transparent 80%)\r\n          `,\r\n        }}\r\n        className=\"rounded-lg p-[2px] transition\"\r\n      >\r\n        <ShadcnInput\r\n          ref={ref}\r\n          type={type}\r\n          placeholder={placeholder}\r\n          {...props}\r\n          className={cn(\r\n            \"flex h-10 w-full rounded-md bg-gray-50 dark:bg-forest-black border dark:border-transparent border-transparent focus:border-primary\",\r\n            className\r\n          )}\r\n        />\r\n      </motion.div>\r\n    );\r\n  }\r\n);\r\n\r\n\r\nexport default function InputFormMotion() {\r\n  return (\r\n<div className=\"flex justify-center\">\r\n  <form className=\"max-w-md min-w-md p-6 shadow rounded-md bg-white dark:bg-gray-900\">\r\n    <h2 className=\"text-xl font-semibold text-center text-gray-800 dark:text-white mb-4\">\r\n      Sign Up Form\r\n    </h2>\r\n\r\n    <div className=\"mb-4\">\r\n      <label className=\"mb-1 block text-sm font-medium text-gray-600 dark:text-gray-300\">\r\n        Full Name\r\n      </label>\r\n      <Input type=\"text\" placeholder=\"Enter your full name\" />\r\n    </div>\r\n\r\n    <div className=\"mb-4\">\r\n      <label className=\"mb-1 block text-sm font-medium text-gray-600 dark:text-gray-300\">\r\n        Email\r\n      </label>\r\n      <Input type=\"email\" placeholder=\"Enter your email\" />\r\n    </div>\r\n\r\n    <div className=\"mb-4\">\r\n      <label className=\"mb-1 block text-sm font-medium text-gray-600 dark:text-gray-300\">\r\n        Password\r\n      </label>\r\n      <Input type=\"password\" placeholder=\"Enter your password\" />\r\n    </div>\r\n\r\n    <div className=\"mb-4\">\r\n      <label className=\"mb-1 block text-sm font-medium text-gray-600 dark:text-gray-300\">\r\n        Confirm Password\r\n      </label>\r\n      <Input type=\"password\" placeholder=\"Confirm your password\" />\r\n    </div>\r\n\r\n    <Button type=\"submit\" className=\"w-full\">\r\n      Sign Up\r\n    </Button>\r\n\r\n    <p className=\"mt-4 text-sm text-center text-gray-500 dark:text-gray-400\">\r\n      Already have an account?{\" \"}\r\n      <a href=\"#\" className=\"text-blue-500 hover:underline\">\r\n        Sign In\r\n      </a>\r\n    </p>\r\n  </form>\r\n</div>\r\n\r\n\r\n  );\r\n}\r\n\r\n",
      "type": "registry:component",
      "target": "components/animated/forms/input-forms/InputFormMotion.tsx"
    }
  ]
}