# @brett\_lamy/ui 中文文档

规范地址：https://npmcn.com/package/%40brett_lamy/ui/

版本：5\.17\.0
npm 元数据更新时间：2026-11-07T20:47:15.941Z
中文译文更新时间：2026-11-08T14:47:15.601Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40brett_lamy/ui
原文对照：https://npmcn.com/package/%40brett_lamy/ui/?lang=original
项目主页：https://github.com/BLamy/ui#readme
源码仓库：https://github.com/BLamy/ui

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

- 包体积（解压后）：3.7 MB，672 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：30 个
- peer 依赖：react ^19，react-dom ^19，@electric-sql/pglite ^0\.5\.8，@electric-sql/pglite-tools ^0\.4\.8，@agent-wasm/tailscale-connect ^1\.39\.98-t02582083d
- 首次发布：2026-08-27T04:58:44.548Z
- 最新版本发布：2026-11-07T20:47:15.773Z
- 近 30 天下载量：2655（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：24（近 12 个月 24 个）

## 中文简介

iOS-flavored React 组件在反应-aria-组件上,Tailwind v4和cva上——容器,列表,符号,作曲机,PencilKit. 还有一个阴影登记册(来源复制品和应用程序块).

## 安装

```sh
npm install @brett_lamy/ui
```

也可以使用：`pnpm add @brett_lamy/ui`、`yarn add @brett_lamy/ui`、`bun add @brett_lamy/ui`

## README

# @brett lamy/ ui (法语)

由UIKit容器模式所启发的触地-第一反应组件,以反应-aria-组件和Tailwind v4. 颜色,半径和字体来自您的阴影主题( CSS 变量); iOS 将船看成一个可选主题. 库有列表,导航,适应分页视图,抽屉,工作表,可再使用的跳绳,作曲器(一个Markdown快取框),PencilKit绘图和信件滚动器. 产品特定成分(一个IDE工作台,一个团队聊天外壳,一个地图聊天,.)是 **块**,而不是从此软件包中安装.

## 安装

两种方式,来自同一源文件. 文件解释: [安装](https://blamy.github.io/ui/#/installation) 财务报告和审定财务报表 [优化](https://blamy.github.io/ui/#/optimization)。 。 。 .

-   **shadcn登记(产品建议).** `npx shadcn add https://blamy.github.io/ui/r/split-view.json` 复制一个组件的来源以及它导入到您的应用中的内容( e)`components/ui/…`, (中文(简体) ), `lib/…`),所以你拥有文件,并且只运送你使用的东西.
-   **没有.** 一种依赖 里面的一切:

```sh
npm i @brett_lamy/ui
```

一次导入样式表——对于iOS调色板,则导入bl-主题(它设置了shadcn的CSS变量;留出它来使用您自己的shadcn主题). `BLProvider` 选取浅/暗和锡子树 `ThemeScope` 将任意一组变量覆盖到子树 :

```css
@import '@brett_lamy/ui/styles.css';
@import '@brett_lamy/ui/theme.css'; /* optional: the iOS palette */
```

```tsx
import { BLProvider, NavigationStack } from '@brett_lamy/ui';

export function App() {
  return (
    <BLProvider tint="#0a84ff">
      <NavigationStack screens={screens} onPop={handlePop} />
    </BLProvider>
  );
}
```

一揽子措施是无害环境管理,每个源模块有一个输出模块(`sideEffects` 以 CSS 为限,所以捆绑者会舍弃您不导入的东西; 组件模块以 `'use client'` 给下一个Js.

需要反应19(使用组件) `use(Context)`, (中文(简体) ), `<Context value>` 财务报告和审定财务报表 `ref` 作为道具).

## 索引栏

`IndexBar` 接受应用程序定义的字符串或数字键。 标签是可选的,所以密集的时间可以像点一样渲染,以及 `preview` 接受任何反应节点。 不导航的 Hover 预览; 指针拖放和键盘导航 ()`ArrowUp`, (中文(简体) ), `ArrowDown`, (中文(简体) ), `Home`, (中文(简体) ), `End`承诺停止.

```tsx
import { IndexBar, type IndexBarItem } from '@brett_lamy/ui';

const stops: IndexBarItem<number>[] = turns.map((turn, index) => ({
  key: turn.sequence,
  label: index % 5 === 0 ? String(index + 1) : undefined,
  caption: turn.author,
  preview: <span>{turn.summary}</span>,
}));

<IndexBar
  items={stops}
  label="Jump to conversation turn"
  onJump={(sequence) => scrollToTurn(sequence)}
/>;
```

若为 `items` ,该组件保留其A-Z形式:

```tsx
<IndexBar
  avail={new Set(['A', 'B', 'K'])}
  onLetter={(letter) => scrollToSection(letter)}
/>;
```

## 出口

-   集装箱: `NavigationStack`, (中文(简体) ), `SplitView`, (中文(简体) ), `Credenza`, (中文(简体) ), `SideDrawer`, (中文(简体) ), `AdaptivePane`, (中文(简体) ), `Sidebar`
-   列表和导航: `List`, (中文(简体) ), `List.Section`, (中文(简体) ), `List.Row`, (中文(简体) ), `IndexBar`, (中文(简体) ), `TabBar`, (中文(简体) ), `TabView`, (中文(简体) ), `EditBar`
-   投入和反馈: `SearchField`, (中文(简体) ), `Switch`, (中文(简体) ), `Segmented`,加上阴影式原始人(`Button`, (中文(简体) ), `Dialog`, (中文(简体) ), `Sheet`, (中文(简体) ), `Select`, (中文(简体) ), `ComboBox`, (中文(简体) ), `Tabs`, (...) (中文(简体) )
-   动议 : `springs`, (中文(简体) ), `springCss`, (中文(简体) ), `TextMorph`, (中文(简体) ), `NumberMorph`, (中文(简体) ), `AnimatedHeight`, (中文(简体) ), `ContentSwap`, (中文(简体) ), `Celebrate`
-   基金会: `BLProvider`, (中文(简体) ), `ThemeScope`, (中文(简体) ), `AppearanceProvider`, (中文(简体) ), `Icon`, (中文(简体) ), `Avatar`, (中文(简体) ), `Spinner`
-   团队聊天 : `ChatShell` 及其所属区域`ChatShellNav`, (中文(简体) ), `ChatShellSidebar`, (中文(简体) ), `ChatShellMain`, (中文(简体) ), `ChatShellHeader`, (中文(简体) ), `ChatShellAside`, (中文(简体) ), `ChatShellPanel`... `FloatingSheet`, (中文(简体) ), `FloatingChat`, (中文(简体) ), `ChatColumn`, (中文(简体) ), `ArtifactChatContainer` (Discord parts——频道,消息,线条,成员——活在 `discord-clone` 登记册块)
-   工作间 : `WorkbenchShell` 及其零部件`WorkbenchSidebar`, (中文(简体) ), `WorkbenchMain`, (中文(简体) ), `WorkbenchHeader`, (中文(简体) ), `WorkbenchDock`, (中文(简体) ), `WorkbenchPanel`, (中文(简体) ), `WorkbenchTabBar`,),对话部分(`Conversation`, (中文(简体) ), `UserMessage`, (中文(简体) ), `AssistantMessage`, (中文(简体) ), `WorkLog`, (中文(简体) ), `ToolCall`,(......), `TerminalHeader` 编号 : `TerminalBody`,表面(`SurfacePicker`, (中文(简体) ), `SurfaceBrowser`, (中文(简体) ), `SurfaceFiles`, (中文(简体) ), `SurfaceDiff`, (中文(简体) ), `SurfaceAgents`, (中文(简体) ), `Composer` 及其各部分, `ModelPicker`, (中文(简体) ), `MessageScroller`, (中文(简体) ), `MarkdownView`
-   演示应用 : `MapChatDemo`, (中文(简体) ), `DeliveryTrackingDemo`, (中文(简体) ), `SidebarDemo` (完整的应用程序——Discord, T3代码, GitHub—— 是注册块)

每个组件从包根导出其道具类型. 互动和反应性实例见"故事书"目录.

## 团队聊天

`ChatShell` 是一个薄的布局根:它测量自己的宽度,拥有紧凑的导航抽屉并应用聊天调色板。 里面的一切都是你自己安排的一部分——省去布局不需要的东西. 部件读取 shell 状态 (`width`, (中文(简体) ), `compact`, (中文(简体) ), `navOpen`, (中文(简体) ), `setNavOpen`)通过 `useChatShell()`。一个完整的Discord风格的应用船作为 `discord-clone` 注册块,带有它的频道,消息,成员和作曲部分(安装它来拥有并编辑它们).

```tsx
import {
  ChatShell, ChatShellNav, ChatShellSidebar, ChatShellMain, ChatShellHeader, ChatShellNavTrigger, ChatShellTitle,
  ChatShellFooter, TabView, TabViewBar, TabViewList, TabViewTab, TabViewIndicator, SidebarContent, SidebarSection,
  SidebarItem, Composer, ComposerCard, ComposerInput, ComposerFooter, ComposerSpacer, ComposerSend,
} from '@brett_lamy/ui';

export function Chat() {
  const [channel, setChannel] = useState('general');
  return (
    <ChatShell breakpoint={880}>
      <ChatShellNav>
        <TabView orientation="vertical" defaultSelectedKey="hq" className="contents">
          <TabViewBar variant="workspace">
            <TabViewList aria-label="Workspaces">
              <TabViewTab id="hq" textValue="HQ"><TabViewIndicator variant="pill" />{/* tile */}</TabViewTab>
            </TabViewList>
          </TabViewBar>
        </TabView>
        <ChatShellSidebar>
          <SidebarContent>
            <SidebarSection title="Team">
              <SidebarItem label="general" active={channel === 'general'} onPress={() => setChannel('general')} />
              <SidebarItem label="dev" badge={2} active={channel === 'dev'} onPress={() => setChannel('dev')} />
            </SidebarSection>
          </SidebarContent>
        </ChatShellSidebar>
      </ChatShellNav>
      <ChatShellMain>
        <ChatShellHeader><ChatShellNavTrigger /><ChatShellTitle>{channel}</ChatShellTitle></ChatShellHeader>
        <div role="log" className="min-h-0 flex-1 overflow-y-auto">{/* messages */}</div>
        <ChatShellFooter>
          <Composer onSubmit={send}>
            <ComposerCard>
              <ComposerInput placeholder={'Message #' + channel} />
              <ComposerFooter><ComposerSpacer /><ComposerSend /></ComposerFooter>
            </ComposerCard>
          </Composer>
        </ChatShellFooter>
      </ChatShellMain>
    </ChatShell>
  );
}
```

`ArtifactChatContainer` 当空间允许时,在文物旁保持对话。 在其容器断点下方 文物保留了满布和 `Composer` 上面飘来飘去 上面写着记录.

```tsx
<ArtifactChatContainer working={isWorking}>
  <ArtifactChatContainer.Chat><Conversation /></ArtifactChatContainer.Chat>
  <ArtifactChatContainer.Composer><MyComposer /></ArtifactChatContainer.Composer>
  <ArtifactChatContainer.Content><Artifact /></ArtifactChatContainer.Content>
</ArtifactChatContainer>
```

## 工作区

由部件组成的适应性IDE脚手架: `WorkbenchShell` 根可以测量自身并拥有区域状态, 以及您所放置的部分。 每个部分从外壳的宽度级取出其演示文稿——桌面列(1120px并更宽),右上角面板抽屉(760–1119px),或汉堡侧边栏,紧凑面板页,底取分页栏,再从下取分页码头——取自外壳自取的容器,而非取景口. T3代码式的完整应用程序是 `t3-clone` 登记区块.

```tsx
import {
  WorkbenchShell, WorkbenchSidebar, WorkbenchMain, WorkbenchHeader, WorkbenchSidebarTrigger, WorkbenchTitle,
  WorkbenchActions, WorkbenchDockTrigger, WorkbenchPanelTrigger, WorkbenchDock, WorkbenchPanel,
  WorkbenchTabBar, WorkbenchTab,
} from '@brett_lamy/ui';

export function Workbench() {
  return (
    <WorkbenchShell tint="#0a84ff">
      <WorkbenchSidebar><Threads /></WorkbenchSidebar>
      <WorkbenchMain>
        <WorkbenchHeader>
          <WorkbenchSidebarTrigger />
          <WorkbenchTitle project="cookbook">{thread.title}</WorkbenchTitle>
          <WorkbenchActions><WorkbenchDockTrigger /><WorkbenchPanelTrigger /></WorkbenchActions>
        </WorkbenchHeader>
        <Chat />
        <WorkbenchDock><Terminal /></WorkbenchDock>
      </WorkbenchMain>
      <WorkbenchPanel><Surfaces /></WorkbenchPanel>
      <WorkbenchTabBar value={surface} onValueChange={setSurface}>
        <WorkbenchTab id="chat" icon="msg">Chat</WorkbenchTab>
        <WorkbenchTab id="diff" icon="diff">Diff</WorkbenchTab>
      </WorkbenchTabBar>
    </WorkbenchShell>
  );
}
```

子孙阅读并驾驶外壳 `useWorkbenchShell()` (单位:千美元)`sidebarOpen`, (中文(简体) ), `dockOpen`, (中文(简体) ), `panelOpen`, (中文(简体) ), `panelFullscreen`他们的装饰和图案, `widthClass`, (中文(简体) ), `compact`) (中文(简体) ).

`Composer` 是构成的( 如 Shadcn 的输入组) : `Composer` 拥有草案, `ComposerCard` 持有 `ComposerInput` (单位:千美元) `@brett_lamy/docstream-editor` WYSIWYG 编辑器;被粘贴的图像成为附件芯片)和加通(`ComposerFooter`, (中文(简体) ), `ComposerSelect`, (中文(简体) ), `ModelPicker`, (中文(简体) ), `ComposerSend`,(......),以及 `ComposerBump`纸牌上或下方附着. `WorkbenchComposer` 是默认的构成. `MarkdownView` 向下列机构提交答复: `@brett_lamy/docstream`· ; `SurfaceFiles` 财务报告和审定财务报表 `SurfaceDiff` 使用情况 `@pierre/trees` 财务报告和审定财务报表 `@pierre/diffs`。 。 。 .

### 图像注释

按下附件打开 `AnnotateLightbox`,它以 `PencilKitAnnotator` 默认; 将下划平入图像。 注释器是可插件的——将它交换给a以下的每个作曲家 `ComposerAnnotatorProvider`,或每个作曲家 `annotator` 道具( r)`annotator={null}` 选择退出纯预览 :

```tsx
import { ComposerAnnotatorProvider } from '@brett_lamy/ui';

<ComposerAnnotatorProvider annotator={MyAnnotator}>
  <App />
</ComposerAnnotatorProvider>;
// or per composer: <Composer annotator={MyAnnotator}> (annotator={null} opts out)
```

注释员是一个称其 `children` 与 `{ canvas, toolbar?, title? }`:画布被铺在图像上(它首先) `<svg>` 被平整为保存上的图像,工具栏就坐在其下方.

## 笔会Kit

PencilKit用 BL UI 语言绘制地表,在 [完美的无手](https://github.com/steveruizok/perfect-freehand)数字 : `PencilCanvas`,工具/墨水/宽度拾取器和取消栏, `usePencilHistory`,以及 `StrokePath` 用于渲染已保存的中风.

```tsx
import { PencilKitDemo, demoStrokes } from '@brett_lamy/ui';

<div style={{ position: 'relative', height: 540 }}>
  <PencilKitDemo defaultStrokes={demoStrokes()} style={{ position: 'absolute', inset: 0 }} />
</div>;
```

## 工作空间发展

```sh
pnpm nx build @brett_lamy/ui
pnpm nx lint @brett_lamy/ui
```

## 常见问题

### @brett\_lamy/ui 是什么？

iOS-flavored React 组件在反应-aria-组件上,Tailwind v4和cva上——容器,列表,符号,作曲机,PencilKit\. 还有一个阴影登记册\(来源复制品和应用程序块\)\.

### 如何安装 @brett\_lamy/ui？

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

### @brett\_lamy/ui 支持 TypeScript 吗？

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

### @brett\_lamy/ui 支持 ESM 还是 CommonJS？

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

### @brett\_lamy/ui 可以商用吗？

@brett\_lamy/ui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @brett\_lamy/ui 的下载量有多少？

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

### @brett\_lamy/ui 还在维护吗？

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