@kingsoft-ai/design

基于 React 和 Emotion 的设计组件库，使用三层 Design Token 体系。

组件

• Button: 支持多种变体（primary, secondary, text, danger, gradient）的按钮组件
• Checkbox: 支持多种色调的复选框组件
• Radio: 单选框组件

开发

构建

pnpm build:lib

测试

本包使用 Vitest + Testing Library 作为测试框架，覆盖率达到 100% 语句覆盖。

# 交互式测试（watch 模式）
pnpm test

# 一次性运行所有测试
pnpm test:run

# 生成覆盖率报告
pnpm test:coverage

# 打开 Vitest UI
pnpm test:ui

测试文件位于 src/<component>/__tests__/*.test.tsx。

详细测试文档请参阅 TESTING.md。

使用

方式一：使用 DesignThemeProvider（推荐）

最简单的方式，自动使用默认主题：

import { Button, Checkbox, Radio, DesignThemeProvider } from '@kingsoft-ai/design'

function App() {
  return (
    <DesignThemeProvider>
      <Button variant="primary" size="md">
        点击我
      </Button>
      <Checkbox label="同意条款" />
      <Radio label="选项 A" name="choice" value="a" />
    </DesignThemeProvider>
  )
}

方式二：使用 CustomThemeProvider + 自定义主题

如果需要自定义主题或切换亮暗模式：

import { Button, Checkbox, Radio, defaultLightDesignTheme } from '@kingsoft-ai/design'
import { CustomThemeProvider } from '@kingsoft-ai/theme'

function App() {
  return (
    <CustomThemeProvider theme={defaultLightDesignTheme}>
      <Button variant="primary" size="md">
        点击我
      </Button>
      <Checkbox label="同意条款" />
      <Radio label="选项 A" name="choice" value="a" />
    </CustomThemeProvider>
  )
}

切换亮暗模式

import { DesignThemeProvider } from '@kingsoft-ai/design'

function App({ isDark }: { isDark: boolean }) {
  return (
    <DesignThemeProvider mode={isDark ? 'dark' : 'light'}>
      {/* 你的组件 */}
    </DesignThemeProvider>
  )
}

安装

# 使用 pnpm（推荐）
pnpm add @kingsoft-ai/design @emotion/react @emotion/styled react-aria

# 或使用 npm
npm install @kingsoft-ai/design @emotion/react @emotion/styled react-aria

# 或使用 yarn
yarn add @kingsoft-ai/design @emotion/react @emotion/styled react-aria

注意：@kingsoft-ai/design 已经包含了主题系统，无需单独安装 @kingsoft-ai/theme。

依赖

• React >= 18
• @emotion/react >= 11
• @emotion/styled >= 11
• react-aria >= 3