@zboson/ui 0.0.0-stage → 0.0.2

package/dist/date-picker/style/panel.js

@@ -0,0 +1,384 @@
+import { unit } from "@zboson/cssinjs";
+import { FastColor } from "@ant-design/fast-color";
+//#region src/date-picker/style/panel.ts
+const genPickerCellInnerStyle = (token) => {
+	const { pickerCellCls, pickerCellInnerCls, cellHeight, borderRadiusSM, motionDurationMid, cellHoverBg, lineWidth, lineType, colorPrimary, cellActiveWithRangeBg, colorTextLightSolid, colorTextDisabled, cellBgDisabled, colorFillSecondary } = token;
+	return {
+		"&::before": {
+			position: "absolute",
+			top: "50%",
+			insetInlineStart: 0,
+			insetInlineEnd: 0,
+			zIndex: 1,
+			height: cellHeight,
+			transform: "translateY(-50%)",
+			content: "\"\"",
+			pointerEvents: "none"
+		},
+		[pickerCellInnerCls]: {
+			position: "relative",
+			zIndex: 2,
+			display: "inline-block",
+			minWidth: cellHeight,
+			height: cellHeight,
+			lineHeight: unit(cellHeight),
+			borderRadius: borderRadiusSM,
+			transition: `background-color ${motionDurationMid}`
+		},
+		[`&:hover:not(${pickerCellCls}-in-view):not(${pickerCellCls}-disabled),
+    &:hover:not(${pickerCellCls}-selected):not(${pickerCellCls}-range-start):not(${pickerCellCls}-range-end):not(${pickerCellCls}-disabled)`]: { [pickerCellInnerCls]: { background: cellHoverBg } },
+		[`&-in-view${pickerCellCls}-today ${pickerCellInnerCls}`]: { "&::before": {
+			position: "absolute",
+			top: 0,
+			insetInlineEnd: 0,
+			bottom: 0,
+			insetInlineStart: 0,
+			zIndex: 1,
+			border: `${unit(lineWidth)} ${lineType} ${colorPrimary}`,
+			borderRadius: borderRadiusSM,
+			content: "\"\""
+		} },
+		[`&-in-view${pickerCellCls}-in-range,
+      &-in-view${pickerCellCls}-range-start,
+      &-in-view${pickerCellCls}-range-end`]: {
+			position: "relative",
+			[`&:not(${pickerCellCls}-disabled):before`]: { background: cellActiveWithRangeBg }
+		},
+		[`&-in-view${pickerCellCls}-selected,
+      &-in-view${pickerCellCls}-range-start,
+      &-in-view${pickerCellCls}-range-end`]: {
+			[`&:not(${pickerCellCls}-disabled) ${pickerCellInnerCls}`]: {
+				color: colorTextLightSolid,
+				background: colorPrimary
+			},
+			[`&${pickerCellCls}-disabled ${pickerCellInnerCls}`]: { background: colorFillSecondary }
+		},
+		[`&-in-view${pickerCellCls}-range-start:not(${pickerCellCls}-disabled):before`]: { insetInlineStart: "50%" },
+		[`&-in-view${pickerCellCls}-range-end:not(${pickerCellCls}-disabled):before`]: { insetInlineEnd: "50%" },
+		[`&-in-view${pickerCellCls}-range-start:not(${pickerCellCls}-range-end) ${pickerCellInnerCls}`]: {
+			borderStartStartRadius: borderRadiusSM,
+			borderEndStartRadius: borderRadiusSM,
+			borderStartEndRadius: 0,
+			borderEndEndRadius: 0
+		},
+		[`&-in-view${pickerCellCls}-range-end:not(${pickerCellCls}-range-start) ${pickerCellInnerCls}`]: {
+			borderStartStartRadius: 0,
+			borderEndStartRadius: 0,
+			borderStartEndRadius: borderRadiusSM,
+			borderEndEndRadius: borderRadiusSM
+		},
+		"&-disabled": {
+			color: colorTextDisabled,
+			cursor: "not-allowed",
+			[pickerCellInnerCls]: { background: "transparent" },
+			"&::before": { background: cellBgDisabled }
+		},
+		[`&-disabled${pickerCellCls}-today ${pickerCellInnerCls}::before`]: { borderColor: colorTextDisabled }
+	};
+};
+const genPanelStyle = (token) => {
+	const { componentCls, pickerCellCls, pickerCellInnerCls, pickerYearMonthCellWidth, pickerControlIconSize, cellWidth, paddingSM, paddingXS, paddingXXS, colorBgContainer, lineWidth, lineType, borderRadiusLG, colorPrimary, colorTextHeading, colorSplit, pickerControlIconBorderWidth, colorIcon, textHeight, motionDurationMid, colorIconHover, fontWeightStrong, cellHeight, pickerCellPaddingVertical, colorTextDisabled, colorText, fontSize, motionDurationSlow, withoutTimeCellHeight, pickerQuarterPanelContentHeight, borderRadiusSM, colorTextLightSolid, cellHoverBg, timeColumnHeight, timeColumnWidth, timeCellHeight, controlItemBgActive, marginXXS, pickerDatePanelPaddingHorizontal, pickerControlIconMargin } = token;
+	const pickerPanelWidth = token.calc(cellWidth).mul(7).add(token.calc(pickerDatePanelPaddingHorizontal).mul(2)).equal();
+	return { [componentCls]: {
+		"&-panel": {
+			display: "inline-flex",
+			flexDirection: "column",
+			textAlign: "center",
+			background: colorBgContainer,
+			borderRadius: borderRadiusLG,
+			outline: "none",
+			"&-focused": { borderColor: colorPrimary },
+			"&-rtl": {
+				[`${componentCls}-prev-icon,
+              ${componentCls}-super-prev-icon`]: { transform: "rotate(45deg)" },
+				[`${componentCls}-next-icon,
+              ${componentCls}-super-next-icon`]: { transform: "rotate(-135deg)" },
+				[`${componentCls}-time-panel`]: { [`${componentCls}-content`]: {
+					direction: "ltr",
+					"> *": { direction: "rtl" }
+				} }
+			}
+		},
+		[`&-decade-panel,
+        &-year-panel,
+        &-quarter-panel,
+        &-month-panel,
+        &-week-panel,
+        &-date-panel,
+        &-time-panel`]: {
+			display: "flex",
+			flexDirection: "column",
+			width: pickerPanelWidth
+		},
+		"&-header": {
+			display: "flex",
+			padding: `0 ${unit(paddingXS)}`,
+			color: colorTextHeading,
+			borderBottom: `${unit(lineWidth)} ${lineType} ${colorSplit}`,
+			"> *": { flex: "none" },
+			button: {
+				padding: 0,
+				color: colorIcon,
+				lineHeight: unit(textHeight),
+				background: "transparent",
+				border: 0,
+				cursor: "pointer",
+				transition: `color ${motionDurationMid}`,
+				fontSize: "inherit",
+				display: "inline-flex",
+				alignItems: "center",
+				justifyContent: "center",
+				"&:empty": { display: "none" }
+			},
+			"> button": {
+				minWidth: "1.6em",
+				fontSize,
+				"&:hover": { color: colorIconHover },
+				"&:disabled": {
+					opacity: .25,
+					pointerEvents: "none"
+				}
+			},
+			"&-view": {
+				flex: "auto",
+				fontWeight: fontWeightStrong,
+				lineHeight: unit(textHeight),
+				"> button": {
+					color: "inherit",
+					fontWeight: "inherit",
+					verticalAlign: "top",
+					"&:not(:first-child)": { marginInlineStart: paddingXS },
+					"&:hover": { color: colorPrimary }
+				}
+			}
+		},
+		[`&-prev-icon,
+        &-next-icon,
+        &-super-prev-icon,
+        &-super-next-icon`]: {
+			position: "relative",
+			width: pickerControlIconSize,
+			height: pickerControlIconSize,
+			"&::before": {
+				position: "absolute",
+				top: 0,
+				insetInlineStart: 0,
+				width: pickerControlIconSize,
+				height: pickerControlIconSize,
+				border: `0 solid currentcolor`,
+				borderBlockStartWidth: pickerControlIconBorderWidth,
+				borderInlineStartWidth: pickerControlIconBorderWidth,
+				content: "\"\""
+			}
+		},
+		[`&-super-prev-icon,
+        &-super-next-icon`]: { "&::after": {
+			position: "absolute",
+			top: pickerControlIconMargin,
+			insetInlineStart: pickerControlIconMargin,
+			display: "inline-block",
+			width: pickerControlIconSize,
+			height: pickerControlIconSize,
+			border: "0 solid currentcolor",
+			borderBlockStartWidth: pickerControlIconBorderWidth,
+			borderInlineStartWidth: pickerControlIconBorderWidth,
+			content: "\"\""
+		} },
+		"&-prev-icon, &-super-prev-icon": { transform: "rotate(-45deg)" },
+		"&-next-icon, &-super-next-icon": { transform: "rotate(135deg)" },
+		"&-content": {
+			width: "100%",
+			tableLayout: "fixed",
+			borderCollapse: "collapse",
+			"th, td": {
+				position: "relative",
+				minWidth: cellHeight,
+				fontWeight: 400
+			},
+			th: {
+				height: token.calc(cellHeight).add(token.calc(pickerCellPaddingVertical).mul(2)).equal(),
+				color: colorText,
+				verticalAlign: "middle"
+			}
+		},
+		"&-cell": {
+			padding: `${unit(pickerCellPaddingVertical)} 0`,
+			color: colorTextDisabled,
+			cursor: "pointer",
+			"&-in-view": { color: colorText },
+			...genPickerCellInnerStyle(token)
+		},
+		[`&-decade-panel,
+        &-year-panel,
+        &-quarter-panel,
+        &-month-panel`]: {
+			[`${componentCls}-content`]: { height: token.calc(withoutTimeCellHeight).mul(4).equal() },
+			[pickerCellInnerCls]: { padding: `0 ${unit(paddingXS)}` }
+		},
+		"&-quarter-panel": { [`${componentCls}-content`]: { height: pickerQuarterPanelContentHeight } },
+		"&-decade-panel": {
+			[pickerCellInnerCls]: { padding: `0 ${unit(token.calc(paddingXS).div(2).equal())}` },
+			[`${componentCls}-cell::before`]: { display: "none" }
+		},
+		[`&-year-panel,
+        &-quarter-panel,
+        &-month-panel`]: {
+			[`${componentCls}-body`]: { padding: `0 ${unit(paddingXS)}` },
+			[pickerCellInnerCls]: { width: pickerYearMonthCellWidth }
+		},
+		"&-date-panel": {
+			[`${componentCls}-body`]: { padding: `${unit(paddingXS)} ${unit(pickerDatePanelPaddingHorizontal)}` },
+			[`${componentCls}-content th`]: {
+				boxSizing: "border-box",
+				padding: 0
+			}
+		},
+		"&-week-panel-row": {
+			td: {
+				"&:before": { transition: `background-color ${motionDurationMid}` },
+				"&:first-child:before": {
+					borderStartStartRadius: borderRadiusSM,
+					borderEndStartRadius: borderRadiusSM
+				},
+				"&:last-child:before": {
+					borderStartEndRadius: borderRadiusSM,
+					borderEndEndRadius: borderRadiusSM
+				}
+			},
+			"&:hover td:before": { background: cellHoverBg },
+			"&-range-start td, &-range-end td, &-selected td, &-hover td": { [`&${pickerCellCls}`]: {
+				"&:before": { background: colorPrimary },
+				[`&${componentCls}-cell-week`]: { color: new FastColor(colorTextLightSolid).setA(.5).toHexString() },
+				[pickerCellInnerCls]: { color: colorTextLightSolid }
+			} },
+			"&-range-hover td:before": { background: controlItemBgActive }
+		},
+		"&-week-panel, &-date-panel-show-week": {
+			[`${componentCls}-body`]: { padding: `${unit(paddingXS)} ${unit(paddingSM)}` },
+			[`${componentCls}-content th`]: { width: "auto" }
+		},
+		"&-datetime-panel": {
+			display: "flex",
+			[`${componentCls}-time-panel`]: { borderInlineStart: `${unit(lineWidth)} ${lineType} ${colorSplit}` },
+			[`${componentCls}-date-panel,
+          ${componentCls}-time-panel`]: { transition: `opacity ${motionDurationSlow}` },
+			"&-active": { [`${componentCls}-date-panel,
+            ${componentCls}-time-panel`]: {
+				opacity: .3,
+				"&-active": { opacity: 1 }
+			} }
+		},
+		"&-time-panel": {
+			width: "auto",
+			minWidth: "auto",
+			[`${componentCls}-content`]: {
+				display: "flex",
+				flex: "auto",
+				height: timeColumnHeight
+			},
+			"&-column": {
+				flex: "1 0 auto",
+				width: timeColumnWidth,
+				margin: `${unit(paddingXXS)} 0`,
+				padding: 0,
+				overflowY: "auto",
+				textAlign: "start",
+				listStyle: "none",
+				transition: `background-color ${motionDurationMid}`,
+				overflowX: "hidden",
+				"&::-webkit-scrollbar": {
+					width: 8,
+					backgroundColor: "transparent"
+				},
+				"&::-webkit-scrollbar-thumb": {
+					backgroundColor: token.colorTextTertiary,
+					borderRadius: token.borderRadiusSM
+				},
+				"&": {
+					scrollbarWidth: "thin",
+					scrollbarColor: `${token.colorTextTertiary} transparent`
+				},
+				"&::after": {
+					display: "block",
+					height: `calc(100% - ${unit(timeCellHeight)})`,
+					content: "\"\""
+				},
+				"&:not(:first-child)": { borderInlineStart: `${unit(lineWidth)} ${lineType} ${colorSplit}` },
+				"&-active": { background: new FastColor(controlItemBgActive).setA(.2).toHexString() },
+				"> li": {
+					margin: 0,
+					padding: 0,
+					[`&${componentCls}-time-panel-cell`]: {
+						marginInline: marginXXS,
+						[`${componentCls}-time-panel-cell-inner`]: {
+							display: "block",
+							width: token.calc(timeColumnWidth).sub(token.calc(marginXXS).mul(2)).equal(),
+							height: timeCellHeight,
+							margin: 0,
+							paddingBlock: 0,
+							paddingInlineEnd: 0,
+							paddingInlineStart: token.calc(timeColumnWidth).sub(timeCellHeight).div(2).equal(),
+							color: colorText,
+							lineHeight: unit(timeCellHeight),
+							borderRadius: borderRadiusSM,
+							cursor: "pointer",
+							transition: `background-color ${motionDurationMid}`,
+							"&:hover": { background: cellHoverBg }
+						},
+						"&-selected": { [`${componentCls}-time-panel-cell-inner`]: { background: controlItemBgActive } },
+						"&-disabled": { [`${componentCls}-time-panel-cell-inner`]: {
+							color: colorTextDisabled,
+							background: "transparent",
+							cursor: "not-allowed"
+						} }
+					}
+				}
+			}
+		}
+	} };
+};
+const genPickerPanelStyle = (token) => {
+	const { componentCls, textHeight, lineWidth, paddingSM, antCls, colorPrimary, cellActiveWithRangeBg, colorPrimaryBorder, lineType, colorSplit } = token;
+	return { [`${componentCls}-dropdown`]: {
+		[`${componentCls}-footer`]: {
+			borderTop: `${unit(lineWidth)} ${lineType} ${colorSplit}`,
+			"&-extra": {
+				padding: `0 ${unit(paddingSM)}`,
+				lineHeight: unit(token.calc(textHeight).sub(token.calc(lineWidth).mul(2)).equal()),
+				textAlign: "start",
+				"&:not(:last-child)": { borderBottom: `${unit(lineWidth)} ${lineType} ${colorSplit}` }
+			}
+		},
+		[`${componentCls}-panels + ${componentCls}-footer ${componentCls}-ranges`]: { justifyContent: "space-between" },
+		[`${componentCls}-ranges`]: {
+			marginBlock: 0,
+			paddingInline: unit(paddingSM),
+			overflow: "hidden",
+			textAlign: "start",
+			listStyle: "none",
+			display: "flex",
+			justifyContent: "center",
+			alignItems: "center",
+			"> li": {
+				lineHeight: unit(token.calc(textHeight).sub(token.calc(lineWidth).mul(2)).equal()),
+				display: "inline-block"
+			},
+			[`${componentCls}-now-btn-disabled`]: {
+				pointerEvents: "none",
+				color: token.colorTextDisabled
+			},
+			[`${componentCls}-preset > ${antCls}-tag-blue`]: {
+				color: colorPrimary,
+				background: cellActiveWithRangeBg,
+				borderColor: colorPrimaryBorder,
+				cursor: "pointer"
+			},
+			[`${componentCls}-ok`]: {
+				paddingBlock: token.calc(lineWidth).mul(2).equal(),
+				marginInlineStart: "auto"
+			}
+		}
+	} };
+};
+//#endregion
+export { genPickerPanelStyle as default, genPanelStyle };

package/dist/date-picker/style/token.d.ts

@@ -0,0 +1,107 @@
+import { SharedComponentToken, SharedInputToken } from "../../input/style/token.js";
+import { MultipleSelectorToken, SelectorToken } from "../../select/style/token.js";
+import { ArrowToken } from "../../style/roundedArrow.js";
+import { FullToken, GetDefaultToken, GlobalToken } from "../../theme/interface/cssinjs-utils.js";
+import { TokenWithCommonCls } from "../../theme/internal.js";
+//#region src/date-picker/style/token.d.ts
+interface PanelComponentToken extends MultipleSelectorToken {
+  /**
+   * @desc 单元格悬浮态背景色
+   * @descEN Background color of cell hover state
+   */
+  cellHoverBg: string;
+  /**
+   * @desc 选取范围内的单元格背景色
+   * @descEN Background color of cell in range
+   */
+  cellActiveWithRangeBg: string;
+  /**
+   * @desc 选取范围内的单元格悬浮态背景色
+   * @descEN Background color of hovered cell in range
+   */
+  cellHoverWithRangeBg: string;
+  /**
+   * @desc 单元格禁用态背景色
+   * @descEN Background color of disabled cell
+   */
+  cellBgDisabled: string;
+  /**
+   * @desc 选取范围时单元格边框色
+   * @descEN Border color of cell in range when picking
+   */
+  cellRangeBorderColor: string;
+  /**
+   * @desc 时间列宽度
+   * @descEN Width of time column
+   */
+  timeColumnWidth: number;
+  /**
+   * @desc 时间列高度
+   * @descEN Height of time column
+   */
+  timeColumnHeight: number;
+  /**
+   * @desc 时间单元格高度
+   * @descEN Height of time cell
+   */
+  timeCellHeight: number;
+  /**
+   * @desc 单元格高度
+   * @descEN Height of cell
+   */
+  cellHeight: number;
+  /**
+   * @desc 单元格宽度
+   * @descEN Width of cell
+   */
+  cellWidth: number;
+  /**
+   * @desc 单元格文本高度
+   * @descEN Height of cell text
+   */
+  textHeight: number;
+  /**
+   * @desc 十年/年/季/月/周单元格高度
+   * @descEN Height of decade/year/quarter/month/week cell
+   */
+  withoutTimeCellHeight: number;
+}
+interface ComponentToken extends Exclude<SharedComponentToken, 'addonBg'>, PanelComponentToken, ArrowToken {
+  /**
+   * @desc 预设区域宽度
+   * @descEN Width of preset area
+   */
+  presetsWidth: number;
+  /**
+   * @desc 预设区域最大宽度
+   * @descEN Max width of preset area
+   */
+  presetsMaxWidth: number;
+  /**
+   * @desc 弹窗 z-index
+   * @descEN z-index of popup
+   */
+  zIndexPopup: number;
+}
+interface PickerPanelToken {
+  pickerCellCls: string;
+  pickerCellInnerCls: string;
+  pickerDatePanelPaddingHorizontal: number | string;
+  pickerYearMonthCellWidth: number | string;
+  pickerCellPaddingVertical: number | string;
+  pickerQuarterPanelContentHeight: number | string;
+  pickerCellBorderGap: number;
+  pickerControlIconSize: number;
+  pickerControlIconMargin: number;
+  pickerControlIconBorderWidth: number;
+}
+interface PickerToken extends FullToken<'DatePicker'>, PickerPanelToken, SharedInputToken, SelectorToken {
+  /** @private Used for internal calculation */
+  INTERNAL_FIXED_ITEM_MARGIN: number;
+}
+type SharedPickerToken = TokenWithCommonCls<GlobalToken> & PickerPanelToken & PanelComponentToken;
+declare function initPickerPanelToken(token: TokenWithCommonCls<GlobalToken>): PickerPanelToken;
+declare function initPanelComponentToken(token: GlobalToken): PanelComponentToken;
+declare const prepareComponentToken: GetDefaultToken<'DatePicker'>;
+//#endregion
+export { ComponentToken, PanelComponentToken, PickerPanelToken, PickerToken, SharedPickerToken, initPanelComponentToken, initPickerPanelToken, prepareComponentToken };

package/dist/date-picker/style/token.js

@@ -0,0 +1,60 @@
+import { getArrowToken } from "../../style/roundedArrow.js";
+import { initComponentToken } from "../../input/style/token.js";
+import { FastColor } from "@ant-design/fast-color";
+//#region src/date-picker/style/token.ts
+function initPickerPanelToken(token) {
+	const { componentCls, controlHeightLG, paddingXXS, padding } = token;
+	return {
+		pickerCellCls: `${componentCls}-cell`,
+		pickerCellInnerCls: `${componentCls}-cell-inner`,
+		pickerYearMonthCellWidth: token.calc(controlHeightLG).mul(1.5).equal(),
+		pickerQuarterPanelContentHeight: token.calc(controlHeightLG).mul(1.4).equal(),
+		pickerCellPaddingVertical: token.calc(paddingXXS).add(token.calc(paddingXXS).div(2)).equal(),
+		pickerCellBorderGap: 2,
+		pickerControlIconSize: 7,
+		pickerControlIconMargin: 4,
+		pickerControlIconBorderWidth: 1.5,
+		pickerDatePanelPaddingHorizontal: token.calc(padding).add(token.calc(paddingXXS).div(2)).equal()
+	};
+}
+function initPanelComponentToken(token) {
+	const { colorBgContainerDisabled, controlHeight, controlHeightSM, controlHeightLG, paddingXXS, lineWidth } = token;
+	const dblPaddingXXS = paddingXXS * 2;
+	const dblLineWidth = lineWidth * 2;
+	const multipleItemHeight = Math.min(controlHeight - dblPaddingXXS, controlHeight - dblLineWidth);
+	const multipleItemHeightSM = Math.min(controlHeightSM - dblPaddingXXS, controlHeightSM - dblLineWidth);
+	const multipleItemHeightLG = Math.min(controlHeightLG - dblPaddingXXS, controlHeightLG - dblLineWidth);
+	return {
+		INTERNAL_FIXED_ITEM_MARGIN: Math.floor(paddingXXS / 2),
+		cellHoverBg: token.controlItemBgHover,
+		cellActiveWithRangeBg: token.controlItemBgActive,
+		cellHoverWithRangeBg: new FastColor(token.colorPrimary).lighten(35).toHexString(),
+		cellRangeBorderColor: new FastColor(token.colorPrimary).lighten(20).toHexString(),
+		cellBgDisabled: colorBgContainerDisabled,
+		timeColumnWidth: controlHeightLG * 1.4,
+		timeColumnHeight: 224,
+		timeCellHeight: 28,
+		cellWidth: controlHeightSM * 1.5,
+		cellHeight: controlHeightSM,
+		textHeight: controlHeightLG,
+		withoutTimeCellHeight: controlHeightLG * 1.65,
+		multipleItemBg: token.colorFillSecondary,
+		multipleItemBorderColor: "transparent",
+		multipleItemHeight,
+		multipleItemHeightSM,
+		multipleItemHeightLG,
+		multipleSelectorBgDisabled: colorBgContainerDisabled,
+		multipleItemColorDisabled: token.colorTextDisabled,
+		multipleItemBorderColorDisabled: "transparent"
+	};
+}
+const prepareComponentToken = (token) => ({
+	...initComponentToken(token),
+	...initPanelComponentToken(token),
+	...getArrowToken(token),
+	presetsWidth: 120,
+	presetsMaxWidth: 200,
+	zIndexPopup: token.zIndexPopupBase + 50
+});
+//#endregion
+export { initPanelComponentToken, initPickerPanelToken, prepareComponentToken };

package/dist/date-picker/style/util.d.ts

@@ -0,0 +1,33 @@
+import { SelectToken } from "../../select/style/token.js";
+import { CSSObject } from "@zboson/cssinjs";
+//#region src/date-picker/style/util.d.ts
+/**
+ * Get multiple selector needed style. The calculation:
+ *
+ * ContainerPadding = BasePadding - ItemMargin
+ *
+ * Border:                    ╔═══════════════════════════╗                 ┬
+ * ContainerPadding:          ║                           ║                 │
+ *                            ╟───────────────────────────╢     ┬           │
+ * Item Margin:               ║                           ║     │           │
+ *                            ║             ┌──────────┐  ║     │           │
+ * Item(multipleItemHeight):  ║ BasePadding │   Item   │  ║  Overflow  Container(ControlHeight)
+ *                            ║             └──────────┘  ║     │           │
+ * Item Margin:               ║                           ║     │           │
+ *                            ╟───────────────────────────╢     ┴           │
+ * ContainerPadding:          ║                           ║                 │
+ * Border:                    ╚═══════════════════════════╝                 ┴
+ */
+declare function getMultipleSelectorUnit(token: Pick<SelectToken, 'max' | 'calc' | 'multipleSelectItemHeight' | 'paddingXXS' | 'lineWidth' | 'INTERNAL_FIXED_ITEM_MARGIN'>): {
+  basePadding: string | number;
+  containerPadding: string | number;
+  itemHeight: string;
+  itemLineHeight: string;
+};
+/**
+ * Get the `@rc-component/overflow` needed style.
+ * It's a share style which means not affected by `size`.
+ */
+declare function genOverflowStyle(token: Pick<SelectToken, 'calc' | 'componentCls' | 'iconCls' | 'borderRadiusSM' | 'motionDurationSlow' | 'paddingXS' | 'multipleItemColorDisabled' | 'multipleItemBorderColorDisabled' | 'colorIcon' | 'colorIconHover' | 'INTERNAL_FIXED_ITEM_MARGIN'>): CSSObject;
+//#endregion
+export { genOverflowStyle, getMultipleSelectorUnit };

package/dist/date-picker/style/util.js

@@ -0,0 +1,99 @@
+import { resetIcon } from "../../style/index.js";
+import { unit } from "@zboson/cssinjs";
+//#region src/date-picker/style/util.ts
+/**
+* Get multiple selector needed style. The calculation:
+*
+* ContainerPadding = BasePadding - ItemMargin
+*
+* Border:                    ╔═══════════════════════════╗                 ┬
+* ContainerPadding:          ║                           ║                 │
+*                            ╟───────────────────────────╢     ┬           │
+* Item Margin:               ║                           ║     │           │
+*                            ║             ┌──────────┐  ║     │           │
+* Item(multipleItemHeight):  ║ BasePadding │   Item   │  ║  Overflow  Container(ControlHeight)
+*                            ║             └──────────┘  ║     │           │
+* Item Margin:               ║                           ║     │           │
+*                            ╟───────────────────────────╢     ┴           │
+* ContainerPadding:          ║                           ║                 │
+* Border:                    ╚═══════════════════════════╝                 ┴
+*/
+function getMultipleSelectorUnit(token) {
+	const { multipleSelectItemHeight, paddingXXS, lineWidth, INTERNAL_FIXED_ITEM_MARGIN } = token;
+	const basePadding = token.max(token.calc(paddingXXS).sub(lineWidth).equal(), 0);
+	return {
+		basePadding,
+		containerPadding: token.max(token.calc(basePadding).sub(INTERNAL_FIXED_ITEM_MARGIN).equal(), 0),
+		itemHeight: unit(multipleSelectItemHeight),
+		itemLineHeight: unit(token.calc(multipleSelectItemHeight).sub(token.calc(token.lineWidth).mul(2)).equal())
+	};
+}
+/**
+* Get the `@rc-component/overflow` needed style.
+* It's a share style which means not affected by `size`.
+*/
+function genOverflowStyle(token) {
+	const { componentCls, iconCls, borderRadiusSM, motionDurationSlow, paddingXS, multipleItemColorDisabled, multipleItemBorderColorDisabled, colorIcon, colorIconHover, INTERNAL_FIXED_ITEM_MARGIN } = token;
+	return { 
+	/**
+	* Do not merge `height` & `line-height` under style with `selection` & `search`, since chrome
+	* may update to redesign with its align logic.
+	*/
+[`${componentCls}-selection-overflow`]: {
+		position: "relative",
+		display: "flex",
+		flex: "auto",
+		flexWrap: "wrap",
+		maxWidth: "100%",
+		"&-item": {
+			flex: "none",
+			alignSelf: "center",
+			maxWidth: "calc(100% - 4px)",
+			display: "inline-flex"
+		},
+		[`${componentCls}-selection-item`]: {
+			display: "flex",
+			alignSelf: "center",
+			flex: "none",
+			boxSizing: "border-box",
+			maxWidth: "100%",
+			marginBlock: INTERNAL_FIXED_ITEM_MARGIN,
+			borderRadius: borderRadiusSM,
+			cursor: "default",
+			transition: [
+				`font-size`,
+				`line-height`,
+				`height`
+			].map((prop) => `${prop} ${motionDurationSlow}`).join(", "),
+			marginInlineEnd: token.calc(INTERNAL_FIXED_ITEM_MARGIN).mul(2).equal(),
+			paddingInlineStart: paddingXS,
+			paddingInlineEnd: token.calc(paddingXS).div(2).equal(),
+			[`${componentCls}-disabled&`]: {
+				color: multipleItemColorDisabled,
+				borderColor: multipleItemBorderColorDisabled,
+				cursor: "not-allowed"
+			},
+			"&-content": {
+				display: "inline-block",
+				marginInlineEnd: token.calc(paddingXS).div(2).equal(),
+				overflow: "hidden",
+				whiteSpace: "pre",
+				textOverflow: "ellipsis"
+			},
+			"&-remove": {
+				...resetIcon(),
+				display: "inline-flex",
+				alignItems: "center",
+				color: colorIcon,
+				fontWeight: 700,
+				fontSize: 10,
+				lineHeight: "inherit",
+				cursor: "pointer",
+				[`> ${iconCls}`]: { verticalAlign: "-0.2em" },
+				"&:hover": { color: colorIconHover }
+			}
+		}
+	} };
+}
+//#endregion
+export { genOverflowStyle, getMultipleSelectorUnit };

package/dist/date-picker/style/variants.d.ts

@@ -0,0 +1,7 @@
+import { PickerToken } from "./token.js";
+import { GenerateStyle } from "../../theme/interface/index.js";
+import { CSSObject } from "@zboson/cssinjs";
+//#region src/date-picker/style/variants.d.ts
+declare const genVariantsStyle: GenerateStyle<PickerToken, CSSObject>;
+//#endregion
+export { genVariantsStyle as default };