@octohirono/stitch-design-system 0.2.0 → 0.4.0

package/dist/components/ChatList/chat-list.module.js

@@ -0,0 +1,7 @@
+//#region packages/react/src/components/ChatList/chat-list.module.less
+var e = "_list_1xrm9_1", t = {
+	list: e,
+	"top-loader": "_top-loader_1xrm9_13"
+};
+//#endregion
+export { t as default, e as list };

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

@@ -0,0 +1,2 @@
+export { ChatList } from './ChatList';
+export type { ChatListProps, ChatListItem } from './ChatList';

package/dist/components/ChatMessage/ChatMessage.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+export type ChatMessageVariant = 'sent' | 'received' | 'system';
+export type ChatMessageStatus = 'sent' | 'delivered' | 'read';
+/**
+ * 单条聊天气泡：三态 `variant`（sent 右 / received 左 / system 居中灰条）+ `content`
+ * 消息体（纯文本或 ReactNode）+ `avatar`（复用 `<Avatar>`）+ `time` 时间元信息 +
+ * `status` 已读回执（仅 sent 侧）+ `grouped` 连发分组样式钩子。对外 props 照搬 Ant
+ * Design X `Bubble`（`content`/`variant`/`avatar`），已读回执 `status` 取 Ant 命名惯例。
+ *
+ * 跨-prop 注意事项：
+ * - **`variant` 驱动 placement**：sent 靠右、received 靠左、system 居中——不另立
+ *   `placement` prop（三态已定方位）。system 态无头像、无 status。
+ * - **`content` 优先，`children` 兜底**：两者皆可传消息体，`content` 存在时取 `content`。
+ * - **纯 emoji 自动大图无气泡**：`content`（或 `children`）为纯 emoji 字符串（≤3 个、无其它
+ *   可见字符）时自动渲成大图、去掉气泡底色与内边距（照即时通讯惯例），不需额外 prop。
+ * - **`status` 仅 sent 侧出现**：sent → 单勾、delivered → 双勾（均 `--stitch-text-muted`）、
+ *   read → 双勾 `--stitch-info`；勾走 `<Icon name="check">`（禁 emoji / Unicode `✓` / 裸
+ *   svg），回执整体挂 `role="img"` + 可访问名（已发送 / 已送达 / 已读），内层 Icon 纯装饰。
+ * - **`grouped` 只出样式钩子**：为真时隐藏头像、收紧下间距（相邻同 variant 连发），由上层
+ *   编排决定何时置真，组件本身不判断相邻。头像列占位随「该条是否带 `avatar`」：带头像的续条
+ *   （grouped 隐藏头像但保留列，同串气泡左缘对齐成一列，群聊）；无头像的消息不占列、气泡贴边
+ *   （1:1 私聊首尾条都无头像 → 整串贴边对齐）。要对齐成列 = 给每条都灌头像（列表走 `roles` /
+ *   每项 `avatar`），不靠「续条自动占空列」。
+ */
+export interface ChatMessageProps {
+    /**
+     * 气泡三态：sent（本方，右）/ received（对方，左）/ system（系统居中灰条）
+     * @default 'received'
+     */
+    variant?: ChatMessageVariant;
+    /** 消息内容（纯文本或 ReactNode）；纯 emoji 字符串自动大图无气泡。与 children 二选一（优先 content） */
+    content?: React.ReactNode;
+    /** 消息内容（content 的兜底写法） */
+    children?: React.ReactNode;
+    /** 头像（复用 `<Avatar>`）；system 态不显示 */
+    avatar?: React.ReactNode;
+    /** 时间 / 元信息（如发送时间） */
+    time?: React.ReactNode;
+    /** 已读回执：sent 单勾 / delivered 双勾 / read 双勾高亮；仅 sent 侧渲染 */
+    status?: ChatMessageStatus;
+    /**
+     * 连发分组样式钩子：为真时隐藏头像但保留头像列缩进（气泡对齐成列）、收紧下间距
+     * （相邻同 variant 时由上层置真）
+     * @default false
+     */
+    grouped?: boolean;
+    /** 自定义类名（挂到根容器） */
+    className?: string;
+    /** 行内样式（挂到根容器） */
+    style?: React.CSSProperties;
+}
+export declare const ChatMessage: React.FC<ChatMessageProps>;

package/dist/components/ChatMessage/ChatMessage.js

@@ -0,0 +1,71 @@
+import { Icon as e } from "../Icon/Icon.js";
+import t from "./chat-message.module.js";
+import "react";
+import n from "clsx";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region packages/react/src/components/ChatMessage/ChatMessage.tsx
+var o = {
+	sent: "已发送",
+	delivered: "已送达",
+	read: "已读"
+}, s = /(\p{Extended_Pictographic}(️|‍|[\u{1F3FB}-\u{1F3FF}])*)/gu;
+function c(e) {
+	if (typeof e != "string") return !1;
+	let t = e.trim();
+	if (!t) return !1;
+	let n = t.match(s);
+	return n ? t.replace(s, "").trim() === "" && n.length <= 3 : !1;
+}
+var l = ({ variant: s = "received", content: l, children: u, avatar: d, time: f, status: p, grouped: m = !1, className: h, style: g }) => {
+	let _ = l ?? u, v = s === "system", y = !v && c(_), b = n(t.message, t[`variant-${s}`], m && t["is-grouped"], y && t["is-emoji"], h);
+	if (v) return /* @__PURE__ */ a("div", {
+		className: b,
+		style: g,
+		children: [/* @__PURE__ */ i("div", {
+			className: t.system,
+			children: _
+		}), f != null && /* @__PURE__ */ i("div", {
+			className: t.time,
+			children: f
+		})]
+	});
+	let x = s === "sent" && p != null, S = p === "sent" ? 1 : 2, C = d != null, w = f != null || x ? /* @__PURE__ */ a(r, { children: [f != null && /* @__PURE__ */ i("span", {
+		className: t.time,
+		children: f
+	}), x && p != null && /* @__PURE__ */ i("span", {
+		className: n(t.ticks, p === "read" && t["ticks-read"]),
+		role: "img",
+		"aria-label": o[p],
+		children: Array.from({ length: S }).map((n, r) => /* @__PURE__ */ i(e, {
+			name: "check",
+			size: "1em",
+			className: t.tick
+		}, r))
+	})] }) : null;
+	return /* @__PURE__ */ a("div", {
+		className: b,
+		style: g,
+		children: [C && /* @__PURE__ */ i("div", {
+			className: t["avatar-slot"],
+			children: !m && d
+		}), /* @__PURE__ */ i("div", {
+			className: t.body,
+			children: y ? /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("div", {
+				className: t.emoji,
+				children: _
+			}), w && /* @__PURE__ */ i("div", {
+				className: t["meta-below"],
+				children: w
+			})] }) : /* @__PURE__ */ a("div", {
+				className: t.bubble,
+				children: [_, w && /* @__PURE__ */ i("span", {
+					className: t.meta,
+					children: w
+				})]
+			})
+		})]
+	});
+};
+l.displayName = "ChatMessage";
+//#endregion
+export { l as ChatMessage };

package/dist/components/ChatMessage/chat-message.module.js

@@ -0,0 +1,21 @@
+//#region packages/react/src/components/ChatMessage/chat-message.module.less
+var e = "_message_dvybo_1", t = "_body_dvybo_30", n = "_bubble_dvybo_39", r = "_emoji_dvybo_64", i = "_system_dvybo_68", a = "_meta_dvybo_76", o = "_time_dvybo_95", s = "_ticks_dvybo_98", c = "_tick_dvybo_98", l = {
+	message: e,
+	"variant-received": "_variant-received_dvybo_10",
+	"variant-sent": "_variant-sent_dvybo_14",
+	"variant-system": "_variant-system_dvybo_18",
+	"avatar-slot": "_avatar-slot_dvybo_24",
+	body: t,
+	bubble: n,
+	emoji: r,
+	system: i,
+	meta: a,
+	"meta-below": "_meta-below_dvybo_77",
+	time: o,
+	ticks: s,
+	tick: c,
+	"ticks-read": "_ticks-read_dvybo_106",
+	"is-grouped": "_is-grouped_dvybo_109"
+};
+//#endregion
+export { t as body, n as bubble, l as default, r as emoji, e as message, a as meta, i as system, c as tick, s as ticks, o as time };

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

@@ -0,0 +1,2 @@
+export { ChatMessage } from './ChatMessage';
+export type { ChatMessageProps, ChatMessageVariant, ChatMessageStatus, } from './ChatMessage';

package/dist/components/ChatMessageActions/ChatMessageActions.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { type DropdownMenuItem } from '../DropdownMenu';
+/**
+ * 一条消息操作项。结构与 `DropdownMenuItem` / `ContextMenuItem` 完全一致（同一心智，
+ * 同 Ant v5 `items` 形态），因为它原样喂给这两个复用件。
+ */
+export type ChatMessageAction = DropdownMenuItem;
+/**
+ * 消息操作菜单：把一条消息（`children`，通常是 `<ChatMessage>`）包成「右键 / 长按出操作」。
+ * 本组件只出**触发 + 菜单壳**——动作项（回复 / 撤回 / 转发…）与回调全由 app 经 `actions` 传入。
+ * 不另造浮层：**指针路**用 `ContextMenu`——桌面右键、触屏长按目标区弹出（即时通讯惯例，无常驻按钮）；
+ * **键盘路**用 `DropdownMenu`——尾角触发钮仅在键盘聚焦时显形、Enter 打开。两路喂同一份 `actions`。
+ *
+ * 跨-prop 注意事项：
+ * - **两路触发、一份动作**：`actions` 同时喂给 `ContextMenu`（右键 / 长按，指针主入口）与
+ *   `DropdownMenu`（键盘聚焦露钮点开）；app 只需配一份。每项 `{ label, icon?, onClick?, danger?,
+ *   disabled?, children? }` 取 Ant v5 `items` 惯例，点项触发 `item.onClick`（动作语义、无选中态）。
+ * - **组件只出壳**：不持菜单开合 state、不判相邻、不接业务——回调交 app（`actions[].onClick`）；
+ *   图标走 `<Icon>`（项 `icon` 由底层复用件经 `<Icon>` 渲染，禁裸 svg / emoji / Unicode 符号）。
+ * - **无常驻 hover 按钮**：指针用户走右键 / 长按，尾角触发钮**只在键盘聚焦（`:focus-visible`）**时显形、
+ *   不随 hover 出现（避免气泡上常驻钮），仅为保证键盘可达；无可见文字 → 走 `triggerLabel` 给可及名
+ *   （默认「消息操作」）。
+ * - **键盘 / 焦点 / ARIA**（方向键走项、Enter 选中、Esc 关、焦点归还、`role="menu"`）由复用件
+ *   （ContextMenu / DropdownMenu → 底层）保证，本组件不重复实现。
+ */
+export interface ChatMessageActionsProps {
+    /** 被包裹的消息（通常是 `<ChatMessage>`）：hover / 长按此区出操作入口 */
+    children: React.ReactNode;
+    /** 动作项数组（Ant v5 `items` 风格，原样喂给 DropdownMenu / ContextMenu） */
+    actions: ChatMessageAction[];
+    /** 触发钮的无障碍标签（无可见文字时的可及名） @default '消息操作' */
+    triggerLabel?: string;
+    /** 菜单显隐变化回调（两路共用） */
+    onOpenChange?: (open: boolean) => void;
+    /** 自定义类名（挂到根容器） */
+    className?: string;
+    /** 行内样式（挂到根容器） */
+    style?: React.CSSProperties;
+}
+export declare const ChatMessageActions: React.FC<ChatMessageActionsProps>;

package/dist/components/ChatMessageActions/ChatMessageActions.js

@@ -0,0 +1,34 @@
+import { Icon as e } from "../Icon/Icon.js";
+import { DropdownMenu as t } from "../DropdownMenu/DropdownMenu.js";
+import { ContextMenu as n } from "../ContextMenu/ContextMenu.js";
+import r from "./chat-message-actions.module.js";
+import "react";
+import i from "clsx";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region packages/react/src/components/ChatMessageActions/ChatMessageActions.tsx
+var s = ({ children: s, actions: c, triggerLabel: l = "消息操作", onOpenChange: u, className: d, style: f }) => /* @__PURE__ */ a(n, {
+	items: c,
+	onOpenChange: u,
+	children: /* @__PURE__ */ o("div", {
+		className: i(r.wrap, d),
+		style: f,
+		children: [s, /* @__PURE__ */ a(t, {
+			items: c,
+			onOpenChange: u,
+			"aria-label": l,
+			trigger: /* @__PURE__ */ a("button", {
+				type: "button",
+				className: r.trigger,
+				"aria-label": l,
+				children: /* @__PURE__ */ a(e, {
+					name: "chevron-down",
+					size: "1em",
+					"aria-hidden": !0
+				})
+			})
+		})]
+	})
+});
+s.displayName = "ChatMessageActions";
+//#endregion
+export { s as ChatMessageActions };

package/dist/components/ChatMessageActions/chat-message-actions.module.js

@@ -0,0 +1,7 @@
+//#region packages/react/src/components/ChatMessageActions/chat-message-actions.module.less
+var e = "_wrap_9echt_1", t = "_trigger_9echt_5", n = {
+	wrap: e,
+	trigger: t
+};
+//#endregion
+export { n as default, t as trigger, e as wrap };

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

@@ -0,0 +1,2 @@
+export { ChatMessageActions } from './ChatMessageActions';
+export type { ChatMessageActionsProps, ChatMessageAction, } from './ChatMessageActions';

package/dist/components/ChatVoice/ChatVoice.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+/**
+ * 语音消息（手绘静态波形）：播放按钮（`<Button>` + `<Icon play/pause>`）+ 一排高低不等的
+ * 波形小条 + 时长；作为 `<ChatMessage>` 的 `content` 塞入（sent / received 两侧皆可）。
+ * 组件**不解码音频**——波形振幅数组 `waveform` 由 app 传入。无 Ant 对应件 → 播放态取
+ * Ant v5 `open` / `onOpenChange` 惯例（`playing` / `onPlayingChange`）、播放进度取 Ant
+ * `percent` 惯例，均不自创。
+ *
+ * 跨-prop 注意事项：
+ * - **波形柱是角色变量小元素、非内联 `<svg>`**：每根柱一个 `<div>`，高度按 `waveform` 振幅
+ *   （`0…1`）由内联 `height` 百分比驱动（几何数据、非颜色）；颜色只走角色变量类——已播段
+ *   `--stitch-accent`、未播段 `--stitch-border`，切站换肤跟随。
+ * - **`percent` 划已播 / 未播**：`0…100`，按柱序比例染色（前 `percent%` 的柱 = 已播 accent）。
+ * - **`playing` 切图标、`onPlayingChange` 交 app**：受控播放态（app 翻转 `playing`）；播放按钮
+ *   带可访问名（播放语音 / 暂停语音），波形本体装饰性 `aria-hidden`。
+ */
+export interface ChatVoiceProps {
+    /** 波形振幅数组（`0…1`，由 app 传入；组件不解码音频） */
+    waveform: number[];
+    /** 时长文本（如 `0:12`） */
+    duration?: React.ReactNode;
+    /**
+     * 已播进度（`0…100`）：前 `percent%` 的波形柱染为已播色（accent）
+     * @default 0
+     */
+    percent?: number;
+    /**
+     * 是否播放中：切换播放 / 暂停图标
+     * @default false
+     */
+    playing?: boolean;
+    /** 点击播放按钮的回调（播放 / 暂停交 app） */
+    onPlayingChange?: (playing: boolean) => void;
+    /** 自定义类名（挂到根容器） */
+    className?: string;
+    /** 行内样式（挂到根容器） */
+    style?: React.CSSProperties;
+}
+export declare const ChatVoice: React.FC<ChatVoiceProps>;

package/dist/components/ChatVoice/ChatVoice.js

@@ -0,0 +1,44 @@
+import { Button as e } from "../Button/Button.js";
+import { Icon as t } from "../Icon/Icon.js";
+import n from "./chat-voice.module.js";
+import "react";
+import r from "clsx";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region packages/react/src/components/ChatVoice/ChatVoice.tsx
+var o = ({ waveform: o, duration: s, percent: c = 0, playing: l = !1, onPlayingChange: u, className: d, style: f }) => {
+	let p = o.length, m = Math.round(Math.min(100, Math.max(0, c)) / 100 * p);
+	return /* @__PURE__ */ a("div", {
+		className: r(n.voice, d),
+		style: f,
+		children: [
+			/* @__PURE__ */ i(e, {
+				type: "primary",
+				className: n.play,
+				onClick: () => u?.(!l),
+				"aria-label": l ? "暂停语音" : "播放语音",
+				icon: /* @__PURE__ */ i(t, {
+					name: l ? "pause" : "play",
+					size: "1.125em"
+				})
+			}),
+			/* @__PURE__ */ i("div", {
+				className: n.wave,
+				"aria-hidden": "true",
+				children: o.map((e, t) => {
+					let a = Math.max(.15, Math.min(1, e)) * 100;
+					return /* @__PURE__ */ i("div", {
+						className: r(n.bar, t < m ? n["bar-played"] : n["bar-idle"]),
+						style: { height: `${a}%` }
+					}, t);
+				})
+			}),
+			s != null && /* @__PURE__ */ i("span", {
+				className: n.duration,
+				children: s
+			})
+		]
+	});
+};
+o.displayName = "ChatVoice";
+//#endregion
+export { o as ChatVoice };

package/dist/components/ChatVoice/chat-voice.module.js

@@ -0,0 +1,12 @@
+//#region packages/react/src/components/ChatVoice/chat-voice.module.less
+var e = "_voice_16mxc_1", t = "_play_16mxc_7", n = "_wave_16mxc_14", r = "_bar_16mxc_22", i = "_duration_16mxc_34", a = {
+	voice: e,
+	play: t,
+	wave: n,
+	bar: r,
+	"bar-played": "_bar-played_16mxc_28",
+	"bar-idle": "_bar-idle_16mxc_31",
+	duration: i
+};
+//#endregion
+export { r as bar, a as default, i as duration, t as play, e as voice, n as wave };

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

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

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

@@ -1,5 +1,5 @@
 //#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 = {
+var e = "_collapse_1t4ba_1", t = "_disabled_1t4ba_11", n = "_header_1t4ba_14", r = "_indicator_1t4ba_34", i = "_expanded_1t4ba_40", a = "_text_1t4ba_43", o = "_panel_1t4ba_50", s = "_content_1t4ba_58", c = {
 	collapse: e,
 	disabled: t,
 	header: n,

package/dist/components/ContextMenu/ContextMenu.js

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

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

@@ -1,13 +1,14 @@
 //#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 = {
+var e = "_content_1dpag_1", t = "_scroll_1dpag_21", n = "_item_1dpag_27", r = "_danger_1dpag_47", i = "_itemIcon_1dpag_54", a = "_itemLabel_1dpag_58", o = "_subArrow_1dpag_61", s = {
 	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
+	"stitch-context-menu-in": "_stitch-context-menu-in_1dpag_1",
+	"stitch-context-menu-out": "_stitch-context-menu-out_1dpag_1",
+	scroll: t,
+	item: n,
+	danger: r,
+	itemIcon: i,
+	itemLabel: a,
+	subArrow: o
 };
 //#endregion
-export { e as content, n as danger, o as default, t as item, r as itemIcon, i as itemLabel, a as subArrow };
+export { e as content, r as danger, s as default, n as item, i as itemIcon, a as itemLabel, t as scroll, o as subArrow };

package/dist/components/DropdownMenu/DropdownMenu.js

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

package/dist/components/DropdownMenu/dropdown-menu.module.js

@@ -1,13 +1,14 @@
 //#region packages/react/src/components/DropdownMenu/dropdown-menu.module.less
-var e = "_content_5l6nu_1", t = "_item_5l6nu_21", n = "_danger_5l6nu_41", r = "_itemIcon_5l6nu_48", i = "_itemLabel_5l6nu_52", a = "_subArrow_5l6nu_55", o = {
+var e = "_content_6jxoc_1", t = "_scroll_6jxoc_21", n = "_item_6jxoc_27", r = "_danger_6jxoc_47", i = "_itemIcon_6jxoc_54", a = "_itemLabel_6jxoc_58", o = "_subArrow_6jxoc_61", s = {
 	content: e,
-	"stitch-dropdown-in": "_stitch-dropdown-in_5l6nu_1",
-	"stitch-dropdown-out": "_stitch-dropdown-out_5l6nu_1",
-	item: t,
-	danger: n,
-	itemIcon: r,
-	itemLabel: i,
-	subArrow: a
+	"stitch-dropdown-in": "_stitch-dropdown-in_6jxoc_1",
+	"stitch-dropdown-out": "_stitch-dropdown-out_6jxoc_1",
+	scroll: t,
+	item: n,
+	danger: r,
+	itemIcon: i,
+	itemLabel: a,
+	subArrow: o
 };
 //#endregion
-export { e as content, n as danger, o as default, t as item, r as itemIcon, i as itemLabel, a as subArrow };
+export { e as content, r as danger, s as default, n as item, i as itemIcon, a as itemLabel, t as scroll, o as subArrow };

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

@@ -23,6 +23,11 @@ declare const ICON_PATHS: {
     readonly 'align-right': readonly ["M4 6h16", "M10 12h10", "M7 18h13"];
     readonly 'arrow-up-right': readonly ["M7 17L17 7", "M8 7h9v9"];
     readonly 'arrow-down-right': readonly ["M7 7L17 17", "M17 8v9H8"];
+    readonly send: readonly ["M22 2L11 13", "M22 2L15 22 11 13 2 9z"];
+    readonly play: readonly ["M8 5v14l11-7z"];
+    readonly pause: readonly ["M8 5h3v14H8z", "M13 5h3v14h-3z"];
+    readonly file: readonly ["M13 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9z", "M13 3v6h6"];
+    readonly download: readonly ["M12 4v11", "M8 11l4 4 4-4", "M5 20h14"];
 };
 export type IconName = keyof typeof ICON_PATHS;
 /**
@@ -112,5 +117,20 @@ export declare const ICON_LIST: readonly [{
 }, {
     readonly name: 'arrow-down-right';
     readonly label: 'Trend down';
+}, {
+    readonly name: 'send';
+    readonly label: 'Send';
+}, {
+    readonly name: 'play';
+    readonly label: 'Play';
+}, {
+    readonly name: 'pause';
+    readonly label: 'Pause';
+}, {
+    readonly name: 'file';
+    readonly label: 'File';
+}, {
+    readonly name: 'download';
+    readonly label: 'Download';
 }];
 export {};