lingee-ui 0.0.6 → 0.0.7

package/skill/references/components/checkbox.md

@@ -0,0 +1,39 @@
+# Checkbox 多选框
+
+在一组选项中进行多项选择。
+
+- 导入：`import { Checkbox, CheckboxGroup } from "lingee-ui";`
+- 可用类型：`CheckboxProps`, `CheckboxGroupProps`, `CheckboxSize`
+
+## 最小示例
+
+```tsx
+import { Checkbox } from "lingee-ui";
+
+export default function BasicDemo() {
+  return <Checkbox defaultChecked>I agree to the terms of service</Checkbox>;
+}
+```
+
+## API
+
+### Checkbox
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `checked` | 选中状态（受控） | `boolean` | - |
+| `defaultChecked` | 默认选中状态（非受控） | `boolean` | `false` |
+| `indeterminate` | 半选状态 | `boolean` | `false` |
+| `onChange` | 选中变更回调 | `(checked: boolean) => void` | - |
+| `disabled` | 禁用 | `boolean` | `false` |
+| `children` | label 内容 | `ReactNode` | - |
+
+### CheckboxGroup
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `value` | 当前选中值（受控） | `string[]` | - |
+| `defaultValue` | 默认选中值（非受控） | `string[]` | `[]` |
+| `onChange` | 选中值变更回调 | `(value: string[]) => void` | - |
+| `disabled` | 禁用整组 | `boolean` | `false` |
+| `orientation` | 排列方向 | `"horizontal" \| "vertical"` | `"vertical"` |

package/skill/references/components/color-picker.md

@@ -0,0 +1,40 @@
+# ColorPicker 颜色选择器
+
+用于选择颜色值的交互组件。
+
+- 导入：`import { ColorPicker } from "lingee-ui";`
+- 可用类型：`ColorPickerProps`, `ColorPickerSize`
+
+## 最小示例
+
+```tsx
+import { useState } from "react";
+import { ColorPicker } from "lingee-ui";
+
+export default function BasicDemo() {
+  const [color, setColor] = useState("#495dff");
+
+  return (
+    <div style={{ width: 260 }}>
+      <ColorPicker value={color} onChange={setColor} />
+      <p style={{ marginTop: 12, fontSize: 14, color: "#666" }}>
+        Current color: {color}
+      </p>
+    </div>
+  );
+}
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `value` | 当前颜色值（受控） | `string` | - |
+| `defaultValue` | 默认颜色值（非受控） | `string` | - |
+| `onChange` | 颜色变化回调 | `(color: string) => void` | - |
+| `disabled` | 是否禁用 | `boolean` | `false` |
+| `disabledAlpha` | 是否禁用透明度 | `boolean` | `false` |
+| `size` | 尺寸 | `"sm" \| "md" \| "lg"` | `"md"` |
+| `error` | 是否显示错误状态 | `boolean` | `false` |
+| `placement` | 面板弹出方向 | `"top" \| "bottom" \| "left" \| "right"` | `"bottom"` |
+| `panelExtra` | 面板额外内容（如预设色板） | `ReactNode` | - |

package/skill/references/components/date-picker.md

@@ -0,0 +1,46 @@
+# DatePicker 日期选择器
+
+用于选择日期的输入组件。
+
+- 导入：`import { DatePicker } from "lingee-ui";`
+- 可用类型：`DatePickerProps`, `DatePickerSize`
+
+## 最小示例
+
+```tsx
+import { useState } from "react";
+import { DatePicker } from "lingee-ui";
+
+export default function BasicDemo() {
+  const [value, setValue] = useState<Date | null>(null);
+
+  return (
+    <div style={{ width: 292 }}>
+      {/* 不传 placeholder，展示组件跟随 Provider 语言的默认占位符 */}
+      <DatePicker value={value} onChange={(v) => setValue(v)} />
+      <p style={{ marginTop: 12, fontSize: 14, color: "#666" }}>
+        {value ? value.toLocaleDateString() : "—"}
+      </p>
+    </div>
+  );
+}
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `value` | 当前日期（受控） | `Date \| null` | - |
+| `defaultValue` | 默认日期（非受控） | `Date` | - |
+| `onChange` | 日期变化回调 | `(date: Date \| null) => void` | - |
+| `placeholder` | 占位文本 | `string` | `"年/月/日"` |
+| `disabled` | 是否禁用 | `boolean` | `false` |
+| `format` | 日期格式 | `string` | `"yyyy/MM/dd"` |
+| `size` | 尺寸 | `"sm" \| "md" \| "lg"` | `"md"` |
+| `error` | 是否显示错误状态 | `boolean` | `false` |
+| `errorMessage` | 错误提示信息 | `string` | - |
+| `disabledDate` | 禁用日期判断函数 | `(date: Date) => boolean` | - |
+| `minDate` | 最小可选日期 | `Date` | - |
+| `maxDate` | 最大可选日期 | `Date` | - |
+| `allowClear` | 是否允许清除 | `boolean` | `true` |
+| `showToday` | 是否显示今天按钮 | `boolean` | `true` |

package/skill/references/components/dialog.md

@@ -0,0 +1,68 @@
+# Dialog 弹出窗
+
+模态对话框，用于需要用户确认或填写信息的场景。支持声明式和命令式两种调用方式。
+
+- 导入：`import { Dialog } from "lingee-ui";`
+- 可用类型：`DialogProps`, `DialogConfirmOptions`
+
+## 最小示例
+
+```tsx
+import { useState } from "react";
+import { Dialog, Button } from "lingee-ui";
+
+export default function BasicDemo() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button variant="primary" onClick={() => setOpen(true)}>
+        Open dialog
+      </Button>
+      <Dialog
+        open={open}
+        onOpenChange={setOpen}
+        title="Dialog title"
+        okText="OK"
+        cancelText="Cancel"
+        onOk={() => setOpen(false)}
+        onCancel={() => setOpen(false)}
+      >
+        <p style={{ padding: "0 20px", color: "rgba(0,0,0,0.64)" }}>
+          This is the dialog content area. You can put anything here.
+        </p>
+      </Dialog>
+    </>
+  );
+}
+```
+
+## API
+
+### Dialog
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `open` | 是否打开 | `boolean` | - |
+| `onOpenChange` | 打开状态变化回调 | `(open: boolean) => void` | - |
+| `title` | 标题 | `ReactNode` | - |
+| `description` | 描述文本 | `ReactNode` | - |
+| `width` | 宽度 | `number` | `460` |
+| `closable` | 是否显示关闭按钮 | `boolean` | `true` |
+| `okText` | 确认按钮文本 | `string` | - |
+| `cancelText` | 取消按钮文本 | `string` | - |
+| `onOk` | 确认回调 | `() => void` | - |
+| `onCancel` | 取消回调 | `() => void` | - |
+| `children` | 内容区域 | `ReactNode` | - |
+
+### Dialog.confirm(options)
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `title` | 标题 | `ReactNode` | - |
+| `description` | 描述内容 | `ReactNode` | - |
+| `content` | 自定义内容 | `ReactNode` | - |
+| `okText` | 确认按钮文本 | `string` | `"确定"` |
+| `cancelText` | 取消按钮文本 | `string` | `"取消"` |
+| `okDanger` | 确认按钮是否为危险样式 | `boolean` | `false` |
+| `icon` | 自定义图标 | `ReactNode` | - |

package/skill/references/components/divider.md

@@ -0,0 +1,30 @@
+# Divider 分割线
+
+用于分隔内容区块，使页面结构更清晰。
+
+- 导入：`import { Divider } from "lingee-ui";`
+- 可用类型：`DividerProps`, `DividerVariant`, `DividerOrientation`
+
+## 最小示例
+
+```tsx
+import { Divider } from "lingee-ui";
+
+export default function BasicDemo() {
+  return (
+    <div>
+      <p>Content above</p>
+      <Divider />
+      <p>Content below</p>
+    </div>
+  );
+}
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `orientation` | 分割线方向 | `"horizontal" \| "vertical"` | `"horizontal"` |
+| `variant` | 颜色变体 | `"default" \| "muted" \| "emphasis"` | `"default"` |
+| `spacing` | 外间距（px） | `number` | - |

package/skill/references/components/drawer.md

@@ -0,0 +1,42 @@
+# Drawer 抽屉
+
+从屏幕边缘滑出的浮层面板，用于承载表单或详情内容。
+
+- 导入：`import { Drawer } from "lingee-ui";`
+- 可用类型：`DrawerProps`, `DrawerPlacement`
+
+## 最小示例
+
+```tsx
+import { useState } from "react";
+import { Drawer, Button } from "lingee-ui";
+
+export default function BasicDemo() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open drawer</Button>
+      <Drawer open={open} onOpenChange={setOpen} title="Basic drawer">
+        <p>This is the drawer content area.</p>
+        <p>Click the mask or the close button to dismiss it.</p>
+      </Drawer>
+    </>
+  );
+}
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `open` | 是否打开 | `boolean` | - |
+| `onOpenChange` | 打开状态变化回调 | `(open: boolean) => void` | - |
+| `title` | 标题 | `ReactNode` | - |
+| `placement` | 弹出方向 | `"left" \| "right" \| "top" \| "bottom"` | `"right"` |
+| `size` | 宽度/高度（取决于方向） | `number` | `378` |
+| `closable` | 是否显示关闭按钮 | `boolean` | `true` |
+| `mask` | 是否显示遮罩 | `boolean` | `true` |
+| `modal` | 是否为模态模式 | `boolean` | `false` |
+| `footer` | 底部操作区 | `ReactNode` | - |
+| `children` | 内容区域 | `ReactNode` | - |

package/skill/references/components/dropdown.md

@@ -0,0 +1,93 @@
+# Dropdown 下拉菜单
+
+向下弹出的操作菜单列表，支持图标、分组、危险操作、子菜单等。
+
+- 导入：`import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, DropdownCheckboxItem, DropdownRadioGroup, DropdownRadioItem, DropdownLabel, DropdownSeparator, DropdownGroup, DropdownSub, DropdownSubTrigger, DropdownSubContent, DropdownButton } from "lingee-ui";`
+- 可用类型：`DropdownProps`, `DropdownTriggerProps`, `DropdownContentProps`, `DropdownItemProps`, `DropdownCheckboxItemProps`, `DropdownRadioGroupProps`, `DropdownRadioItemProps`, `DropdownLabelProps`, `DropdownSeparatorProps`, `DropdownGroupProps`, `DropdownSubProps`, `DropdownSubTriggerProps`, `DropdownSubContentProps`, `DropdownItemData`, `DropdownMenuItemData`, `DropdownSeparatorData`, `DropdownLabelData`, `DropdownButtonProps`
+
+## 最小示例
+
+```tsx
+import { Dropdown, Button } from "lingee-ui";
+
+export default function BasicDemo() {
+  return (
+    <Dropdown
+      items={[
+        { key: "edit", label: "Edit" },
+        { key: "copy", label: "Copy" },
+        { key: "share", label: "Share" },
+      ]}
+    >
+      <Button>Actions</Button>
+    </Dropdown>
+  );
+}
+```
+
+## API
+
+### Dropdown
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `items` | 菜单项数据（快捷模式） | `DropdownItemData[]` | - |
+| `open` | 受控打开状态 | `boolean` | - |
+| `defaultOpen` | 非受控默认打开状态 | `boolean` | `false` |
+| `onOpenChange` | 打开状态变化回调 | `(open: boolean) => void` | - |
+| `modal` | 是否为模态弹出 | `boolean` | `true` |
+| `disabled` | 是否禁用 | `boolean` | `false` |
+| `selectedKeys` | 选中项 key 数组（显示勾选） | `string[]` | - |
+| `children` | 触发器元素 | `ReactNode` | - |
+
+### DropdownContent
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `side` | 弹出方向 | `"top" \| "bottom" \| "left" \| "right"` | `"bottom"` |
+| `align` | 对齐方式 | `"start" \| "center" \| "end"` | `"start"` |
+| `sideOffset` | 侧向偏移 | `number` | `4` |
+| `header` | 固定头部内容 | `ReactNode` | - |
+| `footer` | 固定底部内容 | `ReactNode` | - |
+
+### DropdownItem
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `onSelect` | 选中回调 | `(event: Event) => void` | - |
+| `disabled` | 是否禁用 | `boolean` | `false` |
+| `danger` | 是否为危险操作（红色） | `boolean` | `false` |
+| `icon` | 前缀图标 | `ReactNode` | - |
+| `description` | 副标题描述（显示在主文本下方） | `ReactNode` | - |
+| `selected` | 是否选中（显示勾选） | `boolean` | `false` |
+| `children` | 菜单项内容 | `ReactNode` | - |
+
+## DropdownButton 触发器按钮
+
+统一的下拉触发器按钮组件，提供两种视觉态：
+- **Default**：透明背景 + 深色文字，hover 时浅灰底
+- **Selected**：蓝色浅底 + 蓝色文字，支持 hover 显示清除图标
+- **Glassy**：半透明白底 + 描边，适用于有色背景
+
+适用于所有 Dropdown / Popover 的触发按钮，替代各处手写的 trigger button，确保高度、间距、hover 背景色统一。
+
+<DemoBox source={dropdownButtonSource}>
+  <DropdownButtonDemo />
+</DemoBox>
+
+### DropdownButton
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `children` | 按钮文本 | `ReactNode` | - |
+| `variant` | 按钮变体 | `"default" \| "glassy"` | `"default"` |
+| `size` | 尺寸 | `"sm" \| "lg"` | `"sm"` |
+| `icon` | 前置图标 | `ReactNode` | - |
+| `selected` | 是否已有选中内容（蓝色态） | `boolean` | `false` |
+| `open` | 是否展开态（箭头旋转 180°） | `boolean` | `false` |
+| `clearable` | hover 时是否显示清除图标 | `boolean` | `false` |
+| `hideArrow` | 隐藏箭头（用于纯 toggle 按钮） | `boolean` | `false` |
+| `disabled` | 是否禁用 | `boolean` | `false` |
+| `onClear` | 清除回调 | `(e: MouseEvent) => void` | - |
+| `onClick` | 点击回调 | `(e: MouseEvent) => void` | - |
+| `className` | 额外类名 | `string` | - |

package/skill/references/components/empty.md

@@ -0,0 +1,28 @@
+# Empty 空状态
+
+当目标区域无数据时展示的空状态占位图，引导用户进行下一步操作。
+
+- 导入：`import { Empty } from "lingee-ui";`
+- 可用类型：`EmptyProps`, `EmptySize`, `EmptyIconComponent`
+
+## 最小示例
+
+```tsx
+import { Empty } from "lingee-ui";
+import { Search } from "lingee-icon";
+
+export default function BasicDemo() {
+  return <Empty icon={Search} description="No data" />;
+}
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `icon` | 图标：传 lingee-icon 组件自动注入渐变，传 ReactNode 完全自定义，不传使用默认图标 | `ComponentType<SvgIconProps> \| ReactNode` | 默认 DocumentLibrary |
+| `description` | 描述文字 | `ReactNode` | - |
+| `size` | 尺寸：`lg` 页面级 / `md` 局部（默认）/ `sm` 迷你 | `"sm" \| "md" \| "lg"` | `"md"` |
+| `children` | 自定义底部内容（如操作按钮） | `ReactNode` | - |
+| `className` | 自定义类名 | `string` | - |
+| `style` | 自定义内联样式 | `CSSProperties` | - |

package/skill/references/components/flex.md

@@ -0,0 +1,44 @@
+# Flex 弹性布局
+
+弹性布局容器，用于快速搭建横向/纵向排列，避免为简单布局单独写样式文件。
+
+- 导入：`import { Flex } from "lingee-ui";`
+- 可用类型：`FlexProps`, `FlexOrientation`, `FlexGapSize`
+
+## 最小示例
+
+```tsx
+import { Flex, Button } from "lingee-ui";
+
+export default function BasicDemo() {
+  return (
+    <Flex gap="small" align="center">
+      <Button variant="primary">OK</Button>
+      <Button>Cancel</Button>
+    </Flex>
+  );
+}
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `vertical` | 主轴方向是否垂直（等价 `flex-direction: column`） | `boolean` | `false` |
+| `orientation` | 主轴方向，与 `vertical` 同时存在时 `vertical` 优先 | `"horizontal" \| "vertical"` | `"horizontal"` |
+| `wrap` | 是否换行，布尔值为 `wrap` / `nowrap` 简写 | `boolean \| CSSProperties["flexWrap"]` | `"nowrap"` |
+| `justify` | 主轴对齐方式 | `CSSProperties["justifyContent"]` | - |
+| `align` | 交叉轴对齐方式 | `CSSProperties["alignItems"]` | - |
+| `flex` | `flex` CSS 简写 | `CSSProperties["flex"]` | - |
+| `gap` | 间隙，预设值映射设计间距 Token，也可传自定义数值/字符串 | `"small" \| "medium" \| "large" \| string \| number` | - |
+| `component` | 自定义渲染的元素类型 | `React.ElementType` | `"div"` |
+
+其余原生 `HTMLAttributes` 均可透传。
+
+### gap 预设
+
+| 值 | 对应 Token |
+|----|-----------|
+| `small` | `--lg-spacing-x-small` |
+| `medium` | `--lg-spacing-medium` |
+| `large` | `--lg-spacing-large` |

package/skill/references/components/form.md

@@ -0,0 +1,57 @@
+# Form 表单
+
+数据录入和校验组件，支持垂直、水平、行内布局。
+
+- 导入：`import { Form } from "lingee-ui";`
+- 可用类型：`FormProps`, `FormItemProps`, `FormInstance`, `FormLayout`, `Rule`
+
+## 最小示例
+
+```tsx
+import { Form, Input, Button } from "lingee-ui";
+
+export default function BasicDemo() {
+  return (
+    <Form layout="vertical" onFinish={(values) => console.log(values)}>
+      <Form.Item label="Username" name="username" required>
+        <Input placeholder="Enter your username" />
+      </Form.Item>
+      <Form.Item label="Password" name="password" required>
+        <Input type="password" placeholder="Enter your password" />
+      </Form.Item>
+      <Form.Item>
+        <Button variant="primary" htmlType="submit">
+          Submit
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+}
+```
+
+## API
+
+### Form
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `layout` | 表单布局 | `"vertical" \| "horizontal" \| "inline"` | `"vertical"` |
+| `labelWidth` | 标签宽度（水平布局时） | `number` | - |
+| `initialValues` | 表单初始值 | `Record<string, any>` | - |
+| `form` | Form 实例（useForm 创建） | `FormInstance` | - |
+| `onFinish` | 提交且校验通过回调 | `(values) => void` | - |
+| `onFinishFailed` | 校验失败回调 | `() => void` | - |
+
+### Form.Item
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `label` | 标签文本 | `ReactNode` | - |
+| `name` | 字段名 | `string` | - |
+| `required` | 是否必填 | `boolean` | `false` |
+| `rules` | 校验规则 | `Rule[]` | - |
+| `valuePropName` | 值属性名 | `string` | `"value"` |
+
+### Form.useForm
+
+返回 `[form]` 实例，提供 `resetFields()`、`setFieldsValue()`、`getFieldsValue()` 等方法。

package/skill/references/components/image.md

@@ -0,0 +1,37 @@
+# Image 图片预览
+
+图片展示组件，支持点击放大预览、旋转、缩放等操作。
+
+- 导入：`import { Image } from "lingee-ui";`
+- 可用类型：`ImageProps`, `PreviewType`, `ImagePreviewGroupProps`, `PreviewGroupType`, `CoverConfig`, `TransformType`, `TransformAction`, `ImgInfo`
+
+## 最小示例
+
+```tsx
+import { Image } from "lingee-ui";
+
+export default function BasicDemo() {
+  return (
+    <Image
+      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+      alt="Sample image"
+      width={200}
+      height={200}
+      style={{ objectFit: "cover", borderRadius: 8 }}
+    />
+  );
+}
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `src` | 图片地址 | `string` | - |
+| `alt` | 替代文本 | `string` | - |
+| `width` | 宽度 | `number \| string` | - |
+| `height` | 高度 | `number \| string` | - |
+| `preview` | 预览配置，`false` 禁用预览 | `boolean \| { src?, cover?, open?, onOpenChange? }` | `true` |
+| `fallback` | 加载失败兜底图地址 | `string` | - |
+| `placeholder` | 加载占位 | `boolean \| ReactNode \| { progress }` | - |
+| `style` | 自定义样式 | `CSSProperties` | - |

package/skill/references/components/input.md

@@ -0,0 +1,33 @@
+# Input 输入框
+
+用于接收用户的文本输入。
+
+- 导入：`import { Input } from "lingee-ui";`
+- 可用类型：`InputProps`, `InputSize`, `InputShape`
+
+## 最小示例
+
+```tsx
+import { Input } from "lingee-ui";
+
+export default function BasicDemo() {
+  return <Input placeholder="Enter text" />;
+}
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `size` | 输入框尺寸 | `"sm" \| "md" \| "lg"` | `"md"` |
+| `shape` | 输入框形状 | `"default" \| "round"` | `"default"` |
+| `prefix` | 前缀内容 | `ReactNode` | - |
+| `suffix` | 后缀内容 | `ReactNode` | - |
+| `allowClear` | 是否显示清空按钮 | `boolean` | `false` |
+| `error` | 错误状态 | `boolean` | `false` |
+| `disabled` | 禁用状态 | `boolean` | `false` |
+| `collapsed` | 折叠为正方形，仅展示单个插槽；受控，展开时机由 `onClick` 自行处理 | `boolean` | `false` |
+| `onPressEnter` | 按下 Enter 键回调 | `(e: KeyboardEvent) => void` | - |
+| `placeholder` | 占位提示文字 | `string` | - |
+| `value` | 输入值（受控） | `string` | - |
+| `onChange` | 值变更回调 | `(e: ChangeEvent) => void` | - |

package/skill/references/components/pagination.md

@@ -0,0 +1,42 @@
+# Pagination 分页
+
+当数据量较大时，使用分页拆分数据，方便用户快速定位。
+
+- 导入：`import { Pagination } from "lingee-ui";`
+- 可用类型：`PaginationProps`, `PaginationVariant`
+
+## 最小示例
+
+```tsx
+import { useState } from "react";
+import { Pagination } from "lingee-ui";
+
+export default function BasicDemo() {
+  const [current, setCurrent] = useState(1);
+
+  return (
+    <Pagination
+      total={100}
+      current={current}
+      pageSize={10}
+      showTotal
+      onChange={(page) => setCurrent(page)}
+    />
+  );
+}
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `total` | 数据总条数 | `number` | `0` |
+| `current` | 当前页码（受控） | `number` | - |
+| `defaultCurrent` | 默认页码 | `number` | `1` |
+| `pageSize` | 每页条数 | `number` | `20` |
+| `onChange` | 页码变化回调 | `(page: number, pageSize: number) => void` | - |
+| `showTotal` | 是否显示总条数 | `boolean` | `false` |
+| `showSizeChanger` | 是否显示每页条数切换 | `boolean` | `false` |
+| `showQuickJumper` | 是否显示快速跳转 | `boolean` | `false` |
+| `variant` | 样式变体 | `"simple" \| "bordered" \| "borderless"` | `"bordered"` |
+| `disabled` | 是否禁用 | `boolean` | `false` |

package/skill/references/components/popover.md

@@ -0,0 +1,45 @@
+# Popover 气泡弹出层
+
+点击/悬停在元素上时弹出气泡式浮层，用于承载更多内容。
+
+- 导入：`import { Popover, PopoverTrigger, PopoverAnchor, PopoverContent, PopoverArrow, PopoverClose } from "lingee-ui";`
+- 按需导入：`import { Popover } from "lingee-ui/popover";`
+- 可用类型：`PopoverProps`, `PopoverTriggerProps`, `PopoverAnchorProps`, `PopoverContentProps`, `PopoverArrowProps`, `PopoverCloseProps`, `PopoverPlacement`
+
+## 最小示例
+
+```tsx
+import { Popover, PopoverTrigger, PopoverContent, Button } from "lingee-ui";
+
+export default function BasicDemo() {
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <Button>Click me</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <p style={{ margin: 0 }}>This is the content of the popover.</p>
+      </PopoverContent>
+    </Popover>
+  );
+}
+```
+
+## API
+
+### Popover
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `open` | 受控打开状态 | `boolean` | - |
+| `onOpenChange` | 打开状态变化回调 | `(open: boolean) => void` | - |
+| `modal` | 是否为模态模式 | `boolean` | `false` |
+| `children` | 子元素（Trigger + Content） | `ReactNode` | - |
+
+### PopoverContent
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `side` | 弹出方向 | `"top" \| "bottom" \| "left" \| "right"` | `"bottom"` |
+| `align` | 对齐方式 | `"start" \| "center" \| "end"` | `"center"` |
+| `sideOffset` | 弹出层与触发器的间距 | `number` | `4` |