antdv-next 0.0.111 → 1.0.0-alpha.2

package/dist/input/index.js

@@ -0,0 +1,31 @@
+import Input_default from "./Input.js";
+import Group_default from "./Group.js";
+import OTP_default from "./OTP/index.js";
+import Password_default from "./Password.js";
+import Search_default from "./Search.js";
+import TextArea_default from "./TextArea.js";
+
+//#region src/input/index.tsx
+const CompoundedInput = Input_default;
+CompoundedInput.Search = Search_default;
+CompoundedInput.TextArea = TextArea_default;
+CompoundedInput.Password = Password_default;
+CompoundedInput.OTP = OTP_default;
+CompoundedInput.Group = Group_default;
+CompoundedInput.install = (app) => {
+	app.component(Input_default.name, CompoundedInput);
+	app.component(Search_default.name, Search_default);
+	app.component(TextArea_default.name, TextArea_default);
+	app.component(Password_default.name, Password_default);
+	app.component(OTP_default.name, OTP_default);
+	app.component(Group_default.name, Group_default);
+	return app;
+};
+var input_default = CompoundedInput;
+const InputGroup = Group_default;
+const InputOTP = OTP_default;
+const InputPassword = Password_default;
+const InputSearch = Search_default;
+
+//#endregion
+export { InputGroup, InputOTP, InputPassword, InputSearch, input_default as default };

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

@@ -0,0 +1,4 @@
+import { ComponentToken } from "./token.js";
+import "../../theme/internal.js";
+import "vue";
+import { CSSObject } from "@antdv-next/cssinjs";

package/dist/input/style/index.js

@@ -0,0 +1,379 @@
+import { clearFix, resetComponent } 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 { initComponentToken, initInputToken } from "./token.js";
+import { genBorderlessStyle, genFilledGroupStyle, genFilledStyle, genOutlinedGroupStyle, genOutlinedStyle, genUnderlinedStyle } from "./variants.js";
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/input/style/index.ts
+function genPlaceholderStyle(color) {
+	return {
+		"&::-moz-placeholder": { opacity: 1 },
+		"&::placeholder": {
+			color,
+			userSelect: "none"
+		},
+		"&:placeholder-shown": { textOverflow: "ellipsis" }
+	};
+}
+function genInputLargeStyle(token) {
+	const { paddingBlockLG, lineHeightLG, borderRadiusLG, paddingInlineLG } = token;
+	return {
+		padding: `${unit(paddingBlockLG)} ${unit(paddingInlineLG)}`,
+		fontSize: token.inputFontSizeLG,
+		lineHeight: lineHeightLG,
+		borderRadius: borderRadiusLG
+	};
+}
+function genInputSmallStyle(token) {
+	return {
+		padding: `${unit(token.paddingBlockSM)} ${unit(token.paddingInlineSM)}`,
+		fontSize: token.inputFontSizeSM,
+		borderRadius: token.borderRadiusSM
+	};
+}
+function genBasicInputStyle(token, option = {}) {
+	return {
+		"position": "relative",
+		"display": "inline-block",
+		"width": "100%",
+		"minWidth": 0,
+		"padding": `${unit(token.paddingBlock)} ${unit(token.paddingInline)}`,
+		"color": token.colorText,
+		"fontSize": token.inputFontSize,
+		"lineHeight": token.lineHeight,
+		"borderRadius": token.borderRadius,
+		"transition": `all ${token.motionDurationMid}`,
+		...genPlaceholderStyle(token.colorTextPlaceholder),
+		"&-lg": {
+			...genInputLargeStyle(token),
+			...option.largeStyle
+		},
+		"&-sm": {
+			...genInputSmallStyle(token),
+			...option.smallStyle
+		},
+		"&-rtl, &-textarea-rtl": { direction: "rtl" }
+	};
+}
+function genInputGroupStyle(token) {
+	const { componentCls, antCls } = token;
+	return {
+		"position": "relative",
+		"display": "table",
+		"width": "100%",
+		"borderCollapse": "separate",
+		"borderSpacing": 0,
+		"&[class*='col-']": {
+			"paddingInlineEnd": token.paddingXS,
+			"&:last-child": { paddingInlineEnd: 0 }
+		},
+		[`&-lg ${componentCls}, &-lg > ${componentCls}-group-addon`]: { ...genInputLargeStyle(token) },
+		[`&-sm ${componentCls}, &-sm > ${componentCls}-group-addon`]: { ...genInputSmallStyle(token) },
+		[`&-lg ${antCls}-select-single`]: { height: token.controlHeightLG },
+		[`&-sm ${antCls}-select-single`]: { height: token.controlHeightSM },
+		[`> ${componentCls}`]: {
+			"display": "table-cell",
+			"&:not(:first-child):not(:last-child)": { borderRadius: 0 }
+		},
+		[`${componentCls}-group`]: {
+			"&-addon, &-wrap": {
+				"display": "table-cell",
+				"width": 1,
+				"whiteSpace": "nowrap",
+				"verticalAlign": "middle",
+				"&:not(:first-child):not(:last-child)": { borderRadius: 0 }
+			},
+			"&-wrap > *": { display: "block !important" },
+			"&-addon": {
+				position: "relative",
+				padding: `0 ${unit(token.paddingInline)}`,
+				color: token.colorText,
+				fontWeight: "normal",
+				fontSize: token.inputFontSize,
+				textAlign: "center",
+				borderRadius: token.borderRadius,
+				transition: `all ${token.motionDurationSlow}`,
+				lineHeight: 1,
+				[`${antCls}-select`]: {
+					margin: `${unit(token.calc(token.paddingBlock).add(1).mul(-1).equal())} ${unit(token.calc(token.paddingInline).mul(-1).equal())}`,
+					[`&${antCls}-select-single:not(${antCls}-select-customize-input):not(${antCls}-pagination-size-changer)`]: {
+						backgroundColor: "inherit",
+						border: `${unit(token.lineWidth)} ${token.lineType} transparent`,
+						boxShadow: "none"
+					}
+				},
+				[`${antCls}-cascader-picker`]: {
+					margin: `-9px ${unit(token.calc(token.paddingInline).mul(-1).equal())}`,
+					backgroundColor: "transparent",
+					[`${antCls}-cascader-input`]: {
+						textAlign: "start",
+						border: 0,
+						boxShadow: "none"
+					}
+				}
+			}
+		},
+		[componentCls]: {
+			"width": "100%",
+			"marginBottom": 0,
+			"textAlign": "inherit",
+			"&:focus": {
+				zIndex: 1,
+				borderInlineEndWidth: 1
+			},
+			"&:hover": {
+				zIndex: 1,
+				borderInlineEndWidth: 1
+			}
+		},
+		[`> ${componentCls}:first-child, ${componentCls}-group-addon:first-child`]: {
+			borderStartEndRadius: 0,
+			borderEndEndRadius: 0,
+			[`${antCls}-select`]: {
+				borderStartEndRadius: 0,
+				borderEndEndRadius: 0
+			}
+		},
+		[`> ${componentCls}-affix-wrapper`]: {
+			[`&:not(:first-child) ${componentCls}`]: {
+				borderStartStartRadius: 0,
+				borderEndStartRadius: 0
+			},
+			[`&:not(:last-child) ${componentCls}`]: {
+				borderStartEndRadius: 0,
+				borderEndEndRadius: 0
+			}
+		},
+		[`> ${componentCls}:last-child, ${componentCls}-group-addon:last-child`]: {
+			borderStartStartRadius: 0,
+			borderEndStartRadius: 0,
+			[`${antCls}-select`]: {
+				borderStartStartRadius: 0,
+				borderEndStartRadius: 0
+			}
+		},
+		[`${componentCls}-affix-wrapper`]: {
+			"&:not(:last-child)": {
+				borderStartEndRadius: 0,
+				borderEndEndRadius: 0
+			},
+			"&:not(:first-child)": {
+				borderStartStartRadius: 0,
+				borderEndStartRadius: 0
+			}
+		},
+		[`&${componentCls}-group-compact`]: {
+			"display": "block",
+			...clearFix(),
+			[`${componentCls}-group-addon, ${componentCls}-group-wrap, > ${componentCls}`]: { "&:not(:first-child):not(:last-child)": {
+				"borderInlineEndWidth": token.lineWidth,
+				"&:hover, &:focus": { zIndex: 1 }
+			} },
+			"& > *": {
+				display: "inline-flex",
+				float: "none",
+				verticalAlign: "top",
+				borderRadius: 0
+			},
+			[`
+        & > ${componentCls}-affix-wrapper,
+        & > ${componentCls}-number-affix-wrapper,
+        & > ${antCls}-picker-range
+      `]: { display: "inline-flex" },
+			"& > *:not(:last-child)": {
+				marginInlineEnd: token.calc(token.lineWidth).mul(-1).equal(),
+				borderInlineEndWidth: token.lineWidth
+			},
+			[componentCls]: { float: "none" },
+			[`& > ${antCls}-select,
+      & > ${antCls}-select-auto-complete ${componentCls},
+      & > ${antCls}-cascader-picker ${componentCls},
+      & > ${componentCls}-group-wrapper ${componentCls}`]: {
+				"borderInlineEndWidth": token.lineWidth,
+				"borderRadius": 0,
+				"&:hover, &:focus": { zIndex: 1 }
+			},
+			[`& > ${antCls}-select-focused`]: { zIndex: 1 },
+			[`& > ${antCls}-select > ${antCls}-select-arrow`]: { zIndex: 1 },
+			[`& > *:first-child,
+      & > ${antCls}-select:first-child,
+      & > ${antCls}-select-auto-complete:first-child ${componentCls},
+      & > ${antCls}-cascader-picker:first-child ${componentCls}`]: {
+				borderStartStartRadius: token.borderRadius,
+				borderEndStartRadius: token.borderRadius
+			},
+			[`& > *:last-child,
+      & > ${antCls}-select:last-child,
+      & > ${antCls}-cascader-picker:last-child ${componentCls},
+      & > ${antCls}-cascader-picker-focused:last-child ${componentCls}`]: {
+				borderInlineEndWidth: token.lineWidth,
+				borderStartEndRadius: token.borderRadius,
+				borderEndEndRadius: token.borderRadius
+			},
+			[`& > ${antCls}-select-auto-complete ${componentCls}`]: { verticalAlign: "top" },
+			[`${componentCls}-group-wrapper + ${componentCls}-group-wrapper`]: {
+				marginInlineStart: token.calc(token.lineWidth).mul(-1).equal(),
+				[`${componentCls}-affix-wrapper`]: {}
+			}
+		}
+	};
+}
+const genInputStyle = (token) => {
+	const { componentCls, controlHeightSM, lineWidth, calc } = token;
+	const colorSmallPadding = calc(controlHeightSM).sub(calc(lineWidth).mul(2)).sub(16).div(2).equal();
+	return { [componentCls]: {
+		...resetComponent(token),
+		...genBasicInputStyle(token),
+		...genOutlinedStyle(token),
+		...genFilledStyle(token),
+		...genBorderlessStyle(token),
+		...genUnderlinedStyle(token),
+		"&[type=\"color\"]": {
+			height: token.controlHeight,
+			[`&${componentCls}-lg`]: { height: token.controlHeightLG },
+			[`&${componentCls}-sm`]: {
+				height: controlHeightSM,
+				paddingTop: colorSmallPadding,
+				paddingBottom: colorSmallPadding
+			}
+		},
+		"&[type=\"search\"]::-webkit-search-cancel-button, &[type=\"search\"]::-webkit-search-decoration": { appearance: "none" }
+	} };
+};
+function genAllowClearStyle(token) {
+	const { componentCls } = token;
+	return { [`${componentCls}-clear-icon`]: {
+		"margin": 0,
+		"padding": 0,
+		"lineHeight": 0,
+		"color": token.colorTextQuaternary,
+		"fontSize": token.fontSizeIcon,
+		"verticalAlign": -1,
+		"cursor": "pointer",
+		"transition": `color ${token.motionDurationSlow}`,
+		"border": "none",
+		"outline": "none",
+		"backgroundColor": "transparent",
+		"&:hover": { color: token.colorIcon },
+		"&:active": { color: token.colorText },
+		"&-hidden": { visibility: "hidden" },
+		"&-has-suffix": { margin: `0 ${unit(token.inputAffixPadding)}` }
+	} };
+}
+const genAffixStyle = (token) => {
+	const { componentCls, inputAffixPadding, colorTextDescription, motionDurationSlow, colorIcon, colorIconHover, iconCls } = token;
+	const affixCls = `${componentCls}-affix-wrapper`;
+	const affixClsDisabled = `${componentCls}-affix-wrapper-disabled`;
+	return {
+		[affixCls]: {
+			...genBasicInputStyle(token),
+			"display": "inline-flex",
+			"&-focused, &:focus": { zIndex: 1 },
+			[`> input${componentCls}`]: { padding: 0 },
+			[`> input${componentCls}, > textarea${componentCls}`]: {
+				"fontSize": "inherit",
+				"border": "none",
+				"borderRadius": 0,
+				"outline": "none",
+				"background": "transparent",
+				"color": "inherit",
+				"&::-ms-reveal": { display: "none" },
+				"&:focus": { boxShadow: "none !important" }
+			},
+			"&::before": {
+				display: "inline-block",
+				width: 0,
+				visibility: "hidden",
+				content: "\"\\a0\""
+			},
+			[componentCls]: {
+				"&-prefix, &-suffix": {
+					"display": "flex",
+					"flex": "none",
+					"alignItems": "center",
+					"> *:not(:last-child)": { marginInlineEnd: token.paddingXS }
+				},
+				"&-show-count-suffix": {
+					color: colorTextDescription,
+					direction: "ltr"
+				},
+				"&-show-count-has-suffix": { marginInlineEnd: token.paddingXXS },
+				"&-prefix": { marginInlineEnd: inputAffixPadding },
+				"&-suffix": { marginInlineStart: inputAffixPadding }
+			},
+			...genAllowClearStyle(token),
+			[`${iconCls}${componentCls}-password-icon`]: {
+				"color": colorIcon,
+				"cursor": "pointer",
+				"transition": `all ${motionDurationSlow}`,
+				"&:hover": { color: colorIconHover }
+			}
+		},
+		[`${componentCls}-underlined`]: { borderRadius: 0 },
+		[affixClsDisabled]: { [`${iconCls}${componentCls}-password-icon`]: {
+			"color": colorIcon,
+			"cursor": "not-allowed",
+			"&:hover": { color: colorIcon }
+		} }
+	};
+};
+const genGroupStyle = (token) => {
+	const { componentCls, borderRadiusLG, borderRadiusSM } = token;
+	return { [`${componentCls}-group`]: {
+		...resetComponent(token),
+		...genInputGroupStyle(token),
+		"&-rtl": { direction: "rtl" },
+		"&-wrapper": {
+			"display": "inline-block",
+			"width": "100%",
+			"textAlign": "start",
+			"verticalAlign": "top",
+			"&-rtl": { direction: "rtl" },
+			"&-lg": { [`${componentCls}-group-addon`]: {
+				borderRadius: borderRadiusLG,
+				fontSize: token.inputFontSizeLG
+			} },
+			"&-sm": { [`${componentCls}-group-addon`]: { borderRadius: borderRadiusSM } },
+			...genOutlinedGroupStyle(token),
+			...genFilledGroupStyle(token),
+			[`&:not(${componentCls}-compact-first-item):not(${componentCls}-compact-last-item)${componentCls}-compact-item`]: { [`${componentCls}, ${componentCls}-group-addon`]: { borderRadius: 0 } },
+			[`&:not(${componentCls}-compact-last-item)${componentCls}-compact-first-item`]: { [`${componentCls}, ${componentCls}-group-addon`]: {
+				borderStartEndRadius: 0,
+				borderEndEndRadius: 0
+			} },
+			[`&:not(${componentCls}-compact-first-item)${componentCls}-compact-last-item`]: { [`${componentCls}, ${componentCls}-group-addon`]: {
+				borderStartStartRadius: 0,
+				borderEndStartRadius: 0
+			} },
+			[`&:not(${componentCls}-compact-last-item)${componentCls}-compact-item`]: { [`${componentCls}-affix-wrapper`]: {
+				borderStartEndRadius: 0,
+				borderEndEndRadius: 0
+			} },
+			[`&:not(${componentCls}-compact-first-item)${componentCls}-compact-item`]: { [`${componentCls}-affix-wrapper`]: {
+				borderStartStartRadius: 0,
+				borderEndStartRadius: 0
+			} }
+		}
+	} };
+};
+const genRangeStyle = (token) => {
+	const { componentCls } = token;
+	return { [`${componentCls}-out-of-range`]: { [`&, & input, & textarea, ${componentCls}-show-count-suffix, ${componentCls}-data-count`]: { color: token.colorError } } };
+};
+const useSharedStyle = genStyleHooks(["Input", "Shared"], (token) => {
+	const inputToken = mergeToken(token, initInputToken(token));
+	return [genInputStyle(inputToken), genAffixStyle(inputToken)];
+}, initComponentToken, { resetFont: false });
+var style_default = genStyleHooks(["Input", "Component"], (token) => {
+	const inputToken = mergeToken(token, initInputToken(token));
+	return [
+		genGroupStyle(inputToken),
+		genRangeStyle(inputToken),
+		genCompactItemStyle(inputToken)
+	];
+}, initComponentToken, { resetFont: false });
+
+//#endregion
+export { style_default as default, genBasicInputStyle, genInputSmallStyle, genPlaceholderStyle, useSharedStyle };

package/dist/input/style/otp.js

@@ -0,0 +1,47 @@
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import { initComponentToken, initInputToken } from "./token.js";
+
+//#region src/input/style/otp.ts
+const genOTPStyle = (token) => {
+	const { componentCls, paddingXS } = token;
+	return { [componentCls]: {
+		"display": "inline-flex",
+		"alignItems": "center",
+		"flexWrap": "nowrap",
+		"columnGap": paddingXS,
+		[`${componentCls}-input-wrapper`]: {
+			position: "relative",
+			[`${componentCls}-mask-icon`]: {
+				position: "absolute",
+				zIndex: "1",
+				top: "50%",
+				right: "50%",
+				transform: "translate(50%, -50%)",
+				pointerEvents: "none"
+			},
+			[`${componentCls}-mask-input`]: {
+				color: "transparent",
+				caretColor: token.colorText
+			},
+			[`${componentCls}-mask-input[type=number]::-webkit-inner-spin-button`]: {
+				"-webkit-appearance": "none",
+				"margin": 0
+			},
+			[`${componentCls}-mask-input[type=number]`]: { "-moz-appearance": "textfield" }
+		},
+		"&-rtl": { direction: "rtl" },
+		[`${componentCls}-input`]: {
+			textAlign: "center",
+			paddingInline: token.paddingXXS
+		},
+		[`&${componentCls}-sm ${componentCls}-input`]: { paddingInline: token.calc(token.paddingXXS).div(2).equal() },
+		[`&${componentCls}-lg ${componentCls}-input`]: { paddingInline: token.paddingXS }
+	} };
+};
+var otp_default = genStyleHooks(["Input", "OTP"], (token) => {
+	return genOTPStyle(mergeToken(token, initInputToken(token)));
+}, initComponentToken);
+
+//#endregion
+export { otp_default as default };

package/dist/input/style/search.js

@@ -0,0 +1,24 @@
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import "../../theme/internal.js";
+
+//#region src/input/style/search.ts
+const genSearchStyle = (token) => {
+	const { componentCls } = token;
+	const btnCls = `${componentCls}-btn`;
+	return { [componentCls]: {
+		width: "100%",
+		[btnCls]: { "&-filled": {
+			"background": token.colorFillTertiary,
+			"&:not(:disabled)": {
+				"&:hover": { background: token.colorFillSecondary },
+				"&:active": { background: token.colorFill }
+			}
+		} }
+	} };
+};
+var search_default = genStyleHooks(["Input", "Search"], (token) => {
+	return [genSearchStyle(token)];
+});
+
+//#endregion
+export { search_default as default };

package/dist/input/style/textarea.js

@@ -0,0 +1,79 @@
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import { initComponentToken, initInputToken } from "./token.js";
+
+//#region src/input/style/textarea.ts
+const genTextAreaStyle = (token) => {
+	const { componentCls, paddingLG } = token;
+	const textareaPrefixCls = `${componentCls}-textarea`;
+	return {
+		[`textarea${componentCls}`]: {
+			maxWidth: "100%",
+			height: "auto",
+			minHeight: token.controlHeight,
+			lineHeight: token.lineHeight,
+			verticalAlign: "bottom",
+			transition: `all ${token.motionDurationSlow}`,
+			resize: "vertical",
+			[`&${componentCls}-mouse-active`]: { transition: `all ${token.motionDurationSlow}, height 0s, width 0s` }
+		},
+		[`${componentCls}-textarea-affix-wrapper-resize-dirty`]: { width: "auto" },
+		[textareaPrefixCls]: {
+			"position": "relative",
+			"&-show-count": { [`${componentCls}-data-count`]: {
+				position: "absolute",
+				bottom: token.calc(token.fontSize).mul(token.lineHeight).mul(-1).equal(),
+				insetInlineEnd: 0,
+				color: token.colorTextDescription,
+				whiteSpace: "nowrap",
+				pointerEvents: "none"
+			} },
+			[`
+        &-allow-clear > ${componentCls},
+        &-affix-wrapper${textareaPrefixCls}-has-feedback ${componentCls}
+      `]: { paddingInlineEnd: paddingLG },
+			[`&-affix-wrapper${componentCls}-affix-wrapper`]: {
+				padding: 0,
+				[`> textarea${componentCls}`]: {
+					"fontSize": "inherit",
+					"border": "none",
+					"outline": "none",
+					"background": "transparent",
+					"minHeight": token.calc(token.controlHeight).sub(token.calc(token.lineWidth).mul(2)).equal(),
+					"&:focus": { boxShadow: "none !important" }
+				},
+				[`${componentCls}-suffix`]: {
+					"margin": 0,
+					"> *:not(:last-child)": { marginInline: 0 },
+					[`${componentCls}-clear-icon`]: {
+						position: "absolute",
+						insetInlineEnd: token.paddingInline,
+						insetBlockStart: token.paddingXS
+					},
+					[`${textareaPrefixCls}-suffix`]: {
+						position: "absolute",
+						top: 0,
+						insetInlineEnd: token.paddingInline,
+						bottom: 0,
+						zIndex: 1,
+						display: "inline-flex",
+						alignItems: "center",
+						margin: "auto",
+						pointerEvents: "none"
+					}
+				}
+			},
+			[`&-affix-wrapper${componentCls}-affix-wrapper-rtl`]: { [`${componentCls}-suffix`]: { [`${componentCls}-data-count`]: {
+				direction: "ltr",
+				insetInlineStart: 0
+			} } },
+			[`&-affix-wrapper${componentCls}-affix-wrapper-sm`]: { [`${componentCls}-suffix`]: { [`${componentCls}-clear-icon`]: { insetInlineEnd: token.paddingInlineSM } } }
+		}
+	};
+};
+var textarea_default = genStyleHooks(["Input", "TextArea"], (token) => {
+	return genTextAreaStyle(mergeToken(token, initInputToken(token)));
+}, initComponentToken, { resetFont: false });
+
+//#endregion
+export { textarea_default as default };

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

@@ -0,0 +1,93 @@
+import "../../theme/internal.js";
+
+//#region src/input/style/token.d.ts
+interface SharedComponentToken {
+  /**
+   * @desc 输入框横向内边距
+   * @descEN Horizontal padding of input
+   */
+  paddingInline: number;
+  /**
+   * @desc 小号输入框横向内边距
+   * @descEN Horizontal padding of small input
+   */
+  paddingInlineSM: number;
+  /**
+   * @desc 大号输入框横向内边距
+   * @descEN Horizontal padding of large input
+   */
+  paddingInlineLG: number;
+  /**
+   * @desc 输入框纵向内边距
+   * @descEN Vertical padding of input
+   */
+  paddingBlock: number;
+  /**
+   * @desc 小号输入框纵向内边距
+   * @descEN Vertical padding of small input
+   */
+  paddingBlockSM: number;
+  /**
+   * @desc 大号输入框纵向内边距
+   * @descEN Vertical padding of large input
+   */
+  paddingBlockLG: number;
+  /**
+   * @desc 前/后置标签背景色
+   * @descEN Background color of addon
+   */
+  addonBg: string;
+  /**
+   * @desc 悬浮态边框色
+   * @descEN Hover border color
+   */
+  hoverBorderColor: string;
+  /**
+   * @desc 激活态边框色
+   * @descEN Active border color
+   */
+  activeBorderColor: string;
+  /**
+   * @desc 激活态阴影
+   * @descEN Box-shadow when active
+   */
+  activeShadow: string;
+  /**
+   * @desc 错误状态时激活态阴影
+   * @descEN Box-shadow when active in error status
+   */
+  errorActiveShadow: string;
+  /**
+   * @desc 警告状态时激活态阴影
+   * @descEN Box-shadow when active in warning status
+   */
+  warningActiveShadow: string;
+  /**
+   * @desc 输入框hover状态时背景颜色
+   * @descEN Background color when the input box hovers
+   */
+  hoverBg: string;
+  /**
+   * @desc 输入框激活状态时背景颜色
+   * @descEN Background color when the input box is activated
+   */
+  activeBg: string;
+  /**
+   * @desc 字体大小
+   * @descEN Font size
+   */
+  inputFontSize: number;
+  /**
+   * @desc 大号字体大小
+   * @descEN Font size of large
+   */
+  inputFontSizeLG: number;
+  /**
+   * @desc 小号字体大小
+   * @descEN Font size of small
+   */
+  inputFontSizeSM: number;
+}
+interface ComponentToken extends SharedComponentToken {}
+//#endregion
+export { ComponentToken, SharedComponentToken };