antdv-next 0.0.111 → 1.0.0-alpha.1

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

@@ -0,0 +1,388 @@
+import { unit } from "@antdv-next/cssinjs";
+import { FastColor } from "@ant-design/fast-color";
+
+//#region src/date-picker/style/panel.ts
+function 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 ${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 }
+	};
+}
+function 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: "normal"
+			},
+			"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 ${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": "hidden",
+				"textAlign": "start",
+				"listStyle": "none",
+				"transition": `background ${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() },
+				"&:hover": { overflowY: "auto" },
+				"> 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 ${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"
+			}
+		}
+	} };
+};
+var panel_default = genPickerPanelStyle;
+
+//#endregion
+export { panel_default as default, genPanelStyle };

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

@@ -0,0 +1,87 @@
+import { SharedComponentToken } from "../../input/style/token.js";
+import { MultipleSelectorToken } from "../../select/style/token.js";
+import { ArrowToken } from "../../style/roundedArrow.js";
+import "../../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;
+}
+//#endregion
+export { ComponentToken, PanelComponentToken };

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

@@ -0,0 +1,63 @@
+import { getArrowToken } from "../../style/roundedArrow.js";
+import { initComponentToken } from "../../input/style/token.js";
+import "../../input/style/index.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.js

@@ -0,0 +1,92 @@
+import { resetIcon } from "../../style/index.js";
+import { unit } from "@antdv-next/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 { [`${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 ${motionDurationSlow}, line-height ${motionDurationSlow}, height ${motionDurationSlow}`,
+			"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": "bold",
+				"fontSize": 10,
+				"lineHeight": "inherit",
+				"cursor": "pointer",
+				[`> ${iconCls}`]: { verticalAlign: "-0.2em" },
+				"&:hover": { color: colorIconHover }
+			}
+		}
+	} };
+}
+
+//#endregion
+export { genOverflowStyle, getMultipleSelectorUnit };

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

@@ -0,0 +1,34 @@
+import { genBorderlessStyle, genFilledStyle, genOutlinedStyle, genUnderlinedStyle } from "../../input/style/variants.js";
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/date-picker/style/variants.ts
+function genVariantsStyle(token) {
+	const { componentCls } = token;
+	return { [componentCls]: [{
+		...genOutlinedStyle(token),
+		...genUnderlinedStyle(token),
+		...genFilledStyle(token),
+		...genBorderlessStyle(token)
+	}, {
+		"&-outlined": { [`&${componentCls}-multiple ${componentCls}-selection-item`]: {
+			background: token.multipleItemBg,
+			border: `${unit(token.lineWidth)} ${token.lineType} ${token.multipleItemBorderColor}`
+		} },
+		"&-filled": { [`&${componentCls}-multiple ${componentCls}-selection-item`]: {
+			background: token.colorBgContainer,
+			border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`
+		} },
+		"&-borderless": { [`&${componentCls}-multiple ${componentCls}-selection-item`]: {
+			background: token.multipleItemBg,
+			border: `${unit(token.lineWidth)} ${token.lineType} ${token.multipleItemBorderColor}`
+		} },
+		"&-underlined": { [`&${componentCls}-multiple ${componentCls}-selection-item`]: {
+			background: token.multipleItemBg,
+			border: `${unit(token.lineWidth)} ${token.lineType} ${token.multipleItemBorderColor}`
+		} }
+	}] };
+}
+var variants_default = genVariantsStyle;
+
+//#endregion
+export { variants_default as default };