open-index/open-npm huggingface dataset:
npm package: @kingsoft-ai/design
Description: 基于 React 和 Emotion 的设计组件库，使用三层 Design Token 体系。
Latest version: 0.2.6

# @kingsoft-ai/design

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

## 组件

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

## 开发

### 构建

```bash
pnpm build:lib
```

### 测试

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

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

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

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

# 打开 Vitest UI
pnpm test:ui
```

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

详细测试文档请参阅 [TESTING.md](./TESTING.md)。

## 使用

### 方式一：使用 DesignThemeProvider（推荐）

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

```tsx
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 + 自定义主题

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

```tsx
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>
  )
}
```

### 切换亮暗模式

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

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

## 安装

```bash
# 使用 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
npm package: @kingsoft-ai/icons
Description: 金山AI React 图标库，提供多种风格与完善的 TypeScript 支持。
Latest version: 0.1.6

# @kingsoft-ai/icons

金山AI React 图标库，提供多种风格与完善的 TypeScript 支持。

## 核心特性
- Tree-shaking 友好，按需加载
- Outline、Bold、Broken、Bulk、Two-tone 等风格
- `size`、`color`、`className` 等通用属性
- 默认继承 `currentColor`，便于主题化
- 无副依赖，SVG 经过手工优化

## 安装
```bash
pnpm add @kingsoft-ai/icons
# 或 npm install / yarn add
```

## 快速上手
```tsx
import { ArrowRightOutline } from '@kingsoft-ai/icons'

export function App() {
  return <ArrowRightOutline size={24} color="#1f2933" />
}
```

## Props 总览
| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `size` | `number \| string` | `24` | 支持像素或 CSS 尺寸 |
| `color` | `string` | `'currentColor'` | 十六进制、RGB 或继承色 |
| `className` | `string` | - | 自定义样式类 |
| `style` | `CSSProperties` | - | 内联样式 |
| 其他 | `SVGProps<SVGSVGElement>` | - | 原生 SVG 属性 |

## 最佳实践
- 仅按需导入所需图标，减小包体积
- 通过设计令牌或 CSS 变量统一控制尺寸

## 开发脚本
```bash
pnpm run build:lib
pnpm run clean
```