{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "auth-9",
  "description": "A compact, modern signup form variant.",
  "registryDependencies": [
    "button",
    "input",
    "label"
  ],
  "files": [
    {
      "path": "registry/blocks/auth/9/compact-signup-form.tsx",
      "content": "\"use client\";\n\nimport { CheckIcon } from \"lucide-react\";\nimport { LogoIcon } from \"@/components/logo\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\n\nexport function CompactSignupForm() {\n  return (\n    <div className=\"relative w-full max-w-sm rounded-3xl border bg-background p-6 shadow-2xl\">\n      <div className=\"-top-3 -right-3 -rotate-12 absolute flex size-12 items-center justify-center rounded-2xl bg-primary shadow-lg transition-transform group-hover:rotate-0\">\n        <CheckIcon className=\"size-6 text-primary-foreground\" />\n      </div>\n\n      <div className=\"mb-8\">\n        <LogoIcon className=\"mb-4 size-6\" />\n        <h2 className=\"font-bold text-2xl tracking-tight\">Join Freddy</h2>\n        <p className=\"text-muted-foreground text-sm\">\n          Start building beautiful interfaces today.\n        </p>\n      </div>\n\n      <form className=\"space-y-4\" onSubmit={(e) => e.preventDefault()}>\n        <div className=\"grid gap-3\">\n          <div className=\"grid gap-1.5\">\n            <Label htmlFor=\"signup-email-compact\">Email</Label>\n            <Input\n              className=\"h-11 rounded-xl\"\n              id=\"signup-email-compact\"\n              placeholder=\"you@example.com\"\n              type=\"email\"\n            />\n          </div>\n          <div className=\"grid gap-1.5\">\n            <Label htmlFor=\"signup-password-compact\">Secure Password</Label>\n            <Input\n              className=\"h-11 rounded-xl\"\n              id=\"signup-password-compact\"\n              placeholder=\"••••••••\"\n              type=\"password\"\n            />\n          </div>\n        </div>\n\n        <Button\n          className=\"mt-2 h-11 w-full rounded-xl font-semibold shadow-md transition-all active:scale-[0.98]\"\n          type=\"submit\"\n        >\n          Create Account\n        </Button>\n\n        <div className=\"mt-4 flex items-center gap-2 px-1 text-[10px] text-muted-foreground/60\">\n          <div className=\"size-1 rounded-full bg-primary\" />\n          <p>By creating an account, you agree to our Terms of Service.</p>\n        </div>\n\n        <p className=\"mt-4 border-t border-dashed pt-4 text-center text-muted-foreground text-xs\">\n          Already a member?{\" \"}\n          <a className=\"font-bold 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"
}