niuma-ui 1.1.12 → 1.2.0

package/dist/components/RsSplitPane.impl.js

@@ -0,0 +1,408 @@
+import { useRsI18n } from "../composables/useRsI18n.js";
+import RsIcon_default from "./RsIcon.js";
+import { applySplitResize, collapseSplitPane, expandSplitPane, isSplitPaneCollapsed, normalizeSplitSizes, resolveSplitAutoFlags, resolveSplitConstraints, roundSize, splitSizesEqual } from "./split-pane-utils.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, unref, useModel, watch } from "vue";
+//#region src/components/RsSplitPane.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-pane-key"];
+var _hoisted_2 = [
+	"data-resizer-index",
+	"onPointerdown",
+	"onPointermove",
+	"onPointerup",
+	"onPointercancel"
+];
+var _hoisted_3 = [
+	"tabindex",
+	"aria-orientation",
+	"aria-valuenow",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-label",
+	"aria-disabled",
+	"onKeydown",
+	"onDblclick"
+];
+var _hoisted_4 = {
+	key: 0,
+	class: "rs-split__grip",
+	"aria-hidden": "true"
+};
+var RsSplitPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RsSplitPane",
+	props: /*@__PURE__*/ mergeModels({
+		panes: {},
+		orientation: { default: "horizontal" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		keyboardStep: { default: 4 },
+		withHandle: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"sizes": { default: () => [] },
+		"sizesModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels([
+		"resize",
+		"resize-end",
+		"collapse",
+		"expand"
+	], ["update:sizes"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		/** 各面板尺寸（百分比，总和 100） */
+		const model = useModel(__props, "sizes");
+		const emit = __emit;
+		const { t } = useRsI18n();
+		const rootRef = ref(null);
+		const sizes = ref([]);
+		const constraints = computed(() => resolveSplitConstraints(props.panes));
+		const resizerCount = computed(() => Math.max(0, props.panes.length - 1));
+		/** 内容自适应面板标记；首次拖拽/键盘调整时会物化为百分比并清空 */
+		const autoFlags = ref(resolveSplitAutoFlags(props.panes));
+		/** 归一化初始值，作为双击复位的基准 */
+		let initialSizes = normalizeSplitSizes(props.panes, modelSeed());
+		sizes.value = initialSizes.slice();
+		function modelSeed() {
+			return model.value && model.value.length === props.panes.length ? model.value : void 0;
+		}
+		function paneKeySignature() {
+			return props.panes.map((pane) => pane.key).join("|");
+		}
+		watch(() => paneKeySignature(), () => {
+			const provided = sizes.value.length === props.panes.length ? sizes.value : void 0;
+			autoFlags.value = resolveSplitAutoFlags(props.panes);
+			initialSizes = normalizeSplitSizes(props.panes, provided);
+			sizes.value = initialSizes.slice();
+			syncModel(sizes.value);
+		});
+		watch(() => props.panes.map((pane) => pane.size).join("|"), () => {
+			autoFlags.value = resolveSplitAutoFlags(props.panes);
+			initialSizes = normalizeSplitSizes(props.panes, modelSeed());
+			if (!autoFlags.value.some(Boolean)) {
+				sizes.value = initialSizes.slice();
+				syncModel(sizes.value);
+			}
+		});
+		watch(model, (value) => {
+			if (!value || value.length !== props.panes.length) return;
+			if (splitSizesEqual(value, sizes.value)) return;
+			autoFlags.value = props.panes.map(() => false);
+			sizes.value = normalizeSplitSizes(props.panes, value);
+		});
+		function syncModel(next) {
+			if (!splitSizesEqual(model.value ?? [], next)) model.value = next.slice();
+		}
+		function commit(next) {
+			sizes.value = next;
+			syncModel(next);
+			emit("resize", next.slice());
+		}
+		/** pane key → 折叠前尺寸；expand 未显式传 toSize 时还原 */
+		const sizeBeforeCollapse = /* @__PURE__ */ new Map();
+		function emitBoundaryTransitions(before, after) {
+			props.panes.forEach((pane, index) => {
+				const constraint = constraints.value[index];
+				const wasCollapsed = isSplitPaneCollapsed(before[index] ?? 0, constraint);
+				const nowCollapsed = isSplitPaneCollapsed(after[index] ?? 0, constraint);
+				if (!wasCollapsed && nowCollapsed) {
+					const prev = before[index];
+					if (prev !== void 0) sizeBeforeCollapse.set(pane.key, prev);
+					emit("collapse", pane.key);
+				} else if (wasCollapsed && !nowCollapsed) emit("expand", pane.key);
+			});
+		}
+		/** 展开目标：显式 toSize > 折叠前记忆 > 初始 size */
+		function resolveExpandSize(key, index, toSize) {
+			if (toSize !== void 0) return toSize;
+			return sizeBeforeCollapse.get(key) ?? initialSizes[index];
+		}
+		let dragIndex = null;
+		let dragOrigin = 0;
+		let dragStartSizes = [];
+		let flexPx = 0;
+		let pendingDragSizes = null;
+		let dragFrame = 0;
+		function directPaneElements(root) {
+			return [...root.children].filter((el) => el instanceof HTMLElement && el.classList.contains("rs-split__pane"));
+		}
+		function paneElements() {
+			const root = rootRef.value;
+			if (!root) return [];
+			return directPaneElements(root);
+		}
+		/** 拖拽过程中直接写 flex-grow，避免每帧触发 Vue 重渲染 */
+		function applyDragToDom(next) {
+			const panes = paneElements();
+			next.forEach((size, i) => {
+				panes[i]?.style.setProperty("flex-grow", String(size));
+			});
+		}
+		function setDraggingUi(active, index) {
+			const root = rootRef.value;
+			if (!root) return;
+			root.classList.toggle("rs-split--dragging", active);
+			const host = root.querySelector(`[data-resizer-index="${index}"]`);
+			if (!host) return;
+			if (active) host.setAttribute("data-active", "");
+			else host.removeAttribute("data-active");
+		}
+		function scheduleDragApply(next) {
+			pendingDragSizes = next;
+			if (dragFrame) return;
+			dragFrame = requestAnimationFrame(() => {
+				dragFrame = 0;
+				if (pendingDragSizes) applyDragToDom(pendingDragSizes);
+			});
+		}
+		function finishDrag(index) {
+			if (dragIndex !== index) return;
+			dragIndex = null;
+			if (dragFrame) {
+				cancelAnimationFrame(dragFrame);
+				dragFrame = 0;
+			}
+			setDraggingUi(false, index);
+			const final = pendingDragSizes ?? sizes.value;
+			pendingDragSizes = null;
+			paneElements().forEach((el) => {
+				el.style.removeProperty("flex-grow");
+			});
+			commit(final);
+			emitBoundaryTransitions(dragStartSizes, final);
+			emit("resize-end", final.slice());
+		}
+		function axisSize(el) {
+			return props.orientation === "horizontal" ? el.offsetWidth : el.offsetHeight;
+		}
+		/** 可伸缩空间的像素总量（不含分隔条），用于像素→百分比换算 */
+		function measureFlexPx() {
+			const root = rootRef.value;
+			if (!root) return 0;
+			let sum = 0;
+			directPaneElements(root).forEach((el) => {
+				sum += axisSize(el);
+			});
+			return sum;
+		}
+		function onResizerPointerDown(index, event) {
+			if (props.disabled) return;
+			if (event.pointerType === "mouse" && event.button !== 0) return;
+			materializeAutoPanes();
+			event.currentTarget.setPointerCapture?.(event.pointerId);
+			dragIndex = index;
+			dragOrigin = props.orientation === "horizontal" ? event.clientX : event.clientY;
+			dragStartSizes = sizes.value.slice();
+			pendingDragSizes = dragStartSizes;
+			flexPx = measureFlexPx();
+			setDraggingUi(true, index);
+			event.preventDefault();
+		}
+		function onResizerPointerMove(index, event) {
+			if (dragIndex !== index || flexPx <= 0) return;
+			const deltaPercent = ((props.orientation === "horizontal" ? event.clientX : event.clientY) - dragOrigin) / flexPx * 100;
+			scheduleDragApply(applySplitResize(dragStartSizes, constraints.value, index, deltaPercent));
+		}
+		function endDrag(index, event) {
+			if (dragIndex !== index) return;
+			event.currentTarget.releasePointerCapture?.(event.pointerId);
+			finishDrag(index);
+		}
+		function onResizerKeydown(index, event) {
+			if (props.disabled) return;
+			materializeAutoPanes();
+			const horizontal = props.orientation === "horizontal";
+			const step = props.keyboardStep;
+			let delta = 0;
+			switch (event.key) {
+				case "ArrowLeft":
+					if (horizontal) delta = -step;
+					break;
+				case "ArrowRight":
+					if (horizontal) delta = step;
+					break;
+				case "ArrowUp":
+					if (!horizontal) delta = -step;
+					break;
+				case "ArrowDown":
+					if (!horizontal) delta = step;
+					break;
+				case "Home":
+					delta = -100;
+					break;
+				case "End":
+					delta = 100;
+					break;
+				case "Enter":
+				case " ":
+					event.preventDefault();
+					toggleCollapseAt(index);
+					return;
+				default: return;
+			}
+			if (delta === 0) return;
+			event.preventDefault();
+			const before = sizes.value.slice();
+			commit(applySplitResize(sizes.value, constraints.value, index, delta));
+			emitBoundaryTransitions(before, sizes.value);
+			emit("resize-end", sizes.value.slice());
+		}
+		function onResizerDblClick(index) {
+			if (props.disabled) return;
+			materializeAutoPanes();
+			const a = sizes.value[index];
+			const b = sizes.value[index + 1];
+			const initA = initialSizes[index];
+			const initB = initialSizes[index + 1];
+			if (a === void 0 || b === void 0 || initA === void 0 || initB === void 0) return;
+			const total = a + b;
+			const initTotal = initA + initB;
+			const targetA = initTotal > 0 ? initA / initTotal * total : total / 2;
+			const next = sizes.value.slice();
+			next[index] = roundSize(targetA);
+			next[index + 1] = roundSize(total - targetA);
+			const before = sizes.value.slice();
+			commit(next);
+			emitBoundaryTransitions(before, sizes.value);
+			emit("resize-end", sizes.value.slice());
+		}
+		/** 分隔条 index 两侧择一可折叠面板进行折叠/展开切换 */
+		function collapsibleCandidate(index) {
+			if (constraints.value[index]?.collapsible) return index;
+			if (constraints.value[index + 1]?.collapsible) return index + 1;
+			return -1;
+		}
+		function toggleCollapseAt(index) {
+			const candidate = collapsibleCandidate(index);
+			if (candidate < 0) return;
+			const before = sizes.value.slice();
+			const collapsed = isSplitPaneCollapsed(sizes.value[candidate] ?? 0, constraints.value[candidate]);
+			const key = props.panes[candidate]?.key;
+			commit(collapsed ? expandSplitPane(sizes.value, constraints.value, candidate, key ? resolveExpandSize(key, candidate) : void 0) : collapseSplitPane(sizes.value, constraints.value, candidate));
+			emitBoundaryTransitions(before, sizes.value);
+			emit("resize-end", sizes.value.slice());
+		}
+		/** 将 auto 面板按当前像素占比物化为百分比，之后走统一拖拽逻辑 */
+		function materializeAutoPanes() {
+			if (!autoFlags.value.some(Boolean)) return;
+			const total = measureFlexPx();
+			if (total <= 0) return;
+			const measured = paneElements().map((el) => axisSize(el) / total * 100);
+			const next = normalizeSplitSizes(props.panes.map((pane) => ({
+				...pane,
+				size: typeof pane.size === "number" ? pane.size : void 0
+			})), measured);
+			autoFlags.value = props.panes.map(() => false);
+			sizes.value = next;
+			syncModel(next);
+		}
+		function paneStyle(index) {
+			if (autoFlags.value[index]) {
+				const pane = props.panes[index];
+				const vertical = props.orientation === "vertical";
+				const style = {
+					flexGrow: "0",
+					flexShrink: "0",
+					flexBasis: "auto",
+					[vertical ? "minHeight" : "minWidth"]: "min-content"
+				};
+				if (typeof pane?.min === "number" && pane.min > 0) style[vertical ? "minHeight" : "minWidth"] = `${pane.min}%`;
+				if (typeof pane?.max === "number" && pane.max < 100) style[vertical ? "maxHeight" : "maxWidth"] = `${pane.max}%`;
+				return style;
+			}
+			const size = sizes.value[index] ?? 0;
+			return {
+				flexGrow: String(size),
+				flexShrink: "1",
+				flexBasis: "0%"
+			};
+		}
+		function paneCollapsed(index) {
+			if (autoFlags.value[index]) return false;
+			return isSplitPaneCollapsed(sizes.value[index] ?? 0, constraints.value[index]);
+		}
+		/** 分隔条 index（位于 panes[index] 与 panes[index+1] 之间）是否显示抓手 */
+		function resizerShowsHandle(index) {
+			const pane = props.panes[index];
+			if (pane?.resizerHandle !== void 0) return pane.resizerHandle;
+			return props.withHandle;
+		}
+		function indexOfKey(key) {
+			return props.panes.findIndex((pane) => pane.key === key);
+		}
+		function collapse(key) {
+			const index = indexOfKey(key);
+			if (index < 0) return;
+			const before = sizes.value.slice();
+			commit(collapseSplitPane(sizes.value, constraints.value, index));
+			emitBoundaryTransitions(before, sizes.value);
+			emit("resize-end", sizes.value.slice());
+		}
+		function expand(key, toSize) {
+			const index = indexOfKey(key);
+			if (index < 0) return;
+			const before = sizes.value.slice();
+			commit(expandSplitPane(sizes.value, constraints.value, index, resolveExpandSize(key, index, toSize)));
+			emitBoundaryTransitions(before, sizes.value);
+			emit("resize-end", sizes.value.slice());
+		}
+		function reset() {
+			autoFlags.value = resolveSplitAutoFlags(props.panes);
+			initialSizes = normalizeSplitSizes(props.panes);
+			commit(initialSizes.slice());
+			emit("resize-end", sizes.value.slice());
+		}
+		__expose({
+			collapse,
+			expand,
+			reset,
+			getSizes: () => sizes.value.slice()
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "rootRef",
+				ref: rootRef,
+				class: normalizeClass(["rs-split", [`rs-split--${__props.orientation}`, { "rs-split--disabled": __props.disabled }]])
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.panes, (pane, index) => {
+				return openBlock(), createElementBlock(Fragment, { key: pane.key }, [createElementVNode("div", {
+					class: normalizeClass(["rs-split__pane", {
+						"rs-split__pane--collapsed": paneCollapsed(index),
+						"rs-split__pane--auto": autoFlags.value[index]
+					}]),
+					style: normalizeStyle(paneStyle(index)),
+					"data-pane-key": pane.key
+				}, [renderSlot(_ctx.$slots, pane.key, {
+					size: sizes.value[index],
+					collapsed: paneCollapsed(index)
+				})], 14, _hoisted_1), index < resizerCount.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(["rs-split__resizer-host", { "rs-split__resizer-host--handle": resizerShowsHandle(index) }]),
+					"data-resizer-index": index,
+					onPointerdown: ($event) => onResizerPointerDown(index, $event),
+					onPointermove: ($event) => onResizerPointerMove(index, $event),
+					onPointerup: ($event) => endDrag(index, $event),
+					onPointercancel: ($event) => endDrag(index, $event)
+				}, [createElementVNode("hr", {
+					class: normalizeClass(["rs-split__resizer", { "rs-split__resizer--handle": resizerShowsHandle(index) }]),
+					tabindex: __props.disabled ? -1 : 0,
+					"aria-orientation": __props.orientation === "horizontal" ? "vertical" : "horizontal",
+					"aria-valuenow": Math.round(sizes.value[index] ?? 0),
+					"aria-valuemin": Math.round(constraints.value[index]?.min ?? 0),
+					"aria-valuemax": Math.round(constraints.value[index]?.max ?? 100),
+					"aria-label": unref(t)("split.resize"),
+					"aria-disabled": __props.disabled || void 0,
+					onKeydown: ($event) => onResizerKeydown(index, $event),
+					onDblclick: ($event) => onResizerDblClick(index)
+				}, null, 42, _hoisted_3), resizerShowsHandle(index) ? (openBlock(), createElementBlock("span", _hoisted_4, [createVNode(RsIcon_default, {
+					name: __props.orientation === "horizontal" ? "grip-vertical" : "grip-horizontal",
+					size: 12
+				}, null, 8, ["name"])])) : createCommentVNode("", true)], 42, _hoisted_2)) : createCommentVNode("", true)], 64);
+			}), 128))], 2);
+		};
+	}
+});
+//#endregion
+export { RsSplitPane_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/RsSplitPane.js

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

package/dist/components/RsStatCard.css

@@ -0,0 +1,51 @@
+
+.rs-stat-card[data-v-42da8b24] {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--rs-border);
+  border-radius: var(--rs-radius);
+  background: var(--rs-surface);
+  box-shadow: var(--rs-shadow-sm);
+}
+.rs-stat-card__accent[data-v-42da8b24] {
+  height: 3px;
+  background: var(--rs-primary);
+}
+.rs-stat-card--success .rs-stat-card__accent[data-v-42da8b24] {
+  background: var(--rs-success);
+}
+.rs-stat-card--warning .rs-stat-card__accent[data-v-42da8b24] {
+  background: var(--rs-warning);
+}
+.rs-stat-card--danger .rs-stat-card__accent[data-v-42da8b24] {
+  background: var(--rs-danger);
+}
+.rs-stat-card--info .rs-stat-card__accent[data-v-42da8b24] {
+  background: var(--rs-info);
+}
+.rs-stat-card__body[data-v-42da8b24] {
+  padding: var(--rs-space-lg);
+}
+.rs-stat-card__label[data-v-42da8b24] {
+  color: var(--rs-muted);
+  font-size: var(--rs-font-size-sm);
+}
+.rs-stat-card__value[data-v-42da8b24] {
+  margin-top: var(--rs-space-sm);
+  color: var(--rs-text);
+  font-size: var(--rs-font-size-3xl);
+  font-weight: var(--rs-font-weight-bold);
+  line-height: 1.1;
+}
+.rs-stat-card__description[data-v-42da8b24] {
+  margin: var(--rs-space-sm) 0 0;
+  color: var(--rs-muted);
+  font-size: var(--rs-font-size-sm);
+}
+.rs-stat-card__skeleton[data-v-42da8b24] {
+  width: 8rem;
+  height: 2rem;
+  margin-top: var(--rs-space-sm);
+  border-radius: var(--rs-radius-sm);
+  background: var(--rs-surface-hover);
+}

package/dist/components/RsStatCard.d.ts

@@ -0,0 +1,26 @@
+export type RsStatAccent = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+type __VLS_Props = {
+    label: string;
+    value?: string | number;
+    description?: string;
+    accent?: RsStatAccent;
+    loading?: boolean;
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    value?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    loading: boolean;
+    accent: RsStatAccent;
+}, {}, {}, {}, 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/RsStatCard.impl.js

@@ -0,0 +1,41 @@
+import { createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString } from "vue";
+//#region src/components/RsStatCard.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "rs-stat-card__body" };
+var _hoisted_2 = { class: "rs-stat-card__label" };
+var _hoisted_3 = {
+	key: 0,
+	class: "rs-stat-card__skeleton"
+};
+var _hoisted_4 = {
+	key: 1,
+	class: "rs-stat-card__value"
+};
+var _hoisted_5 = {
+	key: 2,
+	class: "rs-stat-card__description"
+};
+var RsStatCard_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RsStatCard",
+	props: {
+		label: {},
+		value: {},
+		description: {},
+		accent: { default: "primary" },
+		loading: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("section", { class: normalizeClass(["rs-stat-card", `rs-stat-card--${__props.accent}`]) }, [_cache[0] || (_cache[0] = createElementVNode("div", { class: "rs-stat-card__accent" }, null, -1)), createElementVNode("div", _hoisted_1, [
+				createElementVNode("div", _hoisted_2, toDisplayString(__props.label), 1),
+				__props.loading ? (openBlock(), createElementBlock("div", _hoisted_3)) : (openBlock(), createElementBlock("div", _hoisted_4, [renderSlot(_ctx.$slots, "value", {}, () => [createTextVNode(toDisplayString(__props.value), 1)], true)])),
+				__props.description ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString(__props.description), 1)) : createCommentVNode("", true),
+				renderSlot(_ctx.$slots, "default", {}, void 0, true)
+			])], 2);
+		};
+	}
+});
+//#endregion
+export { RsStatCard_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/RsStatCard.js

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

package/dist/components/RsSteps.css

@@ -0,0 +1,83 @@
+
+.rs-steps[data-v-efa6c15e] {
+  display: flex;
+  gap: var(--rs-space-md);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.rs-steps--vertical[data-v-efa6c15e] {
+  flex-direction: column;
+}
+.rs-steps__item[data-v-efa6c15e] {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: var(--rs-space-md);
+  min-width: 0;
+}
+.rs-steps--vertical .rs-steps__item[data-v-efa6c15e] {
+  align-items: flex-start;
+}
+.rs-steps__trigger[data-v-efa6c15e] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rs-space-sm);
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+}
+.rs-steps__trigger[data-v-efa6c15e]:not(:disabled) {
+  cursor: pointer;
+}
+.rs-steps__indicator[data-v-efa6c15e] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  flex: 0 0 auto;
+  border-radius: var(--rs-radius-full);
+  background: var(--rs-surface-hover);
+  color: var(--rs-muted);
+  font-size: var(--rs-font-size-xs);
+  font-weight: var(--rs-font-weight-bold);
+}
+.rs-steps--sm .rs-steps__indicator[data-v-efa6c15e] {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.rs-steps__item--finish .rs-steps__indicator[data-v-efa6c15e],
+.rs-steps__item--process .rs-steps__indicator[data-v-efa6c15e] {
+  background: var(--rs-primary);
+  color: var(--rs-primary-foreground);
+}
+.rs-steps__item--error .rs-steps__indicator[data-v-efa6c15e] {
+  background: var(--rs-danger-container);
+  color: var(--rs-on-danger-container);
+}
+.rs-steps__body[data-v-efa6c15e] {
+  display: grid;
+  min-width: 0;
+}
+.rs-steps__title[data-v-efa6c15e] {
+  color: var(--rs-text);
+  font-size: var(--rs-font-size-sm);
+  font-weight: var(--rs-font-weight-semibold);
+}
+.rs-steps__description[data-v-efa6c15e] {
+  color: var(--rs-muted);
+  font-size: var(--rs-font-size-xs);
+}
+.rs-steps__separator[data-v-efa6c15e] {
+  height: 1px;
+  flex: 1;
+  background: var(--rs-border);
+}
+.rs-steps--vertical .rs-steps__separator[data-v-efa6c15e] {
+  width: 1px;
+  min-height: 1.5rem;
+  margin-left: 0.875rem;
+}

package/dist/components/RsSteps.d.ts

@@ -0,0 +1,22 @@
+import type { RsStepItem, RsStepsOrientation, RsStepsSize } from './steps-utils';
+type __VLS_Props = {
+    items: RsStepItem[];
+    orientation?: RsStepsOrientation;
+    size?: RsStepsSize;
+    clickable?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    size: RsStepsSize;
+    orientation: RsStepsOrientation;
+    clickable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;