antdv-next 0.0.111 → 1.0.0-alpha.1

package/dist/steps/style/nav.js

@@ -0,0 +1,89 @@
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/steps/style/nav.ts
+const genLegacyNavStyle = (token) => {
+	const { componentCls, fontSizeIcon, calc, navContentMaxWidth, navArrowColor, colorPrimary, motionDurationSlow } = token;
+	const itemCls = `${componentCls}-item`;
+	const stepsNavActiveColor = colorPrimary;
+	return { [`${componentCls}${componentCls}-navigation`]: {
+		[itemCls.repeat(4)]: {
+			"display": "flex",
+			"justifyContent": "center",
+			"position": "relative",
+			"flex": 1,
+			"marginInlineStart": 0,
+			[`${itemCls}-wrapper`]: { paddingBlock: token.paddingSM },
+			[`${itemCls}-section`]: { maxWidth: navContentMaxWidth },
+			[`${itemCls}-rail`]: { display: "none" },
+			"&:before": {
+				position: "absolute",
+				display: "block",
+				backgroundColor: stepsNavActiveColor,
+				transition: `all ${motionDurationSlow}`,
+				transitionTimingFunction: "ease-out",
+				content: "\"\""
+			},
+			"&:not(:last-child):after": {
+				position: "absolute",
+				display: "block",
+				borderTop: `${unit(token.lineWidth)} ${token.lineType} ${navArrowColor}`,
+				borderBottom: "none",
+				borderInlineStart: "none",
+				borderInlineEnd: `${unit(token.lineWidth)} ${token.lineType} ${navArrowColor}`,
+				content: "\"\""
+			},
+			[`&${itemCls}-active`]: {
+				"--steps-item-content-active-color": `var(--steps-item-content-color)`,
+				"--steps-item-icon-active-bg-color": "var(--steps-item-icon-bg-color)",
+				"--steps-item-icon-active-border-color": "var(--steps-item-icon-border-color)",
+				"--steps-item-icon-active-text-color": "var(--steps-item-icon-text-color)"
+			}
+		},
+		[`&${componentCls}-horizontal`]: { [itemCls]: {
+			"&:before": {
+				bottom: 0,
+				insetInlineStart: "50%",
+				width: 0,
+				height: token.lineWidthBold
+			},
+			[`&${itemCls}-active:before`]: {
+				insetInlineStart: 0,
+				width: "100%"
+			},
+			"&:not(:last-child):after": {
+				top: `50%`,
+				insetInlineStart: calc(fontSizeIcon).div(2).mul(-1).add("100%").equal(),
+				width: fontSizeIcon,
+				height: fontSizeIcon,
+				transform: "translateY(-50%) rotate(45deg)"
+			}
+		} },
+		[`&${componentCls}-vertical`]: { [itemCls.repeat(4)]: {
+			[`${itemCls}-content`]: { padding: 0 },
+			"&:before": {
+				insetInlineEnd: 0,
+				top: "50%",
+				width: token.lineWidthBold,
+				height: 0
+			},
+			[`&${itemCls}-active::before`]: {
+				top: 0,
+				height: "100%"
+			},
+			"&:not(:last-child):after": {
+				left: {
+					_skip_check_: true,
+					value: "50%"
+				},
+				top: "100%",
+				width: calc(fontSizeIcon).div(3).mul(2).equal(),
+				height: calc(fontSizeIcon).div(3).mul(2).equal(),
+				transform: "translateY(-50%) translateX(-50%) rotate(135deg)"
+			}
+		} }
+	} };
+};
+var nav_default = genLegacyNavStyle;
+
+//#endregion
+export { nav_default as default };

package/dist/steps/style/panel.js

@@ -0,0 +1,101 @@
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/steps/style/panel.ts
+const genPanelStyle = (token) => {
+	const { componentCls, calc, lineWidthBold, borderRadius, borderRadiusSM, motionDurationMid } = token;
+	const itemCls = `${componentCls}-item`;
+	const borderStyle = `${unit(lineWidthBold)} ${token.lineType} var(--steps-panel-border-color)`;
+	return { [`${componentCls}${componentCls}-panel`]: [
+		{
+			[`${itemCls}-rail`]: { display: "none" },
+			[`&${componentCls}-horizontal`]: {
+				alignItems: "stretch",
+				[itemCls]: {
+					flex: 1,
+					margin: 0
+				}
+			}
+		},
+		{
+			"&": {
+				"--steps-panel-padding": token.paddingSM,
+				"--steps-item-border-radius": borderRadius,
+				[itemCls]: {
+					"--steps-panel-bg-color": "var(--steps-item-icon-bg-color)",
+					"--steps-panel-border-color": "var(--steps-item-icon-border-color)",
+					"--steps-panel-active-bg-color": "var(--steps-item-icon-active-bg-color)",
+					"--steps-panel-active-border-color": "var(--steps-item-icon-active-border-color)",
+					"--steps-panel-title-height": `calc(var(--steps-title-font-size) * var(--steps-title-line-height))`,
+					"--steps-item-base-height": calc("var(--steps-panel-padding)").mul(2).add("var(--steps-icon-size)").add("var(--steps-panel-title-height)").equal(),
+					"--steps-item-base-width": "calc(var(--steps-item-base-height) * 0.7071)",
+					"transition": `background ${motionDurationMid}`
+				}
+			},
+			[`${itemCls}-icon`]: { display: "none" },
+			[`${itemCls}-header`]: { minHeight: "auto" },
+			[`${componentCls}-panel-arrow`]: {
+				position: "absolute",
+				top: calc(lineWidthBold).mul(-1).equal(),
+				insetInlineStart: "100%",
+				zIndex: 1,
+				height: calc(lineWidthBold).mul(2).add("100%").equal(),
+				width: "var(--steps-item-base-width)",
+				overflow: "visible",
+				strokeLinecap: "round",
+				path: {
+					fill: "var(--steps-panel-bg-color)",
+					stroke: "var(--steps-panel-border-color)",
+					strokeWidth: lineWidthBold,
+					vectorEffect: "non-scaling-stroke",
+					transition: `fill ${motionDurationMid}`
+				}
+			},
+			[`${itemCls}:last-child ${componentCls}-panel-arrow`]: { display: "none" },
+			[itemCls]: {
+				"padding": "var(--steps-panel-padding)",
+				"background": "var(--steps-panel-bg-color)",
+				"position": "relative",
+				"borderBlock": borderStyle,
+				"&:not(:first-child)": { paddingInlineStart: `calc(var(--steps-panel-padding) + var(--steps-item-base-width))` },
+				"&:first-child": {
+					borderInlineStart: borderStyle,
+					borderStartStartRadius: "var(--steps-item-border-radius)",
+					borderEndStartRadius: "var(--steps-item-border-radius)"
+				},
+				"&:last-child": {
+					borderInlineEnd: borderStyle,
+					borderStartEndRadius: "var(--steps-item-border-radius)",
+					borderEndEndRadius: "var(--steps-item-border-radius)"
+				},
+				"&-active": {
+					background: "var(--steps-panel-active-bg-color)",
+					borderColor: "var(--steps-panel-active-border-color)",
+					[`${componentCls}-panel-arrow`]: { path: {
+						fill: "var(--steps-panel-active-bg-color)",
+						stroke: "var(--steps-panel-active-border-color)"
+					} },
+					[`${itemCls}-title, ${itemCls}-subtitle, ${itemCls}-content`]: { color: "var(--steps-item-icon-active-text-color)" }
+				}
+			}
+		},
+		{ [`&${componentCls}-small`]: {
+			"--steps-panel-padding": token.paddingXS,
+			"--steps-item-border-radius": borderRadiusSM
+		} },
+		{ [`&${componentCls}-filled`]: { [itemCls]: { "&:not(:first-child)": { clipPath: `polygon(${[
+			`${unit(lineWidthBold)} 0`,
+			"calc(100% + var(--steps-item-base-width)) 0",
+			"calc(100% + var(--steps-item-base-width)) 100%",
+			`${unit(lineWidthBold)} 100%`,
+			`calc(var(--steps-item-base-width) + ${unit(lineWidthBold)}) 50%`
+		].join(",")})` } } } },
+		{ [`&${componentCls}-outlined`]: { [`${componentCls}-panel-arrow`]: {
+			top: calc(lineWidthBold).div(2).mul(-1).equal(),
+			height: calc(lineWidthBold).add("100%").equal()
+		} } }
+	] };
+};
+var panel_default = genPanelStyle;
+
+//#endregion
+export { panel_default as default };

package/dist/steps/style/progress-dot.js

@@ -0,0 +1,38 @@
+import { getItemWithWidthStyle } from "./util.js";
+
+//#region src/steps/style/progress-dot.ts
+const genDotStyle = (token) => {
+	const { componentCls, iconSize, dotSize, dotCurrentSize, marginXXS, lineWidthBold, fontSizeSM } = token;
+	const itemCls = `${componentCls}-item`;
+	return { [`${componentCls}${componentCls}-dot`]: {
+		"--steps-icon-size-active": dotCurrentSize,
+		"--steps-icon-size": dotSize,
+		"--steps-dot-icon-size": dotSize,
+		"--steps-dot-icon-border-width": token.lineWidthBold,
+		"--steps-rail-size": lineWidthBold,
+		"--steps-icon-border-width": lineWidthBold,
+		[`${itemCls}-custom ${itemCls}-icon`]: { fontSize: fontSizeSM },
+		[`${itemCls}-icon`]: {
+			"position": "relative",
+			"&:after": {
+				content: "\"\"",
+				width: iconSize,
+				height: iconSize,
+				display: "block",
+				position: "absolute",
+				top: "50%",
+				left: {
+					_skip_check_: true,
+					value: "50%"
+				},
+				transform: "translate(-50%, -50%)"
+			}
+		},
+		[`${itemCls}-active ${itemCls}-icon`]: { "--steps-icon-size": "var(--steps-icon-size-active)" },
+		[`&${componentCls}-horizontal`]: { [`&, &${componentCls}-small`]: getItemWithWidthStyle(token, marginXXS) }
+	} };
+};
+var progress_dot_default = genDotStyle;
+
+//#endregion
+export { progress_dot_default as default };

package/dist/steps/style/progress.js

@@ -0,0 +1,70 @@
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/steps/style/progress.ts
+const genStepsProgressStyle = (token) => {
+	const { calc, antCls, componentCls, iconSize, iconSizeSM, lineWidthBold, paddingXXS } = token;
+	const itemCls = `${componentCls}-item`;
+	const progressSize = token.calc(iconSize).add(token.calc(lineWidthBold).mul(4).equal()).equal();
+	const progressSizeSM = token.calc(iconSizeSM).add(token.calc(token.lineWidth).mul(4).equal()).equal();
+	const enhanceSize = calc(lineWidthBold).add(lineWidthBold).equal();
+	return {
+		[`${componentCls}${componentCls}-with-progress`]: {
+			"--steps-item-wrapper-padding-top": enhanceSize,
+			[`${itemCls}${itemCls}-process`]: { [`${itemCls}-icon`]: { position: "relative" } },
+			[`${itemCls}-progress-icon`]: {
+				"&-svg": {
+					"--steps-svg-size": calc(enhanceSize).mul(2).add(`var(--steps-icon-size)`).equal(),
+					"--icon-size-ptg-unitless": `calc(100 / tan(atan2(var(--steps-svg-size),1px)))`,
+					"fontSize": `var(--steps-svg-size)`,
+					"lineHeight": `var(--icon-size-ptg-unitless)`,
+					"position": "absolute",
+					"inset": calc(enhanceSize).mul(-1).equal(),
+					"width": "auto",
+					"height": "auto"
+				},
+				"&-circle": {
+					"lineHeight": `var(--icon-size-ptg-unitless)`,
+					"strokeWidth": calc(`var(--icon-size-ptg-unitless)`).mul(lineWidthBold).equal(),
+					"--progress-r": calc(`var(--steps-svg-size)`).sub(lineWidthBold).mul(`var(--icon-size-ptg-unitless)`).div(2).equal(),
+					"r": `var(--progress-r)`,
+					"fill": "none",
+					"cx": 50,
+					"cy": 50,
+					"transition": `all ${token.motionDurationSlow} ease-in-out`,
+					"&-rail": { stroke: token.colorSplit },
+					"&-ptg": { stroke: token.colorPrimary }
+				}
+			}
+		},
+		[`&${componentCls}-with-progress11`]: {
+			[itemCls]: {
+				paddingTop: paddingXXS,
+				paddingInlineStart: paddingXXS
+			},
+			[`${itemCls}-icon`]: {
+				position: "relative",
+				[`${antCls}-progress`]: {
+					"position": "absolute",
+					"left": {
+						_skip_check_: true,
+						value: "50%"
+					},
+					"top": "50%",
+					"transform": "translate(-50%, -50%)",
+					"&-body": {
+						width: `${unit(progressSize)} !important`,
+						height: `${unit(progressSize)} !important`
+					}
+				}
+			},
+			[`&${componentCls}-small`]: { [`${itemCls}-icon ${antCls}-progress-body`]: {
+				width: `${unit(progressSizeSM)} !important`,
+				height: `${unit(progressSizeSM)} !important`
+			} }
+		}
+	};
+};
+var progress_default = genStepsProgressStyle;
+
+//#endregion
+export { progress_default as default };

package/dist/steps/style/rtl.js

@@ -0,0 +1,25 @@
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/steps/style/rtl.ts
+const genRTLStyle = (token) => {
+	const { componentCls, lineWidthBold } = token;
+	const itemCls = `${componentCls}-item`;
+	return { [`${componentCls}${componentCls}-rtl`]: {
+		direction: "rtl",
+		[`&${componentCls}-navigation${componentCls}-horizontal`]: { [`${itemCls}:after`]: { transform: "translateY(-50%) rotate(-45deg)" } },
+		[`&${componentCls}-panel`]: {
+			[`${componentCls}-panel-arrow`]: { transform: `scaleX(-1)` },
+			[`&${componentCls}-filled`]: { [itemCls]: { "&:not(:first-child)": { clipPath: `polygon(${[
+				`calc(0px - var(--steps-item-base-width)) 0px`,
+				`calc(100% - ${unit(lineWidthBold)}) 0px`,
+				`calc(100% - var(--steps-item-base-width) - ${unit(lineWidthBold)}) 50%`,
+				`calc(100% - ${unit(lineWidthBold)}) 100%`,
+				`calc(0px - var(--steps-item-base-width)) 100%`
+			].join(",")})` } } }
+		}
+	} };
+};
+var rtl_default = genRTLStyle;
+
+//#endregion
+export { rtl_default as default };

package/dist/steps/style/small.js

@@ -0,0 +1,20 @@
+import { getItemWithWidthStyle } from "./util.js";
+
+//#region src/steps/style/small.ts
+const genSmallStyle = (token) => {
+	const { componentCls, iconSizeSM, fontSize, lineHeight, marginXS } = token;
+	return { [`${componentCls}${componentCls}-small`]: {
+		"--steps-icon-size": iconSizeSM,
+		"--steps-title-horizontal-item-margin": token.marginSM,
+		"--steps-title-vertical-row-gap": token.paddingXS,
+		"--steps-title-font-size": fontSize,
+		"--steps-title-line-height": lineHeight,
+		"--steps-title-horizontal-rail-margin": token.marginXS,
+		"--steps-title-horizontal-title-height": token.fontHeight,
+		[`&${componentCls}-horizontal${componentCls}-title-vertical`]: getItemWithWidthStyle(token, marginXS)
+	} };
+};
+var small_default = genSmallStyle;
+
+//#endregion
+export { small_default as default };

package/dist/steps/style/status.js

@@ -0,0 +1,182 @@
+//#region src/steps/style/status.ts
+const STATUS_WAIT = "wait";
+const STATUS_PROCESS = "process";
+const STATUS_FINISH = "finish";
+const STATUS_ERROR = "error";
+const genStatusStyle = (token) => {
+	const { componentCls, colorTextDisabled, colorTextLightSolid, colorPrimary, colorTextLabel, colorError, colorText, colorTextDescription, colorBgContainer, colorPrimaryHover } = token;
+	const itemCls = `${componentCls}-item`;
+	return { [componentCls]: [
+		{
+			[itemCls]: {
+				"--steps-item-solid-line-color": "#000",
+				"--steps-item-title-color": "#000",
+				"--steps-item-content-color": "#000",
+				"--steps-item-subtitle-color": "var(--steps-item-content-color)",
+				"--steps-item-icon-custom-color": "#000",
+				"--steps-item-icon-bg-color": "#000",
+				"--steps-item-icon-border-color": "#000",
+				"--steps-item-icon-text-color": "#fff",
+				"--steps-item-icon-dot-color": "#000",
+				"--steps-item-icon-dot-bg-color": "var(--steps-item-icon-dot-color)",
+				"--steps-item-icon-dot-border-color": "var(--steps-item-icon-dot-color)",
+				"--steps-item-text-hover-color": "#000",
+				"--steps-item-icon-bg-hover-color": `var(--steps-item-icon-bg-color)`,
+				"--steps-item-icon-border-hover-color": `var(--steps-item-icon-border-color)`,
+				"--steps-item-icon-text-hover-color": `var(--steps-item-icon-text-color)`,
+				"--steps-item-content-active-color": `var(--steps-item-content-color)`,
+				"--steps-item-icon-active-bg-color": "var(--steps-item-icon-bg-color)",
+				"--steps-item-icon-active-border-color": "var(--steps-item-icon-border-color)",
+				"--steps-item-icon-active-text-color": "var(--steps-item-icon-text-color)",
+				"--steps-item-process-rail-line-style": token.lineType
+			},
+			[`${itemCls}-rail`]: { borderColor: `var(--steps-item-solid-line-color)` },
+			[`${itemCls}-custom ${itemCls}-icon`]: { color: `var(--steps-item-icon-custom-color)` },
+			[`${itemCls}-title`]: { color: `var(--steps-item-title-color)` },
+			[`${itemCls}-subtitle`]: { color: `var(--steps-item-subtitle-color)` },
+			[`${itemCls}-content`]: { color: `var(--steps-item-content-color)` },
+			[`${itemCls}-active ${itemCls}-icon`]: {},
+			[`${itemCls}-active ${itemCls}-content`]: { color: `var(--steps-item-content-active-color)` },
+			[`${itemCls}[role='button']:not(${itemCls}-active):hover`]: { [`${itemCls}-title, ${itemCls}-content`]: { color: `var(--steps-item-text-hover-color)` } },
+			[`&:not(${componentCls}-dot)`]: { [`${itemCls}:not(${itemCls}-custom)`]: {
+				[`${itemCls}-icon`]: {
+					background: `var(--steps-item-icon-bg-color)`,
+					borderColor: `var(--steps-item-icon-border-color)`,
+					color: `var(--steps-item-icon-text-color)`
+				},
+				[`&[role='button']:not(${itemCls}-active):hover`]: { [`${itemCls}-icon`]: {
+					background: `var(--steps-item-icon-bg-hover-color)`,
+					borderColor: `var(--steps-item-icon-border-hover-color)`,
+					color: `var(--steps-item-icon-text-hover-color)`
+				} },
+				[`&${itemCls}-active`]: { [`${itemCls}-icon`]: {
+					background: `var(--steps-item-icon-active-bg-color)`,
+					borderColor: `var(--steps-item-icon-active-border-color)`,
+					color: `var(--steps-item-icon-active-text-color)`
+				} }
+			} },
+			[`&${componentCls}-dot`]: { [`${itemCls}-icon`]: {
+				background: `var(--steps-item-icon-dot-bg-color)`,
+				borderColor: `var(--steps-item-icon-dot-border-color)`,
+				color: `var(--steps-item-icon-dot-color)`,
+				[`&${itemCls}-icon-dot-custom`]: {
+					background: "transparent",
+					border: "none"
+				}
+			} }
+		},
+		{
+			[`${itemCls}-${STATUS_WAIT}`]: {
+				"--steps-item-icon-custom-color": colorTextDisabled,
+				"--steps-item-title-color": colorTextDescription,
+				"--steps-item-content-color": colorTextDescription,
+				"--steps-item-content-active-color": colorText,
+				"--steps-item-text-hover-color": colorPrimaryHover
+			},
+			[`${itemCls}-rail-${STATUS_WAIT}`]: { "--steps-item-solid-line-color": colorTextDisabled },
+			[`${itemCls}-${STATUS_PROCESS}`]: {
+				"--steps-item-icon-custom-color": colorPrimary,
+				"--steps-item-title-color": colorText,
+				"--steps-item-content-color": colorTextDescription,
+				"--steps-item-content-active-color": colorText,
+				"--steps-item-text-hover-color": colorPrimaryHover
+			},
+			[`${itemCls}-rail-${STATUS_PROCESS}`]: {
+				"--steps-item-solid-line-color": colorPrimary,
+				"--steps-rail-line-style": "var(--steps-item-process-rail-line-style)"
+			},
+			[`${itemCls}-${STATUS_FINISH}`]: {
+				"--steps-item-icon-custom-color": colorPrimary,
+				"--steps-item-title-color": colorText,
+				"--steps-item-content-color": colorTextDescription,
+				"--steps-item-content-active-color": colorText,
+				"--steps-item-text-hover-color": colorPrimaryHover
+			},
+			[`${itemCls}-rail-${STATUS_FINISH}`]: { "--steps-item-solid-line-color": colorPrimary },
+			[`${itemCls}-${STATUS_ERROR}`]: {
+				"--steps-item-icon-custom-color": colorError,
+				"--steps-item-title-color": colorError,
+				"--steps-item-content-color": colorError,
+				"--steps-item-content-active-color": colorError,
+				"--steps-item-text-hover-color": token.colorErrorHover
+			},
+			[`${itemCls}-rail-${STATUS_ERROR}`]: { "--steps-item-solid-line-color": colorError }
+		},
+		{ [`&${componentCls}-filled`]: {
+			[itemCls]: { "--steps-item-icon-dot-border-color": "transparent" },
+			[`${itemCls}-${STATUS_WAIT}`]: {
+				"--steps-item-icon-bg-color": token.colorFillTertiary,
+				"--steps-item-icon-border-color": "transparent",
+				"--steps-item-icon-text-color": colorTextLabel,
+				"--steps-item-icon-dot-bg-color": colorTextDisabled,
+				"--steps-item-icon-bg-hover-color": token.colorPrimaryBgHover,
+				"--steps-item-icon-border-hover-color": "transparent",
+				"--steps-item-icon-text-hover-color": colorPrimary,
+				"--steps-item-icon-active-bg-color": colorPrimary,
+				"--steps-item-icon-active-border-color": "transparent",
+				"--steps-item-icon-active-text-color": colorTextLightSolid
+			},
+			[`${itemCls}-${STATUS_PROCESS}, ${itemCls}-${STATUS_FINISH}`]: {
+				"--steps-item-icon-bg-color": token.colorPrimaryBg,
+				"--steps-item-icon-border-color": "transparent",
+				"--steps-item-icon-text-color": colorPrimary,
+				"--steps-item-icon-dot-bg-color": colorPrimary,
+				"--steps-item-icon-bg-hover-color": token.colorPrimaryBgHover,
+				"--steps-item-icon-border-hover-color": "transparent",
+				"--steps-item-icon-text-hover-color": colorPrimary,
+				"--steps-item-icon-active-bg-color": colorPrimary,
+				"--steps-item-icon-active-border-color": "transparent",
+				"--steps-item-icon-active-text-color": colorTextLightSolid
+			},
+			[`${itemCls}-${STATUS_ERROR}`]: {
+				"--steps-item-icon-bg-color": token.colorErrorBg,
+				"--steps-item-icon-border-color": "transparent",
+				"--steps-item-icon-text-color": colorError,
+				"--steps-item-icon-dot-bg-color": colorError,
+				"--steps-item-icon-bg-hover-color": token.colorErrorBgFilledHover,
+				"--steps-item-icon-border-hover-color": "transparent",
+				"--steps-item-icon-text-hover-color": colorError,
+				"--steps-item-icon-active-bg-color": colorError,
+				"--steps-item-icon-active-border-color": "transparent",
+				"--steps-item-icon-active-text-color": colorTextLightSolid
+			}
+		} },
+		{ [`&${componentCls}-outlined`]: {
+			[itemCls]: { "--steps-item-icon-dot-bg-color": "transparent" },
+			[`${itemCls}-${STATUS_WAIT}`]: {
+				"--steps-item-icon-bg-color": colorBgContainer,
+				"--steps-item-icon-border-color": colorTextDisabled,
+				"--steps-item-icon-text-color": colorTextDisabled,
+				"--steps-item-icon-dot-color": colorTextDisabled,
+				"--steps-item-icon-bg-hover-color": "transparent",
+				"--steps-item-icon-border-hover-color": colorPrimaryHover,
+				"--steps-item-icon-text-hover-color": colorPrimaryHover,
+				"--steps-item-icon-active-bg-color": token.colorFillTertiary
+			},
+			[`${itemCls}-${STATUS_PROCESS}, ${itemCls}-${STATUS_FINISH}`]: {
+				"--steps-item-icon-bg-color": colorBgContainer,
+				"--steps-item-icon-border-color": colorPrimary,
+				"--steps-item-icon-text-color": colorPrimary,
+				"--steps-item-icon-dot-color": colorPrimary,
+				"--steps-item-icon-bg-hover-color": "transparent",
+				"--steps-item-icon-border-hover-color": token.colorPrimaryHover,
+				"--steps-item-icon-text-hover-color": token.colorPrimaryHover,
+				"--steps-item-icon-active-bg-color": token.colorPrimaryBg
+			},
+			[`${itemCls}-${STATUS_ERROR}`]: {
+				"--steps-item-icon-bg-color": colorBgContainer,
+				"--steps-item-icon-border-color": colorError,
+				"--steps-item-icon-text-color": colorError,
+				"--steps-item-icon-dot-color": colorError,
+				"--steps-item-icon-bg-hover-color": "transparent",
+				"--steps-item-icon-border-hover-color": token.colorErrorHover,
+				"--steps-item-icon-text-hover-color": token.colorErrorHover,
+				"--steps-item-icon-active-bg-color": token.colorErrorBg
+			}
+		} }
+	] };
+};
+var status_default = genStatusStyle;
+
+//#endregion
+export { status_default as default };

package/dist/steps/style/util.js

@@ -0,0 +1,23 @@
+//#region src/steps/style/util.ts
+function withoutVar(cssVar) {
+	return (cssVar || "--ant-not-exist").replace(/var\((.*)\)/, "$1");
+}
+/**
+* Force override the width related styles.
+* This should be multiple since will conflict with other `rail` styles.
+*/
+function getItemWithWidthStyle(token, marginSize, optionalStyle) {
+	const { calc, componentCls, descriptionMaxWidth } = token;
+	const itemCls = `${componentCls}-item`;
+	return { [`@container style(${withoutVar(descriptionMaxWidth)})`]: [{
+		[`${itemCls}-icon`]: { marginInlineStart: calc(descriptionMaxWidth).sub(`var(--steps-icon-size)`).div(2).equal() },
+		[`${itemCls}-rail`]: {
+			width: "auto",
+			insetInlineStart: calc(descriptionMaxWidth).add(`var(--steps-icon-size)`).div(2).add(marginSize).equal(),
+			insetInlineEnd: calc(descriptionMaxWidth).sub(`var(--steps-icon-size)`).div(2).sub(marginSize).mul(-1).equal()
+		}
+	}, optionalStyle] };
+}
+
+//#endregion
+export { getItemWithWidthStyle };

package/dist/steps/style/vertical.js

@@ -0,0 +1,29 @@
+//#region src/steps/style/vertical.ts
+const genVerticalStyle = (token) => {
+	const { componentCls, calc } = token;
+	const itemCls = `${componentCls}-item`;
+	return { [`${componentCls}-vertical`]: {
+		"--steps-vertical-rail-margin": calc(token.marginXXS).mul(1.5).equal(),
+		"flexDirection": "column",
+		"alignItems": "stretch",
+		[`> ${itemCls}`]: {
+			"minHeight": calc(token.controlHeight).mul(1.5).equal(),
+			"paddingBottom": token.paddingSM,
+			"&:last-child": { paddingBottom: 0 },
+			[`${itemCls}-icon`]: { marginInlineStart: "calc((var(--steps-icon-size-max) - var(--steps-icon-size)) / 2)" },
+			[`${itemCls}-rail`]: {
+				"--steps-rail-offset": calc("var(--steps-heading-height)").sub("var(--steps-icon-size)").div(2).equal(),
+				"borderInlineStartWidth": "var(--steps-rail-size)",
+				"position": "absolute",
+				"top": calc(`var(--steps-icon-size)`).add("var(--steps-item-wrapper-padding-top)").add("var(--steps-rail-offset)").add("var(--steps-vertical-rail-margin)").equal(),
+				"insetInlineStart": calc(`var(--steps-icon-size-max)`).div(2).equal(),
+				"bottom": calc("var(--steps-vertical-rail-margin)").sub("var(--steps-rail-offset)").equal(),
+				"marginInlineStart": `calc(var(--steps-rail-size) / -2)`
+			}
+		}
+	} };
+};
+var vertical_default = genVerticalStyle;
+
+//#endregion
+export { vertical_default as default };

package/dist/style/compact-item-vertical.js

@@ -0,0 +1,34 @@
+//#region src/style/compact-item-vertical.ts
+function compactItemVerticalBorder(token, parentCls, prefixCls) {
+	return {
+		[`&-item:not(${parentCls}-last-item)`]: { marginBottom: token.calc(token.lineWidth).mul(-1).equal() },
+		[`&-item:not(${prefixCls}-status-success)`]: { zIndex: 2 },
+		"&-item": {
+			"&:hover,&:focus,&:active": { zIndex: 3 },
+			"&[disabled]": { zIndex: 0 }
+		}
+	};
+}
+function compactItemBorderVerticalRadius(prefixCls, parentCls) {
+	return {
+		[`&-item:not(${parentCls}-first-item):not(${parentCls}-last-item)`]: { borderRadius: 0 },
+		[`&-item${parentCls}-first-item:not(${parentCls}-last-item)`]: { [`&, &${prefixCls}-sm, &${prefixCls}-lg`]: {
+			borderEndEndRadius: 0,
+			borderEndStartRadius: 0
+		} },
+		[`&-item${parentCls}-last-item:not(${parentCls}-first-item)`]: { [`&, &${prefixCls}-sm, &${prefixCls}-lg`]: {
+			borderStartStartRadius: 0,
+			borderStartEndRadius: 0
+		} }
+	};
+}
+function genCompactItemVerticalStyle(token) {
+	const compactCls = `${token.componentCls}-compact-vertical`;
+	return { [compactCls]: {
+		...compactItemVerticalBorder(token, compactCls, token.componentCls),
+		...compactItemBorderVerticalRadius(token.componentCls, compactCls)
+	} };
+}
+
+//#endregion
+export { genCompactItemVerticalStyle };

package/dist/style/compact-item.js

@@ -0,0 +1,45 @@
+//#region src/style/compact-item.ts
+function compactItemBorder(token, parentCls, options, prefixCls) {
+	const { focusElCls, focus, borderElCls } = options;
+	const childCombinator = borderElCls ? "> *" : "";
+	const hoverEffects = [
+		"hover",
+		focus ? "focus" : null,
+		"active"
+	].filter(Boolean).map((n) => `&:${n} ${childCombinator}`).join(",");
+	return {
+		[`&-item:not(${parentCls}-last-item)`]: { marginInlineEnd: token.calc(token.lineWidth).mul(-1).equal() },
+		[`&-item:not(${prefixCls}-status-success)`]: { zIndex: 2 },
+		"&-item": {
+			[hoverEffects]: { zIndex: 3 },
+			...focusElCls ? { [`&${focusElCls}`]: { zIndex: 3 } } : {},
+			[`&[disabled] ${childCombinator}`]: { zIndex: 0 }
+		}
+	};
+}
+function compactItemBorderRadius(prefixCls, parentCls, options) {
+	const { borderElCls } = options;
+	const childCombinator = borderElCls ? `> ${borderElCls}` : "";
+	return {
+		[`&-item:not(${parentCls}-first-item):not(${parentCls}-last-item) ${childCombinator}`]: { borderRadius: 0 },
+		[`&-item:not(${parentCls}-last-item)${parentCls}-first-item`]: { [`& ${childCombinator}, &${prefixCls}-sm ${childCombinator}, &${prefixCls}-lg ${childCombinator}`]: {
+			borderStartEndRadius: 0,
+			borderEndEndRadius: 0
+		} },
+		[`&-item:not(${parentCls}-first-item)${parentCls}-last-item`]: { [`& ${childCombinator}, &${prefixCls}-sm ${childCombinator}, &${prefixCls}-lg ${childCombinator}`]: {
+			borderStartStartRadius: 0,
+			borderEndStartRadius: 0
+		} }
+	};
+}
+function genCompactItemStyle(token, options = { focus: true }) {
+	const { componentCls } = token;
+	const compactCls = `${componentCls}-compact`;
+	return { [compactCls]: {
+		...compactItemBorder(token, compactCls, options, componentCls),
+		...compactItemBorderRadius(componentCls, compactCls, options)
+	} };
+}
+
+//#endregion
+export { genCompactItemStyle };