@octohirono/stitch-design-system 0.1.0

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

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps, CheckboxOption, CheckboxSize } from './Checkbox';

package/dist/components/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface CodeBlockProps extends React.HTMLAttributes<HTMLPreElement> {
+    /** 要展示 / 高亮的源代码 */
+    code: string;
+}
+/**
+ * 只读代码块：暗色表面 + 轻量语法高亮。
+ * 可用 Tab 聚焦、方向键滚动（`tabIndex=0` 的可滚动区域）；默认可及名「代码块」，可用 `aria-label` 覆盖。
+ */
+export declare const CodeBlock: React.FC<CodeBlockProps>;

package/dist/components/CodeBlock/CodeBlock.js

@@ -0,0 +1,50 @@
+import e from "./codeblock.module.js";
+import "react";
+import t from "clsx";
+import { jsx as n } from "react/jsx-runtime";
+//#region packages/react/src/components/CodeBlock/CodeBlock.tsx
+var r = {
+	comment: e["tok-comment"],
+	string: e["tok-string"],
+	keyword: e["tok-keyword"],
+	react: e["tok-react"],
+	component: e["tok-component"],
+	func: e["tok-func"],
+	prop: e["tok-prop"],
+	jsx: e["tok-jsx"],
+	operator: e["tok-operator"],
+	number: e["tok-number"],
+	default: e["tok-default"]
+}, i = (e) => {
+	let t = [], i = (n, r) => {
+		let i, a = new RegExp(n.source, n.flags.includes("g") ? n.flags : n.flags + "g");
+		for (; (i = a.exec(e)) !== null;) t.push({
+			start: i.index,
+			end: i.index + i[0].length,
+			type: r
+		});
+	};
+	i(/\/\*[\s\S]*?\*\//g, "comment"), i(/\/\/.*$/gm, "comment"), i(/`[^`]*`/g, "string"), i(/"[^"]*"/g, "string"), i(/'[^']*'/g, "string"), i(/<\/?[A-Z][\w.$]*/g, "jsx"), i(/<\/?[a-z][\w-]*/g, "jsx"), i(/\/?>/g, "jsx"), i(/\b(React|useState|useEffect|useCallback|useMemo|useRef|useContext|useReducer|useLayoutEffect|useImperativeHandle|useDebugValue|createContext|createElement|cloneElement|Fragment|Suspense|lazy|memo|forwardRef|useId|FC|ReactNode|ReactElement|CSSProperties)\b/g, "react"), i(/\b(true|false)\b/g, "keyword"), i(/\b(null|undefined|void|NaN|Infinity)\b/gi, "keyword"), i(/\b\d+\.?\d*\b/g, "number"), i(/\b(import|from|as|export|default|const|let|var|function|return|if|else|for|while|switch|case|break|continue|try|catch|throw|finally|new|typeof|instanceof|async|await|type|interface)\b/gi, "keyword"), i(/\b[A-Z][a-zA-Z0-9_$]*\b/g, "component"), i(/\b[a-z][a-zA-Z0-9_$]*\s*(?=\()/g, "func"), i(/\b[a-zA-Z_$][\w$]*\s*(?==)/g, "prop"), i(/>|===|!==|==|!=|<=|>=|&&|\|\||[+\-*/%=<>!&|^~?:]/g, "operator"), i(/[{}[\]();,]/g, "operator"), t.sort((e, t) => e.start - t.start);
+	let a = [], o = 0;
+	for (let i of t) i.start < o || (i.start > o && a.push(/* @__PURE__ */ n("span", {
+		className: r.default,
+		children: e.slice(o, i.start)
+	}, `t${o}`)), a.push(/* @__PURE__ */ n("span", {
+		className: r[i.type],
+		children: e.slice(i.start, i.end)
+	}, `s${i.start}`)), o = i.end);
+	return o < e.length && a.push(/* @__PURE__ */ n("span", {
+		className: r.default,
+		children: e.slice(o)
+	}, `e${o}`)), a;
+}, a = ({ code: r, className: a, ...o }) => /* @__PURE__ */ n("pre", {
+	role: "group",
+	"aria-label": "代码块",
+	tabIndex: 0,
+	className: t(e.codeBlock, a),
+	...o,
+	children: i(r)
+});
+a.displayName = "CodeBlock";
+//#endregion
+export { a as CodeBlock };

package/dist/components/CodeBlock/codeblock.module.js

@@ -0,0 +1,17 @@
+//#region packages/react/src/components/CodeBlock/codeblock.module.less
+var e = "_codeBlock_zsyzk_1", t = {
+	codeBlock: e,
+	"tok-default": "_tok-default_zsyzk_19",
+	"tok-comment": "_tok-comment_zsyzk_22",
+	"tok-operator": "_tok-operator_zsyzk_25",
+	"tok-keyword": "_tok-keyword_zsyzk_28",
+	"tok-react": "_tok-react_zsyzk_31",
+	"tok-string": "_tok-string_zsyzk_34",
+	"tok-number": "_tok-number_zsyzk_37",
+	"tok-component": "_tok-component_zsyzk_40",
+	"tok-func": "_tok-func_zsyzk_43",
+	"tok-prop": "_tok-prop_zsyzk_46",
+	"tok-jsx": "_tok-jsx_zsyzk_49"
+};
+//#endregion
+export { e as codeBlock, t as default };

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

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

package/dist/components/Collapse/Collapse.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+/**
+ * 单项披露件（Ant v5 `Collapse.Panel` 语义，非多面板 accordion）：`header`（触发标题）+
+ * `children`（面板内容）+ 受控/非受控 `open` / `defaultOpen` / `onOpenChange` + `disabled`。
+ *
+ * 跨-prop 注意事项：
+ * - **受控/非受控双模式**：给 `open` 由父管（配 `onOpenChange`），只给 `defaultOpen` 组件自管
+ *   （非靠 remount 换 `defaultOpen` 的伪受控）。`extends HTMLAttributes<HTMLDivElement>`、
+ *   `...rest` 透传（`className` / `style` / `data-*` / `aria-*`）。
+ * - **展开指示走 `<Icon name="chevron-down">`**（跟随 `currentColor`、展开旋转 180°），非
+ *   Unicode `+`/`−` 字符、非裸 `<svg>`；用中立 chevron 而非填充强调圆，避免与「一屏最多一个填充
+ *   强调」的克制冲突。头部/内容经 `aria-controls` / `aria-labelledby` 关联，`disabled` 时不可展开。
+ * - **容器表面**：`--stitch-bg-elevated` + `--stitch-border`（发丝）+ `--stitch-radius-card`，
+ *   无阴影（边框即结构）；圆角随主题变。
+ */
+export interface CollapseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** 触发区标题（可点击的问句 / 标签） */
+    header: React.ReactNode;
+    /** 展开后显示的面板内容 */
+    children?: React.ReactNode;
+    /**
+     * 受控展开状态（给了即受控；配 `onOpenChange` 用）
+     */
+    open?: boolean;
+    /**
+     * 非受控初始展开状态
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /** 展开状态变化回调（受控/非受控都会触发） */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * 是否禁用（禁用后不可切换、按钮 disabled）
+     * @default false
+     */
+    disabled?: boolean;
+}
+export declare const Collapse: React.FC<CollapseProps>;

package/dist/components/Collapse/Collapse.js

@@ -0,0 +1,50 @@
+import { Icon as e } from "../Icon/Icon.js";
+import t from "./collapse.module.js";
+import { useCallback as n, useId as r, useState as i } from "react";
+import a from "clsx";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region packages/react/src/components/Collapse/Collapse.tsx
+var c = ({ header: c, children: l, open: u, defaultOpen: d = !1, onOpenChange: f, disabled: p = !1, className: m, ...h }) => {
+	let [g, _] = i(d), v = u !== void 0, y = v ? u : g, b = `stitch-collapse-${r().replace(/:/g, "")}`, x = `${b}-header`, S = `${b}-panel`, C = n(() => {
+		if (p) return;
+		let e = !y;
+		v || _(e), f?.(e);
+	}, [
+		p,
+		y,
+		v,
+		f
+	]), w = a(t.collapse, y && t.expanded, p && t.disabled, m);
+	return /* @__PURE__ */ s("div", {
+		className: w,
+		...h,
+		children: [/* @__PURE__ */ s("button", {
+			type: "button",
+			id: x,
+			className: t.header,
+			onClick: C,
+			disabled: p,
+			"aria-expanded": y,
+			"aria-controls": S,
+			children: [/* @__PURE__ */ o("span", {
+				className: t.indicator,
+				children: /* @__PURE__ */ o(e, { name: "chevron-down" })
+			}), /* @__PURE__ */ o("span", {
+				className: t.text,
+				children: c
+			})]
+		}), /* @__PURE__ */ o("div", {
+			className: t.panel,
+			id: S,
+			role: "region",
+			"aria-labelledby": x,
+			children: /* @__PURE__ */ o("div", {
+				className: t.content,
+				children: l
+			})
+		})]
+	});
+};
+c.displayName = "Collapse";
+//#endregion
+export { c as Collapse };

package/dist/components/Collapse/collapse.module.js

@@ -0,0 +1,13 @@
+//#region packages/react/src/components/Collapse/collapse.module.less
+var e = "_collapse_xqb89_1", t = "_disabled_xqb89_11", n = "_header_xqb89_14", r = "_indicator_xqb89_34", i = "_expanded_xqb89_40", a = "_text_xqb89_43", o = "_panel_xqb89_50", s = "_content_xqb89_58", c = {
+	collapse: e,
+	disabled: t,
+	header: n,
+	indicator: r,
+	expanded: i,
+	text: a,
+	panel: o,
+	content: s
+};
+//#endregion
+export { e as collapse, s as content, c as default, t as disabled, i as expanded, n as header, r as indicator, o as panel, a as text };

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

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

package/dist/components/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import { type IconName } from '../Icon';
+/**
+ * 右键菜单里的一项。结构与 `DropdownMenuItem` 完全一致（同族，同一心智）。
+ */
+export interface ContextMenuItem {
+    /** 菜单项文字 */
+    label: React.ReactNode;
+    /** 选中该项时触发（底层 `onSelect` → 我们的 `onClick`）；有 `children` 的父项忽略此项 */
+    onClick?: () => void;
+    /** 危险操作（如删除）：文字走 `--stitch-danger`、高亮态软底 `--stitch-danger-bg` */
+    danger?: boolean;
+    /** 禁用该项（不可选、灰显；键盘导航跳过——由底层保证） */
+    disabled?: boolean;
+    /** 项前图标（必须是 `<Icon>` 支持的名，图标经 `<Icon>` 渲染、不接受裸 svg） */
+    icon?: IconName;
+    /** 子菜单项：非空 → 该项渲染为可展开的子菜单入口（底层 `Sub/SubTrigger/SubContent`） */
+    children?: ContextMenuItem[];
+}
+/**
+ * 右键菜单（在目标区域右键弹出的一列动作）：`children` 是右键目标区、`items` 是动作项数组，
+ * 点项**触发动作、无选中态**。`onOpenChange` 观察开合。
+ *
+ * 跨-prop 注意事项：
+ * - **vs DropdownMenu**：二者**同构**——同一列动作、同 `items` 项结构（`{ label, onClick?, danger?,
+ *   disabled?, icon?, children? }`）、同 `menu/menuitem` 语义、同浮起面皮；**唯一区别是触发方式**：
+ *   DropdownMenu 由按钮 click 触发（有 `trigger` prop、锚在按钮上），ContextMenu 由**右键 `children`
+ *   目标区**触发（无 `trigger`、锚在光标处）。当作同一心智，别学两套。
+ * - **items 数组 API**（跟库里 Select / Tabs / Accordion / DropdownMenu 一致）：底层 `onSelect` 归一成
+ *   `onClick`；`icon` 走 `<Icon>`（禁裸 svg）；某项 `children` 非空即渲染成可展开的子菜单。
+ * - **面 = 浮起层**：菜单面走 `--stitch-bg-elevated` + `--stitch-text-primary`，边 `--stitch-border`、
+ *   圆角 `--stitch-radius-card`、阴影 `--stitch-shadow-base`；开合态 / 高亮态 / 禁用态由底层挂的
+ *   `data-state` / `data-highlighted` / `data-disabled` 描，组件不自持显隐 state。
+ * - **键盘 / 焦点 / ARIA**（右键 / 长按开、方向键走项、Enter 选中、Esc 关、焦点归还、`role="menu"`）
+ *   由底层保证，组件不重复实现。
+ */
+export interface ContextMenuProps {
+    /** 右键目标区：在这块区域内右键（触屏长按）弹出菜单 */
+    children: React.ReactNode;
+    /** 动作项数组（Ant v5 `items` 风格，与 DropdownMenu 同结构） */
+    items: ContextMenuItem[];
+    /** 显隐变化回调 */
+    onOpenChange?: (open: boolean) => void;
+    /** 自定义类名（挂到菜单面上） */
+    className?: string;
+}
+export declare const ContextMenu: React.FC<ContextMenuProps>;

package/dist/components/ContextMenu/ContextMenu.js

@@ -0,0 +1,50 @@
+import { Icon as e } from "../Icon/Icon.js";
+import t from "./context-menu.module.js";
+import "react";
+import n from "clsx";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { ContextMenu as o } from "radix-ui";
+//#region packages/react/src/components/ContextMenu/ContextMenu.tsx
+function s(c, l = "") {
+	return c.map((c, u) => {
+		let d = `${l}${u}`, f = /* @__PURE__ */ a(r, { children: [c.icon && /* @__PURE__ */ i(e, {
+			name: c.icon,
+			size: "1em",
+			className: t.itemIcon
+		}), /* @__PURE__ */ i("span", {
+			className: t.itemLabel,
+			children: c.label
+		})] });
+		return c.children && c.children.length > 0 ? /* @__PURE__ */ a(o.Sub, { children: [/* @__PURE__ */ a(o.SubTrigger, {
+			className: n(t.item, c.danger && t.danger),
+			disabled: c.disabled,
+			children: [f, /* @__PURE__ */ i(e, {
+				name: "chevron-right",
+				size: "1em",
+				className: t.subArrow
+			})]
+		}), /* @__PURE__ */ i(o.Portal, { children: /* @__PURE__ */ i(o.SubContent, {
+			className: t.content,
+			sideOffset: 8,
+			children: s(c.children, `${d}-`)
+		}) })] }, d) : /* @__PURE__ */ i(o.Item, {
+			className: n(t.item, c.danger && t.danger),
+			disabled: c.disabled,
+			onSelect: c.onClick,
+			children: f
+		}, d);
+	});
+}
+var c = ({ children: e, items: r, onOpenChange: c, className: l }) => /* @__PURE__ */ a(o.Root, {
+	onOpenChange: c,
+	children: [/* @__PURE__ */ i(o.Trigger, {
+		asChild: !0,
+		children: e
+	}), /* @__PURE__ */ i(o.Portal, { children: /* @__PURE__ */ i(o.Content, {
+		className: n(t.content, l),
+		children: s(r)
+	}) })]
+});
+c.displayName = "ContextMenu";
+//#endregion
+export { c as ContextMenu };

package/dist/components/ContextMenu/context-menu.module.js

@@ -0,0 +1,13 @@
+//#region packages/react/src/components/ContextMenu/context-menu.module.less
+var e = "_content_1or0o_1", t = "_item_1or0o_21", n = "_danger_1or0o_41", r = "_itemIcon_1or0o_48", i = "_itemLabel_1or0o_52", a = "_subArrow_1or0o_55", o = {
+	content: e,
+	"stitch-context-menu-in": "_stitch-context-menu-in_1or0o_1",
+	"stitch-context-menu-out": "_stitch-context-menu-out_1or0o_1",
+	item: t,
+	danger: n,
+	itemIcon: r,
+	itemLabel: i,
+	subArrow: a
+};
+//#endregion
+export { e as content, n as danger, o as default, t as item, r as itemIcon, i as itemLabel, a as subArrow };

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

@@ -0,0 +1,2 @@
+export { ContextMenu } from './ContextMenu';
+export type { ContextMenuProps, ContextMenuItem } from './ContextMenu';

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+/** 方向：水平（默认）/ 垂直（内联细线） */
+export type DividerType = 'horizontal' | 'vertical';
+/** 线型：实线 / 虚线（只留可 CSS 表达的两档） */
+export type DividerVariant = 'solid' | 'dashed';
+/** 带文字时文字位置（仅水平生效） */
+export type DividerOrientation = 'left' | 'center' | 'right';
+/**
+ * 分隔线（Ant `Divider` 语义）：`type`（水平/垂直）+ `variant`（实线/虚线）+ `children` 文字
+ * 分隔线（`orientation` 左/中/右 + `plain` 常规字重）。非交互件，`role="separator"`。
+ *
+ * 跨-prop 注意事项：
+ * - **线色统一走 `--stitch-border`**：主题里 border 即「主结构分隔手段」，正是分隔线该用的角色；
+ *   线宽 `--stitch-border-width`，虚线由 `border-style: dashed` 表达（颜色仍是 border 角色）。
+ * - **文字分隔线（仅水平）**：`::before`/`::after` 两段 `border-top` 画线、文字居中夹在中间；
+ *   `orientation=left/right` 调两段 width 占比。文字色 `--stitch-text-primary`、字重
+ *   `--stitch-font-weight-medium`（`plain` → `-normal` + 小一档字号）。**垂直分隔线忽略
+ *   `children`**（与 Ant 一致）。
+ * - **a11y**：根 `role="separator"`；垂直显式 `aria-orientation="vertical"`（水平用 ARIA 默认
+ *   方向，不标注）；文字分隔线的文字即其可访问名。
+ */
+export interface DividerProps {
+    /**
+     * 方向：水平 / 垂直
+     * @default 'horizontal'
+     */
+    type?: DividerType;
+    /**
+     * 线型：实线 / 虚线
+     * @default 'solid'
+     */
+    variant?: DividerVariant;
+    /**
+     * 文字位置（仅水平且带文字时生效）
+     * @default 'center'
+     */
+    orientation?: DividerOrientation;
+    /**
+     * 文字用常规字重（非加粗强调）
+     * @default false
+     */
+    plain?: boolean;
+    /** 分隔线中间的文字内容（仅水平生效；垂直分隔线忽略） */
+    children?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const Divider: React.FC<DividerProps>;

package/dist/components/Divider/Divider.js

@@ -0,0 +1,23 @@
+import e from "./divider.module.js";
+import { useId as t } from "react";
+import n from "clsx";
+import { jsx as r } from "react/jsx-runtime";
+//#region packages/react/src/components/Divider/Divider.tsx
+var i = ({ type: i = "horizontal", variant: a = "solid", orientation: o = "center", plain: s = !1, children: c, className: l, style: u }) => {
+	let d = i === "horizontal" && c != null && c !== !1, f = t(), p = n(e.divider, i === "vertical" ? e["divider-vertical"] : e["divider-horizontal"], a === "dashed" && e["divider-dashed"], d && e["divider-with-text"], d && e[`divider-${o}`], d && s && e["divider-plain"], l);
+	return /* @__PURE__ */ r("div", {
+		className: p,
+		style: u,
+		role: "separator",
+		"aria-orientation": i === "vertical" ? "vertical" : void 0,
+		"aria-labelledby": d ? f : void 0,
+		children: d && /* @__PURE__ */ r("span", {
+			id: f,
+			className: e["divider-text"],
+			children: c
+		})
+	});
+};
+i.displayName = "Divider";
+//#endregion
+export { i as Divider };

package/dist/components/Divider/divider.module.js

@@ -0,0 +1,14 @@
+//#region packages/react/src/components/Divider/divider.module.less
+var e = "_divider_13eyd_1", t = {
+	divider: e,
+	"divider-dashed": "_divider-dashed_13eyd_6",
+	"divider-horizontal": "_divider-horizontal_13eyd_9",
+	"divider-vertical": "_divider-vertical_13eyd_17",
+	"divider-with-text": "_divider-with-text_13eyd_24",
+	"divider-text": "_divider-text_13eyd_48",
+	"divider-left": "_divider-left_13eyd_52",
+	"divider-right": "_divider-right_13eyd_58",
+	"divider-plain": "_divider-plain_13eyd_64"
+};
+//#endregion
+export { t as default, e as divider };

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

@@ -0,0 +1,2 @@
+export { Divider } from './Divider';
+export type { DividerProps, DividerType, DividerVariant, DividerOrientation, } from './Divider';

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+export type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
+export interface DrawerProps {
+    /** 是否可见 */
+    open: boolean;
+    /** 标题 */
+    title?: React.ReactNode;
+    /** 弹出位置 @default 'right' */
+    placement?: DrawerPlacement;
+    /** 宽度（left / right 时生效） @default 378 */
+    width?: number | string;
+    /** 高度（top / bottom 时生效） @default 300 */
+    height?: number | string;
+    /**
+     * 点击遮罩是否关闭
+     * @default true
+     */
+    maskClosable?: boolean;
+    /** 底部区域；不传则不渲染 */
+    footer?: React.ReactNode;
+    /** 关闭回调（遮罩 / Esc / 关闭按钮触发；Ant v5 Drawer 约定名 `onClose`） */
+    onClose?: () => void;
+    /** 抽屉内容 */
+    children?: React.ReactNode;
+    /** 自定义类名（挂到面板） */
+    className?: string;
+    /** 遮罩层自定义样式 */
+    maskStyle?: React.CSSProperties;
+}
+/**
+ * 抽屉浮层：Portal 挂到 body，遮罩 + 贴边滑入面板。
+ * 打开时把焦点送进抽屉并做 Tab 焦点陷阱，Esc / 点遮罩关闭，关闭时焦点归还触发元素（共享自 `useOverlay`）。
+ * `role="dialog"` + `aria-modal` + `aria-labelledby` 关联标题。
+ * 标准贴边浮层：几何随 `placement`、圆角/阴影/字体随站点。
+ */
+export declare const Drawer: React.FC<DrawerProps>;

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,76 @@
+import { Icon as e } from "../Icon/Icon.js";
+import { useOverlay as t } from "../_internal/useOverlay.js";
+import n from "./drawer.module.js";
+import { useCallback as r, useId as i, useRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { createPortal as c } from "react-dom";
+//#region packages/react/src/components/Drawer/Drawer.tsx
+var l = {
+	left: n.panelLeft,
+	right: n.panelRight,
+	top: n.panelTop,
+	bottom: n.panelBottom
+}, u = ({ open: u, title: d, placement: f = "right", width: p = 378, height: m = 300, maskClosable: h = !0, footer: g, onClose: _, children: v, className: y, maskStyle: b }) => {
+	let x = a(null);
+	t({
+		open: u,
+		containerRef: x,
+		onEscape: _
+	});
+	let S = r(() => {
+		h && _?.();
+	}, [h, _]), C = r((e) => {
+		e.stopPropagation();
+	}, []), w = `${`stitch-drawer-${i().replace(/:/g, "")}`}-title`;
+	if (!u) return null;
+	let T = f === "left" || f === "right" ? { width: p } : { height: m }, E = /* @__PURE__ */ o("div", {
+		className: n.mask,
+		style: b,
+		onClick: S,
+		children: /* @__PURE__ */ s("div", {
+			ref: x,
+			className: [
+				n.panel,
+				l[f],
+				y
+			].filter(Boolean).join(" "),
+			style: T,
+			onClick: C,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": d ? w : void 0,
+			tabIndex: -1,
+			children: [
+				d && /* @__PURE__ */ s("div", {
+					className: n.header,
+					children: [/* @__PURE__ */ o("div", {
+						className: n.title,
+						id: w,
+						children: d
+					}), /* @__PURE__ */ o("button", {
+						type: "button",
+						className: n.close,
+						onClick: _,
+						"aria-label": "关闭",
+						children: /* @__PURE__ */ o(e, {
+							name: "close",
+							size: "1em"
+						})
+					})]
+				}),
+				/* @__PURE__ */ o("div", {
+					className: n.body,
+					children: v
+				}),
+				g && /* @__PURE__ */ o("div", {
+					className: n.footer,
+					children: g
+				})
+			]
+		})
+	});
+	return c(E, document.body);
+};
+u.displayName = "Drawer";
+//#endregion
+export { u as Drawer };

package/dist/components/Drawer/drawer.module.js

@@ -0,0 +1,21 @@
+//#region packages/react/src/components/Drawer/drawer.module.less
+var e = "_mask_16an3_1", t = "_panel_16an3_8", n = "_panelRight_16an3_25", r = "_panelLeft_16an3_33", i = "_panelTop_16an3_41", a = "_panelBottom_16an3_49", o = "_header_16an3_57", s = "_title_16an3_65", c = "_close_16an3_72", l = "_body_16an3_97", u = "_footer_16an3_105", d = {
+	mask: e,
+	"stitch-drawer-fade-in": "_stitch-drawer-fade-in_16an3_1",
+	panel: t,
+	panelRight: n,
+	"stitch-drawer-slide-right": "_stitch-drawer-slide-right_16an3_1",
+	panelLeft: r,
+	"stitch-drawer-slide-left": "_stitch-drawer-slide-left_16an3_1",
+	panelTop: i,
+	"stitch-drawer-slide-top": "_stitch-drawer-slide-top_16an3_1",
+	panelBottom: a,
+	"stitch-drawer-slide-bottom": "_stitch-drawer-slide-bottom_16an3_1",
+	header: o,
+	title: s,
+	close: c,
+	body: l,
+	footer: u
+};
+//#endregion
+export { l as body, c as close, d as default, u as footer, o as header, e as mask, t as panel, a as panelBottom, r as panelLeft, n as panelRight, i as panelTop, s as title };

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

@@ -0,0 +1,2 @@
+export { Drawer } from './Drawer';
+export type { DrawerProps, DrawerPlacement } from './Drawer';

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { type IconName } from '../Icon';
+/**
+ * 动作菜单里的一项。
+ */
+export interface DropdownMenuItem {
+    /** 菜单项文字 */
+    label: React.ReactNode;
+    /** 选中该项时触发（底层 `onSelect` → 我们的 `onClick`）；有 `children` 的父项忽略此项 */
+    onClick?: () => void;
+    /** 危险操作（如删除）：文字走 `--stitch-danger`、高亮态软底 `--stitch-danger-bg` */
+    danger?: boolean;
+    /** 禁用该项（不可选、灰显；键盘导航跳过——由底层保证） */
+    disabled?: boolean;
+    /** 项前图标（必须是 `<Icon>` 支持的名，图标经 `<Icon>` 渲染、不接受裸 svg） */
+    icon?: IconName;
+    /** 子菜单项：非空 → 该项渲染为可展开的子菜单入口（底层 `Sub/SubTrigger/SubContent`） */
+    children?: DropdownMenuItem[];
+}
+/**
+ * 动作菜单（点按钮弹出的一列动作）：`trigger` 触发按钮 + `items` 动作项数组，点项**触发动作、
+ * 无选中态**。受控 `open` / 非受控 `defaultOpen` / `onOpenChange`。内部把 `items` map 成底层
+ * 菜单项；某项 `children` 非空即渲染成可展开的子菜单。
+ *
+ * 跨-prop 注意事项：
+ * - **vs Select**：Select 是**选值**（`role="combobox/listbox"`、有受控 `value`、有选中态）；
+ *   DropdownMenu 是**触发动作**（`role="menu/menuitem"`、无 `value`、无选中态），点项调 `item.onClick`。
+ * - **vs ContextMenu**：同为一列动作，差在触发方式——DropdownMenu 由按钮 click 触发，ContextMenu 由右键触发。
+ * - **items 数组 API**（跟库里 Select / Tabs / Accordion 一致）：`{ label, onClick?, danger?, disabled?,
+ *   icon?, children? }`。底层 `onSelect` 归一成 `onClick`；`icon` 走 `<Icon>`（禁裸 svg）。
+ * - **面 = 浮起层**：菜单面走 `--stitch-bg-elevated` + `--stitch-text-primary`，边 `--stitch-border`、
+ *   圆角 `--stitch-radius-card`、阴影 `--stitch-shadow-base`；开合态 / 高亮态 / 禁用态由底层挂的
+ *   `data-state` / `data-highlighted` / `data-disabled` 描，组件不自持显隐 state。
+ * - **键盘 / 焦点 / ARIA**（方向键走项、Enter 选中、Esc 关、焦点归还、`role="menu"`）由底层保证，
+ *   组件不重复实现；无可见标题时用 `aria-label` 给触发的可及名。
+ */
+export interface DropdownMenuProps {
+    /** 触发器：任意可承载 click 与焦点的元素（如 `<Button>`），菜单锚定其上 */
+    trigger: React.ReactNode;
+    /** 动作项数组（Ant v5 `items` 风格） */
+    items: DropdownMenuItem[];
+    /** 受控显隐 */
+    open?: boolean;
+    /** 非受控初始显隐 @default false */
+    defaultOpen?: boolean;
+    /** 显隐变化回调 */
+    onOpenChange?: (open: boolean) => void;
+    /** 触发器与菜单的间距（px） @default 8 */
+    sideOffset?: number;
+    /** 自定义类名（挂到菜单面上） */
+    className?: string;
+    /** 无可见标题时给触发器的无障碍标签 */
+    'aria-label'?: string;
+}
+export declare const DropdownMenu: React.FC<DropdownMenuProps>;