daisy-ui-kit 5.0.0-pre.24 → 5.0.0-pre.25

package/app/components/Calendar.vue

@@ -1,89 +1,175 @@
 <script setup lang="ts">
-import type { PikadayOptions } from 'pikaday'
-import { onMounted, ref } from 'vue'
-import { usePikaday } from '../composables/use-pikaday'
-import CalendarSkeleton from './CalendarSkeleton.vue'
+import type { CalendarOptions } from '../composables/use-calendar'
+import { computed, watch } from 'vue'
+import { useCalendar } from '../composables/use-calendar'
 
 const props = defineProps<{
   /** Bound value: Date object or ISO string or null */
-  modelValue: Date | string | null
-  /** All Pikaday options (except `container` and `bound`) */
-  options?: Omit<PikadayOptions, 'container' | 'bound'>
+  modelValue?: Date | string | null
+  /** Calendar options */
+  options?: CalendarOptions
   /** If true, default to today when no value provided */
   autoDefault?: boolean
 }>()
+
 const emit = defineEmits<{
   (e: 'update:modelValue', v: Date | null): void
 }>()
 
-const containerRef = ref<HTMLElement | null>(null)
-const loading = ref(true)
-
-const defaultOptions: Partial<PikadayOptions> = {
-  format: 'D MMM YYYY',
+// Parse initial date from modelValue
+function parseDate(value: Date | string | null | undefined): Date | null {
+  if (!value) return null
+  if (value instanceof Date) return value
+  const d = new Date(value)
+  return Number.isNaN(d.getTime()) ? null : d
 }
 
-// Determine the date to use for the skeleton
-const skeletonDate = computed(() => {
-  // Try to use modelValue if it's a Date
-  if (props.modelValue instanceof Date) {
-    return props.modelValue
-  }
-  // Try to parse modelValue if it's a string
-  if (typeof props.modelValue === 'string') {
-    return new Date(props.modelValue)
-  }
-  // Use defaultDate from options if provided
-  if (props.options?.defaultDate instanceof Date) {
-    return props.options.defaultDate
-  }
-  // Fall back to today
-  return new Date()
+const initialDate = computed(() => {
+  const parsed = parseDate(props.modelValue)
+  if (parsed) return parsed
+  if (props.autoDefault) return new Date()
+  return null
 })
 
-function handleSelect(date: Date) {
+const {
+  selectedDate,
+  viewMonth,
+  viewYear,
+  monthName,
+  weekdayHeaders,
+  weekdayHeadersFull,
+  calendarDays,
+  prevMonth,
+  nextMonth,
+  selectDate,
+  goToDate,
+} = useCalendar(initialDate.value, props.options)
+
+// Sync selectedDate back to modelValue
+watch(selectedDate, date => {
   emit('update:modelValue', date)
-}
+})
 
-const { createPicker } = usePikaday(
-  {
-    ...defaultOptions,
-    ...props.options,
-    bound: false,
+// Watch for external modelValue changes
+watch(
+  () => props.modelValue,
+  newValue => {
+    const parsed = parseDate(newValue)
+    if (parsed && (!selectedDate.value || parsed.getTime() !== selectedDate.value.getTime())) {
+      selectDate(parsed)
+      goToDate(parsed)
+    }
   },
-  handleSelect,
 )
 
-onMounted(async () => {
-  if (containerRef.value) {
-    const picker = await createPicker(containerRef.value)
-    if (picker && picker.el && !containerRef.value.contains(picker.el)) {
-      containerRef.value.appendChild(picker.el)
-    }
-    loading.value = false
-  }
-})
+function handleDayClick(day: (typeof calendarDays.value)[0]) {
+  if (day.isDisabled) return
+  selectDate(day.date)
+}
 </script>
 
 <template>
-  <div class="relative w-[270px] h-[270px]">
-    <div class="absolute inset-0">
-      <CalendarSkeleton
-        :number-of-months="options?.numberOfMonths ?? 1"
-        :date="skeletonDate"
-        :first-day="options?.firstDay"
-        :class="loading ? '' : 'opacity-0 pointer-events-none transition-opacity duration-300'"
-      />
+  <div class="pika-single">
+    <div class="pika-lendar">
+      <!-- Header with navigation -->
+      <div class="pika-title">
+        <div class="pika-label">
+          {{ monthName }}
+          <select
+            class="pika-select pika-select-month"
+            :value="viewMonth"
+            @change="
+              e => {
+                const target = e.target as HTMLSelectElement
+                const newMonth = parseInt(target.value, 10)
+                const d = new Date(viewYear, newMonth, 1)
+                goToDate(d)
+              }
+            "
+          >
+            <option
+              v-for="(m, i) in [
+                'January',
+                'February',
+                'March',
+                'April',
+                'May',
+                'June',
+                'July',
+                'August',
+                'September',
+                'October',
+                'November',
+                'December',
+              ]"
+              :key="i"
+              :value="i"
+            >
+              {{ m }}
+            </option>
+          </select>
+        </div>
+        <div class="pika-label">
+          {{ viewYear }}
+          <select
+            class="pika-select pika-select-year"
+            :value="viewYear"
+            @change="
+              e => {
+                const target = e.target as HTMLSelectElement
+                const newYear = parseInt(target.value, 10)
+                const d = new Date(newYear, viewMonth, 1)
+                goToDate(d)
+              }
+            "
+          >
+            <option v-for="y in Array.from({ length: 21 }, (_, i) => viewYear - 10 + i)" :key="y" :value="y">
+              {{ y }}
+            </option>
+          </select>
+        </div>
+        <button type="button" class="pika-prev" @click="prevMonth">Previous Month</button>
+        <button type="button" class="pika-next" @click="nextMonth">Next Month</button>
+      </div>
+
+      <!-- Calendar grid -->
+      <table class="pika-table" role="grid">
+        <thead>
+          <tr>
+            <th v-for="(day, i) in weekdayHeaders" :key="i" scope="col">
+              <abbr :title="weekdayHeadersFull[i]">{{ day }}</abbr>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="week in 6" :key="week" class="pika-row">
+            <td
+              v-for="dayIndex in 7"
+              :key="dayIndex"
+              :class="{
+                'is-today': calendarDays[(week - 1) * 7 + dayIndex - 1]?.isToday,
+                'is-selected': calendarDays[(week - 1) * 7 + dayIndex - 1]?.isSelected,
+                'is-disabled': calendarDays[(week - 1) * 7 + dayIndex - 1]?.isDisabled,
+                'is-outside-current-month': calendarDays[(week - 1) * 7 + dayIndex - 1]?.isOutsideMonth,
+              }"
+              :aria-selected="calendarDays[(week - 1) * 7 + dayIndex - 1]?.isSelected"
+              :data-day="calendarDays[(week - 1) * 7 + dayIndex - 1]?.day"
+            >
+              <button
+                type="button"
+                class="pika-button pika-day"
+                :disabled="calendarDays[(week - 1) * 7 + dayIndex - 1]?.isDisabled"
+                :data-pika-year="calendarDays[(week - 1) * 7 + dayIndex - 1]?.year"
+                :data-pika-month="calendarDays[(week - 1) * 7 + dayIndex - 1]?.month"
+                :data-pika-day="calendarDays[(week - 1) * 7 + dayIndex - 1]?.day"
+                @click="handleDayClick(calendarDays[(week - 1) * 7 + dayIndex - 1]!)"
+              >
+                {{ calendarDays[(week - 1) * 7 + dayIndex - 1]?.day }}
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
-    <div ref="containerRef" class="absolute inset-0 inline-block w-full h-full" />
-    <span class="pika-single hidden" />
   </div>
 </template>
-
-<style>
-.has-event {
-  .pika-button {
-    color: var(--color-primary);
-  }
-}
-</style>

package/app/components/CalendarInput.vue

@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import type { PikadayOptions } from 'pikaday'
-import type { ComponentPublicInstance } from 'vue'
-import { onMounted, ref, watch } from 'vue'
-
-import { usePikaday } from '../composables/use-pikaday'
+import type { CalendarOptions } from '../composables/use-calendar'
+import { computed, ref, watch } from 'vue'
+import { useCalendar } from '../composables/use-calendar'
+import { randomString } from '../utils/random-string'
 
 const props = defineProps<{
   /** Bound value: Date object or ISO string or null */
-  modelValue: Date | string | number | null
-  /** All Pikaday options (except `field`) */
-  options?: Omit<PikadayOptions, 'field'>
+  modelValue?: Date | string | number | null
+  /** Calendar options */
+  options?: CalendarOptions
   /** If true, default to today when no value provided */
   autoDefault?: boolean
   placeholder?: string
@@ -32,143 +31,245 @@ const props = defineProps<{
   sm?: boolean
   xs?: boolean
 }>()
+
 const emit = defineEmits<{
   (e: 'update:modelValue', v: Date | null): void
   (e: 'update:inputValue', v: string | null): void
 }>()
-const inputRef = ref<ComponentPublicInstance | null>(null)
-const inputValue = ref<string | null>(null)
-const visible = ref(false)
 
-const defaultOptions: Partial<PikadayOptions> = {
-  format: 'D MMM YYYY',
-}
+const popoverId = `calendar-popover-${randomString()}`
+const anchorName = `--calendar-anchor-${randomString()}`
+const inputRef = ref<HTMLInputElement | null>(null)
+const popoverRef = ref<HTMLElement | null>(null)
 
-const { picker, createPicker } = usePikaday(
-  {
-    ...defaultOptions,
-    ...props.options,
-    bound: true,
-    field: undefined, // will be set below
-  },
-  handleSelect,
-  handleOpen,
-  handleClose,
-)
-
-function handleSelect(date: Date) {
-  emit('update:modelValue', date)
-  inputValue.value = picker.value?.toString() ?? ''
-  emit('update:inputValue', inputValue.value)
-}
-function handleOpen() {
-  visible.value = true
-}
-function handleClose() {
-  visible.value = false
+// Parse date from various input types
+function parseDate(value: Date | string | number | null | undefined): Date | null {
+  if (!value) return null
+  if (value instanceof Date) return value
+  const d = new Date(value)
+  return Number.isNaN(d.getTime()) ? null : d
 }
 
-onMounted(async () => {
-  const inputEl = inputRef.value as HTMLInputElement | null
-  // Format and set the initial input value BEFORE initializing Pikaday
-  if (props.modelValue) {
-    let d: Date | null = null
-    if (props.modelValue instanceof Date) {
-      d = props.modelValue
-    } else if (typeof props.modelValue === 'string') {
-      const tmp = new Date(props.modelValue)
-      if (!Number.isNaN(tmp.getTime())) {
-        d = tmp
-      }
-    }
-    if (d) {
-      const day = d.getDate()
-      const month = d.toLocaleString('en-US', { month: 'short' })
-      const year = d.getFullYear()
-      inputValue.value = `${day} ${month} ${year}`
-    }
-  }
-  if (inputEl) {
-    picker.value = await createPicker(inputEl)
-    // Do not call setDate here
-    if (picker.value && (picker.value as any).config?.bound === false) {
-      picker.value.hide()
-    }
-  }
+const initialDate = computed(() => {
+  const parsed = parseDate(props.modelValue)
+  if (parsed) return parsed
+  if (props.autoDefault) return new Date()
+  return null
 })
 
-function onFocus() {
-  if (picker.value) {
-    let d: Date | null = null
-    if (props.modelValue instanceof Date) {
-      d = props.modelValue
-    } else if (typeof props.modelValue === 'string') {
-      const tmp = new Date(props.modelValue)
-      if (!Number.isNaN(tmp.getTime())) {
-        d = tmp
-      }
-    }
-    picker.value.setDate(d, true)
-  }
-}
+const {
+  selectedDate,
+  viewMonth,
+  viewYear,
+  monthName,
+  weekdayHeaders,
+  weekdayHeadersFull,
+  calendarDays,
+  prevMonth,
+  nextMonth,
+  selectDate,
+  goToDate,
+  formatDate,
+} = useCalendar(initialDate.value, props.options)
+
+// Input display value
+const inputValue = computed(() => formatDate('D MMM YYYY'))
 
+// Sync selectedDate back to modelValue
+watch(selectedDate, date => {
+  emit('update:modelValue', date)
+  emit('update:inputValue', formatDate('D MMM YYYY'))
+})
+
+// Watch for external modelValue changes
 watch(
   () => props.modelValue,
-  val => {
-    if (!picker.value) {
-      return
-    }
-    if (!visible.value) {
-      if (val instanceof Date) {
-        picker.value.setDate(val, true)
-        inputValue.value = picker.value.toString()
-      } else if (typeof val === 'string') {
-        const d = new Date(val)
-        if (!Number.isNaN(d.getTime())) {
-          picker.value.setDate(d, true)
-          inputValue.value = picker.value.toString()
-        }
-      } else {
-        picker.value.setDate(null, true)
-        inputValue.value = ''
-      }
+  newValue => {
+    const parsed = parseDate(newValue)
+    if (parsed && (!selectedDate.value || parsed.getTime() !== selectedDate.value.getTime())) {
+      selectDate(parsed)
+      goToDate(parsed)
+    } else if (!newValue && selectedDate.value) {
+      selectedDate.value = null
     }
   },
 )
+
+function handleDayClick(day: (typeof calendarDays.value)[0]) {
+  if (day.isDisabled) return
+  selectDate(day.date)
+  popoverRef.value?.hidePopover()
+}
+
+function handleClick() {
+  // Sync view to selected date when opening
+  if (selectedDate.value) {
+    goToDate(selectedDate.value)
+  }
+  popoverRef.value?.togglePopover()
+}
 </script>
 
 <template>
-  <input
-    ref="inputRef"
-    type="text"
-    :value="inputValue"
-    :placeholder="props.placeholder"
-    :disabled="props.disabled"
-    class="input"
-    :class="[
-      { validator: props.validator },
-      { 'input-primary': props.primary || props.color === 'primary' },
-      { 'input-secondary': props.secondary || props.color === 'secondary' },
-      { 'input-accent': props.accent || props.color === 'accent' },
-      { 'input-info': props.info || props.color === 'info' },
-      { 'input-success': props.success || props.color === 'success' },
-      { 'input-warning': props.warning || props.color === 'warning' },
-      { 'input-error': props.error || props.color === 'error' },
-      { 'input-ghost': props.ghost },
-      { 'input-xl': props.xl || props.size === 'xl' },
-      { 'input-lg': props.lg || props.size === 'lg' },
-      { 'input-md': props.md || props.size === 'md' },
-      { 'input-sm': props.sm || props.size === 'sm' },
-      { 'input-xs': props.xs || props.size === 'xs' },
-      { 'join-item': props.join },
-    ]"
-    v-bind="$attrs"
-    @focus="onFocus"
-    @input="
-      e => {
-        const val = (e.target as HTMLInputElement).value
-        emit('update:inputValue', val)
-      }
-    "
-  />
+  <div class="relative inline-block">
+    <input
+      ref="inputRef"
+      type="text"
+      readonly
+      :value="inputValue"
+      :placeholder="props.placeholder"
+      :disabled="props.disabled"
+      class="input cursor-pointer"
+      :class="[
+        { validator: props.validator },
+        { 'input-primary': props.primary || props.color === 'primary' },
+        { 'input-secondary': props.secondary || props.color === 'secondary' },
+        { 'input-accent': props.accent || props.color === 'accent' },
+        { 'input-info': props.info || props.color === 'info' },
+        { 'input-success': props.success || props.color === 'success' },
+        { 'input-warning': props.warning || props.color === 'warning' },
+        { 'input-error': props.error || props.color === 'error' },
+        { 'input-ghost': props.ghost },
+        { 'input-xl': props.xl || props.size === 'xl' },
+        { 'input-lg': props.lg || props.size === 'lg' },
+        { 'input-md': props.md || props.size === 'md' },
+        { 'input-sm': props.sm || props.size === 'sm' },
+        { 'input-xs': props.xs || props.size === 'xs' },
+        { 'join-item': props.join },
+      ]"
+      :style="{ 'anchor-name': anchorName } as any"
+      v-bind="$attrs"
+      @click="handleClick"
+    />
+
+    <!-- Dropdown calendar using Popover API -->
+    <div
+      :id="popoverId"
+      ref="popoverRef"
+      popover="auto"
+      class="pika-single calendar-popover"
+      :style="{ 'position-anchor': anchorName } as any"
+    >
+      <div class="pika-lendar">
+        <!-- Header with navigation -->
+        <div class="pika-title">
+          <div class="pika-label">
+            {{ monthName }}
+            <select
+              class="pika-select pika-select-month"
+              :value="viewMonth"
+              @change="
+                e => {
+                  const target = e.target as HTMLSelectElement
+                  const newMonth = parseInt(target.value, 10)
+                  const d = new Date(viewYear, newMonth, 1)
+                  goToDate(d)
+                }
+              "
+            >
+              <option
+                v-for="(m, i) in [
+                  'January',
+                  'February',
+                  'March',
+                  'April',
+                  'May',
+                  'June',
+                  'July',
+                  'August',
+                  'September',
+                  'October',
+                  'November',
+                  'December',
+                ]"
+                :key="i"
+                :value="i"
+              >
+                {{ m }}
+              </option>
+            </select>
+          </div>
+          <div class="pika-label">
+            {{ viewYear }}
+            <select
+              class="pika-select pika-select-year"
+              :value="viewYear"
+              @change="
+                e => {
+                  const target = e.target as HTMLSelectElement
+                  const newYear = parseInt(target.value, 10)
+                  const d = new Date(newYear, viewMonth, 1)
+                  goToDate(d)
+                }
+              "
+            >
+              <option v-for="y in Array.from({ length: 21 }, (_, i) => viewYear - 10 + i)" :key="y" :value="y">
+                {{ y }}
+              </option>
+            </select>
+          </div>
+          <button type="button" class="pika-prev" @click="prevMonth">Previous Month</button>
+          <button type="button" class="pika-next" @click="nextMonth">Next Month</button>
+        </div>
+
+        <!-- Calendar grid -->
+        <table class="pika-table" role="grid">
+          <thead>
+            <tr>
+              <th v-for="(day, i) in weekdayHeaders" :key="i" scope="col">
+                <abbr :title="weekdayHeadersFull[i]">{{ day }}</abbr>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="week in 6" :key="week" class="pika-row">
+              <td
+                v-for="dayIndex in 7"
+                :key="dayIndex"
+                :class="{
+                  'is-today': calendarDays[(week - 1) * 7 + dayIndex - 1]?.isToday,
+                  'is-selected': calendarDays[(week - 1) * 7 + dayIndex - 1]?.isSelected,
+                  'is-disabled': calendarDays[(week - 1) * 7 + dayIndex - 1]?.isDisabled,
+                  'is-outside-current-month': calendarDays[(week - 1) * 7 + dayIndex - 1]?.isOutsideMonth,
+                }"
+                :aria-selected="calendarDays[(week - 1) * 7 + dayIndex - 1]?.isSelected"
+              >
+                <button
+                  type="button"
+                  class="pika-button pika-day"
+                  :disabled="calendarDays[(week - 1) * 7 + dayIndex - 1]?.isDisabled"
+                  @click="handleDayClick(calendarDays[(week - 1) * 7 + dayIndex - 1]!)"
+                >
+                  {{ calendarDays[(week - 1) * 7 + dayIndex - 1]?.day }}
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
 </template>
+
+<style>
+.calendar-popover[popover] {
+  position-area: block-end span-inline-end;
+  position-try-fallbacks:
+    flip-block,
+    flip-inline,
+    flip-block flip-inline;
+  margin: 0;
+  margin-top: 0.25rem;
+  /* Reset default popover styles */
+  border: none;
+  inset: auto;
+}
+
+.calendar-popover[popover]:popover-open {
+  position: fixed;
+}
+
+.calendar-popover[popover]:not(:popover-open) {
+  display: none;
+}
+</style>

package/app/composables/__tests__/use-calendar.test.ts

@@ -0,0 +1,239 @@
+import { describe, expect, it } from 'vitest'
+import { useCalendar } from '../use-calendar'
+
+describe('useCalendar', () => {
+  describe('initialization', () => {
+    it('initializes with null date by default', () => {
+      const { selectedDate } = useCalendar()
+      expect(selectedDate.value).toBeNull()
+    })
+
+    it('initializes with provided date', () => {
+      const date = new Date(2025, 5, 15) // June 15, 2025
+      const { selectedDate } = useCalendar(date)
+      expect(selectedDate.value?.getFullYear()).toBe(2025)
+      expect(selectedDate.value?.getMonth()).toBe(5)
+      expect(selectedDate.value?.getDate()).toBe(15)
+    })
+
+    it('sets viewDate to today when no initial date provided', () => {
+      const { viewDate } = useCalendar()
+      const today = new Date()
+      expect(viewDate.value.getFullYear()).toBe(today.getFullYear())
+      expect(viewDate.value.getMonth()).toBe(today.getMonth())
+    })
+
+    it('sets viewDate to initial date when provided', () => {
+      const date = new Date(2025, 5, 15)
+      const { viewDate } = useCalendar(date)
+      expect(viewDate.value.getFullYear()).toBe(2025)
+      expect(viewDate.value.getMonth()).toBe(5)
+    })
+  })
+
+  describe('weekday headers', () => {
+    it('returns weekday headers starting with Sunday by default', () => {
+      const { weekdayHeaders } = useCalendar()
+      expect(weekdayHeaders.value).toEqual(['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'])
+    })
+
+    it('returns weekday headers starting with Monday when firstDay is 1', () => {
+      const { weekdayHeaders } = useCalendar(null, { firstDay: 1 })
+      expect(weekdayHeaders.value).toEqual(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'])
+    })
+
+    it('returns full weekday names for accessibility', () => {
+      const { weekdayHeadersFull } = useCalendar()
+      expect(weekdayHeadersFull.value).toEqual([
+        'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday',
+      ])
+    })
+  })
+
+  describe('month display', () => {
+    it('returns correct month name', () => {
+      const date = new Date(2025, 5, 15) // June
+      const { monthName } = useCalendar(date)
+      expect(monthName.value).toBe('June')
+    })
+
+    it('returns correct short month name', () => {
+      const date = new Date(2025, 11, 25) // December
+      const { monthNameShort } = useCalendar(date)
+      expect(monthNameShort.value).toBe('Dec')
+    })
+  })
+
+  describe('calendar days', () => {
+    it('generates 42 days (6 weeks)', () => {
+      const { calendarDays } = useCalendar(new Date(2025, 5, 15))
+      expect(calendarDays.value).toHaveLength(42)
+    })
+
+    it('marks days outside current month', () => {
+      const { calendarDays } = useCalendar(new Date(2025, 5, 15)) // June 2025
+      const outsideDays = calendarDays.value.filter(d => d.isOutsideMonth)
+      expect(outsideDays.length).toBeGreaterThan(0)
+    })
+
+    it('marks the selected date', () => {
+      const date = new Date(2025, 5, 15)
+      const { calendarDays } = useCalendar(date)
+      const selectedDays = calendarDays.value.filter(d => d.isSelected)
+      expect(selectedDays).toHaveLength(1)
+      expect(selectedDays[0]?.day).toBe(15)
+    })
+
+    it('marks today correctly', () => {
+      const today = new Date()
+      const { calendarDays, goToDate } = useCalendar()
+      goToDate(today)
+      const todayDays = calendarDays.value.filter(d => d.isToday && !d.isOutsideMonth)
+      expect(todayDays).toHaveLength(1)
+      expect(todayDays[0]?.day).toBe(today.getDate())
+    })
+  })
+
+  describe('navigation', () => {
+    it('navigates to next month', () => {
+      const { viewMonth, viewYear, nextMonth } = useCalendar(new Date(2025, 5, 15))
+      expect(viewMonth.value).toBe(5)
+      nextMonth()
+      expect(viewMonth.value).toBe(6)
+      expect(viewYear.value).toBe(2025)
+    })
+
+    it('navigates to previous month', () => {
+      const { viewMonth, viewYear, prevMonth } = useCalendar(new Date(2025, 5, 15))
+      expect(viewMonth.value).toBe(5)
+      prevMonth()
+      expect(viewMonth.value).toBe(4)
+      expect(viewYear.value).toBe(2025)
+    })
+
+    it('handles year rollover when navigating forward', () => {
+      const { viewMonth, viewYear, nextMonth } = useCalendar(new Date(2025, 11, 15))
+      expect(viewMonth.value).toBe(11)
+      nextMonth()
+      expect(viewMonth.value).toBe(0)
+      expect(viewYear.value).toBe(2026)
+    })
+
+    it('handles year rollover when navigating backward', () => {
+      const { viewMonth, viewYear, prevMonth } = useCalendar(new Date(2025, 0, 15))
+      expect(viewMonth.value).toBe(0)
+      prevMonth()
+      expect(viewMonth.value).toBe(11)
+      expect(viewYear.value).toBe(2024)
+    })
+
+    it('goes to specific month', () => {
+      const { viewMonth, goToMonth } = useCalendar(new Date(2025, 5, 15))
+      goToMonth(10)
+      expect(viewMonth.value).toBe(10)
+    })
+
+    it('goes to specific year', () => {
+      const { viewYear, goToYear } = useCalendar(new Date(2025, 5, 15))
+      goToYear(2030)
+      expect(viewYear.value).toBe(2030)
+    })
+
+    it('goes to today', () => {
+      const { viewMonth, viewYear, goToToday } = useCalendar(new Date(2020, 0, 1))
+      const today = new Date()
+      goToToday()
+      expect(viewMonth.value).toBe(today.getMonth())
+      expect(viewYear.value).toBe(today.getFullYear())
+    })
+  })
+
+  describe('selection', () => {
+    it('selects a date', () => {
+      const { selectedDate, selectDate } = useCalendar()
+      const date = new Date(2025, 5, 20)
+      selectDate(date)
+      expect(selectedDate.value?.getDate()).toBe(20)
+      expect(selectedDate.value?.getMonth()).toBe(5)
+    })
+
+    it('clears selection', () => {
+      const { selectedDate, clearSelection } = useCalendar(new Date(2025, 5, 15))
+      expect(selectedDate.value).not.toBeNull()
+      clearSelection()
+      expect(selectedDate.value).toBeNull()
+    })
+
+    it('does not select disabled dates', () => {
+      const minDate = new Date(2025, 5, 10)
+      const { selectedDate, selectDate } = useCalendar(null, { minDate })
+      selectDate(new Date(2025, 5, 5)) // Before minDate
+      expect(selectedDate.value).toBeNull()
+    })
+  })
+
+  describe('date constraints', () => {
+    it('marks dates before minDate as disabled', () => {
+      const minDate = new Date(2025, 5, 15)
+      const { calendarDays } = useCalendar(new Date(2025, 5, 20), { minDate })
+      const june14 = calendarDays.value.find(d => d.day === 14 && d.month === 5)
+      const june15 = calendarDays.value.find(d => d.day === 15 && d.month === 5)
+      expect(june14?.isDisabled).toBe(true)
+      expect(june15?.isDisabled).toBe(false)
+    })
+
+    it('marks dates after maxDate as disabled', () => {
+      const maxDate = new Date(2025, 5, 15)
+      const { calendarDays } = useCalendar(new Date(2025, 5, 10), { maxDate })
+      const june15 = calendarDays.value.find(d => d.day === 15 && d.month === 5)
+      const june16 = calendarDays.value.find(d => d.day === 16 && d.month === 5)
+      expect(june15?.isDisabled).toBe(false)
+      expect(june16?.isDisabled).toBe(true)
+    })
+  })
+
+  describe('formatting', () => {
+    it('formats date with default format', () => {
+      const { formatDate } = useCalendar(new Date(2025, 5, 15))
+      expect(formatDate()).toBe('15 Jun 2025')
+    })
+
+    it('formats date with custom format', () => {
+      const { formatDate } = useCalendar(new Date(2025, 5, 15))
+      expect(formatDate('YYYY-MM-DD')).toBe('2025-06-15')
+    })
+
+    it('formats date with full month name', () => {
+      const { formatDate } = useCalendar(new Date(2025, 5, 15))
+      expect(formatDate('MMMM D, YYYY')).toBe('June 15, 2025')
+    })
+
+    it('returns empty string when no date selected', () => {
+      const { formatDate } = useCalendar()
+      expect(formatDate()).toBe('')
+    })
+  })
+
+  describe('utility functions', () => {
+    it('isSameDay returns true for same day', () => {
+      const { isSameDay } = useCalendar()
+      const a = new Date(2025, 5, 15, 10, 30)
+      const b = new Date(2025, 5, 15, 20, 45)
+      expect(isSameDay(a, b)).toBe(true)
+    })
+
+    it('isSameDay returns false for different days', () => {
+      const { isSameDay } = useCalendar()
+      const a = new Date(2025, 5, 15)
+      const b = new Date(2025, 5, 16)
+      expect(isSameDay(a, b)).toBe(false)
+    })
+
+    it('isSameDay handles null values', () => {
+      const { isSameDay } = useCalendar()
+      expect(isSameDay(null, new Date())).toBe(false)
+      expect(isSameDay(new Date(), null)).toBe(false)
+      expect(isSameDay(null, null)).toBe(false)
+    })
+  })
+})

package/app/composables/use-calendar.ts

@@ -0,0 +1,288 @@
+import { computed, ref } from 'vue'
+
+export interface CalendarOptions {
+  /** First day of week: 0 = Sunday, 1 = Monday, etc. */
+  firstDay?: number
+  /** Minimum selectable date */
+  minDate?: Date | null
+  /** Maximum selectable date */
+  maxDate?: Date | null
+  /** Locale for formatting (default: 'en-US') */
+  locale?: string
+  /** Short month names */
+  monthsShort?: string[]
+  /** Full month names */
+  months?: string[]
+  /** Short weekday names */
+  weekdaysShort?: string[]
+  /** Full weekday names */
+  weekdays?: string[]
+}
+
+export interface CalendarDay {
+  date: Date
+  day: number
+  month: number
+  year: number
+  isToday: boolean
+  isSelected: boolean
+  isDisabled: boolean
+  isOutsideMonth: boolean
+}
+
+const DEFAULT_MONTHS = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+]
+
+const DEFAULT_MONTHS_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+const DEFAULT_WEEKDAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+
+const DEFAULT_WEEKDAYS_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+
+export function useCalendar(initialDate: Date | null = null, options: CalendarOptions = {}) {
+  const {
+    firstDay = 0,
+    minDate = null,
+    maxDate = null,
+    months = DEFAULT_MONTHS,
+    monthsShort = DEFAULT_MONTHS_SHORT,
+    weekdays = DEFAULT_WEEKDAYS,
+    weekdaysShort = DEFAULT_WEEKDAYS_SHORT,
+  } = options
+
+  // The currently selected date
+  const selectedDate = ref<Date | null>(initialDate)
+
+  // The month/year currently being viewed
+  const viewDate = ref(initialDate ? new Date(initialDate) : new Date())
+
+  // Current view month/year
+  const viewMonth = computed(() => viewDate.value.getMonth())
+  const viewYear = computed(() => viewDate.value.getFullYear())
+
+  // Month/year display strings
+  const monthName = computed(() => months[viewMonth.value])
+  const monthNameShort = computed(() => monthsShort[viewMonth.value])
+
+  // Weekday headers adjusted for firstDay (short names for display)
+  const weekdayHeaders = computed(() => {
+    const headers: string[] = []
+    for (let i = 0; i < 7; i++) {
+      headers.push(weekdaysShort[(i + firstDay) % 7] ?? '')
+    }
+    return headers
+  })
+
+  // Full weekday names for accessibility (title attributes, screen readers)
+  const weekdayHeadersFull = computed(() => {
+    const headers: string[] = []
+    for (let i = 0; i < 7; i++) {
+      headers.push(weekdays[(i + firstDay) % 7] ?? '')
+    }
+    return headers
+  })
+
+  // Get days in a month
+  function getDaysInMonth(year: number, month: number): number {
+    return new Date(year, month + 1, 0).getDate()
+  }
+
+  // Check if two dates are the same day
+  function isSameDay(a: Date | null, b: Date | null): boolean {
+    if (!a || !b) return false
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
+  }
+
+  // Check if a date is today
+  function isToday(date: Date): boolean {
+    return isSameDay(date, new Date())
+  }
+
+  // Check if a date is disabled
+  function isDisabled(date: Date): boolean {
+    if (minDate && date < minDate) return true
+    if (maxDate && date > maxDate) return true
+    return false
+  }
+
+  // Generate calendar days for the current view
+  const calendarDays = computed<CalendarDay[]>(() => {
+    const year = viewYear.value
+    const month = viewMonth.value
+    const days: CalendarDay[] = []
+
+    // First day of the month
+    const firstOfMonth = new Date(year, month, 1)
+    const startDayOfWeek = firstOfMonth.getDay()
+
+    // Calculate offset based on firstDay option
+    const offset = (startDayOfWeek - firstDay + 7) % 7
+
+    // Days from previous month
+    const prevMonth = month === 0 ? 11 : month - 1
+    const prevYear = month === 0 ? year - 1 : year
+    const daysInPrevMonth = getDaysInMonth(prevYear, prevMonth)
+
+    for (let i = offset - 1; i >= 0; i--) {
+      const day = daysInPrevMonth - i
+      const date = new Date(prevYear, prevMonth, day)
+      days.push({
+        date,
+        day,
+        month: prevMonth,
+        year: prevYear,
+        isToday: isToday(date),
+        isSelected: isSameDay(date, selectedDate.value),
+        isDisabled: isDisabled(date),
+        isOutsideMonth: true,
+      })
+    }
+
+    // Days in current month
+    const daysInMonth = getDaysInMonth(year, month)
+    for (let day = 1; day <= daysInMonth; day++) {
+      const date = new Date(year, month, day)
+      days.push({
+        date,
+        day,
+        month,
+        year,
+        isToday: isToday(date),
+        isSelected: isSameDay(date, selectedDate.value),
+        isDisabled: isDisabled(date),
+        isOutsideMonth: false,
+      })
+    }
+
+    // Days from next month to fill the grid (always 6 rows = 42 cells)
+    const nextMonth = month === 11 ? 0 : month + 1
+    const nextYear = month === 11 ? year + 1 : year
+    const remainingDays = 42 - days.length
+
+    for (let day = 1; day <= remainingDays; day++) {
+      const date = new Date(nextYear, nextMonth, day)
+      days.push({
+        date,
+        day,
+        month: nextMonth,
+        year: nextYear,
+        isToday: isToday(date),
+        isSelected: isSameDay(date, selectedDate.value),
+        isDisabled: isDisabled(date),
+        isOutsideMonth: true,
+      })
+    }
+
+    return days
+  })
+
+  // Navigation
+  function prevMonth() {
+    const d = new Date(viewDate.value)
+    d.setMonth(d.getMonth() - 1)
+    viewDate.value = d
+  }
+
+  function nextMonth() {
+    const d = new Date(viewDate.value)
+    d.setMonth(d.getMonth() + 1)
+    viewDate.value = d
+  }
+
+  function goToMonth(month: number) {
+    const d = new Date(viewDate.value)
+    d.setMonth(month)
+    viewDate.value = d
+  }
+
+  function goToYear(year: number) {
+    const d = new Date(viewDate.value)
+    d.setFullYear(year)
+    viewDate.value = d
+  }
+
+  function goToDate(date: Date) {
+    viewDate.value = new Date(date)
+  }
+
+  function goToToday() {
+    viewDate.value = new Date()
+  }
+
+  // Selection
+  function selectDate(date: Date) {
+    if (isDisabled(date)) return
+    selectedDate.value = new Date(date)
+  }
+
+  function clearSelection() {
+    selectedDate.value = null
+  }
+
+  // Format selected date
+  function formatDate(format: string = 'D MMM YYYY'): string {
+    if (!selectedDate.value) return ''
+
+    const d = selectedDate.value
+    const day = d.getDate()
+    const month = d.getMonth()
+    const year = d.getFullYear()
+
+    return format
+      .replace('YYYY', String(year))
+      .replace('YY', String(year).slice(-2))
+      .replace('MMMM', months[month] ?? '')
+      .replace('MMM', monthsShort[month] ?? '')
+      .replace('MM', String(month + 1).padStart(2, '0'))
+      .replace('M', String(month + 1))
+      .replace('DD', String(day).padStart(2, '0'))
+      .replace('D', String(day))
+  }
+
+  return {
+    // State
+    selectedDate,
+    viewDate,
+    viewMonth,
+    viewYear,
+
+    // Display
+    monthName,
+    monthNameShort,
+    weekdayHeaders,
+    weekdayHeadersFull,
+    calendarDays,
+
+    // Navigation
+    prevMonth,
+    nextMonth,
+    goToMonth,
+    goToYear,
+    goToDate,
+    goToToday,
+
+    // Selection
+    selectDate,
+    clearSelection,
+
+    // Formatting
+    formatDate,
+
+    // Utilities
+    isSameDay,
+    isToday,
+    isDisabled,
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "daisy-ui-kit",
   "type": "module",
-  "version": "5.0.0-pre.24",
+  "version": "5.0.0-pre.25",
   "packageManager": "pnpm@10.10.0",
   "author": "feathers.dev",
   "exports": {
@@ -60,7 +60,6 @@
     "@vueuse/integrations": "^13.1.0",
     "focus-trap": "^7.6.4",
     "nuxt": "^4.2.1",
-    "pikaday": "^1.8.2",
     "shiki": "^3.3.0",
     "typescript": "^5.8.3",
     "vue": "^3.5.13",
@@ -72,11 +71,14 @@
     "@stylistic/eslint-plugin": "^4.2.0",
     "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "^4.1.5",
-    "@types/pikaday": "^1.7.9",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@vue/test-utils": "^2.4.6",
     "daisyui": "^5.5.5",
     "eslint": "^9.26.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-vue": "^10.5.1",
-    "tailwindcss": "^4.1.5"
+    "happy-dom": "^20.0.11",
+    "tailwindcss": "^4.1.5",
+    "vitest": "^4.0.16"
   }
 }

package/app/composables/use-pikaday.ts

@@ -1,35 +0,0 @@
-import type Pikaday from 'pikaday'
-import type { PikadayOptions } from 'pikaday'
-import { onBeforeUnmount, ref } from 'vue'
-
-export function usePikaday(
-  options: PikadayOptions,
-  onSelect: (date: Date) => void,
-  onOpen?: () => void,
-  onClose?: () => void,
-) {
-  const picker = ref<Pikaday | null>(null)
-
-  async function createPicker(fieldOrContainer: HTMLElement) {
-    const { default: PikadayLib } = await import('pikaday')
-    picker.value = new PikadayLib({
-      ...options,
-      field: options.bound !== false ? fieldOrContainer : undefined,
-      container: options.bound === false ? fieldOrContainer : undefined,
-      onSelect,
-      onOpen,
-      onClose,
-    })
-    return picker.value
-  }
-
-  onBeforeUnmount(() => {
-    picker.value?.destroy()
-    picker.value = null
-  })
-
-  return {
-    picker,
-    createPicker,
-  }
-}