@mimi-ng/cli 0.2.0 → 0.4.0

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';

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

@@ -0,0 +1,173 @@
+<div class="flex max-w-[620px] flex-col items-center gap-3 text-center">
+  <span mimiBadge variant="soft" tone="info" class="h-[26px] gap-1.5 px-3 text-[12.5px]">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="13"
+      height="13"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <!-- Lucide sparkles (ISC) -->
+      <path
+        d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
+      />
+      <path d="M20 2v4" />
+      <path d="M22 4h-4" />
+      <circle cx="4" cy="20" r="2" />
+    </svg>
+    14-day free trial on any plan
+  </span>
+  <h1 class="text-[32px] leading-[1.08] font-extrabold tracking-[-0.03em] text-balance md:text-5xl">
+    Plans that grow with you
+  </h1>
+  <p class="text-base leading-[1.55] text-pretty text-muted-foreground">
+    Pay only for the people who use it. Change or cancel whenever you want.
+  </p>
+
+  <!-- El fondo que se desliza es de Toggle Group (no se copia el marcado del diseño). -->
+  <mimi-toggle-group
+    aria-label="Billing period"
+    class="mt-1.5 grid grid-cols-[repeat(2,140px)] rounded-full [&_button]:rounded-full [&_[data-slot=indicator]]:rounded-full"
+    [value]="period()"
+    (valueChange)="setPeriod($event)"
+  >
+    <button mimiToggleGroupItem="monthly" class="h-9">Monthly</button>
+    <button mimiToggleGroupItem="yearly" class="h-9 gap-1.5">
+      Yearly
+      <!-- El ahorro, calculado con los precios de los planes. -->
+      @if (yearlySaving(); as saving) {
+        <span mimiBadge variant="soft" tone="success" class="h-5 px-[7px] text-[11px]">{{
+          saving
+        }}</span>
+      }
+    </button>
+  </mimi-toggle-group>
+</div>
+
+<div class="grid w-full max-w-[1080px] grid-cols-1 items-stretch gap-[18px] md:grid-cols-3">
+  @for (card of cards(); track card.plan.id) {
+    <!-- El destacado: un borde de 1,5px con un degradado de color, quieto (B.7-a). -->
+    <section
+      [attr.aria-labelledby]="id + '-' + card.plan.id"
+      [attr.data-featured]="card.plan.featured ? '' : null"
+      [class]="
+        card.plan.featured
+          ? 'relative mt-3 flex rounded-card bg-[image:conic-gradient(from_200deg,transparent_0deg_250deg,var(--mimi-info)_310deg,var(--mimi-success)_345deg,transparent_360deg),linear-gradient(var(--mimi-border),var(--mimi-border))] p-[1.5px] shadow-popover md:mt-0'
+          : 'relative flex rounded-card shadow-card'
+      "
+    >
+      @if (card.plan.featured) {
+        <span
+          mimiBadge
+          class="absolute -top-[13px] start-1/2 z-2 h-[26px] -translate-x-1/2 gap-[5px] px-3 text-xs whitespace-nowrap shadow-primary rtl:translate-x-1/2"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <!-- Lucide star (ISC) -->
+            <path
+              d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"
+            />
+          </svg>
+          Most popular
+        </span>
+      }
+      <div
+        [class]="
+          card.plan.featured
+            ? 'flex flex-1 flex-col gap-[18px] rounded-[calc(var(--mimi-radius-card)-1.5px)] bg-card px-6 py-[26px]'
+            : 'flex flex-1 flex-col gap-[18px] rounded-card border bg-card px-6 py-[26px]'
+        "
+      >
+        <div class="flex flex-col gap-1.5">
+          <h2 [id]="id + '-' + card.plan.id" class="text-base font-bold">{{ card.plan.name }}</h2>
+          <p class="text-[13.5px] leading-[1.45] text-muted-foreground">
+            {{ card.plan.description }}
+          </p>
+        </div>
+        <div class="flex items-baseline gap-1.5">
+          <span
+            data-slot="price"
+            class="text-[40px] font-extrabold tracking-[-0.03em] tabular-nums"
+            >{{ card.price }}</span
+          >
+          <span class="text-[13.5px] text-muted-foreground">{{ card.unit }}</span>
+        </div>
+        <span
+          data-slot="note"
+          class="-mt-3 min-h-[18px] text-[12.5px] text-success-soft-foreground"
+          >{{ card.note }}</span
+        >
+        <button
+          mimiBtn
+          type="button"
+          class="h-[calc(var(--mimi-control-height,2.5rem)+4px)] text-[14.5px] font-semibold"
+          [variant]="card.plan.featured ? 'solid' : 'outline'"
+          [tone]="card.plan.featured ? 'primary' : 'secondary'"
+          (click)="planSelected.emit({ plan: card.plan, period: period() })"
+        >
+          {{ card.plan.cta }}
+        </button>
+        <div class="h-px bg-border"></div>
+        <ul class="flex flex-col gap-2.5">
+          @for (feature of card.plan.features; track feature.label) {
+            <li class="flex items-start gap-2.5 text-sm leading-[1.4]">
+              <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]="
+                  feature.included
+                    ? 'mt-px shrink-0 text-success-soft-foreground'
+                    : 'mt-px shrink-0 text-muted-foreground'
+                "
+              >
+                @if (feature.included) {
+                  <!-- Lucide check (ISC) -->
+                  <path d="M20 6 9 17l-5-5" />
+                } @else {
+                  <!-- Lucide minus (ISC) -->
+                  <path d="M5 12h14" />
+                }
+              </svg>
+              <span [class]="feature.included ? 'text-foreground' : 'text-muted-foreground'">
+                <span class="sr-only">{{ feature.included ? 'Included: ' : 'Not included: ' }}</span
+                >{{ feature.label }}
+              </span>
+            </li>
+          }
+        </ul>
+      </div>
+    </section>
+  }
+</div>
+
+<p class="text-center text-[13.5px] text-muted-foreground">
+  Prices in {{ currency() }}, taxes not included ·
+  <a
+    [href]="faqHref()"
+    class="rounded-sm font-semibold text-foreground underline underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+    >FAQ</a
+  >
+</p>

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

@@ -0,0 +1,178 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  LOCALE_ID,
+  computed,
+  inject,
+  input,
+  model,
+  output,
+} from '@angular/core';
+import { MimiBadge } from '@/components/ui/badge';
+import { MimiButton } from '@/components/ui/button';
+import { MimiToggleGroupImports } from '@/components/ui/toggle-group';
+import { cn } from '@/components/ui/utils/cn';
+
+export type Pricing01Period = 'monthly' | 'yearly';
+
+export interface Pricing01Plan {
+  /** Identificador estable (sale en `planSelected`). */
+  id: string;
+  name: string;
+  description: string;
+  /** Precio por persona y mes, pagando mes a mes. `null`: «Custom» (sin precio). */
+  monthly: number | null;
+  /** Precio por persona y mes, pagando el año. `null`: «Custom». */
+  yearly: number | null;
+  /** El plan destacado («Most popular», borde de color). */
+  featured?: boolean;
+  /** El texto del botón. */
+  cta: string;
+  features: { label: string; included: boolean }[];
+}
+
+/** Lo que sale al elegir un plan. */
+export interface Pricing01Selection {
+  plan: Pricing01Plan;
+  period: Pricing01Period;
+}
+
+/** Los tres planes del diseño, para que la pantalla funcione sin datos. */
+export const PRICING_01_PLANS: Pricing01Plan[] = [
+  {
+    id: 'starter',
+    name: 'Starter',
+    description: 'To start organizing your sales.',
+    monthly: 12,
+    yearly: 10,
+    cta: 'Start for free',
+    features: [
+      { label: 'Up to 5 people', included: true },
+      { label: 'Unlimited clients', included: true },
+      { label: 'Basic reports', included: true },
+      { label: 'Integrations', included: false },
+      { label: 'Priority support', included: false },
+    ],
+  },
+  {
+    id: 'team',
+    name: 'Team',
+    description: 'For teams that sell every day.',
+    monthly: 24,
+    yearly: 20,
+    featured: true,
+    cta: 'Try it for 14 days',
+    features: [
+      { label: 'Up to 25 people', included: true },
+      { label: 'Unlimited clients', included: true },
+      { label: 'Advanced reports', included: true },
+      { label: 'CRM and ERP integrations', included: true },
+      { label: 'Priority support', included: false },
+    ],
+  },
+  {
+    id: 'enterprise',
+    name: 'Enterprise',
+    description: 'Security and control for large teams.',
+    monthly: null,
+    yearly: null,
+    cta: 'Talk to sales',
+    features: [
+      { label: 'Unlimited people', included: true },
+      { label: 'SSO and audit log', included: true },
+      { label: 'Custom reports', included: true },
+      { label: 'Custom integrations', included: true },
+      { label: 'Account manager', included: true },
+    ],
+  },
+];
+
+let nextId = 0;
+
+/**
+ * pricing-01 (Block de Mimi): tres planes con un interruptor mensual/anual; el destacado con la
+ * insignia «Most popular» y un borde de color. Diseño: docs/design/Block pricing-01.dc.html.
+ *
+ * Los planes son datos (`plans`, con los del diseño por defecto) y los precios se escriben con
+ * `Intl.NumberFormat` (`currency` y `locale`). El borde del destacado es estático (B.7-a): el
+ * Border Beam que gira es de Mimi Effects (E.7).
+ *
+ * ```html
+ * <mimi-pricing-01 [plans]="plans" currency="EUR" [(period)]="period" (planSelected)="checkout($event)" />
+ * ```
+ */
+@Component({
+  selector: 'mimi-pricing-01',
+  imports: [MimiBadge, MimiButton, MimiToggleGroupImports],
+  templateUrl: './pricing-01.html',
+  host: {
+    '[class]': 'classes()',
+    '[attr.data-period]': 'period()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Pricing01 {
+  readonly plans = input<readonly Pricing01Plan[]>(PRICING_01_PLANS);
+  /** El periodo. Admite `[(period)]`. */
+  readonly period = model<Pricing01Period>('monthly');
+  /** Moneda de los precios (ISO 4217). */
+  readonly currency = input('USD');
+  /** Idioma de los números. Por defecto, el `LOCALE_ID` de la app. */
+  readonly locale = input<string | undefined>(undefined);
+  readonly faqHref = input('#');
+  readonly userClass = input('', { alias: 'class' });
+
+  /** El botón de un plan. */
+  readonly planSelected = output<Pricing01Selection>();
+
+  protected readonly id = `mimi-pricing-01-${nextId++}`;
+  private readonly appLocale = inject(LOCALE_ID);
+
+  private readonly money = computed(
+    () =>
+      new Intl.NumberFormat(this.locale() ?? this.appLocale, {
+        style: 'currency',
+        currency: this.currency(),
+        maximumFractionDigits: 2,
+        minimumFractionDigits: 0,
+      }),
+  );
+
+  protected readonly cards = computed(() => {
+    const yearly = this.period() === 'yearly';
+    const money = this.money();
+    return this.plans().map((plan) => {
+      const amount = yearly ? plan.yearly : plan.monthly;
+      return {
+        plan,
+        price: amount === null ? 'Custom' : money.format(amount),
+        unit: amount === null ? '' : 'per seat / month',
+        note:
+          amount !== null && yearly ? `Billed yearly: ${money.format(amount * 12)} per seat` : '',
+      };
+    });
+  });
+
+  /**
+   * El ahorro del pago anual, calculado con los precios (no escrito a mano): el mayor de los
+   * planes con precio, redondeado («−17%» con 12/10 y 24/20). Sin ahorro, sin insignia.
+   */
+  protected readonly yearlySaving = computed(() => {
+    const savings = this.plans().flatMap(({ monthly, yearly }) =>
+      monthly && yearly !== null ? [Math.round((1 - yearly / monthly) * 100)] : [],
+    );
+    const best = Math.max(0, ...savings);
+    return best > 0 ? `−${best}%` : null;
+  });
+
+  protected readonly classes = computed(() =>
+    cn(
+      'flex min-h-svh w-full flex-col items-center gap-7 bg-background px-[18px] pt-9 pb-8 text-foreground md:px-10 md:py-14',
+      this.userClass(),
+    ),
+  );
+
+  protected setPeriod(value: unknown): void {
+    if (value === 'monthly' || value === 'yearly') this.period.set(value);
+  }
+}

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

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