@zboson/ui 0.0.0-stage → 0.0.2

package/dist/tabs/style/index.js

@@ -0,0 +1,643 @@
+import { genFocusOutline, genFocusStyle, resetComponent, textEllipsis } from "../../style/index.js";
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import { slideDownIn, slideDownOut, slideUpIn, slideUpOut } from "../../style/motion/slide.js";
+import genMotionStyle from "./motion.js";
+import { unit } from "@zboson/cssinjs";
+//#region src/tabs/style/index.ts
+const genCardStyle = (token) => {
+	const { componentCls, tabsCardPadding, cardBg, cardGutter, colorBorderSecondary, itemSelectedColor } = token;
+	return { [`${componentCls}-card`]: {
+		[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
+			[`${componentCls}-tab`]: {
+				margin: 0,
+				padding: tabsCardPadding,
+				background: cardBg,
+				border: `${unit(token.lineWidth)} ${token.lineType} ${colorBorderSecondary}`,
+				transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`
+			},
+			[`${componentCls}-tab-active`]: {
+				color: itemSelectedColor,
+				background: token.colorBgContainer
+			},
+			[`${componentCls}-tab-focus:has(${componentCls}-tab-btn:focus-visible)`]: genFocusOutline(token, -3),
+			[`& ${componentCls}-tab${componentCls}-tab-focus ${componentCls}-tab-btn:focus-visible`]: { outline: "none" },
+			[`${componentCls}-ink-bar`]: { visibility: "hidden" }
+		},
+		[`&${componentCls}-top, &${componentCls}-bottom`]: { [`> ${componentCls}-nav, > div > ${componentCls}-nav`]: { [`${componentCls}-tab + ${componentCls}-tab`]: { marginLeft: {
+			_skip_check_: true,
+			value: unit(cardGutter)
+		} } } },
+		[`&${componentCls}-top`]: { [`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
+			[`${componentCls}-tab`]: { borderRadius: `${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)} 0 0` },
+			[`${componentCls}-tab-active`]: { borderBottomColor: token.colorBgContainer }
+		} },
+		[`&${componentCls}-bottom`]: { [`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
+			[`${componentCls}-tab`]: { borderRadius: `0 0 ${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)}` },
+			[`${componentCls}-tab-active`]: { borderTopColor: token.colorBgContainer }
+		} },
+		[`&${componentCls}-left, &${componentCls}-right`]: { [`> ${componentCls}-nav, > div > ${componentCls}-nav`]: { [`${componentCls}-tab + ${componentCls}-tab`]: { marginTop: unit(cardGutter) } } },
+		[`&${componentCls}-left`]: { [`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
+			[`${componentCls}-tab`]: { borderRadius: {
+				_skip_check_: true,
+				value: `${unit(token.borderRadiusLG)} 0 0 ${unit(token.borderRadiusLG)}`
+			} },
+			[`${componentCls}-tab-active`]: { borderRightColor: {
+				_skip_check_: true,
+				value: token.colorBgContainer
+			} }
+		} },
+		[`&${componentCls}-right`]: { [`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
+			[`${componentCls}-tab`]: { borderRadius: {
+				_skip_check_: true,
+				value: `0 ${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)} 0`
+			} },
+			[`${componentCls}-tab-active`]: { borderLeftColor: {
+				_skip_check_: true,
+				value: token.colorBgContainer
+			} }
+		} }
+	} };
+};
+const genDropdownStyle = (token) => {
+	const { antCls, componentCls, itemHoverColor, dropdownEdgeChildVerticalPadding } = token;
+	return { [`${componentCls}-dropdown`]: {
+		...resetComponent(token),
+		position: "absolute",
+		top: -9999,
+		left: {
+			_skip_check_: true,
+			value: -9999
+		},
+		zIndex: token.zIndexPopup,
+		display: "block",
+		"&-hidden": { display: "none" },
+		[`&${antCls}-slide-down-enter${antCls}-slide-down-enter-active${componentCls}-dropdown-placement-bottomLeft,
+        &${antCls}-slide-down-appear${antCls}-slide-down-appear-active${componentCls}-dropdown-placement-bottomLeft,
+        &${antCls}-slide-down-enter${antCls}-slide-down-enter-active${componentCls}-dropdown-placement-bottom,
+        &${antCls}-slide-down-appear${antCls}-slide-down-appear-active${componentCls}-dropdown-placement-bottom,
+        &${antCls}-slide-down-enter${antCls}-slide-down-enter-active${componentCls}-dropdown-placement-bottomRight,
+        &${antCls}-slide-down-appear${antCls}-slide-down-appear-active${componentCls}-dropdown-placement-bottomRight`]: { animationName: slideUpIn },
+		[`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-topLeft,
+        &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-topLeft,
+        &${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-top,
+        &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-top,
+        &${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-topRight,
+        &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-topRight`]: { animationName: slideDownIn },
+		[`&${antCls}-slide-down-leave${antCls}-slide-down-leave-active${componentCls}-dropdown-placement-bottomLeft,
+        &${antCls}-slide-down-leave${antCls}-slide-down-leave-active${componentCls}-dropdown-placement-bottom,
+        &${antCls}-slide-down-leave${antCls}-slide-down-leave-active${componentCls}-dropdown-placement-bottomRight`]: { animationName: slideUpOut },
+		[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-topLeft,
+        &${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-top,
+        &${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-topRight`]: { animationName: slideDownOut },
+		[`${componentCls}-dropdown-menu`]: {
+			maxHeight: token.tabsDropdownHeight,
+			margin: 0,
+			padding: `${unit(dropdownEdgeChildVerticalPadding)} 0`,
+			overflowX: "hidden",
+			overflowY: "auto",
+			textAlign: {
+				_skip_check_: true,
+				value: "left"
+			},
+			listStyleType: "none",
+			backgroundColor: token.colorBgContainer,
+			backgroundClip: "padding-box",
+			borderRadius: token.borderRadiusLG,
+			outline: "none",
+			boxShadow: token.boxShadowSecondary,
+			"&-item": {
+				...textEllipsis,
+				display: "flex",
+				alignItems: "center",
+				minWidth: token.tabsDropdownWidth,
+				margin: 0,
+				padding: `${unit(token.paddingXXS)} ${unit(token.paddingSM)}`,
+				color: token.colorText,
+				fontWeight: 400,
+				fontSize: token.fontSize,
+				lineHeight: token.lineHeight,
+				cursor: "pointer",
+				transition: `all ${token.motionDurationSlow}`,
+				"> span": {
+					flex: 1,
+					whiteSpace: "nowrap"
+				},
+				"&-remove": {
+					flex: "none",
+					marginLeft: {
+						_skip_check_: true,
+						value: token.marginSM
+					},
+					color: token.colorIcon,
+					fontSize: token.fontSizeSM,
+					background: "transparent",
+					border: 0,
+					cursor: "pointer",
+					"&:hover": { color: itemHoverColor }
+				},
+				"&:hover": { background: token.controlItemBgHover },
+				"&-disabled": { "&, &:hover": {
+					color: token.colorTextDisabled,
+					background: "transparent",
+					cursor: "not-allowed"
+				} }
+			}
+		}
+	} };
+};
+const genPositionStyle = (token) => {
+	const { componentCls, margin, colorBorderSecondary, horizontalMargin, verticalItemPadding, verticalItemMargin, motionDurationSlow, calc } = token;
+	return {
+		[`${componentCls}-top, ${componentCls}-bottom`]: {
+			flexDirection: "column",
+			[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
+				margin: horizontalMargin,
+				"&::before": {
+					position: "absolute",
+					right: {
+						_skip_check_: true,
+						value: 0
+					},
+					left: {
+						_skip_check_: true,
+						value: 0
+					},
+					borderBottom: `${unit(token.lineWidth)} ${token.lineType} ${colorBorderSecondary}`,
+					content: "''"
+				},
+				[`${componentCls}-ink-bar`]: {
+					height: token.lineWidthBold,
+					"&-animated": { transition: [
+						"width",
+						"left",
+						"right"
+					].map((prop) => `${prop} ${motionDurationSlow}`).join(", ") }
+				},
+				[`${componentCls}-nav-wrap`]: {
+					"&::before, &::after": {
+						top: 0,
+						bottom: 0,
+						width: token.controlHeight
+					},
+					"&::before": {
+						left: {
+							_skip_check_: true,
+							value: 0
+						},
+						boxShadow: token.boxShadowTabsOverflowLeft
+					},
+					"&::after": {
+						right: {
+							_skip_check_: true,
+							value: 0
+						},
+						boxShadow: token.boxShadowTabsOverflowRight
+					},
+					[`&${componentCls}-nav-wrap-ping-left::before`]: { opacity: 1 },
+					[`&${componentCls}-nav-wrap-ping-right::after`]: { opacity: 1 }
+				}
+			}
+		},
+		[`${componentCls}-top`]: { [`> ${componentCls}-nav,
+        > div > ${componentCls}-nav`]: {
+			"&::before": { bottom: 0 },
+			[`${componentCls}-ink-bar`]: { bottom: 0 }
+		} },
+		[`${componentCls}-bottom`]: {
+			[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
+				order: 1,
+				marginTop: margin,
+				marginBottom: 0,
+				"&::before": { top: 0 },
+				[`${componentCls}-ink-bar`]: { top: 0 }
+			},
+			[`> ${componentCls}-body-holder, > div > ${componentCls}-body-holder`]: { order: 0 }
+		},
+		[`${componentCls}-left, ${componentCls}-right`]: { [`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
+			flexDirection: "column",
+			minWidth: calc(token.controlHeight).mul(1.25).equal(),
+			[`${componentCls}-tab`]: {
+				padding: verticalItemPadding,
+				textAlign: "center"
+			},
+			[`${componentCls}-tab + ${componentCls}-tab`]: { margin: verticalItemMargin },
+			[`${componentCls}-nav-wrap`]: {
+				flexDirection: "column",
+				"&::before, &::after": {
+					right: {
+						_skip_check_: true,
+						value: 0
+					},
+					left: {
+						_skip_check_: true,
+						value: 0
+					},
+					height: token.controlHeight
+				},
+				"&::before": {
+					top: 0,
+					boxShadow: token.boxShadowTabsOverflowTop
+				},
+				"&::after": {
+					bottom: 0,
+					boxShadow: token.boxShadowTabsOverflowBottom
+				},
+				[`&${componentCls}-nav-wrap-ping-top::before`]: { opacity: 1 },
+				[`&${componentCls}-nav-wrap-ping-bottom::after`]: { opacity: 1 }
+			},
+			[`${componentCls}-ink-bar`]: {
+				width: token.lineWidthBold,
+				"&-animated": { transition: ["height", "top"].map((prop) => `${prop} ${motionDurationSlow}`).join(", ") }
+			},
+			[`${componentCls}-nav-list, ${componentCls}-nav-operations`]: {
+				flex: "1 0 auto",
+				flexDirection: "column"
+			}
+		} },
+		[`${componentCls}-left`]: {
+			[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: { [`${componentCls}-ink-bar`]: { right: {
+				_skip_check_: true,
+				value: 0
+			} } },
+			[`> ${componentCls}-body-holder, > div > ${componentCls}-body-holder`]: {
+				marginLeft: {
+					_skip_check_: true,
+					value: unit(calc(token.lineWidth).mul(-1).equal())
+				},
+				borderLeft: {
+					_skip_check_: true,
+					value: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`
+				},
+				[`> ${componentCls}-body > ${componentCls}-content`]: { paddingLeft: {
+					_skip_check_: true,
+					value: token.paddingLG
+				} }
+			}
+		},
+		[`${componentCls}-right`]: {
+			[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
+				order: 1,
+				[`${componentCls}-ink-bar`]: { left: {
+					_skip_check_: true,
+					value: 0
+				} }
+			},
+			[`> ${componentCls}-body-holder, > div > ${componentCls}-body-holder`]: {
+				order: 0,
+				marginRight: {
+					_skip_check_: true,
+					value: calc(token.lineWidth).mul(-1).equal()
+				},
+				borderRight: {
+					_skip_check_: true,
+					value: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`
+				},
+				[`> ${componentCls}-body > ${componentCls}-content`]: { paddingRight: {
+					_skip_check_: true,
+					value: token.paddingLG
+				} }
+			}
+		}
+	};
+};
+const genSizeStyle = (token) => {
+	const { componentCls, cardPaddingSM, cardPaddingLG, cardHeightSM, cardHeightLG, horizontalItemPaddingSM, horizontalItemPaddingLG } = token;
+	return {
+		[componentCls]: {
+			"&-small": { [`> ${componentCls}-nav`]: { [`${componentCls}-tab`]: {
+				padding: horizontalItemPaddingSM,
+				fontSize: token.titleFontSizeSM
+			} } },
+			"&-large": { [`> ${componentCls}-nav`]: { [`${componentCls}-tab`]: {
+				padding: horizontalItemPaddingLG,
+				fontSize: token.titleFontSizeLG,
+				lineHeight: token.lineHeightLG
+			} } }
+		},
+		[`${componentCls}-card`]: {
+			[`&${componentCls}-small`]: {
+				[`> ${componentCls}-nav`]: {
+					[`${componentCls}-tab`]: { padding: cardPaddingSM },
+					[`${componentCls}-nav-add`]: {
+						minWidth: cardHeightSM,
+						minHeight: cardHeightSM
+					}
+				},
+				[`&${componentCls}-bottom`]: { [`> ${componentCls}-nav ${componentCls}-tab`]: { borderRadius: `0 0 ${unit(token.borderRadius)} ${unit(token.borderRadius)}` } },
+				[`&${componentCls}-top`]: { [`> ${componentCls}-nav ${componentCls}-tab`]: { borderRadius: `${unit(token.borderRadius)} ${unit(token.borderRadius)} 0 0` } },
+				[`&${componentCls}-right`]: { [`> ${componentCls}-nav ${componentCls}-tab`]: { borderRadius: {
+					_skip_check_: true,
+					value: `0 ${unit(token.borderRadius)} ${unit(token.borderRadius)} 0`
+				} } },
+				[`&${componentCls}-left`]: { [`> ${componentCls}-nav ${componentCls}-tab`]: { borderRadius: {
+					_skip_check_: true,
+					value: `${unit(token.borderRadius)} 0 0 ${unit(token.borderRadius)}`
+				} } }
+			},
+			[`&${componentCls}-large`]: { [`> ${componentCls}-nav`]: {
+				[`${componentCls}-tab`]: { padding: cardPaddingLG },
+				[`${componentCls}-nav-add`]: {
+					minWidth: cardHeightLG,
+					minHeight: cardHeightLG
+				}
+			} }
+		}
+	};
+};
+const genTabStyle = (token) => {
+	const { componentCls, itemActiveColor, itemHoverColor, iconCls, tabsHorizontalItemMargin, horizontalItemPadding, itemSelectedColor, itemColor } = token;
+	const tabCls = `${componentCls}-tab`;
+	return {
+		[tabCls]: {
+			position: "relative",
+			WebkitTouchCallout: "none",
+			WebkitTapHighlightColor: "transparent",
+			display: "inline-flex",
+			alignItems: "center",
+			padding: horizontalItemPadding,
+			fontSize: token.titleFontSize,
+			background: "transparent",
+			border: 0,
+			outline: "none",
+			cursor: "pointer",
+			color: itemColor,
+			"&-btn, &-remove": { "&:focus:not(:focus-visible), &:active": { color: itemActiveColor } },
+			"&-btn": {
+				outline: "none",
+				transition: `all ${token.motionDurationSlow}`,
+				[`${tabCls}-icon:not(:last-child)`]: { marginInlineEnd: token.marginSM },
+				[`${tabCls}-icon > svg`]: {
+					display: "inline-block",
+					verticalAlign: "middle",
+					marginBlockEnd: "0.2em"
+				}
+			},
+			"&-remove": {
+				flex: "none",
+				lineHeight: 1,
+				marginRight: {
+					_skip_check_: true,
+					value: token.calc(token.marginXXS).mul(-1).equal()
+				},
+				marginLeft: {
+					_skip_check_: true,
+					value: token.marginXS
+				},
+				color: token.colorIcon,
+				fontSize: token.fontSizeSM,
+				background: "transparent",
+				border: "none",
+				outline: "none",
+				cursor: "pointer",
+				transition: `all ${token.motionDurationSlow}`,
+				"&:hover": { color: token.colorTextHeading },
+				...genFocusStyle(token)
+			},
+			"&:hover": { color: itemHoverColor },
+			[`&${tabCls}-active ${tabCls}-btn`]: { color: itemSelectedColor },
+			[`&${tabCls}-focus ${tabCls}-btn:focus-visible`]: genFocusOutline(token),
+			[`&${tabCls}-disabled`]: {
+				color: token.colorTextDisabled,
+				cursor: "not-allowed"
+			},
+			[`&${tabCls}-disabled ${tabCls}-btn, &${tabCls}-disabled ${componentCls}-remove`]: { "&:focus, &:active": { color: token.colorTextDisabled } },
+			[`& ${tabCls}-remove ${iconCls}`]: {
+				margin: 0,
+				verticalAlign: "middle"
+			},
+			[`${iconCls}:not(:last-child)`]: { marginRight: {
+				_skip_check_: true,
+				value: token.marginSM
+			} }
+		},
+		[`${tabCls} + ${tabCls}`]: { margin: {
+			_skip_check_: true,
+			value: tabsHorizontalItemMargin
+		} }
+	};
+};
+const genRtlStyle = (token) => {
+	const { componentCls, tabsHorizontalItemMarginRTL, iconCls, cardGutter, calc } = token;
+	return {
+		[`${componentCls}-rtl`]: {
+			direction: "rtl",
+			[`${componentCls}-nav`]: { [`${componentCls}-tab`]: {
+				margin: {
+					_skip_check_: true,
+					value: tabsHorizontalItemMarginRTL
+				},
+				[`${componentCls}-tab:last-of-type`]: { marginLeft: {
+					_skip_check_: true,
+					value: 0
+				} },
+				[iconCls]: {
+					marginRight: {
+						_skip_check_: true,
+						value: 0
+					},
+					marginLeft: {
+						_skip_check_: true,
+						value: unit(token.marginSM)
+					}
+				},
+				[`${componentCls}-tab-remove`]: {
+					marginRight: {
+						_skip_check_: true,
+						value: unit(token.marginXS)
+					},
+					marginLeft: {
+						_skip_check_: true,
+						value: unit(calc(token.marginXXS).mul(-1).equal())
+					},
+					[iconCls]: { margin: 0 }
+				}
+			} },
+			[`&${componentCls}-left`]: {
+				[`> ${componentCls}-nav`]: { order: 1 },
+				[`> ${componentCls}-body-holder`]: { order: 0 }
+			},
+			[`&${componentCls}-right`]: {
+				[`> ${componentCls}-nav`]: { order: 0 },
+				[`> ${componentCls}-body-holder`]: { order: 1 }
+			},
+			[`&${componentCls}-card${componentCls}-top, &${componentCls}-card${componentCls}-bottom`]: { [`> ${componentCls}-nav, > div > ${componentCls}-nav`]: { [`${componentCls}-tab + ${componentCls}-tab`]: {
+				marginRight: {
+					_skip_check_: true,
+					value: cardGutter
+				},
+				marginLeft: {
+					_skip_check_: true,
+					value: 0
+				}
+			} } }
+		},
+		[`${componentCls}-dropdown-rtl`]: { direction: "rtl" },
+		[`${componentCls}-menu-item`]: { [`${componentCls}-dropdown-rtl`]: { textAlign: {
+			_skip_check_: true,
+			value: "right"
+		} } }
+	};
+};
+const genTabsStyle = (token) => {
+	const { componentCls, tabsCardPadding, cardHeight, cardGutter, itemHoverColor, itemActiveColor, colorBorderSecondary } = token;
+	return {
+		[componentCls]: {
+			...resetComponent(token),
+			display: "flex",
+			[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
+				position: "relative",
+				display: "flex",
+				flex: "none",
+				alignItems: "center",
+				[`${componentCls}-nav-wrap`]: {
+					position: "relative",
+					display: "flex",
+					flex: "auto",
+					alignSelf: "stretch",
+					overflow: "hidden",
+					whiteSpace: "nowrap",
+					transform: "translate(0)",
+					"&::before, &::after": {
+						position: "absolute",
+						zIndex: 1,
+						opacity: 0,
+						transition: `opacity ${token.motionDurationSlow}`,
+						content: "''",
+						pointerEvents: "none"
+					}
+				},
+				[`${componentCls}-nav-list`]: {
+					position: "relative",
+					display: "flex",
+					transition: `opacity ${token.motionDurationSlow}`
+				},
+				[`${componentCls}-nav-operations`]: {
+					display: "flex",
+					alignSelf: "stretch"
+				},
+				[`${componentCls}-nav-operations-hidden`]: {
+					position: "absolute",
+					visibility: "hidden",
+					pointerEvents: "none"
+				},
+				[`${componentCls}-nav-more`]: {
+					position: "relative",
+					padding: tabsCardPadding,
+					background: "transparent",
+					border: 0,
+					color: token.colorText,
+					"&::after": {
+						position: "absolute",
+						right: {
+							_skip_check_: true,
+							value: 0
+						},
+						bottom: 0,
+						left: {
+							_skip_check_: true,
+							value: 0
+						},
+						height: token.calc(token.controlHeightLG).div(8).equal(),
+						transform: "translateY(100%)",
+						content: "''"
+					}
+				},
+				[`${componentCls}-nav-add`]: {
+					minWidth: cardHeight,
+					minHeight: cardHeight,
+					marginLeft: {
+						_skip_check_: true,
+						value: cardGutter
+					},
+					background: "transparent",
+					border: `${unit(token.lineWidth)} ${token.lineType} ${colorBorderSecondary}`,
+					borderRadius: `${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)} 0 0`,
+					outline: "none",
+					cursor: "pointer",
+					color: token.colorText,
+					transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
+					"&:hover": { color: itemHoverColor },
+					"&:active, &:focus:not(:focus-visible)": { color: itemActiveColor },
+					...genFocusStyle(token, -3)
+				}
+			},
+			[`${componentCls}-extra-content`]: { flex: "none" },
+			[`${componentCls}-ink-bar`]: {
+				position: "absolute",
+				background: token.inkBarColor,
+				pointerEvents: "none"
+			},
+			...genTabStyle(token),
+			[`${componentCls}-body`]: {
+				position: "relative",
+				width: "100%"
+			},
+			[`${componentCls}-body-holder`]: {
+				flex: "auto",
+				minWidth: 0,
+				minHeight: 0
+			},
+			[`${componentCls}-content`]: {
+				...genFocusStyle(token),
+				"&-hidden": { display: "none" }
+			}
+		},
+		[`${componentCls}-centered`]: { [`> ${componentCls}-nav, > div > ${componentCls}-nav`]: { [`${componentCls}-nav-wrap`]: { [`&:not([class*='${componentCls}-nav-wrap-ping']) > ${componentCls}-nav-list`]: { margin: "auto" } } } }
+	};
+};
+const prepareComponentToken = (token) => {
+	const { cardHeight, cardHeightSM, cardHeightLG, controlHeight, controlHeightLG } = token;
+	const mergedCardHeight = cardHeight || controlHeightLG;
+	const mergedCardHeightSM = cardHeightSM || controlHeight;
+	const mergedCardHeightLG = cardHeightLG || controlHeightLG + 8;
+	return {
+		zIndexPopup: token.zIndexPopupBase + 50,
+		cardBg: token.colorFillAlter,
+		cardHeight: mergedCardHeight,
+		cardHeightSM: mergedCardHeightSM,
+		cardHeightLG: mergedCardHeightLG,
+		cardPadding: `${(mergedCardHeight - token.fontHeight) / 2 - token.lineWidth}px ${token.padding}px`,
+		cardPaddingSM: `${(mergedCardHeightSM - token.fontHeight) / 2 - token.lineWidth}px ${token.paddingXS}px`,
+		cardPaddingLG: `${(mergedCardHeightLG - token.fontHeightLG) / 2 - token.lineWidth}px ${token.padding}px`,
+		titleFontSize: token.fontSize,
+		titleFontSizeLG: token.fontSizeLG,
+		titleFontSizeSM: token.fontSize,
+		inkBarColor: token.colorPrimary,
+		horizontalMargin: `0 0 ${token.margin}px 0`,
+		horizontalItemGutter: 32,
+		horizontalItemMargin: ``,
+		horizontalItemMarginRTL: ``,
+		horizontalItemPadding: `${token.paddingSM}px 0`,
+		horizontalItemPaddingSM: `${token.paddingXS}px 0`,
+		horizontalItemPaddingLG: `${token.padding}px 0`,
+		verticalItemPadding: `${token.paddingXS}px ${token.paddingLG}px`,
+		verticalItemMargin: `${token.margin}px 0 0 0`,
+		itemColor: token.colorText,
+		itemSelectedColor: token.colorPrimary,
+		itemHoverColor: token.colorPrimaryHover,
+		itemActiveColor: token.colorPrimaryActive,
+		cardGutter: token.marginXXS / 2
+	};
+};
+var style_default = genStyleHooks("Tabs", (token) => {
+	const tabsToken = mergeToken(token, {
+		tabsCardPadding: token.cardPadding,
+		dropdownEdgeChildVerticalPadding: token.paddingXXS,
+		tabsDropdownHeight: 200,
+		tabsDropdownWidth: 120,
+		tabsHorizontalItemMargin: `0 0 0 ${unit(token.horizontalItemGutter)}`,
+		tabsHorizontalItemMarginRTL: `0 0 0 ${unit(token.horizontalItemGutter)}`
+	});
+	return [
+		genSizeStyle(tabsToken),
+		genRtlStyle(tabsToken),
+		genPositionStyle(tabsToken),
+		genDropdownStyle(tabsToken),
+		genCardStyle(tabsToken),
+		genTabsStyle(tabsToken),
+		genMotionStyle(tabsToken)
+	];
+}, prepareComponentToken);
+//#endregion
+export { style_default as default, prepareComponentToken };

package/dist/tabs/style/motion.d.ts

@@ -0,0 +1,7 @@
+import { TabsToken } from "./index.js";
+import { GenerateStyle } from "../../theme/interface/index.js";
+import "../../theme/internal.js";
+//#region src/tabs/style/motion.d.ts
+declare const genMotionStyle: GenerateStyle<TabsToken>;
+//#endregion
+export { genMotionStyle as default };

package/dist/tabs/style/motion.js

@@ -0,0 +1,27 @@
+import { initSlideMotion } from "../../style/motion/slide.js";
+//#region src/tabs/style/motion.ts
+const genMotionStyle = (token) => {
+	const { componentCls, motionDurationSlow } = token;
+	return [{ [componentCls]: { [`${componentCls}-switch`]: {
+		"&-appear, &-enter": {
+			transition: "none",
+			"&-start": { opacity: 0 },
+			"&-active": {
+				opacity: 1,
+				transition: `opacity ${motionDurationSlow}`
+			}
+		},
+		"&-leave": {
+			position: "absolute",
+			transition: "none",
+			inset: 0,
+			"&-start": { opacity: 1 },
+			"&-active": {
+				opacity: 0,
+				transition: `opacity ${motionDurationSlow}`
+			}
+		}
+	} } }, [initSlideMotion(token, "slide-up"), initSlideMotion(token, "slide-down")]];
+};
+//#endregion
+export { genMotionStyle as default };