{
  "name": "otp-03",
  "type": "registry:block",
  "dependencies": [
    "@lucide/vue"
  ],
  "registryDependencies": [
    "button",
    "card",
    "field",
    "input-otp"
  ],
  "files": [
    {
      "path": "blocks/otp-03/components/OTPForm.vue",
      "type": "registry:file",
      "target": "blocks/otp-03/components/OTPForm.vue",
      "content": "<script setup lang=\"ts\">\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/components/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/components/ui/input-otp\"\n</script>\n\n<template>\n  <Card>\n    <CardHeader class=\"text-center\">\n      <CardTitle class=\"text-xl\">\n        Enter verification code\n      </CardTitle>\n      <CardDescription>We sent a 6-digit code to your email.</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <form>\n        <FieldGroup>\n          <Field>\n            <FieldLabel for=\"otp\" class=\"sr-only\">\n              Verification code\n            </FieldLabel>\n            <InputOTP id=\"otp\" :maxlength=\"6\" required>\n              <InputOTPGroup class=\"gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot :index=\"0\" />\n                <InputOTPSlot :index=\"1\" />\n                <InputOTPSlot :index=\"2\" />\n                <InputOTPSlot :index=\"3\" />\n                <InputOTPSlot :index=\"4\" />\n                <InputOTPSlot :index=\"5\" />\n              </InputOTPGroup>\n            </InputOTP>\n            <FieldDescription class=\"text-center\">\n              Enter the 6-digit code sent to your email.\n            </FieldDescription>\n          </Field>\n          <Button type=\"submit\">\n            Verify\n          </Button>\n          <FieldDescription class=\"text-center\">\n            Didn't receive the code? <a href=\"#\">Resend</a>\n          </FieldDescription>\n        </FieldGroup>\n      </form>\n    </CardContent>\n  </Card>\n</template>\n"
    },
    {
      "path": "blocks/otp-03/page.vue",
      "type": "registry:file",
      "target": "blocks/otp-03/page.vue",
      "content": "<script setup lang=\"ts\">\nimport { GalleryVerticalEnd } from \"@lucide/vue\"\n\nimport OTPForm from \"./components/OTPForm.vue\"\n</script>\n\n<template>\n  <div class=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n    <div class=\"flex w-full max-w-xs flex-col gap-6\">\n      <a href=\"#\" class=\"flex items-center gap-2 self-center font-medium\">\n        <div class=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n          <GalleryVerticalEnd class=\"size-4\" />\n        </div>\n        Acme Inc.\n      </a>\n      <OTPForm />\n    </div>\n  </div>\n</template>\n"
    }
  ]
}