@mimi-ng/cli 0.2.0 → 0.4.0

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

@@ -0,0 +1,105 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  booleanAttribute,
+  computed,
+  input,
+  output,
+  signal,
+} from '@angular/core';
+import { FormField, email, form, required } from '@angular/forms/signals';
+import { MimiButton } from '@/components/ui/button';
+import { MimiCard } from '@/components/ui/card';
+import { MimiCheckbox } from '@/components/ui/checkbox';
+import { MimiFormField } from '@/components/ui/form-field';
+import { MimiInput } from '@/components/ui/input';
+import { MimiPassword } from '@/components/ui/password';
+import { MimiSeparator } from '@/components/ui/separator';
+import { cn } from '@/components/ui/utils/cn';
+
+/** Lo que sale al enviar un formulario válido. */
+export interface Login01Value {
+  email: string;
+  password: string;
+  remember: boolean;
+}
+
+/** Proveedores de los botones de redes. */
+export type Login01Provider = 'google' | 'github';
+
+let nextId = 0;
+
+/**
+ * login-01 (Block de Mimi): inicio de sesión centrado con correo, contraseña, «recordarme» y
+ * botones de Google y GitHub. Diseño: docs/design/Block login-01.dc.html.
+ *
+ * Es una pantalla: ponla en tus rutas (`{ path: 'login', component: Login01 }`) y conéctala con
+ * tu autenticación por las salidas. El archivo es tuyo: cambia los textos, quita las redes o
+ * agrega campos aquí mismo.
+ *
+ * ```html
+ * <mimi-login-01 [loading]="auth.loading()" [error]="auth.error()" (submitted)="auth.signIn($event)" />
+ * ```
+ */
+@Component({
+  selector: 'mimi-login-01',
+  imports: [
+    FormField,
+    MimiButton,
+    MimiCard,
+    MimiCheckbox,
+    MimiFormField,
+    MimiInput,
+    MimiPassword,
+    MimiSeparator,
+  ],
+  templateUrl: './login-01.html',
+  host: {
+    '[class]': 'classes()',
+    '[attr.data-state]': 'loading() ? "loading" : null',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Login01 {
+  /** 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 (credenciales incorrectas…), encima del botón. `null`: ninguno. */
+  readonly error = input<string | null>(null);
+  readonly forgotHref = input('#');
+  readonly signupHref = input('#');
+  readonly userClass = input('', { alias: 'class' });
+
+  /** Formulario válido enviado. */
+  readonly submitted = output<Login01Value>();
+  /** Botón de una red pulsado. */
+  readonly provider = output<Login01Provider>();
+
+  protected readonly id = `mimi-login-01-${nextId++}`;
+
+  protected readonly model = signal<Login01Value>({ email: '', password: '', remember: true });
+  protected readonly login = form(this.model, (path) => {
+    required(path.email);
+    email(path.email);
+    required(path.password);
+  });
+
+  protected readonly classes = computed(() =>
+    cn(
+      'relative isolate flex min-h-svh w-full items-center justify-center bg-background px-[22px] py-8 text-foreground sm:bg-muted sm:p-10',
+      this.userClass(),
+    ),
+  );
+
+  protected onSubmit(event: Event): void {
+    event.preventDefault();
+    if (this.loading()) return;
+    const state = this.login();
+    state.markAsTouched();
+    if (state.invalid()) {
+      // El foco va al primer campo con error (el orden del formulario).
+      state.errorSummary()[0]?.fieldTree().focusBoundControl();
+      return;
+    }
+    this.submitted.emit({ ...this.model() });
+  }
+}

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

@@ -0,0 +1 @@
+export * from './login-02';

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>