antdv-next 1.0.0-beta.3 → 1.0.0-rc.1

package/dist/modal/style/index.mjs

@@ -1,4 +1,4 @@
-import { genFocusStyle, resetComponent } from "../../style/index.mjs";
+import { genFocusOutline, genFocusStyle, resetComponent } from "../../style/index.mjs";
 import { genStyleHooks } from "../../theme/util/genStyleUtils.mjs";
 import { mergeToken } from "../../theme/internal.mjs";
 import { initFadeMotion } from "../../style/motion/fade.mjs";
@@ -74,13 +74,16 @@ const genModalStyle = (token) => {
 		} },
 		{ [componentCls]: {
 			...resetComponent(token),
-			pointerEvents: "none",
-			position: "relative",
-			top: 100,
-			width: "auto",
-			maxWidth: `calc(100vw - ${unit(token.calc(token.margin).mul(2).equal())})`,
-			margin: "0 auto",
-			paddingBottom: token.paddingLG,
+			"pointerEvents": "none",
+			"position": "relative",
+			"top": 100,
+			"width": "auto",
+			"maxWidth": `calc(100vw - ${unit(token.calc(token.margin).mul(2).equal())})`,
+			"margin": "0 auto",
+			"&:focus-visible": {
+				borderRadius: token.borderRadiusLG,
+				...genFocusOutline(token)
+			},
 			[`${componentCls}-title`]: {
 				margin: 0,
 				color: token.titleColor,

package/dist/notification/PurePanel.d.mts

@@ -1,12 +1,12 @@
 import { VueNode } from "../_util/type.mjs";
-import { SemanticClassNames, SemanticClassNamesType, SemanticStyles, SemanticStylesType } from "../_util/hooks/useMergeSemantic.mjs";
+import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.mjs";
 import "../_util/hooks/index.mjs";
-import { IconType, NotificationSemantic } from "./interface.mjs";
-import * as vue392 from "vue";
+import { IconType, NotificationSemanticClassNames, NotificationSemanticStyles } from "./interface.mjs";
+import * as vue346 from "vue";
 
 //#region src/notification/PurePanel.d.ts
-type PurePanelClassNamesType = SemanticClassNamesType<PurePanelProps, NotificationSemantic>;
-type PurePanelStylesType = SemanticStylesType<PurePanelProps, NotificationSemantic>;
+type PurePanelClassNamesType = SemanticClassNamesType<PurePanelProps, NotificationSemanticClassNames>;
+type PurePanelStylesType = SemanticStylesType<PurePanelProps, NotificationSemanticStyles>;
 interface PureContentProps {
   prefixCls: string;
   icon?: VueNode;
@@ -15,8 +15,8 @@ interface PureContentProps {
   actions?: VueNode;
   type?: IconType;
   role?: 'alert' | 'status';
-  classes: SemanticClassNames<NotificationSemantic>;
-  styles: SemanticStyles<NotificationSemantic>;
+  classes: NotificationSemanticClassNames;
+  styles: NotificationSemanticStyles;
 }
 interface PurePanelProps extends Omit<PureContentProps, 'prefixCls' | 'children' | 'classes' | 'styles'> {
   content?: VueNode;
@@ -36,6 +36,6 @@ interface PurePanelProps extends Omit<PureContentProps, 'prefixCls' | 'children'
   onClick?: (event: Event) => void;
 }
 /** @private Internal Component. Do not use in your production. */
-declare const PurePanel: vue392.DefineSetupFnComponent<PurePanelProps, {}, {}, PurePanelProps & {}, vue392.PublicProps>;
+declare const PurePanel: vue346.DefineSetupFnComponent<PurePanelProps, {}, {}, PurePanelProps & {}, vue346.PublicProps>;
 //#endregion
 export { PurePanel };

package/dist/notification/index.mjs

@@ -83,8 +83,8 @@ const GlobalHolderWrapper = /* @__PURE__ */ defineComponent((props) => {
 			});
 		}
 	}, { immediate: true });
+	const global = globalConfig();
 	return () => {
-		const global = globalConfig();
 		const holderNode = createVNode(GlobalHolder, {
 			"ref": holderRef,
 			"sync": sync,
@@ -94,7 +94,7 @@ const GlobalHolderWrapper = /* @__PURE__ */ defineComponent((props) => {
 		return createVNode(config_provider_default, {
 			"prefixCls": global.getRootPrefixCls(),
 			"iconPrefixCls": global.getIconPrefixCls(),
-			"theme": global.getTheme()
+			"theme": global.theme.value
 		}, _isSlot(dom) ? dom : { default: () => [dom] });
 	};
 }, { props: { onReady: {

package/dist/notification/interface.d.mts

@@ -12,11 +12,24 @@ interface DivProps extends HTMLAttributes {
 declare const NotificationPlacements: readonly ["top", "topLeft", "topRight", "bottom", "bottomLeft", "bottomRight"];
 type NotificationPlacement = (typeof NotificationPlacements)[number];
 type IconType = 'success' | 'info' | 'error' | 'warning';
-type NotificationSemantic = 'root' | 'title' | 'description' | 'actions' | 'icon';
-type NotificationClassNamesType = SemanticClassNamesType<ArgsProps, NotificationSemantic>;
-type NotificationStylesType = SemanticStylesType<ArgsProps, NotificationSemantic>;
+interface NotificationSemanticClassNames {
+  root?: string;
+  title?: string;
+  description?: string;
+  actions?: string;
+  icon?: string;
+}
+interface NotificationSemanticStyles {
+  root?: CSSProperties;
+  title?: CSSProperties;
+  description?: CSSProperties;
+  actions?: CSSProperties;
+  icon?: CSSProperties;
+}
+type NotificationClassNamesType = SemanticClassNamesType<ArgsProps, NotificationSemanticClassNames>;
+type NotificationStylesType = SemanticStylesType<ArgsProps, NotificationSemanticStyles>;
 interface ArgsProps {
-  title: VueNode;
+  title?: VueNode;
   description?: VueNode;
   actions?: VueNode;
   key?: Key;
@@ -82,4 +95,4 @@ interface GlobalConfigProps {
   props?: DivProps;
 }
 //#endregion
-export { ArgsProps, GlobalConfigProps, IconType, NotificationConfig, NotificationInstance, NotificationSemantic };
+export { ArgsProps, GlobalConfigProps, IconType, NotificationConfig, NotificationInstance, NotificationSemanticClassNames, NotificationSemanticStyles };

package/dist/notification/style/index.mjs

@@ -26,10 +26,10 @@ function genNoticeStyle(token) {
 			"wordWrap": "break-word",
 			"borderRadius": borderRadiusLG,
 			"overflow": "hidden",
-			"&-success": { background: colorSuccessBg },
-			"&-error": { background: colorErrorBg },
-			"&-info": { background: colorInfoBg },
-			"&-warning": { background: colorWarningBg }
+			"&-success": colorSuccessBg ? { background: colorSuccessBg } : {},
+			"&-error": colorErrorBg ? { background: colorErrorBg } : {},
+			"&-info": colorInfoBg ? { background: colorInfoBg } : {},
+			"&-warning": colorWarningBg ? { background: colorWarningBg } : {}
 		},
 		[`${noticeCls}-title`]: {
 			marginBottom: token.marginXS,
@@ -170,10 +170,10 @@ function prepareComponentToken(token) {
 		zIndexPopup: token.zIndexPopupBase + CONTAINER_MAX_OFFSET + 50,
 		width: 384,
 		progressBg: `linear-gradient(90deg, ${token.colorPrimaryBorderHover}, ${token.colorPrimary})`,
-		colorSuccessBg: token.colorSuccessBg,
-		colorErrorBg: token.colorErrorBg,
-		colorInfoBg: token.colorInfoBg,
-		colorWarningBg: token.colorWarningBg
+		colorSuccessBg: void 0,
+		colorErrorBg: void 0,
+		colorInfoBg: void 0,
+		colorWarningBg: void 0
 	};
 }
 const prepareNotificationToken = (token) => {

package/dist/notification/useNotification.d.mts

@@ -1,9 +1,8 @@
 import { NotificationConfig, NotificationInstance } from "./interface.mjs";
 import { MaybeRef } from "@v-c/util/dist/type";
-import * as vue_jsx_runtime13 from "vue/jsx-runtime";
+import * as vue_jsx_runtime4 from "vue/jsx-runtime";
 
 //#region src/notification/useNotification.d.ts
-
-declare function useNotification(notificationConfig?: MaybeRef<NotificationConfig>): readonly [NotificationInstance, () => vue_jsx_runtime13.JSX.Element];
+declare function useNotification(notificationConfig?: MaybeRef<NotificationConfig>): readonly [NotificationInstance, () => vue_jsx_runtime4.JSX.Element];
 //#endregion
 export { useNotification };

package/dist/package.d.mts

@@ -84,6 +84,9 @@ declare const _exports: {
     "build:web-types": string;
     "build:llm": string;
     "build:llm-semantic": string;
+    "build:token-meta": string;
+    "build:token-statistic": string;
+    "build:token": string;
     "build:style": string;
     prepublish: string;
     bump: string;
@@ -142,6 +145,7 @@ declare const _exports: {
   browserslist: string[];
   devDependencies: {
     "@types/throttle-debounce": string;
+    csstype: string;
   };
 };
 declare let _version2: typeof _exports["version"];

package/dist/package.mjs

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "1.0.0-beta.3";
+var version = "1.0.0-rc.1";
 
 //#endregion
 export { version };

package/dist/pagination/Pagination.d.mts

@@ -1,10 +1,10 @@
 import { PaginationEmits, PaginationProps, PaginationSlots } from "./interface.mjs";
-import * as vue370 from "vue";
+import * as vue366 from "vue";
 import { SlotsType } from "vue";
 
 //#region src/pagination/Pagination.d.ts
-declare const Pagination: vue370.DefineSetupFnComponent<PaginationProps, PaginationEmits, SlotsType<PaginationSlots>, PaginationProps & {
+declare const Pagination: vue366.DefineSetupFnComponent<PaginationProps, PaginationEmits, SlotsType<PaginationSlots>, PaginationProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue370.PublicProps>;
+}, vue366.PublicProps>;
 //#endregion
 export { Pagination };

package/dist/pagination/Pagination.mjs

@@ -5,7 +5,6 @@ import { useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeS
 import { devUseWarning, isDev } from "../_util/warning.mjs";
 import "../_util/hooks/index.mjs";
 import { getSlotPropsFnRun, toPropsRefs } from "../_util/tools.mjs";
-import useCSSVarCls_default from "../config-provider/hooks/useCSSVarCls.mjs";
 import { useSize } from "../config-provider/hooks/useSize.mjs";
 import useLocale_default from "../locale/useLocale.mjs";
 import select_default from "../select/index.mjs";
@@ -35,8 +34,7 @@ const omitKeys = [
 const Pagination$1 = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit }) => {
 	const { getPrefixCls, prefixCls, direction, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles, showSizeChanger: contextShowSizeChangerConfig } = useComponentBaseConfig("pagination", props, ["showSizeChanger"]);
 	const { size, responsive, classes, styles, showSizeChanger } = toPropsRefs(props, "size", "responsive", "classes", "styles", "showSizeChanger");
-	const rootCls = useCSSVarCls_default(prefixCls);
-	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, prefixCls);
 	const [, token] = useToken();
 	const mergedSize = useSize(size);
 	const screens = useBreakpoint_default(responsive);
@@ -79,7 +77,7 @@ const Pagination$1 = /* @__PURE__ */ defineComponent((props, { slots, attrs, emi
 				onSizeChange?.(nextSize);
 				propSelectOnChange?.(nextSize, option);
 			},
-			"size": isSmall.value ? "small" : "middle",
+			"size": mergedSize.value,
 			"class": clsx(sizeChangerClassName, propSelectClass)
 		}), null);
 	};
@@ -126,16 +124,19 @@ const Pagination$1 = /* @__PURE__ */ defineComponent((props, { slots, attrs, emi
 		if (props.current !== page) emit("update:current", page);
 		else if (props.pageSize !== pageSize) emit("update:pageSize", pageSize);
 	};
-	const handleShowSizeChange = (current, size$1) => {
-		emit("showSizeChange", current, size$1);
+	const handleShowSizeChange = (current, size) => {
+		emit("showSizeChange", current, size);
 	};
 	return () => {
+		const { rootClass, align } = props;
 		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
-		const mergedClassName = clsx(contextClassName.value, props.rootClass, mergedClassNames.value?.root, hashId.value, cssVarCls.value, rootCls.value, {
+		const extendedClassName = clsx({
+			[`${prefixCls.value}-${align}`]: !!align,
+			[`${prefixCls.value}-${mergedSize.value}`]: mergedSize.value,
 			[`${prefixCls.value}-mini`]: isSmall.value,
 			[`${prefixCls.value}-rtl`]: direction.value === "rtl",
 			[`${prefixCls.value}-bordered`]: token.value.wireframe
-		}, className);
+		}, contextClassName.value, className, rootClass, mergedClassNames.value.root, hashId.value, cssVarCls.value);
 		const mergedStyle = {
 			...mergedStyles.value?.root,
 			...contextStyle.value,
@@ -145,7 +146,7 @@ const Pagination$1 = /* @__PURE__ */ defineComponent((props, { slots, attrs, emi
 		return createVNode(Fragment, null, [token.value.wireframe && createVNode(bordered_default, { "prefixCls": prefixCls.value }, null), createVNode(VcPagination, mergeProps(restProps, restAttrs, {
 			"prefixCls": prefixCls.value,
 			"selectPrefixCls": selectPrefixCls.value,
-			"class": mergedClassName,
+			"class": extendedClassName,
 			"style": mergedStyle,
 			"classNames": mergedClassNames.value,
 			"styles": mergedStyles.value,
@@ -177,7 +178,7 @@ const Pagination$1 = /* @__PURE__ */ defineComponent((props, { slots, attrs, emi
 			default: void 0
 		},
 		size: {
-			type: String,
+			type: [String, null],
 			required: false,
 			default: void 0
 		},

package/dist/pagination/interface.d.mts

@@ -1,7 +1,9 @@
+import { SizeType } from "../config-provider/SizeContext.mjs";
 import { VueNode } from "../_util/type.mjs";
 import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.mjs";
 import "../_util/hooks/index.mjs";
 import { SelectProps } from "../select/index.mjs";
+import { CSSProperties } from "vue";
 import { PaginationProps } from "@v-c/pagination";
 
 //#region src/pagination/interface.d.ts
@@ -18,14 +20,21 @@ interface PaginationLocale {
   next_3?: string;
   page_size?: string;
 }
-type PaginationSemanticName = 'root' | 'item';
-type PaginationClassNamesType = SemanticClassNamesType<PaginationProps$1, PaginationSemanticName>;
-type PaginationStylesType = SemanticStylesType<PaginationProps$1, PaginationSemanticName>;
+interface PaginationSemanticClassNames {
+  root?: string;
+  item?: string;
+}
+interface PaginationSemanticStyles {
+  root?: CSSProperties;
+  item?: CSSProperties;
+}
+type PaginationClassNamesType = SemanticClassNamesType<PaginationProps$1, PaginationSemanticClassNames>;
+type PaginationStylesType = SemanticStylesType<PaginationProps$1, PaginationSemanticStyles>;
 interface PaginationProps$1 extends Omit<PaginationProps, 'className' | 'style' | 'classNames' | 'styles' | 'locale' | 'showSizeChanger' | 'pageSizeOptions' | 'prevIcon' | 'nextIcon' | 'jumpPrevIcon' | 'jumpNextIcon' | 'onChange' | 'onShowSizeChange'> {
   showQuickJumper?: boolean | {
     goButton?: VueNode;
   };
-  size?: 'default' | 'small';
+  size?: SizeType;
   responsive?: boolean;
   totalBoundaryShowSizeChanger?: number;
   rootClass?: string;
@@ -68,4 +77,4 @@ interface PaginationSlots {
   jumpNextIcon?: () => any;
 }
 //#endregion
-export { PaginationClassNamesType, PaginationConfig, PaginationEmits, PaginationLocale, PaginationPosition, PaginationProps$1 as PaginationProps, PaginationSemanticName, PaginationSlots, PaginationStylesType };
+export { PaginationClassNamesType, PaginationConfig, PaginationEmits, PaginationLocale, PaginationPosition, PaginationProps$1 as PaginationProps, PaginationSemanticClassNames, PaginationSemanticStyles, PaginationSlots, PaginationStylesType };

package/dist/pagination/style/bordered.mjs

@@ -7,7 +7,7 @@ import { unit } from "@antdv-next/cssinjs";
 const genBorderedStyle = (token) => {
 	const { componentCls } = token;
 	return {
-		[`${componentCls}${componentCls}-bordered${componentCls}-disabled:not(${componentCls}-mini)`]: {
+		[`${componentCls}${componentCls}-bordered${componentCls}-disabled`]: {
 			"&, &:hover": { [`${componentCls}-item-link`]: { borderColor: token.colorBorder } },
 			"&:focus-visible": { [`${componentCls}-item-link`]: { borderColor: token.colorBorder } },
 			[`${componentCls}-item, ${componentCls}-item-link`]: {
@@ -32,7 +32,7 @@ const genBorderedStyle = (token) => {
 				}
 			}
 		},
-		[`${componentCls}${componentCls}-bordered:not(${componentCls}-mini)`]: {
+		[`${componentCls}${componentCls}-bordered`]: {
 			[`${componentCls}-prev, ${componentCls}-next`]: {
 				"&:hover button": {
 					borderColor: token.colorPrimaryHover,

package/dist/pagination/style/index.d.mts

@@ -14,6 +14,16 @@ interface ComponentToken {
    * @descEN Size of Pagination item
    */
   itemSize: number;
+  /**
+   * @desc 小号页码尺寸
+   * @descEN Size of small Pagination item
+   */
+  itemSizeSM: number;
+  /**
+   * @desc 大号页码尺寸
+   * @descEN Size of large Pagination item
+   */
+  itemSizeLG: number;
   /**
    * @desc 页码激活态背景色
    * @descEN Background color of active Pagination item
@@ -29,11 +39,6 @@ interface ComponentToken {
    * @descEN Text color of active Pagination item hover
    */
   itemActiveColorHover: string;
-  /**
-   * @desc 小号页码尺寸
-   * @descEN Size of small Pagination item
-   */
-  itemSizeSM: number;
   /**
    * @desc 页码链接背景色
    * @descEN Background color of Pagination item link

package/dist/pagination/style/index.mjs

@@ -3,7 +3,7 @@ import { genCssVar, genStyleHooks } from "../../theme/util/genStyleUtils.mjs";
 import { mergeToken } from "../../theme/internal.mjs";
 import { initComponentToken, initInputToken } from "../../input/style/token.mjs";
 import { genBaseOutlinedStyle, genDisabledStyle } from "../../input/style/variants.mjs";
-import { genBasicInputStyle, genInputSmallStyle } from "../../input/style/index.mjs";
+import { genBasicInputStyle, genInputLargeStyle, genInputSmallStyle } from "../../input/style/index.mjs";
 import { unit } from "@antdv-next/cssinjs";
 
 //#region src/pagination/style/index.ts
@@ -62,87 +62,45 @@ const genPaginationDisabledStyle = (token) => {
 		}
 	};
 };
-const genPaginationMiniStyle = (token) => {
-	const { componentCls, antCls } = token;
-	const [, varRef] = genCssVar(antCls, "pagination");
-	return {
-		[`&${componentCls}-mini ${componentCls}-total-text, &${componentCls}-mini ${componentCls}-simple-pager`]: {
-			height: varRef("item-size-actual"),
-			lineHeight: varRef("item-size-actual")
-		},
-		[`&${componentCls}-mini ${componentCls}-item`]: {
-			minWidth: varRef("item-size-actual"),
-			height: varRef("item-size-actual"),
-			margin: 0,
-			lineHeight: unit(token.calc(varRef("item-size-actual")).sub(2).equal())
-		},
-		[`&${componentCls}-mini ${componentCls}-prev, &${componentCls}-mini ${componentCls}-next`]: {
-			minWidth: varRef("item-size-actual"),
-			height: varRef("item-size-actual"),
-			margin: 0,
-			lineHeight: varRef("item-size-actual")
-		},
-		[`&${componentCls}-mini:not(${componentCls}-disabled)`]: { [`${componentCls}-prev, ${componentCls}-next`]: {
-			[`&:hover ${componentCls}-item-link`]: { backgroundColor: token.colorBgTextHover },
-			[`&:active ${componentCls}-item-link`]: { backgroundColor: token.colorBgTextActive },
-			[`&${componentCls}-disabled:hover ${componentCls}-item-link`]: { backgroundColor: "transparent" }
-		} },
-		[`
-    &${componentCls}-mini ${componentCls}-prev ${componentCls}-item-link,
-    &${componentCls}-mini ${componentCls}-next ${componentCls}-item-link
-    `]: {
-			"backgroundColor": "transparent",
-			"borderColor": "transparent",
-			"&::after": {
-				height: varRef("item-size-actual"),
-				lineHeight: varRef("item-size-actual")
-			}
-		},
-		[`&${componentCls}-mini ${componentCls}-jump-prev, &${componentCls}-mini ${componentCls}-jump-next`]: {
-			height: varRef("item-size-actual"),
-			marginInlineEnd: 0,
-			lineHeight: varRef("item-size-actual")
-		},
-		[`&${componentCls}-mini ${componentCls}-options`]: {
-			"marginInlineStart": token.paginationMiniOptionsMarginInlineStart,
-			"&-size-changer": { top: token.miniOptionsSizeChangerTop },
-			"&-quick-jumper": {
-				height: varRef("item-size-actual"),
-				lineHeight: varRef("item-size-actual"),
-				input: {
-					...genInputSmallStyle(token),
-					width: token.paginationMiniQuickJumperInputWidth,
-					height: token.controlHeightSM
-				}
-			}
-		}
-	};
+const genPaginationSmallStyle = (token) => {
+	const { componentCls } = token;
+	return { [`&${componentCls}-small ${componentCls}-options`]: {
+		"marginInlineStart": token.paginationMiniOptionsMarginInlineStart,
+		"&-quick-jumper": { input: {
+			...genInputSmallStyle(token),
+			width: token.paginationMiniQuickJumperInputWidth
+		} }
+	} };
+};
+const genPaginationLargeStyle = (token) => {
+	const { componentCls } = token;
+	return { [`&${componentCls}-large ${componentCls}-options`]: { "&-quick-jumper": { input: { ...genInputLargeStyle(token) } } } };
 };
 const genPaginationSimpleStyle = (token) => {
 	const { componentCls, antCls } = token;
 	const [, varRef] = genCssVar(antCls, "pagination");
 	return { [`&${componentCls}-simple`]: {
 		[`${componentCls}-prev, ${componentCls}-next`]: {
-			height: varRef("item-size-actual"),
-			lineHeight: varRef("item-size-actual"),
+			height: varRef(`item-size-actual`),
+			lineHeight: varRef(`item-size-actual`),
 			verticalAlign: "top",
 			[`${componentCls}-item-link`]: {
-				"height": varRef("item-size-actual"),
+				"height": varRef(`item-size-actual`),
 				"backgroundColor": "transparent",
 				"border": 0,
 				"&:hover": { backgroundColor: token.colorBgTextHover },
 				"&:active": { backgroundColor: token.colorBgTextActive },
 				"&::after": {
-					height: varRef("item-size-actual"),
-					lineHeight: varRef("item-size-actual")
+					height: varRef(`item-size-actual`),
+					lineHeight: varRef(`item-size-actual`)
 				}
 			}
 		},
 		[`${componentCls}-simple-pager`]: {
 			display: "inline-flex",
 			alignItems: "center",
-			height: varRef("item-size-actual"),
-			marginInlineEnd: varRef("item-spacing-actual"),
+			height: varRef(`item-size-actual`),
+			marginInlineEnd: varRef(`item-spacing-actual`),
 			input: {
 				"boxSizing": "border-box",
 				"height": "100%",
@@ -169,23 +127,7 @@ const genPaginationSimpleStyle = (token) => {
 			}
 		},
 		[`&${componentCls}-disabled`]: { [`${componentCls}-prev, ${componentCls}-next`]: { [`${componentCls}-item-link`]: { "&:hover, &:active": { backgroundColor: "transparent" } } } },
-		[`&${componentCls}-mini`]: {
-			[`${componentCls}-prev, ${componentCls}-next`]: {
-				height: varRef("item-size-actual"),
-				lineHeight: varRef("item-size-actual"),
-				[`${componentCls}-item-link`]: {
-					"height": varRef("item-size-actual"),
-					"&::after": {
-						height: varRef("item-size-actual"),
-						lineHeight: varRef("item-size-actual")
-					}
-				}
-			},
-			[`${componentCls}-simple-pager`]: {
-				height: varRef("item-size-actual"),
-				input: { width: token.paginationMiniQuickJumperInputWidth }
-			}
-		}
+		[`&${componentCls}-small`]: { [`${componentCls}-simple-pager`]: { input: { width: token.paginationMiniQuickJumperInputWidth } } }
 	} };
 };
 const genPaginationJumpStyle = (token) => {
@@ -234,7 +176,7 @@ const genPaginationJumpStyle = (token) => {
     ${componentCls}-prev,
     ${componentCls}-jump-prev,
     ${componentCls}-jump-next
-    `]: { marginInlineEnd: varRef("item-spacing-actual") },
+    `]: { marginInlineEnd: varRef(`item-spacing-actual`) },
 		[`
     ${componentCls}-prev,
     ${componentCls}-next,
@@ -242,11 +184,11 @@ const genPaginationJumpStyle = (token) => {
     ${componentCls}-jump-next
     `]: {
 			display: "inline-block",
-			minWidth: varRef("item-size-actual"),
-			height: varRef("item-size-actual"),
+			minWidth: varRef(`item-size-actual`),
+			height: varRef(`item-size-actual`),
 			color: token.colorText,
 			fontFamily: token.fontFamily,
-			lineHeight: varRef("item-size-actual"),
+			lineHeight: varRef(`item-size-actual`),
 			textAlign: "center",
 			verticalAlign: "middle",
 			listStyle: "none",
@@ -289,10 +231,10 @@ const genPaginationJumpStyle = (token) => {
 			"&-size-changer": { width: "auto" },
 			"&-quick-jumper": {
 				display: "inline-block",
-				height: varRef("item-size-actual"),
-				marginInlineStart: varRef("item-spacing-actual"),
-				lineHeight: varRef("item-size-actual"),
-				verticalAlign: "top",
+				height: varRef(`item-size-actual`),
+				marginInlineStart: token.marginXS,
+				lineHeight: varRef(`item-size-actual`),
+				verticalAlign: "baseline",
 				input: {
 					...genBasicInputStyle(token),
 					...genBaseOutlinedStyle(token, {
@@ -303,11 +245,11 @@ const genPaginationJumpStyle = (token) => {
 					}),
 					"&[disabled]": { ...genDisabledStyle(token) },
 					"width": token.quickJumperInputWidth,
-					"height": varRef("item-size-actual"),
+					"height": varRef(`item-size-actual`),
 					"boxSizing": "border-box",
 					"margin": 0,
-					"marginInlineStart": varRef("item-spacing-actual"),
-					"marginInlineEnd": varRef("item-spacing-actual")
+					"marginInlineStart": varRef(`item-spacing-actual`),
+					"marginInlineEnd": varRef(`item-spacing-actual`)
 				}
 			}
 		}
@@ -318,9 +260,9 @@ const genPaginationItemStyle = (token) => {
 	const [, varRef] = genCssVar(antCls, "pagination");
 	return { [`${componentCls}-item`]: {
 		"display": "inline-block",
-		"minWidth": varRef("item-size-actual"),
-		"height": varRef("item-size-actual"),
-		"marginInlineEnd": varRef("item-spacing-actual"),
+		"minWidth": varRef(`item-size-actual`),
+		"height": varRef(`item-size-actual`),
+		"marginInlineEnd": varRef(`item-spacing-actual`),
 		"fontFamily": token.fontFamily,
 		"lineHeight": unit(token.calc(varRef("item-size-actual")).sub(2).equal()),
 		"textAlign": "center",
@@ -360,14 +302,19 @@ const genPaginationStyle = (token) => {
 	const [varName, varRef] = genCssVar(antCls, "pagination");
 	return {
 		[componentCls]: {
-			[varName("item-size-actual")]: unit(token.itemSize),
-			[varName("item-spacing-actual")]: unit(token.marginXS),
-			"&-mini": {
-				[varName("item-size-actual")]: unit(token.itemSizeSM),
-				[varName("item-spacing-actual")]: unit(token.marginXXS)
+			[varName(`item-size-actual`)]: unit(token.itemSize),
+			[varName(`item-spacing-actual`)]: unit(token.marginXS),
+			"&-small": {
+				[varName(`item-size-actual`)]: unit(token.itemSizeSM),
+				[varName(`item-spacing-actual`)]: unit(token.marginXXS)
+			},
+			"&-large": {
+				[varName(`item-size-actual`)]: unit(token.itemSizeLG),
+				[varName(`item-spacing-actual`)]: unit(token.marginSM)
 			},
 			...resetComponent(token),
 			"display": "flex",
+			"alignItems": "center",
 			"&-start": { justifyContent: "start" },
 			"&-center": { justifyContent: "center" },
 			"&-end": { justifyContent: "end" },
@@ -386,15 +333,16 @@ const genPaginationStyle = (token) => {
 			},
 			[`${componentCls}-total-text`]: {
 				display: "inline-block",
-				height: varRef("item-size-actual"),
-				marginInlineEnd: varRef("item-spacing-actual"),
-				lineHeight: unit(token.calc(varRef("item-size-actual")).sub(2).equal()),
+				height: varRef(`item-size-actual`),
+				marginInlineEnd: varRef(`item-spacing-actual`),
+				lineHeight: unit(token.calc(varRef(`item-size-actual`)).sub(2).equal()),
 				verticalAlign: "middle"
 			},
 			...genPaginationItemStyle(token),
 			...genPaginationJumpStyle(token),
 			...genPaginationSimpleStyle(token),
-			...genPaginationMiniStyle(token),
+			...genPaginationSmallStyle(token),
+			...genPaginationLargeStyle(token),
 			...genPaginationDisabledStyle(token),
 			[`@media only screen and (max-width: ${token.screenLG}px)`]: { [`${componentCls}-item`]: { "&-after-jump-prev, &-before-jump-next": { display: "none" } } },
 			[`@media only screen and (max-width: ${token.screenSM}px)`]: { [`${componentCls}-options`]: { display: "none" } }
@@ -418,6 +366,7 @@ const prepareComponentToken = (token) => ({
 	itemBg: token.colorBgContainer,
 	itemSize: token.controlHeight,
 	itemSizeSM: token.controlHeightSM,
+	itemSizeLG: token.controlHeightLG,
 	itemActiveBg: token.colorBgContainer,
 	itemActiveColor: token.colorPrimary,
 	itemActiveColorHover: token.colorPrimaryHover,