antdv-next 0.0.0 → 1.0.0-alpha.1

package/dist/tabs/style/index.js

@@ -0,0 +1,618 @@
+import { genFocusOutline, genFocusStyle, resetComponent, textEllipsis } from "../../style/index.js";
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import motion_default from "./motion.js";
+import { unit } from "@antdv-next/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 { 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" },
+		[`${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": "normal",
+				"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, 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 ${token.motionDurationSlow}, left ${token.motionDurationSlow},
+            right ${token.motionDurationSlow}` }
+				},
+				[`${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}-content-holder, > div > ${componentCls}-content-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 ${token.motionDurationSlow}, top ${token.motionDurationSlow}` }
+			},
+			[`${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}-content-holder, > div > ${componentCls}-content-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}-content > ${componentCls}-tabpane`]: { 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}-content-holder, > div > ${componentCls}-content-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}-content > ${componentCls}-tabpane`]: { 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 }
+			},
+			"&-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}-content-holder`]: { order: 0 }
+			},
+			[`&${componentCls}-right`]: {
+				[`> ${componentCls}-nav`]: { order: 0 },
+				[`> ${componentCls}-content-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}-content`]: {
+				position: "relative",
+				width: "100%"
+			},
+			[`${componentCls}-content-holder`]: {
+				flex: "auto",
+				minWidth: 0,
+				minHeight: 0
+			},
+			[`${componentCls}-tabpane`]: {
+				...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),
+		motion_default(tabsToken)
+	];
+}, prepareComponentToken);
+
+//#endregion
+export { style_default as default };

package/dist/tabs/style/motion.js

@@ -0,0 +1,31 @@
+import { initSlideMotion } from "../../style/motion/slide.js";
+import "../../style/motion/index.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")]];
+};
+var motion_default = genMotionStyle;
+
+//#endregion
+export { motion_default as default };

package/dist/tag/CheckableTag.d.ts

@@ -0,0 +1,34 @@
+import { VueNode } from "../_util/type.js";
+import { ComponentBaseProps } from "../config-provider/context.js";
+import * as vue332 from "vue";
+import { SlotsType } from "vue";
+
+//#region src/tag/CheckableTag.d.ts
+interface CheckableTagProps extends ComponentBaseProps {
+  /**
+   * It is an absolute controlled component and has no uncontrolled mode.
+   *
+   * .zh-cn 该组件为完全受控组件，不支持非受控用法。
+   */
+  checked: boolean;
+  /**
+   * @since 5.27.0
+   */
+  icon?: VueNode;
+  disabled?: boolean;
+}
+interface CheckableTagEmits {
+  'change': (checked: boolean) => void;
+  'update:checked': (checked: boolean) => void;
+  'click': (e: MouseEvent) => void;
+  [key: string]: (...args: any[]) => any;
+}
+interface CheckableTagSlots {
+  default: () => any;
+  icon: () => any;
+}
+declare const CheckableTag: vue332.DefineSetupFnComponent<CheckableTagProps, CheckableTagEmits, SlotsType<CheckableTagSlots>, CheckableTagProps & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue332.PublicProps>;
+//#endregion
+export { CheckableTag, CheckableTagProps };