{"name":"otp-01","type":"registry:block","description":"A one-time password verification form.","meta":{"description":"A one-time password verification form.","iframeHeight":"620px"},"files":[{"type":"registry:page","target":"routes/otp-01/+page.svelte","highlightedContent":"

<script lang=\"ts\">\n  import OtpForm from '$lib/components/otp-form.svelte';\n</script>\n\n<div class=\"flex min-h-svh w-full items-center justify-center bg-(--bg) p-6 md:p-10\">\n  <div class=\"w-full max-w-sm\">\n    <OtpForm />\n  </div>\n</div>\n

"},{"type":"registry:component","target":"components/otp-form.svelte","highlightedContent":"

<script lang=\"ts\">\n  import { Button } from '$lib/components/ui/button/index.js';\n  import * as Card from '$lib/components/ui/card/index.js';\n  import {\n    InputOTP,\n    InputOTPGroup,\n    InputOTPSlot,\n    InputOTPSeparator\n  } from '$lib/components/ui/input-otp/index.js';\n  import { Field, FieldGroup, FieldDescription } from '$lib/components/ui/field/index.js';\n</script>\n\n<Card.Root>\n  <Card.Header>\n    <Card.Title class=\"text-xl\">Verify your email</Card.Title>\n    <Card.Description>Enter the 6-digit code sent to your email address</Card.Description>\n  </Card.Header>\n  <Card.Content>\n    <form>\n      <FieldGroup>\n        <Field>\n          <div class=\"flex justify-center\">\n            <InputOTP maxlength={6}>\n              {#snippet children({ cells })}\n                <InputOTPGroup>\n                  {#each cells.slice(0, 3) as cell (cell)}\n                    <InputOTPSlot {cell} />\n                  {/each}\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup>\n                  {#each cells.slice(3, 6) as cell (cell)}\n                    <InputOTPSlot {cell} />\n                  {/each}\n                </InputOTPGroup>\n              {/snippet}\n            </InputOTP>\n          </div>\n        </Field>\n        <Field>\n          <Button type=\"submit\" class=\"w-full\">Verify</Button>\n          <FieldDescription class=\"text-center\">\n            Didn't receive a code?\n            <a\n              href=\"##\"\n              class=\"text-(--text) underline underline-offset-4 transition-colors duration-150\"\n            >\n              Resend\n            </a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  </Card.Content>\n</Card.Root>\n

"}]}

Blocks