open-index/open-npm huggingface dataset:
npm package: @sea-lion/react-blockquote
Description: Blockquote 是引用块组件，用于展示引用内容，支持多种尺寸、字重、颜色与文本换行控制。
Author: jsweber
Latest version: 0.3.0

# `react-blockquote`

Blockquote 是引用块组件，用于展示引用内容，支持多种尺寸、字重、颜色与文本换行控制。

## 安装

```sh
pnpm add @sea-lion/react-blockquote
# 或者
npm install @sea-lion/react-blockquote
yarn add @sea-lion/react-blockquote
```

## 使用

在代码中引入组件：

```tsx
import { Blockquote } from '@sea-lion/react-blockquote';
```

### 基本用法

```jsx
<Blockquote>道可道，非常道。名可名，非常名。</Blockquote>
<Blockquote size="3" color="blue">带尺寸和颜色的引用</Blockquote>
```

### 不同尺寸

支持尺寸 `"1"` 至 `"9"`，尺寸越大文字越大：

```jsx
<Flex direction="column" gap="4">
  {['1', '2', '3', '4', '5', '6', '7', '8', '9'].map((size) => (
    <Blockquote key={size} size={size}>
      道可道，非常道。名可名，非常名。
    </Blockquote>
  ))}
</Flex>
```

### 不同字重

通过 `weight` 属性设置字体粗细：

```jsx
<Flex direction="column" gap="4">
  <Blockquote weight="light">light — 道可道，非常道。</Blockquote>
  <Blockquote weight="regular">regular — 道可道，非常道。</Blockquote>
  <Blockquote weight="medium">medium — 道可道，非常道。</Blockquote>
  <Blockquote weight="bold">bold — 道可道，非常道。</Blockquote>
</Flex>
```

### 不同颜色

通过 `color` 属性设置引用块的颜色主题：

```jsx
<Flex direction="column" gap="4">
  {['gray', 'gold', 'bronze', 'red', 'blue', 'green'].map((color) => (
    <Blockquote key={color} color={color}>
      道可道，非常道。名可名，非常名。
    </Blockquote>
  ))}
</Flex>
```

### 文本换行控制

通过 `truncate` 和 `wrap` 属性控制文本换行行为：

```jsx
<div style={{ width: '400px' }}>
  {/* 默认换行 */}
  <Blockquote>
    人法地，地法天，天法道，道法自然。上善若水，水善利万物而不争。
  </Blockquote>

  {/* 单行省略 */}
  <Blockquote truncate>
    人法地，地法天，天法道，道法自然。上善若水，水善利万物而不争。
  </Blockquote>

  {/* 禁止换行 */}
  <Blockquote wrap="nowrap">
    人法地，地法天，天法道，道法自然。上善若水，水善利万物而不争。
  </Blockquote>
</div>
```

### 高对比度

通过 `highContrast` 属性启用高对比度模式：

```jsx
<Flex direction="column" gap="4">
  {['gray', 'gold', 'bronze', 'red', 'blue', 'green'].map((color) => (
    <Blockquote key={color} color={color} highContrast>
      道可道，非常道。名可名，非常名。
    </Blockquote>
  ))}
</Flex>
```

## Props / API

### Blockquote

| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| `size` | 文字尺寸 | `"1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9"` | `"3"` |
| `weight` | 字体粗细 | `"light" \| "regular" \| "medium" \| "bold"` | `"regular"` |
| `color` | 颜色主题 | `"gray" \| "gold" \| "bronze" \| "red" \| "blue" \| "green"` | `"gray"` |
| `highContrast` | 是否使用高对比度 | `boolean` | `false` |
| `truncate` | 是否单行省略 | `boolean` | `false` |
| `wrap` | 文本换行方式 | `"wrap" \| "nowrap" \| "balance" \| "pretty"` | - |
| `children` | 引用内容 | `React.ReactNode` | - |

## 查看更多

参考 [Radix UI 官方文档](https://www.radix-ui.com/themes/docs/components/blockquote) 获取完整 API 与设计规范。
npm package: @sea-lion/react-checkbox
Description: Checkbox 是一个复选框组件，用于在表单中进行多选操作。支持选中、未选中、半选状态，多种颜色主题和禁用状态。
Author: jsweber
Latest version: 0.3.0

# `react-checkbox`

Checkbox 是一个复选框组件，用于在表单中进行多选操作。支持选中、未选中、半选状态，多种颜色主题和禁用状态。

## 安装

```sh
pnpm add @sea-lion/react-checkbox
# 或者
npm install @sea-lion/react-checkbox
yarn add @sea-lion/react-checkbox
```

## 使用

在代码中引入组件：

```tsx
import { Checkbox } from '@sea-lion/react-checkbox';
```

### 基本用法

```jsx
<Checkbox />
<Checkbox defaultChecked />
<Checkbox checked={checked} onCheckedChange={setChecked} />
<Checkbox checked="indeterminate" />
```

### 不同状态

Checkbox 支持三种状态：选中、未选中和半选（`indeterminate`）。

```jsx
<Flex direction="column" gap="4">
  <Flex align="center" gap="2">
    <Checkbox defaultChecked />
    <Text>选中状态</Text>
  </Flex>

  <Flex align="center" gap="2">
    <Checkbox checked="indeterminate" />
    <Text>半选状态</Text>
  </Flex>

  <Flex align="center" gap="2">
    <Checkbox disabled />
    <Text color="gray">禁用状态</Text>
  </Flex>

  <Flex align="center" gap="2">
    <Checkbox disabled defaultChecked />
    <Text color="gray">禁用且选中</Text>
  </Flex>
</Flex>
```

### 不同颜色

通过 `color` 属性设置复选框颜色主题：

```jsx
<Flex direction="column" gap="4">
  {['gray', 'gold', 'bronze', 'red', 'blue', 'green'].map((color) => (
    <Flex key={color} align="center" gap="2">
      <Checkbox color={color} defaultChecked />
      <Text>{color} 主题</Text>
    </Flex>
  ))}
</Flex>
```

### 高对比度

通过 `highContrast` 属性启用高对比度模式，使复选框在深色背景下更清晰：

```jsx
<Flex direction="column" gap="4">
  {['gray', 'gold', 'bronze', 'red', 'blue', 'green'].map((color) => (
    <Flex key={color} align="center" gap="2">
      <Checkbox color={color} highContrast defaultChecked />
      <Text>高对比度 {color}</Text>
    </Flex>
  ))}
</Flex>
```

### 表单应用

在表单中受控使用 Checkbox：

```jsx
const [checked, setChecked] = React.useState(false);

<Flex direction="column" gap="4">
  <Text size="3" weight="bold">用户协议</Text>

  <Flex align="start" gap="2">
    <Checkbox
      checked={checked}
      onCheckedChange={() => setChecked(!checked)}
    />
    <Text size="2">我已阅读并同意《用户协议》和《隐私政策》</Text>
  </Flex>

  <button disabled={!checked}>下一步</button>
</Flex>
```

## Props / API

### Checkbox

| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| `checked` | 复选框的选中状态 | `boolean \| "indeterminate"` | - |
| `defaultChecked` | 初始选中状态（非受控） | `boolean` | `false` |
| `onCheckedChange` | 选中状态变化时的回调 | `(checked: boolean \| "indeterminate") => void` | - |
| `disabled` | 是否禁用 | `boolean` | `false` |
| `color` | 颜色主题 | `"gray" \| "gold" \| "bronze" \| "red" \| "blue" \| "green"` | - |
| `highContrast` | 是否使用高对比度 | `boolean` | `false` |
| `size` | 复选框尺寸 | `"1" \| "2" \| "3"` | `"2"` |
| `name` | 表单字段名称 | `string` | - |
| `value` | 表单字段值 | `string` | - |
| `required` | 是否必填 | `boolean` | `false` |

## 查看更多

参考 [Radix UI 官方文档](https://www.radix-ui.com/themes/docs/components/checkbox) 获取完整 API 与设计规范。
npm package: @sea-lion/react-hover-card
Description: HoverCard 是一个在用户悬停在触发元素上时显示的卡片组件，用于展示补充内容，不打断用户的操作流程。
Author: jsweber
Latest version: 0.3.0

﻿# `react-hover-card`

HoverCard 是一个在用户悬停在触发元素上时显示的卡片组件，用于展示补充内容，不打断用户的操作流程。

## 安装

```sh
$ yarn add @sea-lion/react-hover-card
# 或者
$ npm install @sea-lion/react-hover-card
```

## 基本使用

```jsx
import { HoverCard } from "@sea-lion/react-hover-card";
import { Text } from "@sea-lion/react-text";
import { Flex } from "@sea-lion/react-flex";
import { Avatar } from "@sea-lion/react-avatar";

export default () => (
  <HoverCard.Root>
    <HoverCard.Trigger>
      <Text style={{ cursor: "pointer" }}>@用户名</Text>
    </HoverCard.Trigger>
    <HoverCard.Content>
      <Flex gap="3">
        <Avatar size="3" src="https://example.com/avatar.jpg" fallback="用户" />
        <div>
          <Text weight="bold">用户全名</Text>
          <Text size="2" color="gray">
            @用户名
          </Text>
          <Text size="2" mt="2">
            用户简介信息，在悬停时显示的补充内容。
          </Text>
        </div>
      </Flex>
    </HoverCard.Content>
  </HoverCard.Root>
);
```

## 不同尺寸

HoverCard 提供了不同的尺寸选项，以适应不同的内容需求：

```jsx
// 小尺寸
<HoverCard.Content size="1">
  简洁的内容
</HoverCard.Content>

// 中等尺寸（默认）
<HoverCard.Content size="2">
  标准大小的内容
</HoverCard.Content>

// 大尺寸
<HoverCard.Content size="3">
  更多详细内容
</HoverCard.Content>
```

## 自定义宽度

您可以控制 HoverCard 内容的宽度：

```jsx
// 固定宽度
<HoverCard.Content width="300px">
  内容
</HoverCard.Content>

// 最小宽度和最大宽度
<HoverCard.Content minWidth="200px" maxWidth="400px">
  内容将根据需要在这个范围内调整
</HoverCard.Content>
```

## 延迟控制

卡片默认在悬停 200ms 后显示，离开触发区域 150ms 后关闭，您可以自定义这些延迟：

```jsx
<HoverCard.Root openDelay={300} closeDelay={200}>
  {/* 触发器和内容 */}
</HoverCard.Root>
```

## 属性

### HoverCard.Root

| 参数       | 说明             | 类型   | 默认值 | 版本  |
| ---------- | ---------------- | ------ | ------ | ----- |
| openDelay  | 显示延迟（毫秒） | number | 200    | 0.2.1 |
| closeDelay | 关闭延迟（毫秒） | number | 150    | 0.2.1 |

### HoverCard.Trigger

| 参数    | 说明                                  | 类型    | 默认值 | 版本  |
| ------- | ------------------------------------- | ------- | ------ | ----- |
| asChild | 是否将组件作为子元素传递（总是 true） | boolean | true   | 0.2.1 |

### HoverCard.Content

| 参数      | 说明                     | 类型                         | 默认值  | 版本  |
| --------- | ------------------------ | ---------------------------- | ------- | ----- |
| size      | 卡片尺寸                 | '1' \| '2' \| '3'            | '2'     | 0.2.1 |
| asChild   | 是否将组件作为子元素传递 | boolean                      | false   | 0.2.1 |
| width     | 卡片宽度                 | string                       | -       | 0.2.1 |
| minWidth  | 最小宽度                 | string                       | -       | 0.2.1 |
| maxWidth  | 最大宽度                 | string                       | '480px' | 0.2.1 |
| align     | 对齐方式                 | 'start' \| 'center' \| 'end' | 'start' | 0.2.1 |
| container | 门户容器                 | HTMLElement                  | -       | 0.2.1 |


## 查看更多

参考 [Radix UI 官方文档](https://www.radix-ui.com/themes/docs/components/hover-card) 获取完整 API 与设计规范。
npm package: @sea-lion/react-icon-button
Description: IconButton 是一个用于展示图标的按钮组件，提供多种尺寸和样式选项。
Author: jsweber
Latest version: 0.3.0

﻿# `react-icon-button`

IconButton 是一个用于展示图标的按钮组件，提供多种尺寸和样式选项。

## 安装

```sh
$ yarn add @sea-lion/react-icon-button
# 或者
$ npm install @sea-lion/react-icon-button
```

## 基本使用

```jsx
import { IconButton } from "@sea-lion/react-icon-button";

export default () => (
  <>
    <IconButton aria-label="关闭">
      <CloseIcon />
    </IconButton>

    <IconButton variant="solid" color="blue" aria-label="添加">
      <PlusIcon />
    </IconButton>

    <IconButton variant="outline" color="amber" aria-label="收藏">
      <StarIcon />
    </IconButton>

    <IconButton variant="ghost" color="red" aria-label="删除">
      <TrashIcon />
    </IconButton>
  </>
);
```

## 不同变体

IconButton 组件支持多种变体样式：

```jsx
// 实心变体
<IconButton variant="solid" aria-label="实心">
  <Icon />
</IconButton>

// 轮廓变体
<IconButton variant="outline" aria-label="轮廓">
  <Icon />
</IconButton>

// 软变体
<IconButton variant="soft" aria-label="软">
  <Icon />
</IconButton>

// 幽灵变体
<IconButton variant="ghost" aria-label="幽灵">
  <Icon />
</IconButton>
```

## 不同尺寸

IconButton 组件提供不同的尺寸选项：

```jsx
// 小尺寸
<IconButton size="1" aria-label="小">
  <Icon />
</IconButton>

// 中等尺寸（默认）
<IconButton size="2" aria-label="中">
  <Icon />
</IconButton>

// 大尺寸
<IconButton size="3" aria-label="大">
  <Icon />
</IconButton>

// 特大尺寸
<IconButton size="4" aria-label="特大">
  <Icon />
</IconButton>
```

## 自定义颜色和圆角

```jsx
// 自定义颜色
<IconButton color="blue" aria-label="蓝色">
  <Icon />
</IconButton>

<IconButton color="green" aria-label="绿色">
  <Icon />
</IconButton>

// 自定义圆角
<IconButton radius="none" aria-label="无圆角">
  <Icon />
</IconButton>

<IconButton radius="full" aria-label="完全圆形">
  <Icon />
</IconButton>
```

## 属性

### IconButton

| 参数         | 说明                 | 类型                                               | 默认值   | 版本  |
| ------------ | -------------------- | -------------------------------------------------- | -------- | ----- |
| size         | 按钮尺寸             | '1' \| '2' \| '3' \| '4'                           | '2'      | 0.2.0 |
| variant      | 按钮变体样式         | 'solid' \| 'outline' \| 'soft' \| 'ghost'          | 'solid'  | 0.2.0 |
| color        | 按钮颜色             | 'gray' \| 'blue' \| 'green' \| ... (主题色)        | 'gray'   | 0.2.0 |
| radius       | 圆角大小             | 'none' \| 'small' \| 'medium' \| 'large' \| 'full' | 'medium' | 0.2.0 |
| highContrast | 是否使用高对比度颜色 | boolean                                            | false    | 0.2.0 |
| disabled     | 是否禁用             | boolean                                            | false    | 0.2.0 |

IconButton 组件继承了标准的按钮属性，如 `onClick`、`onFocus` 等，以及所有标准的 margin 属性（如 `m`、`mt`、`mb` 等）。

## 可访问性

当使用 IconButton 时，总是应该提供 `aria-label` 属性，以确保屏幕阅读器用户能够理解按钮的功能。

```jsx
<IconButton aria-label="关闭对话框">
  <CloseIcon />
</IconButton>
```


## 查看更多

参考 [Radix UI 官方文档](https://www.radix-ui.com/themes/docs/components/icon-button) 获取完整 API 与设计规范。
npm package: @sea-lion/react-inset
Description: Inset 是一个容器组件，用于创建负边距效果，可以将内容向外延伸超出父元素的边界。
Author: jsweber
Latest version: 0.3.0

﻿# `react-inset`

Inset 是一个容器组件，用于创建负边距效果，可以将内容向外延伸超出父元素的边界。

## 安装

```sh
$ yarn add @sea-lion/react-inset
# 或者
$ npm install @sea-lion/react-inset
```

## 基本使用

```jsx
import { Inset } from "@sea-lion/react-inset";

export default () => (
  <div style={{ padding: "20px", border: "1px solid", borderRadius: "8px" }}>
    <Inset>
      <img
        src="/example-image.jpg"
        style={{ display: "block", width: "100%" }}
      />
    </Inset>
    <div style={{ padding: "20px" }}>
      <h3>带有 Inset 的卡片</h3>
      <p>Inset 组件使图片可以扩展到容器边缘，无需额外边距</p>
    </div>
  </div>
);
```

## 不同边的 Inset

Inset 组件可以应用于容器的不同边：

```jsx
// 应用于顶部
<Inset side="top">
  <img src="/banner.jpg" />
</Inset>

// 应用于底部
<Inset side="bottom">
  <div className="footer-content" />
</Inset>

// 应用于左侧
<Inset side="left">
  <div className="sidebar" />
</Inset>

// 应用于右侧
<Inset side="right">
  <div className="right-panel" />
</Inset>

// 应用于水平方向
<Inset side="x">
  <div className="horizontal-content" />
</Inset>

// 应用于垂直方向
<Inset side="y">
  <div className="vertical-content" />
</Inset>
```

## 裁剪方式

Inset 支持不同的裁剪方式：

```jsx
// 边框盒裁剪（默认）
<Inset clip="border-box">
  <img src="/image.jpg" />
</Inset>

// 内边距盒裁剪
<Inset clip="padding-box">
  <img src="/image.jpg" />
</Inset>
```

## 内边距控制

```jsx
// 保持当前内边距
<Inset p="current">
  <div className="content" />
</Inset>

// 移除内边距
<Inset p="0">
  <div className="content" />
</Inset>

// 控制特定方向的内边距
<Inset px="0" py="current">
  <div className="content" />
</Inset>
```

## 属性

### Inset

| 参数 | 说明            | 类型                                                          | 默认值       | 版本  |
| ---- | --------------- | ------------------------------------------------------------- | ------------ | ----- |
| side | 应用 Inset 的边 | 'all' \| 'x' \| 'y' \| 'top' \| 'bottom' \| 'left' \| 'right' | 'all'        | 0.2.0 |
| clip | 裁剪盒模型      | 'border-box' \| 'padding-box'                                 | 'border-box' | 0.2.0 |
| p    | 所有方向内边距  | 'current' \| '0'                                              | -            | 0.2.0 |
| px   | 水平方向内边距  | 'current' \| '0'                                              | -            | 0.2.0 |
| py   | 垂直方向内边距  | 'current' \| '0'                                              | -            | 0.2.0 |
| pt   | 顶部内边距      | 'current' \| '0'                                              | -            | 0.2.0 |
| pr   | 右侧内边距      | 'current' \| '0'                                              | -            | 0.2.0 |
| pb   | 底部内边距      | 'current' \| '0'                                              | -            | 0.2.0 |
| pl   | 左侧内边距      | 'current' \| '0'                                              | -            | 0.2.0 |

Inset 组件还支持所有标准的外边距属性（如 `m`、`mt`、`mb` 等）。


## 查看更多

参考 [Radix UI 官方文档](https://www.radix-ui.com/themes/docs/components/inset) 获取完整 API 与设计规范。
npm package: @sea-lion/react-kbd
Description: Kbd 是一个用于显示键盘按键或快捷键的组件，适用于教程、帮助文档等场景。
Author: jsweber
Latest version: 0.3.0

# `react-kbd`

Kbd 是一个用于显示键盘按键或快捷键的组件，适用于教程、帮助文档等场景。

## 安装

```sh
$ yarn add @sea-lion/react-kbd
# 或者
$ npm install @sea-lion/react-kbd
```

## 基本使用

```jsx
import { Kbd } from "@sea-lion/react-kbd";

export default () => (
  <div>
    按下 <Kbd>Tab</Kbd> 键切换焦点，使用 <Kbd>Shift</Kbd> + <Kbd>Tab</Kbd> 反向切换焦点。
  </div>
);
```

## 不同尺寸

Kbd 组件提供了多种尺寸选择（1-9）：

```jsx
<Kbd size="1">Esc</Kbd>
<Kbd size="2">Tab</Kbd>
<Kbd size="3">Shift</Kbd>
<Kbd size="4">Enter</Kbd>
<Kbd size="5">Space</Kbd>
<Kbd size="6">Backspace</Kbd>
<Kbd size="7">Delete</Kbd>
<Kbd size="8">⌘</Kbd>
<Kbd size="9">F11</Kbd>
```

## 组合键

展示键盘组合键：

```jsx
<div>
  保存文件：<Kbd>Ctrl</Kbd> + <Kbd>S</Kbd>
</div>

<div>
  复制内容：<Kbd>Ctrl</Kbd> + <Kbd>C</Kbd>
</div>

<div>
  粘贴内容：<Kbd>Ctrl</Kbd> + <Kbd>V</Kbd>
</div>

<div>
  全选内容：<Kbd>Ctrl</Kbd> + <Kbd>A</Kbd>
</div>

<div>
  撤销操作：<Kbd>Ctrl</Kbd> + <Kbd>Z</Kbd>
</div>

<div>
  重做操作：<Kbd>Ctrl</Kbd> + <Kbd>Y</Kbd> 或 <Kbd>Ctrl</Kbd> + <Kbd>Shift</Kbd> + <Kbd>Z</Kbd>
</div>
```

## 编辑器快捷键面板

```jsx
<div style={{ background: 'var(--gray-2)', padding: '12px', borderRadius: '6px', maxWidth: '400px' }}>
  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
    <span>保存文件</span>
    <span><Kbd>Ctrl</Kbd> + <Kbd>S</Kbd></span>
  </div>
  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
    <span>查找文本</span>
    <span><Kbd>Ctrl</Kbd> + <Kbd>F</Kbd></span>
  </div>
  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
    <span>替换文本</span>
    <span><Kbd>Ctrl</Kbd> + <Kbd>H</Kbd></span>
  </div>
  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
    <span>跳转到行</span>
    <span><Kbd>Ctrl</Kbd> + <Kbd>G</Kbd></span>
  </div>
</div>
```

## 游戏控制键示意

```jsx
<div>
  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}>
    <Kbd>W</Kbd>
    <div style={{ display: 'flex', gap: '4px' }}>
      <Kbd>A</Kbd><Kbd>S</Kbd><Kbd>D</Kbd>
    </div>
  </div>
  <p>使用 WASD 控制角色移动</p>
</div>
```

## 网页浏览快捷键

```jsx
<p>
  按 <Kbd>Tab</Kbd> 在页面元素间导航
</p>

<p>
  按 <Kbd>Space</Kbd> 或 <Kbd>Page Down</Kbd> 滚动页面
</p>

<p>
  按 <Kbd>Home</Kbd> 返回页面顶部，<Kbd>End</Kbd> 到达页面底部
</p>

<p>
  按 <Kbd>Ctrl</Kbd> + <Kbd>+</Kbd> 放大页面，<Kbd>Ctrl</Kbd> + <Kbd>-</Kbd> 缩小页面
</p>

<p>
  按 <Kbd>F11</Kbd> 切换全屏模式
</p>
```

## 何时使用

- 在文档或教程中展示键盘快捷键
- 在应用界面中提示用户可用的键盘操作
- 在帮助页面中展示键盘导航指令
- 构建快捷键参考面板或帮助中心

## 属性

### Kbd

| 参数    | 说明                           | 类型                                                        | 默认值 |
| ------- | ------------------------------ | ----------------------------------------------------------- | ------ |
| size    | 按键尺寸                       | '1' \| '2' \| '3' \| '4' \| '5' \| '6' \| '7' \| '8' \| '9' | -      |
| asChild | 将组件的样式和行为应用于子元素 | boolean                                                     | false  |

Kbd 组件还支持所有标准的外边距属性（如 `m`、`mt`、`mb` 等）。


## 查看更多

参考 [Radix UI 官方文档](https://www.radix-ui.com/themes/docs/components/kbd) 获取完整 API 与设计规范。
npm package: @sea-lion/react-oss-icon
Description: OssIcon (IconFont) 是基于 [iconfont 平台](https://www.iconfont.cn/) 的图标组件，支持通过 **Font-class**（.css）或 **Symbol**（.js）资源地址加载图标；不传资源地址时使用内置默认链接，可通过 `useSymbol` 在单色与多色模式间切换。
Author: jsweber
Latest version: 0.3.3

# `react-oss-icon`

OssIcon (IconFont) 是基于 [iconfont 平台](https://www.iconfont.cn/) 的图标组件，支持通过 **Font-class**（.css）或 **Symbol**（.js）资源地址加载图标；不传资源地址时使用内置默认链接，可通过 `useSymbol` 在单色与多色模式间切换。

## 安装

```sh
pnpm add @sea-lion/react-oss-icon
# 或者
npm install @sea-lion/react-oss-icon
yarn add @sea-lion/react-oss-icon
```

## 使用

在代码中引入组件：

```tsx
import { IconFont, defaultOssIconCssUrl, defaultOssIconJsUrl } from '@sea-lion/react-oss-icon';
```

### 基本用法（内置链接）

不传 `ossUrl` 时使用内置 Font-class（单色）或 Symbol（多色），由 `useSymbol` 控制，默认 `useSymbol: false` 即单色：

```jsx
// 单色（Font-class，默认）
<IconFont icon="icon-xxx" />
<IconFont icon="icon-xxx" color="#1890ff" fontSize="24px" />

// 多色（Symbol）
<IconFont icon="icon-guanjianzhen" useSymbol style={{ fontSize: 28 }} />
```

### 自定义资源地址

传入 `ossUrl` 时，组件按链接类型自动判断渲染方式：`.js` 为 Symbol 多色，`.css` 为 Font-class 单色；此时 `useSymbol` 不参与判断。

```jsx
<IconFont ossUrl="//at.alicdn.com/t/c/font_xxx.css" icon="icon-xxx" />
<IconFont ossUrl="//at.alicdn.com/t/c/font_xxx.js" icon="icon-xxx" />
```

### 与 iconfont 平台对接

- **内置链接**：不传 `ossUrl` 时使用 `defaultOssIconCssUrl`（Font-class）或 `defaultOssIconJsUrl`（Symbol），由 **useSymbol** 切换，默认 `false` 即 Font-class。
- **Font-class**：单色图标，可设置 `color`、`fontSize`，用法 `<IconFont icon="icon-图标名" />`。
- **Symbol**：多色图标，组件内部用 SVG `<use>` 渲染，保留图标原有配色；用法 `<IconFont icon="icon-图标名" useSymbol />`。
- **自定义 ossUrl**：传了 `ossUrl` 后按链接后缀自动判断（.js → Symbol，否则 → Font-class）。
- 支持协议相对地址（`//...`），会自动补全为 `https:`。

## API

| 属性       | 类型      | 默认值  | 说明 |
|------------|-----------|---------|------|
| icon       | string    | —       | 图标名，如 `icon-xxx` |
| ossUrl     | string    | 见下文  | 资源地址；不传时用内置链接，由 useSymbol 决定 |
| useSymbol  | boolean   | false   | 是否用 Symbol 多色渲染；仅在不传 ossUrl 时生效 |
| color      | string    | currentColor | 图标颜色（Font-class 模式） |
| fontSize   | string    | 1em     | 图标尺寸 |
| style      | CSSProperties | —   | 内联样式 |
| className  | string    | —       | 类名 |

导出的常量：

- `defaultOssIconCssUrl`：内置 Font-class 资源（.css）
- `defaultOssIconJsUrl`：内置 Symbol 资源（.js）
- `defaultOssIconUrl`：已废弃，等同于 `defaultOssIconCssUrl`，保留兼容
- `isSymbolOssUrl(url)`：判断 URL 是否为 Symbol（.js）资源

## 何时使用

- 需要使用团队 iconfont 项目中的图标时
- 需要与现有 iconfont 图标体系保持一致时
- 需要轻量、可配置颜色与尺寸的图标展示时
- 需要展示多色图标时，使用 `useSymbol` 或传入 .js 的 `ossUrl`
npm package: @sea-lion/react-reset
Description: Reset 是一个样式重置组件，用于清除 HTML 元素的默认样式，确保在不同浏览器中的一致外观。
Author: jsweber
Latest version: 0.3.0

# `react-reset`

Reset 是一个样式重置组件，用于清除 HTML 元素的默认样式，确保在不同浏览器中的一致外观。

## 安装

```sh
$ yarn add @sea-lion/react-reset
# 或者
$ npm install @sea-lion/react-reset
```

## 基本使用

```jsx
import { Reset } from "@sea-lion/react-reset";

export default () => {
  return (
    <Reset>
      <button>这是一个没有默认样式的按钮</button>
    </Reset>
  );
};
```

## HTML 元素重置

Reset 组件可以应用于各种 HTML 元素，清除其默认样式：

```jsx
{/* 重置输入框 */}
<Reset>
  <input type="text" placeholder="无默认样式的输入框" />
</Reset>

{/* 重置列表 */}
<Reset>
  <ul>
    <li>无默认样式的列表项 1</li>
    <li>无默认样式的列表项 2</li>
  </ul>
</Reset>

{/* 重置链接 */}
<Reset>
  <a href="#">无默认样式的链接</a>
</Reset>

{/* 重置单选按钮 */}
<Reset>
  <input type="radio" />
</Reset>

{/* 重置复选框 */}
<Reset>
  <input type="checkbox" />
</Reset>
```

## 组合使用

Reset 组件通常作为其他组件的基础，可以与其他样式组件结合使用：

```jsx
import { Reset } from "@sea-lion/react-reset";
import { Box } from "@sea-lion/react-box";

export default () => {
  return (
    <Reset>
      <Box padding="4" background="gray-3" borderRadius="3">
        <button>组合样式的按钮</button>
      </Box>
    </Reset>
  );
};
```

## 构建自定义表单

利用 Reset 组件可以构建完全自定义样式的表单，避免浏览器默认样式的干扰：

```jsx
<Reset>
  <form style={{ display: 'flex', flexDirection: 'column', gap: '12px', maxWidth: '300px' }}>
    <input
      type="text"
      placeholder="用户名"
      style={{ padding: '10px', border: '1px solid var(--gray-7)', borderRadius: '4px' }}
    />
    <input
      type="password"
      placeholder="密码"
      style={{ padding: '10px', border: '1px solid var(--gray-7)', borderRadius: '4px' }}
    />
    <button
      style={{
        padding: '10px',
        background: 'var(--blue-9)',
        color: 'white',
        borderRadius: '4px',
        cursor: 'pointer',
      }}
    >
      登录
    </button>
  </form>
</Reset>
```

## 自定义按钮示例

```jsx
<Reset>
  <button
    style={{
      padding: '8px 16px',
      background: 'var(--blue-9)',
      color: 'white',
      borderRadius: '4px',
      cursor: 'pointer',
    }}
  >
    确认
  </button>
</Reset>

<Reset>
  <button
    style={{
      padding: '8px 16px',
      background: 'transparent',
      color: 'var(--gray-11)',
      border: '1px solid var(--gray-7)',
      borderRadius: '4px',
      cursor: 'pointer',
    }}
  >
    取消
  </button>
</Reset>
```

## 何时使用

- 需要从零开始构建自定义样式的 HTML 元素时
- 作为自定义 UI 组件的基础，确保跨浏览器样式一致性
- 需要覆盖浏览器的 User-Agent Stylesheet 时
- 构建高度定制化的表单元素（输入框、按钮、下拉选择等）
- 需要移除链接、列表等元素的默认装饰样式时

## 属性

| 参数     | 说明               | 类型            | 默认值 |
| -------- | ------------------ | --------------- | ------ |
| children | 需要重置样式的内容 | React.ReactNode | -      |
| asChild  | 是否作为子元素渲染 | boolean         | false  |


## 查看更多

参考 [Radix UI 官方文档](https://www.radix-ui.com/themes/docs/components/reset) 获取完整 API 与设计规范。
npm package: @sea-lion/react-section
Description: Section 是一个布局组件，用于创建具有预设垂直内边距的区域，帮助组织页面内容的层次结构。
Author: jsweber
Latest version: 0.3.0

# `react-section`

Section 是一个布局组件，用于创建具有预设垂直内边距的区域，帮助组织页面内容的层次结构。

## 安装

```sh
$ yarn add @sea-lion/react-section
# 或者
$ npm install @sea-lion/react-section
```

## 基本使用

```jsx
import { Section } from "@sea-lion/react-section";

export default () => {
  return (
    <Section>
      <h2>区域标题</h2>
      <p>这是一个具有预设垂直内边距的区域，用于组织内容。</p>
    </Section>
  );
};
```

## 尺寸

Section 组件支持四种尺寸，控制垂直内边距的大小：

```jsx
{/* 小尺寸 (24px 内边距) */}
<Section size="1">{/* 内容 */}</Section>

{/* 中等尺寸 (40px 内边距) */}
<Section size="2">{/* 内容 */}</Section>

{/* 大尺寸 (64px 内边距，默认) */}
<Section size="3">{/* 内容 */}</Section>

{/* 超大尺寸 (80px 内边距) */}
<Section size="4">{/* 内容 */}</Section>
```

## 显示控制

使用 `display` 属性控制区域的显示状态：

```jsx
{/* 隐藏区域 */}
<Section display="none">{/* 内容 */}</Section>

{/* 显示区域（默认） */}
<Section display="initial">{/* 内容 */}</Section>
```

## 响应式设计

Section 组件支持响应式属性，可以根据屏幕尺寸调整内边距和显示状态：

```jsx
{/* 在小屏幕上使用较小的内边距，在大屏幕上使用较大的内边距 */}
<Section size={{ initial: '1', sm: '2', md: '3' }}>{/* 内容 */}</Section>

{/* 在小屏幕上隐藏，在大屏幕上显示 */}
<Section display={{ initial: 'none', md: 'initial' }}>{/* 内容 */}</Section>
```

## 实用场景

### 页面布局

使用不同尺寸的 Section 来构建具有层次感的页面结构：

```jsx
{/* 头部区域 */}
<Section size="2">
  <h1>网站标题</h1>
</Section>

{/* 主要内容区 */}
<Section size="3">
  <h2>欢迎使用</h2>
  <p>这是主要内容区域。</p>
</Section>

{/* 特性展示区（带背景色） */}
<Section size="3" style={{ backgroundColor: 'var(--gray-2)' }}>
  <h2>产品特性</h2>
  <div style={{ display: 'flex', gap: '24px' }}>
    <div>特性一</div>
    <div>特性二</div>
    <div>特性三</div>
  </div>
</Section>
```

### 卡片内容容器

Section 可以作为卡片内容的容器，提供统一的内边距：

```jsx
<div style={{ width: '300px', border: '1px solid var(--gray-5)', borderRadius: '8px', overflow: 'hidden' }}>
  <div style={{ height: '150px', backgroundColor: 'var(--blue-5)' }} />
  <Section size="1">
    <h3>产品标题</h3>
    <p>这是产品的简要描述。</p>
    <a href="#">了解更多</a>
  </Section>
</div>
```

## 何时使用

- 需要在页面上划分不同的内容区域时
- 需要为内容区域添加统一的垂直内边距时
- 构建具有层次感的落地页、文档页面等布局时
- 需要在不同屏幕尺寸下控制区域显示或内边距大小时

## 属性

| 参数    | 说明                 | 类型                     | 默认值 |
| ------- | -------------------- | ------------------------ | ------ |
| size    | 区域的垂直内边距大小 | '1' \| '2' \| '3' \| '4' | '3'    |
| display | 区域的显示状态       | 'none' \| 'initial'      | -      |
| asChild | 是否作为子元素渲染   | boolean                  | false  |


## 查看更多

参考 [Radix UI 官方文档](https://www.radix-ui.com/themes/docs/components/section) 获取完整 API 与设计规范。
npm package: @sea-lion/react-skeleton
Description: Skeleton 是一个加载占位符组件，用于在数据加载时显示内容的轮廓，提升用户体验。
Author: jsweber
Latest version: 0.3.0

﻿# `react-skeleton`

Skeleton 是一个加载占位符组件，用于在数据加载时显示内容的轮廓，提升用户体验。

## 安装

```sh
$ yarn add @sea-lion/react-skeleton
# 或者
$ npm install @sea-lion/react-skeleton
```

## 基本使用

```jsx
import { Skeleton } from "@sea-lion/react-skeleton";

export default () => (
  <div>
    <Skeleton width="200px" height="20px" />
    <Skeleton width="100%" height="20px" my="2" />
    <Skeleton width="80%" height="20px" />
  </div>
);
```

## 包裹现有内容

Skeleton 可以包裹现有内容，在加载时显示占位符，加载完成后显示内容：

```jsx
import { Skeleton } from "@sea-lion/react-skeleton";
import { useState, useEffect } from "react";

export default () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 模拟数据加载
    const timer = setTimeout(() => setLoading(false), 2000);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div>
      <Skeleton loading={loading}>
        <h2>数据已加载完成</h2>
        <p>这是加载完成后显示的内容。</p>
      </Skeleton>
    </div>
  );
};
```

## 自定义宽度和高度

```jsx
// 固定宽度
<Skeleton width="200px" height="24px" />

// 响应式宽度
<Skeleton width={{ initial: "100%", sm: "80%", lg: "50%" }} height="24px" />

// 使用预设尺寸
<Skeleton width="full" height="5" />
```

## 文本占位符

当作为空元素使用时，Skeleton 默认为块级元素，高度为 `--space-3`：

```jsx
// 空的骨架加载器用作文本占位符
<Skeleton />
<Skeleton width="80%" my="2" />
<Skeleton width="60%" />
```

## 列表占位符

```jsx
<div>
  {Array(5)
    .fill(null)
    .map((_, index) => (
      <div
        key={index}
        style={{ display: "flex", alignItems: "center", marginBottom: "16px" }}
      >
        <Skeleton width="40px" height="40px" style={{ borderRadius: "50%" }} />
        <div style={{ marginLeft: "12px", flex: 1 }}>
          <Skeleton height="14px" mb="2" />
          <Skeleton width="60%" height="14px" />
        </div>
      </div>
    ))}
</div>
```

## 卡片占位符

```jsx
<div
  style={{
    width: "300px",
    padding: "16px",
    border: "1px solid #eee",
    borderRadius: "8px",
  }}
>
  <Skeleton width="100%" height="180px" mb="3" />
  <Skeleton width="70%" height="24px" mb="2" />
  <Skeleton width="100%" height="16px" mb="1" />
  <Skeleton width="100%" height="16px" mb="1" />
  <Skeleton width="40%" height="16px" />
</div>
```

## 属性

| 参数      | 说明                   | 类型                       | 默认值 | 版本  |
| --------- | ---------------------- | -------------------------- | ------ | ----- |
| loading   | 是否显示加载占位符     | boolean                    | true   | 0.2.0 |
| width     | 宽度（支持响应式）     | CSSProperties['width']     | -      | 0.2.0 |
| minWidth  | 最小宽度（支持响应式） | CSSProperties['minWidth']  | -      | 0.2.0 |
| maxWidth  | 最大宽度（支持响应式） | CSSProperties['maxWidth']  | -      | 0.2.0 |
| height    | 高度（支持响应式）     | CSSProperties['height']    | -      | 0.2.0 |
| minHeight | 最小高度（支持响应式） | CSSProperties['minHeight'] | -      | 0.2.0 |
| maxHeight | 最大高度（支持响应式） | CSSProperties['maxHeight'] | -      | 0.2.0 |
| children  | 加载完成后显示的内容   | React.ReactNode            | -      | 0.2.0 |

同时支持所有标准的外边距（margin）属性。


## 查看更多

参考 [Radix UI 官方文档](https://www.radix-ui.com/themes/docs/components/skeleton) 获取完整 API 与设计规范。
npm package: @sea-lion/react-spinner
Description: Spinner 是一个加载指示器组件，用于表示内容正在加载中。
Author: jsweber
Latest version: 0.3.0

# `react-spinner`

Spinner 是一个加载指示器组件，用于表示内容正在加载中。

## 安装

```sh
$ yarn add @sea-lion/react-spinner
# 或者
$ npm install @sea-lion/react-spinner
```

## 基本使用

```jsx
import { Spinner } from "@sea-lion/react-spinner";

export default () => (
  <div>
    <Spinner />
    <span>加载中...</span>
  </div>
);
```

## 不同尺寸

Spinner 组件提供三种尺寸：

```jsx
{/* 尺寸 1（最小） */}
<Spinner size="1" />

{/* 尺寸 2（默认） */}
<Spinner size="2" />

{/* 尺寸 3（最大） */}
<Spinner size="3" />
```

## 自定义颜色

通过设置父元素的颜色来自定义 Spinner 颜色：

```jsx
<div style={{ color: 'var(--blue-9)' }}>
  <Spinner />
</div>

<div style={{ color: 'var(--red-9)' }}>
  <Spinner />
</div>

<div style={{ color: 'var(--green-9)' }}>
  <Spinner />
</div>

<div style={{ color: 'var(--purple-9)' }}>
  <Spinner />
</div>
```

## 包裹内容

Spinner 可以包裹其他内容，在加载时显示加载动画，加载完成后显示内容：

```jsx
import { Spinner } from "@sea-lion/react-spinner";
import { useState, useEffect } from "react";

export default () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 2000);
    return () => clearTimeout(timer);
  }, []);

  return (
    <Spinner loading={loading}>
      <div>加载完成后显示的内容</div>
    </Spinner>
  );
};
```

## 与按钮组合

Spinner 可以与按钮组合，用于表示提交或处理状态：

```jsx
import { Spinner } from "@sea-lion/react-spinner";
import { Button } from "@sea-lion/react-button";

{/* 加载状态的按钮 */}
<Button disabled>
  <Spinner size="1" />
  提交中
</Button>

{/* 正常状态 */}
<Button>提交</Button>
```

## 加载卡片

```jsx
<div style={{ border: '1px solid var(--gray-5)', borderRadius: '6px', padding: '16px', width: '300px' }}>
  <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px' }}>
    <Spinner size="1" />
    <span>正在加载数据...</span>
  </div>
</div>
```

## 自定义样式

```jsx
{/* 添加外边距 */}
<Spinner mt="4" mb="4" />

{/* 自定义颜色（通过父元素） */}
<div style={{ color: "var(--blue-9)" }}>
  <Spinner />
</div>
```

## 何时使用

- 页面或组件正在加载数据时
- 操作需要一段时间才能完成时（如表单提交、文件上传）
- 需要告知用户等待过程，避免误操作时
- 与按钮配合使用，表示操作正在进行中

## 属性

| 参数    | 说明           | 类型              | 默认值 |
| ------- | -------------- | ----------------- | ------ |
| size    | 尺寸           | '1' \| '2' \| '3' | '2'    |
| loading | 是否显示加载中 | boolean           | true   |

同时支持所有标准的外边距（margin）属性，如 `m`、`mt`、`mb` 等。


## 查看更多

参考 [Radix UI 官方文档](https://www.radix-ui.com/themes/docs/components/spinner) 获取完整 API 与设计规范。
npm package: @sea-lion/react-switch
Description: Switch 是一个开关组件，用于在两种状态间切换。
Author: jsweber
Latest version: 0.3.0

﻿# `react-switch`

Switch 是一个开关组件，用于在两种状态间切换。

## 安装

```sh
$ yarn add @sea-lion/react-switch
# 或者
$ npm install @sea-lion/react-switch
```

## 基本使用

```jsx
import { Switch } from "@sea-lion/react-switch";

export default () => (
  <div>
    <Switch />
  </div>
);
```

## 受控组件

```jsx
import { Switch } from "@sea-lion/react-switch";
import { useState } from "react";

export default () => {
  const [checked, setChecked] = useState(false);

  return <Switch checked={checked} onCheckedChange={setChecked} />;
};
```

## 默认选中

```jsx
<Switch defaultChecked />
```

## 不同尺寸

Switch 组件提供三种尺寸：

```jsx
// 尺寸 1（最小）
<Switch size="1" />

// 尺寸 2（默认）
<Switch size="2" />

// 尺寸 3（最大）
<Switch size="3" />
```

## 不同变体

Switch 组件支持多种变体样式：

```jsx
// 经典变体
<Switch variant="classic" />

// 表面变体（默认）
<Switch variant="surface" />

// 柔和变体
<Switch variant="soft" />
```

## 自定义颜色

```jsx
// 蓝色（默认）
<Switch color="blue" />

// 红色
<Switch color="red" />

// 绿色
<Switch color="green" />
```

## 高对比度

```jsx
// 启用高对比度模式
<Switch highContrast />
```

## 禁用状态

```jsx
// 禁用开关
<Switch disabled />
```

## 属性

| 参数            | 说明             | 类型                             | 默认值    | 版本  |
| --------------- | ---------------- | -------------------------------- | --------- | ----- |
| size            | 开关尺寸         | '1' \| '2' \| '3'                | '2'       | 0.2.0 |
| variant         | 开关变体样式     | 'classic' \| 'surface' \| 'soft' | 'surface' | 0.2.0 |
| color           | 开关颜色         | string                           | 'blue'    | 0.2.0 |
| radius          | 圆角大小         | string                           | -         | 0.2.0 |
| highContrast    | 是否使用高对比度 | boolean                          | false     | 0.2.0 |
| checked         | 当前状态（受控） | boolean                          | -         | 0.2.0 |
| defaultChecked  | 默认选中状态     | boolean                          | false     | 0.2.0 |
| onCheckedChange | 状态变化时的回调 | (checked: boolean) => void       | -         | 0.2.0 |
| disabled        | 是否禁用         | boolean                          | false     | 0.2.0 |

同时支持所有标准的外边距（margin）属性。


## 查看更多

参考 [Radix UI 官方文档](https://www.radix-ui.com/themes/docs/components/switch) 获取完整 API 与设计规范。
npm package: @sea-org/s-statistic
Description: 指标卡
Author: Sea
Latest version: 0.1.0

# @sea-org/s-statistic

> 指标卡

使用[lit](https://lit.dev)进行开发，如何编码请查看[面向 React 开发者的 Lit](https://codelabs.developers.google.com/codelabs/lit-2-for-react-devs?hl=zh-cn#0)

## Usage

```
const statistic = require('@sea-org/s-statistic');
...
```

## Documentation

具体使用详情请查看[doc](./docs/statistic.md)

## 调试流程

详情查看[CONTRIBUTING.md](./CONTRIBUTING.md)
npm package: @sea-org/s-utils
Description: sea-nest项目的实用类函数
Author: Sea
Latest version: 0.1.0

# @sea-org/s-utils

> sea-nest 项目的实用类函数

## Install

```shell
$ yarn add @sea-org/s-utils
```

## Usage

```
import utils from '@sea-org/utils'

utils.valueFormat.getFormatter('number')(12345); // 12,345

```

## Documentation

如何使用请参考[Api](./docs/index.md)

## Contributing

如何贡献代码查看 [CONTRIBUTING](./CONTRIBUTING.md)

## FAQ

### 如何打包出符合 ES6 的 tree shaking 模式，供使用方按需加载?

1. 在 utils 下增加`.fatherrc.js`

   ```js
   export default {
     esm: 'babel',
     cjs: 'babel',
   };
   ```

2. 修改`package.json`

   ```json
   {
     "main": "lib/index.js",
     "module": "es/index.js",
     "types": "lib/index.d.ts"
   }
   ```

3. 在`utils/src/valueFormat.ts`修改为

   ```ts
   import * as numeral from 'numeral';

   ...
   ```
npm package: @sea-org/semantic-dom-diff
Description: 比较dom信息
Author: Sea
Latest version: 0.1.0

# @sea-org/semantic-dom-diff

> 比较 dom 信息，复制自[semantic-dom-diff](https://github.com/open-wc/open-wc/blob/5fe5f53896/packages/semantic-dom-diff/index.js)

## Install

```shell
$ yarn add @sea-org/semantic-dom-diff
```

## Usage

```
import semantic-dom-diff from '@sea-org/semantic-dom-diff'

```

## Documentation

如何使用请参考[Api](./docs)

## Contributing

如何贡献代码查看 [CONTRIBUTING](./CONTRIBUTING.md)