@wisdomgarden/torque

Torque Design 的 React 组件库 —— Wisdom Garden 的设计系统。基于 Web 2.0 设计规范， 提供统一的组件 API 与 --t-* 设计 token。

整套设计系统由三个包组成：

| 包 | 是什么 | | --- | --- | | @wisdomgarden/torque | 组件库（本包） | | @wisdomgarden/torque-icons | 图标集 | | @wisdomgarden/torque-styles | 设计 token（纯 CSS 变量） |

安装

pnpm add @wisdomgarden/torque @wisdomgarden/torque-styles @wisdomgarden/torque-icons

三个包是一组:

| 包 | 作用 | 为什么是 peerDependency | | ------------------------- | -------------------------- | ----------------------------------------------- | | @wisdomgarden/torque-styles | --t-* 设计 token(纯 CSS) | 组件样式全部建立在这些变量上,不引入等于没有样式 | | @wisdomgarden/torque-icons | 图标集 + <Icon> | setIconLoader 是模块级状态,必须单实例 |

react / react-dom / @mantine/* 同样是 peerDependency —— 它们不打进本包产物,版本跟随宿主,保证单实例。

接入

样式入口按 @layer reset, mantine, lib 分层,顺序不能乱:

@layer reset, mantine, lib;

@import '@mantine/core/styles.css' layer(mantine);
@import '@wisdomgarden/torque/dist/index.css';
@import '@wisdomgarden/torque-styles';

@wisdomgarden/torque-styles 能写成裸路径,是因为它声明了 style 字段 —— postcss-import 不解析 exports 表,认的是这个字段。

组件侧挂 Provider:

import { UiProvider } from '@wisdomgarden/torque';
import { zhHans } from '@wisdomgarden/torque/locale';

<UiProvider locale={zhHans} deviceType={deviceType}>
  {children}
</UiProvider>;

• locale —— 组件内部的文案(关闭、清除、暂无数据、分页……),包内附 5 个语言预设,本包零 i18n 依赖
• deviceType —— 决定下拉、菜单等组件走桌面浮层还是移动端抽屉

图标开箱即用,不需要注册任何东西,详见 @wisdomgarden/torque-icons。

用法

import { Button, Select, Table } from '@wisdomgarden/torque';

也可以按组件深路径引,少走一层桶:

import { Button } from '@wisdomgarden/torque/components/button';

样式约定

组件样式一律是组件级 CSS Module,包在 @layer lib 内,颜色/间距/圆角全部走 --t-*。 包内不使用 Tailwind 工具类 —— 那需要宿主的构建管线扫描生成,发布成 npm 包后无法依赖。

根节点带稳定类名(如 t-button)供外部覆盖;因为组件样式在 @layer lib 里,宿主 未分层的样式天然优先级更高,直接写 className 即可覆盖。

构建

Vite lib mode,preserveModules 保持一模块一文件。entry 由 package.json 的 exports 表驱动 —— 那是"哪些路径必须存在"的契约,由它生成 entry 可以保证两者不会 不一致。构建末尾 verify-exports.mjs 会把每个子路径解析一遍并落盘检查。