antdv-next 1.0.0-alpha.4 → 1.0.0-alpha.5

package/dist/select/style/select-input-multiple.js

@@ -1,29 +1,31 @@
 import { resetIcon, textEllipsis } from "../../style/index.js";
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
 
 //#region src/select/style/select-input-multiple.ts
 const FIXED_INPUT_MIN_WIDTH = 4;
 const genSelectInputMultipleStyle = (token) => {
-	const { componentCls, calc, iconCls, paddingXS, paddingXXS, INTERNAL_FIXED_ITEM_MARGIN, lineWidth, colorIcon, colorIconHover, inputPaddingHorizontalBase } = token;
+	const { componentCls, calc, iconCls, paddingXS, paddingXXS, INTERNAL_FIXED_ITEM_MARGIN, lineWidth, colorIcon, colorIconHover, inputPaddingHorizontalBase, antCls } = token;
+	const [varName, varRef] = genCssVar(antCls, "select");
 	return { "&-multiple": {
-		"--select-multi-item-background": token.multipleItemBg,
-		"--select-multi-item-border-color": "transparent",
-		"--select-multi-item-border-radius": token.borderRadiusSM,
-		"--select-multi-item-height": token.multipleItemHeight,
-		"--select-multi-padding-base": `calc((var(--select-height) - var(--select-multi-item-height)) / 2)`,
-		"--select-multi-padding-vertical": `calc(var(--select-multi-padding-base) - ${INTERNAL_FIXED_ITEM_MARGIN} - ${lineWidth})`,
-		"--select-multi-item-padding-horizontal": `calc(${inputPaddingHorizontalBase} - var(--select-multi-padding-vertical) - ${lineWidth} * 2)`,
-		"paddingBlock": `var(--select-multi-padding-vertical)`,
-		"paddingInlineStart": `calc(var(--select-multi-padding-base) - ${lineWidth})`,
-		[`${componentCls}-prefix`]: { marginInlineStart: "var(--select-multi-item-padding-horizontal)" },
+		[varName("multi-item-background")]: token.multipleItemBg,
+		[varName("multi-item-border-color")]: "transparent",
+		[varName("multi-item-border-radius")]: token.borderRadiusSM,
+		[varName("multi-item-height")]: token.multipleItemHeight,
+		[varName("multi-padding-base")]: `calc((${varRef("height")} - ${varRef("multi-item-height")}) / 2)`,
+		[varName("multi-padding-vertical")]: `calc(${varRef("multi-padding-base")} - ${INTERNAL_FIXED_ITEM_MARGIN} - ${lineWidth})`,
+		[varName("multi-item-padding-horizontal")]: `calc(${inputPaddingHorizontalBase} - ${varRef("multi-padding-vertical")} - ${lineWidth} * 2)`,
+		paddingBlock: varRef("multi-padding-vertical"),
+		paddingInlineStart: `calc(${varRef("multi-padding-base")} - ${lineWidth})`,
+		[`${componentCls}-prefix`]: { marginInlineStart: varRef("multi-item-padding-horizontal") },
 		[`${componentCls}-prefix + ${componentCls}-content`]: {
 			[`${componentCls}-placeholder`]: { insetInlineStart: 0 },
 			[`${componentCls}-content-item${componentCls}-content-item-suffix`]: { marginInlineStart: 0 }
 		},
 		[`${componentCls}-placeholder`]: {
 			position: "absolute",
-			lineHeight: "var(--select-line-height)",
-			insetInlineStart: "var(--select-multi-item-padding-horizontal)",
-			width: "calc(100% - var(--select-multi-item-padding-horizontal))",
+			lineHeight: varRef("line-height"),
+			insetInlineStart: varRef("multi-item-padding-horizontal"),
+			width: `calc(100% - ${varRef("multi-item-padding-horizontal")})`,
 			top: "50%",
 			transform: "translateY(-50%)"
 		},
@@ -31,21 +33,21 @@ const genSelectInputMultipleStyle = (token) => {
 			"flexWrap": "wrap",
 			"alignItems": "center",
 			"lineHeight": 1,
-			"&-item-prefix": { height: "var(--select-font-size)" },
+			"&-item-prefix": { height: varRef("font-size") },
 			"&-item": {
 				lineHeight: 1,
 				maxWidth: `calc(100% - ${FIXED_INPUT_MIN_WIDTH}px)`
 			},
 			[`${componentCls}-content-item-prefix + ${componentCls}-content-item-suffix,
-          ${componentCls}-content-item-suffix:first-child`]: { marginInlineStart: "var(--select-multi-item-padding-horizontal)" },
+          ${componentCls}-content-item-suffix:first-child`]: { marginInlineStart: varRef("multi-item-padding-horizontal") },
 			[`${componentCls}-selection-item`]: {
-				"lineHeight": `calc(var(--select-multi-item-height) - ${lineWidth} * 2)`,
-				"border": `${lineWidth} solid var(--select-multi-item-border-color)`,
+				"lineHeight": `calc(${varRef("multi-item-height")} - ${lineWidth} * 2)`,
+				"border": `${lineWidth} solid ${varRef("multi-item-border-color")}`,
 				"display": "flex",
 				"marginBlock": INTERNAL_FIXED_ITEM_MARGIN,
 				"marginInlineEnd": calc(INTERNAL_FIXED_ITEM_MARGIN).mul(2).equal(),
-				"background": `var(--select-multi-item-background)`,
-				"borderRadius": `var(--select-multi-item-border-radius)`,
+				"background": varRef("multi-item-background"),
+				"borderRadius": varRef("multi-item-border-radius"),
 				"paddingInlineStart": paddingXS,
 				"paddingInlineEnd": paddingXXS,
 				"transition": [
@@ -71,25 +73,25 @@ const genSelectInputMultipleStyle = (token) => {
 				}
 			},
 			[`${componentCls}-input`]: {
-				lineHeight: calc(INTERNAL_FIXED_ITEM_MARGIN).mul(2).add("var(--select-multi-item-height)").equal(),
-				width: "calc(var(--select-input-width, 0) * 1px)",
+				lineHeight: calc(INTERNAL_FIXED_ITEM_MARGIN).mul(2).add(varRef("multi-item-height")).equal(),
+				width: `calc(var(--select-input-width, 0) * 1px)`,
 				minWidth: FIXED_INPUT_MIN_WIDTH,
 				maxWidth: "100%",
 				transition: `line-height ${token.motionDurationSlow}`
 			}
 		},
 		[`&${componentCls}-sm`]: {
-			"--select-multi-item-height": token.multipleItemHeightSM,
-			"--select-multi-item-border-radius": token.borderRadiusXS
+			[varName("multi-item-height")]: token.multipleItemHeightSM,
+			[varName("multi-item-border-radius")]: token.borderRadiusXS
 		},
 		[`&${componentCls}-lg`]: {
-			"--select-multi-item-height": token.multipleItemHeightLG,
-			"--select-multi-item-border-radius": token.borderRadius
+			[varName("multi-item-height")]: token.multipleItemHeightLG,
+			[varName("multi-item-border-radius")]: token.borderRadius
 		},
 		[`&${componentCls}-filled`]: {
-			"--select-multi-item-border-color": token.colorSplit,
-			"--select-multi-item-background": token.colorBgContainer,
-			[`&${componentCls}-disabled`]: { "--select-multi-item-border-color": "transparent" }
+			[varName("multi-item-border-color")]: token.colorSplit,
+			[varName("multi-item-background")]: token.colorBgContainer,
+			[`&${componentCls}-disabled`]: { [varName("multi-item-border-color")]: "transparent" }
 		}
 	} };
 };

package/dist/select/style/select-input.js

@@ -1,4 +1,5 @@
 import { resetComponent, textEllipsis } from "../../style/index.js";
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
 import select_input_customize_default from "./select-input-customize.js";
 import select_input_multiple_default from "./select-input-multiple.js";
 import { unit } from "@antdv-next/cssinjs";
@@ -6,27 +7,28 @@ import { unit } from "@antdv-next/cssinjs";
 //#region src/select/style/select-input.ts
 /** Set CSS variables and hover/focus styles for a Select input based on provided colors. */
 function genSelectInputVariableStyle(token, colors) {
-	const { componentCls } = token;
+	const { componentCls, antCls } = token;
+	const [varName] = genCssVar(antCls, "select");
 	const { border, borderHover, borderActive, borderOutline } = colors;
-	const baseBG = colors.background || token.colorBgContainer;
+	const baseBG = colors.background || token.selectorBg || token.colorBgContainer;
 	return {
-		"--select-border-color": border,
-		"--select-background": baseBG,
-		"--select-color": colors.color || token.colorText,
+		[varName("border-color")]: border,
+		[varName("background-color")]: baseBG,
+		[varName("color")]: colors.color || token.colorText,
 		[`&:not(${componentCls}-disabled)`]: {
 			"&:hover": {
-				"--select-border-color": borderHover,
-				"--select-background": colors.backgroundHover || baseBG
+				[varName("border-color")]: borderHover,
+				[varName("background-color")]: colors.backgroundHover || baseBG
 			},
 			[`&${componentCls}-focused`]: {
-				"--select-border-color": borderActive,
-				"--select-background": colors.backgroundActive || baseBG,
-				"boxShadow": `0 0 0 ${unit(token.controlOutlineWidth)} ${borderOutline}`
+				[varName("border-color")]: borderActive,
+				[varName("background-color")]: colors.backgroundActive || baseBG,
+				boxShadow: `0 0 0 ${unit(token.controlOutlineWidth)} ${borderOutline}`
 			}
 		},
 		[`&${componentCls}-disabled`]: {
-			"--select-border-color": colors.borderDisabled || colors.border,
-			"--select-background": colors.backgroundDisabled || colors.background
+			[varName("border-color")]: colors.borderDisabled || colors.border,
+			[varName("background-color")]: colors.backgroundDisabled || colors.background
 		}
 	};
 }
@@ -51,20 +53,21 @@ function genSelectInputVariantStyle(token, variant, colors, errorColors = {}, wa
 	] };
 }
 const genSelectInputStyle = (token) => {
-	const { componentCls, calc, fontHeight, controlHeight, iconCls } = token;
+	const { componentCls, fontHeight, controlHeight, iconCls, antCls, calc } = token;
+	const [varName, varRef] = genCssVar(antCls, "select");
 	return { [componentCls]: [
 		{
-			"--select-border-radius": token.borderRadius,
-			"--select-border-color": "#000",
-			"--select-border-size": token.lineWidth,
-			"--select-background": token.colorBgContainer,
-			"--select-font-size": token.fontSize,
-			"--select-line-height": token.lineHeight,
-			"--select-font-height": fontHeight,
-			"--select-color": token.colorText,
-			"--select-height": controlHeight,
-			"--select-padding-horizontal": calc(token.paddingSM).sub(token.lineWidth).equal(),
-			"--select-padding-vertical": "calc((var(--select-height) - var(--select-font-height)) / 2 - var(--select-border-size))",
+			[varName("border-radius")]: token.borderRadius,
+			[varName("border-color")]: "#000",
+			[varName("border-size")]: token.lineWidth,
+			[varName("background-color")]: token.colorBgContainer,
+			[varName("font-size")]: token.fontSize,
+			[varName("line-height")]: token.lineHeight,
+			[varName("font-height")]: fontHeight,
+			[varName("color")]: token.colorText,
+			[varName("height")]: controlHeight,
+			[varName("padding-horizontal")]: calc(token.paddingSM).sub(token.lineWidth).equal(),
+			[varName("padding-vertical")]: `calc((${varRef("height")} - ${varRef("font-height")}) / 2 - ${varRef("border-size")})`,
 			...resetComponent(token, true),
 			"display": "inline-flex",
 			"flexWrap": "nowrap",
@@ -73,16 +76,16 @@ const genSelectInputStyle = (token) => {
 			"alignItems": "flex-start",
 			"outline": 0,
 			"cursor": "pointer",
-			"borderRadius": "var(--select-border-radius)",
-			"borderWidth": "var(--select-border-size)",
+			"borderRadius": varRef("border-radius"),
+			"borderWidth": varRef("border-size"),
 			"borderStyle": token.lineType,
-			"borderColor": "var(--select-border-color)",
-			"background": "var(--select-background)",
-			"fontSize": "var(--select-font-size)",
-			"lineHeight": "var(--select-line-height)",
-			"color": "var(--select-color)",
-			"paddingInline": "var(--select-padding-horizontal)",
-			"paddingBlock": "var(--select-padding-vertical)",
+			"borderColor": varRef("border-color"),
+			"background": varRef("background-color"),
+			"fontSize": varRef("font-size"),
+			"lineHeight": varRef("line-height"),
+			"color": varRef("color"),
+			"paddingInline": varRef("padding-horizontal"),
+			"paddingBlock": varRef("padding-vertical"),
 			[`${componentCls}-prefix`]: {
 				flex: "none",
 				lineHeight: 1
@@ -129,19 +132,21 @@ const genSelectInputStyle = (token) => {
 			"&-disabled": {
 				background: token.colorBgContainerDisabled,
 				color: token.colorTextDisabled,
-				cursor: "not-allowed"
+				cursor: "not-allowed",
+				input: { cursor: "not-allowed" }
 			},
 			"&-sm": {
-				"--select-height": token.controlHeightSM,
-				"--select-padding-horizontal": calc(token.paddingXS).sub(token.lineWidth).equal(),
-				"--select-border-radius": token.borderRadiusSM
+				[varName("height")]: token.controlHeightSM,
+				[varName("padding-horizontal")]: calc(token.paddingXS).sub(token.lineWidth).equal(),
+				[varName("border-radius")]: token.borderRadiusSM,
+				[`${componentCls}-clear`]: { insetInlineEnd: varRef("padding-horizontal") }
 			},
 			"&-lg": {
-				"--select-height": token.controlHeightLG,
-				"--select-font-size": token.fontSizeLG,
-				"--select-line-height": token.lineHeightLG,
-				"--select-font-height": token.fontHeightLG,
-				"--select-border-radius": token.borderRadiusLG
+				[varName("height")]: token.controlHeightLG,
+				[varName("font-size")]: token.fontSizeLG,
+				[varName("line-height")]: token.lineHeightLG,
+				[varName("font-height")]: token.fontHeightLG,
+				[varName("border-radius")]: token.borderRadiusLG
 			}
 		},
 		{ [`&:not(${componentCls}-customize)`]: { [`${componentCls}-input`]: {
@@ -161,11 +166,12 @@ const genSelectInputStyle = (token) => {
 			[`${componentCls}-input`]: {
 				position: "absolute",
 				insetInline: 0,
-				insetBlock: "calc(var(--select-padding-vertical) * -1)",
-				lineHeight: "calc(var(--select-font-height) + var(--select-padding-vertical) * 2)"
+				insetBlock: `calc(${varRef("padding-vertical")} * -1)`,
+				lineHeight: `calc(${varRef("font-height")} + ${varRef("padding-vertical")} * 2)`
 			},
 			[`${componentCls}-content`]: { alignSelf: "center" }
 		} },
+		{ [`&-show-search:not(${componentCls}-customize-input):not(${componentCls}-disabled)`]: { cursor: "text" } },
 		select_input_multiple_default(token),
 		genSelectInputVariantStyle(token, "outlined", {
 			border: token.colorBorder,

package/dist/skeleton/Button.d.ts

@@ -1,11 +1,11 @@
 import { SkeletonElementProps } from "./Element.js";
-import * as vue428 from "vue";
+import * as vue430 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: vue430.DefineSetupFnComponent<SkeletonButtonProps, {}, {}, SkeletonButtonProps & {}, vue430.PublicProps>;
 //#endregion
 export { SkeletonButton };

package/dist/skeleton/Input.d.ts

@@ -1,11 +1,11 @@
 import { SkeletonElementProps } from "./Element.js";
-import * as vue434 from "vue";
+import * as vue438 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: vue438.DefineSetupFnComponent<SkeletonInputProps, {}, {}, SkeletonInputProps & {}, vue438.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 vue428 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: vue428.DefineSetupFnComponent<SkeletonNodeProps, EmptyEmit, SlotsType<SkeletonNodeSlots>, SkeletonNodeProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue426.PublicProps>;
+}, vue428.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 vue282 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: vue282.DefineSetupFnComponent<SkeletonProps, EmptyEmit, SlotsType<SkeletonSlots>, SkeletonProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue341.PublicProps>;
+}, vue282.PublicProps>;
 type SkeletonType = typeof Skeleton & {
   Button: typeof SkeletonButton;
   Avatar: typeof SkeletonAvatar;

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 vue169 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: vue169.DefineSetupFnComponent<SliderInternalProps, SliderEmits, SlotsType<SliderSlots>, SliderInternalProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue181.PublicProps>;
+}, vue169.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 vue80 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: vue80.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>;
+}, vue80.PublicProps>;
+declare const SpaceCompact: vue80.DefineSetupFnComponent<SpaceCompactProps, {}, {}, SpaceCompactProps & {}, vue80.PublicProps>;
+declare const SpaceAddon: vue80.DefineSetupFnComponent<SpaceCompactCellProps, {}, {}, SpaceCompactCellProps & {}, vue80.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 vue104 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: vue104.DefineSetupFnComponent<SpinProps, EmptyEmit, SlotsType<SpinSlots>, SpinProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue177.PublicProps>;
+}, vue104.PublicProps>;
 declare const _default: typeof Spin & {
   setDefaultIndicator: (indicator: VueNode) => void;
 };

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 vue394 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: vue394.DefineSetupFnComponent<SplitterProps, SplitterEmits, SlotsType<SplitterSlots>, SplitterProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue418.PublicProps>;
+}, vue394.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 vue110 from "vue";
 
 //#region src/splitter/index.d.ts
-declare const SplitterPanel: vue179.DefineSetupFnComponent<InternalPanelProps, {}, {}, InternalPanelProps & {}, vue179.PublicProps>;
+declare const SplitterPanel: vue110.DefineSetupFnComponent<InternalPanelProps, {}, {}, InternalPanelProps & {}, vue110.PublicProps>;
 //#endregion
 export { SplitterPanel };