# @want-foundation/desyst-react 中文文档 规范地址：https://npmcn.com/package/%40want-foundation/desyst-react/ 版本：0\.4\.0 npm 元数据更新时间：2026-11-02T20:31:40.473Z 中文译文更新时间：2026-11-02T21:05:06.994Z 软件包许可：MIT 本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40want-foundation/desyst-react 原文对照：https://npmcn.com/package/%40want-foundation/desyst-react/?lang=original 项目主页：https://github.com/andrey-krasheninnikov/want-desyst#readme 源码仓库：https://github.com/andrey-krasheninnikov/want-desyst ## 关键信息（来自 npm 元数据） - 包体积（解压后）：130 kB，52 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：6 个 - peer 依赖：react ^19\.0\.0，react-dom ^19\.0\.0 - 首次发布：2026-10-28T16:29:57.431Z - 最新版本发布：2026-11-02T20:31:40.271Z - 已发布版本数：7（近 12 个月 7 个） ## 中文简介 可访问的React组件和共享的Want产品组合。 ## 安装 ```sh npm install @want-foundation/desyst-react ``` 也可以使用：`pnpm add @want-foundation/desyst-react`、`yarn add @want-foundation/desyst-react`、`bun add @want-foundation/desyst-react` ## README # @want-foundation / desyst-react 基于Radix构建的React 19组件。在同一个发布版本安装@want-foundation/desyst-foundation，并导入它的样式表一次。React和React DOM是对等依赖关系。 公共导出包括UI原语，BrandLogo, BrandLockup, MediaCard, ContactCard, ThemeToggle, CommentFeed, DateField, UrlField， OpenUrl和Window。产品数据、标签、url和操作回调属于消费者。 DateField使用受控的本地日期字符串和消费者提供的语言环境和标签。UrlField将打开的链接验证为HTTP(S)。窗口提供了一个页标题和内容槽，没有应用程序数据。 有关使用、兼容性和发布说明，请参阅存储库README。 CommentItem。createdAt接受{dateTime， label}。提供来自消费者的ISO时间戳和本地化的显示标签。该组件在SSR和水合作用期间保留该文本。 额外的出口是复选框，下拉菜单，吐司，工具提示，组合框，弹出窗口，表，分页，FileUpload和进度。菜单、吐司、工具提示、弹出窗口和表族都公开了它们的组成部分。为所有组件样式和动作导入一次基础样式表。 Combobox接受禁用值、标签和可选项的选项，外加一个受控值和onValueChange。供应标签和emptyLabel。输入过滤器选项；箭头导航启用的选项，Enter选择，Escape恢复当前值。可选名称将所选值添加到本机表单数据中。 分页接收page， pageSize和totalItems。它的onChange（page, pageSize）回调报告导航；更改页面大小将页面重置为1。提供导航、上一页、下一页、页面大小、页面（page）和结果（from、to、total）标签。空结果显示页面1禁用导航。 FileUpload接收文件和onFilesChange，可选accept， multiple, maxSize（以字节为单位），maxFiles和disabled。提供标签和选择，删除，删除（名称），invalidType（名称），tooLarge（名称，maxSize）和tooMany（maxFiles）标签。无效批次将保持当前选择的完整性。图像预览在删除时释放其对象url。在消费者中使用选定的File对象进行上传；组件不提交本地文件输入或发送网络请求。 进度需要一个标签，并接受value和max。空值表示不确定的进度。表保留本地表语义，标题和aria-busy；用TableCell colSpan组合加载行和空行。ToastProvider和ToastViewport接受本地化的可访问性标签；ToastAction需要描述性的文本。 排版暴露了显示、h1到h6、前导、主体、小、标题、标签、overline、单声道、代码、代码块和引号变体。它的默认HTML元素紧跟变体；As可以覆盖元素，同时保持其视觉样式。色调和对齐使用语义颜色和逻辑对齐。散文风格的原生标题，段落，列表，链接，强调，引用和代码在一个可读的措施。基础令牌包含响应大小、权重、领先和跟踪。 大小使用rem和流体视口插值；区域设置字体保持活动状态。 加载器的变体是旋转器，点，条和轨道；尺寸有sm， md和lg。微光变体是块，文本，头像和卡。为每个状态组件提供一个本地化的标签。他们暂停的道具停止了重复的运动。 AnimatedText接受文本和可选的渐变、滑动或模糊效果。它在没有计时器或保留输出文本的情况下动画一个新值。当更改需要通知时，显式地设置aria-live。 辉光是一个装饰性的、非交互式的背景层。将其直接放入className="glow-host"的元素中；该层继承主机半径。使用普通样式颜色或文本颜色实用程序来更改其色调。两个膨胀波在一个宽阔的环境光晕上运行，周期为3.6秒，偏移为1.8秒。暂停停止两个波。为持久装饰运动公开暂停控件，并暂停非活动表面。透明度的降低保留了波浪。 减少运动保持静态发光；强制的颜色隐藏了它。 Snackbar组合了现有的Toast原语。提供变量（错误，警告，信息或成功），本地化的variantLabel， title和closeLabel；description和带有label、altText和onClick的操作是可选的。默认情况下，错误信息一直保留，直到被解除；其他变体持续5秒。持续时间可以覆盖这一点。SnackbarProvider提供通知标签；SnackbarViewport提供了viewport标签，并支持通过——snackbar-bottom来放置。 指针悬停和键盘焦点暂停定时消息。表面遵循当前主题，而状态图标板在两个主题中使用相同的重音。桌面操作位于内容旁边，并在狭窄的屏幕上移动到内容下方。消费者拥有open， onOpenChange和action效果。导入基础样式表包括所有视觉样式和减少动作的回退。对内联彩色文本使用状态文本标记；状态前景令牌是用于亮状态表面的墨水。 ## 常见问题 ### @want-foundation/desyst-react 是什么？ 可访问的React组件和共享的Want产品组合。 ### 如何安装 @want-foundation/desyst-react？ 在项目目录运行 npm install @want-foundation/desyst-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.0\.0）、react-dom（^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @want-foundation/desyst-react 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @want-foundation/desyst-react 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @want-foundation/desyst-react 可以商用吗？ @want-foundation/desyst-react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @want-foundation/desyst-react 还在维护吗？ 最新版本 0\.4\.0 发布于 2026/11/03（今天）；至今共发布 7 个版本，其中过去 12 个月发布了 7 个；首次发布于 2026/10/29。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。