{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "otp-3",
  "type": "registry:component",
  "description": "A Card component with optional code display for UI blocks.",
  "registryDependencies": [
    "button",
    "field",
    "input-otp",
    "card"
  ],
  "files": [
    {
      "path": "src/app/components/ui-blocks/cards/code/OtpFormThreeCode.tsx",
      "content": "import { cn } from \"@/lib/utils\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Card, CardContent } from \"@/components/ui/card\"\r\nimport {\r\n    Field,\r\n    FieldDescription,\r\n    FieldGroup,\r\n    FieldLabel,\r\n} from \"@/components/ui/field\"\r\nimport {\r\n    InputOTP,\r\n    InputOTPGroup,\r\n    InputOTPSeparator,\r\n    InputOTPSlot,\r\n} from \"@/components/ui/input-otp\"\r\nimport Image from \"next/image\"\r\n\r\nexport default function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\r\n    return (\r\n        <section>\r\n            <div className=\"max-w-3xl mx-auto\">\r\n                <div\r\n                    className={cn(\"flex flex-col gap-6\", className)}\r\n                    {...props}\r\n                >\r\n                    <Card className=\"flex-1 overflow-hidden p-0 h-full\">\r\n                        <CardContent className=\"grid flex-1 p-0 m-0 h-full md:grid-cols-2\">\r\n                            <form className=\"flex flex-col items-center justify-center p-6 md:p-8\">\r\n                                <FieldGroup>\r\n                                    <Field className=\"items-center text-center\">\r\n                                        <h1 className=\"text-2xl font-bold\">Enter verification code</h1>\r\n                                        <p className=\"text-muted-foreground text-sm text-balance\">\r\n                                            We sent a 6-digit code to your email\r\n                                        </p>\r\n                                    </Field>\r\n                                    <Field>\r\n                                        <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\r\n                                            Verification code\r\n                                        </FieldLabel>\r\n                                        <InputOTP\r\n                                            maxLength={6}\r\n                                            id=\"otp\"\r\n                                            required\r\n                                            containerClassName=\"gap-4\"\r\n                                        >\r\n                                            <InputOTPGroup>\r\n                                                <InputOTPSlot index={0} />\r\n                                                <InputOTPSlot index={1} />\r\n                                                <InputOTPSlot index={2} />\r\n                                            </InputOTPGroup>\r\n                                            <InputOTPSeparator />\r\n                                            <InputOTPGroup>\r\n                                                <InputOTPSlot index={3} />\r\n                                                <InputOTPSlot index={4} />\r\n                                                <InputOTPSlot index={5} />\r\n                                            </InputOTPGroup>\r\n                                        </InputOTP>\r\n                                        <FieldDescription className=\"text-center\">\r\n                                            Enter the 6-digit code sent to your email.\r\n                                        </FieldDescription>\r\n                                    </Field>\r\n                                    <Field>\r\n                                        <Button type=\"submit\">Verify</Button>\r\n                                        <FieldDescription className=\"text-center\">\r\n                                            Didn&apos;t receive the code? <a href=\"#\">Resend</a>\r\n                                        </FieldDescription>\r\n                                    </Field>\r\n                                </FieldGroup>\r\n                            </form>\r\n                            <div className=\"bg-muted relative hidden md:flex items-center justify-center p-8\">\r\n                                <Image\r\n                                    src=\"https://tailwind-admin.com/images/login/login-side-image.webp\"\r\n                                    alt=\"login-side-image\"\r\n                                    width={450}\r\n                                    height={450}\r\n                                />\r\n                            </div>\r\n                        </CardContent>\r\n                    </Card>\r\n                    <FieldDescription className=\"text-center\">\r\n                        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\r\n                        and <a href=\"#\">Privacy Policy</a>.\r\n                    </FieldDescription>\r\n                </div>\r\n            </div>\r\n        </section>\r\n    )\r\n}\r\n",
      "type": "registry:component",
      "target": "components/tailwind-admin/cards/otp-3/OtpFormThreeCode.tsx"
    }
  ]
}