@antdv-next1/pro-card 2.0.15 → 2.0.17

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 asuradaSong
+Copyright (c) 2023 lucasjeke
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/Card.js

@@ -1,4 +1,4 @@
-import useStyle from "./style/index.js";
+import style_default from "./style/index.js";
 import { Fragment, cloneVNode, computed, createVNode, defineComponent, isVNode, mergeProps, shallowRef } from "vue";
 import { LabelIconTip, childrenToArray, isSpecialNode } from "@antdv-next1/pro-utils";
 import { classNames } from "@v-c/util";
@@ -27,7 +27,7 @@ const InternalProCard = /* @__PURE__ */ defineComponent((props, { slots, expose,
 	const config = useConfig();
 	const prefixCls = computed(() => props.prefixCls || config.value.getPrefixCls("pro"));
 	const baseClassName = computed(() => `${prefixCls.value}-card`);
-	const { wrapSSR, hashId } = useStyle(baseClassName);
+	const [hashId, cssVarCls] = style_default(baseClassName);
 	const screens = useBreakpoint();
 	const collapsed = shallowRef(props.defaultCollapsed || false);
 	/**
@@ -89,7 +89,7 @@ const InternalProCard = /* @__PURE__ */ defineComponent((props, { slots, expose,
 							...colStyle
 						},
 						"key": index,
-						"class": classNames([`${baseClassName.value}-col`], colPropsClass, hashId.value, {
+						"class": classNames([`${baseClassName.value}-col`], colPropsClass, hashId.value, cssVarCls.value, {
 							[`${baseClassName.value}-split-horizontal`]: split === "horizontal" && index !== childrenArray.length - 1,
 							[`${baseClassName.value}-split-vertical`]: split === "vertical" && index !== childrenArray.length - 1
 						})
@@ -108,7 +108,7 @@ const InternalProCard = /* @__PURE__ */ defineComponent((props, { slots, expose,
 				}, {});
 				return createVNode(Col, mergeProps(Object.keys(colProps).length ? colProps : wrap ? {} : { flex: 1 }, {
 					"style": { ...colStyle },
-					"class": classNames({ [`${baseClassName.value}-split-vertical`]: split === "vertical" && index !== childrenArray.length - 1 }, hashId.value),
+					"class": classNames({ [`${baseClassName.value}-split-vertical`]: split === "vertical" && index !== childrenArray.length - 1 }, hashId.value, cssVarCls.value),
 					"key": index
 				}), _isSlot(_slot = cloneVNode(element, {
 					size: rest.size,
@@ -126,7 +126,7 @@ const InternalProCard = /* @__PURE__ */ defineComponent((props, { slots, expose,
 		}, collapsibleIconRender ? { expandIcon: (panelProps) => collapsibleIconRender({ collapsed: panelProps.isActive || false }) } : {}, {
 			"collapsible": typeof collapsible !== "boolean" && collapsible !== "header" ? collapsible : void 0,
 			"defaultActiveKey": defaultCollapsed ? void 0 : ["collapseCard"],
-			"class": classNames(baseClassName.value, attrs.class, hashId.value, {
+			"class": classNames(baseClassName.value, attrs.class, hashId.value, cssVarCls.value, {
 				[`${baseClassName.value}-headerBordered`]: headerBordered,
 				[`${baseClassName.value}-type-inner`]: type === "inner",
 				[`${baseClassName.value}-ghost`]: ghost,
@@ -141,7 +141,7 @@ const InternalProCard = /* @__PURE__ */ defineComponent((props, { slots, expose,
 				body: classNames({
 					[`${baseClassName.value}-body-direction-column`]: direction === "column",
 					[`${baseClassName.value}-body-layout-center`]: layout === "center"
-				}, hashId.value),
+				}, hashId.value, cssVarCls.value),
 				...rest.classes
 			},
 			"styles": {
@@ -157,7 +157,7 @@ const InternalProCard = /* @__PURE__ */ defineComponent((props, { slots, expose,
 					"tooltip": props.tooltip
 				}, null),
 				content: containProCard ? direction !== "column" && split !== "horizontal" ? createVNode(Row, { "gutter": gutter }, _isSlot(childrenDom) ? childrenDom : { default: () => [childrenDom] }) : createVNode("div", {
-					"class": classNames(`${baseClassName.value}-col`, hashId.value, {}),
+					"class": classNames(`${baseClassName.value}-col`, hashId.value, cssVarCls.value, {}),
 					"style": {
 						...getStyle(horizontalGutter > 0, {
 							marginInlineEnd: `-${horizontalGutter / 2}px`,
@@ -174,7 +174,7 @@ const InternalProCard = /* @__PURE__ */ defineComponent((props, { slots, expose,
 		}), null);
 		const cardDom = createVNode(Card, mergeProps(attrs, rest, {
 			"type": containProCard ? void 0 : type,
-			"class": classNames(baseClassName.value, attrs.class, hashId.value, {
+			"class": classNames(baseClassName.value, attrs.class, hashId.value, cssVarCls.value, {
 				[`${baseClassName.value}-ghost`]: ghost,
 				[`${baseClassName.value}-split`]: split,
 				[`${baseClassName.value}-disabled`]: disabled,
@@ -187,7 +187,7 @@ const InternalProCard = /* @__PURE__ */ defineComponent((props, { slots, expose,
 				body: classNames(`${baseClassName.value}-body`, {
 					[`${baseClassName.value}-body-direction-column`]: direction === "column",
 					[`${baseClassName.value}-body-layout-center`]: layout === "center"
-				}, hashId.value),
+				}, hashId.value, cssVarCls.value),
 				...rest.classes
 			}
 		}, title && !tooltip && !slotTitle ? { title } : {}, { "styles": {
@@ -205,14 +205,14 @@ const InternalProCard = /* @__PURE__ */ defineComponent((props, { slots, expose,
 			},
 			...rest.styles
 		} }), {
-			default: () => [containProCard ? direction !== "column" && split !== "horizontal" ? createVNode(Row, { "gutter": gutter }, _isSlot(childrenDom) ? childrenDom : { default: () => [childrenDom] }) : createVNode("div", { "class": classNames(`${baseClassName.value}-row`, hashId.value) }, [childrenDom]) : childrenDom],
+			default: () => [containProCard ? direction !== "column" && split !== "horizontal" ? createVNode(Row, { "gutter": gutter }, _isSlot(childrenDom) ? childrenDom : { default: () => [childrenDom] }) : createVNode("div", { "class": classNames(`${baseClassName.value}-row`, hashId.value, cssVarCls.value) }, [childrenDom]) : childrenDom],
 			...restSlots,
 			...slotTitle || tooltip ? { title: () => createVNode(LabelIconTip, {
 				"label": slotTitle?.() || props.title,
 				"tooltip": props.tooltip
 			}, null) } : {}
 		});
-		return wrapSSR(createVNode(Fragment, null, [typeof collapsible !== "boolean" ? hasBorderBeamDom ? createVNode(BorderBeam, typeof borderBeam === "boolean" ? {} : borderBeam, _isSlot(collapseCardDom) ? collapseCardDom : { default: () => [collapseCardDom] }) : collapseCardDom : hasBorderBeamDom ? createVNode(BorderBeam, typeof borderBeam === "boolean" ? {} : borderBeam, _isSlot(cardDom) ? cardDom : { default: () => [cardDom] }) : cardDom]));
+		return createVNode(Fragment, null, [typeof collapsible !== "boolean" ? hasBorderBeamDom ? createVNode(BorderBeam, typeof borderBeam === "boolean" ? {} : borderBeam, _isSlot(collapseCardDom) ? collapseCardDom : { default: () => [collapseCardDom] }) : collapseCardDom : hasBorderBeamDom ? createVNode(BorderBeam, typeof borderBeam === "boolean" ? {} : borderBeam, _isSlot(cardDom) ? cardDom : { default: () => [cardDom] }) : cardDom]);
 	};
 }, {
 	props: {

package/dist/components/CheckCard/CheckCard.js

@@ -1,6 +1,6 @@
 import ProCard from "../../ProCard.js";
 import ProCheckCardGroup, { useCheckCardGroupContextInject } from "./Group.js";
-import { useStyle } from "./style/index.js";
+import style_default from "./style/index.js";
 import { Fragment, computed, createVNode, defineComponent, mergeProps, reactive, ref, toRef } from "vue";
 import { isImg, isNil, isUrl, transformVueNodeType, useEffect, useMountMergeState } from "@antdv-next1/pro-utils";
 import { classNames } from "@v-c/util";
@@ -18,7 +18,7 @@ const ProCheckCard = /* @__PURE__ */ defineComponent((props, { slots, attrs }) =
 	const baseClassName = computed(() => `${prefixCls.value}-checkcard`);
 	const multiple = ref(false);
 	const checkCardGroupProvide = useCheckCardGroupContextInject();
-	const { wrapSSR, hashId } = useStyle(baseClassName);
+	const [hashId, cssVarCls] = style_default(baseClassName);
 	const checkCardProps = reactive({});
 	const [stateChecked, setStateChecked] = useMountMergeState(props.defaultChecked || false, {
 		value: toRef(() => props.checked),
@@ -67,10 +67,10 @@ const ProCheckCard = /* @__PURE__ */ defineComponent((props, { slots, attrs }) =
 			"shape": "square",
 			"src": avatar
 		}, null) : transformVueNodeType(avatar);
-		const headerDom = isNil(titleDom ?? extraDom) ? null : createVNode(Fragment, null, [titleDom && createVNode("div", { "class": classNames(`${baseClassName.value}-meta-header`, hashId.value) }, [createVNode("div", { "class": classNames(`${baseClassName.value}-meta-title`, `${baseClassName.value}-meta-title-with-ellipsis`, hashId.value) }, [titleDom])]), extraDom && createVNode("div", { "class": classNames(`${baseClassName.value}-meta-title-extra`, hashId.value) }, [extraDom])]);
-		return wrapSSR(createVNode(ProCard, mergeProps({
+		const headerDom = isNil(titleDom ?? extraDom) ? null : createVNode(Fragment, null, [titleDom && createVNode("div", { "class": classNames(`${baseClassName.value}-meta-header`, hashId.value, cssVarCls.value) }, [createVNode("div", { "class": classNames(`${baseClassName.value}-meta-title`, `${baseClassName.value}-meta-title-with-ellipsis`, hashId.value, cssVarCls.value) }, [titleDom])]), extraDom && createVNode("div", { "class": classNames(`${baseClassName.value}-meta-title-extra`, hashId.value, cssVarCls.value) }, [extraDom])]);
+		return createVNode(ProCard, mergeProps({
 			"style": attrs.style,
-			"class": classNames(baseClassName.value, attrs.class, hashId.value, {
+			"class": classNames(baseClassName.value, attrs.class, hashId.value, cssVarCls.value, {
 				[`${baseClassName.value}-checked`]: propsChecked,
 				[`${baseClassName.value}-multiple`]: checkCardProps.multiple,
 				[`${baseClassName.value}-disabled`]: disabled,
@@ -92,13 +92,13 @@ const ProCheckCard = /* @__PURE__ */ defineComponent((props, { slots, attrs }) =
 			default: () => createVNode(Fragment, null, [(headerDom || avatarDom || descriptionDom || cardLoading) && createVNode(CardMeta, {
 				"title": headerDom,
 				"description": descriptionDom,
-				"class": classNames(`${baseClassName.value}-meta`, hashId.value, {
+				"class": classNames(`${baseClassName.value}-meta`, hashId.value, cssVarCls.value, {
 					[`${baseClassName.value}-meta-avatar-header`]: avatarDom && headerDom && !descriptionDom,
 					[`${baseClassName.value}-meta-extra-header`]: !isNil(extraDom)
 				}),
 				"avatar": avatarDom
-			}, null), slots.default?.() && createVNode("div", { "class": classNames(`${baseClassName.value}-body`, hashId.value) }, [slots.default?.()])])
-		}));
+			}, null), slots.default?.() && createVNode("div", { "class": classNames(`${baseClassName.value}-body`, hashId.value, cssVarCls.value) }, [slots.default?.()])])
+		});
 	};
 }, {
 	props: {

package/dist/components/CheckCard/Group.js

@@ -1,5 +1,5 @@
 import ProCard from "../../ProCard.js";
-import { useStyle as useStyle$1 } from "./style/group.js";
+import group_default from "./style/group.js";
 import ProCheckCard from "./CheckCard.js";
 import { computed, createVNode, defineComponent, inject, provide, shallowRef, toRef } from "vue";
 import { childrenToArray, isSpecialNode, useMountMergeState } from "@antdv-next1/pro-utils";
@@ -29,7 +29,7 @@ const InternalCheckCardGroup = /* @__PURE__ */ defineComponent((props, { slots,
 	const prefixCls = computed(() => props.prefixCls || config.value.getPrefixCls("pro"));
 	const baseClassName = computed(() => `${prefixCls.value}-checkcard-group`);
 	const registerValueMap = shallowRef(/* @__PURE__ */ new Map());
-	const { wrapSSR, hashId } = useStyle$1(baseClassName);
+	const [hashId, cssVarCls] = group_default(baseClassName);
 	const [stateValue, setStateValue] = useMountMergeState(props.defaultValue, {
 		value: toRef(() => props.value),
 		onChange: (value) => {
@@ -111,10 +111,10 @@ const InternalCheckCardGroup = /* @__PURE__ */ defineComponent((props, { slots,
 		registerValue,
 		cancelValue
 	})));
-	return () => wrapSSR(createVNode("div", {
-		"class": classNames(baseClassName.value, hashId.value),
+	return () => createVNode("div", {
+		"class": classNames(baseClassName.value, hashId.value, cssVarCls.value),
 		"style": attrs.style
-	}, [children.value]));
+	}, [children.value]);
 }, {
 	props: {
 		prefixCls: {

package/dist/components/CheckCard/style/group.d.ts

@@ -1,13 +1,10 @@
-import { ComputedRef } from "vue";
-import * as _$_antdv_next1_pro_provider0 from "@antdv-next1/pro-provider";
-import { ProAliasToken } from "@antdv-next1/pro-provider";
+import * as _$vue from "vue";
+import { ProAliasCssVarToken } from "@antdv-next1/pro-provider";
 import { Keyframes } from "@antdv-next/cssinjs";
 
 //#region src/components/CheckCard/style/group.d.ts
-interface ProCheckCardGroupToken extends ProAliasToken {
-  componentCls: string;
-}
+interface ProCheckCardGroupToken extends ProAliasCssVarToken {}
 declare const cardLoading: Keyframes;
-declare function useStyle(prefixCls: ComputedRef<string>): _$_antdv_next1_pro_provider0.UseStyleResult;
+declare const _default: (prefixCls: _$vue.Ref<string>, rootCls?: _$vue.Ref<string | undefined>) => readonly [_$vue.Ref<string, string>, _$vue.ComputedRef<string | undefined>];
 //#endregion
-export { ProCheckCardGroupToken, cardLoading, useStyle };
+export { ProCheckCardGroupToken, cardLoading, _default as default };

package/dist/components/CheckCard/style/group.js

@@ -1,5 +1,5 @@
-import { useStyle as useStyle$1 } from "@antdv-next1/pro-provider";
-import { Keyframes } from "@antdv-next/cssinjs";
+import { useStyle } from "@antdv-next1/pro-provider";
+import { Keyframes, mergeToken } from "@antdv-next/cssinjs";
 //#region src/components/CheckCard/style/group.ts
 const cardLoading = new Keyframes("card-loading", {
 	"0%": { backgroundPosition: "0 50%" },
@@ -20,13 +20,8 @@ const genProCheckCardGroupStyle = (token) => {
 		}
 	} };
 };
-function useStyle(prefixCls) {
-	return useStyle$1("ProCheckCardGroup", (token) => {
-		return [genProCheckCardGroupStyle({
-			...token,
-			componentCls: `.${prefixCls.value}`
-		})];
-	});
-}
+var group_default = useStyle("ProCheckCardGroup", (token) => {
+	return [genProCheckCardGroupStyle(mergeToken(token, {}))];
+});
 //#endregion
-export { cardLoading, useStyle };
+export { cardLoading, group_default as default };

package/dist/components/CheckCard/style/index.d.ts

@@ -1,13 +1,10 @@
-import { ComputedRef } from "vue";
-import * as _$_antdv_next1_pro_provider0 from "@antdv-next1/pro-provider";
-import { ProAliasToken } from "@antdv-next1/pro-provider";
+import * as _$vue from "vue";
+import { ProAliasCssVarToken } from "@antdv-next1/pro-provider";
 import { Keyframes } from "@antdv-next/cssinjs";
 
 //#region src/components/CheckCard/style/index.d.ts
-interface ProCheckCardToken extends ProAliasToken {
-  componentCls: string;
-}
+interface ProCheckCardToken extends ProAliasCssVarToken {}
 declare const cardLoading: Keyframes;
-declare function useStyle(prefixCls: ComputedRef<string>): _$_antdv_next1_pro_provider0.UseStyleResult;
+declare const _default: (prefixCls: _$vue.Ref<string>, rootCls?: _$vue.Ref<string | undefined>) => readonly [_$vue.Ref<string, string>, _$vue.ComputedRef<string | undefined>];
 //#endregion
-export { ProCheckCardToken, cardLoading, useStyle };
+export { ProCheckCardToken, cardLoading, _default as default };

package/dist/components/CheckCard/style/index.js

@@ -1,5 +1,5 @@
-import { useStyle as useStyle$1 } from "@antdv-next1/pro-provider";
-import { Keyframes } from "@antdv-next/cssinjs";
+import { useStyle } from "@antdv-next1/pro-provider";
+import { Keyframes, mergeToken } from "@antdv-next/cssinjs";
 //#region src/components/CheckCard/style/index.ts
 function proCheckCardActive(token) {
 	return {
@@ -46,17 +46,17 @@ const genProCheckCardStyle = (token) => {
 			...proCheckCardActive(token),
 			[`${token.antCls}-card-cover`]: { "&:after": {
 				opacity: 1,
-				border: `${token.borderRadius + 4}px solid ${token.colorPrimary}`,
-				borderBlockEnd: `${token.borderRadius + 4}px  solid transparent`,
-				borderInlineStart: `${token.borderRadius + 4}px  solid transparent`,
-				borderStartEndRadius: `${token.borderRadius}px`
+				border: `${token.calc(token.borderRadius).add(4).equal()} ${token.lineType} ${token.colorPrimary}`,
+				borderBlockEnd: `${token.calc(token.borderRadius).add(4).equal()} ${token.lineType} transparent`,
+				borderInlineStart: `${token.calc(token.borderRadius).add(4).equal()} ${token.lineType} transparent`,
+				borderStartEndRadius: token.borderRadius
 			} },
 			[`${token.antCls}-card-body`]: { "&:after": {
 				opacity: 1,
-				border: `${token.borderRadius + 4}px solid ${token.colorPrimary}`,
-				borderBlockEnd: `${token.borderRadius + 4}px  solid transparent`,
-				borderInlineStart: `${token.borderRadius + 4}px  solid transparent`,
-				borderStartEndRadius: `${token.borderRadius}px`
+				border: `${token.calc(token.borderRadius).add(4).equal()} ${token.lineType} ${token.colorPrimary}`,
+				borderBlockEnd: `${token.calc(token.borderRadius).add(4).equal()} ${token.lineType} transparent`,
+				borderInlineStart: `${token.calc(token.borderRadius).add(4).equal()} ${token.lineType} transparent`,
+				borderStartEndRadius: token.borderRadius
 			} }
 		} },
 		[`&${token.antCls}-card`]: {
@@ -80,9 +80,9 @@ const genProCheckCardStyle = (token) => {
 					height: 0,
 					opacity: 0,
 					transition: `all 0.3s ${token.motionEaseInOut}`,
-					borderBlockEnd: `${token.borderRadius + 4}px  solid transparent`,
-					borderInlineStart: `${token.borderRadius + 4}px  solid transparent`,
-					borderStartEndRadius: `${token.borderRadius}px`
+					borderBlockEnd: `${token.calc(token.borderRadius).add(4).equal()} ${token.lineType} transparent`,
+					borderInlineStart: `${token.calc(token.borderRadius).add(4).equal()} ${token.lineType} transparent`,
+					borderStartEndRadius: token.borderRadius
 				}
 			},
 			[`${token.antCls}-card-body`]: {
@@ -143,9 +143,9 @@ const genProCheckCardStyle = (token) => {
 					height: 0,
 					opacity: 0,
 					transition: `all 0.3s ${token.motionEaseInOut}`,
-					borderBlockEnd: `${token.borderRadius + 4}px  solid transparent`,
-					borderInlineStart: `${token.borderRadius + 4}px  solid transparent`,
-					borderStartEndRadius: `${token.borderRadius}px`
+					borderBlockEnd: `${token.calc(token.borderRadius).add(4).equal()} ${token.lineType} transparent`,
+					borderInlineStart: `${token.calc(token.borderRadius).add(4).equal()} ${token.lineType} transparent`,
+					borderStartEndRadius: token.borderRadius
 				}
 			}
 		},
@@ -158,21 +158,16 @@ const genProCheckCardStyle = (token) => {
 			insetInlineEnd: 2,
 			width: 0,
 			height: 0,
-			border: `${token.borderRadius + 4}px solid ${token.colorTextDisabled}`,
-			borderBlockEnd: `${token.borderRadius + 4}px  solid transparent`,
-			borderInlineStart: `${token.borderRadius + 4}px  solid transparent`,
-			borderStartEndRadius: `${token.borderRadius}px`
+			border: `${token.calc(token.borderRadius).add(4).equal()} ${token.lineType} ${token.colorTextDisabled}`,
+			borderBlockEnd: `${token.calc(token.borderRadius).add(4).equal()} ${token.lineType} transparent`,
+			borderInlineStart: `${token.calc(token.borderRadius).add(4).equal()} ${token.lineType} transparent`,
+			borderStartEndRadius: token.borderRadius
 		} } },
 		[`&&:not(${token.componentCls}-disabled)`]: { "&:hover": { borderColor: token.colorPrimary } }
 	} };
 };
-function useStyle(prefixCls) {
-	return useStyle$1("ProCheckCard", (token) => {
-		return [genProCheckCardStyle({
-			...token,
-			componentCls: `.${prefixCls.value}`
-		})];
-	});
-}
+var style_default = useStyle("ProCheckCard", (token) => {
+	return [genProCheckCardStyle(mergeToken(token, {}))];
+});
 //#endregion
-export { cardLoading, useStyle };
+export { cardLoading, style_default as default };

package/dist/components/Statistic/index.js

@@ -1,4 +1,4 @@
-import { useStyle } from "./style/index.js";
+import style_default from "./style/index.js";
 import { Fragment, computed, createVNode, defineComponent, mergeProps } from "vue";
 import { classNames } from "@v-c/util";
 import { Badge, Statistic as Statistic$1, Tooltip } from "antdv-next";
@@ -9,25 +9,25 @@ const Statistic = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 	const config = useConfig();
 	const prefixCls = computed(() => props.prefixCls || config.value.getPrefixCls("pro"));
 	const baseClassName = computed(() => `${prefixCls.value}-card-statistic`);
-	const { wrapSSR, hashId } = useStyle(baseClassName);
+	const [hashId, cssVarCls] = style_default(baseClassName);
 	return () => {
 		const { layout = "inline", description, title, tooltip, status, trend, prefix, icon, ...rest } = props;
-		const tooltipDom = tooltip && createVNode(Tooltip, { "title": tooltip }, { default: () => [createVNode(QuestionCircleOutlined, { "class": classNames(`${baseClassName.value}-tip`, hashId.value) }, null)] });
-		const trendDom = trend && createVNode("div", { "class": classNames(`${baseClassName.value}-trend-icon`, hashId.value, { [`${baseClassName.value}-trend-icon-${trend}`]: trend }) }, null);
-		return wrapSSR(createVNode("div", {
-			"class": classNames(baseClassName.value, attrs.class, hashId.value),
+		const tooltipDom = tooltip && createVNode(Tooltip, { "title": tooltip }, { default: () => [createVNode(QuestionCircleOutlined, { "class": classNames(`${baseClassName.value}-tip`, hashId.value, cssVarCls.value) }, null)] });
+		const trendDom = trend && createVNode("div", { "class": classNames(`${baseClassName.value}-trend-icon`, hashId.value, cssVarCls.value, { [`${baseClassName.value}-trend-icon-${trend}`]: trend }) }, null);
+		return createVNode("div", {
+			"class": classNames(baseClassName.value, attrs.class, hashId.value, cssVarCls.value),
 			"style": attrs.style
-		}, [icon && createVNode("div", { "class": classNames(`${baseClassName.value}-icon`, hashId.value) }, [icon]), createVNode("div", { "class": classNames(`${baseClassName.value}-wrapper`, hashId.value) }, [status && createVNode("div", { "class": classNames(`${baseClassName.value}-status`, hashId.value) }, [createVNode(Badge, {
+		}, [icon && createVNode("div", { "class": classNames(`${baseClassName.value}-icon`, hashId.value, cssVarCls.value) }, [icon]), createVNode("div", { "class": classNames(`${baseClassName.value}-wrapper`, hashId.value, cssVarCls.value) }, [status && createVNode("div", { "class": classNames(`${baseClassName.value}-status`, hashId.value, cssVarCls.value) }, [createVNode(Badge, {
 			"status": status,
 			"text": null
-		}, null)]), createVNode("div", { "class": classNames(`${baseClassName.value}-content`, hashId.value) }, [createVNode(Statistic$1, mergeProps({
+		}, null)]), createVNode("div", { "class": classNames(`${baseClassName.value}-content`, hashId.value, cssVarCls.value) }, [createVNode(Statistic$1, mergeProps({
 			"title": (title || tooltipDom) && createVNode(Fragment, null, [title, tooltipDom]),
 			"prefix": (trendDom || prefix) && createVNode(Fragment, null, [trendDom, prefix]),
-			"class": classNames(hashId.value, {
+			"class": classNames(hashId.value, cssVarCls.value, {
 				[`${baseClassName.value}-layout-${layout}`]: layout,
 				[`${baseClassName.value}-trend-${trend}`]: trend
 			})
-		}, rest), null), description && createVNode("div", { "class": classNames(`${baseClassName.value}-description`, hashId.value) }, [description])])])]));
+		}, rest), null), description && createVNode("div", { "class": classNames(`${baseClassName.value}-description`, hashId.value, cssVarCls.value) }, [description])])])]);
 	};
 }, {
 	props: {

package/dist/components/Statistic/style/index.d.ts

@@ -1,11 +1,8 @@
-import { ComputedRef } from "vue";
-import * as _$_antdv_next1_pro_provider0 from "@antdv-next1/pro-provider";
-import { ProAliasToken } from "@antdv-next1/pro-provider";
+import * as _$vue from "vue";
+import { ProAliasCssVarToken } from "@antdv-next1/pro-provider";
 
 //#region src/components/Statistic/style/index.d.ts
-interface ProListToken extends ProAliasToken {
-  componentCls: string;
-}
-declare function useStyle(prefixCls: ComputedRef<string>): _$_antdv_next1_pro_provider0.UseStyleResult;
+interface ProStatisticToken extends ProAliasCssVarToken {}
+declare const _default: (prefixCls: _$vue.Ref<string>, rootCls?: _$vue.Ref<string | undefined>) => readonly [_$vue.Ref<string, string>, _$vue.ComputedRef<string | undefined>];
 //#endregion
-export { ProListToken, useStyle };
+export { ProStatisticToken, _default as default };

package/dist/components/Statistic/style/index.js

@@ -1,6 +1,7 @@
-import { useStyle as useStyle$1 } from "@antdv-next1/pro-provider";
+import { useStyle } from "@antdv-next1/pro-provider";
+import { mergeToken } from "@antdv-next/cssinjs";
 //#region src/components/Statistic/style/index.ts
-const genProStyle = (token) => {
+const genProStatisticStyle = (token) => {
 	return { [token.componentCls]: {
 		boxSizing: "border-box",
 		display: "flex",
@@ -52,13 +53,8 @@ const genProStyle = (token) => {
 		}
 	} };
 };
-function useStyle(prefixCls) {
-	return useStyle$1("Statistic", (token) => {
-		return [genProStyle({
-			...token,
-			componentCls: `.${prefixCls.value}`
-		})];
-	});
-}
+var style_default = useStyle("Statistic", (token) => {
+	return [genProStatisticStyle(mergeToken(token, {}))];
+});
 //#endregion
-export { useStyle };
+export { style_default as default };

package/dist/components/StatisticCard/index.js

@@ -1,6 +1,6 @@
 import ProCard from "../../ProCard.js";
 import Statistic from "../Statistic/index.js";
-import { useStyle } from "./style/index.js";
+import style_default from "./style/index.js";
 import { Fragment, computed, createVNode, defineComponent, mergeProps } from "vue";
 import { classNames } from "@v-c/util";
 import { useConfig } from "antdv-next/dist/config-provider/context";
@@ -9,24 +9,24 @@ const StatisticCard = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 	const config = useConfig();
 	const prefixCls = computed(() => props.prefixCls || config.value.getPrefixCls("pro"));
 	const baseClassName = computed(() => `${prefixCls.value}-statistic-card`);
-	const { wrapSSR, hashId } = useStyle(baseClassName);
+	const [hashId, cssVarCls] = style_default(baseClassName);
 	return () => {
 		const { statistic, chart, chartPlacement, footer, ...restProps } = props;
 		const statisticDom = statistic && createVNode(Statistic, mergeProps({ "layout": "vertical" }, statistic), null);
-		const chartDom = chart && createVNode("div", { "class": classNames(`${baseClassName.value}-chart`, hashId.value, {
+		const chartDom = chart && createVNode("div", { "class": classNames(`${baseClassName.value}-chart`, hashId.value, cssVarCls.value, {
 			[`${baseClassName.value}-chart-left`]: chartPlacement === "left" && chart && statistic,
 			[`${baseClassName.value}-chart-right`]: chartPlacement === "right" && chart && statistic
 		}) }, [chart]);
-		const contentCls = classNames(`${baseClassName.value}-content `, hashId.value, { [`${baseClassName.value}-content-horizontal`]: chartPlacement === "left" || chartPlacement === "right" });
+		const contentCls = classNames(`${baseClassName.value}-content `, hashId.value, cssVarCls.value, { [`${baseClassName.value}-content-horizontal`]: chartPlacement === "left" || chartPlacement === "right" });
 		const contentDom = (chartDom || statisticDom) && (chartPlacement === "left" ? createVNode("div", { "class": contentCls }, [chartDom, statisticDom]) : createVNode("div", { "class": contentCls }, [statisticDom, chartDom]));
-		return wrapSSR(createVNode(Fragment, null, [createVNode(ProCard, mergeProps({
+		return createVNode(Fragment, null, [createVNode(ProCard, mergeProps({
 			"style": attrs.style,
-			"class": classNames(baseClassName.value, attrs.class, hashId.value)
+			"class": classNames(baseClassName.value, attrs.class, hashId.value, cssVarCls.value)
 		}, restProps), { default: () => [
 			contentDom,
 			slots.default?.(),
-			footer && createVNode("div", { "class": classNames(`${baseClassName.value}-footer`, hashId.value) }, [footer])
-		] })]));
+			footer && createVNode("div", { "class": classNames(`${baseClassName.value}-footer`, hashId.value, cssVarCls.value) }, [footer])
+		] })]);
 	};
 }, {
 	props: {

package/dist/components/StatisticCard/style/index.d.ts

@@ -1,11 +1,8 @@
-import { ComputedRef } from "vue";
-import * as _$_antdv_next1_pro_provider0 from "@antdv-next1/pro-provider";
-import { ProAliasToken } from "@antdv-next1/pro-provider";
+import * as _$vue from "vue";
+import { ProAliasCssVarToken } from "@antdv-next1/pro-provider";
 
 //#region src/components/StatisticCard/style/index.d.ts
-interface ProListToken extends ProAliasToken {
-  componentCls: string;
-}
-declare function useStyle(prefixCls: ComputedRef<string>): _$_antdv_next1_pro_provider0.UseStyleResult;
+interface ProStatisticCardToken extends ProAliasCssVarToken {}
+declare const _default: (prefixCls: _$vue.Ref<string>, rootCls?: _$vue.Ref<string | undefined>) => readonly [_$vue.Ref<string, string>, _$vue.ComputedRef<string | undefined>];
 //#endregion
-export { ProListToken, useStyle };
+export { ProStatisticCardToken, _default as default };

package/dist/components/StatisticCard/style/index.js

@@ -1,4 +1,5 @@
-import { useStyle as useStyle$1 } from "@antdv-next1/pro-provider";
+import { useStyle } from "@antdv-next1/pro-provider";
+import { mergeToken, unit } from "@antdv-next/cssinjs";
 //#region src/components/StatisticCard/style/index.ts
 const genProStyle = (token) => {
 	return { [token.componentCls]: {
@@ -31,17 +32,12 @@ const genProStyle = (token) => {
 		"&-footer": {
 			marginBlockStart: 8,
 			paddingBlockStart: 8,
-			borderBlockStart: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`
+			borderBlockStart: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`
 		}
 	} };
 };
-function useStyle(prefixCls) {
-	return useStyle$1("StatisticCard", (token) => {
-		return [genProStyle({
-			...token,
-			componentCls: `.${prefixCls.value}`
-		})];
-	});
-}
+var style_default = useStyle("StatisticCard", (token) => {
+	return [genProStyle(mergeToken(token, {}))];
+});
 //#endregion
-export { useStyle };
+export { style_default as default };