@mimi-ng/cli 0.1.1 → 0.3.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. Mimi necesita `@angular/cdk` y `@angular/aria` 22.2.4 o posterior (con 22.2.3, Combobox y Select pueden fallar al destruirse): si ya los tienes en una versión anterior, `ng g mimi` te avisa (no los cambia por ti); actualízalos con `ng update @angular/cdk @angular/aria`. Más en [Fundamentos](https://ng.mimiworks.dev/docs/foundations).
+
+Después lo importas como cualquier otro:
 
 ```ts
 import { MimiButton } from '@/components/ui/button';
@@ -65,13 +67,38 @@ export class App {}
 - **Badge**: `ng g mimi badge` · [documentación](https://ng.mimiworks.dev/docs/components/badge)
 - **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)
+- **Calendar**: `ng g mimi calendar` · [documentación](https://ng.mimiworks.dev/docs/components/date-picker)
 - **Checkbox**: `ng g mimi checkbox` · [documentación](https://ng.mimiworks.dev/docs/components/switch)
+- **Color Picker**: `ng g mimi color-picker` · [documentación](https://ng.mimiworks.dev/docs/components/color-picker)
+- **Combobox**: `ng g mimi combobox` · [documentación](https://ng.mimiworks.dev/docs/components/combobox)
+- **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)
+- **Date Picker**: `ng g mimi date-picker` · [documentación](https://ng.mimiworks.dev/docs/components/date-picker)
+- **Date Range**: `ng g mimi date-range` · [documentación](https://ng.mimiworks.dev/docs/components/date-range)
+- **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)
+- **File Upload**: `ng g mimi file-upload` · [documentación](https://ng.mimiworks.dev/docs/components/file-upload)
 - **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)
+- **Input Mask**: `ng g mimi input-mask` · [documentación](https://ng.mimiworks.dev/docs/components/input-mask)
+- **Input OTP**: `ng g mimi input-otp` · [documentación](https://ng.mimiworks.dev/docs/components/input-otp)
+- **Number Input**: `ng g mimi number-input` · [documentación](https://ng.mimiworks.dev/docs/components/number-input)
+- **Pagination**: `ng g mimi pagination` · [documentación](https://ng.mimiworks.dev/docs/components/pagination)
+- **Password**: `ng g mimi password` · [documentación](https://ng.mimiworks.dev/docs/components/password)
+- **Popover**: `ng g mimi popover` · [documentación](https://ng.mimiworks.dev/docs/components/popover)
+- **Progress**: `ng g mimi progress` · [documentación](https://ng.mimiworks.dev/docs/components/progress)
+- **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)
+- **Slider**: `ng g mimi slider` · [documentación](https://ng.mimiworks.dev/docs/components/slider)
 - **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)
+- **Tags Input**: `ng g mimi tags-input` · [documentación](https://ng.mimiworks.dev/docs/components/tags-input)
+- **Toast**: `ng g mimi toast` · [documentación](https://ng.mimiworks.dev/docs/components/toast)
+- **Toggle Group**: `ng g mimi toggle-group` · [documentación](https://ng.mimiworks.dev/docs/components/toggle-group)
+- **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.3.0",
   "suggestedDependencies": {
     "@lucide/angular": "^1.47.0"
   },
@@ -29,6 +29,57 @@
         "@angular/forms": "^22.0.0"
       }
     },
+    "utils/overlay": {
+      "type": "util",
+      "files": [
+        "utils/overlay.ts"
+      ],
+      "peerDependencies": {
+        "@angular/cdk": "^22.2.4"
+      }
+    },
+    "menu": {
+      "type": "util",
+      "files": [
+        "components/menu/menu.ts",
+        "components/menu/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/aria": "^22.2.4"
+      },
+      "registryDependencies": [
+        "utils/cn",
+        "utils/overlay"
+      ]
+    },
+    "chip": {
+      "type": "util",
+      "files": [
+        "components/chip/chip.ts",
+        "components/chip/chip-texts.ts",
+        "components/chip/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/cdk": "^22.2.4"
+      },
+      "registryDependencies": [
+        "utils/cn",
+        "utils/control-styles"
+      ]
+    },
+    "option-list": {
+      "type": "util",
+      "files": [
+        "components/option-list/option-list.ts",
+        "components/option-list/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/aria": "^22.2.4"
+      },
+      "registryDependencies": [
+        "utils/cn"
+      ]
+    },
     "theme": {
       "type": "theme",
       "files": [
@@ -106,6 +157,380 @@
         "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.4"
+      },
+      "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.4"
+      },
+      "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.4"
+      },
+      "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.4"
+      },
+      "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.4"
+      },
+      "registryDependencies": [
+        "button",
+        "input",
+        "select",
+        "utils/cn"
+      ]
+    },
+    "input-mask": {
+      "type": "component",
+      "files": [
+        "components/input-mask/input-mask.ts",
+        "components/input-mask/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/forms": "^22.0.0"
+      },
+      "registryDependencies": [
+        "utils/cn",
+        "utils/field-state"
+      ]
+    },
+    "input-otp": {
+      "type": "component",
+      "files": [
+        "components/input-otp/input-otp.ts",
+        "components/input-otp/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/forms": "^22.0.0"
+      },
+      "registryDependencies": [
+        "utils/cn",
+        "utils/field-state"
+      ]
+    },
+    "number-input": {
+      "type": "component",
+      "files": [
+        "components/number-input/number-input.ts",
+        "components/number-input/number-input-texts.ts",
+        "components/number-input/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/forms": "^22.0.0"
+      },
+      "registryDependencies": [
+        "utils/cn",
+        "utils/field-state"
+      ]
+    },
+    "password": {
+      "type": "component",
+      "files": [
+        "components/password/password.ts",
+        "components/password/password-texts.ts",
+        "components/password/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/cdk": "^22.2.4"
+      },
+      "registryDependencies": [
+        "input",
+        "utils/cn",
+        "utils/control-styles"
+      ]
+    },
+    "progress": {
+      "type": "component",
+      "files": [
+        "components/progress/progress.ts",
+        "components/progress/index.ts"
+      ],
+      "registryDependencies": [
+        "utils/cn"
+      ]
+    },
+    "slider": {
+      "type": "component",
+      "files": [
+        "components/slider/slider.ts",
+        "components/slider/slider-texts.ts",
+        "components/slider/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/cdk": "^22.2.4",
+        "@angular/forms": "^22.0.0"
+      },
+      "registryDependencies": [
+        "utils/cn",
+        "utils/control-styles",
+        "utils/field-state"
+      ]
+    },
+    "combobox": {
+      "type": "component",
+      "files": [
+        "components/combobox/combobox.ts",
+        "components/combobox/combobox-texts.ts",
+        "components/combobox/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/aria": "^22.2.4",
+        "@angular/cdk": "^22.2.4",
+        "@angular/forms": "^22.0.0"
+      },
+      "cssImports": [
+        "@angular/cdk/overlay-prebuilt.css"
+      ],
+      "registryDependencies": [
+        "chip",
+        "option-list",
+        "utils/cn",
+        "utils/field-state",
+        "utils/overlay"
+      ]
+    },
+    "calendar": {
+      "type": "component",
+      "files": [
+        "components/calendar/calendar.ts",
+        "components/calendar/calendar-texts.ts",
+        "components/calendar/dates.ts",
+        "components/calendar/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/cdk": "^22.2.4"
+      },
+      "registryDependencies": [
+        "utils/cn",
+        "utils/control-styles"
+      ]
+    },
+    "date-picker": {
+      "type": "component",
+      "files": [
+        "components/date-picker/date-picker.ts",
+        "components/date-picker/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/forms": "^22.0.0"
+      },
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "utils/cn",
+        "utils/control-styles",
+        "utils/field-state"
+      ]
+    },
+    "date-range": {
+      "type": "component",
+      "files": [
+        "components/date-range/date-range.ts",
+        "components/date-range/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/forms": "^22.0.0"
+      },
+      "registryDependencies": [
+        "calendar",
+        "date-picker",
+        "popover",
+        "utils/cn",
+        "utils/control-styles",
+        "utils/field-state"
+      ]
+    },
+    "file-upload": {
+      "type": "component",
+      "files": [
+        "components/file-upload/file-upload.ts",
+        "components/file-upload/file-upload-texts.ts",
+        "components/file-upload/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/cdk": "^22.2.4",
+        "@angular/forms": "^22.0.0"
+      },
+      "registryDependencies": [
+        "button",
+        "progress",
+        "utils/cn",
+        "utils/control-styles",
+        "utils/field-state"
+      ]
+    },
+    "color-picker": {
+      "type": "component",
+      "files": [
+        "components/color-picker/color-picker.ts",
+        "components/color-picker/color-picker-texts.ts",
+        "components/color-picker/color.ts",
+        "components/color-picker/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/forms": "^22.0.0"
+      },
+      "registryDependencies": [
+        "input",
+        "popover",
+        "utils/cn",
+        "utils/control-styles",
+        "utils/field-state"
+      ]
+    },
+    "tags-input": {
+      "type": "component",
+      "files": [
+        "components/tags-input/tags-input.ts",
+        "components/tags-input/tags-input-texts.ts",
+        "components/tags-input/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/forms": "^22.0.0"
+      },
+      "registryDependencies": [
+        "chip",
+        "utils/cn",
+        "utils/field-state"
+      ]
+    },
+    "toggle-group": {
+      "type": "component",
+      "files": [
+        "components/toggle-group/toggle-group.ts",
+        "components/toggle-group/index.ts"
+      ],
+      "dependencies": {
+        "class-variance-authority": "^0.7.1"
+      },
+      "peerDependencies": {
+        "@angular/cdk": "^22.2.4",
+        "@angular/forms": "^22.0.0"
+      },
+      "registryDependencies": [
+        "utils/cn",
+        "utils/control-styles"
+      ]
+    },
+    "toolbar": {
+      "type": "component",
+      "files": [
+        "components/toolbar/toolbar.ts",
+        "components/toolbar/index.ts"
+      ],
+      "dependencies": {
+        "class-variance-authority": "^0.7.1"
+      },
+      "peerDependencies": {
+        "@angular/cdk": "^22.2.4"
+      },
+      "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.4"
+      },
+      "cssImports": [
+        "@angular/cdk/overlay-prebuilt.css"
+      ],
+      "registryDependencies": [
+        "menu",
+        "utils/overlay"
+      ]
+    },
     "form-field": {
       "type": "component",
       "files": [
@@ -135,6 +560,45 @@
         "utils/field-state"
       ]
     },
+    "popover": {
+      "type": "component",
+      "files": [
+        "components/popover/popover.ts",
+        "components/popover/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/cdk": "^22.2.4"
+      },
+      "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.4",
+        "@angular/cdk": "^22.2.4",
+        "@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 +638,23 @@
         "utils/field-state"
       ]
     },
+    "tooltip": {
+      "type": "component",
+      "files": [
+        "components/tooltip/tooltip.ts",
+        "components/tooltip/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/cdk": "^22.2.4"
+      },
+      "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' },