@mimi-ng/cli 0.1.0

package/dist/registry.json

@@ -0,0 +1,194 @@
+{
+  "version": "0.1.0",
+  "suggestedDependencies": {
+    "@lucide/angular": "^1.47.0"
+  },
+  "items": {
+    "utils/cn": {
+      "type": "util",
+      "files": [
+        "utils/cn.ts"
+      ],
+      "dependencies": {
+        "clsx": "^2.1.1",
+        "tailwind-merge": "^3.7.0"
+      }
+    },
+    "utils/control-styles": {
+      "type": "util",
+      "files": [
+        "utils/control-styles.ts"
+      ]
+    },
+    "utils/field-state": {
+      "type": "util",
+      "files": [
+        "utils/field-state.ts"
+      ],
+      "peerDependencies": {
+        "@angular/forms": "^22.0.0"
+      }
+    },
+    "theme": {
+      "type": "theme",
+      "files": [
+        "theme/theme-base.css",
+        "theme/types.ts",
+        "theme/provider.ts",
+        "theme/index.ts"
+      ]
+    },
+    "avatar": {
+      "type": "component",
+      "files": [
+        "components/avatar/avatar.ts",
+        "components/avatar/avatar.variants.ts",
+        "components/avatar/index.ts"
+      ],
+      "dependencies": {
+        "class-variance-authority": "^0.7.1"
+      },
+      "registryDependencies": [
+        "utils/cn"
+      ]
+    },
+    "badge": {
+      "type": "component",
+      "files": [
+        "components/badge/badge.ts",
+        "components/badge/badge.variants.ts",
+        "components/badge/index.ts"
+      ],
+      "dependencies": {
+        "class-variance-authority": "^0.7.1"
+      },
+      "registryDependencies": [
+        "utils/cn"
+      ]
+    },
+    "button": {
+      "type": "component",
+      "files": [
+        "components/button/button.ts",
+        "components/button/button.variants.ts",
+        "components/button/index.ts"
+      ],
+      "dependencies": {
+        "class-variance-authority": "^0.7.1"
+      },
+      "registryDependencies": [
+        "utils/cn",
+        "utils/control-styles"
+      ]
+    },
+    "card": {
+      "type": "component",
+      "files": [
+        "components/card/card.ts",
+        "components/card/index.ts"
+      ],
+      "registryDependencies": [
+        "utils/cn"
+      ]
+    },
+    "checkbox": {
+      "type": "component",
+      "files": [
+        "components/checkbox/checkbox.ts",
+        "components/checkbox/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/forms": "^22.0.0"
+      },
+      "registryDependencies": [
+        "utils/cn",
+        "utils/control-styles",
+        "utils/field-state"
+      ]
+    },
+    "form-field": {
+      "type": "component",
+      "files": [
+        "components/form-field/form-field.ts",
+        "components/form-field/form-error.ts",
+        "components/form-field/error-messages.ts",
+        "components/form-field/index.ts"
+      ],
+      "registryDependencies": [
+        "utils/cn",
+        "utils/field-state"
+      ]
+    },
+    "input": {
+      "type": "component",
+      "files": [
+        "components/input/input.ts",
+        "components/input/input.variants.ts",
+        "components/input/index.ts"
+      ],
+      "dependencies": {
+        "class-variance-authority": "^0.7.1"
+      },
+      "registryDependencies": [
+        "utils/cn",
+        "utils/control-styles",
+        "utils/field-state"
+      ]
+    },
+    "separator": {
+      "type": "component",
+      "files": [
+        "components/separator/separator.ts",
+        "components/separator/separator.variants.ts",
+        "components/separator/index.ts"
+      ],
+      "dependencies": {
+        "class-variance-authority": "^0.7.1"
+      },
+      "registryDependencies": [
+        "utils/cn"
+      ]
+    },
+    "skeleton": {
+      "type": "component",
+      "files": [
+        "components/skeleton/skeleton.ts",
+        "components/skeleton/index.ts"
+      ],
+      "registryDependencies": [
+        "utils/cn"
+      ]
+    },
+    "switch": {
+      "type": "component",
+      "files": [
+        "components/switch/switch.ts",
+        "components/switch/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/forms": "^22.0.0"
+      },
+      "registryDependencies": [
+        "utils/cn",
+        "utils/control-styles",
+        "utils/field-state"
+      ]
+    },
+    "textarea": {
+      "type": "component",
+      "files": [
+        "components/textarea/textarea.ts",
+        "components/textarea/textarea.variants.ts",
+        "components/textarea/index.ts"
+      ],
+      "dependencies": {
+        "class-variance-authority": "^0.7.1"
+      },
+      "registryDependencies": [
+        "utils/cn",
+        "utils/control-styles",
+        "utils/field-state"
+      ]
+    }
+  }
+}

package/dist/templates/components/avatar/avatar.ts

@@ -0,0 +1,129 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Directive,
+  ElementRef,
+  afterRenderEffect,
+  computed,
+  effect,
+  inject,
+  input,
+  signal,
+  untracked,
+} from '@angular/core';
+import { cn } from '@/components/ui/utils/cn';
+import { type AvatarSize, type AvatarStatus, avatarVariants } from './avatar.variants';
+
+/**
+ * Contenedor del avatar. Guarda el estado de la imagen para que la imagen y el fallback sepan
+ * cuál se ve:
+ *
+ * ```html
+ * <mimi-avatar>
+ *   <img mimiAvatarImage src="/ana.png" alt="Ana Torres" />
+ *   <mimi-avatar-fallback label="Ana Torres">AT</mimi-avatar-fallback>
+ * </mimi-avatar>
+ * ```
+ */
+@Component({
+  selector: 'mimi-avatar',
+  template: '<ng-content />',
+  host: {
+    '[class]': 'classes()',
+    '[attr.data-size]': 'size()',
+    '[attr.data-state]': 'status()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MimiAvatar {
+  readonly size = input<AvatarSize>('default');
+  readonly userClass = input('', { alias: 'class' });
+
+  /** Estado de la imagen. Lo escribe `img[mimiAvatarImage]`; sin imagen queda en `idle`. */
+  readonly status = signal<AvatarStatus>('idle');
+
+  protected readonly classes = computed(() =>
+    cn(avatarVariants({ size: this.size() }), this.userClass()),
+  );
+}
+
+/**
+ * Foto del avatar sobre el `<img>` nativo, así `alt`, `srcset`, `loading`… funcionan tal cual.
+ * Queda invisible hasta que carga (sin salir del flujo, para que `loading="lazy"` funcione);
+ * si falla, sigue invisible y se ve el fallback. `ngSrc` (NgOptimizedImage) no está soportado.
+ */
+@Directive({
+  selector: 'img[mimiAvatarImage]',
+  host: {
+    // Al declarar `src` como entrada, Angular ya no lo escribe en el elemento: se hace aquí.
+    '[attr.src]': 'src() || null',
+    '[class]': 'classes()',
+    '(load)': 'avatar.status.set("loaded")',
+    '(error)': 'avatar.status.set("error")',
+  },
+})
+export class MimiAvatarImage {
+  readonly src = input<string | null | undefined>();
+  readonly userClass = input('', { alias: 'class' });
+
+  protected readonly avatar = inject(MimiAvatar);
+  private readonly img = inject<ElementRef<HTMLImageElement>>(ElementRef).nativeElement;
+
+  protected readonly classes = computed(() =>
+    cn(
+      'absolute inset-0 aspect-square size-full object-cover',
+      this.avatar.status() !== 'loaded' && 'invisible',
+      this.userClass(),
+    ),
+  );
+
+  constructor() {
+    // Cada `src` nuevo vuelve a cargar; sin `src`, se ve el fallback.
+    effect(() => {
+      const src = this.src();
+      untracked(() => this.avatar.status.set(src ? 'loading' : 'error'));
+    });
+    // Si la imagen ya estaba en caché, puede estar completa antes de escuchar `load`.
+    afterRenderEffect(() => {
+      if (!this.src()) return;
+      if (this.img.complete && this.img.naturalWidth > 0) {
+        untracked(() => this.avatar.status.set('loaded'));
+      }
+    });
+  }
+}
+
+/**
+ * Iniciales o ícono que se ven mientras la imagen carga, si falla o si no hay imagen. Con
+ * `label`, los lectores de pantalla anuncian el nombre (`role="img"` + `aria-label`) en lugar
+ * de leer las letras sueltas.
+ */
+@Component({
+  selector: 'mimi-avatar-fallback',
+  template: '<ng-content />',
+  host: {
+    '[class]': 'classes()',
+    '[attr.role]': 'label() ? "img" : null',
+    '[attr.aria-label]': 'label() || null',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MimiAvatarFallback {
+  /** Nombre completo para lectores de pantalla. */
+  readonly label = input<string>();
+  readonly userClass = input('', { alias: 'class' });
+
+  private readonly avatar = inject(MimiAvatar);
+
+  protected readonly classes = computed(() =>
+    cn(
+      'flex size-full items-center justify-center rounded-full bg-secondary font-semibold text-secondary-foreground',
+      this.userClass(),
+      // Al final: con la imagen cargada se oculta aunque el usuario pase `flex`.
+      this.avatar.status() === 'loaded' && 'hidden',
+    ),
+  );
+}
+
+/** Todas las piezas de Avatar, para importarlas juntas. */
+export const MimiAvatarImports = [MimiAvatar, MimiAvatarImage, MimiAvatarFallback] as const;

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

@@ -0,0 +1,25 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+/**
+ * Clases de mimi-avatar (docs/design/Mimi Componentes.dc.html, sección 6). Literales para que
+ * Tailwind las detecte. Círculo con fondo --mimi-muted mientras no hay foto; sm 32px / 12px,
+ * default 40px / 14px, lg 56px / 18px (el tamaño de letra lo heredan las iniciales).
+ */
+export const avatarVariants = cva(
+  'relative inline-flex shrink-0 overflow-hidden rounded-full bg-muted select-none',
+  {
+    variants: {
+      size: {
+        sm: 'size-8 text-xs',
+        default: 'size-10 text-sm',
+        lg: 'size-14 text-lg',
+      },
+    },
+    defaultVariants: { size: 'default' },
+  },
+);
+
+export type AvatarSize = NonNullable<VariantProps<typeof avatarVariants>['size']>;
+
+/** Estado de la imagen: sin imagen, cargando, cargada o con error. */
+export type AvatarStatus = 'idle' | 'loading' | 'loaded' | 'error';

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

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

package/dist/templates/components/badge/badge.ts

@@ -0,0 +1,21 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '@/components/ui/utils/cn';
+import { type BadgeVariant, badgeVariants } from './badge.variants';
+
+/** Etiqueta estática de Mimi sobre el `<span>` nativo: `<span mimiBadge>Nuevo</span>`. */
+@Directive({
+  selector: 'span[mimiBadge]',
+  exportAs: 'mimiBadge',
+  host: {
+    '[class]': 'classes()',
+    '[attr.data-variant]': 'variant()',
+  },
+})
+export class MimiBadge {
+  readonly variant = input<BadgeVariant>('default');
+  readonly userClass = input('', { alias: 'class' });
+
+  protected readonly classes = computed(() =>
+    cn(badgeVariants({ variant: this.variant() }), this.userClass()),
+  );
+}

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

@@ -0,0 +1,27 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+/**
+ * Clases de mimiBadge (docs/design/Mimi Componentes.dc.html, sección 5). Literales para que
+ * Tailwind las detecte. 22px de alto, 10px de padding, 12px y peso 600, radio
+ * --mimi-badge-radius. Los íconos van a 12px (no están en el diseño; decidido en la tarea 2.4).
+ */
+export const badgeVariants = cva(
+  [
+    'inline-flex h-[22px] shrink-0 items-center gap-1 rounded-badge border px-2.5',
+    'font-sans text-xs leading-none font-semibold whitespace-nowrap',
+    '[&_svg]:pointer-events-none [&_svg]:size-3 [&_svg]:shrink-0',
+  ],
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground',
+        outline: 'border-border bg-transparent text-foreground',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground',
+      },
+    },
+    defaultVariants: { variant: 'default' },
+  },
+);
+
+export type BadgeVariant = NonNullable<VariantProps<typeof badgeVariants>['variant']>;

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

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

package/dist/templates/components/button/button.ts

@@ -0,0 +1,99 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  ElementRef,
+  booleanAttribute,
+  computed,
+  inject,
+  input,
+} from '@angular/core';
+import { cn } from '@/components/ui/utils/cn';
+import { type ButtonSize, type ButtonVariant, buttonVariants } from './button.variants';
+
+/**
+ * Botón de Mimi sobre el elemento nativo: `<button mimiBtn>` o `<a mimiBtn>`.
+ *
+ * - `disabled` o `loading` deshabilitan: `disabled` nativo en <button>; en <a>,
+ *   `aria-disabled="true"`, `tabindex="-1"` y el clic se cancela.
+ * - `loading` muestra un spinner centrado encima del contenido, que queda transparente en su
+ *   lugar: el botón no cambia de ancho y conserva su nombre accesible. Lleva `aria-busy="true"`.
+ */
+@Component({
+  selector: 'button[mimiBtn], a[mimiBtn]',
+  exportAs: 'mimiBtn',
+  template: `
+    @if (loading()) {
+      <svg
+        data-slot="spinner"
+        class="absolute inset-0 m-auto animate-[mimi-spin_0.8s_linear_infinite]"
+        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 loader-circle (ISC) -->
+        <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+      </svg>
+    }
+    <span data-slot="content" class="contents" [class.text-transparent]="loading()">
+      <ng-content />
+    </span>
+  `,
+  host: {
+    '[class]': 'classes()',
+    '[attr.data-variant]': 'variant()',
+    '[attr.data-size]': 'size()',
+    '[attr.data-loading]': 'loading() ? "" : null',
+    '[attr.data-disabled]': 'isDisabled() ? "" : null',
+    '[attr.disabled]': 'isNativeButton && isDisabled() ? "" : null',
+    '[attr.aria-disabled]': '!isNativeButton && isDisabled() ? "true" : null',
+    '[attr.tabindex]': '!isNativeButton && isDisabled() ? "-1" : null',
+    '[attr.aria-busy]': 'loading() ? "true" : null',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MimiButton {
+  readonly variant = input<ButtonVariant>('default');
+  readonly size = input<ButtonSize>('default');
+  readonly disabled = input(false, { transform: booleanAttribute });
+  readonly loading = input(false, { transform: booleanAttribute });
+  readonly userClass = input('', { alias: 'class' });
+
+  private readonly element = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
+  protected readonly isNativeButton = this.element.tagName === 'BUTTON';
+
+  protected readonly isDisabled = computed(() => this.disabled() || this.loading());
+
+  protected readonly classes = computed(() =>
+    cn(
+      buttonVariants({ variant: this.variant(), size: this.size() }),
+      // El diseño deshabilitado no tiene sombra; cargando la conserva.
+      this.disabled() && !this.loading() && 'shadow-none',
+      this.userClass(),
+    ),
+  );
+
+  /**
+   * En <a> deshabilitado cancela el clic (en <button> el navegador ya lo bloquea). Se escucha
+   * en la fase de captura: en el propio elemento corre antes que los (click) del usuario, que
+   * Angular registra primero, y así stopImmediatePropagation también los detiene.
+   */
+  private readonly blockDisabledClicks = (() => {
+    const onClick = (event: Event) => {
+      if (!this.isDisabled()) return;
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    };
+    this.element.addEventListener('click', onClick, { capture: true });
+    inject(DestroyRef).onDestroy(() =>
+      this.element.removeEventListener('click', onClick, { capture: true }),
+    );
+  })();
+}

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

@@ -0,0 +1,60 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import {
+  buttonFocusStyles,
+  controlDisabledStyles,
+  controlPressStyles,
+} from '@/components/ui/utils/control-styles';
+
+/**
+ * Clases de mimiBtn (docs/design/Mimi Componentes.dc.html, sección 1). Todas literales para
+ * que Tailwind las detecte. Las medidas siguen la cascada de la spec 6.2:
+ * --mimi-btn-* → --mimi-control-* / --mimi-radius → valor del diseño.
+ */
+export const buttonVariants = cva(
+  [
+    'relative inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap select-none',
+    'rounded-[var(--mimi-btn-radius,var(--mimi-radius,0.75rem))]',
+    'border-[length:var(--mimi-btn-border-width,1px)] border-transparent',
+    'font-sans leading-none font-[weight:var(--mimi-btn-font-weight,500)] tracking-[var(--mimi-btn-letter-spacing,normal)]',
+    '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+    buttonFocusStyles,
+    'focus-visible:outline-[length:var(--mimi-btn-focus-ring-width,2px)]',
+    controlDisabledStyles,
+    controlPressStyles,
+    // Cargando: deshabilitado, pero con opacidad 85% y cursor de progreso (gana a disabled:).
+    'aria-busy:disabled:cursor-progress aria-busy:disabled:opacity-85 aria-busy:aria-disabled:opacity-85',
+  ],
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground shadow-primary hover:not-disabled:bg-primary-hover hover:not-disabled:shadow-primary-hover active:ring-3 active:ring-ring-soft',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-neutral hover:not-disabled:bg-secondary-hover hover:not-disabled:shadow-neutral-hover active:ring-3 active:ring-ring-soft',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-destructive hover:not-disabled:bg-destructive-hover hover:not-disabled:shadow-destructive-hover active:ring-3 active:ring-destructive-soft',
+        outline:
+          'border-border bg-card text-foreground shadow-neutral hover:not-disabled:bg-accent hover:not-disabled:text-accent-foreground hover:not-disabled:shadow-neutral-hover active:ring-3 active:ring-ring-soft',
+        ghost:
+          'bg-transparent text-foreground hover:not-disabled:bg-accent hover:not-disabled:text-accent-foreground',
+        link: 'bg-transparent text-primary underline-offset-4 hover:not-disabled:underline',
+      },
+      size: {
+        default:
+          'h-[var(--mimi-btn-height,var(--mimi-control-height,2.5rem))] gap-2 px-[var(--mimi-btn-padding-x,1rem)] text-[length:var(--mimi-btn-font-size,0.875rem)]',
+        sm: 'h-[var(--mimi-btn-height-sm,var(--mimi-control-height-sm,2rem))] gap-1.5 px-3 text-[13px]',
+        lg: 'h-[var(--mimi-btn-height-lg,var(--mimi-control-height-lg,3rem))] gap-2 px-6 text-[15px]',
+        icon: 'size-[var(--mimi-btn-height,var(--mimi-control-height,2.5rem))] p-0',
+      },
+    },
+    compoundVariants: [
+      // El enlace del diseño solo tiene 4px de padding horizontal.
+      { variant: 'link', size: ['default', 'sm', 'lg'], class: 'px-1' },
+    ],
+    defaultVariants: { variant: 'default', size: 'default' },
+  },
+);
+
+type ButtonVariantProps = VariantProps<typeof buttonVariants>;
+export type ButtonVariant = NonNullable<ButtonVariantProps['variant']>;
+export type ButtonSize = NonNullable<ButtonVariantProps['size']>;

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

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