@manohub/ui 0.6.0

package/README.md

@@ -0,0 +1,141 @@
+# @manohub/ui
+
+AIHub **自绘组件层**：不依赖 farris 的手写 Vue TSX 组件 + 自带令牌层。
+
+本包分三层，**可分别引用**：
+
+| 层 | 入口 | 内容 |
+|---|---|---|
+| ① 主题 | `@manohub/theme/default.css`（兜底）/ `@manohub/theme/farris.css`（Farris 规范） | **全局**令牌（值）—— 随主题包独立发布，换主题只换这一行 |
+| ② 组件面 | `@manohub/ui/styles.css` | 类与状态协议 + 组件令牌基础值，**无需 JS** 即可使用 |
+| ③ Vue 层 | `@manohub/ui` | Vue 组件：渲染 ② 的类 + 行为增强 |
+| ④ 服务层 | `@manohub/ui` | 命令式反馈：`toast()` / `confirm()` / `alert()` / `showLoading()`（宿主 + 队列 + 生命周期，共用 ③ 的组件） |
+
+- **视觉与几何**：《Farris Web 基础视觉规范》（`@aihub/theme` 的令牌与组件实测值）
+- **令牌命名**：daisyUI 式语义槽位（`--ui-primary` / `--ui-base-content` / `--ui-info*` / `--ui-warning*` …，`default ≠ primary`）
+- **组件 API**：shadcn 通行词汇（变体维度 `tone` × `shape` × `size`、compound 点号子件、受控 prop + 语义事件）
+- **实现**：零依赖手写 CSS，类名 `.mh-*`（bem-lite）
+
+> **0.5.0（破坏性变更）**：`Section` 组件已退役 —— 它的「标题行 + 右端操作位（`extra`）」能力并入
+> **`Form.Header`**（支持 `title` / `description` / `extra`，且成员归位到表单最前）。
+> 旧写法 `Section` / `Form.Section` 统一改为 `Form.Header`；需要「区块分组」时用 `Panel` 或嵌套容器。
+
+## 安装
+
+```bash
+pnpm add @manohub/ui @manohub/theme
+```
+
+## 接入
+
+样式两行，顺序固定（先主题后组件面；若应用的样式链已级联本包，则不必单独引）：
+
+```css
+@import "@manohub/theme/default.css"; /* ① 全局令牌（值） */
+@import "@manohub/ui/styles.css"; /* ② 组件面（类 + 组件令牌值） */
+```
+
+只写静态页（不装 Vue）时引这两行即可 —— 类名与 `data-*` 状态协议直接可用。
+
+本包**可独立发布**：组件与类型一律从 `@manohub/ui` 直接引；下游（如 `@manohub/kit`）若转出口，是下游自己的选择。
+
+```tsx
+import { Card, Form, Tree, Checkbox } from '@manohub/ui'
+```
+
+## 组件清单
+
+| 分组 | 组件 |
+|---|---|
+| 容器与分区 | `Page`（页面级骨架：`.Header` / `.Body` / `.Footer` / `.Filter` / `.Toolbar` / `.Split`）、`Panel`（+ `.Header` / `.Body` / `.Footer`）、`Card`（+ 三件）、`Nav`、`Layout`（`Layout.Row` 排「行」/ `Layout.Column` 排「列」：轴向 × 间距档 × 对齐） |
+| 数据展示 | `Tree`、`ListView`（+ `.CardItem`）、`Badge`、`Tag`（常规 / 状态 / 可选 / 新增 / 筛选片） |
+| 展示 | `Avatar`（+ `.Group`）、`Skeleton`（行 / 列表 / 块状） |
+| 表单基础（**自绘**） | `Button`（+ `.Group` / `.Divider`；五型 / 小号 / 加载 / 菜单按钮 / 连体切换）、`Input`（+ `.Group` / `.Chip` / `.Display` / `.Textarea`；清除 / 可见性切换 / 校验）、`Search`（搜索框：值 / 搜索 / 清空三条回调）、`Select`（单选 / 多选 / 搜索 / 加载；面板用原生 popover）、`Switch`（表格档 / 表单档） |
+| 表单与选择 | `Form`（+ `.Header` / `.Item`；标签体系、成员归位、`v-model` 值收集与命令式 `clear()`）、`Filter`（+ `.Item`；`Form` 的壳：条件字段写成子件、控件自放、查询/重置与快照归一）、`Checkbox`、`Radio`（+ `.Group` / `.Card`；卡片式单选）、`Capsule`（胶囊选择器；胶囊 / 方形两档外形，与 `Tabset` 组合即页签） |
+| 反馈与三态 | `Notice`（条状提示）、`Notification`（通知卡：标题 + 头像 / 标签 / 操作 / 关闭位）、`QueryState`（三态容器；内建空 / 错误插画取自设计交付的四张 SVG，原样内联在 `src/utils/state-illustration.ts`）、`Loading`（转圈 + 遮罩：行内 / 区域 / 全屏三形态） |
+| 反馈与引导（**自绘**） | `Toast`（消息提示：语义四档 / loading + 可选动作 + 自动消失计时 + `.Stack` 堆叠）、`Steps`（步骤条：节点式 / 燕尾段式 / `.Progress` 进度条） |
+| 数据展示（**自绘**） | `Table`（列 × 数据 + 选择列 + 排序事件 + 固定表头 / 固定列 + 批量栏 / 合计行；排序与列宽拖拽算法归调用方）、`Pagination`（总数 / 每页条数 / 页码窗口 / 简单档 / 外框档）、`Tabs`（下划线页签 + 「更多」收纳） |
+| 内容与文件 | `Code`（行内 chip / 代码块 + 语言角标 + 图标复制位，**只读展示**）、`CodeEditor`（等宽多行可编辑代码区：按行自适应 / 限高内滚 / 只读、禁用）、`Upload`（+ `.Thumbs`；拖拽 / 点击上传区 + 已传文件列表） |
+| 浮层（**自绘**） | `Dialog`（原生 `<dialog>` + 模态皮肤；关闭受控）、`Tooltip`（**零 JS**：显隐与定位全走操作层 hover 档） |
+| 操作层（零 JS 原语） | `Collapse`（+ `.Stack`）、`Tabset`；浮层只提供样式层（`styles/operations/popup.css`，零 JS 可直接用），Vue 浮层仍用 farris 适配件 |
+
+## 三态的操作按钮
+
+`QueryState` / `Tree` / `ListView` 的空态·错误态操作按钮就是**本包的 `Button`**（`variant="primary"`），
+与全站按钮同族 —— 应用**不需要**注入任何东西，只要把文案与回调给上：
+
+```vue
+<QueryState
+  :empty="list.length === 0"
+  empty-action-text="新建"
+  :on-empty-action="openCreate"
+>
+  <MyList />
+</QueryState>
+```
+
+- 要换外观：改主题令牌（`Button` 的外观档位是 `variant`）；
+- 要换结构（多个按钮 / 自定义动作区）：用 `actions` 插槽自绘。
+
+## 服务层（组件树之外调反馈）
+
+组件是**受控**的（可见性归调用方）；组件树之外（请求回调、路由守卫、工具函数里）要弹提示时用服务层：
+
+```ts
+import { toast, confirm, alert, showLoading, configureHost } from '@manohub/ui'
+
+toast('success', '保存成功')                                  // 3 秒自动消失
+toast('error', '导出失败', { action: { text: '重试', onClick: retry } })
+const pending = toast('loading', '正在导入…', { duration: 0 }) // 常驻，完成后自己收
+pending.close()
+
+if (await confirm({ title: '删除确认', detail: '删除后不可恢复', okDanger: true })) await remove()
+await alert({ title: '导入完成', detail: '共 128 条' })
+
+const done = showLoading('保存中…')   // 引用计数：并发调用要各关各的
+try { await save() } finally { done() }
+```
+
+**四件必须知道的事**：
+
+1. **服务层不新造浮层**：`toast()` 渲染的是本包的 `Toast`、`confirm()` 渲染的是本包的 `Dialog`、
+   `showLoading()` 渲染的是本包的 `Loading` —— 外观改一处两处一起变。
+2. **宿主即渲染位置**：解析顺序是「**显式 `configureHost(el)`** → 带 `[data-manohub-ui]` 作用域锚的容器
+   → `document.body`」。微前端下**必须落回本应用自己的容器**：本包全部令牌（全局值 + 组件值）都锚在
+   `[data-manohub-ui]` 上，落在容器外的浮层会「样式全丢」（变量解析为空 +
+   应用侧样式被 `scopecss` 前缀化后匹配不到）。骨架层只需在包裹节点上补一个
+   `data-manohub-ui` 属性，服务层不必反向依赖它。
+   注：`.app-container` 是 `@manohub/kit` 的输出类名（内部命名），**不是**跨包契约，服务层不认它。
+3. **按需挂载、自动收尾**：首次调用才建宿主与 Vue 实例（模块顶层零 DOM 操作）；
+   `toast` 队列空了、`loading` 计数归零即收掉宿主 —— 反复重挂不留悬挂实例。
+4. **`loading` 是引用计数语义**：并发的两次「显示」只关一次时遮罩仍在（先结束的那个不会把
+   别人的遮罩一起收掉）。推荐用返回的句柄在 `finally` 里关掉自己那一次。
+
+## 主题层
+
+全局令牌（`--ui-primary` / `--ui-space-*` / `--ui-font-*` 这类跨件共用的值）**不在本包**，已拆成独立包
+**`@manohub/theme`**（值层与面层分开：值随主题变、面不随主题变）。每个主题分五片：
+`colors` / `typography` / `spacing` / `radius` / `shadows`，一律锚定 **`[data-manohub-ui]`**
+（库品牌作用域锚；micro-app 的 scopecss 不作用域化 `:root`，定义在 `:root` 会泄漏到宿主）。
+
+只服务单一组件的令牌分两半落在本包：
+
+| 位置 | 内容 | 锚 |
+|---|---|---|
+| `styles/components/<件>.tokens.css` | **基础值**（唯一的、两套主题同值的那一条） | `[data-manohub-ui]` |
+| `styles/components/<件>.css` | **档位改写**（`.mh-<件>--<档>` 覆盖同一令牌）+ `--mh-*` 内部状态变量 | 元件根类 / 档位类 |
+
+后一半必须在面里：它们靠「同一元素上两个选择器改写同一个令牌」生效，搬走就断链。
+
+随包两套：
+
+| 主题 | 入口 | 锚点 | 取值来源 |
+|---|---|---|---|
+| `default` | `@manohub/theme/default.css` | `[data-manohub-ui]`（兜底套） | AIHub 品牌蓝（primary `#2660FF`）|
+| `farris` | `@manohub/theme/farris.css` | `[data-manohub-ui][data-theme='farris']` | 《Farris Web 基础视觉规范》（primary `#2a87ff`，色板编号 Th/Au/Ne/Te 逐条标注）|
+
+换皮只需给容器加属性（`createSubApp({ theme: 'farris' })` 会写 `data-theme`），不动类名、不动组件代码、不重打包。
+新增主题 = `packages/theme/src/<name>/` 新目录，令牌锚 `[data-manohub-ui][data-theme='<name>']`，
+且必须**全量覆盖** default 的令牌。
+
+局部换主题：在更深的容器上重设变量即可，例如 `.role-tree-pane { --ui-primary: #7C3AED; }`。

package/dist/components/avatar/index.d.ts

@@ -0,0 +1,283 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+/** 尺寸：四档预设，或**直接给像素数**（`<Avatar :size="48" />`） */
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl' | number;
+export interface AvatarProps {
+    /** 尺寸四档（24 / 36 / 60 / 80）或像素数，缺省 `md` */
+    size?: AvatarSize;
+    /** 外形：`circle`（缺省）圆 / `square` 圆角矩形 */
+    shape?: 'circle' | 'square';
+    /** 图片地址（给了就渲染图片，图片自裁圆/方角） */
+    src?: string;
+    /** 响应式图片候选（与 `src` 搭配给 1x/2x） */
+    srcSet?: string;
+    /** 图片替代文本 */
+    alt?: string;
+    /** 文字头像：显示 1~2 个字（底色取主色） */
+    letter?: string;
+    /** 图标头像：`true` 用默认人像图标，或传图标名（`@manohub/icon` 的 `IconName`） */
+    icon?: boolean | string;
+    /** 占位档：虚线框（内容走默认插槽；不传插槽就只是一个占位框） */
+    placeholder?: boolean;
+    /** 方角（= `shape="square"`，保留的既有写法） */
+    square?: boolean;
+    /** 带框：底部 2px 亮环 + 环境光（与文字/卡片并排时用） */
+    framed?: boolean;
+    /** 计数档：头像组末位的「+N」 */
+    count?: string | number;
+    /** 右上角标（数字或短文字） */
+    badge?: string | number;
+    /** 图片加载失败（本件会自动回退到 `letter` / `icon` / 插槽） */
+    onError?: (event: Event) => void;
+}
+export declare const Avatar: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+        size: {
+            type: PropType<AvatarSize>;
+            default: string;
+        };
+        shape: {
+            type: PropType<"circle" | "square">;
+            default: undefined;
+        };
+        src: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        srcSet: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        alt: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        letter: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        icon: {
+            type: PropType<boolean | string>;
+            default: boolean;
+        };
+        placeholder: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        square: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        framed: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        count: {
+            type: PropType<string | number>;
+            default: undefined;
+        };
+        badge: {
+            type: PropType<string | number>;
+            default: undefined;
+        };
+        onError: {
+            type: PropType<(event: Event) => void>;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+        size: AvatarSize;
+        square: boolean;
+        icon: string | boolean;
+        onError: (event: Event) => void;
+        shape: "square" | "circle";
+        src: string;
+        srcSet: string;
+        alt: string;
+        letter: string;
+        placeholder: boolean;
+        framed: boolean;
+        count: string | number;
+        badge: string | number;
+    }, true, {}, SlotsType<{
+        default?: () => VNodeChild;
+        badge?: () => VNodeChild;
+        chip?: () => VNodeChild;
+    }>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("vue").ExtractPropTypes<{
+        size: {
+            type: PropType<AvatarSize>;
+            default: string;
+        };
+        shape: {
+            type: PropType<"circle" | "square">;
+            default: undefined;
+        };
+        src: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        srcSet: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        alt: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        letter: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        icon: {
+            type: PropType<boolean | string>;
+            default: boolean;
+        };
+        placeholder: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        square: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        framed: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        count: {
+            type: PropType<string | number>;
+            default: undefined;
+        };
+        badge: {
+            type: PropType<string | number>;
+            default: undefined;
+        };
+        onError: {
+            type: PropType<(event: Event) => void>;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
+        size: AvatarSize;
+        square: boolean;
+        icon: string | boolean;
+        onError: (event: Event) => void;
+        shape: "square" | "circle";
+        src: string;
+        srcSet: string;
+        alt: string;
+        letter: string;
+        placeholder: boolean;
+        framed: boolean;
+        count: string | number;
+        badge: string | number;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: PropType<AvatarSize>;
+        default: string;
+    };
+    shape: {
+        type: PropType<"circle" | "square">;
+        default: undefined;
+    };
+    src: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    srcSet: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    alt: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    letter: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    icon: {
+        type: PropType<boolean | string>;
+        default: boolean;
+    };
+    placeholder: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    square: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    framed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    count: {
+        type: PropType<string | number>;
+        default: undefined;
+    };
+    badge: {
+        type: PropType<string | number>;
+        default: undefined;
+    };
+    onError: {
+        type: PropType<(event: Event) => void>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    size: AvatarSize;
+    square: boolean;
+    icon: string | boolean;
+    onError: (event: Event) => void;
+    shape: "square" | "circle";
+    src: string;
+    srcSet: string;
+    alt: string;
+    letter: string;
+    placeholder: boolean;
+    framed: boolean;
+    count: string | number;
+    badge: string | number;
+}, {}, string, SlotsType<{
+    default?: () => VNodeChild;
+    badge?: () => VNodeChild;
+    chip?: () => VNodeChild;
+}>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+    Group: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        /** 最多显示几个，其余收成末位「+N」（0 / 不传 = 不限） */
+        max: {
+            type: NumberConstructor;
+            default: number;
+        };
+        /** 堆叠重叠量（像素，缺省 10） */
+        gap: {
+            type: NumberConstructor;
+            default: number;
+        };
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        /** 最多显示几个，其余收成末位「+N」（0 / 不传 = 不限） */
+        max: {
+            type: NumberConstructor;
+            default: number;
+        };
+        /** 堆叠重叠量（像素，缺省 10） */
+        gap: {
+            type: NumberConstructor;
+            default: number;
+        };
+    }>> & Readonly<{}>, {
+        max: number;
+        gap: number;
+    }, SlotsType<{
+        default?: () => VNodeChild;
+    }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};
+export type AvatarCompound = typeof Avatar;

package/dist/components/avatar/index.js

@@ -0,0 +1,167 @@
+import { defineComponent, ref, computed, createVNode } from "vue";
+import { Icon } from "@manohub/icon";
+const AvatarRoot = /* @__PURE__ */ defineComponent({
+  name: "Avatar",
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: [String, Number],
+      default: "md"
+    },
+    shape: {
+      type: String,
+      default: void 0
+    },
+    src: {
+      type: String,
+      default: void 0
+    },
+    srcSet: {
+      type: String,
+      default: void 0
+    },
+    alt: {
+      type: String,
+      default: void 0
+    },
+    letter: {
+      type: String,
+      default: void 0
+    },
+    icon: {
+      type: [Boolean, String],
+      default: false
+    },
+    placeholder: {
+      type: Boolean,
+      default: false
+    },
+    square: {
+      type: Boolean,
+      default: false
+    },
+    framed: {
+      type: Boolean,
+      default: false
+    },
+    count: {
+      type: [String, Number],
+      default: void 0
+    },
+    badge: {
+      type: [String, Number],
+      default: void 0
+    },
+    onError: {
+      type: Function,
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const failed = ref(false);
+    const showImage = computed(() => !!props.src && !failed.value);
+    const isSquare = computed(() => props.shape === "square" || props.square);
+    const presetSize = computed(() => typeof props.size === "number" ? "md" : props.size);
+    const customStyle = computed(() => typeof props.size === "number" ? {
+      width: `${props.size}px`,
+      height: `${props.size}px`,
+      fontSize: `${Math.max(12, Math.round(props.size * 0.38))}px`
+    } : void 0);
+    const iconSize = computed(() => {
+      const size = typeof props.size === "number" ? props.size : {
+        sm: 14,
+        md: 20,
+        lg: 30,
+        xl: 40
+      }[props.size];
+      return Math.round(size * 0.56);
+    });
+    const content = () => {
+      if (slots.default) return slots.default();
+      if (showImage.value) {
+        return createVNode("img", {
+          "src": props.src,
+          "srcset": props.srcSet,
+          "alt": props.alt ?? "",
+          "onError": (event) => {
+            failed.value = true;
+            props.onError?.(event);
+          }
+        }, null);
+      }
+      if (props.letter) return createVNode("span", null, [props.letter]);
+      if (props.icon) {
+        const name = typeof props.icon === "string" ? props.icon : "user";
+        return createVNode(Icon, {
+          "name": name,
+          "size": iconSize.value
+        }, null);
+      }
+      if (props.count !== void 0) return createVNode("span", null, [props.count]);
+      return null;
+    };
+    return () => createVNode("span", {
+      "class": ["mh-avatar", `mh-avatar--${presetSize.value}`, props.letter && !showImage.value ? "mh-avatar--letter" : void 0, props.icon && !showImage.value ? "mh-avatar--icon" : void 0, props.placeholder ? "mh-avatar--placeholder" : void 0, isSquare.value ? "mh-avatar--square" : void 0, props.framed ? "mh-avatar--framed" : void 0, props.count !== void 0 && !showImage.value ? "mh-avatar--count" : void 0, attrs.class].filter(Boolean).join(" "),
+      "style": {
+        ...customStyle.value,
+        ...attrs.style
+      }
+    }, [content(), props.badge !== void 0 || slots.badge ? createVNode("span", {
+      "class": "mh-avatar__badge"
+    }, [slots.badge ? slots.badge() : props.badge]) : null, slots.chip ? createVNode("span", {
+      "class": "mh-avatar__chip"
+    }, [slots.chip()]) : null]);
+  }
+});
+const flatten = (nodes) => nodes.flatMap((node) => {
+  if (Array.isArray(node)) return flatten(node);
+  return node ? [node] : [];
+});
+const AvatarGroup = /* @__PURE__ */ defineComponent({
+  name: "AvatarGroup",
+  inheritAttrs: false,
+  props: {
+    /** 最多显示几个，其余收成末位「+N」（0 / 不传 = 不限） */
+    max: {
+      type: Number,
+      default: 0
+    },
+    /** 堆叠重叠量（像素，缺省 10） */
+    gap: {
+      type: Number,
+      default: 10
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const nodes = computed(() => flatten([slots.default?.() ?? null]));
+    const rendered = computed(() => {
+      const list = nodes.value;
+      if (!props.max || list.length <= props.max) return list;
+      return [...list.slice(0, props.max), createVNode(AvatarRoot, {
+        "key": "__mh-avatar-rest",
+        "count": `+${list.length - props.max}`
+      }, null)];
+    });
+    return () => createVNode("span", {
+      "class": ["mh-avatar-group", attrs.class].filter(Boolean).join(" "),
+      "style": {
+        "--ui-avatar-gap": `${props.gap}px`,
+        ...attrs.style
+      }
+    }, [rendered.value]);
+  }
+});
+const Avatar = Object.assign(AvatarRoot, {
+  Group: AvatarGroup
+});
+export {
+  Avatar
+};