antdv-next 1.0.0-alpha.4 → 1.0.0-beta.1

package/dist/skeleton/Button.d.ts

@@ -1,11 +1,11 @@
 import { SkeletonElementProps } from "./Element.js";
-import * as vue428 from "vue";
+import * as vue440 from "vue";
 
 //#region src/skeleton/Button.d.ts
 interface SkeletonButtonProps extends Omit<SkeletonElementProps, 'size'> {
   size?: 'large' | 'small' | 'default';
   block?: boolean;
 }
-declare const SkeletonButton: vue428.DefineSetupFnComponent<SkeletonButtonProps, {}, {}, SkeletonButtonProps & {}, vue428.PublicProps>;
+declare const SkeletonButton: vue440.DefineSetupFnComponent<SkeletonButtonProps, {}, {}, SkeletonButtonProps & {}, vue440.PublicProps>;
 //#endregion
 export { SkeletonButton };

package/dist/skeleton/Image.d.ts

@@ -1,8 +1,8 @@
 import { SkeletonElementProps } from "./Element.js";
-import * as vue432 from "vue";
+import * as vue442 from "vue";
 
 //#region src/skeleton/Image.d.ts
 interface SkeletonImageProps extends Omit<SkeletonElementProps, 'size' | 'shape'> {}
-declare const SkeletonImage: vue432.DefineSetupFnComponent<SkeletonImageProps, {}, {}, SkeletonImageProps & {}, vue432.PublicProps>;
+declare const SkeletonImage: vue442.DefineSetupFnComponent<SkeletonImageProps, {}, {}, SkeletonImageProps & {}, vue442.PublicProps>;
 //#endregion
 export { SkeletonImage };

package/dist/skeleton/Input.d.ts

@@ -1,11 +1,11 @@
 import { SkeletonElementProps } from "./Element.js";
-import * as vue434 from "vue";
+import * as vue444 from "vue";
 
 //#region src/skeleton/Input.d.ts
 interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' | 'shape'> {
   size?: 'large' | 'small' | 'default';
   block?: boolean;
 }
-declare const SkeletonInput: vue434.DefineSetupFnComponent<SkeletonInputProps, {}, {}, SkeletonInputProps & {}, vue434.PublicProps>;
+declare const SkeletonInput: vue444.DefineSetupFnComponent<SkeletonInputProps, {}, {}, SkeletonInputProps & {}, vue444.PublicProps>;
 //#endregion
 export { SkeletonInput };

package/dist/skeleton/Node.d.ts

@@ -1,6 +1,6 @@
 import { EmptyEmit } from "../_util/type.js";
 import { SkeletonElementProps } from "./Element.js";
-import * as vue426 from "vue";
+import * as vue432 from "vue";
 import { SlotsType } from "vue";
 
 //#region src/skeleton/Node.d.ts
@@ -10,8 +10,8 @@ interface SkeletonNodeProps extends Omit<SkeletonElementProps, 'size' | 'shape'>
 interface SkeletonNodeSlots {
   default?: () => any;
 }
-declare const SkeletonNode: vue426.DefineSetupFnComponent<SkeletonNodeProps, EmptyEmit, SlotsType<SkeletonNodeSlots>, SkeletonNodeProps & {
+declare const SkeletonNode: vue432.DefineSetupFnComponent<SkeletonNodeProps, EmptyEmit, SlotsType<SkeletonNodeSlots>, SkeletonNodeProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue426.PublicProps>;
+}, vue432.PublicProps>;
 //#endregion
 export { SkeletonNode };

package/dist/skeleton/Skeleton.d.ts

@@ -9,7 +9,7 @@ import { SkeletonImage } from "./Image.js";
 import { SkeletonInput } from "./Input.js";
 import { SkeletonNode } from "./Node.js";
 import { ComponentBaseProps } from "../config-provider/context.js";
-import * as vue341 from "vue";
+import * as vue281 from "vue";
 import { SlotsType } from "vue";
 
 //#region src/skeleton/Skeleton.d.ts
@@ -30,9 +30,9 @@ interface SkeletonProps extends ComponentBaseProps {
 interface SkeletonSlots {
   default?: () => any;
 }
-declare const Skeleton: vue341.DefineSetupFnComponent<SkeletonProps, EmptyEmit, SlotsType<SkeletonSlots>, SkeletonProps & {
+declare const Skeleton: vue281.DefineSetupFnComponent<SkeletonProps, EmptyEmit, SlotsType<SkeletonSlots>, SkeletonProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue341.PublicProps>;
+}, vue281.PublicProps>;
 type SkeletonType = typeof Skeleton & {
   Button: typeof SkeletonButton;
   Avatar: typeof SkeletonAvatar;

package/dist/skeleton/Skeleton.js

@@ -64,7 +64,7 @@ const Skeleton = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
 				avatarNode = createVNode("div", {
 					"class": [mergedClassNames.value.header, `${prefixCls.value}-header`],
 					"style": mergedStyles.value.header
-				}, [createVNode(Element_default, mergeProps({ "class": mergedClassNames.value.avatar }, avatarProps, { "style": mergedStyles.value.header }), null)]);
+				}, [createVNode(Element_default, mergeProps({ "class": mergedClassNames.value.avatar }, avatarProps, { "style": mergedStyles.value.avatar }), null)]);
 			}
 			let contentNode;
 			if (hasTitle || hasParagraph) {

package/dist/skeleton/Title.d.ts

@@ -1,10 +1,9 @@
-import { CSSProperties } from "vue";
+import "vue";
 
 //#region src/skeleton/Title.d.ts
 interface SkeletonTitleProps {
   prefixCls?: string;
   rootClass?: string;
-  style?: CSSProperties;
   width?: number | string;
 }
 //#endregion

package/dist/skeleton/Title.js

@@ -23,11 +23,6 @@ const Title = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 			required: false,
 			default: void 0
 		},
-		style: {
-			type: Object,
-			required: false,
-			default: void 0
-		},
 		width: {
 			type: [Number, String],
 			required: false,

package/dist/slider/index.d.ts

@@ -2,7 +2,7 @@ import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMe
 import { Orientation } from "../_util/hooks/useOrientation.js";
 import "../_util/hooks/index.js";
 import { TooltipPlacement, TriggerCommonApi } from "../tooltip/index.js";
-import * as vue181 from "vue";
+import * as vue154 from "vue";
 import { CSSProperties, SlotsType } from "vue";
 import { SliderProps } from "@v-c/slider";
 
@@ -69,8 +69,8 @@ interface SliderEmits {
 }
 interface SliderSlots {}
 type SliderRange = SliderProps['range'];
-declare const Slider: vue181.DefineSetupFnComponent<SliderInternalProps, SliderEmits, SlotsType<SliderSlots>, SliderInternalProps & {
+declare const Slider: vue154.DefineSetupFnComponent<SliderInternalProps, SliderEmits, SlotsType<SliderSlots>, SliderInternalProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue181.PublicProps>;
+}, vue154.PublicProps>;
 //#endregion
 export { Slider, SliderEmits, SliderProps$1 as SliderProps };

package/dist/space/Compact.d.ts

@@ -7,6 +7,8 @@ interface SpaceCompactProps extends ComponentBaseProps {
   size?: SizeType;
   direction?: 'horizontal' | 'vertical';
   block?: boolean;
+  orientation?: 'horizontal' | 'vertical';
+  vertical?: boolean;
 }
 //#endregion
 export { SpaceCompactProps };

package/dist/space/Compact.js

@@ -1,7 +1,8 @@
 import { useConfig } from "../config-provider/context.js";
+import { useOrientation } from "../_util/hooks/useOrientation.js";
 import { useSize } from "../config-provider/hooks/useSize.js";
 import compact_default from "./style/compact.js";
-import { computed, createVNode, defineComponent, inject, isVNode, mergeProps, provide, ref } from "vue";
+import { computed, createVNode, defineComponent, inject, isVNode, mergeProps, provide, ref, toRefs } from "vue";
 import { classNames } from "@v-c/util";
 import { filterEmpty } from "@v-c/util/dist/props-util";
 
@@ -73,20 +74,22 @@ const Compact = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
 	const prefixCls = computed(() => configContext.value?.getPrefixCls?.("space-compact", props.prefixCls));
 	const [hashId, cssVarCls] = compact_default(prefixCls);
 	const compactItemContext = useSpaceCompactItemContext();
+	const { direction, vertical, orientation } = toRefs(props);
+	const [mergedOrientation, mergedVertical] = useOrientation(orientation, vertical, direction);
 	return () => {
-		const { rootClass, direction, block } = props;
+		const { rootClass, block } = props;
 		const directionConfig = configContext.value?.direction;
 		const clx = classNames(prefixCls.value, hashId.value, cssVarCls.value, {
 			[`${prefixCls.value}-rtl`]: directionConfig === "rtl",
 			[`${prefixCls.value}-block`]: block,
-			[`${prefixCls.value}-vertical`]: direction === "vertical"
+			[`${prefixCls.value}-vertical`]: mergedVertical.value
 		}, rootClass);
 		const childNodes = filterEmpty(slots?.default?.());
 		const nodes = childNodes.map((child, i) => {
 			const key = child?.key || `${prefixCls.value}-item-${i}`;
 			return createVNode(CompactItem, {
 				"compactSize": mergedSize.value,
-				"compactDirection": direction,
+				"compactDirection": mergedOrientation.value,
 				"isFirstItem": i === 0 && (!compactItemContext.value || compactItemContext.value?.isFirstItem),
 				"key": key,
 				"isLastItem": i === childNodes.length - 1 && (!compactItemContext.value || compactItemContext.value?.isLastItem)
@@ -112,6 +115,16 @@ const Compact = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
 			required: false,
 			default: void 0
 		},
+		orientation: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		vertical: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
 		rootClass: {
 			type: String,
 			required: false,

package/dist/space/index.d.ts

@@ -6,7 +6,7 @@ import "../_util/hooks/index.js";
 import { SpaceCompactProps } from "./Compact.js";
 import { SpaceCompactCellProps } from "./Addon.js";
 import { ComponentBaseProps } from "../config-provider/context.js";
-import * as vue171 from "vue";
+import * as vue156 from "vue";
 import { SlotsType } from "vue";
 
 //#region src/space/index.d.ts
@@ -30,10 +30,10 @@ interface SpaceSlots {
   default?: () => any;
   separator?: () => any;
 }
-declare const Space: vue171.DefineSetupFnComponent<SpaceProps, EmptyEmit, SlotsType<SpaceSlots>, SpaceProps & {
+declare const Space: vue156.DefineSetupFnComponent<SpaceProps, EmptyEmit, SlotsType<SpaceSlots>, SpaceProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue171.PublicProps>;
-declare const SpaceCompact: vue171.DefineSetupFnComponent<SpaceCompactProps, {}, {}, SpaceCompactProps & {}, vue171.PublicProps>;
-declare const SpaceAddon: vue171.DefineSetupFnComponent<SpaceCompactCellProps, {}, {}, SpaceCompactCellProps & {}, vue171.PublicProps>;
+}, vue156.PublicProps>;
+declare const SpaceCompact: vue156.DefineSetupFnComponent<SpaceCompactProps, {}, {}, SpaceCompactProps & {}, vue156.PublicProps>;
+declare const SpaceAddon: vue156.DefineSetupFnComponent<SpaceCompactCellProps, {}, {}, SpaceCompactCellProps & {}, vue156.PublicProps>;
 //#endregion
 export { Space, SpaceAddon, SpaceCompact, SpaceProps, SpaceSize, SpaceSlots };

package/dist/space/style/addon.js

@@ -1,10 +1,11 @@
-import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { genCssVar, genStyleHooks } from "../../theme/util/genStyleUtils.js";
 import "../../theme/internal.js";
 import { genCompactItemStyle } from "../../style/compact-item.js";
 
 //#region src/space/style/addon.ts
 const genSpaceAddonStyle = (token) => {
-	const { componentCls, borderRadius, paddingSM, colorBorder, paddingXS, fontSizeLG, fontSizeSM, borderRadiusLG, borderRadiusSM, colorBgContainerDisabled, lineWidth } = token;
+	const { componentCls, borderRadius, paddingSM, colorBorder, paddingXS, fontSizeLG, fontSizeSM, borderRadiusLG, borderRadiusSM, colorBgContainerDisabled, lineWidth, antCls } = token;
+	const [varName, varRef] = genCssVar(antCls, "space");
 	return { [componentCls]: [
 		{
 			"display": "inline-flex",
@@ -39,19 +40,19 @@ const genSpaceAddonStyle = (token) => {
 			"&-compact-item:not(:first-child)": { borderInlineStartWidth: 0 }
 		},
 		{
-			"--space-addon-border-color": colorBorder,
-			"--space-addon-background": colorBgContainerDisabled,
-			"--space-addon-border-color-outlined": colorBorder,
-			"--space-addon-background-filled": colorBgContainerDisabled,
-			"borderColor": "var(--space-addon-border-color)",
-			"background": "var(--space-addon-background)",
-			"&-variant-outlined": { "--space-addon-border-color": "var(--space-addon-border-color-outlined)" },
+			[varName("addon-border-color")]: colorBorder,
+			[varName("addon-background")]: colorBgContainerDisabled,
+			[varName("addon-border-color-outlined")]: colorBorder,
+			[varName("addon-background-filled")]: colorBgContainerDisabled,
+			"borderColor": varRef("addon-border-color"),
+			"background": varRef("addon-background"),
+			"&-variant-outlined": { [varName("addon-border-color")]: varRef("addon-border-color-outlined") },
 			"&-variant-filled": {
-				"--space-addon-border-color": "transparent",
-				"--space-addon-background": "var(--space-addon-background-filled)",
+				[varName("addon-border-color")]: "transparent",
+				[varName("addon-background")]: varRef("addon-background-filled"),
 				[`&${componentCls}-disabled`]: {
-					"--space-addon-border-color": colorBorder,
-					"--space-addon-background": colorBgContainerDisabled
+					[varName("addon-border-color")]: colorBorder,
+					[varName("addon-background")]: colorBgContainerDisabled
 				}
 			},
 			"&-variant-borderless": {
@@ -65,14 +66,14 @@ const genSpaceAddonStyle = (token) => {
 		},
 		{
 			"&-status-error": {
-				"--space-addon-border-color-outlined": token.colorError,
-				"--space-addon-background-filled": token.colorErrorBg,
-				"color": token.colorError
+				[varName("addon-border-color-outlined")]: token.colorError,
+				[varName("addon-background-filled")]: token.colorErrorBg,
+				color: token.colorError
 			},
 			"&-status-warning": {
-				"--space-addon-border-color-outlined": token.colorWarning,
-				"--space-addon-background-filled": token.colorWarningBg,
-				"color": token.colorWarning
+				[varName("addon-border-color-outlined")]: token.colorWarning,
+				[varName("addon-background-filled")]: token.colorWarningBg,
+				color: token.colorWarning
 			}
 		}
 	] };

package/dist/spin/index.d.ts

@@ -2,7 +2,7 @@ import { EmptyEmit, VueNode } from "../_util/type.js";
 import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.js";
 import "../_util/hooks/index.js";
 import { ComponentBaseProps } from "../config-provider/context.js";
-import * as vue177 from "vue";
+import * as vue146 from "vue";
 import { CSSProperties, SlotsType } from "vue";
 
 //#region src/spin/index.d.ts
@@ -37,9 +37,9 @@ interface SpinSlots {
   tip?: () => any;
   default?: () => any;
 }
-declare const Spin: vue177.DefineSetupFnComponent<SpinProps, EmptyEmit, SlotsType<SpinSlots>, SpinProps & {
+declare const Spin: vue146.DefineSetupFnComponent<SpinProps, EmptyEmit, SlotsType<SpinSlots>, SpinProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue177.PublicProps>;
+}, vue146.PublicProps>;
 declare const _default: typeof Spin & {
   setDefaultIndicator: (indicator: VueNode) => void;
 };

package/dist/spin/index.js

@@ -6,10 +6,11 @@ import { getSlotPropsFnRun, toPropsRefs } from "../_util/tools.js";
 import Indicator_default from "./Indicator/index.js";
 import style_default from "./style/index.js";
 import usePercent from "./usePercent.js";
-import { computed, createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef, watchEffect } from "vue";
+import { computed, createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef, watch } from "vue";
 import { classNames } from "@v-c/util";
 import { filterEmpty } from "@v-c/util/dist/props-util";
-import { debounce, omit } from "es-toolkit";
+import { omit } from "es-toolkit";
+import { debounce } from "throttle-debounce";
 
 //#region src/spin/index.tsx
 let defaultIndicator;
@@ -23,11 +24,11 @@ const Spin = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
 	const { classes, styles } = toPropsRefs(props, "classes", "styles");
 	const spinning = shallowRef(shouldDelay(props.spinning, props.delay) ? false : !!props.spinning);
 	const mergedPercent = usePercent(spinning, computed(() => props.percent));
-	watchEffect((onCleanup) => {
+	watch([() => props.delay, () => props.spinning], (_, _p, onCleanup) => {
 		if (props.spinning) {
-			const showSpinning = debounce(() => {
+			const showSpinning = debounce(props?.delay ?? 0, () => {
 				spinning.value = true;
-			}, props.delay ?? 0);
+			});
 			showSpinning();
 			onCleanup(() => {
 				showSpinning?.cancel?.();
@@ -35,7 +36,7 @@ const Spin = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
 			return;
 		}
 		spinning.value = false;
-	});
+	}, { immediate: true });
 	const warning = devUseWarning("Spin");
 	const mergedProps = computed(() => {
 		return {

package/dist/splitter/SplitBar.js

@@ -1,3 +1,4 @@
+import { genCssVar } from "../theme/util/genStyleUtils.js";
 import { getSlotPropsFnRun, toPropsRefs } from "../_util/tools.js";
 import { computed, createVNode, defineComponent, mergeProps, shallowRef, watch } from "vue";
 import { clsx } from "@v-c/util";
@@ -8,8 +9,9 @@ function getValidNumber(num) {
 	return typeof num === "number" && !Number.isNaN(num) && Number.isFinite(num) ? Math.round(num) : 0;
 }
 const SplitBar = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
-	const { vertical, resizable, index, containerSize, ariaNow, ariaMin, ariaMax, prefixCls, lazy } = toPropsRefs(props, "vertical", "resizable", "index", "containerSize", "ariaNow", "ariaMin", "ariaMax", "prefixCls", "lazy");
+	const { vertical, resizable, index, containerSize, ariaNow, ariaMin, ariaMax, prefixCls, rootPrefixCls, lazy } = toPropsRefs(props, "vertical", "resizable", "index", "containerSize", "ariaNow", "ariaMin", "ariaMax", "prefixCls", "rootPrefixCls", "lazy");
 	const splitBarPrefixCls = computed(() => `${prefixCls.value}-bar`);
+	const barVarName = computed(() => genCssVar(rootPrefixCls.value, "splitter")[0]);
 	const startPos = shallowRef();
 	const constrainedOffset = shallowRef(0);
 	const constrainedOffsetX = computed(() => vertical.value ? 0 : constrainedOffset.value);
@@ -97,7 +99,7 @@ const SplitBar = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
 	});
 	return () => {
 		const { collapsibleIcon, draggerClassName, draggerStyle, active, startCollapsible, showStartCollapsibleIcon, onCollapse, endCollapsible, showEndCollapsibleIcon } = props;
-		const transformStyle = { [`--${splitBarPrefixCls.value}-preview-offset`]: `${constrainedOffset.value}px` };
+		const transformStyle = { [barVarName.value("bar-preview-offset")]: `${constrainedOffset.value}px` };
 		const propCollapsibleIconStart = collapsibleIcon?.start;
 		const propCollapsibleIconEnd = collapsibleIcon?.end;
 		const collapsibleIconStart = getSlotPropsFnRun(slots, { collapsibleIconStart: propCollapsibleIconStart }, "collapsibleIconStart", false);
@@ -181,6 +183,11 @@ const SplitBar = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
 			required: true,
 			default: void 0
 		},
+		rootPrefixCls: {
+			type: String,
+			required: true,
+			default: void 0
+		},
 		resizable: {
 			type: Boolean,
 			required: true,

package/dist/splitter/Splitter.d.ts

@@ -1,10 +1,10 @@
 import { SplitterEmits, SplitterProps, SplitterSlots } from "./interface.js";
-import * as vue418 from "vue";
+import * as vue410 from "vue";
 import { SlotsType } from "vue";
 
 //#region src/splitter/Splitter.d.ts
-declare const Splitter: vue418.DefineSetupFnComponent<SplitterProps, SplitterEmits, SlotsType<SplitterSlots>, SplitterProps & {
+declare const Splitter: vue410.DefineSetupFnComponent<SplitterProps, SplitterEmits, SlotsType<SplitterSlots>, SplitterProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue418.PublicProps>;
+}, vue410.PublicProps>;
 //#endregion
 export { Splitter };

package/dist/splitter/Splitter.js

@@ -19,7 +19,7 @@ import ResizeObserver from "@v-c/resize-observer";
 
 //#region src/splitter/Splitter.tsx
 const Splitter = /* @__PURE__ */ defineComponent((props, { slots, emit, attrs }) => {
-	const { prefixCls, direction, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles } = useComponentBaseConfig("splitter", props);
+	const { prefixCls, rootPrefixCls, direction, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles } = useComponentBaseConfig("splitter", props);
 	const { classes, styles, orientation, layout, vertical } = toPropsRefs(props, "classes", "styles", "orientation", "layout", "vertical");
 	const rootCls = useCSSVarCls_default(prefixCls);
 	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
@@ -121,6 +121,7 @@ const Splitter = /* @__PURE__ */ defineComponent((props, { slots, emit, attrs })
 					"index": idx,
 					"active": movingIndex.value === idx,
 					"prefixCls": prefixCls.value,
+					"rootPrefixCls": rootPrefixCls.value,
 					"vertical": isVertical.value,
 					"resizable": resizableInfo.resizable,
 					"draggerStyle": mergedStyles.value.dragger,

package/dist/splitter/index.d.ts

@@ -1,8 +1,8 @@
 import { InternalPanelProps, SplitterEmits, SplitterProps, SplitterSlots } from "./interface.js";
 import { Splitter } from "./Splitter.js";
-import * as vue179 from "vue";
+import * as vue164 from "vue";
 
 //#region src/splitter/index.d.ts
-declare const SplitterPanel: vue179.DefineSetupFnComponent<InternalPanelProps, {}, {}, InternalPanelProps & {}, vue179.PublicProps>;
+declare const SplitterPanel: vue164.DefineSetupFnComponent<InternalPanelProps, {}, {}, InternalPanelProps & {}, vue164.PublicProps>;
 //#endregion
 export { SplitterPanel };

package/dist/splitter/style/index.js

@@ -1,5 +1,5 @@
 import { resetComponent } from "../../style/index.js";
-import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { genCssVar, genStyleHooks } from "../../theme/util/genStyleUtils.js";
 import "../../theme/internal.js";
 
 //#region src/splitter/style/index.ts
@@ -38,12 +38,12 @@ const centerStyle = {
 	transform: "translate(-50%, -50%)"
 };
 const genSplitterStyle = (token) => {
-	const { componentCls, colorFill, splitBarDraggableSize, splitBarSize, splitTriggerSize, controlItemBgHover, controlItemBgActive, controlItemBgActiveHover, prefixCls, colorPrimary } = token;
+	const { componentCls, colorFill, splitBarDraggableSize, splitBarSize, splitTriggerSize, controlItemBgHover, controlItemBgActive, controlItemBgActiveHover, colorPrimary, antCls, calc } = token;
 	const splitBarCls = `${componentCls}-bar`;
 	const splitMaskCls = `${componentCls}-mask`;
 	const splitPanelCls = `${componentCls}-panel`;
-	const halfTriggerSize = token.calc(splitTriggerSize).div(2).equal();
-	const splitterBarPreviewOffsetVar = `${prefixCls}-bar-preview-offset`;
+	const [, varRef] = genCssVar(antCls, "splitter");
+	const halfTriggerSize = calc(splitTriggerSize).div(2).equal();
 	const splitterBarPreviewStyle = {
 		position: "absolute",
 		background: token.colorPrimary,
@@ -143,7 +143,7 @@ const genSplitterStyle = (token) => {
 					...splitterBarPreviewStyle,
 					[`&${splitBarCls}-preview-active`]: {
 						display: "block",
-						transform: `translateX(var(--${splitterBarPreviewOffsetVar}))`
+						transform: `translate3d(${varRef("bar-preview-offset")}, 0, 0)`
 					}
 				},
 				[`${splitBarCls}-dragger`]: {
@@ -197,7 +197,7 @@ const genSplitterStyle = (token) => {
 					...splitterBarPreviewStyle,
 					[`&${splitBarCls}-preview-active`]: {
 						display: "block",
-						transform: `translateY(var(--${splitterBarPreviewOffsetVar}))`
+						transform: `translate3d(0, ${varRef("bar-preview-offset")}, 0)`
 					}
 				},
 				[`${splitBarCls}-dragger`]: {

package/dist/statistic/Statistic.d.ts

@@ -3,7 +3,7 @@ import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMe
 import "../_util/hooks/index.js";
 import { FormatConfig, valueType } from "./utils.js";
 import { ComponentBaseProps } from "../config-provider/context.js";
-import * as vue363 from "vue";
+import * as vue310 from "vue";
 import { CSSProperties, SlotsType, VNodeChild } from "vue";
 
 //#region src/statistic/Statistic.d.ts
@@ -33,7 +33,7 @@ interface StatisticSlots {
   prefix: () => any;
   suffix: () => any;
 }
-declare const Statistic: vue363.DefineSetupFnComponent<StatisticRectProps, StatisticEmits, SlotsType<StatisticSlots>, FormatConfig & ComponentBaseProps & {
+declare const Statistic: vue310.DefineSetupFnComponent<StatisticRectProps, StatisticEmits, SlotsType<StatisticSlots>, FormatConfig & ComponentBaseProps & {
   value?: valueType;
   valueStyle?: CSSProperties;
   valueRender?: (node: any) => VNodeChild;
@@ -45,6 +45,6 @@ declare const Statistic: vue363.DefineSetupFnComponent<StatisticRectProps, Stati
   styles?: StatisticStylesType;
 } & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue363.PublicProps>;
+}, vue310.PublicProps>;
 //#endregion
 export { Statistic, StatisticClassNamesType, StatisticProps, StatisticSlots, StatisticStylesType };

package/dist/statistic/Timer.d.ts

@@ -2,7 +2,7 @@ import { VueNode } from "../_util/type.js";
 import { FormatConfig, valueType } from "./utils.js";
 import { StatisticClassNamesType, StatisticProps, StatisticSlots, StatisticStylesType } from "./Statistic.js";
 import { ComponentBaseProps } from "../config-provider/context.js";
-import * as vue359 from "vue";
+import * as vue306 from "vue";
 import { SlotsType } from "vue";
 
 //#region src/statistic/Timer.d.ts
@@ -19,10 +19,10 @@ interface StatisticTimeEmits {
   change: (value?: valueType) => void;
   [key: string]: (...args: any[]) => any;
 }
-declare const StatisticTimer: vue359.DefineSetupFnComponent<StatisticTimerProps, StatisticTimeEmits, SlotsType<StatisticSlots>, FormatConfig & ComponentBaseProps & {
+declare const StatisticTimer: vue306.DefineSetupFnComponent<StatisticTimerProps, StatisticTimeEmits, SlotsType<StatisticSlots>, FormatConfig & ComponentBaseProps & {
   value?: valueType;
-  valueStyle?: vue359.CSSProperties;
-  valueRender?: (node: any) => vue359.VNodeChild;
+  valueStyle?: vue306.CSSProperties;
+  valueRender?: (node: any) => vue306.VNodeChild;
   title?: VueNode;
   prefix?: VueNode;
   suffix?: VueNode;
@@ -34,6 +34,6 @@ declare const StatisticTimer: vue359.DefineSetupFnComponent<StatisticTimerProps,
   format?: string;
 } & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue359.PublicProps>;
+}, vue306.PublicProps>;
 //#endregion
 export { StatisticTimeEmits, StatisticTimer, StatisticTimerProps, TimerType };

package/dist/statistic/index.d.ts

@@ -3,13 +3,13 @@ import { FormatConfig, valueType } from "./utils.js";
 import { Statistic, StatisticClassNamesType, StatisticProps, StatisticSlots, StatisticStylesType } from "./Statistic.js";
 import { StatisticTimeEmits, StatisticTimer, StatisticTimerProps, TimerType } from "./Timer.js";
 import { ComponentBaseProps } from "../config-provider/context.js";
-import * as vue183 from "vue";
+import * as vue166 from "vue";
 
 //#region src/statistic/index.d.ts
-declare const StatisticTimer$1: vue183.DefineSetupFnComponent<StatisticTimerProps, StatisticTimeEmits, vue183.SlotsType<StatisticSlots>, FormatConfig & ComponentBaseProps & {
+declare const StatisticTimer$1: vue166.DefineSetupFnComponent<StatisticTimerProps, StatisticTimeEmits, vue166.SlotsType<StatisticSlots>, FormatConfig & ComponentBaseProps & {
   value?: valueType;
-  valueStyle?: vue183.CSSProperties;
-  valueRender?: (node: any) => vue183.VNodeChild;
+  valueStyle?: vue166.CSSProperties;
+  valueRender?: (node: any) => vue166.VNodeChild;
   title?: VueNode;
   prefix?: VueNode;
   suffix?: VueNode;
@@ -21,7 +21,7 @@ declare const StatisticTimer$1: vue183.DefineSetupFnComponent<StatisticTimerProp
   format?: string;
 } & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue183.PublicProps>;
+}, vue166.PublicProps>;
 declare const _default: typeof Statistic & {
   Timer: typeof StatisticTimer;
 };

package/dist/steps/ProgressIcon.js

@@ -1,13 +1,15 @@
+import { genCssVar } from "../theme/util/genStyleUtils.js";
 import { Fragment, createTextVNode, createVNode, defineComponent } from "vue";
 import { clsx } from "@v-c/util";
 
 //#region src/steps/ProgressIcon.tsx
 const ProgressIcon = /* @__PURE__ */ defineComponent((props, { slots }) => {
 	return () => {
-		const { prefixCls, percent } = props;
+		const { prefixCls, rootPrefixCls, percent } = props;
 		const progressCls = `${prefixCls}-item-progress-icon`;
 		const circleCls = `${progressCls}-circle`;
-		const dashArray = `calc(var(--progress-r) * 2 * ${Math.PI * percent / 100}) 9999`;
+		const [, varRef] = genCssVar(rootPrefixCls, "cmp-steps");
+		const dashArray = `calc(${varRef("progress-radius")} * 2 * ${Math.PI * percent / 100}) 9999`;
 		return createVNode(Fragment, null, [createVNode("svg", {
 			"class": `${progressCls}-svg`,
 			"viewBox": "0 0 100 100",
@@ -34,6 +36,11 @@ const ProgressIcon = /* @__PURE__ */ defineComponent((props, { slots }) => {
 			required: true,
 			default: void 0
 		},
+		rootPrefixCls: {
+			type: String,
+			required: true,
+			default: void 0
+		},
 		percent: {
 			type: Number,
 			required: true,

package/dist/steps/index.d.ts

@@ -1,7 +1,7 @@
 import { VueNode } from "../_util/type.js";
 import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.js";
 import "../_util/hooks/index.js";
-import * as vue188 from "vue";
+import * as vue171 from "vue";
 import { CSSProperties, SlotsType } from "vue";
 import { StepsProps } from "@v-c/steps";
 
@@ -80,8 +80,8 @@ interface StepsSlots {
   default: () => any;
   iconRender?: IconRenderType;
 }
-declare const Steps: vue188.DefineSetupFnComponent<StepsProps$1, StepsEmits, SlotsType<StepsSlots>, StepsProps$1 & {
+declare const Steps: vue171.DefineSetupFnComponent<StepsProps$1, StepsEmits, SlotsType<StepsSlots>, StepsProps$1 & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue188.PublicProps>;
+}, vue171.PublicProps>;
 //#endregion
 export { Steps, StepsProps$1 as StepsProps };