@talex-touch/tuffex 0.3.3 → 0.3.4

package/README.md

@@ -2,269 +2,97 @@
 
 <p align="center">
   <img src="https://img.shields.io/npm/v/@talex-touch/tuffex?style=flat-square&logo=npm&color=ff6b6b" alt="NPM Version">
-  <img src="https://img.shields.io/badge/status-beta-orange?style=flat-square" alt="Beta Status">
-  <img src="https://img.shields.io/badge/Vue-3.5-4fc08d?style=flat-square&logo=vue.js" alt="Vue 3.5">
-  <img src="https://img.shields.io/badge/TypeScript-5.8-3178c6?style=flat-square&logo=typescript" alt="TypeScript">
-  <img src="https://img.shields.io/github/license/talex-touch/tuff?style=flat-square" alt="License">
-  <img src="https://img.shields.io/badge/bundle%20size-<50kb-brightgreen?style=flat-square" alt="Bundle Size">
-  <img src="https://img.shields.io/badge/tree%20shaking-✓-success?style=flat-square" alt="Tree Shaking">
+  <img src="https://img.shields.io/badge/Vue-3.5+-4fc08d?style=flat-square&logo=vue.js" alt="Vue 3.5+">
+  <img src="https://img.shields.io/badge/tree%20shaking-%E2%9C%93-success?style=flat-square" alt="Tree Shaking">
 </p>
 
-<p align="center">
-  <strong>🎭 TuffEx · Beautiful Animations · Living Component Library</strong>
-</p>
-
-<p align="center">
-  A modern Vue3 component library focused on <strong>tactile experience</strong> and <strong>smooth animations</strong><br/>
-  Part of the <a href="https://tuffex.tagzxia.com">Tuff</a> ecosystem - bringing life to every interaction
-</p>
-
-<p align="center">
-  <a href="#-getting-started">Getting Started</a> ·
-  <a href="#-components">Components</a> ·
-  <a href="#-design-philosophy">Design Philosophy</a> ·
-  <a href="#%EF%B8%8F-tech-stack">Tech Stack</a> ·
-  <a href="#-documentation">Documentation</a>
-</p>
-
-<p align="center">
-  <strong>English</strong> | <a href="README_ZHCN.md">简体中文</a>
-</p>
-
----
-
-## ✨ Core Features
-
-| Feature | Description |
-|---------|-------------|
-| **🎭 Living Tactile Experience** | Life-like touch feedback with elastic responses and damping effects |
-| **🌊 Silky Animation System** | 60fps smooth animations based on Bézier curves and physics |
-| **💎 Modern Visual Language** | Glassmorphism aesthetics with frosted glass and material effects |
-| **⚡ Performance Optimized** | Vue3 Composition API with Tree Shaking, 50%+ smaller bundles |
-| **🎨 Enterprise Design System** | Complete Design Tokens with WCAG 2.1 AA accessibility |
-| **📱 Cross-Platform Ready** | Responsive design, PWA and SSR friendly |
-| **🔗 Tuff Ecosystem** | Seamlessly integrated with the Tuff desktop application |
+TuffEx is a Vue 3 component library in the Tuff ecosystem, focused on tactile interaction, animation, and desktop-style UI composition.
 
-## 🚀 Getting Started
-
-### 📦 Installation
-
-Choose your preferred package manager:
+## Installation
 
 ```bash
-# npm
-npm install @talex-touch/tuffex
-
-# yarn
-yarn add @talex-touch/tuffex
-
-# pnpm (recommended)
 pnpm add @talex-touch/tuffex
 ```
 
-### 🔧 Full Import
-
-```typescript
-import { createApp } from 'vue'
-import TuffUI from '@talex-touch/tuffex'
-import '@talex-touch/tuffex/style.css'
-
-const app = createApp(App)
-app.use(TuffUI)
-app.mount('#app')
-```
+## Usage
 
-### 🎯 On-Demand Import (Recommended)
+### Full import
 
-```typescript
+```ts
 import { createApp } from 'vue'
-import { TxButton, TxAvatar } from '@talex-touch/tuffex'
+import TuffEx from '@talex-touch/tuffex'
 import '@talex-touch/tuffex/style.css'
 
 const app = createApp(App)
-app.use(TxButton)
-app.use(TxAvatar)
+app.use(TuffEx)
 ```
 
-### 🎨 Custom Theme (Coming Soon)
+### On-demand import
 
-```typescript
+```ts
 import { createApp } from 'vue'
-import TuffUI from '@talex-touch/tuffex'
+import { TxButton, TxCard, TxDrawer } from '@talex-touch/tuffex'
 import '@talex-touch/tuffex/style.css'
 
 const app = createApp(App)
-
-// Custom theme configuration
-app.use(TuffUI, {
-  theme: {
-    primaryColor: '#6366f1',
-    borderRadius: '12px',
-    animationDuration: '0.3s'
-  }
-})
+app.use(TxButton)
+app.use(TxCard)
+app.use(TxDrawer)
 ```
 
-### 💡 Quick Experience
-
-```vue
-<template>
-  <div class="demo">
-    <!-- Tactile Button -->
-    <TxButton type="primary" @click="handleClick">
-      Feel the Touch
-    </TxButton>
+### Utilities
 
-    <!-- Flowing Avatar -->
-    <TxAvatar
-      src="https://example.com/avatar.jpg"
-      size="large"
-      glow
-    />
-
-    <!-- Glass Card -->
-    <TxCard glass blur>
-      <h3>TuffEx</h3>
-      <p>Bringing life to every interaction</p>
-    </TxCard>
-  </div>
-</template>
-
-<script setup>
-const handleClick = () => {
-  console.log('Can you feel it? This is TuffEx!')
-}
-</script>
+```ts
+import { createToastManager, useVibrate } from '@talex-touch/tuffex/utils'
 ```
 
-## 🎯 Design Philosophy
-
-TuffEx embodies an **interaction philosophy** - interfaces should feel alive and respond with warmth.
-
-**Touch First** - Every interaction has soul through warm, textured feedback systems.
-**Vitality** - Components breathe, express emotions, and anticipate user intentions.
-**Flow Aesthetics** - Functional animations guide users while maintaining visual continuity.
-**Material Experience** - Digital interfaces deserve real material sensations and textures.
-
-## 🎨 Components
-
-> 🚧 **Beta Version** - Currently in beta testing, more components coming soon!
-
-### Available Components
+## Component Inventory
 
-| Component | Description | Status |
-|-----------|-------------|--------|
-| **TxButton** | Tactile buttons with elastic feedback and ripple effects | ✅ Stable |
-| **TxFlatButton** | Flat buttons with hover effects and loading states | ✅ Stable |
-| **TxSwitch** | Toggle switches with smooth animations | ✅ Stable |
+Current source-of-truth export modules: **102**.
 
-### Planned Components
+- `Foundation & Navigation (19)`: `alert`, `avatar`, `badge`, `base-anchor`, `base-surface`, `breadcrumb`, `button`, `corner-overlay`, `icon`, `nav-bar`, `outline-border`, `status-badge`, `tab-bar`, `tabs`, `tag`, `tooltip`, `popover`, `dropdown-menu`, `context-menu`
+- `Form & Input (22)`: `cascader`, `checkbox`, `code-editor`, `date-picker`, `flat-button`, `flat-input`, `flat-radio`, `flat-select`, `form`, `input`, `picker`, `radio`, `rating`, `search-input`, `search-select`, `segmented-slider`, `select`, `slider`, `switch`, `tag-input`, `tree-select`, `transfer`
+- `Layout & Structure (12)`: `agents`, `auto-sizer`, `card-item`, `container`, `flex`, `grid`, `grid-layout`, `group-block`, `scroll`, `splitter`, `stack`, `virtual-list`
+- `Data & State (21)`: `blank-slate`, `card`, `collapse`, `data-table`, `empty`, `empty-state`, `error-state`, `guide-state`, `layout-skeleton`, `loading-state`, `markdown-view`, `no-data`, `no-selection`, `offline-state`, `pagination`, `permission-state`, `search-empty`, `stat-card`, `steps`, `timeline`, `tree`
+- `Feedback & Overlay (12)`: `command-palette`, `dialog`, `drawer`, `flip-overlay`, `floating`, `loading-overlay`, `modal`, `progress`, `progress-bar`, `skeleton`, `spinner`, `toast`
+- `AI & Content (4)`: `chat`, `file-uploader`, `image-gallery`, `image-uploader`
+- `Animation & Visual (12)`: `edge-fade-mask`, `fusion`, `glass-surface`, `glow-text`, `gradient-border`, `gradual-blur`, `keyframe-stroke-text`, `sortable-list`, `stagger`, `text-transformer`, `transition`, `tuff-logo-stroke`
 
-| Component | Description | Status |
-|-----------|-------------|--------|
-| **TxSelect** | Dropdown select with floating positioning | 🚧 In Progress |
-| **TxInput** | Input fields with smooth focus transitions | 🚧 In Progress |
-| **TxModal** | Modal dialogs with entrance animations | 📋 Planned |
-| **TxCard** | Glass-morphism cards with shadow systems | 📋 Planned |
-| **TxScroll** | Custom scrollbar with native feel | 📋 Planned |
-| **TxTabs** | Tab navigation with indicator animations | 📋 Planned |
-| **TxMenu** | Menu components with route integration | 📋 Planned |
-| **TxBadge** | Status badges with pulse effects | 📋 Planned |
+Reference:
 
-*🚀 Components are being migrated from the Tuff core application...*
+- Export entry: `packages/components/src/components.ts`
+- Docs index: [docs/components/index.md](./docs/components/index.md)
 
-## 🏗️ Tech Stack
+## Export Convention
 
-Built with modern frontend technologies aligned with the Tuff core application:
+- Preferred public names use `Tx*` prefix, for example `TxButton`, `TxDialog`.
+- Some modules also keep compatibility aliases (for example `Button` / `TxButton` in certain modules).
+- Type exports are included and can be consumed directly from `@talex-touch/tuffex`.
 
-| Technology | Version | Purpose |
-|------------|---------|---------|
-| **Vue** | 3.5+ | Composition API with `<script setup>` |
-| **TypeScript** | 5.8+ | Complete type safety |
-| **Vite** | 6.0+ | Lightning-fast development |
-| **VitePress** | 1.5+ | Documentation site |
-| **Sass** | 1.89+ | Advanced styling |
-| **VueUse** | 13.0+ | Composition utilities |
+## Documentation
 
-**Design System:**
-- CSS Variables for dynamic theming
-- Tree Shaking for optimized bundle size
-- SCSS Mixins for consistent styling
+- Online docs: [tuffex.tagzxia.com/docs/dev/tuffex](https://tuffex.tagzxia.com/docs/dev/tuffex)
+- Local docs: `pnpm -C "packages/tuffex" run docs:dev`
 
-## 📖 Documentation
-
-- **[TuffEx Documentation](https://tuffex.tagzxia.com/docs/dev/tuffex)** - Official docs in Tuff ecosystem
-- **[Component Docs](http://localhost:8000)** - Local VitePress documentation (run `pnpm docs:dev`)
-
-## 🛠️ Development
+## Development
 
 ```bash
-# In monorepo root
 pnpm install
-
-# In packages/tuffex directory
-pnpm docs:dev          # Start documentation server at :8000
-pnpm build             # Build library with Gulp
-pnpm build:vite        # Build library with Vite
-pnpm docs:build        # Build documentation
-```
-
-## 🗂️ Project Structure
-
-This repository is a pnpm monorepo. TuffEx lives under `packages/tuffex`.
-
+pnpm -C "packages/tuffex" run lint
+pnpm -C "packages/tuffex" run build
+pnpm -C "packages/tuffex" run docs:build
 ```
-talex-touch/tuff
-├── apps/               # Applications (Electron app, Nexus site, ...)
-├── packages/
-│   ├── tuffex/         # TuffEx package (this)
-│   │   ├── packages/components/   # Component source
-│   │   ├── packages/script/       # Build scripts (gulp/vite)
-│   │   ├── docs/                  # VitePress docs
-│   │   └── utils/                 # Scaffolding utilities
-│   └── utils/          # Shared utilities
-├── plugins/            # Example plugins
-└── docs/               # Repo-level docs
-```
-
-## 🔗 Integration with Tuff
-
-TuffEx is designed to work seamlessly with the Tuff desktop application. Components are gradually being migrated from the core renderer to this standalone library for:
-
-1. **Code Reuse** - Share UI components across projects
-2. **Plugin Development** - Enable plugin developers to use consistent UI
-3. **Community** - Allow external projects to adopt Tuff's design language
-## 🤖 Intelligence & AI
-
-- Pair TuffEx with `@talex-touch/tuff-intelligence` to build AI-driven flows (capabilities, prompts, provider routing).
-- Frontend can call the unified intelligence client while reusing TuffEx components for configuration, testing, and auditing views.
-
-## 🤝 Contributing
-
-We welcome all contributions! Please read our [Contributing Guide](CONTRIBUTING.md) for details.
 
-- 🐛 [Report Issues](https://github.com/talex-touch/tuff/issues)
-- 💡 [Feature Requests](https://github.com/talex-touch/tuff/discussions)
-- 🔧 [Submit PRs](https://github.com/talex-touch/tuff/pulls)
+## Integration with Tuff
 
-## 📄 License
+TuffEx is the UI foundation of the [Tuff](https://tuff.tagzxia.com) desktop application. Components are shared between the core app and external plugin developers through this standalone library.
 
-[MIT License](LICENSE) © 2025 TalexDreamSoul
+## Contributing
 
----
+- [Report Issues](https://github.com/talex-touch/tuff/issues)
+- [Feature Requests](https://github.com/talex-touch/tuff/discussions)
+- [Submit PRs](https://github.com/talex-touch/tuff/pulls)
 
-<p align="center">
-  <img src="https://i.imgur.com/pd3YUxf.png" width="120" height="120" alt="TuffEx Logo">
-</p>
+## License
 
-<p align="center">
-  <strong>🎭 Bringing life to every touch</strong><br/>
-  <em>TuffEx - Touchable Beautiful Animations</em>
-</p>
-
-<p align="center">
-  <a href="https://tuffex.tagzxia.com/docs/dev/tuffex">📖 Documentation</a> ·
-  <a href="https://github.com/talex-touch/tuff/tree/master/packages/tuffex">⭐ GitHub</a> ·
-  <a href="https://www.npmjs.com/package/@talex-touch/tuffex">📦 NPM</a> ·
-  <a href="https://github.com/talex-touch/tuff/discussions">💬 Discussions</a>
-</p>
+[MIT License](LICENSE) &copy; 2025 TalexDreamSoul

package/dist/es/agents/index.js

@@ -1,4 +1,4 @@
-import { withInstall } from '../utils/withInstall.js';
+import { withInstall } from '../packages/tuffex/packages/utils/withInstall.js';
 import TxAgentItem from './src/TxAgentItem.vue.js';
 import TxAgentsList from './src/TxAgentsList.vue.js';
 

package/dist/es/alert/index.d.ts

@@ -1 +1,104 @@
-export * from './src';
+import { AlertEmits, AlertProps, AlertType } from './src/types';
+import { default as component } from './src/TxAlert.vue';
+
+declare const TxAlert: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+        title: {
+            type: import('vue').PropType<string>;
+        };
+        type: {
+            type: import('vue').PropType<AlertType>;
+            default: string;
+        };
+        message: {
+            type: import('vue').PropType<string>;
+        };
+        closable: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+        showIcon: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+    }>> & Readonly<{
+        onClose?: (() => any) | undefined;
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        close: () => void;
+    }, import('vue').PublicProps, {
+        type: AlertType;
+        closable: boolean;
+        showIcon: boolean;
+    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        title: {
+            type: import('vue').PropType<string>;
+        };
+        type: {
+            type: import('vue').PropType<AlertType>;
+            default: string;
+        };
+        message: {
+            type: import('vue').PropType<string>;
+        };
+        closable: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+        showIcon: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+    }>> & Readonly<{
+        onClose?: (() => any) | undefined;
+    }>, {}, {}, {}, {}, {
+        type: AlertType;
+        closable: boolean;
+        showIcon: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+    title: {
+        type: import('vue').PropType<string>;
+    };
+    type: {
+        type: import('vue').PropType<AlertType>;
+        default: string;
+    };
+    message: {
+        type: import('vue').PropType<string>;
+    };
+    closable: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    showIcon: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => void;
+}, string, {
+    type: AlertType;
+    closable: boolean;
+    showIcon: boolean;
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        title?(_: {}): any;
+        default?(_: {}): any;
+    };
+}) & import('vue').Plugin;
+export { TxAlert };
+export type { AlertEmits, AlertProps, AlertType };
+export type TxAlertInstance = InstanceType<typeof component>;
+export default TxAlert;

package/dist/es/alert/index.js

@@ -0,0 +1,6 @@
+import { withInstall } from '../packages/tuffex/packages/utils/withInstall.js';
+import component from './src/TxAlert.vue.js';
+
+const TxAlert = withInstall(component);
+
+export { TxAlert, TxAlert as default };

package/dist/es/alert/src/TxAlert.vue.d.ts

@@ -8,6 +8,7 @@ interface Props {
     showIcon?: boolean;
 }
 declare function __VLS_template(): {
+    title?(_: {}): any;
     default?(_: {}): any;
 };
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {

package/dist/es/alert/src/TxAlert.vue.js

@@ -2,6 +2,6 @@ import _sfc_main from './TxAlert.vue2.js';
 /* empty css             */
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
-const TxAlert = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-debd99f8"]]);
+const component = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3824654e"]]);
 
-export { TxAlert as default };
+export { component as default };

package/dist/es/alert/src/TxAlert.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, createBlock, resolveDynamicComponent, toDisplayString, renderSlot, createTextVNode, createVNode, unref } from 'vue';
+import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, createBlock, resolveDynamicComponent, renderSlot, createTextVNode, toDisplayString, createVNode, unref } from 'vue';
 import { TxIcon } from '../../icon/index.js';
 
 const _hoisted_1 = {
@@ -48,7 +48,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           (openBlock(), createBlock(resolveDynamicComponent(iconComponent.value)))
         ])) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_2, [
-          __props.title ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+          __props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            renderSlot(_ctx.$slots, "title", {}, () => [
+              createTextVNode(toDisplayString(__props.title), 1)
+            ], true)
+          ])) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_4, [
             renderSlot(_ctx.$slots, "default", {}, () => [
               createTextVNode(toDisplayString(__props.message), 1)

package/dist/es/auto-sizer/index.js

@@ -1,4 +1,4 @@
-import { withInstall } from '../utils/withInstall.js';
+import { withInstall } from '../packages/tuffex/packages/utils/withInstall.js';
 import _sfc_main from './src/TxAutoSizer.vue.js';
 
 const AutoSizer = withInstall(_sfc_main);

package/dist/es/auto-sizer/src/TxAutoSizer.vue.js

@@ -1,6 +1,6 @@
 import { defineComponent, useAttrs, ref, computed, createBlock, openBlock, resolveDynamicComponent, mergeProps, withCtx, normalizeClass, renderSlot, nextTick } from 'vue';
-import { useAutoResize } from '../../utils/animation/auto-resize.js';
-import { useFlip } from '../../utils/animation/flip.js';
+import { useAutoResize } from '../../packages/tuffex/packages/utils/animation/auto-resize.js';
+import { useFlip } from '../../packages/tuffex/packages/utils/animation/flip.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{

package/dist/es/avatar/index.js

@@ -1,4 +1,4 @@
-import { withInstall } from '../utils/withInstall.js';
+import { withInstall } from '../packages/tuffex/packages/utils/withInstall.js';
 import TxAvatarComponent from './src/TxAvatar.vue.js';
 import TxAvatarGroupComponent from './src/TxAvatarGroup.vue.js';
 

package/dist/es/avatar/src/TxAvatar.vue.js

@@ -2,6 +2,6 @@ import _sfc_main from './TxAvatar.vue2.js';
 /* empty css              */
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
-const TxAvatarComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2027ad14"]]);
+const TxAvatarComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-173e1d49"]]);
 
 export { TxAvatarComponent as default };

package/dist/es/avatar/src/TxAvatar.vue2.js

@@ -32,14 +32,55 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const imageError = ref(false);
+    const sizePresets = /* @__PURE__ */ new Set(["small", "medium", "large", "xlarge"]);
+    const normalizedSize = computed(() => {
+      const size = props.size;
+      if (typeof size === "number") {
+        return size > 0 ? size : null;
+      }
+      if (typeof size === "string") {
+        if (sizePresets.has(size))
+          return null;
+        const pxMatch = size.match(/^(\d+(?:\.\d+)?)px$/);
+        if (pxMatch) {
+          const value2 = Number(pxMatch[1]);
+          return value2 > 0 ? value2 : null;
+        }
+        const value = Number(size);
+        if (!Number.isNaN(value) && value > 0)
+          return value;
+      }
+      return null;
+    });
+    const sizeClass = computed(() => {
+      const size = props.size;
+      if (typeof size === "string" && sizePresets.has(size))
+        return `tx-avatar--${size}`;
+      return void 0;
+    });
+    const sizeVars = computed(() => {
+      const size = normalizedSize.value;
+      if (!size)
+        return {};
+      const statusSize = Math.max(4, Math.round(size * 0.25));
+      const fontSize = Math.round(size * 0.25 + 4);
+      const statusBorder = Math.max(1, Math.round(statusSize * 0.16 * 2) / 2);
+      return {
+        "--tx-avatar-size": `${size}px`,
+        "--tx-avatar-font-size": `${fontSize}px`,
+        "--tx-avatar-status-size": `${statusSize}px`,
+        "--tx-avatar-status-border": `${statusBorder}px`
+      };
+    });
     const customStyle = computed(() => {
+      const style = {
+        ...sizeVars.value
+      };
       if (props.backgroundColor) {
-        return {
-          "--tx-avatar-bg": props.backgroundColor,
-          "--tx-avatar-text": props.textColor || "#ffffff"
-        };
+        style["--tx-avatar-bg"] = props.backgroundColor;
+        style["--tx-avatar-text"] = props.textColor || "#ffffff";
       }
-      return {};
+      return style;
     });
     const fallbackText = computed(() => {
       const name = props.name?.trim();
@@ -65,7 +106,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["tx-avatar", [
-          `tx-avatar--${__props.size}`,
+          sizeClass.value,
           `tx-avatar--${__props.shape}`,
           { "tx-avatar--clickable": __props.clickable }
         ]]),

package/dist/es/avatar/src/TxAvatarGroup.vue.js

@@ -2,6 +2,6 @@ import _sfc_main from './TxAvatarGroup.vue2.js';
 /* empty css                   */
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
-const TxAvatarGroupComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-afc38b28"]]);
+const TxAvatarGroupComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d7754205"]]);
 
 export { TxAvatarGroupComponent as default };

package/dist/es/avatar/src/TxAvatarGroup.vue2.js

@@ -5,7 +5,7 @@ const _sfc_main = defineComponent({
   name: "TxAvatarGroup",
   props: {
     max: { type: Number, required: false },
-    size: { type: String, required: false },
+    size: { type: [String, Number], required: false },
     overlap: { type: [Number, String], default: 8 }
   },
   setup(props, { slots }) {

package/dist/es/avatar/src/types.d.ts

@@ -1,4 +1,5 @@
-export type AvatarSize = 'small' | 'medium' | 'large' | 'xlarge';
+export type AvatarPresetSize = 'small' | 'medium' | 'large' | 'xlarge';
+export type AvatarSize = AvatarPresetSize | number | `${number}` | `${number}px`;
 export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
 export type AvatarShape = 'circle' | 'square' | 'rounded';
 export interface AvatarProps {