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

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 vue386 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: vue386.DefineSetupFnComponent<TableProps$1<AnyObject>, TableEmits<AnyObject>, SlotsType<TableSlots<AnyObject>>, TableProps$1<AnyObject> & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue226.PublicProps>;
+}, vue386.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/table/style/index.js

@@ -66,7 +66,7 @@ const genTableStyle = (token) => {
 				"textAlign": "start",
 				"background": tableHeaderBg,
 				"borderBottom": tableBorder,
-				"transition": `background ${motionDurationMid} ease`,
+				"transition": `background-color ${motionDurationMid} ease`,
 				"&[colspan]:not([colspan='1'])": { textAlign: "center" },
 				[`&:not(:last-child):not(${componentCls}-selection-column):not(${componentCls}-row-expand-icon-cell):not([colspan])::before`]: {
 					position: "absolute",
@@ -84,7 +84,7 @@ const genTableStyle = (token) => {
 		},
 		[`${componentCls}-tbody`]: { "> tr": {
 			"> th, > td": {
-				transition: `background ${motionDurationMid}, border-color ${motionDurationMid}`,
+				transition: `background-color ${motionDurationMid}, border-color ${motionDurationMid}`,
 				borderBottom: tableBorder,
 				[`
               > ${componentCls}-wrapper:only-child,
@@ -106,7 +106,7 @@ const genTableStyle = (token) => {
 				textAlign: "start",
 				background: tableHeaderBg,
 				borderBottom: tableBorder,
-				transition: `background ${motionDurationMid} ease`
+				transition: `background-color ${motionDurationMid} ease`
 			},
 			[`& > ${componentCls}-measure-cell`]: {
 				paddingBlock: `0 !important`,

package/dist/table/style/radius.js

@@ -14,6 +14,12 @@ const genRadiusStyle = (token) => {
 		"&-container": {
 			"borderStartStartRadius": tableRadius,
 			"borderStartEndRadius": tableRadius,
+			"&::before": { borderStartStartRadius: tableRadius },
+			"&::after": { borderStartEndRadius: tableRadius },
+			[`> ${componentCls}-content`]: {
+				borderStartStartRadius: tableRadius,
+				borderStartEndRadius: tableRadius
+			},
 			"table > thead > tr:first-child": {
 				"> *:first-child": { borderStartStartRadius: tableRadius },
 				"> *:last-child": { borderStartEndRadius: tableRadius }

package/dist/table/style/virtual.js

@@ -17,7 +17,7 @@ const genVirtualStyle = (token) => {
 			} },
 			[`${componentCls}-cell`]: {
 				borderBottom: tableBorder,
-				transition: `background ${motionDurationMid}`
+				transition: `background-color ${motionDurationMid}`
 			},
 			[`${componentCls}-expanded-row`]: { [`${rowCellCls}${rowCellCls}-fixed`]: {
 				position: "sticky",

package/dist/tabs/TabPane.d.ts

@@ -1,5 +1,5 @@
 import { EmptyEmit } from "../_util/type.js";
-import * as vue369 from "vue";
+import * as vue302 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: vue302.DefineSetupFnComponent<TabPaneProps$1, EmptyEmit, SlotsType<TabPaneSlots>, TabPaneProps$1 & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue369.PublicProps>;
+}, vue302.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 vue162 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: vue162.DefineSetupFnComponent<TabsProps$1, TabsEmits, SlotsType<TabsSlots>, TabsProps$1 & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue192.PublicProps>;
+}, vue162.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 vue330 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: vue330.DefineSetupFnComponent<CheckableTagProps, CheckableTagEmits, SlotsType<CheckableTagSlots>, CheckableTagProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue377.PublicProps>;
+}, vue330.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 vue328 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: vue328.DefineSetupFnComponent<CheckableTagGroupProps<CheckableTagDefaultValue>, CheckableTagGroupEmits<CheckableTagDefaultValue>, {}, CheckableTagGroupProps<CheckableTagDefaultValue> & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue375.PublicProps>;
+}, vue328.PublicProps>;
 //#endregion
 export { CheckableTagGroup };

package/dist/tag/CheckableTagGroup.js

@@ -49,9 +49,9 @@ const CheckableTagGroup = /* @__PURE__ */ defineComponent((props, { emit, attrs,
 			aria: true,
 			data: true
 		}), {
-			"class": clsx(groupPrefixCls, rootClass, {
-				[`${groupPrefixCls}-disabled`]: disabled,
-				[`${groupPrefixCls}-rtl`]: direction.value === "rtl"
+			"class": clsx(groupPrefixCls.value, rootClass, {
+				[`${groupPrefixCls.value}-disabled`]: disabled,
+				[`${groupPrefixCls.value}-rtl`]: direction.value === "rtl"
 			}, hashId.value, cssVarCls.value, attrs.class, mergedClassNames.value.root),
 			"style": [mergedStyles.value.root, attrs.style],
 			"id": id,

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 vue177 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: vue177.DefineSetupFnComponent<TagProps, TagEmits, SlotsType<TagSlots>, TagProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue194.PublicProps>;
+}, vue177.PublicProps>;
 declare const Tag: typeof InternalTag & {
   CheckableTag: typeof CheckableTag;
 };

package/dist/theme/context.d.ts

@@ -1,4 +1,4 @@
 import "./interface/index.js";
 import "./themes/default/theme.js";
-import { Ref } from "vue";
-import "@antdv-next/cssinjs";
+import "@antdv-next/cssinjs";
+import { Ref } from "vue";

package/dist/theme/index.d.ts

@@ -5,8 +5,8 @@ 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 _antdv_next_cssinjs0 from "@antdv-next/cssinjs";
+import * as vue2 from "vue";
 
 //#region src/theme/index.d.ts
 /** Get current context Design Token. Will be different if you are using nest theme config. */

package/dist/theme/useToken.d.ts

@@ -1,4 +1,4 @@
 import "./interface/index.js";
 import "./context.js";
-import { Ref } from "vue";
-import "@antdv-next/cssinjs";
+import "@antdv-next/cssinjs";
+import { Ref } from "vue";

package/dist/theme/useToken.js

@@ -3,8 +3,8 @@ import seed_default from "./themes/seed.js";
 import theme_default from "./themes/default/theme.js";
 import { useDesignToken } from "./context.js";
 import formatToken from "./util/alias.js";
-import { computed } from "vue";
 import { useCacheToken } from "@antdv-next/cssinjs";
+import { computed } from "vue";
 
 //#region src/theme/useToken.ts
 const unitless = {

package/dist/theme/util/genStyleUtils.d.ts

@@ -1,3 +1,3 @@
 import "../interface/index.js";
-import "vue";
-import "@antdv-next/cssinjs";
+import "@antdv-next/cssinjs";
+import "vue";

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/theme/util/useResetIconStyle.js

@@ -1,7 +1,7 @@
 import useToken from "../useToken.js";
 import { genIconStyle } from "../../style/index.js";
-import { computed } from "vue";
 import { useStyleRegister } from "@antdv-next/cssinjs";
+import { computed } from "vue";
 
 //#region src/theme/util/useResetIconStyle.ts
 function useResetIconStyle(iconPrefixCls, csp) {

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 vue51 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: vue51.DefineSetupFnComponent<TimeRangePickerProps, TimeRangePickerEmits<AnyObject>, {}, TimeRangePickerProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue57.PublicProps>;
+}, vue51.PublicProps>;
 interface TimePickerProps extends Omit<PickerTimeProps<AnyObject>, 'picker' | 'classes' | 'styles'> {
   addon?: () => VueNode;
   status?: InputStatus;
@@ -79,15 +79,16 @@ 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: vue51.DefineSetupFnComponent<TimePickerProps, TimePickerEmits<AnyObject>, SlotsType<TimePickerSlots>, TimePickerProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue57.PublicProps>;
+}, vue51.PublicProps>;
 type MergedTimePicker = typeof TimePicker & {
   RangePicker: typeof RangePicker$1;
+  _InternalPanelDoNotUseOrYouWillBeFired: any;
 };
 declare const _default: MergedTimePicker;
-declare const TimeRangePicker: vue57.DefineSetupFnComponent<TimeRangePickerProps, TimeRangePickerEmits<AnyObject>, {}, TimeRangePickerProps & {
+declare const TimeRangePicker: vue51.DefineSetupFnComponent<TimeRangePickerProps, TimeRangePickerEmits<AnyObject>, {}, TimeRangePickerProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue57.PublicProps>;
+}, vue51.PublicProps>;
 //#endregion
 export { TimePickerLocale, TimePickerProps, TimeRangePicker, TimeRangePickerProps, _default };

package/dist/time-picker/index.js

@@ -1,5 +1,6 @@
 import { devUseWarning, isDev } from "../_util/warning.js";
 import { toPropsRefs } from "../_util/tools.js";
+import PurePanel_default from "../_util/PurePanel.js";
 import { useVariants } from "../form/hooks/useVariant.js";
 import useMergedPickerSemantic from "../date-picker/hooks/useMergedPickerSemantic.js";
 import date_picker_default from "../date-picker/index.js";
@@ -39,19 +40,21 @@ const RangePicker = /* @__PURE__ */ defineComponent((props, { slots, emit, expos
 		blur: () => rangeRef.value?.blur?.(),
 		nativeElement: computed(() => rangeRef.value?.nativeElement)
 	});
-	return () => createVNode(InternalRangePicker, mergeProps(attrs, props, {
-		"ref": rangeRef,
-		"picker": "time",
-		"mode": void 0,
-		"onChange": onChange,
-		"onCalendarChange": onCalendarChange,
-		"onPanelChange": onPanelChange,
-		"onOpenChange": onOpenChange,
-		"onOk": onOk,
-		"onFocus": onFocus,
-		"onBlur": onBlur,
-		"onKeydown": onKeyDown
-	}), slots);
+	return () => {
+		return createVNode(InternalRangePicker, mergeProps(attrs, props, {
+			"ref": rangeRef,
+			"picker": "time",
+			"mode": void 0,
+			"onChange": onChange,
+			"onCalendarChange": onCalendarChange,
+			"onPanelChange": onPanelChange,
+			"onOpenChange": onOpenChange,
+			"onOk": onOk,
+			"onFocus": onFocus,
+			"onBlur": onBlur,
+			"onKeydown": onKeyDown
+		}), slots);
+	};
 }, {
 	emits: [
 		"change",
@@ -2967,6 +2970,7 @@ const TimePicker = /* @__PURE__ */ defineComponent((props, { slots, emit, expose
 	name: "ATimePicker",
 	inheritAttrs: false
 });
+TimePicker._InternalPanelDoNotUseOrYouWillBeFired = PurePanel_default(TimePicker, "popupAlign", void 0, "picker");
 TimePicker.RangePicker = RangePicker;
 TimePicker.install = (app) => {
 	app.component(TimePicker.name, TimePicker);

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 vue314 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: vue314.DefineSetupFnComponent<TimelineProps, EmptyEmit, SlotsType<TimelineSlots>, TimelineProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue357.PublicProps>;
+}, vue314.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 vue318 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: vue318.DefineSetupFnComponent<PurePanelProps, {}, {}, PurePanelProps & {}, vue318.PublicProps>;
 //#endregion
 export { PurePanel };

package/dist/tooltip/PurePanel.js

@@ -1,11 +1,13 @@
 import { useComponentBaseConfig } from "../config-provider/context.js";
 import { useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
 import "../_util/hooks/index.js";
-import { toPropsRefs } from "../_util/tools.js";
+import { getSlotPropsFnRun, toPropsRefs } from "../_util/tools.js";
+import useCSSVarCls_default from "../config-provider/hooks/useCSSVarCls.js";
 import style_default from "./style/index.js";
 import { parseColor } from "./util.js";
 import { computed, createVNode, defineComponent, isVNode, mergeDefaults, mergeProps } from "vue";
 import { clsx } from "@v-c/util";
+import { omit } from "es-toolkit";
 import { Popup } from "@v-c/tooltip";
 
 //#region src/tooltip/PurePanel.tsx
@@ -13,26 +15,28 @@ function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(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 PurePanel = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
+	const { prefixCls, rootPrefixCls } = useComponentBaseConfig("tooltip", props);
+	const rootCls = useCSSVarCls_default(prefixCls);
 	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 innerStyles = computed(() => ({ container: colorInfo.value.overlayStyle }));
+	const colorInfo = computed(() => parseColor(rootPrefixCls.value, prefixCls.value, props.color));
+	const innerStyles = computed(() => {
+		return { container: { ...colorInfo.value.overlayStyle } };
+	});
 	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(classes), useToArr(innerStyles, styles), useToProps(mergedProps));
 	return () => {
 		const arrowContentStyle = colorInfo.value.arrowStyle;
-		const { title } = props;
+		const title = getSlotPropsFnRun(slots, props, "title");
 		const rootClassName = clsx(rootCls.value, hashId.value, cssVarCls.value, prefixCls.value, `${prefixCls.value}-pure`, `${prefixCls.value}-placement-${placement.value}`, attrs.class, colorInfo.value.className);
 		return createVNode("div", {
 			"class": rootClassName,
 			"style": arrowContentStyle
-		}, [createVNode("div", { "class": `${prefixCls.value}-arrow` }, null), createVNode(Popup, mergeProps(props, {
+		}, [createVNode("div", { "class": `${prefixCls.value}-arrow` }, null), createVNode(Popup, mergeProps(omit(props, ["class"]), {
 			"className": hashId.value,
 			"prefixCls": prefixCls.value,
 			"classNames": mergedClassNames.value,

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

@@ -1,6 +1,6 @@
-import * as vue388 from "vue";
+import * as vue316 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: vue316.DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, vue316.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 vue175 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: vue175.DefineSetupFnComponent<InternalTooltipProps, TooltipEmits, SlotsType<TooltipSlots>, InternalTooltipProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue196.PublicProps>;
+}, vue175.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,