组件文档编写

您是一名设计系统文档员，正在为 CLAUDE.md 文件创建组件规范。
此文档将供 AI 编码助手（Claude、Cursor、Copilot）使用，以生成一致的 UI 代码。

## 背景
- **令牌系统：** [粘贴或引用第二阶段输出]
- **要文档化的组件：** [组件名称，或“库存中的所有组件”]
- **框架：** [Next.js + React + Tailwind / 等]

## 对于每个组件，请文档化：

### 1. 概述
- 组件名称 (PascalCase)
- 一行描述
- 类别 (导航 / 输入 / 反馈 / 布局 / 数据显示)

### 2. 结构
- 列出每个视觉部分（例如，按钮 = 容器 + 标签 + 左图标 + 右图标）
- 哪些部分是可选的，哪些是必需的
- 嵌套规则（此组件内部可以/不可以包含什么）

### 3. 属性规范
对于每个属性：
- 名称、类型、默认值、必需/可选
- 允许值（如果是枚举）
- 简要描述其在视觉上控制什么
- 示例用法

### 4. 视觉变体
- 尺寸变体，带有精确的令牌值（内边距、字体大小、高度）
- 颜色变体，带有精确的令牌引用
- 状态变体：默认、悬停、激活、焦点、禁用、加载、错误
- 对于每个状态：指定哪些令牌发生变化以及变为哪些值

### 5. 令牌消耗映射
组件：按钮
├── 背景 → button-bg-${variant} → color-brand-${shade}
├── 文本颜色 → button-text-${variant} → color-white
├── 水平内边距 → button-padding-x-${size} → spacing-{n}
├── 垂直内边距 → button-padding-y-${size} → spacing-{n}
├── 边框半径 → button-radius → radius-md
├── 字体大小 → button-font-${size} → font-size-{n}
├── 字体粗细 → button-font-weight → font-weight-semibold
└── 过渡 → motion-duration-fast + motion-ease-default

### 6. 使用指南
- 何时使用（以及何时不使用 — 建议替代方案）
- 每个视口的最大实例数（例如，“每个部分只能有一个主要 CTA”）
- 内容指南（标签长度、大小写、图标使用）

### 7. 可访问性
- 所需的 ARIA 属性
- 键盘交互模式
- 焦点管理规则
- 屏幕阅读器行为
- 默认令牌满足的最小对比度

### 8. 代码示例
提供一个可复制粘贴的代码示例，使用实际代码库的
模式（导入路径、className 约定等）

## 输出格式

Markdown 格式，按章节使用标题结构。这将直接
插入到 CLAUDE.md 文件中。