niuma-ui 2.0.2 → 2.0.4

package/dist/components/cascader/src/RsCascader.js

@@ -3,6 +3,6 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import RsCascader_vue_vue_type_script_setup_true_lang_default from "./RsCascader.impl.js";
 
 //#region src/components/cascader/src/RsCascader.vue
-var RsCascader_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsCascader_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-4b45dd5a"]]);
+var RsCascader_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsCascader_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-8c1435b6"]]);
 //#endregion
 export { RsCascader_default as default };

package/dist/components/cascader/src/cascader-utils.d.ts

@@ -14,3 +14,5 @@ export declare function cascaderColumns(options: readonly RsCascaderOption[], pa
 export declare function cascaderLabels(options: readonly RsCascaderOption[], path: RsCascaderPath): string[];
 export declare function cascaderDisplay(options: readonly RsCascaderOption[], path: RsCascaderPath, separator?: string): string;
 export declare function isCascaderLeaf(option: RsCascaderOption): boolean;
+export declare function nextCascaderPath(path: RsCascaderPath, depth: number, value: RsSelectValue): RsCascaderPath;
+export declare function popCascaderPath(path: RsCascaderPath): RsCascaderPath;

package/dist/components/cascader/src/cascader-utils.js

@@ -35,5 +35,12 @@ function isCascaderLeaf(option) {
 	if (option.isLeaf === false) return false;
 	return !option.children?.length;
 }
+function nextCascaderPath(path, depth, value) {
+	return [...path.slice(0, depth), value];
+}
+function popCascaderPath(path) {
+	if (path.length <= 1) return [];
+	return path.slice(0, -1);
+}
 //#endregion
-export { cascaderColumns, cascaderDisplay, cascaderLabels, findCascaderOption, isCascaderLeaf };
+export { cascaderColumns, cascaderDisplay, cascaderLabels, findCascaderOption, isCascaderLeaf, nextCascaderPath, popCascaderPath };

package/dist/components/checkbox/index.d.ts

@@ -1 +1,2 @@
 export { default as RsCheckbox } from './src/RsCheckbox.js';
+export type { RsCheckboxExpose, RsCheckboxInstance } from './src/RsCheckbox.js';

package/dist/components/checkbox/src/RsCheckbox.css

@@ -1,5 +1,5 @@
 
-.rs-checkbox {
+.rs-checkbox[data-v-5e521b70] {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -10,11 +10,11 @@
   user-select: none;
   color: var(--rs-text);
 }
-.rs-checkbox--disabled {
+.rs-checkbox--disabled[data-v-5e521b70] {
   cursor: not-allowed;
   opacity: 0.55;
 }
-.rs-checkbox__input {
+.rs-checkbox__input[data-v-5e521b70] {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -25,7 +25,7 @@
   white-space: nowrap;
   border: 0;
 }
-.rs-checkbox__box {
+.rs-checkbox__box[data-v-5e521b70] {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -33,56 +33,56 @@
   flex-shrink: 0;
   box-sizing: border-box;
   border: 1px solid var(--rs-border);
-  border-radius: var(--rs-radius-xs, 4px);
+  border-radius: var(--rs-radius-xs);
   background: var(--rs-surface);
   transition:
-    border-color var(--rs-transition-fast, 0.12s ease),
-    background-color var(--rs-transition-fast, 0.12s ease);
+    border-color var(--rs-transition-fast),
+    background-color var(--rs-transition-fast);
 }
-.rs-checkbox--ssm .rs-checkbox__box {
+.rs-checkbox--ssm .rs-checkbox__box[data-v-5e521b70] {
   width: 0.75rem;
   height: 0.75rem;
 }
-.rs-checkbox--sm .rs-checkbox__box {
+.rs-checkbox--sm .rs-checkbox__box[data-v-5e521b70] {
   width: 0.875rem;
   height: 0.875rem;
 }
-.rs-checkbox--md .rs-checkbox__box {
+.rs-checkbox--md .rs-checkbox__box[data-v-5e521b70] {
   width: 1rem;
   height: 1rem;
 }
-.rs-checkbox--lg .rs-checkbox__box {
+.rs-checkbox--lg .rs-checkbox__box[data-v-5e521b70] {
   width: 1.125rem;
   height: 1.125rem;
 }
-.rs-checkbox:hover:not(.rs-checkbox--disabled) .rs-checkbox__box {
+.rs-checkbox:hover:not(.rs-checkbox--disabled) .rs-checkbox__box[data-v-5e521b70] {
   border-color: var(--rs-primary);
 }
-.rs-checkbox--checked .rs-checkbox__box,
-.rs-checkbox--indeterminate .rs-checkbox__box {
+.rs-checkbox--checked .rs-checkbox__box[data-v-5e521b70],
+.rs-checkbox--indeterminate .rs-checkbox__box[data-v-5e521b70] {
   border-color: var(--rs-primary);
   background: var(--rs-primary);
 }
-.rs-checkbox--checked .rs-checkbox__box::after {
+.rs-checkbox--checked .rs-checkbox__box[data-v-5e521b70]::after {
   content: '';
   position: absolute;
   top: 42%;
   left: 50%;
   width: 0.28rem;
   height: 0.5rem;
-  border: solid var(--rs-primary-foreground, #fff);
+  border: solid var(--rs-primary-foreground);
   border-width: 0 2px 2px 0;
   transform: translate(-50%, -50%) rotate(45deg);
 }
-.rs-checkbox--ssm.rs-checkbox--checked .rs-checkbox__box::after {
+.rs-checkbox--ssm.rs-checkbox--checked .rs-checkbox__box[data-v-5e521b70]::after {
   width: 0.2rem;
   height: 0.36rem;
 }
-.rs-checkbox--sm.rs-checkbox--checked .rs-checkbox__box::after {
+.rs-checkbox--sm.rs-checkbox--checked .rs-checkbox__box[data-v-5e521b70]::after {
   width: 0.24rem;
   height: 0.42rem;
 }
-.rs-checkbox--indeterminate .rs-checkbox__box::after {
+.rs-checkbox--indeterminate .rs-checkbox__box[data-v-5e521b70]::after {
   content: '';
   position: absolute;
   top: 50%;
@@ -91,14 +91,37 @@
   height: 2px;
   border: 0;
   border-radius: 1px;
-  background: var(--rs-primary-foreground, #fff);
+  background: var(--rs-primary-foreground);
   transform: translate(-50%, -50%);
 }
-.rs-checkbox__label {
+.rs-checkbox__label[data-v-5e521b70] {
   font-size: var(--rs-font-size-sm);
   line-height: var(--rs-line-height-normal);
 }
-.rs-checkbox--ssm .rs-checkbox__label,
-.rs-checkbox--sm .rs-checkbox__label {
+.rs-checkbox--ssm .rs-checkbox__label[data-v-5e521b70],
+.rs-checkbox--sm .rs-checkbox__label[data-v-5e521b70] {
   font-size: var(--rs-font-size-xs);
 }
+@media (prefers-reduced-motion: reduce) {
+.rs-checkbox__box[data-v-5e521b70] {
+    transition: none;
+}
+}
+@media (forced-colors: active) {
+.rs-checkbox__box[data-v-5e521b70] {
+    border-color: ButtonText;
+    background: Field;
+    forced-color-adjust: none;
+}
+.rs-checkbox--checked .rs-checkbox__box[data-v-5e521b70],
+  .rs-checkbox--indeterminate .rs-checkbox__box[data-v-5e521b70] {
+    border-color: Highlight;
+    background: Highlight;
+}
+.rs-checkbox--checked .rs-checkbox__box[data-v-5e521b70]::after {
+    border-color: HighlightText;
+}
+.rs-checkbox--indeterminate .rs-checkbox__box[data-v-5e521b70]::after {
+    background: HighlightText;
+}
+}

package/dist/components/checkbox/src/RsCheckbox.d.ts

@@ -1,4 +1,11 @@
 import type { RsComponentSize } from '../../../theme/types';
+export interface RsCheckboxExpose {
+    focus: () => void;
+}
+/** 模板 ref 实例：expose + 根节点 */
+export type RsCheckboxInstance = RsCheckboxExpose & {
+    $el: HTMLElement;
+};
 type __VLS_Props = {
     /** 半选（仅视觉；点击仍按 model 取反） */
     indeterminate?: boolean;
@@ -7,6 +14,8 @@ type __VLS_Props = {
     /** 无障碍名称；有默认插槽文案时可省略 */
     ariaLabel?: string;
     id?: string;
+    name?: string;
+    required?: boolean;
 };
 type __VLS_ModelProps = {
     modelValue?: boolean;
@@ -16,13 +25,14 @@ declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, RsCheckboxExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (value: boolean) => any;
     "update:modelValue": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onChange?: ((value: boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
+    required: boolean;
     disabled: boolean;
     indeterminate: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/checkbox/src/RsCheckbox.impl.js

@@ -1,19 +1,25 @@
+import { useRsFormContext } from "../../form/src/form-utils.js";
 import { useResolvedRsComponentSize } from "../../_shared/src/resolve-size.js";
-import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderSlot, useId, useModel, withModifiers } from "vue";
+import { applyRsCheckboxIndeterminate, resolveRsCheckboxAriaChecked } from "./checkbox-utils.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, normalizeClass, onMounted, openBlock, renderSlot, useId, useModel, useTemplateRef, watch, withModifiers } from "vue";
 //#region src/components/checkbox/src/RsCheckbox.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["for"];
 var _hoisted_2 = [
 	"id",
+	"name",
 	"checked",
 	"disabled",
+	"required",
 	"aria-checked",
-	"aria-label"
+	"aria-label",
+	"aria-required"
 ];
 var _hoisted_3 = {
 	key: 0,
 	class: "rs-checkbox__label"
 };
 var RsCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsCheckbox",
 	__name: "RsCheckbox",
 	props: /*@__PURE__*/ mergeModels({
 		indeterminate: {
@@ -26,7 +32,12 @@ var RsCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		},
 		size: {},
 		ariaLabel: {},
-		id: {}
+		id: {},
+		name: {},
+		required: {
+			type: Boolean,
+			default: false
+		}
 	}, {
 		"modelValue": {
 			type: Boolean,
@@ -35,28 +46,40 @@ var RsCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		"modelModifiers": {}
 	}),
 	emits: /*@__PURE__*/ mergeModels(["change"], ["update:modelValue"]),
-	setup(__props, { emit: __emit }) {
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const model = useModel(__props, "modelValue");
 		const props = __props;
 		const emit = __emit;
+		const formContext = useRsFormContext();
 		const autoId = useId();
 		const inputId = computed(() => props.id || autoId);
+		const inputRef = useTemplateRef("inputRef");
 		const resolvedSize = useResolvedRsComponentSize(() => props.size);
+		const resolvedDisabled = computed(() => props.disabled || Boolean(formContext?.disabled.value));
+		const ariaChecked = computed(() => resolveRsCheckboxAriaChecked(model.value, props.indeterminate));
 		const rootClass = computed(() => [
 			"rs-checkbox",
 			`rs-checkbox--${resolvedSize.value}`,
 			{
 				"rs-checkbox--checked": model.value && !props.indeterminate,
 				"rs-checkbox--indeterminate": props.indeterminate,
-				"rs-checkbox--disabled": props.disabled
+				"rs-checkbox--disabled": resolvedDisabled.value
 			}
 		]);
+		function syncIndeterminate() {
+			applyRsCheckboxIndeterminate(inputRef.value, props.indeterminate);
+		}
 		function onChange(event) {
-			if (props.disabled) return;
+			if (resolvedDisabled.value) return;
 			const checked = event.target.checked;
 			model.value = checked;
 			emit("change", checked);
 		}
+		onMounted(syncIndeterminate);
+		watch(() => props.indeterminate, syncIndeterminate);
+		__expose({ focus: () => {
+			inputRef.value?.focus();
+		} });
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("label", {
 				class: normalizeClass(rootClass.value),
@@ -64,12 +87,17 @@ var RsCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			}, [
 				createElementVNode("input", {
 					id: inputId.value,
+					ref_key: "inputRef",
+					ref: inputRef,
 					class: "rs-checkbox__input",
 					type: "checkbox",
+					name: __props.name,
 					checked: model.value,
-					disabled: __props.disabled,
-					"aria-checked": __props.indeterminate ? "mixed" : model.value,
+					disabled: resolvedDisabled.value,
+					required: __props.required || void 0,
+					"aria-checked": ariaChecked.value,
 					"aria-label": __props.ariaLabel,
+					"aria-required": __props.required || void 0,
 					onChange,
 					onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
 				}, null, 40, _hoisted_2),
@@ -77,7 +105,7 @@ var RsCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					class: "rs-checkbox__box",
 					"aria-hidden": "true"
 				}, null, -1)),
-				_ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_3, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)
+				_ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_3, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])) : createCommentVNode("", true)
 			], 10, _hoisted_1);
 		};
 	}

package/dist/components/checkbox/src/RsCheckbox.js

@@ -1,7 +1,8 @@
 import './RsCheckbox.css'
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
 import RsCheckbox_vue_vue_type_script_setup_true_lang_default from "./RsCheckbox.impl.js";
 
 //#region src/components/checkbox/src/RsCheckbox.vue
-var RsCheckbox_default = RsCheckbox_vue_vue_type_script_setup_true_lang_default;
+var RsCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsCheckbox_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-5e521b70"]]);
 //#endregion
 export { RsCheckbox_default as default };

package/dist/components/checkbox/src/checkbox-utils.d.ts

@@ -0,0 +1,4 @@
+export type RsCheckboxAriaChecked = 'true' | 'false' | 'mixed';
+export declare function resolveRsCheckboxAriaChecked(checked: boolean, indeterminate: boolean): RsCheckboxAriaChecked;
+/** `indeterminate` 不是 HTML 属性，必须写 IDL。 */
+export declare function applyRsCheckboxIndeterminate(el: HTMLInputElement | null | undefined, indeterminate: boolean): void;

package/dist/components/checkbox/src/checkbox-utils.js

@@ -0,0 +1,12 @@
+//#region src/components/checkbox/src/checkbox-utils.ts
+function resolveRsCheckboxAriaChecked(checked, indeterminate) {
+	if (indeterminate) return "mixed";
+	return checked ? "true" : "false";
+}
+/** `indeterminate` 不是 HTML 属性，必须写 IDL。 */
+function applyRsCheckboxIndeterminate(el, indeterminate) {
+	if (!el) return;
+	el.indeterminate = indeterminate;
+}
+//#endregion
+export { applyRsCheckboxIndeterminate, resolveRsCheckboxAriaChecked };

package/dist/components/container/index.d.ts

@@ -1,2 +1,2 @@
 export { default as RsContainer } from './src/RsContainer.js';
-export type { RsContainerBreakpoint, RsContainerGap, RsContainerMaxWidth, RsContainerMaybeResponsive, RsContainerPadding, RsContainerResponsive, } from './src/RsContainer.js';
+export type { RsContainerBreakpoint, RsContainerGap, RsContainerMaxWidth, RsContainerMaybeResponsive, RsContainerPadding, RsContainerResponsive, } from './src/container-utils';

package/dist/components/container/src/RsContainer.css

@@ -1,24 +1,24 @@
 
-.rs-container[data-v-3c8fcccd] {
+.rs-container[data-v-5a260e9d] {
   width: 100%;
   box-sizing: border-box;
   max-width: var(--rs-container-max-current, var(--rs-container-max-lg));
   padding-inline: var(--rs-container-padding-current, var(--rs-space-md));
 }
-.rs-container--centered[data-v-3c8fcccd] {
+.rs-container--centered[data-v-5a260e9d] {
   margin-inline: auto;
 }
-.rs-container--grid[data-v-3c8fcccd] {
+.rs-container--grid[data-v-5a260e9d] {
   display: grid;
   grid-template-columns: repeat(var(--rs-container-columns-current, 12), minmax(0, 1fr));
   gap: var(--rs-container-gap-current, var(--rs-space-md));
 }
 @media (width >= 40rem) {
-.rs-container[data-v-3c8fcccd] {
+.rs-container[data-v-5a260e9d] {
     max-width: var(--rs-container-max-sm, var(--rs-container-max-current, var(--rs-container-max-lg)));
     padding-inline: var(--rs-container-padding-sm, var(--rs-container-padding-current, var(--rs-space-md)));
 }
-.rs-container--grid[data-v-3c8fcccd] {
+.rs-container--grid[data-v-5a260e9d] {
     grid-template-columns: repeat(
       var(--rs-container-columns-sm, var(--rs-container-columns-current, 12)),
       minmax(0, 1fr)
@@ -27,14 +27,14 @@
 }
 }
 @media (width >= 48rem) {
-.rs-container[data-v-3c8fcccd] {
+.rs-container[data-v-5a260e9d] {
     max-width: var(--rs-container-max-md, var(--rs-container-max-sm, var(--rs-container-max-current)));
     padding-inline: var(
       --rs-container-padding-md,
       var(--rs-container-padding-sm, var(--rs-container-padding-current))
     );
 }
-.rs-container--grid[data-v-3c8fcccd] {
+.rs-container--grid[data-v-5a260e9d] {
     grid-template-columns: repeat(
       var(--rs-container-columns-md, var(--rs-container-columns-sm, var(--rs-container-columns-current, 12))),
       minmax(0, 1fr)
@@ -43,7 +43,7 @@
 }
 }
 @media (width >= 64rem) {
-.rs-container[data-v-3c8fcccd] {
+.rs-container[data-v-5a260e9d] {
     max-width: var(
       --rs-container-max-lg,
       var(--rs-container-max-md, var(--rs-container-max-sm, var(--rs-container-max-current)))
@@ -53,7 +53,7 @@
       var(--rs-container-padding-md, var(--rs-container-padding-sm, var(--rs-container-padding-current)))
     );
 }
-.rs-container--grid[data-v-3c8fcccd] {
+.rs-container--grid[data-v-5a260e9d] {
     grid-template-columns: repeat(
       var(
         --rs-container-columns-lg,
@@ -65,7 +65,7 @@
 }
 }
 @media (width >= 80rem) {
-.rs-container[data-v-3c8fcccd] {
+.rs-container[data-v-5a260e9d] {
     max-width: var(
       --rs-container-max-xl,
       var(--rs-container-max-lg, var(--rs-container-max-md, var(--rs-container-max-sm, var(--rs-container-max-current))))
@@ -75,7 +75,7 @@
       var(--rs-container-padding-lg, var(--rs-container-padding-md, var(--rs-container-padding-sm, var(--rs-container-padding-current))))
     );
 }
-.rs-container--grid[data-v-3c8fcccd] {
+.rs-container--grid[data-v-5a260e9d] {
     grid-template-columns: repeat(
       var(
         --rs-container-columns-xl,

package/dist/components/container/src/RsContainer.d.ts

@@ -1,15 +1,5 @@
-/** 支持的响应式断点，语义与常见 SaaS 前端一致。 */
-export type RsContainerBreakpoint = 'sm' | 'md' | 'lg' | 'xl';
-/** 内容区最大宽度档位，对应 `--rs-container-max-*` token。 */
-export type RsContainerMaxWidth = 'sm' | 'md' | 'lg' | 'xl' | 'full';
-/** 水平内边距档位，对应 `--rs-space-*` token。 */
-export type RsContainerPadding = 'none' | 'sm' | 'md' | 'lg';
-/** 栅格间距档位，对应 `--rs-space-*` token。 */
-export type RsContainerGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-/** 断点映射配置，用于 maxWidth、padding、columns、gap。 */
-export type RsContainerResponsive<T> = Partial<Record<RsContainerBreakpoint, T>>;
-/** 支持固定值或断点映射。 */
-export type RsContainerMaybeResponsive<T> = T | RsContainerResponsive<T>;
+import { type RsContainerGap, type RsContainerMaxWidth, type RsContainerMaybeResponsive, type RsContainerPadding } from './container-utils';
+export type { RsContainerBreakpoint, RsContainerGap, RsContainerMaxWidth, RsContainerMaybeResponsive, RsContainerPadding, RsContainerResponsive, } from './container-utils';
 type __VLS_Props = {
     /** 最大内容宽度；`fluid` 为 true 时忽略。 */
     maxWidth?: RsContainerMaybeResponsive<RsContainerMaxWidth>;

package/dist/components/container/src/RsContainer.impl.js

@@ -1,6 +1,8 @@
+import { resolveRsContainerStyle } from "./container-utils.js";
 import { computed, createBlock, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, resolveDynamicComponent, withCtx } from "vue";
 //#region src/components/container/src/RsContainer.vue?vue&type=script&setup=true&lang.ts
 var RsContainer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsContainer",
 	__name: "RsContainer",
 	props: {
 		maxWidth: { default: "lg" },
@@ -23,67 +25,18 @@ var RsContainer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 	},
 	setup(__props) {
 		const props = __props;
-		const BREAKPOINTS = [
-			"sm",
-			"md",
-			"lg",
-			"xl"
-		];
-		const isResponsiveObject = (value) => typeof value === "object" && value !== null;
-		const tokenToSpaceVar = {
-			none: "0",
-			xs: "var(--rs-space-xs)",
-			sm: "var(--rs-space-sm)",
-			md: "var(--rs-space-md)",
-			lg: "var(--rs-space-lg)",
-			xl: "var(--rs-space-xl)"
-		};
-		const tokenToContainerVar = {
-			sm: "var(--rs-container-max-sm)",
-			md: "var(--rs-container-max-md)",
-			lg: "var(--rs-container-max-lg)",
-			xl: "var(--rs-container-max-xl)",
-			full: "var(--rs-container-max-full)"
-		};
 		const rootClass = computed(() => ["rs-container", {
 			"rs-container--centered": props.centered,
 			"rs-container--grid": props.grid
 		}]);
-		const rootStyle = computed(() => {
-			const style = {};
-			if (props.fluid) style["--rs-container-max-current"] = "none";
-			else if (isResponsiveObject(props.maxWidth)) {
-				const responsiveMaxWidth = props.maxWidth;
-				BREAKPOINTS.forEach((bp) => {
-					const value = responsiveMaxWidth[bp];
-					if (value) style[`--rs-container-max-${bp}`] = tokenToContainerVar[value];
-				});
-			} else style["--rs-container-max-current"] = tokenToContainerVar[props.maxWidth];
-			if (isResponsiveObject(props.padding)) {
-				const responsivePadding = props.padding;
-				BREAKPOINTS.forEach((bp) => {
-					const value = responsivePadding[bp];
-					if (value) style[`--rs-container-padding-${bp}`] = tokenToSpaceVar[value];
-				});
-			} else style["--rs-container-padding-current"] = tokenToSpaceVar[props.padding];
-			if (props.grid) {
-				if (isResponsiveObject(props.columns)) {
-					const responsiveColumns = props.columns;
-					BREAKPOINTS.forEach((bp) => {
-						const value = responsiveColumns[bp];
-						if (typeof value === "number") style[`--rs-container-columns-${bp}`] = value;
-					});
-				} else style["--rs-container-columns-current"] = props.columns;
-				if (isResponsiveObject(props.gap)) {
-					const responsiveGap = props.gap;
-					BREAKPOINTS.forEach((bp) => {
-						const value = responsiveGap[bp];
-						if (value) style[`--rs-container-gap-${bp}`] = tokenToSpaceVar[value];
-					});
-				} else style["--rs-container-gap-current"] = tokenToSpaceVar[props.gap];
-			}
-			return style;
-		});
+		const rootStyle = computed(() => resolveRsContainerStyle({
+			maxWidth: props.maxWidth,
+			padding: props.padding,
+			fluid: props.fluid,
+			grid: props.grid,
+			columns: props.columns,
+			gap: props.gap
+		}));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
 				class: normalizeClass(rootClass.value),

package/dist/components/container/src/RsContainer.js

@@ -3,6 +3,6 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import RsContainer_vue_vue_type_script_setup_true_lang_default from "./RsContainer.impl.js";
 
 //#region src/components/container/src/RsContainer.vue
-var RsContainer_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsContainer_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-3c8fcccd"]]);
+var RsContainer_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsContainer_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-5a260e9d"]]);
 //#endregion
 export { RsContainer_default as default };

package/dist/components/container/src/container-utils.d.ts

@@ -0,0 +1,23 @@
+export declare const RS_CONTAINER_BREAKPOINTS: readonly ["sm", "md", "lg", "xl"];
+export type RsContainerBreakpoint = (typeof RS_CONTAINER_BREAKPOINTS)[number];
+export declare const RS_CONTAINER_MAX_WIDTHS: readonly ["sm", "md", "lg", "xl", "full"];
+export type RsContainerMaxWidth = (typeof RS_CONTAINER_MAX_WIDTHS)[number];
+export declare const RS_CONTAINER_PADDINGS: readonly ["none", "sm", "md", "lg"];
+export type RsContainerPadding = (typeof RS_CONTAINER_PADDINGS)[number];
+export declare const RS_CONTAINER_GAPS: readonly ["none", "xs", "sm", "md", "lg", "xl"];
+export type RsContainerGap = (typeof RS_CONTAINER_GAPS)[number];
+export type RsContainerResponsive<T> = Partial<Record<RsContainerBreakpoint, T>>;
+export type RsContainerMaybeResponsive<T> = T | RsContainerResponsive<T>;
+export declare const RS_CONTAINER_SPACE_CSS: Record<RsContainerGap | RsContainerPadding, string>;
+export declare const RS_CONTAINER_MAX_WIDTH_CSS: Record<RsContainerMaxWidth, string>;
+export declare function isRsContainerResponsive<T>(value: RsContainerMaybeResponsive<T>): value is RsContainerResponsive<T>;
+export interface RsContainerStyleInput {
+    maxWidth: RsContainerMaybeResponsive<RsContainerMaxWidth>;
+    padding: RsContainerMaybeResponsive<RsContainerPadding>;
+    fluid: boolean;
+    grid: boolean;
+    columns: RsContainerMaybeResponsive<number>;
+    gap: RsContainerMaybeResponsive<RsContainerGap>;
+}
+/** 写入根节点的 CSS 变量。语义与原先 SFC 内联计算一致。 */
+export declare function resolveRsContainerStyle(input: RsContainerStyleInput): Record<string, string | number>;

package/dist/components/container/src/container-utils.js

@@ -0,0 +1,51 @@
+//#region src/components/container/src/container-utils.ts
+var RS_CONTAINER_BREAKPOINTS = [
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+var RS_CONTAINER_SPACE_CSS = {
+	none: "0",
+	xs: "var(--rs-space-xs)",
+	sm: "var(--rs-space-sm)",
+	md: "var(--rs-space-md)",
+	lg: "var(--rs-space-lg)",
+	xl: "var(--rs-space-xl)"
+};
+var RS_CONTAINER_MAX_WIDTH_CSS = {
+	sm: "var(--rs-container-max-sm)",
+	md: "var(--rs-container-max-md)",
+	lg: "var(--rs-container-max-lg)",
+	xl: "var(--rs-container-max-xl)",
+	full: "var(--rs-container-max-full)"
+};
+function isRsContainerResponsive(value) {
+	return typeof value === "object" && value !== null;
+}
+function writeResponsiveVars(style, prefix, value, toCss) {
+	if (isRsContainerResponsive(value)) {
+		for (const bp of RS_CONTAINER_BREAKPOINTS) {
+			const item = value[bp];
+			if (item === void 0) continue;
+			const css = toCss(item);
+			if (css !== void 0) style[`${prefix}-${bp}`] = css;
+		}
+		return;
+	}
+	const css = toCss(value);
+	if (css !== void 0) style[`${prefix}-current`] = css;
+}
+/** 写入根节点的 CSS 变量。语义与原先 SFC 内联计算一致。 */
+function resolveRsContainerStyle(input) {
+	const style = {};
+	if (input.fluid) style["--rs-container-max-current"] = "none";
+	else writeResponsiveVars(style, "--rs-container-max", input.maxWidth, (item) => RS_CONTAINER_MAX_WIDTH_CSS[item]);
+	writeResponsiveVars(style, "--rs-container-padding", input.padding, (item) => RS_CONTAINER_SPACE_CSS[item]);
+	if (!input.grid) return style;
+	writeResponsiveVars(style, "--rs-container-columns", input.columns, (item) => typeof item === "number" ? item : void 0);
+	writeResponsiveVars(style, "--rs-container-gap", input.gap, (item) => RS_CONTAINER_SPACE_CSS[item]);
+	return style;
+}
+//#endregion
+export { RS_CONTAINER_BREAKPOINTS, RS_CONTAINER_MAX_WIDTH_CSS, RS_CONTAINER_SPACE_CSS, isRsContainerResponsive, resolveRsContainerStyle };

package/dist/components/date-picker/index.d.ts

@@ -1,7 +1,9 @@
 export { default as RsDatePicker } from './src/RsDatePicker.js';
 export { default as RsDateTimePicker } from './src/RsDateTimePicker.js';
-export type { RsDatePickerModelValue, RsDatePickerShortcut, RsDatePickerTimestampRange, RsDatePickerValueConvertOptions, RsDatePickerValueFormat, RsDatePickerValueFormatPreset, RsDateRangeValue, RsParsedDate, RsParsedDateTime, } from './src/date-picker-utils';
-export { EMPTY_DATE_RANGE, formatDateDisplay, formatDateParts, formatDateRangeDisplay, formatDateTimeDisplay, formatDateTimeValue, formatDateValue, fromInternalPickerValue, isDateRangeEmpty, isDateRangeOrdered, isDateTimeRangeOrdered, parseDateTimeValue, parseDateValue, RS_DATE_PICKER_VALUE_FORMAT_PRESETS, toInternalPickerValue, toRangeEndpointString, } from './src/date-picker-utils';
+export type { RsDatePickerExpose, RsDatePickerInstance, RsDatePickerLabelPosition, } from './src/RsDatePicker.js';
+export type { RsDateTimePickerExpose, RsDateTimePickerInstance, RsDateTimePickerLabelPosition, RsDateTimeRangeValue, } from './src/RsDateTimePicker.js';
+export type { RsDatePickerDisabledDate, RsDatePickerGetPopupContainer, RsDatePickerModelValue, RsDatePickerShortcut, RsDatePickerTimestampRange, RsDatePickerValueConvertOptions, RsDatePickerValueFormat, RsDatePickerValueFormatPreset, RsDateRangeValue, RsParsedDate, RsParsedDateTime, RsWeekStartsOn, } from './src/date-picker-utils';
+export { EMPTY_DATE_RANGE, formatDateDisplay, formatDateParts, formatDateRangeDisplay, formatDateTimeDisplay, formatDateTimeValue, formatDateValue, formatPickerDisplay, fromInternalPickerValue, isDateRangeEmpty, isDateRangeOrdered, isDateTimeRangeOrdered, parseDateTimeValue, parseDateValue, resolveWeekStartsOn, RS_DATE_PICKER_VALUE_FORMAT_PRESETS, toInternalPickerValue, toRangeEndpointString, } from './src/date-picker-utils';
 export type { RsDateTimeValidationError, RsDateTimeValidationResult, RsDateTimeValidationRules, RsDateValidationError, RsDateValidationResult, RsDateValidationRules, } from './src/date-validation';
 export { validateDateTimeValue, validateDateValue } from './src/date-validation';
 export type { RsDateRangeValidationError, RsDateRangeValidationResult, RsDateRangeValidationRules, RsDateTimeRangeValidationError, RsDateTimeRangeValidationResult, RsDateTimeRangeValidationRules, } from './src/date-range-validation';