@mimi-ng/cli 0.1.1 → 0.2.0

package/README.md

@@ -46,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';
@@ -66,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/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/registry.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.1",
+  "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(),
+    ),
   );
 }

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

@@ -1,4 +1,68 @@
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+/**
+ * Cómo se ve el badge (spec 4, «Variante y tono»), sin los atajos de la 0.1.x. Sin ghost ni link:
+ * el diseño no los tiene.
+ */
+export type BadgeStyleVariant = 'solid' | 'soft' | 'outline';
+
+/** De qué color es. `danger` usa los tokens `destructive`. */
+export type BadgeTone = 'primary' | 'secondary' | 'success' | 'warning' | 'info' | 'danger';
+
+/**
+ * Atajos de la 0.1.0, cuando el color era una variante. Siguen funcionando, sin error ni aviso:
+ * `default` = solid + primary, `secondary` = solid + secondary, `destructive` = solid + danger.
+ * @deprecated Se quitan en la 1.0 (spec 12). Usa `variant` y `tone`.
+ */
+export type BadgeVariantShortcut = 'default' | 'secondary' | 'destructive';
+
+/**
+ * Lo que acepta `variant`: las variantes y, hasta la 1.0, los atajos de la 0.1.x (deprecados), para
+ * que el código que tipaba `BadgeVariant` con `'default'` o `'destructive'` siga compilando.
+ */
+export type BadgeVariant = BadgeStyleVariant | BadgeVariantShortcut;
+
+/** Punto decorativo de outline (un ::before vacío: no lo leen los lectores de pantalla). */
+const DOT = "gap-1.5 before:size-1.5 before:shrink-0 before:rounded-full before:content-['']";
+
+/**
+ * Colores de cada tono en cada variante. Clases completas y literales para Tailwind. Diseño:
+ * docs/design/«Mimi F2 Tokens y Tonos» (Tonos en Badge). Outline lleva un punto del color del
+ * tono; sin tono (secondary) se ve como en la 0.1.0, sin punto. El tono secondary es
+ * provisional, sin diseño (spec 13).
+ */
+const TONE_CLASSES = {
+  primary: {
+    solid: 'border-transparent bg-primary text-primary-foreground',
+    soft: 'border-transparent bg-secondary text-secondary-foreground',
+    outline: `border-border bg-transparent text-foreground ${DOT} before:bg-primary`,
+  },
+  secondary: {
+    solid: 'border-transparent bg-secondary text-secondary-foreground',
+    soft: 'border-transparent bg-muted text-foreground',
+    outline: 'border-border bg-transparent text-foreground',
+  },
+  success: {
+    solid: 'border-transparent bg-success text-success-foreground',
+    soft: 'border-transparent bg-success-soft text-success-soft-foreground',
+    outline: `border-border bg-transparent text-foreground ${DOT} before:bg-success`,
+  },
+  warning: {
+    solid: 'border-transparent bg-warning text-warning-foreground',
+    soft: 'border-transparent bg-warning-soft text-warning-soft-foreground',
+    outline: `border-border bg-transparent text-foreground ${DOT} before:bg-warning`,
+  },
+  info: {
+    solid: 'border-transparent bg-info text-info-foreground',
+    soft: 'border-transparent bg-info-soft text-info-soft-foreground',
+    outline: `border-border bg-transparent text-foreground ${DOT} before:bg-info`,
+  },
+  danger: {
+    solid: 'border-transparent bg-destructive text-destructive-foreground',
+    soft: 'border-transparent bg-destructive-soft-bg text-destructive-soft-foreground',
+    outline: `border-border bg-transparent text-foreground ${DOT} before:bg-destructive`,
+  },
+} as const satisfies Record<BadgeTone, Record<BadgeStyleVariant, string>>;
 
 /**
  * Clases de mimiBadge (docs/design/Mimi Componentes.dc.html, sección 5). Literales para que
@@ -7,21 +71,51 @@ import { cva, type VariantProps } from 'class-variance-authority';
  */
 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',
+    'inline-flex h-[var(--mimi-badge-height,22px)] shrink-0 items-center gap-1 rounded-badge border px-[var(--mimi-badge-px,0.625rem)]',
+    'font-sans text-[length:var(--mimi-badge-font-size,0.75rem)] leading-none font-[weight:var(--mimi-badge-font-weight,600)] 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',
-      },
+      variant: { solid: '', soft: '', outline: '' },
+      tone: { primary: '', secondary: '', success: '', warning: '', info: '', danger: '' },
     },
-    defaultVariants: { variant: 'default' },
+    compoundVariants: Object.entries(TONE_CLASSES).flatMap(([tone, byVariant]) =>
+      Object.entries(byVariant).map(([variant, cls]) => ({
+        tone: tone as BadgeTone,
+        variant: variant as BadgeStyleVariant,
+        class: cls,
+      })),
+    ),
+    defaultVariants: { variant: 'solid', tone: 'primary' },
   },
 );
 
-export type BadgeVariant = NonNullable<VariantProps<typeof badgeVariants>['variant']>;
+/** Sin `tone`, cada variante usa su tono natural: outline es neutro, como en la 0.1.0. */
+const NATURAL_TONE: Record<BadgeStyleVariant, BadgeTone> = {
+  solid: 'primary',
+  soft: 'primary',
+  outline: 'secondary',
+};
+
+const SHORTCUTS: Record<BadgeVariantShortcut, { variant: BadgeStyleVariant; tone: BadgeTone }> = {
+  default: { variant: 'solid', tone: 'primary' },
+  secondary: { variant: 'solid', tone: 'secondary' },
+  destructive: { variant: 'solid', tone: 'danger' },
+};
+
+/**
+ * Resuelve variante y tono. Un atajo de la 0.1.0 gana siempre; `ignoredTone` indica que además
+ * se pasó un `tone` que no se aplicó.
+ */
+export function resolveBadgeStyle(
+  variant: BadgeVariant,
+  tone: BadgeTone | undefined,
+): { variant: BadgeStyleVariant; tone: BadgeTone; ignoredTone: boolean } {
+  if (variant in SHORTCUTS) {
+    const shortcut = SHORTCUTS[variant as BadgeVariantShortcut];
+    return { ...shortcut, ignoredTone: tone !== undefined && tone !== shortcut.tone };
+  }
+  const v = variant as BadgeStyleVariant;
+  return { variant: v, tone: tone ?? NATURAL_TONE[v], ignoredTone: false };
+}