@octohirono/stitch-design-system 0.1.0 → 0.3.0

package/dist/components/LineChart/LineChart.js

@@ -0,0 +1,110 @@
+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 "./line-chart.module.js";
+import "react";
+import i from "clsx";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Area as c, AreaChart as l, CartesianGrid as u, LabelList as d, Line as f, LineChart as p, Tooltip as m, XAxis as h, YAxis as g } from "recharts";
+//#region packages/react/src/components/LineChart/LineChart.tsx
+var _ = [
+	"0",
+	"6 4",
+	"2 4",
+	"10 4 2 4"
+], v = (e) => _[(e % _.length + _.length) % _.length], y = ({ data: _, xField: y, series: b, smooth: x = !1, area: S = !1, height: C = 300, valueFormatter: w, ariaLabel: T, className: E }) => {
+	let D = x ? "monotone" : "linear", O = { fill: "var(--stitch-text-secondary)" }, k = w ? (e) => w(e) : void 0, A = (e) => {
+		let { active: t, label: r, payload: i } = e, a = i?.map((e) => ({
+			name: e.name,
+			value: w && typeof e.value == "number" ? w(e.value) : e.value,
+			color: e.color
+		}));
+		return /* @__PURE__ */ o(n, {
+			active: t,
+			label: r,
+			payload: a
+		});
+	}, j = _.length - 1, M = (e) => ({ x: t, y: n, index: i }) => i === j ? /* @__PURE__ */ o("text", {
+		x: Number(t) + 8,
+		y: Number(n),
+		dy: 4,
+		className: r.endLabel,
+		children: e
+	}) : null, N = {
+		top: 8,
+		right: 56,
+		bottom: 4,
+		left: 4
+	}, P = /* @__PURE__ */ s(a, { children: [
+		/* @__PURE__ */ o(u, {
+			stroke: "var(--stitch-border)",
+			vertical: !1
+		}),
+		/* @__PURE__ */ o(h, {
+			dataKey: y,
+			stroke: "var(--stitch-border)",
+			tick: O,
+			tickLine: !1
+		}),
+		/* @__PURE__ */ o(g, {
+			stroke: "var(--stitch-border)",
+			tick: O,
+			tickLine: !1,
+			tickFormatter: k
+		}),
+		/* @__PURE__ */ o(m, { content: A })
+	] }), F = S ? /* @__PURE__ */ s(l, {
+		data: _,
+		margin: N,
+		children: [P, b.map((t, n) => {
+			let r = e(n), i = t.name ?? t.dataKey;
+			return /* @__PURE__ */ o(c, {
+				type: D,
+				dataKey: t.dataKey,
+				name: i,
+				stroke: r,
+				strokeWidth: 2,
+				strokeDasharray: v(n),
+				fill: `color-mix(in srgb, ${r}, transparent 88%)`,
+				fillOpacity: 1,
+				dot: !1,
+				activeDot: { r: 4 },
+				isAnimationActive: !1,
+				children: /* @__PURE__ */ o(d, {
+					dataKey: t.dataKey,
+					content: M(i)
+				})
+			}, t.dataKey);
+		})]
+	}) : /* @__PURE__ */ s(p, {
+		data: _,
+		margin: N,
+		children: [P, b.map((t, n) => {
+			let r = t.name ?? t.dataKey;
+			return /* @__PURE__ */ o(f, {
+				type: D,
+				dataKey: t.dataKey,
+				name: r,
+				stroke: e(n),
+				strokeWidth: 2,
+				strokeDasharray: v(n),
+				dot: !1,
+				activeDot: { r: 4 },
+				isAnimationActive: !1,
+				children: /* @__PURE__ */ o(d, {
+					dataKey: t.dataKey,
+					content: M(r)
+				})
+			}, t.dataKey);
+		})]
+	});
+	return /* @__PURE__ */ o(t, {
+		ariaLabel: T,
+		height: C,
+		className: i(r.chart, E),
+		children: F
+	});
+};
+y.displayName = "LineChart";
+//#endregion
+export { y as LineChart };

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

@@ -0,0 +1,2 @@
+export { LineChart } from './LineChart';
+export type { LineChartProps, LineChartSeries } from './LineChart';

package/dist/components/LineChart/line-chart.module.js

@@ -0,0 +1,7 @@
+//#region packages/react/src/components/LineChart/line-chart.module.less
+var e = "_chart_bhyb6_1", t = "_endLabel_bhyb6_5", n = {
+	chart: e,
+	endLabel: t
+};
+//#endregion
+export { e as chart, n as default, t as endLabel };

package/dist/components/PieChart/PieChart.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+/**
+ * 饼 / 环图。扇区色只从契约分类色槽 `var(--stitch-cat-*)` 取、按序号循环，随站换肤整图跟随；
+ * 组件内零硬编码主题值、零手写内联 svg（svg 全由 recharts 出），无 emoji。`innerRadius` 挖空
+ * 中心即成环形（donut），此时可用 `centerLabel` 在中心放一个值；默认出图例（`Legend`）把
+ * 分类名列出，不只靠颜色区分（守 a11y）。整图作一张图对外——`role="img"` + `aria-label`
+ * （缺省兜底非空名）。
+ */
+export interface PieChartProps {
+    /** 数据源，每项一扇区（Ant charts `data` 语义） */
+    data: Record<string, unknown>[];
+    /** 扇区数值字段——决定扇区角度大小（Ant charts `angleField` 语义） */
+    angleField: string;
+    /** 扇区分类字段——作图例名与 tooltip 名（Ant charts `colorField` 语义） */
+    colorField: string;
+    /**
+     * 环形内半径占比 0–1（Ant charts `innerRadius` 语义）；0 = 实心饼，>0 = 环形 donut
+     * @default 0
+     */
+    innerRadius?: number;
+    /** 环形中心值（仅 `innerRadius` > 0 挖空后有空间显示；扇区数值的汇总等） */
+    centerLabel?: string | number;
+    /**
+     * 是否显示图例（把分类名 → 色块显式列出，作不依赖颜色的区分通道）
+     * @default true
+     */
+    legend?: boolean;
+    /**
+     * 图表高度（px）；宽度恒铺满容器
+     * @default 300
+     */
+    height?: number;
+    /** 扇区值格式化（如货币 / 百分比）；作用于 tooltip 值 */
+    valueFormatter?: (value: number) => string;
+    /** 图表整体可访问名（`role="img"` 的文本替代）；缺省兜底非空名 */
+    ariaLabel?: string;
+    /** 透传外层容器类名 */
+    className?: string;
+}
+/**
+ * 把数据画成饼 / 环图，扇区色走契约分类色槽、随站换肤；可挖空成环形并在中心放一个值。
+ */
+export declare const PieChart: React.FC<PieChartProps>;

package/dist/components/PieChart/PieChart.js

@@ -0,0 +1,56 @@
+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 "./pie-chart.module.js";
+import "react";
+import i from "clsx";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Cell as s, Label as c, Legend as l, Pie as u, PieChart as d, Tooltip as f } from "recharts";
+//#region packages/react/src/components/PieChart/PieChart.tsx
+var p = ({ data: p, angleField: m, colorField: h, innerRadius: g = 0, centerLabel: _, legend: v = !0, height: y = 300, valueFormatter: b, ariaLabel: x, className: S }) => {
+	let C = (e) => {
+		let { active: t, payload: r } = e, i = r?.map((e) => ({
+			name: e.name,
+			value: b && typeof e.value == "number" ? b(e.value) : e.value,
+			color: e.color
+		}));
+		return /* @__PURE__ */ a(n, {
+			active: t,
+			payload: i
+		});
+	}, w = `${Math.max(0, Math.min(1, g)) * 100}%`, T = g > 0 && _ != null && _ !== "";
+	return /* @__PURE__ */ a(t, {
+		ariaLabel: x,
+		height: y,
+		className: i(r.chart, S),
+		children: /* @__PURE__ */ o(d, {
+			margin: {
+				top: 8,
+				right: 8,
+				bottom: 4,
+				left: 4
+			},
+			children: [
+				/* @__PURE__ */ a(f, { content: C }),
+				v && /* @__PURE__ */ a(l, { wrapperStyle: { color: "var(--stitch-text-primary)" } }),
+				/* @__PURE__ */ o(u, {
+					data: p,
+					dataKey: m,
+					nameKey: h,
+					innerRadius: w,
+					outerRadius: "80%",
+					stroke: "var(--stitch-bg-elevated)",
+					isAnimationActive: !1,
+					children: [p.map((t, n) => /* @__PURE__ */ a(s, { fill: e(n) }, n)), T && /* @__PURE__ */ a(c, {
+						position: "center",
+						value: _,
+						className: r.center
+					})]
+				})
+			]
+		})
+	});
+};
+p.displayName = "PieChart";
+//#endregion
+export { p as PieChart };

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

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

package/dist/components/PieChart/pie-chart.module.js

@@ -0,0 +1,7 @@
+//#region packages/react/src/components/PieChart/pie-chart.module.less
+var e = "_chart_yzp1s_1", t = "_center_yzp1s_5", n = {
+	chart: e,
+	center: t
+};
+//#endregion
+export { t as center, e as chart, n as default };

package/dist/components/Select/Select.js

@@ -1,118 +1,122 @@
 import { Icon as e } from "../Icon/Icon.js";
-import t from "./select.module.js";
-import { useCallback as n, useEffect as r, useId as i, useMemo as a, useRef as o, useState as s } from "react";
-import c from "clsx";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { ScrollArea as t } from "../ScrollArea/ScrollArea.js";
+import n from "./select.module.js";
+import { useCallback as r, useEffect as i, useId as a, useMemo as o, useRef as s, useState as c } from "react";
+import l from "clsx";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region packages/react/src/components/Select/Select.tsx
-var d = ({ options: d, value: f, defaultValue: p, onChange: m, placeholder: h = "请选择", size: g = "middle", disabled: _ = !1, className: v, style: y, "aria-label": b, "aria-labelledby": x }) => {
-	let [S, C] = s(p), w = f !== void 0, T = w ? f : S, [E, D] = s(!1), [O, k] = s(null), A = o(null), j = o(null), M = `stitch-select-${i().replace(/:/g, "")}`, N = `${M}-listbox`, P = (e) => `${M}-option-${e}`, F = d.find((e) => e.value === T), I = F ? F.label : h, L = F !== void 0, R = a(() => d.filter((e) => !e.disabled).map((e) => e.value), [d]);
-	r(() => {
-		if (!E) return;
+var f = ({ options: f, value: p, defaultValue: m, onChange: h, placeholder: g = "请选择", size: _ = "middle", disabled: v = !1, className: y, style: b, "aria-label": x, "aria-labelledby": S }) => {
+	let [C, w] = c(m), T = p !== void 0, E = T ? p : C, [D, O] = c(!1), [k, A] = c(null), j = s(null), M = s(null), N = `stitch-select-${a().replace(/:/g, "")}`, P = `${N}-listbox`, F = (e) => `${N}-option-${e}`, I = f.find((e) => e.value === E), L = I ? I.label : g, R = I !== void 0, z = o(() => f.filter((e) => !e.disabled).map((e) => e.value), [f]);
+	i(() => {
+		if (!D) return;
 		let e = (e) => {
-			A.current && !A.current.contains(e.target) && D(!1);
+			j.current && !j.current.contains(e.target) && O(!1);
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [E]), r(() => {
-		if (E) {
-			let e = R[0] ?? null;
-			k(T != null && R.includes(T) ? T : e);
-		} else k(null);
-	}, [E]);
-	let z = n((e) => {
-		w || C(e), m?.(e), D(!1), j.current?.focus();
-	}, [w, m]), B = (e) => {
-		if (!R.length) return;
-		let t = O == null ? -1 : R.indexOf(O), n = t < 0 ? e === 1 ? 0 : R.length - 1 : (t + e + R.length) % R.length;
-		k(R[n]);
+	}, [D]), i(() => {
+		if (D) {
+			let e = z[0] ?? null;
+			A(E != null && z.includes(E) ? E : e);
+		} else A(null);
+	}, [D]);
+	let B = r((e) => {
+		T || w(e), h?.(e), O(!1), M.current?.focus();
+	}, [T, h]), V = (e) => {
+		if (!z.length) return;
+		let t = k == null ? -1 : z.indexOf(k), n = t < 0 ? e === 1 ? 0 : z.length - 1 : (t + e + z.length) % z.length;
+		A(z[n]);
 	};
-	return /* @__PURE__ */ u("div", {
-		ref: A,
-		className: c(t.wrapper, _ && t.disabled, v),
-		style: y,
+	return /* @__PURE__ */ d("div", {
+		ref: j,
+		className: l(n.wrapper, v && n.disabled, y),
+		style: b,
 		onKeyDown: (e) => {
-			if (_) return;
+			if (v) return;
 			let { key: t } = e;
-			if (!E) {
-				(t === "Enter" || t === " " || t === "ArrowDown" || t === "ArrowUp") && (e.preventDefault(), D(!0));
+			if (!D) {
+				(t === "Enter" || t === " " || t === "ArrowDown" || t === "ArrowUp") && (e.preventDefault(), O(!0));
 				return;
 			}
 			switch (t) {
 				case "Escape":
-					e.preventDefault(), D(!1), j.current?.focus();
+					e.preventDefault(), O(!1), M.current?.focus();
 					break;
 				case "ArrowDown":
-					e.preventDefault(), B(1);
+					e.preventDefault(), V(1);
 					break;
 				case "ArrowUp":
-					e.preventDefault(), B(-1);
+					e.preventDefault(), V(-1);
 					break;
 				case "Home":
-					e.preventDefault(), R.length && k(R[0]);
+					e.preventDefault(), z.length && A(z[0]);
 					break;
 				case "End":
-					e.preventDefault(), R.length && k(R[R.length - 1]);
+					e.preventDefault(), z.length && A(z[z.length - 1]);
 					break;
 				case "Enter":
-				case " ": e.preventDefault(), O != null && z(O);
+				case " ": e.preventDefault(), k != null && B(k);
 			}
 		},
-		children: [/* @__PURE__ */ u("div", {
-			ref: j,
-			className: c(t.trigger, t[g], E && t.open),
-			onClick: () => !_ && D((e) => !e),
+		children: [/* @__PURE__ */ d("div", {
+			ref: M,
+			className: l(n.trigger, n[_], D && n.open),
+			onClick: () => !v && O((e) => !e),
 			role: "combobox",
 			"aria-haspopup": "listbox",
-			"aria-expanded": E,
-			"aria-controls": E ? N : void 0,
-			"aria-activedescendant": E && O != null ? P(O) : void 0,
-			"aria-disabled": _ || void 0,
-			"aria-label": b,
-			"aria-labelledby": x,
-			tabIndex: _ ? -1 : 0,
-			children: [/* @__PURE__ */ l("span", {
-				className: L ? t.value : t.placeholder,
-				children: I
-			}), /* @__PURE__ */ l(e, {
+			"aria-expanded": D,
+			"aria-controls": D ? P : void 0,
+			"aria-activedescendant": D && k != null ? F(k) : void 0,
+			"aria-disabled": v || void 0,
+			"aria-label": x,
+			"aria-labelledby": S,
+			tabIndex: v ? -1 : 0,
+			children: [/* @__PURE__ */ u("span", {
+				className: R ? n.value : n.placeholder,
+				children: L
+			}), /* @__PURE__ */ u(e, {
 				name: "chevron-down",
 				size: "1em",
-				className: c(t.arrow, E && t.arrowOpen)
+				className: l(n.arrow, D && n.arrowOpen)
 			})]
-		}), E && /* @__PURE__ */ l("div", {
-			className: t.dropdown,
+		}), D && /* @__PURE__ */ u("div", {
+			className: n.dropdown,
 			role: "listbox",
-			id: N,
-			"aria-label": b,
-			"aria-labelledby": x,
-			"aria-activedescendant": O == null ? void 0 : P(O),
-			children: d.map((n) => {
-				let r = T === n.value, i = O === n.value;
-				return /* @__PURE__ */ u("div", {
-					id: P(n.value),
-					role: "option",
-					"aria-selected": r,
-					"aria-disabled": n.disabled || void 0,
-					className: c(t.option, {
-						[t.optionActive]: i,
-						[t.optionSelected]: r,
-						[t.optionDisabled]: n.disabled
-					}),
-					onClick: () => !n.disabled && z(n.value),
-					onMouseEnter: () => {
-						n.disabled || k(n.value);
-					},
-					children: [/* @__PURE__ */ l("span", {
-						className: t.optionLabel,
-						children: n.label
-					}), r && /* @__PURE__ */ l(e, {
-						name: "check",
-						size: "1em",
-						className: t.checkMark
-					})]
-				}, String(n.value));
+			id: P,
+			"aria-label": x,
+			"aria-labelledby": S,
+			"aria-activedescendant": k == null ? void 0 : F(k),
+			children: /* @__PURE__ */ u(t, {
+				className: n.dropdownScroll,
+				children: f.map((t) => {
+					let r = E === t.value, i = k === t.value;
+					return /* @__PURE__ */ d("div", {
+						id: F(t.value),
+						role: "option",
+						"aria-selected": r,
+						"aria-disabled": t.disabled || void 0,
+						className: l(n.option, {
+							[n.optionActive]: i,
+							[n.optionSelected]: r,
+							[n.optionDisabled]: t.disabled
+						}),
+						onClick: () => !t.disabled && B(t.value),
+						onMouseEnter: () => {
+							t.disabled || A(t.value);
+						},
+						children: [/* @__PURE__ */ u("span", {
+							className: n.optionLabel,
+							children: t.label
+						}), r && /* @__PURE__ */ u(e, {
+							name: "check",
+							size: "1em",
+							className: n.checkMark
+						})]
+					}, String(t.value));
+				})
 			})
 		})]
 	});
 };
-d.displayName = "Select";
+f.displayName = "Select";
 //#endregion
-export { d as Select };
+export { f as Select };

package/dist/components/Select/select.module.js

@@ -1,5 +1,5 @@
 //#region packages/react/src/components/Select/select.module.less
-var e = "_wrapper_13o0n_1", t = "_trigger_13o0n_8", n = "_open_13o0n_30", r = "_small_13o0n_33", i = "_middle_13o0n_38", a = "_large_13o0n_43", o = "_value_13o0n_48", s = "_placeholder_13o0n_55", c = "_arrow_13o0n_62", l = "_arrowOpen_13o0n_67", u = "_dropdown_13o0n_71", d = "_dropdownFadeIn_13o0n_1", f = "_option_13o0n_98", p = "_optionLabel_13o0n_111", m = "_optionActive_13o0n_115", h = "_optionSelected_13o0n_118", g = "_checkMark_13o0n_122", _ = "_optionDisabled_13o0n_126", v = "_disabled_13o0n_133", y = {
+var e = "_wrapper_i7k60_1", t = "_trigger_i7k60_8", n = "_open_i7k60_30", r = "_small_i7k60_33", i = "_middle_i7k60_38", a = "_large_i7k60_43", o = "_value_i7k60_48", s = "_placeholder_i7k60_55", c = "_arrow_i7k60_62", l = "_arrowOpen_i7k60_67", u = "_dropdown_i7k60_71", d = "_dropdownFadeIn_i7k60_1", f = "_dropdownScroll_i7k60_86", p = "_option_i7k60_102", m = "_optionLabel_i7k60_115", h = "_optionActive_i7k60_119", g = "_optionSelected_i7k60_122", _ = "_checkMark_i7k60_126", v = "_optionDisabled_i7k60_130", y = "_disabled_i7k60_137", b = {
 	wrapper: e,
 	trigger: t,
 	open: n,
@@ -12,13 +12,14 @@ var e = "_wrapper_13o0n_1", t = "_trigger_13o0n_8", n = "_open_13o0n_30", r = "_
 	arrowOpen: l,
 	dropdown: u,
 	dropdownFadeIn: d,
-	option: f,
-	optionLabel: p,
-	optionActive: m,
-	optionSelected: h,
-	checkMark: g,
-	optionDisabled: _,
-	disabled: v
+	dropdownScroll: f,
+	option: p,
+	optionLabel: m,
+	optionActive: h,
+	optionSelected: g,
+	checkMark: _,
+	optionDisabled: v,
+	disabled: y
 };
 //#endregion
-export { c as arrow, l as arrowOpen, g as checkMark, y as default, v as disabled, u as dropdown, d as dropdownFadeIn, a as large, i as middle, n as open, f as option, m as optionActive, _ as optionDisabled, p as optionLabel, h as optionSelected, s as placeholder, r as small, t as trigger, o as value, e as wrapper };
+export { c as arrow, l as arrowOpen, _ as checkMark, b as default, y as disabled, u as dropdown, d as dropdownFadeIn, f as dropdownScroll, a as large, i as middle, n as open, p as option, h as optionActive, v as optionDisabled, m as optionLabel, g as optionSelected, s as placeholder, r as small, t as trigger, o as value, e as wrapper };

package/dist/components/Stat/Stat.d.ts

@@ -0,0 +1,71 @@
+import React from 'react';
+/** 趋势方向：值往哪走（好/坏由 direction + trendReversed 共同决定，不等于方向本身）。 */
+export type StatTrendDirection = 'up' | 'down';
+/** 趋势描述：一个变化量 + 方向。方向缺省时按 value 正负推断（≥0 视为 up）。 */
+export interface StatTrend {
+    /** 变化量（展示为绝对值，方向由箭头/配色承载） */
+    value: number;
+    /** 方向；缺省按 value 正负推断 */
+    direction?: StatTrendDirection;
+}
+/** 状态点语义色调（点色走对应角色变量，缺省 neutral = 弱化中性）。 */
+export type StatStatusTone = 'neutral' | 'success' | 'danger' | 'warning' | 'info';
+/** 状态点：一枚 <Icon name="dot"> + 文案（如 ○ 0 online）。 */
+export interface StatStatus {
+    /** 状态文案 */
+    text: React.ReactNode;
+    /**
+     * 点的语义色调（走角色变量）
+     * @default 'neutral'
+     */
+    tone?: StatStatusTone;
+}
+/**
+ * 单个指标块：标签 + 大值（可带 prefix/suffix/精度/千分位/自定义 formatter）+ 可选趋势 /
+ * 副说明 / 状态点。展示 props 借 Ant `Statistic` 语义。
+ *
+ * 跨-prop 注意事项：
+ * - **只读角色变量**：趋势好/坏色只走 `var(--stitch-success)` / `var(--stitch-danger)`，
+ *   状态点色 / 分隔线走 `var(--stitch-*)`——组件内零硬编码绿红、零主题值。
+ * - **趋势方向经 `<Icon>`**（内置 `arrow-up-right` / `arrow-down-right`），**禁**内联 svg /
+ *   emoji / Unicode 箭头。方向（箭头形状）是不依赖颜色的区分通道，配色只叠加好/坏语义。
+ * - **`trendReversed`**：给「跌是好事」的指标（Bounce Rate 等）翻转好/坏配色——方向不变、
+ *   语义色对调。
+ * - **`formatter` 优先**：给出时接管全部数值格式化，`precision` / `groupSeparator` 不再生效。
+ * - **Accessibility**：有 `title` 时整块为 `role="group"` + `aria-labelledby`（可访问名 =
+ *   标签文案）；趋势箭头为装饰（`aria-hidden`），语义由数值文案与箭头形状承载。
+ */
+export interface StatProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'prefix'> {
+    /** 指标标签（如 Unique Visitors） */
+    title?: React.ReactNode;
+    /** 指标值。number 走内置格式化；string 原样展示 */
+    value: string | number;
+    /** 小数精度（仅 number 值、未给 formatter 时生效） */
+    precision?: number;
+    /** 值前缀（如 `$`） */
+    prefix?: React.ReactNode;
+    /** 值后缀（如 `%`） */
+    suffix?: React.ReactNode;
+    /** 自定义格式化；给出时接管数值格式化，precision / groupSeparator 失效 */
+    formatter?: (value: string | number) => React.ReactNode;
+    /**
+     * 千分位分隔符（仅 number 值、未给 formatter 时生效）
+     * @default ','
+     */
+    groupSeparator?: string;
+    /** 趋势涨/跌 */
+    trend?: StatTrend;
+    /**
+     * 反转趋势好坏（「跌是好事」的指标，如 Bounce Rate）
+     * @default false
+     */
+    trendReversed?: boolean;
+    /** 副说明（如 vs previous 30 days） */
+    caption?: React.ReactNode;
+    /** 状态点 + 文案 */
+    status?: StatStatus;
+}
+/**
+ * 把一个指标画成「标签 + 大值 + 趋势 + 副说明 + 状态点」，趋势色走语义角色变量、方向经 <Icon>。
+ */
+export declare const Stat: React.FC<StatProps>;

package/dist/components/Stat/Stat.js

@@ -0,0 +1,66 @@
+import { Icon as e } from "../Icon/Icon.js";
+import t from "./stat.module.js";
+import { useId as n } from "react";
+import r from "clsx";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region packages/react/src/components/Stat/Stat.tsx
+function o(e, t, n) {
+	let [r, i] = (t == null ? String(e) : e.toFixed(t)).split("."), a = r.startsWith("-") ? "-" : "", o = (a ? r.slice(1) : r).replace(/\B(?=(\d{3})+(?!\d))/g, n);
+	return i == null ? `${a}${o}` : `${a}${o}.${i}`;
+}
+var s = ({ title: s, value: c, precision: l, prefix: u, suffix: d, formatter: f, groupSeparator: p = ",", trend: m, trendReversed: h = !1, caption: g, status: _, className: v, ...y }) => {
+	let b = n(), x = f ? f(c) : typeof c == "number" ? o(c, l, p) : c, S = m?.direction ?? ((m?.value ?? 0) >= 0 ? "up" : "down"), C = h ? S === "down" : S === "up";
+	return /* @__PURE__ */ a("div", {
+		className: r(t.stat, v),
+		...s == null ? null : {
+			role: "group",
+			"aria-labelledby": b
+		},
+		...y,
+		children: [
+			s != null && /* @__PURE__ */ i("div", {
+				id: b,
+				className: t["stat-title"],
+				children: s
+			}),
+			/* @__PURE__ */ a("div", {
+				className: t["stat-value-row"],
+				children: [/* @__PURE__ */ a("div", {
+					className: t["stat-value"],
+					children: [
+						u != null && /* @__PURE__ */ i("span", {
+							className: t["stat-prefix"],
+							children: u
+						}),
+						/* @__PURE__ */ i("span", { children: x }),
+						d != null && /* @__PURE__ */ i("span", {
+							className: t["stat-suffix"],
+							children: d
+						})
+					]
+				}), m != null && /* @__PURE__ */ a("span", {
+					className: r(t["stat-trend"], C ? t["stat-trend-positive"] : t["stat-trend-negative"]),
+					children: [/* @__PURE__ */ i(e, {
+						name: S === "up" ? "arrow-up-right" : "arrow-down-right",
+						size: "1em"
+					}), Math.abs(m.value)]
+				})]
+			}),
+			g != null && /* @__PURE__ */ i("div", {
+				className: t["stat-caption"],
+				children: g
+			}),
+			_ != null && /* @__PURE__ */ a("div", {
+				className: t["stat-status"],
+				children: [/* @__PURE__ */ i(e, {
+					name: "dot",
+					size: "0.6em",
+					className: t[`stat-dot-${_.tone ?? "neutral"}`]
+				}), _.text]
+			})
+		]
+	});
+};
+s.displayName = "Stat";
+//#endregion
+export { s as Stat };

package/dist/components/Stat/StatGroup.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+/**
+ * 一排指标：把每个子项裹进一格，相邻格之间用发丝线 `var(--stitch-border)` 竖线分隔（首项不带）。
+ *
+ * 跨-prop 注意事项：
+ * - **分隔线只走角色变量** `var(--stitch-border)` + `var(--stitch-border-width)`——零硬编码。
+ * - 子项各自成格、等高对齐；换行时靠 flex-wrap，格内间距走 `var(--stitch-spacing-*)`。
+ */
+export interface StatGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 一排指标子项（通常是 `<Stat>`） */
+    children?: React.ReactNode;
+}
+/** 把一排指标横排，相邻项之间以发丝线分隔。 */
+export declare const StatGroup: React.FC<StatGroupProps>;

package/dist/components/Stat/StatGroup.js

@@ -0,0 +1,16 @@
+import e from "./stat.module.js";
+import t from "react";
+import n from "clsx";
+import { jsx as r } from "react/jsx-runtime";
+//#region packages/react/src/components/Stat/StatGroup.tsx
+var i = ({ children: i, className: a, ...o }) => /* @__PURE__ */ r("div", {
+	className: n(e.group, a),
+	...o,
+	children: t.Children.map(i, (t) => t == null || t === !1 ? t : /* @__PURE__ */ r("div", {
+		className: e["group-item"],
+		children: t
+	}))
+});
+i.displayName = "StatGroup";
+//#endregion
+export { i as StatGroup };

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

@@ -0,0 +1,4 @@
+export { Stat } from './Stat';
+export type { StatProps, StatTrend, StatTrendDirection, StatStatus, StatStatusTone, } from './Stat';
+export { StatGroup } from './StatGroup';
+export type { StatGroupProps } from './StatGroup';