@octohirono/stitch-design-system 0.1.0 → 0.3.0

package/dist/components/BarChart/BarChart.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+/** 单条系列：从每行数据里取哪个字段、显示成什么名。 */
+export interface BarChartSeries {
+    /** 该系列在数据项里取值的字段名 */
+    dataKey: string;
+    /** 系列显示名（tooltip / 图例）；缺省用 `dataKey` */
+    name?: string;
+}
+/**
+ * 柱状图。系列色只从契约分类色槽 `var(--stitch-cat-*)` 取、按序号循环，随站换肤整图跟随；
+ * 组件内零硬编码主题值、零手写内联 svg（svg 全由 recharts 出），无 emoji。多系列默认分组并排，
+ * `stack` 开启则堆叠成一柱；多系列另出图例（`Legend`）把系列名列出，不只靠颜色区分（守 a11y）。
+ * 整图作一张图对外——`role="img"` + `aria-label`（缺省兜底非空名）。
+ */
+export interface BarChartProps {
+    /** 数据源，每项一行记录（Ant charts `data` 语义） */
+    data: Record<string, unknown>[];
+    /** x 轴取值字段名（Ant charts `xField` 语义） */
+    xField: string;
+    /** 一条或多条系列（各取一个 y 字段） */
+    series: BarChartSeries[];
+    /**
+     * 多系列堆叠成一柱（Ant charts `isStack` 语义）；关闭时多系列分组并排
+     * @default false
+     */
+    stack?: boolean;
+    /**
+     * 图表高度（px）；宽度恒铺满容器
+     * @default 300
+     */
+    height?: number;
+    /** y 值格式化（如货币）；作用于坐标轴刻度与 tooltip 值 */
+    valueFormatter?: (value: number) => string;
+    /** 图表整体可访问名（`role="img"` 的文本替代）；缺省兜底非空名 */
+    ariaLabel?: string;
+    /** 透传外层容器类名 */
+    className?: string;
+}
+/**
+ * 把数据画成柱状（单 / 多系列，可堆叠），系列色走契约分类色槽、随站换肤。
+ */
+export declare const BarChart: React.FC<BarChartProps>;

package/dist/components/BarChart/BarChart.js

@@ -0,0 +1,71 @@
+import { catColor as e } from "../_internal/dataviz/chartColors.js";
+import { ChartFrame as t } from "../_internal/dataviz/ChartFrame.js";
+import { ChartTooltip as n } from "../_internal/dataviz/ChartTooltip.js";
+import r from "./bar-chart.module.js";
+import "react";
+import i from "clsx";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Bar as s, BarChart as c, CartesianGrid as l, Legend as u, Tooltip as d, XAxis as f, YAxis as p } from "recharts";
+//#region packages/react/src/components/BarChart/BarChart.tsx
+var m = ({ data: m, xField: h, series: g, stack: _ = !1, height: v = 300, valueFormatter: y, ariaLabel: b, className: x }) => {
+	let S = { fill: "var(--stitch-text-secondary)" }, C = y ? (e) => y(e) : void 0, w = (e) => {
+		let { active: t, label: r, payload: i } = e, o = i?.map((e) => ({
+			name: e.name,
+			value: y && typeof e.value == "number" ? y(e.value) : e.value,
+			color: e.color
+		}));
+		return /* @__PURE__ */ a(n, {
+			active: t,
+			label: r,
+			payload: o
+		});
+	}, T = _ ? "stack" : void 0, E = g.length > 1;
+	return /* @__PURE__ */ a(t, {
+		ariaLabel: b,
+		height: v,
+		className: i(r.chart, x),
+		children: /* @__PURE__ */ o(c, {
+			data: m,
+			margin: {
+				top: 8,
+				right: 8,
+				bottom: 4,
+				left: 4
+			},
+			children: [
+				/* @__PURE__ */ a(l, {
+					stroke: "var(--stitch-border)",
+					vertical: !1
+				}),
+				/* @__PURE__ */ a(f, {
+					dataKey: h,
+					stroke: "var(--stitch-border)",
+					tick: S,
+					tickLine: !1
+				}),
+				/* @__PURE__ */ a(p, {
+					stroke: "var(--stitch-border)",
+					tick: S,
+					tickLine: !1,
+					tickFormatter: C
+				}),
+				/* @__PURE__ */ a(d, {
+					content: w,
+					cursor: { fill: "color-mix(in srgb, var(--stitch-text-primary), transparent 92%)" }
+				}),
+				E && /* @__PURE__ */ a(u, { wrapperStyle: { color: "var(--stitch-text-primary)" } }),
+				g.map((t, n) => /* @__PURE__ */ a(s, {
+					dataKey: t.dataKey,
+					name: t.name ?? t.dataKey,
+					fill: e(n),
+					stackId: T,
+					radius: 0,
+					isAnimationActive: !1
+				}, t.dataKey))
+			]
+		})
+	});
+};
+m.displayName = "BarChart";
+//#endregion
+export { m as BarChart };

package/dist/components/BarChart/bar-chart.module.js

@@ -0,0 +1,4 @@
+//#region packages/react/src/components/BarChart/bar-chart.module.less
+var e = "_chart_1sb8f_1", t = { chart: e };
+//#endregion
+export { e as chart, t as default };

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

@@ -0,0 +1,2 @@
+export { BarChart } from './BarChart';
+export type { BarChartProps, BarChartSeries } from './BarChart';

package/dist/components/Calendar/Calendar.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+export type CalendarMode = 'single' | 'range';
+/** 顶部年月区形态：`'label'` 静态标题；`'dropdown'` 月/年可点下拉（快速跳月跳年） */
+export type CalendarCaptionLayout = 'label' | 'dropdown';
+/** 日期范围：`from` 起点、`to` 终点（range 模式的取值形态） */
+export interface DateRange {
+    from?: Date;
+    to?: Date;
+}
+/**
+ * 内联日历网格（react-day-picker 引擎）：一次支持 `mode="single"`（单选）与 `mode="range"`
+ * （范围）；月份网格、方向键导航、ARIA grid（`role="grid"`、日按钮可及名、翻月按钮可及名）
+ * 全由引擎兜底，上皮只读角色变量随换肤变化。
+ *
+ * 跨-prop 注意事项：
+ * - **取值随 `mode` 变形**：`single` 下 `value`/`defaultValue` 是 `Date`、`onChange` 收
+ *   `Date | undefined`；`range` 下它们是 {@link DateRange}（`{from,to}`）、`onChange` 收
+ *   `DateRange | undefined`。切 mode 时同步换掉取值形态。
+ * - **受控/非受控双模式**：给 `value` 由父管（配 `onChange` 回写），只给 `defaultValue`
+ *   组件自管；两者互斥优先取 `value`。
+ * - **禁用某些日期**用 `disabledDate(date) => boolean`（Ant 语义），命中的日按钮 `disabled`、
+ *   键盘与点击都跳过；整块只读用 `disabled`（把所有日期禁掉）。
+ * - **面 = 角色变量**：选中日 `--stitch-accent` + `--stitch-accent-text`，范围中段
+ *   `--stitch-bg-accent`（日按钮铺满整格，底色与端点框边到边对齐、不出头），今天描
+ *   `--stitch-border-strong`、hover 落 `--stitch-bg-card`、禁用走 `--stitch-text-disabled`；
+ *   翻月箭头一律经 `<Icon>`（`chevron-left`/`chevron-right`），无裸 svg / Unicode 符号。
+ * - **`captionLayout="dropdown"`（默认）** 顶部月/年为可点下拉，快速跳月跳年（原生 `<select>`
+ *   兜键盘与可及名）；传 `'label'` 退回静态标题。年份范围默认「今年往前 100 年」，用
+ *   `startMonth`/`endMonth` 收窄。
+ */
+export interface CalendarProps {
+    /** 选择模式：单日或范围 @default 'single' */
+    mode?: CalendarMode;
+    /** 受控选中值（`single`→`Date`，`range`→`DateRange`） */
+    value?: Date | DateRange;
+    /** 非受控初始选中值（`single`→`Date`，`range`→`DateRange`） */
+    defaultValue?: Date | DateRange;
+    /** 选中变化回调（`single`→`Date | undefined`，`range`→`DateRange | undefined`） */
+    onChange?: (value: Date | DateRange | undefined) => void;
+    /** 逐日禁用判定：返回 `true` 的日期不可选 */
+    disabledDate?: (date: Date) => boolean;
+    /** 整块禁用（所有日期不可选） @default false */
+    disabled?: boolean;
+    /** 首屏展示的月份（不给则据选中值 / 当月） */
+    defaultMonth?: Date;
+    /** 顶部年月区形态：`'dropdown'` 可点选月 / 年，`'label'` 静态标题 @default 'dropdown' */
+    captionLayout?: CalendarCaptionLayout;
+    /** dropdown 年份下限（不给默认今年往前 100 年） */
+    startMonth?: Date;
+    /** dropdown 年份上限（不给默认今年年底） */
+    endMonth?: Date;
+    /** 日历网格的可访问名 */
+    'aria-label'?: string;
+    /** 自定义类名（挂到日历根节点） */
+    className?: string;
+}
+export declare const Calendar: React.FC<CalendarProps>;

package/dist/components/Calendar/Calendar.js

@@ -0,0 +1,83 @@
+import { Icon as e } from "../Icon/Icon.js";
+import { Select as t } from "../Select/Select.js";
+import n from "./calendar.module.js";
+import { useCallback as r, useState as i } from "react";
+import a from "clsx";
+import { jsx as o } from "react/jsx-runtime";
+import { DayPicker as s } from "react-day-picker";
+//#region packages/react/src/components/Calendar/Calendar.tsx
+var c = ({ orientation: t }) => /* @__PURE__ */ o(e, {
+	name: t === "left" ? "chevron-left" : t === "right" ? "chevron-right" : "chevron-down",
+	size: 18
+}), l = ({ options: e, value: r, onChange: i, disabled: s, "aria-label": c }) => {
+	let l = typeof c == "string" && /year/i.test(c);
+	return /* @__PURE__ */ o(t, {
+		size: "small",
+		className: a(n.captionSelect, l && n.captionYear),
+		options: (e ?? []).map((e) => ({
+			label: e.label,
+			value: e.value,
+			disabled: e.disabled
+		})),
+		value: r == null ? void 0 : Number(r),
+		onChange: (e) => i?.({ target: { value: String(e) } }),
+		disabled: s,
+		"aria-label": typeof c == "string" ? c : void 0
+	});
+}, u = {
+	root: n.root,
+	months: n.months,
+	month: n.month,
+	month_caption: n.caption,
+	caption_label: n.captionLabel,
+	nav: n.nav,
+	button_previous: n.navButton,
+	button_next: n.navButton,
+	dropdowns: n.dropdowns,
+	month_grid: n.grid,
+	weekdays: n.weekdays,
+	weekday: n.weekday,
+	week: n.week,
+	day: n.day,
+	day_button: n.dayButton,
+	today: n.today,
+	selected: n.selected,
+	range_start: n.rangeStart,
+	range_middle: n.rangeMiddle,
+	range_end: n.rangeEnd,
+	outside: n.outside,
+	disabled: n.disabled,
+	hidden: n.hidden,
+	focused: n.focused
+}, d = ({ mode: e = "single", value: t, defaultValue: n, onChange: d, disabledDate: f, disabled: p = !1, defaultMonth: m, captionLayout: h = "dropdown", startMonth: g, endMonth: _, className: v, "aria-label": y }) => {
+	let b = t !== void 0, [x, S] = i(n), C = b ? t : x, w = r((e) => {
+		b || S(e), d?.(e);
+	}, [b, d]), T = (/* @__PURE__ */ new Date()).getFullYear(), E = h === "dropdown" ? g ?? new Date(T - 100, 0, 1) : g, D = h === "dropdown" ? _ ?? new Date(T + 10, 11, 31) : _, O = {
+		classNames: u,
+		components: {
+			Chevron: c,
+			Dropdown: l
+		},
+		disabled: p ? !0 : f,
+		defaultMonth: m,
+		captionLayout: h,
+		startMonth: E,
+		endMonth: D,
+		"aria-label": y,
+		className: a(v)
+	};
+	return e === "range" ? /* @__PURE__ */ o(s, {
+		mode: "range",
+		selected: C,
+		onSelect: (e) => w(e ?? void 0),
+		...O
+	}) : /* @__PURE__ */ o(s, {
+		mode: "single",
+		selected: C,
+		onSelect: (e) => w(e ?? void 0),
+		...O
+	});
+};
+d.displayName = "Calendar";
+//#endregion
+export { d as Calendar };

package/dist/components/Calendar/calendar.module.js

@@ -0,0 +1,26 @@
+//#region packages/react/src/components/Calendar/calendar.module.less
+var e = "_root_de6fy_1", t = "_months_de6fy_11", n = "_caption_de6fy_14", r = "_captionLabel_de6fy_21", i = "_nav_de6fy_25", a = "_navButton_de6fy_34", o = "_dropdowns_de6fy_60", s = "_captionSelect_de6fy_66", c = "_captionYear_de6fy_69", l = "_grid_de6fy_72", u = "_weekday_de6fy_75", d = "_day_de6fy_83", f = "_dayButton_de6fy_90", p = "_today_de6fy_116", m = "_selected_de6fy_116", h = "_rangeStart_de6fy_116", g = "_rangeEnd_de6fy_116", _ = "_outside_de6fy_120", v = "_disabled_de6fy_123", y = "_hidden_de6fy_130", b = "_rangeMiddle_de6fy_140", x = {
+	root: e,
+	months: t,
+	caption: n,
+	captionLabel: r,
+	nav: i,
+	navButton: a,
+	dropdowns: o,
+	captionSelect: s,
+	captionYear: c,
+	grid: l,
+	weekday: u,
+	day: d,
+	dayButton: f,
+	today: p,
+	selected: m,
+	rangeStart: h,
+	rangeEnd: g,
+	outside: _,
+	disabled: v,
+	hidden: y,
+	rangeMiddle: b
+};
+//#endregion
+export { n as caption, r as captionLabel, s as captionSelect, c as captionYear, d as day, f as dayButton, x as default, v as disabled, o as dropdowns, l as grid, y as hidden, t as months, i as nav, a as navButton, _ as outside, g as rangeEnd, b as rangeMiddle, h as rangeStart, e as root, m as selected, p as today, u as weekday };

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

@@ -0,0 +1,2 @@
+export { Calendar } from './Calendar';
+export type { CalendarProps, CalendarMode, CalendarCaptionLayout, DateRange, } from './Calendar';

package/dist/components/ChatFile/ChatFile.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+/**
+ * 文件附件卡：复用 `<Card>` 承载——类型图标（`<Icon name="file">`）+ 文件名 + 大小 /
+ * 副文本；作为 `<ChatMessage>` 的 `content` 塞入（sent / received 两侧皆可）。点击 / 下载
+ * 均为**回调交 app**（组件不导航、不发起下载）。对外 props 取 Ant Design X `Attachments`
+ * 附件项最近惯例（`name` / `size` / `description`）+ Ant v5 回调命名。
+ *
+ * 跨-prop 注意事项：
+ * - **下载键是文件卡固有部件、常驻**（文件默认可下载）：右侧复用 `<Button type="text">`，点击走
+ *   `onDownload` 回调、由 app 落地下载。
+ * - **两个独立可聚焦控件、互不嵌套**：给 `onClick` 时文件名区升格为整行透明按钮（打开），与下载
+ *   键平级，无按钮套按钮。
+ * - **`size` 是字节数**，组件内格式化为人类可读（`1.2 MB`）；`description` 为副文本（如类型），
+ *   与已格式化的大小同排、`·` 分隔。
+ * - **图标走 `<Icon>`**：类型图标 `<Icon name="file">`（装饰性）、下载 `<Icon name="download">`
+ *   （其按钮带可访问名 `下载 {name}`），非 emoji / 裸 `<svg>`。
+ */
+export interface ChatFileProps {
+    /** 文件名（必填） */
+    name: string;
+    /** 文件大小（字节数）；组件内格式化为人类可读 */
+    size?: number;
+    /** 副文本（如文件类型说明），与大小同排 `·` 分隔 */
+    description?: React.ReactNode;
+    /** 点击文件卡的回调（打开 / 预览交 app）；给出时文件名区可聚焦、可键盘触发 */
+    onClick?: () => void;
+    /** 点击下载键的回调（下载交 app）；下载键常驻，点击走此回调 */
+    onDownload?: () => void;
+    /** 自定义类名（挂到根 Card） */
+    className?: string;
+    /** 行内样式（挂到根 Card） */
+    style?: React.CSSProperties;
+}
+export declare const ChatFile: React.FC<ChatFileProps>;

package/dist/components/ChatFile/ChatFile.js

@@ -0,0 +1,71 @@
+import { Button as e } from "../Button/Button.js";
+import { Icon as t } from "../Icon/Icon.js";
+import { Card as n } from "../Card/Card.js";
+import r from "./chat-file.module.js";
+import "react";
+import i from "clsx";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region packages/react/src/components/ChatFile/ChatFile.tsx
+var c = [
+	"B",
+	"KB",
+	"MB",
+	"GB",
+	"TB"
+];
+function l(e) {
+	if (!Number.isFinite(e) || e < 0) return "";
+	if (e < 1) return "0 B";
+	let t = Math.min(c.length - 1, Math.floor(Math.log(e) / Math.log(1024))), n = e / 1024 ** t;
+	return `${t === 0 ? String(Math.round(n)) : n.toFixed(1)} ${c[t]}`;
+}
+var u = ({ name: c, size: u, description: d, onClick: f, onDownload: p, className: m, style: h }) => {
+	let g = typeof u == "number" ? l(u) : "", _ = /* @__PURE__ */ s("span", {
+		className: r.meta,
+		children: [
+			g && /* @__PURE__ */ o("span", { children: g }),
+			g && d != null && /* @__PURE__ */ o("span", {
+				"aria-hidden": "true",
+				children: " · "
+			}),
+			d != null && /* @__PURE__ */ o("span", { children: d })
+		]
+	}), v = /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(t, {
+		name: "file",
+		className: r.type,
+		size: "1.5em"
+	}), /* @__PURE__ */ s("span", {
+		className: r.text,
+		children: [/* @__PURE__ */ o("span", {
+			className: r.name,
+			children: c
+		}), (g || d != null) && _]
+	})] });
+	return /* @__PURE__ */ s(n, {
+		variant: "outlined",
+		className: i(r.file, m),
+		style: h,
+		children: [f ? /* @__PURE__ */ o("button", {
+			type: "button",
+			className: r.trigger,
+			onClick: f,
+			"aria-label": `打开文件 ${c}`,
+			children: v
+		}) : /* @__PURE__ */ o("div", {
+			className: r.trigger,
+			children: v
+		}), /* @__PURE__ */ o(e, {
+			type: "text",
+			className: r.download,
+			onClick: p,
+			"aria-label": `下载 ${c}`,
+			children: /* @__PURE__ */ o(t, {
+				name: "download",
+				size: "1.25em"
+			})
+		})]
+	});
+};
+u.displayName = "ChatFile";
+//#endregion
+export { u as ChatFile };

package/dist/components/ChatFile/chat-file.module.js

@@ -0,0 +1,12 @@
+//#region packages/react/src/components/ChatFile/chat-file.module.less
+var e = "_file_1tjaq_1", t = "_trigger_1tjaq_8", n = "_type_1tjaq_29", r = "_text_1tjaq_33", i = "_name_1tjaq_39", a = "_meta_1tjaq_47", o = "_download_1tjaq_51", s = {
+	file: e,
+	trigger: t,
+	type: n,
+	text: r,
+	name: i,
+	meta: a,
+	download: o
+};
+//#endregion
+export { s as default, o as download, e as file, a as meta, i as name, r as text, t as trigger, n as type };

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

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

package/dist/components/ChatImage/ChatImage.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+/**
+ * 图片消息（气泡内缩略图 + 大图查看器）：气泡里显缩略图（复用通用 `<Image>`、`preview` 关闭），
+ * 点击开大图——**大图仍复用通用 `<Image>`（它自带的相框即「框」）**，本组件只做一层遮罩 + 把下载 /
+ * 关闭工具键**叠在这个框上**。作为 `<ChatMessage>` 的 `content` 塞入（sent / received 两侧皆可）。
+ * `src` / `alt` / `width` / `height` 照搬 antd `Image`；`width` 即缩略图宽。
+ *
+ * 跨-prop 注意事项：
+ * - **缩略图与大图都复用 `<Image preview={false}>`**（不手写裸 `<img>`、不重造 Image 的相框 / 圆角 /
+ *   加载淡入 / 错误占位）；本组件只加聊天专属的遮罩 + 框上工具键（下载 / 关闭），`<Image>` 一行未改。
+ * - **块级排布**：根为块级元素，故 `<ChatMessage>` 的时间 / 回执落在缩略图**下方**（同文件卡）。
+ * - **大图查看器 a11y**：Portal 遮罩 + `role="dialog"`；打开焦点落关闭键、Tab 在下载 / 关闭间循环、
+ *   ESC 关闭、关闭后焦点归还缩略图。下载走原生 `<a download href={src}>`（存下当前图，不解码不发
+ *   请求），工具键图标走 `<Icon>`，均带可访问名。
+ * - `width` 控缩略图尺寸；点击后大图按视口放大（原始尺寸）。
+ */
+export interface ChatImageProps {
+    /** 图片地址（必填，照搬 antd Image） */
+    src: string;
+    /** 图片替代文本（无障碍）；留空表示装饰性图片 */
+    alt?: string;
+    /** 缩略图宽度（数字按 px，字符串原样） */
+    width?: number | string;
+    /** 缩略图高度（数字按 px，字符串原样） */
+    height?: number | string;
+    /** 自定义类名（挂到根） */
+    className?: string;
+    /** 行内样式（挂到根） */
+    style?: React.CSSProperties;
+}
+export declare const ChatImage: React.FC<ChatImageProps>;

package/dist/components/ChatImage/ChatImage.js

@@ -0,0 +1,88 @@
+import { Icon as e } from "../Icon/Icon.js";
+import { Image as t } from "../Image/Image.js";
+import n from "./chat-image.module.js";
+import { useEffect 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";
+import { createPortal as l } from "react-dom";
+//#region packages/react/src/components/ChatImage/ChatImage.tsx
+var u = ({ src: u, alt: d = "", width: f, height: p, className: m, style: h }) => {
+	let [g, _] = a(!1), v = i(null), y = i(null), b = i(null);
+	return r(() => {
+		if (!g) return;
+		v.current?.focus();
+		let e = (e) => {
+			if (e.key === "Escape") _(!1);
+			else if (e.key === "Tab") {
+				e.preventDefault();
+				let t = [y.current, v.current].filter((e) => e != null);
+				if (t.length === 0) return;
+				let n = t.indexOf(document.activeElement);
+				t[e.shiftKey ? n <= 0 ? t.length - 1 : n - 1 : n >= t.length - 1 ? 0 : n + 1]?.focus();
+			}
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [g]), r(() => {
+		g || (b.current?.focus(), b.current = null);
+	}, [g]), /* @__PURE__ */ c("span", {
+		className: o(n.frame, m),
+		style: h,
+		children: [/* @__PURE__ */ s("button", {
+			type: "button",
+			className: n.thumb,
+			onClick: () => {
+				b.current = document.activeElement, _(!0);
+			},
+			"aria-label": d ? `查看大图 ${d}` : "查看大图",
+			children: /* @__PURE__ */ s(t, {
+				src: u,
+				alt: d,
+				width: f,
+				height: p,
+				preview: !1
+			})
+		}), l(g ? /* @__PURE__ */ s("div", {
+			className: n.mask,
+			onClick: () => _(!1),
+			children: /* @__PURE__ */ c("div", {
+				className: n.dialog,
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-label": d ? `查看图片：${d}` : "图片预览",
+				onClick: (e) => e.stopPropagation(),
+				children: [/* @__PURE__ */ s(t, {
+					src: u,
+					alt: d,
+					preview: !1,
+					className: n.full
+				}), /* @__PURE__ */ c("div", {
+					className: n.tools,
+					children: [/* @__PURE__ */ s("a", {
+						ref: y,
+						className: n.toolBtn,
+						href: u,
+						download: !0,
+						"aria-label": d ? `下载图片 ${d}` : "下载图片",
+						children: /* @__PURE__ */ s(e, {
+							name: "download",
+							size: 14
+						})
+					}), /* @__PURE__ */ s("button", {
+						type: "button",
+						ref: v,
+						className: n.toolBtn,
+						"aria-label": "关闭大图",
+						onClick: () => _(!1),
+						children: /* @__PURE__ */ s(e, {
+							name: "close",
+							size: 14
+						})
+					})]
+				})]
+			})
+		}) : null, document.body)]
+	});
+};
+u.displayName = "ChatImage";
+//#endregion
+export { u as ChatImage };

package/dist/components/ChatImage/chat-image.module.js

@@ -0,0 +1,12 @@
+//#region packages/react/src/components/ChatImage/chat-image.module.less
+var e = "_frame_1b4n8_1", t = "_thumb_1b4n8_6", n = "_mask_1b4n8_18", r = "_dialog_1b4n8_27", i = "_full_1b4n8_32", a = "_tools_1b4n8_36", o = "_toolBtn_1b4n8_44", s = {
+	frame: e,
+	thumb: t,
+	mask: n,
+	dialog: r,
+	full: i,
+	tools: a,
+	toolBtn: o
+};
+//#endregion
+export { s as default, r as dialog, e as frame, i as full, n as mask, t as thumb, o as toolBtn, a as tools };

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

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

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

@@ -0,0 +1,77 @@
+import React from 'react';
+export type ChatInputSubmitType = 'enter' | 'shiftEnter';
+/** autoSize 精细档：限制自增高的最小 / 最大行数（照搬 antd Input.TextArea / Sender） */
+export interface ChatInputAutoSize {
+    /** 最小行数（低于此仍占此高） */
+    minRows?: number;
+    /** 最大行数（超过后内部滚动、不再增高） */
+    maxRows?: number;
+}
+/**
+ * 聊天输入器：多行 textarea **自增高**（`autoSize`）+ 受控/非受控 `value` + `submitType`
+ * 决定发送键位（Enter 发送 / Shift+Enter 换行）+ `onSubmit` 发送回调 + `prefix` / `actions`
+ * 插槽（附件按钮等钩子由 app 填）。对外 props 照搬 antd `Input`（`value` / `onChange` /
+ * `disabled` / `placeholder` / `autoSize`）+ 聊天专属补 Ant Design X `Sender`
+ * （`onSubmit` / `loading` / `submitType` / `prefix` / `actions`）。
+ *
+ * 跨-prop 注意事项：
+ * - **受控/非受控双模式**：给 `value` 由父管，只给 `defaultValue` 组件自管；非受控时发送后
+ *   自动清空，受控时清空由父在 `onSubmit` 里做（组件不擅自改父的值）。
+ * - **`autoSize` 自增高**：`true`（默认）随内容行数增高；传 `{ minRows, maxRows }` 卡上下界，
+ *   超 `maxRows` 内部滚动。`false` 关自增（固定单行高、可手动拉伸由浏览器定）。
+ * - **`submitType` 定发送键位**：`enter`（默认）→ Enter 发送、Shift+Enter 换行；`shiftEnter`
+ *   → Shift+Enter 发送、Enter 换行。输入法组词中（IME composing）的 Enter 一律只上屏、不发送。
+ * - **`onSubmit` 只在有内容时触发**：纯空白不发送；`disabled` / `loading` 时不发送。发送键是
+ *   原生 `<button>`，图标走 `<Icon name="send">`（禁 emoji / Unicode / 裸 svg），`sendAriaLabel`
+ *   定其可访问名。
+ * - **IM 无停止态**：`loading` 只置发送键忙 / 禁发，**不**把发送键换成「停止」键（那是 AI 生成
+ *   语境；IM 是人对人、无生成可停）。
+ * - **`prefix` / `actions` 传你自己的元素**（附件按钮走 `<Icon>` 或 `<Button>`）——**Do NOT** 传
+ *   emoji / Unicode 符号 / 裸 `<svg>`。附件的选择 / 上传逻辑由 app 实现，组件只留插槽。
+ * - **可及名**：其余原生 textarea 属性（`aria-label` / `id` / `name` / `maxLength` …）经 `...rest`
+ *   透传到内部 `<textarea>`——给它可访问名（配 `<label htmlFor>` 或 `aria-label`）。
+ */
+export interface ChatInputProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'defaultValue' | 'onChange' | 'onSubmit' | 'onKeyDown' | 'rows' | 'prefix'> {
+    /** 输入值（受控）；不传由组件自管（非受控，配 `defaultValue`） */
+    value?: string;
+    /** 默认值（非受控初始值） */
+    defaultValue?: string;
+    /** 值变化回调（照搬 antd Input） */
+    onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+    /** 发送回调（照搬 Ant Design X Sender）：参数为当前消息文本 */
+    onSubmit?: (message: string) => void;
+    /** 占位符（照搬 antd Input） */
+    placeholder?: string;
+    /** 禁用（照搬 antd Input） */
+    disabled?: boolean;
+    /**
+     * 发送中（照搬 Sender）：置发送键忙 / 禁发；**IM 无停止态**，不换成「停止」键
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * 多行自增高（照搬 antd Input.TextArea / Sender）：`true` 随内容增高，`{ minRows, maxRows }`
+     * 卡上下界，`false` 关自增
+     * @default true
+     */
+    autoSize?: boolean | ChatInputAutoSize;
+    /**
+     * 发送键位（照搬 Sender）：`enter` = Enter 发送 / Shift+Enter 换行；`shiftEnter` 反之
+     * @default 'enter'
+     */
+    submitType?: ChatInputSubmitType;
+    /** 前缀插槽（附件按钮等钩子，照搬 Sender）；附件逻辑由 app */
+    prefix?: React.ReactNode;
+    /** 动作区插槽（照搬 Sender）：覆盖默认发送键旁的自定义动作 */
+    actions?: React.ReactNode;
+    /**
+     * 发送键的无障碍标签（纯图标按钮必备可访问名）
+     * @default '发送'
+     */
+    sendAriaLabel?: string;
+    /** 自定义类名（挂到根容器） */
+    className?: string;
+    /** 行内样式（挂到根容器） */
+    style?: React.CSSProperties;
+}
+export declare const ChatInput: React.FC<ChatInputProps>;