@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'

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