@octohirono/stitch-design-system 0.1.0

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,68 @@
+import e from "./tabs.module.js";
+import { useCallback as t, useId as n, useRef 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/Tabs/Tabs.tsx
+var c = ({ items: c, defaultActiveKey: l, activeKey: u, onChange: d, className: f, "aria-label": p, ...m }) => {
+	let [h, g] = i(l ?? c[0]?.key), _ = u !== void 0, v = _ ? u : h, y = `stitch-tabs-${n().replace(/:/g, "")}`, b = (e) => `${y}-tab-${e}`, x = (e) => `${y}-panel-${e}`, S = r(/* @__PURE__ */ new Map()), C = t((e) => {
+		_ || g(e), d?.(e);
+	}, [_, d]), w = t((e) => {
+		let { key: t } = e;
+		if (t !== "ArrowRight" && t !== "ArrowLeft" && t !== "Home" && t !== "End") return;
+		e.preventDefault();
+		let n = c.findIndex((e) => e.key === v);
+		if (n < 0) return;
+		let r = n;
+		t === "ArrowRight" ? r = (n + 1) % c.length : t === "ArrowLeft" ? r = (n - 1 + c.length) % c.length : t === "Home" ? r = 0 : t === "End" && (r = c.length - 1);
+		let i = c[r].key;
+		C(i), S.current.get(i)?.focus();
+	}, [
+		c,
+		v,
+		C
+	]), T = c.find((e) => e.key === v);
+	return /* @__PURE__ */ s("div", {
+		className: a(e.tabs, f),
+		...m,
+		children: [/* @__PURE__ */ o("div", {
+			className: e.tabList,
+			role: "tablist",
+			"aria-label": p,
+			"aria-orientation": "horizontal",
+			onKeyDown: w,
+			children: c.map((t) => {
+				let n = t.key === v;
+				return /* @__PURE__ */ o("button", {
+					ref: (e) => {
+						e ? S.current.set(t.key, e) : S.current.delete(t.key);
+					},
+					id: b(t.key),
+					type: "button",
+					role: "tab",
+					"aria-selected": n,
+					"aria-controls": x(t.key),
+					tabIndex: n ? 0 : -1,
+					className: a(e.tabItem, n && e.active),
+					onClick: () => C(t.key),
+					children: /* @__PURE__ */ o("span", {
+						className: e.tabLabel,
+						children: t.label
+					})
+				}, t.key);
+			})
+		}), /* @__PURE__ */ o("div", {
+			className: e.tabContent,
+			role: "tabpanel",
+			id: T ? x(T.key) : void 0,
+			"aria-labelledby": T ? b(T.key) : void 0,
+			tabIndex: 0,
+			children: /* @__PURE__ */ o("div", {
+				className: e.tabContentInner,
+				children: T?.children
+			}, T?.key)
+		})]
+	});
+};
+c.displayName = "Tabs";
+//#endregion
+export { c as Tabs };

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

@@ -0,0 +1,2 @@
+export { Tabs } from './Tabs';
+export type { TabsProps, TabItem } from './Tabs';

package/dist/components/Tabs/tabs.module.js

@@ -0,0 +1,13 @@
+//#region packages/react/src/components/Tabs/tabs.module.less
+var e = "_tabs_oy7wm_1", t = "_tabList_oy7wm_9", n = "_tabItem_oy7wm_16", r = "_active_oy7wm_30", i = "_tabLabel_oy7wm_44", a = "_tabContent_oy7wm_48", o = "_tabContentInner_oy7wm_55", s = "_fadeIn_oy7wm_1", c = {
+	tabs: e,
+	tabList: t,
+	tabItem: n,
+	active: r,
+	tabLabel: i,
+	tabContent: a,
+	tabContentInner: o,
+	fadeIn: s
+};
+//#endregion
+export { r as active, c as default, s as fadeIn, a as tabContent, o as tabContentInner, n as tabItem, i as tabLabel, t as tabList, e as tabs };

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,67 @@
+import React from 'react';
+export type TagSize = 'small' | 'middle' | 'large';
+export type TagVariant = 'solid' | 'outlined' | 'dashed' | 'soft' | 'text';
+/**
+ * 颜色 = 语义状态 + 抽象分类槽（非「长相制」）：
+ * - 语义：`default`（中性）/ `danger` / `success` / `warning` / `info`，走状态角色变量；
+ * - 分类：`cat-1…cat-6`，走契约的分类色槽 `--stitch-cat-*`，只为「互相区分」而非表状态。
+ */
+export type TagColor = 'default' | 'danger' | 'success' | 'warning' | 'info' | 'cat-1' | 'cat-2' | 'cat-3' | 'cat-4' | 'cat-5' | 'cat-6';
+/**
+ * 标签 / 徽章（Ant `Tag` 语义）：`children` 内容 + `size` + `variant` + `color` +
+ * `closable`/`onClose` + `onClick`（可点击）+ `disabled`。`variant` 有
+ * `solid`/`outlined`/`dashed`/`soft`/`text` 五档（`text` = 无底无框 ghost 排版标签），与
+ * `color` 正交。
+ *
+ * 跨-prop 注意事项：
+ * - **文字色与身份色分离，保证可读（关键）**：文字**绝不**直接用身份色——分类槽
+ *   `--stitch-cat-*` 各主题可能填浅色，浅色当文字必失对比。故语义色文字 = 身份色混黑、分类色
+ *   文字 = 身份色混 `--stitch-text-primary`（兜底墨色 + 一丝色相），任意浅色都拉到可读 ≥AA；
+ *   身份色只用于描边 + soft/solid 底的淡色派生。`solid` = 「亮填充 + 深字」（非饱和填充白字），
+ *   soft 比 solid 更淡，两档拉开强弱层级。
+ * - **可点击**：给 `onClick` → `role="button"` + `tabIndex=0` + 键盘 Enter/Space 触发
+ *   （`:focus-visible` 焦点环走 `--stitch-focus-ring`）；关闭按钮 `stopPropagation` 防冒泡到
+ *   `onClick`。
+ * - **关闭图标走 `<Icon name="close">`**（`size="1em"` 跟随字号），非 emoji / Unicode `×` /
+ *   裸 `<svg>`；关闭按钮自带 `aria-label="close"`，内层 Icon 无 label → `aria-hidden`。
+ * - **无固定高度**：`inline-flex` + 纵向 padding + `line-height:1`，高度随字号自然生成；不套
+ *   `--stitch-height-*`（那是表单控件对齐用）。
+ */
+export interface TagProps {
+    /** 标签内容 */
+    children?: React.ReactNode;
+    /**
+     * 尺寸
+     * @default 'middle'
+     */
+    size?: TagSize;
+    /**
+     * 风格变体：solid 填充、outlined 描边、dashed 虚线、soft 软底、text 无底无框（ghost 排版标签）
+     * @default 'soft'
+     */
+    variant?: TagVariant;
+    /**
+     * 颜色（语义状态 + 分类槽）
+     * @default 'default'
+     */
+    color?: TagColor;
+    /**
+     * 是否可关闭（渲染关闭按钮）
+     * @default false
+     */
+    closable?: boolean;
+    /** 关闭回调 */
+    onClose?: (e: React.MouseEvent<HTMLElement>) => void;
+    /** 点击回调，开启后标签渲染为可点击（role=button + 键盘可达） */
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * 禁用状态
+     * @default false
+     */
+    disabled?: boolean;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const Tag: React.FC<TagProps>;

package/dist/components/Tag/Tag.js

@@ -0,0 +1,54 @@
+import { Icon as e } from "../Icon/Icon.js";
+import t from "./tag.module.js";
+import { useCallback as n } from "react";
+import r from "clsx";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region packages/react/src/components/Tag/Tag.tsx
+var s = {
+	small: t["size-small"],
+	middle: t["size-middle"],
+	large: t["size-large"]
+}, c = {
+	solid: t["variant-solid"],
+	outlined: t["variant-outlined"],
+	dashed: t["variant-dashed"],
+	soft: t["variant-soft"],
+	text: t["variant-text"]
+}, l = (e) => e === "default" ? "" : t[`color-${e}`], u = ({ children: u, size: d = "middle", variant: f = "soft", color: p = "default", closable: m = !1, onClose: h, onClick: g, disabled: _ = !1, className: v, style: y }) => {
+	let b = n((e) => {
+		e.stopPropagation(), !_ && h?.(e);
+	}, [_, h]), x = n((e) => {
+		_ || g?.(e);
+	}, [_, g]), S = n((e) => {
+		_ || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), g?.(e));
+	}, [_, g]), C = !!g && !_, w = r(t.tag, s[d], c[f], l(p), _ && t["is-disabled"], C && t["is-clickable"], v), T = /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("span", {
+		className: t.text,
+		children: u
+	}), m && /* @__PURE__ */ a("button", {
+		type: "button",
+		className: t.close,
+		"aria-label": "close",
+		onClick: b,
+		disabled: _,
+		children: /* @__PURE__ */ a(e, {
+			name: "close",
+			size: "1em"
+		})
+	})] });
+	return C ? /* @__PURE__ */ a("span", {
+		className: w,
+		style: y,
+		onClick: x,
+		role: "button",
+		tabIndex: 0,
+		onKeyDown: S,
+		children: T
+	}) : /* @__PURE__ */ a("span", {
+		className: w,
+		style: y,
+		children: T
+	});
+};
+u.displayName = "Tag";
+//#endregion
+export { u as Tag };

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

@@ -0,0 +1,2 @@
+export { Tag } from './Tag';
+export type { TagProps, TagSize, TagVariant, TagColor } from './Tag';

package/dist/components/Tag/tag.module.js

@@ -0,0 +1,28 @@
+//#region packages/react/src/components/Tag/tag.module.less
+var e = "_tag_1nt6s_1", t = "_text_1nt6s_119", n = "_close_1nt6s_126", r = {
+	tag: e,
+	"size-small": "_size-small_1nt6s_19",
+	"size-middle": "_size-middle_1nt6s_23",
+	"size-large": "_size-large_1nt6s_27",
+	"variant-solid": "_variant-solid_1nt6s_31",
+	"variant-outlined": "_variant-outlined_1nt6s_36",
+	"variant-dashed": "_variant-dashed_1nt6s_41",
+	"variant-soft": "_variant-soft_1nt6s_47",
+	"variant-text": "_variant-text_1nt6s_52",
+	"color-danger": "_color-danger_1nt6s_59",
+	"color-success": "_color-success_1nt6s_65",
+	"color-warning": "_color-warning_1nt6s_71",
+	"color-info": "_color-info_1nt6s_77",
+	"color-cat-1": "_color-cat-1_1nt6s_83",
+	"color-cat-2": "_color-cat-2_1nt6s_89",
+	"color-cat-3": "_color-cat-3_1nt6s_95",
+	"color-cat-4": "_color-cat-4_1nt6s_101",
+	"color-cat-5": "_color-cat-5_1nt6s_107",
+	"color-cat-6": "_color-cat-6_1nt6s_113",
+	text: t,
+	close: n,
+	"is-clickable": "_is-clickable_1nt6s_153",
+	"is-disabled": "_is-disabled_1nt6s_167"
+};
+//#endregion
+export { n as close, r as default, e as tag, t as text };

package/dist/components/Toggle/Toggle.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { type ButtonProps } from '../Button';
+/**
+ * 两态按钮（toggle）：在底件 `Button` 之上只加「按下态」那一层——底 `<button>` / 尺寸 / 图标插槽 /
+ * `type`·`danger`·`ghost`·`block` 皮全复用 `Button`（不重写）。相对普通 `Button` 补两点：
+ *
+ * - 内部持 `pressed` 态（**受控/非受控双模式**：`pressed` / `defaultPressed` / `onPressedChange`）；
+ *   渲染 `aria-pressed={pressed}` + 按下选中样式（accent 填充，与 Switch/Checkbox/Radio 选中同源），
+ *   点击翻转。底件是原生 `<button>`，Space/Enter 天然触发翻转，无需额外键处理。
+ *
+ * 与已有 `Switch` 的边界（**别混用**）：
+ * - **`Switch`**（`role="switch"` + `aria-checked`）= 改「设置 / 状态」的开关（如「深色模式 开/关」「通知 开/关」）——
+ *   语义是「打开或关闭某项功能」，通常带 on/off 视觉隐喻（轨 + 滑块）。
+ * - **`Toggle`**（两态按钮 + `aria-pressed`）= 工具栏里「可按住的操作按钮」（如富文本的 加粗 / 斜体，
+ *   或视图切换按钮）——语义是「这个动作当前处于激活/按下」，长得就是个高亮起来的按钮。
+ *   要「一组互斥」（如对齐 左/中/右）属 `toggle-group`，不在本件范围。
+ *
+ * 跨-prop 注意事项：
+ * - **受控/非受控双模式**：给 `pressed` 由父管、组件不自持；只给 `defaultPressed` 则组件自管。
+ *   两种模式下点击都会回调 `onPressedChange(next)`。
+ * - **透传底件 `Button`**：`type` / `size` / `danger` / `ghost` / `block` / `icon` / `disabled` /
+ *   原生 `<button>` 属性（`onClick` 等）全部透传（`onClick` 会在翻转前先被调用）。默认 `type` 沿用
+ *   Button 的 `'default'`（有边框）；工具栏场景可传 `type="text"` 取更安静的底。
+ * - **按下选中样式只读 `var(--stitch-accent*)`**——每站个性由 adapter 灌值，组件不硬编码 hex/圆角/字体。
+ * - **Accessibility**：纯图标 Toggle 请传 `aria-label`；图标一律走 `<Icon>`，**Do NOT** 传
+ *   emoji / Unicode 符号 / 裸 `<svg>`。
+ */
+export interface ToggleProps extends ButtonProps {
+    /** 是否按下（受控） */
+    pressed?: boolean;
+    /**
+     * 默认是否按下（非受控）
+     * @default false
+     */
+    defaultPressed?: boolean;
+    /** 按下态变化回调 */
+    onPressedChange?: (pressed: boolean) => void;
+}
+export declare const Toggle: React.FC<ToggleProps>;

package/dist/components/Toggle/Toggle.js

@@ -0,0 +1,29 @@
+import { Button as e } from "../Button/Button.js";
+import t from "./toggle.module.js";
+import { useCallback as n, useState as r } from "react";
+import i from "clsx";
+import { jsx as a } from "react/jsx-runtime";
+//#region packages/react/src/components/Toggle/Toggle.tsx
+var o = ({ pressed: o, defaultPressed: s = !1, onPressedChange: c, disabled: l = !1, onClick: u, className: d, ...f }) => {
+	let [p, m] = r(s), h = o !== void 0, g = h ? o : p, _ = n((e) => {
+		if (u?.(e), l) return;
+		let t = !g;
+		h || m(t), c?.(t);
+	}, [
+		u,
+		l,
+		g,
+		h,
+		c
+	]);
+	return /* @__PURE__ */ a(e, {
+		...f,
+		disabled: l,
+		"aria-pressed": g,
+		onClick: _,
+		className: i(t.toggle, g && t.pressed, d)
+	});
+};
+o.displayName = "Toggle";
+//#endregion
+export { o as Toggle };

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

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

package/dist/components/Toggle/toggle.module.js

@@ -0,0 +1,7 @@
+//#region packages/react/src/components/Toggle/toggle.module.less
+var e = "_toggle_prlua_1", t = "_pressed_prlua_1", n = {
+	toggle: e,
+	pressed: t
+};
+//#endregion
+export { n as default, t as pressed, e as toggle };

package/dist/components/ToggleGroup/ToggleGroup.d.ts

@@ -0,0 +1,88 @@
+import React from 'react';
+import { type IconName } from '../Icon';
+/** 分段组里的一项 */
+export interface ToggleGroupItem {
+    /** 该项的值（组内唯一） */
+    value: string;
+    /** 文本标签（纯图标项可省，此时以 value 作可访问名） */
+    label?: React.ReactNode;
+    /** 图标（走 <Icon>，禁裸 svg / emoji） */
+    icon?: IconName;
+    /** 单独禁用该项 */
+    disabled?: boolean;
+}
+/**
+ * 分段切换组（toolbar segmented control）：一排相邻拼接的两态按钮，`single` 单选
+ * （如文本对齐 左/中/右）或 `multiple` 多选（如富文本 加粗/斜体/下划线）。组合
+ * Radix `ToggleGroup.Root/Item`，每项按下态用 Radix `data-state`（`on`/`off`）——
+ * 按下选中皮 = **软 accent 底**（`--stitch-bg-accent` + `--stitch-text-on-accent`，与
+ * `Toolbar` 内分段选中态同源，紧凑小圆角）；**不**走 CTA 填充青，也**不**走 ink 重填充
+ * （那是胶囊 Tab 的语言、归 `Tabs`）——同一个分段开关独立用或嵌进 `Toolbar` 都长一样。
+ *
+ * 精确 props 分 `type` 两支：单选见 `ToggleGroupSingleProps`（值为**标量**），多选见
+ * `ToggleGroupMultipleProps`（值为**数组**）；本接口是两支共有的基座（`items` / `disabled`
+ * / 命名 / 样式）。
+ *
+ * ARIA（Radix 按 `type` 自动挂，非本层控制）：`single` → 根 `role="radiogroup"` + 项
+ * `role="radio"`（`aria-checked`）；`multiple` → 根 `role="toolbar"` + 项为普通 `<button>`
+ * （`aria-pressed`）。
+ *
+ * 与相邻件的边界（**别混用**）：
+ * - **vs Toggle**——那是**单个**两态按钮；ToggleGroup 是**一组**拼接的分段。
+ * - **vs Radio**——两者单选态 ARIA 同为 radiogroup/radio，但 **Radio 是表单控件**（真
+ *   `<input type=radio>` + `name`、随表单提交、纵向选项列表）；ToggleGroup 是**工具栏视觉分段**
+ *   （一排 `<button>` 拼接、表达「当前视图 / 格式激活哪几段」），**不进表单、不提交**。选表单字段用
+ *   Radio，选工具栏分段用 ToggleGroup。
+ * - **vs Tabs**——Tabs 切换页内**面板内容**、长相是**胶囊 Tab（ink 药丸）**；ToggleGroup 不关联
+ *   面板、只表达选中态，长相是**紧凑分段开关（软 accent 底）**。要「一排药丸切视图/切页」用 Tabs，
+ *   要「一簇格式/对齐开关」用 ToggleGroup。
+ * - **vs Toolbar**——Toolbar 是**容器**（一整条工具条，混排按钮/链接/分隔/分段）；ToggleGroup 是
+ *   **一簇分段控件**，可独立用、也可作为 `Toolbar.ToggleGroup` 嵌进 Toolbar。两处选中皮一致。
+ *
+ * 跨-prop 注意事项：
+ * - **值按 `type` 归一**：`type="single"` 时 `value`/`defaultValue`/`onChange` 全走**标量**
+ *   （取消选中回 `''`）；`type="multiple"` 时全走**数组**。底层 Radix `onValueChange` 已按
+ *   `type` 回对应形状，本层直接映射成我们的 `onChange`。
+ * - **受控/非受控双模式**：给 `value` 由父管、只给 `defaultValue` 组件自管（透传底层，
+ *   不自持 state）。
+ * - **按下选中皮只读 `var(--stitch-bg-accent)` / `var(--stitch-text-on-accent)`**——每站个性由
+ *   adapter 灌值，组件不硬编码 hex / 圆角 / 字体。
+ * - **Accessibility**：整组传 `aria-label` / `aria-labelledby` 命名；纯图标项（只给 `icon`
+ *   不给 `label`）自动以 `value` 作可访问名。图标一律走 `<Icon>`，**Do NOT** 传 emoji /
+ *   Unicode 符号 / 裸 `<svg>`。键盘（方向键在项间漫游 + Space/Enter 翻转）/ 焦点 / ARIA 归 Radix。
+ */
+export interface ToggleGroupProps {
+    /** 一排分段项 */
+    items: ToggleGroupItem[];
+    /** 禁用整组 */
+    disabled?: boolean;
+    /** 自定义类名（挂到根上） */
+    className?: string;
+    /** 自定义样式（挂根） */
+    style?: React.CSSProperties;
+    /** 整组可访问名 */
+    'aria-label'?: string;
+    /** 整组可访问名（引用其它元素 id） */
+    'aria-labelledby'?: string;
+}
+/** 单选分段：值为**标量**，同一时刻至多一项按下（如对齐 左/中/右） */
+export interface ToggleGroupSingleProps extends ToggleGroupProps {
+    type: 'single';
+    /** 当前按下项的值（受控）；未按下为 `''` */
+    value?: string;
+    /** 默认按下项的值（非受控） */
+    defaultValue?: string;
+    /** 变化回调，回**标量**（取消选中时回 `''`） */
+    onChange?: (value: string) => void;
+}
+/** 多选分段：值为**数组**，可多项同时按下（如 加粗/斜体/下划线） */
+export interface ToggleGroupMultipleProps extends ToggleGroupProps {
+    type: 'multiple';
+    /** 当前按下项的值集合（受控） */
+    value?: string[];
+    /** 默认按下项的值集合（非受控） */
+    defaultValue?: string[];
+    /** 变化回调，回**数组** */
+    onChange?: (value: string[]) => void;
+}
+export declare const ToggleGroup: React.FC<ToggleGroupSingleProps | ToggleGroupMultipleProps>;

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -0,0 +1,42 @@
+import { Icon as e } from "../Icon/Icon.js";
+import t from "./toggle-group.module.js";
+import "react";
+import n from "clsx";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { ToggleGroup as a } from "radix-ui";
+//#region packages/react/src/components/ToggleGroup/ToggleGroup.tsx
+var o = (o) => {
+	let { items: s, disabled: c, className: l, style: u, "aria-label": d, "aria-labelledby": f } = o, p = o.type === "single" ? {
+		type: "single",
+		value: o.value,
+		defaultValue: o.defaultValue,
+		onValueChange: o.onChange
+	} : {
+		type: "multiple",
+		value: o.value,
+		defaultValue: o.defaultValue,
+		onValueChange: o.onChange
+	};
+	return /* @__PURE__ */ r(a.Root, {
+		...p,
+		disabled: c,
+		className: n(t.group, l),
+		style: u,
+		"aria-label": d,
+		"aria-labelledby": f,
+		children: s.map((n) => /* @__PURE__ */ i(a.Item, {
+			value: n.value,
+			disabled: n.disabled,
+			className: t.item,
+			"aria-label": n.label == null ? n.value : void 0,
+			children: [n.icon && /* @__PURE__ */ r(e, {
+				name: n.icon,
+				size: "1em",
+				className: t.itemIcon
+			}), n.label]
+		}, n.value))
+	});
+};
+o.displayName = "ToggleGroup";
+//#endregion
+export { o as ToggleGroup };

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

@@ -0,0 +1,2 @@
+export { ToggleGroup } from './ToggleGroup';
+export type { ToggleGroupProps, ToggleGroupSingleProps, ToggleGroupMultipleProps, ToggleGroupItem, } from './ToggleGroup';

package/dist/components/ToggleGroup/toggle-group.module.js

@@ -0,0 +1,8 @@
+//#region packages/react/src/components/ToggleGroup/toggle-group.module.less
+var e = "_group_iw3i7_1", t = "_item_iw3i7_5", n = "_itemIcon_iw3i7_61", r = {
+	group: e,
+	item: t,
+	itemIcon: n
+};
+//#endregion
+export { r as default, e as group, t as item, n as itemIcon };

package/dist/components/Toolbar/Toolbar.d.ts

@@ -0,0 +1,116 @@
+import React from 'react';
+import { type ToggleGroupItem } from '../ToggleGroup/ToggleGroup';
+/**
+ * 工具栏容器（编排件）：一条横向容器，盛放异构混排的动作控件——按钮 / 链接 / 分隔线 / 分段
+ * 切换组，统一键盘（方向键在控件间 roving）+ 给 `role="toolbar"`。组合 Radix
+ * `Toolbar.Root/Button/Link/Separator/ToggleGroup/ToggleItem`。**唯一走 children + 静态挂载
+ * 子组件**的组件（照 `Form.Item` 先例）：`<Toolbar>` + `Toolbar.Button` / `Toolbar.Link` /
+ * `Toolbar.Separator` / `Toolbar.ToggleGroup`，**不用 `items` 数组**（Radix Toolbar 本身就是
+ * 异构混排、无统一 item 数据模型，数组化会很别扭）。
+ *
+ * 跨-prop 注意事项：
+ * - **vs 单纯并排放 `<Button>`**：Toolbar 多了 `role="toolbar"` + 方向键 roving 键盘编排
+ *   （一次 Tab 进整条栏、方向键在控件间移动，而非每个按钮各占一个 Tab 站）。只想并排几个按钮、
+ *   不需要 roving/`role`，直接并排 `<Button>` 即可；需要工具栏语义与键盘编排才用 Toolbar。
+ * - **工具栏控件 ≠ 独立 `<Button>`（自有安静命令皮，非复用 Button 药丸皮）**：工具栏控件是
+ *   密集条里的紧凑安静控件（透明底 + 中性字 + hover 软底 + **小圆角 `--stitch-radius-input`，非
+ *   药丸**），照 `Menubar` 命令栏按钮先例，**不**套独立 Button/ToggleGroup 的填充药丸皮——否则一排
+ *   药丸看着像并排的独立 CTA、与工具栏认知冲突。`Toolbar.ToggleGroup` 分段选中态走**软 accent 底**
+ *   （`data-state='on'`，同成熟工具栏参照 Radix / Docs 的激活格式钮——软色底 + accent 文字，
+ *   非 Tab-Pill 的 ink 重填充），圆角同样收到 `--stitch-radius-input`。
+ * - **方向由 `orientation`**：默认 `horizontal`（横排）；`vertical` 时容器纵排、分隔线转横发丝线
+ *   （底层在各 part 挂 `[data-orientation]`，皮据此切）。
+ * - **键盘 / 焦点 / ARIA / roving**（Tab 进栏、方向键在控件间移动、`role="toolbar"`）由底层
+ *   Radix 保证，组件不重复实现。
+ */
+export interface ToolbarProps {
+    /** 工具栏内容：混排 `Toolbar.Button` / `Toolbar.Link` / `Toolbar.Separator` / `Toolbar.ToggleGroup` */
+    children?: React.ReactNode;
+    /** 排布方向 @default 'horizontal' */
+    orientation?: 'horizontal' | 'vertical';
+    /** 自定义类名（挂到 `role="toolbar"` 根容器上） */
+    className?: string;
+    /** 自定义样式（挂根） */
+    style?: React.CSSProperties;
+    /** 给工具栏（`role="toolbar"`）的无障碍标签 */
+    'aria-label'?: string;
+    /** 给工具栏的无障碍标签（引用其它元素 id） */
+    'aria-labelledby'?: string;
+}
+/**
+ * 工具栏里的动作按钮：组合 Radix `Toolbar.Button`（roving 项），走**安静命令控件皮**（透明底 +
+ * 中性字 + hover 软底 + 小圆角，照 `Menubar` 命令按钮先例，**非**独立 Button 的填充药丸皮）。
+ * `danger` 危险动作走 `--stitch-danger`；图标一律走 `<Icon>`——**Do NOT** 传 emoji / Unicode
+ * 符号 / 裸 `<svg>`。
+ */
+export interface ToolbarButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** 危险动作样式（文字走 `--stitch-danger`、hover 软底 `--stitch-danger-bg`） @default false */
+    danger?: boolean;
+    /** 图标节点（传入自己的 `<Icon>`；不接受裸 svg） */
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+}
+declare const ToolbarButton: React.FC<ToolbarButtonProps>;
+/**
+ * 工具栏里的文字链接：组合 Radix `Toolbar.Link`（渲染 `<a>`、也是 roving 项），走安静导航
+ * 文字皮（同 NavigationMenu Link）。用于「帮助 / 文档」这类跳转，与触发动作的 `Toolbar.Button` 区分。
+ */
+export interface ToolbarLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    children?: React.ReactNode;
+}
+declare const ToolbarLink: React.FC<ToolbarLinkProps>;
+/**
+ * 工具栏分隔线：组合 Radix `Toolbar.Separator`（`role="separator"`），横排工具栏里渲染成一条
+ * 竖发丝线、把相邻控件分组。
+ */
+export type ToolbarSeparatorProps = React.HTMLAttributes<HTMLDivElement>;
+declare const ToolbarSeparator: React.FC<ToolbarSeparatorProps>;
+/**
+ * 工具栏里的分段切换组：组合 Radix `Toolbar.ToggleGroup`/`Toolbar.ToggleItem`（工具栏内建的
+ * roving 分段），走工具栏安静命令控件皮，选中态（`data-state='on'`）= 软 accent 底 + accent 文字
+ * （同成熟工具栏参照 Radix / Docs 激活格式钮，圆角同样收到 `--stitch-radius-input` 与整条栏协调）。`type` 分单选
+ * （值为标量，如对齐 左/中/右）/ 多选（值为数组，如 加粗/斜体/下划线）；底层 `onValueChange`
+ * 已按 `type` 回对应形状，本层直接映射我们的 `onChange`。
+ */
+interface ToolbarToggleGroupBaseProps {
+    /** 一排分段项（复用 ToggleGroup 的 item 结构：`{ value, label?, icon?, disabled? }`） */
+    items: ToggleGroupItem[];
+    /** 禁用整组 */
+    disabled?: boolean;
+    /** 自定义类名（挂到分段组根上） */
+    className?: string;
+    /** 整组可访问名 */
+    'aria-label'?: string;
+    /** 整组可访问名（引用其它元素 id） */
+    'aria-labelledby'?: string;
+}
+/** 单选分段：值为**标量**，同一时刻至多一项按下 */
+export interface ToolbarToggleGroupSingleProps extends ToolbarToggleGroupBaseProps {
+    type: 'single';
+    /** 当前按下项的值（受控）；未按下为 `''` */
+    value?: string;
+    /** 默认按下项的值（非受控） */
+    defaultValue?: string;
+    /** 变化回调，回**标量**（取消选中时回 `''`） */
+    onChange?: (value: string) => void;
+}
+/** 多选分段：值为**数组**，可多项同时按下 */
+export interface ToolbarToggleGroupMultipleProps extends ToolbarToggleGroupBaseProps {
+    type: 'multiple';
+    /** 当前按下项的值集合（受控） */
+    value?: string[];
+    /** 默认按下项的值集合（非受控） */
+    defaultValue?: string[];
+    /** 变化回调，回**数组** */
+    onChange?: (value: string[]) => void;
+}
+export type ToolbarToggleGroupProps = ToolbarToggleGroupSingleProps | ToolbarToggleGroupMultipleProps;
+declare const ToolbarToggleGroup: React.FC<ToolbarToggleGroupProps>;
+interface ToolbarComponent extends React.FC<ToolbarProps> {
+    Button: typeof ToolbarButton;
+    Link: typeof ToolbarLink;
+    Separator: typeof ToolbarSeparator;
+    ToggleGroup: typeof ToolbarToggleGroup;
+}
+export declare const Toolbar: ToolbarComponent;
+export {};

package/dist/components/Toolbar/Toolbar.js

@@ -0,0 +1,72 @@
+import { Icon as e } from "../Icon/Icon.js";
+import t from "./toolbar.module.js";
+import "react";
+import n from "clsx";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Toolbar as a } from "radix-ui";
+//#region packages/react/src/components/Toolbar/Toolbar.tsx
+var o = ({ danger: e = !1, icon: o, className: s, children: c, ...l }) => /* @__PURE__ */ i(a.Button, {
+	className: n(t.button, e && t.buttonDanger, s),
+	...l,
+	children: [o && /* @__PURE__ */ r("span", {
+		className: t.buttonIcon,
+		children: o
+	}), c && /* @__PURE__ */ r("span", { children: c })]
+});
+o.displayName = "Toolbar.Button";
+var s = ({ className: e, children: i, ...o }) => /* @__PURE__ */ r(a.Link, {
+	className: n(t.link, e),
+	...o,
+	children: i
+});
+s.displayName = "Toolbar.Link";
+var c = ({ className: e, ...i }) => /* @__PURE__ */ r(a.Separator, {
+	className: n(t.separator, e),
+	...i
+});
+c.displayName = "Toolbar.Separator";
+var l = (o) => {
+	let { items: s, disabled: c, className: l, "aria-label": u, "aria-labelledby": d } = o, f = o.type === "single" ? {
+		type: "single",
+		value: o.value,
+		defaultValue: o.defaultValue,
+		onValueChange: o.onChange
+	} : {
+		type: "multiple",
+		value: o.value,
+		defaultValue: o.defaultValue,
+		onValueChange: o.onChange
+	};
+	return /* @__PURE__ */ r(a.ToggleGroup, {
+		...f,
+		disabled: c,
+		className: n(t.toggleGroup, l),
+		"aria-label": u,
+		"aria-labelledby": d,
+		children: s.map((n) => /* @__PURE__ */ i(a.ToggleItem, {
+			value: n.value,
+			disabled: n.disabled,
+			className: t.toggleItem,
+			"aria-label": n.label == null ? n.value : void 0,
+			children: [n.icon && /* @__PURE__ */ r(e, {
+				name: n.icon,
+				size: "1em",
+				className: t.itemIcon
+			}), n.label]
+		}, n.value))
+	});
+};
+l.displayName = "Toolbar.ToggleGroup";
+var u = ({ children: e, orientation: i = "horizontal", className: o, style: s, "aria-label": c, "aria-labelledby": l }) => /* @__PURE__ */ r(a.Root, {
+	orientation: i,
+	className: n(t.root, o),
+	style: s,
+	"aria-label": c,
+	"aria-labelledby": l,
+	children: e
+});
+u.displayName = "Toolbar";
+var d = u;
+d.Button = o, d.Link = s, d.Separator = c, d.ToggleGroup = l;
+//#endregion
+export { d as Toolbar };