@mimi-ng/cli 0.3.0 → 0.4.0

package/dist/templates/blocks/login-02/login-02.html

@@ -0,0 +1,186 @@
+<!-- Imagen: arriba como banner en móvil, la mitad derecha en escritorio. -->
+<div
+  class="relative h-[200px] shrink-0 overflow-hidden rounded-b-[24px] bg-muted md:order-2 md:h-auto md:w-1/2 md:rounded-none"
+>
+  @if (imageSrc(); as src) {
+    <img [src]="src" [alt]="imageAlt()" class="absolute inset-0 size-full object-cover" />
+  } @else {
+    <!-- PROVISIONAL (B.3-a): degradado neutro hasta tener una imagen en el diseño. Pon la tuya con imageSrc. -->
+    <div
+      aria-hidden="true"
+      data-slot="placeholder"
+      class="absolute inset-0 bg-linear-to-br from-secondary via-muted to-accent"
+    ></div>
+  }
+
+  <figure
+    class="pointer-events-none absolute inset-x-7 bottom-7 hidden flex-col gap-3 rounded-card border border-glass-border bg-glass p-5 backdrop-blur-glass md:flex [@media(prefers-reduced-transparency:reduce)]:bg-card [@media(prefers-reduced-transparency:reduce)]:backdrop-blur-none"
+  >
+    <!-- Texto de relleno: pon aquí la cita de un cliente real (con su permiso), o quita el figure. -->
+    <blockquote class="text-[17px] leading-[1.45] font-semibold text-pretty">
+      Add a short quote from a customer here.
+    </blockquote>
+    <figcaption class="flex items-center gap-2.5">
+      <mimi-avatar size="sm">
+        <mimi-avatar-fallback class="bg-info-soft font-bold text-info-soft-foreground"
+          >CN</mimi-avatar-fallback
+        >
+      </mimi-avatar>
+      <span class="flex flex-col leading-[1.3]">
+        <span class="text-[13.5px] font-bold">Customer name</span>
+        <span class="text-[12.5px] text-muted-foreground">Role · Company</span>
+      </span>
+    </figcaption>
+  </figure>
+</div>
+
+<div class="flex min-w-0 flex-1 flex-col px-[22px] pt-5 pb-6 md:px-10 md:py-8">
+  <div class="flex items-center gap-2.5">
+    <span
+      aria-hidden="true"
+      class="inline-flex size-8 items-center justify-center rounded-[10px] bg-primary text-lg leading-none font-extrabold text-primary-foreground"
+      >m</span
+    >
+    <span class="text-base font-bold">Mimi Sales</span>
+  </div>
+
+  <div class="flex flex-1 items-center justify-center py-6 md:py-0">
+    <form
+      novalidate
+      class="flex w-full max-w-[360px] flex-col gap-[18px]"
+      [attr.aria-labelledby]="id + '-title'"
+      (submit)="onSubmit($event)"
+    >
+      <div class="flex flex-col gap-1.5">
+        <h1
+          [id]="id + '-title'"
+          class="text-[26px] font-extrabold tracking-[-0.025em] md:text-[32px]"
+        >
+          Welcome back
+        </h1>
+        <p class="text-[14.5px] text-muted-foreground">Sign in with your work email.</p>
+      </div>
+
+      <mimi-form-field label="Email">
+        <input
+          mimiInput
+          type="email"
+          autocomplete="email"
+          placeholder="name@example.com"
+          [formField]="login.email"
+        />
+      </mimi-form-field>
+
+      <mimi-form-field class="relative">
+        <label [attr.for]="id + '-password'" class="text-sm font-medium">Password</label>
+        <a
+          [href]="forgotHref()"
+          class="absolute top-0 right-0 rounded-sm text-[13px] text-muted-foreground underline underline-offset-3 hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+          >Forgot it?</a
+        >
+        <input
+          mimiInput
+          type="password"
+          autocomplete="current-password"
+          placeholder="••••••••"
+          [id]="id + '-password'"
+          [formField]="login.password"
+        />
+      </mimi-form-field>
+
+      <!-- Siempre en la página: así el lector anuncia el error cuando aparece. -->
+      <div role="alert" class="empty:hidden">
+        @if (error(); as message) {
+          <p
+            class="flex items-start gap-2 rounded-[var(--mimi-radius)] bg-destructive-soft-bg px-3 py-2.5 text-sm text-destructive-soft-foreground"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+              class="mt-0.5 shrink-0"
+            >
+              <!-- Lucide circle-alert (ISC) -->
+              <circle cx="12" cy="12" r="10" />
+              <line x1="12" x2="12" y1="8" y2="12" />
+              <line x1="12" x2="12.01" y1="16" y2="16" />
+            </svg>
+            {{ message }}
+          </p>
+        }
+      </div>
+
+      <button
+        mimiBtn
+        type="submit"
+        class="h-[calc(var(--mimi-control-height,2.5rem)+4px)] text-[15px] font-semibold"
+        [attr.aria-disabled]="loading() ? 'true' : null"
+        [attr.aria-busy]="loading() ? 'true' : null"
+      >
+        @if (loading()) {
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+            class="motion-safe:animate-[mimi-spin_0.8s_linear_infinite]"
+          >
+            <!-- Lucide loader-circle (ISC) -->
+            <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+          </svg>
+          Signing in…
+        } @else {
+          Sign in
+        }
+      </button>
+
+      <button mimiBtn type="button" variant="outline" tone="secondary" (click)="sso.emit()">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <!-- Lucide key-round (ISC) -->
+          <path
+            d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"
+          />
+          <circle cx="16.5" cy="7.5" r=".5" fill="currentColor" />
+        </svg>
+        Sign in with SSO
+      </button>
+
+      <p class="text-sm text-muted-foreground">
+        First time here?
+        <a
+          [href]="signupHref()"
+          class="rounded-sm font-semibold text-foreground underline underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+          >Create an account</a
+        >
+      </p>
+    </form>
+  </div>
+
+  <p class="text-xs text-muted-foreground">
+    By continuing you agree to the Terms and the Privacy Notice.
+  </p>
+</div>

package/dist/templates/blocks/login-02/login-02.ts

@@ -0,0 +1,92 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  booleanAttribute,
+  computed,
+  input,
+  output,
+  signal,
+} from '@angular/core';
+import { FormField, email, form, required } from '@angular/forms/signals';
+import { MimiAvatar, MimiAvatarFallback } from '@/components/ui/avatar';
+import { MimiButton } from '@/components/ui/button';
+import { MimiFormField } from '@/components/ui/form-field';
+import { MimiInput } from '@/components/ui/input';
+import { cn } from '@/components/ui/utils/cn';
+
+/** Lo que sale al enviar un formulario válido. */
+export interface Login02Value {
+  email: string;
+  password: string;
+}
+
+let nextId = 0;
+
+/**
+ * login-02 (Block de Mimi): inicio de sesión dividido en dos, con el formulario a un lado y una
+ * imagen con un testimonio en vidrio al otro. Diseño: docs/design/Block login-02.dc.html.
+ *
+ * Es una pantalla: ponla en tus rutas (`{ path: 'login', component: Login02 }`). Da tu imagen con
+ * `imageSrc` (y `imageAlt` si no es decorativa). El testimonio está escrito en la plantilla:
+ * cámbialo ahí.
+ *
+ * ```html
+ * <mimi-login-02 imageSrc="/img/login.jpg" [loading]="auth.loading()" (submitted)="auth.signIn($event)" />
+ * ```
+ */
+@Component({
+  selector: 'mimi-login-02',
+  imports: [FormField, MimiAvatar, MimiAvatarFallback, MimiButton, MimiFormField, MimiInput],
+  templateUrl: './login-02.html',
+  host: {
+    '[class]': 'classes()',
+    '[attr.data-state]': 'loading() ? "loading" : null',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Login02 {
+  /** Mientras tu app comprueba las credenciales: el botón dice «Signing in…» y no reenvía. */
+  readonly loading = input(false, { transform: booleanAttribute });
+  /** Error de tu servidor, encima del botón. `null`: ninguno. */
+  readonly error = input<string | null>(null);
+  /** Tu imagen. Sin ella, un degradado neutro (provisional, B.3-a). */
+  readonly imageSrc = input<string | null>(null);
+  /** Texto alternativo. Vacío por defecto: la imagen es decorativa. */
+  readonly imageAlt = input('');
+  readonly forgotHref = input('#');
+  readonly signupHref = input('#');
+  readonly userClass = input('', { alias: 'class' });
+
+  /** Formulario válido enviado. */
+  readonly submitted = output<Login02Value>();
+  /** Se pulsó «Sign in with SSO». */
+  readonly sso = output<void>();
+
+  protected readonly id = `mimi-login-02-${nextId++}`;
+
+  protected readonly model = signal<Login02Value>({ email: '', password: '' });
+  protected readonly login = form(this.model, (path) => {
+    required(path.email);
+    email(path.email);
+    required(path.password);
+  });
+
+  protected readonly classes = computed(() =>
+    cn(
+      'flex min-h-svh w-full flex-col bg-background text-foreground md:flex-row',
+      this.userClass(),
+    ),
+  );
+
+  protected onSubmit(event: Event): void {
+    event.preventDefault();
+    if (this.loading()) return;
+    const state = this.login();
+    state.markAsTouched();
+    if (state.invalid()) {
+      state.errorSummary()[0]?.fieldTree().focusBoundControl();
+      return;
+    }
+    this.submitted.emit({ ...this.model() });
+  }
+}

package/dist/templates/blocks/otp-01/index.ts

@@ -0,0 +1 @@
+export * from './otp-01';

package/dist/templates/blocks/otp-01/otp-01.html

@@ -0,0 +1,166 @@
+<mimi-card
+  class="w-full items-center gap-[22px] border-0 bg-transparent p-0 text-center shadow-none sm:max-w-[440px] sm:border sm:bg-card sm:px-8 sm:py-9 sm:shadow-card"
+>
+  <span
+    aria-hidden="true"
+    class="inline-flex size-14 items-center justify-center rounded-full bg-info-soft text-info-soft-foreground shadow-[0_0_0_8px_color-mix(in_oklab,var(--mimi-info)_8%,transparent)]"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="26"
+      height="26"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <!-- Lucide mail-check (ISC) -->
+      <path d="M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8" />
+      <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
+      <path d="m16 19 2 2 4-4" />
+    </svg>
+  </span>
+
+  <div class="flex flex-col gap-1.5">
+    <h1 [id]="id + '-title'" class="text-2xl font-extrabold tracking-[-0.02em]">
+      Check your email
+    </h1>
+    <p class="text-sm leading-normal text-muted-foreground">
+      We sent a {{ length() }}-digit code to
+      <b class="font-bold text-foreground">{{ destination() }}</b
+      >.
+    </p>
+  </div>
+
+  <div class="flex flex-col items-center gap-2.5">
+    <!-- Casillas más pequeñas en móvil, con los tokens de Input OTP. -->
+    <mimi-input-otp
+      class="[--mimi-otp-font-size:20px] [--mimi-otp-gap:6px] [--mimi-otp-height:50px] [--mimi-otp-width:42px] sm:[--mimi-otp-font-size:22px] sm:[--mimi-otp-gap:8px] sm:[--mimi-otp-height:56px] sm:[--mimi-otp-width:48px]"
+      aria-label="Verification code"
+      [aria-describedby]="id + '-message'"
+      [length]="length()"
+      [separatorAfter]="length() === 6 ? 3 : undefined"
+      [invalid]="incomplete() || shownStatus() === 'error'"
+      [touched]="incomplete() || shownStatus() === 'error'"
+      [success]="shownStatus() === 'success'"
+      [value]="code()"
+      (valueChange)="onCodeChange($event)"
+    />
+    <!-- El mensaje del código (Input OTP no trae uno propio). -->
+    <span role="status" [id]="id + '-message'" [class]="messageClasses()">
+      @if (incomplete() || shownStatus() === 'error') {
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <!-- Lucide circle-alert (ISC) -->
+          <circle cx="12" cy="12" r="10" />
+          <line x1="12" x2="12" y1="8" y2="12" />
+          <line x1="12" x2="12.01" y1="16" y2="16" />
+        </svg>
+      } @else if (shownStatus() === 'success') {
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <!-- Lucide circle-check (ISC) -->
+          <circle cx="12" cy="12" r="10" />
+          <path d="m9 12 2 2 4-4" />
+        </svg>
+      }
+      {{ message() }}
+    </span>
+  </div>
+
+  <button
+    mimiBtn
+    type="button"
+    class="h-[calc(var(--mimi-control-height,2.5rem)+4px)] w-full text-[15px] font-semibold"
+    [attr.aria-disabled]="loading() ? 'true' : null"
+    [attr.aria-busy]="loading() ? 'true' : null"
+    (click)="onVerify()"
+  >
+    @if (loading()) {
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+        class="motion-safe:animate-[mimi-spin_0.8s_linear_infinite]"
+      >
+        <!-- Lucide loader-circle (ISC) -->
+        <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+      </svg>
+      Verifying…
+    } @else {
+      Verify
+    }
+  </button>
+
+  <div class="flex flex-col gap-2 text-[13.5px] text-muted-foreground">
+    <span>
+      Didn't get it?
+      <button
+        type="button"
+        class="rounded-sm font-semibold text-foreground underline underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:text-muted-foreground"
+        [disabled]="left() > 0"
+        (click)="onResend()"
+      >
+        @if (left() > 0) {
+          Resend in {{ countdown() }}
+        } @else {
+          Resend code
+        }
+      </button>
+    </span>
+    <!-- Anuncia solo cuando se puede reenviar (no cada segundo). -->
+    <span class="sr-only" aria-live="polite">{{ resendAnnouncement() }}</span>
+    <button
+      type="button"
+      class="inline-flex items-center justify-center gap-1.5 rounded-sm text-muted-foreground hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+      (click)="changeDestination.emit()"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <!-- Lucide arrow-left (ISC) -->
+        <path d="m12 19-7-7 7-7" />
+        <path d="M19 12H5" />
+      </svg>
+      Use another email
+    </button>
+  </div>
+</mimi-card>

package/dist/templates/blocks/otp-01/otp-01.ts

@@ -0,0 +1,212 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DOCUMENT,
+  DestroyRef,
+  afterNextRender,
+  booleanAttribute,
+  computed,
+  effect,
+  inject,
+  input,
+  numberAttribute,
+  output,
+  signal,
+  untracked,
+  viewChild,
+} from '@angular/core';
+import { MimiButton } from '@/components/ui/button';
+import { MimiCard } from '@/components/ui/card';
+import { MimiInputOtp } from '@/components/ui/input-otp';
+import { cn } from '@/components/ui/utils/cn';
+
+/** Lo que tu app sabe del último código enviado. */
+export type Otp01Status = 'idle' | 'error' | 'success';
+
+let nextId = 0;
+
+/**
+ * otp-01 (Block de Mimi): verificación con un código de 6 dígitos, con reenvío y cuenta
+ * regresiva. Diseño: docs/design/Block otp-01.dc.html.
+ *
+ * Es una pantalla: va después del registro o del inicio de sesión. `verify` sale con el código
+ * (al completar los dígitos o con el botón, una sola vez por código); tu app lo comprueba y
+ * responde con `status`.
+ *
+ * ```html
+ * <mimi-otp-01 destination="a••••@example.com" [status]="otp.status()" [loading]="otp.checking()"
+ *   (verify)="otp.check($event)" (resend)="otp.send()" (changeDestination)="router.navigate(['/signup'])" />
+ * ```
+ */
+@Component({
+  selector: 'mimi-otp-01',
+  imports: [MimiButton, MimiCard, MimiInputOtp],
+  templateUrl: './otp-01.html',
+  host: {
+    '[class]': 'classes()',
+    '[attr.data-state]': 'shownStatus()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Otp01 {
+  /** El correo o teléfono, ya enmascarado, que se muestra. */
+  readonly destination = input('a••••@example.com');
+  readonly length = input(6, { transform: numberAttribute });
+  /** Segundos hasta poder pedir otro código. */
+  readonly resendSeconds = input(60, { transform: numberAttribute });
+  /** Mientras tu app comprueba el código: «Verifying…» y no reenvía. */
+  readonly loading = input(false, { transform: booleanAttribute });
+  /** El resultado del último código enviado por `verify`. */
+  readonly status = input<Otp01Status>('idle');
+  /** Lleva el foco al código al aparecer (no lo hace si el foco ya está en otro lugar). */
+  readonly autofocus = input(true, { transform: booleanAttribute });
+  readonly userClass = input('', { alias: 'class' });
+
+  /** El código completo, una sola vez por código. */
+  readonly verify = output<string>();
+  /** «Resend code». */
+  readonly resend = output<void>();
+  /** «Use another email». */
+  readonly changeDestination = output<void>();
+
+  protected readonly id = `mimi-otp-01-${nextId++}`;
+  private readonly document = inject(DOCUMENT);
+  private readonly otp = viewChild.required(MimiInputOtp);
+
+  protected readonly code = signal('');
+  /** El último código que salió por `verify` (para no repetirlo). */
+  private readonly sent = signal<string | null>(null);
+  /** Se pulsó «Verify» con el código incompleto. */
+  protected readonly incomplete = signal(false);
+
+  /** `status` vale para el código que se envió: al cambiarlo, vuelve a «idle». */
+  /**
+   * Enviado y sin respuesta todavía (M4): el `status` que hay es el del envío anterior. Se apaga
+   * cuando tu app cambia `status` o `loading` (si respondes con el mismo `status`, pon `loading`
+   * mientras compruebas).
+   */
+  private readonly awaiting = signal(false);
+  protected readonly shownStatus = computed<Otp01Status>(() =>
+    this.awaiting() || this.loading() || this.code() !== this.sent() ? 'idle' : this.status(),
+  );
+  protected readonly message = computed(() => {
+    if (this.incomplete()) return `Enter the ${this.length()}-digit code.`;
+    switch (this.shownStatus()) {
+      case 'error':
+        return 'Incorrect code. Check it and try again.';
+      case 'success':
+        return 'Code verified. Signing you in…';
+      default:
+        return 'The code expires in 10 minutes.';
+    }
+  });
+  protected readonly messageClasses = computed(() =>
+    cn(
+      'flex min-h-5 items-center gap-1.5 text-[13px]',
+      this.incomplete() || this.shownStatus() === 'error'
+        ? 'text-destructive-soft-foreground'
+        : this.shownStatus() === 'success'
+          ? 'text-success-soft-foreground'
+          : 'text-muted-foreground',
+    ),
+  );
+
+  /** Cuenta regresiva del reenvío. */
+  protected readonly left = signal(0);
+  protected readonly countdown = computed(() => {
+    const s = this.left();
+    return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`;
+  });
+  /** El único anuncio de la cuenta: cuando se habilita (no cada segundo). */
+  protected readonly resendAnnouncement = signal('');
+  private timer: ReturnType<typeof setInterval> | null = null;
+
+  protected readonly classes = computed(() =>
+    cn(
+      'flex min-h-svh w-full items-center justify-center bg-background px-5 py-8 text-foreground sm:bg-muted sm:p-10',
+      this.userClass(),
+    ),
+  );
+
+  constructor() {
+    // Al completar los dígitos, verifica (una vez por código).
+    effect(() => {
+      const code = this.code();
+      if (code.length === this.length()) untracked(() => this.send(code));
+    });
+    // La respuesta de tu app (un status o un loading nuevos) termina la espera del envío.
+    effect(() => {
+      this.status();
+      this.loading();
+      untracked(() => this.awaiting.set(false));
+    });
+    inject(DestroyRef).onDestroy(() => this.stopTimer());
+    afterNextRender(() => {
+      this.startCountdown();
+      const active = this.document.activeElement;
+      if (this.autofocus() && (!active || active === this.document.body)) {
+        this.otp().controlElement.focus();
+      }
+    });
+  }
+
+  protected onCodeChange(code: string): void {
+    // Al editar, el código enviado deja de valer: el mensaje vuelve a «idle» y, completo de nuevo
+    // (aunque sea el mismo), se vuelve a enviar (M4).
+    if (code !== this.code()) this.sent.set(null);
+    this.code.set(code);
+    this.incomplete.set(false);
+  }
+
+  protected onVerify(): void {
+    if (this.loading()) return;
+    const code = this.code();
+    if (code.length < this.length()) {
+      this.incomplete.set(true);
+      this.otp().controlElement.focus();
+      return;
+    }
+    this.send(code);
+  }
+
+  protected onResend(): void {
+    if (this.left() > 0) return;
+    this.resend.emit();
+    this.code.set('');
+    this.sent.set(null);
+    this.incomplete.set(false);
+    this.startCountdown();
+    this.otp().controlElement.focus();
+  }
+
+  /**
+   * Una vez por código (B.5-a): al completar y con el botón no se repite. Después de un error, el
+   * mismo código se puede reintentar (M4).
+   */
+  private send(code: string): void {
+    if (this.loading()) return;
+    if (code === this.sent() && !(this.status() === 'error' && !this.awaiting())) return;
+    this.sent.set(code);
+    this.awaiting.set(true);
+    this.verify.emit(code);
+  }
+
+  private startCountdown(): void {
+    this.stopTimer();
+    this.resendAnnouncement.set('');
+    this.left.set(this.resendSeconds());
+    if (this.left() <= 0) return;
+    this.timer = setInterval(() => {
+      this.left.update((s) => Math.max(0, s - 1));
+      if (this.left() === 0) {
+        this.stopTimer();
+        this.resendAnnouncement.set('You can request another code now.');
+      }
+    }, 1000);
+  }
+
+  private stopTimer(): void {
+    if (this.timer !== null) clearInterval(this.timer);
+    this.timer = null;
+  }
+}

package/dist/templates/blocks/pricing-01/index.ts

@@ -0,0 +1 @@
+export * from './pricing-01';