@mimi-ng/cli 0.1.0

package/dist/templates/components/card/card.ts

@@ -0,0 +1,133 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  numberAttribute,
+} from '@angular/core';
+import { cn } from '@/components/ui/utils/cn';
+
+/*
+ * Card (docs/design/Mimi Componentes.dc.html, sección 4, "Plan Equipo"). Clases literales para
+ * que Tailwind las detecte. Tokens de la spec 6.3 (MimiCardTokens), con la cascada de la 6.2:
+ * --mimi-card-* → token global → valor del diseño.
+ */
+
+/** Contenedor de la tarjeta. */
+@Component({
+  selector: 'mimi-card',
+  template: '<ng-content />',
+  host: { '[class]': 'classes()' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MimiCard {
+  readonly userClass = input('', { alias: 'class' });
+  protected readonly classes = computed(() =>
+    cn(
+      'flex flex-col bg-card text-card-foreground',
+      'rounded-[var(--mimi-card-radius,var(--mimi-radius-card))]',
+      'border-[length:var(--mimi-card-border-width,1px)] border-border',
+      'shadow-[shadow:var(--mimi-card-shadow,var(--mimi-shadow-card))]',
+      this.userClass(),
+    ),
+  );
+}
+
+/** Encabezado: título y descripción. */
+@Component({
+  selector: 'mimi-card-header',
+  template: '<ng-content />',
+  host: { '[class]': 'classes()' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MimiCardHeader {
+  readonly userClass = input('', { alias: 'class' });
+  protected readonly classes = computed(() =>
+    cn(
+      'flex flex-col gap-1.5 p-[var(--mimi-card-padding-header,1.5rem_1.5rem_1rem)]',
+      this.userClass(),
+    ),
+  );
+}
+
+/**
+ * Título. Es un encabezado para los lectores de pantalla (`role="heading"` + `aria-level`).
+ * No pongas un `<h3>` dentro: quedaría duplicado. Si prefieres tu propio `<h3>`, úsalo en lugar
+ * de este componente, con las mismas clases.
+ */
+@Component({
+  selector: 'mimi-card-title',
+  template: '<ng-content />',
+  host: {
+    role: 'heading',
+    '[attr.aria-level]': 'level()',
+    '[class]': 'classes()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MimiCardTitle {
+  /** Nivel del encabezado (aria-level). */
+  readonly level = input(3, { transform: numberAttribute });
+  readonly userClass = input('', { alias: 'class' });
+  protected readonly classes = computed(() =>
+    cn('block text-lg leading-tight font-semibold tracking-[-0.01em]', this.userClass()),
+  );
+}
+
+/** Descripción bajo el título. */
+@Component({
+  selector: 'mimi-card-description',
+  template: '<ng-content />',
+  host: { '[class]': 'classes()' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MimiCardDescription {
+  readonly userClass = input('', { alias: 'class' });
+  protected readonly classes = computed(() =>
+    cn('block text-sm text-muted-foreground', this.userClass()),
+  );
+}
+
+/**
+ * Contenido. Sin padding arriba porque va bajo el encabezado; si es el primer hijo de la
+ * tarjeta (sin encabezado), suma 24px arriba para no quedar pegado al borde.
+ */
+@Component({
+  selector: 'mimi-card-content',
+  template: '<ng-content />',
+  host: { '[class]': 'classes()' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MimiCardContent {
+  readonly userClass = input('', { alias: 'class' });
+  protected readonly classes = computed(() =>
+    cn('block p-[var(--mimi-card-padding-content,0_1.5rem_1.25rem)] first:pt-6', this.userClass()),
+  );
+}
+
+/** Pie con acciones, alineadas a la derecha como en el diseño. */
+@Component({
+  selector: 'mimi-card-footer',
+  template: '<ng-content />',
+  host: { '[class]': 'classes()' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MimiCardFooter {
+  readonly userClass = input('', { alias: 'class' });
+  protected readonly classes = computed(() =>
+    cn(
+      'flex items-center justify-end gap-2 p-[var(--mimi-card-padding-footer,0_1.5rem_1.5rem)] first:pt-6',
+      this.userClass(),
+    ),
+  );
+}
+
+/** Todas las piezas de Card, para importarlas juntas. */
+export const MimiCardImports = [
+  MimiCard,
+  MimiCardHeader,
+  MimiCardTitle,
+  MimiCardDescription,
+  MimiCardContent,
+  MimiCardFooter,
+] as const;

package/dist/templates/components/card/index.ts

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

package/dist/templates/components/checkbox/checkbox.ts

@@ -0,0 +1,178 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  booleanAttribute,
+  computed,
+  input,
+  model,
+  output,
+  viewChild,
+} from '@angular/core';
+import type { FormCheckboxControl } from '@angular/forms/signals';
+import { cn } from '@/components/ui/utils/cn';
+import { buttonFocusStyles, controlDisabledStyles } from '@/components/ui/utils/control-styles';
+import {
+  MIMI_FIELD_CONTROL,
+  type MimiFieldControl,
+  injectFieldState,
+} from '@/components/ui/utils/field-state';
+
+let nextId = 0;
+
+/**
+ * Casilla de verificación (docs/design/Mimi Componentes.dc.html, sección 7):
+ * `<mimi-checkbox [(checked)]="recordarme">Recordarme</mimi-checkbox>`.
+ *
+ * Por dentro es un `<button type="button" role="checkbox">` y no un `<input type="checkbox">`:
+ * el check del diseño no se puede dibujar de forma fiable con pseudoelementos sobre un input en
+ * todos los navegadores. Se alterna con Espacio (Enter no hace nada, patrón WAI) y con clic en
+ * el texto, que va en un `<label for>`.
+ *
+ * Implementa `FormCheckboxControl`: funciona con `[formField]`, `formControlName` y
+ * `[(ngModel)]` sin adaptador (spec, sección 8).
+ */
+@Component({
+  selector: 'mimi-checkbox',
+  // mimi-form-field lo encuentra por este token para mostrar el mensaje de error.
+  providers: [{ provide: MIMI_FIELD_CONTROL, useExisting: MimiCheckbox }],
+  template: `
+    <button
+      #control
+      type="button"
+      role="checkbox"
+      [id]="controlId()"
+      [class]="boxClasses"
+      [disabled]="disabled()"
+      [attr.aria-checked]="indeterminate() ? 'mixed' : checked()"
+      [attr.aria-invalid]="showInvalid() || null"
+      [attr.aria-required]="required() || null"
+      [attr.aria-label]="ariaLabel() || null"
+      [attr.aria-labelledby]="ariaLabelledby() || null"
+      [attr.data-state]="state()"
+      (click)="toggle()"
+      (keydown.enter)="$event.preventDefault()"
+      (blur)="touch.emit()"
+    >
+      @switch (state()) {
+        @case ('checked') {
+          <!-- Lucide check -->
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="3"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="size-3"
+            aria-hidden="true"
+          >
+            <path d="M20 6 9 17l-5-5" />
+          </svg>
+        }
+        @case ('indeterminate') {
+          <!-- Lucide minus -->
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="3"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="size-3"
+            aria-hidden="true"
+          >
+            <path d="M5 12h14" />
+          </svg>
+        }
+      }
+    </button>
+    <label
+      [for]="controlId()"
+      class="cursor-pointer empty:hidden peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
+      ><ng-content
+    /></label>
+  `,
+  host: {
+    '[class]': 'classes()',
+    '[attr.data-state]': 'state()',
+    '[attr.data-disabled]': 'disabled() || null',
+    // id y aria-* se pasan al botón: fuera del anfitrión, para no duplicarlos.
+    '[attr.id]': 'null',
+    '[attr.aria-label]': 'null',
+    '[attr.aria-labelledby]': 'null',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MimiCheckbox implements FormCheckboxControl, MimiFieldControl {
+  /** Marcada o no. Con `[(checked)]` o un formulario. */
+  readonly checked = model(false);
+  /** Estado mixto ("algunos"): gana a `checked`. Al hacer clic se marca y deja de ser mixto. */
+  readonly indeterminate = model(false);
+  readonly disabled = input(false, { transform: booleanAttribute });
+  /** Los pasa el formulario. Se muestra el error si es inválido y se tocó o modificó. */
+  readonly invalid = input(false, { transform: booleanAttribute });
+  readonly touched = input(false, { transform: booleanAttribute });
+  readonly dirty = input(false, { transform: booleanAttribute });
+  readonly required = input(false, { transform: booleanAttribute });
+  /** id del botón, para una etiqueta externa (`<label for>`). */
+  readonly id = input<string>();
+  readonly ariaLabel = input<string>(undefined, { alias: 'aria-label' });
+  readonly ariaLabelledby = input<string>(undefined, { alias: 'aria-labelledby' });
+  readonly userClass = input('', { alias: 'class' });
+
+  /** Se emite al perder el foco: marca el control como tocado. */
+  readonly touch = output<void>();
+
+  private readonly control = viewChild.required<ElementRef<HTMLButtonElement>>('control');
+
+  /** Estado del formulario, con los errores, para el mensaje de mimi-form-field. */
+  readonly fieldState = injectFieldState();
+
+  /** El botón interno: mimi-form-field le agrega el aria-describedby del mensaje. */
+  get controlElement(): HTMLElement {
+    return this.control().nativeElement;
+  }
+  private readonly autoId = `mimi-checkbox-${nextId++}`;
+
+  protected readonly controlId = computed(() => this.id() || this.autoId);
+  protected readonly state = computed(() =>
+    this.indeterminate() ? 'indeterminate' : this.checked() ? 'checked' : 'unchecked',
+  );
+  /** Error visible (inválido y tocado o modificado). Lo lee también mimi-form-field. */
+  readonly showInvalid = computed(() => this.invalid() && (this.touched() || this.dirty()));
+
+  protected readonly classes = computed(() =>
+    cn('inline-flex items-center gap-2.5 text-sm', this.userClass()),
+  );
+
+  // Caja de 16px. Marcada o mixta: primary con su sombra. Foco: borde ring (sin marcar) y contorno.
+  protected readonly boxClasses = cn(
+    'peer inline-flex size-4 shrink-0 items-center justify-center rounded-sm border border-input bg-input-background text-primary-foreground',
+    'mimi-transition active:scale-(--mimi-press-scale-sm)',
+    'data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:shadow-primary',
+    'data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:shadow-primary',
+    'data-[state=unchecked]:focus-visible:border-ring data-[state=unchecked]:aria-invalid:border-destructive',
+    'disabled:shadow-none',
+    buttonFocusStyles,
+    controlDisabledStyles,
+  );
+
+  /** Alterna el estado (no hace nada si está deshabilitada). Desde mixta, pasa a marcada. */
+  toggle(): void {
+    if (this.disabled()) return;
+    if (this.indeterminate()) {
+      this.indeterminate.set(false);
+      this.checked.set(true);
+      return;
+    }
+    this.checked.update((value) => !value);
+  }
+
+  /** Enfoca el botón. Lo usa Signal Forms para llevar el foco al campo con error. */
+  focus(options?: FocusOptions): void {
+    this.control().nativeElement.focus(options);
+  }
+}

package/dist/templates/components/checkbox/index.ts

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

package/dist/templates/components/form-field/error-messages.ts

@@ -0,0 +1,68 @@
+import { InjectionToken, type Provider } from '@angular/core';
+import type { MimiFieldError } from '@/components/ui/utils/field-state';
+
+/**
+ * Texto de un error, fijo o calculado con los datos del error. Los datos usan los nombres de
+ * Reactive Forms en los tres sistemas: `requiredLength` (minlength / maxlength), `min`, `max`,
+ * `requiredPattern`…
+ */
+export type MimiErrorMessage = string | ((params: Record<string, unknown>) => string);
+
+/**
+ * Mensajes por clave de error, en minúsculas (`required`, `email`, `minlength`…). `default`
+ * se usa para cualquier error sin mensaje propio.
+ */
+export type MimiErrorMessages = Record<string, MimiErrorMessage>;
+
+/** Mensajes predeterminados (inglés). */
+export const MIMI_ERROR_MESSAGES_EN: MimiErrorMessages = {
+  required: 'This field is required.',
+  email: 'Enter a valid email address.',
+  minlength: (e) => `Use at least ${e['requiredLength']} characters.`,
+  maxlength: (e) => `Use at most ${e['requiredLength']} characters.`,
+  min: (e) => `The minimum value is ${e['min']}.`,
+  max: (e) => `The maximum value is ${e['max']}.`,
+  pattern: 'The format is not valid.',
+  default: 'Check this field.',
+};
+
+/** Mensajes en español: `provideMimiErrorMessages(MIMI_ERROR_MESSAGES_ES)`. */
+export const MIMI_ERROR_MESSAGES_ES: MimiErrorMessages = {
+  required: 'Este campo es obligatorio.',
+  email: 'Ingresa un correo válido.',
+  minlength: (e) => `Usa al menos ${e['requiredLength']} caracteres.`,
+  maxlength: (e) => `Usa como máximo ${e['requiredLength']} caracteres.`,
+  min: (e) => `El valor mínimo es ${e['min']}.`,
+  max: (e) => `El valor máximo es ${e['max']}.`,
+  pattern: 'El formato no es válido.',
+  default: 'Revisa este campo.',
+};
+
+/** Mensajes activos. Sin `provideMimiErrorMessages`, los predeterminados en inglés. */
+export const MIMI_ERROR_MESSAGES = new InjectionToken<MimiErrorMessages>('MIMI_ERROR_MESSAGES', {
+  providedIn: 'root',
+  factory: () => MIMI_ERROR_MESSAGES_EN,
+});
+
+/**
+ * Cambia los mensajes de error. Lo que no definas sigue en inglés:
+ *
+ * ```ts
+ * provideMimiErrorMessages(MIMI_ERROR_MESSAGES_ES)
+ * provideMimiErrorMessages({ ...MIMI_ERROR_MESSAGES_ES, required: 'Obligatorio.' })
+ * ```
+ *
+ * Va en `app.config.ts` o en los `providers` de un componente o ruta.
+ */
+export function provideMimiErrorMessages(messages: MimiErrorMessages): Provider {
+  const normalized: MimiErrorMessages = {};
+  for (const [key, value] of Object.entries(messages)) normalized[key.toLowerCase()] = value;
+  return { provide: MIMI_ERROR_MESSAGES, useValue: { ...MIMI_ERROR_MESSAGES_EN, ...normalized } };
+}
+
+/** Texto de un error: el `message` que trae (Signal Forms), el del mapa o `default`. */
+export function mimiErrorText(error: MimiFieldError, messages: MimiErrorMessages): string {
+  if (error.message) return error.message;
+  const entry = messages[error.kind] ?? messages['default'] ?? MIMI_ERROR_MESSAGES_EN['default'];
+  return typeof entry === 'function' ? entry(error.params) : entry;
+}

package/dist/templates/components/form-field/form-error.ts

@@ -0,0 +1,82 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  InjectionToken,
+  type Signal,
+  computed,
+  inject,
+  input,
+} from '@angular/core';
+import { cn } from '@/components/ui/utils/cn';
+
+/** Lo que `mimi-form-field` le pasa a su mensaje de error. */
+export interface MimiFormFieldContext {
+  /** id del mensaje: el control lo tiene en su `aria-describedby`. */
+  readonly errorId: string;
+  /** Hay que mostrar el error (inválido y tocado o modificado, o `showError` a mano). */
+  readonly showError: Signal<boolean>;
+  /** Texto del primer error, según los mensajes activos. */
+  readonly message: Signal<string>;
+}
+
+export const MIMI_FORM_FIELD_CONTEXT = new InjectionToken<MimiFormFieldContext>(
+  'MIMI_FORM_FIELD_CONTEXT',
+);
+
+/**
+ * Mensaje de error de `mimi-form-field` (docs/design/Mimi Componentes.dc.html, sección 3):
+ * 13px, color destructive y el ícono circle-alert de 14px.
+ *
+ * `mimi-form-field` ya muestra uno solo. Escríbelo solo para cambiar el texto
+ * (`<mimi-form-error>Ese usuario ya existe.</mimi-form-error>`) o la posición.
+ *
+ * Siempre está en el DOM con `aria-live="polite"`: sin error queda vacío y fuera del flujo
+ * (`sr-only`); al aparecer el error solo cambia su contenido, así los lectores lo anuncian.
+ */
+@Component({
+  selector: 'mimi-form-error',
+  template: `
+    @if (context.showError()) {
+      <!-- Lucide circle-alert -->
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <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>
+      <!-- Tu texto, si escribiste uno; si no, el del primer error. -->
+      <span
+        ><ng-content>{{ context.message() }}</ng-content></span
+      >
+    }
+  `,
+  host: {
+    '[id]': 'context.errorId',
+    'aria-live': 'polite',
+    '[class]': 'classes()',
+    '[attr.data-state]': 'context.showError() ? "visible" : "hidden"',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MimiFormError {
+  readonly userClass = input('', { alias: 'class' });
+
+  protected readonly context = inject(MIMI_FORM_FIELD_CONTEXT);
+
+  protected readonly classes = computed(() =>
+    cn(
+      'flex items-center gap-1.5 text-[13px] text-destructive [&_svg]:size-3.5 [&_svg]:shrink-0',
+      this.userClass(),
+      // Sin error: vacío y fuera del flujo, pero en el DOM para que aria-live funcione.
+      !this.context.showError() && 'sr-only',
+    ),
+  );
+}

package/dist/templates/components/form-field/form-field.ts

@@ -0,0 +1,114 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  afterRenderEffect,
+  computed,
+  contentChild,
+  inject,
+  input,
+  signal,
+} from '@angular/core';
+import { cn } from '@/components/ui/utils/cn';
+import { MIMI_FIELD_CONTROL } from '@/components/ui/utils/field-state';
+import { MIMI_ERROR_MESSAGES, mimiErrorText } from './error-messages';
+import { MIMI_FORM_FIELD_CONTEXT, type MimiFormFieldContext, MimiFormError } from './form-error';
+
+let nextId = 0;
+
+/**
+ * Agrupa etiqueta, control y mensaje de error (docs/design/Mimi Componentes.dc.html,
+ * sección 3), sin escribir un solo `@if`:
+ *
+ * ```html
+ * <mimi-form-field label="Correo">
+ *   <input mimiInput type="email" formControlName="email" />
+ * </mimi-form-field>
+ * ```
+ *
+ * - Encuentra el control (Input, Textarea, Switch o Checkbox) por `MIMI_FIELD_CONTROL`.
+ * - `label` dibuja un `<label for>`; si proyectas tu propio `<label>` sin `for`, se lo asigna.
+ *   Si el control no tiene `id`, le pone uno.
+ * - Con error, la etiqueta se pone roja y aparece el mensaje del primer error. El control
+ *   lleva el mensaje en su `aria-describedby`.
+ * - Para cambiar el texto o la posición del mensaje, escribe `<mimi-form-error>`.
+ */
+@Component({
+  selector: 'mimi-form-field',
+  imports: [MimiFormError],
+  template: `
+    @if (label()) {
+      <label [attr.for]="controlId()" [class]="labelClasses">{{ label() }}</label>
+    }
+    <ng-content />
+    @if (!ownError()) {
+      <mimi-form-error />
+    }
+  `,
+  providers: [{ provide: MIMI_FORM_FIELD_CONTEXT, useExisting: MimiFormField }],
+  host: {
+    '[class]': 'classes()',
+    '[attr.data-invalid]': 'showError() ? "" : null',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MimiFormField implements MimiFormFieldContext {
+  /** Texto de la etiqueta. También puedes proyectar tu propio `<label>`. */
+  readonly label = input<string>();
+  readonly userClass = input('', { alias: 'class' });
+
+  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
+  private readonly messages = inject(MIMI_ERROR_MESSAGES);
+  private readonly control = contentChild(MIMI_FIELD_CONTROL, { descendants: true });
+  protected readonly ownError = contentChild(MimiFormError, { descendants: true });
+
+  private readonly baseId = `mimi-form-field-${nextId++}`;
+  readonly errorId = `${this.baseId}-error`;
+  /** id del control (el suyo o el que le asigna el form-field). */
+  protected readonly controlId = signal<string | null>(null);
+
+  readonly showError = computed(() => this.control()?.showInvalid() ?? false);
+  protected readonly disabled = computed(() => this.control()?.fieldState.disabled() ?? false);
+  readonly message = computed(() => {
+    const error = this.control()?.fieldState.errors()[0];
+    return error
+      ? mimiErrorText(error, this.messages)
+      : mimiErrorText({ kind: 'default', params: {} }, this.messages);
+  });
+
+  protected readonly classes = computed(() =>
+    cn(
+      // La etiqueta (la de label="…" o la tuya) se pone roja con error.
+      'flex flex-col gap-1.5 [&[data-invalid]>label]:text-destructive',
+      this.userClass(),
+    ),
+  );
+
+  protected readonly labelClasses = 'text-sm font-medium';
+
+  constructor() {
+    // Conecta el control: id, etiquetas propias sin `for` y aria-describedby del mensaje.
+    afterRenderEffect(() => {
+      const control = this.control();
+      if (!control) return;
+      const element = control.controlElement;
+      if (!element.id) element.id = `${this.baseId}-control`;
+      this.controlId.set(element.id);
+
+      for (const label of Array.from(this.host.querySelectorAll(':scope > label'))) {
+        if (!label.hasAttribute('for')) label.setAttribute('for', element.id);
+      }
+
+      const describedBy = (element.getAttribute('aria-describedby') ?? '')
+        .split(/\s+/)
+        .filter(Boolean);
+      if (!describedBy.includes(this.errorId)) {
+        element.setAttribute('aria-describedby', [...describedBy, this.errorId].join(' '));
+      }
+    });
+  }
+}
+
+/** Todas las piezas de FormField, para importarlas juntas. */
+export const MimiFormFieldImports = [MimiFormField, MimiFormError] as const;

package/dist/templates/components/form-field/index.ts

@@ -0,0 +1,3 @@
+export * from './error-messages';
+export * from './form-error';
+export * from './form-field';

package/dist/templates/components/input/index.ts

@@ -0,0 +1,2 @@
+export * from './input';
+export * from './input.variants';

package/dist/templates/components/input/input.ts

@@ -0,0 +1,52 @@
+import { Directive, ElementRef, computed, inject, input } from '@angular/core';
+import { cn } from '@/components/ui/utils/cn';
+import {
+  MIMI_FIELD_CONTROL,
+  type MimiFieldControl,
+  injectFieldState,
+} from '@/components/ui/utils/field-state';
+import { type InputSize, inputVariants } from './input.variants';
+
+/**
+ * Campo de texto de Mimi sobre el `<input>` nativo: funciona con `[formField]`,
+ * `formControlName`, `[formControl]` y `[(ngModel)]` sin adaptadores (spec, sección 8).
+ *
+ * Se pone en rojo con `aria-invalid="true"` cuando el campo es inválido y ya se tocó o
+ * modificó. `showError` permite decidirlo a mano.
+ */
+@Directive({
+  selector: 'input[mimiInput]',
+  // mimi-form-field lo encuentra por este token (utils/field-state.ts).
+  providers: [{ provide: MIMI_FIELD_CONTROL, useExisting: MimiInput }],
+  exportAs: 'mimiInput',
+  host: {
+    '[class]': 'classes()',
+    '[attr.aria-invalid]': 'showInvalid() ? "true" : null',
+    '[attr.data-size]': 'size()',
+    '[attr.data-invalid]': 'showInvalid() ? "" : null',
+    '[attr.data-disabled]': 'fieldState.disabled() ? "" : null',
+  },
+})
+export class MimiInput implements MimiFieldControl {
+  readonly size = input<InputSize>('default');
+  /**
+   * Muestra el error a mano. `undefined` (por defecto): decide el formulario. `true`: lo muestra.
+   * `false`: lo oculta aunque el formulario sea inválido.
+   *
+   * No se llama `invalid`: Signal Forms escribe su estado en cualquier entrada con ese nombre
+   * (también touched, dirty, disabled, errors, required, name…) de las directivas del elemento.
+   */
+  readonly showError = input<boolean | undefined>(undefined);
+  readonly userClass = input('', { alias: 'class' });
+
+  /** Estado del campo según su formulario. Lo lee también MimiFormField. */
+  readonly fieldState = injectFieldState();
+  readonly controlElement = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
+
+  /** Error visible: el formulario o `showError` a mano. */
+  readonly showInvalid = computed(() => this.showError() ?? this.fieldState.showError());
+
+  protected readonly classes = computed(() =>
+    cn(inputVariants({ size: this.size() }), this.userClass()),
+  );
+}

package/dist/templates/components/input/input.variants.ts

@@ -0,0 +1,38 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import {
+  controlDisabledStyles,
+  controlInvalidStyles,
+  fieldFocusStyles,
+} from '@/components/ui/utils/control-styles';
+
+/**
+ * Clases de mimiInput (docs/design/Mimi Componentes.dc.html, sección 2). Literales para que
+ * Tailwind las detecte. Cascada de la spec 6.2: --mimi-input-* → --mimi-control-* /
+ * --mimi-radius → valor del diseño.
+ */
+export const inputVariants = cva(
+  [
+    'w-full min-w-0 rounded-[var(--mimi-input-radius,var(--mimi-radius,0.75rem))]',
+    'border-[length:var(--mimi-input-border-width,1px)] border-input bg-input-background',
+    'px-[var(--mimi-input-padding-x,0.75rem)] font-sans text-foreground mimi-transition',
+    'placeholder:text-[color:var(--mimi-input-placeholder-color,var(--mimi-muted-foreground))]',
+    fieldFocusStyles,
+    'focus-visible:ring-[length:var(--mimi-input-focus-ring-width,3px)]',
+    controlDisabledStyles,
+    'disabled:opacity-[var(--mimi-input-disabled-opacity,0.5)]',
+    controlInvalidStyles,
+  ],
+  {
+    variants: {
+      size: {
+        sm: 'h-[var(--mimi-input-height-sm,var(--mimi-control-height-sm,2rem))] text-[13px]',
+        default:
+          'h-[var(--mimi-input-height,var(--mimi-control-height,2.5rem))] text-[length:var(--mimi-input-font-size,0.875rem)]',
+        lg: 'h-[var(--mimi-input-height-lg,var(--mimi-control-height-lg,3rem))] text-[15px]',
+      },
+    },
+    defaultVariants: { size: 'default' },
+  },
+);
+
+export type InputSize = NonNullable<VariantProps<typeof inputVariants>['size']>;