antdv-next 0.0.0 → 1.0.0-alpha.1

package/dist/select/style/dropdown.js

@@ -0,0 +1,119 @@
+import { resetComponent, textEllipsis } from "../../style/index.js";
+import { initMoveMotion } from "../../style/motion/move.js";
+import { initSlideMotion, slideDownIn, slideDownOut, slideUpIn, slideUpOut } from "../../style/motion/slide.js";
+import "../../style/motion/index.js";
+
+//#region src/select/style/dropdown.ts
+const genItemStyle = (token) => {
+	const { optionHeight, optionFontSize, optionLineHeight, optionPadding } = token;
+	return {
+		position: "relative",
+		display: "block",
+		minHeight: optionHeight,
+		padding: optionPadding,
+		color: token.colorText,
+		fontWeight: "normal",
+		fontSize: optionFontSize,
+		lineHeight: optionLineHeight,
+		boxSizing: "border-box"
+	};
+};
+const genSingleStyle = (token) => {
+	const { antCls, componentCls } = token;
+	const selectItemCls = `${componentCls}-item`;
+	const slideUpEnterActive = `&${antCls}-slide-up-enter${antCls}-slide-up-enter-active`;
+	const slideUpAppearActive = `&${antCls}-slide-up-appear${antCls}-slide-up-appear-active`;
+	const slideUpLeaveActive = `&${antCls}-slide-up-leave${antCls}-slide-up-leave-active`;
+	const dropdownPlacementCls = `${componentCls}-dropdown-placement-`;
+	const selectedItemCls = `${selectItemCls}-option-selected`;
+	return [
+		{ [`${componentCls}-dropdown`]: {
+			...resetComponent(token),
+			"position": "absolute",
+			"top": -9999,
+			"zIndex": token.zIndexPopup,
+			"boxSizing": "border-box",
+			"padding": token.paddingXXS,
+			"overflow": "hidden",
+			"fontSize": token.fontSize,
+			"fontVariant": "initial",
+			"backgroundColor": token.colorBgElevated,
+			"borderRadius": token.borderRadiusLG,
+			"outline": "none",
+			"boxShadow": token.boxShadowSecondary,
+			[`
+          ${slideUpEnterActive}${dropdownPlacementCls}bottomLeft,
+          ${slideUpAppearActive}${dropdownPlacementCls}bottomLeft
+        `]: { animationName: slideUpIn },
+			[`
+          ${slideUpEnterActive}${dropdownPlacementCls}topLeft,
+          ${slideUpAppearActive}${dropdownPlacementCls}topLeft,
+          ${slideUpEnterActive}${dropdownPlacementCls}topRight,
+          ${slideUpAppearActive}${dropdownPlacementCls}topRight
+        `]: { animationName: slideDownIn },
+			[`${slideUpLeaveActive}${dropdownPlacementCls}bottomLeft`]: { animationName: slideUpOut },
+			[`
+          ${slideUpLeaveActive}${dropdownPlacementCls}topLeft,
+          ${slideUpLeaveActive}${dropdownPlacementCls}topRight
+        `]: { animationName: slideDownOut },
+			"&-hidden": { display: "none" },
+			[selectItemCls]: {
+				...genItemStyle(token),
+				"cursor": "pointer",
+				"transition": `background ${token.motionDurationSlow} ease`,
+				"borderRadius": token.borderRadiusSM,
+				"&-group": {
+					color: token.colorTextDescription,
+					fontSize: token.fontSizeSM,
+					cursor: "default"
+				},
+				"&-option": {
+					"display": "flex",
+					"&-content": {
+						flex: "auto",
+						...textEllipsis
+					},
+					"&-state": {
+						flex: "none",
+						display: "flex",
+						alignItems: "center"
+					},
+					[`&-active:not(${selectItemCls}-option-disabled)`]: { backgroundColor: token.optionActiveBg },
+					[`&-selected:not(${selectItemCls}-option-disabled)`]: {
+						color: token.optionSelectedColor,
+						fontWeight: token.optionSelectedFontWeight,
+						backgroundColor: token.optionSelectedBg,
+						[`${selectItemCls}-option-state`]: { color: token.colorPrimary }
+					},
+					"&-disabled": {
+						[`&${selectItemCls}-option-selected`]: { backgroundColor: token.colorBgContainerDisabled },
+						color: token.colorTextDisabled,
+						cursor: "not-allowed"
+					},
+					"&-grouped": { paddingInlineStart: token.calc(token.controlPaddingHorizontal).mul(2).equal() }
+				},
+				"&-empty": {
+					...genItemStyle(token),
+					color: token.colorTextDisabled
+				}
+			},
+			[`${selectedItemCls}:has(+ ${selectedItemCls})`]: {
+				borderEndStartRadius: 0,
+				borderEndEndRadius: 0,
+				[`& + ${selectedItemCls}`]: {
+					borderStartStartRadius: 0,
+					borderStartEndRadius: 0
+				}
+			},
+			"&-rtl": { direction: "rtl" }
+		} },
+		initSlideMotion(token, "slide-up"),
+		initSlideMotion(token, "slide-down"),
+		initMoveMotion(token, "move-up"),
+		initMoveMotion(token, "move-down")
+	];
+};
+var dropdown_default = genSingleStyle;
+
+//#endregion
+export { dropdown_default as default };

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

@@ -0,0 +1,2 @@
+import { ComponentToken } from "./token.js";
+import "vue";

package/dist/select/style/index.js

@@ -0,0 +1,86 @@
+import { resetComponent, textEllipsis } from "../../style/index.js";
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import { genCompactItemStyle } from "../../style/compact-item.js";
+import dropdown_default from "./dropdown.js";
+import select_input_default from "./select-input.js";
+import { prepareComponentToken } from "./token.js";
+
+//#region src/select/style/index.ts
+const genBaseStyle = (token) => {
+	const { antCls, componentCls, inputPaddingHorizontalBase } = token;
+	const hoverShowClearStyle = { [`${componentCls}-clear`]: {
+		opacity: 1,
+		background: token.colorBgBase,
+		borderRadius: "50%"
+	} };
+	return {
+		[componentCls]: {
+			...resetComponent(token),
+			[`${componentCls}-selection-item`]: {
+				flex: 1,
+				fontWeight: "normal",
+				position: "relative",
+				userSelect: "none",
+				...textEllipsis,
+				[`> ${antCls}-typography`]: { display: "inline" }
+			},
+			[`${componentCls}-prefix`]: {
+				flex: "none",
+				marginInlineEnd: token.selectAffixPadding
+			},
+			[`${componentCls}-clear`]: {
+				"position": "absolute",
+				"top": "50%",
+				"insetInlineStart": "auto",
+				"insetInlineEnd": inputPaddingHorizontalBase,
+				"zIndex": 1,
+				"display": "inline-block",
+				"width": token.fontSizeIcon,
+				"height": token.fontSizeIcon,
+				"marginTop": token.calc(token.fontSizeIcon).mul(-1).div(2).equal(),
+				"color": token.colorTextQuaternary,
+				"fontSize": token.fontSizeIcon,
+				"fontStyle": "normal",
+				"lineHeight": 1,
+				"textAlign": "center",
+				"textTransform": "none",
+				"cursor": "pointer",
+				"opacity": 0,
+				"transition": `color ${token.motionDurationMid} ease, opacity ${token.motionDurationSlow} ease`,
+				"textRendering": "auto",
+				"transform": "translateZ(0)",
+				"&:before": { display: "block" },
+				"&:hover": { color: token.colorIcon }
+			},
+			"@media(hover:none)": hoverShowClearStyle,
+			"&:hover": hoverShowClearStyle
+		},
+		[`${componentCls}-status`]: { "&-error, &-warning, &-success, &-validating": { [`&${componentCls}-has-feedback`]: { [`${componentCls}-clear`]: { insetInlineEnd: token.calc(inputPaddingHorizontalBase).add(token.fontSize).add(token.paddingXS).equal() } } } }
+	};
+};
+const genSelectStyle = (token) => {
+	const { componentCls } = token;
+	return [
+		{ [componentCls]: { [`&${componentCls}-in-form-item`]: { width: "100%" } } },
+		genBaseStyle(token),
+		dropdown_default(token),
+		{ [`${componentCls}-rtl`]: { direction: "rtl" } },
+		genCompactItemStyle(token, { focusElCls: `${componentCls}-focused` })
+	];
+};
+var style_default = genStyleHooks("Select", (token, { rootPrefixCls }) => {
+	const selectToken = mergeToken(token, {
+		rootPrefixCls,
+		inputPaddingHorizontalBase: token.calc(token.paddingSM).sub(token.lineWidth).equal(),
+		multipleSelectItemHeight: token.multipleItemHeight,
+		selectHeight: token.controlHeight
+	});
+	return [genSelectStyle(selectToken), select_input_default(selectToken)];
+}, prepareComponentToken, { unitless: {
+	optionLineHeight: true,
+	optionSelectedFontWeight: true
+} });
+
+//#endregion
+export { style_default as default };

package/dist/select/style/select-input-customize.js

@@ -0,0 +1,20 @@
+//#region src/select/style/select-input-customize.ts
+const genSelectInputCustomizeStyle = (token) => {
+	const { componentCls } = token;
+	return { [`&${componentCls}-customize`]: {
+		border: 0,
+		padding: 0,
+		fontSize: "inherit",
+		lineHeight: "inherit",
+		[`${componentCls}-placeholder`]: { display: "none" },
+		[`${componentCls}-content`]: {
+			"margin": 0,
+			"padding": 0,
+			"&-value": { display: "none" }
+		}
+	} };
+};
+var select_input_customize_default = genSelectInputCustomizeStyle;
+
+//#endregion
+export { select_input_customize_default as default };

package/dist/select/style/select-input-multiple.js

@@ -0,0 +1,99 @@
+import { resetIcon, textEllipsis } from "../../style/index.js";
+
+//#region src/select/style/select-input-multiple.ts
+const FIXED_INPUT_MIN_WIDTH = 4;
+const genSelectInputMultipleStyle = (token) => {
+	const { componentCls, calc, iconCls, paddingXS, paddingXXS, INTERNAL_FIXED_ITEM_MARGIN, lineWidth, colorIcon, colorIconHover, inputPaddingHorizontalBase } = token;
+	return { "&-multiple": {
+		"--select-multi-item-background": token.multipleItemBg,
+		"--select-multi-item-border-color": "transparent",
+		"--select-multi-item-border-radius": token.borderRadiusSM,
+		"--select-multi-item-height": token.multipleItemHeight,
+		"--select-multi-padding-base": `calc((var(--select-height) - var(--select-multi-item-height)) / 2)`,
+		"--select-multi-padding-vertical": `calc(var(--select-multi-padding-base) - ${INTERNAL_FIXED_ITEM_MARGIN} - ${lineWidth})`,
+		"--select-multi-item-padding-horizontal": `calc(${inputPaddingHorizontalBase} - var(--select-multi-padding-vertical) - ${lineWidth} * 2)`,
+		"paddingBlock": `var(--select-multi-padding-vertical)`,
+		"paddingInlineStart": `calc(var(--select-multi-padding-base) - ${lineWidth})`,
+		[`${componentCls}-prefix`]: { marginInlineStart: "var(--select-multi-item-padding-horizontal)" },
+		[`${componentCls}-prefix + ${componentCls}-content`]: {
+			[`${componentCls}-placeholder`]: { insetInlineStart: 0 },
+			[`${componentCls}-content-item${componentCls}-content-item-suffix`]: { marginInlineStart: 0 }
+		},
+		[`${componentCls}-placeholder`]: {
+			position: "absolute",
+			lineHeight: "var(--select-line-height)",
+			insetInlineStart: "var(--select-multi-item-padding-horizontal)",
+			width: "calc(100% - var(--select-multi-item-padding-horizontal))",
+			top: "50%",
+			transform: "translateY(-50%)"
+		},
+		[`${componentCls}-content`]: {
+			"flexWrap": "wrap",
+			"alignItems": "center",
+			"lineHeight": 1,
+			"&-item-prefix": { height: "var(--select-font-size)" },
+			"&-item": {
+				lineHeight: 1,
+				maxWidth: `calc(100% - ${FIXED_INPUT_MIN_WIDTH}px)`
+			},
+			[`${componentCls}-content-item-prefix + ${componentCls}-content-item-suffix,
+          ${componentCls}-content-item-suffix:first-child`]: { marginInlineStart: "var(--select-multi-item-padding-horizontal)" },
+			[`${componentCls}-selection-item`]: {
+				"lineHeight": `calc(var(--select-multi-item-height) - ${lineWidth} * 2)`,
+				"border": `${lineWidth} solid var(--select-multi-item-border-color)`,
+				"display": "flex",
+				"marginBlock": INTERNAL_FIXED_ITEM_MARGIN,
+				"marginInlineEnd": calc(INTERNAL_FIXED_ITEM_MARGIN).mul(2).equal(),
+				"background": `var(--select-multi-item-background)`,
+				"borderRadius": `var(--select-multi-item-border-radius)`,
+				"paddingInlineStart": paddingXS,
+				"paddingInlineEnd": paddingXXS,
+				"transition": [
+					"height",
+					"line-height",
+					"padding"
+				].map((key) => `${key} ${token.motionDurationSlow}`).join(","),
+				"&-content": {
+					...textEllipsis,
+					marginInlineEnd: paddingXXS
+				},
+				"&-remove": {
+					...resetIcon(),
+					"display": "inline-flex",
+					"alignItems": "center",
+					"color": colorIcon,
+					"fontWeight": "bold",
+					"fontSize": 10,
+					"lineHeight": "inherit",
+					"cursor": "pointer",
+					[`> ${iconCls}`]: { verticalAlign: "-0.2em" },
+					"&:hover": { color: colorIconHover }
+				}
+			},
+			[`${componentCls}-input`]: {
+				lineHeight: calc(INTERNAL_FIXED_ITEM_MARGIN).mul(2).add("var(--select-multi-item-height)").equal(),
+				width: "calc(var(--select-input-width, 0) * 1px)",
+				minWidth: FIXED_INPUT_MIN_WIDTH,
+				maxWidth: "100%",
+				transition: `line-height ${token.motionDurationSlow}`
+			}
+		},
+		[`&${componentCls}-sm`]: {
+			"--select-multi-item-height": token.multipleItemHeightSM,
+			"--select-multi-item-border-radius": token.borderRadiusXS
+		},
+		[`&${componentCls}-lg`]: {
+			"--select-multi-item-height": token.multipleItemHeightLG,
+			"--select-multi-item-border-radius": token.borderRadius
+		},
+		[`&${componentCls}-filled`]: {
+			"--select-multi-item-border-color": token.colorSplit,
+			"--select-multi-item-background": token.colorBgContainer,
+			[`&${componentCls}-disabled`]: { "--select-multi-item-border-color": "transparent" }
+		}
+	} };
+};
+var select_input_multiple_default = genSelectInputMultipleStyle;
+
+//#endregion
+export { select_input_multiple_default as default };

package/dist/select/style/select-input.js

@@ -0,0 +1,237 @@
+import { resetComponent, textEllipsis } from "../../style/index.js";
+import select_input_customize_default from "./select-input-customize.js";
+import select_input_multiple_default from "./select-input-multiple.js";
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/select/style/select-input.ts
+/** Set CSS variables and hover/focus styles for a Select input based on provided colors. */
+function genSelectInputVariableStyle(token, colors) {
+	const { componentCls } = token;
+	const { border, borderHover, borderActive, borderOutline } = colors;
+	const baseBG = colors.background || token.colorBgContainer;
+	return {
+		"--select-border-color": border,
+		"--select-background": baseBG,
+		"--select-color": colors.color || token.colorText,
+		[`&:not(${componentCls}-disabled)`]: {
+			"&:hover": {
+				"--select-border-color": borderHover,
+				"--select-background": colors.backgroundHover || baseBG
+			},
+			[`&${componentCls}-focused`]: {
+				"--select-border-color": borderActive,
+				"--select-background": colors.backgroundActive || baseBG,
+				"boxShadow": `0 0 0 ${unit(token.controlOutlineWidth)} ${borderOutline}`
+			}
+		},
+		[`&${componentCls}-disabled`]: {
+			"--select-border-color": colors.borderDisabled || colors.border,
+			"--select-background": colors.backgroundDisabled || colors.background
+		}
+	};
+}
+/** Generate variant-scoped variable styles and status overrides for a Select input. */
+function genSelectInputVariantStyle(token, variant, colors, errorColors = {}, warningColors = {}, patchStyle) {
+	const { componentCls } = token;
+	return { [`&${componentCls}-${variant}`]: [
+		genSelectInputVariableStyle(token, colors),
+		{
+			[`&${componentCls}-status-error`]: genSelectInputVariableStyle(token, {
+				...colors,
+				color: errorColors.color || token.colorError,
+				...errorColors
+			}),
+			[`&${componentCls}-status-warning`]: genSelectInputVariableStyle(token, {
+				...colors,
+				color: warningColors.color || token.colorWarning,
+				...warningColors
+			})
+		},
+		patchStyle
+	] };
+}
+const genSelectInputStyle = (token) => {
+	const { componentCls, calc, fontHeight, controlHeight, iconCls } = token;
+	return { [componentCls]: [
+		{
+			"--select-border-radius": token.borderRadius,
+			"--select-border-color": "#000",
+			"--select-border-size": token.lineWidth,
+			"--select-background": token.colorBgContainer,
+			"--select-font-size": token.fontSize,
+			"--select-line-height": token.lineHeight,
+			"--select-font-height": fontHeight,
+			"--select-color": token.colorText,
+			"--select-height": controlHeight,
+			"--select-padding-horizontal": calc(token.paddingSM).sub(token.lineWidth).equal(),
+			"--select-padding-vertical": "calc((var(--select-height) - var(--select-font-height)) / 2 - var(--select-border-size))",
+			...resetComponent(token, true),
+			"display": "inline-flex",
+			"flexWrap": "nowrap",
+			"position": "relative",
+			"transition": `all ${token.motionDurationSlow}`,
+			"alignItems": "flex-start",
+			"outline": 0,
+			"cursor": "pointer",
+			"borderRadius": "var(--select-border-radius)",
+			"borderWidth": "var(--select-border-size)",
+			"borderStyle": token.lineType,
+			"borderColor": "var(--select-border-color)",
+			"background": "var(--select-background)",
+			"fontSize": "var(--select-font-size)",
+			"lineHeight": "var(--select-line-height)",
+			"color": "var(--select-color)",
+			"paddingInline": "var(--select-padding-horizontal)",
+			"paddingBlock": "var(--select-padding-vertical)",
+			[`${componentCls}-prefix`]: {
+				flex: "none",
+				lineHeight: 1
+			},
+			[`${componentCls}-placeholder`]: {
+				...textEllipsis,
+				color: token.colorTextPlaceholder,
+				pointerEvents: "none",
+				zIndex: 1
+			},
+			[`${componentCls}-content`]: {
+				"flex": "auto",
+				"minWidth": 0,
+				"position": "relative",
+				"display": "flex",
+				"marginInlineEnd": calc(token.paddingXXS).mul(1.5).equal(),
+				"&:before": {
+					content: "\"\\a0\"",
+					width: 0,
+					overflow: "hidden"
+				},
+				"&-value": {
+					...textEllipsis,
+					transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
+					zIndex: 1
+				},
+				"input[readonly]": {
+					cursor: "inherit",
+					caretColor: "transparent"
+				}
+			},
+			[`&-open ${componentCls}-content-value`]: { color: token.colorTextPlaceholder },
+			[`${componentCls}-suffix`]: {
+				"flex": "none",
+				"color": token.colorTextQuaternary,
+				"fontSize": token.fontSizeIcon,
+				"lineHeight": 1,
+				"> :not(:last-child)": { marginInlineEnd: token.marginXS }
+			},
+			[`${componentCls}-prefix, ${componentCls}-suffix`]: {
+				alignSelf: "center",
+				[iconCls]: { verticalAlign: "top" }
+			},
+			"&-disabled": {
+				background: token.colorBgContainerDisabled,
+				color: token.colorTextDisabled,
+				cursor: "not-allowed"
+			},
+			"&-sm": {
+				"--select-height": token.controlHeightSM,
+				"--select-padding-horizontal": calc(token.paddingXS).sub(token.lineWidth).equal(),
+				"--select-border-radius": token.borderRadiusSM
+			},
+			"&-lg": {
+				"--select-height": token.controlHeightLG,
+				"--select-font-size": token.fontSizeLG,
+				"--select-line-height": token.lineHeightLG,
+				"--select-font-height": token.fontHeightLG,
+				"--select-border-radius": token.borderRadiusLG
+			}
+		},
+		{ [`&:not(${componentCls}-customize)`]: { [`${componentCls}-input`]: {
+			"outline": "none",
+			"background": "transparent",
+			"appearance": "none",
+			"border": 0,
+			"margin": 0,
+			"padding": 0,
+			"color": "inherit",
+			"&::-webkit-search-cancel-button": {
+				display: "none",
+				appearance: "none"
+			}
+		} } },
+		{ [`&-single:not(${componentCls}-customize)`]: {
+			[`${componentCls}-input`]: {
+				position: "absolute",
+				insetInline: 0,
+				insetBlock: "calc(var(--select-padding-vertical) * -1)",
+				lineHeight: "calc(var(--select-font-height) + var(--select-padding-vertical) * 2)"
+			},
+			[`${componentCls}-content`]: { alignSelf: "center" }
+		} },
+		select_input_multiple_default(token),
+		genSelectInputVariantStyle(token, "outlined", {
+			border: token.colorBorder,
+			borderHover: token.hoverBorderColor,
+			borderActive: token.activeBorderColor,
+			borderOutline: token.activeOutlineColor,
+			borderDisabled: token.colorBorderDisabled
+		}, {
+			border: token.colorError,
+			borderHover: token.colorErrorHover,
+			borderActive: token.colorError,
+			borderOutline: token.colorErrorOutline
+		}, {
+			border: token.colorWarning,
+			borderHover: token.colorWarningHover,
+			borderActive: token.colorWarning,
+			borderOutline: token.colorWarningOutline
+		}),
+		genSelectInputVariantStyle(token, "filled", {
+			border: "transparent",
+			borderHover: "transparent",
+			borderActive: token.activeBorderColor,
+			borderOutline: "transparent",
+			borderDisabled: token.colorBorderDisabled,
+			background: token.colorFillTertiary,
+			backgroundHover: token.colorFillSecondary,
+			backgroundActive: token.colorBgContainer
+		}, {
+			background: token.colorErrorBg,
+			backgroundHover: token.colorErrorBgHover,
+			borderActive: token.colorError
+		}, {
+			background: token.colorWarningBg,
+			backgroundHover: token.colorWarningBgHover,
+			borderActive: token.colorWarning
+		}),
+		genSelectInputVariantStyle(token, "borderless", {
+			border: "transparent",
+			borderHover: "transparent",
+			borderActive: "transparent",
+			borderOutline: "transparent",
+			background: "transparent"
+		}),
+		genSelectInputVariantStyle(token, "underlined", {
+			border: token.colorBorder,
+			borderHover: token.hoverBorderColor,
+			borderActive: token.activeBorderColor,
+			borderOutline: "transparent"
+		}, {
+			border: token.colorError,
+			borderHover: token.colorErrorHover,
+			borderActive: token.colorError
+		}, {
+			border: token.colorWarning,
+			borderHover: token.colorWarningHover,
+			borderActive: token.colorWarning
+		}, {
+			borderRadius: 0,
+			borderTopColor: "transparent",
+			borderRightColor: "transparent",
+			borderLeftColor: "transparent"
+		}),
+		select_input_customize_default(token)
+	] };
+};
+var select_input_default = genSelectInputStyle;
+
+//#endregion
+export { select_input_default as default };

package/dist/select/style/token.d.ts

@@ -0,0 +1,130 @@
+import "../../theme/internal.js";
+import { CSSProperties } from "vue";
+
+//#region src/select/style/token.d.ts
+interface MultipleSelectorToken {
+  /**
+   * @desc 多选标签背景色
+   * @descEN Background color of multiple tag
+   */
+  multipleItemBg: string;
+  /**
+   * @desc 多选标签边框色
+   * @descEN Border color of multiple tag
+   */
+  multipleItemBorderColor: string;
+  /**
+   * @desc 多选标签高度
+   * @descEN Height of multiple tag
+   */
+  multipleItemHeight: number;
+  /**
+   * @desc 小号多选标签高度
+   * @descEN Height of multiple tag with small size
+   */
+  multipleItemHeightSM: number;
+  /**
+   * @desc 大号多选标签高度
+   * @descEN Height of multiple tag with large size
+   */
+  multipleItemHeightLG: number;
+  /**
+   * @desc 多选框禁用背景
+   * @descEN Background color of multiple selector when disabled
+   */
+  multipleSelectorBgDisabled: string;
+  /**
+   * @desc 多选标签禁用文本颜色
+   * @descEN Text color of multiple tag when disabled
+   */
+  multipleItemColorDisabled: string;
+  /**
+   * @desc 多选标签禁用边框色
+   * @descEN Border color of multiple tag when disabled
+   */
+  multipleItemBorderColorDisabled: string;
+}
+interface ComponentToken extends MultipleSelectorToken {
+  /**
+   * @desc 下拉菜单 z-index
+   * @descEN z-index of dropdown
+   */
+  zIndexPopup: number;
+  /**
+   * @desc 选项选中时文本颜色
+   * @descEN Text color when option is selected
+   */
+  optionSelectedColor: string;
+  /**
+   * @desc 选项选中时文本字重
+   * @descEN Font weight when option is selected
+   */
+  optionSelectedFontWeight: CSSProperties['fontWeight'];
+  /**
+   * @desc 选项选中时背景色
+   * @descEN Background color when option is selected
+   */
+  optionSelectedBg: string;
+  /**
+   * @desc 选项激活态时背景色
+   * @descEN Background color when option is active
+   */
+  optionActiveBg: string;
+  /**
+   * @desc 选项内间距
+   * @descEN Padding of option
+   */
+  optionPadding: CSSProperties['padding'];
+  /**
+   * @desc 选项字体大小
+   * @descEN Font size of option
+   */
+  optionFontSize: number;
+  /**
+   * @desc 选项行高
+   * @descEN Line height of option
+   */
+  optionLineHeight: CSSProperties['lineHeight'];
+  /**
+   * @desc 选项高度
+   * @descEN Height of option
+   */
+  optionHeight: number;
+  /**
+   * @desc 选框背景色
+   * @descEN Background color of selector
+   */
+  selectorBg: string;
+  /**
+   * @desc 清空按钮背景色
+   * @descEN Background color of clear button
+   */
+  clearBg: string;
+  /**
+   * @desc 单选大号回填项高度
+   * @descEN Height of single selected item with large size
+   */
+  singleItemHeightLG: number;
+  /**
+   * @desc 箭头的行末内边距
+   * @descEN Inline end padding of arrow
+   */
+  showArrowPaddingInlineEnd: number;
+  /**
+   * @desc 悬浮态边框色
+   * @descEN Hover border color
+   */
+  hoverBorderColor: string;
+  /**
+   * @desc 激活态边框色
+   * @descEN Active border color
+   */
+  activeBorderColor: string;
+  /**
+   * @desc 激活态 outline 颜色
+   * @descEN Active outline color
+   */
+  activeOutlineColor: string;
+}
+//#endregion
+export { ComponentToken, MultipleSelectorToken };