@octohirono/stitch-design-system 0.1.0

package/dist/components/Form/useForm.js

@@ -0,0 +1,188 @@
+import { runRule as e } from "./validators.js";
+import { stringifyNamePath as t } from "./types.js";
+import { useRef as n } from "react";
+//#region packages/react/src/components/Form/useForm.ts
+function r() {
+	let e = /* @__PURE__ */ new Map();
+	return {
+		registerField(n, r, i, a) {
+			let o = t(n);
+			if (!e.has(o)) e.set(o, {
+				key: o,
+				rules: r,
+				initialValue: i,
+				initialSet: i !== void 0,
+				currentValue: i,
+				notify: a
+			});
+			else {
+				let t = e.get(o);
+				t && (t.rules = r, t.notify = a);
+			}
+		},
+		unregisterField(n) {
+			e.delete(t(n));
+		},
+		hasField(n) {
+			return e.has(t(n));
+		},
+		updateRules(n, r) {
+			let i = t(n), a = e.get(i);
+			a && (a.rules = r);
+		},
+		notifyAll: () => {
+			e.forEach((e) => {
+				try {
+					e.notify();
+				} catch {}
+			});
+		},
+		forEachField: (t) => {
+			e.forEach((e) => {
+				t({
+					key: e.key,
+					rules: e.rules,
+					notify: e.notify
+				});
+			});
+		}
+	};
+}
+function i(e, t = "", n = {}) {
+	for (let r of Object.keys(e)) {
+		let a = t ? `${t}.${r}` : r, o = e[r];
+		typeof o == "object" && o && !Array.isArray(o) ? i(o, a, n) : n[a] = o;
+	}
+	return n;
+}
+function a(n) {
+	let a = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), u = r();
+	if (n.initialValues) {
+		let e = i(n.initialValues);
+		Object.keys(e).forEach((t) => {
+			a.set(t, e[t]), o.set(t, e[t]);
+		});
+	}
+	function d(e) {
+		return a.get(t(e));
+	}
+	function f(e) {
+		let n = {};
+		return e === !0 || !e ? a.forEach((e, t) => {
+			n[t] = e;
+		}) : e.forEach((e) => {
+			let r = t(e);
+			a.has(r) && (n[r] = a.get(r));
+		}), n;
+	}
+	function p(e, r) {
+		let i = t(e), o = a.get(i);
+		a.set(i, r), c.add(i), u.forEachField((e) => {
+			e.key === i && e.notify();
+		}), o !== r && n.onValuesChange?.({ [i]: r }, f(!0));
+	}
+	function m(e) {
+		let t = i(e);
+		Object.keys(t).forEach((e) => {
+			a.set(e, t[e]), o.has(e) || o.set(e, t[e]);
+		}), u.notifyAll();
+	}
+	function h(e) {
+		(e ? e.map(t) : Array.from(a.keys())).forEach((e) => {
+			a.set(e, o.get(e)), s.delete(e), c.delete(e);
+		}), u.notifyAll();
+	}
+	function g(e) {
+		return c.has(t(e));
+	}
+	function _(e) {
+		return l.has(t(e));
+	}
+	function v(e) {
+		return s.get(t(e));
+	}
+	function y(e) {
+		e.forEach((e) => {
+			let n = t(e.name);
+			e.value !== void 0 && a.set(n, e.value), e.errors !== void 0 && (e.errors.length === 0 ? s.delete(n) : s.set(n, e.errors)), e.touched && c.add(n), e.validating ? l.add(n) : l.delete(n);
+		}), u.notifyAll();
+	}
+	async function b(n) {
+		let r = [];
+		u.forEachField((e) => {
+			(!n || n.some((n) => t(n) === e.key)) && r.push({
+				key: e.key,
+				rules: e.rules
+			});
+		}), r.forEach((e) => l.add(e.key)), u.notifyAll();
+		let i = [];
+		if (await Promise.all(r.map(async (t) => {
+			let n = a.get(t.key), r = t.rules, o = [];
+			for (let t of r) {
+				let r = typeof t == "function" ? t(w) : t;
+				try {
+					await e(r, n);
+				} catch (e) {
+					o.push(e instanceof Error ? e.message : String(e));
+				}
+			}
+			o.length > 0 ? (s.set(t.key, o), c.add(t.key), i.push({
+				name: t.key,
+				errors: o
+			})) : s.delete(t.key);
+		})), r.forEach((e) => l.delete(e.key)), u.notifyAll(), i.length > 0) {
+			let e = /* @__PURE__ */ Error("Validation failed");
+			throw e.errorFields = i, e.values = f(!0), e;
+		}
+		return f(!0);
+	}
+	function x() {
+		b().then((e) => {
+			n.onFinish?.(e);
+		}).catch((e) => {
+			e && e.errorFields && e.values !== void 0 && n.onFinishFailed?.({
+				values: e.values,
+				errorFields: e.errorFields,
+				outOfDate: !1
+			});
+		});
+	}
+	function S(e) {
+		e.onFinish && (n.onFinish = e.onFinish), e.onFinishFailed && (n.onFinishFailed = e.onFinishFailed), e.onValuesChange && (n.onValuesChange = e.onValuesChange);
+	}
+	function C(e, n) {
+		let r = t(e);
+		typeof document < "u" && document.querySelector(`[data-field-name="${r}"]`)?.scrollIntoView({
+			behavior: "smooth",
+			block: "center"
+		});
+	}
+	let w = {
+		getFieldValue: d,
+		getFieldsValue: f,
+		setFieldValue: p,
+		setFieldsValue: m,
+		resetFields: h,
+		validateFields: b,
+		submit: x,
+		setFields: y,
+		isFieldTouched: g,
+		isFieldValidating: _,
+		getFieldError: v,
+		scrollToField: C
+	};
+	return w.__store = u, w.__bindCallbacks = S, w;
+}
+function o(e) {
+	let t = n(null);
+	if (!t.current) {
+		let n = a({
+			...e,
+			submit: () => n.submit()
+		});
+		t.current = n;
+	}
+	return [t.current];
+}
+//#endregion
+export { o as useForm };

package/dist/components/Form/validators.d.ts

@@ -0,0 +1,3 @@
+import type { RuleObject } from './types';
+/** 执行单条规则。返回 Promise<void> 表示通过；reject 携带错误文案 */
+export declare function runRule(rule: RuleObject, value: unknown): Promise<void>;

package/dist/components/Form/validators.js

@@ -0,0 +1,73 @@
+//#region packages/react/src/components/Form/validators.ts
+var e = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, t = /^(https?:\/\/)[^\s/$.?#].[^\s]*$/i;
+function n(n, r) {
+	switch (r) {
+		case "string": return typeof n == "string";
+		case "number":
+			if (typeof n == "number") return !Number.isNaN(n);
+			if (typeof n == "string") {
+				let e = Number(n);
+				return n.trim() !== "" && !Number.isNaN(e);
+			}
+			return !1;
+		case "boolean": return typeof n == "boolean";
+		case "integer":
+			if (typeof n == "number") return Number.isInteger(n);
+			if (typeof n == "string") {
+				if (n.trim() === "") return !1;
+				let e = Number(n);
+				return !Number.isNaN(e) && Number.isInteger(e);
+			}
+			return !1;
+		case "float":
+			if (typeof n == "number") return !Number.isInteger(n);
+			if (typeof n == "string") {
+				let e = Number(n);
+				return !Number.isNaN(e) && !Number.isInteger(e);
+			}
+			return !1;
+		case "array": return Array.isArray(n);
+		case "object": return typeof n == "object" && !!n && !Array.isArray(n) && !(n instanceof Date) && !(n instanceof RegExp);
+		case "email": return typeof n == "string" && e.test(n);
+		case "url": return typeof n == "string" && t.test(n);
+		case "date": return n instanceof Date && !Number.isNaN(n.getTime());
+		default: return !0;
+	}
+}
+function r(e, t) {
+	if (typeof e == "number") return e;
+	if (typeof e == "string" && (t === "number" || t === "integer" || t === "float")) {
+		let t = Number(e);
+		if (!Number.isNaN(t)) return t;
+	}
+	return e;
+}
+function i(e, t = !1) {
+	return e == null ? !0 : typeof e == "string" ? !!(e === "" || t && /^\s+$/.test(e)) : Array.isArray(e) ? e.length === 0 : !1;
+}
+async function a(e, t) {
+	let a = i(t, e.whitespace);
+	if (e.required && a) throw Error(e.message ?? "此项为必填");
+	if (!a) {
+		if (e.type && !n(t, e.type)) throw Error(e.message ?? `类型应为 ${e.type}`);
+		if (typeof e.min == "number") {
+			let n = r(t, e.type), i = typeof n == "number" ? n : n.length;
+			if (typeof i == "number" && i < e.min) throw Error(e.message ?? `不能少于 ${e.min}`);
+		}
+		if (typeof e.max == "number") {
+			let n = r(t, e.type), i = typeof n == "number" ? n : n.length;
+			if (typeof i == "number" && i > e.max) throw Error(e.message ?? `不能多于 ${e.max}`);
+		}
+		if (typeof e.len == "number") {
+			let n = r(t, e.type), i = typeof n == "number" ? n : n.length;
+			if (typeof i == "number" && i !== e.len) throw Error(e.message ?? `长度必须为 ${e.len}`);
+		}
+		if (e.pattern instanceof RegExp && (typeof t != "string" || !e.pattern.test(t))) throw Error(e.message ?? "格式不正确");
+		if (typeof e.validator == "function") {
+			let n = await e.validator(e, t);
+			if (typeof n == "string" && n.length > 0) throw Error(n);
+		}
+	}
+}
+//#endregion
+export { a as runRule };

package/dist/components/HoverCard/HoverCard.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+/**
+ * 悬浮富信息卡：`trigger` 触发器 + `children` 富内容（头像 / 简介 / 预览之类）+ 延时控制
+ * `openDelay` / `closeDelay` + 受控 `open` / 非受控 `defaultOpen` / `onOpenChange`。**hover 触发**、
+ * 延时弹出，不抢焦点。
+ *
+ * 跨-prop 注意事项（三件浮层划清，别混用）：
+ * - **vs Tooltip**：Tooltip 是短**文字**提示、`role="tooltip"`、快速出现、不含交互；HoverCard 是
+ *   **hover 触发的富内容卡**（可放头像 / 链接 / 预览），非 tooltip 语义、延时弹出。
+ * - **vs Popover**：Popover 是 **click** 触发的可交互浮层、`role="dialog"`、点开后**抢焦点**并做焦点陷阱；
+ *   HoverCard 是 **hover** 触发、**不抢焦点**（鼠标移走即收），供「顺带一瞥」的补充信息，不是主操作面。
+ * - **延时是本组件的核心手感**：`openDelay`（默认 700ms）避免鼠标划过误触，`closeDelay`（默认 300ms）
+ *   让指针能移到卡上而不立即消失；两者与底层同名，直接透传。
+ * - **面 = 浮起层**（同 Popover 浮层族）：卡面走 `--stitch-bg-elevated`（浮起面）+ 深字
+ *   `--stitch-text-primary`，边框 `--stitch-border`、圆角 `--stitch-radius-card`、阴影
+ *   `--stitch-shadow-base`；开合态由底层挂的 `data-state` 描（`open` 时淡入），组件不自持显隐 state。
+ * - **键盘 / 焦点 / ARIA**（hover / focus 触发、Esc 收、指针出入时序）由底层保证，组件不重复实现。
+ */
+export interface HoverCardProps {
+    /** 触发器：任意可承载 hover / focus 的元素（如头像、链接、姓名），卡片锚定其上 */
+    trigger: React.ReactNode;
+    /** 卡片富内容，可含头像 / 简介 / 链接 / 预览等 */
+    children?: React.ReactNode;
+    /** 受控显隐（气泡浮层约定：Ant v5 `open`） */
+    open?: boolean;
+    /** 非受控初始显隐 @default false */
+    defaultOpen?: boolean;
+    /** 显隐变化回调（气泡浮层约定：Ant v5 `onOpenChange`） */
+    onOpenChange?: (open: boolean) => void;
+    /** 指针进入触发器到弹出的延时（ms） @default 700 */
+    openDelay?: number;
+    /** 指针离开到收起的延时（ms） @default 300 */
+    closeDelay?: number;
+    /** 触发器与卡片的间距（px） @default 8 */
+    sideOffset?: number;
+    /** 卡片的可及名——无可见标题时用它 */
+    'aria-label'?: string;
+    /** 卡片的可及名来源：指向卡内标题元素的 id */
+    'aria-labelledby'?: string;
+    /** 自定义类名（挂到卡面上） */
+    className?: string;
+}
+/**
+ * 悬浮富信息卡：hover 触发、延时弹出的富内容卡，不抢焦点；
+ * 受控（`open`/`onOpenChange`）与非受控（`defaultOpen`）双模式，延时由 `openDelay`/`closeDelay` 调。
+ */
+export declare const HoverCard: React.FC<HoverCardProps>;

package/dist/components/HoverCard/HoverCard.js

@@ -0,0 +1,26 @@
+import e from "./hover-card.module.js";
+import "react";
+import t from "clsx";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { HoverCard as i } from "radix-ui";
+//#region packages/react/src/components/HoverCard/HoverCard.tsx
+var a = ({ trigger: a, children: o, open: s, defaultOpen: c, onOpenChange: l, openDelay: u, closeDelay: d, sideOffset: f = 8, className: p, "aria-label": m, "aria-labelledby": h }) => /* @__PURE__ */ r(i.Root, {
+	open: s,
+	defaultOpen: c,
+	onOpenChange: l,
+	openDelay: u,
+	closeDelay: d,
+	children: [/* @__PURE__ */ n(i.Trigger, {
+		asChild: !0,
+		children: a
+	}), /* @__PURE__ */ n(i.Portal, { children: /* @__PURE__ */ r(i.Content, {
+		className: t(e.content, p),
+		sideOffset: f,
+		"aria-label": m,
+		"aria-labelledby": h,
+		children: [o, /* @__PURE__ */ n(i.Arrow, { className: e.arrow })]
+	}) })]
+});
+a.displayName = "HoverCard";
+//#endregion
+export { a as HoverCard };

package/dist/components/HoverCard/hover-card.module.js

@@ -0,0 +1,9 @@
+//#region packages/react/src/components/HoverCard/hover-card.module.less
+var e = "_content_1k47g_1", t = "_arrow_1k47g_22", n = {
+	content: e,
+	"stitch-hover-card-in": "_stitch-hover-card-in_1k47g_1",
+	"stitch-hover-card-out": "_stitch-hover-card-out_1k47g_1",
+	arrow: t
+};
+//#endregion
+export { t as arrow, e as content, n as default };

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

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

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,100 @@
+import React from 'react';
+declare const ICON_PATHS: {
+    readonly check: readonly ["M4 12.5l5 5 11-11"];
+    readonly close: readonly ["M6 6l12 12", "M18 6L6 18"];
+    readonly 'chevron-down': readonly ["M5 9l7 7 7-7"];
+    readonly 'chevron-right': readonly ["M9 5l7 7-7 7"];
+    readonly search: readonly ["M4 11a7 7 0 1 0 14 0a7 7 0 1 0 -14 0z", "M16.5 16.5L21 21"];
+    readonly menu: readonly ["M4 7h16", "M4 12h16", "M4 17h16"];
+    readonly info: readonly ["M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0z", "M12 11v5", "M12 7.5h0.01"];
+    readonly success: readonly ["M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0z", "M8 12l3 3 5-6"];
+    readonly warning: readonly ["M12 3.5L21.5 20H2.5z", "M12 10v4", "M12 17.5h0.01"];
+    readonly error: readonly ["M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0z", "M9 9l6 6", "M15 9l-6 6"];
+    readonly dot: readonly ["M12 6a6 6 0 1 0 0 12a6 6 0 1 0 0-12z"];
+    readonly eye: readonly ["M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", "M15 12a3 3 0 1 1-6 0a3 3 0 1 1 6 0z"];
+    readonly 'eye-off': readonly ["M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94", "M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19", "M14.12 14.12a3 3 0 1 1-4.24-4.24", "M1 1l22 22"];
+    readonly bold: readonly ["M7 5h6a3.5 3.5 0 0 1 0 7H7z", "M7 12h7a3.5 3.5 0 0 1 0 7H7z"];
+    readonly italic: readonly ["M10 5h8", "M6 19h8", "M15 5l-6 14"];
+    readonly underline: readonly ["M7 5v6a5 5 0 0 0 10 0V5", "M6 20h12"];
+    readonly 'align-left': readonly ["M4 6h16", "M4 12h10", "M4 18h13"];
+    readonly 'align-center': readonly ["M4 6h16", "M7 12h10", "M6 18h12"];
+    readonly 'align-right': readonly ["M4 6h16", "M10 12h10", "M7 18h13"];
+};
+export type IconName = keyof typeof ICON_PATHS;
+/**
+ * 图标基元：内置具名图标 `name`（或自定义 `src`）+ `size` + `label`（可访问名）+
+ * `strokeWidth`。`extends HTMLAttributes<span>`，`...rest` 透传到根 `<span>`。
+ *
+ * 跨-prop 注意事项：
+ * - **纯呈现基元**——不是交互控件（要当按钮用请自挂 handler/role）。
+ * - **`name` 与 `src` 二选一**：同时给出时 `name`（内置字形）优先。
+ * - **内置字形**是内联 `<svg>`、描边走 `currentColor`，随 `color` 换色——设
+ *   `style={{ color: 'var(--stitch-accent)' }}`（或任一角色变量）换肤；默认
+ *   `var(--stitch-text-secondary)`。
+ * - **Accessibility**：有意义图标传 `label`（`role="img"` + `aria-label`）；纯装饰图标省略
+ *   （`aria-hidden`）。
+ * - **Do NOT** 在消费代码里传 emoji / Unicode 符号 / 手搓 `<svg>`——一律经 `<Icon>`。
+ */
+export interface IconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** 内置具名图标。与 src 二选一（同时给以 name 优先） */
+    name?: IconName;
+    /** 自定义图标资源 URL（大图 / 光栅）。与 name 二选一 */
+    src?: string;
+    /**
+     * 尺寸：数字按 px，字符串原样（如 '1em' / '100%'）。
+     * @default 24
+     */
+    size?: number | string;
+    /**
+     * 可访问名。给出 → `role="img"` + `aria-label`（有意义图标，被屏幕阅读器读出）；
+     * 缺省 → `aria-hidden`（纯装饰，不进可及性树）。
+     */
+    label?: string;
+    /**
+     * 一次性覆盖描边粗细（仅 name 内联图标）。默认走角色变量
+     * `--stitch-icon-stroke-width`（每站 adapter 定，non-scaling 恒定像素）。
+     */
+    strokeWidth?: number | string;
+}
+export declare const Icon: React.FC<IconProps>;
+export declare const ICON_LIST: readonly [{
+    readonly name: 'check';
+    readonly label: 'Check';
+}, {
+    readonly name: 'close';
+    readonly label: 'Close';
+}, {
+    readonly name: 'chevron-down';
+    readonly label: 'Chevron down';
+}, {
+    readonly name: 'chevron-right';
+    readonly label: 'Chevron right';
+}, {
+    readonly name: 'search';
+    readonly label: 'Search';
+}, {
+    readonly name: 'menu';
+    readonly label: 'Menu';
+}, {
+    readonly name: 'info';
+    readonly label: 'Info';
+}, {
+    readonly name: 'success';
+    readonly label: 'Success';
+}, {
+    readonly name: 'warning';
+    readonly label: 'Warning';
+}, {
+    readonly name: 'error';
+    readonly label: 'Error';
+}, {
+    readonly name: 'dot';
+    readonly label: 'Dot';
+}, {
+    readonly name: 'eye';
+    readonly label: 'Eye';
+}, {
+    readonly name: 'eye-off';
+    readonly label: 'Eye off';
+}];
+export {};

package/dist/components/Icon/Icon.js

@@ -0,0 +1,150 @@
+import e from "./icon.module.js";
+import "react";
+import t from "clsx";
+import { jsx as n } from "react/jsx-runtime";
+//#region packages/react/src/components/Icon/Icon.tsx
+var r = {
+	check: ["M4 12.5l5 5 11-11"],
+	close: ["M6 6l12 12", "M18 6L6 18"],
+	"chevron-down": ["M5 9l7 7 7-7"],
+	"chevron-right": ["M9 5l7 7-7 7"],
+	search: ["M4 11a7 7 0 1 0 14 0a7 7 0 1 0 -14 0z", "M16.5 16.5L21 21"],
+	menu: [
+		"M4 7h16",
+		"M4 12h16",
+		"M4 17h16"
+	],
+	info: [
+		"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0z",
+		"M12 11v5",
+		"M12 7.5h0.01"
+	],
+	success: ["M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0z", "M8 12l3 3 5-6"],
+	warning: [
+		"M12 3.5L21.5 20H2.5z",
+		"M12 10v4",
+		"M12 17.5h0.01"
+	],
+	error: [
+		"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0z",
+		"M9 9l6 6",
+		"M15 9l-6 6"
+	],
+	dot: ["M12 6a6 6 0 1 0 0 12a6 6 0 1 0 0-12z"],
+	eye: ["M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", "M15 12a3 3 0 1 1-6 0a3 3 0 1 1 6 0z"],
+	"eye-off": [
+		"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94",
+		"M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19",
+		"M14.12 14.12a3 3 0 1 1-4.24-4.24",
+		"M1 1l22 22"
+	],
+	bold: ["M7 5h6a3.5 3.5 0 0 1 0 7H7z", "M7 12h7a3.5 3.5 0 0 1 0 7H7z"],
+	italic: [
+		"M10 5h8",
+		"M6 19h8",
+		"M15 5l-6 14"
+	],
+	underline: ["M7 5v6a5 5 0 0 0 10 0V5", "M6 20h12"],
+	"align-left": [
+		"M4 6h16",
+		"M4 12h10",
+		"M4 18h13"
+	],
+	"align-center": [
+		"M4 6h16",
+		"M7 12h10",
+		"M6 18h12"
+	],
+	"align-right": [
+		"M4 6h16",
+		"M10 12h10",
+		"M7 18h13"
+	]
+}, i = /* @__PURE__ */ new Set(["dot"]), a = ({ name: a, src: o, size: s = 24, label: c, strokeWidth: l, className: u, style: d, ...f }) => {
+	let p = t(e.icon, u), m = c == null ? { "aria-hidden": !0 } : {
+		role: "img",
+		"aria-label": c
+	}, h = a ? r[a] : void 0, g = a != null && i.has(a);
+	return /* @__PURE__ */ n("span", {
+		className: p,
+		"data-icon": a,
+		style: {
+			width: s,
+			height: s,
+			...h ? null : o ? { backgroundImage: `url(${o})` } : null,
+			...d
+		},
+		...m,
+		...f,
+		children: h ? /* @__PURE__ */ n("svg", {
+			className: e["icon-svg"],
+			viewBox: "0 0 24 24",
+			fill: g ? "currentColor" : "none",
+			stroke: g ? "none" : "currentColor",
+			strokeWidth: 2,
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": "true",
+			focusable: "false",
+			style: l == null ? void 0 : { strokeWidth: l },
+			children: h.map((e) => /* @__PURE__ */ n("path", { d: e }, e))
+		}) : null
+	});
+};
+a.displayName = "Icon";
+var o = [
+	{
+		name: "check",
+		label: "Check"
+	},
+	{
+		name: "close",
+		label: "Close"
+	},
+	{
+		name: "chevron-down",
+		label: "Chevron down"
+	},
+	{
+		name: "chevron-right",
+		label: "Chevron right"
+	},
+	{
+		name: "search",
+		label: "Search"
+	},
+	{
+		name: "menu",
+		label: "Menu"
+	},
+	{
+		name: "info",
+		label: "Info"
+	},
+	{
+		name: "success",
+		label: "Success"
+	},
+	{
+		name: "warning",
+		label: "Warning"
+	},
+	{
+		name: "error",
+		label: "Error"
+	},
+	{
+		name: "dot",
+		label: "Dot"
+	},
+	{
+		name: "eye",
+		label: "Eye"
+	},
+	{
+		name: "eye-off",
+		label: "Eye off"
+	}
+];
+//#endregion
+export { o as ICON_LIST, a as Icon };

package/dist/components/Icon/icon.module.js

@@ -0,0 +1,7 @@
+//#region packages/react/src/components/Icon/icon.module.less
+var e = "_icon_ocg5c_1", t = {
+	icon: e,
+	"icon-svg": "_icon-svg_ocg5c_11"
+};
+//#endregion
+export { t as default, e as icon };

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

@@ -0,0 +1,2 @@
+export { Icon, ICON_LIST } from './Icon';
+export type { IconProps, IconName } from './Icon';

package/dist/components/Image/Image.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+export type ImageColor = 'default' | 'accent' | 'danger' | 'success' | 'warning' | 'info' | 'cat-1' | 'cat-2' | 'cat-3' | 'cat-4' | 'cat-5' | 'cat-6';
+/**
+ * 衬板相框（Ant `Image` `preview` 语义）：`src`（必填）+ `alt` + `width` / `height` +
+ * `color`（matte 底，语义 + 抽象分类，与同源 Card 对齐）+ `lazy`（原生 `loading="lazy"`）+
+ * `preview`（默认 true，点击开大图）+ `onLoad` / `onError`。加载淡入 + 加载失败错误占位 +
+ * Portal 大图预览。
+ *
+ * 跨-prop 注意事项：
+ * - **`extends ImgHTMLAttributes<img>`**（`Omit` 掉受控的 `src`/`alt`/`width`/`height`/
+ *   `onLoad`/`onError`），`...rest` 透传到内层 `<img>`。`color` enum 与 Card 对齐
+ *   （`default` | `accent` | 语义 | `cat-1…6`）；`default` 为中性白面。
+ * - **预览键盘 + 焦点管理**：`preview` 开启时相框升格为原生 `<button>`（Enter/Space 开预览）；
+ *   预览弹层焦点自动落关闭按钮、Tab 圈定在遮罩内、ESC 关闭、关闭后焦点归还触发元素。
+ * - **图标走 `<Icon>`**：错误占位 `<Icon name="error">`、关闭按钮 `<Icon name="close">`，非裸
+ *   `<svg>` / 伪元素叉号；错误占位图标装饰性 `aria-hidden`。
+ * - **随 `src` 改 state 用渲染期写法**（`useState` 记 `prevSrc` 立即 bail-out），不在 effect 里
+ *   `setState`，避级联渲染。
+ */
+export interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'width' | 'height' | 'onLoad' | 'onError'> {
+    /** 图片地址（必填） */
+    src: string;
+    /** 图片替代文本（无障碍）；留空表示装饰性图片 */
+    alt?: string;
+    /** 图片宽度（数字按 px，字符串原样） */
+    width?: number | string;
+    /** 图片高度（数字按 px，字符串原样） */
+    height?: number | string;
+    /**
+     * 相框底色（matte）：`default` 中性白面；语义态 `danger/success/warning/info`；
+     * `accent` 强调面；`cat-1…6` 分类色槽（只为「互相区分」，非表状态）。
+     * @default 'default'
+     */
+    color?: ImageColor;
+    /**
+     * 是否启用原生懒加载（`loading="lazy"`）
+     * @default false
+     */
+    lazy?: boolean;
+    /**
+     * 点击图片弹出大图预览（Ant Image `preview` 语义）
+     * @default true
+     */
+    preview?: boolean;
+    /** 图片加载完成回调 */
+    onLoad?: (e: React.SyntheticEvent<HTMLImageElement>) => void;
+    /** 图片加载失败回调 */
+    onError?: (e: React.SyntheticEvent<HTMLImageElement>) => void;
+}
+export declare const Image: React.FC<ImageProps>;