{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "auth-4",
  "title": "Full-Height Split Sign-In",
  "description": "Full-height split-screen sign-in with email, password, remember-me, and Google or GitHub buttons beside a dark marketing panel on a grid backdrop.",
  "dependencies": [
    "@remixicon/react",
    "zod",
    "@base-ui/react"
  ],
  "registryDependencies": [
    "button",
    "card",
    "checkbox",
    "field",
    "input",
    "label",
    "separator",
    "sonner"
  ],
  "files": [
    {
      "path": "registry/blocks/auth/4/auth-block.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { RiGithubFill, RiGoogleFill } from \"@remixicon/react\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\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\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nconst signInSchema = z.object({\n  email: z\n    .string()\n    .min(1, \"Email is required\")\n    .email(\"Enter a valid email address\"),\n  password: z.string().min(1, \"Password is required\"),\n})\n\nexport default function AuthBlock() {\n  const [remember, setRemember] = useState(true)\n  const [errors, setErrors] = useState<Record<string, string>>({})\n\n  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {\n    event.preventDefault()\n    const data = Object.fromEntries(new FormData(event.currentTarget))\n    const result = signInSchema.safeParse(data)\n    if (!result.success) {\n      const next: Record<string, string> = {}\n      for (const issue of result.error.issues) {\n        const key = issue.path[0]\n        if (typeof key === \"string\" && !next[key]) {\n          next[key] = issue.message\n        }\n      }\n      setErrors(next)\n      return\n    }\n    setErrors({})\n    toast.promise(new Promise((resolve) => setTimeout(resolve, 1400)), {\n      loading: \"Signing you in…\",\n      success: \"Welcome back to Acme!\",\n      error: \"Sign-in failed. 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  function handleSocial(provider: string) {\n    toast.info(`Continuing with ${provider}`, {\n      description: \"Redirecting you to authenticate…\",\n    })\n  }\n\n  return (\n    <>\n      <Toaster />\n      <section className=\"grid min-h-svh w-full grid-cols-1 bg-background text-foreground md:grid-cols-2\">\n        <div className=\"flex items-center justify-center px-6 py-12 sm:px-10\">\n          <Card className=\"w-full max-w-sm border-0 bg-transparent shadow-none ring-0\">\n            <CardHeader className=\"px-0\">\n              <CardTitle className=\"text-2xl font-bold tracking-tight\">\n                Sign In To Acme\n              </CardTitle>\n              <CardDescription className=\"text-sm\">\n                Welcome back. Enter your details to continue.\n              </CardDescription>\n            </CardHeader>\n\n            <CardContent className=\"flex flex-col gap-6 px-0\">\n              <form onSubmit={handleSubmit} noValidate>\n                <FieldGroup>\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                    <div className=\"flex items-center justify-between\">\n                      <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                      <Button\n                        variant=\"link\"\n                        className=\"h-auto px-0 text-xs\"\n                        render={<a href=\"#\" />}\n                        nativeButton={false}\n                      >\n                        Forgot password?\n                      </Button>\n                    </div>\n                    <Input\n                      id=\"password\"\n                      name=\"password\"\n                      type=\"password\"\n                      placeholder=\"••••••••\"\n                      aria-invalid={!!errors.password}\n                      onChange={() => clearError(\"password\")}\n                    />\n                    <FieldError>{errors.password}</FieldError>\n                  </Field>\n\n                  <Field orientation=\"horizontal\">\n                    <FieldLabel\n                      htmlFor=\"remember\"\n                      className=\"font-normal text-muted-foreground\"\n                    >\n                      <Checkbox\n                        id=\"remember\"\n                        checked={remember}\n                        onCheckedChange={(checked) =>\n                          setRemember(checked === true)\n                        }\n                      />\n                      Remember me\n                    </FieldLabel>\n                  </Field>\n\n                  <Button type=\"submit\" className=\"w-full\">\n                    Sign in\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\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={() => handleSocial(\"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={() => handleSocial(\"GitHub\")}\n                >\n                  <RiGithubFill data-icon=\"inline-start\" />\n                  GitHub\n                </Button>\n              </div>\n            </CardContent>\n\n            <CardFooter className=\"justify-center px-0 text-sm text-muted-foreground\">\n              Don&apos;t have an account?\n              <Button\n                variant=\"link\"\n                className=\"px-1\"\n                render={<a href=\"#\" />}\n                nativeButton={false}\n              >\n                Sign up\n              </Button>\n            </CardFooter>\n          </Card>\n        </div>\n\n        <div className=\"dark relative hidden overflow-hidden border-l border-border bg-background text-foreground md:block\">\n          <div\n            aria-hidden=\"true\"\n            className=\"absolute inset-0 [background-image:linear-gradient(to_right,currentColor_1px,transparent_1px),linear-gradient(to_bottom,currentColor_1px,transparent_1px)] [background-size:40px_40px] opacity-[0.07]\"\n          />\n          <div\n            aria-hidden=\"true\"\n            className=\"absolute -top-24 -right-24 size-80 rounded-full bg-foreground/10 blur-3xl\"\n          />\n          <div\n            aria-hidden=\"true\"\n            className=\"absolute -bottom-32 -left-16 size-96 rounded-full bg-foreground/10 blur-3xl\"\n          />\n\n          <div className=\"relative flex h-full flex-col justify-between p-12\">\n            <div className=\"flex items-center gap-2.5\">\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n                className=\"size-6 shrink-0 text-foreground\"\n              >\n                <rect\n                  x=\"3\"\n                  y=\"3\"\n                  width=\"8\"\n                  height=\"8\"\n                  transform=\"rotate(-6 7 7)\"\n                />\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              <span className=\"text-lg font-semibold tracking-tight\">Acme</span>\n            </div>\n\n            <div className=\"max-w-md\">\n              <span className=\"inline-flex items-center gap-1.5 rounded-md border border-foreground/30 bg-foreground/10 px-2.5 py-1 text-xs font-medium\">\n                <IconPlaceholder\n                  lucide=\"Sparkles\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"Sparkle\"\n                  remixicon=\"RiSparkling2Line\"\n                  data-icon=\"inline-start\"\n                  className=\"size-3.5\"\n                  aria-hidden=\"true\"\n                />\n                Trusted by 12,000+ teams\n              </span>\n              <h2 className=\"mt-6 font-heading text-4xl leading-tight font-bold tracking-tight\">\n                Build faster with blocks you can ship today.\n              </h2>\n              <p className=\"mt-4 text-base text-foreground/80\">\n                Drop-in, production-ready UI for your next product. One\n                workspace for your whole team to design, build, and launch.\n              </p>\n            </div>\n\n            <p className=\"text-sm text-foreground/70\">\n              &copy; 2026 Acme, Inc. All rights reserved.\n            </p>\n          </div>\n        </div>\n      </section>\n    </>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "587px",
    "tier": "free"
  },
  "docs": "Requires a `base-*` style in components.json (the `shadcn init` default). Legacy `new-york`/`radix-*` styles install Radix primitives, which reject the `render` prop this block uses.",
  "categories": [
    "auth"
  ],
  "type": "registry:block"
}