@mimi-ng/cli 0.1.1 → 0.3.0

package/dist/templates/theme/types.ts

@@ -1,7 +1,8 @@
 /**
  * Preset tipado del tema (spec 6.3). Cada propiedad se convierte en una variable --mimi-*
- * de theme-base.css. Los derivados con color-mix (primary-hover, ring-soft, switch-off…)
- * no están aquí: se recalculan solos a partir de los colores.
+ * de theme-base.css. Los derivados con color-mix (primary-hover, ring-soft, switch-off y los
+ * <tono>-soft, <tono>-hover y <tono>-ring) no están aquí: se recalculan solos a partir de los
+ * colores.
  */
 
 /** Colores. `colors` se aplica en claro y `darkColors` en oscuro. */
@@ -25,9 +26,29 @@ export interface MimiColorTokens {
   border?: string;
   input?: string;
   inputBackground?: string;
+  /** Borde de un campo con el puntero encima (por defecto, mezcla de foreground e input). */
+  inputHover?: string;
   ring?: string;
   /** Fondo que oscurece la página detrás de paneles y diálogos. */
   overlay?: string;
+  success?: string;
+  successForeground?: string;
+  /** Texto sobre el fondo suave de success. */
+  successSoftForeground?: string;
+  warning?: string;
+  warningForeground?: string;
+  warningSoftForeground?: string;
+  info?: string;
+  infoForeground?: string;
+  infoSoftForeground?: string;
+  destructiveSoftForeground?: string;
+  /** Cuánto tono lleva cada fondo suave (-soft), en porcentaje: '12%'. */
+  softMix?: string;
+  tooltip?: string;
+  tooltipForeground?: string;
+  /** Fondo translúcido de las píldoras flotantes (mimi-toolbar, Pagination). */
+  glass?: string;
+  glassBorder?: string;
 }
 
 /** Sombras (`box-shadow` completo). `shadows` en claro y `darkShadows` en oscuro. */
@@ -41,12 +62,28 @@ export interface MimiShadowTokens {
   neutralHover?: string;
   /** Pulgar del Switch. */
   thumb?: string;
+  success?: string;
+  successHover?: string;
+  warning?: string;
+  warningHover?: string;
+  info?: string;
+  infoHover?: string;
+  /** Menús, diálogos, toasts y píldoras flotantes. */
+  popover?: string;
+  /** Glow (opción glow): van a --mimi-glow y --mimi-glow-<tono>, sin el prefijo shadow-. */
+  glow?: string;
+  glowPrimary?: string;
+  glowSuccess?: string;
+  glowWarning?: string;
+  glowInfo?: string;
+  glowDestructive?: string;
 }
 
 /** Radios fijos. Si no se definen, sm y card se calculan a partir de `radius`. */
 export interface MimiRadiusTokens {
   sm?: string;
   card?: string;
+  /** @deprecated Usa components.badge.radius (la misma variable). Sigue hasta la 1.0. */
   badge?: string;
 }
 
@@ -71,9 +108,41 @@ export interface MimiControlSizeTokens {
   heightLg?: string;
 }
 
+/**
+ * Tokens compartidos por todos los controles (spec 13, nivel 2). Las alturas van a
+ * --mimi-control-height*; el resto, sin prefijo: focusRing → --mimi-focus-ring.
+ */
+export interface MimiSharedTokens extends MimiControlSizeTokens {
+  /** Halo de foco en campos y botones (box-shadow). */
+  focusRing?: string;
+  /** Contorno de foco con teclado (outline). */
+  focusOutline?: string;
+  focusOffset?: string;
+  disabledOpacity?: string | number;
+  iconSize?: string;
+  iconSizeSm?: string;
+}
+
+/**
+ * Efectos que no son movimiento ni controles: desenfoques (y, más adelante, los de Mimi
+ * Effects). Iguales en claro y oscuro.
+ */
+export interface MimiEffectTokens {
+  /** Desenfoque del fondo detrás de Dialog y Sheet. */
+  overlayBlur?: string;
+  /** Desenfoque de las píldoras translúcidas. */
+  glassBlur?: string;
+}
+
 /** Tokens por componente. Cada componente los lee con la cascada de la spec 6.2. */
 export interface MimiControlTokens extends MimiControlSizeTokens {
   radius?: string;
+  /** Padding horizontal del tamaño default: --mimi-<prefijo>-px. */
+  px?: string;
+  /**
+   * @deprecated Nombre de la 0.1.0 (--mimi-<prefijo>-padding-x): usa `px`. Sigue funcionando
+   * hasta la 1.0 (spec 12).
+   */
   paddingX?: string;
   fontSize?: string;
   borderWidth?: string;
@@ -82,11 +151,19 @@ export interface MimiControlTokens extends MimiControlSizeTokens {
 
 /** paddingX y fontSize se aplican al tamaño default; sm y lg usan los valores del diseño. */
 export interface MimiButtonTokens extends MimiControlTokens {
+  /** Espacio entre ícono y texto del tamaño default. */
+  gap?: string;
+  /** Escala al presionar; si no, --mimi-press-scale. Con movimiento reducido vale 1. */
+  pressScale?: string | number;
   fontWeight?: string | number;
   letterSpacing?: string;
 }
 
 export interface MimiInputTokens extends MimiControlTokens {
+  /**
+   * @deprecated Es un color: cámbialo en el CSS con --mimi-input-placeholder (spec 6.2). Sigue
+   * funcionando hasta la 1.0.
+   */
   placeholderColor?: string;
   disabledOpacity?: string | number;
 }
@@ -95,16 +172,428 @@ export interface MimiCardTokens {
   radius?: string;
   borderWidth?: string;
   shadow?: string;
+  /** Padding exterior de las partes (1.5rem); los paddingHeader/Content/Footer lo detallan. */
+  padding?: string;
   paddingHeader?: string;
   paddingContent?: string;
   paddingFooter?: string;
 }
 
+export interface MimiAvatarTokens {
+  size?: string;
+  sizeSm?: string;
+  sizeLg?: string;
+  radius?: string;
+}
+
+export interface MimiSwitchTokens {
+  /** Ancho de la pista. El pulgar se desplaza ancho − alto. */
+  width?: string;
+  /** Alto de la pista. El pulgar mide alto − 4px. */
+  height?: string;
+}
+
+export interface MimiCheckboxTokens {
+  size?: string;
+  radius?: string;
+}
+
+/** FormField (prefijo field). */
+export interface MimiFieldTokens {
+  gap?: string;
+  labelSize?: string;
+  labelWeight?: string | number;
+}
+
+export interface MimiSeparatorTokens {
+  /** Grosor de la línea. */
+  size?: string;
+}
+
+export interface MimiSkeletonTokens {
+  radius?: string;
+  /** Duración del pulso: '1.6s'. */
+  duration?: string;
+}
+
+export interface MimiBadgeTokens {
+  height?: string;
+  px?: string;
+  fontSize?: string;
+  fontWeight?: string | number;
+  /** --mimi-badge-radius (el mismo que radii.badge de la 0.1.0). */
+  radius?: string;
+}
+
+/** Textarea: si no se definen, usa los de Input y después los compartidos. */
+export interface MimiTextareaTokens {
+  radius?: string;
+  minHeight?: string;
+  lineHeight?: string;
+  py?: string;
+}
+
+/** Popover. Fondo, borde y sombra van en el CSS (`--mimi-popover-bg`, `-border`, `-shadow`). */
+export interface MimiPopoverTokens {
+  radius?: string;
+  /** Padding del panel (16px). */
+  padding?: string;
+  /** Lado de la flecha (10px). */
+  arrow?: string;
+}
+
+/** Tooltip. Fondo y texto van en el CSS (`--mimi-tooltip-bg`, `--mimi-tooltip-fg`). */
+export interface MimiTooltipTokens {
+  radius?: string;
+  fontSize?: string;
+  /** Lado de la flecha (8px). */
+  arrow?: string;
+  /** Retraso al abrir (300ms). `mimiTooltipDelay` lo cambia en un tooltip. */
+  delay?: string;
+}
+
+/**
+ * Dropdown Menu y Context Menu. Fondo, borde, sombra, hover, atajo y tono de peligro van en el CSS
+ * (`--mimi-menu-bg`, `-border`, `-shadow`, `-item-hover`, `-shortcut`, `-danger`, `-danger-hover`).
+ */
+export interface MimiMenuTokens {
+  radius?: string;
+  /** Ancho del panel (240px). */
+  width?: string;
+  /** Alto de cada ítem (32px). */
+  itemHeight?: string;
+  itemRadius?: string;
+}
+
+/**
+ * Select. Fondos, borde, sombra y opción activa van en el CSS (`--mimi-select-trigger-bg`,
+ * `-border`, `-menu-bg`, `-menu-shadow`, `-option-hover`).
+ */
+export interface MimiSelectTokens {
+  /** Radio del disparador y del panel. */
+  radius?: string;
+  /** Alto del disparador (el de los controles). */
+  height?: string;
+  /** Alto de cada opción (34px). */
+  optionHeight?: string;
+  optionRadius?: string;
+}
+
+/**
+ * Dialog. El fondo oscurecido, el fondo del panel y la sombra van en el CSS
+ * (`--mimi-dialog-overlay`, `-bg`, `-shadow`).
+ */
+export interface MimiDialogTokens {
+  radius?: string;
+  /** Ancho del panel (420px). */
+  width?: string;
+  /** Relleno a los lados del encabezado, el cuerpo y el pie (24px). */
+  padding?: string;
+  /** Tamaño de la X (32px). */
+  closeSize?: string;
+  /** Desenfoque del fondo (el global `effects.overlayBlur`). */
+  overlayBlur?: string;
+}
+
+/**
+ * Confirm. Los colores del círculo del tono danger van en el CSS (`--mimi-confirm-icon-bg`,
+ * `-icon-fg`).
+ */
+export interface MimiConfirmTokens {
+  /** Ancho del panel (380px). */
+  width?: string;
+}
+
+/**
+ * Toast. El fondo, el borde y la sombra van en el CSS (`--mimi-toast-bg`, `-border`, `-shadow`).
+ */
+export interface MimiToastTokens {
+  radius?: string;
+  /** Ancho de la pila (340px). */
+  width?: string;
+  /** Separación de la pila con el borde de la pantalla (16px). */
+  offset?: string;
+  /** Cuánto asoma cada toast de atrás con la pila colapsada (12px). */
+  stackGap?: string;
+}
+
+/**
+ * Tabs. Los colores (pestañas, indicador y píldora) van en el CSS (`--mimi-tabs-fg`,
+ * `-active-fg`, `-indicator`, `-pill-bg`, `-pill-active`).
+ */
+export interface MimiTabsTokens {
+  /** Alto de las pestañas subrayadas (44px). */
+  height?: string;
+  /** Curva del indicador (`cubic-bezier(.3, 1.35, .5, 1)`). */
+  spring?: string;
+}
+
+/**
+ * mimi-toolbar. Fondo, borde, sombra, disco activo, anillo y presionado van en el CSS
+ * (`--mimi-toolbar-bg`, `-border`, `-shadow`, `-active-bg`, `-active-fg`, `-ring`, `-pressed-bg`).
+ */
+export interface MimiToolbarTokens {
+  /** Tamaño de cada botón (40px). */
+  itemSize?: string;
+  /** Desenfoque del fondo (el global `effects.glassBlur`). */
+  blur?: string;
+}
+
+/**
+ * Pagination. Fondo, borde, sombra flotante y error van en el CSS (`--mimi-pagination-bg`,
+ * `-border`, `-shadow`, `-error`).
+ */
+export interface MimiPaginationTokens {
+  /** Tamaño de ← y → y alto del selector (el alto de control: sm 32px, md 40px). */
+  itemSize?: string;
+  /** Ancho del campo de página (sm 44px, md 52px). */
+  inputWidth?: string;
+  /** Desenfoque del fondo (el global `effects.glassBlur`). */
+  blur?: string;
+}
+
+/**
+ * Toggle Group. Fondo, textos, indicador y su sombra van en el CSS (`--mimi-toggle-group-bg`,
+ * `-fg`, `-active-fg`, `-indicator`, `-indicator-shadow`).
+ */
+export interface MimiToggleGroupTokens {
+  /** Radio de cada ítem y del indicador (el global `radius`); el del grupo es radio + relleno. */
+  radius?: string;
+  /** Relleno del grupo (3px). */
+  padding?: string;
+  /** Separación entre ítems (2px). */
+  gap?: string;
+  /** Alto de cada ítem (32px). */
+  itemHeight?: string;
+  /** Relleno horizontal de cada ítem (12px). */
+  itemPx?: string;
+  /** Ancho mínimo de un ítem (el de uno solo con ícono, 44px). */
+  iconWidth?: string;
+  /** Tamaño de texto (13.5px). */
+  fontSize?: string;
+  /** Curva del indicador (`cubic-bezier(.3, 1.35, .5, 1)`, la de Tabs). */
+  spring?: string;
+}
+
+/**
+ * Progress. La pista y la parte llena van en el CSS (`--mimi-progress-track`, `-fill`).
+ */
+export interface MimiProgressTokens {
+  /** Grosor de la barra (8px). */
+  height?: string;
+  /** Tamaño del círculo `default` (76px). */
+  circleSize?: string;
+  /** Grosor del trazo del círculo `default`, en unidades del viewBox de 36 (3). */
+  circleWidth?: string | number;
+}
+
+/**
+ * Number Input. El fondo del botón en hover va en el CSS (`--mimi-number-button-hover`); el
+ * borde, el fondo y los anillos son los de Input (globales).
+ */
+export interface MimiNumberInputTokens {
+  /** Altura (el alto de control). */
+  height?: string;
+  /** Radio de la caja (el global `radius`). */
+  radius?: string;
+  /** Relleno horizontal de la caja (4px). */
+  px?: string;
+  /** Tamaño de los botones − y + (30px). */
+  buttonSize?: string;
+  /** Radio de los botones (el global `radius-sm`). */
+  buttonRadius?: string;
+}
+
+/**
+ * Password. El hover del botón y la pista del medidor van en el CSS
+ * (`--mimi-password-toggle-hover`, `-meter-track`); los colores de los niveles son los globales
+ * `--mimi-strength-*`.
+ */
+export interface MimiPasswordTokens {
+  /** Botón de mostrar u ocultar (32px). */
+  toggleSize?: string;
+  /** Radio del botón (el global `radius-sm`). */
+  toggleRadius?: string;
+  /** Alto de cada barra del medidor (6px). */
+  meterHeight?: string;
+  /** Separación entre barras (4px). */
+  meterGap?: string;
+}
+
+/**
+ * Input Mask. El color del marcador y el fondo del prefijo van en el CSS
+ * (`--mimi-mask-placeholder`, `-prefix-bg`); la caja usa los tokens de Input.
+ */
+export interface MimiInputMaskTokens {
+  /** Separación entre el prefijo, el ícono y el texto (8px). */
+  gap?: string;
+  /** Alto del prefijo (26px). */
+  prefixHeight?: string;
+  /** Radio del prefijo (el global `radius-sm`). */
+  prefixRadius?: string;
+}
+
+/**
+ * Input OTP. Fondo, borde, separador y cursor van en el CSS (`--mimi-otp-bg`, `-border`,
+ * `-separator`, `-caret`).
+ */
+export interface MimiInputOtpTokens {
+  /** Ancho de la casilla (46px). */
+  width?: string;
+  /** Alto de la casilla (54px). */
+  height?: string;
+  /** Separación entre casillas (8px). */
+  gap?: string;
+  /** Radio (el global `radius`). */
+  radius?: string;
+  /** Tamaño del carácter (22px). */
+  fontSize?: string;
+}
+
+/** Chip (Tags Input y Combobox). Los colores van en el CSS (`--mimi-chip-bg`, `-fg`). */
+export interface MimiChipTokens {
+  /** Alto (26px). */
+  height?: string;
+  /** Radio (el global `badge-radius`). */
+  radius?: string;
+  /** Tamaño de texto (13px). */
+  fontSize?: string;
+  /** Botón de quitar (18px). */
+  removeSize?: string;
+}
+
+/** Tags Input. El borde con el límite alcanzado va en el CSS (`--mimi-tags-full-border`). */
+export interface MimiTagsInputTokens {
+  /** Separación entre chips (6px). */
+  gap?: string;
+  /** Relleno de la caja (`5px 10px 5px 6px`). */
+  padding?: string;
+  /** Ancho mínimo del campo de texto (120px). */
+  inputMinWidth?: string;
+}
+
+/**
+ * Slider. Pista, relleno, pulgar y su sombra van en el CSS (`--mimi-slider-track`, `-fill`,
+ * `-thumb`, `-thumb-shadow`); la burbuja usa los colores de Tooltip.
+ */
+export interface MimiSliderTokens {
+  /** Grosor de la pista (6px). */
+  height?: string;
+  /** Tamaño del pulgar (20px). */
+  thumbSize?: string;
+}
+
+/**
+ * Combobox. El fondo y la sombra del panel y la opción activa van en el CSS
+ * (`--mimi-combobox-menu-bg`, `-menu-shadow`, `-option-hover`).
+ */
+export interface MimiComboboxTokens {
+  /** Alto del campo (el global `control-height`). */
+  height?: string;
+  /** Radio del campo y del panel (el global `radius`). */
+  radius?: string;
+  /** Alto máximo del panel (228px). */
+  menuMaxHeight?: string;
+  /** Alto mínimo de cada opción (34px). */
+  optionHeight?: string;
+  /** Radio de cada opción (el global `radius-sm`). */
+  optionRadius?: string;
+}
+
+/**
+ * Calendario, Date Picker y Date Range (una tabla, decidido por defecto en la G2.9). Los colores
+ * van en el CSS (`--mimi-date-cell-hover`, `-selected-bg`, `-selected-fg`, `-range`,
+ * `-today-ring`, `-menu-bg`, `-menu-shadow`).
+ */
+export interface MimiDateTokens {
+  /** Tamaño de cada día (36px). */
+  cellSize?: string;
+  /** Radio de cada día (el global `radius-sm`). */
+  cellRadius?: string;
+  /** Relleno del panel (12px). */
+  padding?: string;
+  /** Ancho de la columna de atajos del rango (130px). */
+  presetsWidth?: string;
+}
+
+/**
+ * File Upload. Fondos y bordes de la zona van en el CSS (`--mimi-upload-bg`, `-border`,
+ * `-active-bg`, `-active-border`).
+ */
+export interface MimiFileUploadTokens {
+  /** Radio de la zona (el global `radius-card`). */
+  radius?: string;
+  /** Alto mínimo de la zona (176px). */
+  height?: string;
+  /** Círculo del ícono (44px). */
+  iconSize?: string;
+  /** Radio de cada fila (el global `radius`). */
+  itemRadius?: string;
+  /** Miniatura de cada fila (44px). */
+  thumbSize?: string;
+}
+
+/**
+ * Color Picker. Fondo, sombra, el borde y la sombra de los pulgares y el borde de las muestras
+ * van en el CSS (`--mimi-color-picker-bg`, `-shadow`, `-thumb-border`, `-thumb-shadow`,
+ * `-swatch-border`).
+ */
+export interface MimiColorPickerTokens {
+  /** Radio del panel (el global `radius`). */
+  radius?: string;
+  /** Ancho del panel (280px). */
+  width?: string;
+  /** Relleno y separación (12px). */
+  padding?: string;
+  /** Alto del área de saturación (150px). */
+  areaHeight?: string;
+  /** Radio del área (el global `radius-sm`). */
+  areaRadius?: string;
+  /** Alto de la barra de tono (12px). */
+  hueHeight?: string;
+  /** Separación de las muestras (6px). */
+  swatchGap?: string;
+}
+
+/**
+ * Tokens por componente (spec 13). Solo los que no dependen del modo: los colores de los
+ * componentes (`--mimi-<prefijo>-bg`, `-fg`, `-border`…) se cambian en el CSS (spec 6.2).
+ */
 export interface MimiComponentTokens {
   button?: MimiButtonTokens;
   input?: MimiInputTokens;
   card?: MimiCardTokens;
-  // select y dialog se agregan en la Fase 4
+  avatar?: MimiAvatarTokens;
+  switch?: MimiSwitchTokens;
+  checkbox?: MimiCheckboxTokens;
+  formField?: MimiFieldTokens;
+  separator?: MimiSeparatorTokens;
+  skeleton?: MimiSkeletonTokens;
+  badge?: MimiBadgeTokens;
+  textarea?: MimiTextareaTokens;
+  popover?: MimiPopoverTokens;
+  tooltip?: MimiTooltipTokens;
+  menu?: MimiMenuTokens;
+  select?: MimiSelectTokens;
+  dialog?: MimiDialogTokens;
+  confirm?: MimiConfirmTokens;
+  toast?: MimiToastTokens;
+  tabs?: MimiTabsTokens;
+  toolbar?: MimiToolbarTokens;
+  pagination?: MimiPaginationTokens;
+  toggleGroup?: MimiToggleGroupTokens;
+  progress?: MimiProgressTokens;
+  numberInput?: MimiNumberInputTokens;
+  password?: MimiPasswordTokens;
+  inputMask?: MimiInputMaskTokens;
+  inputOtp?: MimiInputOtpTokens;
+  chip?: MimiChipTokens;
+  tagsInput?: MimiTagsInputTokens;
+  slider?: MimiSliderTokens;
+  combobox?: MimiComboboxTokens;
+  date?: MimiDateTokens;
+  fileUpload?: MimiFileUploadTokens;
+  colorPicker?: MimiColorPickerTokens;
 }
 
 export interface MimiThemePreset {
@@ -119,6 +608,7 @@ export interface MimiThemePreset {
   darkShadows?: MimiShadowTokens;
   fonts?: MimiFontTokens;
   motion?: MimiMotionTokens;
-  controls?: MimiControlSizeTokens;
+  effects?: MimiEffectTokens;
+  controls?: MimiSharedTokens;
   components?: MimiComponentTokens;
 }

package/dist/templates/utils/cn.ts

@@ -5,7 +5,7 @@ import { extendTailwindMerge } from 'tailwind-merge';
  * tailwind-merge solo reconoce tallas (sm, md, lg…) en las escalas de sombra y radio.
  * Sin registrar los tokens de Mimi, `shadow-card` se tomaría como color de sombra y
  * `rounded-card` no se fusionaría con otros `rounded-*`; lo mismo `animate-mimi-pulse` con
- * `animate-none`. Los colores no hace falta registrarlos: la escala de color acepta cualquier
+ * `animate-none` y `backdrop-blur-glass` con otros `backdrop-blur-*`. Los colores no hace falta registrarlos: la escala de color acepta cualquier
  * nombre.
  */
 const twMerge = extendTailwindMerge({
@@ -20,8 +20,22 @@ const twMerge = extendTailwindMerge({
         'neutral',
         'neutral-hover',
         'thumb',
+        'success',
+        'success-hover',
+        'warning',
+        'warning-hover',
+        'info',
+        'info-hover',
+        'popover',
+        'glow',
+        'glow-primary',
+        'glow-success',
+        'glow-warning',
+        'glow-info',
+        'glow-destructive',
       ],
       radius: ['card', 'badge'],
+      blur: ['glass', 'overlay'],
       animate: ['mimi-pulse'],
     },
     classGroups: {

package/dist/templates/utils/control-styles.ts

@@ -19,9 +19,9 @@ export const fieldFocusStyles =
 export const controlDisabledStyles =
   'disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50';
 
-/** Inválido: borde destructive fijo y halo destructive-soft solo al enfocar. */
+/** Inválido: borde destructive fijo y halo destructive-ring solo al enfocar. */
 export const controlInvalidStyles =
-  'aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-destructive-soft';
+  'aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-destructive-ring';
 
 /** Transición y escala al hacer clic. Solo botones. */
 export const controlPressStyles = 'mimi-transition active:scale-(--mimi-press-scale)';