From 871672d8bf8e4e16f806014cb25ee6b57281cb61 Mon Sep 17 00:00:00 2001
From: Truman Gao <106889354+tdgao@users.noreply.github.com>
Date: Thu, 7 May 2026 07:22:48 -0600
Subject: [PATCH] feat: date picker component (#6010)

* feat: date picker component

* fix: month and year input padding

* fix: chevron padding issue

* feat: more padding/style fixes

* feat: implement header disabled state for min/max dates

* feat: implement dragging on start/end dates to move dates

* feat: improve selected range styles

* fix: type error

* fix: time input problems

* feat: implement 2 calendar view

* fix: white bg when dragging on a normal day

* fix: selected date background incorrectly applied

* prepr

---------

Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>
---
 packages/ui/package.json                      |    1 +
 .../ui/src/components/base/DatePicker.vue     | 1050 +++++++++++++++++
 packages/ui/src/components/base/index.ts      |    1 +
 .../ui/src/stories/base/DatePicker.stories.ts |  278 +++++
 pnpm-lock.yaml                                |  245 +---
 5 files changed, 1348 insertions(+), 227 deletions(-)
 create mode 100644 packages/ui/src/components/base/DatePicker.vue
 create mode 100644 packages/ui/src/stories/base/DatePicker.stories.ts

diff --git a/packages/ui/package.json b/packages/ui/package.json
index c224340a6..21b0d1af3 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -76,6 +76,7 @@
 		"dayjs": "^1.11.10",
 		"dompurify": "^3.1.7",
 		"es-toolkit": "^1.44.0",
+		"flatpickr": "^4.6.13",
 		"floating-vue": "^5.2.2",
 		"fuse.js": "^6.6.2",
 		"highlight.js": "^11.9.0",
diff --git a/packages/ui/src/components/base/DatePicker.vue b/packages/ui/src/components/base/DatePicker.vue
new file mode 100644
index 000000000..435459769
--- /dev/null
+++ b/packages/ui/src/components/base/DatePicker.vue
@@ -0,0 +1,1050 @@
+<template>
+	<div
+		class="modrinth-date-picker relative inline-flex items-center"
+		:class="[
+			wrapperClass,
+			disabled ? 'cursor-not-allowed opacity-50' : '',
+			showToday ? 'show-today' : '',
+			props.mode === 'range' && selectedDates.length === 2 ? 'can-drag-range' : '',
+			rangeDragState ? 'is-dragging-range' : '',
+		]"
+	>
+		<CalendarIcon
+			v-if="showIcon"
+			class="pointer-events-none absolute left-3 z-[1] h-5 w-5 text-secondary opacity-60 transition-colors"
+			aria-hidden="true"
+		/>
+		<input
+			:id="id"
+			ref="inputRef"
+			:name="name"
+			:placeholder="placeholder"
+			:disabled="disabled"
+			:readonly="readonly"
+			:autocomplete="autocomplete"
+			:class="inputClasses"
+			type="text"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import 'flatpickr/dist/flatpickr.css'
+
+import { CalendarIcon } from '@modrinth/assets'
+import chevronLeftIcon from '@modrinth/assets/icons/chevron-left.svg?raw'
+import chevronRightIcon from '@modrinth/assets/icons/chevron-right.svg?raw'
+import flatpickr from 'flatpickr'
+import type { Instance } from 'flatpickr/dist/types/instance'
+import type { Options } from 'flatpickr/dist/types/options'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+type DatePickerValue = string | Date | null | undefined
+type RangeEdge = 'start' | 'end'
+type RangeDayElement = HTMLElement & { dateObj?: Date }
+type RangeDragState = {
+	edge: RangeEdge
+	anchorDate: Date
+	draggedEndpointDate: Date
+	pointerId: number
+	lastDateTime: number
+}
+
+const model = defineModel<DatePickerValue | DatePickerValue[]>()
+
+const props = withDefaults(
+	defineProps<{
+		id?: string
+		name?: string
+		placeholder?: string
+		autocomplete?: string
+		disabled?: boolean
+		readonly?: boolean
+		enableTime?: boolean
+		mode?: 'single' | 'multiple' | 'range'
+		showMonths?: number
+		minDate?: string | Date
+		maxDate?: string | Date
+		/**
+		 * The date the calendar opens to when no value is selected. Does not set
+		 * the value — only controls which month/year is shown when the picker
+		 * first opens (and on subsequent opens while the value is empty).
+		 */
+		defaultViewDate?: string | Date
+		/**
+		 * The stored value format emitted by v-model. See https://flatpickr.js.org/formatting/
+		 *
+		 * Examples:
+		 * - `Y-m-d` renders as `2026-04-27`
+		 * - `Y-m-d H:i` renders as `2026-04-27 14:30`
+		 */
+		dateFormat?: string
+		/**
+		 * The human-friendly format shown in the visible input. See https://flatpickr.js.org/formatting/
+		 *
+		 * Examples:
+		 * - `F j, Y` renders as `April 27, 2026`
+		 * - `F j, Y at h:i K` renders as `April 27, 2026 at 02:30 PM`
+		 */
+		altFormat?: string
+		time24hr?: boolean
+		clearable?: boolean
+		showIcon?: boolean
+		showToday?: boolean
+		/**
+		 * When true (single mode only), navigating between months/years preserves the
+		 * originally selected day number. If the target month has fewer days, the day
+		 * is clamped to the last valid day, and a `clamp` event is emitted with the
+		 * intended and resolved days. Navigating back to a month that supports the
+		 * original day snaps the selection back.
+		 */
+		preserveDay?: boolean
+		wrapperClass?: string
+		inputClass?: string
+	}>(),
+	{
+		disabled: false,
+		readonly: false,
+		enableTime: false,
+		mode: 'single',
+		showMonths: 1,
+		time24hr: false,
+		clearable: true,
+		showIcon: true,
+		showToday: false,
+		preserveDay: false,
+	},
+)
+
+const emit = defineEmits<{
+	change: [value: DatePickerValue | DatePickerValue[]]
+	clear: []
+	clamp: [intendedDay: number, resolvedDay: number]
+}>()
+
+const inputRef = ref<HTMLInputElement>()
+const picker = ref<Instance>()
+const isSyncingFromModel = ref(false)
+const intendedViewMonth = ref<{ month: number; year: number } | null>(null)
+const intendedDay = ref<number | null>(null)
+const isPreservingDay = ref(false)
+const rangeDragState = ref<RangeDragState | null>(null)
+const suppressNextRangeClick = ref(false)
+let rangeClickSuppressionTimeout: number | null = null
+
+function getDayFromDateStr(dateStr: string): number | null {
+	const parts = dateStr.split('-')
+	if (parts.length < 3) return null
+	const day = Number.parseInt(parts[2], 10)
+	return Number.isInteger(day) ? day : null
+}
+
+function daysInMonth(month: number, year: number): number {
+	return new Date(year, month + 1, 0).getDate()
+}
+
+function applyPreserveDay(instance: Instance) {
+	if (!props.preserveDay) return
+	if (props.mode !== 'single') return
+	if (intendedDay.value === null) return
+
+	const selected = instance.selectedDates[0]
+	if (!selected) return
+
+	if (
+		selected.getMonth() === instance.currentMonth &&
+		selected.getFullYear() === instance.currentYear
+	) {
+		return
+	}
+
+	const maxDay = daysInMonth(instance.currentMonth, instance.currentYear)
+	const resolvedDay = Math.min(intendedDay.value, maxDay)
+	const newDate = new Date(instance.currentYear, instance.currentMonth, resolvedDay)
+
+	emit('clamp', intendedDay.value, resolvedDay)
+
+	isPreservingDay.value = true
+	instance.setDate(newDate, true)
+	nextTick(() => {
+		isPreservingDay.value = false
+	})
+}
+
+function syncHeaderControlState(instance: Instance) {
+	const prevDisabled = instance.prevMonthNav.classList.contains('flatpickr-disabled')
+	const nextDisabled = instance.nextMonthNav.classList.contains('flatpickr-disabled')
+
+	instance.prevMonthNav.setAttribute('aria-disabled', String(prevDisabled))
+	instance.nextMonthNav.setAttribute('aria-disabled', String(nextDisabled))
+
+	if (instance.monthsDropdownContainer) {
+		const monthSelectDisabled = instance.monthsDropdownContainer.options.length <= 1
+		instance.monthsDropdownContainer.disabled = monthSelectDisabled
+		instance.monthsDropdownContainer.setAttribute('aria-disabled', String(monthSelectDisabled))
+	}
+}
+
+function getRangeDayElement(target: EventTarget | null): RangeDayElement | null {
+	if (!(target instanceof Element)) return null
+	return target.closest<RangeDayElement>('.flatpickr-day')
+}
+
+function isSelectableDay(dayElem: RangeDayElement) {
+	return (
+		Boolean(dayElem.dateObj) &&
+		!dayElem.classList.contains('flatpickr-disabled') &&
+		!dayElem.classList.contains('hidden')
+	)
+}
+
+function getRangeEdge(dayElem: RangeDayElement): RangeEdge | null {
+	if (props.mode !== 'range') return null
+	if (picker.value?.selectedDates.length !== 2) return null
+	if (!isSelectableDay(dayElem)) return null
+	if (dayElem.classList.contains('startRange') && !dayElem.classList.contains('endRange')) {
+		return 'start'
+	}
+	if (dayElem.classList.contains('endRange') && !dayElem.classList.contains('startRange')) {
+		return 'end'
+	}
+	return null
+}
+
+function dateTime(date: Date) {
+	return date.getTime()
+}
+
+function dateOnlyTime(date: Date) {
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime()
+}
+
+function withEndpointTime(date: Date, endpoint: Date) {
+	return new Date(
+		date.getFullYear(),
+		date.getMonth(),
+		date.getDate(),
+		endpoint.getHours(),
+		endpoint.getMinutes(),
+		endpoint.getSeconds(),
+		endpoint.getMilliseconds(),
+	)
+}
+
+function clearRangeClickSuppressionTimeout() {
+	if (rangeClickSuppressionTimeout === null) return
+
+	window.clearTimeout(rangeClickSuppressionTimeout)
+	rangeClickSuppressionTimeout = null
+}
+
+function clearRangeClickSuppressionSoon() {
+	clearRangeClickSuppressionTimeout()
+	rangeClickSuppressionTimeout = window.setTimeout(() => {
+		suppressNextRangeClick.value = false
+		rangeClickSuppressionTimeout = null
+	}, 50)
+}
+
+function startRangeDrag(event: PointerEvent) {
+	if (event.button !== 0) return
+
+	const instance = picker.value
+	const dayElem = getRangeDayElement(event.target)
+	if (!instance || !dayElem) return
+
+	const edge = getRangeEdge(dayElem)
+	if (!edge) return
+
+	const [startDate, endDate] = instance.selectedDates
+	if (!startDate || !endDate) return
+
+	const draggedEndpointDate = new Date(edge === 'start' ? startDate : endDate)
+	rangeDragState.value = {
+		edge,
+		anchorDate: new Date(edge === 'start' ? endDate : startDate),
+		draggedEndpointDate,
+		pointerId: event.pointerId,
+		lastDateTime: dateTime(draggedEndpointDate),
+	}
+	clearRangeClickSuppressionTimeout()
+	suppressNextRangeClick.value = true
+
+	document.addEventListener('pointermove', updateRangeDrag, true)
+	document.addEventListener('pointerup', stopRangeDrag, true)
+	document.addEventListener('pointercancel', stopRangeDrag, true)
+
+	event.preventDefault()
+	event.stopImmediatePropagation()
+}
+
+function updateRangeDrag(event: PointerEvent) {
+	const state = rangeDragState.value
+	const instance = picker.value
+	if (!state || !instance || event.pointerId !== state.pointerId) return
+
+	const target = document.elementFromPoint(event.clientX, event.clientY)
+	const dayElem = getRangeDayElement(target)
+	if (!dayElem || !instance.calendarContainer.contains(dayElem) || !isSelectableDay(dayElem)) return
+
+	const draggedDate = withEndpointTime(dayElem.dateObj!, state.draggedEndpointDate)
+	let nextStartDate = state.edge === 'start' ? draggedDate : state.anchorDate
+	let nextEndDate = state.edge === 'end' ? draggedDate : state.anchorDate
+
+	if (state.edge === 'start' && dateOnlyTime(nextStartDate) > dateOnlyTime(state.anchorDate)) {
+		nextStartDate = state.anchorDate
+	} else if (state.edge === 'end' && dateOnlyTime(nextEndDate) < dateOnlyTime(state.anchorDate)) {
+		nextEndDate = state.anchorDate
+	}
+
+	const nextDraggedTime = dateTime(state.edge === 'start' ? nextStartDate : nextEndDate)
+	if (nextDraggedTime === state.lastDateTime) return
+
+	intendedViewMonth.value = {
+		month: instance.currentMonth,
+		year: instance.currentYear,
+	}
+
+	state.lastDateTime = nextDraggedTime
+	instance.setDate([nextStartDate, nextEndDate], true)
+	syncHeaderControlState(instance)
+
+	event.preventDefault()
+	event.stopImmediatePropagation()
+}
+
+function stopRangeDrag(event: PointerEvent) {
+	const state = rangeDragState.value
+	if (!state || event.pointerId !== state.pointerId) return
+
+	const instance = picker.value
+	rangeDragState.value = null
+	document.removeEventListener('pointermove', updateRangeDrag, true)
+	document.removeEventListener('pointerup', stopRangeDrag, true)
+	document.removeEventListener('pointercancel', stopRangeDrag, true)
+	clearRangeClickSuppressionSoon()
+
+	if (
+		document.activeElement instanceof HTMLElement &&
+		instance?.calendarContainer.contains(document.activeElement)
+	) {
+		document.activeElement.blur()
+	}
+
+	event.preventDefault()
+	event.stopImmediatePropagation()
+}
+
+function stopRangeEndpointMouseEvent(event: MouseEvent) {
+	if (rangeDragState.value || suppressNextRangeClick.value) {
+		event.preventDefault()
+		event.stopImmediatePropagation()
+	}
+}
+
+function suppressRangeDragClick(event: MouseEvent) {
+	if (!suppressNextRangeClick.value) return
+
+	clearRangeClickSuppressionTimeout()
+	suppressNextRangeClick.value = false
+	event.preventDefault()
+	event.stopImmediatePropagation()
+}
+
+function hasRangeEnd(instance: Instance) {
+	return (
+		instance.selectedDates.length === 2 ||
+		Boolean(instance.calendarContainer.querySelector('.flatpickr-day.endRange:not(.startRange)'))
+	)
+}
+
+function shouldSuppressMissingRangeEndBackground(instance?: Instance) {
+	if (props.mode !== 'range' || !instance) return false
+
+	const hasRangeStart = Boolean(
+		instance.calendarContainer.querySelector('.flatpickr-day.startRange:not(.endRange)'),
+	)
+
+	return hasRangeStart && !hasRangeEnd(instance)
+}
+
+function syncMissingRangeEndState() {
+	const instance = picker.value
+
+	instance?.calendarContainer.classList.toggle(
+		'is-missing-range-end',
+		shouldSuppressMissingRangeEndBackground(instance),
+	)
+}
+
+function isTimeInput(target: EventTarget | null): target is HTMLInputElement {
+	return (
+		target instanceof HTMLInputElement &&
+		target.matches('input.flatpickr-hour, input.flatpickr-minute, input.flatpickr-second')
+	)
+}
+
+function getTimeInputFromArrow(target: EventTarget | null): HTMLInputElement | null {
+	if (!(target instanceof Element)) return null
+	if (!target.classList.contains('arrowUp') && !target.classList.contains('arrowDown')) return null
+
+	return target.closest('.numInputWrapper')?.querySelector<HTMLInputElement>('input') ?? null
+}
+
+function getTimeInputDigits(value: string) {
+	return value.replace(/\D/g, '').slice(0, 2)
+}
+
+function sanitizeTimeInputValue(input: HTMLInputElement) {
+	const nextValue = getTimeInputDigits(input.value)
+	if (input.value === nextValue) return
+
+	const cursorPosition = input.selectionStart ?? nextValue.length
+	const removedBeforeCursor =
+		input.value.slice(0, cursorPosition).length -
+		getTimeInputDigits(input.value.slice(0, cursorPosition)).length
+	const nextCursorPosition = Math.max(0, cursorPosition - removedBeforeCursor)
+
+	input.value = nextValue
+	input.setSelectionRange(nextCursorPosition, nextCursorPosition)
+}
+
+function normalizeTimeInputValue(input: HTMLInputElement) {
+	sanitizeTimeInputValue(input)
+	if (input.value.length === 2) return
+
+	const minValue = Number.parseInt(input.min, 10)
+	const maxValue = Number.parseInt(input.max, 10)
+	const parsedValue = Number.parseInt(input.value, 10)
+	const fallbackValue = Number.isFinite(minValue) ? minValue : 0
+	let nextValue = Number.isFinite(parsedValue) ? parsedValue : fallbackValue
+
+	if (Number.isFinite(minValue)) nextValue = Math.max(nextValue, minValue)
+	if (Number.isFinite(maxValue)) nextValue = Math.min(nextValue, maxValue)
+
+	input.value = String(nextValue).padStart(2, '0')
+}
+
+function normalizeTimeInputForArrowIncrement(event: MouseEvent) {
+	const input = getTimeInputFromArrow(event.target)
+	if (input && isTimeInput(input)) normalizeTimeInputValue(input)
+}
+
+function normalizeTimeInputForKeyboardIncrement(event: KeyboardEvent) {
+	if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return
+	if (isTimeInput(event.target)) normalizeTimeInputValue(event.target)
+}
+
+function preventNonNumericTimeInput(event: InputEvent) {
+	if (!isTimeInput(event.target)) return
+	if (event.data && /\D/.test(event.data)) event.preventDefault()
+}
+
+function preventNonNumericTimeKeydown(event: KeyboardEvent) {
+	if (!isTimeInput(event.target)) return
+	if (event.metaKey || event.ctrlKey || event.altKey) return
+	if (event.key.length === 1 && /\D/.test(event.key)) event.preventDefault()
+}
+
+function sanitizeNumericTimeInput(event: Event) {
+	if (isTimeInput(event.target)) sanitizeTimeInputValue(event.target)
+}
+
+function syncTimeInputTypes(instance: Instance) {
+	const timeInputs = [instance.hourElement, instance.minuteElement, instance.secondElement].filter(
+		(input): input is HTMLInputElement => Boolean(input),
+	)
+
+	for (const input of timeInputs) {
+		input.type = 'text'
+		input.inputMode = 'numeric'
+		input.pattern = '[0-9]*'
+		normalizeTimeInputValue(input)
+	}
+}
+
+const resolvedDateFormat = computed(
+	() => props.dateFormat ?? (props.enableTime ? 'Y-m-d H:i' : 'Y-m-d'),
+)
+const resolvedAltFormat = computed(
+	() => props.altFormat ?? (props.enableTime ? 'F j, Y at h:i K' : 'F j, Y'),
+)
+const resolvedShowMonths = computed(() =>
+	Number.isFinite(props.showMonths) ? Math.max(1, Math.floor(props.showMonths)) : 1,
+)
+
+const inputClasses = computed(() => [
+	'w-full text-primary placeholder:text-secondary focus:text-contrast font-medium transition-[shadow,color] appearance-none shadow-none focus:ring-4 focus:ring-brand-shadow !outline-0',
+	props.showIcon ? 'pl-10' : 'pl-3',
+	'pr-3 h-9 py-2 text-base outline-none bg-surface-4 border-none rounded-xl',
+	props.disabled ? 'cursor-not-allowed' : '',
+	props.inputClass,
+])
+
+const selectedDates = computed(() => {
+	const value = model.value
+	if (Array.isArray(value)) {
+		return value.filter(Boolean) as Array<string | Date>
+	}
+
+	return value ? [value] : []
+})
+
+watch(
+	() => [
+		model.value,
+		props.disabled,
+		props.readonly,
+		props.minDate,
+		props.maxDate,
+		props.enableTime,
+		props.mode,
+		props.showMonths,
+		props.dateFormat,
+		props.altFormat,
+		props.time24hr,
+	],
+	() => {
+		if (!picker.value) return
+
+		picker.value.set({
+			...flatpickrOptions(),
+			onChange: picker.value.config.onChange,
+			onClose: picker.value.config.onClose,
+			onReady: picker.value.config.onReady,
+			onMonthChange: picker.value.config.onMonthChange,
+			onYearChange: picker.value.config.onYearChange,
+			onOpen: picker.value.config.onOpen,
+		})
+
+		if (!isPreservingDay.value && props.mode === 'single') {
+			const value = model.value
+			if (typeof value === 'string' && value) {
+				const day = getDayFromDateStr(value)
+				if (day !== null) intendedDay.value = day
+			} else {
+				intendedDay.value = null
+			}
+		}
+
+		syncAltInputState()
+		syncTimeInputTypes(picker.value)
+		syncPickerFromModel()
+	},
+	{ deep: true },
+)
+
+onMounted(async () => {
+	await nextTick()
+	if (!inputRef.value) return
+
+	picker.value = flatpickr(inputRef.value, {
+		...flatpickrOptions(),
+		onReady: (_selectedDates, _dateStr, instance) => {
+			if (props.defaultViewDate && instance.selectedDates.length === 0) {
+				instance.jumpToDate(props.defaultViewDate)
+			}
+
+			instance.calendarContainer.addEventListener('pointerdown', startRangeDrag, true)
+			instance.calendarContainer.addEventListener('mousedown', stopRangeEndpointMouseEvent, true)
+			instance.calendarContainer.addEventListener('mouseup', stopRangeEndpointMouseEvent, true)
+			instance.calendarContainer.addEventListener('click', suppressRangeDragClick, true)
+			instance.calendarContainer.addEventListener('mouseover', syncMissingRangeEndState)
+			instance.calendarContainer.addEventListener('mouseleave', syncMissingRangeEndState)
+			instance.calendarContainer.addEventListener(
+				'click',
+				normalizeTimeInputForArrowIncrement,
+				true,
+			)
+			instance.calendarContainer.addEventListener(
+				'keydown',
+				normalizeTimeInputForKeyboardIncrement,
+				true,
+			)
+			instance.calendarContainer.addEventListener('beforeinput', preventNonNumericTimeInput, true)
+			instance.calendarContainer.addEventListener('keydown', preventNonNumericTimeKeydown, true)
+			instance.calendarContainer.addEventListener('input', sanitizeNumericTimeInput, true)
+
+			instance.calendarContainer.addEventListener('mousedown', (event) => {
+				if (props.mode !== 'range') return
+				const target = event.target as HTMLElement | null
+				const dayElem = target?.closest<RangeDayElement>('.flatpickr-day')
+				if (!dayElem) return
+
+				if (resolvedShowMonths.value > 1) {
+					if (!isSelectableDay(dayElem)) return
+				} else if (
+					!dayElem.classList.contains('prevMonthDay') &&
+					!dayElem.classList.contains('nextMonthDay')
+				) {
+					return
+				}
+
+				intendedViewMonth.value = {
+					month: instance.currentMonth,
+					year: instance.currentYear,
+				}
+			})
+
+			instance.calendarContainer.addEventListener(
+				'keydown',
+				(event) => {
+					const target = event.target as HTMLElement | null
+					if (!target?.matches('input.cur-year')) return
+					if (
+						event.key === 'ArrowLeft' ||
+						event.key === 'ArrowRight' ||
+						event.key === 'Home' ||
+						event.key === 'End'
+					) {
+						event.stopPropagation()
+					}
+				},
+				true,
+			)
+
+			syncTimeInputTypes(instance)
+			syncHeaderControlState(instance)
+		},
+		onChange: (_selectedDates, dateStr, instance) => {
+			if (isSyncingFromModel.value) return
+
+			const nextValue =
+				props.mode === 'single'
+					? dateStr || null
+					: _selectedDates.map((date) => instance.formatDate(date, resolvedDateFormat.value))
+			model.value = nextValue
+			emit('change', nextValue)
+
+			if (intendedViewMonth.value !== null) {
+				const monthDelta =
+					intendedViewMonth.value.month -
+					instance.currentMonth +
+					(intendedViewMonth.value.year - instance.currentYear) * 12
+				if (monthDelta !== 0) instance.changeMonth(monthDelta)
+			}
+
+			syncHeaderControlState(instance)
+			syncMissingRangeEndState()
+		},
+		onClose: (_selectedDates, dateStr, instance) => {
+			if (!props.clearable || dateStr) return
+
+			const nextValue = props.mode === 'single' ? null : []
+			model.value = nextValue
+			instance.clear(false)
+			emit('clear')
+			emit('change', nextValue)
+		},
+		onMonthChange: (_selectedDates, _dateStr, instance) => {
+			applyPreserveDay(instance)
+			syncHeaderControlState(instance)
+			syncMissingRangeEndState()
+		},
+		onYearChange: (_selectedDates, _dateStr, instance) => {
+			applyPreserveDay(instance)
+			syncHeaderControlState(instance)
+			syncMissingRangeEndState()
+		},
+		onOpen: (_selectedDates, _dateStr, instance) => {
+			if (props.defaultViewDate && instance.selectedDates.length === 0) {
+				instance.jumpToDate(props.defaultViewDate)
+			}
+			syncTimeInputTypes(instance)
+			syncHeaderControlState(instance)
+			syncMissingRangeEndState()
+		},
+	})
+
+	if (props.mode === 'single' && typeof model.value === 'string' && model.value) {
+		const day = getDayFromDateStr(model.value)
+		if (day !== null) intendedDay.value = day
+	}
+
+	syncAltInputState()
+	syncPickerFromModel()
+	syncHeaderControlState(picker.value)
+})
+
+onBeforeUnmount(() => {
+	clearRangeClickSuppressionTimeout()
+	document.removeEventListener('pointermove', updateRangeDrag, true)
+	document.removeEventListener('pointerup', stopRangeDrag, true)
+	document.removeEventListener('pointercancel', stopRangeDrag, true)
+	picker.value?.destroy()
+})
+
+function flatpickrOptions(): Options {
+	return {
+		allowInput: true,
+		altInput: true,
+		altInputClass: inputClasses.value.filter(Boolean).join(' '),
+		altFormat: resolvedAltFormat.value,
+		appendTo: inputRef.value?.parentElement ?? undefined,
+		closeOnSelect: false,
+		dateFormat: resolvedDateFormat.value,
+		disableMobile: true,
+		enableTime: props.enableTime,
+		maxDate: props.maxDate,
+		minDate: props.minDate,
+		mode: props.mode,
+		noCalendar: false,
+		nextArrow: chevronRightIcon,
+		prevArrow: chevronLeftIcon,
+		showMonths: resolvedShowMonths.value,
+		static: true,
+		time_24hr: props.time24hr,
+	}
+}
+
+function syncPickerFromModel() {
+	if (!picker.value) return
+
+	isSyncingFromModel.value = true
+	picker.value.setDate(selectedDates.value, false, resolvedDateFormat.value)
+	syncTimeInputTypes(picker.value)
+
+	if (intendedViewMonth.value !== null) {
+		const monthDelta =
+			intendedViewMonth.value.month -
+			picker.value.currentMonth +
+			(intendedViewMonth.value.year - picker.value.currentYear) * 12
+		if (monthDelta !== 0) picker.value.changeMonth(monthDelta)
+		intendedViewMonth.value = null
+	}
+
+	isSyncingFromModel.value = false
+	syncHeaderControlState(picker.value)
+	syncMissingRangeEndState()
+}
+
+function syncAltInputState() {
+	if (!picker.value?.altInput) return
+
+	picker.value.altInput.disabled = props.disabled
+	picker.value.altInput.readOnly = props.readonly
+}
+
+defineExpose({
+	focus: () => picker.value?.altInput?.focus() ?? inputRef.value?.focus(),
+	open: () => picker.value?.open(),
+	close: () => picker.value?.close(),
+	clear: () => {
+		const nextValue = props.mode === 'single' ? null : []
+		model.value = nextValue
+		picker.value?.clear(false)
+		syncMissingRangeEndState()
+		emit('clear')
+		emit('change', nextValue)
+	},
+})
+</script>
+
+<style scoped>
+.modrinth-date-picker :deep(.flatpickr-wrapper) {
+	@apply w-full;
+}
+
+.modrinth-date-picker :deep(.flatpickr-calendar) {
+	@apply mt-2 overflow-hidden rounded-[14px] border border-solid border-surface-5 bg-surface-3 shadow-none p-3 text-primary select-none;
+	box-sizing: content-box;
+}
+
+.modrinth-date-picker :deep(.dayContainer) {
+	@apply max-w-[307.875px] min-w-[307.875px] w-[307.875px];
+}
+
+.modrinth-date-picker :deep(.flatpickr-calendar.multiMonth .flatpickr-rContainer),
+.modrinth-date-picker :deep(.flatpickr-calendar.multiMonth .flatpickr-days) {
+	@apply max-w-none;
+}
+
+.modrinth-date-picker :deep(.flatpickr-calendar.multiMonth .flatpickr-days) {
+	overflow: visible;
+}
+
+.modrinth-date-picker :deep(.flatpickr-calendar.multiMonth .dayContainer + .dayContainer) {
+	box-shadow: none;
+}
+
+.modrinth-date-picker :deep(.flatpickr-calendar::before),
+.modrinth-date-picker :deep(.flatpickr-calendar::after) {
+	display: none;
+}
+
+.modrinth-date-picker :deep(.flatpickr-months),
+.modrinth-date-picker :deep(.flatpickr-month) {
+	@apply items-center h-10 flex mb-1 overflow-visible;
+}
+
+.modrinth-date-picker :deep(.flatpickr-month),
+.modrinth-date-picker :deep(.flatpickr-current-month),
+.modrinth-date-picker :deep(.flatpickr-weekdays),
+.modrinth-date-picker :deep(.flatpickr-weekdaycontainer) {
+	@apply text-contrast shadow-none;
+}
+
+.modrinth-date-picker :deep(.flatpickr-current-month) {
+	@apply flex h-full items-center justify-center gap-2 py-0 text-base font-semibold;
+}
+
+.modrinth-date-picker :deep(.flatpickr-current-month input.cur-year),
+.modrinth-date-picker :deep(.flatpickr-current-month .flatpickr-monthDropdown-months) {
+	@apply rounded-xl bg-surface-4 py-1 font-semibold text-contrast hover:bg-surface-5 min-h-10;
+}
+
+.modrinth-date-picker :deep(.flatpickr-current-month .flatpickr-monthDropdown-months) {
+	@apply min-w-28 pl-3 pr-8;
+	appearance: none;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+	background-position: calc(100% - 8px) calc(50%);
+	background-repeat: no-repeat;
+	background-size: 16px 16px;
+}
+.modrinth-date-picker :deep(.flatpickr-current-month .flatpickr-monthDropdown-months:disabled) {
+	@apply cursor-not-allowed opacity-40 hover:bg-surface-4;
+}
+.modrinth-date-picker :deep(.flatpickr-current-month .numInputWrapper:has(input.cur-year)) {
+	@apply w-[76px];
+}
+.modrinth-date-picker :deep(.flatpickr-current-month input.cur-year) {
+	@apply min-w-[76px] px-2 text-center;
+}
+.modrinth-date-picker
+	:deep(.flatpickr-current-month .numInputWrapper:has(input.cur-year:disabled)) {
+	@apply cursor-not-allowed;
+	background: none;
+}
+.modrinth-date-picker :deep(.flatpickr-current-month input.cur-year:disabled) {
+	@apply opacity-40 bg-surface-4 hover:bg-surface-4;
+}
+.modrinth-date-picker
+	:deep(.flatpickr-current-month .numInputWrapper:has(input.cur-year:disabled) span) {
+	@apply pointer-events-none opacity-0;
+}
+
+.modrinth-date-picker :deep(.flatpickr-current-month input.cur-year:focus),
+.modrinth-date-picker :deep(.flatpickr-current-month .flatpickr-monthDropdown-months:focus) {
+	@apply outline-none ring-4 ring-brand-shadow;
+}
+
+.modrinth-date-picker :deep(.numInputWrapper span.arrowUp) {
+	@apply border-0 rounded-tr-xl;
+}
+.modrinth-date-picker :deep(.numInputWrapper span.arrowDown) {
+	@apply border-0 rounded-br-xl;
+}
+
+.modrinth-date-picker :deep(.numInputWrapper span.arrowUp::after) {
+	border-bottom-color: var(--color-text-secondary);
+}
+
+.modrinth-date-picker :deep(.numInputWrapper span.arrowDown::after) {
+	border-top-color: var(--color-text-secondary);
+}
+
+.modrinth-date-picker :deep(.flatpickr-prev-month),
+.modrinth-date-picker :deep(.flatpickr-next-month) {
+	@apply top-2.5 mx-3.5 flex h-10 w-10 items-center justify-center rounded-full p-0 text-secondary hover:bg-surface-4 hover:text-contrast;
+}
+
+.modrinth-date-picker :deep(.flatpickr-prev-month.flatpickr-disabled),
+.modrinth-date-picker :deep(.flatpickr-next-month.flatpickr-disabled) {
+	@apply cursor-not-allowed opacity-40 hover:bg-transparent hover:text-secondary;
+}
+
+.modrinth-date-picker :deep(.flatpickr-prev-month svg),
+.modrinth-date-picker :deep(.flatpickr-next-month svg) {
+	@apply h-5 w-5 stroke-current text-secondary;
+	fill: none;
+	stroke-width: 3;
+}
+
+.modrinth-date-picker :deep(.flatpickr-prev-month:hover svg),
+.modrinth-date-picker :deep(.flatpickr-next-month:hover svg) {
+	fill: none;
+}
+
+.modrinth-date-picker :deep(.flatpickr-weekday) {
+	@apply text-xs font-semibold text-secondary;
+}
+
+.modrinth-date-picker :deep(.flatpickr-day) {
+	@apply relative z-0 m-0 max-w-none rounded-full border border-solid border-transparent text-primary hover:bg-surface-4 hover:text-contrast font-semibold aspect-square h-auto;
+}
+.modrinth-date-picker
+	:deep(
+		.flatpickr-day:focus:not(:focus-visible):not(.selected):not(.startRange):not(.endRange):not(
+				.inRange
+			)
+	) {
+	@apply border-transparent bg-transparent text-primary outline-none;
+}
+.modrinth-date-picker
+	:deep(.flatpickr-day:focus-visible:not(.selected):not(.startRange):not(.endRange):not(.inRange)) {
+	@apply border-transparent bg-surface-4 text-contrast outline-none;
+}
+.modrinth-date-picker :deep(.flatpickr-day.flatpickr-disabled) {
+	@apply hover:bg-transparent;
+}
+
+.modrinth-date-picker :deep(.flatpickr-day::before) {
+	content: '';
+	position: absolute;
+	inset: 0 0;
+	z-index: -1;
+	background: transparent;
+}
+
+.modrinth-date-picker :deep(.flatpickr-day.today) {
+	@apply border-transparent;
+}
+
+.modrinth-date-picker.show-today :deep(.flatpickr-day.today) {
+	@apply border-brand text-contrast;
+}
+
+.modrinth-date-picker :deep(.flatpickr-day.selected),
+.modrinth-date-picker :deep(.flatpickr-day.startRange),
+.modrinth-date-picker :deep(.flatpickr-day.endRange) {
+	@apply z-[1] border-brand bg-brand text-brand-inverted !shadow-none hover:border-brand hover:bg-brand hover:text-brand-inverted hover:shadow-none;
+}
+
+.modrinth-date-picker :deep(.flatpickr-day.inRange) {
+	@apply rounded-none border-transparent bg-transparent text-contrast shadow-none hover:rounded-none hover:border-transparent hover:bg-transparent;
+}
+
+.modrinth-date-picker :deep(.flatpickr-calendar.multiMonth .flatpickr-day.inRange) {
+	box-shadow: none !important;
+}
+
+.modrinth-date-picker :deep(.flatpickr-day.inRange::before),
+.modrinth-date-picker :deep(.flatpickr-day.startRange:not(.endRange)::before),
+.modrinth-date-picker :deep(.flatpickr-day.endRange:not(.startRange)::before) {
+	background: var(--color-brand-highlight);
+}
+
+.modrinth-date-picker :deep(.flatpickr-day.inRange::before) {
+	left: -1px;
+	right: -1px;
+}
+
+.modrinth-date-picker :deep(.flatpickr-day.inRange:nth-child(7n + 1)::before) {
+	@apply rounded-l-xl;
+	left: 0;
+}
+
+.modrinth-date-picker :deep(.flatpickr-day.inRange:nth-child(7n)::before) {
+	@apply rounded-r-xl;
+	right: 0;
+}
+
+.modrinth-date-picker :deep(.flatpickr-day.startRange:not(.endRange)) {
+	@apply rounded-full border-brand;
+}
+
+.modrinth-date-picker :deep(.flatpickr-day.startRange:not(.endRange)::before) {
+	@apply rounded-l-xl;
+	left: 50%;
+	right: -1px;
+}
+
+.modrinth-date-picker
+	:deep(.flatpickr-calendar.is-missing-range-end .flatpickr-day.startRange:not(.endRange)::before),
+.modrinth-date-picker :deep(.flatpickr-calendar.is-missing-range-end .flatpickr-day:hover::before) {
+	background: transparent;
+}
+
+.modrinth-date-picker :deep(.flatpickr-day.startRange:nth-child(7n):not(.endRange)::before) {
+	@apply rounded-r-xl;
+	right: 0;
+}
+
+.modrinth-date-picker :deep(.flatpickr-day.endRange:not(.startRange)) {
+	@apply rounded-full border-brand;
+}
+
+.modrinth-date-picker :deep(.flatpickr-day.endRange:not(.startRange)::before) {
+	@apply rounded-r-xl;
+	left: -1px;
+	right: 50%;
+}
+
+.modrinth-date-picker :deep(.flatpickr-day.endRange:nth-child(7n + 1):not(.startRange)::before) {
+	@apply rounded-l-xl;
+	left: 0;
+}
+
+.modrinth-date-picker :deep(.flatpickr-calendar.multiMonth .flatpickr-day.hidden::before) {
+	display: none;
+}
+
+.modrinth-date-picker
+	:deep(.flatpickr-calendar.multiMonth .flatpickr-day.hidden + .flatpickr-day.inRange::before),
+.modrinth-date-picker
+	:deep(
+		.flatpickr-calendar.multiMonth
+			.flatpickr-day.hidden
+			+ .flatpickr-day.endRange:not(.startRange)::before
+	) {
+	@apply rounded-l-xl;
+	left: 0;
+}
+
+.modrinth-date-picker
+	:deep(.flatpickr-calendar.multiMonth .flatpickr-day.inRange:has(+ .hidden)::before),
+.modrinth-date-picker
+	:deep(
+		.flatpickr-calendar.multiMonth .flatpickr-day.startRange:not(.endRange):has(+ .hidden)::before
+	) {
+	@apply rounded-r-xl;
+	right: 0;
+}
+
+.modrinth-date-picker.can-drag-range
+	:deep(.flatpickr-day.startRange:not(.endRange):not(.flatpickr-disabled)),
+.modrinth-date-picker.can-drag-range
+	:deep(.flatpickr-day.endRange:not(.startRange):not(.flatpickr-disabled)) {
+	cursor: grab;
+}
+
+.modrinth-date-picker.is-dragging-range :deep(.flatpickr-day) {
+	cursor: grabbing !important;
+}
+
+.modrinth-date-picker.is-dragging-range
+	:deep(.flatpickr-day:not(.selected):not(.startRange):not(.endRange):not(.inRange):hover),
+.modrinth-date-picker.is-dragging-range
+	:deep(.flatpickr-day:not(.selected):not(.startRange):not(.endRange):not(.inRange):focus) {
+	@apply border-transparent bg-transparent text-primary;
+}
+
+.modrinth-date-picker
+	:deep(.flatpickr-day.prevMonthDay:not(.inRange):not(.startRange):not(.endRange)),
+.modrinth-date-picker
+	:deep(.flatpickr-day.nextMonthDay:not(.inRange):not(.startRange):not(.endRange)),
+.modrinth-date-picker :deep(.flatpickr-day.flatpickr-disabled) {
+	@apply text-secondary opacity-40;
+}
+
+.modrinth-date-picker :deep(.flatpickr-time) {
+	@apply mt-2 flex h-11 max-h-none items-center  gap-2 border-0 border-t border-solid border-surface-5 px-1 pt-2 leading-none;
+}
+
+.modrinth-date-picker :deep(.flatpickr-time .numInputWrapper) {
+	@apply h-full flex-1 rounded-xl bg-surface-4;
+}
+
+.modrinth-date-picker :deep(.flatpickr-time input),
+.modrinth-date-picker :deep(.flatpickr-time .flatpickr-am-pm) {
+	@apply h-full rounded-xl bg-transparent px-2 text-center font-semibold text-primary hover:bg-surface-5 focus:bg-surface-5;
+}
+
+.modrinth-date-picker :deep(.flatpickr-time .flatpickr-time-separator) {
+	@apply flex h-full items-center justify-center text-secondary text-center;
+}
+
+.modrinth-date-picker :deep(.flatpickr-time .flatpickr-am-pm) {
+	@apply flex w-14 items-center justify-center bg-surface-4 px-3;
+}
+</style>
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index 84eefe229..f27ee0e2e 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -21,6 +21,7 @@ export type { ComboboxOption } from './Combobox.vue'
 export { default as Combobox } from './Combobox.vue'
 export { default as ContentPageHeader } from './ContentPageHeader.vue'
 export { default as CopyCode } from './CopyCode.vue'
+export { default as DatePicker } from './DatePicker.vue'
 export { default as DoubleIcon } from './DoubleIcon.vue'
 export { default as DropArea } from './DropArea.vue'
 export type { DropdownFilterBarCategory, DropdownFilterBarOption } from './DropdownFilterBar.vue'
diff --git a/packages/ui/src/stories/base/DatePicker.stories.ts b/packages/ui/src/stories/base/DatePicker.stories.ts
new file mode 100644
index 000000000..27a492f8c
--- /dev/null
+++ b/packages/ui/src/stories/base/DatePicker.stories.ts
@@ -0,0 +1,278 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { computed, nextTick, onMounted, ref } from 'vue'
+
+import DatePicker from '../../components/base/DatePicker.vue'
+
+const meta = {
+	title: 'Base/DatePicker',
+	component: DatePicker,
+} satisfies Meta<typeof DatePicker>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	render: (args) => ({
+		components: { DatePicker },
+		setup() {
+			const value = ref('2026-04-27')
+			return { args, value }
+		},
+		template: /* html */ `
+			<div class="flex max-w-sm flex-col gap-2">
+				<DatePicker v-model="value"
+				wrapperClass="w-[300px]" v-bind="args" />
+				<p class="text-sm text-secondary">Selected value: {{ value || 'None' }}</p>
+			</div>
+		`,
+	}),
+	args: {
+		placeholder: 'Select a date...',
+	},
+}
+
+export const WithTime: Story = {
+	render: () => ({
+		components: { DatePicker },
+		setup() {
+			const value = ref('2026-04-27 14:30')
+			return { value }
+		},
+		template: /* html */ `
+			<div class="flex max-w-sm flex-col gap-2">
+				<DatePicker v-model="value"
+				wrapperClass="w-[350px]" enable-time placeholder="Select a date and time..." />
+				<p class="text-sm text-secondary">Selected value: {{ value || 'None' }}</p>
+			</div>
+		`,
+	}),
+}
+
+export const OpenWithTime: Story = {
+	render: () => ({
+		components: { DatePicker },
+		setup() {
+			const value = ref('2026-04-27 03:05')
+			const datePicker = ref<InstanceType<typeof DatePicker> | null>(null)
+
+			onMounted(async () => {
+				await nextTick()
+				datePicker.value?.open()
+			})
+
+			return { datePicker, value }
+		},
+		template: /* html */ `
+			<div class="flex h-[460px] max-w-sm flex-col gap-2">
+				<DatePicker
+					ref="datePicker"
+					v-model="value"
+					wrapperClass="w-[350px]"
+					enable-time
+					placeholder="Select a date and time..."
+				/>
+				<p class="text-sm text-secondary">Selected value: {{ value || 'None' }}</p>
+			</div>
+		`,
+	}),
+}
+
+export const Range: Story = {
+	render: () => ({
+		components: { DatePicker },
+		setup() {
+			const value = ref(['2026-04-13', '2026-04-29'])
+			return { value }
+		},
+		template: /* html */ `
+			<div class="flex max-w-sm flex-col gap-2">
+				<DatePicker v-model="value"
+				wrapperClass="w-[350px]" mode="range" default-view-date="2026-04-01" placeholder="Select a date range..." />
+				<p class="text-sm text-secondary">Selected value: {{ value?.join(' to ') || 'None' }}</p>
+			</div>
+		`,
+	}),
+}
+
+export const TwoMonthRange: Story = {
+	render: () => ({
+		components: { DatePicker },
+		setup() {
+			const value = ref(['2033-11-16', '2033-12-21'])
+			const datePicker = ref<InstanceType<typeof DatePicker> | null>(null)
+
+			onMounted(async () => {
+				await nextTick()
+				datePicker.value?.open()
+			})
+
+			return { datePicker, value }
+		},
+		template: /* html */ `
+			<div class="flex h-[460px] max-w-[700px] flex-col gap-2">
+				<DatePicker
+					ref="datePicker"
+					v-model="value"
+					wrapperClass="w-[350px]"
+					mode="range"
+					:show-months="2"
+					default-view-date="2033-11-01"
+					placeholder="Select a date range..."
+				/>
+				<p class="text-sm text-secondary">Selected value: {{ value?.join(' to ') || 'None' }}</p>
+			</div>
+		`,
+	}),
+}
+
+export const DraggableRange: Story = {
+	render: () => ({
+		components: { DatePicker },
+		setup() {
+			const value = ref(['2026-04-13', '2026-04-29'])
+			const datePicker = ref<InstanceType<typeof DatePicker> | null>(null)
+
+			onMounted(async () => {
+				await nextTick()
+				datePicker.value?.open()
+			})
+
+			return { datePicker, value }
+		},
+		template: /* html */ `
+			<div class="flex h-[420px] max-w-sm flex-col gap-2">
+				<DatePicker
+					ref="datePicker"
+					v-model="value"
+					wrapperClass="w-[350px]"
+					mode="range"
+					default-view-date="2026-04-01"
+					placeholder="Select a date range..."
+				/>
+				<p class="text-sm text-secondary">Selected value: {{ value?.join(' to ') || 'None' }}</p>
+			</div>
+		`,
+	}),
+}
+
+export const MinMaxDates: Story = {
+	render: () => ({
+		components: { DatePicker },
+		setup() {
+			const value = ref('2026-04-27')
+			const datePicker = ref<InstanceType<typeof DatePicker> | null>(null)
+
+			onMounted(async () => {
+				await nextTick()
+				datePicker.value?.open()
+			})
+
+			return { datePicker, value }
+		},
+		template: /* html */ `
+			<div class="flex h-[420px] max-w-sm flex-col gap-2">
+				<DatePicker
+					ref="datePicker"
+					v-model="value"
+					wrapperClass="w-[350px]"
+					min-date="2026-04-01"
+					max-date="2026-04-30"
+					placeholder="Select an April date..."
+				/>
+				<p class="text-sm text-secondary">Selected value: {{ value || 'None' }}</p>
+			</div>
+		`,
+	}),
+}
+
+export const OpenCalendar: Story = {
+	render: () => ({
+		components: { DatePicker },
+		setup() {
+			const value = ref('2026-06-15')
+			const datePicker = ref<InstanceType<typeof DatePicker> | null>(null)
+
+			onMounted(async () => {
+				await nextTick()
+				datePicker.value?.open()
+			})
+
+			return { datePicker, value }
+		},
+		template: /* html */ `
+			<div class="flex h-[420px] max-w-sm flex-col gap-2">
+				<DatePicker
+					ref="datePicker"
+					v-model="value"
+					wrapperClass="w-[300px]"
+					default-view-date="2026-06-01"
+				/>
+				<p class="text-sm text-secondary">Selected value: {{ value || 'None' }}</p>
+			</div>
+		`,
+	}),
+}
+
+export const PreserveDay: Story = {
+	render: () => ({
+		components: { DatePicker },
+		setup() {
+			const value = ref('2026-05-31')
+			const intendedDay = ref<number | null>(null)
+			const resolvedDay = ref<number | null>(null)
+			const wasClamped = computed(
+				() =>
+					intendedDay.value !== null &&
+					resolvedDay.value !== null &&
+					intendedDay.value !== resolvedDay.value,
+			)
+			function onClamp(intended: number, resolved: number) {
+				intendedDay.value = intended
+				resolvedDay.value = resolved
+			}
+			return { value, intendedDay, resolvedDay, wasClamped, onClamp }
+		},
+		template: /* html */ `
+			<div class="flex max-w-sm flex-col gap-2">
+				<DatePicker
+					v-model="value"
+					wrapperClass="w-[300px]"
+					preserve-day
+					placeholder="Pick a date, then navigate months..."
+					@clamp="onClamp"
+				/>
+				<p v-if="wasClamped" class="text-xs text-secondary">
+					Day {{ intendedDay }} not available — showing {{ resolvedDay }}
+				</p>
+				<p class="text-sm text-secondary">Selected value: {{ value || 'None' }}</p>
+				<p class="text-xs text-secondary">
+					Try: pick May 31, then navigate to Feb (clamps to 28/29), then back to March (snaps to 31).
+				</p>
+			</div>
+		`,
+	}),
+}
+
+export const ShowToday: Story = {
+	render: () => ({
+		components: { DatePicker },
+		setup() {
+			const value = ref(null)
+			return { value }
+		},
+		template: /* html */ `
+			<div class="flex max-w-sm flex-col gap-2">
+				<DatePicker v-model="value"
+				wrapperClass="w-[300px]" show-today placeholder="Today is highlighted..." />
+				<p class="text-sm text-secondary">Selected value: {{ value || 'None' }}</p>
+			</div>
+		`,
+	}),
+}
+
+export const Disabled: Story = {
+	args: {
+		modelValue: '2026-04-27',
+		disabled: true,
+	},
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8e7c06ec9..69338949c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -170,7 +170,7 @@ importers:
     devDependencies:
       '@eslint/compat':
         specifier: ^1.1.1
-        version: 1.4.1(eslint@9.39.2(jiti@1.21.7))
+        version: 1.4.1(eslint@9.39.2(jiti@2.6.1))
       '@formatjs/cli':
         specifier: ^6.2.12
         version: 6.12.2(@vue/compiler-core@3.5.27)(vue@3.5.27(typescript@5.9.3))
@@ -179,22 +179,22 @@ importers:
         version: link:../../packages/tooling-config
       '@nuxt/eslint-config':
         specifier: ^0.5.6
-        version: 0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+        version: 0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       '@taijased/vue-render-tracker':
         specifier: ^1.0.7
         version: 1.0.7(vue@3.5.27(typescript@5.9.3))
       '@vitejs/plugin-vue':
         specifier: ^6.0.3
-        version: 6.0.4(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))
+        version: 6.0.4(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))
       autoprefixer:
         specifier: ^10.4.19
         version: 10.4.24(postcss@8.5.6)
       eslint:
         specifier: ^9.9.1
-        version: 9.39.2(jiti@1.21.7)
+        version: 9.39.2(jiti@2.6.1)
       eslint-plugin-turbo:
         specifier: ^2.5.4
-        version: 2.8.2(eslint@9.39.2(jiti@1.21.7))(turbo@2.8.2)
+        version: 2.8.2(eslint@9.39.2(jiti@2.6.1))(turbo@2.8.2)
       postcss:
         specifier: ^8.4.39
         version: 8.5.6
@@ -212,7 +212,7 @@ importers:
         version: 5.9.3
       vite:
         specifier: ^8.0.0
-        version: 8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+        version: 8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vue-component-type-helpers:
         specifier: ^3.1.8
         version: 3.2.4
@@ -691,6 +691,9 @@ importers:
       es-toolkit:
         specifier: ^1.44.0
         version: 1.44.0
+      flatpickr:
+        specifier: ^4.6.13
+        version: 4.6.13
       floating-vue:
         specifier: ^5.2.2
         version: 5.2.2(@nuxt/kit@3.21.0(magicast@0.5.1))(vue@3.5.27(typescript@5.9.3))
@@ -772,7 +775,7 @@ importers:
         version: 5.2.4(vite@5.4.21(@types/node@24.12.2)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0))(vue@3.5.27(typescript@5.9.3))
       eslint-plugin-storybook:
         specifier: ^10.1.10
-        version: 10.2.4(eslint@9.39.2(jiti@2.6.1))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
+        version: 10.2.4(eslint@9.39.2(jiti@1.21.7))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
       storybook:
         specifier: ^10.1.10
         version: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -6290,6 +6293,9 @@ packages:
     resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
     engines: {node: '>=16'}
 
+  flatpickr@4.6.13:
+    resolution: {integrity: sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==}
+
   flatted@3.3.3:
     resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
 
@@ -11119,12 +11125,6 @@ snapshots:
 
   '@eslint-community/regexpp@4.12.2': {}
 
-  '@eslint/compat@1.4.1(eslint@9.39.2(jiti@1.21.7))':
-    dependencies:
-      '@eslint/core': 0.17.0
-    optionalDependencies:
-      eslint: 9.39.2(jiti@1.21.7)
-
   '@eslint/compat@1.4.1(eslint@9.39.2(jiti@2.6.1))':
     dependencies:
       '@eslint/core': 0.17.0
@@ -11750,31 +11750,6 @@ snapshots:
       - utf-8-validate
       - vue
 
-  '@nuxt/eslint-config@0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
-    dependencies:
-      '@eslint/js': 9.39.2
-      '@nuxt/eslint-plugin': 0.5.7(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      '@stylistic/eslint-plugin': 2.13.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/eslint-plugin': 8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@1.21.7)
-      eslint-config-flat-gitignore: 0.3.0(eslint@9.39.2(jiti@1.21.7))
-      eslint-flat-config-utils: 0.4.0
-      eslint-plugin-import-x: 4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))
-      eslint-plugin-jsdoc: 50.8.0(eslint@9.39.2(jiti@1.21.7))
-      eslint-plugin-regexp: 2.10.0(eslint@9.39.2(jiti@1.21.7))
-      eslint-plugin-unicorn: 55.0.0(eslint@9.39.2(jiti@1.21.7))
-      eslint-plugin-vue: 9.33.0(eslint@9.39.2(jiti@1.21.7))
-      globals: 15.15.0
-      local-pkg: 0.5.1
-      pathe: 1.1.2
-      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@1.21.7))
-    transitivePeerDependencies:
-      - '@typescript-eslint/utils'
-      - eslint-import-resolver-node
-      - supports-color
-      - typescript
-
   '@nuxt/eslint-config@0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint/js': 9.39.2
@@ -11800,15 +11775,6 @@ snapshots:
       - supports-color
       - typescript
 
-  '@nuxt/eslint-plugin@0.5.7(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/types': 8.54.0
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@1.21.7)
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
   '@nuxt/eslint-plugin@0.5.7(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.54.0
@@ -13283,18 +13249,6 @@ snapshots:
 
   '@stripe/stripe-js@7.9.0': {}
 
-  '@stylistic/eslint-plugin@2.13.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@1.21.7)
-      eslint-visitor-keys: 4.2.1
-      espree: 10.4.0
-      estraverse: 5.3.0
-      picomatch: 4.0.3
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
   '@stylistic/eslint-plugin@2.13.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
@@ -13707,22 +13661,6 @@ snapshots:
     dependencies:
       '@types/node': 24.12.2
 
-  '@typescript-eslint/eslint-plugin@8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
-    dependencies:
-      '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.54.0
-      '@typescript-eslint/type-utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.54.0
-      eslint: 9.39.2(jiti@1.21.7)
-      ignore: 7.0.5
-      natural-compare: 1.4.0
-      ts-api-utils: 2.4.0(typescript@5.9.3)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/eslint-plugin@8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
@@ -13739,18 +13677,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/scope-manager': 8.54.0
-      '@typescript-eslint/types': 8.54.0
-      '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.54.0
-      debug: 4.4.3
-      eslint: 9.39.2(jiti@1.21.7)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.54.0
@@ -13781,18 +13707,6 @@ snapshots:
     dependencies:
       typescript: 5.9.3
 
-  '@typescript-eslint/type-utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/types': 8.54.0
-      '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      debug: 4.4.3
-      eslint: 9.39.2(jiti@1.21.7)
-      ts-api-utils: 2.4.0(typescript@5.9.3)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/type-utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.54.0
@@ -13963,12 +13877,6 @@ snapshots:
       vite: 7.3.1(@types/node@24.12.2)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vue: 3.5.27(typescript@5.9.3)
 
-  '@vitejs/plugin-vue@6.0.4(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))':
-    dependencies:
-      '@rolldown/pluginutils': 1.0.0-rc.2
-      vite: 8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
-      vue: 3.5.27(typescript@5.9.3)
-
   '@vitejs/plugin-vue@6.0.4(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-rc.2
@@ -15498,12 +15406,6 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
-  eslint-config-flat-gitignore@0.3.0(eslint@9.39.2(jiti@1.21.7)):
-    dependencies:
-      '@eslint/compat': 1.4.1(eslint@9.39.2(jiti@1.21.7))
-      eslint: 9.39.2(jiti@1.21.7)
-      find-up-simple: 1.0.1
-
   eslint-config-flat-gitignore@0.3.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@eslint/compat': 1.4.1(eslint@9.39.2(jiti@2.6.1))
@@ -15525,23 +15427,6 @@ snapshots:
     optionalDependencies:
       unrs-resolver: 1.11.1
 
-  eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)):
-    dependencies:
-      '@typescript-eslint/types': 8.54.0
-      comment-parser: 1.4.5
-      debug: 4.4.3
-      eslint: 9.39.2(jiti@1.21.7)
-      eslint-import-context: 0.1.9(unrs-resolver@1.11.1)
-      is-glob: 4.0.3
-      minimatch: 10.1.2
-      semver: 7.7.3
-      stable-hash-x: 0.2.0
-      unrs-resolver: 1.11.1
-    optionalDependencies:
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-    transitivePeerDependencies:
-      - supports-color
-
   eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@typescript-eslint/types': 8.54.0
@@ -15559,22 +15444,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-jsdoc@50.8.0(eslint@9.39.2(jiti@1.21.7)):
-    dependencies:
-      '@es-joy/jsdoccomment': 0.50.2
-      are-docs-informative: 0.0.2
-      comment-parser: 1.4.1
-      debug: 4.4.3
-      escape-string-regexp: 4.0.0
-      eslint: 9.39.2(jiti@1.21.7)
-      espree: 10.4.0
-      esquery: 1.7.0
-      parse-imports-exports: 0.2.4
-      semver: 7.7.3
-      spdx-expression-parse: 4.0.0
-    transitivePeerDependencies:
-      - supports-color
-
   eslint-plugin-jsdoc@50.8.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@es-joy/jsdoccomment': 0.50.2
@@ -15600,17 +15469,6 @@ snapshots:
     optionalDependencies:
       eslint-config-prettier: 10.1.8(eslint@9.39.2(jiti@2.6.1))
 
-  eslint-plugin-regexp@2.10.0(eslint@9.39.2(jiti@1.21.7)):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
-      '@eslint-community/regexpp': 4.12.2
-      comment-parser: 1.4.5
-      eslint: 9.39.2(jiti@1.21.7)
-      jsdoc-type-pratt-parser: 4.8.0
-      refa: 0.12.1
-      regexp-ast-analysis: 0.7.1
-      scslre: 0.3.0
-
   eslint-plugin-regexp@2.10.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
@@ -15626,47 +15484,21 @@ snapshots:
     dependencies:
       eslint: 9.39.2(jiti@2.6.1)
 
-  eslint-plugin-storybook@10.2.4(eslint@9.39.2(jiti@2.6.1))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3):
+  eslint-plugin-storybook@10.2.4(eslint@9.39.2(jiti@1.21.7))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@2.6.1)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
       storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-turbo@2.8.2(eslint@9.39.2(jiti@1.21.7))(turbo@2.8.2):
-    dependencies:
-      dotenv: 16.0.3
-      eslint: 9.39.2(jiti@1.21.7)
-      turbo: 2.8.2
-
   eslint-plugin-turbo@2.8.2(eslint@9.39.2(jiti@2.6.1))(turbo@2.8.2):
     dependencies:
       dotenv: 16.0.3
       eslint: 9.39.2(jiti@2.6.1)
       turbo: 2.8.2
 
-  eslint-plugin-unicorn@55.0.0(eslint@9.39.2(jiti@1.21.7)):
-    dependencies:
-      '@babel/helper-validator-identifier': 7.28.5
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
-      ci-info: 4.4.0
-      clean-regexp: 1.0.0
-      core-js-compat: 3.48.0
-      eslint: 9.39.2(jiti@1.21.7)
-      esquery: 1.7.0
-      globals: 15.15.0
-      indent-string: 4.0.0
-      is-builtin-module: 3.2.1
-      jsesc: 3.1.0
-      pluralize: 8.0.0
-      read-pkg-up: 7.0.1
-      regexp-tree: 0.1.27
-      regjsparser: 0.10.0
-      semver: 7.7.3
-      strip-indent: 3.0.0
-
   eslint-plugin-unicorn@55.0.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
@@ -15701,20 +15533,6 @@ snapshots:
       '@stylistic/eslint-plugin': 2.13.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
 
-  eslint-plugin-vue@9.33.0(eslint@9.39.2(jiti@1.21.7)):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
-      eslint: 9.39.2(jiti@1.21.7)
-      globals: 13.24.0
-      natural-compare: 1.4.0
-      nth-check: 2.1.1
-      postcss-selector-parser: 6.1.2
-      semver: 7.7.3
-      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@1.21.7))
-      xml-name-validator: 4.0.0
-    transitivePeerDependencies:
-      - supports-color
-
   eslint-plugin-vue@9.33.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
@@ -16013,6 +15831,8 @@ snapshots:
       flatted: 3.3.3
       keyv: 4.5.4
 
+  flatpickr@4.6.13: {}
+
   flatted@3.3.3: {}
 
   flattie@1.1.1: {}
@@ -20134,22 +19954,6 @@ snapshots:
       terser: 5.46.0
       yaml: 2.8.2
 
-  vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
-    dependencies:
-      lightningcss: 1.32.0
-      picomatch: 4.0.4
-      postcss: 8.5.8
-      rolldown: 1.0.0-rc.12
-      tinyglobby: 0.2.15
-    optionalDependencies:
-      '@types/node': 24.12.2
-      esbuild: 0.27.3
-      fsevents: 2.3.3
-      jiti: 1.21.7
-      sass: 1.97.3
-      terser: 5.46.0
-      yaml: 2.8.2
-
   vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
     dependencies:
       lightningcss: 1.32.0
@@ -20326,19 +20130,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-eslint-parser@9.4.3(eslint@9.39.2(jiti@1.21.7)):
-    dependencies:
-      debug: 4.4.3
-      eslint: 9.39.2(jiti@1.21.7)
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
-      esquery: 1.7.0
-      lodash: 4.17.23
-      semver: 7.7.3
-    transitivePeerDependencies:
-      - supports-color
-
   vue-eslint-parser@9.4.3(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       debug: 4.4.3