{
  "name": "otp-04",
  "type": "registry:block",
  "dependencies": [],
  "registryDependencies": [
    "button",
    "card",
    "field",
    "input-otp"
  ],
  "files": [
    {
      "path": "blocks/otp-04/components/OTPForm.vue",
      "type": "registry:file",
      "target": "blocks/otp-04/components/OTPForm.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent } from \"@/components/ui/card\"\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 md:min-h-[450px]', props.class)\">\n    <Card class=\"flex-1 overflow-hidden p-0\">\n      <CardContent class=\"grid flex-1 p-0 md:grid-cols-2\">\n        <form class=\"flex flex-col items-center justify-center p-6 md:p-8\">\n          <FieldGroup>\n            <Field class=\"items-center text-center\">\n              <h1 class=\"text-2xl font-bold\">\n                Enter verification code\n              </h1>\n              <p class=\"text-muted-foreground text-sm text-balance\">\n                We sent a 6-digit code to your email\n              </p>\n            </Field>\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>\n                  <InputOTPSlot :index=\"0\" />\n                  <InputOTPSlot :index=\"1\" />\n                  <InputOTPSlot :index=\"2\" />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup>\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            <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            </Field>\n          </FieldGroup>\n        </form>\n        <div class=\"bg-muted relative hidden md:block\">\n          <img\n            src=\"/placeholder.svg\"\n            alt=\"Image\"\n            class=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n          >\n        </div>\n      </CardContent>\n    </Card>\n    <FieldDescription class=\"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-04/page.vue",
      "type": "registry:file",
      "target": "blocks/otp-04/page.vue",
      "content": "<script setup lang=\"ts\">\nimport OTPForm from \"./components/OTPForm.vue\"\n</script>\n\n<template>\n  <div class=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n    <div class=\"w-full max-w-sm md:max-w-3xl\">\n      <OTPForm />\n    </div>\n  </div>\n</template>\n"
    }
  ]
}