@mantine-vue/dates 2.3.0 → 2.4.0

package/esm/index.mjs

@@ -4,44 +4,45 @@ 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"
+	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
@@ -242,6 +243,7 @@ function getDecadeLabel(date) {
 var Day = defineComponent({
 	name: "Day",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		date: {
 			type: String,
@@ -276,7 +278,7 @@ var Day = defineComponent({
 		},
 		unstyled: Boolean
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		return () => h(UnstyledButton, {
 			...attrs,
 			component: props.static ? "div" : "button",
@@ -295,7 +297,7 @@ var Day = 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) || dayjs(props.date).date());
+		}, () => (props.renderDay ? props.renderDay(props.date) : (slots.renderDay ?? slots.day)?.({ date: props.date })) || dayjs(props.date).date());
 	}
 });
 var PickerControl = defineComponent({
@@ -359,6 +361,15 @@ var CalendarHeader = 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
@@ -377,7 +388,40 @@ var CalendarHeader = defineComponent({
 				"data-direction": "previous",
 				size: "45%"
 			})) : null;
-			const levelControl = h(UnstyledButton, {
+			const displayed = props.date ? dayjs(props.date) : dayjs();
+			const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+			const rawMinYear = props.yearsSelectRange?.[0] ?? (props.minDate ? dayjs(props.minDate).year() : currentYear - 100);
+			const rawMaxYear = props.yearsSelectRange?.[1] ?? (props.maxDate ? dayjs(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(dayjs(props.minDate), "day")) result = dayjs(props.minDate);
+				if (props.maxDate && result.isAfter(dayjs(props.maxDate), "day")) result = dayjs(props.maxDate);
+				props.onDateChange?.(result.format("YYYY-MM-DD"));
+			};
+			const levelControl = (props.withNativeLevelSelect && props.date && props.onDateChange && props.calendarLevel !== "decade" ? h("div", {
+				class: Dates_module_default.calendarHeaderLevel,
+				"data-static": true,
+				"data-native-level-select": true
+			}, [props.calendarLevel === "month" ? 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) => h("option", { value: month }, dayjs().locale(props.locale || "en").month(month).format("MMMM")))) : null, 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 h("option", { value: year }, year);
+			}))]) : null) ?? h(UnstyledButton, {
 				component: props.hasNextLevel ? "button" : "div",
 				class: Dates_module_default.calendarHeaderLevel,
 				onClick: props.hasNextLevel ? props.onLevelClick : void 0,
@@ -434,6 +478,7 @@ var WeekdaysRow = defineComponent({
 });
 var Month = defineComponent({
 	name: "Month",
+	slots: Object,
 	props: {
 		month: {
 			type: String,
@@ -472,7 +517,7 @@ var Month = defineComponent({
 		static: Boolean,
 		fullWidth: Boolean
 	},
-	setup(props) {
+	setup(props, { slots }) {
 		const ctx = useDatesContext();
 		const hovered = ref(null);
 		const dayRefs = [];
@@ -531,7 +576,7 @@ var Month = 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,
@@ -718,6 +763,7 @@ function clampLevel(level, minLevel, maxLevel) {
 }
 var Calendar = defineComponent({
 	name: "Calendar",
+	slots: Object,
 	props: {
 		defaultLevel: String,
 		level: String,
@@ -789,9 +835,11 @@ var Calendar = 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] = 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),
@@ -824,6 +872,15 @@ var Calendar = 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"))
@@ -835,7 +892,7 @@ var Calendar = 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,
@@ -854,6 +911,15 @@ var Calendar = 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"))
@@ -927,6 +993,7 @@ function getNextPickerValue(value, date, type, sortDates = true) {
 }
 var DatePicker = defineComponent({
 	name: "DatePicker",
+	slots: Object,
 	props: {
 		type: {
 			type: String,
@@ -951,9 +1018,11 @@ var DatePicker = defineComponent({
 			type: Boolean,
 			default: true
 		},
-		presets: Array
+		presets: Array,
+		withNativeLevelSelect: Boolean,
+		yearsSelectRange: Array
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		const finalValue = computed(() => props.type === "multiple" ? [] : props.type === "range" ? [null, null] : null);
 		const [_value, setValue] = useUncontrolled({
 			value: computed(() => props.value),
@@ -984,7 +1053,12 @@ var DatePicker = 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 h("div", { class: Dates_module_default.datePickerRoot }, [h("div", { class: Dates_module_default.presetsList }, props.presets.map((preset, index) => h(UnstyledButton, {
@@ -1023,7 +1097,9 @@ var YearPicker = defineComponent({
 			default: true
 		},
 		presets: Array,
-		onYearSelect: Function
+		onYearSelect: Function,
+		withNativeLevelSelect: Boolean,
+		yearsSelectRange: Array
 	},
 	setup(props, { attrs }) {
 		const finalValue = computed(() => props.type === "multiple" ? [] : props.type === "range" ? [null, null] : null);
@@ -1067,6 +1143,8 @@ var YearPicker = defineComponent({
 				onDateChange: (date) => calendarDate.value = date,
 				defaultLevel: "decade",
 				minLevel: "decade",
+				withNativeLevelSelect: props.withNativeLevelSelect,
+				yearsSelectRange: props.yearsSelectRange,
 				onYearSelect: selectYear,
 				getYearControlProps: yearControlProps,
 				onYearMouseEnter: (date) => {
@@ -1114,7 +1192,9 @@ var MonthPicker = defineComponent({
 			default: true
 		},
 		presets: Array,
-		onMonthSelect: Function
+		onMonthSelect: Function,
+		withNativeLevelSelect: Boolean,
+		yearsSelectRange: Array
 	},
 	setup(props, { attrs }) {
 		const finalValue = computed(() => props.type === "multiple" ? [] : props.type === "range" ? [null, null] : null);
@@ -1158,6 +1238,8 @@ var MonthPicker = defineComponent({
 				onDateChange: (date) => calendarDate.value = date,
 				defaultLevel: "year",
 				minLevel: "year",
+				withNativeLevelSelect: props.withNativeLevelSelect,
+				yearsSelectRange: props.yearsSelectRange,
 				onMonthSelect: selectMonth,
 				getMonthControlProps: monthControlProps,
 				onMonthMouseEnter: (date) => {
@@ -1311,7 +1393,9 @@ function createPickerInput(name, Picker, defaultLevel, defaultValueFormat = "MMM
 				type: Boolean,
 				default: true
 			},
-			valueFormatter: Function
+			valueFormatter: Function,
+			withNativeLevelSelect: Boolean,
+			yearsSelectRange: Array
 		},
 		setup(props, { attrs }) {
 			const finalValue = computed(() => props.type === "multiple" ? [] : props.type === "range" ? [null, null] : null);
@@ -1340,6 +1424,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();
@@ -1680,7 +1766,8 @@ var SpinInput = defineComponent({
 		readOnly: Boolean
 	},
 	setup(props, { attrs }) {
-		const maxDigit = () => Number(props.max.toFixed(0)[0]);
+		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;
@@ -1690,9 +1777,9 @@ var SpinInput = 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);
+			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);
 			props.onChange?.(clampedValue);
 			if (!props.disableAutoAdvance && (clampedValue > maxDigit() || raw.startsWith("00"))) props.onNextInput?.();
 		};
@@ -1712,7 +1799,7 @@ var SpinInput = defineComponent({
 			}
 			if (event.key === "End") {
 				event.preventDefault();
-				props.onChange?.(props.max);
+				if (finiteMax()) props.onChange?.(props.max);
 			}
 			if (event.key === "Backspace" || event.key === "Delete") {
 				event.preventDefault();
@@ -1729,12 +1816,12 @@ var SpinInput = 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());
+				const newValue = props.value === null ? props.min : finiteMax() ? Math.min(Math.max(props.value + props.step, props.min), arrowsMax()) : Math.max(props.value + props.step, props.min);
 				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());
+				const newValue = props.value === null ? finiteMax() ? arrowsMax() : props.min : Math.min(Math.max(props.value - props.step, props.min), arrowsMax());
 				props.onChange?.(newValue);
 			}
 		};
@@ -1743,7 +1830,7 @@ var SpinInput = defineComponent({
 			type: "text",
 			role: "spinbutton",
 			"aria-valuemin": props.min,
-			"aria-valuemax": props.max,
+			"aria-valuemax": finiteMax() ? props.max : void 0,
 			"aria-valuenow": props.value === null ? 0 : props.value,
 			"data-empty": props.value === null || void 0,
 			inputmode: "numeric",
@@ -1825,6 +1912,10 @@ var TimePicker = defineComponent({
 		value: String,
 		defaultValue: String,
 		onChange: Function,
+		type: {
+			type: String,
+			default: "time"
+		},
 		withSeconds: Boolean,
 		min: String,
 		max: String,
@@ -1861,6 +1952,7 @@ var TimePicker = defineComponent({
 		hoursRef: Object
 	},
 	setup(props, { attrs }) {
+		const effectiveFormat = computed(() => props.type === "duration" ? "24h" : props.format);
 		const [_value, setValue] = useUncontrolled({
 			value: computed(() => props.value),
 			defaultValue: props.defaultValue,
@@ -1869,7 +1961,7 @@ var TimePicker = defineComponent({
 		});
 		const parsed = computed(() => getParsedTime({
 			time: _value.value,
-			format: props.format,
+			format: effectiveFormat.value,
 			amPmLabels: props.amPmLabels
 		}));
 		const hours = ref(parsed.value.hours);
@@ -1879,7 +1971,7 @@ var TimePicker = defineComponent({
 		watch(_value, (value) => {
 			const next = getParsedTime({
 				time: value,
-				format: props.format,
+				format: effectiveFormat.value,
 				amPmLabels: props.amPmLabels
 			});
 			hours.value = next.hours;
@@ -1905,7 +1997,7 @@ var TimePicker = 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
@@ -1914,7 +2006,7 @@ var TimePicker = 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");
@@ -1948,8 +2040,32 @@ var TimePicker = 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 () => h(Popover, {
-			opened: props.withDropdown && opened.value,
+			opened: props.type !== "duration" && props.withDropdown && opened.value,
 			position: "bottom-start",
 			transitionProps: { duration: 0 }
 		}, () => [h(Popover.Target, null, () => h(InputBase, {
@@ -1959,11 +2075,11 @@ var TimePicker = 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;
@@ -1982,12 +2098,14 @@ var TimePicker = 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: "--"
@@ -2022,7 +2140,7 @@ var TimePicker = defineComponent({
 				disabled: props.disabled,
 				placeholder: "--"
 			}) : null,
-			props.format === "12h" ? h(AmPmInput, {
+			effectiveFormat.value === "12h" ? h(AmPmInput, {
 				ref: amPmRef,
 				value: amPm.value,
 				labels: props.amPmLabels,
@@ -2042,8 +2160,8 @@ var TimePicker = defineComponent({
 			onClick: () => handlePresetSelect(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,
+				min: effectiveFormat.value === "12h" ? 1 : 0,
+				max: effectiveFormat.value === "12h" ? 12 : 23,
 				step: props.hoursStep,
 				value: hours.value,
 				onSelect: setHours