# @firna/ui 中文文档 规范地址：https://npmcn.com/package/%40firna/ui/ 版本：5\.1\.0 npm 元数据更新时间：2026-11-08T11:00:32.424Z 中文译文更新时间：2026-11-14T20:07:34.025Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40firna/ui 原文对照：https://npmcn.com/package/%40firna/ui/?lang=original 项目主页：https://github.com/futex-ai/ui#readme 源码仓库：https://github.com/futex-ai/ui ## 关键信息（来自 npm 元数据） - 包体积（解压后）：11.3 MB，4846 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：0 个 - peer 依赖：react \>=19 \<20，react-dom \>=19 \<20，lucide-react \>=0\.560\.0 \<1，react-native \>=0\.83 \<0\.86，react-native-svg \>=15 \<16，lucide-react-native \>=0\.560\.0 \<1，@gorhom/bottom-sheet \>=5 \<6，react-native-reanimated \>=3\.16 \<5，react-native-gesture-handler \>=2\.20 \<3 - 首次发布：2026-06-15T11:31:23.578Z - 最新版本发布：2026-11-08T11:00:32.093Z - 近 30 天下载量：3758（2026-10-15 至 2026-11-13，npm 官方下载统计） - 已发布版本数：38（近 12 个月 38 个） ## 中文简介 Firna应用软件的共享回放原生和网络UI原始. ## 安装 ```sh npm install @firna/ui ``` 也可以使用：`pnpm add @firna/ui`、`yarn add @firna/ui`、`bun add @firna/ui` ## README # 欧 Firna React Industrial and web surfaces的共享UI组件库. 最早的消费者是会计应用和朱诺应用. ## 关键特性 - 共享下拉菜单, 选择器, 组合框, 拖动选择, 分块控制, 无线电卡、开关、自旋器、装货机(六个不确定形状外加) 确定进度栏和环、按钮、标签输入/文本区域、, 数据表, 可编辑数据网格(气相表/名称式), a 从擦出交互式图表家族(栏、行、区域、火花线、stat) 瓷砖 甜甜圈 仪表 子弹 漏斗 基质热图 散射 直方图, 瀑布,小倍数) 在彩色盲光的调色板上, 跨平台块 丰富文本编辑器, 并带有条形标记 协作层(活页、跟踪变化、评论线), 模式 土司提供者/控制者 相机 状态徽章 动画相机 边框、 日历加热图、 完整的事件日历( 月/ 周/ 日/ 议程, 经常性事件,拖放创建),分支工作流程构建器步骤图 原始版,一个多轨编辑时间表,包含pro剪辑编辑,以及 环绕它的视频编辑面板(方案显示器、运输、水平) meter, media bin, 财产检查器, 效果架, 键框编辑器, 导出 对话). - 共享 `xs` 编号 : `sm` 编号 : `md` 编号 : `lg` 缩放( e)`ControlSize`横跨 交互式控制——按钮、输入、下拉选择器、日期字段、, 分节控件、开关和列表行. `xs` 是密度为26px的大小. - 触摸表面:在a `TouchSurface`,控件和列表行给出每个 目标至少44乘44px,无论大小。 任择紧凑文本 尺度为密集地表面服务. - App shell 部件: 链接按钮和与当前页面状态的链接标签, 中性 和紧急通知、页和面板的空状态、已打开的菜单 带有电话菜单表,以及控制面板调整控件大小. - 可主题视觉标志 这样消费者可以使用自己的品牌主要颜色, 带有4个已运出预设——会计违约和朱诺,每套都取自 和一暗变相. 每个部件都从符号中读出颜色,太暗 模式是预设的互换,而不是每个组件的选入. - 一个共享的,平静的焦点 闪耀在每一个控制。 在网络上 DOM 后端画 这是CSS的 `:focus-visible`,所以服务器上和静态的 HTML 保持不变 键盘在水合之前的承受力——或根本没有JavaScript。 土著 保持其平台焦点行为. 一个 `focusIndicator` 设置——主题 每个控制,或每个实例——选择发光(`ring`),浏览器 控件可见框的大纲(`outline`),或者完全没有焦点样式 (单位:千美元)`none`对于嵌入在表面的显示焦点本身的控制. - 门户化、固定的网络日期/下拉/人口覆盖,各由其放置 拥有量度的尺寸 所以它翻过扳机而不是被剪去, 带有内容大小的选取菜单和z-index逃生舱门,加 (原始内容存档于2017-10-12). touch-feel friends. - 对顶端对话框进行焦点控制的堆叠的网络对话框, 命令焦点 返回,一个页面滚动锁, 和现场土司反馈, 加上本地对话框和 底盘. - 由 Expo, React Introduct 和库本身的 DOM 共享的平台文件 网络上的后端. - 重点单位测试,浏览器交互测试,以及包出口检查. - 故事书预览,用于同存非放出PR上的视觉评论. - 请发布 PRs 和 npm 可信发布 `@firna/ui`。 。 。 . ## 用户界面 软件包名称是 `@firna/ui`公共出口可通过以下渠道获得: - `@firna/ui` 为所有公共部门和助手提供服务. - [`@firna/ui/animated-border`](https://npmcn.com/package/%40firna/ui/src/animated-border/README.md) 用于跟踪一个的动画彗星-轨道边框 圆形矩形外缘以突出元素,以单色或单色显示 双色品牌梯度. - [`@firna/ui/avatar`](https://npmcn.com/package/%40firna/ui/src/avatar/README.md) 以圆形或圆形平方表示. - [`@firna/ui/badge`](https://npmcn.com/package/%40firna/ui/src/badge/README.md) 配有口音、变体和 大小变相. - [`@firna/ui/button`](https://npmcn.com/package/%40firna/ui/src/button/README.md) 以声调、大小和区块变体为主的按钮, (单位:千美元) `role` 将它重新指向另一个单激活角色(`checkbox`, (中文(简体) ), `menuitem`, (中文(简体) ), `radio`, (中文(简体) ), `switch`, (中文(简体) ), `tab`),与该角色必须承担的状态——如此 标签或复选框保持共享焦点发光,而不是被手卷. - [`@firna/ui/calendar`](https://npmcn.com/package/%40firna/ui/src/calendar/README.md) 整个活动日历(月、周、日、和议程) 视图、经常性事件和拖放创建). - [`@firna/ui/chart`](https://npmcn.com/package/%40firna/ui/src/chart/README.md) 用于交互式图表家族——栏、行、区域、, 火花 花砖 甜甜圈 仪表 子弹 漏斗 基质热图 散射, 气泡、直方图、瀑布和小倍数——由图书馆建造 拥有原始人和 `react-native-svg`,没有图表依赖。 每个 轮船图 键盘导航接地层、悬浮/扫描读出和 可读数据表双向. - [`@firna/ui/data-grid`](https://npmcn.com/package/%40firna/ui/src/data-grid/README.md) 可编辑的气表/编号式数据网格 (单元格范围选择、键盘导航、虚拟化无穷卷轴、键入) 可编辑的单元格、列菜单和反应卡堆. - [`@firna/ui/date`](https://npmcn.com/package/%40firna/ui/src/date/README.md) 用于单日期和日期范围字段. - [`@firna/ui/drag-select`](https://npmcn.com/package/%40firna/ui/src/drag-select/README.md) 用于选择行和牌的橡胶带:a 能够覆盖一个列表或应用程序 shell 的每一页的提供者 `useDragSelectableOptions` 页面钩子、目标和状态钩子,控制 (单位:千美元)`selectedIds`)或无控制选择,每页选择范围, 可配置的起步规则和一个被忽略的标记,边缘自动滚动,一个自定义 框通过 `renderMarquee`,和几何帮助。 手势继续 网络; 本地保存选择状态. - [`@firna/ui/dropdown`](https://npmcn.com/package/%40firna/ui/src/dropdown/README.md) 用于下拉菜单、选择器、组合框、图层帮助器和 选择器在形成水合物后对必须的焦点进行反射. - [`@firna/ui/empty-state`](https://npmcn.com/package/%40firna/ui/src/empty-state/README.md) 用于页和面板中带有标题级的空状态 由呼叫者提供. - [`@firna/ui/heatmap`](https://npmcn.com/package/%40firna/ui/src/heatmap/README.md) 日历贡献加热图及其纯版式 和彩色级的助手. - [`@firna/ui/input`](https://npmcn.com/package/%40firna/ui/src/input/README.md) 用于标记的文本输入、文本区和赤色输入 边框. - [`@firna/ui/kanban`](https://npmcn.com/package/%40firna/ui/src/kanban/README.md) 横向滚动 状态板,该状态板将单个选择字段记录为列. - [`@firna/ui/link`](https://npmcn.com/package/%40firna/ui/src/link/README.md) 链接按钮和与目的地链接标签 当前页面状态 . - [`@firna/ui/list`](https://npmcn.com/package/%40firna/ui/src/list/README.md) 对于带有项目间分隔符的垂直列表,可选 可点击的项目、链接导航行和 `ListItem` 排队. - [`@firna/ui/loader`](https://npmcn.com/package/%40firna/ui/src/loader/README.md) 用于加载指标家族: `Loader` 有六个 可互换的不确定形状( c)`ring`, (中文(简体) ), `dot-grid`, (中文(简体) ), `dots`, (中文(简体) ), `bars`, (中文(简体) ), `blades`, (中文(简体) ), `pulse`),加 (中文(简体) ) `ProgressBar` 财务报告和审定财务报表 `ProgressRing` 总计 已经知道. - [`@firna/ui/modal`](https://npmcn.com/package/%40firna/ui/src/modal/README.md) 用于自动网络堆叠的共享对话框 和本地模式演示,加上公共门户、模型和分层帮助. - [`@firna/ui/notice`](https://npmcn.com/package/%40firna/ui/src/notice/README.md) 中性通知和紧急通知,并附有机身和行动位置. - [`@firna/ui/panel-resize`](https://npmcn.com/package/%40firna/ui/src/panel-resize/README.md) 用于控制面板大小调整手柄. - [`@firna/ui/popover`](https://npmcn.com/package/%40firna/ui/src/popover/README.md) 用于固定的弹出器、就地菜单和电话菜单 床单. - [`@firna/ui/radio`](https://npmcn.com/package/%40firna/ui/src/radio/README.md) 对标题为“无线电选择卡”. - [`@firna/ui/rich-text`](https://npmcn.com/package/%40firna/ui/src/rich-text/README.md) 用于点名式块编辑器,并加减号, 内行格式化、列表/检查列表、本地键盘工具栏和 协作层(活页、跟踪变化、评论线程) `RichTextPresenceBar` 财务报告和审定财务报表 `RichTextCollabRail` 表面 . - [`@firna/ui/segmented`](https://npmcn.com/package/%40firna/ui/src/segmented/README.md) 对主题的单选分块控件. - [`@firna/ui/sheet`](https://npmcn.com/package/%40firna/ui/src/sheet/README.md) 用于主机模式底页 表格、菜单列表或一个控制下的API后面的拾取器. - [`@firna/ui/skeleton`](https://npmcn.com/package/%40firna/ui/src/skeleton/README.md) 对于内容形状的加载 占位符:发光的条和圆,一行和一列组,以及 脉冲提供商将一整个骨架从一动画中扫出. - [`@firna/ui/sortable-list`](https://npmcn.com/package/%40firna/ui/src/sortable-list/README.md) 可拖放列表(指针+) 键盘重排顺序,可选的起取/取取取手柄,以及垂直或 横向流动)加 `SortableGroups` 让多个 \* 列出交换物品——作为分块或板块叠放——报告 各随其来源和目的地组移动. - [`@firna/ui/spinner`](https://npmcn.com/package/%40firna/ui/src/spinner/README.md) 用于固定的旋转加载指示器. - [`@firna/ui/status-dot`](https://npmcn.com/package/%40firna/ui/src/status-dot/README.md) 小主题状态 信号显示在标签旁边 可以在状态正常时脉冲. - [`@firna/ui/switch`](https://npmcn.com/package/%40firna/ui/src/switch/README.md) 用于打开/关闭二进制开关. - [`@firna/ui/table`](https://npmcn.com/package/%40firna/ui/src/table/README.md) 对于带有可选标题和可点击行的数据表格. - `@firna/ui/theme` 页:1 `SharedUiThemeProvider`,默认会计类型 符号、朱诺符号预设、 `darkSharedUiTheme` 财务报告和审定财务报表 `junoDarkSharedUiTheme` 黑暗预设 `SharedUiScheme` 类型, `createSharedUiTheme(overrides, base)`,以及整个主题 `focusIndicator` (单位:千美元)`SharedUiThemeProvider theme={{ focusIndicator: "outline" }}` 互换次数 control的焦点发光, 用于浏览器大纲。 见 [他们](https://github.com/futex-ai/ui/blob/main/docs/theming.md) 黑暗模式合同和 [重点指标](https://github.com/futex-ai/ui/blob/main/docs/focus-indicators.md) 用于焦点模式. - `@firna/ui/focusRing` 页:1 `useFocusRing`, (中文(简体) ), `focusRingStyleFor`, (中文(简体) ), `focusRingCssVariablesFor`,以及 `focusRingDomPropsFor`见 [重点指标指南](https://github.com/futex-ai/ui/blob/main/docs/focus-indicators.md#custom-controls) 用于自定义控制. - [`@firna/ui/timeline`](https://npmcn.com/package/%40firna/ui/src/timeline/README.md) 用于多轨道编辑 时间表:一个视频或音频编辑器的标尺、车道、剪辑和播放头. - [`@firna/ui/toast`](https://npmcn.com/package/%40firna/ui/src/toast/README.md) 给面包供应商的 `useToast` 钩子 `toastController` 和临时通知土司,包括 带有可选自定义主要图标的卡和固态变体. - [`@firna/ui/touch-surface`](https://npmcn.com/package/%40firna/ui/src/touch-surface/README.md) 页:1 `TouchSurface` 财务报告和审定财务报表 `useTouchSurface`,哪个 标记和读取带有44px控制目标的表面. - [`@firna/ui/typography`](https://npmcn.com/package/%40firna/ui/src/typography/README.md) 用于文本角色, `TextScaleProvider`, (中文(简体) ), `useTextScale`, (中文(简体) ), 和内容 `scale` 超过. - [`@firna/ui/video-editor`](https://npmcn.com/package/%40firna/ui/src/video-editor/README.md) 视频编辑器 时间线周围的面板:程序显示器、传输、平分表、媒体 bin, 属性检查器, 效果架, 键框编辑器, 以及导出对话框 . - [`@firna/ui/workflow`](https://npmcn.com/package/%40firna/ui/src/workflow/README.md) 用于分支工作流程构建器 — 步图画布 (颜色编码节点、有色边标签、叉子、传说、添加步骤) 构建自动化工作流程. ## 安装 ```bash npm install @firna/ui ``` 所有平台软件包都是可选的对等依赖; 安装集 目标: - **仅网络( Vite, Next.js, 任意 DOM 捆绑器) :** `react`, (中文(简体) ), `react-dom`,以及 `lucide-react` - 这是整个网络对等集。 没有 `react-native` 没有 `react-native-web` 安装,不需要捆绑器别名: `import` 条件确定为 `dist/node`每一个原始人都会通过 库自己的DOM后端. 这对类型也有好处——网络建设 声明是自成一体的,所以即使是严格的TypeScript消费者 安装任何额外设备. - **博览会/反应原生(iOS,Android,和博览会网络):** `react`, (中文(简体) ), `react-dom`, (中文(简体) ), `react-native`, (中文(简体) ), `react-native-svg`, (中文(简体) ), `lucide-react-native`,以及 `lucide-react`地铁 `react-native` 条件解析 `dist/**`时 每个文件选择本地或网络执行。 博览会网络应用 留着什么 `react-native-web` 自身对应的本地代码需求 图书馆 `.web` 文件解析到 DOM 后端, 也永远无法到达 对于它. - **本地人可选择:** `@gorhom/bottom-sheet`, (中文(简体) ), `react-native-gesture-handler`, (中文(简体) ), 财务报告和审定财务报表 `react-native-reanimated` 为本地底页提供动力. 每个组件都通过 `src/primitives`,一小组 带有本地文件和 `.web` 兄弟姐妹:反应原生原始人 (单位:千美元)`react-native` (原始内容存档于2017-03-21) (中文(简体) ). Natural; 库自有的DOM后端在网络上), SVG (单位:千美元)`react-native-svg` 打开 土生土长, DOM `` )和图标(`lucide-react-native` 在本土, `lucide-react` ) (中文(简体) ). 接受图标道具 `IconComponent`,该类型同时是Lucide 包的图标满足,所以消费者通过与其匹配的 平台. ## 他们 见 [主题指南](https://github.com/futex-ai/ui/blob/main/docs/theming.md)。 。 。 . ### 重点指标 见 [重点指标指南](https://github.com/futex-ai/ui/blob/main/docs/focus-indicators.md)。 。 。 . ### Web 焦点 CSS 和服务器渲染 见 [重点指标指南](https://github.com/futex-ai/ui/blob/main/docs/focus-indicators.md#web-focus-css-and-server-rendering)。 。 。 . ### 图表颜色 见 [主题指南](https://github.com/futex-ai/ui/blob/main/docs/theming.md#chart-colors)。 。 。 . ## 开发者开始 ```bash npm ci npm test npm run typecheck npm run typecheck:web npm run build npm run test:dist npm run test:package npm run storybook npm run storybook:build npm run test:browser ``` 这个 [发展指南](https://github.com/futex-ai/ui/blob/main/docs/development.md) 解释每个支票,完整 `cargo xtask check` 大门,AI审查 包装、模拟目录、浏览器和快照套件以及套件 导出地图 . ## 软件包发布 见 [发布和部署指南](https://github.com/futex-ai/ui/blob/main/docs/releases.md#package-releases)。 。 。 . ## 故事书部署 见 [发布和部署指南](https://github.com/futex-ai/ui/blob/main/docs/releases.md#storybook-deployments)。 。 。 . ## 密钥代码跳出点 - 平台接合( 反应原生, SVG, 图标) : [弧/原生物](https://npmcn.com/package/%40firna/ui/src/primitives) - 共享主题边界 : [src/主题.tsx](https://npmcn.com/package/%40firna/ui/src/theme.tsx) - 家庭研究: [用户界面](https://npmcn.com/package/%40firna/ui/#readme-user-facing-interface) 链接其读取. - 共享控制大小缩放 : [弧/控制Size.ts](https://npmcn.com/package/%40firna/ui/src/controlSize.ts) - 触摸表面标记及其44px目标大小: [src/touch Surface.tsx (法语)](https://npmcn.com/package/%40firna/ui/src/touchSurface.tsx)中,和触摸度量单位 [斜弧/触摸](https://npmcn.com/package/%40firna/ui/src/touchMetrics.ts) - 共享焦点- 光线原始 : [src/焦点](https://npmcn.com/package/%40firna/ui/src/focusRing.ts)页:1 标记拼写 [斜弧/焦距](https://npmcn.com/package/%40firna/ui/src/focusRingHost.ts),则 CSS 规则在 [斜弧/原生/大小/分数](https://npmcn.com/package/%40firna/ui/src/primitives/dom/css.ts) - 指南: [主题](https://github.com/futex-ai/ui/blob/main/docs/theming.md), (中文(简体) ), [重点指标](https://github.com/futex-ai/ui/blob/main/docs/focus-indicators.md), (中文(简体) ), [发展](https://github.com/futex-ai/ui/blob/main/docs/development.md), (中文(简体) ), 财务报告和审定财务报表 [释放和部署](https://github.com/futex-ai/ui/blob/main/docs/releases.md) - 浏览器测试 : [测试/浏览器/](https://npmcn.com/package/%40firna/ui/tests/browser/),每个游戏剧作家谱 组成家庭 - 故事视觉/ARIA快照扫描: [测试/浏览器/相机. spec.ts](https://npmcn.com/package/%40firna/ui/tests/browser/snapshots.spec.ts) - 仓库自动化 : [任务/README.md](https://npmcn.com/package/%40firna/ui/xtask/README.md) - 共享组件协议及其链接页面: [文件/议定书/共享-ui组件](https://npmcn.com/package/%40firna/ui/docs/protocol/shared-ui-components.md) - App shell 部件协议,用于 `xs` 大小、紧凑文本、触摸表面, 链接、通知、空态、菜单和面板大小 : [文档/议定书/应用壳部分](https://npmcn.com/package/%40firna/ui/docs/protocol/app-shell-parts.md) - 口袋目录 : [文件/堆放/README.md](https://npmcn.com/package/%40firna/ui/docs/mockups/README.md) - 网络覆盖协议 : [文献/议定书/网络覆盖](https://npmcn.com/package/%40firna/ui/docs/protocol/web-overlays.md) - 丰富文本合作协议 : [文件/protocol/rich-text-collising.md](https://npmcn.com/package/%40firna/ui/docs/protocol/rich-text-collaboration.md) - 拖动选中的协议 : [文档/protocol/drag-select.md](https://npmcn.com/package/%40firna/ui/docs/protocol/drag-select.md), (中文(简体) ), 联合国 [筛选规则](https://npmcn.com/package/%40firna/ui/docs/protocol/drag-select-selection.md),以及 [选项参考](https://npmcn.com/package/%40firna/ui/docs/protocol/drag-select-api.md) - 消费者移徙: [文件/消费者-移民.md](https://npmcn.com/package/%40firna/ui/docs/consumer-migration.md) ## 相关仓库 - 消费者/来源会计组成部分: `/Users/calummoore/projects/futex/accounting` - 朱诺消费者: `/Users/calummoore/projects/futex/juno` ## 常见问题 ### @firna/ui 是什么？ Firna应用软件的共享回放原生和网络UI原始\. ### 如何安装 @firna/ui？ 在项目目录运行 npm install @firna/ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=19 \<20）、react-dom（\>=19 \<20）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @firna/ui 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @firna/ui 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @firna/ui 可以商用吗？ @firna/ui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @firna/ui 的下载量有多少？ 根据 npm 官方下载统计，@firna/ui 在 2026/10/15 – 2026/11/13 这 30 天内被下载 3,758 次，日均约 125 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @firna/ui 还在维护吗？ 最新版本 5\.1\.0 发布于 2026/11/08（6 天前）；至今共发布 38 个版本，其中过去 12 个月发布了 38 个；首次发布于 2026/06/15。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。