@octohirono/stitch-design-system 0.1.0

package/README.md

@@ -0,0 +1,7 @@
+# packages/react
+
+React + TypeScript 组件库（构建阶段产出）。
+
+组件按四件套组织在 `src/components/<X>/`，只读角色变量 `var(--stitch-*)`。
+写作约定见 [docs/contributing/component-authoring.md](../../docs/contributing/component-authoring.md)；
+打包配置见 [docs/contributing/packaging.md](../../docs/contributing/packaging.md)。

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+export interface AccordionItem {
+    /** 唯一标识：受控 `value` / 非受控 `defaultValue` 对应此 key */
+    key: string;
+    /** 触发区标题（可点击的问句 / 标签） */
+    header: React.ReactNode;
+    /** 展开后显示的面板内容 */
+    children?: React.ReactNode;
+    /**
+     * 是否禁用该项（禁用后不可展开）
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * 一组披露块 + 「同时只开一个」（互斥单开）：在底件 `Collapse` 之上只加容器互斥联动，
+ * 单块的开合动画 / 无障碍全复用 `Collapse`（不重写）。对外取 `items` 数组（Ant v5 风格，
+ * 跟库里 Select / Table 一致），容器持「当前展开项 key」，把每个 `Collapse` 的开合受控化
+ * （`open = item.key === value`）、点击时切 value。
+ *
+ * 跨-prop 注意事项：
+ * - **受控 / 非受控双模式**：给 `value` 由父管（配 `onChange`，`null` = 全收），只给
+ *   `defaultValue` 组件自管。`extends HTMLAttributes<HTMLDivElement>` 但
+ *   `Omit<'onChange' | 'defaultValue'>`——原生名与本组件 `(value)=>void` / `string | null`
+ *   签名冲突；`...rest` 透传到根 `<div>`（`className` / `style` / `data-*` / `aria-*`）。
+ * - **只做互斥单开**：点开一项其余自动收，同一时刻至多一项展开；点已展开项 → 收起（value 回 `null`）。
+ *   **不做 multiple**（真要多开直接摆一排独立 `<Collapse>`）。
+ * - 展开指示 / 容器表面 / 焦点环等长相全继承 `Collapse`，只读角色变量 `var(--stitch-*)`，随主题换肤变化。
+ */
+export interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /** 披露项列表（Ant v5 `items` 风格） */
+    items: AccordionItem[];
+    /**
+     * 受控当前展开项 key（`null` = 全部收起；给了即受控，配 `onChange` 用）
+     */
+    value?: string | null;
+    /**
+     * 非受控初始展开项 key（`null` / 省略 = 初始全收）
+     * @default null
+     */
+    defaultValue?: string | null;
+    /** 当前展开项变化回调（受控 / 非受控都会触发；收起时回 `null`） */
+    onChange?: (value: string | null) => void;
+}
+export declare const Accordion: React.FC<AccordionProps>;

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,26 @@
+import { Collapse as e } from "../Collapse/Collapse.js";
+import t from "./accordion.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/Accordion/Accordion.tsx
+var o = ({ items: o, value: s, defaultValue: c = null, onChange: l, className: u, ...d }) => {
+	let [f, p] = r(c), m = s !== void 0, h = m ? s : f, g = n((e, t) => {
+		let n = t ? e : null;
+		m || p(n), l?.(n);
+	}, [m, l]);
+	return /* @__PURE__ */ a("div", {
+		className: i(t.accordion, u),
+		...d,
+		children: o.map((t) => /* @__PURE__ */ a(e, {
+			header: t.header,
+			disabled: t.disabled,
+			open: h === t.key,
+			onOpenChange: (e) => g(t.key, e),
+			children: t.children
+		}, t.key))
+	});
+};
+o.displayName = "Accordion";
+//#endregion
+export { o as Accordion };

package/dist/components/Accordion/accordion.module.js

@@ -0,0 +1,4 @@
+//#region packages/react/src/components/Accordion/accordion.module.less
+var e = "_accordion_1dkm4_1", t = { accordion: e };
+//#endregion
+export { e as accordion, t as default };

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

@@ -0,0 +1,2 @@
+export { Accordion } from './Accordion';
+export type { AccordionProps, AccordionItem } from './Accordion';

package/dist/components/AlertDialog/AlertDialog.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+/**
+ * 确认框：在底件 `Modal` 之上只加「必须做一个选择」那一层，浮层底座 / 焦点陷阱 / Esc /
+ * 焦点归还全复用 `Modal` + 共享 `_internal/useOverlay`（不重写）。相对普通 `Modal` 补四点：
+ *
+ * 1. **两个动作按钮**——取消（安全）+ 确认；均由库内 `Button` 渲染，随主题换肤。
+ * 2. **`role="alertdialog"`**——告诉读屏这是不可忽略、必须决策的对话框（传给 Modal 的 role）。
+ * 3. **点遮罩不关**（`maskClosable` 恒 `false`，不开放为 prop——确认框必须选一个）；**Esc = 取消**
+ *    （等价点「取消」，可关，逻辑同 Modal 的 `onCancel`）。
+ * 4. **初始焦点落在安全操作（取消）上**——取消钮在 footer 里渲染在确认钮之前，`useOverlay`
+ *    打开时聚焦第一个可聚焦元素，故正文为纯文案时焦点自动落取消。
+ *
+ * 跨-prop 注意事项：
+ * - **无受控 open 之外的状态**：显隐由父级 `open` 掌控，`onOk` / `onCancel` 回调决策结果；组件
+ *   自身不持状态（确认框是一次性问答，非双模式表单件）。
+ * - **确认可标危险态**：`okDanger` 把确认钮切到危险语义（删除类不可逆操作），仅改 `Button` 语义色，
+ *   仍只读角色变量 `var(--stitch-*)`。
+ * - 面 / 圆角 / 阴影 / 按钮长相全继承 `Modal` + `Button`，随主题换肤变化，本件不硬编码任何主题值。
+ */
+export interface AlertDialogProps {
+    /** 是否可见 */
+    open: boolean;
+    /** 标题（问句 / 决策提示） */
+    title?: React.ReactNode;
+    /** 宽度 @default 416 */
+    width?: number | string;
+    /** 确认回调（点「确认」按钮触发） */
+    onOk?: () => void;
+    /** 取消回调（点「取消」按钮 / Esc 触发；确认框的安全出口） */
+    onCancel?: () => void;
+    /** 确认按钮文案 @default '确认' */
+    okText?: React.ReactNode;
+    /** 取消按钮文案 @default '取消' */
+    cancelText?: React.ReactNode;
+    /**
+     * 确认是否为危险（不可逆）操作，确认钮切到危险语义
+     * @default false
+     */
+    okDanger?: boolean;
+    /** 确认框正文（要用户确认的说明文案） */
+    children?: React.ReactNode;
+    /** 自定义类名（透传到对话框面板） */
+    className?: string;
+}
+export declare const AlertDialog: React.FC<AlertDialogProps>;

package/dist/components/AlertDialog/AlertDialog.js

@@ -0,0 +1,32 @@
+import { Button as e } from "../Button/Button.js";
+import { Modal as t } from "../Modal/Modal.js";
+import n from "./alert-dialog.module.js";
+import "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region packages/react/src/components/AlertDialog/AlertDialog.tsx
+var o = ({ open: o, title: s, width: c = 416, onOk: l, onCancel: u, okText: d = "确认", cancelText: f = "取消", okDanger: p = !1, children: m, className: h }) => /* @__PURE__ */ i(t, {
+	open: o,
+	title: s,
+	width: c,
+	role: "alertdialog",
+	maskClosable: !1,
+	onCancel: u,
+	className: h,
+	footer: /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(e, {
+		type: "default",
+		onClick: u,
+		children: f
+	}), /* @__PURE__ */ i(e, {
+		type: "primary",
+		danger: p,
+		onClick: l,
+		children: d
+	})] }),
+	children: /* @__PURE__ */ i("div", {
+		className: n.message,
+		children: m
+	})
+});
+o.displayName = "AlertDialog";
+//#endregion
+export { o as AlertDialog };

package/dist/components/AlertDialog/alert-dialog.module.js

@@ -0,0 +1,4 @@
+//#region packages/react/src/components/AlertDialog/alert-dialog.module.less
+var e = "_message_1skqa_1", t = { message: e };
+//#endregion
+export { t as default, e as message };

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

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

package/dist/components/AspectRatio/AspectRatio.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+/**
+ * 锁宽高比容器（无 Ant 对应）：把 `children` 约束在固定宽高比（如 `16/9`）里，宽度自适应、
+ * 高度按比例算出。常配图片 / 视频 / 头像等媒体，避免加载前后的布局抖动（CLS）。
+ *
+ * 跨-prop 注意事项：
+ * - **纯布局件，无皮无状态**：不含交互 / 状态 / 皮色，无 `--stitch-*` 颜色角色可上（基本零
+ *   Less）；圆角、边框、底色等观感由**使用者在 `children` 上或 `className`/`style` 里定**，
+ *   本组件只负责撑出比例框。无 `data-state`（静态布局）。
+ * - **`ratio` 直接透传底层**（与 Radix 同名，非回调、无需归一）：`ratio` 为宽 ÷ 高，如
+ *   `16 / 9`、`4 / 3`、`1`（正方形）。底层用外层 wrapper 的 `padding-bottom = 100 / ratio`
+ *   撑出比例，`children` 绝对定位铺满内层。
+ * - **常与 Image / Avatar 组合**：如 `<AspectRatio ratio={16/9}><Image …/></AspectRatio>`，
+ *   让媒体填满比例框（媒体自身设 `width:100%; height:100%; object-fit:cover`）。
+ */
+export interface AspectRatioProps {
+    /**
+     * 宽高比（宽 ÷ 高），如 `16 / 9`、`4 / 3`
+     * @default 1
+     */
+    ratio?: number;
+    /** 约束进比例框的内容（媒体等） */
+    children?: React.ReactNode;
+    /** 自定义类名（挂到比例框内容层） */
+    className?: string;
+    /** 行内样式（挂到比例框内容层） */
+    style?: React.CSSProperties;
+}
+export declare const AspectRatio: React.FC<AspectRatioProps>;

package/dist/components/AspectRatio/AspectRatio.js

@@ -0,0 +1,15 @@
+import e from "./aspect-ratio.module.js";
+import "react";
+import t from "clsx";
+import { jsx as n } from "react/jsx-runtime";
+import { AspectRatio as r } from "radix-ui";
+//#region packages/react/src/components/AspectRatio/AspectRatio.tsx
+var i = ({ ratio: i = 1, children: a, className: o, style: s }) => /* @__PURE__ */ n(r.Root, {
+	ratio: i,
+	className: t(e.root, o),
+	style: s,
+	children: a
+});
+i.displayName = "AspectRatio";
+//#endregion
+export { i as AspectRatio };

package/dist/components/AspectRatio/aspect-ratio.module.js

@@ -0,0 +1,4 @@
+//#region packages/react/src/components/AspectRatio/aspect-ratio.module.less
+var e = "_root_lhda8_1", t = { root: e };
+//#endregion
+export { t as default, e as root };

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

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

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+export type AvatarSize = 'small' | 'middle' | 'large';
+export type AvatarShape = 'circle' | 'square';
+/**
+ * 头像：展示用户 / 实体的小幅图像，图片加载失败或无 `src` 时优雅回退到兜底内容
+ * （首字母 / 占位图标）。固定尺寸档（`size`）+ 圆 / 方（`shape`）+ `fallback` 兜底。
+ * 组合 Radix `Avatar.Root/Image/Fallback`。
+ *
+ * 跨-prop 注意事项：
+ * - **vs Image**：Image 是通用图片（任意尺寸 + matte 相框 + 点击预览大图）；Avatar 是
+ *   头像——固定尺寸档、圆 / 方两形、缺图必有 `fallback` 兜底语义，非通用图片。
+ * - **显图 / 兜底二选一由 Radix 判**：`src` 加载成功才渲 `<img>`；无 `src` 或加载失败渲
+ *   `fallback`（Radix 用 `new Image()` 预载探测，非 `data-*`）。故 `fallback` 应常备
+ *   （如姓名首字母），别依赖图片一定加载出来。
+ * - **`size` / `shape` → class 映射**：`size` 走物理尺寸档（small 24 / middle 32 /
+ *   large 40，人机工程量、非主题值）；`shape='circle'` → `border-radius:50%`、`square`
+ *   → `--stitch-radius-image`（随站换肤）。
+ * - **`alt` 给有意义头像补无障碍名**：`src` 成功显图时 `alt` 透到 `<img>`；纯装饰可留空。
+ */
+export interface AvatarProps {
+    /** 头像图片地址；缺失或加载失败时回退到 `fallback` */
+    src?: string;
+    /** 图片替代文本（无障碍）；有意义头像应提供，纯装饰可留空 */
+    alt?: string;
+    /** 图缺失 / 加载失败时的兜底内容（首字母 / 占位图标等） */
+    fallback?: React.ReactNode;
+    /**
+     * 尺寸档：small 24 / middle 32 / large 40（px）
+     * @default 'middle'
+     */
+    size?: AvatarSize;
+    /**
+     * 形状：圆形或方形（方形圆角随 `--stitch-radius-image` 换肤）
+     * @default 'circle'
+     */
+    shape?: AvatarShape;
+    /** 自定义类名（挂到头像根容器） */
+    className?: string;
+    /** 行内样式（挂到头像根容器） */
+    style?: React.CSSProperties;
+}
+export declare const Avatar: React.FC<AvatarProps>;

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,21 @@
+import e from "./avatar.module.js";
+import "react";
+import t from "clsx";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Avatar as i } from "radix-ui";
+//#region packages/react/src/components/Avatar/Avatar.tsx
+var a = ({ src: a, alt: o, fallback: s, size: c = "middle", shape: l = "circle", className: u, style: d }) => /* @__PURE__ */ r(i.Root, {
+	className: t(e.root, e[c], e[l], u),
+	style: d,
+	children: [a != null && /* @__PURE__ */ n(i.Image, {
+		className: e.image,
+		src: a,
+		alt: o
+	}), /* @__PURE__ */ n(i.Fallback, {
+		className: e.fallback,
+		children: s
+	})]
+});
+a.displayName = "Avatar";
+//#endregion
+export { a as Avatar };

package/dist/components/Avatar/avatar.module.js

@@ -0,0 +1,13 @@
+//#region packages/react/src/components/Avatar/avatar.module.less
+var e = "_root_1ushl_1", t = "_image_1ushl_13", n = "_fallback_1ushl_18", r = "_circle_1ushl_28", i = "_square_1ushl_31", a = "_small_1ushl_34", o = "_middle_1ushl_39", s = "_large_1ushl_44", c = {
+	root: e,
+	image: t,
+	fallback: n,
+	circle: r,
+	square: i,
+	small: a,
+	middle: o,
+	large: s
+};
+//#endregion
+export { r as circle, c as default, n as fallback, t as image, s as large, o as middle, e as root, a as small, i as square };

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

@@ -0,0 +1,2 @@
+export { Avatar } from './Avatar';
+export type { AvatarProps, AvatarSize, AvatarShape } from './Avatar';

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+export type ButtonType = 'primary' | 'default' | 'dashed' | 'text' | 'link';
+export type ButtonSize = 'small' | 'middle' | 'large';
+export type ButtonHTMLType = 'submit' | 'reset' | 'button';
+/**
+ * 动作按钮：`type` 语义 + `size` + `danger`/`ghost`/`block` 布尔态 + `icon` 插槽 +
+ * `loading`/`disabled`。`extends ButtonHTMLAttributes<button>`（`Omit` 掉受控的
+ * `type`），`...rest` 透传到根 `<button>`。
+ *
+ * 跨-prop 注意事项：
+ * - **`type="primary"`** 是强调填充 CTA（`--stitch-accent` 填充 + `--stitch-accent-text`）；
+ *   圆角由 `--stitch-radius-button` 决定（每站不同）。
+ * - **`icon`** 传你自己的 `<Icon>`（Button 只做插槽包裹，本体不产出任何图标）；`loading` 时
+ *   icon 隐藏。
+ * - **`loading`** = 非交互（`pointer-events:none`）+ `aria-busy` + 暗淡，不带内建加载动画
+ *   （需要动效由消费者按 `--stitch-motion-*` 自行加）。
+ * - **Accessibility**：纯图标按钮请传 `aria-label`；`disabled` 走原生 `disabled` 属性
+ *   （自动阻断点击与键盘）。
+ * - **Do NOT** 传 emoji / Unicode 符号 / 裸 `<svg>` 作图标——一律经 `<Icon>`。
+ */
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    /** 按钮类型 */
+    type?: ButtonType;
+    /** 尺寸 */
+    size?: ButtonSize;
+    /**
+     * 危险按钮样式
+     * @default false
+     */
+    danger?: boolean;
+    /**
+     * 幽灵按钮（透明填充）
+     * @default false
+     */
+    ghost?: boolean;
+    /**
+     * 块级按钮（撑满宽度）
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * 加载状态（非交互 + `aria-busy`；loading 时不渲染 icon）
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * 禁用状态
+     * @default false
+     */
+    disabled?: boolean;
+    /** 图标节点（传入自己的 `<Icon>`；loading 时隐藏） */
+    icon?: React.ReactNode;
+    /**
+     * 原生 button type
+     * @default 'button'
+     */
+    htmlType?: ButtonHTMLType;
+    children?: React.ReactNode;
+}
+export declare const Button: React.FC<ButtonProps>;

package/dist/components/Button/Button.js

@@ -0,0 +1,22 @@
+import e from "./button.module.js";
+import "react";
+import t from "clsx";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region packages/react/src/components/Button/Button.tsx
+var i = ({ type: i = "default", size: a = "middle", danger: o = !1, ghost: s = !1, block: c = !1, loading: l = !1, disabled: u = !1, icon: d, htmlType: f = "button", className: p, children: m, ...h }) => {
+	let g = t(e.btn, e[`btn-${i}`], e[`btn-${a}`], o && e["btn-danger"], s && e["btn-ghost"], c && e["btn-block"], l && e["btn-loading"], p);
+	return /* @__PURE__ */ r("button", {
+		type: f,
+		className: g,
+		disabled: u,
+		"aria-busy": l || void 0,
+		...h,
+		children: [d && !l && /* @__PURE__ */ n("span", {
+			className: e["btn-icon"],
+			children: d
+		}), m && /* @__PURE__ */ n("span", { children: m })]
+	});
+};
+i.displayName = "Button";
+//#endregion
+export { i as Button };

package/dist/components/Button/button.module.js

@@ -0,0 +1,19 @@
+//#region packages/react/src/components/Button/button.module.less
+var e = "_btn_18xhb_1", t = {
+	btn: e,
+	"btn-small": "_btn-small_18xhb_29",
+	"btn-middle": "_btn-middle_18xhb_34",
+	"btn-large": "_btn-large_18xhb_39",
+	"btn-default": "_btn-default_18xhb_44",
+	"btn-primary": "_btn-primary_18xhb_61",
+	"btn-ghost": "_btn-ghost_18xhb_79",
+	"btn-dashed": "_btn-dashed_18xhb_83",
+	"btn-text": "_btn-text_18xhb_99",
+	"btn-link": "_btn-link_18xhb_111",
+	"btn-danger": "_btn-danger_18xhb_123",
+	"btn-block": "_btn-block_18xhb_178",
+	"btn-loading": "_btn-loading_18xhb_182",
+	"btn-icon": "_btn-icon_18xhb_187"
+};
+//#endregion
+export { e as btn, t as default };

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

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonType, ButtonSize, ButtonHTMLType, } from './Button';

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+/**
+ * 表面处理（结构语义，非「长相」）：
+ * - `outlined` 内容卡：描边 + 极淡升起影（结构主力卡）；
+ * - `elevated` 浮动卡：无边、有阴影（真正抬起的浮层卡）；
+ * - `filled`   中性卡：填充底、无边无影（扁平中性卡）；
+ * - `dashed`   虚线卡：虚线描边。
+ */
+export type CardVariant = 'outlined' | 'elevated' | 'filled' | 'dashed';
+/**
+ * 颜色 = 语义状态 + 强调面 + 抽象分类槽（非「长相制」）：
+ * - `default`：中性面（跟随 variant 的底/描边）；
+ * - `accent`：强调面（走契约 `--stitch-bg-accent` + `--stitch-text-on-accent`）；
+ * - 语义：`danger` / `success` / `warning` / `info`，走状态角色变量（软底 + 深同色字）；
+ * - 分类：`cat-1…cat-6`，走契约分类色槽 `--stitch-cat-*`，只为「互相区分」而非表状态。
+ */
+export type CardColor = 'default' | 'accent' | 'danger' | 'success' | 'warning' | 'info' | 'cat-1' | 'cat-2' | 'cat-3' | 'cat-4' | 'cat-5' | 'cat-6';
+/**
+ * 容器卡片：`children` 内容 + `variant` 表面处理 + `color` 颜色 + `hoverable`。
+ * `extends HTMLAttributes<HTMLDivElement>`，`...rest` 透传到根 `<div>`
+ * （`onClick` / `style` / `role` / `aria-*` / `tabIndex`）；无内部状态或 hook。
+ *
+ * 跨-prop 注意事项：
+ * - **文字色与面色分离，保证可读 ≥AA**：任何 `color` 下文字都不直取身份色，而是由面色
+ *   派生出足够深的墨色（语义色、分类槽、`accent` 强调面同理）——消费者无需自行处理对比。
+ * - **可聚焦焦点环**：当消费者用 `tabIndex` / `onClick` 令卡片可聚焦时，焦点环自动走
+ *   `--stitch-focus-ring` 呈现。
+ * - `color` 与 `variant` 正交：颜色只改面/字/描边三个局部变量，任一 `variant` 都能承载任一 `color`。
+ */
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * 表面处理（描边 / 阴影 / 填充语义）
+     * @default 'outlined'
+     */
+    variant?: CardVariant;
+    /**
+     * 颜色（语义状态 + 强调面 + 抽象分类槽）
+     * @default 'default'
+     */
+    color?: CardColor;
+    /**
+     * 是否启用 hover 效果（cursor pointer + 抬起 -2px + 阴影）。
+     * 默认 `false`（只读卡片）；设为 `true` 开启（可点击卡片 / 列表项等交互场景）。
+     * @default false
+     */
+    hoverable?: boolean;
+    /** 自定义内容 */
+    children?: React.ReactNode;
+}
+export declare const Card: React.FC<CardProps>;

package/dist/components/Card/Card.js

@@ -0,0 +1,21 @@
+import e from "./card.module.js";
+import "react";
+import t from "clsx";
+import { jsx as n } from "react/jsx-runtime";
+//#region packages/react/src/components/Card/Card.tsx
+var r = {
+	outlined: e["card-outlined"],
+	elevated: e["card-elevated"],
+	filled: e["card-filled"],
+	dashed: e["card-dashed"]
+}, i = (t) => t === "default" ? "" : e[`color-${t}`], a = ({ variant: a = "outlined", color: o = "default", hoverable: s = !1, className: c, children: l, ...u }) => {
+	let d = t(e.card, r[a], i(o), s && e["card-hoverable"], c);
+	return /* @__PURE__ */ n("div", {
+		className: d,
+		...u,
+		children: l
+	});
+};
+a.displayName = "Card";
+//#endregion
+export { a as Card };

package/dist/components/Card/card.module.js

@@ -0,0 +1,22 @@
+//#region packages/react/src/components/Card/card.module.less
+var e = "_card_yd0px_1", t = {
+	card: e,
+	"card-outlined": "_card-outlined_yd0px_20",
+	"card-elevated": "_card-elevated_yd0px_24",
+	"card-filled": "_card-filled_yd0px_27",
+	"card-dashed": "_card-dashed_yd0px_30",
+	"color-accent": "_color-accent_yd0px_35",
+	"color-danger": "_color-danger_yd0px_40",
+	"color-success": "_color-success_yd0px_45",
+	"color-warning": "_color-warning_yd0px_50",
+	"color-info": "_color-info_yd0px_55",
+	"color-cat-1": "_color-cat-1_yd0px_60",
+	"color-cat-2": "_color-cat-2_yd0px_65",
+	"color-cat-3": "_color-cat-3_yd0px_70",
+	"color-cat-4": "_color-cat-4_yd0px_75",
+	"color-cat-5": "_color-cat-5_yd0px_80",
+	"color-cat-6": "_color-cat-6_yd0px_85",
+	"card-hoverable": "_card-hoverable_yd0px_90"
+};
+//#endregion
+export { e as card, t as default };

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

@@ -0,0 +1,2 @@
+export { Card } from './Card';
+export type { CardProps, CardVariant, CardColor } from './Card';

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

@@ -0,0 +1,45 @@
+import React from 'react';
+export type CheckboxSize = 'small' | 'middle' | 'large';
+export interface CheckboxOption {
+    /** 选项标签 */
+    label: React.ReactNode;
+    /** 选项值 */
+    value: string | number;
+    /** 是否禁用该选项 */
+    disabled?: boolean;
+}
+/**
+ * 多选组（Ant `Checkbox.Group` 语义）：`options` + `value` / `defaultValue` 为**数组**、
+ * `onChange` 收整组选中值数组。与 Radio（单选、标量）成对——多选用勾标记、单选用圆点。
+ *
+ * 跨-prop 注意事项：
+ * - **受控/非受控双模式**：给 `value` 由父管，只给 `defaultValue` 组件自管。
+ * - **勾选标记走 `<Icon name="check">`**（装饰 `aria-hidden`），非裸 `<svg>`；勾色随
+ *   `--stitch-accent-text`（与填充面成对比）。选中态为纯淡入，无爆闪/勾线动画。
+ * - **键盘**：原生 `<input type="checkbox">`，Tab 可聚焦、Space 切换；聚焦环
+ *   `:focus-visible` + `--stitch-focus-ring`。
+ * - **盒子结构**：1px 边框（`--stitch-border`，hover 未选中项 → `--stitch-border-strong`），
+ *   填充白面 `--stitch-bg-elevated`；选中填 `--stitch-accent` + 边 `--stitch-accent-active`。
+ *   圆角走表单控件档 `--stitch-radius-input`（随主题变）。
+ */
+export interface CheckboxProps {
+    /** 选中的值列表（受控） */
+    value?: Array<string | number>;
+    /** 默认选中的值列表（非受控） */
+    defaultValue?: Array<string | number>;
+    /** 选项列表 */
+    options: CheckboxOption[];
+    /** 尺寸 */
+    size?: CheckboxSize;
+    /** 禁用全部 */
+    disabled?: boolean;
+    /** 布局方向 */
+    direction?: 'horizontal' | 'vertical';
+    /** 变化回调 */
+    onChange?: (values: Array<string | number>) => void;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const Checkbox: React.FC<CheckboxProps>;

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,56 @@
+import { Icon as e } from "../Icon/Icon.js";
+import t from "./checkbox.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/Checkbox/Checkbox.tsx
+var c = {
+	small: 12,
+	middle: 15,
+	large: 19
+}, l = ({ value: l, defaultValue: u = [], options: d, size: f = "middle", disabled: p = !1, direction: m = "horizontal", onChange: h, className: g, style: _ }) => {
+	let [v, y] = i(u), b = l !== void 0, x = b ? l : v, S = `stitch-cbx-${r().replace(/:/g, "")}`, C = n((e, t) => {
+		if (p || t) return;
+		let n = x.includes(e) ? x.filter((t) => t !== e) : [...x, e];
+		b || y(n), h?.(n);
+	}, [
+		p,
+		x,
+		b,
+		h
+	]);
+	return /* @__PURE__ */ o("div", {
+		role: "group",
+		className: a(t.checkboxGroup, t[m], p && t.groupDisabled, g),
+		style: _,
+		children: d.map((n, r) => {
+			let i = x.includes(n.value), l = p || n.disabled, u = `${S}-${r}`;
+			return /* @__PURE__ */ s("label", {
+				className: a(t.checkboxItem, t[f], {
+					[t.checked]: i,
+					[t.disabled]: l
+				}),
+				children: [/* @__PURE__ */ s("span", {
+					className: t.cbx,
+					children: [/* @__PURE__ */ o("input", {
+						id: u,
+						type: "checkbox",
+						checked: i,
+						disabled: l,
+						onChange: () => C(n.value, n.disabled)
+					}), /* @__PURE__ */ o(e, {
+						name: "check",
+						size: c[f],
+						className: t.check
+					})]
+				}), /* @__PURE__ */ o("span", {
+					className: t.label,
+					children: n.label
+				})]
+			}, String(n.value));
+		})
+	});
+};
+l.displayName = "Checkbox";
+//#endregion
+export { l as Checkbox };

package/dist/components/Checkbox/checkbox.module.js

@@ -0,0 +1,17 @@
+//#region packages/react/src/components/Checkbox/checkbox.module.less
+var e = "_checkboxGroup_19g9k_1", t = "_horizontal_19g9k_7", n = "_vertical_19g9k_10", r = "_checkboxItem_19g9k_14", i = "_small_19g9k_22", a = "_label_19g9k_25", o = "_middle_19g9k_28", s = "_large_19g9k_34", c = "_cbx_19g9k_40", l = "_check_19g9k_1", u = "_disabled_19g9k_97", d = "_groupDisabled_19g9k_111", f = {
+	checkboxGroup: e,
+	horizontal: t,
+	vertical: n,
+	checkboxItem: r,
+	small: i,
+	label: a,
+	middle: o,
+	large: s,
+	cbx: c,
+	check: l,
+	disabled: u,
+	groupDisabled: d
+};
+//#endregion
+export { c as cbx, l as check, e as checkboxGroup, r as checkboxItem, f as default, u as disabled, d as groupDisabled, t as horizontal, a as label, s as large, o as middle, i as small, n as vertical };