@zboson/ui 0.0.0-stage → 0.0.2

package/dist/button/style/token.js

@@ -0,0 +1,82 @@
+import { PresetColors } from "../../theme/interface/presetColors.js";
+import { getLineHeight } from "../../theme/themes/shared/genFontSizes.js";
+import getAlphaColor from "../../theme/util/getAlphaColor.js";
+import { mergeToken } from "../../theme/internal.js";
+import { AggregationColor } from "../../color-picker/color.js";
+import { isBright } from "../../color-picker/components/ColorPresets.js";
+import { unit } from "@zboson/cssinjs";
+//#region src/button/style/token.ts
+function prepareToken(token) {
+	const { paddingInline, onlyIconSize, borderColorDisabled } = token;
+	return mergeToken(token, {
+		buttonPaddingHorizontal: paddingInline,
+		buttonPaddingVertical: 0,
+		buttonIconOnlyFontSize: onlyIconSize,
+		colorBorderDisabled: borderColorDisabled
+	});
+}
+const prepareComponentToken = (token) => {
+	const contentFontSize = token.contentFontSize ?? token.fontSize;
+	const contentFontSizeSM = token.contentFontSizeSM ?? token.fontSize;
+	const contentFontSizeLG = token.contentFontSizeLG ?? token.fontSizeLG;
+	const contentLineHeight = token.contentLineHeight ?? getLineHeight(contentFontSize);
+	const contentLineHeightSM = token.contentLineHeightSM ?? getLineHeight(contentFontSizeSM);
+	const contentLineHeightLG = token.contentLineHeightLG ?? getLineHeight(contentFontSizeLG);
+	const solidTextColor = isBright(new AggregationColor(token.colorBgSolid), "#fff") ? "#000" : "#fff";
+	const shadowColorTokens = PresetColors.reduce((prev, colorKey) => ({
+		...prev,
+		[`${colorKey}ShadowColor`]: `0 ${unit(token.controlOutlineWidth)} 0 ${getAlphaColor(token[`${colorKey}1`], token.colorBgContainer)}`
+	}), {});
+	const defaultBgDisabled = token.colorBgContainerDisabled;
+	const dashedBgDisabled = token.colorBgContainerDisabled;
+	return {
+		...shadowColorTokens,
+		fontWeight: 400,
+		iconGap: token.marginXS,
+		defaultShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlTmpOutline}`,
+		primaryShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlOutline}`,
+		dangerShadow: `0 ${token.controlOutlineWidth}px 0 ${token.colorErrorOutline}`,
+		primaryColor: token.colorTextLightSolid,
+		dangerColor: token.colorTextLightSolid,
+		borderColorDisabled: token.colorBorderDisabled,
+		defaultGhostColor: token.colorBgContainer,
+		ghostBg: "transparent",
+		defaultGhostBorderColor: token.colorBgContainer,
+		paddingInline: token.paddingContentHorizontal - token.lineWidth,
+		paddingInlineLG: token.paddingContentHorizontal - token.lineWidth,
+		paddingInlineSM: 8 - token.lineWidth,
+		onlyIconSize: "inherit",
+		onlyIconSizeSM: "inherit",
+		onlyIconSizeLG: "inherit",
+		groupBorderColor: token.colorPrimaryHover,
+		linkHoverBg: "transparent",
+		textTextColor: token.colorText,
+		textTextHoverColor: token.colorText,
+		textTextActiveColor: token.colorText,
+		textHoverBg: token.colorFillTertiary,
+		defaultColor: token.colorText,
+		defaultBg: token.colorBgContainer,
+		defaultBorderColor: token.colorBorder,
+		defaultBorderColorDisabled: token.colorBorder,
+		defaultHoverBg: token.colorBgContainer,
+		defaultHoverColor: token.colorPrimaryHover,
+		defaultHoverBorderColor: token.colorPrimaryHover,
+		defaultActiveBg: token.colorBgContainer,
+		defaultActiveColor: token.colorPrimaryActive,
+		defaultActiveBorderColor: token.colorPrimaryActive,
+		solidTextColor,
+		contentFontSize,
+		contentFontSizeSM,
+		contentFontSizeLG,
+		contentLineHeight,
+		contentLineHeightSM,
+		contentLineHeightLG,
+		paddingBlock: Math.max((token.controlHeight - contentFontSize * contentLineHeight) / 2 - token.lineWidth, 0),
+		paddingBlockSM: Math.max((token.controlHeightSM - contentFontSizeSM * contentLineHeightSM) / 2 - token.lineWidth, 0),
+		paddingBlockLG: Math.max((token.controlHeightLG - contentFontSizeLG * contentLineHeightLG) / 2 - token.lineWidth, 0),
+		defaultBgDisabled,
+		dashedBgDisabled
+	};
+};
+//#endregion
+export { prepareComponentToken, prepareToken };

package/dist/button/style/variant.d.ts

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

package/dist/button/style/variant.js

@@ -0,0 +1,223 @@
+import { PresetColors } from "../../theme/interface/presetColors.js";
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
+//#region src/button/style/variant.ts
+const genVariantStyle = (token) => {
+	const { componentCls, antCls, lineWidth, lineType } = token;
+	const [varName, varRef] = genCssVar(antCls, "btn");
+	return { [componentCls]: [
+		{
+			[varName("border-width")]: lineWidth,
+			[varName("border-color")]: "#000",
+			[varName("border-color-hover")]: varRef("border-color"),
+			[varName("border-color-active")]: varRef("border-color"),
+			[varName("border-color-disabled")]: varRef("border-color"),
+			[varName("border-style")]: lineType,
+			[varName("text-color")]: "#000",
+			[varName("text-color-hover")]: varRef("text-color"),
+			[varName("text-color-active")]: varRef("text-color"),
+			[varName("text-color-disabled")]: varRef("text-color"),
+			[varName("bg-color")]: "#ddd",
+			[varName("bg-color-hover")]: varRef("bg-color"),
+			[varName("bg-color-active")]: varRef("bg-color"),
+			[varName("bg-color-disabled")]: token.colorBgContainerDisabled,
+			[varName("bg-color-container")]: token.colorBgContainer,
+			[varName("shadow")]: "none"
+		},
+		{
+			border: [
+				varRef("border-width"),
+				varRef("border-style"),
+				varRef("border-color")
+			].join(" "),
+			color: varRef("text-color"),
+			backgroundColor: varRef("bg-color"),
+			[`&:not(:disabled):not(${componentCls}-disabled)`]: {
+				"&:hover": {
+					border: [
+						varRef("border-width"),
+						varRef("border-style"),
+						varRef("border-color-hover")
+					].join(" "),
+					color: varRef("text-color-hover"),
+					backgroundColor: varRef("bg-color-hover")
+				},
+				"&:active": {
+					border: [
+						varRef("border-width"),
+						varRef("border-style"),
+						varRef("border-color-active")
+					].join(" "),
+					color: varRef("text-color-active"),
+					backgroundColor: varRef("bg-color-active")
+				}
+			}
+		},
+		{
+			[`&${componentCls}-variant-solid`]: {
+				[varName("solid-bg-color")]: varRef("color-base"),
+				[varName("solid-bg-color-hover")]: varRef("color-hover"),
+				[varName("solid-bg-color-active")]: varRef("color-active"),
+				[varName("border-color")]: "transparent",
+				[varName("text-color")]: token.colorTextLightSolid,
+				[varName("bg-color")]: varRef("solid-bg-color"),
+				[varName("bg-color-hover")]: varRef("solid-bg-color-hover"),
+				[varName("bg-color-active")]: varRef("solid-bg-color-active"),
+				boxShadow: varRef("shadow")
+			},
+			[`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: {
+				[varName("border-color")]: varRef("color-base"),
+				[varName("border-color-hover")]: varRef("color-hover"),
+				[varName("border-color-active")]: varRef("color-active"),
+				[varName("bg-color")]: varRef("bg-color-container"),
+				[varName("text-color")]: varRef("color-base"),
+				[varName("text-color-hover")]: varRef("color-hover"),
+				[varName("text-color-active")]: varRef("color-active"),
+				boxShadow: varRef("shadow")
+			},
+			[`&${componentCls}-variant-dashed`]: {
+				[varName("border-style")]: "dashed",
+				[varName("bg-color-disabled")]: token.dashedBgDisabled
+			},
+			[`&${componentCls}-variant-filled`]: {
+				[varName("border-color")]: "transparent",
+				[varName("text-color")]: varRef("color-base"),
+				[varName("bg-color")]: varRef("color-light"),
+				[varName("bg-color-hover")]: varRef("color-light-hover"),
+				[varName("bg-color-active")]: varRef("color-light-active")
+			},
+			[`&${componentCls}-variant-text, &${componentCls}-variant-link`]: {
+				[varName("border-color")]: "transparent",
+				[varName("text-color")]: varRef("color-base"),
+				[varName("text-color-hover")]: varRef("color-hover"),
+				[varName("text-color-active")]: varRef("color-active"),
+				[varName("bg-color")]: "transparent",
+				[varName("bg-color-hover")]: "transparent",
+				[varName("bg-color-active")]: "transparent",
+				[`&:disabled, &${token.componentCls}-disabled`]: {
+					background: "transparent",
+					borderColor: "transparent"
+				}
+			},
+			[`&${componentCls}-variant-text`]: {
+				[varName("bg-color-hover")]: varRef("color-light"),
+				[varName("bg-color-active")]: varRef("color-light-active")
+			}
+		},
+		{
+			[`&${componentCls}-variant-link`]: {
+				[varName("color-base")]: token.colorLink,
+				[varName("color-hover")]: token.colorLinkHover,
+				[varName("color-active")]: token.colorLinkActive,
+				[varName("bg-color-hover")]: token.linkHoverBg
+			},
+			[`&${componentCls}-color-primary`]: {
+				[varName("color-base")]: token.colorPrimary,
+				[varName("color-hover")]: token.colorPrimaryHover,
+				[varName("color-active")]: token.colorPrimaryActive,
+				[varName("color-light")]: token.colorPrimaryBg,
+				[varName("color-light-hover")]: token.colorPrimaryBgHover,
+				[varName("color-light-active")]: token.colorPrimaryBorder,
+				[varName("shadow")]: token.primaryShadow,
+				[`&${componentCls}-variant-solid`]: {
+					[varName("text-color")]: token.primaryColor,
+					[varName("text-color-hover")]: varRef("text-color"),
+					[varName("text-color-active")]: varRef("text-color")
+				}
+			},
+			[`&${componentCls}-color-dangerous`]: {
+				[varName("color-base")]: token.colorError,
+				[varName("color-hover")]: token.colorErrorHover,
+				[varName("color-active")]: token.colorErrorActive,
+				[varName("color-light")]: token.colorErrorBg,
+				[varName("color-light-hover")]: token.colorErrorBgFilledHover,
+				[varName("color-light-active")]: token.colorErrorBgActive,
+				[varName("shadow")]: token.dangerShadow,
+				[`&${componentCls}-variant-solid`]: {
+					[varName("text-color")]: token.dangerColor,
+					[varName("text-color-hover")]: varRef("text-color"),
+					[varName("text-color-active")]: varRef("text-color")
+				}
+			},
+			[`&${componentCls}-color-default`]: {
+				[varName("solid-bg-color")]: token.colorBgSolid,
+				[varName("solid-bg-color-hover")]: token.colorBgSolidHover,
+				[varName("solid-bg-color-active")]: token.colorBgSolidActive,
+				[varName("color-base")]: token.defaultBorderColor,
+				[varName("color-hover")]: token.defaultHoverBorderColor,
+				[varName("color-active")]: token.defaultActiveBorderColor,
+				[varName("color-light")]: token.colorFillTertiary,
+				[varName("color-light-hover")]: token.colorFillSecondary,
+				[varName("color-light-active")]: token.colorFill,
+				[varName("text-color")]: token.defaultColor,
+				[varName("text-color-hover")]: token.defaultHoverColor,
+				[varName("text-color-active")]: token.defaultActiveColor,
+				[varName("shadow")]: token.defaultShadow,
+				[`&${componentCls}-variant-outlined`]: { [varName("bg-color-disabled")]: token.defaultBgDisabled },
+				[`&${componentCls}-variant-solid`]: {
+					[varName("text-color")]: token.solidTextColor,
+					[varName("text-color-hover")]: varRef("text-color"),
+					[varName("text-color-active")]: varRef("text-color")
+				},
+				[`&${componentCls}-variant-filled, &${componentCls}-variant-text`]: {
+					[varName("text-color-hover")]: varRef("text-color"),
+					[varName("text-color-active")]: varRef("text-color")
+				},
+				[`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: {
+					[varName("text-color")]: token.defaultColor,
+					[varName("text-color-hover")]: token.defaultHoverColor,
+					[varName("text-color-active")]: token.defaultActiveColor,
+					[varName("bg-color-container")]: token.defaultBg,
+					[varName("bg-color-hover")]: token.defaultHoverBg,
+					[varName("bg-color-active")]: token.defaultActiveBg
+				},
+				[`&${componentCls}-variant-text`]: {
+					[varName("text-color")]: token.textTextColor,
+					[varName("text-color-hover")]: token.textTextHoverColor,
+					[varName("text-color-active")]: token.textTextActiveColor,
+					[varName("bg-color-hover")]: token.textHoverBg
+				},
+				[`&${componentCls}-background-ghost`]: { [`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: {
+					[varName("text-color")]: token.defaultGhostColor,
+					[varName("border-color")]: token.defaultGhostBorderColor
+				} }
+			}
+		},
+		PresetColors.map((colorKey) => {
+			const darkColor = token[`${colorKey}6`];
+			const lightColor = token[`${colorKey}1`];
+			const hoverColor = token[`${colorKey}Hover`];
+			const lightHoverColor = token[`${colorKey}2`];
+			const lightActiveColor = token[`${colorKey}3`];
+			const activeColor = token[`${colorKey}Active`];
+			const shadowColor = token[`${colorKey}ShadowColor`];
+			return { [`&${componentCls}-color-${colorKey}`]: {
+				[varName("color-base")]: darkColor,
+				[varName("color-hover")]: hoverColor,
+				[varName("color-active")]: activeColor,
+				[varName("color-light")]: lightColor,
+				[varName("color-light-hover")]: lightHoverColor,
+				[varName("color-light-active")]: lightActiveColor,
+				[varName("shadow")]: shadowColor
+			} };
+		}),
+		{ [`&:disabled, &${token.componentCls}-disabled`]: {
+			cursor: "not-allowed",
+			borderColor: token.colorBorderDisabled,
+			background: varRef("bg-color-disabled"),
+			color: token.colorTextDisabled,
+			boxShadow: "none"
+		} },
+		{ [`&${componentCls}-background-ghost`]: {
+			[varName("bg-color")]: token.ghostBg,
+			[varName("bg-color-hover")]: token.ghostBg,
+			[varName("bg-color-active")]: token.ghostBg,
+			[varName("shadow")]: "none",
+			[`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: {
+				[varName("bg-color-hover")]: token.ghostBg,
+				[varName("bg-color-active")]: token.ghostBg
+			}
+		} }
+	] };
+};
+//#endregion
+export { genVariantStyle as default };

package/dist/calendar/Header.d.ts

@@ -0,0 +1,21 @@
+import { CalendarMode, SelectInfo } from "./generateCalendar.js";
+import { CSSProperties } from "vue";
+import { Locale } from "@v-c/picker";
+import { GenerateConfig } from "@v-c/picker/generate";
+//#region src/calendar/Header.d.ts
+interface CalendarHeaderProps<DateType> {
+  className?: string;
+  style?: CSSProperties;
+  prefixCls: string;
+  value: DateType;
+  validRange?: [DateType, DateType];
+  generateConfig: GenerateConfig<DateType>;
+  locale: Locale;
+  mode: CalendarMode;
+  fullscreen: boolean;
+  onChange: (date: DateType, source: SelectInfo['source']) => void;
+  onModeChange: (mode: CalendarMode) => void;
+}
+declare const CalendarHeader: import("vue").DefineSetupFnComponent<CalendarHeaderProps<any>, {}, {}, CalendarHeaderProps<any> & {}, import("vue").PublicProps>;
+//#endregion
+export { CalendarHeaderProps, CalendarHeader as default };

package/dist/calendar/Header.js

@@ -0,0 +1,271 @@
+import { useFormItemInputContext, useFormItemInputContextProvider } from "../form/context.js";
+import Select from "../select/index.js";
+import { RadioButton, RadioGroup } from "../radio/index.js";
+import { computed, createVNode, defineComponent, mergeProps, ref } from "vue";
+import { clsx } from "@v-c/util";
+import { omit } from "es-toolkit";
+//#region src/calendar/Header.tsx
+const YEAR_SELECT_OFFSET = 10;
+const YEAR_SELECT_TOTAL = 20;
+const YearSelect = /* @__PURE__ */ defineComponent((props) => {
+	return () => {
+		const { fullscreen, validRange, generateConfig, locale, prefixCls, value, onChange, divRef } = props;
+		const year = generateConfig.getYear(value || generateConfig.getNow());
+		let start = year - YEAR_SELECT_OFFSET;
+		let end = start + YEAR_SELECT_TOTAL;
+		if (validRange) {
+			start = generateConfig.getYear(validRange[0]);
+			end = generateConfig.getYear(validRange[1]) + 1;
+		}
+		const suffix = locale && locale.year === "年" ? "年" : "";
+		const options = [];
+		for (let index = start; index < end; index += 1) options.push({
+			label: `${index}${suffix}`,
+			value: index
+		});
+		return createVNode(Select, {
+			"size": fullscreen ? void 0 : "small",
+			"options": options,
+			"value": year,
+			"class": `${prefixCls}-year-select`,
+			"onChange": (numYear) => {
+				let newDate = generateConfig.setYear(value, numYear);
+				if (validRange) {
+					const [startDate, endDate] = validRange;
+					const newYear = generateConfig.getYear(newDate);
+					const newMonth = generateConfig.getMonth(newDate);
+					if (newYear === generateConfig.getYear(endDate) && newMonth > generateConfig.getMonth(endDate)) newDate = generateConfig.setMonth(newDate, generateConfig.getMonth(endDate));
+					if (newYear === generateConfig.getYear(startDate) && newMonth < generateConfig.getMonth(startDate)) newDate = generateConfig.setMonth(newDate, generateConfig.getMonth(startDate));
+				}
+				onChange(newDate);
+			},
+			"getPopupContainer": () => divRef.value
+		}, null);
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		value: { required: true },
+		validRange: {
+			type: Array,
+			required: false
+		},
+		generateConfig: {
+			type: Object,
+			required: true
+		},
+		locale: {
+			type: Object,
+			required: true
+		},
+		fullscreen: {
+			type: Boolean,
+			required: true
+		},
+		divRef: {
+			type: Object,
+			required: true
+		},
+		onChange: {
+			type: Function,
+			required: true
+		}
+	},
+	name: "YearSelect",
+	inheritAttrs: false
+});
+const MonthSelect = /* @__PURE__ */ defineComponent((props) => {
+	return () => {
+		const { prefixCls, fullscreen, validRange, value, generateConfig, locale, onChange, divRef } = props;
+		const month = generateConfig.getMonth(value || generateConfig.getNow());
+		let start = 0;
+		let end = 11;
+		if (validRange) {
+			const [rangeStart, rangeEnd] = validRange;
+			const currentYear = generateConfig.getYear(value);
+			if (generateConfig.getYear(rangeEnd) === currentYear) end = generateConfig.getMonth(rangeEnd);
+			if (generateConfig.getYear(rangeStart) === currentYear) start = generateConfig.getMonth(rangeStart);
+		}
+		const months = locale.shortMonths || generateConfig.locale.getShortMonths(locale.locale);
+		const options = [];
+		for (let index = start; index <= end; index += 1) options.push({
+			label: months[index],
+			value: index
+		});
+		return createVNode(Select, {
+			"size": fullscreen ? void 0 : "small",
+			"class": `${prefixCls}-month-select`,
+			"value": month,
+			"options": options,
+			"onChange": (newMonth) => {
+				onChange(generateConfig.setMonth(value, newMonth));
+			},
+			"getPopupContainer": () => divRef.value
+		}, null);
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		value: { required: true },
+		validRange: {
+			type: Array,
+			required: false
+		},
+		generateConfig: {
+			type: Object,
+			required: true
+		},
+		locale: {
+			type: Object,
+			required: true
+		},
+		fullscreen: {
+			type: Boolean,
+			required: true
+		},
+		divRef: {
+			type: Object,
+			required: true
+		},
+		onChange: {
+			type: Function,
+			required: true
+		}
+	},
+	inheritAttrs: false,
+	name: "MonthSelect"
+});
+const ModeSwitch = /* @__PURE__ */ defineComponent((props) => {
+	return () => {
+		const { prefixCls, locale, mode, fullscreen, onModeChange } = props;
+		return createVNode(RadioGroup, {
+			"onChange": (e) => {
+				onModeChange(e.target.value);
+			},
+			"value": mode,
+			"size": fullscreen ? void 0 : "small",
+			"class": `${prefixCls}-mode-switch`,
+			"optionType": "button"
+		}, { default: () => [createVNode(RadioButton, { "value": "month" }, { default: () => [locale.month] }), createVNode(RadioButton, { "value": "year" }, { default: () => [locale.year] })] });
+	};
+}, {
+	props: {
+		mode: {
+			type: String,
+			required: true
+		},
+		onModeChange: {
+			type: Function,
+			required: true
+		},
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		value: { required: true },
+		validRange: {
+			type: Array,
+			required: false
+		},
+		generateConfig: {
+			type: Object,
+			required: true
+		},
+		locale: {
+			type: Object,
+			required: true
+		},
+		fullscreen: {
+			type: Boolean,
+			required: true
+		},
+		divRef: {
+			type: Object,
+			required: true
+		}
+	},
+	inheritAttrs: false,
+	name: "ModeSwitch"
+});
+const CalendarHeader = /* @__PURE__ */ defineComponent((props) => {
+	const divRef = ref(null);
+	const formItemInputContext = useFormItemInputContext();
+	useFormItemInputContextProvider(computed(() => ({
+		...formItemInputContext.value,
+		isFormItemInput: false
+	})));
+	return () => {
+		const { prefixCls, fullscreen, mode, onChange, onModeChange, className, style } = props;
+		const sharedProps = {
+			...props,
+			fullscreen,
+			divRef
+		};
+		return createVNode("div", {
+			"class": clsx(`${prefixCls}-header`, className),
+			"style": style,
+			"ref": divRef
+		}, [
+			createVNode(YearSelect, mergeProps(omit(sharedProps, ["onChange", "onModeChange"]), { "onChange": (value) => {
+				onChange(value, "year");
+			} }), null),
+			mode === "month" ? createVNode(MonthSelect, mergeProps(omit(sharedProps, ["onChange", "onModeChange"]), { "onChange": (value) => {
+				onChange(value, "month");
+			} }), null) : null,
+			createVNode(ModeSwitch, mergeProps(omit(sharedProps, ["onChange", "onModeChange"]), { "onModeChange": onModeChange }), null)
+		]);
+	};
+}, {
+	props: {
+		className: {
+			type: String,
+			required: false
+		},
+		style: {
+			type: Object,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		value: { required: true },
+		validRange: {
+			type: Array,
+			required: false
+		},
+		generateConfig: {
+			type: Object,
+			required: true
+		},
+		locale: {
+			type: Object,
+			required: true
+		},
+		mode: {
+			type: String,
+			required: true
+		},
+		fullscreen: {
+			type: Boolean,
+			required: true
+		},
+		onChange: {
+			type: Function,
+			required: true
+		},
+		onModeChange: {
+			type: Function,
+			required: true
+		}
+	},
+	name: "ACalendarHeader"
+});
+//#endregion
+export { CalendarHeader as default };