niuma-ui 1.1.12 → 1.2.0

package/CHANGELOG.md

@@ -6,6 +6,23 @@
 
 ## [Unreleased]
 
+## [1.2.0] - 2026-08-30
+
+### 变更
+
+- npm 包改为发布编译后的 ESM + `.d.ts` + 独立 CSS（`dist/`），不再把 Vue/TS 源码当作入口。`npm` / `pnpm` / `yarn` 安装后按包名导入即可，不必 `shamefully-hoist`。
+- `niuma-ui/styles.css` 为独立样式（token + vue-sonner），**不再** `@import 'tailwindcss'`。`package.json` 增加 `style` 字段。
+- Vite 插件改为发布 JS + `.d.ts`（`niuma-ui/vite-plugins/*`）。
+- 类型声明指向 `.js`，不再把 `.vue` 当作模块说明符。
+- `engines` 只约束 Node ≥ 20；`vue` peer 放宽为 `^3.5.0`；`vite` 为 optional peer（仅插件 / Monaco Worker 需要）。
+- 正式发布带 npm provenance（`publishConfig.provenance` + CI `--provenance`）。
+- 新增 `pnpm build`（`prepublishOnly` 发版前自动执行）。本机 `link` 联调仍可用源码 HMR。
+- 新增子路径 `niuma-ui/vite-prebundle/codemirror` 与 `niuma-ui/vite-prebundle/xterm`，供宿主 Vite `optimizeDeps`。
+
+### 说明
+
+- 本包面向运维控制台 / 数据库工作台。安装会带上 Monaco、CodeMirror、xterm；官网等轻量场景请具名导入并自建薄封装。后续若提供 `lite` 入口将是加法，不改主包合约。
+
 ## [1.1.12] - 2026-08-30
 
 ### 说明
@@ -213,21 +230,3 @@
 ### 说明
 
 - 1.0 之前的私有 tag（如 `v0.1.0`）仅作历史记录；新接入请依赖 `v1.0.0` 及之后版本。
-
-[Unreleased]: https://github.com/Blair-Shang/niuma-ui/compare/v1.1.12...HEAD
-[1.1.12]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.1.12
-[1.1.11]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.1.11
-[1.1.10]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.1.10
-[1.1.9]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.1.9
-[1.1.8]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.1.8
-[1.1.7]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.1.7
-[1.1.6]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.1.6
-[1.1.5]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.1.5
-[1.1.4]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.1.4
-[1.1.3]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.1.3
-[1.1.2]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.1.2
-[1.1.1]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.1.1
-[1.1.0]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.1.0
-[1.0.2]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.0.2
-[1.0.1]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.0.1
-[1.0.0]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.0.0

package/README.en.md

@@ -7,11 +7,11 @@
 
 English | [简体中文](./README.md)
 
-Vue 3 design system and component library. Ships consistent `Rs*` components, `--rs-*` design tokens, and optional desktop-tooling editors / terminal wrappers.
+Vue 3 **workbench** design system: `Rs*` components, `--rs-*` tokens, and optional editor / terminal wrappers.
 
-Use it for ops consoles, database workbenches, internal admin UIs, and product sites that need one visual and interaction language.
+Built for ops consoles, database workbenches, and internal admin UIs. Marketing sites can use named imports, but this is not a lightweight Ant Design-style kit — `npm install` pulls Monaco, CodeMirror, and xterm.
 
-**Status:** open source from **v1.0.0** under [Apache License 2.0](./LICENSE).
+**Status:** open source from **v1.0.0** under [Apache License 2.0](./LICENSE). From **v1.2.0** the npm package is compiled ESM (`install` then import by package name).
 
 ## Features
 
@@ -19,27 +19,29 @@ Use it for ops consoles, database workbenches, internal admin UIs, and product s
 - **Rs\* components** — Button, Form, Dialog, Table, Tree, Tabs, and more
 - **Tooling-oriented** — Monaco, CodeMirror, xterm wrappers (import carefully in light apps)
 - **Accessible primitives** — built on [Reka UI](https://reka-ui.com/); apps only consume `niuma-ui`
-- **Vite-friendly** — source-linked HMR; optional host Vite plugins
+- **Vite-friendly** — optional compiled host Vite plugins; local link still HMR-s from source
 
 ## Requirements
 
 | Item | Version |
 |------|---------|
 | Node.js | ≥ 20 |
-| Package manager | pnpm ≥ 9 (recommended) |
+| Package manager | npm / pnpm / yarn (this repo develops with pnpm) |
 | Vue | ^3.5 (`peerDependency`) |
-| Bundler | Vite 5+ / 8 (recommended) |
+| Bundler | Vite 5+ recommended; `RsMonacoEditor` needs Vite `?worker` |
+| Styles | `import 'niuma-ui/styles.css'` is standalone — **no** host Tailwind required |
 
 ## Install
 
 ```bash
 pnpm add niuma-ui
+# or: npm install niuma-ui / yarn add niuma-ui
 ```
 
-Until published to npm, install from a GitHub tag:
+Pin a version:
 
 ```bash
-pnpm add git+https://github.com/Blair-Shang/niuma-ui.git#v1.0.0
+pnpm add niuma-ui@1.2.0
 ```
 
 Local link and Vite details: **[Consumer guide](./docs/consumers.md)** (Chinese).
@@ -72,7 +74,7 @@ import { RsConfigProvider, RsButton } from 'niuma-ui'
 1. Apps import only from `niuma-ui` — **do not** depend on `reka-ui` directly.
 2. Styles: `import 'niuma-ui/styles.css'`.
 3. Wrap the app with `RsConfigProvider`.
-4. Light apps should avoid pulling Monaco / Terminal / heavy table editors via the main barrel.
+4. Light apps should named-import and wrap what they need — do not `import *`. Install still includes editor dependencies; tree-shaking only affects the bundle.
 
 Component catalog: **[docs/components.md](./docs/components.md)**.
 
@@ -86,6 +88,7 @@ Component catalog: **[docs/components.md](./docs/components.md)**.
 ```bash
 pnpm install
 pnpm dev
+pnpm build               # library → dist/ (npm publish)
 pnpm build:playground
 pnpm test
 ```

package/README.md

@@ -7,11 +7,11 @@
 
 [English](./README.en.md) | 简体中文
 
-Vue 3 设计系统与组件库。提供一致的 `Rs*` 组件、`--rs-*` 设计 token，以及面向桌面工具场景的编辑器 / 终端能力。
+Vue 3 **工作台**设计系统：一致的 `Rs*` 组件、`--rs-*` token，以及面向桌面工具的编辑器 / 终端封装。
 
-适用于运维控制台、数据库工作台、内部后台与产品官网等需要统一视觉与交互语言的 Vue 应用。
+适用于运维控制台、数据库工作台、内部后台。营销站 / 落地页也可以用，但请具名导入；本包不是 Ant Design 那种轻量通用库，`npm install` 会带上 Monaco、CodeMirror、xterm。
 
-**状态：** 自 **v1.0.0** 起按 [Apache License 2.0](./LICENSE) 开源。
+**状态：** 自 **v1.0.0** 起按 [Apache License 2.0](./LICENSE) 开源。自 **v1.2.0** 起 npm 发布编译后的 ESM（`install` 后按包名导入即可）。
 
 ## 特性
 
@@ -19,21 +19,23 @@ Vue 3 设计系统与组件库。提供一致的 `Rs*` 组件、`--rs-*` 设计
 - **Rs\* 组件**：Button、Form、Dialog、Table、Tree、Tabs 等完整交互控件
 - **专业工具向**：Monaco、CodeMirror、xterm 等编辑器 / 终端封装（按需引入）
 - **无障碍与焦点**：底层基于 [Reka UI](https://reka-ui.com/)，业务层只消费 `niuma-ui`
-- **Vite 友好**：源码直连联调；可选导出消费方 Vite 插件
+- **Vite 友好**：本机可 link 源码 HMR；可选导出编译后的宿主 Vite 插件
 
 ## 要求
 
 | 项 | 版本 |
 |----|------|
 | Node.js | ≥ 20 |
-| 包管理器 | pnpm ≥ 9（推荐） |
-| Vue | ^3.5（peerDependency） |
-| 构建 | Vite 5+ / 8（推荐） |
+| 包管理器 | npm / pnpm / yarn（本仓库开发用 pnpm） |
+| Vue | ^3.5.0（peerDependency） |
+| 打包器 | Vite 5+ 推荐；使用 `RsMonacoEditor` 时需要 Vite 处理 `?worker` |
+| 样式 | `import 'niuma-ui/styles.css'` 为独立 CSS，**不要求**宿主安装 Tailwind |
 
 ## 安装
 
 ```bash
 pnpm add niuma-ui
+# 或 npm install niuma-ui / yarn add niuma-ui
 # 业务流水线跟最新正式版（npm dist-tag latest，无 GitHub 标签 latest）
 pnpm add niuma-ui@latest
 ```
@@ -41,9 +43,9 @@ pnpm add niuma-ui@latest
 钉死某一版：
 
 ```bash
-pnpm add niuma-ui@1.1.11
+pnpm add niuma-ui@1.2.0
 # 或
-pnpm add git+https://github.com/Blair-Shang/niuma-ui.git#v1.1.11
+pnpm add git+https://github.com/Blair-Shang/niuma-ui.git#v1.2.0
 ```
 
 本地 link、Vite 配置、包体积建议见 **[消费方指南](./docs/consumers.md)**。
@@ -76,7 +78,7 @@ import { RsConfigProvider, RsButton } from 'niuma-ui'
 1. 应用与业务模块只允许 `import { … } from 'niuma-ui'`，**禁止**直接依赖 `reka-ui`。
 2. 样式入口：`import 'niuma-ui/styles.css'`（须在业务品牌 CSS 之前或按文档顺序加载）。
 3. 根节点使用 `RsConfigProvider` 提供主题、语言与默认控件尺寸。
-4. 营销站 / 轻量应用避免从主入口导入 Monaco、Terminal、重型 Table 编辑能力；按文件路径或自建薄封装按需引用（见消费方指南）。
+4. 营销站 / 轻量应用请具名导入并自建薄封装（见消费方指南），不要 `import *`。安装体积仍含编辑器依赖；摇树只影响打包结果。
 
 组件清单与新增组件规范见 **[组件说明](./docs/components.md)**。
 
@@ -91,6 +93,7 @@ import { RsConfigProvider, RsButton } from 'niuma-ui'
 ```bash
 pnpm install
 pnpm dev                 # 组件演示，默认 http://localhost:5180
+pnpm build               # 库产物 → dist/（npm 发布）
 pnpm build:playground    # 构建演示站静态资源 → playground-dist/
 pnpm test                # Vitest
 pnpm test:watch

package/dist/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,8 @@
+//#region \0plugin-vue:export-helper
+var _plugin_vue_export_helper_default = (sfc, props) => {
+	const target = sfc.__vccOpts || sfc;
+	for (const [key, val] of props) target[key] = val;
+	return target;
+};
+//#endregion
+export { _plugin_vue_export_helper_default as default };

package/dist/components/RsAlert.css

@@ -0,0 +1,111 @@
+
+.rs-alert[data-v-07746213] {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--rs-alert-gap, var(--rs-space-sm));
+  padding: var(--rs-alert-padding-y, var(--rs-space-md))
+    var(--rs-alert-padding-x, var(--rs-space-lg));
+  border-radius: var(--rs-alert-radius, var(--rs-radius));
+  box-sizing: border-box;
+}
+.rs-alert--bordered[data-v-07746213] {
+  border: 1px solid transparent;
+}
+.rs-alert__icon[data-v-07746213] {
+  display: inline-flex;
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+}
+.rs-alert__body[data-v-07746213] {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.rs-alert__title[data-v-07746213] {
+  font-size: var(--rs-font-size-sm);
+  font-weight: var(--rs-font-weight-semibold);
+  line-height: var(--rs-line-height-tight);
+  color: inherit;
+}
+.rs-alert__content[data-v-07746213] {
+  margin-top: var(--rs-space-xs);
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-normal);
+  color: var(--rs-alert-content-fg, var(--rs-muted));
+}
+.rs-alert__close[data-v-07746213] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0.125rem;
+  border: 0;
+  border-radius: var(--rs-radius-sm);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.7;
+  outline: none;
+}
+.rs-alert__close[data-v-07746213]:hover {
+  opacity: 1;
+  background: color-mix(in srgb, currentColor 10%, transparent);
+}
+.rs-alert__close[data-v-07746213]:focus-visible {
+  box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+.rs-alert--default[data-v-07746213] {
+  background: var(--rs-surface-hover);
+  color: var(--rs-text);
+  border-color: var(--rs-border);
+}
+.rs-alert--default .rs-alert__content[data-v-07746213] {
+  color: var(--rs-alert-content-fg, var(--rs-muted));
+}
+.rs-alert--info[data-v-07746213] {
+  background: var(--rs-info-container);
+  color: var(--rs-on-info-container);
+  border-color: color-mix(
+    in srgb,
+    var(--rs-info) var(--rs-alert-border-alpha, 35%),
+    transparent
+  );
+}
+.rs-alert--info .rs-alert__content[data-v-07746213] {
+  color: color-mix(in srgb, var(--rs-on-info-container) 78%, transparent);
+}
+.rs-alert--success[data-v-07746213] {
+  background: var(--rs-success-container);
+  color: var(--rs-on-success-container);
+  border-color: color-mix(
+    in srgb,
+    var(--rs-success) var(--rs-alert-border-alpha, 35%),
+    transparent
+  );
+}
+.rs-alert--success .rs-alert__content[data-v-07746213] {
+  color: color-mix(in srgb, var(--rs-on-success-container) 78%, transparent);
+}
+.rs-alert--warning[data-v-07746213] {
+  background: var(--rs-warning-container);
+  color: var(--rs-on-warning-container);
+  border-color: color-mix(
+    in srgb,
+    var(--rs-warning) var(--rs-alert-border-alpha, 35%),
+    transparent
+  );
+}
+.rs-alert--warning .rs-alert__content[data-v-07746213] {
+  color: color-mix(in srgb, var(--rs-on-warning-container) 78%, transparent);
+}
+.rs-alert--danger[data-v-07746213] {
+  background: var(--rs-danger-container);
+  color: var(--rs-on-danger-container);
+  border-color: color-mix(
+    in srgb,
+    var(--rs-danger) var(--rs-alert-border-alpha, 35%),
+    transparent
+  );
+}
+.rs-alert--danger .rs-alert__content[data-v-07746213] {
+  color: color-mix(in srgb, var(--rs-on-danger-container) 78%, transparent);
+}

package/dist/components/RsAlert.d.ts

@@ -0,0 +1,32 @@
+import type { RsFeedbackTone } from './overlay-utils';
+type __VLS_Props = {
+    type?: RsFeedbackTone;
+    title?: string;
+    closable?: boolean;
+    bordered?: boolean;
+};
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    title?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    type: RsFeedbackTone;
+    bordered: boolean;
+    closable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/RsAlert.impl.js

@@ -0,0 +1,83 @@
+import { useRsI18n } from "../composables/useRsI18n.js";
+import RsIcon_default from "./RsIcon.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref } from "vue";
+//#region src/components/RsAlert.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	class: "rs-alert__icon",
+	"aria-hidden": "true"
+};
+var _hoisted_2 = { class: "rs-alert__body" };
+var _hoisted_3 = {
+	key: 0,
+	class: "rs-alert__title"
+};
+var _hoisted_4 = {
+	key: 1,
+	class: "rs-alert__content"
+};
+var _hoisted_5 = ["aria-label"];
+var RsAlert_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RsAlert",
+	props: {
+		type: { default: "info" },
+		title: {},
+		closable: {
+			type: Boolean,
+			default: false
+		},
+		bordered: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: ["close"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { t } = useRsI18n();
+		const iconName = computed(() => {
+			switch (props.type) {
+				case "success": return "circle-check";
+				case "warning": return "triangle-alert";
+				case "danger": return "circle-alert";
+				case "default": return "info";
+				default: return "info";
+			}
+		});
+		const rootClass = computed(() => [
+			"rs-alert",
+			`rs-alert--${props.type}`,
+			{
+				"rs-alert--bordered": props.bordered,
+				"rs-alert--closable": props.closable
+			}
+		]);
+		function onClose(event) {
+			emit("close", event);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(rootClass.value),
+				role: "alert"
+			}, [
+				createElementVNode("span", _hoisted_1, [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(RsIcon_default, {
+					name: iconName.value,
+					size: 16
+				}, null, 8, ["name"])], true)]),
+				createElementVNode("div", _hoisted_2, [__props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)], true)])) : createCommentVNode("", true), _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_4, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])) : createCommentVNode("", true)]),
+				__props.closable ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					type: "button",
+					class: "rs-alert__close",
+					"aria-label": unref(t)("alert.close"),
+					onClick: onClose
+				}, [createVNode(RsIcon_default, {
+					name: "x",
+					size: 14
+				})], 8, _hoisted_5)) : createCommentVNode("", true)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { RsAlert_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/RsAlert.js

@@ -0,0 +1,8 @@
+import './RsAlert.css'
+import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-helper.js";
+import RsAlert_vue_vue_type_script_setup_true_lang_default from "./RsAlert.impl.js";
+
+//#region src/components/RsAlert.vue
+var RsAlert_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsAlert_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-07746213"]]);
+//#endregion
+export { RsAlert_default as default };

package/dist/components/RsAvatar.css

@@ -0,0 +1,60 @@
+
+.rs-avatar {
+  display: inline-flex;
+  overflow: hidden;
+  flex-shrink: 0;
+  border: 1px solid var(--rs-border);
+  background: var(--rs-surface);
+}
+.rs-avatar--circle {
+  border-radius: var(--rs-radius-full);
+}
+.rs-avatar--square {
+  border-radius: var(--rs-radius-sm);
+}
+.rs-avatar--sm {
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.rs-avatar--md {
+  width: 2.25rem;
+  height: 2.25rem;
+}
+.rs-avatar--lg {
+  width: 3rem;
+  height: 3rem;
+}
+.rs-avatar__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.rs-avatar__fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: var(--rs-font-size-xs);
+  font-weight: var(--rs-font-weight-semibold);
+}
+.rs-avatar__fallback--default {
+  background: var(--rs-surface-hover);
+  color: var(--rs-muted);
+}
+.rs-avatar__fallback--primary {
+  background: var(--rs-primary-container);
+  color: var(--rs-on-primary-container);
+}
+.rs-avatar__fallback--success {
+  background: var(--rs-success-container);
+  color: var(--rs-on-success-container);
+}
+.rs-avatar__fallback--warning {
+  background: var(--rs-warning-container);
+  color: var(--rs-on-warning-container);
+}
+.rs-avatar__fallback--danger {
+  background: var(--rs-danger-container);
+  color: var(--rs-on-danger-container);
+}

package/dist/components/RsAvatar.d.ts

@@ -0,0 +1,30 @@
+import { type RsAvatarShape, type RsAvatarSize, type RsAvatarTone } from './avatar-utils';
+type __VLS_Props = {
+    src?: string;
+    alt?: string;
+    name?: string;
+    fallback?: string;
+    icon?: string;
+    size?: RsAvatarSize;
+    shape?: RsAvatarShape;
+    tone?: RsAvatarTone;
+    label?: string;
+};
+declare var __VLS_19: {};
+type __VLS_Slots = {} & {
+    fallback?: (props: typeof __VLS_19) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: RsAvatarSize;
+    tone: RsAvatarTone;
+    icon: string;
+    shape: RsAvatarShape;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/RsAvatar.impl.js

@@ -0,0 +1,59 @@
+import RsIcon_default from "./RsIcon.js";
+import { AvatarFallback, AvatarImage, AvatarRoot } from "./reka.js";
+import { getAvatarInitials } from "./avatar-utils.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
+//#region src/components/RsAvatar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { key: 1 };
+var RsAvatar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RsAvatar",
+	props: {
+		src: {},
+		alt: {},
+		name: {},
+		fallback: {},
+		icon: { default: "user" },
+		size: { default: "md" },
+		shape: { default: "circle" },
+		tone: { default: "primary" },
+		label: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const fallbackText = computed(() => {
+			if (props.fallback?.trim()) return props.fallback.trim();
+			if (props.name?.trim()) return getAvatarInitials(props.name);
+			return "";
+		});
+		const showIconFallback = computed(() => !fallbackText.value);
+		const imageAlt = computed(() => props.alt ?? props.name ?? "");
+		const ariaLabel = computed(() => props.label ?? props.alt ?? props.name ?? void 0);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(AvatarRoot), {
+				class: normalizeClass(["rs-avatar", [`rs-avatar--${__props.size}`, `rs-avatar--${__props.shape}`]]),
+				"aria-label": ariaLabel.value,
+				role: ariaLabel.value ? "img" : void 0
+			}, {
+				default: withCtx(() => [__props.src ? (openBlock(), createBlock(unref(AvatarImage), {
+					key: 0,
+					src: __props.src,
+					alt: imageAlt.value,
+					class: "rs-avatar__image"
+				}, null, 8, ["src", "alt"])) : createCommentVNode("", true), createVNode(unref(AvatarFallback), { class: normalizeClass(["rs-avatar__fallback", `rs-avatar__fallback--${__props.tone}`]) }, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "fallback", {}, () => [showIconFallback.value ? (openBlock(), createBlock(RsIcon_default, {
+						key: 0,
+						name: __props.icon,
+						size: __props.size === "sm" ? 14 : __props.size === "lg" ? 20 : 16
+					}, null, 8, ["name", "size"])) : (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(fallbackText.value), 1))])]),
+					_: 3
+				}, 8, ["class"])]),
+				_: 3
+			}, 8, [
+				"class",
+				"aria-label",
+				"role"
+			]);
+		};
+	}
+});
+//#endregion
+export { RsAvatar_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/RsAvatar.js

@@ -0,0 +1,7 @@
+import './RsAvatar.css'
+import RsAvatar_vue_vue_type_script_setup_true_lang_default from "./RsAvatar.impl.js";
+
+//#region src/components/RsAvatar.vue
+var RsAvatar_default = RsAvatar_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RsAvatar_default as default };

package/dist/components/RsBadge.css

@@ -0,0 +1,41 @@
+
+.rs-badge[data-v-65ec5a3b] {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.625rem;
+  border-radius: var(--rs-radius-full);
+  font-size: var(--rs-font-size-xs);
+  font-weight: var(--rs-font-weight-medium);
+  line-height: var(--rs-line-height-tight);
+  letter-spacing: 0.02em;
+}
+.rs-badge--default[data-v-65ec5a3b] {
+  background: var(--rs-surface-hover);
+  color: var(--rs-text);
+  border: 1px solid var(--rs-border);
+}
+.rs-badge--primary[data-v-65ec5a3b] {
+  background: var(--rs-primary-container);
+  color: var(--rs-on-primary-container);
+  border: 1px solid color-mix(in srgb, var(--rs-primary) 40%, transparent);
+}
+.rs-badge--success[data-v-65ec5a3b] {
+  background: var(--rs-success-container);
+  color: var(--rs-on-success-container);
+  border: 1px solid color-mix(in srgb, var(--rs-success) 40%, transparent);
+}
+.rs-badge--warning[data-v-65ec5a3b] {
+  background: var(--rs-warning-container);
+  color: var(--rs-on-warning-container);
+  border: 1px solid color-mix(in srgb, var(--rs-warning) 40%, transparent);
+}
+.rs-badge--danger[data-v-65ec5a3b] {
+  background: var(--rs-danger-container);
+  color: var(--rs-on-danger-container);
+  border: 1px solid color-mix(in srgb, var(--rs-danger) 40%, transparent);
+}
+.rs-badge--info[data-v-65ec5a3b] {
+  background: var(--rs-info-container);
+  color: var(--rs-on-info-container);
+  border: 1px solid color-mix(in srgb, var(--rs-info) 40%, transparent);
+}

package/dist/components/RsBadge.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    variant: "default" | "primary" | "success" | "warning" | "danger" | "info";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/RsBadge.impl.js

@@ -0,0 +1,13 @@
+import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot } from "vue";
+//#region src/components/RsBadge.vue?vue&type=script&setup=true&lang.ts
+var RsBadge_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RsBadge",
+	props: { variant: { default: "default" } },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", { class: normalizeClass(["rs-badge", `rs-badge--${__props.variant}`]) }, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 2);
+		};
+	}
+});
+//#endregion
+export { RsBadge_vue_vue_type_script_setup_true_lang_default as default };