@nexxtmove/ui 0.1.23 → 0.1.25

package/dist/nuxt.js

@@ -1,20 +1,23 @@
-import { defineNuxtModule as a, addComponent as c, addTemplate as s } from "@nuxt/kit";
-const i = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Button/Button.vue", x = "components/Calendar/Calendar.vue", p = "components/Chip/Chip.vue", u = "components/DatePicker/DatePicker.vue", d = "components/Header/Header.vue", r = "components/Icon/Icon.vue", l = "components/InfoBlock/InfoBlock.vue", v = "components/ProgressBar/ProgressBar.vue", S = "components/SocialIcons/SocialIcons.vue", N = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", f = "components/SocialMediaTemplate/SocialMediaTemplate.vue", C = "components/SocialMediaType/SocialMediaType.vue", M = "components/StepperHeader/StepperHeader.vue", T = {
-  NexxtAnimatedNumber: i,
+import { defineNuxtModule as c, addComponent as s, addTemplate as i } from "@nuxt/kit";
+const a = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Button/Button.vue", x = "components/Calendar/Calendar.vue", p = "components/Chip/Chip.vue", l = "components/DatePicker/DatePicker.vue", u = "components/Header/Header.vue", d = "components/Icon/Icon.vue", r = "components/InfoBlock/InfoBlock.vue", v = "components/ProgressBar/ProgressBar.vue", N = "components/SocialIcons/SocialIcons.vue", S = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", T = "components/SocialMediaTemplate/SocialMediaTemplate.vue", f = "components/SocialMediaType/SocialMediaType.vue", C = "components/StepperHeader/StepperHeader.vue", h = "components/TimelineEvent/TimelineEvent.vue", M = "components/TimelinePhaseblock/TimelinePhaseblock.vue", P = "components/Tooltip/Tooltip.vue", b = {
+  NexxtAnimatedNumber: a,
   NexxtButton: m,
   NexxtCalendar: x,
   NexxtChip: p,
-  NexxtDatePicker: u,
-  NexxtHeader: d,
-  NexxtIcon: r,
-  NexxtInfoBlock: l,
+  NexxtDatePicker: l,
+  NexxtHeader: u,
+  NexxtIcon: d,
+  NexxtInfoBlock: r,
   NexxtProgressBar: v,
-  NexxtSocialIcons: S,
-  NexxtSocialMediaCustomTemplate: N,
-  NexxtSocialMediaTemplate: f,
-  NexxtSocialMediaType: C,
-  NexxtStepperHeader: M
-}, I = a({
+  NexxtSocialIcons: N,
+  NexxtSocialMediaCustomTemplate: S,
+  NexxtSocialMediaTemplate: T,
+  NexxtSocialMediaType: f,
+  NexxtStepperHeader: C,
+  NexxtTimelineEvent: h,
+  NexxtTimelinePhaseblock: M,
+  NexxtTooltip: P
+}, B = c({
   meta: {
     name: "@nexxtmove/ui",
     configKey: "nexxtmoveUi",
@@ -26,13 +29,13 @@ const i = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Button
     addCSS: !0
   },
   setup(e, o) {
-    for (const [t, n] of Object.entries(T))
-      c({
+    for (const [t, n] of Object.entries(b))
+      s({
         name: t,
         export: "default",
         filePath: `@nexxtmove/ui/${n}`
       });
-    e.addCSS && (s({
+    e.addCSS && (i({
       filename: "nexxtmove-ui.css",
       getContents: () => `
 @import "tailwindcss";
@@ -45,5 +48,5 @@ const i = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Button
   }
 });
 export {
-  I as default
+  B as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -21,6 +21,7 @@
   ],
   "dependencies": {
     "date-fns": "^4.1.0",
+    "date-fns-tz": "^3.2.0",
     "reka-ui": "^2.9.2"
   },
   "peerDependencies": {

package/src/components/Calendar/Calendar.test.ts

@@ -1,12 +1,17 @@
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { nextTick } from 'vue'
 import Calendar from './Calendar.vue'
 
+// Mock today's date for consistent testing
+const MOCK_TODAY = new Date(Date.UTC(2026, 2, 20)) // March 20, 2026
+vi.useFakeTimers()
+vi.setSystemTime(MOCK_TODAY)
+
 // Fixed reference date used across tests
 const YEAR = 2026
 const MONTH = 2 // March (0-indexed)
-const TODAY = new Date(YEAR, MONTH, 20)
+const TODAY = new Date(Date.UTC(YEAR, MONTH, 20))
 
 const mountCalendar = (props = {}) => mount(Calendar, { props })
 
@@ -43,38 +48,42 @@ describe('Calendar', () => {
   // ── Month navigation ───────────────────────────────────────────────────────
 
   it('navigates to next month', async () => {
-    const wrapper = mountCalendar({ modelValue: new Date(YEAR, MONTH, 1) })
+    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 1)) })
 
-    const labelBefore = wrapper.find('[class*="cornflower-blue-600"]').text()
+    const labelBefore = wrapper
+      .find('[class*="flex"][class*="items-center"][class*="gap-1"]')
+      .text()
     const nextBtn = wrapper
       .findAll('button[aria-label]')
       .find((b) => b.attributes('aria-label') === 'Volgende maand')
     await nextBtn!.trigger('click')
     await nextTick()
 
-    const labelAfter = wrapper.find('[class*="cornflower-blue-600"]').text()
+    const labelAfter = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]').text()
     expect(labelAfter).not.toBe(labelBefore)
   })
 
   it('navigates to previous month', async () => {
-    const wrapper = mountCalendar({ modelValue: new Date(YEAR, MONTH, 1) })
+    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 1)) })
 
-    const labelBefore = wrapper.find('[class*="cornflower-blue-600"]').text()
+    const labelBefore = wrapper
+      .find('[class*="flex"][class*="items-center"][class*="gap-1"]')
+      .text()
     const prevBtn = wrapper
       .findAll('button[aria-label]')
       .find((b) => b.attributes('aria-label') === 'Vorige maand')
     await prevBtn!.trigger('click')
     await nextTick()
 
-    const labelAfter = wrapper.find('[class*="cornflower-blue-600"]').text()
+    const labelAfter = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]').text()
     expect(labelAfter).not.toBe(labelBefore)
   })
 
   // ── Marked dates ───────────────────────────────────────────────────────────
 
   it('renders a dot for marked dates', () => {
-    const markedDates = [new Date(YEAR, MONTH, 10)]
-    const wrapper = mountCalendar({ modelValue: new Date(YEAR, MONTH, 1), markedDates })
+    const markedDates = [new Date(Date.UTC(YEAR, MONTH, 10))]
+    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 1)), markedDates })
 
     expect(wrapper.find('[class*="rounded-full"][class*="bg-cornflower"]').exists()).toBe(true)
   })
@@ -82,8 +91,8 @@ describe('Calendar', () => {
   // ── Disabled dates ─────────────────────────────────────────────────────────
 
   it('disables specified dates', () => {
-    const disabledDates = [new Date(YEAR, MONTH, 15)]
-    const wrapper = mountCalendar({ modelValue: new Date(YEAR, MONTH, 1), disabledDates })
+    const disabledDates = [new Date(Date.UTC(YEAR, MONTH, 15))]
+    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 1)), disabledDates })
 
     const disabled = wrapper
       .findAll('button[disabled]')
@@ -92,13 +101,13 @@ describe('Calendar', () => {
   })
 
   it('does not emit when clicking a disabled date', async () => {
-    const disabledDates = [new Date(YEAR, MONTH, 15)]
-    const wrapper = mountCalendar({ modelValue: new Date(YEAR, MONTH, 1), disabledDates })
+    const disabledDates = [new Date(Date.UTC(YEAR, MONTH, 15))]
+    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 1)), disabledDates })
 
-    const disabled = wrapper
+    const disabledBtn = wrapper
       .findAll('button[disabled]')
       .find((b) => /^\d{1,2}$/.test(b.text().trim()))
-    await disabled?.trigger('click')
+    await disabledBtn?.trigger('click')
     await nextTick()
 
     expect(wrapper.emitted('update:modelValue')).toBeFalsy()
@@ -107,8 +116,8 @@ describe('Calendar', () => {
   // ── minDate / maxDate ──────────────────────────────────────────────────────
 
   it('disables dates before minDate', () => {
-    const minDate = new Date(YEAR, MONTH, 10)
-    const wrapper = mountCalendar({ modelValue: new Date(YEAR, MONTH, 15), minDate })
+    const minDate = new Date(Date.UTC(YEAR, MONTH, 10))
+    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 15)), minDate })
 
     const disabled = wrapper
       .findAll('button[disabled]')
@@ -117,8 +126,8 @@ describe('Calendar', () => {
   })
 
   it('disables dates after maxDate', () => {
-    const maxDate = new Date(YEAR, MONTH, 20)
-    const wrapper = mountCalendar({ modelValue: new Date(YEAR, MONTH, 15), maxDate })
+    const maxDate = new Date(Date.UTC(YEAR, MONTH, 20))
+    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 15)), maxDate })
 
     const disabled = wrapper
       .findAll('button[disabled]')
@@ -127,43 +136,42 @@ describe('Calendar', () => {
   })
 
   it('disables prev nav when already at minDate month', () => {
-    const minDate = new Date(YEAR, MONTH, 1)
-    const wrapper = mountCalendar({ modelValue: new Date(YEAR, MONTH, 15), minDate })
+    const minDate = new Date(Date.UTC(YEAR, MONTH, 1))
+    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 15)), minDate })
 
-    const prevBtn = wrapper.findAll('[class*="rounded-full"][type="button"]')[0]!
+    const prevBtn = wrapper.find('button[aria-label="Vorige maand"]')
     expect(prevBtn.attributes('disabled')).toBeDefined()
   })
 
   it('disables next nav when already at maxDate month', () => {
-    const maxDate = new Date(YEAR, MONTH, 28)
-    const wrapper = mountCalendar({ modelValue: new Date(YEAR, MONTH, 15), maxDate })
+    const maxDate = new Date(Date.UTC(YEAR, MONTH, 28))
+    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 15)), maxDate })
 
-    const navButtons = wrapper.findAll('[class*="rounded-full"][type="button"]')
-    const nextBtn = navButtons[navButtons.length - 1]!
+    const nextBtn = wrapper.find('button[aria-label="Volgende maand"]')
     expect(nextBtn.attributes('disabled')).toBeDefined()
   })
 
   it('does not navigate prev when at minDate month', async () => {
-    const minDate = new Date(YEAR, MONTH, 1)
-    const wrapper = mountCalendar({ modelValue: new Date(YEAR, MONTH, 15), minDate })
+    const minDate = new Date(Date.UTC(YEAR, MONTH, 1))
+    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 15)), minDate })
 
     const prevBtn = wrapper.find('button[aria-label="Vorige maand"]')
     await prevBtn.trigger('click')
     await nextTick()
 
-    const label = wrapper.find('[class*="cornflower-blue-600"]').text()
+    const label = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]').text()
     expect(label).toContain('Mrt')
   })
 
   it('does not navigate next when at maxDate month', async () => {
-    const maxDate = new Date(YEAR, MONTH, 28)
-    const wrapper = mountCalendar({ modelValue: new Date(YEAR, MONTH, 15), maxDate })
+    const maxDate = new Date(Date.UTC(YEAR, MONTH, 28))
+    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 15)), maxDate })
 
     const nextBtn = wrapper.find('button[aria-label="Volgende maand"]')
     await nextBtn.trigger('click')
     await nextTick()
 
-    const label = wrapper.find('[class*="cornflower-blue-600"]').text()
+    const label = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]').text()
     expect(label).toContain('Mrt')
   })
 
@@ -172,31 +180,33 @@ describe('Calendar', () => {
   it('month name is not a button without monthYearPicker prop', () => {
     const wrapper = mountCalendar({ modelValue: TODAY })
 
-    const header = wrapper.find('[class*="cornflower-blue-600"]')
+    const header = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]')
     expect(header.find('button').exists()).toBe(false)
   })
 
   it('month name is a button with monthYearPicker prop', () => {
     const wrapper = mountCalendar({ modelValue: TODAY, monthYearPicker: true })
 
-    const header = wrapper.find('[class*="cornflower-blue-600"]')
+    const header = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]')
     expect(header.find('button').exists()).toBe(true)
   })
 
   it('opens month picker when month name is clicked', async () => {
     const wrapper = mountCalendar({ modelValue: TODAY, monthYearPicker: true })
 
-    const header = wrapper.find('[class*="cornflower-blue-600"]')
-    await header.find('button').trigger('click')
+    const header = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]')
+    const monthBtn = header.findAll('button').find((b) => b.text().includes('Mrt'))
+    await monthBtn!.trigger('click')
     await nextTick()
 
+    // Month view uses grid-cols-3
     expect(wrapper.find('[class*="grid-cols-3"]').exists()).toBe(true)
   })
 
   it('opens year picker when year is clicked', async () => {
     const wrapper = mountCalendar({ modelValue: TODAY, monthYearPicker: true })
 
-    const header = wrapper.find('[class*="cornflower-blue-600"]')
+    const header = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]')
     const buttons = header.findAll('button')
     await buttons[1]!.trigger('click')
     await nextTick()
@@ -207,7 +217,7 @@ describe('Calendar', () => {
   it('returns to days view after selecting a month', async () => {
     const wrapper = mountCalendar({ modelValue: TODAY, monthYearPicker: true })
 
-    const header = wrapper.find('[class*="cornflower-blue-600"]')
+    const header = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]')
     await header.find('button').trigger('click')
     await nextTick()
 
@@ -222,7 +232,7 @@ describe('Calendar', () => {
   it('returns to months view after selecting a year', async () => {
     const wrapper = mountCalendar({ modelValue: TODAY, monthYearPicker: true })
 
-    const header = wrapper.find('[class*="cornflower-blue-600"]')
+    const header = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]')
     await header.findAll('button')[1]!.trigger('click')
     await nextTick()
 
@@ -237,12 +247,12 @@ describe('Calendar', () => {
   it('selects correct date from month picker', async () => {
     const wrapper = mountCalendar({ modelValue: TODAY, monthYearPicker: true })
 
-    const header = wrapper.find('[class*="cornflower-blue-600"]')
+    const header = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]')
     await header.find('button').trigger('click')
     await nextTick()
 
     const monthButtons = wrapper.findAll('[class*="grid-cols-3"] button')
-    await monthButtons[0].trigger('click')
+    await monthButtons[0]?.trigger('click')
     await nextTick()
 
     const labelAfter = wrapper.find('[class*="cornflower-blue-600"]').text()
@@ -252,9 +262,9 @@ describe('Calendar', () => {
   it('selects correct year from year drum', async () => {
     const wrapper = mountCalendar({ modelValue: TODAY, monthYearPicker: true })
 
-    const header = wrapper.find('[class*="cornflower-blue-600"]')
+    const header = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]')
     const headerButtons = header.findAll('button')
-    await headerButtons[1].trigger('click')
+    await headerButtons[1]?.trigger('click')
     await nextTick()
 
     const yearButtons = wrapper.findAll('[class*="snap-center"]')

package/src/components/Calendar/Calendar.vue

@@ -15,6 +15,7 @@ import {
   startOfDay,
   endOfDay,
 } from 'date-fns'
+import { fromZonedTime, toZonedTime } from 'date-fns-tz'
 import { nl } from 'date-fns/locale'
 import CalendarHeader from './_CalendarHeader.vue'
 import CalendarDayView from './_CalendarDayView.vue'
@@ -42,11 +43,14 @@ const {
   minDate,
   maxDate,
   monthYearPicker = false,
+  timezone = 'UTC',
 } = defineProps<NexxtCalendarProps>()
 
 // ── State ─────────────────────────────────────────────────────────────────────
 
-const viewDate = ref<Date>(model.value ? new Date(model.value) : new Date())
+const viewDate = ref<Date>(
+  model.value ? toZonedTime(new Date(model.value), timezone) : toZonedTime(new Date(), timezone),
+)
 const pickerView = ref<PickerView>('days')
 const dayViewRef = ref<InstanceType<typeof CalendarDayView> | null>(null)
 const dayTransition = ref<DayTransition>('fade')
@@ -54,7 +58,7 @@ const dayTransition = ref<DayTransition>('fade')
 // ── Watchers ──────────────────────────────────────────────────────────────────
 
 watch(model, (val) => {
-  if (val) viewDate.value = new Date(val)
+  if (val) viewDate.value = toZonedTime(new Date(val), timezone)
 })
 
 // ── Logic ─────────────────────────────────────────────────────────────────────
@@ -66,29 +70,38 @@ const calendarDays = computed(() => {
 })
 
 const isDisabled = (day: Date): boolean => {
-  if (disabledDates.some((d) => isSameDay(d, day))) return true
-  if (minDate && isBefore(day, startOfDay(minDate))) return true
-  if (maxDate && isAfter(day, endOfDay(maxDate))) return true
+  const zonedDay = toZonedTime(day, timezone)
+  if (disabledDates.some((d) => isSameDay(toZonedTime(d, timezone), zonedDay))) return true
+  if (minDate && isBefore(zonedDay, startOfDay(toZonedTime(minDate, timezone)))) return true
+  if (maxDate && isAfter(zonedDay, endOfDay(toZonedTime(maxDate, timezone)))) return true
   return false
 }
 
 // ── Views ─────────────────────────────────────────────────────────────────────
 
 const handleSelectDay = (day: Date) => {
-  if (isDisabled(day)) return
-  if (!isSameMonth(day, viewDate.value)) viewDate.value = startOfMonth(day)
-  model.value = day
-  emit('select', day)
+  const zonedDay = toZonedTime(day, timezone)
+  if (isDisabled(zonedDay)) return
+  if (!isSameMonth(zonedDay, viewDate.value)) viewDate.value = startOfMonth(zonedDay)
+  model.value = fromZonedTime(zonedDay, timezone)
+  emit('select', model.value)
 }
 
 const handleSelectMonth = (monthIndex: number) => {
   dayTransition.value = 'fade'
-  viewDate.value = new Date(viewDate.value.getFullYear(), monthIndex, 1)
+  // Create a new date in the target timezone at the middle of the month
+  const newDate = toZonedTime(
+    new Date(Date.UTC(viewDate.value.getUTCFullYear(), monthIndex, 1)),
+    timezone,
+  )
+  viewDate.value = newDate
   pickerView.value = 'days'
 }
 
 const handleSelectYear = (year: number) => {
-  viewDate.value = new Date(year, viewDate.value.getMonth(), 1)
+  // Use target timezone to create a date at the start of the year/current month
+  const newDate = toZonedTime(new Date(Date.UTC(year, viewDate.value.getUTCMonth(), 1)), timezone)
+  viewDate.value = newDate
   pickerView.value = 'months'
 }
 
@@ -97,13 +110,15 @@ const handleSelectYear = (year: number) => {
 const canGoPrev = computed(() => {
   if (pickerView.value !== 'days') return false
   if (!minDate) return true
-  return !isBefore(endOfMonth(subMonths(viewDate.value, 1)), startOfDay(minDate))
+  const prevMonth = subMonths(viewDate.value, 1)
+  return !isBefore(endOfMonth(prevMonth), startOfDay(toZonedTime(minDate, timezone)))
 })
 
 const canGoNext = computed(() => {
   if (pickerView.value !== 'days') return false
   if (!maxDate) return true
-  return !isAfter(startOfMonth(addMonths(viewDate.value, 1)), endOfDay(maxDate))
+  const nextMonth = addMonths(viewDate.value, 1)
+  return !isAfter(startOfMonth(nextMonth), endOfDay(toZonedTime(maxDate, timezone)))
 })
 
 const handlePrev = () => {
@@ -192,6 +207,7 @@ const currentDayTransition = computed(() =>
           :marked-dates="markedDates"
           :locale="locale"
           :is-disabled="isDisabled"
+          :timezone="timezone"
           @select="handleSelectDay"
         />
 
@@ -204,6 +220,7 @@ const currentDayTransition = computed(() =>
           :min-date="minDate"
           :max-date="maxDate"
           :locale="locale"
+          :timezone="timezone"
           @select="handleSelectMonth"
         />
 
@@ -213,6 +230,7 @@ const currentDayTransition = computed(() =>
           :view-year="viewDate.getFullYear()"
           :min-date="minDate"
           :max-date="maxDate"
+          :timezone="timezone"
           @select="handleSelectYear"
         />
       </Transition>

package/src/components/Calendar/_CalendarDayView.test.ts

@@ -9,33 +9,32 @@ const start = startOfWeek(startOfMonth(VIEW_DATE), { weekStartsOn: 1 })
 const end = endOfWeek(endOfMonth(VIEW_DATE), { weekStartsOn: 1 })
 const DAYS = eachDayOfInterval({ start, end })
 
+const defaults = {
+  viewDate: VIEW_DATE,
+  calendarDays: DAYS,
+  modelValue: null,
+  markedDates: [],
+  locale: nl,
+  isDisabled: () => false,
+  timezone: 'UTC',
+}
+
+const mountDayView = (props: Record<string, unknown> = {}) =>
+  mount(CalendarDayView, {
+    props: { ...defaults, ...props },
+  })
+
 describe('CalendarDayView', () => {
   it('renders the correct number of days', () => {
-    const wrapper = mount(CalendarDayView, {
-      props: {
-        viewDate: VIEW_DATE,
-        calendarDays: DAYS,
-        modelValue: null,
-        markedDates: [],
-        locale: nl,
-        isDisabled: () => false,
-      },
-    })
+    const wrapper = mountDayView()
     const dayButtons = wrapper.findAll('button')
     expect(dayButtons.length).toBe(DAYS.length)
   })
 
   it('highlights the selected day', () => {
     const selectedDate = new Date(2026, 2, 15)
-    const wrapper = mount(CalendarDayView, {
-      props: {
-        viewDate: VIEW_DATE,
-        calendarDays: DAYS,
-        modelValue: selectedDate,
-        markedDates: [],
-        locale: nl,
-        isDisabled: () => false,
-      },
+    const wrapper = mountDayView({
+      modelValue: selectedDate,
     })
     const selectedCell = wrapper.find('[role="gridcell"][aria-selected="true"]')
     expect(selectedCell.exists()).toBe(true)
@@ -44,15 +43,8 @@ describe('CalendarDayView', () => {
 
   it('marks dates correctly', () => {
     const markedDates = [new Date(2026, 2, 10)]
-    const wrapper = mount(CalendarDayView, {
-      props: {
-        viewDate: VIEW_DATE,
-        calendarDays: DAYS,
-        modelValue: null,
-        markedDates,
-        locale: nl,
-        isDisabled: () => false,
-      },
+    const wrapper = mountDayView({
+      markedDates,
     })
     // In our component, isMarked(day) is used to show a small dot.
     // The dot is a span with bg-cornflower-blue-500 class.
@@ -60,15 +52,8 @@ describe('CalendarDayView', () => {
   })
 
   it('disables dates based on isDisabled prop', () => {
-    const wrapper = mount(CalendarDayView, {
-      props: {
-        viewDate: VIEW_DATE,
-        calendarDays: DAYS,
-        modelValue: null,
-        markedDates: [],
-        locale: nl,
-        isDisabled: (day: Date) => day.getDate() === 15,
-      },
+    const wrapper = mountDayView({
+      isDisabled: (day: Date) => day.getDate() === 15,
     })
     const disabledButton = wrapper.find('button[disabled]')
     expect(disabledButton.exists()).toBe(true)
@@ -76,70 +61,44 @@ describe('CalendarDayView', () => {
   })
 
   it('emits select event when a day is clicked', async () => {
-    const wrapper = mount(CalendarDayView, {
-      props: {
-        viewDate: VIEW_DATE,
-        calendarDays: DAYS,
-        modelValue: null,
-        markedDates: [],
-        locale: nl,
-        isDisabled: () => false,
-      },
-    })
-    await wrapper.findAll('button')[10].trigger('click')
-    expect(wrapper.emitted('select')).toBeTruthy()
-    expect(wrapper.emitted('select')![0][0]).toBeInstanceOf(Date)
+    const wrapper = mountDayView()
+    const button = wrapper.findAll('button')[10]
+    if (button) {
+      await button.trigger('click')
+      expect(wrapper.emitted('select')).toBeTruthy()
+      expect(wrapper.emitted('select')?.[0]?.[0]).toBeInstanceOf(Date)
+    }
   })
 
   it('handles keyboard navigation (ArrowRight)', async () => {
-    const wrapper = mount(CalendarDayView, {
-      props: {
-        viewDate: VIEW_DATE,
-        calendarDays: DAYS,
-        modelValue: null,
-        markedDates: [],
-        locale: nl,
-        isDisabled: () => false,
-      },
+    const wrapper = mountDayView({
       attachTo: document.body,
     })
-    const buttons = wrapper.findAll('button')
-    await buttons[0].trigger('keydown', { key: 'ArrowRight' })
+    const button = wrapper.findAll('button')[0]
+    if (button) {
+      await button.trigger('keydown', { key: 'ArrowRight' })
+    }
     // In vitest/jsdom, focus might not move as easily, so we check if the method logic runs
     // For unit tests, we can also check if emit('select') is called on Enter/Space
   })
 
   it('emits select when Enter or Space is pressed', async () => {
-    const wrapper = mount(CalendarDayView, {
-      props: {
-        viewDate: VIEW_DATE,
-        calendarDays: DAYS,
-        modelValue: null,
-        markedDates: [],
-        locale: nl,
-        isDisabled: () => false,
-      },
-    })
-    const buttons = wrapper.findAll('button')
-    await buttons[0].trigger('keydown', { key: 'Enter' })
-    expect(wrapper.emitted('select')).toBeTruthy()
-    await buttons[0].trigger('keydown', { key: ' ' })
-    expect(wrapper.emitted('select')![1]).toBeTruthy()
+    const wrapper = mountDayView()
+    const button = wrapper.findAll('button')[0]
+    if (button) {
+      await button.trigger('keydown', { key: 'Enter' })
+      expect(wrapper.emitted('select')).toBeTruthy()
+      await button.trigger('keydown', { key: ' ' })
+      expect(wrapper.emitted('select')?.[1]).toBeTruthy()
+    }
   })
 
   it('does not emit select for other keys', async () => {
-    const wrapper = mount(CalendarDayView, {
-      props: {
-        viewDate: VIEW_DATE,
-        calendarDays: DAYS,
-        modelValue: null,
-        markedDates: [],
-        locale: nl,
-        isDisabled: () => false,
-      },
-    })
-    const buttons = wrapper.findAll('button')
-    await buttons[0].trigger('keydown', { key: 'Tab' })
-    expect(wrapper.emitted('select')).toBeFalsy()
+    const wrapper = mountDayView()
+    const button = wrapper.findAll('button')[0]
+    if (button) {
+      await button.trigger('keydown', { key: 'Tab' })
+      expect(wrapper.emitted('select')).toBeFalsy()
+    }
   })
 })