{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "auth-4",
  "description": "Premium signup form with side-by-side name fields, high-contrast design, and social login.",
  "registryDependencies": [
    "button",
    "input",
    "label"
  ],
  "files": [
    {
      "path": "registry/blocks/auth/4/signup-form.tsx",
      "content": "\"use client\";\n\nimport { EyeIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { LogoIcon } from \"@/components/logo\";\nimport { Plus } from \"@/components/plus\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\n\nconst GoogleIcon = (props: React.ComponentProps<\"svg\">) => (\n  <svg fill=\"currentColor\" viewBox=\"0 0 24 24\" {...props}>\n    <title>Google Icon</title>\n    <g>\n      <path d=\"M12.479,14.265v-3.279h11.049c0.108,0.571,0.164,1.247,0.164,1.979c0,2.46-0.672,5.502-2.84,7.669   C18.744,22.829,16.051,24,12.483,24C5.869,24,0.308,18.613,0.308,12S5.869,0,12.483,0c3.659,0,6.265,1.436,8.223,3.307L18.392,5.62   c-1.404-1.317-3.307-2.341-5.913-2.341C7.65,3.279,3.873,7.171,3.873,12s3.777,8.721,8.606,8.721c3.132,0,4.916-1.258,6.059-2.401   c0.927-0.927,1.537-2.251,1.777-4.059L12.479,14.265z\" />\n    </g>\n  </svg>\n);\n\nexport function SignupForm() {\n  return (\n    <div className=\"group relative w-full max-w-md overflow-hidden rounded-2xl border bg-background p-8 shadow-lg\">\n      <Plus className=\"-top-px -left-px\" />\n      <Plus className=\"-top-px -right-px rotate-90\" />\n      <Plus className=\"-bottom-px -left-px -rotate-90\" />\n      <Plus className=\"-bottom-px -right-px rotate-180\" />\n\n      <div className=\"mb-8 flex flex-col items-center gap-4\">\n        <LogoIcon className=\"size-8\" />\n        <div className=\"text-center\">\n          <h2 className=\"font-bold text-2xl tracking-tight\">\n            Create an Account\n          </h2>\n          <p className=\"text-muted-foreground text-sm\">\n            Welcome! Create an account to get started\n          </p>\n        </div>\n      </div>\n\n      <form className=\"space-y-4\" onSubmit={(e) => e.preventDefault()}>\n        <Button\n          className=\"h-11 w-full font-medium transition-all hover:bg-muted\"\n          type=\"button\"\n          variant=\"outline\"\n        >\n          <GoogleIcon className=\"mr-2 size-4\" />\n          Continue with Google\n        </Button>\n\n        <div className=\"relative\">\n          <div className=\"absolute inset-0 flex items-center\">\n            <span className=\"w-full border-muted-foreground/20 border-t\" />\n          </div>\n          <div className=\"relative flex justify-center font-bold text-[10px] uppercase tracking-wider\">\n            <span className=\"bg-background px-2 text-muted-foreground\">\n              OR CONTINUE WITH\n            </span>\n          </div>\n        </div>\n\n        <div className=\"grid gap-4\">\n          <div className=\"grid grid-cols-2 gap-4\">\n            <div className=\"grid gap-2 text-start\">\n              <Label htmlFor=\"first-name\">First Name</Label>\n              <Input\n                className=\"h-10\"\n                id=\"first-name\"\n                placeholder=\"John\"\n                type=\"text\"\n              />\n            </div>\n            <div className=\"grid gap-2 text-start\">\n              <Label htmlFor=\"last-name\">Last Name</Label>\n              <Input\n                className=\"h-10\"\n                id=\"last-name\"\n                placeholder=\"Doe\"\n                type=\"text\"\n              />\n            </div>\n          </div>\n          <div className=\"grid gap-2 text-start\">\n            <Label htmlFor=\"email\">Email</Label>\n            <Input\n              className=\"h-10\"\n              id=\"email\"\n              placeholder=\"Enter your email\"\n              type=\"email\"\n            />\n          </div>\n          <div className=\"grid gap-2 text-start\">\n            <Label htmlFor=\"password\">Password</Label>\n            <div className=\"relative\">\n              <Input\n                className=\"h-10 pr-10\"\n                id=\"password\"\n                placeholder=\"Enter your password\"\n                type=\"password\"\n              />\n              <button\n                className=\"-translate-y-1/2 absolute top-1/2 right-3 text-muted-foreground transition-colors hover:text-foreground\"\n                title=\"Toggle password visibility\"\n                type=\"button\"\n              >\n                <EyeIcon className=\"size-4\" />\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <Button\n          className=\"h-11 w-full font-semibold shadow-sm transition-all active:scale-[0.98]\"\n          type=\"submit\"\n        >\n          Continue\n        </Button>\n\n        <p className=\"mt-6 text-center text-muted-foreground text-xs\">\n          Have an account?{\" \"}\n          <a className=\"font-medium text-primary hover:underline\" href=\"#\">\n            Sign In\n          </a>\n        </p>\n      </form>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/logo.tsx",
      "content": "\"use client\";\n\nimport Image from \"next/image\";\nimport { useTheme } from \"next-themes\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ntype LogoProps = {\n  className?: string;\n};\n\nexport const LogoIcon = ({ className }: LogoProps) => {\n  const { theme, systemTheme } = useTheme();\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  if (!mounted) {\n    return (\n      <span\n        className={cn(\n          \"inline-block size-6 animate-pulse rounded-full bg-muted\",\n          className\n        )}\n      />\n    );\n  }\n\n  const currentTheme = theme === \"system\" ? systemTheme : theme;\n  const src =\n    currentTheme === \"dark\"\n      ? \"/logo/freddy-logo-icon-light.png\"\n      : \"/logo/freddy-logo-icon-dark.png\";\n\n  return (\n    <Image\n      alt=\"Freddy UI\"\n      className={cn(\"size-6 object-contain\", className)}\n      height={250}\n      priority\n      src={src}\n      width={250}\n    />\n  );\n};\n\nexport const Logo = ({ className }: LogoProps) => {\n  const { theme, systemTheme } = useTheme();\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  if (!mounted) {\n    return (\n      <span\n        className={cn(\n          \"inline-block h-6 w-24 animate-pulse rounded bg-muted\",\n          className\n        )}\n      />\n    );\n  }\n\n  const currentTheme = theme === \"system\" ? systemTheme : theme;\n  const src =\n    currentTheme === \"dark\"\n      ? \"/logo/freddy-logo-light.png\"\n      : \"/logo/freddy-logo-dark.png\";\n\n  return (\n    <Image\n      alt=\"Freddy UI\"\n      className={cn(\"h-6 w-auto object-contain\", className)}\n      height={106}\n      priority\n      src={src}\n      width={344}\n    />\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "auth"
  ],
  "type": "registry:block"
}