@thorprovider/blocks 2.0.0 → 3.0.1

package/dist/blocks/application/signup-forms/signup-page-1.mjs

@@ -0,0 +1,171 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Lock, Mail, User } from "lucide-react";
+import { Button } from "../../../ui/button.mjs";
+import { Card } from "../../../ui/card.mjs";
+import { Input } from "../../../ui/input.mjs";
+function SignUpPage1({
+  logoText,
+  createAccountTitleLabel = "Crea tu cuenta",
+  createAccountDescriptionLabel = "Completa el formulario para comenzar",
+  fullNameLabel = "Nombre completo",
+  fullNamePlaceholder = "Nombre completo",
+  emailLabel = "Correo electr\xF3nico",
+  emailPlaceholder = "me@ejemplo.com",
+  passwordLabel = "Contrase\xF1a",
+  passwordPlaceholder = "Crea una contrase\xF1a",
+  createAccountLabel = "Crear cuenta",
+  orSignUpWithLabel = "O reg\xEDstrate con",
+  socialAriaLabel = "Continuar con {name}",
+  socialButtons = [],
+  alreadyHaveAccountLabel = "\xBFYa tienes una cuenta?",
+  signInLabel = "Inicia sesi\xF3n",
+  termsLabel = "Al crear una cuenta, aceptas los",
+  termsLinkLabel = "T\xE9rminos de servicio",
+  termsHref,
+  termsAndLabel = "y",
+  privacyLinkLabel = "Pol\xEDtica de privacidad",
+  privacyHref,
+  onSubmit,
+  onSignIn
+}) {
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    onSubmit?.({
+      fullName: String(formData.get("fullName") ?? ""),
+      email: String(formData.get("email") ?? ""),
+      password: String(formData.get("password") ?? "")
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-lg flex-col items-center", children: [
+    /* @__PURE__ */ jsxs(Card, { className: "relative w-full max-w-lg p-8 shadow-2xl ring-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-8 flex flex-col items-center", children: [
+        /* @__PURE__ */ jsx("div", { className: "my-4 flex justify-center", children: /* @__PURE__ */ jsx("div", { className: "bg-secondary relative size-14 rounded-full border", children: /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxs("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M26 24.75C26.4142 24.75 26.75 24.4142 26.75 24C26.75 23.5858 26.4142 23.25 26 23.25V24.75ZM26 23.25H11V24.75H26V23.25ZM8.75 21V15H7.25V21H8.75ZM11 23.25C9.75736 23.25 8.75 22.2426 8.75 21H7.25C7.25 23.0711 8.92893 24.75 11 24.75V23.25Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M1.5 3.25C1.08579 3.25 0.75 3.58579 0.75 4C0.75 4.41421 1.08579 4.75 1.5 4.75V3.25ZM1.5 4.75H6V3.25H1.5V4.75ZM7.25 6V21H8.75V6H7.25ZM6 4.75C6.69036 4.75 7.25 5.30964 7.25 6H8.75C8.75 4.48122 7.51878 3.25 6 3.25V4.75Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M22 21.75C22.4142 21.75 22.75 21.4142 22.75 21C22.75 20.5858 22.4142 20.25 22 20.25V21.75ZM22 20.25H11V21.75H22V20.25ZM8.75 18V12H7.25V18H8.75ZM11 20.25C9.75736 20.25 8.75 19.2426 8.75 18H7.25C7.25 20.0711 8.92893 21.75 11 21.75V20.25Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M27.2057 19.754C27.0654 20.1438 26.6357 20.346 26.246 20.2057C25.8562 20.0654 25.654 19.6357 25.7943 19.246L27.2057 19.754ZM30.0361 9.67744L29.3305 9.4234L29.3305 9.4234L30.0361 9.67744ZM25.7943 19.246L29.3305 9.4234L30.7418 9.93148L27.2057 19.754L25.7943 19.246ZM28.1543 7.75L8 7.75V6.25L28.1543 6.25V7.75ZM29.3305 9.4234C29.6237 8.60882 29.0201 7.75 28.1543 7.75V6.25C30.059 6.25 31.3869 8.13941 30.7418 9.93148L29.3305 9.4234Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M13.5 21.75C13.0858 21.75 12.75 21.4142 12.75 21C12.75 20.5858 13.0858 20.25 13.5 20.25V21.75ZM26.7111 19.009L27.4174 19.2613L27.4174 19.2613L26.7111 19.009ZM13.5 20.25H23.8858V21.75H13.5V20.25ZM26.0048 18.7568L27.7937 13.7477L29.2063 14.2523L27.4174 19.2613L26.0048 18.7568ZM23.8858 20.25C24.8367 20.25 25.6849 19.6522 26.0048 18.7568L27.4174 19.2613C26.8843 20.7537 25.4706 21.75 23.8858 21.75V20.25Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ jsx("path", { d: "M21.1694 10.5806L14.5651 17.1849", stroke: "currentColor" }),
+          /* @__PURE__ */ jsx("path", { d: "M22.1694 14.5806L18.5632 18.1868", stroke: "currentColor" }),
+          /* @__PURE__ */ jsx("circle", { cx: "13.1", cy: "26.1", r: "1.7", stroke: "currentColor" }),
+          /* @__PURE__ */ jsx("circle", { cx: "22.1", cy: "26.1", r: "1.7", stroke: "currentColor" })
+        ] }) }) }) }),
+        logoText && /* @__PURE__ */ jsx("div", { className: "text-base font-semibold tracking-tight", children: logoText }),
+        /* @__PURE__ */ jsx("h1", { className: "mb-2 mt-4 text-center text-2xl font-bold tracking-tight", children: createAccountTitleLabel }),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-center text-sm", children: createAccountDescriptionLabel })
+      ] }),
+      /* @__PURE__ */ jsxs("form", { className: "flex flex-col gap-6", onSubmit: handleSubmit, children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "fullname",
+              name: "fullName",
+              type: "text",
+              placeholder: fullNamePlaceholder,
+              "aria-label": fullNameLabel,
+              className: "bg-transparent h-9 ps-10 text-sm",
+              autoComplete: "name",
+              required: true
+            }
+          ),
+          /* @__PURE__ */ jsx(User, { className: "text-muted-foreground absolute start-3 top-1/2 size-5 -translate-y-1/2" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "email",
+              name: "email",
+              type: "email",
+              placeholder: emailPlaceholder,
+              "aria-label": emailLabel,
+              className: "bg-transparent h-9 ps-10 text-sm",
+              autoComplete: "email",
+              required: true
+            }
+          ),
+          /* @__PURE__ */ jsx(Mail, { className: "text-muted-foreground absolute start-3 top-1/2 size-5 -translate-y-1/2" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "password",
+              name: "password",
+              type: "password",
+              placeholder: passwordPlaceholder,
+              "aria-label": passwordLabel,
+              className: "bg-transparent h-9 ps-10 text-sm",
+              autoComplete: "new-password",
+              required: true
+            }
+          ),
+          /* @__PURE__ */ jsx(Lock, { className: "text-muted-foreground absolute start-3 top-1/2 size-5 -translate-y-1/2" })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { className: "h-9 w-full cursor-pointer px-4 py-2", type: "submit", children: createAccountLabel }),
+        socialButtons.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative my-6 text-center", children: [
+            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx("div", { className: "w-full border-t" }) }),
+            /* @__PURE__ */ jsx("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ jsx("span", { className: "bg-card text-muted-foreground px-2", children: orSignUpWithLabel }) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-3", children: socialButtons.map((button) => /* @__PURE__ */ jsxs(Button, { variant: "outline", className: "h-9 w-full cursor-pointer px-4 py-2", children: [
+            /* @__PURE__ */ jsx(button.icon, {}),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: socialAriaLabel.replace("{name}", button.name) })
+          ] }, button.name)) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "mt-6 flex justify-center gap-1 text-center text-sm", children: [
+        /* @__PURE__ */ jsx("span", { children: alreadyHaveAccountLabel }),
+        onSignIn ? /* @__PURE__ */ jsx("button", { type: "button", onClick: onSignIn, className: "underline underline-offset-4", children: signInLabel }) : /* @__PURE__ */ jsx("span", { className: "underline underline-offset-4", children: signInLabel })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground relative z-10 mt-8 max-w-lg px-8 text-center text-xs text-balance", children: [
+      termsLabel,
+      " ",
+      termsHref ? /* @__PURE__ */ jsx("a", { href: termsHref, className: "hover:text-primary underline underline-offset-4", children: termsLinkLabel }) : /* @__PURE__ */ jsx("span", { className: "hover:text-primary underline underline-offset-4", children: termsLinkLabel }),
+      " ",
+      termsAndLabel,
+      " ",
+      privacyHref ? /* @__PURE__ */ jsx("a", { href: privacyHref, className: "hover:text-primary underline underline-offset-4", children: privacyLinkLabel }) : /* @__PURE__ */ jsx("span", { className: "hover:text-primary underline underline-offset-4", children: privacyLinkLabel }),
+      "."
+    ] })
+  ] });
+}
+var signup_page_1_default = SignUpPage1;
+export {
+  SignUpPage1,
+  signup_page_1_default as default
+};
+//# sourceMappingURL=signup-page-1.mjs.map

package/dist/blocks/application/signup-forms/signup-page-1.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/application/signup-forms/signup-page-1.tsx"],"sourcesContent":["import type { FormEvent } from 'react'\nimport { Lock, Mail, User, type LucideIcon } from 'lucide-react'\n\nimport { Button } from '../../../ui/button'\nimport { Card } from '../../../ui/card'\nimport { Input } from '../../../ui/input'\n\nexport interface SignUpPage1SocialButton {\n  name: string\n  icon: LucideIcon\n}\n\nexport interface SignUpPage1Data {\n  fullName: string\n  email: string\n  password: string\n}\n\nexport interface SignUpPage1Props {\n  /** Brand text shown under the logo mark. Omit to hide it. */\n  logoText?: string\n  createAccountTitleLabel?: string\n  createAccountDescriptionLabel?: string\n  fullNameLabel?: string\n  fullNamePlaceholder?: string\n  emailLabel?: string\n  emailPlaceholder?: string\n  passwordLabel?: string\n  passwordPlaceholder?: string\n  createAccountLabel?: string\n  orSignUpWithLabel?: string\n  /** aria-label template for each social button. Use `{name}` as the button name placeholder. */\n  socialAriaLabel?: string\n  /** Social sign-up buttons rendered in a 3-column grid. Pass an empty array to hide. */\n  socialButtons?: SignUpPage1SocialButton[]\n  alreadyHaveAccountLabel?: string\n  signInLabel?: string\n  termsLabel?: string\n  termsLinkLabel?: string\n  termsHref?: string\n  termsAndLabel?: string\n  privacyLinkLabel?: string\n  privacyHref?: string\n  onSubmit?: (data: SignUpPage1Data) => void\n  onSignIn?: () => void\n}\n\nexport function SignUpPage1({\n  logoText,\n  createAccountTitleLabel = 'Crea tu cuenta',\n  createAccountDescriptionLabel = 'Completa el formulario para comenzar',\n  fullNameLabel = 'Nombre completo',\n  fullNamePlaceholder = 'Nombre completo',\n  emailLabel = 'Correo electrónico',\n  emailPlaceholder = 'me@ejemplo.com',\n  passwordLabel = 'Contraseña',\n  passwordPlaceholder = 'Crea una contraseña',\n  createAccountLabel = 'Crear cuenta',\n  orSignUpWithLabel = 'O regístrate con',\n  socialAriaLabel = 'Continuar con {name}',\n  socialButtons = [],\n  alreadyHaveAccountLabel = '¿Ya tienes una cuenta?',\n  signInLabel = 'Inicia sesión',\n  termsLabel = 'Al crear una cuenta, aceptas los',\n  termsLinkLabel = 'Términos de servicio',\n  termsHref,\n  termsAndLabel = 'y',\n  privacyLinkLabel = 'Política de privacidad',\n  privacyHref,\n  onSubmit,\n  onSignIn,\n}: SignUpPage1Props) {\n  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.currentTarget)\n    onSubmit?.({\n      fullName: String(formData.get('fullName') ?? ''),\n      email: String(formData.get('email') ?? ''),\n      password: String(formData.get('password') ?? ''),\n    })\n  }\n\n  return (\n    <div className='flex w-full max-w-lg flex-col items-center'>\n      <Card className='relative w-full max-w-lg p-8 shadow-2xl ring-0'>\n        <div className='mb-8 flex flex-col items-center'>\n          <div className='my-4 flex justify-center'>\n            <div className='bg-secondary relative size-14 rounded-full border'>\n              <div className='flex h-full items-center justify-center'>\n                <svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'>\n                  <path\n                    d='M26 24.75C26.4142 24.75 26.75 24.4142 26.75 24C26.75 23.5858 26.4142 23.25 26 23.25V24.75ZM26 23.25H11V24.75H26V23.25ZM8.75 21V15H7.25V21H8.75ZM11 23.25C9.75736 23.25 8.75 22.2426 8.75 21H7.25C7.25 23.0711 8.92893 24.75 11 24.75V23.25Z'\n                    fill='currentColor'\n                  />\n                  <path\n                    d='M1.5 3.25C1.08579 3.25 0.75 3.58579 0.75 4C0.75 4.41421 1.08579 4.75 1.5 4.75V3.25ZM1.5 4.75H6V3.25H1.5V4.75ZM7.25 6V21H8.75V6H7.25ZM6 4.75C6.69036 4.75 7.25 5.30964 7.25 6H8.75C8.75 4.48122 7.51878 3.25 6 3.25V4.75Z'\n                    fill='currentColor'\n                  />\n                  <path\n                    d='M22 21.75C22.4142 21.75 22.75 21.4142 22.75 21C22.75 20.5858 22.4142 20.25 22 20.25V21.75ZM22 20.25H11V21.75H22V20.25ZM8.75 18V12H7.25V18H8.75ZM11 20.25C9.75736 20.25 8.75 19.2426 8.75 18H7.25C7.25 20.0711 8.92893 21.75 11 21.75V20.25Z'\n                    fill='currentColor'\n                  />\n                  <path\n                    d='M27.2057 19.754C27.0654 20.1438 26.6357 20.346 26.246 20.2057C25.8562 20.0654 25.654 19.6357 25.7943 19.246L27.2057 19.754ZM30.0361 9.67744L29.3305 9.4234L29.3305 9.4234L30.0361 9.67744ZM25.7943 19.246L29.3305 9.4234L30.7418 9.93148L27.2057 19.754L25.7943 19.246ZM28.1543 7.75L8 7.75V6.25L28.1543 6.25V7.75ZM29.3305 9.4234C29.6237 8.60882 29.0201 7.75 28.1543 7.75V6.25C30.059 6.25 31.3869 8.13941 30.7418 9.93148L29.3305 9.4234Z'\n                    fill='currentColor'\n                  />\n                  <path\n                    d='M13.5 21.75C13.0858 21.75 12.75 21.4142 12.75 21C12.75 20.5858 13.0858 20.25 13.5 20.25V21.75ZM26.7111 19.009L27.4174 19.2613L27.4174 19.2613L26.7111 19.009ZM13.5 20.25H23.8858V21.75H13.5V20.25ZM26.0048 18.7568L27.7937 13.7477L29.2063 14.2523L27.4174 19.2613L26.0048 18.7568ZM23.8858 20.25C24.8367 20.25 25.6849 19.6522 26.0048 18.7568L27.4174 19.2613C26.8843 20.7537 25.4706 21.75 23.8858 21.75V20.25Z'\n                    fill='currentColor'\n                  />\n                  <path d='M21.1694 10.5806L14.5651 17.1849' stroke='currentColor' />\n                  <path d='M22.1694 14.5806L18.5632 18.1868' stroke='currentColor' />\n                  <circle cx='13.1' cy='26.1' r='1.7' stroke='currentColor' />\n                  <circle cx='22.1' cy='26.1' r='1.7' stroke='currentColor' />\n                </svg>\n              </div>\n            </div>\n          </div>\n          {logoText && <div className='text-base font-semibold tracking-tight'>{logoText}</div>}\n          <h1 className='mb-2 mt-4 text-center text-2xl font-bold tracking-tight'>{createAccountTitleLabel}</h1>\n          <p className='text-muted-foreground text-center text-sm'>{createAccountDescriptionLabel}</p>\n        </div>\n\n        <form className='flex flex-col gap-6' onSubmit={handleSubmit}>\n          <div className='relative'>\n            <Input\n              id='fullname'\n              name='fullName'\n              type='text'\n              placeholder={fullNamePlaceholder}\n              aria-label={fullNameLabel}\n              className='bg-transparent h-9 ps-10 text-sm'\n              autoComplete='name'\n              required\n            />\n            <User className='text-muted-foreground absolute start-3 top-1/2 size-5 -translate-y-1/2' />\n          </div>\n\n          <div className='relative'>\n            <Input\n              id='email'\n              name='email'\n              type='email'\n              placeholder={emailPlaceholder}\n              aria-label={emailLabel}\n              className='bg-transparent h-9 ps-10 text-sm'\n              autoComplete='email'\n              required\n            />\n            <Mail className='text-muted-foreground absolute start-3 top-1/2 size-5 -translate-y-1/2' />\n          </div>\n\n          <div className='relative'>\n            <Input\n              id='password'\n              name='password'\n              type='password'\n              placeholder={passwordPlaceholder}\n              aria-label={passwordLabel}\n              className='bg-transparent h-9 ps-10 text-sm'\n              autoComplete='new-password'\n              required\n            />\n            <Lock className='text-muted-foreground absolute start-3 top-1/2 size-5 -translate-y-1/2' />\n          </div>\n\n          <Button className='h-9 w-full cursor-pointer px-4 py-2' type='submit'>\n            {createAccountLabel}\n          </Button>\n\n          {socialButtons.length > 0 && (\n            <>\n              <div className='relative my-6 text-center'>\n                <div className='absolute inset-0 flex items-center'>\n                  <div className='w-full border-t' />\n                </div>\n                <div className='relative flex justify-center text-xs uppercase'>\n                  <span className='bg-card text-muted-foreground px-2'>{orSignUpWithLabel}</span>\n                </div>\n              </div>\n\n              <div className='grid grid-cols-3 gap-3'>\n                {socialButtons.map(button => (\n                  <Button key={button.name} variant='outline' className='h-9 w-full cursor-pointer px-4 py-2'>\n                    <button.icon />\n                    <span className='sr-only'>{socialAriaLabel.replace('{name}', button.name)}</span>\n                  </Button>\n                ))}\n              </div>\n            </>\n          )}\n        </form>\n\n        <p className='mt-6 flex justify-center gap-1 text-center text-sm'>\n          <span>{alreadyHaveAccountLabel}</span>\n          {onSignIn ? (\n            <button type='button' onClick={onSignIn} className='underline underline-offset-4'>\n              {signInLabel}\n            </button>\n          ) : (\n            <span className='underline underline-offset-4'>{signInLabel}</span>\n          )}\n        </p>\n      </Card>\n\n      <p className='text-muted-foreground relative z-10 mt-8 max-w-lg px-8 text-center text-xs text-balance'>\n        {termsLabel}{' '}\n        {termsHref ? (\n          <a href={termsHref} className='hover:text-primary underline underline-offset-4'>\n            {termsLinkLabel}\n          </a>\n        ) : (\n          <span className='hover:text-primary underline underline-offset-4'>{termsLinkLabel}</span>\n        )}{' '}\n        {termsAndLabel}{' '}\n        {privacyHref ? (\n          <a href={privacyHref} className='hover:text-primary underline underline-offset-4'>\n            {privacyLinkLabel}\n          </a>\n        ) : (\n          <span className='hover:text-primary underline underline-offset-4'>{privacyLinkLabel}</span>\n        )}\n        .\n      </p>\n    </div>\n  )\n}\n\nexport default SignUpPage1"],"mappings":"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","names":[]}

package/dist/blocks/application/verification/verify-1.d.ts

@@ -0,0 +1,35 @@
+export interface Verify1Props {
+    verifyTitleLabel?: string;
+    verifyDescriptionLabel?: string;
+    backupCodeTitleLabel?: string;
+    backupCodeDescriptionLabel?: string;
+    backupCodeLabel?: string;
+    backupCodePlaceholder?: string;
+    otpAriaLabel?: string;
+    verifyLabel?: string;
+    resendCodeLabel?: string;
+    /** Plantilla con {n} sustituido por los segundos restantes. */
+    resendCooldownLabel?: string;
+    useBackupCodeLabel?: string;
+    useAuthenticatorLabel?: string;
+    tooManyAttemptsLabel?: string;
+    /** Plantilla con {n} sustituido por los intentos restantes. */
+    attemptsLeftLabel?: string;
+    verifiedTitleLabel?: string;
+    verifiedDescriptionLabel?: string;
+    continueLabel?: string;
+    demoOtpHintLabel?: string;
+    /** Plantilla con {code} sustituido por el código de respaldo de la demo. */
+    demoBackupHintLabel?: string;
+    /** Verificación real del código OTP. Devuelve true si es correcto. */
+    onVerify?: (code: string) => Promise<boolean>;
+    /** Verificación real del código de respaldo. Devuelve true si es correcto. */
+    onVerifyBackup?: (code: string) => Promise<boolean>;
+    /** Se dispara al pedir reenviar el código. */
+    onResend?: () => void;
+    /** Se dispara al continuar tras la verificación. */
+    onContinue?: () => void;
+}
+export declare function Verify1({ verifyTitleLabel, verifyDescriptionLabel, backupCodeTitleLabel, backupCodeDescriptionLabel, backupCodeLabel, backupCodePlaceholder, otpAriaLabel, verifyLabel, resendCodeLabel, resendCooldownLabel, useBackupCodeLabel, useAuthenticatorLabel, tooManyAttemptsLabel, attemptsLeftLabel, verifiedTitleLabel, verifiedDescriptionLabel, continueLabel, demoOtpHintLabel, demoBackupHintLabel, onVerify, onVerifyBackup, onResend, onContinue, }: Verify1Props): import("react").JSX.Element;
+export default Verify1;
+//# sourceMappingURL=verify-1.d.ts.map

package/dist/blocks/application/verification/verify-1.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"verify-1.d.ts","sourceRoot":"","sources":["../../../../src/blocks/application/verification/verify-1.tsx"],"names":[],"mappings":"AAuCA,MAAM,WAAW,YAAY;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,0BAA0B,CAAC,EAAE,MAAM,CAAA;IACnC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,+DAA+D;IAC/D,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,+DAA+D;IAC/D,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,wBAAwB,CAAC,EAAE,MAAM,CAAA;IACjC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,4EAA4E;IAC5E,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,sEAAsE;IACtE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAA;IAC7C,8EAA8E;IAC9E,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAA;IACnD,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB;AAED,wBAAgB,OAAO,CAAC,EACtB,gBAAiD,EACjD,sBAA2F,EAC3F,oBAAkD,EAClD,0BAAoF,EACpF,eAAsC,EACtC,qBAAmC,EACnC,YAAuC,EACvC,WAAyB,EACzB,eAAmC,EACnC,mBAA+C,EAC/C,kBAA6D,EAC7D,qBAA4D,EAC5D,oBAA2G,EAC3G,iBAAwE,EACxE,kBAA4C,EAC5C,wBAAqI,EACrI,aAA2B,EAC3B,gBAAgD,EAChD,mBAAsF,EACtF,QAAQ,EACR,cAAc,EACd,QAAQ,EACR,UAAU,GACX,EAAE,YAAY,+BAgNd;AAED,eAAe,OAAO,CAAA"}

package/dist/blocks/application/verification/verify-1.js

@@ -0,0 +1,243 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var verify_1_exports = {};
+__export(verify_1_exports, {
+  Verify1: () => Verify1,
+  default: () => verify_1_default
+});
+module.exports = __toCommonJS(verify_1_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_lucide_react = require("lucide-react");
+var import_button = require("../../../ui/button.js");
+var import_card = require("../../../ui/card.js");
+var import_input = require("../../../ui/input.js");
+var import_input_otp = require("../../../ui/input-otp.js");
+var import_label = require("../../../ui/label.js");
+var import_verify_confetti = require("./verify-confetti.js");
+const acceptedCode = "123456";
+const acceptedBackupCode = "CQ4T-9WLM";
+const maxAttempts = 3;
+const resendCooldownSeconds = 30;
+async function demoVerifyCode(code) {
+  await new Promise((resolve) => setTimeout(resolve, 700));
+  return code === acceptedCode;
+}
+async function demoVerifyBackupCode(code) {
+  await new Promise((resolve) => setTimeout(resolve, 700));
+  return code.trim().toUpperCase() === acceptedBackupCode;
+}
+function Verify1({
+  verifyTitleLabel = "Verificaci\xF3n de dos factores",
+  verifyDescriptionLabel = "Ingresa el c\xF3digo de 6 d\xEDgitos de tu aplicaci\xF3n de autenticaci\xF3n",
+  backupCodeTitleLabel = "Usa un c\xF3digo de respaldo",
+  backupCodeDescriptionLabel = "Ingresa uno de tus c\xF3digos de respaldo de un solo uso",
+  backupCodeLabel = "C\xF3digo de respaldo",
+  backupCodePlaceholder = "XXXX-XXXX",
+  otpAriaLabel = "C\xF3digo de verificaci\xF3n",
+  verifyLabel = "Verificar",
+  resendCodeLabel = "Reenviar c\xF3digo",
+  resendCooldownLabel = "Reenviar c\xF3digo en {n}s",
+  useBackupCodeLabel = "Usar un c\xF3digo de respaldo en su lugar",
+  useAuthenticatorLabel = "Usa tu aplicaci\xF3n de autenticaci\xF3n",
+  tooManyAttemptsLabel = "Demasiados c\xF3digos incorrectos. Espera quince minutos o usa un c\xF3digo de respaldo.",
+  attemptsLeftLabel = "Ese c\xF3digo no es correcto. Te quedan {n} intentos.",
+  verifiedTitleLabel = "Verificaci\xF3n completa",
+  verifiedDescriptionLabel = "Este dispositivo es de confianza por treinta d\xEDas. Puedes revocarlo desde la configuraci\xF3n de seguridad.",
+  continueLabel = "Continuar",
+  demoOtpHintLabel = "Prueba 123456 en esta demo.",
+  demoBackupHintLabel = "Prueba {code} en esta demo. Cada c\xF3digo funciona una sola vez.",
+  onVerify,
+  onVerifyBackup,
+  onResend,
+  onContinue
+}) {
+  const backupId = (0, import_react.useId)();
+  const [mode, setMode] = (0, import_react.useState)("otp");
+  const [code, setCode] = (0, import_react.useState)("");
+  const [backup, setBackup] = (0, import_react.useState)("");
+  const [pending, setPending] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
+  const [attempts, setAttempts] = (0, import_react.useState)(0);
+  const [verified, setVerified] = (0, import_react.useState)(false);
+  const [cooldown, setCooldown] = (0, import_react.useState)(resendCooldownSeconds);
+  const locked = attempts >= maxAttempts;
+  (0, import_react.useEffect)(() => {
+    if (cooldown <= 0) {
+      return;
+    }
+    const timer = window.setTimeout(() => setCooldown((current) => current - 1), 1e3);
+    return () => window.clearTimeout(timer);
+  }, [cooldown]);
+  const handleResend = () => {
+    onResend?.();
+    setCooldown(resendCooldownSeconds);
+  };
+  const submit = async (event) => {
+    event.preventDefault();
+    if (locked) {
+      return;
+    }
+    setPending(true);
+    setError(null);
+    try {
+      const ok = mode === "otp" ? onVerify ? await onVerify(code) : await demoVerifyCode(code) : onVerifyBackup ? await onVerifyBackup(backup) : await demoVerifyBackupCode(backup);
+      if (ok) {
+        setVerified(true);
+        return;
+      }
+      const next = attempts + 1;
+      setAttempts(next);
+      setCode("");
+      setBackup("");
+      setError(
+        next >= maxAttempts ? tooManyAttemptsLabel : attemptsLeftLabel.replace("{n}", String(maxAttempts - next))
+      );
+    } finally {
+      setPending(false);
+    }
+  };
+  if (verified) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative w-full max-w-md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_verify_confetti.Confetti, { fire: true, origin: { x: 0.5, y: 0.5 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.Card, { className: "relative w-full max-w-md gap-6 py-8 shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card.CardContent, { className: "flex flex-col items-center gap-4 px-8 py-8 text-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "bg-primary/10 text-primary flex size-14 items-center justify-center rounded-full",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ShieldCheck, { className: "size-7" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "text-2xl font-semibold tracking-tight", children: verifiedTitleLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground max-w-xs text-sm", children: verifiedDescriptionLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { className: "mt-2", onClick: onContinue, children: continueLabel })
+      ] }) })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full max-w-md", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card.Card, { className: "w-full max-w-md gap-6 py-8 shadow-lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card.CardHeader, { className: "gap-2 px-8 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "bg-muted text-muted-foreground mx-auto mb-3 flex size-14 items-center justify-center rounded-full",
+          children: mode === "otp" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ShieldCheck, { className: "size-6" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.KeyRound, { className: "size-6" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.CardTitle, { className: "text-2xl font-semibold tracking-tight", children: mode === "otp" ? verifyTitleLabel : backupCodeTitleLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.CardDescription, { children: mode === "otp" ? verifyDescriptionLabel : backupCodeDescriptionLabel })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.CardContent, { className: "px-8", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { onSubmit: submit, noValidate: true, className: "flex flex-col items-center gap-6", children: [
+      mode === "otp" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_input_otp.InputOTP,
+          {
+            maxLength: 6,
+            value: code,
+            onChange: setCode,
+            disabled: pending || locked,
+            "aria-label": otpAriaLabel,
+            "aria-invalid": error ? true : void 0,
+            "aria-describedby": error ? "verify-error" : void 0,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_input_otp.InputOTPGroup, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input_otp.InputOTPSlot, { index: 0, className: "size-12 text-lg" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input_otp.InputOTPSlot, { index: 1, className: "size-12 text-lg" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input_otp.InputOTPSlot, { index: 2, className: "size-12 text-lg" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input_otp.InputOTPSeparator, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_input_otp.InputOTPGroup, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input_otp.InputOTPSlot, { index: 3, className: "size-12 text-lg" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input_otp.InputOTPSlot, { index: 4, className: "size-12 text-lg" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input_otp.InputOTPSlot, { index: 5, className: "size-12 text-lg" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-xs", children: demoOtpHintLabel })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid w-full gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_label.Label, { htmlFor: backupId, children: backupCodeLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_input.Input,
+          {
+            id: backupId,
+            value: backup,
+            onChange: (event) => setBackup(event.target.value),
+            placeholder: backupCodePlaceholder,
+            autoComplete: "one-time-code",
+            className: "font-mono tracking-wider",
+            "aria-invalid": error ? true : void 0,
+            "aria-describedby": error ? "verify-error" : `${backupId}-hint`,
+            disabled: pending || locked
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { id: `${backupId}-hint`, className: "text-muted-foreground text-xs", children: demoBackupHintLabel.replace("{code}", acceptedBackupCode) })
+      ] }),
+      error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { id: "verify-error", role: "alert", className: "text-destructive text-center text-sm", children: error }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_button.Button,
+        {
+          type: "submit",
+          className: "w-full",
+          disabled: pending || locked || (mode === "otp" ? code.length < 6 : backup.trim() === ""),
+          "aria-busy": pending,
+          children: [
+            pending ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Loader2, { className: "size-4 animate-spin", "aria-hidden": "true" }) : null,
+            verifyLabel
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex w-full flex-col items-center gap-1 pt-1", children: [
+        mode === "otp" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_button.Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            disabled: cooldown > 0,
+            onClick: handleResend,
+            children: cooldown > 0 ? resendCooldownLabel.replace("{n}", String(cooldown)) : resendCodeLabel
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_button.Button,
+          {
+            type: "button",
+            variant: "link",
+            size: "sm",
+            className: "text-muted-foreground",
+            onClick: () => {
+              setMode((current) => current === "otp" ? "backup" : "otp");
+              setError(null);
+            },
+            children: mode === "otp" ? useBackupCodeLabel : useAuthenticatorLabel
+          }
+        )
+      ] })
+    ] }) })
+  ] }) });
+}
+var verify_1_default = Verify1;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Verify1
+});
+//# sourceMappingURL=verify-1.js.map

package/dist/blocks/application/verification/verify-1.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/application/verification/verify-1.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useId, useState, type FormEvent } from 'react'\nimport { KeyRound, Loader2, ShieldCheck } from 'lucide-react'\nimport { Button } from '../../../ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../../ui/card'\nimport { Input } from '../../../ui/input'\nimport { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '../../../ui/input-otp'\nimport { Label } from '../../../ui/label'\nimport { Confetti } from './verify-confetti'\n\n/**\n * Bloque de verificación de dos factores (solo render).\n *\n * Este bloque NO valida credenciales reales, no crea sesiones ni se comunica con\n * ningún backend. Para producción, conecta la verificación real a través de las\n * props `onVerify` y `onVerifyBackup` (devuelven `Promise<boolean>`) y de `onResend`\n * / `onContinue`. Si no se proporcionan, se usa una demo interna documentada:\n * código `123456`, código de respaldo `CQ4T-9WLM`, máximo 3 intentos antes del\n * bloqueo y reenvío con espera de 30 segundos. La máquina de estados (modo\n * otp/respaldo, intentos, bloqueo, cuenta atrás, verificado, pendiente) es el\n * comportamiento valioso del bloque y se conserva en ambos modos.\n */\n\nconst acceptedCode = '123456'\nconst acceptedBackupCode = 'CQ4T-9WLM'\nconst maxAttempts = 3\nconst resendCooldownSeconds = 30\n\nasync function demoVerifyCode(code: string): Promise<boolean> {\n  await new Promise(resolve => setTimeout(resolve, 700))\n  return code === acceptedCode\n}\n\nasync function demoVerifyBackupCode(code: string): Promise<boolean> {\n  await new Promise(resolve => setTimeout(resolve, 700))\n  return code.trim().toUpperCase() === acceptedBackupCode\n}\n\nexport interface Verify1Props {\n  verifyTitleLabel?: string\n  verifyDescriptionLabel?: string\n  backupCodeTitleLabel?: string\n  backupCodeDescriptionLabel?: string\n  backupCodeLabel?: string\n  backupCodePlaceholder?: string\n  otpAriaLabel?: string\n  verifyLabel?: string\n  resendCodeLabel?: string\n  /** Plantilla con {n} sustituido por los segundos restantes. */\n  resendCooldownLabel?: string\n  useBackupCodeLabel?: string\n  useAuthenticatorLabel?: string\n  tooManyAttemptsLabel?: string\n  /** Plantilla con {n} sustituido por los intentos restantes. */\n  attemptsLeftLabel?: string\n  verifiedTitleLabel?: string\n  verifiedDescriptionLabel?: string\n  continueLabel?: string\n  demoOtpHintLabel?: string\n  /** Plantilla con {code} sustituido por el código de respaldo de la demo. */\n  demoBackupHintLabel?: string\n  /** Verificación real del código OTP. Devuelve true si es correcto. */\n  onVerify?: (code: string) => Promise<boolean>\n  /** Verificación real del código de respaldo. Devuelve true si es correcto. */\n  onVerifyBackup?: (code: string) => Promise<boolean>\n  /** Se dispara al pedir reenviar el código. */\n  onResend?: () => void\n  /** Se dispara al continuar tras la verificación. */\n  onContinue?: () => void\n}\n\nexport function Verify1({\n  verifyTitleLabel = 'Verificación de dos factores',\n  verifyDescriptionLabel = 'Ingresa el código de 6 dígitos de tu aplicación de autenticación',\n  backupCodeTitleLabel = 'Usa un código de respaldo',\n  backupCodeDescriptionLabel = 'Ingresa uno de tus códigos de respaldo de un solo uso',\n  backupCodeLabel = 'Código de respaldo',\n  backupCodePlaceholder = 'XXXX-XXXX',\n  otpAriaLabel = 'Código de verificación',\n  verifyLabel = 'Verificar',\n  resendCodeLabel = 'Reenviar código',\n  resendCooldownLabel = 'Reenviar código en {n}s',\n  useBackupCodeLabel = 'Usar un código de respaldo en su lugar',\n  useAuthenticatorLabel = 'Usa tu aplicación de autenticación',\n  tooManyAttemptsLabel = 'Demasiados códigos incorrectos. Espera quince minutos o usa un código de respaldo.',\n  attemptsLeftLabel = 'Ese código no es correcto. Te quedan {n} intentos.',\n  verifiedTitleLabel = 'Verificación completa',\n  verifiedDescriptionLabel = 'Este dispositivo es de confianza por treinta días. Puedes revocarlo desde la configuración de seguridad.',\n  continueLabel = 'Continuar',\n  demoOtpHintLabel = 'Prueba 123456 en esta demo.',\n  demoBackupHintLabel = 'Prueba {code} en esta demo. Cada código funciona una sola vez.',\n  onVerify,\n  onVerifyBackup,\n  onResend,\n  onContinue,\n}: Verify1Props) {\n  const backupId = useId()\n  const [mode, setMode] = useState<'otp' | 'backup'>('otp')\n  const [code, setCode] = useState('')\n  const [backup, setBackup] = useState('')\n  const [pending, setPending] = useState(false)\n  const [error, setError] = useState<string | null>(null)\n  const [attempts, setAttempts] = useState(0)\n  const [verified, setVerified] = useState(false)\n  const [cooldown, setCooldown] = useState(resendCooldownSeconds)\n\n  const locked = attempts >= maxAttempts\n\n  useEffect(() => {\n    if (cooldown <= 0) {\n      return\n    }\n\n    const timer = window.setTimeout(() => setCooldown(current => current - 1), 1000)\n    return () => window.clearTimeout(timer)\n  }, [cooldown])\n\n  const handleResend = () => {\n    onResend?.()\n    setCooldown(resendCooldownSeconds)\n  }\n\n  const submit = async (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n\n    if (locked) {\n      return\n    }\n\n    setPending(true)\n    setError(null)\n\n    try {\n      const ok =\n        mode === 'otp'\n          ? onVerify\n            ? await onVerify(code)\n            : await demoVerifyCode(code)\n          : onVerifyBackup\n            ? await onVerifyBackup(backup)\n            : await demoVerifyBackupCode(backup)\n\n      if (ok) {\n        setVerified(true)\n        return\n      }\n\n      const next = attempts + 1\n      setAttempts(next)\n      setCode('')\n      setBackup('')\n      setError(\n        next >= maxAttempts\n          ? tooManyAttemptsLabel\n          : attemptsLeftLabel.replace('{n}', String(maxAttempts - next)),\n      )\n    } finally {\n      setPending(false)\n    }\n  }\n\n  if (verified) {\n    return (\n      <div className='relative w-full max-w-md'>\n        {/* Fired once, over the whole field rather than the card, so the paper has somewhere\n            to fall. The success is stated in the heading below; this only decorates it. */}\n        <Confetti fire origin={{ x: 0.5, y: 0.5 }} />\n\n        <Card className='relative w-full max-w-md gap-6 py-8 shadow-lg'>\n          <CardContent className='flex flex-col items-center gap-4 px-8 py-8 text-center'>\n            <span\n              aria-hidden='true'\n              className='bg-primary/10 text-primary flex size-14 items-center justify-center rounded-full'\n            >\n              <ShieldCheck className='size-7' />\n            </span>\n            <h1 className='text-2xl font-semibold tracking-tight'>{verifiedTitleLabel}</h1>\n            <p className='text-muted-foreground max-w-xs text-sm'>{verifiedDescriptionLabel}</p>\n            <Button className='mt-2' onClick={onContinue}>\n              {continueLabel}\n            </Button>\n          </CardContent>\n        </Card>\n      </div>\n    )\n  }\n\n  return (\n    <div className='w-full max-w-md'>\n      <Card className='w-full max-w-md gap-6 py-8 shadow-lg'>\n        <CardHeader className='gap-2 px-8 text-center'>\n          <span\n            aria-hidden='true'\n            className='bg-muted text-muted-foreground mx-auto mb-3 flex size-14 items-center justify-center rounded-full'\n          >\n            {mode === 'otp' ? <ShieldCheck className='size-6' /> : <KeyRound className='size-6' />}\n          </span>\n          <CardTitle className='text-2xl font-semibold tracking-tight'>\n            {mode === 'otp' ? verifyTitleLabel : backupCodeTitleLabel}\n          </CardTitle>\n          <CardDescription>\n            {mode === 'otp' ? verifyDescriptionLabel : backupCodeDescriptionLabel}\n          </CardDescription>\n        </CardHeader>\n\n        <CardContent className='px-8'>\n          <form onSubmit={submit} noValidate className='flex flex-col items-center gap-6'>\n            {mode === 'otp' ? (\n              <>\n                <InputOTP\n                  maxLength={6}\n                  value={code}\n                  onChange={setCode}\n                  disabled={pending || locked}\n                  aria-label={otpAriaLabel}\n                  aria-invalid={error ? true : undefined}\n                  aria-describedby={error ? 'verify-error' : undefined}\n                >\n                  <InputOTPGroup>\n                    <InputOTPSlot index={0} className='size-12 text-lg' />\n                    <InputOTPSlot index={1} className='size-12 text-lg' />\n                    <InputOTPSlot index={2} className='size-12 text-lg' />\n                  </InputOTPGroup>\n                  <InputOTPSeparator />\n                  <InputOTPGroup>\n                    <InputOTPSlot index={3} className='size-12 text-lg' />\n                    <InputOTPSlot index={4} className='size-12 text-lg' />\n                    <InputOTPSlot index={5} className='size-12 text-lg' />\n                  </InputOTPGroup>\n                </InputOTP>\n                <p className='text-muted-foreground text-xs'>{demoOtpHintLabel}</p>\n              </>\n            ) : (\n              <div className='grid w-full gap-2'>\n                <Label htmlFor={backupId}>{backupCodeLabel}</Label>\n                <Input\n                  id={backupId}\n                  value={backup}\n                  onChange={event => setBackup(event.target.value)}\n                  placeholder={backupCodePlaceholder}\n                  autoComplete='one-time-code'\n                  className='font-mono tracking-wider'\n                  aria-invalid={error ? true : undefined}\n                  aria-describedby={error ? 'verify-error' : `${backupId}-hint`}\n                  disabled={pending || locked}\n                />\n                <p id={`${backupId}-hint`} className='text-muted-foreground text-xs'>\n                  {demoBackupHintLabel.replace('{code}', acceptedBackupCode)}\n                </p>\n              </div>\n            )}\n\n            {error ? (\n              <p id='verify-error' role='alert' className='text-destructive text-center text-sm'>\n                {error}\n              </p>\n            ) : null}\n\n            <Button\n              type='submit'\n              className='w-full'\n              disabled={\n                pending || locked || (mode === 'otp' ? code.length < 6 : backup.trim() === '')\n              }\n              aria-busy={pending}\n            >\n              {pending ? <Loader2 className='size-4 animate-spin' aria-hidden='true' /> : null}\n              {verifyLabel}\n            </Button>\n\n            <div className='flex w-full flex-col items-center gap-1 pt-1'>\n              {mode === 'otp' ? (\n                <Button\n                  type='button'\n                  variant='ghost'\n                  size='sm'\n                  disabled={cooldown > 0}\n                  onClick={handleResend}\n                >\n                  {cooldown > 0\n                    ? resendCooldownLabel.replace('{n}', String(cooldown))\n                    : resendCodeLabel}\n                </Button>\n              ) : null}\n\n              <Button\n                type='button'\n                variant='link'\n                size='sm'\n                className='text-muted-foreground'\n                onClick={() => {\n                  setMode(current => (current === 'otp' ? 'backup' : 'otp'))\n                  setError(null)\n                }}\n              >\n                {mode === 'otp' ? useBackupCodeLabel : useAuthenticatorLabel}\n              </Button>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n\nexport default Verify1"],"mappings":"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","names":[]}