伯特森大学

布尔特森实验室产品的反应组件.

用于"盗贼隐蔽","哨兵",我们的集群工具和客户端应用. 伯特森实验室自己的原始地层(src/primitives: 焦点、 解职、 定位、 存在、 菜单、 选择、 窗体控件) 处理行为; Tailwind v4 处理样式, 图标是 伯特森图标。没有运行时间提供者。 安装软件包, 或复制一个组件的来源并更改它 .

AI代理的文档 : 页:1 • 妇女 llms- full.txt (英语) • 妇女 与人工智能代理使用

安装

npm install @burtson-labs/ui @burtson-labs/icons

用 Tailwind CSS v4 添加主题, 让 Tailwind看到组件类 :

@import 'tailwindcss';
@import '@burtson-labs/ui/theme.css';
@source '../node_modules/@burtson-labs/ui/dist';

没有 Tailwind(例如 MUI app), 导入预编译样式一次 :

import '@burtson-labs/ui/styles.css';

然后说:

import { Button } from '@burtson-labs/ui';

export const Save = () => <Button>Save</Button>;

或者复制来源

每一组成部分也是登记册中的登记项目 阴影 登记册格式。 CLI 复制文件到 components/ui,并添加 Burtson 主题 :

npx shadcn@latest add https://ui.burtson.ai/r/button.json

或者加点 @burtson 命名空间到 components.json 并按名称安装 :

{ "registries": { "@burtson": "https://ui.burtson.ai/r/{name}.json" } }

npx shadcn@latest add @burtson/button

与人工智能代理使用

Claude Code, Cursor, Codex, Copilot等编码代理可以将文件读作纯文本,并通过注册处安装组件:

• llms.txt 列出每个组件; llms-full.txt 全部保存在一个文件中;每个页面也是 Markdown at https://ui.burtson.ai/docs/components/<name>.md。 。 。 .
• npx shadcn@latest mcp init --client claude (或 cursor, (中文(简体) ), vscode, (中文(简体) ), codex)设置shadcn MCP服务器,可以搜索并安装 @burtson/* 名称空格 components.json。 。 。 .
• npx skills add burtson-labs/ui 安装 burtson-ui 特工技能。 。 。 .

这个 与人工智能代理使用 页面有一组规则可以粘贴到 CLAUDE.md 或者说 AGENTS.md 并举出例子。 贡献者代理人:见 一般事务人员(其他职等)。 。 。 .

构成部分

Access-Agent run-Control – Access-App Sell – App Sell – Avatar – Avatar – Avatar – 上传-徽章 – Breadcrumb – Button – Card –聊天历史 –聊天布局 – 复选框 – 复选卡 – Combobox – 命令 –composers – 连接状态 – 上下文 菜单 – 对话 复制按钮 数据表 – 对话框 滴放菜单 编辑器 标签 空白状态 – 编译器 场 动作 图标 Button 输入 – Kbdd Label – Markdown – Menubar 消息 移动导航 – 本地选择 导航 菜单 – 数字输入器上登入页 页面 页面 切入页 程 – 传输器 动态 传输器 列表 – 列表 中程 – 列表 – 列表 – 中程 中程 –

现场预览、待使用笔记、无障碍笔记和每个笔记的代码 (原始内容存档于2018-10-21). ui.burtson.ai建立聊天应用程序? 这个 聊天食谱 将历史,附件,流线,语音笔记和全屏幕放在一起,并配有完整的源. 造出一个表格? Field 任何控件上的线条标签、帮助和错误, FieldGrid 上行字段和 FormActions 把按钮放在手机上.

每个控件在触摸屏上至少是44px,每个控件显示一个焦点样式(focusRingClasses, (中文(简体) ), fieldFocusClasses),并满足文本的4.5:1和调色板和任何口音的3:1的边界;在CI中被Playwright所出出一股烟来测量.

代理决定、装载和外出

import {
  AskUser, AgentPlan, ContextUsage, CircularProgress, LoadingDots,
  ThemeProvider, ThemeToggle,
} from '@burtson-labs/ui';

<ThemeProvider defaultTheme="system" storageKey="app-theme">
  <ThemeToggle />
  <AskUser
    questions={[{ id: 'goal', prompt: 'What should I focus on?' }]}
    onSubmit={async (answers) => { await sendAnswers(answers); }}
  />
</ThemeProvider>

<CircularProgress label="Connecting" />; // unknown duration
<CircularProgress value={64} label="Uploading" showValue />;
<LoadingDots label="Thinking" showLabel />;
<ContextUsage used={42000} limit={200000} />;

装入主题输入脚本 <head> 因此保存的暗色主题在第一次涂料之前应用( 无) 灯光闪烁)。 在严格的CSP服务下,以数据属性配置的文件:

<script src="/theme-init.js" data-storage-key="app-theme"></script>

从复制 @burtson-labs/ui/theme-init.js,或提供 themeInitScript({ storageKey: 'app-theme' }) 内入并添加 await themeInitScriptHash({ storageKey: 'app-theme' }) 改为 script-src。 。 。 .

这个 主题编辑器 预览预设,自定义口音, 角半径和控制密度 和导出两个调色板。 特工召回属于你的 运行时间。 见 审计范围 现有构成部分 和仍然存在的工作流程差距.

他们

src/tokens.ts 是颜色、半径和类型的单一来源。 它会产生 theme.css (CSS变量,带有阴影名称加 brand, (中文(简体) ), brand-soft, (中文(简体) ), success 财务报告和审定财务报表 warning),输入登记册的主题项目,并驱动MUI适配器。 光是默认值; 添加 class="dark" 或者说 data-theme="dark" 改为 <html> 为了黑暗.

MUI 应用程序

大部分伯特森实验室的应用程序 今天运行的MUI。 他们现在可以分享调色板 一次采用一个屏幕的组件:

import { ThemeProvider } from '@mui/material/styles';
import { createBurtsonTheme } from '@burtson-labs/ui/mui';

<ThemeProvider theme={createBurtsonTheme('dark')}>{app}</ThemeProvider>;

// A product accent and admin density; contrast is kept for any accent.
createBurtsonTheme({ mode: 'dark', accent: '#2563eb', density: 'compact' });

@burtson-labs/ui/tokens 还出口 accentTokens(accent, mode) cSS方面,运动时间duration, (中文(简体) ), easing这 theme.css 暴露为 --duration-* 财务报告和审定财务报表 --ease-* 和每个 transition-* 工具运行在, 并且 elevation 职等(shadow.lg 为浮起的表面, shadow.xl 方式的)和 layer z-index比例表(提高10分,铬40分,叠加50分,土司100分).

开发

npm install
npm run dev        # docs site with live components, http://localhost:5173
npm run check      # typecheck, lint, format, tests, package build, site build
npm run smoke      # Playwright: touch targets, focus, overflow, keyboard (needs npm run site)
npx playwright test --config playwright.navigation.config.ts # navigation, including mobile Safari

添加组件:写入 src/components/<name>.tsx (注释:, data-slot 在每一个方面, focusRingClasses 或者说 fieldFocusClasses 用于焦点,44px on touch),导出自 src/index.ts演示 site/src/demos/<name>.tsx条目 site/src/docs.ts,其注解在 site/src/usage.ts 和一个单元格 site/src/matrix.tsx。登记簿在下一个建筑上取出.

绘制和格式化 伯特森实验室前端标准。每次推力都由 哨兵队。 。 。 .

初级和API 参考文献

行为原始是伯特森实验室自己的层 src/primitives,取自WAI-ARIA的写作实践和网络规格(设计注释,载于其 读取; 复制源使用 初级 页:1 该套件没有Radix,cmdk或其他组件-图书馆代码,也没有运行时间依赖它们. API 参考.md 列出生成的组件引用,以及 第三次议会 NoTICES.md (c) 继续调整的许可证(shadcn/ui的类别清单和公约).

许可证

麻省理工学院 伯特森实验室 受到来自 阴影/ ui (麻省理工学院);见 第三次议会 NoTICES.md。 。 。 .