@mimi-ng/cli 0.1.1 → 0.3.0

package/dist/templates/components/calendar/dates.ts

@@ -0,0 +1,181 @@
+import { InjectionToken } from '@angular/core';
+
+/*
+ * Fechas del calendario, del Date Picker y del Date Range (G2.9; decidido por defecto el
+ * 05/11/2026: opción (b), cadena ISO). Una fecha es `'AAAA-MM-DD'`, sin hora ni zona horaria,
+ * como el `value` de `<input type="date">`: va directo a JSON y se compara como texto. Por dentro
+ * se calcula en UTC, así que ninguna zona horaria corre un día.
+ */
+
+/** Una fecha sin hora: `'2026-09-30'`. */
+export type MimiDate = string;
+
+/** Un periodo, con los dos extremos incluidos. */
+export interface MimiDateRange {
+  start: MimiDate;
+  end: MimiDate;
+}
+
+const ISO = /^(\d{4})-(\d{2})-(\d{2})$/;
+
+/** `true` si es una fecha ISO válida (`'2026-02-30'` no lo es). */
+export function mimiIsDate(value: unknown): value is MimiDate {
+  if (typeof value !== 'string') return false;
+  const match = ISO.exec(value);
+  if (!match) return false;
+  const time = Date.UTC(+match[1], +match[2] - 1, +match[3]);
+  return new Date(time).toISOString().slice(0, 10) === value;
+}
+
+/**
+ * Convierte un `Date` en una fecha de Mimi: el día del calendario de ese instante en la zona
+ * horaria local o en `timeZone` (por ejemplo, `'America/Lima'`).
+ */
+export function toMimiDate(date: Date, timeZone?: string): MimiDate {
+  if (!timeZone) {
+    return iso(date.getFullYear(), date.getMonth() + 1, date.getDate());
+  }
+  const parts = new Intl.DateTimeFormat('en-US', {
+    timeZone,
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+  }).formatToParts(date);
+  const part = (type: string) => +(parts.find((p) => p.type === type)?.value ?? 0);
+  return iso(part('year'), part('month'), part('day'));
+}
+
+/** Convierte una fecha de Mimi en un `Date` a medianoche local (para `DatePipe` y similares). */
+export function fromMimiDate(date: MimiDate): Date {
+  const [year, month, day] = date.split('-').map(Number);
+  return new Date(year, month - 1, day);
+}
+
+function pad(n: number, size = 2): string {
+  return String(n).padStart(size, '0');
+}
+
+function iso(year: number, month: number, day: number): MimiDate {
+  return `${pad(year, 4)}-${pad(month)}-${pad(day)}`;
+}
+
+/** Milisegundos UTC de la fecha (para calcular sin zona horaria). */
+function utc(date: MimiDate): number {
+  const [year, month, day] = date.split('-').map(Number);
+  return Date.UTC(year, month - 1, day);
+}
+
+function fromUtc(time: number): MimiDate {
+  return new Date(time).toISOString().slice(0, 10);
+}
+
+const DAY = 86_400_000;
+
+/** Suma días (negativos restan). */
+export function mimiAddDays(date: MimiDate, days: number): MimiDate {
+  return fromUtc(utc(date) + days * DAY);
+}
+
+/** Suma meses; si el día no existe en el mes nuevo (31 de abril), queda en el último. */
+export function mimiAddMonths(date: MimiDate, months: number): MimiDate {
+  const [year, month, day] = date.split('-').map(Number);
+  const target = new Date(Date.UTC(year, month - 1 + months, 1));
+  const last = new Date(Date.UTC(target.getUTCFullYear(), target.getUTCMonth() + 1, 0));
+  return iso(target.getUTCFullYear(), target.getUTCMonth() + 1, Math.min(day, last.getUTCDate()));
+}
+
+/** Días entre dos fechas, contando las dos (del 24 al 30 son 7). */
+export function mimiDaysBetween(start: MimiDate, end: MimiDate): number {
+  return Math.round((utc(end) - utc(start)) / DAY) + 1;
+}
+
+/** Día de la semana ISO: 1 = lunes … 7 = domingo. */
+export function mimiWeekday(date: MimiDate): number {
+  return new Date(utc(date)).getUTCDay() || 7;
+}
+
+/** Primer día del mes de la fecha. */
+export function mimiStartOfMonth(date: MimiDate): MimiDate {
+  return `${date.slice(0, 7)}-01`;
+}
+
+/** Acota una fecha entre `min` y `max` (los dos opcionales). */
+export function mimiClampDate(
+  date: MimiDate,
+  min?: MimiDate | null,
+  max?: MimiDate | null,
+): MimiDate {
+  if (min && date < min) return min;
+  if (max && date > max) return max;
+  return date;
+}
+
+/** Regiones donde la semana empieza el domingo (respaldo de `Intl.Locale#getWeekInfo`). */
+const SUNDAY_FIRST = new Set([
+  'US',
+  'CA',
+  'MX',
+  'BR',
+  'JP',
+  'KR',
+  'TW',
+  'HK',
+  'IL',
+  'PH',
+  'IN',
+  'ZA',
+  'SA',
+  'PE',
+  'CO',
+  'VE',
+  'GT',
+  'HN',
+  'SV',
+  'NI',
+  'PA',
+  'DO',
+  'PR',
+  'PY',
+]);
+
+interface WeekInfoLocale {
+  getWeekInfo?: () => { firstDay: number };
+  weekInfo?: { firstDay: number };
+  maximize?: () => { region?: string };
+  region?: string;
+}
+
+/**
+ * Primer día de la semana del idioma (1 = lunes … 7 = domingo), con `Intl.Locale#getWeekInfo`
+ * (o `weekInfo`) donde existe; si no, por la región del idioma (domingo en las de la lista,
+ * lunes en el resto).
+ */
+export function mimiWeekStart(locale: string): number {
+  try {
+    const intl = new Intl.Locale(locale) as unknown as WeekInfoLocale;
+    const info = intl.getWeekInfo?.() ?? intl.weekInfo;
+    if (info?.firstDay) return info.firstDay;
+    const region = intl.region ?? intl.maximize?.().region;
+    return region && SUNDAY_FIRST.has(region) ? 7 : 1;
+  } catch {
+    return 1;
+  }
+}
+
+/** Formatea una fecha con `Intl.DateTimeFormat` (en UTC: no cambia de día con la zona). */
+export function mimiFormatDate(
+  date: MimiDate,
+  locale: string,
+  options: Intl.DateTimeFormatOptions,
+): string {
+  return new Intl.DateTimeFormat(locale, { ...options, timeZone: 'UTC' }).format(utc(date));
+}
+
+/**
+ * «Hoy» como fecha de Mimi. Por defecto, el día local del navegador; se puede reemplazar (en
+ * pruebas o con la zona horaria de la cuenta): `{ provide: MIMI_TODAY, useValue: () => '2026-09-30' }`.
+ */
+export const MIMI_TODAY = new InjectionToken<() => MimiDate>('MIMI_TODAY', {
+  providedIn: 'root',
+  factory: () => () => toMimiDate(new Date()),
+});

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

@@ -0,0 +1,3 @@
+export * from './calendar';
+export * from './calendar-texts';
+export * from './dates';

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

@@ -24,9 +24,9 @@ export class MimiCard {
   readonly userClass = input('', { alias: 'class' });
   protected readonly classes = computed(() =>
     cn(
-      'flex flex-col bg-card text-card-foreground',
+      'flex flex-col bg-[color:var(--mimi-card-bg,var(--mimi-card))] text-[color:var(--mimi-card-fg,var(--mimi-card-foreground))]',
       'rounded-[var(--mimi-card-radius,var(--mimi-radius-card))]',
-      'border-[length:var(--mimi-card-border-width,1px)] border-border',
+      'border-[length:var(--mimi-card-border-width,1px)] border-[color:var(--mimi-card-border,var(--mimi-border))]',
       'shadow-[shadow:var(--mimi-card-shadow,var(--mimi-shadow-card))]',
       this.userClass(),
     ),
@@ -44,7 +44,7 @@ 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)]',
+      'flex flex-col gap-1.5 p-[var(--mimi-card-padding-header,var(--mimi-card-padding,1.5rem)_var(--mimi-card-padding,1.5rem)_1rem)]',
       this.userClass(),
     ),
   );
@@ -101,7 +101,10 @@ export class MimiCardDescription {
 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()),
+    cn(
+      'block p-[var(--mimi-card-padding-content,0_var(--mimi-card-padding,1.5rem)_1.25rem)] first:pt-[var(--mimi-card-padding,1.5rem)]',
+      this.userClass(),
+    ),
   );
 }
 
@@ -116,7 +119,7 @@ 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',
+      'flex items-center justify-end gap-2 p-[var(--mimi-card-padding-footer,0_var(--mimi-card-padding,1.5rem)_var(--mimi-card-padding,1.5rem))] first:pt-[var(--mimi-card-padding,1.5rem)]',
       this.userClass(),
     ),
   );

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

@@ -150,10 +150,10 @@ export class MimiCheckbox implements FormCheckboxControl, MimiFieldControl {
 
   // 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',
+    'peer inline-flex size-[var(--mimi-checkbox-size,1rem)] shrink-0 items-center justify-center rounded-[var(--mimi-checkbox-radius,var(--mimi-radius-sm))] border border-[color:var(--mimi-checkbox-border,var(--mimi-input))] bg-input-background text-[color:var(--mimi-checkbox-check,var(--mimi-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=checked]:border-[color:var(--mimi-checkbox-checked-bg,var(--mimi-primary))] data-[state=checked]:bg-[color:var(--mimi-checkbox-checked-bg,var(--mimi-primary))] data-[state=checked]:shadow-primary',
+    'data-[state=indeterminate]:border-[color:var(--mimi-checkbox-checked-bg,var(--mimi-primary))] data-[state=indeterminate]:bg-[color:var(--mimi-checkbox-checked-bg,var(--mimi-primary))] data-[state=indeterminate]:shadow-primary',
     'data-[state=unchecked]:focus-visible:border-ring data-[state=unchecked]:aria-invalid:border-destructive',
     'disabled:shadow-none',
     buttonFocusStyles,

package/dist/templates/components/chip/chip-texts.ts

@@ -0,0 +1,40 @@
+import { InjectionToken, type Provider } from '@angular/core';
+
+/*
+ * Textos del chip compartido (Tags Input y el Combobox múltiple), en archivo propio: así se
+ * pueden proveer en `app.config.ts` sin llevar los componentes al chunk inicial.
+ */
+
+export interface MimiChipText {
+  /** Nombre del botón de quitar. */
+  remove: (label: string) => string;
+  /** Anuncio al agregar. */
+  added: (label: string) => string;
+  /** Anuncio al quitar. */
+  removed: (label: string) => string;
+}
+
+/** Textos predeterminados (inglés). */
+export const MIMI_CHIP_TEXT_EN: MimiChipText = {
+  remove: (label) => `Remove ${label}`,
+  added: (label) => `${label} added`,
+  removed: (label) => `${label} removed`,
+};
+
+/** Textos en español: `provideMimiChipText(MIMI_CHIP_TEXT_ES)`. */
+export const MIMI_CHIP_TEXT_ES: MimiChipText = {
+  remove: (label) => `Quitar ${label}`,
+  added: (label) => `${label} agregada`,
+  removed: (label) => `${label} quitada`,
+};
+
+/** Textos activos. Sin `provideMimiChipText`, los predeterminados en inglés. */
+export const MIMI_CHIP_TEXT = new InjectionToken<MimiChipText>('MIMI_CHIP_TEXT', {
+  providedIn: 'root',
+  factory: () => MIMI_CHIP_TEXT_EN,
+});
+
+/** Cambia los textos del chip. Lo que no definas sigue en inglés. */
+export function provideMimiChipText(text: Partial<MimiChipText>): Provider {
+  return { provide: MIMI_CHIP_TEXT, useValue: { ...MIMI_CHIP_TEXT_EN, ...text } };
+}

package/dist/templates/components/chip/chip.ts

@@ -0,0 +1,116 @@
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  booleanAttribute,
+  computed,
+  inject,
+  input,
+  output,
+} from '@angular/core';
+import { cn } from '@/components/ui/utils/cn';
+import { buttonFocusStyles } from '@/components/ui/utils/control-styles';
+import { MIMI_CHIP_TEXT } from './chip-texts';
+
+/*
+ * Chip compartido (ítem `chip` de la CLI, decidido el 03/11/2026; prefijo de tokens `chip`,
+ * spec 13). Lo usan Tags Input (G2.6) y el Combobox múltiple (G2.8): el chip con su botón de
+ * quitar y un util de anuncios (`injectMimiChipAnnouncer`).
+ */
+
+const CHIP_BASE = cn(
+  'inline-flex max-w-full min-w-0 shrink-0 items-center gap-1 ps-2.5 font-medium whitespace-nowrap mimi-transition',
+  'h-[var(--mimi-chip-height,26px)] rounded-[var(--mimi-chip-radius,var(--mimi-badge-radius,999px))] text-[length:var(--mimi-chip-font-size,13px)]',
+);
+/** Colores: el global `--mimi-chip` (G2.0b, con respaldo) o, con error, el suave de `danger`. */
+const CHIP_TONE = {
+  default:
+    'bg-[color:var(--mimi-chip-bg,var(--mimi-chip,var(--mimi-secondary)))] text-[color:var(--mimi-chip-fg,var(--mimi-chip-foreground,var(--mimi-secondary-foreground)))]',
+  invalid: 'bg-destructive-soft-bg text-destructive-soft-foreground',
+} as const;
+
+const REMOVE_CLASSES = cn(
+  'inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-0 text-current opacity-70 mimi-transition',
+  'size-[var(--mimi-chip-remove-size,18px)] [&_svg]:size-3',
+  'hover:bg-[color:color-mix(in_oklab,var(--mimi-foreground)_12%,transparent)] hover:opacity-100 active:scale-(--mimi-press-scale-sm)',
+  buttonFocusStyles,
+);
+
+/**
+ * Chip: `<mimi-chip removable (remove)="quitar(i)">angular</mimi-chip>`. El botón se llama
+ * «Remove angular» (`MIMI_CHIP_TEXT`); con `label` se cambia la etiqueta que usa el nombre.
+ */
+@Component({
+  selector: 'mimi-chip',
+  template: `
+    <span class="min-w-0 truncate"><ng-content /></span>
+    @if (removable()) {
+      <button
+        type="button"
+        data-slot="remove"
+        [class]="removeClasses"
+        [attr.aria-label]="text.remove(label() ?? '')"
+        (click)="remove.emit()"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <!-- Lucide x (ISC) -->
+          <path d="M18 6 6 18" />
+          <path d="m6 6 12 12" />
+        </svg>
+      </button>
+    }
+  `,
+  host: {
+    '[class]': 'classes()',
+    '[attr.data-invalid]': 'invalid() ? "" : null',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MimiChip {
+  protected readonly text = inject(MIMI_CHIP_TEXT);
+
+  /** Muestra el botón de quitar. */
+  readonly removable = input(false, { transform: booleanAttribute });
+  /** La etiqueta para el nombre del botón («Remove angular»). */
+  readonly label = input<string>();
+  /** Con error (por ejemplo, el duplicado que se intentó agregar). */
+  readonly invalid = input(false, { transform: booleanAttribute });
+  readonly userClass = input('', { alias: 'class' });
+
+  /** Se pulsó el botón de quitar. */
+  readonly remove = output<void>();
+
+  protected readonly removeClasses = REMOVE_CLASSES;
+  protected readonly classes = computed(() =>
+    cn(
+      CHIP_BASE,
+      this.removable() ? 'pe-1' : 'pe-2.5',
+      CHIP_TONE[this.invalid() ? 'invalid' : 'default'],
+      this.userClass(),
+    ),
+  );
+}
+
+/**
+ * Anuncios de agregar y quitar, con el `LiveAnnouncer` del CDK en `polite` («angular agregada»).
+ * Se llama en el contexto de inyección (al declarar una propiedad).
+ */
+export function injectMimiChipAnnouncer(): {
+  added: (label: string) => void;
+  removed: (label: string) => void;
+} {
+  const announcer = inject(LiveAnnouncer);
+  const text = inject(MIMI_CHIP_TEXT);
+  return {
+    added: (label) => void announcer.announce(text.added(label), 'polite'),
+    removed: (label) => void announcer.announce(text.removed(label), 'polite'),
+  };
+}

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

@@ -0,0 +1,2 @@
+export * from './chip';
+export * from './chip-texts';

package/dist/templates/components/color-picker/color-picker-texts.ts

@@ -0,0 +1,57 @@
+import { InjectionToken, type Provider } from '@angular/core';
+
+/*
+ * Textos del Color Picker, en archivo propio: así se pueden proveer en `app.config.ts` sin llevar
+ * el componente al chunk inicial.
+ */
+
+export interface MimiColorPickerText {
+  area: string;
+  areaValue: (saturation: number, brightness: number) => string;
+  hue: string;
+  format: string;
+  value: string;
+  palette: string;
+  recent: string;
+  noRecent: string;
+  /** Nombre del panel en el disparador. */
+  pickColor: string;
+  /** Aviso del campo cuando el OKLCH escrito se recortó a sRGB. */
+  clipped: string;
+}
+
+export const MIMI_COLOR_PICKER_TEXT_EN: MimiColorPickerText = {
+  area: 'Saturation and brightness',
+  areaValue: (s, v) => `Saturation ${s}%, brightness ${v}%`,
+  hue: 'Hue',
+  format: 'Format',
+  value: 'Color value',
+  palette: 'Palette',
+  recent: 'Recent',
+  noRecent: 'The colors you choose will appear here.',
+  pickColor: 'Choose color',
+  clipped: 'Adjusted to the closest sRGB color.',
+};
+
+export const MIMI_COLOR_PICKER_TEXT_ES: MimiColorPickerText = {
+  area: 'Saturación y brillo',
+  areaValue: (s, v) => `Saturación ${s}%, brillo ${v}%`,
+  hue: 'Tono',
+  format: 'Formato',
+  value: 'Valor del color',
+  palette: 'Paleta',
+  recent: 'Recientes',
+  noRecent: 'Los colores que elijas aparecerán aquí.',
+  pickColor: 'Elegir color',
+  clipped: 'Ajustado al color sRGB más cercano.',
+};
+
+export const MIMI_COLOR_PICKER_TEXT = new InjectionToken<MimiColorPickerText>(
+  'MIMI_COLOR_PICKER_TEXT',
+  { providedIn: 'root', factory: () => MIMI_COLOR_PICKER_TEXT_EN },
+);
+
+/** Cambia los textos del Color Picker. Lo que no definas sigue en inglés. */
+export function provideMimiColorPickerText(text: Partial<MimiColorPickerText>): Provider {
+  return { provide: MIMI_COLOR_PICKER_TEXT, useValue: { ...MIMI_COLOR_PICKER_TEXT_EN, ...text } };
+}