antdv-next 0.0.0 → 1.0.0-alpha.1

package/dist/menu/style/index.js

@@ -0,0 +1,425 @@
+import { clearFix, resetComponent, resetIcon } from "../../style/index.js";
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import collapse_default from "../../style/motion/collapse.js";
+import { initSlideMotion } from "../../style/motion/slide.js";
+import { initZoomMotion } from "../../style/motion/zoom.js";
+import "../../style/motion/index.js";
+import horizontal_default from "./horizontal.js";
+import rtl_default from "./rtl.js";
+import theme_default from "./theme.js";
+import vertical_default from "./vertical.js";
+import { unit } from "@antdv-next/cssinjs";
+import { FastColor } from "@ant-design/fast-color";
+
+//#region src/menu/style/index.ts
+function genMenuItemStyle(token) {
+	const { componentCls, motionDurationSlow, motionDurationMid, motionEaseInOut, motionEaseOut, iconCls, iconSize, iconMarginInlineEnd } = token;
+	return {
+		[`${componentCls}-item, ${componentCls}-submenu-title`]: {
+			position: "relative",
+			display: "block",
+			margin: 0,
+			whiteSpace: "nowrap",
+			cursor: "pointer",
+			transition: [
+				`border-color ${motionDurationSlow}`,
+				`background ${motionDurationSlow}`,
+				`padding calc(${motionDurationSlow} + 0.1s) ${motionEaseInOut}`
+			].join(","),
+			[`${componentCls}-item-icon, ${iconCls}`]: {
+				"minWidth": iconSize,
+				"fontSize": iconSize,
+				"transition": [
+					`font-size ${motionDurationMid} ${motionEaseOut}`,
+					`margin ${motionDurationSlow} ${motionEaseInOut}`,
+					`color ${motionDurationSlow}`
+				].join(","),
+				"+ span": {
+					marginInlineStart: iconMarginInlineEnd,
+					opacity: 1,
+					transition: [
+						`opacity ${motionDurationSlow} ${motionEaseInOut}`,
+						`margin ${motionDurationSlow}`,
+						`color ${motionDurationSlow}`
+					].join(",")
+				}
+			},
+			[`${componentCls}-item-icon`]: { ...resetIcon() },
+			[`&${componentCls}-item-only-child`]: { [`> ${iconCls}, > ${componentCls}-item-icon`]: { marginInlineEnd: 0 } }
+		},
+		[`${componentCls}-item-disabled, ${componentCls}-submenu-disabled`]: {
+			"background": "none !important",
+			"cursor": "not-allowed",
+			"&::after": { borderColor: "transparent !important" },
+			"a": {
+				color: "inherit !important",
+				cursor: "not-allowed",
+				pointerEvents: "none"
+			},
+			[`> ${componentCls}-submenu-title`]: {
+				color: "inherit !important",
+				cursor: "not-allowed"
+			}
+		}
+	};
+}
+function genSubMenuArrowStyle(token) {
+	const { componentCls, motionDurationSlow, motionEaseInOut, borderRadius, menuArrowSize, menuArrowOffset } = token;
+	return { [`${componentCls}-submenu`]: {
+		"&-expand-icon, &-arrow": {
+			position: "absolute",
+			top: "50%",
+			insetInlineEnd: token.margin,
+			width: menuArrowSize,
+			color: "currentcolor",
+			transform: "translateY(-50%)",
+			transition: `transform ${motionDurationSlow} ${motionEaseInOut}, opacity ${motionDurationSlow}`
+		},
+		"&-arrow": {
+			"&::before, &::after": {
+				position: "absolute",
+				width: token.calc(menuArrowSize).mul(.6).equal(),
+				height: token.calc(menuArrowSize).mul(.15).equal(),
+				backgroundColor: "currentcolor",
+				borderRadius,
+				transition: [
+					`background ${motionDurationSlow} ${motionEaseInOut}`,
+					`transform ${motionDurationSlow} ${motionEaseInOut}`,
+					`top ${motionDurationSlow} ${motionEaseInOut}`,
+					`color ${motionDurationSlow} ${motionEaseInOut}`
+				].join(","),
+				content: "\"\""
+			},
+			"&::before": { transform: `rotate(45deg) translateY(${unit(token.calc(menuArrowOffset).mul(-1).equal())})` },
+			"&::after": { transform: `rotate(-45deg) translateY(${unit(menuArrowOffset)})` }
+		}
+	} };
+}
+const getBaseStyle = (token) => {
+	const { antCls, componentCls, fontSize, motionDurationSlow, motionDurationMid, motionEaseInOut, paddingXS, padding, colorSplit, lineWidth, zIndexPopup, borderRadiusLG, subMenuItemBorderRadius, menuArrowSize, menuArrowOffset, lineType, groupTitleLineHeight, groupTitleFontSize } = token;
+	return [
+		{
+			"": { [componentCls]: {
+				...clearFix(),
+				"&-hidden": { display: "none" }
+			} },
+			[`${componentCls}-submenu-hidden`]: { display: "none" }
+		},
+		{ [componentCls]: {
+			...resetComponent(token),
+			...clearFix(),
+			"marginBottom": 0,
+			"paddingInlineStart": 0,
+			fontSize,
+			"lineHeight": 0,
+			"listStyle": "none",
+			"outline": "none",
+			"transition": `width ${motionDurationSlow} cubic-bezier(0.2, 0, 0, 1) 0s`,
+			"ul, ol": {
+				margin: 0,
+				padding: 0,
+				listStyle: "none"
+			},
+			"&-overflow": {
+				display: "flex",
+				[`${componentCls}-item`]: { flex: "none" }
+			},
+			[`${componentCls}-item, ${componentCls}-submenu, ${componentCls}-submenu-title`]: { borderRadius: token.itemBorderRadius },
+			[`${componentCls}-item-group-title`]: {
+				padding: `${unit(paddingXS)} ${unit(padding)}`,
+				fontSize: groupTitleFontSize,
+				lineHeight: groupTitleLineHeight,
+				transition: `all ${motionDurationSlow}`
+			},
+			[`&-horizontal ${componentCls}-submenu`]: { transition: [`border-color ${motionDurationSlow} ${motionEaseInOut}`, `background ${motionDurationSlow} ${motionEaseInOut}`].join(",") },
+			[`${componentCls}-submenu, ${componentCls}-submenu-inline`]: { transition: [
+				`border-color ${motionDurationSlow} ${motionEaseInOut}`,
+				`background ${motionDurationSlow} ${motionEaseInOut}`,
+				`padding ${motionDurationMid} ${motionEaseInOut}`
+			].join(",") },
+			[`${componentCls}-submenu ${componentCls}-sub`]: {
+				cursor: "initial",
+				transition: [`background ${motionDurationSlow} ${motionEaseInOut}`, `padding ${motionDurationSlow} ${motionEaseInOut}`].join(",")
+			},
+			[`${componentCls}-title-content`]: {
+				"transition": `color ${motionDurationSlow}`,
+				"&-with-extra": {
+					display: "inline-flex",
+					alignItems: "center",
+					width: "100%"
+				},
+				[`> ${antCls}-typography-ellipsis-single-line`]: {
+					display: "inline",
+					verticalAlign: "unset"
+				},
+				[`${componentCls}-item-extra`]: {
+					marginInlineStart: "auto",
+					paddingInlineStart: token.padding
+				}
+			},
+			[`${componentCls}-item a`]: { "&::before": {
+				position: "absolute",
+				inset: 0,
+				backgroundColor: "transparent",
+				content: "\"\""
+			} },
+			[`${componentCls}-item-divider`]: {
+				"overflow": "hidden",
+				"lineHeight": 0,
+				"borderColor": colorSplit,
+				"borderStyle": lineType,
+				"borderWidth": 0,
+				"borderTopWidth": lineWidth,
+				"marginBlock": lineWidth,
+				"padding": 0,
+				"&-dashed": { borderStyle: "dashed" }
+			},
+			...genMenuItemStyle(token),
+			[`${componentCls}-item-group`]: { [`${componentCls}-item-group-list`]: {
+				margin: 0,
+				padding: 0,
+				[`${componentCls}-item, ${componentCls}-submenu-title`]: { paddingInline: `${unit(token.calc(fontSize).mul(2).equal())} ${unit(padding)}` }
+			} },
+			"&-submenu": {
+				"&-popup": {
+					"position": "absolute",
+					"zIndex": zIndexPopup,
+					"borderRadius": borderRadiusLG,
+					"boxShadow": "none",
+					"transformOrigin": "0 0",
+					[`&${componentCls}-submenu`]: { background: "transparent" },
+					"&::before": {
+						position: "absolute",
+						inset: 0,
+						zIndex: -1,
+						width: "100%",
+						height: "100%",
+						opacity: 0,
+						content: "\"\""
+					},
+					[`> ${componentCls}`]: {
+						borderRadius: borderRadiusLG,
+						...genMenuItemStyle(token),
+						...genSubMenuArrowStyle(token),
+						[`${componentCls}-item, ${componentCls}-submenu > ${componentCls}-submenu-title`]: { borderRadius: subMenuItemBorderRadius },
+						[`${componentCls}-submenu-title::after`]: { transition: `transform ${motionDurationSlow} ${motionEaseInOut}` }
+					}
+				},
+				[`
+          &-placement-leftTop,
+          &-placement-bottomRight,
+          `]: { transformOrigin: "100% 0" },
+				[`
+          &-placement-leftBottom,
+          &-placement-topRight,
+          `]: { transformOrigin: "100% 100%" },
+				[`
+          &-placement-rightBottom,
+          &-placement-topLeft,
+          `]: { transformOrigin: "0 100%" },
+				[`
+          &-placement-bottomLeft,
+          &-placement-rightTop,
+          `]: { transformOrigin: "0 0" },
+				[`
+          &-placement-leftTop,
+          &-placement-leftBottom
+          `]: { paddingInlineEnd: token.paddingXS },
+				[`
+          &-placement-rightTop,
+          &-placement-rightBottom
+          `]: { paddingInlineStart: token.paddingXS },
+				[`
+          &-placement-topRight,
+          &-placement-topLeft
+          `]: { paddingBottom: token.paddingXS },
+				[`
+          &-placement-bottomRight,
+          &-placement-bottomLeft
+          `]: { paddingTop: token.paddingXS }
+			},
+			...genSubMenuArrowStyle(token),
+			[`&-inline-collapsed ${componentCls}-submenu-arrow,
+        &-inline ${componentCls}-submenu-arrow`]: {
+				"&::before": { transform: `rotate(-45deg) translateX(${unit(menuArrowOffset)})` },
+				"&::after": { transform: `rotate(45deg) translateX(${unit(token.calc(menuArrowOffset).mul(-1).equal())})` }
+			},
+			[`${componentCls}-submenu-open${componentCls}-submenu-inline > ${componentCls}-submenu-title > ${componentCls}-submenu-arrow`]: {
+				"transform": `translateY(${unit(token.calc(menuArrowSize).mul(.2).mul(-1).equal())})`,
+				"&::after": { transform: `rotate(-45deg) translateX(${unit(token.calc(menuArrowOffset).mul(-1).equal())})` },
+				"&::before": { transform: `rotate(45deg) translateX(${unit(menuArrowOffset)})` }
+			}
+		} },
+		{ [`${antCls}-layout-header`]: { [componentCls]: { lineHeight: "inherit" } } }
+	];
+};
+const prepareComponentToken = (token) => {
+	const { colorPrimary, colorError, colorTextDisabled, colorErrorBg, colorText, colorTextDescription, colorBgContainer, colorFillAlter, colorFillContent, lineWidth, lineWidthBold, controlItemBgActive, colorBgTextHover, controlHeightLG, lineHeight, colorBgElevated, marginXXS, padding, fontSize, controlHeightSM, fontSizeLG, colorTextLightSolid, colorErrorHover } = token;
+	const activeBarWidth = token.activeBarWidth ?? 0;
+	const activeBarBorderWidth = token.activeBarBorderWidth ?? lineWidth;
+	const itemMarginInline = token.itemMarginInline ?? token.marginXXS;
+	const colorTextDark = new FastColor(colorTextLightSolid).setA(.65).toRgbString();
+	return {
+		dropdownWidth: 160,
+		zIndexPopup: token.zIndexPopupBase + 50,
+		radiusItem: token.borderRadiusLG,
+		itemBorderRadius: token.borderRadiusLG,
+		radiusSubMenuItem: token.borderRadiusSM,
+		subMenuItemBorderRadius: token.borderRadiusSM,
+		colorItemText: colorText,
+		itemColor: colorText,
+		colorItemTextHover: colorText,
+		itemHoverColor: colorText,
+		colorItemTextHoverHorizontal: colorPrimary,
+		horizontalItemHoverColor: colorPrimary,
+		colorGroupTitle: colorTextDescription,
+		groupTitleColor: colorTextDescription,
+		colorItemTextSelected: colorPrimary,
+		itemSelectedColor: colorPrimary,
+		subMenuItemSelectedColor: colorPrimary,
+		colorItemTextSelectedHorizontal: colorPrimary,
+		horizontalItemSelectedColor: colorPrimary,
+		colorItemBg: colorBgContainer,
+		itemBg: colorBgContainer,
+		colorItemBgHover: colorBgTextHover,
+		itemHoverBg: colorBgTextHover,
+		colorItemBgActive: colorFillContent,
+		itemActiveBg: controlItemBgActive,
+		colorSubItemBg: colorFillAlter,
+		subMenuItemBg: colorFillAlter,
+		colorItemBgSelected: controlItemBgActive,
+		itemSelectedBg: controlItemBgActive,
+		colorItemBgSelectedHorizontal: "transparent",
+		horizontalItemSelectedBg: "transparent",
+		colorActiveBarWidth: 0,
+		activeBarWidth,
+		colorActiveBarHeight: lineWidthBold,
+		activeBarHeight: lineWidthBold,
+		colorActiveBarBorderSize: lineWidth,
+		activeBarBorderWidth,
+		colorItemTextDisabled: colorTextDisabled,
+		itemDisabledColor: colorTextDisabled,
+		colorDangerItemText: colorError,
+		dangerItemColor: colorError,
+		colorDangerItemTextHover: colorError,
+		dangerItemHoverColor: colorError,
+		colorDangerItemTextSelected: colorError,
+		dangerItemSelectedColor: colorError,
+		colorDangerItemBgActive: colorErrorBg,
+		dangerItemActiveBg: colorErrorBg,
+		colorDangerItemBgSelected: colorErrorBg,
+		dangerItemSelectedBg: colorErrorBg,
+		itemMarginInline,
+		horizontalItemBorderRadius: 0,
+		horizontalItemHoverBg: "transparent",
+		itemHeight: controlHeightLG,
+		groupTitleLineHeight: lineHeight,
+		collapsedWidth: controlHeightLG * 2,
+		popupBg: colorBgElevated,
+		itemMarginBlock: marginXXS,
+		itemPaddingInline: padding,
+		horizontalLineHeight: `${controlHeightLG * 1.15}px`,
+		iconSize: fontSize,
+		iconMarginInlineEnd: controlHeightSM - fontSize,
+		collapsedIconSize: fontSizeLG,
+		groupTitleFontSize: fontSize,
+		darkItemDisabledColor: new FastColor(colorTextLightSolid).setA(.25).toRgbString(),
+		darkItemColor: colorTextDark,
+		darkDangerItemColor: colorError,
+		darkItemBg: "#001529",
+		darkPopupBg: "#001529",
+		darkSubMenuItemBg: "#000c17",
+		darkItemSelectedColor: colorTextLightSolid,
+		darkItemSelectedBg: colorPrimary,
+		darkDangerItemSelectedBg: colorError,
+		darkItemHoverBg: "transparent",
+		darkGroupTitleColor: colorTextDark,
+		darkItemHoverColor: colorTextLightSolid,
+		darkDangerItemHoverColor: colorErrorHover,
+		darkDangerItemSelectedColor: colorTextLightSolid,
+		darkDangerItemActiveBg: colorError,
+		itemWidth: activeBarWidth ? `calc(100% + ${activeBarBorderWidth}px)` : `calc(100% - ${itemMarginInline * 2}px)`
+	};
+};
+var style_default = (prefixCls, rootCls = prefixCls, injectStyle = true) => {
+	return genStyleHooks("Menu", (token) => {
+		const { colorBgElevated, controlHeightLG, fontSize, darkItemColor, darkDangerItemColor, darkItemBg, darkSubMenuItemBg, darkItemSelectedColor, darkItemSelectedBg, darkDangerItemSelectedBg, darkItemHoverBg, darkGroupTitleColor, darkItemHoverColor, darkItemDisabledColor, darkDangerItemHoverColor, darkDangerItemSelectedColor, darkDangerItemActiveBg, popupBg, darkPopupBg } = token;
+		const menuArrowSize = token.calc(fontSize).div(7).mul(5).equal();
+		const menuToken = mergeToken(token, {
+			menuArrowSize,
+			menuHorizontalHeight: token.calc(controlHeightLG).mul(1.15).equal(),
+			menuArrowOffset: token.calc(menuArrowSize).mul(.25).equal(),
+			menuSubMenuBg: colorBgElevated,
+			calc: token.calc,
+			popupBg
+		});
+		const menuDarkToken = mergeToken(menuToken, {
+			itemColor: darkItemColor,
+			itemHoverColor: darkItemHoverColor,
+			groupTitleColor: darkGroupTitleColor,
+			itemSelectedColor: darkItemSelectedColor,
+			subMenuItemSelectedColor: darkItemSelectedColor,
+			itemBg: darkItemBg,
+			popupBg: darkPopupBg,
+			subMenuItemBg: darkSubMenuItemBg,
+			itemActiveBg: "transparent",
+			itemSelectedBg: darkItemSelectedBg,
+			activeBarHeight: 0,
+			activeBarBorderWidth: 0,
+			itemHoverBg: darkItemHoverBg,
+			itemDisabledColor: darkItemDisabledColor,
+			dangerItemColor: darkDangerItemColor,
+			dangerItemHoverColor: darkDangerItemHoverColor,
+			dangerItemSelectedColor: darkDangerItemSelectedColor,
+			dangerItemActiveBg: darkDangerItemActiveBg,
+			dangerItemSelectedBg: darkDangerItemSelectedBg,
+			menuSubMenuBg: darkSubMenuItemBg,
+			horizontalItemSelectedColor: darkItemSelectedColor,
+			horizontalItemSelectedBg: darkItemSelectedBg
+		});
+		return [
+			getBaseStyle(menuToken),
+			horizontal_default(menuToken),
+			vertical_default(menuToken),
+			theme_default(menuToken, "light"),
+			theme_default(menuDarkToken, "dark"),
+			rtl_default(menuToken),
+			collapse_default(menuToken),
+			initSlideMotion(menuToken, "slide-up"),
+			initSlideMotion(menuToken, "slide-down"),
+			initZoomMotion(menuToken, "zoom-big")
+		];
+	}, prepareComponentToken, {
+		deprecatedTokens: [
+			["colorGroupTitle", "groupTitleColor"],
+			["radiusItem", "itemBorderRadius"],
+			["radiusSubMenuItem", "subMenuItemBorderRadius"],
+			["colorItemText", "itemColor"],
+			["colorItemTextHover", "itemHoverColor"],
+			["colorItemTextHoverHorizontal", "horizontalItemHoverColor"],
+			["colorItemTextSelected", "itemSelectedColor"],
+			["colorItemTextSelectedHorizontal", "horizontalItemSelectedColor"],
+			["colorItemTextDisabled", "itemDisabledColor"],
+			["colorDangerItemText", "dangerItemColor"],
+			["colorDangerItemTextHover", "dangerItemHoverColor"],
+			["colorDangerItemTextSelected", "dangerItemSelectedColor"],
+			["colorDangerItemBgActive", "dangerItemActiveBg"],
+			["colorDangerItemBgSelected", "dangerItemSelectedBg"],
+			["colorItemBg", "itemBg"],
+			["colorItemBgHover", "itemHoverBg"],
+			["colorSubItemBg", "subMenuItemBg"],
+			["colorItemBgActive", "itemActiveBg"],
+			["colorItemBgSelectedHorizontal", "horizontalItemSelectedBg"],
+			["colorActiveBarWidth", "activeBarWidth"],
+			["colorActiveBarHeight", "activeBarHeight"],
+			["colorActiveBarBorderSize", "activeBarBorderWidth"],
+			["colorItemBgSelected", "itemSelectedBg"]
+		],
+		injectStyle,
+		unitless: { groupTitleLineHeight: true }
+	})(prefixCls, rootCls);
+};
+
+//#endregion
+export { style_default as default };

package/dist/menu/style/rtl.js

@@ -0,0 +1,16 @@
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/menu/style/rtl.ts
+const getRTLStyle = ({ componentCls, menuArrowOffset, calc }) => ({
+	[`${componentCls}-rtl`]: { direction: "rtl" },
+	[`${componentCls}-submenu-rtl`]: { transformOrigin: "100% 0" },
+	[`${componentCls}-rtl${componentCls}-vertical,
+    ${componentCls}-submenu-rtl ${componentCls}-vertical`]: { [`${componentCls}-submenu-arrow`]: {
+		"&::before": { transform: `rotate(-45deg) translateY(${unit(calc(menuArrowOffset).mul(-1).equal())})` },
+		"&::after": { transform: `rotate(45deg) translateY(${unit(menuArrowOffset)})` }
+	} }
+});
+var rtl_default = getRTLStyle;
+
+//#endregion
+export { rtl_default as default };

package/dist/menu/style/theme.js

@@ -0,0 +1,109 @@
+import { genFocusOutline } from "../../style/index.js";
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/menu/style/theme.ts
+const accessibilityFocus = (token) => genFocusOutline(token);
+function getThemeStyle(token, themeSuffix) {
+	const { componentCls, itemColor, itemSelectedColor, subMenuItemSelectedColor, groupTitleColor, itemBg, subMenuItemBg, itemSelectedBg, activeBarHeight, activeBarWidth, activeBarBorderWidth, motionDurationSlow, motionEaseInOut, motionEaseOut, itemPaddingInline, motionDurationMid, itemHoverColor, lineType, colorSplit, itemDisabledColor, dangerItemColor, dangerItemHoverColor, dangerItemSelectedColor, dangerItemActiveBg, dangerItemSelectedBg, popupBg, itemHoverBg, itemActiveBg, menuSubMenuBg, horizontalItemSelectedColor, horizontalItemSelectedBg, horizontalItemBorderRadius, horizontalItemHoverBg } = token;
+	return { [`${componentCls}-${themeSuffix}, ${componentCls}-${themeSuffix} > ${componentCls}`]: {
+		color: itemColor,
+		background: itemBg,
+		[`&${componentCls}-root:focus-visible`]: { ...accessibilityFocus(token) },
+		[`${componentCls}-item`]: { "&-group-title, &-extra": { color: groupTitleColor } },
+		[`${componentCls}-submenu-selected > ${componentCls}-submenu-title`]: { color: subMenuItemSelectedColor },
+		[`${componentCls}-item, ${componentCls}-submenu-title`]: {
+			color: itemColor,
+			[`&:not(${componentCls}-item-disabled):focus-visible`]: { ...accessibilityFocus(token) }
+		},
+		[`${componentCls}-item-disabled, ${componentCls}-submenu-disabled`]: { color: `${itemDisabledColor} !important` },
+		[`${componentCls}-item:not(${componentCls}-item-selected):not(${componentCls}-submenu-selected)`]: { [`&:hover, > ${componentCls}-submenu-title:hover`]: { color: itemHoverColor } },
+		[`&:not(${componentCls}-horizontal)`]: {
+			[`${componentCls}-item:not(${componentCls}-item-selected)`]: {
+				"&:hover": { backgroundColor: itemHoverBg },
+				"&:active": { backgroundColor: itemActiveBg }
+			},
+			[`${componentCls}-submenu-title`]: {
+				"&:hover": { backgroundColor: itemHoverBg },
+				"&:active": { backgroundColor: itemActiveBg }
+			}
+		},
+		[`${componentCls}-item-danger`]: {
+			color: dangerItemColor,
+			[`&${componentCls}-item:hover`]: { [`&:not(${componentCls}-item-selected):not(${componentCls}-submenu-selected)`]: { color: dangerItemHoverColor } },
+			[`&${componentCls}-item:active`]: { background: dangerItemActiveBg }
+		},
+		[`${componentCls}-item a`]: { "&, &:hover": { color: "inherit" } },
+		[`${componentCls}-item-selected`]: {
+			"color": itemSelectedColor,
+			[`&${componentCls}-item-danger`]: { color: dangerItemSelectedColor },
+			"a, a:hover": { color: "inherit" }
+		},
+		[`& ${componentCls}-item-selected`]: {
+			backgroundColor: itemSelectedBg,
+			[`&${componentCls}-item-danger`]: { backgroundColor: dangerItemSelectedBg }
+		},
+		[`&${componentCls}-submenu > ${componentCls}`]: { backgroundColor: menuSubMenuBg },
+		[`&${componentCls}-popup > ${componentCls}`]: { backgroundColor: popupBg },
+		[`&${componentCls}-submenu-popup > ${componentCls}`]: { backgroundColor: popupBg },
+		[`&${componentCls}-horizontal`]: {
+			...themeSuffix === "dark" ? { borderBottom: 0 } : {},
+			[`> ${componentCls}-item, > ${componentCls}-submenu`]: {
+				"top": activeBarBorderWidth,
+				"marginTop": token.calc(activeBarBorderWidth).mul(-1).equal(),
+				"marginBottom": 0,
+				"borderRadius": horizontalItemBorderRadius,
+				"&::after": {
+					position: "absolute",
+					insetInline: itemPaddingInline,
+					bottom: 0,
+					borderBottom: `${unit(activeBarHeight)} solid transparent`,
+					transition: `border-color ${motionDurationSlow} ${motionEaseInOut}`,
+					content: "\"\""
+				},
+				"&:hover, &-active, &-open": {
+					"background": horizontalItemHoverBg,
+					"&::after": {
+						borderBottomWidth: activeBarHeight,
+						borderBottomColor: horizontalItemSelectedColor
+					}
+				},
+				"&-selected": {
+					"color": horizontalItemSelectedColor,
+					"backgroundColor": horizontalItemSelectedBg,
+					"&:hover": { backgroundColor: horizontalItemSelectedBg },
+					"&::after": {
+						borderBottomWidth: activeBarHeight,
+						borderBottomColor: horizontalItemSelectedColor
+					}
+				}
+			}
+		},
+		[`&${componentCls}-root`]: { [`&${componentCls}-inline, &${componentCls}-vertical`]: { borderInlineEnd: `${unit(activeBarBorderWidth)} ${lineType} ${colorSplit}` } },
+		[`&${componentCls}-inline`]: {
+			[`${componentCls}-sub${componentCls}-inline`]: { background: subMenuItemBg },
+			[`${componentCls}-item`]: {
+				"position": "relative",
+				"&::after": {
+					position: "absolute",
+					insetBlock: 0,
+					insetInlineEnd: 0,
+					borderInlineEnd: `${unit(activeBarWidth)} solid ${itemSelectedColor}`,
+					transform: "scaleY(0.0001)",
+					opacity: 0,
+					transition: [`transform ${motionDurationMid} ${motionEaseOut}`, `opacity ${motionDurationMid} ${motionEaseOut}`].join(","),
+					content: "\"\""
+				},
+				[`&${componentCls}-item-danger`]: { "&::after": { borderInlineEndColor: dangerItemSelectedColor } }
+			},
+			[`${componentCls}-selected, ${componentCls}-item-selected`]: { "&::after": {
+				transform: "scaleY(1)",
+				opacity: 1,
+				transition: [`transform ${motionDurationMid} ${motionEaseInOut}`, `opacity ${motionDurationMid} ${motionEaseInOut}`].join(",")
+			} }
+		}
+	} };
+}
+var theme_default = getThemeStyle;
+
+//#endregion
+export { theme_default as default };

package/dist/menu/style/vertical.js

@@ -0,0 +1,133 @@
+import { textEllipsis } from "../../style/index.js";
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/menu/style/vertical.ts
+const getVerticalInlineStyle = (token) => {
+	const { componentCls, itemHeight, itemMarginInline, padding, menuArrowSize, marginXS, itemMarginBlock, itemWidth, itemPaddingInline } = token;
+	const paddingWithArrow = token.calc(menuArrowSize).add(padding).add(marginXS).equal();
+	return {
+		[`${componentCls}-item`]: {
+			position: "relative",
+			overflow: "hidden"
+		},
+		[`${componentCls}-item, ${componentCls}-submenu-title`]: {
+			height: itemHeight,
+			lineHeight: unit(itemHeight),
+			paddingInline: itemPaddingInline,
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			marginInline: itemMarginInline,
+			marginBlock: itemMarginBlock,
+			width: itemWidth
+		},
+		[`> ${componentCls}-item,
+            > ${componentCls}-submenu > ${componentCls}-submenu-title`]: {
+			height: itemHeight,
+			lineHeight: unit(itemHeight)
+		},
+		[`${componentCls}-item-group-list ${componentCls}-submenu-title,
+            ${componentCls}-submenu-title`]: { paddingInlineEnd: paddingWithArrow }
+	};
+};
+const getVerticalStyle = (token) => {
+	const { componentCls, iconCls, itemHeight, colorTextLightSolid, dropdownWidth, controlHeightLG, motionEaseOut, paddingXL, itemMarginInline, fontSizeLG, motionDurationFast, motionDurationSlow, paddingXS, boxShadowSecondary, collapsedWidth, collapsedIconSize } = token;
+	const inlineItemStyle = {
+		height: itemHeight,
+		lineHeight: unit(itemHeight),
+		listStylePosition: "inside",
+		listStyleType: "disc"
+	};
+	return [
+		{
+			[componentCls]: { "&-inline, &-vertical": {
+				[`&${componentCls}-root`]: { boxShadow: "none" },
+				...getVerticalInlineStyle(token)
+			} },
+			[`${componentCls}-submenu-popup`]: { [`${componentCls}-vertical`]: {
+				...getVerticalInlineStyle(token),
+				boxShadow: boxShadowSecondary
+			} }
+		},
+		{ [`${componentCls}-submenu-popup ${componentCls}-vertical${componentCls}-sub`]: {
+			"minWidth": dropdownWidth,
+			"maxHeight": `calc(100vh - ${unit(token.calc(controlHeightLG).mul(2.5).equal())})`,
+			"padding": "0",
+			"overflow": "hidden",
+			"borderInlineEnd": 0,
+			"&:not([class*='-active'])": {
+				overflowX: "hidden",
+				overflowY: "auto"
+			}
+		} },
+		{ [`${componentCls}-inline`]: {
+			width: "100%",
+			[`&${componentCls}-root`]: { [`${componentCls}-item, ${componentCls}-submenu-title`]: {
+				"display": "flex",
+				"alignItems": "center",
+				"transition": [
+					`border-color ${motionDurationSlow}`,
+					`background ${motionDurationSlow}`,
+					`padding ${motionDurationFast} ${motionEaseOut}`
+				].join(","),
+				[`> ${componentCls}-title-content`]: {
+					flex: "auto",
+					minWidth: 0,
+					overflow: "hidden",
+					textOverflow: "ellipsis"
+				},
+				"> *": { flex: "none" }
+			} },
+			[`${componentCls}-sub${componentCls}-inline`]: {
+				padding: 0,
+				border: 0,
+				borderRadius: 0,
+				boxShadow: "none",
+				[`& > ${componentCls}-submenu > ${componentCls}-submenu-title`]: inlineItemStyle,
+				[`& ${componentCls}-item-group-title`]: { paddingInlineStart: paddingXL }
+			},
+			[`${componentCls}-item`]: inlineItemStyle
+		} },
+		{ [`${componentCls}-inline-collapsed`]: {
+			"width": collapsedWidth,
+			[`&${componentCls}-root`]: { [`${componentCls}-item, ${componentCls}-submenu ${componentCls}-submenu-title`]: { [`> ${componentCls}-inline-collapsed-noicon`]: {
+				fontSize: fontSizeLG,
+				textAlign: "center"
+			} } },
+			[`> ${componentCls}-item,
+          > ${componentCls}-item-group > ${componentCls}-item-group-list > ${componentCls}-item,
+          > ${componentCls}-item-group > ${componentCls}-item-group-list > ${componentCls}-submenu > ${componentCls}-submenu-title,
+          > ${componentCls}-submenu > ${componentCls}-submenu-title`]: {
+				insetInlineStart: 0,
+				paddingInline: `calc(50% - ${unit(token.calc(collapsedIconSize).div(2).equal())} - ${unit(itemMarginInline)})`,
+				textOverflow: "clip",
+				[`
+            ${componentCls}-submenu-arrow,
+            ${componentCls}-submenu-expand-icon
+          `]: { opacity: 0 },
+				[`${componentCls}-item-icon, ${iconCls}`]: {
+					"margin": 0,
+					"fontSize": collapsedIconSize,
+					"lineHeight": unit(itemHeight),
+					"+ span": {
+						display: "inline-block",
+						opacity: 0
+					}
+				}
+			},
+			[`${componentCls}-item-icon, ${iconCls}`]: { display: "inline-block" },
+			"&-tooltip": {
+				"pointerEvents": "none",
+				[`${componentCls}-item-icon, ${iconCls}`]: { display: "none" },
+				"a, a:hover": { color: colorTextLightSolid }
+			},
+			[`${componentCls}-item-group-title`]: {
+				...textEllipsis,
+				paddingInline: paddingXS
+			}
+		} }
+	];
+};
+var vertical_default = getVerticalStyle;
+
+//#endregion
+export { vertical_default as default };