### 开发

[CONTRIBUTING.md](CONTRIBUTING.md)

# 使用方法

```shell
npm install @anker-in/headless-ui

```

1. 无头项目修改tailwind.config.ts 配置文件
```js
import type { Config } from 'tailwindcss'
+ import headlessUIPreset from '@anker-in/headless-ui/tailwind.config.js'


export default {
  + presets: [
  +  headlessUIPreset, // ❗❗❗重要！使用预设
  + ],
  content: [
   + './node_modules/@anker-in/headless-ui/dist/**/*.js', // ❗❗❗重要！把这些加入content
  ],
} satisfies Config

```
因为headless-ui 使用纯 ESM 模块, 所以有些非标准第三方ESM模块比如gsap可能会在nextjs 中加载失败，
需要修改无头项目的next.config.js ，显式声明需要 transpile 的包
```
// next.config.js
module.exports = {
  transpilePackages: ['@anker-in/headless-ui', 'gsap'],
}
```


2. 添加 design token css 变量文件  
在入口文件 app.js 直接引入 design token css
```js
import '@anker-in/headless-ui/tokens/base.css'
import '@anker-in/headless-ui/tokens/{barnd}.css' // brand 可以是 anker, eufy 等等

```

查看所有Token https://headless-ui-doc.netlify.app?path=/docs/design-token--docs
Tokens 支持覆盖


```jsx

// 使用组件
import { Button, Skeleton } from '@anker-in/headless-ui'
import { HeroBanner } from '@anker-in/headless-ui/biz'

// ...

<Button size="lg" variant="primary">
    Primary
</Button>
<Button size="sm" variant="secondary">
    secondary
</Button>

<Skeleton className="w-[300px] h-[300px] rounded-full" />

<HeroBanner data={nammerConfig}>
```


❗❗❗异常处理

1. 如果出现 `import { XXX } from '@anker-in/headless-ui/biz'`  
typescript 报错的情况，可以把  


```json
"@anker-in/headless-ui/biz": [
        "./node_modules/@anker-in/headless-ui/dist/esm/biz-components/index"
      ],
```



添加到tsconfig 配置文件的"paths" 属性。
这可能是旧版本的`moduleResolution` 不支持