@xwink/ui

@xwink/ui 组件库

xwink 体系设计系统底座，home / chat / admin 直接消费。右上角「调试面板」可以实时切换 token 四维：明暗 / 尺寸 / 对比度 / 主题色。

技术底座

  • Tailwind 原子类 + semantic token（--ui-*，四维适配：主题色 / 明暗 / 对比度 / 尺寸）
  • Reka UI headless 承载交互组件行为层，@xwink/ui 只负责样式层
  • CVA 声明 variant，tailwind-merge 处理类名冲突
  • 图标统一走 Iconify（优先 ph 集），唯一入口 XIcon

演示

组件页里的演示分两级（写作约定见「指南 → 写作约定」）：

  • L0 内联 MDC：props/slot 一览无余的组件直接写在正文里，如 ::x-button{variant="primary"}；
  • L1 DemoBlock：需要脚本上下文的写进 app/examples/，预览与源码同一文件。

内联按钮：

按钮变体（L1，点「源码」看同一文件里的实现）：

按钮变体

组件

ts
import { XButton, XIcon } from '@xwink/ui'

各组件说明页见左侧导航。