{
  "name": "otp-05",
  "type": "registry:block",
  "dependencies": [
    "@lucide/vue"
  ],
  "registryDependencies": [
    "button",
    "field",
    "input-otp"
  ],
  "files": [
    {
      "path": "blocks/otp-05/components/OTPForm.vue",
      "type": "registry:file",
      "target": "blocks/otp-05/components/OTPForm.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\n\nimport { GalleryVerticalEnd } from \"@lucide/vue\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/components/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/components/ui/input-otp\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex flex-col gap-6', props.class)\">\n    <form>\n      <FieldGroup>\n        <div class=\"flex flex-col items-center gap-2 text-center\">\n          <a\n            href=\"#\"\n            class=\"flex flex-col items-center gap-2 font-medium\"\n          >\n            <div class=\"flex size-8 items-center justify-center rounded-md\">\n              <GalleryVerticalEnd class=\"size-6\" />\n            </div>\n            <span class=\"sr-only\">Acme Inc.</span>\n          </a>\n          <h1 class=\"text-xl font-bold\">\n            Enter verification code\n          </h1>\n          <FieldDescription>\n            We sent a 6-digit code to your email address\n          </FieldDescription>\n        </div>\n        <Field>\n          <FieldLabel for=\"otp\" class=\"sr-only\">\n            Verification code\n          </FieldLabel>\n          <InputOTP\n            id=\"otp\"\n            :maxlength=\"6\"\n            required\n            container-class=\"gap-4\"\n          >\n            <InputOTPGroup class=\"gap-2.5 *:data-[slot=input-otp-slot]:h-16 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl\">\n              <InputOTPSlot :index=\"0\" />\n              <InputOTPSlot :index=\"1\" />\n              <InputOTPSlot :index=\"2\" />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup class=\"gap-2.5 *:data-[slot=input-otp-slot]:h-16 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl\">\n              <InputOTPSlot :index=\"3\" />\n              <InputOTPSlot :index=\"4\" />\n              <InputOTPSlot :index=\"5\" />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription class=\"text-center\">\n            Didn't receive the code? <a href=\"#\">Resend</a>\n          </FieldDescription>\n        </Field>\n        <Field>\n          <Button type=\"submit\">\n            Verify\n          </Button>\n        </Field>\n      </FieldGroup>\n    </form>\n    <FieldDescription class=\"px-6 text-center\">\n      By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>\n      and <a href=\"#\">Privacy Policy</a>.\n    </FieldDescription>\n  </div>\n</template>\n"
    },
    {
      "path": "blocks/otp-05/page.vue",
      "type": "registry:file",
      "target": "blocks/otp-05/page.vue",
      "content": "<script setup lang=\"ts\">\nimport OTPForm from \"./components/OTPForm.vue\"\n</script>\n\n<template>\n  <div class=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n    <div class=\"w-full max-w-sm\">\n      <OTPForm />\n    </div>\n  </div>\n</template>\n"
    }
  ]
}