{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "otp-2",
  "type": "registry:component",
  "description": "A Card component with optional code display for UI blocks.",
  "registryDependencies": [
    "button",
    "field",
    "input-otp"
  ],
  "files": [
    {
      "path": "src/app/components/ui-blocks/cards/code/OtpFormTwoCode.tsx",
      "content": "import { cn } from \"@/lib/utils\"\r\nimport { Button } from \"@/components/ui/button\"\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=\"flex min-h-svh w-full\">\r\n                <div className=\"flex w-full items-center justify-center p-6 lg:w-1/2\">\r\n                    <div className=\"w-full max-w-xs\">\r\n                        <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\r\n                            <form>\r\n                                <FieldGroup>\r\n                                    <div className=\"flex flex-col items-center gap-1 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                                    </div>\r\n                                    <Field>\r\n                                        <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\r\n                                            Verification code\r\n                                        </FieldLabel>\r\n                                        <InputOTP maxLength={6} id=\"otp\" required>\r\n                                            <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\r\n                                                <InputOTPSlot index={0} />\r\n                                                <InputOTPSlot index={1} />\r\n                                            </InputOTPGroup>\r\n                                            <InputOTPSeparator />\r\n                                            <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\r\n                                                <InputOTPSlot index={2} />\r\n                                                <InputOTPSlot index={3} />\r\n                                            </InputOTPGroup>\r\n                                            <InputOTPSeparator />\r\n                                            <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\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                                    <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                                </FieldGroup>\r\n                            </form>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div className=\"hidden w-1/2 lg:flex items-center justify-center bg-muted\">\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            </div>\r\n        </section>\r\n    )\r\n}\r\n",
      "type": "registry:component",
      "target": "components/tailwind-admin/cards/otp-2/OtpFormTwoCode.tsx"
    }
  ]
}