@mimi-ng/cli 0.1.0

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

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

package/dist/templates/components/separator/separator.ts

@@ -0,0 +1,38 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  booleanAttribute,
+  computed,
+  input,
+} from '@angular/core';
+import { cn } from '@/components/ui/utils/cn';
+import { type SeparatorOrientation, separatorVariants } from './separator.variants';
+
+/**
+ * Línea divisoria: `<mimi-separator />` o `<mimi-separator orientation="vertical" />`.
+ *
+ * Por defecto es decorativa (`role="none"`): los lectores de pantalla no la anuncian. Con
+ * `decorative="false"` pasa a `role="separator"` con `aria-orientation`, para separar grupos
+ * con significado.
+ */
+@Component({
+  selector: 'mimi-separator',
+  template: '',
+  host: {
+    '[class]': 'classes()',
+    '[attr.role]': 'decorative() ? "none" : "separator"',
+    '[attr.aria-orientation]': 'decorative() ? null : orientation()',
+    '[attr.data-orientation]': 'orientation()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MimiSeparator {
+  readonly orientation = input<SeparatorOrientation>('horizontal');
+  /** Solo visual (por defecto). En `false`, los lectores de pantalla la anuncian. */
+  readonly decorative = input(true, { transform: booleanAttribute });
+  readonly userClass = input('', { alias: 'class' });
+
+  protected readonly classes = computed(() =>
+    cn(separatorVariants({ orientation: this.orientation() }), this.userClass()),
+  );
+}

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

@@ -0,0 +1,20 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+/**
+ * Clases de mimi-separator (docs/design/Mimi Componentes.dc.html, sección 8). Literales para que
+ * Tailwind las detecte. Línea de 1px con el color --mimi-border. La vertical toma el alto de su
+ * fila flex (align-self: stretch), como en el diseño.
+ */
+export const separatorVariants = cva('shrink-0 bg-border', {
+  variants: {
+    orientation: {
+      horizontal: 'block h-px w-full',
+      vertical: 'w-px self-stretch',
+    },
+  },
+  defaultVariants: { orientation: 'horizontal' },
+});
+
+export type SeparatorOrientation = NonNullable<
+  VariantProps<typeof separatorVariants>['orientation']
+>;

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

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

package/dist/templates/components/skeleton/skeleton.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { cn } from '@/components/ui/utils/cn';
+
+/**
+ * Bloque de carga (docs/design/Mimi Componentes.dc.html, sección 9): fondo --mimi-muted que
+ * late con `animate-mimi-pulse`. El tamaño y la forma se ponen con `class`:
+ * `<mimi-skeleton class="h-3 w-2/3" />`, `<mimi-skeleton class="size-12 rounded-full" />`.
+ *
+ * Es `aria-hidden`: el contenedor que carga lleva `aria-busy="true"` y un texto para lectores
+ * de pantalla. Con movimiento reducido queda quieto.
+ */
+@Component({
+  selector: 'mimi-skeleton',
+  template: '',
+  host: {
+    'aria-hidden': 'true',
+    '[class]': 'classes()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MimiSkeleton {
+  readonly userClass = input('', { alias: 'class' });
+
+  protected readonly classes = computed(() =>
+    cn('block rounded-sm bg-muted animate-mimi-pulse motion-reduce:animate-none', this.userClass()),
+  );
+}

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

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

package/dist/templates/components/switch/switch.ts

@@ -0,0 +1,138 @@
+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;
+
+/**
+ * Interruptor encendido/apagado (docs/design/Mimi Componentes.dc.html, sección 7):
+ * `<mimi-switch [(checked)]="avion">Modo avión</mimi-switch>`.
+ *
+ * Por dentro es un `<button type="button" role="switch">` y no un `<input type="checkbox">`:
+ * el pulgar del diseño no se puede dibujar de forma fiable con pseudoelementos sobre un input
+ * en todos los navegadores. El texto va en un `<label for>` que también lo alterna.
+ *
+ * Implementa `FormCheckboxControl`: funciona con `[formField]`, `formControlName` y
+ * `[(ngModel)]` sin adaptador (spec, sección 8).
+ */
+@Component({
+  selector: 'mimi-switch',
+  // mimi-form-field lo encuentra por este token para mostrar el mensaje de error.
+  providers: [{ provide: MIMI_FIELD_CONTROL, useExisting: MimiSwitch }],
+  template: `
+    <button
+      #control
+      type="button"
+      role="switch"
+      [id]="controlId()"
+      [class]="trackClasses"
+      [disabled]="disabled()"
+      [attr.aria-checked]="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()"
+      (blur)="touch.emit()"
+    >
+      <span [class]="thumbClasses"></span>
+    </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 MimiSwitch implements FormCheckboxControl, MimiFieldControl {
+  /** Encendido o apagado. Con `[(checked)]` o un formulario. */
+  readonly checked = 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-switch-${nextId++}`;
+
+  protected readonly controlId = computed(() => this.id() || this.autoId);
+  protected readonly state = computed(() => (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()),
+  );
+
+  // Pista: 36×20, 2px de padding. Encendida: primary con su sombra.
+  protected readonly trackClasses = cn(
+    'peer group inline-flex h-5 w-9 shrink-0 items-center rounded-full bg-switch-off p-0.5',
+    'mimi-transition active:scale-(--mimi-press-scale-sm)',
+    'data-[state=checked]:bg-primary data-[state=checked]:shadow-primary disabled:shadow-none',
+    buttonFocusStyles,
+    controlDisabledStyles,
+  );
+
+  // Pulgar: 16px; se desplaza 16px al encender.
+  protected readonly thumbClasses = cn(
+    'pointer-events-none block size-4 rounded-full bg-background shadow-thumb mimi-transition',
+    'group-data-[state=checked]:translate-x-4 group-data-[state=checked]:bg-primary-foreground',
+    'group-disabled:shadow-none',
+  );
+
+  /** Alterna el estado (no hace nada si está deshabilitado). */
+  toggle(): void {
+    if (this.disabled()) 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/textarea/index.ts

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

package/dist/templates/components/textarea/textarea.ts

@@ -0,0 +1,46 @@
+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 { textareaVariants } from './textarea.variants';
+
+/**
+ * Campo de varias líneas de Mimi sobre el `<textarea>` nativo: funciona con `[formField]`,
+ * `formControlName`, `[formControl]` y `[(ngModel)]` (spec, sección 8). Con `rows="1"` queda
+ * alineado al píxel con Input y Button.
+ */
+@Directive({
+  selector: 'textarea[mimiTextarea]',
+  // mimi-form-field lo encuentra por este token (utils/field-state.ts).
+  providers: [{ provide: MIMI_FIELD_CONTROL, useExisting: MimiTextarea }],
+  exportAs: 'mimiTextarea',
+  host: {
+    '[class]': 'classes()',
+    '[attr.aria-invalid]': 'showInvalid() ? "true" : null',
+    '[attr.data-invalid]': 'showInvalid() ? "" : null',
+    '[attr.data-disabled]': 'fieldState.disabled() ? "" : null',
+  },
+})
+export class MimiTextarea implements MimiFieldControl {
+  /**
+   * 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(textareaVariants(), this.userClass()));
+}

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

@@ -0,0 +1,27 @@
+import { cva } from 'class-variance-authority';
+import {
+  controlDisabledStyles,
+  controlInvalidStyles,
+  fieldFocusStyles,
+} from '@/components/ui/utils/control-styles';
+
+/**
+ * Clases de mimiTextarea (docs/design/Mimi Componentes.dc.html, sección 2). Usa los mismos
+ * tokens que Input (--mimi-input-*). Con una fila mide lo mismo que Input y Button: alto mínimo
+ * = alto del control, interlineado de 20px y padding vertical (alto − 20px − 2 bordes) / 2.
+ */
+export const textareaVariants = cva([
+  'block 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',
+  'min-h-[var(--mimi-input-height,var(--mimi-control-height,2.5rem))]',
+  'px-[var(--mimi-input-padding-x,0.75rem)]',
+  'py-[calc((var(--mimi-input-height,var(--mimi-control-height,2.5rem))_-_20px_-_2*var(--mimi-input-border-width,1px))/2)]',
+  'font-sans text-[length:var(--mimi-input-font-size,0.875rem)] leading-5 text-foreground',
+  'resize-y mimi-transition disabled:resize-none',
+  '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,
+]);

package/dist/templates/theme/index.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './provider';

package/dist/templates/theme/provider.ts

@@ -0,0 +1,150 @@
+import {
+  DOCUMENT,
+  type EnvironmentProviders,
+  InjectionToken,
+  inject,
+  isDevMode,
+  makeEnvironmentProviders,
+  provideAppInitializer,
+} from '@angular/core';
+import type { MimiComponentTokens, MimiThemePreset } from './types';
+
+/** id del <style> que genera el tema. */
+export const MIMI_THEME_STYLE_ID = 'mimi-theme';
+
+/** Preset registrado con provideMimiTheme(). */
+export const MIMI_THEME = new InjectionToken<MimiThemePreset>('MIMI_THEME');
+
+/**
+ * Selector de cada modo.
+ * - light usa :root:not(.dark): con :root a secas le ganaría al .dark de theme-base.css
+ *   (misma especificidad, va después) y el modo oscuro tomaría los colores claros.
+ * - dark usa .dark: va después de theme-base.css, así que le gana.
+ */
+const SELECTORS = {
+  any: ':root',
+  light: ':root:not(.dark)',
+  dark: '.dark',
+} as const;
+
+type Scope = keyof typeof SELECTORS;
+type TokenValue = string | number | undefined;
+type TokenGroup = Partial<Record<string, TokenValue>>;
+
+const kebab = (key: string): string => key.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+
+const RADII: Record<string, string> = {
+  sm: 'radius-sm',
+  card: 'radius-card',
+  badge: 'badge-radius',
+};
+
+/** Grupos del preset: en qué modo van y cómo se nombra cada variable (sin el prefijo --mimi-). */
+const GROUPS: readonly {
+  key: keyof MimiThemePreset;
+  scope: Scope;
+  name: (key: string) => string;
+}[] = [
+  { key: 'colors', scope: 'light', name: kebab },
+  { key: 'darkColors', scope: 'dark', name: kebab },
+  { key: 'shadows', scope: 'light', name: (k) => `shadow-${kebab(k)}` },
+  { key: 'darkShadows', scope: 'dark', name: (k) => `shadow-${kebab(k)}` },
+  { key: 'radii', scope: 'any', name: (k) => RADII[k] ?? `radius-${kebab(k)}` },
+  { key: 'fonts', scope: 'any', name: (k) => `font-${kebab(k)}` },
+  { key: 'motion', scope: 'any', name: kebab },
+  { key: 'controls', scope: 'any', name: (k) => `control-${kebab(k)}` },
+];
+
+/** Prefijo de las variables de cada componente: button.fontWeight → --mimi-btn-font-weight. */
+const COMPONENT_PREFIX: Record<keyof MimiComponentTokens, string> = {
+  button: 'btn',
+  input: 'input',
+  card: 'card',
+};
+
+/** Caracteres que romperían el CSS o cerrarían la etiqueta <style>. */
+const UNSAFE_VALUE = /[;{}<]/;
+
+/** Convierte el preset en CSS. Devuelve '' si no hay nada que aplicar. Función pura. */
+export function mimiThemeToCss(preset: MimiThemePreset): string {
+  const declarations: Record<Scope, string[]> = { any: [], light: [], dark: [] };
+
+  const add = (scope: Scope, name: string, value: TokenValue): void => {
+    if (value === undefined) return;
+    const text = String(value).trim();
+    if (text === '') return;
+    if (UNSAFE_VALUE.test(text)) {
+      if (isDevMode()) {
+        console.warn(`[mimi] Se ignora --mimi-${name}: el valor "${text}" no es seguro.`);
+      }
+      return;
+    }
+    declarations[scope].push(`  --mimi-${name}: ${text};`);
+  };
+
+  add('any', 'radius', preset.radius);
+
+  for (const group of GROUPS) {
+    const tokens = preset[group.key] as TokenGroup | undefined;
+    for (const [key, value] of Object.entries(tokens ?? {})) {
+      add(group.scope, group.name(key), value);
+    }
+  }
+
+  const components = preset.components ?? {};
+  for (const component of Object.keys(components) as (keyof MimiComponentTokens)[]) {
+    const tokens = components[component] as TokenGroup | undefined;
+    for (const [key, value] of Object.entries(tokens ?? {})) {
+      add('any', `${COMPONENT_PREFIX[component]}-${kebab(key)}`, value);
+    }
+  }
+
+  const blocks = (Object.keys(SELECTORS) as Scope[])
+    .filter((scope) => declarations[scope].length > 0)
+    .map((scope) => `${SELECTORS[scope]} {\n${declarations[scope].join('\n')}\n}`);
+
+  // El :root del preset le ganaría al prefers-reduced-motion de theme-base.css.
+  const hasMotion = declarations.any.some((d) =>
+    /--mimi-(press-scale|press-scale-sm|lift|transition):/.test(d),
+  );
+  if (hasMotion) {
+    blocks.push(
+      '@media (prefers-reduced-motion: reduce) {\n  :root {\n    --mimi-press-scale: 1;\n    --mimi-press-scale-sm: 1;\n    --mimi-lift: 0;\n  }\n}',
+    );
+  }
+
+  return blocks.length > 0 ? `${blocks.join('\n')}\n` : '';
+}
+
+/**
+ * Aplica el preset en un <style id="mimi-theme"> al final del <head>, después del CSS global,
+ * para ganarle a theme-base.css. Reutiliza el <style> si ya existe y lo vuelve a mover al
+ * final. Un preset vacío lo elimina. Nunca usa estilos en línea: le ganarían a .dark.
+ */
+export function applyMimiTheme(
+  document: Document,
+  preset: MimiThemePreset | null | undefined,
+): void {
+  const css = mimiThemeToCss(preset ?? {});
+  let style = document.getElementById(MIMI_THEME_STYLE_ID);
+
+  if (css === '') {
+    style?.remove();
+    return;
+  }
+
+  if (!style) {
+    style = document.createElement('style');
+    style.id = MIMI_THEME_STYLE_ID;
+  }
+  style.textContent = css;
+  document.head.appendChild(style);
+}
+
+/** Registra un preset del tema. Opcional: sin él, se usa theme-base.css tal cual. */
+export function provideMimiTheme(preset: MimiThemePreset): EnvironmentProviders {
+  return makeEnvironmentProviders([
+    { provide: MIMI_THEME, useValue: preset },
+    provideAppInitializer(() => applyMimiTheme(inject(DOCUMENT), inject(MIMI_THEME))),
+  ]);
+}