# @exsto/ds 中文文档

规范地址：https://npmcn.com/package/%40exsto/ds/

版本：0\.0\.1-rc\.6
npm 元数据更新时间：2026-11-01T00:46:58.826Z
中文译文更新时间：2026-11-01T03:01:37.584Z
软件包许可：Apache-2\.0

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

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

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

- 包体积（解压后）：1 MB，171 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：14 个
- peer 依赖：react ^19\.0\.0，react-dom ^19\.0\.0
- 首次发布：2026-10-13T03:36:53.064Z
- 最新版本发布：2026-11-01T00:46:58.659Z
- 已发布版本数：7（近 12 个月 7 个）

## 中文简介

ydynamix设计系统：React组件和设计令牌。

## 安装

```sh
npm install @exsto/ds
```

也可以使用：`pnpm add @exsto/ds`、`yarn add @exsto/ds`、`bun add @exsto/ds`

## README

# @exsto / ds

ydynamix设计系统：React组件和设计令牌。

## 安装

```sh
npm install @exsto/ds
```

React 19是一个对等依赖。

## 使用

```tsx
import { Button, Card, CardContent } from '@exsto/ds';
import '@exsto/ds/styles.css';

export const Example = () => (
  <Card>
    <CardContent>
      <Button>Save</Button>
    </CardContent>
  </Card>
);
```

这就是整个过程。 **你不需要顺风。** `styles.css` 船只 预编译：它携带设计令牌以及组件中的每个实用程序 自己使用。

### 如果你使用顺风

`styles.css` 是编译后的输出，所以它只包含组件的实用程序 自己使用。写 `bg-card` 或者 `text-muted-foreground` 在你的 _自己的_ 标记，也导入令牌层，并让您的Tailwind构建生成 词汇:

```css
@import "@exsto/ds/styles.css";
@import "tailwindcss";
@import "@exsto/ds/theme.css";
```

**顺序很重要，而且 `styles.css` 必须是第一位的。** 这是一个编译过的 顺风建造，所以它的公用设施和你的在同一个级联层，在 同样的特殊性，后面的规则胜出。在顺风进入后导入它 其无条件的 `.hidden` 打败你的 `.md:table-cell`：响应式列 消失，宽度缩小。库CSS先于应用CSS，就像任何CSS依赖项一样。

不需要其他任何东西。 `theme.css` 还将您的构建指向组件。 已发布代码，因此您的构建也会发出它们的类，每个响应式变体 在自己的基地之后。这就是保持设计系统类(如 侧边栏的 `hidden md:block` 工作时，您自己的标记使用 `hidden` : 一个构建决定了双方的顺序。早期的版本需要一个 `@source` 在应用程序中得到这个，这个行可以被删除。

`theme.css` 是故意反编译的。它携带着代币 `.dark` 范围, 品牌层(Inter； `text-2xs`)及 `@theme` 测绘顺风需要 把它们变成公用事业。不要把这个块复制到你的应用中，否则它会漂移 从设计系统。

没有它，一些令牌实用程序仍然可以工作，因为我们的组件碰巧使用 他们，但覆盖率是偶然的：大约一半 `bg-*` 几乎每一个 `border-*` 不在。

### 黑暗的模式

把 `dark` 在任何祖先身上。令牌的作用域是按类重新定义的，而不是按媒体 查询，因此子树可以在浅色页面中显示为深色。

```tsx
<div className="dark">
  <Button>Dark</Button>
</div>
```

## 入口点

| 进口 | 它是什么？ |
| --- | --- |
| `@exsto/ds` | 反应组件 |
| `@exsto/ds/styles.css` | 预编译的标记和组件样式 |
| `@exsto/ds/theme.css` | 未编译代币，品牌层和顺风 `@theme` 映射 |

## 状态

发布候选版本(`0.0.1-rc.N`）. API还不稳定；处理次要版本 直到 `0.1.0`.

`0.0.1-rc.5` 删除了 `@exsto/ds/elements` 入口点( `<edx-*>` 网络 组件)以及Angular的支持。设计系统仅支持React。呆在 `0.0.1-rc.4` 如果你依赖于元素。

## 执照

apache - 2.0。看到 [许可证](https://npmcn.com/package/%40exsto/ds/LICENSE).

## 常见问题

### @exsto/ds 是什么？

ydynamix设计系统：React组件和设计令牌。

### 如何安装 @exsto/ds？

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

### @exsto/ds 支持 TypeScript 吗？

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

### @exsto/ds 支持 ESM 还是 CommonJS？

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

### @exsto/ds 可以商用吗？

@exsto/ds 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @exsto/ds 还在维护吗？

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