{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "otp-1",
  "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/OtpFormOneCode.tsx",
      "content": "import { Button } from \"@/components/ui/button\"\r\nimport {\r\n    Card,\r\n    CardContent,\r\n    CardDescription,\r\n    CardHeader,\r\n    CardTitle,\r\n} 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    InputOTPSlot,\r\n} from \"@/components/ui/input-otp\"\r\n\r\nexport default function OTPForm({ ...props }: React.ComponentProps<typeof Card>) {\r\n    return (\r\n        <section>\r\n            <div className=\"w-full max-w-[350px] mx-auto\">\r\n                <Card {...props}>\r\n                    <CardHeader>\r\n                        <CardTitle>Enter verification code</CardTitle>\r\n                        <CardDescription>We sent a 6-digit code to your email.</CardDescription>\r\n                    </CardHeader>\r\n                    <CardContent>\r\n                        <form>\r\n                            <FieldGroup>\r\n                                <Field>\r\n                                    <FieldLabel htmlFor=\"otp\">Verification code</FieldLabel>\r\n                                    <InputOTP maxLength={6} id=\"otp\" required>\r\n                                        <InputOTPGroup className=\"gap-2.5 *: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                                            <InputOTPSlot index={2} />\r\n                                            <InputOTPSlot index={3} />\r\n                                            <InputOTPSlot index={4} />\r\n                                            <InputOTPSlot index={5} />\r\n                                        </InputOTPGroup>\r\n                                    </InputOTP>\r\n                                    <FieldDescription>\r\n                                        Enter the 6-digit code sent to your email.\r\n                                    </FieldDescription>\r\n                                </Field>\r\n                                <FieldGroup>\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                            </FieldGroup>\r\n                        </form>\r\n                    </CardContent>\r\n                </Card>\r\n            </div>\r\n        </section>\r\n    )\r\n}",
      "type": "registry:component",
      "target": "components/tailwind-admin/cards/otp-1/OtpFormOneCode.tsx"
    }
  ]
}