lingee-ui 0.0.5 → 0.0.7

package/skill/references/components/tabs.md

@@ -0,0 +1,49 @@
+# Tabs 页签
+
+选项卡切换组件，支持多种风格变体和尺寸。
+
+- 导入：`import { Tabs } from "lingee-ui";`
+- 按需导入：`import { Tabs } from "lingee-ui/tabs";`
+- 可用类型：`TabsProps`, `TabItem`, `TabsVariant`, `TabsSize`
+
+## 最小示例
+
+```tsx
+import { Tabs } from "lingee-ui";
+
+const items = [
+  { key: "tab1", label: "Tab One" },
+  { key: "tab2", label: "Tab Two" },
+  { key: "tab3", label: "Tab Three" },
+];
+
+export default function BasicDemo() {
+  return <Tabs items={items} defaultActiveKey="tab1" />;
+}
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `items` | 标签项配置 | `TabItem[]` | - |
+| `activeKey` | 当前激活 key（受控） | `string` | - |
+| `defaultActiveKey` | 默认激活 key（非受控） | `string` | - |
+| `onChange` | 切换回调 | `(key: string) => void` | - |
+| `variant` | 风格变体 | `"segmented" \| "rounded" \| "solid" \| "outline" \| "underline"` | `"segmented"` |
+| `size` | 尺寸 | `"sm" \| "md"` | `"md"` |
+| `glassy` | 滑块玻璃高光效果 | `boolean` | `false` |
+| `transparent` | 容器背景透明（去掉灰底） | `boolean` | `false` |
+| `animated` | 是否开启内容切换动画 | `boolean` | `true` |
+| `destroyInactivePanel` | 切走时是否销毁非活跃面板 | `boolean` | `false` |
+
+### TabItem
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `key` | 唯一标识 | `string` | - |
+| `label` | 标签文本 | `ReactNode` | - |
+| `children` | 面板内容 | `ReactNode` | - |
+| `icon` | 图标 | `ReactNode` | - |
+| `suffix` | 后缀（如徽标） | `ReactNode` | - |
+| `disabled` | 是否禁用 | `boolean` | `false` |

package/skill/references/components/tag.md

@@ -0,0 +1,59 @@
+# Tag 标签
+
+用于标记和分类的小型标签元素。
+
+- 导入：`import { Tag } from "lingee-ui";`
+- 可用类型：`TagProps`, `TagPresetColor`, `TagSize`, `TagShape`
+
+## 最小示例
+
+```tsx
+import { Tag } from "lingee-ui";
+
+export default function BasicDemo() {
+  return (
+    <div style={{ display: "flex", gap: 8 }}>
+      <Tag>Default</Tag>
+      <Tag color="primary">Primary</Tag>
+    </div>
+  );
+}
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `color` | 标签颜色 | `"info" \| "primary" \| "success" \| "warning" \| "danger" \| "amber" \| "yellow" \| "cyan" \| "purple" \| string` | `"info"` |
+| `variant` | 视觉变体 | `"tint" \| "gradient" \| "glow"` | `"tint"` |
+| `size` | 标签尺寸 | `"sm" \| "md" \| "lg"` | `"md"` |
+| `shape` | 圆角形状（仅 `variant="tint"` 生效） | `"pill" \| "rounded"` | `"pill"` |
+| `icon` | 前缀图标 | `ReactNode` | - |
+| `background` | 自定义背景 | `string` | - |
+| `closable` | 是否可关闭 | `boolean` | `false` |
+| `onClose` | 关闭回调 | `(e: MouseEvent) => void` | - |
+| `children` | 子内容 | `ReactNode` | - |
+
+### 变体说明
+
+| 变体 | 圆角 | 背景 | 装饰 | 适用场景 |
+|------|------|------|------|----------|
+| `tint` | 由 `shape` 决定 | 同色 8% 纯色浅底 | - | 通用标记、分类 |
+| `gradient` | 8px | 同色 12% → 3% 斜向渐变 | - | 提示类徽标 |
+| `glow` | 12px | 同色 8/12% → 28% 渐变 | 两层模糊光斑 | 等级类徽标 |
+
+`glow` 的 `purple` 使用 128.7° 斜向渐变，`yellow` / `cyan` 使用自上而下的纵向渐变。
+
+### 样式变量
+
+以下 CSS 变量可在消费方覆盖，用于微调间距、图标尺寸与光斑配色：
+
+| 变量 | 说明 | 默认值 |
+|------|------|--------|
+| `--_tag-gap` | 图标与文字间距 | `2px`（gradient `4px`、glow `10px`） |
+| `--_tag-icon-size` | 图标尺寸 | `14px`（`size="lg"` 与 gradient 的 `danger` 为 `16px`） |
+| `--_tag-font-weight` | 字重 | `400`（glow 为 `500`） |
+| `--_tag-gradient-from` | 渐变起始色（gradient / glow） | 按 `color` 取同色 12%（glow 的 `purple` 为 8%） |
+| `--_tag-gradient-to` | 渐变结束色（gradient / glow） | gradient 取同色 3%，glow 取 28% |
+| `--_tag-glow-primary` | 底层光斑色（仅 glow） | 按 `color` 取对应装饰色 |
+| `--_tag-glow-secondary` | 高光层光斑色（仅 glow） | `rgba(255, 255, 255, 0.64)`（`purple` 为 `0.59`） |

package/skill/references/components/textarea.md

@@ -0,0 +1,30 @@
+# Textarea 多行文本框
+
+多行纯文本编辑控件，支持字数统计和自动高度。
+
+- 导入：`import { Textarea } from "lingee-ui";`
+- 可用类型：`TextareaProps`
+
+## 最小示例
+
+```tsx
+import { Textarea } from "lingee-ui";
+
+export default function BasicDemo() {
+  return <Textarea placeholder="Please enter content..." rows={4} />;
+}
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `placeholder` | 占位文本 | `string` | - |
+| `rows` | 显示行数 | `number` | - |
+| `maxLength` | 最大字符数 | `number` | - |
+| `showCount` | 是否显示字数统计 | `boolean` | `false` |
+| `autoSize` | 自适应高度 | `boolean \| { minRows: number; maxRows: number }` | - |
+| `disabled` | 是否禁用 | `boolean` | `false` |
+| `error` | 是否为错误状态 | `boolean` | `false` |
+| `value` | 受控值 | `string` | - |
+| `onChange` | 值变化回调 | `(e: ChangeEvent) => void` | - |

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

@@ -0,0 +1,49 @@
+# TimePicker 时间选择器
+
+用于选择时间的输入组件。
+
+- 导入：`import { TimePicker } from "lingee-ui";`
+- 可用类型：`TimePickerProps`, `TimePickerSize`, `TimeValue`
+
+## 最小示例
+
+```tsx
+import { useState } from "react";
+import { TimePicker } from "lingee-ui";
+
+export default function BasicDemo() {
+  const [value, setValue] = useState(null);
+
+  return (
+    <div style={{ width: 292 }}>
+      {/* 不传 placeholder，展示组件跟随 Provider 语言的默认占位符 */}
+      <TimePicker value={value} onChange={(v) => setValue(v)} />
+    </div>
+  );
+}
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `value` | 当前时间（受控） | `TimeValue \| null` | - |
+| `defaultValue` | 默认时间（非受控） | `TimeValue` | - |
+| `onChange` | 时间变化回调 | `(time: TimeValue \| null) => void` | - |
+| `placeholder` | 占位文本 | `string` | `"时:分"` |
+| `disabled` | 是否禁用 | `boolean` | `false` |
+| `showSeconds` | 是否显示秒 | `boolean` | `false` |
+| `size` | 尺寸 | `"sm" \| "md" \| "lg"` | `"md"` |
+| `error` | 是否显示错误状态 | `boolean` | `false` |
+| `errorMessage` | 错误提示信息 | `string` | - |
+| `allowClear` | 是否允许清除 | `boolean` | `true` |
+
+### TimeValue
+
+```ts
+interface TimeValue {
+  hour: number;
+  minute: number;
+  second?: number;
+}
+```

package/skill/references/components/toast.md

@@ -0,0 +1,47 @@
+# Toast 全局提示
+
+命令式全局提示组件，用于操作反馈。
+
+- 导入：`import { toast } from "lingee-ui";`
+- 按需导入：`import { toast } from "lingee-ui/toast";`
+- 可用类型：`ToastConfig`, `ToastGlobalConfig`, `ToastType`
+
+## 最小示例
+
+```tsx
+import { toast, Button } from "lingee-ui";
+
+export default function BasicDemo() {
+  return (
+    <div style={{ display: "flex", gap: 12 }}>
+      <Button onClick={() => toast.success("Operation succeeded!")}>Success</Button>
+      <Button onClick={() => toast.error("Something went wrong, please retry")}>Error</Button>
+      <Button onClick={() => toast.warning("Heads up, this is a warning")}>Warning</Button>
+      <Button onClick={() => toast.info("This is an informational message")}>Info</Button>
+    </div>
+  );
+}
+```
+
+## API
+
+Toast 通过命令式方法调用，无需手动渲染组件。
+
+### 方法
+
+| 方法 | 说明 | 参数 |
+|------|------|------|
+| `toast.success(message)` | 成功提示 | `string \| ToastOptions` |
+| `toast.error(message)` | 错误提示 | `string \| ToastOptions` |
+| `toast.warning(message)` | 警告提示 | `string \| ToastOptions` |
+| `toast.info(message)` | 信息提示 | `string \| ToastOptions` |
+| `toast.destroy()` | 销毁所有消息 | - |
+
+### ToastOptions
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `content` | 提示内容 | `string` | - |
+| `duration` | 自动关闭延时（ms），0 为不关闭 | `number` | `3000` |
+| `closable` | 是否可手动关闭 | `boolean` | `false` |
+| `key` | 唯一标识，相同 key 会更新内容 | `string` | - |

package/skill/references/components/tooltip.md

@@ -0,0 +1,33 @@
+# Tooltip 文字提示
+
+鼠标悬停时显示的简短提示信息。
+
+- 导入：`import { Tooltip } from "lingee-ui";`
+- 按需导入：`import { Tooltip } from "lingee-ui/tooltip";`
+- 可用类型：`TooltipProps`, `TooltipPlacement`
+
+## 最小示例
+
+```tsx
+import { Tooltip, Button } from "lingee-ui";
+
+export default function BasicDemo() {
+  return (
+    <Tooltip content="This is a tooltip.">
+      <Button>Hover me</Button>
+    </Tooltip>
+  );
+}
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `content` | 提示内容 | `ReactNode` | - |
+| `placement` | 弹出方向 | `"top" \| "bottom" \| "left" \| "right" \| "top-start" \| "top-end" \| ...` | `"top"` |
+| `delayDuration` | hover 延迟展示时间（ms） | `number` | `200` |
+| `arrow` | 是否显示箭头 | `boolean` | `true` |
+| `maxWidth` | 浮层最大宽度（px） | `number` | `280` |
+| `scrollable` | 内容超出视口可用高度时限高并滚动 | `boolean` | `true` |
+| `children` | 触发元素 | `ReactNode` | - |

package/skill/references/components/upload.md

@@ -0,0 +1,38 @@
+# Upload 上传
+
+文件上传组件，支持点击和拖拽上传。
+
+- 导入：`import { Upload } from "lingee-ui";`
+- 可用类型：`UploadProps`, `UploadFile`, `UploadFileStatus`, `CustomRequestOptions`, `CustomRequestReturn`, `RejectReason`, `FileItemActions`
+
+## 最小示例
+
+```tsx
+import { Upload, Button } from "lingee-ui";
+
+export default function BasicDemo() {
+  return (
+    <Upload
+      onChange={(fileList) => console.log("File list:", fileList)}
+    >
+      <Button>Click to upload</Button>
+    </Upload>
+  );
+}
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `accept` | 接受的文件类型 | `string` | - |
+| `multiple` | 是否允许多选 | `boolean` | `false` |
+| `disabled` | 是否禁用 | `boolean` | `false` |
+| `drag` | 是否启用拖拽上传 | `boolean` | `false` |
+| `maxCount` | 最大文件数量 | `number` | - |
+| `maxSize` | 单文件最大大小（字节） | `number` | - |
+| `fileList` | 文件列表（受控） | `UploadFile[]` | - |
+| `showFileList` | 是否显示文件列表 | `boolean` | `true` |
+| `onChange` | 文件列表变化回调 | `(fileList: UploadFile[]) => void` | - |
+| `customRequest` | 自定义上传请求 | `(options: CustomRequestOptions) => { abort }` | - |
+| `children` | 触发区域 | `ReactNode` | - |