U

Author: Onlylonger

docs/components/button/index.mdx

@@ -7,3 +7,10 @@
 <code src="./playground.tsx" />
 
 ## API
+
+Extended from `button`
+
+| Property | Description | Type                                                                                       | Default Value |
+| -------- | ----------- | ------------------------------------------------------------------------------------------ | ------------- |
+| variant  | 变体类型    | `"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| undefined` | `undefined`   |
+| size     | 大小        | `"default" \| "sm" \| "lg" \| "icon" \| undefined`                                         | `undefined`   |

docs/components/button/playground.tsx

@@ -1,7 +1,15 @@
 import { Button } from '@shilong/react'
+import React from 'react'
 
 function App() {
-  return <Button onClick={() => alert('Ooops')}>Click Me!</Button>
+  const [variant] = React.useState()
+  const [size] = React.useState()
+
+  return (
+    <Button variant={variant} size={size} onClick={() => alert('Ooops')}>
+      Click Me!
+    </Button>
+  )
 }
 
 export default App

docs/components/popover/index.mdx

@@ -0,0 +1,23 @@
+# Popover
+
+用户在某个参考元素上，动态显示某个弹框元素. 基于 [floating-ui](https://github.com/floating-ui/floating-ui)
+
+## Playground
+
+<code src="./playground.tsx" />
+
+## API
+
+| Property           | Description                        | Type                                                                                                                                                               | Default Value |
+| ------------------ | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
+| trigger            | 触发元素                           | `React.ReactElement`                                                                                                                                               | -             |
+| dismiss            | 是否打开键盘`esc`和弹窗外 点击关闭 | `boolean`                                                                                                                                                          | `true`        |
+| hover              | 是否开启 `hover` 打开弹窗          | `boolean`                                                                                                                                                          | `false`       |
+| click              | 是否开启 `click` 打开弹窗          | `boolean`                                                                                                                                                          | `true`        |
+| arrow              | 是否开启 弹窗箭头                  | `boolean`                                                                                                                                                          | `false`       |
+| offsetHeight       | `trigger元素` 与 弹窗 距离         | `number`                                                                                                                                                           | `0`           |
+| floatingArrowProps | 箭头额外属性                       | Omit\<[FloatingArrowProps](https://floating-ui.com/docs/floatingarrow), 'context'\>                                                                                | `{}`          |
+| children           |                                    | `React.ReactElement`                                                                                                                                               | -             |
+| onOpenChange       | 打开弹窗时回调函数                 | `((open: boolean, event?: Event, reason?: OpenChangeReason) => void) \| undefined`                                                                                 | -             |
+| placement          | 弹窗位置                           | `"top" \| "right" \| "bottom" \| "left"\|"top-start" \| "top-end" \| "right-start" \| "right-end" \| "bottom-start" \| "bottom-end" \| "left-start" \| "left-end"` | `bottom`      |
+| open               | 弹窗打开状态                       | `boolean`                                                                                                                                                          | `-`           |

docs/components/popover/playground.tsx

@@ -0,0 +1,11 @@
+import { Button, Popover } from '@shilong/react'
+
+function App() {
+  return (
+    <Popover trigger={<Button variant="outline">Click && Hover</Button>} hover>
+      <div style={{ border: '1px solid black' }}>nihao</div>
+    </Popover>
+  )
+}
+
+export default App

docs/components/toast.mdx

@@ -0,0 +1,12 @@
+# Toast
+
+当有信息反馈的时候，可以使用 `Toaster` + `toast` 方法动态提供反馈实时信息给到用户。
+当前是使用的 [sonner](https://github.com/emilkowalski/sonner) 库.
+
+## Playground
+
+<code src="./playground.tsx" />
+
+## API
+
+请查阅 [sonner](https://sonner.emilkowal.ski/getting-started)

docs/components/toast/index.mdx

@@ -0,0 +1,14 @@
+import { Button, toast, Toaster } from '@shilong/react'
+import ReactDom from 'react-dom'
+
+function App() {
+  return (
+    <>
+      <Button onClick={() => toast('nihao')}>Show Toast!</Button>
+      {/* createPortal is optional. Use it when your layers are incorrect and cannot be easily modified. */}
+      {ReactDom.createPortal(<Toaster position="top-center" />, document.body)}
+    </>
+  )
+}
+
+export default App

docs/components/toast/playground.tsx

@@ -8,7 +8,7 @@
 pnpm add @shilong/react
 ```
 
-## 2. 加载主题样式.
+## 2. 加载主题样式
 
 ```tsx "title=index.tsx" {5}
 import { StrictMode } from 'react'
@@ -38,18 +38,17 @@ createRoot(document.querySelector('#app')!).render(
 
 :::
 
-## 3. 使用
+import { Button } from '@shilong/react'
 
-```tsx preview
-import { Button, Toaster, toast } from '@shilong/react'
+## 3. 使用 <Button variant='link'><a href="/components/button">查看文档</a></Button>
+
+```tsx playground
+import { Button } from '@shilong/react'
 
 function App() {
   return (
     <div>
-      <Button variant="outline">Hello World</Button>
-      &nbsp;&nbsp;
-      <Button onClick={() => toast('Hi!')}>Toast</Button>
-      <Toaster position="bottom-center" />
+      <Button>Hi 👋</Button>
     </div>
   )
 }

docs/index.mdx

@@ -0,0 +1,4 @@
+table thead,
+tbody {
+  width: 100%;
+}

docs/theme/global.css

@@ -1,5 +1,6 @@
 import Theme from 'rspress/theme'
 import '@shilong/react/style.css'
+import './global.css'
 
 export default {
   ...Theme,