@zboson/ui 0.0.0-stage → 0.0.2

package/dist/steps/style/status.js

@@ -0,0 +1,182 @@
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
+//#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, colorErrorHover, colorErrorBgFilledHover, colorFillTertiary, colorErrorBg, colorPrimaryBgHover, colorPrimaryBg, colorText, colorTextDescription, colorBgContainer, colorPrimaryHover, lineType, antCls } = token;
+	const itemCls = `${componentCls}-item`;
+	const [varName, varRef] = genCssVar(antCls, "cmp-steps");
+	return { [componentCls]: [
+		{
+			[itemCls]: {
+				[varName("item-solid-line-color")]: "#000",
+				[varName("item-title-color")]: "#000",
+				[varName("item-content-color")]: "#000",
+				[varName("item-subtitle-color")]: varRef("item-content-color"),
+				[varName("item-icon-custom-color")]: "#000",
+				[varName("item-icon-bg-color")]: "#000",
+				[varName("item-icon-border-color")]: "#000",
+				[varName("item-icon-text-color")]: "#fff",
+				[varName("item-icon-dot-color")]: "#000",
+				[varName("item-icon-dot-bg-color")]: varRef("item-icon-dot-color"),
+				[varName("item-icon-dot-border-color")]: varRef("item-icon-dot-color"),
+				[varName("item-text-hover-color")]: "#000",
+				[varName("item-icon-bg-hover-color")]: varRef("item-icon-bg-color"),
+				[varName("item-icon-border-hover-color")]: varRef("item-icon-border-color"),
+				[varName("item-icon-text-hover-color")]: varRef("item-icon-text-color"),
+				[varName("item-content-active-color")]: varRef("item-content-color"),
+				[varName("item-icon-active-bg-color")]: varRef("item-icon-bg-color"),
+				[varName("item-icon-active-border-color")]: varRef("item-icon-border-color"),
+				[varName("item-icon-active-text-color")]: varRef("item-icon-text-color"),
+				[varName("item-process-rail-line-style")]: lineType
+			},
+			[`${itemCls}-rail`]: { borderColor: varRef("item-solid-line-color") },
+			[`${itemCls}-custom ${itemCls}-icon`]: { color: varRef("item-icon-custom-color") },
+			[`${itemCls}-title`]: { color: varRef("item-title-color") },
+			[`${itemCls}-subtitle`]: { color: varRef("item-subtitle-color") },
+			[`${itemCls}-content`]: { color: varRef("item-content-color") },
+			[`${itemCls}-active ${itemCls}-icon`]: {},
+			[`${itemCls}-active ${itemCls}-content`]: { color: varRef("item-content-active-color") },
+			[`${itemCls}[role='button']:not(${itemCls}-active):hover`]: { [`${itemCls}-title, ${itemCls}-content`]: { color: varRef("item-text-hover-color") } },
+			[`&:not(${componentCls}-dot)`]: { [`${itemCls}:not(${itemCls}-custom)`]: {
+				[`${itemCls}-icon`]: {
+					background: varRef("item-icon-bg-color"),
+					borderColor: varRef("item-icon-border-color"),
+					color: varRef("item-icon-text-color")
+				},
+				[`&[role='button']:not(${itemCls}-active):hover`]: { [`${itemCls}-icon`]: {
+					background: varRef("item-icon-bg-hover-color"),
+					borderColor: varRef("item-icon-border-hover-color"),
+					color: varRef("item-icon-text-hover-color")
+				} },
+				[`&${itemCls}-active`]: { [`${itemCls}-icon`]: {
+					background: varRef("item-icon-active-bg-color"),
+					borderColor: varRef("item-icon-active-border-color"),
+					color: varRef("item-icon-active-text-color")
+				} }
+			} },
+			[`&${componentCls}-dot`]: { [`${itemCls}-icon`]: {
+				background: varRef("item-icon-dot-bg-color"),
+				borderColor: varRef("item-icon-dot-border-color"),
+				color: varRef("item-icon-dot-color"),
+				[`&${itemCls}-icon-dot-custom`]: {
+					background: "transparent",
+					border: "none"
+				}
+			} }
+		},
+		{
+			[`${itemCls}-${STATUS_WAIT}`]: {
+				[varName("item-icon-custom-color")]: colorTextDisabled,
+				[varName("item-title-color")]: colorTextDescription,
+				[varName("item-content-color")]: colorTextDescription,
+				[varName("item-content-active-color")]: colorText,
+				[varName("item-text-hover-color")]: colorPrimaryHover
+			},
+			[`${itemCls}-rail-${STATUS_WAIT}`]: { [varName("item-solid-line-color")]: colorTextDisabled },
+			[`${itemCls}-${STATUS_PROCESS}`]: {
+				[varName("item-icon-custom-color")]: colorPrimary,
+				[varName("item-title-color")]: colorText,
+				[varName("item-content-color")]: colorTextDescription,
+				[varName("item-content-active-color")]: colorText,
+				[varName("item-text-hover-color")]: colorPrimaryHover
+			},
+			[`${itemCls}-rail-${STATUS_PROCESS}`]: {
+				[varName("item-solid-line-color")]: colorPrimary,
+				[varName("rail-line-style")]: varRef("item-process-rail-line-style")
+			},
+			[`${itemCls}-${STATUS_FINISH}`]: {
+				[varName("item-icon-custom-color")]: colorPrimary,
+				[varName("item-title-color")]: colorText,
+				[varName("item-content-color")]: colorTextDescription,
+				[varName("item-content-active-color")]: colorText,
+				[varName("item-text-hover-color")]: colorPrimaryHover
+			},
+			[`${itemCls}-rail-${STATUS_FINISH}`]: { [varName("item-solid-line-color")]: colorPrimary },
+			[`${itemCls}-${STATUS_ERROR}`]: {
+				[varName("item-icon-custom-color")]: colorError,
+				[varName("item-title-color")]: colorError,
+				[varName("item-content-color")]: colorError,
+				[varName("item-content-active-color")]: colorError,
+				[varName("item-text-hover-color")]: colorErrorHover
+			},
+			[`${itemCls}-rail-${STATUS_ERROR}`]: { [varName("item-solid-line-color")]: colorError }
+		},
+		{ [`&${componentCls}-filled`]: {
+			[itemCls]: { [varName("item-icon-dot-border-color")]: "transparent" },
+			[`${itemCls}-${STATUS_WAIT}`]: {
+				[varName("item-icon-bg-color")]: colorFillTertiary,
+				[varName("item-icon-border-color")]: "transparent",
+				[varName("item-icon-text-color")]: colorTextLabel,
+				[varName("item-icon-dot-bg-color")]: colorTextDisabled,
+				[varName("item-icon-bg-hover-color")]: colorPrimaryBgHover,
+				[varName("item-icon-border-hover-color")]: "transparent",
+				[varName("item-icon-text-hover-color")]: colorPrimary,
+				[varName("item-icon-active-bg-color")]: colorPrimary,
+				[varName("item-icon-active-border-color")]: "transparent",
+				[varName("item-icon-active-text-color")]: colorTextLightSolid
+			},
+			[`${itemCls}-${STATUS_PROCESS}, ${itemCls}-${STATUS_FINISH}`]: {
+				[varName("item-icon-bg-color")]: colorPrimaryBg,
+				[varName("item-icon-border-color")]: "transparent",
+				[varName("item-icon-text-color")]: colorPrimary,
+				[varName("item-icon-dot-bg-color")]: colorPrimary,
+				[varName("item-icon-bg-hover-color")]: colorPrimaryBgHover,
+				[varName("item-icon-border-hover-color")]: "transparent",
+				[varName("item-icon-text-hover-color")]: colorPrimary,
+				[varName("item-icon-active-bg-color")]: colorPrimary,
+				[varName("item-icon-active-border-color")]: "transparent",
+				[varName("item-icon-active-text-color")]: colorTextLightSolid
+			},
+			[`${itemCls}-${STATUS_ERROR}`]: {
+				[varName("item-icon-bg-color")]: colorErrorBg,
+				[varName("item-icon-border-color")]: "transparent",
+				[varName("item-icon-text-color")]: colorError,
+				[varName("item-icon-dot-bg-color")]: colorError,
+				[varName("item-icon-bg-hover-color")]: colorErrorBgFilledHover,
+				[varName("item-icon-border-hover-color")]: "transparent",
+				[varName("item-icon-text-hover-color")]: colorError,
+				[varName("item-icon-active-bg-color")]: colorError,
+				[varName("item-icon-active-border-color")]: "transparent",
+				[varName("item-icon-active-text-color")]: colorTextLightSolid
+			}
+		} },
+		{ [`&${componentCls}-outlined`]: {
+			[itemCls]: { [varName("item-icon-dot-bg-color")]: "transparent" },
+			[`${itemCls}-${STATUS_WAIT}`]: {
+				[varName("item-icon-bg-color")]: colorBgContainer,
+				[varName("item-icon-border-color")]: colorTextDisabled,
+				[varName("item-icon-text-color")]: colorTextDisabled,
+				[varName("item-icon-dot-color")]: colorTextDisabled,
+				[varName("item-icon-bg-hover-color")]: "transparent",
+				[varName("item-icon-border-hover-color")]: colorPrimaryHover,
+				[varName("item-icon-text-hover-color")]: colorPrimaryHover,
+				[varName("item-icon-active-bg-color")]: colorFillTertiary
+			},
+			[`${itemCls}-${STATUS_PROCESS}, ${itemCls}-${STATUS_FINISH}`]: {
+				[varName("item-icon-bg-color")]: colorBgContainer,
+				[varName("item-icon-border-color")]: colorPrimary,
+				[varName("item-icon-text-color")]: colorPrimary,
+				[varName("item-icon-dot-color")]: colorPrimary,
+				[varName("item-icon-bg-hover-color")]: "transparent",
+				[varName("item-icon-border-hover-color")]: colorPrimaryHover,
+				[varName("item-icon-text-hover-color")]: colorPrimaryHover,
+				[varName("item-icon-active-bg-color")]: colorPrimaryBg
+			},
+			[`${itemCls}-${STATUS_ERROR}`]: {
+				[varName("item-icon-bg-color")]: colorBgContainer,
+				[varName("item-icon-border-color")]: colorError,
+				[varName("item-icon-text-color")]: colorError,
+				[varName("item-icon-dot-color")]: colorError,
+				[varName("item-icon-bg-hover-color")]: "transparent",
+				[varName("item-icon-border-hover-color")]: colorErrorHover,
+				[varName("item-icon-text-hover-color")]: colorErrorHover,
+				[varName("item-icon-active-bg-color")]: colorErrorBg
+			}
+		} }
+	] };
+};
+//#endregion
+export { STATUS_ERROR, STATUS_FINISH, STATUS_PROCESS, STATUS_WAIT, genStatusStyle as default };

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

@@ -0,0 +1,10 @@
+import { StepsToken } from "./index.js";
+import { CSSObject } from "@zboson/cssinjs";
+//#region src/steps/style/util.d.ts
+/**
+ * Force override the width related styles.
+ * This should be multiple since will conflict with other `rail` styles.
+ */
+declare function getItemWithWidthStyle(token: StepsToken, marginSize: number, optionalStyle?: CSSObject): CSSObject;
+//#endregion
+export { getItemWithWidthStyle };

package/dist/steps/style/util.js

@@ -0,0 +1,24 @@
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
+//#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, antCls } = token;
+	const itemCls = `${componentCls}-item`;
+	const [, varRef] = genCssVar(antCls, "cmp-steps");
+	return { [`@container style(${withoutVar(descriptionMaxWidth)})`]: [{
+		[`${itemCls}-icon`]: { marginInlineStart: calc(descriptionMaxWidth).sub(varRef("icon-size")).div(2).equal() },
+		[`${itemCls}-rail`]: {
+			width: "auto",
+			insetInlineStart: calc(descriptionMaxWidth).add(varRef("icon-size")).div(2).add(marginSize).equal(),
+			insetInlineEnd: calc(descriptionMaxWidth).sub(varRef("icon-size")).div(2).sub(marginSize).mul(-1).equal()
+		}
+	}, optionalStyle] };
+}
+//#endregion
+export { getItemWithWidthStyle };

package/dist/steps/style/vertical.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/vertical.d.ts
+declare const genVerticalStyle: GenerateStyle<StepsToken, CSSObject>;
+//#endregion
+export { genVerticalStyle as default };

package/dist/steps/style/vertical.js

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

package/dist/steps/useDisplaySteps.d.ts

@@ -0,0 +1,21 @@
+import { StepItem } from "./index.js";
+import { ComputedRef, Ref } from "vue";
+//#region src/steps/useDisplaySteps.d.ts
+interface DisplayStep {
+  item: StepItem;
+  originIndex: number;
+}
+interface UseDisplayStepsResult {
+  canApplyMaxCount: ComputedRef<boolean>;
+  displaySteps: ComputedRef<DisplayStep[]>;
+  mappedDisplayCurrent: ComputedRef<number>;
+  displayItems: ComputedRef<StepItem[]>;
+}
+/**
+ * Convert the original items/current into the list consumed by @v-c/steps.
+ * When steps are collapsed, @v-c/steps receives a compact item list and a remapped current,
+ * while callers still interact with the original step indexes through `onChange`.
+ */
+declare function useDisplaySteps(mergedItems: Ref<StepItem[]>, current: Ref<number>, initial: Ref<number>, maxCount: Ref<number | undefined>, prefixCls: Ref<string>): UseDisplayStepsResult;
+//#endregion
+export { useDisplaySteps as default };

package/dist/steps/useDisplaySteps.js

@@ -0,0 +1,95 @@
+import { computed, h } from "vue";
+import { EllipsisOutlined } from "@zboson/icons";
+//#region src/steps/useDisplaySteps.ts
+/**
+* Normalize a real item into the collapsed display list.
+* The original item key is preserved when provided, otherwise the original index keeps
+* reconciliation stable while visible steps move around the collapsed list.
+*/
+function getDisplayStep(item, index) {
+	return {
+		item: {
+			...item,
+			key: item.key ?? index
+		},
+		originIndex: index
+	};
+}
+/**
+* Build the disabled ellipsis item between two visible steps.
+* Its status reflects the hidden range so the connector still communicates
+* finished or error progress, and its key is derived from the adjacent real steps.
+*/
+function getEllipsisStep(items, currentIndex, prevIndex, nextIndex, prefixCls) {
+	const prevKey = items[prevIndex].key ?? prevIndex;
+	const nextKey = items[nextIndex].key ?? nextIndex;
+	const ellipsisStatus = items.slice(prevIndex + 1, nextIndex).some((step) => step.status === "error") ? "error" : nextIndex - 1 < currentIndex ? "finish" : "wait";
+	return {
+		item: {
+			key: `ellipsis-${prevKey}-${nextKey}`,
+			title: "",
+			icon: h(EllipsisOutlined),
+			status: ellipsisStatus,
+			disabled: true,
+			class: `${prefixCls}-item-ellipsis`
+		},
+		originIndex: -1
+	};
+}
+/**
+* Pick the real step indexes that should remain visible when `maxCount` applies.
+* First, last, and current are always kept. Remaining slots are filled by priority:
+* current left, current right, first right, last left, then repeat at larger distances.
+*
+* `null` is inserted between non-contiguous indexes and later rendered as an ellipsis.
+*/
+function getCollapsedIndexes(total, currentIndex, maxCount) {
+	const safeCurrent = Math.min(Math.max(currentIndex, 0), total - 1);
+	const targetCount = Math.min(maxCount, total);
+	const indexes = /* @__PURE__ */ new Set([
+		0,
+		safeCurrent,
+		total - 1
+	]);
+	for (let distance = 1; indexes.size < targetCount && distance < total; distance += 1) {
+		const candidates = [
+			safeCurrent - distance,
+			safeCurrent + distance,
+			distance,
+			total - 1 - distance
+		];
+		for (const index of candidates) {
+			if (indexes.size >= targetCount) break;
+			if (index >= 0 && index < total) indexes.add(index);
+		}
+	}
+	return Array.from(indexes).sort((a, b) => a - b).flatMap((index, order, sortedIndexes) => order > 0 && index - sortedIndexes[order - 1] > 1 ? [null, index] : [index]);
+}
+/**
+* Convert the original items/current into the list consumed by @v-c/steps.
+* When steps are collapsed, @v-c/steps receives a compact item list and a remapped current,
+* while callers still interact with the original step indexes through `onChange`.
+*/
+function useDisplaySteps(mergedItems, current, initial, maxCount, prefixCls) {
+	const canApplyMaxCount = computed(() => maxCount.value !== void 0 && maxCount.value >= 3 && mergedItems.value.length > maxCount.value);
+	const mappedCurrent = computed(() => current.value - initial.value);
+	const displaySteps = computed(() => {
+		if (!canApplyMaxCount.value) return mergedItems.value.map((item, originIndex) => ({
+			item,
+			originIndex
+		}));
+		const collapsedIndexes = getCollapsedIndexes(mergedItems.value.length, mappedCurrent.value, maxCount.value);
+		return collapsedIndexes.map((index, collapsedIndex) => index === null ? getEllipsisStep(mergedItems.value, mappedCurrent.value, collapsedIndexes[collapsedIndex - 1], collapsedIndexes[collapsedIndex + 1], prefixCls.value) : getDisplayStep(mergedItems.value[index], index));
+	});
+	return {
+		canApplyMaxCount,
+		displaySteps,
+		mappedDisplayCurrent: computed(() => {
+			const displayCurrent = displaySteps.value.findIndex((step) => step.originIndex === mappedCurrent.value);
+			return displayCurrent >= 0 ? displayCurrent : mappedCurrent.value;
+		}),
+		displayItems: computed(() => displaySteps.value.map((step) => step.item))
+	};
+}
+//#endregion
+export { useDisplaySteps as default };

package/dist/style/compact-item-vertical.d.ts

@@ -0,0 +1,7 @@
+import { FullToken, OverrideComponent } from "../theme/interface/cssinjs-utils.js";
+import "../theme/internal.js";
+import { CSSInterpolation } from "@zboson/cssinjs";
+//#region src/style/compact-item-vertical.d.ts
+declare function genCompactItemVerticalStyle<T extends OverrideComponent>(token: FullToken<T>): CSSInterpolation;
+//#endregion
+export { genCompactItemVerticalStyle };

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": {
+			"&:focus,&:active": { zIndex: 3 },
+			"&:hover": { zIndex: 4 },
+			"&[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.d.ts

@@ -0,0 +1,20 @@
+import { FullToken, OverrideComponent } from "../theme/interface/cssinjs-utils.js";
+import "../theme/internal.js";
+import { CSSInterpolation } from "@zboson/cssinjs";
+//#region src/style/compact-item.d.ts
+interface CompactItemOptions {
+  focus?: boolean;
+  /**
+   * Some component borders are implemented on child elements
+   * like `Select`
+   */
+  borderElCls?: string;
+  /**
+   * Some components have special `focus` className especially with popovers
+   * like `Select` and `DatePicker`
+   */
+  focusElCls?: string;
+}
+declare function genCompactItemStyle<T extends OverrideComponent>(token: FullToken<T>, options?: CompactItemOptions): CSSInterpolation;
+//#endregion
+export { genCompactItemStyle };

package/dist/style/compact-item.js

@@ -0,0 +1,44 @@
+//#region src/style/compact-item.ts
+function compactItemBorder(token, parentCls, options, prefixCls) {
+	const { focusElCls, focus, borderElCls } = options;
+	const childCombinator = borderElCls ? "> *" : "";
+	const suffix = childCombinator ? ` ${childCombinator}` : "";
+	const genEffects = (effects) => effects.filter(Boolean).map((n) => `&:${n}${suffix}`).join(",");
+	const hoverEffects = genEffects(["hover", focusElCls ? `hover${focusElCls}` : null]);
+	const focusEffects = genEffects([focus ? "focus" : null, "active"]);
+	return {
+		[`&-item:not(${parentCls}-last-item)`]: { marginInlineEnd: token.calc(token.lineWidth).mul(-1).equal() },
+		[`&-item:not(${prefixCls}-status-success)`]: { zIndex: 2 },
+		"&-item": {
+			[focusEffects]: { zIndex: 3 },
+			[hoverEffects]: { zIndex: 4 },
+			...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 };

package/dist/style/index.d.ts

@@ -0,0 +1,17 @@
+import { AliasToken } from "../theme/interface/alias.js";
+import { GenerateStyle } from "../theme/interface/index.js";
+import "../theme/internal.js";
+import { CSSObject } from "@zboson/cssinjs";
+//#region src/style/index.d.ts
+declare const textEllipsis: CSSObject;
+declare function resetComponent(token: AliasToken, needInheritFontFamily?: boolean): CSSObject;
+declare function resetIcon(): CSSObject;
+declare function clearFix(): CSSObject;
+declare const genLinkStyle: GenerateStyle<AliasToken, CSSObject>;
+declare function genCommonStyle(token: AliasToken, componentPrefixCls: string, rootCls?: string, resetFont?: boolean): CSSObject;
+declare function genFocusOutline(token: AliasToken, offset?: number): CSSObject;
+declare function genFocusStyle(token: AliasToken, offset?: number): CSSObject;
+declare function genIconStyle(iconPrefixCls: string): CSSObject;
+declare const operationUnit: GenerateStyle<AliasToken, CSSObject>;
+//#endregion
+export { clearFix, genCommonStyle, genFocusOutline, genFocusStyle, genIconStyle, genLinkStyle, operationUnit, resetComponent, resetIcon, textEllipsis };

package/dist/style/index.js

@@ -0,0 +1,147 @@
+import { Keyframes, unit } from "@zboson/cssinjs";
+//#region src/style/index.tsx
+const textEllipsis = {
+	overflow: "hidden",
+	whiteSpace: "nowrap",
+	textOverflow: "ellipsis"
+};
+function resetComponent(token, needInheritFontFamily = false) {
+	return {
+		boxSizing: "border-box",
+		margin: 0,
+		padding: 0,
+		color: token.colorText,
+		fontSize: token.fontSize,
+		lineHeight: token.lineHeight,
+		listStyle: "none",
+		fontFamily: needInheritFontFamily ? "inherit" : token.fontFamily
+	};
+}
+function resetIcon() {
+	return {
+		display: "inline-flex",
+		alignItems: "center",
+		color: "inherit",
+		fontStyle: "normal",
+		lineHeight: 0,
+		textAlign: "center",
+		textTransform: "none",
+		verticalAlign: "-0.125em",
+		textRendering: "optimizeLegibility",
+		"-webkit-font-smoothing": "antialiased",
+		"-moz-osx-font-smoothing": "grayscale",
+		"> *": { lineHeight: 1 },
+		svg: {
+			display: "inline-block",
+			verticalAlign: "inherit"
+		}
+	};
+}
+const loadingCircle = new Keyframes("loadingCircle", { "100%": { transform: "rotate(360deg)" } });
+function clearFix() {
+	return {
+		"&::before": {
+			display: "table",
+			content: "\"\""
+		},
+		"&::after": {
+			display: "table",
+			clear: "both",
+			content: "\"\""
+		}
+	};
+}
+const genLinkStyle = (token) => ({ a: {
+	color: token.colorLink,
+	textDecoration: token.linkDecoration,
+	backgroundColor: "transparent",
+	outline: "none",
+	cursor: "pointer",
+	transition: `color ${token.motionDurationSlow}`,
+	"-webkit-text-decoration-skip": "objects",
+	"&:hover": { color: token.colorLinkHover },
+	"&:active": { color: token.colorLinkActive },
+	"&:active, &:hover": {
+		textDecoration: token.linkHoverDecoration,
+		outline: 0
+	},
+	"&:focus": {
+		textDecoration: token.linkFocusDecoration,
+		outline: 0
+	},
+	...genFocusStyle(token),
+	"&[disabled]": {
+		color: token.colorTextDisabled,
+		cursor: "not-allowed"
+	}
+} });
+function genCommonStyle(token, componentPrefixCls, rootCls, resetFont) {
+	const prefixSelector = `[class^="${componentPrefixCls}"], [class*=" ${componentPrefixCls}"]`;
+	const rootPrefixSelector = rootCls ? `.${rootCls}` : prefixSelector;
+	const resetStyle = {
+		boxSizing: "border-box",
+		"&::before, &::after": { boxSizing: "border-box" }
+	};
+	let resetFontStyle = {};
+	if (resetFont !== false) resetFontStyle = {
+		fontFamily: token.fontFamily,
+		fontSize: token.fontSize
+	};
+	return { [rootPrefixSelector]: {
+		...resetFontStyle,
+		...resetStyle,
+		[prefixSelector]: resetStyle
+	} };
+}
+function genFocusOutline(token, offset) {
+	return {
+		outline: `${unit(token.lineWidthFocus)} solid ${token.colorPrimaryBorder}`,
+		outlineOffset: offset ?? 1,
+		transition: [`outline-offset`, `outline`].map((prop) => `${prop} 0s`).join(", ")
+	};
+}
+function genFocusStyle(token, offset) {
+	return { "&:focus-visible": genFocusOutline(token, offset) };
+}
+function genIconStyle(iconPrefixCls) {
+	return {
+		[`.${iconPrefixCls}`]: {
+			...resetIcon(),
+			"&::before": { display: "none" },
+			"&[tabindex]": { cursor: "pointer" }
+		},
+		[`.${iconPrefixCls} .${iconPrefixCls}-icon`]: { display: "block" },
+		[`.${iconPrefixCls}-spin`]: {
+			animationName: loadingCircle,
+			animationDuration: "1s",
+			animationIterationCount: "infinite",
+			animationTimingFunction: "linear"
+		}
+	};
+}
+const operationUnit = (token) => ({
+	color: token.colorLink,
+	textDecoration: token.linkDecoration,
+	outline: "none",
+	cursor: "pointer",
+	transition: `all ${token.motionDurationSlow}`,
+	border: 0,
+	padding: 0,
+	background: "none",
+	userSelect: "none",
+	...genFocusStyle(token),
+	"&:hover": {
+		color: token.colorLinkHover,
+		textDecoration: token.linkHoverDecoration
+	},
+	"&:focus": {
+		color: token.colorLinkHover,
+		textDecoration: token.linkFocusDecoration
+	},
+	"&:active": {
+		color: token.colorLinkActive,
+		textDecoration: token.linkHoverDecoration
+	}
+});
+//#endregion
+export { clearFix, genCommonStyle, genFocusOutline, genFocusStyle, genIconStyle, genLinkStyle, operationUnit, resetComponent, resetIcon, textEllipsis };

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

@@ -0,0 +1,8 @@
+import { AliasToken } from "../../theme/interface/alias.js";
+import { GenerateStyle } from "../../theme/interface/index.js";
+import { TokenWithCommonCls } from "../../theme/internal.js";
+import { CSSObject } from "@zboson/cssinjs";
+//#region src/style/motion/collapse.d.ts
+declare const genCollapseMotion: GenerateStyle<TokenWithCommonCls<AliasToken>, CSSObject>;
+//#endregion
+export { genCollapseMotion as default };