@mantine-vue/dates 1.1.2

package/esm/index.mjs

@@ -0,0 +1,2252 @@
+import dayjs from "dayjs";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+import { computed, defineComponent, h, inject, provide, ref, watch } from "vue";
+import { useUncontrolled } from "@mantine-vue/hooks";
+import { AccordionChevron, ActionIcon, Box, Button, CheckIcon, CloseButton, Group, InputBase, Modal, Popover, ScrollArea, SimpleGrid, Text, UnstyledButton } from "@mantine-vue/core";
+var Dates_module_default = {
+	calendar: "_calendar_5kwje_1",
+	calendarLevel: "_calendarLevel_5kwje_15",
+	calendarHeader: "_calendarHeader_5kwje_19",
+	calendarHeaderLevel: "_calendarHeaderLevel_5kwje_32",
+	calendarHeaderControl: "_calendarHeaderControl_5kwje_33",
+	calendarHeaderControlIcon: "_calendarHeaderControlIcon_5kwje_74",
+	month: "_month_5kwje_87",
+	monthRow: "_monthRow_5kwje_97",
+	monthCell: "_monthCell_5kwje_101",
+	weekday: "_weekday_5kwje_110",
+	weekNumber: "_weekNumber_5kwje_122",
+	day: "_day_5kwje_128",
+	pickerControl: "_pickerControl_5kwje_189",
+	controlsGrid: "_controlsGrid_5kwje_195",
+	timePicker: "_timePicker_5kwje_255",
+	dateTimePicker: "_dateTimePicker_5kwje_256",
+	datePickerRoot: "_datePickerRoot_5kwje_260",
+	timeWrapper: "_timeWrapper_5kwje_270",
+	timeInput: "_timeInput_5kwje_276",
+	presetsList: "_presetsList_5kwje_281",
+	presetButton: "_presetButton_5kwje_289",
+	timePickerPresetsGroup: "_timePickerPresetsGroup_5kwje_300",
+	dropdown: "_dropdown_5kwje_304",
+	placeholder: "_placeholder_5kwje_308",
+	timeGridControl: "_timeGridControl_5kwje_312",
+	timePickerFieldsRoot: "_timePickerFieldsRoot_5kwje_343",
+	timePickerFieldsGroup: "_timePickerFieldsGroup_5kwje_350",
+	timePickerField: "_timePickerField_5kwje_343",
+	timePickerDropdown: "_timePickerDropdown_5kwje_400",
+	timePickerControlsListGroup: "_timePickerControlsListGroup_5kwje_404",
+	timePickerControlsList: "_timePickerControlsList_5kwje_404",
+	timePickerControl: "_timePickerControl_5kwje_404",
+	miniCalendarRoot: "_miniCalendarRoot_5kwje_433",
+	miniCalendarDays: "_miniCalendarDays_5kwje_440",
+	miniCalendarDay: "_miniCalendarDay_5kwje_440",
+	miniCalendarDayMonth: "_miniCalendarDayMonth_5kwje_475",
+	miniCalendarDayNumber: "_miniCalendarDayNumber_5kwje_481",
+	miniCalendarControl: "_miniCalendarControl_5kwje_486"
+};
+//#endregion
+//#region src/index.ts
+dayjs.extend(customParseFormat);
+var DATES_PROVIDER_DEFAULT_SETTINGS = {
+	locale: "en",
+	firstDayOfWeek: 1,
+	weekendDays: [0, 6],
+	timezone: "UTC",
+	consistentWeeks: false
+};
+var DatesContextKey = Symbol("DatesContext");
+var DatesProvider = defineComponent({
+	name: "DatesProvider",
+	props: { settings: {
+		type: Object,
+		default: () => ({})
+	} },
+	setup(props, { slots }) {
+		const settings = computed(() => ({
+			...DATES_PROVIDER_DEFAULT_SETTINGS,
+			...props.settings
+		}));
+		provide(DatesContextKey, settings.value);
+		watch(settings, (value) => provide(DatesContextKey, value));
+		return () => slots.default?.();
+	}
+});
+function useDatesContext() {
+	return inject(DatesContextKey, DATES_PROVIDER_DEFAULT_SETTINGS);
+}
+function normalizeDate(value) {
+	if (value == null || value === "") return null;
+	const parsed = dayjs(value);
+	return parsed.isValid() ? parsed.format("YYYY-MM-DD") : null;
+}
+function toDateString(value) {
+	return normalizeDate(value);
+}
+function shiftTimezone(direction, date, timezone) {
+	return date;
+}
+function getTimezoneOffset(date, timezone) {
+	return new Date(date).getTimezoneOffset();
+}
+function clampDate(date, minDate, maxDate) {
+	const value = dayjs(date);
+	const min = normalizeDate(minDate);
+	const max = normalizeDate(maxDate);
+	if (min && value.isBefore(min, "day")) return min;
+	if (max && value.isAfter(max, "day")) return max;
+	return value.format("YYYY-MM-DD");
+}
+function getDefaultClampedDate({ minDate, maxDate, defaultDate } = {}) {
+	return clampDate(normalizeDate(defaultDate) || dayjs().format("YYYY-MM-DD"), minDate, maxDate);
+}
+function assignTime(date, time) {
+	const timeValue = dayjs(time);
+	return dayjs(date).hour(timeValue.hour()).minute(timeValue.minute()).second(timeValue.second()).millisecond(timeValue.millisecond()).toDate();
+}
+function getFormattedDate({ date, format = "MMMM D, YYYY", locale }) {
+	return dayjs(date).locale(locale || "en").format(format);
+}
+function isSameDate(a, b) {
+	if (!a || !b) return false;
+	return dayjs(a).isSame(b, "day");
+}
+function isSameMonth(a, b) {
+	return dayjs(a).isSame(b, "month");
+}
+function isSameYear(a, b) {
+	return dayjs(a).isSame(b, "year");
+}
+function getStartOfWeek(date, firstDayOfWeek = 1) {
+	const value = dayjs(date);
+	const diff = (value.day() - firstDayOfWeek + 7) % 7;
+	return value.subtract(diff, "day").format("YYYY-MM-DD");
+}
+function getEndOfWeek(date, firstDayOfWeek = 1) {
+	return dayjs(getStartOfWeek(date, firstDayOfWeek)).add(6, "day").format("YYYY-MM-DD");
+}
+function getWeekNumber(date) {
+	const current = dayjs(date);
+	const yearStart = dayjs(`${current.year()}-01-01`);
+	return Math.ceil((current.diff(yearStart, "day") + yearStart.day() + 1) / 7);
+}
+function handleControlKeyDown({ rowIndex, cellIndex, event, controlsRef }) {
+	const rows = controlsRef.length;
+	const cols = controlsRef[0]?.length || 0;
+	let nextRow = rowIndex;
+	let nextCell = cellIndex;
+	if (event.key === "ArrowRight") nextCell += 1;
+	if (event.key === "ArrowLeft") nextCell -= 1;
+	if (event.key === "ArrowDown") nextRow += 1;
+	if (event.key === "ArrowUp") nextRow -= 1;
+	if (event.key === "Home") nextCell = 0;
+	if (event.key === "End") nextCell = cols - 1;
+	if (nextCell < 0) {
+		nextCell = cols - 1;
+		nextRow -= 1;
+	}
+	if (nextCell >= cols) {
+		nextCell = 0;
+		nextRow += 1;
+	}
+	const next = controlsRef[(nextRow + rows) % rows]?.[(nextCell + cols) % cols];
+	if (next) {
+		event.preventDefault();
+		next.focus();
+	}
+}
+function focusAdjacentControl(refs, rowIndex, cellIndex, direction) {
+	const isFocusable = (el) => !!el && !el.disabled && !el.hasAttribute("data-hidden") && !el.hasAttribute("data-outside");
+	let nextRow = rowIndex;
+	let nextCell = cellIndex;
+	for (let i = 0; i < 60; i += 1) {
+		if (direction === "up") nextRow -= 1;
+		if (direction === "down") nextRow += 1;
+		if (direction === "left") {
+			nextCell -= 1;
+			if (nextCell < 0) {
+				nextRow -= 1;
+				nextCell = (refs[nextRow]?.length || 1) - 1;
+			}
+		}
+		if (direction === "right") {
+			nextCell += 1;
+			if (nextCell >= (refs[nextRow]?.length || 0)) {
+				nextRow += 1;
+				nextCell = 0;
+			}
+		}
+		const row = refs[nextRow];
+		if (!row) return;
+		const el = row[nextCell];
+		if (el === void 0) return;
+		if (isFocusable(el)) {
+			el.focus();
+			return;
+		}
+	}
+}
+function keyToDirection(key) {
+	if (key === "ArrowUp") return "up";
+	if (key === "ArrowDown") return "down";
+	if (key === "ArrowLeft") return "left";
+	if (key === "ArrowRight") return "right";
+	return null;
+}
+function setGridRef(refs, rowIndex, cellIndex, node) {
+	if (!refs[rowIndex]) refs[rowIndex] = [];
+	refs[rowIndex][cellIndex] = node?.$el ?? node ?? void 0;
+}
+function getMonthDays(month, firstDayOfWeek, consistentWeeks = false) {
+	const startOfMonth = dayjs(month).startOf("month");
+	const start = dayjs(getStartOfWeek(startOfMonth.format("YYYY-MM-DD"), firstDayOfWeek));
+	const weeks = consistentWeeks ? 6 : Math.ceil((startOfMonth.daysInMonth() + startOfMonth.day()) / 7);
+	return Array.from({ length: weeks }, (_, week) => Array.from({ length: 7 }, (__, day) => start.add(week * 7 + day, "day").format("YYYY-MM-DD")));
+}
+function isBeforeMin(date, minDate) {
+	const min = normalizeDate(minDate);
+	return !!min && dayjs(date).isBefore(min, "day");
+}
+function isAfterMax(date, maxDate) {
+	const max = normalizeDate(maxDate);
+	return !!max && dayjs(date).isAfter(max, "day");
+}
+function formatValue(value, type, format, locale, labelSeparator = "–", valueFormatter) {
+	if (valueFormatter) return valueFormatter({
+		type,
+		date: value,
+		locale,
+		format,
+		labelSeparator
+	});
+	if (type === "multiple") return Array.isArray(value) ? value.map((item) => dayjs(item).locale(locale || "en").format(format)).join(", ") : "";
+	if (type === "range") {
+		const [start, end] = Array.isArray(value) ? value : [null, null];
+		if (!start && !end) return "";
+		if (start && !end) return `${dayjs(start).locale(locale || "en").format(format)} ${labelSeparator} `;
+		if (!start && end) return `${labelSeparator} ${dayjs(end).locale(locale || "en").format(format)}`;
+		return `${dayjs(start).locale(locale || "en").format(format)} ${labelSeparator} ${dayjs(end).locale(locale || "en").format(format)}`;
+	}
+	return value ? dayjs(value).locale(locale || "en").format(format) : "";
+}
+function getMonthLabel(date, format = "MMMM YYYY", locale) {
+	return dayjs(date).locale(locale || "en").format(format);
+}
+function getYearRange(date) {
+	const year = dayjs(date).year();
+	const start = year - year % 10;
+	return Array.from({ length: 10 }, (_, index) => dayjs(`${start + index}-01-01`).format("YYYY-MM-DD"));
+}
+function getDecadeLabel(date) {
+	const years = getYearRange(date);
+	return `${dayjs(years[0]).year()} – ${dayjs(years[years.length - 1]).year()}`;
+}
+var Day = defineComponent({
+	name: "Day",
+	inheritAttrs: false,
+	props: {
+		date: {
+			type: String,
+			required: true
+		},
+		size: {
+			type: [String, Number],
+			default: "sm"
+		},
+		static: {
+			type: Boolean,
+			default: false
+		},
+		weekend: Boolean,
+		outside: Boolean,
+		selected: Boolean,
+		hidden: Boolean,
+		inRange: Boolean,
+		firstInRange: Boolean,
+		lastInRange: Boolean,
+		highlightToday: Boolean,
+		fullWidth: Boolean,
+		disabled: Boolean,
+		renderDay: Function,
+		classNames: {
+			type: [Object, Function],
+			default: void 0
+		},
+		styles: {
+			type: [Object, Function],
+			default: void 0
+		},
+		unstyled: Boolean
+	},
+	setup(props, { attrs }) {
+		return () => h(UnstyledButton, {
+			...attrs,
+			component: props.static ? "div" : "button",
+			class: [Dates_module_default.day, attrs.class],
+			disabled: props.disabled,
+			style: [{ display: props.hidden ? "none" : void 0 }, attrs.style],
+			"data-today": dayjs(props.date).isSame(/* @__PURE__ */ new Date(), "day") || void 0,
+			"data-hidden": props.hidden || void 0,
+			"data-highlight-today": props.highlightToday || void 0,
+			"data-disabled": props.disabled || void 0,
+			"data-weekend": !props.disabled && !props.outside && props.weekend || void 0,
+			"data-outside": !props.disabled && props.outside || void 0,
+			"data-selected": !props.disabled && props.selected || void 0,
+			"data-in-range": props.inRange && !props.disabled || void 0,
+			"data-first-in-range": props.firstInRange && !props.disabled || void 0,
+			"data-last-in-range": props.lastInRange && !props.disabled || void 0,
+			"data-static": props.static || void 0,
+			"data-full-width": props.fullWidth || void 0
+		}, () => props.renderDay?.(props.date) || dayjs(props.date).date());
+	}
+});
+var PickerControl = defineComponent({
+	name: "PickerControl",
+	inheritAttrs: false,
+	props: {
+		selected: Boolean,
+		disabled: Boolean,
+		inRange: Boolean,
+		firstInRange: Boolean,
+		lastInRange: Boolean,
+		withCellSpacing: {
+			type: Boolean,
+			default: true
+		},
+		fullWidth: Boolean
+	},
+	setup(props, { attrs, slots }) {
+		return () => h(UnstyledButton, {
+			...attrs,
+			class: [Dates_module_default.pickerControl, attrs.class],
+			disabled: props.disabled,
+			"data-selected": props.selected && !props.disabled || void 0,
+			"data-disabled": props.disabled || void 0,
+			"data-in-range": props.inRange && !props.disabled && !props.selected || void 0,
+			"data-first-in-range": props.firstInRange && !props.disabled || void 0,
+			"data-last-in-range": props.lastInRange && !props.disabled || void 0,
+			"data-with-cell-spacing": props.withCellSpacing || void 0,
+			"data-full-width": props.fullWidth || void 0
+		}, () => slots.default?.());
+	}
+});
+var CalendarHeader = defineComponent({
+	name: "CalendarHeader",
+	props: {
+		label: {
+			type: String,
+			required: true
+		},
+		hasNextLevel: {
+			type: Boolean,
+			default: true
+		},
+		withNext: {
+			type: Boolean,
+			default: true
+		},
+		withPrevious: {
+			type: Boolean,
+			default: true
+		},
+		nextDisabled: Boolean,
+		previousDisabled: Boolean,
+		nextLabel: {
+			type: String,
+			default: "Next"
+		},
+		previousLabel: {
+			type: String,
+			default: "Previous"
+		},
+		levelControlAriaLabel: String,
+		fullWidth: Boolean,
+		onNext: Function,
+		onPrevious: Function,
+		onLevelClick: Function
+	},
+	setup(props) {
+		return () => {
+			const previousControl = props.withPrevious ? h(UnstyledButton, {
+				class: Dates_module_default.calendarHeaderControl,
+				"data-direction": "previous",
+				"aria-label": props.previousLabel,
+				onClick: props.onPrevious,
+				disabled: props.previousDisabled,
+				"data-disabled": props.previousDisabled || void 0
+			}, () => h(AccordionChevron, {
+				class: Dates_module_default.calendarHeaderControlIcon,
+				"data-direction": "previous",
+				size: "45%"
+			})) : null;
+			const levelControl = h(UnstyledButton, {
+				component: props.hasNextLevel ? "button" : "div",
+				class: Dates_module_default.calendarHeaderLevel,
+				onClick: props.hasNextLevel ? props.onLevelClick : void 0,
+				disabled: !props.hasNextLevel,
+				"data-static": !props.hasNextLevel || void 0,
+				"aria-label": props.levelControlAriaLabel
+			}, () => props.label);
+			const nextControl = props.withNext ? h(UnstyledButton, {
+				class: Dates_module_default.calendarHeaderControl,
+				"data-direction": "next",
+				"aria-label": props.nextLabel,
+				onClick: props.onNext,
+				disabled: props.nextDisabled,
+				"data-disabled": props.nextDisabled || void 0
+			}, () => h(AccordionChevron, {
+				class: Dates_module_default.calendarHeaderControlIcon,
+				"data-direction": "next",
+				size: "45%"
+			})) : null;
+			return h("div", {
+				class: Dates_module_default.calendarHeader,
+				"data-full-width": props.fullWidth || void 0
+			}, [
+				previousControl,
+				levelControl,
+				nextControl
+			]);
+		};
+	}
+});
+var WeekdaysRow = defineComponent({
+	name: "WeekdaysRow",
+	props: {
+		firstDayOfWeek: Number,
+		weekendDays: Array,
+		locale: String,
+		weekdayFormat: {
+			type: [String, Function],
+			default: "dd"
+		},
+		withWeekNumbers: Boolean
+	},
+	setup(props) {
+		const ctx = useDatesContext();
+		return () => {
+			const first = props.firstDayOfWeek ?? ctx.firstDayOfWeek;
+			const days = Array.from({ length: 7 }, (_, index) => dayjs("2024-01-07").add((first + index) % 7, "day"));
+			return h("tr", { class: Dates_module_default.weekdaysRow }, [props.withWeekNumbers ? h("th", { class: Dates_module_default.weekday }) : null, ...days.map((date) => h("th", {
+				class: Dates_module_default.weekday,
+				"data-weekend": (props.weekendDays ?? ctx.weekendDays).includes(date.day()) || void 0
+			}, typeof props.weekdayFormat === "function" ? props.weekdayFormat(date.format("YYYY-MM-DD")) : date.locale(props.locale || ctx.locale).format(props.weekdayFormat)))]);
+		};
+	}
+});
+var Month = defineComponent({
+	name: "Month",
+	props: {
+		month: {
+			type: String,
+			default: () => dayjs().format("YYYY-MM-DD")
+		},
+		value: {
+			type: [
+				String,
+				Array,
+				null
+			],
+			default: null
+		},
+		type: {
+			type: String,
+			default: "default"
+		},
+		firstDayOfWeek: Number,
+		weekendDays: Array,
+		minDate: [String, Date],
+		maxDate: [String, Date],
+		excludeDate: Function,
+		renderDay: Function,
+		hideOutsideDates: Boolean,
+		hideWeekdays: Boolean,
+		getDayProps: Function,
+		getDayAriaLabel: Function,
+		onDayClick: Function,
+		onDayMouseEnter: Function,
+		withCellSpacing: {
+			type: Boolean,
+			default: true
+		},
+		highlightToday: Boolean,
+		withWeekNumbers: Boolean,
+		static: Boolean,
+		fullWidth: Boolean
+	},
+	setup(props) {
+		const ctx = useDatesContext();
+		const hovered = ref(null);
+		const dayRefs = [];
+		const isSelected = (date) => {
+			if (props.type === "multiple") return Array.isArray(props.value) && props.value.includes(date);
+			if (props.type === "range") {
+				const [start, end] = Array.isArray(props.value) ? props.value : [null, null];
+				return isSameDate(date, start) || isSameDate(date, end);
+			}
+			return isSameDate(date, props.value);
+		};
+		const isInRange = (date) => {
+			if (props.type !== "range" || !Array.isArray(props.value)) return false;
+			const [start, end] = props.value;
+			const rangeEnd = end || hovered.value;
+			if (!start || !rangeEnd) return false;
+			return dayjs(date).isAfter(start, "day") && dayjs(date).isBefore(rangeEnd, "day");
+		};
+		return () => {
+			const first = props.firstDayOfWeek ?? ctx.firstDayOfWeek;
+			const rows = getMonthDays(props.month, first, ctx.consistentWeeks);
+			const flatDates = rows.flat();
+			const isEnabled = (date) => {
+				const outside = !dayjs(date).isSame(props.month, "month");
+				return !(isBeforeMin(date, props.minDate) || isAfterMax(date, props.maxDate) || props.excludeDate?.(date) || props.getDayProps?.(date)?.disabled) && (!props.hideOutsideDates || !outside);
+			};
+			const enabledDates = flatDates.filter(isEnabled);
+			const dateInTabOrder = enabledDates.find((date) => isSelected(date)) ?? enabledDates.find((date) => dayjs().isSame(date, "date")) ?? enabledDates[0];
+			return h("table", {
+				class: Dates_module_default.month,
+				"data-full-width": props.fullWidth || void 0
+			}, [props.hideWeekdays ? null : h("thead", [h(WeekdaysRow, {
+				firstDayOfWeek: first,
+				weekendDays: props.weekendDays,
+				withWeekNumbers: props.withWeekNumbers
+			})]), h("tbody", rows.map((week, rowIndex) => h("tr", { class: Dates_module_default.monthRow }, [props.withWeekNumbers ? h("td", { class: Dates_module_default.weekNumber }, getWeekNumber(week[0])) : null, ...week.map((date, cellIndex) => {
+				const outside = !dayjs(date).isSame(props.month, "month");
+				const disabled = isBeforeMin(date, props.minDate) || isAfterMax(date, props.maxDate) || props.excludeDate?.(date);
+				const dayProps = props.getDayProps?.(date) || {};
+				const selected = isSelected(date);
+				const [start, end] = props.type === "range" && Array.isArray(props.value) ? props.value : [null, null];
+				return h("td", {
+					class: Dates_module_default.monthCell,
+					"data-with-spacing": props.withCellSpacing || void 0
+				}, [h(Day, {
+					...dayProps,
+					date,
+					static: props.static,
+					disabled: disabled || dayProps.disabled,
+					weekend: (props.weekendDays ?? ctx.weekendDays).includes(dayjs(date).day()),
+					outside,
+					hidden: props.hideOutsideDates && outside,
+					selected,
+					inRange: isInRange(date),
+					firstInRange: isSameDate(date, start),
+					lastInRange: isSameDate(date, end),
+					highlightToday: props.highlightToday,
+					fullWidth: props.fullWidth,
+					renderDay: props.renderDay,
+					"aria-label": props.getDayAriaLabel?.(date),
+					tabindex: props.static ? void 0 : date === dateInTabOrder ? 0 : -1,
+					"data-autofocus": selected || void 0,
+					ref: (node) => setGridRef(dayRefs, rowIndex, cellIndex, node),
+					onClick: (event) => {
+						dayProps.onClick?.(event);
+						if (!disabled && !props.static) props.onDayClick?.(date);
+					},
+					onMouseenter: (event) => {
+						hovered.value = date;
+						dayProps.onMouseenter?.(event);
+						props.onDayMouseEnter?.(date);
+					},
+					onKeydown: (event) => {
+						dayProps.onKeydown?.(event);
+						const direction = keyToDirection(event.key);
+						if (direction) {
+							event.preventDefault();
+							focusAdjacentControl(dayRefs, rowIndex, cellIndex, direction);
+						}
+					}
+				})]);
+			})])))]);
+		};
+	}
+});
+var MonthsList = defineComponent({
+	name: "MonthsList",
+	props: {
+		year: {
+			type: String,
+			default: () => dayjs().format("YYYY-MM-DD")
+		},
+		value: [
+			String,
+			Array,
+			null
+		],
+		minDate: [String, Date],
+		maxDate: [String, Date],
+		locale: String,
+		monthsListFormat: {
+			type: [String, Function],
+			default: "MMM"
+		},
+		getMonthControlProps: Function,
+		onMonthSelect: Function,
+		onMonthMouseEnter: Function,
+		fullWidth: Boolean
+	},
+	setup(props) {
+		const controlRefs = [];
+		return () => {
+			const months = Array.from({ length: 12 }, (_, index) => dayjs(props.year).month(index).startOf("month").format("YYYY-MM-DD"));
+			const isEnabled = (date) => !(props.minDate && dayjs(date).endOf("month").isBefore(props.minDate, "day") || props.maxDate && dayjs(date).startOf("month").isAfter(props.maxDate, "day") || props.getMonthControlProps?.(date)?.disabled);
+			const isSelected = (date) => Array.isArray(props.value) ? props.value.some((item) => dayjs(item).isSame(date, "month")) : !!props.value && dayjs(props.value).isSame(date, "month");
+			const enabledMonths = months.filter(isEnabled);
+			const monthInTabOrder = enabledMonths.find(isSelected) ?? enabledMonths.find((date) => dayjs().isSame(date, "month")) ?? enabledMonths[0];
+			return h(SimpleGrid, {
+				cols: 3,
+				spacing: 4,
+				class: Dates_module_default.controlsGrid,
+				"data-full-width": props.fullWidth || void 0
+			}, () => months.map((date, index) => {
+				const rowIndex = Math.floor(index / 3);
+				const cellIndex = index % 3;
+				const disabled = !isEnabled(date);
+				const controlProps = props.getMonthControlProps?.(date) || {};
+				return h(PickerControl, {
+					fullWidth: props.fullWidth,
+					...controlProps,
+					disabled: disabled || controlProps.disabled,
+					selected: isSelected(date),
+					tabindex: date === monthInTabOrder ? 0 : -1,
+					"data-autofocus": isSelected(date) || void 0,
+					ref: (node) => setGridRef(controlRefs, rowIndex, cellIndex, node),
+					onClick: (event) => {
+						controlProps.onClick?.(event);
+						if (!disabled) props.onMonthSelect?.(date);
+					},
+					onMouseenter: (event) => {
+						controlProps.onMouseenter?.(event);
+						props.onMonthMouseEnter?.(date);
+					},
+					onKeydown: (event) => {
+						controlProps.onKeydown?.(event);
+						const direction = keyToDirection(event.key);
+						if (direction) {
+							event.preventDefault();
+							focusAdjacentControl(controlRefs, rowIndex, cellIndex, direction);
+						}
+					}
+				}, () => typeof props.monthsListFormat === "function" ? props.monthsListFormat(date) : dayjs(date).locale(props.locale || "en").format(props.monthsListFormat));
+			}));
+		};
+	}
+});
+var YearsList = defineComponent({
+	name: "YearsList",
+	props: {
+		decade: {
+			type: String,
+			default: () => dayjs().format("YYYY-MM-DD")
+		},
+		value: [
+			String,
+			Array,
+			null
+		],
+		minDate: [String, Date],
+		maxDate: [String, Date],
+		yearsListFormat: {
+			type: [String, Function],
+			default: "YYYY"
+		},
+		getYearControlProps: Function,
+		onYearSelect: Function,
+		onYearMouseEnter: Function,
+		fullWidth: Boolean
+	},
+	setup(props) {
+		const controlRefs = [];
+		return () => {
+			const years = getYearRange(props.decade);
+			const isEnabled = (date) => !(props.minDate && dayjs(date).endOf("year").isBefore(props.minDate, "day") || props.maxDate && dayjs(date).startOf("year").isAfter(props.maxDate, "day") || props.getYearControlProps?.(date)?.disabled);
+			const isSelected = (date) => Array.isArray(props.value) ? props.value.some((item) => dayjs(item).isSame(date, "year")) : !!props.value && dayjs(props.value).isSame(date, "year");
+			const enabledYears = years.filter(isEnabled);
+			const yearInTabOrder = enabledYears.find(isSelected) ?? enabledYears.find((date) => dayjs().isSame(date, "year")) ?? enabledYears[0];
+			return h(SimpleGrid, {
+				cols: 3,
+				spacing: 4,
+				class: Dates_module_default.controlsGrid,
+				"data-full-width": props.fullWidth || void 0
+			}, () => years.map((date, index) => {
+				const rowIndex = Math.floor(index / 3);
+				const cellIndex = index % 3;
+				const disabled = !isEnabled(date);
+				const controlProps = props.getYearControlProps?.(date) || {};
+				return h(PickerControl, {
+					fullWidth: props.fullWidth,
+					...controlProps,
+					disabled: disabled || controlProps.disabled,
+					selected: isSelected(date),
+					tabindex: date === yearInTabOrder ? 0 : -1,
+					"data-autofocus": isSelected(date) || void 0,
+					ref: (node) => setGridRef(controlRefs, rowIndex, cellIndex, node),
+					onClick: (event) => {
+						controlProps.onClick?.(event);
+						if (!disabled) props.onYearSelect?.(date);
+					},
+					onMouseenter: (event) => {
+						controlProps.onMouseenter?.(event);
+						props.onYearMouseEnter?.(date);
+					},
+					onKeydown: (event) => {
+						controlProps.onKeydown?.(event);
+						const direction = keyToDirection(event.key);
+						if (direction) {
+							event.preventDefault();
+							focusAdjacentControl(controlRefs, rowIndex, cellIndex, direction);
+						}
+					}
+				}, () => typeof props.yearsListFormat === "function" ? props.yearsListFormat(date) : dayjs(date).format(props.yearsListFormat));
+			}));
+		};
+	}
+});
+function getNextLevel(level, direction) {
+	const order = [
+		"month",
+		"year",
+		"decade"
+	];
+	return order[Math.max(0, Math.min(order.length - 1, order.indexOf(level) + (direction === "up" ? 1 : -1)))];
+}
+function clampLevel(level, minLevel, maxLevel) {
+	const order = [
+		"month",
+		"year",
+		"decade"
+	];
+	const toNumber = (value, fallback) => value ? order.indexOf(value) : fallback;
+	return order[Math.max(toNumber(minLevel, 0), Math.min(toNumber(maxLevel, 2), toNumber(level, 0)))];
+}
+var Calendar = defineComponent({
+	name: "Calendar",
+	props: {
+		defaultLevel: String,
+		level: String,
+		onLevelChange: Function,
+		maxLevel: {
+			type: String,
+			default: "decade"
+		},
+		minLevel: {
+			type: String,
+			default: "month"
+		},
+		defaultDate: [String, Date],
+		date: [String, Date],
+		onDateChange: Function,
+		numberOfColumns: {
+			type: Number,
+			default: 1
+		},
+		columnsToScroll: Number,
+		type: {
+			type: String,
+			default: "default"
+		},
+		value: [
+			String,
+			Array,
+			null
+		],
+		minDate: [String, Date],
+		maxDate: [String, Date],
+		locale: String,
+		firstDayOfWeek: Number,
+		weekendDays: Array,
+		renderDay: Function,
+		getDayProps: Function,
+		getDayAriaLabel: Function,
+		getMonthControlProps: Function,
+		getYearControlProps: Function,
+		excludeDate: Function,
+		hideOutsideDates: Boolean,
+		hideWeekdays: Boolean,
+		monthLabelFormat: {
+			type: [String, Function],
+			default: "MMMM YYYY"
+		},
+		yearLabelFormat: {
+			type: [String, Function],
+			default: "YYYY"
+		},
+		decadeLabelFormat: Function,
+		monthsListFormat: {
+			type: [String, Function],
+			default: "MMM"
+		},
+		yearsListFormat: {
+			type: [String, Function],
+			default: "YYYY"
+		},
+		onYearSelect: Function,
+		onMonthSelect: Function,
+		onMonthMouseEnter: Function,
+		onYearMouseEnter: Function,
+		onDayClick: Function,
+		withCellSpacing: {
+			type: Boolean,
+			default: true
+		},
+		highlightToday: Boolean,
+		withWeekNumbers: Boolean,
+		static: Boolean,
+		fullWidth: Boolean
+	},
+	setup(props, { attrs }) {
+		const [_level, setLevel] = useUncontrolled({
+			value: computed(() => props.level === void 0 ? void 0 : clampLevel(props.level, props.minLevel, props.maxLevel)),
+			defaultValue: props.defaultLevel === void 0 ? void 0 : clampLevel(props.defaultLevel, props.minLevel, props.maxLevel),
+			finalValue: clampLevel(void 0, props.minLevel, props.maxLevel),
+			onChange: (value) => props.onLevelChange?.(value)
+		});
+		const [_date, setDate] = useUncontrolled({
+			value: computed(() => normalizeDate(props.date) || void 0),
+			defaultValue: normalizeDate(props.defaultDate) || void 0,
+			finalValue: getDefaultClampedDate({
+				minDate: props.minDate,
+				maxDate: props.maxDate
+			}),
+			onChange: (value) => props.onDateChange?.(value)
+		});
+		const scroll = props.columnsToScroll || props.numberOfColumns || 1;
+		const updateDate = (amount, unit) => {
+			setDate(dayjs(_date.value).add(amount, unit).format("YYYY-MM-DD"));
+		};
+		return () => h(Box, {
+			...attrs,
+			class: [Dates_module_default.calendar, attrs.class],
+			"data-calendar": true,
+			"data-full-width": props.fullWidth || void 0
+		}, () => Array.from({ length: props.numberOfColumns || 1 }, (_, column) => {
+			const currentDate = dayjs(_date.value).add(column * scroll, _level.value === "month" ? "month" : _level.value === "year" ? "year" : "year").format("YYYY-MM-DD");
+			if (_level.value === "month") return h("div", { class: Dates_module_default.calendarLevel }, [h(CalendarHeader, {
+				label: typeof props.monthLabelFormat === "function" ? props.monthLabelFormat(currentDate) : getMonthLabel(currentDate, props.monthLabelFormat, props.locale),
+				hasNextLevel: props.maxLevel !== "month",
+				withPrevious: column === 0,
+				withNext: column === (props.numberOfColumns || 1) - 1,
+				fullWidth: props.fullWidth,
+				onPrevious: () => updateDate(-scroll, "month"),
+				onNext: () => updateDate(scroll, "month"),
+				onLevelClick: () => setLevel(getNextLevel(_level.value, "up"))
+			}), h(Month, {
+				month: currentDate,
+				value: props.value,
+				type: props.type,
+				minDate: props.minDate,
+				maxDate: props.maxDate,
+				firstDayOfWeek: props.firstDayOfWeek,
+				weekendDays: props.weekendDays,
+				renderDay: props.renderDay,
+				getDayProps: props.getDayProps,
+				getDayAriaLabel: props.getDayAriaLabel,
+				excludeDate: props.excludeDate,
+				hideOutsideDates: props.hideOutsideDates,
+				hideWeekdays: props.hideWeekdays,
+				withCellSpacing: props.withCellSpacing,
+				highlightToday: props.highlightToday,
+				withWeekNumbers: props.withWeekNumbers,
+				static: props.static,
+				fullWidth: props.fullWidth,
+				onDayClick: props.onDayClick
+			})]);
+			if (_level.value === "year") return h("div", { class: Dates_module_default.calendarLevel }, [h(CalendarHeader, {
+				label: typeof props.yearLabelFormat === "function" ? props.yearLabelFormat(currentDate) : dayjs(currentDate).format(props.yearLabelFormat),
+				hasNextLevel: props.maxLevel === "decade",
+				withPrevious: column === 0,
+				withNext: column === (props.numberOfColumns || 1) - 1,
+				fullWidth: props.fullWidth,
+				onPrevious: () => updateDate(-scroll, "year"),
+				onNext: () => updateDate(scroll, "year"),
+				onLevelClick: () => setLevel(getNextLevel(_level.value, "up"))
+			}), h(MonthsList, {
+				year: currentDate,
+				value: props.value,
+				minDate: props.minDate,
+				maxDate: props.maxDate,
+				monthsListFormat: props.monthsListFormat,
+				getMonthControlProps: props.getMonthControlProps,
+				fullWidth: props.fullWidth,
+				onMonthMouseEnter: props.onMonthMouseEnter,
+				onMonthSelect: (date) => {
+					setDate(date);
+					props.onMonthSelect?.(date);
+					setLevel(clampLevel("month", props.minLevel, props.maxLevel));
+				}
+			})]);
+			const years = getYearRange(currentDate);
+			return h("div", { class: Dates_module_default.calendarLevel }, [h(CalendarHeader, {
+				label: props.decadeLabelFormat ? props.decadeLabelFormat(years[0], years[years.length - 1]) : getDecadeLabel(currentDate),
+				withPrevious: column === 0,
+				withNext: column === (props.numberOfColumns || 1) - 1,
+				hasNextLevel: false,
+				fullWidth: props.fullWidth,
+				onPrevious: () => updateDate(-10 * scroll, "year"),
+				onNext: () => updateDate(10 * scroll, "year")
+			}), h(YearsList, {
+				decade: currentDate,
+				value: props.value,
+				minDate: props.minDate,
+				maxDate: props.maxDate,
+				yearsListFormat: props.yearsListFormat,
+				getYearControlProps: props.getYearControlProps,
+				fullWidth: props.fullWidth,
+				onYearMouseEnter: props.onYearMouseEnter,
+				onYearSelect: (date) => {
+					setDate(date);
+					props.onYearSelect?.(date);
+					setLevel(clampLevel("year", props.minLevel, props.maxLevel));
+				}
+			})]);
+		}));
+	}
+});
+var MonthLevel = Calendar;
+var YearLevel = Calendar;
+var DecadeLevel = Calendar;
+var MonthLevelGroup = Calendar;
+var YearLevelGroup = Calendar;
+var DecadeLevelGroup = Calendar;
+var LevelsGroup = Calendar;
+function isInRangeGranular(date, range, unit) {
+	const sorted = [...range].sort((a, b) => dayjs(a).isAfter(dayjs(b)) ? 1 : -1);
+	return !dayjs(date).isBefore(sorted[0], unit) && !dayjs(date).isAfter(sorted[1], unit);
+}
+function getNextPickerValue(value, date, type, sortDates = true) {
+	if (type === "multiple") {
+		const next = Array.isArray(value) ? [...value] : [];
+		const index = next.findIndex((item) => isSameDate(item, date));
+		if (index >= 0) next.splice(index, 1);
+		else next.push(date);
+		return sortDates ? next.sort((a, b) => dayjs(a).valueOf() - dayjs(b).valueOf()) : next;
+	}
+	if (type === "range") {
+		const [start, end] = Array.isArray(value) ? value : [null, null];
+		if (!start || start && end || dayjs(date).isBefore(start, "day")) return [date, null];
+		return [start, date];
+	}
+	return date;
+}
+var DatePicker = defineComponent({
+	name: "DatePicker",
+	props: {
+		type: {
+			type: String,
+			default: "default"
+		},
+		value: [
+			String,
+			Array,
+			null
+		],
+		defaultValue: [
+			String,
+			Array,
+			null
+		],
+		onChange: Function,
+		allowDeselect: {
+			type: Boolean,
+			default: true
+		},
+		sortDates: {
+			type: Boolean,
+			default: true
+		},
+		presets: Array
+	},
+	setup(props, { attrs }) {
+		const finalValue = computed(() => props.type === "multiple" ? [] : props.type === "range" ? [null, null] : null);
+		const [_value, setValue] = useUncontrolled({
+			value: computed(() => props.value),
+			defaultValue: props.defaultValue,
+			finalValue: finalValue.value,
+			onChange: (value) => props.onChange?.(value)
+		});
+		const selectDate = (date) => {
+			if (props.type === "default" && props.allowDeselect && isSameDate(_value.value, date)) setValue(null);
+			else setValue(getNextPickerValue(_value.value, date, props.type, props.sortDates));
+		};
+		const calendarDate = ref(void 0);
+		const calendarLevel = ref(void 0);
+		const selectPreset = (value) => {
+			const date = Array.isArray(value) ? value[0] : value;
+			if (date != null) {
+				calendarDate.value = date;
+				calendarLevel.value = "month";
+			}
+			setValue(value);
+		};
+		return () => {
+			const calendar = h(Calendar, {
+				...attrs,
+				type: props.type,
+				value: _value.value,
+				date: calendarDate.value,
+				onDateChange: (date) => calendarDate.value = date,
+				level: calendarLevel.value,
+				onLevelChange: (level) => calendarLevel.value = level,
+				onDayClick: selectDate
+			});
+			if (!props.presets?.length) return calendar;
+			return h("div", { class: Dates_module_default.datePickerRoot }, [h("div", { class: Dates_module_default.presetsList }, props.presets.map((preset, index) => h(UnstyledButton, {
+				key: index,
+				class: Dates_module_default.presetButton,
+				onClick: () => selectPreset(preset.value),
+				onMousedown: (event) => event.preventDefault()
+			}, () => preset.label))), calendar]);
+		};
+	}
+});
+var YearPicker = defineComponent({
+	name: "YearPicker",
+	props: {
+		type: {
+			type: String,
+			default: "default"
+		},
+		value: [
+			String,
+			Array,
+			null
+		],
+		defaultValue: [
+			String,
+			Array,
+			null
+		],
+		onChange: Function,
+		allowDeselect: {
+			type: Boolean,
+			default: true
+		},
+		sortDates: {
+			type: Boolean,
+			default: true
+		},
+		presets: Array,
+		onYearSelect: Function
+	},
+	setup(props, { attrs }) {
+		const finalValue = computed(() => props.type === "multiple" ? [] : props.type === "range" ? [null, null] : null);
+		const [_value, setValue] = useUncontrolled({
+			value: computed(() => props.value),
+			defaultValue: props.defaultValue,
+			finalValue: finalValue.value,
+			onChange: (value) => props.onChange?.(value)
+		});
+		const hoveredDate = ref(null);
+		const selectYear = (date) => {
+			if (props.type === "default" && props.allowDeselect && isSameDate(_value.value, date)) setValue(null);
+			else setValue(getNextPickerValue(_value.value, date, props.type, props.sortDates));
+			hoveredDate.value = null;
+			props.onYearSelect?.(date);
+		};
+		const yearControlProps = (date) => {
+			const external = attrs.getYearControlProps?.(date) || {};
+			if (props.type !== "range" || !Array.isArray(_value.value)) return external;
+			const [start, end] = _value.value;
+			const hovered = start && !end ? hoveredDate.value : null;
+			return {
+				inRange: start && hovered ? isInRangeGranular(date, [hovered, start], "year") : start && end ? isInRangeGranular(date, [start, end], "year") : false,
+				firstInRange: start ? dayjs(date).isSame(start, "year") && !(hovered && dayjs(hovered).isBefore(start, "year")) : false,
+				lastInRange: end ? dayjs(date).isSame(end, "year") : !!(start && hovered && dayjs(hovered).isBefore(start, "year") && dayjs(date).isSame(start, "year")),
+				...external
+			};
+		};
+		const calendarDate = ref(void 0);
+		const selectPreset = (value) => {
+			const date = Array.isArray(value) ? value[0] : value;
+			if (date != null) calendarDate.value = date;
+			setValue(value);
+		};
+		return () => {
+			const calendar = h(Calendar, {
+				...attrs,
+				type: props.type,
+				value: _value.value,
+				date: calendarDate.value,
+				onDateChange: (date) => calendarDate.value = date,
+				defaultLevel: "decade",
+				minLevel: "decade",
+				onYearSelect: selectYear,
+				getYearControlProps: yearControlProps,
+				onYearMouseEnter: (date) => {
+					const [start, end] = Array.isArray(_value.value) ? _value.value : [null, null];
+					if (props.type === "range" && start && !end) hoveredDate.value = date;
+				},
+				onMouseleave: () => {
+					hoveredDate.value = null;
+				}
+			});
+			if (!props.presets?.length) return calendar;
+			return h("div", { class: Dates_module_default.datePickerRoot }, [h("div", { class: Dates_module_default.presetsList }, props.presets.map((preset, index) => h(UnstyledButton, {
+				key: index,
+				class: Dates_module_default.presetButton,
+				onClick: () => selectPreset(preset.value),
+				onMousedown: (event) => event.preventDefault()
+			}, () => preset.label))), calendar]);
+		};
+	}
+});
+var MonthPicker = defineComponent({
+	name: "MonthPicker",
+	props: {
+		type: {
+			type: String,
+			default: "default"
+		},
+		value: [
+			String,
+			Array,
+			null
+		],
+		defaultValue: [
+			String,
+			Array,
+			null
+		],
+		onChange: Function,
+		allowDeselect: {
+			type: Boolean,
+			default: true
+		},
+		sortDates: {
+			type: Boolean,
+			default: true
+		},
+		presets: Array,
+		onMonthSelect: Function
+	},
+	setup(props, { attrs }) {
+		const finalValue = computed(() => props.type === "multiple" ? [] : props.type === "range" ? [null, null] : null);
+		const [_value, setValue] = useUncontrolled({
+			value: computed(() => props.value),
+			defaultValue: props.defaultValue,
+			finalValue: finalValue.value,
+			onChange: (value) => props.onChange?.(value)
+		});
+		const hoveredDate = ref(null);
+		const selectMonth = (date) => {
+			if (props.type === "default" && props.allowDeselect && isSameDate(_value.value, date)) setValue(null);
+			else setValue(getNextPickerValue(_value.value, date, props.type, props.sortDates));
+			hoveredDate.value = null;
+			props.onMonthSelect?.(date);
+		};
+		const monthControlProps = (date) => {
+			const external = attrs.getMonthControlProps?.(date) || {};
+			if (props.type !== "range" || !Array.isArray(_value.value)) return external;
+			const [start, end] = _value.value;
+			const hovered = start && !end ? hoveredDate.value : null;
+			return {
+				inRange: start && hovered ? isInRangeGranular(date, [hovered, start], "month") : start && end ? isInRangeGranular(date, [start, end], "month") : false,
+				firstInRange: start ? dayjs(date).isSame(start, "month") && !(hovered && dayjs(hovered).isBefore(start, "month")) : false,
+				lastInRange: end ? dayjs(date).isSame(end, "month") : !!(start && hovered && dayjs(hovered).isBefore(start, "month") && dayjs(date).isSame(start, "month")),
+				...external
+			};
+		};
+		const calendarDate = ref(void 0);
+		const selectPreset = (value) => {
+			const date = Array.isArray(value) ? value[0] : value;
+			if (date != null) calendarDate.value = date;
+			setValue(value);
+		};
+		return () => {
+			const calendar = h(Calendar, {
+				...attrs,
+				type: props.type,
+				value: _value.value,
+				date: calendarDate.value,
+				onDateChange: (date) => calendarDate.value = date,
+				defaultLevel: "year",
+				minLevel: "year",
+				onMonthSelect: selectMonth,
+				getMonthControlProps: monthControlProps,
+				onMonthMouseEnter: (date) => {
+					const [start, end] = Array.isArray(_value.value) ? _value.value : [null, null];
+					if (props.type === "range" && start && !end) hoveredDate.value = date;
+				},
+				onMouseleave: () => {
+					hoveredDate.value = null;
+				}
+			});
+			if (!props.presets?.length) return calendar;
+			return h("div", { class: Dates_module_default.datePickerRoot }, [h("div", { class: Dates_module_default.presetsList }, props.presets.map((preset, index) => h(UnstyledButton, {
+				key: index,
+				class: Dates_module_default.presetButton,
+				onClick: () => selectPreset(preset.value),
+				onMousedown: (event) => event.preventDefault()
+			}, () => preset.label))), calendar]);
+		};
+	}
+});
+var PickerInputBase = defineComponent({
+	name: "PickerInputBase",
+	props: {
+		formattedValue: {
+			type: String,
+			default: ""
+		},
+		dropdownOpened: Boolean,
+		dropdownType: {
+			type: String,
+			default: "popover"
+		},
+		label: [
+			String,
+			Number,
+			Object,
+			Function
+		],
+		placeholder: String,
+		clearable: Boolean,
+		disabled: Boolean,
+		required: Boolean,
+		error: [String, Boolean],
+		size: {
+			type: [String, Number],
+			default: "sm"
+		},
+		variant: String,
+		onClear: Function,
+		onDropdownClose: Function,
+		onDropdownOpen: Function
+	},
+	emits: ["click"],
+	inheritAttrs: false,
+	setup(props, { slots, emit, attrs }) {
+		const opened = ref(props.dropdownOpened);
+		watch(() => props.dropdownOpened, (value) => {
+			opened.value = value;
+		});
+		const close = () => {
+			opened.value = false;
+			props.onDropdownClose?.();
+		};
+		const open = () => {
+			if (!props.disabled) {
+				opened.value = true;
+				props.onDropdownOpen?.();
+			}
+		};
+		const target = () => h(InputBase, {
+			...attrs,
+			component: "button",
+			type: "button",
+			label: props.label,
+			placeholder: props.placeholder,
+			disabled: props.disabled,
+			required: props.required,
+			error: props.error,
+			pointer: true,
+			size: props.size,
+			variant: props.variant,
+			rightSection: props.clearable && props.formattedValue ? h(CloseButton, {
+				size: props.size,
+				onMousedown: (event) => event.stopPropagation(),
+				onClick: (event) => {
+					event.stopPropagation();
+					props.onClear?.();
+				}
+			}) : void 0,
+			rightSectionPointerEvents: props.clearable && props.formattedValue ? "all" : void 0,
+			onClick: (event) => {
+				emit("click", event);
+				open();
+			}
+		}, () => props.formattedValue ? h("span", props.formattedValue) : h("span", { class: Dates_module_default.placeholder }, props.placeholder));
+		return () => props.dropdownType === "modal" ? h(Box, null, () => [target(), h(Modal, {
+			opened: opened.value,
+			onClose: close,
+			title: props.label,
+			size: "auto"
+		}, () => slots.default?.({ close }))]) : h(Popover, {
+			opened: opened.value,
+			onChange: (value) => value ? open() : close(),
+			position: "bottom-start",
+			trapFocus: true,
+			returnFocus: false
+		}, () => [h(Popover.Target, null, target), h(Popover.Dropdown, { class: Dates_module_default.dropdown }, () => slots.default?.({ close }))]);
+	}
+});
+function createPickerInput(name, Picker, defaultLevel, defaultValueFormat = "MMMM D, YYYY") {
+	return defineComponent({
+		name,
+		props: {
+			type: {
+				type: String,
+				default: "default"
+			},
+			value: [
+				String,
+				Array,
+				null
+			],
+			defaultValue: [
+				String,
+				Array,
+				null
+			],
+			onChange: Function,
+			valueFormat: {
+				type: String,
+				default: defaultValueFormat
+			},
+			labelSeparator: {
+				type: String,
+				default: "–"
+			},
+			locale: String,
+			placeholder: String,
+			label: [
+				String,
+				Number,
+				Object,
+				Function
+			],
+			clearable: Boolean,
+			closeOnChange: {
+				type: Boolean,
+				default: true
+			},
+			sortDates: {
+				type: Boolean,
+				default: true
+			},
+			valueFormatter: Function
+		},
+		setup(props, { attrs }) {
+			const finalValue = computed(() => props.type === "multiple" ? [] : props.type === "range" ? [null, null] : null);
+			const [_value, setValue] = useUncontrolled({
+				value: computed(() => props.value),
+				defaultValue: props.defaultValue,
+				finalValue: finalValue.value,
+				onChange: (value) => props.onChange?.(value)
+			});
+			const opened = ref(false);
+			const formattedValue = computed(() => formatValue(_value.value, props.type, props.valueFormat, props.locale, props.labelSeparator, props.valueFormatter));
+			return () => h(PickerInputBase, {
+				...attrs,
+				formattedValue: formattedValue.value,
+				dropdownOpened: opened.value,
+				label: props.label,
+				placeholder: props.placeholder,
+				clearable: props.clearable,
+				onDropdownOpen: () => opened.value = true,
+				onDropdownClose: () => opened.value = false,
+				onClear: () => setValue(finalValue.value)
+			}, { default: ({ close }) => h(Picker, {
+				...attrs,
+				type: props.type,
+				value: _value.value,
+				sortDates: props.sortDates,
+				defaultLevel,
+				locale: props.locale,
+				onChange: (value) => {
+					setValue(value);
+					if (props.closeOnChange && props.type === "default") close();
+				}
+			}) });
+		}
+	});
+}
+var DatePickerInput = createPickerInput("DatePickerInput", DatePicker);
+var MonthPickerInput = createPickerInput("MonthPickerInput", MonthPicker, "year", "MMMM YYYY");
+var YearPickerInput = createPickerInput("YearPickerInput", YearPicker, "decade", "YYYY");
+var HiddenDatesInput = defineComponent({
+	name: "HiddenDatesInput",
+	props: {
+		name: String,
+		value: [
+			String,
+			Array,
+			null
+		]
+	},
+	setup(props) {
+		return () => {
+			const value = Array.isArray(props.value) ? props.value.filter(Boolean).join(",") : props.value || "";
+			return h("input", {
+				type: "hidden",
+				name: props.name,
+				value
+			});
+		};
+	}
+});
+function dateStringParser(value, format = "MMMM D, YYYY", locale) {
+	return dayjs(value, format, locale || "en", true).format("YYYY-MM-DD");
+}
+function isDateValid({ date, minDate, maxDate }) {
+	const parsed = dayjs(date);
+	return parsed.isValid() && !isBeforeMin(parsed.format("YYYY-MM-DD"), minDate) && !isAfterMax(parsed.format("YYYY-MM-DD"), maxDate);
+}
+var DateInput = defineComponent({
+	name: "DateInput",
+	inheritAttrs: false,
+	props: {
+		value: [
+			String,
+			Date,
+			null
+		],
+		defaultValue: [
+			String,
+			Date,
+			null
+		],
+		onChange: Function,
+		valueFormat: {
+			type: String,
+			default: "MMMM D, YYYY"
+		},
+		dateParser: Function,
+		locale: String,
+		clearable: Boolean,
+		minDate: [String, Date],
+		maxDate: [String, Date],
+		presets: Array
+	},
+	setup(props, { attrs }) {
+		const [_value, setValue] = useUncontrolled({
+			value: computed(() => props.value === void 0 ? void 0 : normalizeDate(props.value)),
+			defaultValue: normalizeDate(props.defaultValue),
+			finalValue: null,
+			onChange: (value) => props.onChange?.(value)
+		});
+		const formatValue = (value) => value ? dayjs(value).locale(props.locale || "en").format(props.valueFormat) : "";
+		const inputValue = ref(formatValue(_value.value));
+		const opened = ref(false);
+		watch(_value, (value) => {
+			if (!opened.value) inputValue.value = formatValue(value);
+		});
+		const parseInput = (raw) => {
+			const parsed = props.dateParser?.(raw) || dateStringParser(raw, props.valueFormat, props.locale);
+			return dayjs(parsed).isValid() && isDateValid({
+				date: parsed,
+				minDate: props.minDate,
+				maxDate: props.maxDate
+			}) ? parsed : null;
+		};
+		const commit = () => {
+			opened.value = false;
+			if (!inputValue.value.trim()) {
+				if (props.clearable) setValue(null);
+				else inputValue.value = formatValue(_value.value);
+				return;
+			}
+			const parsed = parseInput(inputValue.value);
+			if (parsed) setValue(parsed);
+			else inputValue.value = formatValue(_value.value);
+		};
+		const selectDay = (date) => {
+			setValue(date);
+			inputValue.value = formatValue(date);
+			opened.value = false;
+		};
+		return () => h(Box, null, () => h(Popover, {
+			opened: opened.value,
+			onChange: (v) => opened.value = v,
+			position: "bottom-start"
+		}, () => [h(Popover.Target, null, () => h(InputBase, {
+			...attrs,
+			value: inputValue.value,
+			onInput: (event) => inputValue.value = event.target.value,
+			onFocus: () => opened.value = true,
+			onClick: () => opened.value = true,
+			onBlur: commit,
+			onKeydown: (event) => {
+				if (event.key === "Escape") opened.value = false;
+			},
+			rightSection: props.clearable && _value.value ? h(CloseButton, {
+				onMousedown: (event) => event.stopPropagation(),
+				onClick: (event) => {
+					event.stopPropagation();
+					inputValue.value = "";
+					setValue(null);
+				}
+			}) : void 0,
+			rightSectionPointerEvents: props.clearable && _value.value ? "all" : void 0
+		})), h(Popover.Dropdown, { onMousedown: (event) => event.preventDefault() }, () => [props.presets?.length ? h(Group, {
+			gap: 4,
+			mb: 4
+		}, () => props.presets?.map((preset, index) => h(Button, {
+			key: index,
+			size: "xs",
+			variant: "light",
+			onClick: () => selectDay(preset.value)
+		}, () => preset.label))) : null, h(Calendar, {
+			defaultDate: _value.value || void 0,
+			minDate: props.minDate,
+			maxDate: props.maxDate,
+			locale: props.locale,
+			getDayProps: (date) => ({
+				selected: isSameDate(date, _value.value),
+				onClick: () => selectDay(date)
+			})
+		})])]));
+	}
+});
+function splitTimeString(value = "") {
+	const [time = "", period] = value.split(" ");
+	const [hours = "00", minutes = "00", seconds = "00"] = time.split(":");
+	return {
+		hours,
+		minutes,
+		seconds,
+		period
+	};
+}
+function padTime(value) {
+	return String(value).padStart(2, "0");
+}
+var defaultAmPmLabels = {
+	am: "AM",
+	pm: "PM"
+};
+function getParsedTime({ time, format, amPmLabels = defaultAmPmLabels }) {
+	if (!time) return {
+		hours: null,
+		minutes: null,
+		seconds: null,
+		amPm: null
+	};
+	const { hours, minutes, seconds } = splitTimeString(time);
+	const h24 = Number(hours);
+	const m = Number(minutes);
+	const s = Number(seconds);
+	if (format === "12h") {
+		const amPm = h24 >= 12 ? amPmLabels.pm : amPmLabels.am;
+		return {
+			hours: h24 % 12 === 0 ? 12 : h24 % 12,
+			minutes: m,
+			seconds: s,
+			amPm
+		};
+	}
+	return {
+		hours: h24,
+		minutes: m,
+		seconds: s,
+		amPm: null
+	};
+}
+function getTimeString({ hours, minutes, seconds, format = "24h", withSeconds = false, amPm = null, amPmLabels = defaultAmPmLabels }) {
+	if (hours === null || minutes === null) return {
+		valid: false,
+		value: ""
+	};
+	if (withSeconds && (seconds === null || seconds === void 0)) return {
+		valid: false,
+		value: ""
+	};
+	if (format === "24h") return {
+		valid: true,
+		value: `${padTime(hours)}:${padTime(minutes)}${withSeconds ? `:${padTime(seconds || 0)}` : ""}`
+	};
+	if (amPm === null) return {
+		valid: false,
+		value: ""
+	};
+	let h24 = hours;
+	if (amPm === amPmLabels.pm && hours !== 12) h24 += 12;
+	else if (amPm === amPmLabels.am && hours === 12) h24 = 0;
+	return {
+		valid: true,
+		value: `${padTime(h24)}:${padTime(minutes)}${withSeconds ? `:${padTime(seconds || 0)}` : ""}`
+	};
+}
+function timeToSeconds(value) {
+	const { hours, minutes, seconds } = splitTimeString(value);
+	return Number(hours) * 3600 + Number(minutes) * 60 + Number(seconds || 0);
+}
+function isSameTime(a, b) {
+	return !!a && !!b && timeToSeconds(a) === timeToSeconds(b);
+}
+function compareTime(a, b) {
+	return timeToSeconds(a) - timeToSeconds(b);
+}
+function clampTime(value, min, max) {
+	if (min && compareTime(value, min) < 0) return min;
+	if (max && compareTime(value, max) > 0) return max;
+	return value;
+}
+function getTimeRange(start, end, step = 60) {
+	const result = [];
+	for (let current = timeToSeconds(start); current <= timeToSeconds(end); current += step) {
+		const hours = Math.floor(current / 3600);
+		const minutes = Math.floor(current % 3600 / 60);
+		result.push(`${padTime(hours)}:${padTime(minutes)}`);
+	}
+	return result;
+}
+var TimeInput = defineComponent({
+	name: "TimeInput",
+	props: {
+		withSeconds: Boolean,
+		value: String,
+		defaultValue: String,
+		onChange: Function
+	},
+	setup(props, { attrs }) {
+		return () => h(InputBase, {
+			...attrs,
+			type: "time",
+			step: props.withSeconds ? 1 : 60,
+			value: props.value,
+			defaultValue: props.defaultValue,
+			onChange: props.onChange
+		});
+	}
+});
+var TimeGrid = defineComponent({
+	name: "TimeGrid",
+	props: {
+		data: {
+			type: Array,
+			default: () => []
+		},
+		value: String,
+		defaultValue: String,
+		minTime: String,
+		maxTime: String,
+		allowDeselect: Boolean,
+		disabled: Boolean,
+		onChange: Function,
+		getControlProps: Function
+	},
+	setup(props, { attrs }) {
+		const [_value, setValue] = useUncontrolled({
+			value: computed(() => props.value),
+			defaultValue: props.defaultValue,
+			finalValue: null,
+			onChange: (value) => props.onChange?.(value)
+		});
+		return () => h(Box, {
+			...attrs,
+			class: [Dates_module_default.timeGridRoot, attrs.class]
+		}, () => h(SimpleGrid, {
+			cols: 3,
+			spacing: "xs",
+			class: Dates_module_default.timeGrid
+		}, () => props.data.map((item) => {
+			const isDisabled = props.disabled || props.minTime && compareTime(item, props.minTime) < 0 || props.maxTime && compareTime(item, props.maxTime) > 0;
+			const controlProps = props.getControlProps?.(item) || {};
+			const active = isSameTime(_value.value ?? void 0, item);
+			return h(UnstyledButton, {
+				...controlProps,
+				class: [Dates_module_default.timeGridControl, controlProps.class],
+				disabled: isDisabled || controlProps.disabled,
+				"data-active": active || void 0,
+				"data-disabled": isDisabled || controlProps.disabled || void 0,
+				onClick: (event) => {
+					controlProps.onClick?.(event);
+					if (isDisabled) return;
+					const nextValue = props.allowDeselect && active ? null : item;
+					if (nextValue !== _value.value) setValue(nextValue);
+				}
+			}, () => item);
+		})));
+	}
+});
+var SpinInput = defineComponent({
+	name: "SpinInput",
+	inheritAttrs: false,
+	props: {
+		value: {
+			type: Number,
+			default: null
+		},
+		min: {
+			type: Number,
+			required: true
+		},
+		max: {
+			type: Number,
+			required: true
+		},
+		onChange: Function,
+		step: {
+			type: Number,
+			default: 1
+		},
+		onNextInput: Function,
+		onPreviousInput: Function,
+		allowTemporaryZero: Boolean,
+		placeholder: {
+			type: String,
+			default: "--"
+		},
+		disableAutoAdvance: Boolean,
+		disabled: Boolean,
+		readOnly: Boolean
+	},
+	setup(props, { attrs }) {
+		const maxDigit = () => Number(props.max.toFixed(0)[0]);
+		const arrowsMax = () => props.max + 1 - props.step;
+		const handleChange = (raw) => {
+			if (props.readOnly) return;
+			const clearValue = raw.replace(/\D/g, "");
+			if (clearValue === "") return;
+			let parsedValue = 0;
+			for (let i = 0; i < clearValue.length; i += 1) {
+				const digit = clearValue.charCodeAt(i) - 48;
+				const next = parsedValue * 10 + digit;
+				parsedValue = next > props.max ? digit : next;
+			}
+			const clampedValue = props.allowTemporaryZero && parsedValue === 0 && props.min > 0 ? 0 : Math.min(Math.max(parsedValue, props.min), props.max);
+			props.onChange?.(clampedValue);
+			if (!props.disableAutoAdvance && (clampedValue > maxDigit() || raw.startsWith("00"))) props.onNextInput?.();
+		};
+		const handleKeydown = (event) => {
+			if (props.readOnly) return;
+			if (event.key === "0" && props.value === 0) {
+				event.preventDefault();
+				props.onNextInput?.();
+			}
+			if (event.key === "Home") {
+				event.preventDefault();
+				props.onChange?.(props.min);
+			}
+			if (event.key === "End") {
+				event.preventDefault();
+				props.onChange?.(props.max);
+			}
+			if (event.key === "Backspace" || event.key === "Delete") {
+				event.preventDefault();
+				if (props.value !== null) props.onChange?.(null);
+				else props.onPreviousInput?.();
+			}
+			if (event.key === "ArrowRight") {
+				event.preventDefault();
+				props.onNextInput?.();
+			}
+			if (event.key === "ArrowLeft") {
+				event.preventDefault();
+				props.onPreviousInput?.();
+			}
+			if (event.key === "ArrowUp") {
+				event.preventDefault();
+				const newValue = props.value === null ? props.min : Math.min(Math.max(props.value + props.step, props.min), arrowsMax());
+				props.onChange?.(newValue);
+			}
+			if (event.key === "ArrowDown") {
+				event.preventDefault();
+				const newValue = props.value === null ? arrowsMax() : Math.min(Math.max(props.value - props.step, props.min), arrowsMax());
+				props.onChange?.(newValue);
+			}
+		};
+		return () => h("input", {
+			...attrs,
+			type: "text",
+			role: "spinbutton",
+			"aria-valuemin": props.min,
+			"aria-valuemax": props.max,
+			"aria-valuenow": props.value === null ? 0 : props.value,
+			"data-empty": props.value === null || void 0,
+			inputmode: "numeric",
+			placeholder: props.placeholder,
+			disabled: props.disabled,
+			readonly: props.readOnly,
+			value: props.value === null ? "" : padTime(props.value),
+			onInput: (event) => handleChange(event.target.value),
+			onKeydown: handleKeydown,
+			onFocus: (event) => event.target.select(),
+			onClick: (event) => {
+				event.stopPropagation();
+				event.target.select();
+			},
+			onMousedown: (event) => event.stopPropagation()
+		});
+	}
+});
+var AmPmInput = defineComponent({
+	name: "AmPmInput",
+	props: {
+		value: {
+			type: String,
+			default: null
+		},
+		labels: {
+			type: Object,
+			default: () => defaultAmPmLabels
+		},
+		onChange: Function,
+		disabled: Boolean,
+		readOnly: Boolean
+	},
+	setup(props, { attrs }) {
+		return () => h("select", {
+			...attrs,
+			class: Dates_module_default.timePickerField,
+			"data-am-pm": true,
+			disabled: props.disabled,
+			value: props.value ?? props.labels.am,
+			onChange: (event) => props.onChange?.(event.target.value)
+		}, [h("option", { value: props.labels.am }, props.labels.am), h("option", { value: props.labels.pm }, props.labels.pm)]);
+	}
+});
+var TimeControlsList = defineComponent({
+	name: "TimeControlsList",
+	props: {
+		min: {
+			type: Number,
+			required: true
+		},
+		max: {
+			type: Number,
+			required: true
+		},
+		step: {
+			type: Number,
+			default: 1
+		},
+		value: {
+			type: Number,
+			default: null
+		},
+		onSelect: Function,
+		formatValue: Function
+	},
+	setup(props) {
+		return () => h(ScrollArea, { h: 200 }, () => h("div", { class: Dates_module_default.timePickerControlsList }, Array.from({ length: Math.floor((props.max - props.min) / props.step) + 1 }, (_, index) => props.min + index * props.step).map((item) => h(UnstyledButton, {
+			key: item,
+			class: Dates_module_default.timePickerControl,
+			"data-active": item === props.value || void 0,
+			onClick: () => props.onSelect?.(item)
+		}, () => props.formatValue ? props.formatValue(item) : padTime(item)))));
+	}
+});
+var TimePicker = defineComponent({
+	name: "TimePicker",
+	props: {
+		value: String,
+		defaultValue: String,
+		onChange: Function,
+		withSeconds: Boolean,
+		min: String,
+		max: String,
+		format: {
+			type: String,
+			default: "24h"
+		},
+		amPmLabels: {
+			type: Object,
+			default: () => defaultAmPmLabels
+		},
+		hoursStep: {
+			type: Number,
+			default: 1
+		},
+		minutesStep: {
+			type: Number,
+			default: 1
+		},
+		secondsStep: {
+			type: Number,
+			default: 1
+		},
+		clearable: Boolean,
+		withDropdown: Boolean,
+		disabled: Boolean,
+		readOnly: Boolean,
+		size: {
+			type: [String, Number],
+			default: "sm"
+		},
+		presets: Array,
+		hoursRef: Object
+	},
+	setup(props, { attrs }) {
+		const [_value, setValue] = useUncontrolled({
+			value: computed(() => props.value),
+			defaultValue: props.defaultValue,
+			finalValue: "",
+			onChange: (value) => props.onChange?.(value)
+		});
+		const parsed = computed(() => getParsedTime({
+			time: _value.value,
+			format: props.format,
+			amPmLabels: props.amPmLabels
+		}));
+		const hours = ref(parsed.value.hours);
+		const minutes = ref(parsed.value.minutes);
+		const seconds = ref(parsed.value.seconds);
+		const amPm = ref(parsed.value.amPm);
+		watch(_value, (value) => {
+			const next = getParsedTime({
+				time: value,
+				format: props.format,
+				amPmLabels: props.amPmLabels
+			});
+			hours.value = next.hours;
+			minutes.value = next.minutes;
+			seconds.value = next.seconds;
+			amPm.value = next.amPm;
+		});
+		const hoursRef = ref();
+		const minutesRef = ref();
+		const secondsRef = ref();
+		const amPmRef = ref();
+		const focusRef = (target) => {
+			(target?.$el ?? target)?.focus?.();
+		};
+		const focus = (field) => {
+			focusRef((field === "hours" ? hoursRef : field === "minutes" ? minutesRef : field === "seconds" ? secondsRef : amPmRef).value);
+		};
+		watch(hoursRef, (val) => {
+			if (props.hoursRef) props.hoursRef.value = val?.$el ?? val;
+		}, { immediate: true });
+		const commit = () => {
+			const result = getTimeString({
+				hours: hours.value,
+				minutes: minutes.value,
+				seconds: seconds.value,
+				format: props.format,
+				withSeconds: props.withSeconds,
+				amPm: amPm.value,
+				amPmLabels: props.amPmLabels
+			});
+			setValue(result.valid ? result.value : "");
+		};
+		const setHours = (value) => {
+			let adjusted = value;
+			if (props.format === "12h" && typeof value === "number" && value > 12) adjusted = (value - 1) % 12 + 1;
+			hours.value = adjusted;
+			commit();
+			focus("hours");
+		};
+		const setMinutes = (value) => {
+			minutes.value = value;
+			commit();
+			focus("minutes");
+		};
+		const setSeconds = (value) => {
+			seconds.value = value;
+			commit();
+			focus("seconds");
+		};
+		const setAmPm = (value) => {
+			amPm.value = value;
+			commit();
+			focus("amPm");
+		};
+		const clear = () => {
+			hours.value = null;
+			minutes.value = null;
+			seconds.value = null;
+			amPm.value = null;
+			setValue("");
+			focus("hours");
+		};
+		const isClearable = computed(() => props.clearable && !props.readOnly && !props.disabled && (hours.value !== null || minutes.value !== null || seconds.value !== null || amPm.value !== null));
+		const opened = ref(false);
+		return () => h(Popover, {
+			opened: props.withDropdown && opened.value,
+			position: "bottom-start",
+			transitionProps: { duration: 0 }
+		}, () => [h(Popover.Target, null, () => h(InputBase, {
+			...attrs,
+			component: "div",
+			size: props.size,
+			disabled: props.disabled,
+			onClick: () => {
+				focus("hours");
+				if (props.withDropdown) opened.value = true;
+			},
+			onMousedown: (event) => event.preventDefault(),
+			onFocusin: () => {
+				if (props.withDropdown) opened.value = true;
+			},
+			onFocusout: () => {
+				if (props.withDropdown) opened.value = false;
+			},
+			rightSection: isClearable.value ? h(CloseButton, {
+				size: props.size,
+				onMousedown: (event) => event.preventDefault(),
+				onClick: clear
+			}) : void 0,
+			rightSectionPointerEvents: isClearable.value ? "all" : void 0
+		}, () => [h("div", {
+			class: Dates_module_default.timePickerFieldsRoot,
+			dir: "ltr"
+		}, [h("div", { class: Dates_module_default.timePickerFieldsGroup }, [
+			h(SpinInput, {
+				ref: hoursRef,
+				class: Dates_module_default.timePickerField,
+				value: hours.value,
+				min: props.format === "12h" ? 1 : 0,
+				max: props.format === "12h" ? 12 : 23,
+				step: props.hoursStep,
+				onChange: setHours,
+				onNextInput: () => focus("minutes"),
+				allowTemporaryZero: props.format === "12h",
+				readOnly: props.readOnly,
+				disabled: props.disabled,
+				placeholder: "--"
+			}),
+			h("span", ":"),
+			h(SpinInput, {
+				ref: minutesRef,
+				class: Dates_module_default.timePickerField,
+				value: minutes.value,
+				min: 0,
+				max: 59,
+				step: props.minutesStep,
+				onChange: setMinutes,
+				onPreviousInput: () => focus("hours"),
+				onNextInput: () => focus(props.withSeconds ? "seconds" : "amPm"),
+				readOnly: props.readOnly,
+				disabled: props.disabled,
+				placeholder: "--"
+			}),
+			props.withSeconds ? h("span", ":") : null,
+			props.withSeconds ? h(SpinInput, {
+				ref: secondsRef,
+				class: Dates_module_default.timePickerField,
+				value: seconds.value,
+				min: 0,
+				max: 59,
+				step: props.secondsStep,
+				onChange: setSeconds,
+				onPreviousInput: () => focus("minutes"),
+				onNextInput: () => focus("amPm"),
+				readOnly: props.readOnly,
+				disabled: props.disabled,
+				placeholder: "--"
+			}) : null,
+			props.format === "12h" ? h(AmPmInput, {
+				ref: amPmRef,
+				value: amPm.value,
+				labels: props.amPmLabels,
+				onChange: setAmPm,
+				readOnly: props.readOnly,
+				disabled: props.disabled
+			}) : null
+		])])])), h(Popover.Dropdown, {
+			class: Dates_module_default.timePickerDropdown,
+			onMousedown: (event) => event.preventDefault()
+		}, () => [props.presets?.length ? h(Group, {
+			gap: 4,
+			class: Dates_module_default.timePickerPresetsGroup
+		}, () => props.presets?.map((preset) => h(Button, {
+			size: "xs",
+			variant: "light",
+			onClick: () => setValue(preset.value)
+		}, () => preset.label))) : h("div", { class: Dates_module_default.timePickerControlsListGroup }, [
+			h(TimeControlsList, {
+				min: props.format === "12h" ? 1 : 0,
+				max: props.format === "12h" ? 12 : 23,
+				step: props.hoursStep,
+				value: hours.value,
+				onSelect: setHours
+			}),
+			h(TimeControlsList, {
+				min: 0,
+				max: 59,
+				step: props.minutesStep,
+				value: minutes.value,
+				onSelect: setMinutes
+			}),
+			props.withSeconds ? h(TimeControlsList, {
+				min: 0,
+				max: 59,
+				step: props.secondsStep,
+				value: seconds.value,
+				onSelect: setSeconds
+			}) : null
+		])])]);
+	}
+});
+var TimeValue = defineComponent({
+	name: "TimeValue",
+	props: {
+		value: {
+			type: [String, Date],
+			required: true
+		},
+		format: {
+			type: String,
+			default: "HH:mm"
+		},
+		locale: String
+	},
+	setup(props, { attrs }) {
+		return () => h(Text, attrs, () => (props.value instanceof Date ? dayjs(props.value) : dayjs(`2024-01-01 ${props.value}`)).locale(props.locale || "en").format(props.format));
+	}
+});
+var DateTimePicker = defineComponent({
+	name: "DateTimePicker",
+	props: {
+		value: [
+			String,
+			Date,
+			null
+		],
+		defaultValue: [
+			String,
+			Date,
+			null
+		],
+		onChange: Function,
+		valueFormat: {
+			type: String,
+			default: "MMMM D, YYYY h:mm A"
+		},
+		clearable: Boolean,
+		withSeconds: Boolean,
+		size: {
+			type: [String, Number],
+			default: "sm"
+		},
+		submitButtonProps: Object
+	},
+	setup(props, { attrs }) {
+		const hoursRef = ref();
+		const [_value, setValue] = useUncontrolled({
+			value: computed(() => props.value === void 0 ? void 0 : props.value === null ? null : new Date(props.value)),
+			defaultValue: props.defaultValue ? new Date(props.defaultValue) : null,
+			finalValue: null,
+			onChange: (value) => props.onChange?.(value)
+		});
+		const date = computed(() => _value.value ? dayjs(_value.value).format("YYYY-MM-DD") : null);
+		const time = computed(() => _value.value ? dayjs(_value.value).format(props.withSeconds ? "HH:mm:ss" : "HH:mm") : "");
+		const updateDate = (nextDate) => {
+			if (!nextDate || Array.isArray(nextDate)) return;
+			setValue(assignTime(nextDate, `2024-01-01 ${time.value || "00:00"}`));
+			hoursRef.value?.focus?.();
+		};
+		const updateTime = (nextTime) => {
+			if (date.value) setValue(assignTime(date.value, `2024-01-01 ${nextTime}`));
+		};
+		return () => h(PickerInputBase, {
+			...attrs,
+			formattedValue: _value.value ? dayjs(_value.value).format(props.valueFormat) : "",
+			clearable: props.clearable,
+			onClear: () => setValue(null)
+		}, { default: ({ close }) => h("div", { class: Dates_module_default.dateTimePicker }, [h(DatePicker, {
+			fullWidth: false,
+			value: date.value,
+			onChange: updateDate
+		}), h("div", { class: Dates_module_default.timeWrapper }, [h("div", { class: Dates_module_default.timeInput }, [h(TimePicker, {
+			value: time.value,
+			withSeconds: props.withSeconds,
+			size: props.size,
+			hoursRef,
+			onChange: updateTime
+		})]), h(ActionIcon, {
+			variant: "default",
+			size: `input-${props.size || "sm"}`,
+			"data-mantine-stop-propagation": true,
+			...props.submitButtonProps,
+			onClick: (event) => {
+				props.submitButtonProps?.onClick?.(event);
+				close();
+			}
+		}, () => h(CheckIcon, { size: "30%" }))])]) });
+	}
+});
+var InlineDateTimePicker = DateTimePicker;
+var MiniCalendar = defineComponent({
+	name: "MiniCalendar",
+	props: {
+		date: [String, Date],
+		defaultDate: [String, Date],
+		onDateChange: Function,
+		value: [
+			String,
+			Date,
+			null
+		],
+		onChange: Function,
+		maxDate: [String, Date],
+		minDate: [String, Date],
+		numberOfDays: {
+			type: Number,
+			default: 7
+		},
+		monthLabelFormat: {
+			type: String,
+			default: "MMM"
+		},
+		onNext: Function,
+		onPrevious: Function,
+		getDayProps: Function,
+		size: {
+			type: String,
+			default: "sm"
+		},
+		previousControlProps: Object,
+		nextControlProps: Object,
+		locale: String
+	},
+	setup(props, { attrs }) {
+		const ctx = useDatesContext();
+		const [_date, setDate] = useUncontrolled({
+			value: computed(() => toDateString(props.date ?? null) ?? void 0),
+			defaultValue: toDateString(props.defaultDate ?? null) ?? void 0,
+			finalValue: toDateString(props.value ?? null) || dayjs().format("YYYY-MM-DD"),
+			onChange: (value) => props.onDateChange?.(value)
+		});
+		const handleNext = () => {
+			props.onNext?.();
+			setDate(dayjs(_date.value).add(props.numberOfDays, "days").format("YYYY-MM-DD"));
+		};
+		const handlePrevious = () => {
+			props.onPrevious?.();
+			setDate(dayjs(_date.value).subtract(props.numberOfDays, "days").format("YYYY-MM-DD"));
+		};
+		return () => {
+			const previousDisabled = props.minDate ? dayjs(_date.value).subtract(1, "days").isBefore(dayjs(props.minDate)) : false;
+			const nextDisabled = props.maxDate ? dayjs(_date.value).add(props.numberOfDays, "days").isAfter(dayjs(props.maxDate)) : false;
+			const range = Array.from({ length: props.numberOfDays }, (_, index) => dayjs(_date.value).add(index, "days")).map((date) => {
+				const disabled = props.minDate && date.isBefore(dayjs(props.minDate), "day") || props.maxDate && date.isAfter(dayjs(props.maxDate), "day") || false;
+				const dayProps = props.getDayProps?.(toDateString(date.format("YYYY-MM-DD"))) || {};
+				return h(UnstyledButton, {
+					key: date.toString(),
+					disabled,
+					"aria-label": date.format("YYYY-MM-DD"),
+					"data-disabled": disabled || void 0,
+					"data-selected": props.value && dayjs(date).isSame(props.value, "day") || void 0,
+					...dayProps,
+					class: [Dates_module_default.miniCalendarDay, dayProps.class],
+					onClick: (event) => {
+						dayProps.onClick?.(event);
+						props.onChange?.(toDateString(date.format("YYYY-MM-DD")));
+					}
+				}, () => [h("span", { class: Dates_module_default.miniCalendarDayMonth }, date.locale(props.locale || ctx.locale).format(props.monthLabelFormat)), h("span", { class: Dates_module_default.miniCalendarDayNumber }, String(date.date()))]);
+			});
+			return h(Box, {
+				...attrs,
+				class: [Dates_module_default.miniCalendarRoot, attrs.class]
+			}, () => [
+				h(UnstyledButton, {
+					onClick: handlePrevious,
+					disabled: previousDisabled,
+					"data-disabled": previousDisabled || void 0,
+					"data-direction": "previous",
+					...props.previousControlProps,
+					class: [Dates_module_default.miniCalendarControl, props.previousControlProps?.class]
+				}, () => props.previousControlProps?.children || h(AccordionChevron, {
+					"data-chevron": true,
+					size: props.size
+				})),
+				h("div", { class: Dates_module_default.miniCalendarDays }, range),
+				h(UnstyledButton, {
+					onClick: handleNext,
+					disabled: nextDisabled,
+					"data-disabled": nextDisabled || void 0,
+					"data-direction": "next",
+					...props.nextControlProps,
+					class: [Dates_module_default.miniCalendarControl, props.nextControlProps?.class]
+				}, () => props.nextControlProps?.children || h(AccordionChevron, {
+					"data-chevron": true,
+					size: props.size
+				}))
+			]);
+		};
+	}
+});
+var getFormattedTime = ({ value, format = "HH:mm" }) => (value instanceof Date ? dayjs(value) : dayjs(`2024-01-01 ${value}`)).format(format);
+//#endregion
+export { AmPmInput, Calendar, CalendarHeader, DateInput, DatePicker, DatePickerInput, DateTimePicker, DatesProvider, Day, DecadeLevel, DecadeLevelGroup, HiddenDatesInput, InlineDateTimePicker, LevelsGroup, MiniCalendar, Month, MonthLevel, MonthLevelGroup, MonthPicker, MonthPickerInput, MonthsList, PickerControl, PickerInputBase, SpinInput, TimeControlsList, TimeGrid, TimeInput, TimePicker, TimeValue, WeekdaysRow, YearLevel, YearLevelGroup, YearPicker, YearPickerInput, YearsList, assignTime, clampDate, clampTime, compareTime, dateStringParser, getDefaultClampedDate, getEndOfWeek, getFormattedDate, getFormattedTime, getParsedTime, getStartOfWeek, getTimeRange, getTimeString, getTimezoneOffset, getWeekNumber, handleControlKeyDown, isDateValid, isSameDate, isSameMonth, isSameTime, isSameYear, padTime, shiftTimezone, timeToSeconds, toDateString, useDatesContext };
+
+//# sourceMappingURL=index.mjs.map