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

package/dist/avatar/Avatar.d.ts

@@ -1,7 +1,7 @@
 import { VueNode } from "../_util/type.js";
 import { ComponentBaseProps } from "../config-provider/context.js";
 import { AvatarSize } from "./AvatarContext.js";
-import * as vue289 from "vue";
+import * as vue226 from "vue";
 import { SlotsType } from "vue";
 
 //#region src/avatar/Avatar.d.ts
@@ -34,8 +34,8 @@ interface AvatarSlots {
   src: () => any;
   default: () => any;
 }
-declare const Avatar: vue289.DefineSetupFnComponent<AvatarProps, AvatarEmits, SlotsType<AvatarSlots>, AvatarProps & {
+declare const Avatar: vue226.DefineSetupFnComponent<AvatarProps, AvatarEmits, SlotsType<AvatarSlots>, AvatarProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue289.PublicProps>;
+}, vue226.PublicProps>;
 //#endregion
 export { Avatar, AvatarEmits, AvatarProps, AvatarSlots };

package/dist/avatar/AvatarGroup.d.ts

@@ -1,7 +1,7 @@
 import { PopoverProps } from "../popover/index.js";
 import { ComponentBaseProps } from "../config-provider/context.js";
 import { AvatarSize } from "./AvatarContext.js";
-import * as vue291 from "vue";
+import * as vue228 from "vue";
 import { CSSProperties } from "vue";
 
 //#region src/avatar/AvatarGroup.d.ts
@@ -19,6 +19,6 @@ interface AvatarGroupProps extends ComponentBaseProps {
   size?: AvatarSize;
   shape?: 'circle' | 'square';
 }
-declare const AvatarGroup: vue291.DefineSetupFnComponent<AvatarGroupProps, {}, {}, AvatarGroupProps & {}, vue291.PublicProps>;
+declare const AvatarGroup: vue228.DefineSetupFnComponent<AvatarGroupProps, {}, {}, AvatarGroupProps & {}, vue228.PublicProps>;
 //#endregion
 export { AvatarGroup, AvatarGroupProps };

package/dist/badge/Ribbon.d.ts

@@ -1,7 +1,7 @@
 import { EmptyEmit, VueNode } from "../_util/type.js";
 import { PresetColorType } from "../_util/colors.js";
 import { ComponentBaseProps } from "../config-provider/context.js";
-import * as vue92 from "vue";
+import * as vue69 from "vue";
 import { CSSProperties, SlotsType } from "vue";
 import { LiteralUnion } from "@v-c/util/dist/type";
 
@@ -16,8 +16,8 @@ interface RibbonSlots {
   default?: () => any;
   text?: () => any;
 }
-declare const _default: vue92.DefineSetupFnComponent<RibbonProps, EmptyEmit, SlotsType<RibbonSlots>, RibbonProps & {
+declare const _default: vue69.DefineSetupFnComponent<RibbonProps, EmptyEmit, SlotsType<RibbonSlots>, RibbonProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue92.PublicProps>;
+}, vue69.PublicProps>;
 //#endregion
 export { RibbonProps, _default };

package/dist/badge/ScrollNumber.js

@@ -21,7 +21,7 @@ var ScrollNumber_default = /* @__PURE__ */ defineComponent((props, { slots, attr
 		} : attrStyle, attrStyle].filter(Boolean);
 		if (children.length) {
 			const child = children[0];
-			return cloneVNode(child, { class: classNames(`${prefixCls.value}-custom-component`, child.props?.class, attrClass) });
+			return cloneVNode(child, { class: classNames(`${prefixCls.value}-custom-component`, child.props?.class) });
 		}
 		let numberNodes = count;
 		const numericValue = Number(count);

package/dist/badge/SingleNumber.js

@@ -55,7 +55,7 @@ var SingleNumber_default = /* @__PURE__ */ defineComponent((props) => {
 		let unitNodes;
 		let offsetStyle;
 		if (previousValue === value || Number.isNaN(value) || Number.isNaN(previousValue)) {
-			unitNodes = [renderUnit(value, 0, true, value)];
+			unitNodes = [renderUnit(props.value, 0, true, value)];
 			offsetStyle = { transition: "none" };
 		} else {
 			const unitNumberList = [];

package/dist/badge/index.d.ts

@@ -6,7 +6,7 @@ import "../theme/interface/index.js";
 import { PresetStatusColorType } from "../_util/colors.js";
 import { _default } from "./Ribbon.js";
 import { ComponentBaseProps } from "../config-provider/context.js";
-import * as vue90 from "vue";
+import * as vue67 from "vue";
 import { SlotsType } from "vue";
 import { LiteralUnion } from "@v-c/util/dist/type";
 
@@ -37,9 +37,9 @@ interface BadgeSlots {
   count?: () => any;
   text?: () => any;
 }
-declare const InternalBadge: vue90.DefineSetupFnComponent<BadgeProps, EmptyEmit, SlotsType<BadgeSlots>, BadgeProps & {
+declare const InternalBadge: vue67.DefineSetupFnComponent<BadgeProps, EmptyEmit, SlotsType<BadgeSlots>, BadgeProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue90.PublicProps>;
+}, vue67.PublicProps>;
 declare const Badge: typeof InternalBadge & {
   Ribbon: typeof _default;
 };

package/dist/badge/index.js

@@ -3,13 +3,14 @@ import { useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeS
 import "../_util/hooks/index.js";
 import { clsx as clsx$1, getSlotPropsFnRun, toPropsRefs } from "../_util/tools.js";
 import { isPresetColor } from "../_util/colors.js";
-import { getTransitionProps } from "../_util/motion.js";
+import { formatUnit } from "../_util/styleUtils.js";
 import style_default from "./style/index.js";
 import Ribbon_default from "./Ribbon.js";
 import ScrollNumber_default from "./ScrollNumber.js";
 import { Transition, cloneVNode, computed, createVNode, defineComponent, isVNode, mergeDefaults, mergeProps, shallowRef, watchEffect } from "vue";
 import { classNames } from "@v-c/util";
 import { filterEmpty } from "@v-c/util/dist/props-util";
+import { getTransitionProps } from "@v-c/util/dist/utils/transition";
 
 //#region src/badge/index.tsx
 function _isSlot(s) {
@@ -68,9 +69,10 @@ const InternalBadge = /* @__PURE__ */ defineComponent((props, { slots, attrs, ex
 			...attrs.style
 		};
 		const horizontalOffset = Number.parseInt(props.offset[0], 10);
+		const insetInlineEndUnit = formatUnit(direction.value === "rtl" ? horizontalOffset : -horizontalOffset);
 		const offsetStyle = {
-			marginTop: props.offset[1],
-			insetInlineEnd: direction.value === "rtl" ? horizontalOffset : -horizontalOffset
+			marginTop: formatUnit(props.offset[1]),
+			insetInlineEnd: insetInlineEndUnit
 		};
 		return {
 			...contextStyle.value,

package/dist/badge/style/index.js

@@ -79,7 +79,7 @@ const genSharedBadgeStyle = (token) => {
 			"background": token.badgeColor,
 			"borderRadius": calc(indicatorHeight).div(2).equal(),
 			"boxShadow": `0 0 0 ${unit(badgeShadowSize)} ${token.badgeShadowColor}`,
-			"transition": `background ${token.motionDurationMid}`,
+			"transition": `background-color ${token.motionDurationMid}`,
 			"a": { color: token.badgeTextColor },
 			"a:hover": { color: token.badgeTextColor },
 			"a:hover &": { background: token.badgeColorHover }

package/dist/breadcrumb/Breadcrumb.d.ts

@@ -4,7 +4,7 @@ import "../_util/hooks/index.js";
 import { DropdownProps } from "../dropdown/dropdown.js";
 import "../dropdown/index.js";
 import { BreadcrumbItemProps, MenuItem } from "./BreadcrumbItem.js";
-import * as vue287 from "vue";
+import * as vue234 from "vue";
 import { CSSProperties, SlotsType } from "vue";
 import { Key } from "@v-c/util/dist/type";
 
@@ -38,7 +38,7 @@ type BreadcrumbStylesType<T extends AnyObject = AnyObject> = SemanticStylesType<
 interface BreadcrumbProps<T extends AnyObject = AnyObject> {
   prefixCls?: string;
   params?: T;
-  separator?: VueNode;
+  separator?: any;
   rootClass?: string;
   items?: ItemType[];
   classes?: BreadcrumbClassNamesType<T>;
@@ -82,8 +82,8 @@ interface BreadcrumbSlots {
     menu: MenuItem;
   }) => any;
 }
-declare const Breadcrumb: vue287.DefineSetupFnComponent<BreadcrumbProps<AnyObject>, BreadcrumbEmits, SlotsType<BreadcrumbSlots>, BreadcrumbProps<AnyObject> & {
+declare const Breadcrumb: vue234.DefineSetupFnComponent<BreadcrumbProps<AnyObject>, BreadcrumbEmits, SlotsType<BreadcrumbSlots>, BreadcrumbProps<AnyObject> & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue287.PublicProps>;
+}, vue234.PublicProps>;
 //#endregion
-export { Breadcrumb, BreadcrumbEmits, BreadcrumbItemType, BreadcrumbProps, BreadcrumbSlots };
+export { Breadcrumb, BreadcrumbEmits, BreadcrumbProps, BreadcrumbSlots, ItemType };

package/dist/breadcrumb/Breadcrumb.js

@@ -136,14 +136,6 @@ const Breadcrumb = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit
 			default: void 0
 		},
 		separator: {
-			type: [
-				Function,
-				Boolean,
-				String,
-				Number,
-				null,
-				Object
-			],
 			required: false,
 			default: void 0
 		},

package/dist/breadcrumb/BreadcrumbItem.d.ts

@@ -6,7 +6,7 @@ import { Key } from "@v-c/util/dist/type";
 
 //#region src/breadcrumb/BreadcrumbItem.d.ts
 interface SeparatorType {
-  separator?: VueNode;
+  separator?: any;
   key?: Key;
 }
 type MenuType = NonNullable<DropdownProps['menu']>;

package/dist/breadcrumb/BreadcrumbItem.js

@@ -53,7 +53,7 @@ const InternalBreadcrumbItem = /* @__PURE__ */ defineComponent((props, { slots }
 		if (isNonNullable_default(link)) return createVNode(Fragment, null, [createVNode("li", {
 			"class": mergedClassNames?.item,
 			"style": mergedStyles?.item
-		}, [link]), separator && createVNode(BreadcrumbSeparator_default, null, _isSlot(separator) ? separator : { default: () => [separator] })]);
+		}, [link]), !!separator && createVNode(BreadcrumbSeparator_default, null, _isSlot(separator) ? separator : { default: () => [separator] })]);
 		return null;
 	};
 }, {
@@ -94,14 +94,6 @@ const InternalBreadcrumbItem = /* @__PURE__ */ defineComponent((props, { slots }
 			default: void 0
 		},
 		separator: {
-			type: [
-				Function,
-				Boolean,
-				String,
-				Number,
-				null,
-				Object
-			],
 			required: false,
 			default: void 0
 		}
@@ -155,14 +147,6 @@ const BreadcrumbItem = /* @__PURE__ */ defineComponent((props, { slots }) => {
 			default: void 0
 		},
 		separator: {
-			type: [
-				Function,
-				Boolean,
-				String,
-				Number,
-				null,
-				Object
-			],
 			required: false,
 			default: void 0
 		}

package/dist/breadcrumb/index.d.ts

@@ -1,2 +1,2 @@
 import { BreadcrumbItemProps, SeparatorType } from "./BreadcrumbItem.js";
-import { Breadcrumb, BreadcrumbEmits, BreadcrumbItemType, BreadcrumbProps, BreadcrumbSlots } from "./Breadcrumb.js";
+import { Breadcrumb, BreadcrumbEmits, BreadcrumbProps, BreadcrumbSlots, ItemType } from "./Breadcrumb.js";

package/dist/button/Button.d.ts

@@ -4,7 +4,7 @@ import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMe
 import "../_util/hooks/index.js";
 import { ButtonColorType, ButtonHTMLType, ButtonShape, ButtonType, ButtonVariantType } from "./buttonHelper.js";
 import { ComponentBaseProps } from "../config-provider/context.js";
-import * as vue305 from "vue";
+import * as vue236 from "vue";
 import { SlotsType } from "vue";
 
 //#region src/button/Button.d.ts
@@ -50,9 +50,9 @@ interface ButtonSlots {
   icon?: () => any;
   loadingIcon?: () => any;
 }
-declare const InternalCompoundedButton: vue305.DefineSetupFnComponent<ButtonProps, ButtonEmits, SlotsType<ButtonSlots>, ButtonProps & {
+declare const InternalCompoundedButton: vue236.DefineSetupFnComponent<ButtonProps, ButtonEmits, SlotsType<ButtonSlots>, ButtonProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue305.PublicProps>;
+}, vue236.PublicProps>;
 type CompoundedComponent = typeof InternalCompoundedButton & {
   /** @internal */
   __ANT_BUTTON: boolean;

package/dist/button/style/variant.js

@@ -4,140 +4,152 @@ import { genCssVar } from "../../theme/util/genStyleUtils.js";
 //#region src/button/style/variant.ts
 const genVariantStyle = (token) => {
 	const { componentCls, antCls } = token;
-	const getCssVar = genCssVar(antCls, "btn");
+	const [varName, varRef] = genCssVar(antCls, "btn");
 	return { [componentCls]: [
 		{
-			[getCssVar("border-width")]: "1px",
-			[getCssVar("border-color")]: "#000",
-			[getCssVar("border-color-hover")]: `var(${getCssVar("border-color")})`,
-			[getCssVar("border-color-active")]: `var(${getCssVar("border-color")})`,
-			[getCssVar("border-color-disabled")]: `var(${getCssVar("border-color")})`,
-			[getCssVar("border-style")]: "solid",
-			[getCssVar("text-color")]: "#000",
-			[getCssVar("text-color-hover")]: `var(${getCssVar("text-color")})`,
-			[getCssVar("text-color-active")]: `var(${getCssVar("text-color")})`,
-			[getCssVar("text-color-disabled")]: `var(${getCssVar("text-color")})`,
-			[getCssVar("bg-color")]: "#ddd",
-			[getCssVar("bg-color-hover")]: `var(${getCssVar("bg-color")})`,
-			[getCssVar("bg-color-active")]: `var(${getCssVar("bg-color")})`,
-			[getCssVar("bg-color-disabled")]: token.colorBgContainerDisabled,
-			[getCssVar("bg-color-container")]: token.colorBgContainer,
-			[getCssVar("shadow")]: "none"
+			[varName("border-width")]: "1px",
+			[varName("border-color")]: "#000",
+			[varName("border-color-hover")]: varRef("border-color"),
+			[varName("border-color-active")]: varRef("border-color"),
+			[varName("border-color-disabled")]: varRef("border-color"),
+			[varName("border-style")]: "solid",
+			[varName("text-color")]: "#000",
+			[varName("text-color-hover")]: varRef("text-color"),
+			[varName("text-color-active")]: varRef("text-color"),
+			[varName("text-color-disabled")]: varRef("text-color"),
+			[varName("bg-color")]: "#ddd",
+			[varName("bg-color-hover")]: varRef("bg-color"),
+			[varName("bg-color-active")]: varRef("bg-color"),
+			[varName("bg-color-disabled")]: token.colorBgContainerDisabled,
+			[varName("bg-color-container")]: token.colorBgContainer,
+			[varName("shadow")]: "none"
 		},
 		{
-			border: `var(${getCssVar("border-width")}) var(${getCssVar("border-style")}) var(${getCssVar("border-color")})`,
-			color: `var(${getCssVar("text-color")})`,
-			backgroundColor: `var(${getCssVar("bg-color")})`,
+			border: [
+				varRef("border-width"),
+				varRef("border-style"),
+				varRef("border-color")
+			].join(" "),
+			color: varRef("text-color"),
+			backgroundColor: varRef("bg-color"),
 			[`&:not(:disabled):not(${componentCls}-disabled)`]: {
 				"&:hover": {
-					border: `var(${getCssVar("border-width")}) var(${getCssVar("border-style")}) var(${getCssVar("border-color-hover")})`,
-					color: `var(${getCssVar("text-color-hover")})`,
-					backgroundColor: `var(${getCssVar("bg-color-hover")})`
+					border: [
+						varRef("border-width"),
+						varRef("border-style"),
+						varRef("border-color-hover")
+					].join(" "),
+					color: varRef("text-color-hover"),
+					backgroundColor: varRef("bg-color-hover")
 				},
 				"&:active": {
-					border: `var(${getCssVar("border-width")}) var(${getCssVar("border-style")}) var(${getCssVar("border-color-active")})`,
-					color: `var(${getCssVar("text-color-active")})`,
-					backgroundColor: `var(${getCssVar("bg-color-active")})`
+					border: [
+						varRef("border-width"),
+						varRef("border-style"),
+						varRef("border-color-active")
+					].join(" "),
+					color: varRef("text-color-active"),
+					backgroundColor: varRef("bg-color-active")
 				}
 			}
 		},
 		{
 			[`&${componentCls}-variant-solid`]: {
-				[getCssVar("solid-bg-color")]: `var(${getCssVar("color-base")})`,
-				[getCssVar("solid-bg-color-hover")]: `var(${getCssVar("color-hover")})`,
-				[getCssVar("solid-bg-color-active")]: `var(${getCssVar("color-active")})`,
-				[getCssVar("border-color")]: "transparent",
-				[getCssVar("text-color")]: token.colorTextLightSolid,
-				[getCssVar("bg-color")]: `var(${getCssVar("solid-bg-color")})`,
-				[getCssVar("bg-color-hover")]: `var(${getCssVar("solid-bg-color-hover")})`,
-				[getCssVar("bg-color-active")]: `var(${getCssVar("solid-bg-color-active")})`,
-				boxShadow: `var(${getCssVar("shadow")})`
+				[varName("solid-bg-color")]: varRef("color-base"),
+				[varName("solid-bg-color-hover")]: varRef("color-hover"),
+				[varName("solid-bg-color-active")]: varRef("color-active"),
+				[varName("border-color")]: "transparent",
+				[varName("text-color")]: token.colorTextLightSolid,
+				[varName("bg-color")]: varRef("solid-bg-color"),
+				[varName("bg-color-hover")]: varRef("solid-bg-color-hover"),
+				[varName("bg-color-active")]: varRef("solid-bg-color-active"),
+				boxShadow: varRef("shadow")
 			},
 			[`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: {
-				[getCssVar("border-color")]: `var(${getCssVar("color-base")})`,
-				[getCssVar("border-color-hover")]: `var(${getCssVar("color-hover")})`,
-				[getCssVar("border-color-active")]: `var(${getCssVar("color-active")})`,
-				[getCssVar("bg-color")]: `var(${getCssVar("bg-color-container")})`,
-				[getCssVar("text-color")]: `var(${getCssVar("color-base")})`,
-				[getCssVar("text-color-hover")]: `var(${getCssVar("color-hover")})`,
-				[getCssVar("text-color-active")]: `var(${getCssVar("color-active")})`,
-				boxShadow: `var(${getCssVar("shadow")})`
+				[varName("border-color")]: varRef("color-base"),
+				[varName("border-color-hover")]: varRef("color-hover"),
+				[varName("border-color-active")]: varRef("color-active"),
+				[varName("bg-color")]: varRef("bg-color-container"),
+				[varName("text-color")]: varRef("color-base"),
+				[varName("text-color-hover")]: varRef("color-hover"),
+				[varName("text-color-active")]: varRef("color-active"),
+				boxShadow: varRef("shadow")
 			},
 			[`&${componentCls}-variant-dashed`]: {
-				[getCssVar("border-style")]: "dashed",
-				[getCssVar("bg-color-disabled")]: token.dashedBgDisabled
+				[varName("border-style")]: "dashed",
+				[varName("bg-color-disabled")]: token.dashedBgDisabled
 			},
 			[`&${componentCls}-variant-filled`]: {
-				[getCssVar("border-color")]: "transparent",
-				[getCssVar("text-color")]: `var(${getCssVar("color-base")})`,
-				[getCssVar("bg-color")]: `var(${getCssVar("color-light")})`,
-				[getCssVar("bg-color-hover")]: `var(${getCssVar("color-light-hover")})`,
-				[getCssVar("bg-color-active")]: `var(${getCssVar("color-light-active")})`
+				[varName("border-color")]: "transparent",
+				[varName("text-color")]: varRef("color-base"),
+				[varName("bg-color")]: varRef("color-light"),
+				[varName("bg-color-hover")]: varRef("color-light-hover"),
+				[varName("bg-color-active")]: varRef("color-light-active")
 			},
 			[`&${componentCls}-variant-text, &${componentCls}-variant-link`]: {
-				[getCssVar("border-color")]: "transparent",
-				[getCssVar("text-color")]: `var(${getCssVar("color-base")})`,
-				[getCssVar("text-color-hover")]: `var(${getCssVar("color-hover")})`,
-				[getCssVar("text-color-active")]: `var(${getCssVar("color-active")})`,
-				[getCssVar("bg-color")]: "transparent",
-				[getCssVar("bg-color-hover")]: "transparent",
-				[getCssVar("bg-color-active")]: "transparent",
+				[varName("border-color")]: "transparent",
+				[varName("text-color")]: varRef("color-base"),
+				[varName("text-color-hover")]: varRef("color-hover"),
+				[varName("text-color-active")]: varRef("color-active"),
+				[varName("bg-color")]: "transparent",
+				[varName("bg-color-hover")]: "transparent",
+				[varName("bg-color-active")]: "transparent",
 				[`&:disabled, &${token.componentCls}-disabled`]: {
 					background: "transparent",
 					borderColor: "transparent"
 				}
 			},
 			[`&${componentCls}-variant-text`]: {
-				[getCssVar("bg-color-hover")]: `var(${getCssVar("color-light")})`,
-				[getCssVar("bg-color-active")]: `var(${getCssVar("color-light-active")})`
+				[varName("bg-color-hover")]: varRef("color-light"),
+				[varName("bg-color-active")]: varRef("color-light-active")
 			}
 		},
 		{
 			[`&${componentCls}-variant-link`]: {
-				[getCssVar("color-base")]: token.colorLink,
-				[getCssVar("color-hover")]: token.colorLinkHover,
-				[getCssVar("color-active")]: token.colorLinkActive
+				[varName("color-base")]: token.colorLink,
+				[varName("color-hover")]: token.colorLinkHover,
+				[varName("color-active")]: token.colorLinkActive
 			},
 			[`&${componentCls}-color-primary`]: {
-				[getCssVar("color-base")]: token.colorPrimary,
-				[getCssVar("color-hover")]: token.colorPrimaryHover,
-				[getCssVar("color-active")]: token.colorPrimaryActive,
-				[getCssVar("color-light")]: token.colorPrimaryBg,
-				[getCssVar("color-light-hover")]: token.colorPrimaryBgHover,
-				[getCssVar("color-light-active")]: token.colorPrimaryBorder,
-				[getCssVar("shadow")]: token.primaryShadow
+				[varName("color-base")]: token.colorPrimary,
+				[varName("color-hover")]: token.colorPrimaryHover,
+				[varName("color-active")]: token.colorPrimaryActive,
+				[varName("color-light")]: token.colorPrimaryBg,
+				[varName("color-light-hover")]: token.colorPrimaryBgHover,
+				[varName("color-light-active")]: token.colorPrimaryBorder,
+				[varName("shadow")]: token.primaryShadow
 			},
 			[`&${componentCls}-color-dangerous`]: {
-				[getCssVar("color-base")]: token.colorError,
-				[getCssVar("color-hover")]: token.colorErrorHover,
-				[getCssVar("color-active")]: token.colorErrorActive,
-				[getCssVar("color-light")]: token.colorErrorBg,
-				[getCssVar("color-light-hover")]: token.colorErrorBgFilledHover,
-				[getCssVar("color-light-active")]: token.colorErrorBgActive,
-				[getCssVar("shadow")]: token.dangerShadow
+				[varName("color-base")]: token.colorError,
+				[varName("color-hover")]: token.colorErrorHover,
+				[varName("color-active")]: token.colorErrorActive,
+				[varName("color-light")]: token.colorErrorBg,
+				[varName("color-light-hover")]: token.colorErrorBgFilledHover,
+				[varName("color-light-active")]: token.colorErrorBgActive,
+				[varName("shadow")]: token.dangerShadow
 			},
 			[`&${componentCls}-color-default`]: {
-				[getCssVar("solid-bg-color")]: token.colorBgSolid,
-				[getCssVar("solid-bg-color-hover")]: token.colorBgSolidHover,
-				[getCssVar("solid-bg-color-active")]: token.colorBgSolidActive,
-				[getCssVar("color-base")]: token.defaultBorderColor,
-				[getCssVar("color-hover")]: token.defaultHoverBorderColor,
-				[getCssVar("color-active")]: token.defaultActiveBorderColor,
-				[getCssVar("color-light")]: token.colorFillTertiary,
-				[getCssVar("color-light-hover")]: token.colorFillSecondary,
-				[getCssVar("color-light-active")]: token.colorFill,
-				[getCssVar("text-color")]: token.colorText,
-				[getCssVar("text-color-hover")]: token.defaultHoverBorderColor,
-				[getCssVar("text-color-active")]: token.defaultActiveBorderColor,
-				[getCssVar("shadow")]: token.defaultShadow,
-				[`&${componentCls}-variant-solid`]: { [getCssVar("text-color")]: token.solidTextColor },
+				[varName("solid-bg-color")]: token.colorBgSolid,
+				[varName("solid-bg-color-hover")]: token.colorBgSolidHover,
+				[varName("solid-bg-color-active")]: token.colorBgSolidActive,
+				[varName("color-base")]: token.defaultBorderColor,
+				[varName("color-hover")]: token.defaultHoverBorderColor,
+				[varName("color-active")]: token.defaultActiveBorderColor,
+				[varName("color-light")]: token.colorFillTertiary,
+				[varName("color-light-hover")]: token.colorFillSecondary,
+				[varName("color-light-active")]: token.colorFill,
+				[varName("text-color")]: token.colorText,
+				[varName("text-color-hover")]: token.defaultHoverBorderColor,
+				[varName("text-color-active")]: token.defaultActiveBorderColor,
+				[varName("shadow")]: token.defaultShadow,
+				[`&${componentCls}-variant-solid`]: { [varName("text-color")]: token.solidTextColor },
 				[`&${componentCls}-variant-filled, &${componentCls}-variant-text`]: {
-					[getCssVar("text-color-hover")]: `var(${getCssVar("text-color")})`,
-					[getCssVar("text-color-active")]: `var(${getCssVar("text-color")})`
+					[varName("text-color-hover")]: varRef("text-color"),
+					[varName("text-color-active")]: varRef("text-color")
 				},
 				[`&${componentCls}-background-ghost`]: { [`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: {
-					[getCssVar("text-color")]: token.defaultGhostColor,
-					[getCssVar("border-color")]: token.defaultGhostBorderColor
+					[varName("text-color")]: token.defaultGhostColor,
+					[varName("border-color")]: token.defaultGhostBorderColor
 				} }
 			}
 		},
@@ -150,25 +162,25 @@ const genVariantStyle = (token) => {
 			const activeColor = token[`${colorKey}7`];
 			const shadowColor = token[`${colorKey}ShadowColor`];
 			return { [`&${componentCls}-color-${colorKey}`]: {
-				[getCssVar("color-base")]: darkColor,
-				[getCssVar("color-hover")]: hoverColor,
-				[getCssVar("color-active")]: activeColor,
-				[getCssVar("color-light")]: lightColor,
-				[getCssVar("color-light-hover")]: lightHoverColor,
-				[getCssVar("color-light-active")]: lightActiveColor,
-				[getCssVar("shadow")]: shadowColor
+				[varName("color-base")]: darkColor,
+				[varName("color-hover")]: hoverColor,
+				[varName("color-active")]: activeColor,
+				[varName("color-light")]: lightColor,
+				[varName("color-light-hover")]: lightHoverColor,
+				[varName("color-light-active")]: lightActiveColor,
+				[varName("shadow")]: shadowColor
 			} };
 		}),
 		{ [`&:disabled, &${token.componentCls}-disabled`]: {
 			cursor: "not-allowed",
 			borderColor: token.colorBorderDisabled,
-			background: `var(${getCssVar("bg-color-disabled")})`,
+			background: varRef("bg-color-disabled"),
 			color: token.colorTextDisabled,
 			boxShadow: "none"
 		} },
 		{ [`&${componentCls}-background-ghost`]: {
-			[getCssVar("bg-color")]: "transparent",
-			[getCssVar("shadow")]: "none"
+			[varName("bg-color")]: "transparent",
+			[varName("shadow")]: "none"
 		} }
 	] };
 };

package/dist/calendar/Header.js

@@ -1,6 +1,6 @@
 import { useFormItemInputContext, useFormItemInputContextProvider } from "../form/context.js";
-import { RadioButton, RadioGroup } from "../radio/index.js";
 import select_default from "../select/index.js";
+import { RadioButton, RadioGroup } from "../radio/index.js";
 import { computed, createVNode, defineComponent, mergeProps, ref } from "vue";
 import { clsx } from "@v-c/util";
 import { omit } from "es-toolkit";

package/dist/calendar/generateCalendar.d.ts

@@ -3,7 +3,7 @@ import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMe
 import "../_util/hooks/index.js";
 import { locale } from "../date-picker/locale/en_US.js";
 import "./locale/en_US.js";
-import * as vue297 from "vue";
+import * as vue242 from "vue";
 import { SlotsType } from "vue";
 import { GenerateConfig } from "@v-c/picker/generate/index";
 
@@ -82,8 +82,8 @@ interface CalendarEmits<DateType = AnyObject> {
   'select': (date: DateType, selectInfo: SelectInfo) => void;
   [key: string]: (...args: any[]) => void;
 }
-declare function generateCalendar<DateType extends AnyObject>(generateConfig: GenerateConfig<DateType>): vue297.DefineSetupFnComponent<CalendarProps<DateType>, CalendarEmits<DateType>, SlotsType<CalendarSlots>, CalendarProps<DateType> & {
+declare function generateCalendar<DateType extends AnyObject>(generateConfig: GenerateConfig<DateType>): vue242.DefineSetupFnComponent<CalendarProps<DateType>, CalendarEmits<DateType>, SlotsType<CalendarSlots>, CalendarProps<DateType> & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue297.PublicProps>;
+}, vue242.PublicProps>;
 //#endregion
 export { CalendarEmits, CalendarMode, CalendarProps, CalendarSlots, generateCalendar };

package/dist/calendar/index.d.ts

@@ -1,11 +1,11 @@
 import { CalendarEmits, CalendarMode, CalendarProps, CalendarSlots, generateCalendar } from "./generateCalendar.js";
-import * as vue94 from "vue";
+import * as vue71 from "vue";
 import { Dayjs } from "dayjs";
 
 //#region src/calendar/index.d.ts
-declare const Calendar: vue94.DefineSetupFnComponent<CalendarProps<Dayjs>, CalendarEmits<Dayjs>, vue94.SlotsType<CalendarSlots>, CalendarProps<Dayjs> & {
+declare const Calendar: vue71.DefineSetupFnComponent<CalendarProps<Dayjs>, CalendarEmits<Dayjs>, vue71.SlotsType<CalendarSlots>, CalendarProps<Dayjs> & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue94.PublicProps>;
+}, vue71.PublicProps>;
 type CalendarType = typeof Calendar & {
   generateCalendar: typeof generateCalendar;
 };

package/dist/calendar/style/index.d.ts

@@ -1,7 +1,7 @@
 import "../../date-picker/style/index.js";
 import "../../theme/internal.js";
-import "vue";
 import { CSSObject } from "@antdv-next/cssinjs";
+import "vue";
 
 //#region src/calendar/style/index.d.ts
 interface ComponentToken {

package/dist/calendar/style/index.js

@@ -93,7 +93,7 @@ function genCalendarStyles(token) {
 				"border": 0,
 				"borderTop": `${unit(token.lineWidthBold)} ${token.lineType} ${token.colorSplit}`,
 				"borderRadius": 0,
-				"transition": `background ${token.motionDurationSlow}`,
+				"transition": `background-color ${token.motionDurationSlow}`,
 				"&-value": {
 					lineHeight: unit(token.dateValueHeight),
 					transition: `color ${token.motionDurationSlow}`