{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "auth-13",
  "dependencies": [
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "framer-motion",
    "motion"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/auth-13.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { motion, type Variants } from \"motion/react\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { ViewIcon, ViewOffIcon } from \"@hugeicons/core-free-icons\";\n\n// Google SVG Icon\nconst GoogleIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg viewBox=\"0 0 24 24\" width=\"1em\" height=\"1em\" {...props}>\n    <path\n      d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"\n      fill=\"#4285F4\"\n    />\n    <path\n      d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.16v2.84C3.99 20.53 7.7 23 12 23z\"\n      fill=\"#34A853\"\n    />\n    <path\n      d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.16C1.43 8.55 1 10.22 1 12s.43 3.45 1.16 4.93l3.68-2.84z\"\n      fill=\"#FBBC05\"\n    />\n    <path\n      d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.16 7.07l3.68 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\n      fill=\"#EA4335\"\n    />\n  </svg>\n);\n\nexport default function Auth13() {\n  const [showPassword, setShowPassword] = useState(false);\n\n  const containerVariants: Variants = {\n    hidden: { opacity: 0 },\n    visible: {\n      opacity: 1,\n      transition: {\n        staggerChildren: 0.1,\n        delayChildren: 0.1,\n      },\n    },\n  };\n\n  const itemVariants: Variants = {\n    hidden: { opacity: 0, y: 15 },\n    visible: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 300,\n        damping: 24,\n      },\n    },\n  };\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col bg-white font-sans text-slate-900 antialiased selection:bg-[#FDBA5E]/20 selection:text-[#EFA541] lg:flex-row\">\n      {/* Left Image Panel */}\n      <div className=\"relative hidden w-full flex-col p-4 lg:flex lg:min-h-screen lg:w-1/2\">\n        <div className=\"relative h-full w-full overflow-hidden rounded-[24px] bg-neutral-100 shadow-xl\">\n          <img\n            src=\"https://assets.watermelon.sh/auth-13.avif\"\n            alt=\"Abstract orange and green blurred streaks\"\n            className=\"absolute inset-0 h-full w-full object-cover\"\n          />\n          {/* Logo overlay */}\n          <div className=\"absolute top-8 left-8\">\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M12 24.5L25 12.5C26 11.5 28 11.5 29 12.5C30 13.5 30 15 29 16L16 28L12 24.5Z\" fill=\"white\"/>\n              <path d=\"M10 18.5L23 6.5C24 5.5 26 5.5 27 6.5C28 7.5 28 9 27 10L14 22L10 18.5Z\" fill=\"white\"/>\n            </svg>\n          </div>\n        </div>\n      </div>\n\n      {/* Right Form Panel */}\n      <div className=\"flex w-full flex-col items-center justify-center p-6 sm:p-12 lg:w-1/2\">\n        <motion.div\n          variants={containerVariants}\n          initial=\"hidden\"\n          animate=\"visible\"\n          className=\"w-full max-w-[400px]\"\n        >\n          {/* Title */}\n          <motion.div variants={itemVariants} className=\"mb-10\">\n            <h1 className=\"mb-4 text-[48px] font-semibold leading-[1.05] tracking-tight text-[#1C222B]\">\n              Welcome\n              <br />\n              back\n            </h1>\n            <p className=\"text-[15px] text-slate-500 text-balance\">\n              You need to be signed in to access the project dashboard.\n            </p>\n          </motion.div>\n\n          <form className=\"flex flex-col gap-5\">\n            {/* Email */}\n            <motion.div variants={itemVariants} className=\"flex flex-col gap-2\">\n              <label htmlFor=\"email\" className=\"text-[14px] font-medium text-slate-800\">\n                Email or username\n              </label>\n              <input\n                id=\"email\"\n                type=\"text\"\n                defaultValue=\"alex.costa@example.com\"\n                className=\"w-full rounded-md border border-slate-200 bg-white px-4 py-3 text-[14px] text-slate-900 placeholder:text-slate-400 focus:border-[#FDBA5E] focus:outline-none focus:ring-1 focus:ring-[#FDBA5E] transition-colors\"\n              />\n            </motion.div>\n\n            {/* Password */}\n            <motion.div variants={itemVariants} className=\"flex flex-col gap-2\">\n              <label htmlFor=\"password\" className=\"text-[14px] font-medium text-slate-800\">\n                Password\n              </label>\n              <div className=\"relative\">\n                <input\n                  id=\"password\"\n                  type={showPassword ? \"text\" : \"password\"}\n                  defaultValue=\"password123\"\n                  className=\"w-full rounded-md border border-slate-200 bg-white px-4 py-3 pr-10 text-[14px] font-mono text-slate-900 placeholder:text-slate-400 focus:border-[#FDBA5E] focus:outline-none focus:ring-1 focus:ring-[#FDBA5E] transition-colors\"\n                />\n                <button\n                  type=\"button\"\n                  onClick={() => setShowPassword(!showPassword)}\n                  className=\"absolute inset-y-0 right-0 flex items-center pr-3 text-slate-400 hover:text-slate-600 transition-colors\"\n                >\n                  <HugeiconsIcon icon={showPassword ? ViewIcon : ViewOffIcon} className=\"size-5\" />\n                </button>\n              </div>\n            </motion.div>\n\n            {/* Checkbox & Forgot Password */}\n            <motion.div variants={itemVariants} className=\"flex items-center justify-between mt-1\">\n              <div className=\"flex items-center gap-2.5\">\n                <input\n                  id=\"remember\"\n                  type=\"checkbox\"\n                  className=\"size-[18px] rounded border-slate-300 text-[#FDBA5E] focus:ring-[#FDBA5E] transition-colors\"\n                />\n                <label htmlFor=\"remember\" className=\"text-[14px] text-slate-600\">\n                  Keep me signed in\n                </label>\n              </div>\n              <a href=\"#\" className=\"text-[14px] font-medium text-slate-800 underline decoration-slate-800 underline-offset-4 transition-colors hover:text-black hover:decoration-black\">\n                Forgot password?\n              </a>\n            </motion.div>\n\n            {/* Sign in Button */}\n            <motion.div variants={itemVariants} className=\"mt-2\">\n              <button\n                type=\"submit\"\n                className=\"w-full rounded-md bg-[#FDBA5E] py-3 text-[14px] font-medium text-slate-900 transition-transform active:scale-[0.98] hover:bg-[#EFA541]\"\n              >\n                Sign in\n              </button>\n            </motion.div>\n          </form>\n\n          {/* Google Button */}\n          <motion.div variants={itemVariants} className=\"mt-4\">\n            <button\n              type=\"button\"\n              className=\"flex w-full items-center justify-center gap-2.5 rounded-md border border-slate-200 bg-white py-3 text-[14px] font-medium text-slate-700 transition-transform active:scale-[0.98] hover:bg-slate-50\"\n            >\n              <GoogleIcon className=\"size-[18px]\" />\n              Sign in with Google\n            </button>\n          </motion.div>\n\n          {/* Footer */}\n          <motion.div variants={itemVariants} className=\"mt-10 text-center text-[14px] text-slate-500\">\n            Haven&apos;t joined yet?{\" \"}\n            <a href=\"#\" className=\"font-semibold text-slate-800 underline decoration-slate-800 underline-offset-4 transition-colors hover:text-black hover:decoration-black\">\n              Sign up\n            </a>\n          </motion.div>\n\n        </motion.div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/auth-13.tsx"
    }
  ],
  "type": "registry:ui"
}