@octohirono/stitch-design-system 0.1.0 → 0.3.0

package/dist/components/ChatInput/ChatInput.js

@@ -0,0 +1,88 @@
+import { Icon as e } from "../Icon/Icon.js";
+import t from "./chat-input.module.js";
+import { useCallback as n, useLayoutEffect as r, useRef as i, useState as a } from "react";
+import o from "clsx";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region packages/react/src/components/ChatInput/ChatInput.tsx
+var l = 1, u = ({ value: u, defaultValue: d, onChange: f, onSubmit: p, placeholder: m, disabled: h = !1, loading: g = !1, autoSize: _ = !0, submitType: v = "enter", prefix: y, actions: b, sendAriaLabel: x = "发送", className: S, style: C, ...w }) => {
+	let [T, E] = a(d ?? ""), D = u !== void 0, O = D ? u : T, k = i(null), A = n(() => {
+		let e = k.current;
+		if (e == null || _ === !1) return;
+		let t = _ === !0 ? {} : _, n = parseFloat(window.getComputedStyle(e).lineHeight) || 0;
+		e.style.height = "auto";
+		let r = e.scrollHeight;
+		if (n > 0) {
+			let i = t.minRows ?? l;
+			if (r = Math.max(r, i * n), t.maxRows != null) {
+				let i = t.maxRows * n;
+				e.style.overflowY = r > i ? "auto" : "hidden", r = Math.min(r, i);
+			} else e.style.overflowY = "hidden";
+		}
+		e.style.height = `${r}px`;
+	}, [_]);
+	r(() => {
+		A();
+	}, [O, A]), r(() => {
+		let e = k.current;
+		if (e == null || _ === !1 || typeof ResizeObserver > "u") return;
+		let t = -1, n = new ResizeObserver((e) => {
+			let n = e[0].contentRect.width;
+			n !== t && (t = n, A());
+		});
+		return n.observe(e), () => n.disconnect();
+	}, [_, A]);
+	let j = n((e) => {
+		D || E(e.target.value), f?.(e);
+	}, [D, f]), M = n(() => {
+		if (h || g) return;
+		let e = O;
+		e.trim() !== "" && (p?.(e), D || E(""));
+	}, [
+		h,
+		g,
+		O,
+		p,
+		D
+	]), N = n((e) => {
+		e.key === "Enter" && (e.nativeEvent.isComposing || (v === "enter" ? !e.shiftKey : e.shiftKey) && (e.preventDefault(), M()));
+	}, [v, M]), P = !h && !g && O.trim() !== "";
+	return /* @__PURE__ */ c("div", {
+		className: o(t.input, h && t["is-disabled"], S),
+		style: C,
+		children: [
+			y != null && /* @__PURE__ */ s("div", {
+				className: t.prefix,
+				children: y
+			}),
+			/* @__PURE__ */ s("textarea", {
+				ref: k,
+				className: t.textarea,
+				value: O,
+				placeholder: m,
+				disabled: h,
+				rows: 1,
+				onChange: j,
+				onKeyDown: N,
+				...w
+			}),
+			/* @__PURE__ */ c("div", {
+				className: t.actions,
+				children: [b, /* @__PURE__ */ s("button", {
+					type: "button",
+					className: t.send,
+					onClick: M,
+					disabled: !P,
+					"aria-label": x,
+					"aria-busy": g || void 0,
+					children: /* @__PURE__ */ s(e, {
+						name: "send",
+						size: 20
+					})
+				})]
+			})
+		]
+	});
+};
+u.displayName = "ChatInput";
+//#endregion
+export { u as ChatInput };

package/dist/components/ChatInput/chat-input.module.js

@@ -0,0 +1,11 @@
+//#region packages/react/src/components/ChatInput/chat-input.module.less
+var e = "_input_1o9t1_1", t = "_prefix_1o9t1_27", n = "_textarea_1o9t1_32", r = "_actions_1o9t1_56", i = "_send_1o9t1_62", a = {
+	input: e,
+	"is-disabled": "_is-disabled_1o9t1_15",
+	prefix: t,
+	textarea: n,
+	actions: r,
+	send: i
+};
+//#endregion
+export { r as actions, a as default, e as input, t as prefix, i as send, n as textarea };

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

@@ -0,0 +1,2 @@
+export { ChatInput } from './ChatInput';
+export type { ChatInputProps, ChatInputSubmitType, ChatInputAutoSize, } from './ChatInput';

package/dist/components/ChatList/ChatList.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import type { ChatMessageProps, ChatMessageVariant } from '../ChatMessage';
+/** 单条消息数据 = 一条 `ChatMessage` 的 props + 稳定 `id`（React key + append 判定） */
+export interface ChatListItem extends ChatMessageProps {
+    /** 唯一标识：作 React key，并驱动「新消息 append」判定 */
+    id: string | number;
+}
+/**
+ * 消息流容器：**数据驱动**——吃 `items`（每项 = 一条 `ChatMessage` 的 props + `id`），内部
+ * 渲染 `ChatMessage`（`ChatMessage` 仍可单独使用，列表场景走 `items`）。负责连发分组编排、
+ * 贴底滚动与向上加载历史的接缝。对外 props 照搬 Ant Design X `Bubble.List`（`items` / `roles` /
+ * `autoScroll`），加载更多接缝取 Ant `on*` 惯例。
+ *
+ * 跨-prop 注意事项：
+ * - **数据驱动、组件不算业务**：消息内容 / 时间 / 头像 / 已读态全由 `items` 每项自带（就是
+ *   `ChatMessageProps`）；组件只按数组顺序渲染，不排序、不去重、不算时间。
+ * - **`roles` 灌角色默认**：按 `variant` 给同类消息灌共享默认（如 received 统一头像），`item`
+ *   显式字段优先覆盖 `roles` 默认（照 Ant X `roles`）。
+ * - **连发分组自动编排**：相邻同 `variant`（非 system）的续条自动置 `ChatMessage` 的 `grouped`
+ *   ——头像只在组内首条显示、组内间距收紧（**不合并内容，仍是多个独立气泡**）。`system` 项
+ *   （如日期分隔）断组。`item` 显式传 `grouped` 时以其为准。
+ * - **日期分隔 = `system` 项**：日期分隔线作为一条 `variant="system"` 的 `item` 承载居中灰条，
+ *   **标签文字（今天 / 昨天 / 某月某日）由 app 放进该项的 `content`，组件不算日期**。
+ * - **`autoScroll` 贴底 + 上滚暂停**：`items` 追加时若用户仍在底部则自动滚到底；用户手动上滚
+ *   离底即暂停自动贴底、滚回底部恢复。`autoScroll={false}` 整体关闭。
+ * - **`onReachTop` 只发信号、组件不 fetch**：滚到顶发一次 `onReachTop`，去哪取历史、怎么
+ *   prepend 全交 app；`loadingMore` 由 app 控制，为真时顶部显示转圈（复用 `<Loading>`）。组件
+ *   不拥有传输（接缝原则同 `ChatMessage`）。
+ * - **根节点 `role="log"` + 键盘可聚焦**：消息流作实时日志区（`aria-live="polite"` + 增量播报），
+ *   新消息由辅助技术增量读出；容器 `tabIndex={0}` 使纯键盘用户 Tab 进本区后用方向键 /
+ *   PageUp/Down 翻历史（滚到顶即触 `onReachTop`），聚焦环走 `:focus-visible`（WCAG 2.1.1）。
+ */
+export interface ChatListProps {
+    /** 消息数据（数据驱动，内部渲染 `ChatMessage`）；每项 = `ChatMessageProps` + `id` */
+    items: ChatListItem[];
+    /** 按 `variant` 的角色默认配置（照 Ant X `roles`）；合并进同 variant 的每项，item 显式值优先 */
+    roles?: Partial<Record<ChatMessageVariant, Partial<ChatMessageProps>>>;
+    /**
+     * 新消息自动贴底（照 Ant X `autoScroll`）：用户手动上滚时暂停、滚回底部恢复
+     * @default true
+     */
+    autoScroll?: boolean;
+    /**
+     * 滚到顶时触发（加载更多历史）：**组件不 fetch**，去哪拿数据、拿到怎么 prepend 全交 app；
+     * 组件只发信号并等 app 回灌 `items`（接缝原则同 `ChatMessage` 不拥有传输）
+     */
+    onReachTop?: () => void;
+    /**
+     * 顶部加载中（**由 app 控制**，配合 `onReachTop`）：为真在顶部显示转圈（复用 `<Loading>`）
+     * @default false
+     */
+    loadingMore?: boolean;
+    /** 自定义类名（挂到根容器） */
+    className?: string;
+    /** 行内样式（挂到根容器） */
+    style?: React.CSSProperties;
+}
+export declare const ChatList: React.FC<ChatListProps>;

package/dist/components/ChatList/ChatList.js

@@ -0,0 +1,49 @@
+import { ChatMessage as e } from "../ChatMessage/ChatMessage.js";
+import { Loading as t } from "../Loading/Loading.js";
+import n from "./chat-list.module.js";
+import { useCallback as r, useLayoutEffect as i, useRef as a } from "react";
+import o from "clsx";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region packages/react/src/components/ChatList/ChatList.tsx
+var l = 48, u = ({ items: u, roles: d, onReachTop: f, autoScroll: p = !0, loadingMore: m = !1, className: h, style: g }) => {
+	let _ = a(null), v = a(!1), y = a(!0), b = r(() => {
+		let e = _.current;
+		if (e == null) return;
+		let t = e.scrollHeight - e.clientHeight > l && e.scrollTop <= l;
+		t && !v.current && !m && f?.(), v.current = t;
+		let n = e.scrollHeight - e.clientHeight - e.scrollTop;
+		y.current = n <= l;
+	}, [f, m]);
+	return i(() => {
+		let e = _.current;
+		e == null || !p || !y.current || (e.scrollTop = e.scrollHeight);
+	}, [u, p]), /* @__PURE__ */ c("div", {
+		className: o(n.list, h),
+		style: g,
+		ref: _,
+		onScroll: b,
+		role: "log",
+		"aria-live": "polite",
+		"aria-relevant": "additions",
+		tabIndex: 0,
+		children: [m && /* @__PURE__ */ s("div", {
+			className: n["top-loader"],
+			children: /* @__PURE__ */ s(t, {
+				spinning: !0,
+				size: "small"
+			})
+		}), u.map((t, n) => {
+			let { id: r, ...i } = t, a = d?.[i.variant ?? "received"], o = a ? {
+				...a,
+				...i
+			} : i, c = u[n - 1], l = o.grouped ?? (c != null && c.variant === o.variant && o.variant !== "system");
+			return /* @__PURE__ */ s(e, {
+				...o,
+				grouped: l
+			}, r);
+		})]
+	});
+};
+u.displayName = "ChatList";
+//#endregion
+export { u as ChatList };

package/dist/components/ChatList/chat-list.module.js

@@ -0,0 +1,7 @@
+//#region packages/react/src/components/ChatList/chat-list.module.less
+var e = "_list_1xrm9_1", t = {
+	list: e,
+	"top-loader": "_top-loader_1xrm9_13"
+};
+//#endregion
+export { t as default, e as list };

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

@@ -0,0 +1,2 @@
+export { ChatList } from './ChatList';
+export type { ChatListProps, ChatListItem } from './ChatList';

package/dist/components/ChatMessage/ChatMessage.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+export type ChatMessageVariant = 'sent' | 'received' | 'system';
+export type ChatMessageStatus = 'sent' | 'delivered' | 'read';
+/**
+ * 单条聊天气泡：三态 `variant`（sent 右 / received 左 / system 居中灰条）+ `content`
+ * 消息体（纯文本或 ReactNode）+ `avatar`（复用 `<Avatar>`）+ `time` 时间元信息 +
+ * `status` 已读回执（仅 sent 侧）+ `grouped` 连发分组样式钩子。对外 props 照搬 Ant
+ * Design X `Bubble`（`content`/`variant`/`avatar`），已读回执 `status` 取 Ant 命名惯例。
+ *
+ * 跨-prop 注意事项：
+ * - **`variant` 驱动 placement**：sent 靠右、received 靠左、system 居中——不另立
+ *   `placement` prop（三态已定方位）。system 态无头像、无 status。
+ * - **`content` 优先，`children` 兜底**：两者皆可传消息体，`content` 存在时取 `content`。
+ * - **纯 emoji 自动大图无气泡**：`content`（或 `children`）为纯 emoji 字符串（≤3 个、无其它
+ *   可见字符）时自动渲成大图、去掉气泡底色与内边距（照即时通讯惯例），不需额外 prop。
+ * - **`status` 仅 sent 侧出现**：sent → 单勾、delivered → 双勾（均 `--stitch-text-muted`）、
+ *   read → 双勾 `--stitch-info`；勾走 `<Icon name="check">`（禁 emoji / Unicode `✓` / 裸
+ *   svg），回执整体挂 `role="img"` + 可访问名（已发送 / 已送达 / 已读），内层 Icon 纯装饰。
+ * - **`grouped` 只出样式钩子**：为真时隐藏头像、收紧下间距（相邻同 variant 连发），由上层
+ *   编排决定何时置真，组件本身不判断相邻。头像列占位随「该条是否带 `avatar`」：带头像的续条
+ *   （grouped 隐藏头像但保留列，同串气泡左缘对齐成一列，群聊）；无头像的消息不占列、气泡贴边
+ *   （1:1 私聊首尾条都无头像 → 整串贴边对齐）。要对齐成列 = 给每条都灌头像（列表走 `roles` /
+ *   每项 `avatar`），不靠「续条自动占空列」。
+ */
+export interface ChatMessageProps {
+    /**
+     * 气泡三态：sent（本方，右）/ received（对方，左）/ system（系统居中灰条）
+     * @default 'received'
+     */
+    variant?: ChatMessageVariant;
+    /** 消息内容（纯文本或 ReactNode）；纯 emoji 字符串自动大图无气泡。与 children 二选一（优先 content） */
+    content?: React.ReactNode;
+    /** 消息内容（content 的兜底写法） */
+    children?: React.ReactNode;
+    /** 头像（复用 `<Avatar>`）；system 态不显示 */
+    avatar?: React.ReactNode;
+    /** 时间 / 元信息（如发送时间） */
+    time?: React.ReactNode;
+    /** 已读回执：sent 单勾 / delivered 双勾 / read 双勾高亮；仅 sent 侧渲染 */
+    status?: ChatMessageStatus;
+    /**
+     * 连发分组样式钩子：为真时隐藏头像但保留头像列缩进（气泡对齐成列）、收紧下间距
+     * （相邻同 variant 时由上层置真）
+     * @default false
+     */
+    grouped?: boolean;
+    /** 自定义类名（挂到根容器） */
+    className?: string;
+    /** 行内样式（挂到根容器） */
+    style?: React.CSSProperties;
+}
+export declare const ChatMessage: React.FC<ChatMessageProps>;

package/dist/components/ChatMessage/ChatMessage.js

@@ -0,0 +1,71 @@
+import { Icon as e } from "../Icon/Icon.js";
+import t from "./chat-message.module.js";
+import "react";
+import n from "clsx";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region packages/react/src/components/ChatMessage/ChatMessage.tsx
+var o = {
+	sent: "已发送",
+	delivered: "已送达",
+	read: "已读"
+}, s = /(\p{Extended_Pictographic}(️|‍|[\u{1F3FB}-\u{1F3FF}])*)/gu;
+function c(e) {
+	if (typeof e != "string") return !1;
+	let t = e.trim();
+	if (!t) return !1;
+	let n = t.match(s);
+	return n ? t.replace(s, "").trim() === "" && n.length <= 3 : !1;
+}
+var l = ({ variant: s = "received", content: l, children: u, avatar: d, time: f, status: p, grouped: m = !1, className: h, style: g }) => {
+	let _ = l ?? u, v = s === "system", y = !v && c(_), b = n(t.message, t[`variant-${s}`], m && t["is-grouped"], y && t["is-emoji"], h);
+	if (v) return /* @__PURE__ */ a("div", {
+		className: b,
+		style: g,
+		children: [/* @__PURE__ */ i("div", {
+			className: t.system,
+			children: _
+		}), f != null && /* @__PURE__ */ i("div", {
+			className: t.time,
+			children: f
+		})]
+	});
+	let x = s === "sent" && p != null, S = p === "sent" ? 1 : 2, C = d != null, w = f != null || x ? /* @__PURE__ */ a(r, { children: [f != null && /* @__PURE__ */ i("span", {
+		className: t.time,
+		children: f
+	}), x && p != null && /* @__PURE__ */ i("span", {
+		className: n(t.ticks, p === "read" && t["ticks-read"]),
+		role: "img",
+		"aria-label": o[p],
+		children: Array.from({ length: S }).map((n, r) => /* @__PURE__ */ i(e, {
+			name: "check",
+			size: "1em",
+			className: t.tick
+		}, r))
+	})] }) : null;
+	return /* @__PURE__ */ a("div", {
+		className: b,
+		style: g,
+		children: [C && /* @__PURE__ */ i("div", {
+			className: t["avatar-slot"],
+			children: !m && d
+		}), /* @__PURE__ */ i("div", {
+			className: t.body,
+			children: y ? /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("div", {
+				className: t.emoji,
+				children: _
+			}), w && /* @__PURE__ */ i("div", {
+				className: t["meta-below"],
+				children: w
+			})] }) : /* @__PURE__ */ a("div", {
+				className: t.bubble,
+				children: [_, w && /* @__PURE__ */ i("span", {
+					className: t.meta,
+					children: w
+				})]
+			})
+		})]
+	});
+};
+l.displayName = "ChatMessage";
+//#endregion
+export { l as ChatMessage };

package/dist/components/ChatMessage/chat-message.module.js

@@ -0,0 +1,21 @@
+//#region packages/react/src/components/ChatMessage/chat-message.module.less
+var e = "_message_di477_1", t = "_body_di477_30", n = "_bubble_di477_39", r = "_emoji_di477_63", i = "_system_di477_67", a = "_meta_di477_75", o = "_time_di477_94", s = "_ticks_di477_97", c = "_tick_di477_97", l = {
+	message: e,
+	"variant-received": "_variant-received_di477_10",
+	"variant-sent": "_variant-sent_di477_14",
+	"variant-system": "_variant-system_di477_18",
+	"avatar-slot": "_avatar-slot_di477_24",
+	body: t,
+	bubble: n,
+	emoji: r,
+	system: i,
+	meta: a,
+	"meta-below": "_meta-below_di477_76",
+	time: o,
+	ticks: s,
+	tick: c,
+	"ticks-read": "_ticks-read_di477_105",
+	"is-grouped": "_is-grouped_di477_108"
+};
+//#endregion
+export { t as body, n as bubble, l as default, r as emoji, e as message, a as meta, i as system, c as tick, s as ticks, o as time };

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

@@ -0,0 +1,2 @@
+export { ChatMessage } from './ChatMessage';
+export type { ChatMessageProps, ChatMessageVariant, ChatMessageStatus, } from './ChatMessage';

package/dist/components/ChatMessageActions/ChatMessageActions.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { type DropdownMenuItem } from '../DropdownMenu';
+/**
+ * 一条消息操作项。结构与 `DropdownMenuItem` / `ContextMenuItem` 完全一致（同一心智，
+ * 同 Ant v5 `items` 形态），因为它原样喂给这两个复用件。
+ */
+export type ChatMessageAction = DropdownMenuItem;
+/**
+ * 消息操作菜单：把一条消息（`children`，通常是 `<ChatMessage>`）包成「右键 / 长按出操作」。
+ * 本组件只出**触发 + 菜单壳**——动作项（回复 / 撤回 / 转发…）与回调全由 app 经 `actions` 传入。
+ * 不另造浮层：**指针路**用 `ContextMenu`——桌面右键、触屏长按目标区弹出（即时通讯惯例，无常驻按钮）；
+ * **键盘路**用 `DropdownMenu`——尾角触发钮仅在键盘聚焦时显形、Enter 打开。两路喂同一份 `actions`。
+ *
+ * 跨-prop 注意事项：
+ * - **两路触发、一份动作**：`actions` 同时喂给 `ContextMenu`（右键 / 长按，指针主入口）与
+ *   `DropdownMenu`（键盘聚焦露钮点开）；app 只需配一份。每项 `{ label, icon?, onClick?, danger?,
+ *   disabled?, children? }` 取 Ant v5 `items` 惯例，点项触发 `item.onClick`（动作语义、无选中态）。
+ * - **组件只出壳**：不持菜单开合 state、不判相邻、不接业务——回调交 app（`actions[].onClick`）；
+ *   图标走 `<Icon>`（项 `icon` 由底层复用件经 `<Icon>` 渲染，禁裸 svg / emoji / Unicode 符号）。
+ * - **无常驻 hover 按钮**：指针用户走右键 / 长按，尾角触发钮**只在键盘聚焦（`:focus-visible`）**时显形、
+ *   不随 hover 出现（避免气泡上常驻钮），仅为保证键盘可达；无可见文字 → 走 `triggerLabel` 给可及名
+ *   （默认「消息操作」）。
+ * - **键盘 / 焦点 / ARIA**（方向键走项、Enter 选中、Esc 关、焦点归还、`role="menu"`）由复用件
+ *   （ContextMenu / DropdownMenu → 底层）保证，本组件不重复实现。
+ */
+export interface ChatMessageActionsProps {
+    /** 被包裹的消息（通常是 `<ChatMessage>`）：hover / 长按此区出操作入口 */
+    children: React.ReactNode;
+    /** 动作项数组（Ant v5 `items` 风格，原样喂给 DropdownMenu / ContextMenu） */
+    actions: ChatMessageAction[];
+    /** 触发钮的无障碍标签（无可见文字时的可及名） @default '消息操作' */
+    triggerLabel?: string;
+    /** 菜单显隐变化回调（两路共用） */
+    onOpenChange?: (open: boolean) => void;
+    /** 自定义类名（挂到根容器） */
+    className?: string;
+    /** 行内样式（挂到根容器） */
+    style?: React.CSSProperties;
+}
+export declare const ChatMessageActions: React.FC<ChatMessageActionsProps>;

package/dist/components/ChatMessageActions/ChatMessageActions.js

@@ -0,0 +1,34 @@
+import { Icon as e } from "../Icon/Icon.js";
+import { DropdownMenu as t } from "../DropdownMenu/DropdownMenu.js";
+import { ContextMenu as n } from "../ContextMenu/ContextMenu.js";
+import r from "./chat-message-actions.module.js";
+import "react";
+import i from "clsx";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region packages/react/src/components/ChatMessageActions/ChatMessageActions.tsx
+var s = ({ children: s, actions: c, triggerLabel: l = "消息操作", onOpenChange: u, className: d, style: f }) => /* @__PURE__ */ a(n, {
+	items: c,
+	onOpenChange: u,
+	children: /* @__PURE__ */ o("div", {
+		className: i(r.wrap, d),
+		style: f,
+		children: [s, /* @__PURE__ */ a(t, {
+			items: c,
+			onOpenChange: u,
+			"aria-label": l,
+			trigger: /* @__PURE__ */ a("button", {
+				type: "button",
+				className: r.trigger,
+				"aria-label": l,
+				children: /* @__PURE__ */ a(e, {
+					name: "chevron-down",
+					size: "1em",
+					"aria-hidden": !0
+				})
+			})
+		})]
+	})
+});
+s.displayName = "ChatMessageActions";
+//#endregion
+export { s as ChatMessageActions };

package/dist/components/ChatMessageActions/chat-message-actions.module.js

@@ -0,0 +1,7 @@
+//#region packages/react/src/components/ChatMessageActions/chat-message-actions.module.less
+var e = "_wrap_9echt_1", t = "_trigger_9echt_5", n = {
+	wrap: e,
+	trigger: t
+};
+//#endregion
+export { n as default, t as trigger, e as wrap };

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

@@ -0,0 +1,2 @@
+export { ChatMessageActions } from './ChatMessageActions';
+export type { ChatMessageActionsProps, ChatMessageAction, } from './ChatMessageActions';

package/dist/components/ChatVoice/ChatVoice.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+/**
+ * 语音消息（手绘静态波形）：播放按钮（`<Button>` + `<Icon play/pause>`）+ 一排高低不等的
+ * 波形小条 + 时长；作为 `<ChatMessage>` 的 `content` 塞入（sent / received 两侧皆可）。
+ * 组件**不解码音频**——波形振幅数组 `waveform` 由 app 传入。无 Ant 对应件 → 播放态取
+ * Ant v5 `open` / `onOpenChange` 惯例（`playing` / `onPlayingChange`）、播放进度取 Ant
+ * `percent` 惯例，均不自创。
+ *
+ * 跨-prop 注意事项：
+ * - **波形柱是角色变量小元素、非内联 `<svg>`**：每根柱一个 `<div>`，高度按 `waveform` 振幅
+ *   （`0…1`）由内联 `height` 百分比驱动（几何数据、非颜色）；颜色只走角色变量类——已播段
+ *   `--stitch-accent`、未播段 `--stitch-border`，切站换肤跟随。
+ * - **`percent` 划已播 / 未播**：`0…100`，按柱序比例染色（前 `percent%` 的柱 = 已播 accent）。
+ * - **`playing` 切图标、`onPlayingChange` 交 app**：受控播放态（app 翻转 `playing`）；播放按钮
+ *   带可访问名（播放语音 / 暂停语音），波形本体装饰性 `aria-hidden`。
+ */
+export interface ChatVoiceProps {
+    /** 波形振幅数组（`0…1`，由 app 传入；组件不解码音频） */
+    waveform: number[];
+    /** 时长文本（如 `0:12`） */
+    duration?: React.ReactNode;
+    /**
+     * 已播进度（`0…100`）：前 `percent%` 的波形柱染为已播色（accent）
+     * @default 0
+     */
+    percent?: number;
+    /**
+     * 是否播放中：切换播放 / 暂停图标
+     * @default false
+     */
+    playing?: boolean;
+    /** 点击播放按钮的回调（播放 / 暂停交 app） */
+    onPlayingChange?: (playing: boolean) => void;
+    /** 自定义类名（挂到根容器） */
+    className?: string;
+    /** 行内样式（挂到根容器） */
+    style?: React.CSSProperties;
+}
+export declare const ChatVoice: React.FC<ChatVoiceProps>;

package/dist/components/ChatVoice/ChatVoice.js

@@ -0,0 +1,44 @@
+import { Button as e } from "../Button/Button.js";
+import { Icon as t } from "../Icon/Icon.js";
+import n from "./chat-voice.module.js";
+import "react";
+import r from "clsx";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region packages/react/src/components/ChatVoice/ChatVoice.tsx
+var o = ({ waveform: o, duration: s, percent: c = 0, playing: l = !1, onPlayingChange: u, className: d, style: f }) => {
+	let p = o.length, m = Math.round(Math.min(100, Math.max(0, c)) / 100 * p);
+	return /* @__PURE__ */ a("div", {
+		className: r(n.voice, d),
+		style: f,
+		children: [
+			/* @__PURE__ */ i(e, {
+				type: "primary",
+				className: n.play,
+				onClick: () => u?.(!l),
+				"aria-label": l ? "暂停语音" : "播放语音",
+				icon: /* @__PURE__ */ i(t, {
+					name: l ? "pause" : "play",
+					size: "1.125em"
+				})
+			}),
+			/* @__PURE__ */ i("div", {
+				className: n.wave,
+				"aria-hidden": "true",
+				children: o.map((e, t) => {
+					let a = Math.max(.15, Math.min(1, e)) * 100;
+					return /* @__PURE__ */ i("div", {
+						className: r(n.bar, t < m ? n["bar-played"] : n["bar-idle"]),
+						style: { height: `${a}%` }
+					}, t);
+				})
+			}),
+			s != null && /* @__PURE__ */ i("span", {
+				className: n.duration,
+				children: s
+			})
+		]
+	});
+};
+o.displayName = "ChatVoice";
+//#endregion
+export { o as ChatVoice };

package/dist/components/ChatVoice/chat-voice.module.js

@@ -0,0 +1,12 @@
+//#region packages/react/src/components/ChatVoice/chat-voice.module.less
+var e = "_voice_16mxc_1", t = "_play_16mxc_7", n = "_wave_16mxc_14", r = "_bar_16mxc_22", i = "_duration_16mxc_34", a = {
+	voice: e,
+	play: t,
+	wave: n,
+	bar: r,
+	"bar-played": "_bar-played_16mxc_28",
+	"bar-idle": "_bar-idle_16mxc_31",
+	duration: i
+};
+//#endregion
+export { r as bar, a as default, i as duration, t as play, e as voice, n as wave };

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

@@ -0,0 +1,2 @@
+export { ChatVoice } from './ChatVoice';
+export type { ChatVoiceProps } from './ChatVoice';