@octohirono/stitch-design-system 0.1.0

package/dist/components/Modal/modal.module.js

@@ -0,0 +1,13 @@
+//#region packages/react/src/components/Modal/modal.module.less
+var e = "_mask_10ord_1", t = "_modal_10ord_11", n = "_header_10ord_32", r = "_title_10ord_38", i = "_body_10ord_45", a = "_footer_10ord_56", o = {
+	mask: e,
+	"stitch-modal-fade-in": "_stitch-modal-fade-in_10ord_1",
+	modal: t,
+	"stitch-modal-zoom-in": "_stitch-modal-zoom-in_10ord_1",
+	header: n,
+	title: r,
+	body: i,
+	footer: a
+};
+//#endregion
+export { i as body, o as default, a as footer, n as header, e as mask, t as modal, r as title };

package/dist/components/NavigationMenu/NavigationMenu.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+/**
+ * 站点导航里的一项。两种形态由字段组合决定：
+ * - **纯链接项**：给 `href`、不给 `content` → 渲染成 `<a>`（`NavigationMenu.Link`），点击跳转。
+ * - **带面板项**：给 `content` → 渲染成触发按钮 + 展开面板（`Trigger` + `Content`），
+ *   `content` 是自由 `ReactNode`（可放链接列、图文卡片等导航内容）。
+ */
+export interface NavItem {
+    /** 导航项文字（链接文本 / 触发按钮文本 = 可访问名来源） */
+    label: React.ReactNode;
+    /** 目标地址：给了即渲染为链接（无 `content` 时为纯链接项，透传到底层 `<a>` 的 `href`） */
+    href?: string;
+    /** 展开面板内容：给了即渲染为可展开项（`Trigger` + `Content`），内容自由 ReactNode */
+    content?: React.ReactNode;
+    /** 标记为当前项：底层挂 `data-active` + `aria-current="page"`，皮上走激活态（`--stitch-accent`） */
+    active?: boolean;
+}
+/**
+ * 站点导航菜单（顶栏一排导航项，部分项 hover/focus 展开一块面板）：对外 `items` 数组，
+ * 每项按字段渲染成纯链接（`href`）或带展开面板（`content`）。组合底层
+ * `Root/List/Item/Trigger/Content/Link/Viewport`；根渲染 `<nav>` landmark。
+ *
+ * 跨-prop 注意事项：
+ * - **items 分支（= 核心 API）**：`href` 无 `content` → `NavigationMenu.Link`（纯链接、可跳转、
+ *   可标 `active`）；有 `content` → `NavigationMenu.Trigger` + `NavigationMenu.Content`（展开面板，
+ *   面板内容自由 ReactNode）。与库里 Tabs / Select / DropdownMenu 一致走 `items` 数组心智。
+ * - **vs Tabs**：Tabs 是**页内切换面板内容**（tablist/tab、同页多视图、无跳转）；NavigationMenu 是
+ *   **站点导航**（链接为主，点击跳转 / 展开导航面板），别混用。
+ * - **vs Menubar**：Menubar 是应用式菜单栏，项触发**动作命令**；NavigationMenu 是**导航链接**，
+ *   项跳转或展开导航内容。
+ * - **面 = 浮起层**：展开面板走 `--stitch-bg-elevated` + `--stitch-text-primary`、边 `--stitch-border`、
+ *   圆角 `--stitch-radius-card`、阴影 `--stitch-shadow-base`；开合态 / 当前项由底层挂的
+ *   `data-state`（`open`|`closed`）/ `data-active` 描，组件不自持显隐 state。
+ * - **键盘 / 焦点 / ARIA**（方向键走项、Enter 触发、Esc 关面板、焦点归还、`<nav>` + `data-active`
+ *   → `aria-current`）由底层保证，组件不重复实现。
+ */
+export interface NavigationMenuProps {
+    /** 导航项数组（纯链接 / 带展开面板混排） */
+    items: NavItem[];
+    /** 显隐变化回调（任一面板开合时触发，回当前展开项的 value；全关时为空串） */
+    onValueChange?: (value: string) => void;
+    /** 自定义类名（挂到根 `<nav>` 上） */
+    className?: string;
+    /** 根导航的可访问名（挂到 `<nav>` landmark） */
+    'aria-label'?: string;
+}
+export declare const NavigationMenu: React.FC<NavigationMenuProps>;

package/dist/components/NavigationMenu/NavigationMenu.js

@@ -0,0 +1,47 @@
+import { Icon as e } from "../Icon/Icon.js";
+import t from "./navigation-menu.module.js";
+import "react";
+import n from "clsx";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { NavigationMenu as a } from "radix-ui";
+//#region packages/react/src/components/NavigationMenu/NavigationMenu.tsx
+var o = ({ items: o, onValueChange: s, className: c, "aria-label": l }) => /* @__PURE__ */ i(a.Root, {
+	className: n(t.root, c),
+	"aria-label": l,
+	onValueChange: s,
+	children: [/* @__PURE__ */ r(a.List, {
+		className: t.list,
+		children: o.map((n, o) => {
+			let s = `${o}`;
+			return n.content === void 0 ? /* @__PURE__ */ r(a.Item, {
+				className: t.item,
+				children: /* @__PURE__ */ r(a.Link, {
+					className: t.link,
+					href: n.href,
+					active: n.active,
+					children: n.label
+				})
+			}, s) : /* @__PURE__ */ i(a.Item, {
+				className: t.item,
+				children: [/* @__PURE__ */ i(a.Trigger, {
+					className: t.trigger,
+					children: [n.label, /* @__PURE__ */ r(e, {
+						name: "chevron-down",
+						size: "1em",
+						className: t.caret,
+						"aria-hidden": !0
+					})]
+				}), /* @__PURE__ */ r(a.Content, {
+					className: t.content,
+					children: n.content
+				})]
+			}, s);
+		})
+	}), /* @__PURE__ */ r("div", {
+		className: t.viewportWrapper,
+		children: /* @__PURE__ */ r(a.Viewport, { className: t.viewport })
+	})]
+});
+o.displayName = "NavigationMenu";
+//#endregion
+export { o as NavigationMenu };

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

@@ -0,0 +1,2 @@
+export { NavigationMenu } from './NavigationMenu';
+export type { NavigationMenuProps, NavItem } from './NavigationMenu';

package/dist/components/NavigationMenu/navigation-menu.module.js

@@ -0,0 +1,16 @@
+//#region packages/react/src/components/NavigationMenu/navigation-menu.module.less
+var e = "_root_phcem_1", t = "_list_phcem_8", n = "_item_phcem_16", r = "_link_phcem_19", i = "_trigger_phcem_20", a = "_caret_phcem_52", o = "_viewportWrapper_phcem_60", s = "_viewport_phcem_60", c = "_content_phcem_85", l = {
+	root: e,
+	list: t,
+	item: n,
+	link: r,
+	trigger: i,
+	caret: a,
+	viewportWrapper: o,
+	viewport: s,
+	"stitch-navigation-menu-in": "_stitch-navigation-menu-in_phcem_1",
+	"stitch-navigation-menu-out": "_stitch-navigation-menu-out_phcem_1",
+	content: c
+};
+//#endregion
+export { a as caret, c as content, l as default, n as item, r as link, t as list, e as root, i as trigger, s as viewport, o as viewportWrapper };

package/dist/components/Notification/Notification.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { NotificationItem } from './types';
+/**
+ * 内部单条通知视图，非公开命令式面。使用方走 `Notification.*` 静态方法而不直接渲染它，
+ * 故 `@internal` 标注、不进 skill 参考。
+ * @internal
+ */
+export interface NotificationViewProps {
+    item: NotificationItem;
+    onRemove: (key: string) => void;
+}
+export declare const NotificationView: React.FC<NotificationViewProps>;
+export declare const NOTIFICATION_ENTER_MS = 250;
+export declare const NOTIFICATION_LEAVE_MS = 250;

package/dist/components/Notification/Notification.js

@@ -0,0 +1,87 @@
+import { Icon as e } from "../Icon/Icon.js";
+import t from "./notification.module.js";
+import n, { 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";
+//#region packages/react/src/components/Notification/Notification.tsx
+var l = 250, u = {
+	success: "success",
+	info: "info",
+	warning: "warning",
+	error: "error"
+}, d = ({ item: d, onRemove: f }) => {
+	let [p, m] = a(!1), h = i(null), g = i(null), _ = n.useCallback(() => {
+		p || m(!0);
+	}, [p]);
+	r(() => {
+		if (!(!d.duration || d.duration <= 0)) return h.current = window.setTimeout(() => {
+			_();
+		}, d.duration * 1e3), () => {
+			h.current !== null && (window.clearTimeout(h.current), h.current = null);
+		};
+	}, [d.duration, _]), r(() => {
+		if (p) return g.current = window.setTimeout(() => {
+			f(d.key), d.onClose?.();
+		}, l), () => {
+			g.current !== null && (window.clearTimeout(g.current), g.current = null);
+		};
+	}, [
+		p,
+		d.key,
+		d.onClose,
+		f
+	]);
+	let v = (e) => {
+		e.stopPropagation(), _();
+	}, y = () => {
+		d.onClick && d.onClick();
+	}, b = o(t.notification, t[`type-${d.type}`], t[`placement-${d.placement}`], p && t.leaving, !!d.onClick && t.clickable, d.className), x = d.icon ?? /* @__PURE__ */ s(e, {
+		name: u[d.type],
+		size: "1em",
+		style: { color: "var(--stitch-text-on-dark)" }
+	});
+	return /* @__PURE__ */ c("div", {
+		className: b,
+		style: d.style,
+		onClick: y,
+		role: d.onClick ? "button" : void 0,
+		tabIndex: d.onClick ? 0 : void 0,
+		onKeyDown: (e) => {
+			d.onClick && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), d.onClick());
+		},
+		"data-notification-key": d.key,
+		children: [
+			/* @__PURE__ */ s("div", {
+				className: t.iconWrap,
+				"aria-hidden": !0,
+				children: x
+			}),
+			/* @__PURE__ */ c("div", {
+				className: t.body,
+				children: [/* @__PURE__ */ s("div", {
+					className: t.title,
+					children: d.message
+				}), d.description !== void 0 && d.description !== null && /* @__PURE__ */ s("div", {
+					className: t.description,
+					children: d.description
+				})]
+			}),
+			d.btn && /* @__PURE__ */ s("div", {
+				className: t.btnSlot,
+				children: d.btn
+			}),
+			/* @__PURE__ */ s("button", {
+				type: "button",
+				className: t.close,
+				"aria-label": "关闭",
+				onClick: v,
+				children: d.closeIcon ?? /* @__PURE__ */ s(e, {
+					name: "close",
+					size: "1em"
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { d as NotificationView };

package/dist/components/Notification/NotificationPortal.d.ts

@@ -0,0 +1,29 @@
+import type { NotificationConfig, NotificationType } from './types';
+declare const open: (config: NotificationConfig | string, type?: NotificationType) => void;
+declare const destroy: (key?: string) => void;
+/**
+ * **命令式 API，不是 JSX 组件** —— 导出的 `Notification` 是一组 antd 风格静态方法；
+ * 你调用它们弹通知，而不是渲染 `<Notification />`。调用本身不返回节点、不挂载到你的树里
+ * （首次调用会自挂一个 Portal 到 `document.body`，每个 position 栈是 `aria-live="polite"`
+ * 区域，新通知会被读屏播报）。`NotificationViewProps` 是内部单条视图、非公开面。
+ *
+ * - `Notification.success(config | string)` / `.info` / `.warning` / `.error`
+ * - `Notification.open(config | string)` —— 等价 `.info`
+ * - `Notification.destroy()` 关闭全部；`Notification.destroy(key)` 关闭指定 key
+ * - `config` 可传字符串（仅 `message`）或完整 `NotificationConfig` 对象
+ * - 默认位置 `top`（顶部居中）；默认 `duration: 4.5` 秒，传 `0` 不自动关闭
+ * - 显式指定 `key` 后再次 `open` 同 key 会更新现有通知而不是新增一条
+ * - 4 类型默认图标与关闭图标都走内置具名 `<Icon>`（品牌中立、随 currentColor 换肤，无 emoji / 裸 SVG / Unicode 符号）
+ */
+export interface NotificationStatic {
+    (config: NotificationConfig | string): void;
+    open: (config: NotificationConfig | string) => void;
+    success: (config: NotificationConfig | string) => void;
+    info: (config: NotificationConfig | string) => void;
+    warning: (config: NotificationConfig | string) => void;
+    error: (config: NotificationConfig | string) => void;
+    destroy: (key?: string) => void;
+}
+export declare const Notification: NotificationStatic;
+export { open as notificationOpen, destroy as notificationDestroy };
+export declare const NOTIFICATION_DEFAULT_DURATION = 4.5;

package/dist/components/Notification/NotificationPortal.js

@@ -0,0 +1,90 @@
+import e from "./notification.module.js";
+import { NotificationView as t } from "./Notification.js";
+import { useCallback as n, useSyncExternalStore as r } from "react";
+import i from "clsx";
+import { Fragment as a, jsx as o } from "react/jsx-runtime";
+import { createRoot as s } from "react-dom/client";
+//#region packages/react/src/components/Notification/NotificationPortal.tsx
+var c = 4.5, l = {
+	top: "top",
+	topLeft: "top",
+	topRight: "top",
+	bottom: "bottom",
+	bottomLeft: "bottom",
+	bottomRight: "bottom"
+}, u = [
+	"top",
+	"topLeft",
+	"topRight",
+	"bottom",
+	"bottomLeft",
+	"bottomRight"
+], d = [], f = 0, p = /* @__PURE__ */ new Set(), m = null, h = null, g = (e) => (p.add(e), () => {
+	p.delete(e);
+}), _ = () => d, v = () => [], y = () => {
+	if (h || typeof document > "u") return;
+	let t = document.createElement("div");
+	t.setAttribute("data-stitch-notification-root", ""), t.className = e.notificationRoot, document.body.appendChild(t), m = t, h = s(m), h.render(/* @__PURE__ */ o(x, {}));
+}, b = () => {
+	h || typeof document > "u" || y();
+}, x = () => {
+	let e = r(g, _, v);
+	return /* @__PURE__ */ o(S, { items: e });
+}, S = ({ items: r }) => {
+	let s = n((e) => {
+		let t = d.filter((t) => t.key !== e);
+		t.length !== d.length && (d = t, p.forEach((e) => e()));
+	}, []);
+	return /* @__PURE__ */ o(a, { children: u.map((n) => {
+		let a = r.filter((e) => e.position === n);
+		return a.length === 0 ? null : /* @__PURE__ */ o("div", {
+			className: i(e[`position-${n}`]),
+			"data-position": n,
+			role: "region",
+			"aria-label": `通知（${n}）`,
+			"aria-live": "polite",
+			"aria-relevant": "additions",
+			children: a.map((e) => /* @__PURE__ */ o(t, {
+				item: e,
+				onRemove: s
+			}, e.key))
+		}, n);
+	}) });
+}, C = (e, t) => {
+	let n = typeof e == "string" ? { message: e } : { ...e }, r = n.position ?? "top";
+	return f += 1, {
+		...n,
+		type: t,
+		key: n.key ?? `stitch-notification-${Date.now()}-${f}`,
+		position: r,
+		placement: l[r],
+		duration: n.duration ?? c,
+		createdAt: Date.now()
+	};
+}, w = (e, t = "info") => {
+	if (typeof document > "u") return;
+	let n = C(e, t);
+	if (n.key) {
+		let e = d.findIndex((e) => e.key === n.key);
+		if (e !== -1) {
+			let t = d.slice();
+			t[e] = n, d = t, p.forEach((e) => e());
+			return;
+		}
+	}
+	d = [...d, n], p.forEach((e) => e()), b();
+}, T = (e) => {
+	let t = [];
+	if (e) {
+		t = d.filter((t) => t.key === e);
+		let n = d.filter((t) => t.key !== e);
+		if (n.length === d.length) return;
+		d = n;
+	} else if (d.length === 0) return;
+	else t = d.slice(), d = [];
+	p.forEach((e) => e()), t.forEach((e) => e.onClose?.());
+}, E = ((e) => w(e, "info"));
+E.open = (e) => w(e, "info"), E.success = (e) => w(e, "success"), E.info = (e) => w(e, "info"), E.warning = (e) => w(e, "warning"), E.error = (e) => w(e, "error"), E.destroy = T;
+var D = E;
+//#endregion
+export { D as Notification, T as notificationDestroy, w as notificationOpen };

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

@@ -0,0 +1,4 @@
+export { Notification, notificationOpen, notificationDestroy, NOTIFICATION_DEFAULT_DURATION, } from './NotificationPortal';
+export type { NotificationStatic } from './NotificationPortal';
+export type { NotificationViewProps } from './Notification';
+export type { NotificationConfig, NotificationType, NotificationPosition, NotificationPlacement, NotificationItem, } from './types';

package/dist/components/Notification/notification.module.js

@@ -0,0 +1,31 @@
+//#region packages/react/src/components/Notification/notification.module.less
+var e = "_notificationRoot_1yy4u_1", t = "_notification_1yy4u_1", n = "_clickable_1yy4u_74", r = "_iconWrap_1yy4u_88", i = "_body_1yy4u_125", a = "_title_1yy4u_132", o = "_description_1yy4u_140", s = "_btnSlot_1yy4u_147", c = "_close_1yy4u_153", l = "_leaving_1yy4u_182", u = {
+	notificationRoot: e,
+	"position-top": "_position-top_1yy4u_8",
+	"position-topLeft": "_position-topLeft_1yy4u_9",
+	"position-topRight": "_position-topRight_1yy4u_10",
+	"position-bottom": "_position-bottom_1yy4u_11",
+	"position-bottomLeft": "_position-bottomLeft_1yy4u_12",
+	"position-bottomRight": "_position-bottomRight_1yy4u_13",
+	notification: t,
+	clickable: n,
+	"type-success": "_type-success_1yy4u_85",
+	iconWrap: r,
+	"type-info": "_type-info_1yy4u_92",
+	"type-warning": "_type-warning_1yy4u_99",
+	"type-error": "_type-error_1yy4u_106",
+	body: i,
+	title: a,
+	description: o,
+	btnSlot: s,
+	close: c,
+	"placement-top": "_placement-top_1yy4u_179",
+	"stitch-notification-slide-from-top": "_stitch-notification-slide-from-top_1yy4u_1",
+	leaving: l,
+	"stitch-notification-slide-out-top": "_stitch-notification-slide-out-top_1yy4u_1",
+	"placement-bottom": "_placement-bottom_1yy4u_185",
+	"stitch-notification-rise-from-bottom": "_stitch-notification-rise-from-bottom_1yy4u_1",
+	"stitch-notification-sink-out-bottom": "_stitch-notification-sink-out-bottom_1yy4u_1"
+};
+//#endregion
+export { i as body, s as btnSlot, n as clickable, c as close, u as default, o as description, r as iconWrap, l as leaving, t as notification, e as notificationRoot, a as title };

package/dist/components/Notification/types.d.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+export type NotificationType = 'success' | 'info' | 'warning' | 'error';
+export type NotificationPosition = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight';
+export type NotificationPlacement = 'top' | 'bottom';
+export interface NotificationConfig {
+    /** 通知标题（必填） */
+    message: ReactNode;
+    /** 通知描述/正文，支持 ReactNode */
+    description?: ReactNode;
+    /** 自动关闭延时（秒），默认 4.5；传 0 不自动关闭 */
+    duration?: number;
+    /** 出现位置，默认 'top'（顶部居中） */
+    position?: NotificationPosition;
+    /** 类型 */
+    type?: NotificationType;
+    /** 自定义图标（优先级高于 type 默认图标） */
+    icon?: ReactNode;
+    /** 自定义操作按钮，渲染在关闭按钮左侧 */
+    btn?: ReactNode;
+    /** 唯一 key，显式指定后再次调用 open 同 key 会更新现有通知而不是新增 */
+    key?: string;
+    /** 关闭回调 */
+    onClose?: () => void;
+    /** 点击通知本体回调 */
+    onClick?: () => void;
+    /** 自定义关闭图标 */
+    closeIcon?: ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export interface NotificationItem extends NotificationConfig {
+    /** 运行时唯一 key */
+    key: string;
+    /** 实际类型（已 fallback） */
+    type: NotificationType;
+    /** 实际 position（已 fallback） */
+    position: NotificationPosition;
+    /** placement 由 position 推导（用于出场动画方向） */
+    placement: NotificationPlacement;
+    /** 创建时间戳 */
+    createdAt: number;
+}

package/dist/components/OtpField/OtpField.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+/**
+ * 一次性验证码分格输入（OTP）：定长的一排单字符输入格，自动跳格、支持整段粘贴分发。
+ * 按 `length` 渲染 `length` 个分格（外加隐藏聚合 input 供表单提交），取整串值：
+ * `value`/`defaultValue`/`onChange`（整串）+ `disabled` + `autoFocus`。
+ *
+ * 跨-prop 注意事项：
+ * - **length → 格数**：内部按 `length` 渲染 `length` 个分格（底层每个 `Input` = 一个字符位）；
+ *   `length` 是渲染数量的唯一来源，不由 children 传入。
+ * - **值聚合 → onChange(string)**：每格一字符，底层把各格拼成整串；值变更回调回**整串**
+ *   （底层 `onValueChange(string)` → 我们的 `onChange(string)`）。
+ * - **受控/非受控双模式**：给 `value` 由父管（配 `onChange`），只给 `defaultValue` 组件自管；
+ *   两者均为整串、直接透传底层（不自持 state）。
+ * - **vs Input**：Input 是单框自由文本；OtpField 是定长分格验证码（每格一字符、自动跳格）。
+ * - **vs PasswordInput**：那是可明暗切换的密码框；OtpField 是分格验证码，二者别混。
+ * - **Less 皮**：每格走 `--stitch-radius-input` + `--stitch-border`（focus → `--stitch-accent`
+ *   + focus 环 `--stitch-focus-ring`），与表单控件族对齐；禁用态由底层给每格挂 `disabled`。
+ * - **键盘 / 焦点 / 跳格 / 粘贴分发 / ARIA** 由底层保证，组件不重复实现。
+ */
+export interface OtpFieldProps {
+    /** 格数（验证码位数）；内部按此渲染 length 个分格 */
+    length: number;
+    /** 受控值（整串） */
+    value?: string;
+    /** 非受控初始值（整串） */
+    defaultValue?: string;
+    /** 值变化回调；回聚合后的整串 */
+    onChange?: (value: string) => void;
+    /** 禁用 */
+    disabled?: boolean;
+    /** 挂载即聚焦第一格 */
+    autoFocus?: boolean;
+    /** 自定义类名（挂到根分格容器） */
+    className?: string;
+    /** 无障碍标签（给分格组一个可及名） */
+    'aria-label'?: string;
+    /** 关联外部可见 label 的 id */
+    'aria-labelledby'?: string;
+}
+export declare const OtpField: React.FC<OtpFieldProps>;

package/dist/components/OtpField/OtpField.js

@@ -0,0 +1,20 @@
+import e from "./otp-field.module.js";
+import "react";
+import t from "clsx";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { unstable_OneTimePasswordField as i } from "radix-ui";
+//#region packages/react/src/components/OtpField/OtpField.tsx
+var a = ({ length: a, value: o, defaultValue: s, onChange: c, disabled: l = !1, autoFocus: u, className: d, "aria-label": f, "aria-labelledby": p }) => /* @__PURE__ */ r(i.Root, {
+	className: t(e.root, d),
+	value: o,
+	defaultValue: s,
+	onValueChange: c,
+	disabled: l,
+	autoFocus: u,
+	"aria-label": f,
+	"aria-labelledby": p,
+	children: [Array.from({ length: a }, (t, r) => /* @__PURE__ */ n(i.Input, { className: e.input }, r)), /* @__PURE__ */ n(i.HiddenInput, {})]
+});
+a.displayName = "OtpField";
+//#endregion
+export { a as OtpField };

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

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

package/dist/components/OtpField/otp-field.module.js

@@ -0,0 +1,7 @@
+//#region packages/react/src/components/OtpField/otp-field.module.less
+var e = "_root_iee8a_1", t = "_input_iee8a_7", n = {
+	root: e,
+	input: t
+};
+//#endregion
+export { n as default, t as input, e as root };

package/dist/components/PasswordInput/PasswordInput.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { type InputProps } from '../Input';
+/**
+ * 密码框：在底件 `Input` 之上只加「明暗切换」那一层——`suffix` 槽 / `type` 透传 / 受控·非受控
+ * 值范式 / 边框 / 校验态全复用 `Input`（不重写）。相对普通 `Input` 补一点：
+ *
+ * - 内部持 `visible` 态，`type = visible ? 'text' : 'password'` 透给底件（对外不暴露 `type`）；
+ *   `suffix` 塞一个眼睛按钮，点击翻 `visible`，按钮的 `aria-label` 与 `<Icon>`（eye ↔ eye-off）
+ *   随态切换。切换钮是原生 `<button type="button">`：可 Tab 聚焦、Enter/Space 触发。
+ *
+ * 跨-prop 注意事项：
+ * - **省去 `type` / `suffix`**——由本件内部管；`type` 恒为 password/text 二态，`suffix` 恒为切换钮。
+ * - **值仍走底件的受控/非受控双模式**：给 `value` 由父管，只给 `defaultValue` 组件自管
+ *   （`onChange` 收到的与底件一致）。可见态只影响遮蔽显示，不改值。
+ * - **切换钮图标走 `<Icon name="eye"/"eye-off">`**（描边、随 `--stitch-*` 换肤）——**Do NOT** 传
+ *   emoji / Unicode / 裸 `<svg>`。可访问名由 `showAriaLabel` / `hideAriaLabel` 定。
+ * - `visibilityToggle={false}` 时不渲染切换钮、恒遮蔽（`suffix` 留空，值仍可键入）。
+ */
+export interface PasswordInputProps extends Omit<InputProps, 'type' | 'suffix'> {
+    /**
+     * 是否显示明暗切换按钮（关掉则恒遮蔽）
+     * @default true
+     */
+    visibilityToggle?: boolean;
+    /**
+     * 遮蔽态下切换钮的可访问名（点击将显示密码）
+     * @default '显示密码'
+     */
+    showAriaLabel?: string;
+    /**
+     * 可见态下切换钮的可访问名（点击将隐藏密码）
+     * @default '隐藏密码'
+     */
+    hideAriaLabel?: string;
+}
+export declare const PasswordInput: React.FC<PasswordInputProps>;

package/dist/components/PasswordInput/PasswordInput.js

@@ -0,0 +1,28 @@
+import { Icon as e } from "../Icon/Icon.js";
+import { Input as t } from "../Input/Input.js";
+import n from "./password-input.module.js";
+import { useCallback as r, useState as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region packages/react/src/components/PasswordInput/PasswordInput.tsx
+var o = ({ visibilityToggle: o = !0, showAriaLabel: s = "显示密码", hideAriaLabel: c = "隐藏密码", disabled: l = !1, ...u }) => {
+	let [d, f] = i(!1), p = r(() => f((e) => !e), []), m = o && !l ? /* @__PURE__ */ a("button", {
+		type: "button",
+		className: n.toggle,
+		onClick: p,
+		"aria-label": d ? c : s,
+		"aria-pressed": d,
+		children: /* @__PURE__ */ a(e, {
+			name: d ? "eye-off" : "eye",
+			size: 16
+		})
+	}) : void 0;
+	return /* @__PURE__ */ a(t, {
+		...u,
+		type: d ? "text" : "password",
+		disabled: l,
+		suffix: m
+	});
+};
+o.displayName = "PasswordInput";
+//#endregion
+export { o as PasswordInput };

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

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

package/dist/components/PasswordInput/password-input.module.js

@@ -0,0 +1,4 @@
+//#region packages/react/src/components/PasswordInput/password-input.module.less
+var e = "_toggle_ksvhb_1", t = { toggle: e };
+//#endregion
+export { t as default, e as toggle };

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+/**
+ * 可交互浮层（Ant `Popover` 语义）：`trigger` 触发器 + `children` 浮层内容（可放按钮 / 表单 /
+ * 链接）+ 受控 `open` / 非受控 `defaultOpen` / `onOpenChange`。click 触发，点外部或 Esc 关闭。
+ *
+ * 跨-prop 注意事项：
+ * - **vs Tooltip**：Tooltip 是短文字提示、hover 触发、`role="tooltip"`、不含交互；Popover 是
+ *   **click 触发的可交互浮层**，内容可获得焦点、可交互，别混用。
+ * - **受控/非受控双模式**：给 `open` 由父管（配 `onOpenChange`），只给 `defaultOpen` 组件自管；
+ *   两者与底层同名，直接透传。
+ * - **面 = 浮起层**：浮层走 `--stitch-bg-elevated`（浮起面）+ `--stitch-text-primary`，
+ *   边框 `--stitch-border`、圆角 `--stitch-radius-card`、阴影 `--stitch-shadow-base`；开合态由
+ *   底层挂的 `data-state` 描（`open` 时淡入），组件不自持显隐 state。
+ * - **键盘 / 焦点 / ARIA**（Esc 关、焦点陷阱与归还、`aria-expanded`）由底层保证，组件不重复实现；
+ *   但浮层是 `role="dialog"`，**须有可及名**——用 `aria-label` 或 `aria-labelledby` 指定（内容相关，
+ *   由使用者给）。
+ */
+export interface PopoverProps {
+    /** 触发器：任意可承载 click 与焦点的元素（如 `<button>`），浮层锚定其上 */
+    trigger: React.ReactNode;
+    /** 浮层内容，可含按钮 / 表单 / 链接等可交互元素 */
+    children?: React.ReactNode;
+    /** 浮层（`role="dialog"`）的可及名——无可见标题时用它 */
+    'aria-label'?: string;
+    /** 浮层的可及名来源：指向浮层内标题元素的 id */
+    'aria-labelledby'?: string;
+    /** 受控显隐（气泡浮层约定：Ant v5 `open`） */
+    open?: boolean;
+    /** 非受控初始显隐 @default false */
+    defaultOpen?: boolean;
+    /** 显隐变化回调（气泡浮层约定：Ant v5 `onOpenChange`） */
+    onOpenChange?: (open: boolean) => void;
+    /** 触发器与浮层的间距（px） @default 8 */
+    sideOffset?: number;
+    /** 自定义类名（挂到浮层面上） */
+    className?: string;
+}
+/**
+ * 可交互浮层：click 触发，点外部 / Esc 关闭，焦点管理与 ARIA 由底层保证；
+ * 受控（`open`/`onOpenChange`）与非受控双模式。
+ */
+export declare const Popover: React.FC<PopoverProps>;