# CWA Design

> React design system, 0.1.0-alpha.4. Source candidate; npm publication unverified.

Registry digest: sha256:89fa672035ff6dded40573b81274804d8eb2ed6aa8473a30329912a769c9202a

## Documentation
- [CWA Design — 轻盈的玻璃，完整的组件](https://whyfail.github.io/cwa-design/markdown/index.md): Apple 风格的 Web 组件库。真实 React 组件、清晰文档、可运行示例与同版本 AI 契约。
- [开始使用](https://whyfail.github.io/cwa-design/markdown/docs/getting-started/index.md): 从现有源码 workspace 开始，构建组件、引入样式并配置 CwaProvider。
- [主题与配置](https://whyfail.github.io/cwa-design/markdown/docs/theming/index.md): 使用 CwaProvider 配置主题、材质、密度和动效，用公开 CSS Token 定制品牌。
- [兼容与使用边界](https://whyfail.github.io/cwa-design/markdown/docs/compatibility/index.md): React、SSR、样式入口与 Alpha 支持范围，以及浏览器降级策略。
- [组件总览](https://whyfail.github.io/cwa-design/markdown/components/index.md): 30 个真实 React 组件，按界面任务选择，查看同源示例和 API。
- [CwaProvider 全局配置](https://whyfail.github.io/cwa-design/markdown/components/provider/index.md): 主题、材质、动效、密度与 Portal 的应用根；将所有需要上下文的组件置于其内。
- [Surface 材质表面](https://whyfail.github.io/cwa-design/markdown/components/surface/index.md): 通用表面容器；正文用 solid/frosted，浮动层可显式使用 glass。
- [Button 按钮](https://whyfail.github.io/cwa-design/markdown/components/button/index.md): 执行动作的原生按钮；表单提交需显式 type="submit"。
- [IconButton 图标按钮](https://whyfail.github.io/cwa-design/markdown/components/icon-button/index.md): 只含图标的原生按钮；必须提供 label 作为可访问名称。
- [Stack 堆栈布局](https://whyfail.github.io/cwa-design/markdown/components/stack/index.md): 横向或纵向的 Flex 布局；gap 是数值 Token 刻度。
- [Text 文本](https://whyfail.github.io/cwa-design/markdown/components/text/index.md): 正文或辅助文字；标签语义与视觉样式可分别选择。
- [Heading 标题](https://whyfail.github.io/cwa-design/markdown/components/heading/index.md): 语义级别与视觉尺寸独立；level 必填并决定实际 h1–h6。
- [Field 表单字段](https://whyfail.github.io/cwa-design/markdown/components/field/index.md): 稳定关联 label/description/error 与 Input/Textarea；required 只控制标记，原生 required 仍传给控件。
- [Input 输入框](https://whyfail.github.io/cwa-design/markdown/components/input/index.md): 原生单行输入；value/defaultValue/onChange 和 IME 使用原生事件。
- [Textarea 多行输入](https://whyfail.github.io/cwa-design/markdown/components/textarea/index.md): 原生多行输入；value/defaultValue/onChange 与 IME 由浏览器处理。
- [Separator 分隔线](https://whyfail.github.io/cwa-design/markdown/components/separator/index.md): 水平或垂直分隔线；非装饰性时保留 separator 语义。
- [Badge 徽标](https://whyfail.github.io/cwa-design/markdown/components/badge/index.md): 状态或计数标签；tone 不能替代文本含义。
- [Avatar 头像](https://whyfail.github.io/cwa-design/markdown/components/avatar/index.md): 固定几何头像；无 src 时显示 fallback，图片加载由 Base UI 管理。
- [Card 卡片](https://whyfail.github.io/cwa-design/markdown/components/card/index.md): 内容卡片；使用显式分区组合标题、正文与操作。
- [Spinner 加载指示](https://whyfail.github.io/cwa-design/markdown/components/spinner/index.md): 不确定进度指示；label 控制可访问名称。
- [Skeleton 骨架屏](https://whyfail.github.io/cwa-design/markdown/components/skeleton/index.md): 固定占位几何；为加载中的内容预留宽高。
- [Checkbox 复选框](https://whyfail.github.io/cwa-design/markdown/components/checkbox/index.md): 二态/不确定复选框；children 在 label 内渲染。
- [RadioGroup 单选组](https://whyfail.github.io/cwa-design/markdown/components/radio-group/index.md): 单选选项组；方向键导航与隐藏表单 input 由 Base UI 提供。
- [Switch 开关](https://whyfail.github.io/cwa-design/markdown/components/switch/index.md): 即时二态设置；children 在 label 内渲染。
- [Select 选择器](https://whyfail.github.io/cwa-design/markdown/components/select/index.md): 字符串值单选；选择值用 Select，动作菜单用 DropdownMenu。
- [Slider 滑块](https://whyfail.github.io/cwa-design/markdown/components/slider/index.md): 单 Thumb 数值滑块；箭头/Home/End 为拖拽替代。
- [Tabs 标签页](https://whyfail.github.io/cwa-design/markdown/components/tabs/index.md): 切换关联内容面板；小规模互斥设置使用 SegmentedControl。
- [SegmentedControl 分段选择](https://whyfail.github.io/cwa-design/markdown/components/segmented-control/index.md): 2–5 个互斥设置选项；RadioGroup 语义，不是内容 Tabs。
- [Tooltip 文字提示](https://whyfail.github.io/cwa-design/markdown/components/tooltip/index.md): hover/focus 的非交互说明；交互内容使用 Popover。
- [Popover 浮动面板](https://whyfail.github.io/cwa-design/markdown/components/popover/index.md): 锚定的非模态浮层；焦点、外部点击与定位由 Base UI 管理。
- [DropdownMenu 下拉菜单](https://whyfail.github.io/cwa-design/markdown/components/dropdown-menu/index.md): 触发动作的菜单；不是表单选择值控件。
- [Dialog 对话框](https://whyfail.github.io/cwa-design/markdown/components/dialog/index.md): 模态对话框；焦点陷阱、Escape、滚动锁与恢复由 Base UI 管理。
- [Sheet 抽屉](https://whyfail.github.io/cwa-design/markdown/components/sheet/index.md): bottom/end 单展开位抽屉；可拖拽关闭并提供关闭按钮作为替代。
- [ToastProvider 消息通知](https://whyfail.github.io/cwa-design/markdown/components/toast/index.md): 应用通知队列；外部触发可创建 manager 并传入 toastManager。
- [Alert 提示信息](https://whyfail.github.io/cwa-design/markdown/components/alert/index.md): 页面内的即时状态提示；所有 tone 均渲染 role="alert"。
- [设计语言](https://whyfail.github.io/cwa-design/markdown/design/index.md): 轻盈、清晰和可预测：CWA Design 的材质、空间、排版与交互原则。
- [材质与层次](https://whyfail.github.io/cwa-design/markdown/design/materials/index.md): 选择 solid、frosted、glass 与 glass-clear，用真实背景验证透射与文字可读性。
- [响应与动效](https://whyfail.github.io/cwa-design/markdown/design/motion/index.md): 即时按下反馈、可中断弹簧与速度延续，以及减少动态偏好。
- [玻璃候选对照](https://whyfail.github.io/cwa-design/markdown/design/glass-candidates/index.md): 79168ce Token 与 0.1.0-alpha.3 候选的同条件 A/B：真实照片、滚动文字、三种材质。
- [无障碍设计](https://whyfail.github.io/cwa-design/markdown/design/accessibility/index.md): 可访问名称、键盘操作、焦点、表单关联与用户偏好的使用规范。
- [主题实验室](https://whyfail.github.io/cwa-design/markdown/themes/index.md): 在同一组件组上比较材质与背景，导出真实 CwaProvider 配置和公开 Token。
- [界面组合](https://whyfail.github.io/cwa-design/markdown/patterns/index.md): 用已有组件组织设置、账户面板与 AI 工作台，查看真实源码和交互边界。
- [个人设置表单](https://whyfail.github.io/cwa-design/markdown/patterns/settings/index.md): 可运行的 settings 组合，与真实源码和组件契约对应。
- [账户面板](https://whyfail.github.io/cwa-design/markdown/patterns/account-panel/index.md): 可运行的 account-panel 组合，与真实源码和组件契约对应。
- [AI 工作台界面组合](https://whyfail.github.io/cwa-design/markdown/patterns/ai-workspace/index.md): 可运行的 ai-workspace 组合，与真实源码和组件契约对应。
- [媒体工具栏可读配方](https://whyfail.github.io/cwa-design/markdown/patterns/media-toolbar/index.md): 可运行的 media-toolbar 组合，与真实源码和组件契约对应。
- [为 AI 开发而设计](https://whyfail.github.io/cwa-design/markdown/ai/index.md): Skill、版本化 Registry、只读 CLI 与本地 stdio MCP 共享同一份组件契约。
- [CWA Design Skill](https://whyfail.github.io/cwa-design/markdown/ai/skill/index.md): 下载包含组件契约和设计规则的同版本 Skill，供 AI 编程助手按真实 API 工作。
- [MCP 与 CLI](https://whyfail.github.io/cwa-design/markdown/ai/mcp/index.md): 从源码 workspace 启动本地 stdio MCP，查询确切版本的组件、Token 与示例。
- [资源](https://whyfail.github.io/cwa-design/markdown/resources/index.md): 真实版本的 Registry、Token、Skill 与逐页 Markdown，以及源码和 Storybook 入口。
- [版本与更新](https://whyfail.github.io/cwa-design/markdown/changelog/index.md): 当前 Alpha 候选、已部署版本和本轮变更范围。
- [搜索文档](https://whyfail.github.io/cwa-design/markdown/search/index.md): 按组件名、中文别名和使用场景搜索 CWA Design。