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

package/dist/steps/style/util.js

@@ -1,3 +1,5 @@
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
+
 //#region src/steps/style/util.ts
 function withoutVar(cssVar) {
 	return (cssVar || "--ant-not-exist").replace(/var\((.*)\)/, "$1");
@@ -7,14 +9,15 @@ function withoutVar(cssVar) {
 * This should be multiple since will conflict with other `rail` styles.
 */
 function getItemWithWidthStyle(token, marginSize, optionalStyle) {
-	const { calc, componentCls, descriptionMaxWidth } = token;
+	const { calc, componentCls, descriptionMaxWidth, antCls } = token;
 	const itemCls = `${componentCls}-item`;
+	const [, varRef] = genCssVar(antCls, "cmp-steps");
 	return { [`@container style(${withoutVar(descriptionMaxWidth)})`]: [{
-		[`${itemCls}-icon`]: { marginInlineStart: calc(descriptionMaxWidth).sub(`var(--steps-icon-size)`).div(2).equal() },
+		[`${itemCls}-icon`]: { marginInlineStart: calc(descriptionMaxWidth).sub(varRef("icon-size")).div(2).equal() },
 		[`${itemCls}-rail`]: {
 			width: "auto",
-			insetInlineStart: calc(descriptionMaxWidth).add(`var(--steps-icon-size)`).div(2).add(marginSize).equal(),
-			insetInlineEnd: calc(descriptionMaxWidth).sub(`var(--steps-icon-size)`).div(2).sub(marginSize).mul(-1).equal()
+			insetInlineStart: calc(descriptionMaxWidth).add(varRef("icon-size")).div(2).add(marginSize).equal(),
+			insetInlineEnd: calc(descriptionMaxWidth).sub(varRef("icon-size")).div(2).sub(marginSize).mul(-1).equal()
 		}
 	}, optionalStyle] };
 }

package/dist/steps/style/vertical.js

@@ -1,24 +1,27 @@
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
+
 //#region src/steps/style/vertical.ts
 const genVerticalStyle = (token) => {
-	const { componentCls, calc } = token;
+	const { componentCls, marginXXS, paddingSM, controlHeight, antCls, calc } = token;
 	const itemCls = `${componentCls}-item`;
+	const [varName, varRef] = genCssVar(antCls, "cmp-steps");
 	return { [`${componentCls}-vertical`]: {
-		"--steps-vertical-rail-margin": calc(token.marginXXS).mul(1.5).equal(),
-		"flexDirection": "column",
-		"alignItems": "stretch",
+		[varName("vertical-rail-margin")]: calc(marginXXS).mul(1.5).equal(),
+		flexDirection: "column",
+		alignItems: "stretch",
 		[`> ${itemCls}`]: {
-			"minHeight": calc(token.controlHeight).mul(1.5).equal(),
-			"paddingBottom": token.paddingSM,
+			"minHeight": calc(controlHeight).mul(1.5).equal(),
+			"paddingBottom": paddingSM,
 			"&:last-child": { paddingBottom: 0 },
-			[`${itemCls}-icon`]: { marginInlineStart: "calc((var(--steps-icon-size-max) - var(--steps-icon-size)) / 2)" },
+			[`${itemCls}-icon`]: { marginInlineStart: `calc((${varRef("icon-size-max")} - ${varRef("icon-size")}) / 2)` },
 			[`${itemCls}-rail`]: {
-				"--steps-rail-offset": calc("var(--steps-heading-height)").sub("var(--steps-icon-size)").div(2).equal(),
-				"borderInlineStartWidth": "var(--steps-rail-size)",
-				"position": "absolute",
-				"top": calc(`var(--steps-icon-size)`).add("var(--steps-item-wrapper-padding-top)").add("var(--steps-rail-offset)").add("var(--steps-vertical-rail-margin)").equal(),
-				"insetInlineStart": calc(`var(--steps-icon-size-max)`).div(2).equal(),
-				"bottom": calc("var(--steps-vertical-rail-margin)").sub("var(--steps-rail-offset)").equal(),
-				"marginInlineStart": `calc(var(--steps-rail-size) / -2)`
+				[varName("rail-offset")]: calc(varRef("heading-height")).sub(varRef("icon-size")).div(2).equal(),
+				borderInlineStartWidth: varRef("rail-size"),
+				position: "absolute",
+				top: calc(varRef("icon-size")).add(varRef("item-wrapper-padding-top")).add(varRef("rail-offset")).add(varRef("vertical-rail-margin")).equal(),
+				insetInlineStart: calc(varRef("icon-size-max")).div(2).equal(),
+				bottom: calc(varRef("vertical-rail-margin")).sub(varRef("rail-offset")).equal(),
+				marginInlineStart: `calc(${varRef("rail-size")} / -2)`
 			}
 		}
 	} };

package/dist/style/placementArrow.js

@@ -1,3 +1,4 @@
+import { genCssVar } from "../theme/util/genStyleUtils.js";
 import { genRoundedArrow } from "./roundedArrow.js";
 import { unit } from "@antdv-next/cssinjs";
 
@@ -16,7 +17,8 @@ function isInject(valid, code) {
 	return code;
 }
 function getArrowStyle(token, colorBg, options) {
-	const { componentCls, boxShadowPopoverArrow, arrowOffsetVertical, arrowOffsetHorizontal } = token;
+	const { componentCls, boxShadowPopoverArrow, arrowOffsetVertical, arrowOffsetHorizontal, antCls } = token;
+	const [varName] = genCssVar(antCls, "tooltip");
 	const { arrowDistance = 0, arrowPlacement = {
 		left: true,
 		right: true,
@@ -48,14 +50,14 @@ function getArrowStyle(token, colorBg, options) {
 				transform: "translateX(-50%) translateY(100%) rotate(180deg)"
 			},
 			"&-placement-topLeft": {
-				"--arrow-offset-horizontal": arrowOffsetHorizontal,
+				[varName("arrow-offset-horizontal")]: arrowOffsetHorizontal,
 				[`> ${componentCls}-arrow`]: { left: {
 					_skip_check_: true,
 					value: arrowOffsetHorizontal
 				} }
 			},
 			"&-placement-topRight": {
-				"--arrow-offset-horizontal": `calc(100% - ${unit(arrowOffsetHorizontal)})`,
+				[varName("arrow-offset-horizontal")]: `calc(100% - ${unit(arrowOffsetHorizontal)})`,
 				[`> ${componentCls}-arrow`]: { right: {
 					_skip_check_: true,
 					value: arrowOffsetHorizontal
@@ -79,14 +81,14 @@ function getArrowStyle(token, colorBg, options) {
 				transform: `translateX(-50%) translateY(-100%)`
 			},
 			"&-placement-bottomLeft": {
-				"--arrow-offset-horizontal": arrowOffsetHorizontal,
+				[varName("arrow-offset-horizontal")]: arrowOffsetHorizontal,
 				[`> ${componentCls}-arrow`]: { left: {
 					_skip_check_: true,
 					value: arrowOffsetHorizontal
 				} }
 			},
 			"&-placement-bottomRight": {
-				"--arrow-offset-horizontal": `calc(100% - ${unit(arrowOffsetHorizontal)})`,
+				[varName("arrow-offset-horizontal")]: `calc(100% - ${unit(arrowOffsetHorizontal)})`,
 				[`> ${componentCls}-arrow`]: { right: {
 					_skip_check_: true,
 					value: arrowOffsetHorizontal

package/dist/switch/index.d.ts

@@ -2,7 +2,7 @@ import { 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 vue190 from "vue";
+import * as vue140 from "vue";
 import { SlotsType } from "vue";
 import { SwitchChangeEventHandler, SwitchClickEventHandler } from "@v-c/switch";
 
@@ -47,8 +47,8 @@ interface SwitchSlots {
   checkedChildren: () => any;
   unCheckedChildren: () => any;
 }
-declare const Switch: vue190.DefineSetupFnComponent<SwitchProps, SwitchEmits, SlotsType<SwitchSlots>, SwitchProps & {
+declare const Switch: vue140.DefineSetupFnComponent<SwitchProps, SwitchEmits, SlotsType<SwitchSlots>, SwitchProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue190.PublicProps>;
+}, vue140.PublicProps>;
 //#endregion
 export { Switch, SwitchEmits, SwitchProps, SwitchSize, SwitchSlots };

package/dist/table/Column.d.ts

@@ -1,6 +1,6 @@
 import { AnyObject, EmptyEmit } from "../_util/type.js";
 import { ColumnType } from "./interface.js";
-import * as vue220 from "vue";
+import * as vue365 from "vue";
 import { SlotsType } from "vue";
 
 //#region src/table/Column.d.ts
@@ -13,8 +13,8 @@ interface ColumnSlots {
 /**
  * Syntactic sugar for `columns` prop. HOC will not work on this.
  */
-declare const Column: vue220.DefineSetupFnComponent<ColumnProps<AnyObject>, EmptyEmit, SlotsType<ColumnSlots>, ColumnProps<AnyObject> & {
+declare const Column: vue365.DefineSetupFnComponent<ColumnProps<AnyObject>, EmptyEmit, SlotsType<ColumnSlots>, ColumnProps<AnyObject> & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue220.PublicProps>;
+}, vue365.PublicProps>;
 //#endregion
 export { Column, ColumnProps };

package/dist/table/ColumnGroup.d.ts

@@ -1,7 +1,7 @@
 import { AnyObject, EmptyEmit } from "../_util/type.js";
 import { ColumnType } from "./interface.js";
 import { ColumnProps } from "./Column.js";
-import * as vue224 from "vue";
+import * as vue367 from "vue";
 import { SlotsType } from "vue";
 
 //#region src/table/ColumnGroup.d.ts
@@ -14,8 +14,8 @@ interface ColumnGroupSlots {
 /**
  * Syntactic sugar for `columns` prop. HOC will not work on this.
  */
-declare const ColumnGroup: vue224.DefineSetupFnComponent<ColumnGroupProps<AnyObject>, EmptyEmit, SlotsType<ColumnGroupSlots>, ColumnGroupProps<AnyObject> & {
+declare const ColumnGroup: vue367.DefineSetupFnComponent<ColumnGroupProps<AnyObject>, EmptyEmit, SlotsType<ColumnGroupSlots>, ColumnGroupProps<AnyObject> & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue224.PublicProps>;
+}, vue367.PublicProps>;
 //#endregion
 export { ColumnGroup };

package/dist/table/InternalTable.js

@@ -11,8 +11,8 @@ import { useSize } from "../config-provider/hooks/useSize.js";
 import config_provider_default from "../config-provider/index.js";
 import en_US_default from "../locale/en_US.js";
 import useLocale_default from "../locale/useLocale.js";
-import { useBreakpoint } from "../grid/hooks/useBreakpoint.js";
 import { DefaultRenderEmpty } from "../config-provider/defaultRenderEmpty.js";
+import { useBreakpoint } from "../grid/hooks/useBreakpoint.js";
 import spin_default from "../spin/index.js";
 import pagination_default from "../pagination/index.js";
 import useSelection from "./hooks/useSelection.js";

package/dist/table/Table.d.ts

@@ -3,14 +3,14 @@ import { SELECTION_ALL, SELECTION_COLUMN, SELECTION_INVERT, SELECTION_NONE } fro
 import { Column } from "./Column.js";
 import { ColumnGroup } from "./ColumnGroup.js";
 import { TableEmits, TableProps as TableProps$1, TableSlots } from "./InternalTable.js";
-import * as vue226 from "vue";
+import * as vue369 from "vue";
 import { SlotsType } from "vue";
 import { EXPAND_COLUMN, Summary } from "@v-c/table";
 
 //#region src/table/Table.d.ts
-declare const Table: vue226.DefineSetupFnComponent<TableProps$1<AnyObject>, TableEmits<AnyObject>, SlotsType<TableSlots<AnyObject>>, TableProps$1<AnyObject> & {
+declare const Table: vue369.DefineSetupFnComponent<TableProps$1<AnyObject>, TableEmits<AnyObject>, SlotsType<TableSlots<AnyObject>>, TableProps$1<AnyObject> & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue226.PublicProps>;
+}, vue369.PublicProps>;
 declare const ForwardTable: typeof Table & {
   displayName?: string;
   SELECTION_COLUMN: typeof SELECTION_COLUMN;

package/dist/table/hooks/useFilter/FilterDropdown.js

@@ -3,11 +3,11 @@ import { devUseWarning, isDev } from "../../../_util/warning.js";
 import { toPropsRefs } from "../../../_util/tools.js";
 import button_default from "../../../button/index.js";
 import extendsObject_default from "../../../_util/extendsObject.js";
+import empty_default from "../../../empty/index.js";
 import { OverrideProvider } from "../../../menu/OverrideContext.js";
 import menu_default from "../../../menu/index.js";
 import dropdown_default from "../../../dropdown/index.js";
 import radio_default from "../../../radio/index.js";
-import empty_default from "../../../empty/index.js";
 import checkbox_default from "../../../checkbox/index.js";
 import tree_default from "../../../tree/index.js";
 import FilterSearch_default from "./FilterSearch.js";

package/dist/tabs/TabPane.d.ts

@@ -1,5 +1,5 @@
 import { EmptyEmit } from "../_util/type.js";
-import * as vue369 from "vue";
+import * as vue288 from "vue";
 import { CSSProperties, SlotsType } from "vue";
 import { TabPaneProps } from "@v-c/tabs";
 
@@ -16,8 +16,8 @@ interface TabPaneSlots {
   closeIcon?: () => any;
   icon?: () => any;
 }
-declare const TabPane: vue369.DefineSetupFnComponent<TabPaneProps$1, EmptyEmit, SlotsType<TabPaneSlots>, TabPaneProps$1 & {
+declare const TabPane: vue288.DefineSetupFnComponent<TabPaneProps$1, EmptyEmit, SlotsType<TabPaneSlots>, TabPaneProps$1 & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue369.PublicProps>;
+}, vue288.PublicProps>;
 //#endregion
 export { TabPane, TabPaneProps$1 as TabPaneProps };

package/dist/tabs/index.d.ts

@@ -4,7 +4,7 @@ import { SemanticClassNames, SemanticClassNamesType, SemanticStyles, SemanticSty
 import "../_util/hooks/index.js";
 import { TabPane, TabPaneProps as TabPaneProps$1 } from "./TabPane.js";
 import { ComponentBaseProps } from "../config-provider/context.js";
-import * as vue192 from "vue";
+import * as vue144 from "vue";
 import { SlotsType } from "vue";
 import { GetIndicatorSize, MoreProps, Tab, TabsProps } from "@v-c/tabs";
 
@@ -87,8 +87,8 @@ interface TabsSlots {
   rightExtra?: () => any;
   leftExtra?: () => any;
 }
-declare const Tabs: vue192.DefineSetupFnComponent<TabsProps$1, TabsEmits, SlotsType<TabsSlots>, TabsProps$1 & {
+declare const Tabs: vue144.DefineSetupFnComponent<TabsProps$1, TabsEmits, SlotsType<TabsSlots>, TabsProps$1 & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue192.PublicProps>;
+}, vue144.PublicProps>;
 //#endregion
 export { Tab$1 as Tab, Tabs, TabsEmits, TabsProps$1 as TabsProps, TabsRef, TabsSlots };

package/dist/tag/CheckableTag.d.ts

@@ -1,6 +1,6 @@
 import { VueNode } from "../_util/type.js";
 import { ComponentBaseProps } from "../config-provider/context.js";
-import * as vue377 from "vue";
+import * as vue328 from "vue";
 import { SlotsType } from "vue";
 
 //#region src/tag/CheckableTag.d.ts
@@ -27,8 +27,8 @@ interface CheckableTagSlots {
   default: () => any;
   icon: () => any;
 }
-declare const CheckableTag: vue377.DefineSetupFnComponent<CheckableTagProps, CheckableTagEmits, SlotsType<CheckableTagSlots>, CheckableTagProps & {
+declare const CheckableTag: vue328.DefineSetupFnComponent<CheckableTagProps, CheckableTagEmits, SlotsType<CheckableTagSlots>, CheckableTagProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue377.PublicProps>;
+}, vue328.PublicProps>;
 //#endregion
 export { CheckableTag, CheckableTagProps };

package/dist/tag/CheckableTagGroup.d.ts

@@ -2,7 +2,7 @@ import { VueNode } from "../_util/type.js";
 import { SemanticClassNames, SemanticStyles } from "../_util/hooks/useMergeSemantic.js";
 import "../_util/hooks/index.js";
 import { ComponentBaseProps } from "../config-provider/context.js";
-import * as vue375 from "vue";
+import * as vue326 from "vue";
 
 //#region src/tag/CheckableTagGroup.d.ts
 type CheckableTagDefaultValue = string | number;
@@ -36,8 +36,8 @@ interface CheckableTagGroupEmits<CheckableTagValue = CheckableTagDefaultValue> {
   'update:value': (value: CheckableTagValue | CheckableTagValue[] | null) => void;
   [key: string]: (...args: any[]) => any;
 }
-declare const CheckableTagGroup: vue375.DefineSetupFnComponent<CheckableTagGroupProps<CheckableTagDefaultValue>, CheckableTagGroupEmits<CheckableTagDefaultValue>, {}, CheckableTagGroupProps<CheckableTagDefaultValue> & {
+declare const CheckableTagGroup: vue326.DefineSetupFnComponent<CheckableTagGroupProps<CheckableTagDefaultValue>, CheckableTagGroupEmits<CheckableTagDefaultValue>, {}, CheckableTagGroupProps<CheckableTagDefaultValue> & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue375.PublicProps>;
+}, vue326.PublicProps>;
 //#endregion
 export { CheckableTagGroup };

package/dist/tag/index.d.ts

@@ -6,7 +6,7 @@ import { ClosableType } from "../_util/hooks/useClosable.js";
 import { CheckableTag, CheckableTagProps } from "./CheckableTag.js";
 import { CheckableTagGroup } from "./CheckableTagGroup.js";
 import { ComponentBaseProps } from "../config-provider/context.js";
-import * as vue194 from "vue";
+import * as vue92 from "vue";
 import { SlotsType } from "vue";
 import { LiteralUnion } from "@v-c/util/dist/type";
 
@@ -38,9 +38,9 @@ interface TagEmits {
   close: (ev: MouseEvent) => void;
   [key: string]: (...args: any[]) => any;
 }
-declare const InternalTag: vue194.DefineSetupFnComponent<TagProps, TagEmits, SlotsType<TagSlots>, TagProps & {
+declare const InternalTag: vue92.DefineSetupFnComponent<TagProps, TagEmits, SlotsType<TagSlots>, TagProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue194.PublicProps>;
+}, vue92.PublicProps>;
 declare const Tag: typeof InternalTag & {
   CheckableTag: typeof CheckableTag;
 };

package/dist/theme/index.d.ts

@@ -5,15 +5,15 @@ import { GlobalToken } from "./interface/cssinjs-utils.js";
 import "./interface/index.js";
 import { getDesignToken } from "./getDesignToken.js";
 import { derivative } from "./themes/default/index.js";
-import * as vue2 from "vue";
+import * as vue4 from "vue";
 import * as _antdv_next_cssinjs0 from "@antdv-next/cssinjs";
 
 //#region src/theme/index.d.ts
 /** Get current context Design Token. Will be different if you are using nest theme config. */
 declare function useToken(): {
-  theme: vue2.Ref<_antdv_next_cssinjs0.Theme<SeedToken, AliasToken>, _antdv_next_cssinjs0.Theme<SeedToken, AliasToken>>;
-  token: vue2.Ref<GlobalToken, GlobalToken>;
-  hashId: vue2.Ref<string, string>;
+  theme: vue4.Ref<_antdv_next_cssinjs0.Theme<SeedToken, AliasToken>, _antdv_next_cssinjs0.Theme<SeedToken, AliasToken>>;
+  token: vue4.Ref<GlobalToken, GlobalToken>;
+  hashId: vue4.Ref<string, string>;
 };
 declare const _default: {
   /** Default seedToken */

package/dist/theme/util/genStyleUtils.js

@@ -45,12 +45,15 @@ const { genComponentStyleHook, genStyleHooks, genSubStyleComponent } = genStyleU
 	getCommonStyle: genCommonStyle,
 	getCompUnitless: (() => unitless)
 });
-function genCssVar(antCls, componentAbbr) {
-	const cssPrefix = `--${antCls.replace(".", "")}-${componentAbbr}-`;
-	return (name, withVar = false) => {
-		const raw = `${cssPrefix}${name}`;
-		return withVar ? `var(${raw})` : raw;
+function genCssVar(antCls, component) {
+	const cssPrefix = `--${antCls.replace(/\./g, "")}-${component}-`;
+	const varName = (name) => {
+		return `${cssPrefix}${name}`;
 	};
+	const varRef = (name, fallback) => {
+		return fallback ? `var(${cssPrefix}${name}, ${fallback})` : `var(${cssPrefix}${name})`;
+	};
+	return [varName, varRef];
 }
 
 //#endregion

package/dist/time-picker/index.d.ts

@@ -4,7 +4,7 @@ import "../_util/hooks/index.js";
 import { InputStatus } from "../_util/statusUtils.js";
 import "../date-picker/generatePicker/index.js";
 import { PickerProps as PickerProps$1, RangePickerProps as RangePickerProps$1 } from "../date-picker/generatePicker/interface.js";
-import * as vue57 from "vue";
+import * as vue17 from "vue";
 import { CSSProperties, SlotsType } from "vue";
 import { PickerMode } from "@v-c/picker";
 
@@ -46,9 +46,9 @@ interface TimeRangePickerEmits<DateType = AnyObject> {
   'keydown': (e: KeyboardEvent, preventDefault: VoidFunction) => void;
   [key: string]: (...args: any[]) => void;
 }
-declare const RangePicker$1: vue57.DefineSetupFnComponent<TimeRangePickerProps, TimeRangePickerEmits<AnyObject>, {}, TimeRangePickerProps & {
+declare const RangePicker$1: vue17.DefineSetupFnComponent<TimeRangePickerProps, TimeRangePickerEmits<AnyObject>, {}, TimeRangePickerProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue57.PublicProps>;
+}, vue17.PublicProps>;
 interface TimePickerProps extends Omit<PickerTimeProps<AnyObject>, 'picker' | 'classes' | 'styles'> {
   addon?: () => VueNode;
   status?: InputStatus;
@@ -79,15 +79,15 @@ interface TimePickerEmits<DateType = AnyObject> {
   'keydown': (e: KeyboardEvent, preventDefault: VoidFunction) => void;
   [key: string]: (...args: any[]) => void;
 }
-declare const TimePicker: vue57.DefineSetupFnComponent<TimePickerProps, TimePickerEmits<AnyObject>, SlotsType<TimePickerSlots>, TimePickerProps & {
+declare const TimePicker: vue17.DefineSetupFnComponent<TimePickerProps, TimePickerEmits<AnyObject>, SlotsType<TimePickerSlots>, TimePickerProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue57.PublicProps>;
+}, vue17.PublicProps>;
 type MergedTimePicker = typeof TimePicker & {
   RangePicker: typeof RangePicker$1;
 };
 declare const _default: MergedTimePicker;
-declare const TimeRangePicker: vue57.DefineSetupFnComponent<TimeRangePickerProps, TimeRangePickerEmits<AnyObject>, {}, TimeRangePickerProps & {
+declare const TimeRangePicker: vue17.DefineSetupFnComponent<TimeRangePickerProps, TimeRangePickerEmits<AnyObject>, {}, TimeRangePickerProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue57.PublicProps>;
+}, vue17.PublicProps>;
 //#endregion
 export { TimePickerLocale, TimePickerProps, TimeRangePicker, TimeRangePickerProps, _default };

package/dist/timeline/Timeline.d.ts

@@ -1,7 +1,7 @@
 import { EmptyEmit, VueNode } from "../_util/type.js";
 import { ComponentBaseProps } from "../config-provider/context.js";
 import { TimelineItemProps } from "./TimelineItem.js";
-import * as vue357 from "vue";
+import * as vue286 from "vue";
 import { SlotsType } from "vue";
 
 //#region src/timeline/Timeline.d.ts
@@ -40,8 +40,8 @@ interface TimelineSlots {
     index: number;
   }) => void;
 }
-declare const Timeline: vue357.DefineSetupFnComponent<TimelineProps, EmptyEmit, SlotsType<TimelineSlots>, TimelineProps & {
+declare const Timeline: vue286.DefineSetupFnComponent<TimelineProps, EmptyEmit, SlotsType<TimelineSlots>, TimelineProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue357.PublicProps>;
+}, vue286.PublicProps>;
 //#endregion
 export { Timeline, TimelineProps };

package/dist/tooltip/PurePanel.d.ts

@@ -1,9 +1,9 @@
 import { TooltipProps } from "./index.js";
-import * as vue390 from "vue";
+import * as vue312 from "vue";
 
 //#region src/tooltip/PurePanel.d.ts
 interface PurePanelProps extends TooltipProps {}
 /** @private Internal Component. Do not use in your production. */
-declare const PurePanel: vue390.DefineSetupFnComponent<PurePanelProps, {}, {}, PurePanelProps & {}, vue390.PublicProps>;
+declare const PurePanel: vue312.DefineSetupFnComponent<PurePanelProps, {}, {}, PurePanelProps & {}, vue312.PublicProps>;
 //#endregion
 export { PurePanel };

package/dist/tooltip/PurePanel.js

@@ -14,15 +14,15 @@ function _isSlot(s) {
 }
 /** @private Internal Component. Do not use in your production. */
 const PurePanel = /* @__PURE__ */ defineComponent((props, { attrs }) => {
-	const { prefixCls, getPrefixCls } = useComponentBaseConfig("tooltip", props);
-	const rootCls = computed(() => getPrefixCls());
+	const { prefixCls, rootPrefixCls } = useComponentBaseConfig("tooltip", props);
+	const rootCls = rootPrefixCls;
 	const { placement, classes, styles } = toPropsRefs(props, "placement", "classes", "styles");
 	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
 	const mergedProps = computed(() => ({
 		...props,
 		placement: placement.value
 	}));
-	const colorInfo = computed(() => parseColor(prefixCls.value, props.color));
+	const colorInfo = computed(() => parseColor(rootPrefixCls.value, prefixCls.value, props.color));
 	const innerStyles = computed(() => ({ container: colorInfo.value.overlayStyle }));
 	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(classes), useToArr(innerStyles, styles), useToProps(mergedProps));
 	return () => {

package/dist/tooltip/UniqueProvider/index.d.ts

@@ -1,6 +1,6 @@
-import * as vue388 from "vue";
+import * as vue310 from "vue";
 
 //#region src/tooltip/UniqueProvider/index.d.ts
-declare const UniqueProvider: vue388.DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, vue388.PublicProps>;
+declare const UniqueProvider: vue310.DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, vue310.PublicProps>;
 //#endregion
 export { UniqueProvider };

package/dist/tooltip/index.d.ts

@@ -6,7 +6,7 @@ import { AdjustOverflow } from "../_util/placements.js";
 import { PurePanel } from "./PurePanel.js";
 import { UniqueProvider as UniqueProvider$1 } from "./UniqueProvider/index.js";
 import { ComponentBaseProps } from "../config-provider/context.js";
-import * as vue196 from "vue";
+import * as vue159 from "vue";
 import { SlotsType } from "vue";
 import { TooltipProps, placements } from "@v-c/tooltip";
 import { ActionType, AlignType } from "@v-c/trigger";
@@ -84,9 +84,9 @@ interface TooltipSlots {
 interface InternalTooltipProps extends TooltipProps$1 {
   dataPopoverInject?: boolean;
 }
-declare const InternalTooltip: vue196.DefineSetupFnComponent<InternalTooltipProps, TooltipEmits, SlotsType<TooltipSlots>, InternalTooltipProps & {
+declare const InternalTooltip: vue159.DefineSetupFnComponent<InternalTooltipProps, TooltipEmits, SlotsType<TooltipSlots>, InternalTooltipProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue196.PublicProps>;
+}, vue159.PublicProps>;
 declare const _default: typeof InternalTooltip & {
   UniqueProvider: typeof UniqueProvider$1;
   _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;

package/dist/tooltip/index.js

@@ -30,7 +30,7 @@ function _isSlot(s) {
 }
 const InternalTooltip = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose, emit }) => {
 	const [, token] = useToken();
-	const { getPrefixCls, prefixCls, direction, arrow: contextArrow, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles, getPopupContainer: getContextPopupContainer } = useComponentBaseConfig("tooltip", props, ["arrow"]);
+	const { prefixCls, rootPrefixCls, direction, arrow: contextArrow, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles, getPopupContainer: getContextPopupContainer } = useComponentBaseConfig("tooltip", props, ["arrow"]);
 	const { arrow: tooltipArrow, builtinPlacements, autoAdjustOverflow, classes, styles } = toPropsRefs(props, "arrow", "builtinPlacements", "autoAdjustOverflow", "classes", "styles");
 	const mergedArrow = useMergedArrow_default(tooltipArrow, contextArrow);
 	const mergedShowArrow = computed(() => mergedArrow.value?.show);
@@ -69,7 +69,6 @@ const InternalTooltip = /* @__PURE__ */ defineComponent((props, { slots, attrs,
 		return props;
 	});
 	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, styles), useToProps(mergedProps));
-	const rootPrefixCls = computed(() => getPrefixCls());
 	const injectFromPopover = props.dataPopoverInject;
 	const rootCls = useCSSVarCls_default(prefixCls);
 	const [hashId, cssVarCls] = style_default(prefixCls, rootCls, !injectFromPopover);
@@ -85,7 +84,7 @@ const InternalTooltip = /* @__PURE__ */ defineComponent((props, { slots, attrs,
 		child = isVNode(child) ? child : createVNode("span", null, [child]);
 		const childProps = child?.props ?? {};
 		const childCls = !childProps?.class || typeof childProps?.class === "string" ? clsx(childProps.class, openClass || `${prefixCls.value}-open`) : childProps.class;
-		const colorInfo = parseColor(prefixCls.value, color);
+		const colorInfo = parseColor(rootPrefixCls.value, prefixCls.value, color);
 		const arrowContentStyle = colorInfo.arrowStyle;
 		const themeCls = clsx(rootCls.value, hashId.value, cssVarCls.value);
 		const rootClassNames = clsx({ [`${prefixCls.value}-rtl`]: direction.value === "rtl" }, colorInfo.className, rootClass, themeCls, contextClassName.value, mergedClassNames.value.root);

package/dist/tooltip/style/index.js

@@ -1,6 +1,6 @@
 import genPresetColor from "../../theme/util/genPresetColor.js";
 import { resetComponent } from "../../style/index.js";
-import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { genCssVar, genStyleHooks } from "../../theme/util/genStyleUtils.js";
 import { mergeToken } from "../../theme/internal.js";
 import { getArrowToken } from "../../style/roundedArrow.js";
 import getArrowStyle, { MAX_VERTICAL_CONTENT_RADIUS, getArrowOffsetToken } from "../../style/placementArrow.js";
@@ -10,14 +10,16 @@ import "../../style/motion/index.js";
 import { unit } from "@antdv-next/cssinjs";
 
 //#region src/tooltip/style/index.ts
+const FALL_BACK_ORIGIN = "50%";
 const genTooltipStyle = (token) => {
-	const { calc, componentCls, tooltipMaxWidth, tooltipColor, tooltipBg, tooltipBorderRadius, zIndexPopup, controlHeight, boxShadowSecondary, paddingSM, paddingXS, arrowOffsetHorizontal, sizePopupArrow } = token;
+	const { calc, componentCls, tooltipMaxWidth, tooltipColor, tooltipBg, tooltipBorderRadius, zIndexPopup, controlHeight, boxShadowSecondary, paddingSM, paddingXS, arrowOffsetHorizontal, sizePopupArrow, antCls } = token;
+	const [varName, varRef] = genCssVar(antCls, "tooltip");
 	const edgeAlignMinWidth = calc(tooltipBorderRadius).add(sizePopupArrow).add(arrowOffsetHorizontal).equal();
 	const sharedBodyStyle = {
 		minWidth: calc(tooltipBorderRadius).mul(2).add(sizePopupArrow).equal(),
 		minHeight: controlHeight,
 		padding: `${unit(token.calc(paddingSM).div(2).equal())} ${unit(paddingXS)}`,
-		color: `var(--ant-tooltip-color, ${tooltipColor})`,
+		color: varRef("overlay-color", tooltipColor),
 		textAlign: "start",
 		textDecoration: "none",
 		wordWrap: "break-word",
@@ -27,8 +29,8 @@ const genTooltipStyle = (token) => {
 		boxSizing: "border-box"
 	};
 	const sharedTransformOrigin = {
-		"--valid-offset-x": "var(--arrow-offset-horizontal, var(--arrow-x))",
-		"transformOrigin": [`var(--valid-offset-x, 50%)`, `var(--arrow-y, 50%)`].join(" ")
+		[varName("valid-offset-x")]: varRef("arrow-offset-horizontal", "var(--arrow-x)"),
+		transformOrigin: [varRef("valid-offset-x", FALL_BACK_ORIGIN), `var(--arrow-y, ${FALL_BACK_ORIGIN})`].join(" ")
 	};
 	return [
 		{ [componentCls]: {
@@ -41,7 +43,7 @@ const genTooltipStyle = (token) => {
 			"visibility": "visible",
 			...sharedTransformOrigin,
 			"&-hidden": { display: "none" },
-			"--antd-arrow-background-color": tooltipBg,
+			[varName("arrow-background-color")]: tooltipBg,
 			[`${componentCls}-container`]: [sharedBodyStyle, initFadeMotion(token, true)],
 			[`&:has(~ ${componentCls}-unique-container)`]: { [`${componentCls}-container`]: {
 				border: "none",
@@ -65,11 +67,11 @@ const genTooltipStyle = (token) => {
 			[`${componentCls}-content`]: { position: "relative" },
 			...genPresetColor(token, (colorKey, { darkColor }) => ({ [`&${componentCls}-${colorKey}`]: {
 				[`${componentCls}-container`]: { backgroundColor: darkColor },
-				[`${componentCls}-arrow`]: { "--antd-arrow-background-color": darkColor }
+				[`${componentCls}-arrow`]: { [varName("arrow-background-color")]: darkColor }
 			} })),
 			"&-rtl": { direction: "rtl" }
 		} },
-		getArrowStyle(token, "var(--antd-arrow-background-color)"),
+		getArrowStyle(token, varRef("arrow-background-color")),
 		{ [`${componentCls}-pure`]: {
 			position: "relative",
 			maxWidth: "none",

package/dist/tooltip/util.js

@@ -1,10 +1,12 @@
+import { genCssVar } from "../theme/util/genStyleUtils.js";
 import { isPresetColor } from "../_util/colors.js";
 import { generateColor } from "../color-picker/util.js";
 import { classNames } from "@v-c/util";
 
 //#region src/tooltip/util.ts
-function parseColor(prefixCls, color) {
+function parseColor(rootPrefixCls, prefixCls, color) {
 	const isInternalColor = isPresetColor(color);
+	const [varName] = genCssVar(rootPrefixCls, "tooltip");
 	const className = classNames({ [`${prefixCls}-${color}`]: color && isInternalColor });
 	const overlayStyle = {};
 	const arrowStyle = {};
@@ -12,8 +14,8 @@ function parseColor(prefixCls, color) {
 	const textColor = (.299 * rgb.r + .587 * rgb.g + .114 * rgb.b) / 255 < .5 ? "#FFF" : "#000";
 	if (color && !isInternalColor) {
 		overlayStyle.background = color;
-		overlayStyle["--ant-tooltip-color"] = textColor;
-		arrowStyle["--antd-arrow-background-color"] = color;
+		overlayStyle[varName("overlay-color")] = textColor;
+		arrowStyle[varName("arrow-background-color")] = color;
 	}
 	return {
 		className,

package/dist/tour/index.d.ts

@@ -1,11 +1,11 @@
 import { TourEmits, TourLocale, TourProps, TourSemanticName, TourSlots, TourStepProps, TourStylesType } from "./interface.js";
-import * as vue55 from "vue";
+import * as vue59 from "vue";
 import { SlotsType } from "vue";
 
 //#region src/tour/index.d.ts
-declare const Tour: vue55.DefineSetupFnComponent<TourProps, TourEmits, SlotsType<TourSlots>, TourProps & {
+declare const Tour: vue59.DefineSetupFnComponent<TourProps, TourEmits, SlotsType<TourSlots>, TourProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue55.PublicProps>;
+}, vue59.PublicProps>;
 type TourStepItem = TourStepProps;
 //#endregion
 export { Tour, TourStepItem };