{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "auth3",
  "title": "Email Verification Code",
  "description": "Full-height OTP verification screen with a centered icon, segmented six-digit code input, a verify button that unlocks once the code is complete, and a live resend countdown timer. Perfect for two-factor auth, magic links, and email confirmation flows.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "input-otp",
    "field"
  ],
  "files": [
    {
      "path": "registry/auth3/auth3.tsx",
      "content": "\"use client\";\n\nimport { ArrowLeft, MailCheck } from \"lucide-react\";\nimport Link from \"next/link\";\nimport { useEffect, useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Field, FieldDescription, FieldGroup } from \"@/components/ui/field\";\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/components/ui/input-otp\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Auth3Props {\n  icon?: React.ReactNode;\n  heading?: string;\n  description?: string;\n  otpLength?: number;\n  resendPrompt?: {\n    text: string;\n    linkLabel: string;\n  };\n  resendSeconds?: number;\n  backLink?: {\n    label: string;\n    href: string;\n  };\n  labels?: {\n    verify?: string;\n    resendCountdown?: string;\n  };\n  className?: string;\n}\n\nexport const auth3Demo: Auth3Props = {\n  icon: <MailCheck className=\"size-6\" />,\n  heading: \"Check your email\",\n  description:\n    'Enter the 6-digit verification code we sent to <strong>jane@example.com</strong>',\n  otpLength: 6,\n  resendPrompt: {\n    text: \"Didn't get the code?\",\n    linkLabel: \"Resend\",\n  },\n  resendSeconds: 30,\n  backLink: {\n    label: \"Back to sign in\",\n    href: \"https://beste.co\",\n  },\n  labels: {\n    verify: \"Verify email\",\n    resendCountdown: \"Resend code in {seconds}s\",\n  },\n};\n\nexport function Auth3({\n  icon,\n  heading,\n  description,\n  otpLength = 6,\n  resendPrompt,\n  resendSeconds = 30,\n  backLink,\n  labels = {},\n  className,\n}: Auth3Props) {\n  const [code, setCode] = useState(\"\");\n  const [secondsLeft, setSecondsLeft] = useState(resendSeconds);\n\n  const { verify: verifyLabel, resendCountdown: resendCountdownLabel } = labels;\n\n  useEffect(() => {\n    if (secondsLeft <= 0) return;\n    const timer = setTimeout(() => setSecondsLeft((value) => value - 1), 1000);\n    return () => clearTimeout(timer);\n  }, [secondsLeft]);\n\n  const handleResend = () => {\n    setCode(\"\");\n    setSecondsLeft(resendSeconds);\n  };\n\n  return (\n    <section\n      className={cn(\n        \"flex min-h-screen items-center justify-center px-4 py-16 md:py-24 w-full\",\n        className\n      )}\n    >\n      <div className=\"w-full max-w-md\">\n        <div className=\"mb-8 flex flex-col items-center text-center\">\n          {icon && (\n            <div className=\"mb-6 flex size-14 items-center justify-center rounded-full bg-muted text-muted-foreground\">\n              {icon}\n            </div>\n          )}\n          {heading && (\n            <h1 className=\"text-2xl font-bold md:text-3xl\">{heading}</h1>\n          )}\n          {description && (\n            <p\n              className=\"mt-2 text-base text-muted-foreground [&>strong]:font-semibold [&>strong]:text-foreground\"\n              dangerouslySetInnerHTML={{ __html: description }}\n            />\n          )}\n        </div>\n\n        <div className=\"rounded-md border bg-card p-6 md:p-8\">\n          <form onSubmit={(e) => e.preventDefault()}>\n            <FieldGroup>\n              <Field>\n                <div className=\"flex justify-center\">\n                  <InputOTP\n                    maxLength={otpLength}\n                    value={code}\n                    onChange={setCode}\n                    containerClassName=\"justify-center\"\n                  >\n                    <InputOTPGroup>\n                      {Array.from({ length: otpLength }).map((_, index) => (\n                        <InputOTPSlot\n                          key={index}\n                          index={index}\n                          className=\"size-12 text-lg\"\n                        />\n                      ))}\n                    </InputOTPGroup>\n                  </InputOTP>\n                </div>\n              </Field>\n\n              {verifyLabel && (\n                <Field>\n                  <Button\n                    type=\"submit\"\n                    size=\"lg\"\n                    disabled={code.length < otpLength}\n                  >\n                    {verifyLabel}\n                  </Button>\n                </Field>\n              )}\n\n              {resendPrompt && (\n                <FieldDescription className=\"text-center\">\n                  {secondsLeft > 0 ? (\n                    (resendCountdownLabel ?? \"Resend code in {seconds}s\").replace(\n                      \"{seconds}\",\n                      String(secondsLeft)\n                    )\n                  ) : (\n                    <>\n                      {resendPrompt.text}{\" \"}\n                      <button\n                        type=\"button\"\n                        onClick={handleResend}\n                        className=\"font-medium text-primary hover:underline\"\n                      >\n                        {resendPrompt.linkLabel}\n                      </button>\n                    </>\n                  )}\n                </FieldDescription>\n              )}\n            </FieldGroup>\n          </form>\n        </div>\n\n        {backLink && (\n          <div className=\"mt-6 flex justify-center\">\n            <Link\n              href={backLink.href}\n              className=\"inline-flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-foreground\"\n            >\n              <ArrowLeft className=\"size-4\" />\n              {backLink.label}\n            </Link>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/auth3.tsx"
    }
  ],
  "type": "registry:block"
}