@mantine-vue/dates 2.3.1 → 3.0.0

package/cjs/index.cjs

@@ -29,44 +29,45 @@ let vue = require("vue");
 let _mantine_vue_hooks = require("@mantine-vue/hooks");
 let _mantine_vue_core = require("@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"
+	calendar: "_calendar_zystn_1",
+	calendarLevel: "_calendarLevel_zystn_15",
+	calendarHeader: "_calendarHeader_zystn_19",
+	calendarHeaderLevel: "_calendarHeaderLevel_zystn_32",
+	calendarHeaderControl: "_calendarHeaderControl_zystn_33",
+	calendarHeaderSelect: "_calendarHeaderSelect_zystn_79",
+	calendarHeaderControlIcon: "_calendarHeaderControlIcon_zystn_109",
+	month: "_month_zystn_122",
+	monthRow: "_monthRow_zystn_132",
+	monthCell: "_monthCell_zystn_136",
+	weekday: "_weekday_zystn_145",
+	weekNumber: "_weekNumber_zystn_157",
+	day: "_day_zystn_163",
+	pickerControl: "_pickerControl_zystn_224",
+	controlsGrid: "_controlsGrid_zystn_230",
+	timePicker: "_timePicker_zystn_290",
+	dateTimePicker: "_dateTimePicker_zystn_291",
+	datePickerRoot: "_datePickerRoot_zystn_295",
+	timeWrapper: "_timeWrapper_zystn_305",
+	timeInput: "_timeInput_zystn_311",
+	presetsList: "_presetsList_zystn_316",
+	presetButton: "_presetButton_zystn_324",
+	timePickerPresetsGroup: "_timePickerPresetsGroup_zystn_335",
+	dropdown: "_dropdown_zystn_339",
+	placeholder: "_placeholder_zystn_343",
+	timeGridControl: "_timeGridControl_zystn_347",
+	timePickerFieldsRoot: "_timePickerFieldsRoot_zystn_378",
+	timePickerFieldsGroup: "_timePickerFieldsGroup_zystn_385",
+	timePickerField: "_timePickerField_zystn_378",
+	timePickerDropdown: "_timePickerDropdown_zystn_435",
+	timePickerControlsListGroup: "_timePickerControlsListGroup_zystn_439",
+	timePickerControlsList: "_timePickerControlsList_zystn_439",
+	timePickerControl: "_timePickerControl_zystn_439",
+	miniCalendarRoot: "_miniCalendarRoot_zystn_468",
+	miniCalendarDays: "_miniCalendarDays_zystn_475",
+	miniCalendarDay: "_miniCalendarDay_zystn_475",
+	miniCalendarDayMonth: "_miniCalendarDayMonth_zystn_510",
+	miniCalendarDayNumber: "_miniCalendarDayNumber_zystn_516",
+	miniCalendarControl: "_miniCalendarControl_zystn_521"
 };
 //#endregion
 //#region src/index.ts
@@ -267,6 +268,7 @@ function getDecadeLabel(date) {
 var Day = (0, vue.defineComponent)({
 	name: "Day",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		date: {
 			type: String,
@@ -301,7 +303,7 @@ var Day = (0, vue.defineComponent)({
 		},
 		unstyled: Boolean
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		return () => (0, vue.h)(_mantine_vue_core.UnstyledButton, {
 			...attrs,
 			component: props.static ? "div" : "button",
@@ -320,7 +322,7 @@ var Day = (0, vue.defineComponent)({
 			"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) || (0, dayjs.default)(props.date).date());
+		}, () => (props.renderDay ? props.renderDay(props.date) : (slots.renderDay ?? slots.day)?.({ date: props.date })) || (0, dayjs.default)(props.date).date());
 	}
 });
 var PickerControl = (0, vue.defineComponent)({
@@ -384,6 +386,15 @@ var CalendarHeader = (0, vue.defineComponent)({
 		},
 		levelControlAriaLabel: String,
 		fullWidth: Boolean,
+		withNativeLevelSelect: Boolean,
+		yearsSelectRange: Array,
+		calendarLevel: String,
+		date: [String, Date],
+		locale: String,
+		onDateChange: Function,
+		minDate: [String, Date],
+		maxDate: [String, Date],
+		disableNativeLevelSelect: Boolean,
 		onNext: Function,
 		onPrevious: Function,
 		onLevelClick: Function
@@ -402,7 +413,40 @@ var CalendarHeader = (0, vue.defineComponent)({
 				"data-direction": "previous",
 				size: "45%"
 			})) : null;
-			const levelControl = (0, vue.h)(_mantine_vue_core.UnstyledButton, {
+			const displayed = props.date ? (0, dayjs.default)(props.date) : (0, dayjs.default)();
+			const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+			const rawMinYear = props.yearsSelectRange?.[0] ?? (props.minDate ? (0, dayjs.default)(props.minDate).year() : currentYear - 100);
+			const rawMaxYear = props.yearsSelectRange?.[1] ?? (props.maxDate ? (0, dayjs.default)(props.maxDate).year() : currentYear + 50);
+			const minYear = Math.min(rawMinYear, rawMaxYear, displayed.year());
+			const maxYear = Math.max(rawMinYear, rawMaxYear, displayed.year());
+			const updateNativeDate = (next) => {
+				let result = next;
+				if (props.minDate && result.isBefore((0, dayjs.default)(props.minDate), "day")) result = (0, dayjs.default)(props.minDate);
+				if (props.maxDate && result.isAfter((0, dayjs.default)(props.maxDate), "day")) result = (0, dayjs.default)(props.maxDate);
+				props.onDateChange?.(result.format("YYYY-MM-DD"));
+			};
+			const levelControl = (props.withNativeLevelSelect && props.date && props.onDateChange && props.calendarLevel !== "decade" ? (0, vue.h)("div", {
+				class: Dates_module_default.calendarHeaderLevel,
+				"data-static": true,
+				"data-native-level-select": true
+			}, [props.calendarLevel === "month" ? (0, vue.h)("select", {
+				class: Dates_module_default.calendarHeaderSelect,
+				"data-select": "month",
+				disabled: props.disableNativeLevelSelect,
+				value: displayed.month(),
+				"aria-label": props.levelControlAriaLabel,
+				onChange: (event) => updateNativeDate(displayed.month(Number(event.target.value)))
+			}, Array.from({ length: 12 }, (_, month) => (0, vue.h)("option", { value: month }, (0, dayjs.default)().locale(props.locale || "en").month(month).format("MMMM")))) : null, (0, vue.h)("select", {
+				class: Dates_module_default.calendarHeaderSelect,
+				"data-select": "year",
+				disabled: props.disableNativeLevelSelect,
+				value: displayed.year(),
+				"aria-label": props.levelControlAriaLabel,
+				onChange: (event) => updateNativeDate(displayed.year(Number(event.target.value)))
+			}, Array.from({ length: maxYear - minYear + 1 }, (_, index) => {
+				const year = minYear + index;
+				return (0, vue.h)("option", { value: year }, year);
+			}))]) : null) ?? (0, vue.h)(_mantine_vue_core.UnstyledButton, {
 				component: props.hasNextLevel ? "button" : "div",
 				class: Dates_module_default.calendarHeaderLevel,
 				onClick: props.hasNextLevel ? props.onLevelClick : void 0,
@@ -459,6 +503,7 @@ var WeekdaysRow = (0, vue.defineComponent)({
 });
 var Month = (0, vue.defineComponent)({
 	name: "Month",
+	slots: Object,
 	props: {
 		month: {
 			type: String,
@@ -497,7 +542,7 @@ var Month = (0, vue.defineComponent)({
 		static: Boolean,
 		fullWidth: Boolean
 	},
-	setup(props) {
+	setup(props, { slots }) {
 		const ctx = useDatesContext();
 		const hovered = (0, vue.ref)(null);
 		const dayRefs = [];
@@ -556,7 +601,7 @@ var Month = (0, vue.defineComponent)({
 					lastInRange: isSameDate(date, end),
 					highlightToday: props.highlightToday,
 					fullWidth: props.fullWidth,
-					renderDay: props.renderDay,
+					renderDay: props.renderDay ?? (slots.renderDay ?? slots.day ? (date) => (slots.renderDay ?? slots.day)?.({ date }) : void 0),
 					"aria-label": props.getDayAriaLabel?.(date),
 					tabindex: props.static ? void 0 : date === dateInTabOrder ? 0 : -1,
 					"data-autofocus": selected || void 0,
@@ -743,6 +788,7 @@ function clampLevel(level, minLevel, maxLevel) {
 }
 var Calendar = (0, vue.defineComponent)({
 	name: "Calendar",
+	slots: Object,
 	props: {
 		defaultLevel: String,
 		level: String,
@@ -814,9 +860,11 @@ var Calendar = (0, vue.defineComponent)({
 		highlightToday: Boolean,
 		withWeekNumbers: Boolean,
 		static: Boolean,
-		fullWidth: Boolean
+		fullWidth: Boolean,
+		withNativeLevelSelect: Boolean,
+		yearsSelectRange: Array
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		const [_level, setLevel] = (0, _mantine_vue_hooks.useUncontrolled)({
 			value: (0, vue.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),
@@ -849,6 +897,15 @@ var Calendar = (0, vue.defineComponent)({
 				withPrevious: column === 0,
 				withNext: column === (props.numberOfColumns || 1) - 1,
 				fullWidth: props.fullWidth,
+				withNativeLevelSelect: props.withNativeLevelSelect,
+				yearsSelectRange: props.yearsSelectRange,
+				calendarLevel: "month",
+				date: currentDate,
+				locale: props.locale,
+				onDateChange: setDate,
+				minDate: props.minDate,
+				maxDate: props.maxDate,
+				disableNativeLevelSelect: props.date !== void 0 && !props.onDateChange,
 				onPrevious: () => updateDate(-scroll, "month"),
 				onNext: () => updateDate(scroll, "month"),
 				onLevelClick: () => setLevel(getNextLevel(_level.value, "up"))
@@ -860,7 +917,7 @@ var Calendar = (0, vue.defineComponent)({
 				maxDate: props.maxDate,
 				firstDayOfWeek: props.firstDayOfWeek,
 				weekendDays: props.weekendDays,
-				renderDay: props.renderDay,
+				renderDay: props.renderDay ?? (slots.renderDay ?? slots.day ? (date) => (slots.renderDay ?? slots.day)?.({ date }) : void 0),
 				getDayProps: props.getDayProps,
 				getDayAriaLabel: props.getDayAriaLabel,
 				excludeDate: props.excludeDate,
@@ -879,6 +936,15 @@ var Calendar = (0, vue.defineComponent)({
 				withPrevious: column === 0,
 				withNext: column === (props.numberOfColumns || 1) - 1,
 				fullWidth: props.fullWidth,
+				withNativeLevelSelect: props.withNativeLevelSelect,
+				yearsSelectRange: props.yearsSelectRange,
+				calendarLevel: "year",
+				date: currentDate,
+				locale: props.locale,
+				onDateChange: setDate,
+				minDate: props.minDate,
+				maxDate: props.maxDate,
+				disableNativeLevelSelect: props.date !== void 0 && !props.onDateChange,
 				onPrevious: () => updateDate(-scroll, "year"),
 				onNext: () => updateDate(scroll, "year"),
 				onLevelClick: () => setLevel(getNextLevel(_level.value, "up"))
@@ -952,11 +1018,17 @@ function getNextPickerValue(value, date, type, sortDates = true) {
 }
 var DatePicker = (0, vue.defineComponent)({
 	name: "DatePicker",
+	slots: Object,
 	props: {
 		type: {
 			type: String,
 			default: "default"
 		},
+		modelValue: [
+			String,
+			Array,
+			null
+		],
 		value: [
 			String,
 			Array,
@@ -976,15 +1048,21 @@ var DatePicker = (0, vue.defineComponent)({
 			type: Boolean,
 			default: true
 		},
-		presets: Array
+		presets: Array,
+		withNativeLevelSelect: Boolean,
+		yearsSelectRange: Array
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
 		const finalValue = (0, vue.computed)(() => props.type === "multiple" ? [] : props.type === "range" ? [null, null] : null);
 		const [_value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: (0, vue.computed)(() => props.value),
+			value: (0, vue.computed)(() => props.modelValue !== void 0 ? props.modelValue : props.value),
 			defaultValue: props.defaultValue,
 			finalValue: finalValue.value,
-			onChange: (value) => props.onChange?.(value)
+			onChange: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
 		});
 		const selectDate = (date) => {
 			if (props.type === "default" && props.allowDeselect && isSameDate(_value.value, date)) setValue(null);
@@ -1009,7 +1087,12 @@ var DatePicker = (0, vue.defineComponent)({
 				onDateChange: (date) => calendarDate.value = date,
 				level: calendarLevel.value,
 				onLevelChange: (level) => calendarLevel.value = level,
+				withNativeLevelSelect: props.withNativeLevelSelect,
+				yearsSelectRange: props.yearsSelectRange,
 				onDayClick: selectDate
+			}, {
+				renderDay: slots.renderDay,
+				day: slots.day
 			});
 			if (!props.presets?.length) return calendar;
 			return (0, vue.h)("div", { class: Dates_module_default.datePickerRoot }, [(0, vue.h)("div", { class: Dates_module_default.presetsList }, props.presets.map((preset, index) => (0, vue.h)(_mantine_vue_core.UnstyledButton, {
@@ -1028,6 +1111,11 @@ var YearPicker = (0, vue.defineComponent)({
 			type: String,
 			default: "default"
 		},
+		modelValue: [
+			String,
+			Array,
+			null
+		],
 		value: [
 			String,
 			Array,
@@ -1048,15 +1136,21 @@ var YearPicker = (0, vue.defineComponent)({
 			default: true
 		},
 		presets: Array,
-		onYearSelect: Function
+		onYearSelect: Function,
+		withNativeLevelSelect: Boolean,
+		yearsSelectRange: Array
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		const finalValue = (0, vue.computed)(() => props.type === "multiple" ? [] : props.type === "range" ? [null, null] : null);
 		const [_value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: (0, vue.computed)(() => props.value),
+			value: (0, vue.computed)(() => props.modelValue !== void 0 ? props.modelValue : props.value),
 			defaultValue: props.defaultValue,
 			finalValue: finalValue.value,
-			onChange: (value) => props.onChange?.(value)
+			onChange: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
 		});
 		const hoveredDate = (0, vue.ref)(null);
 		const selectYear = (date) => {
@@ -1092,6 +1186,8 @@ var YearPicker = (0, vue.defineComponent)({
 				onDateChange: (date) => calendarDate.value = date,
 				defaultLevel: "decade",
 				minLevel: "decade",
+				withNativeLevelSelect: props.withNativeLevelSelect,
+				yearsSelectRange: props.yearsSelectRange,
 				onYearSelect: selectYear,
 				getYearControlProps: yearControlProps,
 				onYearMouseEnter: (date) => {
@@ -1119,6 +1215,11 @@ var MonthPicker = (0, vue.defineComponent)({
 			type: String,
 			default: "default"
 		},
+		modelValue: [
+			String,
+			Array,
+			null
+		],
 		value: [
 			String,
 			Array,
@@ -1139,15 +1240,21 @@ var MonthPicker = (0, vue.defineComponent)({
 			default: true
 		},
 		presets: Array,
-		onMonthSelect: Function
+		onMonthSelect: Function,
+		withNativeLevelSelect: Boolean,
+		yearsSelectRange: Array
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		const finalValue = (0, vue.computed)(() => props.type === "multiple" ? [] : props.type === "range" ? [null, null] : null);
 		const [_value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: (0, vue.computed)(() => props.value),
+			value: (0, vue.computed)(() => props.modelValue !== void 0 ? props.modelValue : props.value),
 			defaultValue: props.defaultValue,
 			finalValue: finalValue.value,
-			onChange: (value) => props.onChange?.(value)
+			onChange: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
 		});
 		const hoveredDate = (0, vue.ref)(null);
 		const selectMonth = (date) => {
@@ -1183,6 +1290,8 @@ var MonthPicker = (0, vue.defineComponent)({
 				onDateChange: (date) => calendarDate.value = date,
 				defaultLevel: "year",
 				minLevel: "year",
+				withNativeLevelSelect: props.withNativeLevelSelect,
+				yearsSelectRange: props.yearsSelectRange,
 				onMonthSelect: selectMonth,
 				getMonthControlProps: monthControlProps,
 				onMonthMouseEnter: (date) => {
@@ -1300,6 +1409,11 @@ function createPickerInput(name, Picker, defaultLevel, defaultValueFormat = "MMM
 				type: String,
 				default: "default"
 			},
+			modelValue: [
+				String,
+				Array,
+				null
+			],
 			value: [
 				String,
 				Array,
@@ -1336,15 +1450,21 @@ function createPickerInput(name, Picker, defaultLevel, defaultValueFormat = "MMM
 				type: Boolean,
 				default: true
 			},
-			valueFormatter: Function
+			valueFormatter: Function,
+			withNativeLevelSelect: Boolean,
+			yearsSelectRange: Array
 		},
-		setup(props, { attrs }) {
+		emits: ["update:modelValue", "change"],
+		setup(props, { attrs, emit }) {
 			const finalValue = (0, vue.computed)(() => props.type === "multiple" ? [] : props.type === "range" ? [null, null] : null);
 			const [_value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-				value: (0, vue.computed)(() => props.value),
+				value: (0, vue.computed)(() => props.modelValue !== void 0 ? props.modelValue : props.value),
 				defaultValue: props.defaultValue,
 				finalValue: finalValue.value,
-				onChange: (value) => props.onChange?.(value)
+				onChange: (value) => {
+					emit("update:modelValue", value);
+					emit("change", value);
+				}
 			});
 			const opened = (0, vue.ref)(false);
 			const formattedValue = (0, vue.computed)(() => formatValue(_value.value, props.type, props.valueFormat, props.locale, props.labelSeparator, props.valueFormatter));
@@ -1365,6 +1485,8 @@ function createPickerInput(name, Picker, defaultLevel, defaultValueFormat = "MMM
 				sortDates: props.sortDates,
 				defaultLevel,
 				locale: props.locale,
+				withNativeLevelSelect: props.withNativeLevelSelect,
+				yearsSelectRange: props.yearsSelectRange,
 				onChange: (value) => {
 					setValue(value);
 					if (props.closeOnChange && props.type === "default") close();
@@ -1408,6 +1530,11 @@ var DateInput = (0, vue.defineComponent)({
 	name: "DateInput",
 	inheritAttrs: false,
 	props: {
+		modelValue: [
+			String,
+			Date,
+			null
+		],
 		value: [
 			String,
 			Date,
@@ -1430,12 +1557,19 @@ var DateInput = (0, vue.defineComponent)({
 		maxDate: [String, Date],
 		presets: Array
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		const [_value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: (0, vue.computed)(() => props.value === void 0 ? void 0 : normalizeDate(props.value)),
+			value: (0, vue.computed)(() => {
+				const controlledValue = props.modelValue !== void 0 ? props.modelValue : props.value;
+				return controlledValue === void 0 ? void 0 : normalizeDate(controlledValue);
+			}),
 			defaultValue: normalizeDate(props.defaultValue),
 			finalValue: null,
-			onChange: (value) => props.onChange?.(value)
+			onChange: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
 		});
 		const formatValue = (value) => value ? (0, dayjs.default)(value).locale(props.locale || "en").format(props.valueFormat) : "";
 		const inputValue = (0, vue.ref)(formatValue(_value.value));
@@ -1607,18 +1741,22 @@ var TimeInput = (0, vue.defineComponent)({
 	name: "TimeInput",
 	props: {
 		withSeconds: Boolean,
+		modelValue: String,
 		value: String,
 		defaultValue: String,
 		onChange: Function
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		return () => (0, vue.h)(_mantine_vue_core.InputBase, {
 			...attrs,
 			type: "time",
 			step: props.withSeconds ? 1 : 60,
+			modelValue: props.modelValue,
 			value: props.value,
 			defaultValue: props.defaultValue,
-			onChange: props.onChange
+			"onUpdate:modelValue": (value) => emit("update:modelValue", value),
+			onChange: (value) => emit("change", value)
 		});
 	}
 });
@@ -1629,6 +1767,7 @@ var TimeGrid = (0, vue.defineComponent)({
 			type: Array,
 			default: () => []
 		},
+		modelValue: String,
 		value: String,
 		defaultValue: String,
 		minTime: String,
@@ -1638,12 +1777,16 @@ var TimeGrid = (0, vue.defineComponent)({
 		onChange: Function,
 		getControlProps: Function
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		const [_value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: (0, vue.computed)(() => props.value),
+			value: (0, vue.computed)(() => props.modelValue !== void 0 ? props.modelValue : props.value),
 			defaultValue: props.defaultValue,
 			finalValue: null,
-			onChange: (value) => props.onChange?.(value)
+			onChange: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
 		});
 		return () => (0, vue.h)(_mantine_vue_core.Box, {
 			...attrs,
@@ -1676,9 +1819,17 @@ var SpinInput = (0, vue.defineComponent)({
 	name: "SpinInput",
 	inheritAttrs: false,
 	props: {
+		modelValue: {
+			type: Number,
+			default: void 0
+		},
 		value: {
 			type: Number,
-			default: null
+			default: void 0
+		},
+		defaultValue: {
+			type: Number,
+			default: void 0
 		},
 		min: {
 			type: Number,
@@ -1704,8 +1855,19 @@ var SpinInput = (0, vue.defineComponent)({
 		disabled: Boolean,
 		readOnly: Boolean
 	},
-	setup(props, { attrs }) {
-		const maxDigit = () => Number(props.max.toFixed(0)[0]);
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
+		const [value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
+			value: (0, vue.computed)(() => props.modelValue !== void 0 ? props.modelValue : props.value),
+			defaultValue: props.defaultValue,
+			finalValue: null,
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
+		});
+		const finiteMax = () => Number.isFinite(props.max);
+		const maxDigit = () => finiteMax() ? Number(props.max.toFixed(0)[0]) : Infinity;
 		const arrowsMax = () => props.max + 1 - props.step;
 		const handleChange = (raw) => {
 			if (props.readOnly) return;
@@ -1715,10 +1877,10 @@ var SpinInput = (0, vue.defineComponent)({
 			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;
+				parsedValue = finiteMax() && 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);
+			const clampedValue = props.allowTemporaryZero && parsedValue === 0 && props.min > 0 ? 0 : finiteMax() ? Math.min(Math.max(parsedValue, props.min), props.max) : Math.max(parsedValue, props.min);
+			setValue(clampedValue);
 			if (!props.disableAutoAdvance && (clampedValue > maxDigit() || raw.startsWith("00"))) props.onNextInput?.();
 		};
 		const handleKeydown = (event) => {
@@ -1726,22 +1888,22 @@ var SpinInput = (0, vue.defineComponent)({
 			if (event.key === "0" || event.key === "Num0") {
 				const { selectionStart, selectionEnd, value: inputValue } = event.currentTarget;
 				const isEntireValueSelected = inputValue.length > 0 && selectionStart === 0 && selectionEnd === inputValue.length;
-				if (props.value === 0 && !isEntireValueSelected) {
+				if (value.value === 0 && !isEntireValueSelected) {
 					event.preventDefault();
 					props.onNextInput?.();
 				}
 			}
 			if (event.key === "Home") {
 				event.preventDefault();
-				props.onChange?.(props.min);
+				setValue(props.min);
 			}
 			if (event.key === "End") {
 				event.preventDefault();
-				props.onChange?.(props.max);
+				if (finiteMax()) setValue(props.max);
 			}
 			if (event.key === "Backspace" || event.key === "Delete") {
 				event.preventDefault();
-				if (props.value !== null) props.onChange?.(null);
+				if (value.value !== null) setValue(null);
 				else props.onPreviousInput?.();
 			}
 			if (event.key === "ArrowRight") {
@@ -1754,13 +1916,11 @@ var SpinInput = (0, vue.defineComponent)({
 			}
 			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);
+				setValue(value.value === null ? props.min : finiteMax() ? Math.min(Math.max(value.value + props.step, props.min), arrowsMax()) : Math.max(value.value + props.step, props.min));
 			}
 			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);
+				setValue(value.value === null ? finiteMax() ? arrowsMax() : props.min : Math.min(Math.max(value.value - props.step, props.min), arrowsMax()));
 			}
 		};
 		return () => (0, vue.h)("input", {
@@ -1768,14 +1928,14 @@ var SpinInput = (0, vue.defineComponent)({
 			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,
+			"aria-valuemax": finiteMax() ? props.max : void 0,
+			"aria-valuenow": value.value === null ? 0 : value.value,
+			"data-empty": value.value === null || void 0,
 			inputmode: "numeric",
 			placeholder: props.placeholder,
 			disabled: props.disabled,
 			readonly: props.readOnly,
-			value: props.value === null ? "" : padTime(props.value),
+			value: value.value === null ? "" : padTime(value.value),
 			onInput: (event) => handleChange(event.target.value),
 			onKeydown: handleKeydown,
 			onFocus: (event) => event.target.select(),
@@ -1790,9 +1950,17 @@ var SpinInput = (0, vue.defineComponent)({
 var AmPmInput = (0, vue.defineComponent)({
 	name: "AmPmInput",
 	props: {
+		modelValue: {
+			type: String,
+			default: void 0
+		},
 		value: {
 			type: String,
-			default: null
+			default: void 0
+		},
+		defaultValue: {
+			type: String,
+			default: void 0
 		},
 		labels: {
 			type: Object,
@@ -1802,14 +1970,24 @@ var AmPmInput = (0, vue.defineComponent)({
 		disabled: Boolean,
 		readOnly: Boolean
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
+		const [value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
+			value: (0, vue.computed)(() => props.modelValue !== void 0 ? props.modelValue : props.value),
+			defaultValue: props.defaultValue,
+			finalValue: null,
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
+		});
 		return () => (0, vue.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)
+			value: value.value ?? props.labels.am,
+			onChange: (event) => setValue(event.target.value)
 		}, [(0, vue.h)("option", { value: props.labels.am }, props.labels.am), (0, vue.h)("option", { value: props.labels.pm }, props.labels.pm)]);
 	}
 });
@@ -1847,9 +2025,14 @@ var TimeControlsList = (0, vue.defineComponent)({
 var TimePicker = (0, vue.defineComponent)({
 	name: "TimePicker",
 	props: {
+		modelValue: String,
 		value: String,
 		defaultValue: String,
 		onChange: Function,
+		type: {
+			type: String,
+			default: "time"
+		},
 		withSeconds: Boolean,
 		min: String,
 		max: String,
@@ -1885,16 +2068,21 @@ var TimePicker = (0, vue.defineComponent)({
 		closeDropdownOnPresetSelect: Boolean,
 		hoursRef: Object
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
+		const effectiveFormat = (0, vue.computed)(() => props.type === "duration" ? "24h" : props.format);
 		const [_value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: (0, vue.computed)(() => props.value),
+			value: (0, vue.computed)(() => props.modelValue !== void 0 ? props.modelValue : props.value),
 			defaultValue: props.defaultValue,
 			finalValue: "",
-			onChange: (value) => props.onChange?.(value)
+			onChange: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
 		});
 		const parsed = (0, vue.computed)(() => getParsedTime({
 			time: _value.value,
-			format: props.format,
+			format: effectiveFormat.value,
 			amPmLabels: props.amPmLabels
 		}));
 		const hours = (0, vue.ref)(parsed.value.hours);
@@ -1904,7 +2092,7 @@ var TimePicker = (0, vue.defineComponent)({
 		(0, vue.watch)(_value, (value) => {
 			const next = getParsedTime({
 				time: value,
-				format: props.format,
+				format: effectiveFormat.value,
 				amPmLabels: props.amPmLabels
 			});
 			hours.value = next.hours;
@@ -1930,7 +2118,7 @@ var TimePicker = (0, vue.defineComponent)({
 				hours: hours.value,
 				minutes: minutes.value,
 				seconds: seconds.value,
-				format: props.format,
+				format: effectiveFormat.value,
 				withSeconds: props.withSeconds,
 				amPm: amPm.value,
 				amPmLabels: props.amPmLabels
@@ -1939,7 +2127,7 @@ var TimePicker = (0, vue.defineComponent)({
 		};
 		const setHours = (value) => {
 			let adjusted = value;
-			if (props.format === "12h" && typeof value === "number" && value > 12) adjusted = (value - 1) % 12 + 1;
+			if (effectiveFormat.value === "12h" && typeof value === "number" && value > 12) adjusted = (value - 1) % 12 + 1;
 			hours.value = adjusted;
 			commit();
 			focus("hours");
@@ -1973,8 +2161,32 @@ var TimePicker = (0, vue.defineComponent)({
 			setValue(timeString);
 			if (props.closeDropdownOnPresetSelect) opened.value = false;
 		};
+		const handlePaste = (event) => {
+			if (props.readOnly || props.disabled) return;
+			const value = event.clipboardData?.getData("text").trim();
+			if (!value || !/^\d+:\d{2}(?::\d{2})?(?:\s+[aApP][mM])?$/.test(value)) return;
+			const next = getParsedTime({
+				time: value,
+				format: effectiveFormat.value,
+				amPmLabels: props.amPmLabels
+			});
+			if (next.hours === null || next.minutes === null || next.minutes > 59 || props.withSeconds && (next.seconds === null || next.seconds > 59) || props.type === "time" && effectiveFormat.value === "24h" && next.hours > 23) return;
+			event.preventDefault();
+			hours.value = next.hours;
+			minutes.value = next.minutes;
+			seconds.value = props.withSeconds ? next.seconds : null;
+			amPm.value = next.amPm;
+			const result = getTimeString({
+				...next,
+				seconds: props.withSeconds ? next.seconds : null,
+				format: effectiveFormat.value,
+				withSeconds: props.withSeconds,
+				amPmLabels: props.amPmLabels
+			});
+			if (result.valid) setValue(clampTime(result.value, props.min, props.max));
+		};
 		return () => (0, vue.h)(_mantine_vue_core.Popover, {
-			opened: props.withDropdown && opened.value,
+			opened: props.type !== "duration" && props.withDropdown && opened.value,
 			position: "bottom-start",
 			transitionProps: { duration: 0 }
 		}, () => [(0, vue.h)(_mantine_vue_core.Popover.Target, null, () => (0, vue.h)(_mantine_vue_core.InputBase, {
@@ -1984,11 +2196,11 @@ var TimePicker = (0, vue.defineComponent)({
 			disabled: props.disabled,
 			onClick: () => {
 				focus("hours");
-				if (props.withDropdown) opened.value = true;
+				if (props.type !== "duration" && props.withDropdown) opened.value = true;
 			},
 			onMousedown: (event) => event.preventDefault(),
 			onFocusin: () => {
-				if (props.withDropdown) opened.value = true;
+				if (props.type !== "duration" && props.withDropdown) opened.value = true;
 			},
 			onFocusout: () => {
 				if (props.withDropdown) opened.value = false;
@@ -2007,12 +2219,14 @@ var TimePicker = (0, vue.defineComponent)({
 				ref: hoursRef,
 				class: Dates_module_default.timePickerField,
 				value: hours.value,
-				min: props.format === "12h" ? 1 : 0,
-				max: props.format === "12h" ? 12 : 23,
+				min: effectiveFormat.value === "12h" ? 1 : 0,
+				max: props.type === "duration" ? Infinity : effectiveFormat.value === "12h" ? 12 : 23,
 				step: props.hoursStep,
 				onChange: setHours,
 				onNextInput: () => focus("minutes"),
-				allowTemporaryZero: props.format === "12h",
+				allowTemporaryZero: effectiveFormat.value === "12h",
+				disableAutoAdvance: props.type === "duration",
+				onPaste: handlePaste,
 				readOnly: props.readOnly,
 				disabled: props.disabled,
 				placeholder: "--"
@@ -2047,7 +2261,7 @@ var TimePicker = (0, vue.defineComponent)({
 				disabled: props.disabled,
 				placeholder: "--"
 			}) : null,
-			props.format === "12h" ? (0, vue.h)(AmPmInput, {
+			effectiveFormat.value === "12h" ? (0, vue.h)(AmPmInput, {
 				ref: amPmRef,
 				value: amPm.value,
 				labels: props.amPmLabels,
@@ -2067,8 +2281,8 @@ var TimePicker = (0, vue.defineComponent)({
 			onClick: () => handlePresetSelect(preset.value)
 		}, () => preset.label))) : (0, vue.h)("div", { class: Dates_module_default.timePickerControlsListGroup }, [
 			(0, vue.h)(TimeControlsList, {
-				min: props.format === "12h" ? 1 : 0,
-				max: props.format === "12h" ? 12 : 23,
+				min: effectiveFormat.value === "12h" ? 1 : 0,
+				max: effectiveFormat.value === "12h" ? 12 : 23,
 				step: props.hoursStep,
 				value: hours.value,
 				onSelect: setHours
@@ -2110,6 +2324,11 @@ var TimeValue = (0, vue.defineComponent)({
 var DateTimePicker = (0, vue.defineComponent)({
 	name: "DateTimePicker",
 	props: {
+		modelValue: [
+			String,
+			Date,
+			null
+		],
 		value: [
 			String,
 			Date,
@@ -2133,13 +2352,20 @@ var DateTimePicker = (0, vue.defineComponent)({
 		},
 		submitButtonProps: Object
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		const hoursRef = (0, vue.ref)();
 		const [_value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: (0, vue.computed)(() => props.value === void 0 ? void 0 : props.value === null ? null : new Date(props.value)),
+			value: (0, vue.computed)(() => {
+				const controlledValue = props.modelValue !== void 0 ? props.modelValue : props.value;
+				return controlledValue === void 0 ? void 0 : controlledValue === null ? null : new Date(controlledValue);
+			}),
 			defaultValue: props.defaultValue ? new Date(props.defaultValue) : null,
 			finalValue: null,
-			onChange: (value) => props.onChange?.(value)
+			onChange: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
 		});
 		const date = (0, vue.computed)(() => _value.value ? (0, dayjs.default)(_value.value).format("YYYY-MM-DD") : null);
 		const time = (0, vue.computed)(() => _value.value ? (0, dayjs.default)(_value.value).format(props.withSeconds ? "HH:mm:ss" : "HH:mm") : "");
@@ -2185,11 +2411,21 @@ var MiniCalendar = (0, vue.defineComponent)({
 		date: [String, Date],
 		defaultDate: [String, Date],
 		onDateChange: Function,
+		modelValue: [
+			String,
+			Date,
+			null
+		],
 		value: [
 			String,
 			Date,
 			null
 		],
+		defaultValue: [
+			String,
+			Date,
+			null
+		],
 		onChange: Function,
 		maxDate: [String, Date],
 		minDate: [String, Date],
@@ -2212,12 +2448,25 @@ var MiniCalendar = (0, vue.defineComponent)({
 		nextControlProps: Object,
 		locale: String
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		const ctx = useDatesContext();
+		const [value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
+			value: (0, vue.computed)(() => {
+				const controlledValue = props.modelValue !== void 0 ? props.modelValue : props.value;
+				return controlledValue === void 0 ? void 0 : toDateString(controlledValue);
+			}),
+			defaultValue: toDateString(props.defaultValue ?? null),
+			finalValue: null,
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
+		});
 		const [_date, setDate] = (0, _mantine_vue_hooks.useUncontrolled)({
 			value: (0, vue.computed)(() => toDateString(props.date ?? null) ?? void 0),
 			defaultValue: toDateString(props.defaultDate ?? null) ?? void 0,
-			finalValue: toDateString(props.value ?? null) || (0, dayjs.default)().format("YYYY-MM-DD"),
+			finalValue: value.value || (0, dayjs.default)().format("YYYY-MM-DD"),
 			onChange: (value) => props.onDateChange?.(value)
 		});
 		const handleNext = () => {
@@ -2239,12 +2488,12 @@ var MiniCalendar = (0, vue.defineComponent)({
 					disabled,
 					"aria-label": date.format("YYYY-MM-DD"),
 					"data-disabled": disabled || void 0,
-					"data-selected": props.value && (0, dayjs.default)(date).isSame(props.value, "day") || void 0,
+					"data-selected": value.value && (0, dayjs.default)(date).isSame(value.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")));
+						setValue(toDateString(date.format("YYYY-MM-DD")));
 					}
 				}, () => [(0, vue.h)("span", { class: Dates_module_default.miniCalendarDayMonth }, date.locale(props.locale || ctx.locale).format(props.monthLabelFormat)), (0, vue.h)("span", { class: Dates_module_default.miniCalendarDayNumber }, String(date.date()))]);
 			});