daisy-ui-kit 5.0.0-pre.10 → 5.0.0-pre.11

package/app/components/Accordion.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { provide, ref, watch } from 'vue';
+import { provide, ref, watch } from 'vue'
 
 const props = defineProps<{
   modelValue?: string | number
@@ -7,10 +7,13 @@ const props = defineProps<{
 const emit = defineEmits(['update:modelValue'])
 
 const value = ref(props.modelValue)
-watch(() => props.modelValue, (val) => {
-  value.value = val
-})
-watch(value, (val) => {
+watch(
+  () => props.modelValue,
+  val => {
+    value.value = val
+  },
+)
+watch(value, val => {
   if (props.modelValue !== val) {
     emit('update:modelValue', val)
   }

package/app/components/Alert.vue

@@ -16,7 +16,8 @@ const props = defineProps<{
 
 <template>
   <div
-    class="alert" :class="{
+    class="alert"
+    :class="{
       'alert-outline': props.outline,
       'alert-dash': props.dash,
       'alert-soft': props.soft,

package/app/components/Avatar.vue

@@ -51,7 +51,7 @@ const maskShapeKeys = [
   'mask-half-2',
 ] as const
 
-type AvatarClassKey = typeof maskShapeKeys[number] | 'rounded-box' | 'avatar-online' | 'avatar-offline'
+type AvatarClassKey = (typeof maskShapeKeys)[number] | 'rounded-box' | 'avatar-online' | 'avatar-offline'
 
 const avatarClasses = computed<Record<AvatarClassKey, boolean>>(() => {
   const mask: Record<AvatarClassKey, boolean> = {
@@ -86,18 +86,17 @@ const color = computed(() => {
 })
 
 function contrastingColor(color: any) {
-  return (luma(color) >= 155) ? '000' : 'fff'
+  return luma(color) >= 155 ? '000' : 'fff'
 }
 // color can be a hx string or an array of RGB values 0-255
 function luma(color: any) {
-  const rgb = (typeof color === 'string') ? hexToRGBArray(color) : color
-  return (0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2]) // SMPTE C, Rec. 709 weightings
+  const rgb = typeof color === 'string' ? hexToRGBArray(color) : color
+  return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2] // SMPTE C, Rec. 709 weightings
 }
 function hexToRGBArray(color: any) {
   if (color.length === 3) {
     color = color.charAt(0) + color.charAt(0) + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2)
-  }
-  else if (color.length !== 6) {
+  } else if (color.length !== 6) {
     throw new Error(`Invalid hex color: ${color}`)
   }
   const rgb = []
@@ -110,7 +109,11 @@ function hexToRGBArray(color: any) {
 
 <template>
   <div class="avatar">
-    <Mask :style="{ backgroundColor, color }" class="w-full h-full avatar-mask aspect-square" :class="[avatarClasses, maskClasses]">
+    <Mask
+      :style="{ backgroundColor, color }"
+      class="w-full h-full avatar-mask aspect-square"
+      :class="[avatarClasses, maskClasses]"
+    >
       <slot />
     </Mask>
   </div>

package/app/components/AvatarGroup.vue

@@ -8,8 +8,12 @@ const props = defineProps<{
 
 <template>
   <div
-    class="avatar-group" :class="{
-      'flex-row': props.orientation === 'horizontal' || props.horizontal || (!props.orientation && !props.vertical && !props.horizontal),
+    class="avatar-group"
+    :class="{
+      'flex-row':
+        props.orientation === 'horizontal' ||
+        props.horizontal ||
+        (!props.orientation && !props.vertical && !props.horizontal),
       'flex-col': props.orientation === 'vertical' || props.vertical,
     }"
   >

package/app/components/Badge.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 const { is = 'div', ...props } = defineProps<{
   is?: string
   outline?: boolean
@@ -23,11 +25,22 @@ const { is = 'div', ...props } = defineProps<{
   warning?: boolean
   error?: boolean
 }>()
+
+const NuxtLink = resolveComponent('NuxtLink')
+const RouterLink = resolveComponent('RouterLink')
+
+const resolvedComponent = computed(() => {
+  if (is === 'NuxtLink') return NuxtLink
+  if (is === 'RouterLink') return RouterLink
+  return is
+})
 </script>
 
 <template>
   <component
-    :is="is" class="badge" :class="{
+    :is="resolvedComponent"
+    class="badge"
+    :class="{
       'badge-outline': props.outline,
       'badge-ghost': props.ghost,
       'badge-soft': props.soft,

package/app/components/Button.vue

@@ -1,52 +1,67 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-const props = withDefaults(defineProps<{
-  is?: string
-  join?: boolean
-
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-
-  ghost?: boolean
-  link?: boolean
-  glass?: boolean
-  outline?: boolean
-  dash?: boolean
-  soft?: boolean
-  disabled?: boolean
-
-  shape?: 'circle' | 'square' | 'wide' | 'block'
-  circle?: boolean
-  square?: boolean
-  wide?: boolean
-  block?: boolean
-
-  noAnimation?: boolean
-  active?: boolean
-
-  size?: 'lg' | 'md' | 'sm' | 'xs' | 'xl'
-  xl?: boolean
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-
-  type?: 'button' | 'submit' | 'reset'
-}>(), {
-  type: 'button',
-})
+const props = withDefaults(
+  defineProps<{
+    is?: string
+    join?: boolean
+
+    color?: string
+    neutral?: boolean
+    primary?: boolean
+    secondary?: boolean
+    accent?: boolean
+    info?: boolean
+    success?: boolean
+    warning?: boolean
+    error?: boolean
+
+    ghost?: boolean
+    link?: boolean
+    glass?: boolean
+    outline?: boolean
+    dash?: boolean
+    soft?: boolean
+    disabled?: boolean
+
+    shape?: 'circle' | 'square' | 'wide' | 'block'
+    circle?: boolean
+    square?: boolean
+    wide?: boolean
+    block?: boolean
+
+    noAnimation?: boolean
+    active?: boolean
+
+    size?: 'lg' | 'md' | 'sm' | 'xs' | 'xl'
+    xl?: boolean
+    lg?: boolean
+    md?: boolean
+    sm?: boolean
+    xs?: boolean
+
+    type?: 'button' | 'submit' | 'reset'
+  }>(),
+  {
+    type: 'button',
+  },
+)
+const NuxtLink = resolveComponent('NuxtLink')
+const RouterLink = resolveComponent('RouterLink')
 
 // Accessibility: Determine if rendering a native button
 const isButton = computed(() => (props.is || 'button') === 'button')
 
+// Resolve the component to render
+const resolvedComponent = computed(() => {
+  if (!props.is || props.is === 'button' || props.is === 'a') {
+    return props.is || 'button'
+  }
+  if (props.is === 'NuxtLink') return NuxtLink
+  if (props.is === 'RouterLink') return RouterLink
+  return props.is
+})
+
 // Accessibility: Keyboard event handler for custom elements
 function onKeydown(e: KeyboardEvent) {
   if (props.disabled) {
@@ -62,8 +77,8 @@ function onKeydown(e: KeyboardEvent) {
 
 <template>
   <component
-    :is="is || 'button'"
-    :type="type"
+    :is="resolvedComponent"
+    :type="isButton ? type : undefined"
     :disabled="isButton && disabled ? true : undefined"
     :aria-disabled="!isButton && disabled ? true : undefined"
     :tabindex="!isButton ? (disabled ? -1 : 0) : undefined"
@@ -90,7 +105,7 @@ function onKeydown(e: KeyboardEvent) {
       'text-warning': !disabled && (warning || color === 'warning') && link,
       'text-error': !disabled && (error || color === 'error') && link,
 
-      'glass': !disabled && glass,
+      glass: !disabled && glass,
 
       'btn-circle': circle || shape === 'circle',
       'btn-square': square || shape === 'square',

package/app/components/Calendar.vue

@@ -23,6 +23,24 @@ const defaultOptions: Partial<PikadayOptions> = {
   format: 'D MMM YYYY',
 }
 
+// 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()
+})
+
 function handleSelect(date: Date) {
   emit('update:modelValue', date)
 }
@@ -50,7 +68,12 @@ onMounted(async () => {
 <template>
   <div class="relative w-[270px] h-[270px]">
     <div class="absolute inset-0">
-      <CalendarSkeleton :number-of-months="options?.numberOfMonths ?? 1" :class="loading ? '' : 'opacity-0 pointer-events-none transition-opacity duration-300'" />
+      <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>
     <div ref="containerRef" class="absolute inset-0 inline-block w-full h-full" />
     <span class="pika-single hidden" />

package/app/components/CalendarInput.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
-import type { ComponentPublicInstance, Ref } from 'vue'
 import type { PikadayOptions } from 'pikaday'
+import type { ComponentPublicInstance } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 
 import { usePikaday } from '~/composables/use-pikaday'
 

package/app/components/CalendarSkeleton.vue

@@ -1,17 +1,58 @@
 <script setup lang="ts">
 import Skeleton from './Skeleton.vue'
 
-const { numberOfMonths = 1 } = defineProps<{
+const props = defineProps<{
   numberOfMonths?: number
+  date?: Date
+  firstDay?: number // 0 = Sunday, 1 = Monday, etc. (matches Pikaday's firstDay option)
 }>()
+
+// Calculate the number of weeks needed for a given month
+function getWeeksInMonth(date: Date, weekStartDay: number = 0): number {
+  const year = date.getFullYear()
+  const month = date.getMonth()
+
+  // Get first day of month
+  const firstDay = new Date(year, month, 1)
+  const firstDayOfWeek = firstDay.getDay()
+
+  // Get last day of month
+  const lastDay = new Date(year, month + 1, 0)
+  const daysInMonth = lastDay.getDate()
+
+  // Calculate offset based on what day the week starts on
+  // If week starts on Monday (1) and month starts on Sunday (0), offset is 6
+  // If week starts on Sunday (0) and month starts on Sunday (0), offset is 0
+  const offset = (firstDayOfWeek - weekStartDay + 7) % 7
+
+  // Calculate total cells needed (days in month + offset from first day)
+  const totalCells = daysInMonth + offset
+
+  // Return number of weeks (rows) needed
+  return Math.ceil(totalCells / 7)
+}
+
+// Calculate weeks for each month being displayed
+const weeksPerMonth = computed(() => {
+  const baseDate = props.date || new Date()
+  const weekStartDay = props.firstDay ?? 0
+  const weeks: number[] = []
+
+  for (let i = 0; i < (props.numberOfMonths || 1); i++) {
+    const monthDate = new Date(baseDate.getFullYear(), baseDate.getMonth() + i, 1)
+    weeks.push(getWeeksInMonth(monthDate, weekStartDay))
+  }
+
+  return weeks
+})
 </script>
 
 <template>
   <Skeleton col class="bg-base-200 rounded-box">
     <div
-      v-for="(month, idx) in numberOfMonths"
-      :key="`calendar-${month}`"
-      class="w-[270px] h-[270px] p-3 mx-auto flex flex-col gap-2"
+      v-for="(weeks, idx) in weeksPerMonth"
+      :key="`calendar-${idx}`"
+      class="w-[270px] px-3 py-[14px] mx-auto flex flex-col gap-2"
       :class="{
         '-mt-3.5': idx > 0,
       }"
@@ -28,17 +69,17 @@ const { numberOfMonths = 1 } = defineProps<{
         <span
           class="size-4 rounded-full bg-base-300 inline-block"
           :class="{
-            'bg-base-300': idx === numberOfMonths - 1,
-            'bg-transparent': idx !== numberOfMonths - 1,
+            'bg-base-300': idx === weeksPerMonth.length - 1,
+            'bg-transparent': idx !== weeksPerMonth.length - 1,
           }"
         />
       </Flex>
-      <Flex col grow justify-between class="h-full">
-        <div class="grid grid-cols-7 gap-[4px] mb-4 flex-shrink-0">
+      <Flex col class="h-full">
+        <div class="grid grid-cols-7 gap-[4px] mb-3 flex-shrink-0">
           <span v-for="d in 7" :key="`dow-${d}`" class="size-4 rounded-full bg-base-300 mx-auto block" />
         </div>
-        <div class="grid grid-cols-7 gap-[4px] flex-grow items-center">
-          <span v-for="i in 35" :key="`day-${i}`" class="size-7 rounded-full bg-base-300 block mx-auto" />
+        <div class="grid grid-cols-7 gap-y-[8px] gap-x-[4px]">
+          <span v-for="i in weeks * 7" :key="`day-${i}`" class="size-7 rounded-full bg-base-300 block mx-auto" />
         </div>
       </Flex>
     </div>

package/app/components/Card.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 const { is = 'div', ...props } = defineProps<{
-  is?: any
+  is?: string
   border?: boolean
   dash?: boolean
   side?: boolean
@@ -12,11 +14,22 @@ const { is = 'div', ...props } = defineProps<{
   sm?: boolean
   xs?: boolean
 }>()
+
+const NuxtLink = resolveComponent('NuxtLink')
+const RouterLink = resolveComponent('RouterLink')
+
+const resolvedComponent = computed(() => {
+  if (is === 'NuxtLink') return NuxtLink
+  if (is === 'RouterLink') return RouterLink
+  return is
+})
 </script>
 
 <template>
   <component
-    :is="is" class="card" :class="{
+    :is="resolvedComponent"
+    class="card"
+    :class="{
       'card-border': props.border,
       'card-side': props.side,
       'image-full': props.imageFull,

package/app/components/CardActions.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Text from './Text.vue';
+import Text from './Text.vue'
 
 const { is = 'div' } = defineProps<{
   is?: string

package/app/components/CardBody.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Text from './Text.vue';
+import Text from './Text.vue'
 
 const { is = 'div' } = defineProps<{
   is?: string

package/app/components/CardTitle.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Text from './Text.vue';
+import Text from './Text.vue'
 
 const { is = 'div' } = defineProps<{ is?: string }>()
 </script>

package/app/components/Carousel.vue

@@ -11,7 +11,8 @@ const { snapTo, center, end, vertical } = defineProps<{
 
 <template>
   <div
-    class="carousel" :class="{
+    class="carousel"
+    :class="{
       'carousel-center': center || snapTo === 'center',
       'carousel-end': end || snapTo === 'end',
       'carousel-horizontal': horizontal || orientation === 'horizontal',

package/app/components/Chat.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
-const { pre, align = 'start', start, end } = defineProps<{
+const {
+  pre,
+  align = 'start',
+  start,
+  end,
+} = defineProps<{
   pre?: boolean
   align?: string
   start?: boolean

package/app/components/Checkbox.vue

@@ -47,5 +47,5 @@ const currentValue = computed({
       'checkbox-lg': lg || size === 'lg',
       'theme-controller': themeController,
     }"
-  >
+  />
 </template>

package/app/components/Collapse.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { inject, ref } from 'vue'
+import { inject, provide, ref, watch } from 'vue'
 
 const props = defineProps<{
   variant?: 'arrow' | 'plus'
@@ -11,19 +11,49 @@ const props = defineProps<{
   value?: any
 }>()
 
+const isOpen = defineModel('open', { default: false })
+
 const accordionValue = inject('accordion-value', ref(null))
 const useAccordion = accordionValue.value !== null
 
+// Internal state for toggle mode
+const internalChecked = ref(props.open || false)
+
+// Generate unique ID for checkbox
+const checkboxId = `collapse-${Math.random().toString(36).substr(2, 9)}`
+provide('collapseCheckboxId', checkboxId)
+provide('collapseToggle', props.toggle || useAccordion)
+
+// Sync internal state with modelValue
+watch(
+  () => isOpen.value,
+  newVal => {
+    internalChecked.value = newVal
+  },
+)
+
+watch(internalChecked, newVal => {
+  isOpen.value = newVal
+})
+
 function handleClick() {
+  // Only handle clicks for accordion mode
   if (useAccordion) {
     accordionValue.value = props.value
   }
 }
+
+const isChecked = computed(() => {
+  if (useAccordion) {
+    return accordionValue.value === props.value
+  }
+  return internalChecked.value
+})
 </script>
 
 <template>
   <div
-    tabindex="0"
+    :tabindex="props.toggle || useAccordion ? undefined : 0"
     class="collapse"
     :class="[
       { 'collapse-arrow': props.arrow || props.variant === 'arrow' },
@@ -31,13 +61,15 @@ function handleClick() {
       { 'collapse-open': (props.open && !props.close) || (useAccordion && accordionValue === props.value) },
       { 'collapse-close': props.close },
     ]"
-    @click="handleClick"
+    @click="useAccordion ? handleClick : undefined"
   >
     <input
       v-if="props.toggle || useAccordion"
+      :id="checkboxId"
+      v-model="internalChecked"
       :type="useAccordion ? 'radio' : 'checkbox'"
-      :checked="useAccordion ? accordionValue === props.value : undefined"
-    >
+      :checked="useAccordion ? isChecked : undefined"
+    />
     <slot />
   </div>
 </template>

package/app/components/CollapseTitle.vue

@@ -1,5 +1,15 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+
+const checkboxId = inject('collapseCheckboxId', null)
+const hasToggle = inject('collapseToggle', false)
+</script>
+
 <template>
-  <div class="collapse-title">
+  <label v-if="hasToggle && checkboxId" :for="checkboxId" class="collapse-title">
+    <slot />
+  </label>
+  <div v-else class="collapse-title">
     <slot />
   </div>
 </template>

package/app/components/Countdown.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed } from 'vue'
 
-const { is = 'span' } = defineProps<{
+const props = defineProps<{
   is?: any
 }>()
 
-const tag = computed(() => is)
+const tag = computed(() => props.is || 'span')
 </script>
 
 <template>

package/app/components/CountdownTimers.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useIntervalFn } from '@vueuse/core';
-import { computed, ref, watch } from 'vue';
+import { useIntervalFn } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
 
 const { durationInSeconds = 0, untilDate } = defineProps<{
   durationInSeconds?: number
@@ -29,7 +29,7 @@ useIntervalFn(() => {
   timeLeft.value = calcTimeLeft()
 }, 1000)
 
-watch(timeLeft, (val) => {
+watch(timeLeft, val => {
   if (val === 0) {
     emit('done')
   }
@@ -42,10 +42,7 @@ const totalDays = computed(() => Math.floor(totalHours.value / 24))
 const totalWeeks = computed(() => Math.floor(totalDays.value / 7))
 const totalMonths = computed(() => {
   const now = new Date()
-  return (
-    (targetDate.value.getFullYear() - now.getFullYear()) * 12
-    + (targetDate.value.getMonth() - now.getMonth())
-  )
+  return (targetDate.value.getFullYear() - now.getFullYear()) * 12 + (targetDate.value.getMonth() - now.getMonth())
 })
 const split = computed(() => {
   const days = totalDays.value

package/app/components/Counter.vue

@@ -1,10 +1,21 @@
 <script setup lang="ts">
-const { is = 'span' } = defineProps<{
+import { computed } from 'vue'
+
+const props = defineProps<{
   value: number
   is?: any
+  digits?: 2 | 3
 }>()
+
+const style = computed(() => {
+  let css = `--value:${props.value};`
+  if (props.digits) {
+    css += `--digits:${props.digits};`
+  }
+  return css
+})
 </script>
 
 <template>
-  <component :is="is" v-bind="$attrs" :style="`--value:${value};`" />
+  <component :is="props.is || 'span'" v-bind="$attrs" :style="style" />
 </template>