{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "auth-8",
  "description": "A centered sign-up card with name, email, and password fields, a terms checkbox, and Google and GitHub social sign-up buttons.",
  "dependencies": [
    "@remixicon/react",
    "@base-ui/react"
  ],
  "registryDependencies": [
    "button",
    "card",
    "checkbox",
    "field",
    "input",
    "separator",
    "sonner"
  ],
  "files": [
    {
      "path": "registry/blocks/auth/8/auth-block.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { RiGithubFill, RiGoogleFill } from \"@remixicon/react\"\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport {\n  Field,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { Toaster } from \"@/components/ui/sonner\"\n\nconst emailPattern = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\n\nexport default function AuthBlock() {\n  const [errors, setErrors] = useState<Record<string, string>>({})\n\n  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {\n    event.preventDefault()\n    const data = Object.fromEntries(\n      new FormData(event.currentTarget)\n    ) as Record<string, string>\n    const next: Record<string, string> = {}\n    if (!data.name?.trim()) next.name = \"Enter your name\"\n    if (!emailPattern.test(data.email ?? \"\"))\n      next.email = \"Enter a valid email address\"\n    if ((data.password ?? \"\").length < 8)\n      next.password = \"Use at least 8 characters\"\n    if (!data.terms) next.terms = \"Please accept the terms to continue\"\n    setErrors(next)\n    if (Object.keys(next).length > 0) return\n    toast.promise(new Promise((resolve) => setTimeout(resolve, 1400)), {\n      loading: \"Creating your account…\",\n      success: \"Welcome to Acme!\",\n      error: \"Something went wrong. Please try again.\",\n    })\n  }\n\n  function clearError(name: string) {\n    setErrors((prev) => {\n      if (!prev[name]) return prev\n      const next = { ...prev }\n      delete next[name]\n      return next\n    })\n  }\n\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-12 text-foreground\">\n      <Toaster />\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader className=\"items-center text-center\">\n          <svg\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n            className=\"mx-auto size-7 shrink-0 text-primary\"\n          >\n            <rect x=\"3\" y=\"3\" width=\"8\" height=\"8\" transform=\"rotate(-6 7 7)\" />\n            <rect\n              x=\"3\"\n              y=\"13\"\n              width=\"8\"\n              height=\"8\"\n              transform=\"rotate(5 7 17)\"\n            />\n            <rect\n              x=\"13\"\n              y=\"13\"\n              width=\"8\"\n              height=\"8\"\n              transform=\"rotate(-4 17 17)\"\n            />\n            <rect\n              x=\"13\"\n              y=\"3\"\n              width=\"8\"\n              height=\"8\"\n              transform=\"rotate(15 17 7)\"\n            />\n          </svg>\n          <CardTitle className=\"mt-4 text-xl font-bold tracking-tight\">\n            Create your account\n          </CardTitle>\n          <CardDescription className=\"text-sm\">\n            Start building with Acme. No credit card required.\n          </CardDescription>\n        </CardHeader>\n\n        <CardContent className=\"flex flex-col gap-6\">\n          <form onSubmit={handleSubmit} noValidate>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Full name</FieldLabel>\n                <Input\n                  id=\"name\"\n                  name=\"name\"\n                  placeholder=\"Ada Lovelace\"\n                  aria-invalid={!!errors.name}\n                  onChange={() => clearError(\"name\")}\n                />\n                <FieldError>{errors.name}</FieldError>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  name=\"email\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                  aria-invalid={!!errors.email}\n                  onChange={() => clearError(\"email\")}\n                />\n                <FieldError>{errors.email}</FieldError>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                <Input\n                  id=\"password\"\n                  name=\"password\"\n                  type=\"password\"\n                  placeholder=\"At least 8 characters\"\n                  aria-invalid={!!errors.password}\n                  onChange={() => clearError(\"password\")}\n                />\n                <FieldError>{errors.password}</FieldError>\n              </Field>\n              <Field>\n                <FieldLabel\n                  htmlFor=\"terms\"\n                  className=\"font-normal text-muted-foreground\"\n                >\n                  <Checkbox\n                    id=\"terms\"\n                    name=\"terms\"\n                    aria-invalid={!!errors.terms}\n                    onCheckedChange={() => clearError(\"terms\")}\n                  />\n                  I agree to the Terms and Privacy Policy\n                </FieldLabel>\n                <FieldError>{errors.terms}</FieldError>\n              </Field>\n              <Button type=\"submit\" className=\"w-full\">\n                Create account\n              </Button>\n            </FieldGroup>\n          </form>\n\n          <div className=\"flex items-center gap-3 text-xs text-muted-foreground\">\n            <Separator className=\"flex-1\" />\n            Or sign up with\n            <Separator className=\"flex-1\" />\n          </div>\n\n          <div className=\"flex flex-col gap-3 sm:flex-row\">\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              className=\"flex-1\"\n              onClick={() => toast(\"Continuing with Google…\")}\n            >\n              <RiGoogleFill data-icon=\"inline-start\" />\n              Google\n            </Button>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              className=\"flex-1\"\n              onClick={() => toast(\"Continuing with GitHub…\")}\n            >\n              <RiGithubFill data-icon=\"inline-start\" />\n              GitHub\n            </Button>\n          </div>\n        </CardContent>\n\n        <CardFooter className=\"justify-center text-sm text-muted-foreground\">\n          Already have an account?\n          <Button\n            variant=\"link\"\n            className=\"px-1\"\n            render={<a href=\"#\" />}\n            nativeButton={false}\n          >\n            Sign in\n          </Button>\n        </CardFooter>\n      </Card>\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "90vh",
    "tier": "free"
  },
  "categories": [
    "auth"
  ],
  "type": "registry:block"
}