@mimi-ng/cli 0.1.0 → 0.2.0

package/README.md

@@ -1,5 +1,8 @@
 # Mimi para Angular
 
+[![npm](https://img.shields.io/npm/v/@mimi-ng/cli)](https://www.npmjs.com/package/@mimi-ng/cli)
+[![Licencia: MIT](https://img.shields.io/npm/l/@mimi-ng/cli)](https://github.com/nuki23/mimi-ng/blob/main/LICENSE)
+
 > Angular + Tailwind CSS components you copy into your project. Docs in Spanish; English coming soon.
 
 Componentes para **Angular** y **Tailwind CSS 4** que una CLI copia a tu proyecto: desde ese momento, el código es tuyo. Un solo prefijo (`mimi`), tema opcional y tipado, y formularios con errores automáticos.
@@ -10,6 +13,8 @@ Mimi nació como "lo mío". Su promesa es que sea tuyo.
 
 Documentación: **https://ng.mimiworks.dev**
 
+![Página de inicio de Mimi para Angular en ng.mimiworks.dev](https://raw.githubusercontent.com/nuki23/mimi-ng/main/docs/assets/mimi-ng-showcase.png)
+
 ## Requisitos
 
 - Angular 22 o superior.
@@ -41,7 +46,9 @@ ng g mimi                     # menú para elegir (terminal interactiva)
 ng g @mimi-ng/cli:ui button   # forma larga (si Mimi no está en schematicCollections)
 ```
 
-Cada componente se copia a `src/app/components/ui/<nombre>`, con lo que necesite, y se instalan las dependencias que falten. Después lo importas como cualquier otro:
+Cada componente se copia a `src/app/components/ui/<nombre>`, con lo que necesite, y se instalan las dependencias que falten. Algunos usan por dentro `@angular/cdk` y `@angular/aria`, paquetes oficiales del equipo de Angular: `ng g mimi` los instala cuando hacen falta (aria en la versión exacta de tu cdk) y agrega los estilos del CDK a tu CSS global. Más en [Fundamentos](https://ng.mimiworks.dev/docs/foundations).
+
+Después lo importas como cualquier otro:
 
 ```ts
 import { MimiButton } from '@/components/ui/button';
@@ -61,12 +68,23 @@ export class App {}
 - **Button**: `ng g mimi button` · [documentación](https://ng.mimiworks.dev/docs/components/button)
 - **Card**: `ng g mimi card` · [documentación](https://ng.mimiworks.dev/docs/components/card)
 - **Checkbox**: `ng g mimi checkbox` · [documentación](https://ng.mimiworks.dev/docs/components/switch)
+- **Confirm**: `ng g mimi confirm` · [documentación](https://ng.mimiworks.dev/docs/components/confirm)
+- **Context Menu**: `ng g mimi context-menu` · [documentación](https://ng.mimiworks.dev/docs/components/context-menu)
+- **Dialog**: `ng g mimi dialog` · [documentación](https://ng.mimiworks.dev/docs/components/dialog)
+- **Dropdown Menu**: `ng g mimi dropdown-menu` · [documentación](https://ng.mimiworks.dev/docs/components/dropdown-menu)
 - **FormField**: `ng g mimi form-field` · [documentación](https://ng.mimiworks.dev/docs/components/form-field)
 - **Input**: `ng g mimi input` · [documentación](https://ng.mimiworks.dev/docs/components/input)
+- **Pagination**: `ng g mimi pagination` · [documentación](https://ng.mimiworks.dev/docs/components/pagination)
+- **Popover**: `ng g mimi popover` · [documentación](https://ng.mimiworks.dev/docs/components/popover)
+- **Select**: `ng g mimi select` · [documentación](https://ng.mimiworks.dev/docs/components/select)
 - **Separator**: `ng g mimi separator` · [documentación](https://ng.mimiworks.dev/docs/components/separator)
 - **Skeleton**: `ng g mimi skeleton` · [documentación](https://ng.mimiworks.dev/docs/components/skeleton)
 - **Switch**: `ng g mimi switch` · [documentación](https://ng.mimiworks.dev/docs/components/switch)
+- **Tabs**: `ng g mimi tabs` · [documentación](https://ng.mimiworks.dev/docs/components/tabs)
 - **Textarea**: `ng g mimi textarea` · [documentación](https://ng.mimiworks.dev/docs/components/input)
+- **Toast**: `ng g mimi toast` · [documentación](https://ng.mimiworks.dev/docs/components/toast)
+- **Toolbar**: `ng g mimi toolbar` · [documentación](https://ng.mimiworks.dev/docs/components/toolbar)
+- **Tooltip**: `ng g mimi tooltip` · [documentación](https://ng.mimiworks.dev/docs/components/tooltip)
 
 ## Tus cambios
 

package/dist/collection.json

@@ -3,7 +3,7 @@
   "schematics": {
     "ng-add": {
       "factory": "./ng-add/index#ngAdd",
-      "schema": "./init/schema.json",
+      "schema": "./ng-add/schema.json",
       "description": "Instala Mimi en el proyecto: ejecuta init.",
       "hidden": true
     },

package/dist/init/css.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.findTailwindImport = findTailwindImport;
 exports.insertAfterTailwind = insertAfterTailwind;
+exports.insertAfterTheme = insertAfterTheme;
 exports.hasDirective = hasDirective;
 /** `@import "tailwindcss";` o `@import 'tailwindcss' source(none);`, en su propia línea. */
 const TAILWIND_IMPORT = /^[ \t]*@import\s+(["'])tailwindcss\1([^;\n]*);[^\n]*$/m;
@@ -25,6 +26,22 @@ function insertAfterTailwind(css, lines) {
     const insert = lines.map((line) => eol + line).join('');
     return css.slice(0, found.end) + insert + css.slice(found.end);
 }
+/** `@import` del tema de Mimi (`…/theme/theme-base.css`), en su propia línea. */
+const THEME_IMPORT = /^[ \t]*@import\s+(["'])[^"'\n]*theme-base\.css\1[^;\n]*;[^\n]*$/m;
+/**
+ * Inserta líneas después del `@import` del tema o, si no está, después del de Tailwind.
+ * Devuelve null si no hay ninguno de los dos (no se sabe dónde ponerlas).
+ */
+function insertAfterTheme(css, lines) {
+    const theme = THEME_IMPORT.exec(css);
+    if (!theme)
+        return findTailwindImport(css) ? insertAfterTailwind(css, lines) : null;
+    if (lines.length === 0)
+        return css;
+    const end = theme.index + theme[0].length;
+    const eol = eolOf(css);
+    return css.slice(0, end) + lines.map((line) => eol + line).join('') + css.slice(end);
+}
 /** ¿Ya hay un `@import` o `@source` con esa ruta (con comillas simples o dobles)? */
 function hasDirective(css, directive, path) {
     const escaped = path.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

package/dist/init/index.js

@@ -9,11 +9,10 @@ const registry_1 = require("../registry");
 const project_1 = require("../utils/project");
 const write_files_1 = require("../utils/write-files");
 const css_1 = require("./css");
+const items_1 = require("./items");
 const paths_1 = require("./paths");
 /** Alias que usan todos los componentes. Lo configurable es la carpeta a la que apunta. */
 exports.ALIAS = '@/components/ui/*';
-/** Ítems del registro que copia init: el tema y las utilidades base. */
-const INIT_ITEMS = ['theme', 'utils/cn', 'utils/control-styles'];
 /** Paquetes que instala init (versiones del registro). */
 const INIT_PACKAGES = ['clsx', 'tailwind-merge', 'class-variance-authority'];
 const ICONS_PACKAGE = '@lucide/angular';
@@ -35,7 +34,7 @@ function init(options) {
         const report = (0, write_files_1.emptyReport)();
         return (0, schematics_1.chain)([
             (0, write_files_1.writeTemplates)({
-                files: INIT_ITEMS.flatMap((item) => (0, registry_1.resolveItems)(item)).flatMap((item) => registry_1.registry.items[item].files),
+                items: items_1.INIT_ITEMS.flatMap((item) => (0, registry_1.resolveItems)(item)),
                 componentsDir: plan.componentsDir,
                 overwrite: options.overwrite ?? false,
                 version: registry_1.registry.version,
@@ -219,7 +218,7 @@ function writeMimiConfig(plan) {
         if (plan.mimiConfig)
             return;
         const config = {
-            style: 'vivid',
+            style: 'mimi',
             tailwind: { css: plan.cssPath },
             aliases: {
                 components: plan.componentsDir,
@@ -270,10 +269,13 @@ function nextSteps(plan, report, icons) {
         for (const file of report.overwritten) {
             context.logger.info(`Reemplazado: ${plan.componentsDir}/${file}`);
         }
-        const itemOf = (file) => INIT_ITEMS.find((item) => registry_1.registry.items[item].files.includes(file)) ?? file;
+        const itemOf = (file) => items_1.INIT_ITEMS.find((item) => registry_1.registry.items[item].files.includes(file)) ?? file;
         for (const message of (0, write_files_1.updatedMessages)(report, itemOf, registry_1.registry.version)) {
             context.logger.info(message);
         }
+        for (const message of (0, write_files_1.blockedMessages)(report, plan.componentsDir, registry_1.registry.version)) {
+            context.logger.warn(message);
+        }
         if (!plan.changed && !(0, write_files_1.hasFileChanges)(report)) {
             context.logger.info('Mimi ya estaba configurado; no hubo cambios.');
             return;

package/dist/init/items.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INIT_ITEMS = void 0;
+/**
+ * Ítems del registro que copia init: el tema y las utilidades base. `ng g mimi` también los
+ * revisa (y los actualiza si el usuario no los modificó), para que el tema no quede en una
+ * versión anterior a la de los componentes.
+ */
+exports.INIT_ITEMS = ['theme', 'utils/cn', 'utils/control-styles'];

package/dist/ng-add/index.js

@@ -1,8 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseIcons = parseIcons;
 exports.ngAdd = ngAdd;
 const schematics_1 = require("@angular-devkit/schematics");
+/**
+ * Antes de instalar el paquete, `ng add` no conoce este esquema y pasa `--icons=false` y
+ * `--icons=true` como texto (tarea 0.1.1-1). Se convierten aquí, porque init vuelve a validar
+ * con su esquema booleano.
+ */
+function parseIcons(icons) {
+    if (icons === undefined || typeof icons === 'boolean')
+        return icons;
+    if (icons === 'true')
+        return true;
+    if (icons === 'false')
+        return false;
+    throw new schematics_1.SchematicsException(`--icons acepta true o false (se recibió "${icons}").`);
+}
 /** `ng add @mimi-ng/cli`: ejecuta init con las mismas opciones. */
 function ngAdd(options) {
-    return (0, schematics_1.schematic)('init', options);
+    const icons = parseIcons(options.icons);
+    return (0, schematics_1.schematic)('init', { ...options, icons });
 }

package/dist/ng-add/schema.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "MimiNgAdd",
+  "title": "Mimi ng-add",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "Proyecto de angular.json. Solo hace falta si el workspace tiene varias aplicaciones.",
+      "$default": { "$source": "projectName" }
+    },
+    "icons": {
+      "type": ["boolean", "string"],
+      "description": "Instala @lucide/angular para tus íconos. Acepta también \"true\" y \"false\": antes de instalar el paquete, ng add pasa --icons=false como texto.",
+      "default": false,
+      "x-prompt": {
+        "message": "¿Quieres instalar @lucide/angular para tus íconos? (recomendado)",
+        "type": "confirmation"
+      }
+    },
+    "overwrite": {
+      "type": "boolean",
+      "description": "Reemplaza los archivos de Mimi que ya existan con otro contenido.",
+      "default": false
+    }
+  }
+}

package/dist/registry.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.0",
+  "version": "0.2.0",
   "suggestedDependencies": {
     "@lucide/angular": "^1.47.0"
   },
@@ -29,6 +29,29 @@
         "@angular/forms": "^22.0.0"
       }
     },
+    "utils/overlay": {
+      "type": "util",
+      "files": [
+        "utils/overlay.ts"
+      ],
+      "peerDependencies": {
+        "@angular/cdk": "^22.2.0"
+      }
+    },
+    "menu": {
+      "type": "util",
+      "files": [
+        "components/menu/menu.ts",
+        "components/menu/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/aria": "^22.2.0"
+      },
+      "registryDependencies": [
+        "utils/cn",
+        "utils/overlay"
+      ]
+    },
     "theme": {
       "type": "theme",
       "files": [
@@ -106,6 +129,148 @@
         "utils/field-state"
       ]
     },
+    "confirm": {
+      "type": "component",
+      "files": [
+        "components/confirm/confirm.ts",
+        "components/confirm/confirm-texts.ts",
+        "components/confirm/index.ts"
+      ],
+      "registryDependencies": [
+        "button",
+        "dialog",
+        "utils/cn"
+      ]
+    },
+    "context-menu": {
+      "type": "component",
+      "files": [
+        "components/context-menu/context-menu.ts",
+        "components/context-menu/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/cdk": "^22.2.0"
+      },
+      "cssImports": [
+        "@angular/cdk/overlay-prebuilt.css"
+      ],
+      "registryDependencies": [
+        "menu",
+        "utils/overlay"
+      ]
+    },
+    "dialog": {
+      "type": "component",
+      "files": [
+        "components/dialog/dialog.ts",
+        "components/dialog/dialog-texts.ts",
+        "components/dialog/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/cdk": "^22.2.0"
+      },
+      "cssImports": [
+        "@angular/cdk/overlay-prebuilt.css"
+      ],
+      "registryDependencies": [
+        "utils/cn",
+        "utils/control-styles",
+        "utils/overlay"
+      ]
+    },
+    "tabs": {
+      "type": "component",
+      "files": [
+        "components/tabs/tabs.ts",
+        "components/tabs/index.ts"
+      ],
+      "dependencies": {
+        "class-variance-authority": "^0.7.1"
+      },
+      "peerDependencies": {
+        "@angular/aria": "^22.2.0"
+      },
+      "registryDependencies": [
+        "utils/cn",
+        "utils/control-styles"
+      ]
+    },
+    "toast": {
+      "type": "component",
+      "files": [
+        "components/toast/toast.ts",
+        "components/toast/toast-config.ts",
+        "components/toast/toast-texts.ts",
+        "components/toast/index.ts"
+      ],
+      "dependencies": {
+        "class-variance-authority": "^0.7.1"
+      },
+      "peerDependencies": {
+        "@angular/cdk": "^22.2.0"
+      },
+      "registryDependencies": [
+        "button",
+        "utils/cn",
+        "utils/control-styles",
+        "utils/overlay"
+      ]
+    },
+    "pagination": {
+      "type": "component",
+      "files": [
+        "components/pagination/pagination.ts",
+        "components/pagination/pagination-page-size.ts",
+        "components/pagination/pagination-texts.ts",
+        "components/pagination/index.ts"
+      ],
+      "dependencies": {
+        "class-variance-authority": "^0.7.1"
+      },
+      "peerDependencies": {
+        "@angular/cdk": "^22.2.0"
+      },
+      "registryDependencies": [
+        "button",
+        "input",
+        "select",
+        "utils/cn"
+      ]
+    },
+    "toolbar": {
+      "type": "component",
+      "files": [
+        "components/toolbar/toolbar.ts",
+        "components/toolbar/index.ts"
+      ],
+      "dependencies": {
+        "class-variance-authority": "^0.7.1"
+      },
+      "peerDependencies": {
+        "@angular/cdk": "^22.2.0"
+      },
+      "registryDependencies": [
+        "utils/cn",
+        "utils/control-styles"
+      ]
+    },
+    "dropdown-menu": {
+      "type": "component",
+      "files": [
+        "components/dropdown-menu/dropdown-menu.ts",
+        "components/dropdown-menu/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/cdk": "^22.2.0"
+      },
+      "cssImports": [
+        "@angular/cdk/overlay-prebuilt.css"
+      ],
+      "registryDependencies": [
+        "menu",
+        "utils/overlay"
+      ]
+    },
     "form-field": {
       "type": "component",
       "files": [
@@ -135,6 +300,45 @@
         "utils/field-state"
       ]
     },
+    "popover": {
+      "type": "component",
+      "files": [
+        "components/popover/popover.ts",
+        "components/popover/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/cdk": "^22.2.0"
+      },
+      "cssImports": [
+        "@angular/cdk/overlay-prebuilt.css"
+      ],
+      "registryDependencies": [
+        "utils/cn",
+        "utils/overlay"
+      ]
+    },
+    "select": {
+      "type": "component",
+      "files": [
+        "components/select/select.ts",
+        "components/select/select-texts.ts",
+        "components/select/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/aria": "^22.2.0",
+        "@angular/cdk": "^22.2.0",
+        "@angular/forms": "^22.0.0"
+      },
+      "cssImports": [
+        "@angular/cdk/overlay-prebuilt.css"
+      ],
+      "registryDependencies": [
+        "utils/cn",
+        "utils/control-styles",
+        "utils/field-state",
+        "utils/overlay"
+      ]
+    },
     "separator": {
       "type": "component",
       "files": [
@@ -174,6 +378,23 @@
         "utils/field-state"
       ]
     },
+    "tooltip": {
+      "type": "component",
+      "files": [
+        "components/tooltip/tooltip.ts",
+        "components/tooltip/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/cdk": "^22.2.0"
+      },
+      "cssImports": [
+        "@angular/cdk/overlay-prebuilt.css"
+      ],
+      "registryDependencies": [
+        "utils/cn",
+        "utils/overlay"
+      ]
+    },
     "textarea": {
       "type": "component",
       "files": [

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

@@ -117,7 +117,7 @@ export class MimiAvatarFallback {
 
   protected readonly classes = computed(() =>
     cn(
-      'flex size-full items-center justify-center rounded-full bg-secondary font-semibold text-secondary-foreground',
+      'flex size-full items-center justify-center rounded-[var(--mimi-avatar-radius,calc(infinity*1px))] bg-[color:var(--mimi-avatar-bg,var(--mimi-secondary))] font-semibold text-[color:var(--mimi-avatar-fg,var(--mimi-secondary-foreground))]',
       this.userClass(),
       // Al final: con la imagen cargada se oculta aunque el usuario pase `flex`.
       this.avatar.status() === 'loaded' && 'hidden',

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

@@ -6,13 +6,13 @@ import { cva, type VariantProps } from 'class-variance-authority';
  * 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',
+  'relative inline-flex shrink-0 overflow-hidden rounded-[var(--mimi-avatar-radius,calc(infinity*1px))] bg-muted select-none',
   {
     variants: {
       size: {
-        sm: 'size-8 text-xs',
-        default: 'size-10 text-sm',
-        lg: 'size-14 text-lg',
+        sm: 'size-[var(--mimi-avatar-size-sm,2rem)] text-xs',
+        default: 'size-[var(--mimi-avatar-size,2.5rem)] text-sm',
+        lg: 'size-[var(--mimi-avatar-size-lg,3.5rem)] text-lg',
       },
     },
     defaultVariants: { size: 'default' },

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

@@ -1,21 +1,56 @@
-import { Directive, computed, input } from '@angular/core';
+import { Directive, computed, input, isDevMode } from '@angular/core';
 import { cn } from '@/components/ui/utils/cn';
-import { type BadgeVariant, badgeVariants } from './badge.variants';
+import {
+  type BadgeTone,
+  type BadgeVariant,
+  badgeVariants,
+  resolveBadgeStyle,
+} from './badge.variants';
 
-/** Etiqueta estática de Mimi sobre el `<span>` nativo: `<span mimiBadge>Nuevo</span>`. */
+/** El aviso de atajo + tone sale una sola vez por página. */
+let warnedShortcutWithTone = false;
+
+/**
+ * Etiqueta estática de Mimi sobre el `<span>` nativo: `<span mimiBadge>Nuevo</span>`.
+ *
+ * - `variant` (solid, soft, outline) y `tone` (primary, secondary, success, warning, info,
+ *   danger). Sin `tone`, cada variante usa su tono natural: outline es neutro (secondary); las
+ *   demás, primary. `data-variant` y `data-tone` muestran los valores resueltos.
+ * - Los atajos de la 0.1.0 (`default`, `secondary`, `destructive`) siguen funcionando y ganan
+ *   sobre `tone` (en modo desarrollo, avisa una vez).
+ */
 @Directive({
   selector: 'span[mimiBadge]',
   exportAs: 'mimiBadge',
   host: {
     '[class]': 'classes()',
-    '[attr.data-variant]': 'variant()',
+    '[attr.data-variant]': 'resolved().variant',
+    '[attr.data-tone]': 'resolved().tone',
   },
 })
 export class MimiBadge {
-  readonly variant = input<BadgeVariant>('default');
+  /** Incluye los atajos de la 0.1.x (`BadgeVariantShortcut`, deprecados). */
+  readonly variant = input<BadgeVariant>('solid');
+  readonly tone = input<BadgeTone>();
   readonly userClass = input('', { alias: 'class' });
 
+  protected readonly resolved = computed(() => {
+    const style = resolveBadgeStyle(this.variant(), this.tone());
+    if (style.ignoredTone && isDevMode() && !warnedShortcutWithTone) {
+      warnedShortcutWithTone = true;
+      console.warn(
+        `[Mimi] Badge: variant="${this.variant()}" ya define el color; se ignora ` +
+          `tone="${this.tone()}". Usa variant="${style.variant}" con tone (los atajos se ` +
+          `quitan en la 1.0).`,
+      );
+    }
+    return style;
+  });
+
   protected readonly classes = computed(() =>
-    cn(badgeVariants({ variant: this.variant() }), this.userClass()),
+    cn(
+      badgeVariants({ variant: this.resolved().variant, tone: this.resolved().tone }),
+      this.userClass(),
+    ),
   );
 }