# @divayth/brick-ui 中文文档

规范地址：https://npmcn.com/package/%40divayth/brick-ui/

版本：0\.10\.0
npm 元数据更新时间：2026-11-10T16:03:50.136Z
中文译文更新时间：2026-11-12T12:01:03.243Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40divayth/brick-ui
原文对照：https://npmcn.com/package/%40divayth/brick-ui/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：242 kB，302 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：8 个
- peer 依赖：react ^19\.0\.0，react-dom ^19\.0\.0
- 首次发布：2026-10-13T20:22:24.665Z
- 最新版本发布：2026-11-10T16:03:49.887Z
- 近 30 天下载量：6119（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：40（近 12 个月 40 个）

## 中文简介

Brick UI 反应组件

## 安装

```sh
npm install @divayth/brick-ui
```

也可以使用：`pnpm add @divayth/brick-ui`、`yarn add @divayth/brick-ui`、`bun add @divayth/brick-ui`

## README

# 砖头UI

React 19 和 Next.js 的回放组件: Text, Flex, Button, Card, Chip, Skeleton,, 图标按钮, 循环导航和进步栏 .

## 发展

```sh
npm install
npm run typecheck
npm run build
npm run storybook
```

## 使用量

```tsx
import { Button, Flex, Text } from "@divayth/brick-ui";
import "@divayth/brick-ui/styles.css";

<Flex alignItems="center">
  <Text weight="medium">Brick UI</Text>
  <Button>Continue</Button>
</Flex>;
```

邮包船汇编了CSS;消费者不需要Tailwind. 不包括全球CSS重设。 颜色可以通过 CSS 变量被覆盖 . 交互按钮保留其“ 使用客户端” 指令; Text and Flex 仍然与服务器兼容 .

## 输入和文本区域

使用 `Input` 用于单行字段和 `Textarea` 用于多行文本. 替换 `<Input multiline rows={5} />` 与 `<Textarea rows={5} />`。 。 。 . 两个组件都保持了相同的字段样式,标签,出错,图标和大小. 他们的本土道具,事件,和校对都符合各自的HTML元素. `Textarea` 随内容而增长:使用 `minRows` 财务报告和审定财务报表 `maxRows` 来设定限度. 上层 `maxRows`,内容滚动到域内. `rows` 用作 最小时间 `minRows` 未提供.

## 选择和自动完成

数值类型推断自 `options`;不需要明确的JSX类型论证. `SelectProps` 财务报告和审定财务报表 `AutocompleteProps` 默认描述单项选择. 使用 `SelectProps<number, true>` 或者说 `AutocompleteProps<number, true>` 用于多个选择的包装. `multiple` 财务报告和审定财务报表 `clearable` 默认关闭。 添加 `clearable` 允许清除; 清除单个选择返回 `undefined`。 。 。 . `multiple` 返回数组.

```tsx
<Autocomplete
  options={[{ value: 1, label: "Alice" }]}
  onChange={(id) => console.log(id)} // number
/>
```

`SelectProps` 描述选择控件. `AutocompleteProps` 还包括 `onSearchChange`, (中文(简体) ), `searchPlaceholder`,以及 `filterOptions`。 。 。 . `SelectCommonProps` 包含共享道具、选项和加载状态.

选项不默认过滤 。 过 `filterOptions` 能够进行本地搜索, 或用途 `onSearchChange` 从服务器获取选项。 替换旧的 `<Select searchable />` API 为 `<Autocomplete />`。 。 。 .

## 主题

`Provider` 包括光和暗调色板。 它恢复主题从 `theme` 未提供初始或控制主题时的 cookie .

```tsx
import { Provider, useProvider } from "@divayth/brick-ui";

function ToggleTheme() {
  const { theme, onChangeTheme } = useProvider();
  return (
    <button onClick={() => onChangeTheme(theme === "dark" ? "light" : "dark")}>
      Toggle theme
    </button>
  );
}

<Provider locale="en">
  <ToggleTheme />
</Provider>;
```

" SSR " 中,读取服务器上的饼干并传递其验证值为 `defaultTheme`应用 `getThemeStyle(theme)` 财务报告和审定财务报表 `data-theme={theme}` 改为 `html` 以避免水合前的光闪烁。 下一个.js不是一个依赖. 对于自定义调色板, 通过 `themes` 两者 `Provider` 财务报告和审定财务报表 `getThemeStyle`。 。 。 . 可选 `defaultTheme` 道克设定了初始主题,并优先于饼干. 挂载全球提供商:主题样式和门户共享文档根.

对于 Tailwind v4 应用程序, 请在您的全球 CSS 中注册库符 :

```css
@import "tailwindcss";
@import "@divayth/brick-ui/theme.css";
```

继续导入 `@divayth/brick-ui/styles.css` 用于组件样式.

## 结构

-   `src/ui` ——组件,CSS模块和故事本.
-   `src/lib` ——共享大小尺度,类型和标志.

`Size`数字 : `xs | sm | md | lg | xl`。 。 。 . 按钮支持所有5个大小(高24 / 32 / 40 / 48. 56 px). Flex差距支持相同的比例(4 / 8 / 16 / 24 / 32 px). 文本使用相同名称和默认值 `md`。 。 。 . 文本还支持 `inherit`, (中文(简体) ), `2xl`, (中文(简体) ), `3xl` 财务报告和审定财务报表 `4xl`。 。 。 .

控制高度和水平垫可以被覆盖 `--height-*` 财务报告和审定财务报表 `--padding-*` CSS变量.

## 常见问题

### @divayth/brick-ui 是什么？

Brick UI 反应组件

### 如何安装 @divayth/brick-ui？

在项目目录运行 npm install @divayth/brick-ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.0\.0）、react-dom（^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @divayth/brick-ui 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @divayth/brick-ui 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @divayth/brick-ui 可以商用吗？

@divayth/brick-ui 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @divayth/brick-ui 的下载量有多少？

根据 npm 官方下载统计，@divayth/brick-ui 在 2026/10/13 – 2026/11/11 这 30 天内被下载 6,119 次，日均约 204 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @divayth/brick-ui 还在维护吗？

最新版本 0\.10\.0 发布于 2026/11/11（1 天前）；至今共发布 40 个版本，其中过去 12 个月发布了 40 个；首次发布于 2026/10/14。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。