@zboson/ui 0.0.0-stage → 0.0.2

package/dist/steps/index.js

@@ -0,0 +1,303 @@
+import { devUseWarning, isDev } from "../_util/warning.js";
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { useSize } from "../config-provider/hooks/useSize.js";
+import { genCssVar } from "../theme/util/genStyleUtils.js";
+import { getAttrStyleAndClass, useMergeSemantic, useSemanticRootStyle, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import { getSlotPropsFnRun, toPropsRefs } from "../_util/tools.js";
+import InternalTooltip from "../tooltip/index.js";
+import { TARGET_CLS } from "../_util/wave/interface.js";
+import wave_default from "../_util/wave/index.js";
+import useBreakpoint from "../grid/hooks/useBreakpoint.js";
+import { useInternalContext } from "./context.js";
+import PanelArrow from "./PanelArrow.js";
+import ProgressIcon from "./ProgressIcon.js";
+import style_default from "./style/index.js";
+import useDisplaySteps from "./useDisplaySteps.js";
+import { Fragment, computed, createVNode, defineComponent, isVNode, mergeDefaults, mergeProps } from "vue";
+import { clsx } from "@v-c/util";
+import { CheckOutlined, CloseOutlined } from "@zboson/icons";
+import VcSteps from "@v-c/steps";
+//#region src/steps/index.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const waveEffectClassNames = { itemIcon: TARGET_CLS };
+const Steps = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit }) => {
+	const internalContent = useInternalContext();
+	const { direction: rtlDirection, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles, prefixCls, rootPrefixCls } = useComponentBaseConfig("steps", props);
+	const { size, items, responsive, type, classes, styles } = toPropsRefs(props, "size", "items", "responsive", "type", "classes", "styles");
+	const components = computed(() => {
+		return {
+			root: internalContent.value?.rootComponent,
+			item: internalContent.value?.itemComponent
+		};
+	});
+	const itemIconCls = computed(() => `${prefixCls.value}-item-icon`);
+	const [hashId, cssVarCls] = style_default(prefixCls);
+	const [varName] = genCssVar(rootPrefixCls.value, "cmp-steps");
+	const mergedSize = useSize(size);
+	const mergedItems = computed(() => (items.value || []).filter(Boolean));
+	const mergedCurrent = computed(() => props.current ?? 0);
+	const mergedInitial = computed(() => props.initial ?? 0);
+	const { canApplyMaxCount, displaySteps, mappedDisplayCurrent, displayItems } = useDisplaySteps(mergedItems, mergedCurrent, mergedInitial, computed(() => props.maxCount), prefixCls);
+	const breakpoint = useBreakpoint(responsive);
+	const xs = computed(() => breakpoint.value?.xs);
+	const mergedType = computed(() => {
+		if (type.value && type.value !== "default") return type.value;
+		if (props.progressDot) return "dot";
+		return type.value;
+	});
+	const isInline = computed(() => mergedType.value === "inline");
+	const isDot = computed(() => mergedType.value === "dot" || mergedType.value === "inline");
+	const mergedOrientation = computed(() => {
+		const nextOrientation = props.orientation || props.direction;
+		if (mergedType.value === "panel") return "horizontal";
+		return responsive.value && xs.value || nextOrientation === "vertical" ? "vertical" : "horizontal";
+	});
+	const mergedTitlePlacement = computed(() => {
+		if (isDot.value || mergedOrientation.value === "vertical") return mergedOrientation.value === "vertical" ? "horizontal" : "vertical";
+		if (type.value === "navigation") return "horizontal";
+		return props.titlePlacement || props.labelPlacement || "horizontal";
+	});
+	const mergedPercent = computed(() => isInline.value ? void 0 : props?.percent);
+	const mergedProps = computed(() => {
+		return {
+			...props,
+			size: mergedSize.value,
+			type: mergedType.value,
+			orientation: mergedOrientation.value,
+			titlePlacement: mergedTitlePlacement.value,
+			percent: mergedPercent.value
+		};
+	});
+	const contextStyleRoot = useSemanticRootStyle(contextStyle);
+	const styleRoot = useSemanticRootStyle(computed(() => attrs.style));
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(computed(() => waveEffectClassNames), contextClassNames, classes), useToArr(contextStyles, contextStyleRoot, styles, styleRoot), useToProps(mergedProps));
+	if (isDev) {
+		const { labelPlacement, progressDot, direction } = props;
+		const warning = devUseWarning("Steps");
+		warning.deprecated(props.size !== "default", "size=\"default\"", "size=\"medium\"");
+		warning.deprecated(!labelPlacement, "labelPlacement", "titlePlacement");
+		warning.deprecated(!progressDot, "progressDot", "type=\"dot\"");
+		warning.deprecated(!direction, "direction", "orientation");
+		warning.deprecated(mergedItems.value.every((item) => !item.description), "items.description", "items.content");
+		warning(props.maxCount === void 0 || props.maxCount >= 3, "usage", "`maxCount` should be greater than or equal to 3.");
+	}
+	return () => {
+		const { variant, onChange, offset, ellipsis, rootClass, classes: _classes, size: _size, type: _type, direction: _direction, labelPlacement: _labelPlacement, progressDot: _progressDot, responsive: _responsive, percent: _percent, current: _current, initial: _initial, maxCount: _maxCount, ...restProps } = props;
+		const { className, restAttrs } = getAttrStyleAndClass(attrs);
+		const iconRender = slots?.iconRender || props?.iconRender;
+		const legacyProgressDotRenderFn = () => {
+			return mergedType.value === "dot" && typeof props.progressDot === "function" ? props.progressDot : void 0;
+		};
+		const legacyProgressDotRender = legacyProgressDotRenderFn();
+		const internalIconRender = (_, info) => {
+			const { index, item, active, components: { Icon: StepIcon } } = info;
+			const originIndex = displaySteps.value[index]?.originIndex;
+			const mappedIndex = originIndex !== void 0 && originIndex >= 0 ? mergedInitial.value + originIndex : index;
+			const { status, icon } = item;
+			let iconContent;
+			if (isDot.value || icon) iconContent = icon;
+			else switch (status) {
+				case "finish":
+					iconContent = createVNode(CheckOutlined, { "class": `${itemIconCls.value}-finish` }, null);
+					break;
+				case "error":
+					iconContent = createVNode(CloseOutlined, { "class": `${itemIconCls.value}-error` }, null);
+					break;
+				default: {
+					let numNode = createVNode("span", { "class": `${itemIconCls.value}-number` }, [mappedIndex + 1]);
+					if (status === "process" && mergedPercent.value !== void 0) {
+						const _numNode = function() {
+							return numNode;
+						}();
+						numNode = createVNode(ProgressIcon, {
+							"prefixCls": prefixCls.value,
+							"rootPrefixCls": rootPrefixCls.value,
+							"percent": mergedPercent.value
+						}, _isSlot(numNode) ? numNode : { default: () => [_numNode] });
+					}
+					iconContent = numNode;
+				}
+			}
+			let iconNode = createVNode(StepIcon, null, _isSlot(iconContent) ? iconContent : { default: () => [iconContent] });
+			if (iconRender) iconNode = iconRender({
+				oriNode: iconNode,
+				info: {
+					index: mappedIndex,
+					active,
+					item,
+					components: { Icon: StepIcon }
+				}
+			});
+			else if (typeof legacyProgressDotRender === "function") iconNode = legacyProgressDotRender({
+				iconDot: iconNode,
+				info: {
+					index: mappedIndex,
+					...item
+				}
+			});
+			return iconNode;
+		};
+		const itemRender = (itemNode, itemInfo) => {
+			let content = itemNode;
+			const itemContent = getSlotPropsFnRun({}, itemInfo.item, "content");
+			if (isInline.value && itemContent) content = createVNode(InternalTooltip, {
+				"destroyOnHidden": true,
+				"title": itemContent
+			}, _isSlot(itemNode) ? itemNode : { default: () => [itemNode] });
+			return createVNode(wave_default, {
+				"component": "Steps",
+				"disabled": itemInfo.item.disabled || !onChange,
+				"colorSource": variant === "filled" ? "color" : null
+			}, _isSlot(content) ? content : { default: () => [content] });
+		};
+		const itemWrapperRender = mergedType.value === "panel" ? (itemNode) => {
+			return createVNode(Fragment, null, [itemNode, createVNode(PanelArrow, { "prefixCls": prefixCls.value }, null)]);
+		} : void 0;
+		const mergedStyle = { [varName("items-offset")]: `${offset}` };
+		const stepsClassName = clsx(contextClassName.value, `${prefixCls.value}-${variant}`, {
+			[`${prefixCls.value}-${mergedType.value}`]: mergedType.value !== "dot" ? mergedType.value : false,
+			[`${prefixCls.value}-rtl`]: rtlDirection.value === "rtl",
+			[`${prefixCls.value}-dot`]: isDot.value,
+			[`${prefixCls.value}-ellipsis`]: ellipsis,
+			[`${prefixCls.value}-max-count`]: canApplyMaxCount.value,
+			[`${prefixCls.value}-with-progress`]: mergedPercent.value !== void 0,
+			[`${prefixCls.value}-small`]: mergedSize.value === "small"
+		}, className, rootClass, hashId.value, cssVarCls.value);
+		return createVNode(VcSteps, mergeProps(restProps, restAttrs, {
+			"prefixCls": prefixCls.value,
+			"className": stepsClassName,
+			"style": mergedStyle,
+			"classNames": mergedClassNames.value,
+			"styles": mergedStyles.value,
+			"orientation": mergedOrientation.value,
+			"titlePlacement": mergedTitlePlacement.value,
+			"components": components.value,
+			"initial": 0,
+			"current": mappedDisplayCurrent.value,
+			"items": displayItems.value,
+			"onChange": (displayCurrent) => {
+				const target = displaySteps.value[displayCurrent];
+				const originIndex = target && target.originIndex >= 0 ? target.originIndex : displayCurrent;
+				const next = mergedInitial.value + originIndex;
+				onChange?.(next);
+				emit("update:current", next);
+			},
+			"iconRender": internalIconRender,
+			"itemRender": itemRender,
+			"itemWrapperRender": itemWrapperRender
+		}), null);
+	};
+}, {
+	props: /*@__PURE__*/ mergeDefaults({
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		variant: {
+			type: String,
+			required: false
+		},
+		size: {
+			type: [String, null],
+			required: false
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		direction: {
+			type: String,
+			required: false
+		},
+		orientation: {
+			type: String,
+			required: false
+		},
+		labelPlacement: {
+			type: String,
+			required: false
+		},
+		titlePlacement: {
+			type: String,
+			required: false
+		},
+		progressDot: {
+			type: [Boolean, Function],
+			required: false,
+			default: void 0
+		},
+		responsive: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		ellipsis: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		maxCount: {
+			type: Number,
+			required: false
+		},
+		offset: {
+			type: Number,
+			required: false
+		},
+		current: {
+			type: Number,
+			required: false
+		},
+		initial: {
+			type: Number,
+			required: false
+		},
+		items: {
+			type: Array,
+			required: false
+		},
+		percent: {
+			type: Number,
+			required: false
+		},
+		status: {
+			type: String,
+			required: false
+		},
+		iconRender: {
+			type: Function,
+			required: false
+		},
+		onChange: {
+			type: Function,
+			required: false
+		}
+	}, {
+		variant: "filled",
+		responsive: true,
+		offset: 0,
+		current: 0
+	}),
+	emits: ["update:current"],
+	name: "ASteps",
+	inheritAttrs: false
+});
+Steps.install = (app) => {
+	app.component(Steps.name, Steps);
+};
+//#endregion
+export { Steps as default };

package/dist/steps/style/horizontal.d.ts

@@ -0,0 +1,8 @@
+import { StepsToken } from "./index.js";
+import { GenerateStyle } from "../../theme/interface/index.js";
+import "../../theme/internal.js";
+import { CSSObject } from "@zboson/cssinjs";
+//#region src/steps/style/horizontal.d.ts
+declare const genHorizontalStyle: GenerateStyle<StepsToken, CSSObject>;
+//#endregion
+export { genHorizontalStyle as default };

package/dist/steps/style/horizontal.js

@@ -0,0 +1,24 @@
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
+//#region src/steps/style/horizontal.ts
+const genHorizontalStyle = (token) => {
+	const { componentCls, antCls } = token;
+	const itemCls = `${componentCls}-item`;
+	const [varName, varRef] = genCssVar(antCls, "cmp-steps");
+	return { [`${componentCls}-horizontal`]: { [`> ${itemCls}`]: {
+		flex: "1 1 auto",
+		minWidth: token.iconSize,
+		[`${itemCls}-rail`]: {
+			[varName("horizontal-rail-margin")]: `calc(${varRef("icon-size-max")} / 2 + ${varRef("item-wrapper-padding-top")})`,
+			position: "static",
+			marginTop: varRef("horizontal-rail-margin"),
+			width: "auto",
+			borderBlockStartWidth: varRef("rail-size"),
+			flex: 1,
+			minWidth: 0,
+			alignSelf: "flex-start",
+			transform: "translateY(-50%)"
+		}
+	} } };
+};
+//#endregion
+export { genHorizontalStyle as default };

package/dist/steps/style/icon.d.ts

@@ -0,0 +1,8 @@
+import { StepsToken } from "./index.js";
+import { GenerateStyle } from "../../theme/interface/index.js";
+import "../../theme/internal.js";
+import { CSSObject } from "@zboson/cssinjs";
+//#region src/steps/style/icon.d.ts
+declare const genIconStyle: GenerateStyle<StepsToken, CSSObject>;
+//#endregion
+export { genIconStyle as default };

package/dist/steps/style/icon.js

@@ -0,0 +1,41 @@
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
+//#region src/steps/style/icon.ts
+const genIconStyle = (token) => {
+	const { componentCls, customIconFontSize, motionDurationSlow, iconSize, lineWidth, lineType, antCls } = token;
+	const itemCls = `${componentCls}-item`;
+	const [varName, varRef] = genCssVar(antCls, "cmp-steps");
+	return { [componentCls]: {
+		[varName("icon-size")]: iconSize,
+		[varName("icon-border-width")]: lineWidth,
+		[`${itemCls}-icon`]: {
+			width: varRef("icon-size"),
+			height: varRef("icon-size"),
+			margin: 0,
+			flex: "none",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			fontSize: token.iconFontSize,
+			fontFamily: token.fontFamily,
+			lineHeight: varRef("icon-size"),
+			textAlign: "center",
+			borderRadius: varRef("icon-size"),
+			border: `${varRef("icon-border-width")} ${lineType} transparent`,
+			transition: [
+				"background-color",
+				"border",
+				"color",
+				"inset",
+				"transform"
+			].map((key) => `${key} ${motionDurationSlow}`).join(", "),
+			zIndex: 1
+		},
+		[`${itemCls}-custom ${itemCls}-icon`]: {
+			background: "none",
+			border: 0,
+			fontSize: customIconFontSize
+		}
+	} };
+};
+//#endregion
+export { genIconStyle as default };

package/dist/steps/style/index.d.ts

@@ -0,0 +1,85 @@
+import { SeedToken } from "../../theme/interface/seeds.js";
+import { AliasToken } from "../../theme/interface/alias.js";
+import { ComponentTokenMap } from "../../theme/interface/components.js";
+import { FullToken, GetDefaultToken } from "../../theme/interface/cssinjs-utils.js";
+import "../../theme/interface/index.js";
+import "../../theme/internal.js";
+import { CSSProperties } from "vue";
+//#region src/steps/style/index.d.ts
+interface ComponentToken {
+  /**
+   * @desc 描述区域最大宽度
+   * @descEN Max width of description area
+   * @deprecated This value has been removed by default since v6
+   */
+  descriptionMaxWidth?: number;
+  /**
+   * @desc 自定义图标容器尺寸
+   * @descEN Size of custom icon container
+   */
+  customIconSize: number;
+  /**
+   * @desc 自定义图标 top
+   * @descEN Top of custom icon
+   */
+  customIconTop: number;
+  /**
+   * @desc 自定义图标大小
+   * @descEN Font size of custom icon
+   */
+  customIconFontSize: number;
+  /**
+   * @desc 图标容器尺寸
+   * @descEN Size of icon container
+   */
+  iconSize: number;
+  /**
+   * @desc 图标 top
+   * @descEN Top of icon
+   */
+  iconTop: number;
+  /**
+   * @desc 图标大小
+   * @descEN Size of icon
+   */
+  iconFontSize: number;
+  /**
+   * @desc 点状步骤点大小
+   * @descEN Size of dot
+   */
+  dotSize: number;
+  /**
+   * @desc 点状步骤点当前大小
+   * @descEN Current size of dot
+   */
+  dotCurrentSize: number;
+  /**
+   * @desc 可跳转步骤条箭头颜色
+   * @descEN Color of arrow in nav
+   */
+  navArrowColor: string;
+  /**
+   * @desc 可跳转步骤条内容最大宽度
+   * @descEN Max width of nav content
+   */
+  navContentMaxWidth: CSSProperties['maxWidth'];
+  /**
+   * @desc 小号步骤条图标大小
+   * @descEN Size of small steps icon
+   */
+  iconSizeSM: number | string;
+  /**
+   * TODO: deprecated warning since not used anymore
+   * @desc 标题行高
+   * @descEN Line height of title
+   * @deprecated Not used anymore
+   */
+  titleLineHeight: number | string;
+}
+interface StepsToken extends FullToken<'Steps'> {
+  inlineDotSize: number;
+}
+declare const prepareComponentToken: GetDefaultToken<'Steps'>;
+declare const _default: (prefixCls: import("vue").Ref<string>, rootCls?: import("vue").Ref<string | undefined>, tokenResult?: import("@zboson/cssinjs").UseTokenReturn<ComponentTokenMap, AliasToken, SeedToken> | undefined) => readonly [import("vue").Ref<string, string>, import("vue").ComputedRef<string | undefined>];
+//#endregion
+export { ComponentToken, StepsToken, _default as default, prepareComponentToken };

package/dist/steps/style/index.js

@@ -0,0 +1,118 @@
+import { genFocusOutline, resetComponent, textEllipsis } from "../../style/index.js";
+import { genCssVar, genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import genHorizontalStyle from "./horizontal.js";
+import genIconStyle from "./icon.js";
+import genInlineStyle from "./inline.js";
+import genLabelPlacementStyle from "./label-placement.js";
+import genMaxCountStyle from "./max-count.js";
+import genLegacyNavStyle from "./nav.js";
+import genPanelStyle from "./panel.js";
+import genStepsProgressStyle from "./progress.js";
+import genDotStyle from "./progress-dot.js";
+import genRTLStyle from "./rtl.js";
+import genSmallStyle from "./small.js";
+import genStatusStyle from "./status.js";
+import genVerticalStyle from "./vertical.js";
+//#region src/steps/style/index.ts
+const genBasicStyle = (token) => {
+	const { componentCls, antCls } = token;
+	const itemCls = `${componentCls}-item`;
+	const [varName, varRef] = genCssVar(antCls, "cmp-steps");
+	return { [componentCls]: {
+		[varName("title-font-size")]: token.fontSizeLG,
+		[varName("title-line-height")]: token.lineHeightLG,
+		[varName("subtitle-font-size")]: token.fontSize,
+		[varName("subtitle-line-height")]: token.lineHeight,
+		[varName("item-wrapper-padding-top")]: "0px",
+		[varName("rail-size")]: token.lineWidth,
+		[varName("rail-line-style")]: token.lineType,
+		...resetComponent(token),
+		display: "flex",
+		flexWrap: "nowrap",
+		alignItems: "flex-start",
+		[itemCls]: {
+			flex: "none",
+			position: "relative"
+		},
+		[`${itemCls}-wrapper`]: {
+			display: "flex",
+			flexWrap: "nowrap",
+			paddingTop: varRef("item-wrapper-padding-top")
+		},
+		[`${itemCls}-header`]: {
+			display: "flex",
+			flexWrap: "nowrap",
+			alignItems: "center"
+		},
+		[`${itemCls}-title`]: {
+			color: token.colorText,
+			fontSize: varRef("title-font-size"),
+			lineHeight: varRef("title-line-height"),
+			wordBreak: "break-word"
+		},
+		[`${itemCls}-subtitle`]: {
+			color: token.colorTextDescription,
+			fontWeight: 400,
+			fontSize: varRef("subtitle-font-size"),
+			lineHeight: varRef("subtitle-line-height"),
+			marginInlineStart: token.marginXS,
+			wordBreak: "break-word"
+		},
+		[`${itemCls}-content`]: {
+			color: token.colorTextDescription,
+			fontSize: token.fontSize,
+			lineHeight: token.lineHeight,
+			wordBreak: "break-word"
+		},
+		[`${itemCls}-rail`]: {
+			borderStyle: varRef("rail-line-style"),
+			borderWidth: 0
+		},
+		[`${itemCls}-title, ${itemCls}-subtitle, ${itemCls}-content, ${itemCls}-rail`]: { transition: `all ${token.motionDurationSlow}` },
+		[`&${componentCls}-ellipsis`]: { [`${itemCls}-title, ${itemCls}-subtitle, ${itemCls}-content`]: textEllipsis },
+		[`${itemCls}[role='button']:focus-visible`]: genFocusOutline(token),
+		[`${itemCls}[role='button']:not(${itemCls}-active):hover`]: { cursor: "pointer" }
+	} };
+};
+const prepareComponentToken = (token) => ({
+	titleLineHeight: token.controlHeight,
+	customIconSize: token.controlHeight,
+	customIconTop: 0,
+	customIconFontSize: token.controlHeightSM,
+	iconSize: token.controlHeight,
+	iconTop: -.5,
+	iconFontSize: token.fontSize,
+	iconSizeSM: token.fontSizeHeading3,
+	dotSize: token.controlHeight / 4,
+	dotCurrentSize: token.controlHeightLG / 4,
+	navArrowColor: token.colorTextDisabled,
+	navContentMaxWidth: "unset",
+	descriptionMaxWidth: void 0,
+	waitIconColor: token.wireframe ? token.colorTextDisabled : token.colorTextLabel,
+	waitIconBgColor: token.wireframe ? token.colorBgContainer : token.colorFillContent,
+	waitIconBorderColor: token.wireframe ? token.colorTextDisabled : "transparent",
+	finishIconBgColor: token.wireframe ? token.colorBgContainer : token.controlItemBgActive,
+	finishIconBorderColor: token.wireframe ? token.colorPrimary : token.controlItemBgActive
+});
+var style_default = genStyleHooks("Steps", (token) => {
+	const stepsToken = mergeToken(token, { inlineDotSize: 6 });
+	return [
+		genBasicStyle(stepsToken),
+		genIconStyle(stepsToken),
+		genVerticalStyle(stepsToken),
+		genHorizontalStyle(stepsToken),
+		genLabelPlacementStyle(stepsToken),
+		genSmallStyle(stepsToken),
+		genDotStyle(stepsToken),
+		genStatusStyle(stepsToken),
+		genLegacyNavStyle(stepsToken),
+		genPanelStyle(stepsToken),
+		genInlineStyle(stepsToken),
+		genStepsProgressStyle(stepsToken),
+		genRTLStyle(stepsToken),
+		genMaxCountStyle(stepsToken)
+	];
+}, prepareComponentToken);
+//#endregion
+export { style_default as default, prepareComponentToken };

package/dist/steps/style/inline.d.ts

@@ -0,0 +1,8 @@
+import { StepsToken } from "./index.js";
+import { GenerateStyle } from "../../theme/interface/index.js";
+import "../../theme/internal.js";
+import { CSSObject } from "@zboson/cssinjs";
+//#region src/steps/style/inline.d.ts
+declare const genInlineStyle: GenerateStyle<StepsToken, CSSObject>;
+//#endregion
+export { genInlineStyle as default };

package/dist/steps/style/inline.js

@@ -0,0 +1,47 @@
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
+//#region src/steps/style/inline.ts
+const genInlineStyle = (token) => {
+	const { componentCls, inlineDotSize, paddingXS, lineWidth, antCls, calc } = token;
+	const containerPaddingTop = calc(paddingXS).add(lineWidth).equal();
+	const itemCls = `${componentCls}-item`;
+	const [varName, varRef] = genCssVar(antCls, "cmp-steps");
+	return { [`${componentCls}-inline`]: {
+		[varName("items-offset")]: "0",
+		[varName("item-wrapper-padding-top")]: containerPaddingTop,
+		display: "inline-flex",
+		"&:before": {
+			content: "\"\"",
+			flex: varRef("items-offset")
+		},
+		[itemCls]: {
+			[varName("title-vertical-row-gap")]: paddingXS,
+			[varName("icon-size")]: inlineDotSize,
+			[varName("icon-size-active")]: inlineDotSize,
+			[varName("title-font-size")]: token.fontSizeSM,
+			[varName("title-line-height")]: token.lineHeightSM,
+			[varName("item-title-color")]: token.colorTextSecondary,
+			[varName("subtitle-font-size")]: token.fontSizeSM,
+			[varName("subtitle-line-height")]: token.lineHeightSM,
+			[varName("item-subtitle-color")]: token.colorTextQuaternary,
+			[varName("rail-size")]: token.lineWidth,
+			[varName("title-horizontal-rail-gap")]: "0px",
+			flex: 1,
+			"&-wrapper": {
+				paddingInline: token.paddingXXS,
+				marginInline: token.calc(token.marginXXS).div(2).equal(),
+				borderRadius: token.borderRadiusSM,
+				cursor: "pointer",
+				transition: `background-color ${token.motionDurationMid}`,
+				"&:hover": { background: token.controlItemBgHover }
+			},
+			"&-icon": { [`${itemCls}-icon-dot`]: { "&:after": { display: "none" } } },
+			"&-title": {
+				fontWeight: 400,
+				whiteSpace: "nowrap"
+			},
+			"&-content": { display: "none" }
+		}
+	} };
+};
+//#endregion
+export { genInlineStyle as default };

package/dist/steps/style/label-placement.d.ts

@@ -0,0 +1,8 @@
+import { StepsToken } from "./index.js";
+import { GenerateStyle } from "../../theme/interface/index.js";
+import "../../theme/internal.js";
+import { CSSObject } from "@zboson/cssinjs";
+//#region src/steps/style/label-placement.d.ts
+declare const genLabelPlacementStyle: GenerateStyle<StepsToken, CSSObject>;
+//#endregion
+export { genLabelPlacementStyle as default };