daisy-ui-kit 5.0.0-pre.6 → 5.0.0-pre.8

package/app/components/Button.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed } from 'vue'
 
 const props = defineProps<{
   is?: string
@@ -42,25 +42,30 @@ const props = defineProps<{
   type?: 'button' | 'submit' | 'reset'
 }>()
 
-// Accessibility-friendly attributes for disabling the button
-const disabledAttrs = computed(() => {
+// Accessibility: Determine if rendering a native button
+const isButton = computed(() => (props.is || 'button') === 'button')
+
+// Accessibility: Keyboard event handler for custom elements
+function onKeydown(e: KeyboardEvent) {
   if (props.disabled) {
-    return {
-      'tabindex': -1,
-      'role': 'button',
-      'aria-disabled': true,
-    }
+    return
   }
-  else {
-    return {}
+  if (e.code === 'Space' || e.code === 'Enter' || e.key === ' ' || e.key === 'Enter') {
+    e.preventDefault()
+    // @ts-expect-error: $el may not exist yet
+    e.currentTarget?.click?.()
   }
-})
+}
 </script>
 
 <template>
   <component
     :is="is || 'button'"
     :type="type"
+    :disabled="isButton && disabled ? true : undefined"
+    :aria-disabled="!isButton && disabled ? true : undefined"
+    :tabindex="!isButton ? (disabled ? -1 : 0) : undefined"
+    :role="!isButton ? 'button' : undefined"
     class="btn"
     :class="{
       'join-item': join,
@@ -106,7 +111,7 @@ const disabledAttrs = computed(() => {
       'no-animation': noAnimation,
       'btn-active': !disabled && active,
     }"
-    v-bind="{ ...disabledAttrs, ...$attrs }"
+    @keydown="!isButton ? onKeydown : undefined"
   >
     <slot />
   </component>

package/app/components/Calendar.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PikadayOptions } from 'pikaday'
 import { onMounted, ref } from 'vue'
-import { usePikaday } from '~/composables/usePikaday'
+import { usePikaday } from '~/composables/use-pikaday'
 import CalendarSkeleton from './CalendarSkeleton.vue'
 
 const props = defineProps<{

package/app/components/CalendarInput.vue

@@ -3,7 +3,7 @@ import type { PikadayOptions } from 'pikaday'
 import type { ComponentPublicInstance } from 'vue'
 import { onMounted, ref, watch } from 'vue'
 
-import { usePikaday } from '~/composables/usePikaday'
+import { usePikaday } from '~/composables/use-pikaday'
 
 const props = defineProps<{
   /** Bound value: Date object or ISO string or null */

package/app/components/Checkbox.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue'
 
 const props = defineProps<{
   modelValue?: any
+  themeController?: boolean
 
   color?: string
   primary?: boolean
@@ -44,6 +45,7 @@ const currentValue = computed({
       'checkbox-sm': sm || size === 'sm',
       'checkbox-md': md || size === 'md',
       'checkbox-lg': lg || size === 'lg',
+      'theme-controller': themeController,
     }"
   >
 </template>

package/app/components/Dropdown.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { autoUpdate, useFloating } from '@floating-ui/vue';
-import { onClickOutside, syncRefs, useElementHover } from '@vueuse/core';
-import { onMounted, provide, reactive, ref } from 'vue';
-import { randomString } from '../utils/random-string';
+import { autoUpdate, useFloating } from '@floating-ui/vue'
+import { onClickOutside, syncRefs, useElementHover } from '@vueuse/core'
+import { onMounted, provide, reactive, ref } from 'vue'
+import { randomString } from '../utils/random-string'
 
 const props = withDefaults(defineProps<{
   // allows passing a custom id to the dropdown. Required for SSR hydration.

package/app/components/Input.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed, inject } from 'vue'
+import { syncRef } from '@vueuse/core'
+import { computed, inject, ref } from 'vue'
 
 // Map input type to value type
 type InputType =
@@ -37,7 +38,29 @@ function setValue(val: string | number | null) {
   emit('update:modelValue', val)
 }
 
-const labelCtx = inject('labelCtx', false)
+const labelCtx = inject('labelCtx')
+
+function handleInput(event: Event) {
+  let val: string | number | null
+  if (props.type === 'number') {
+    const inputVal = (event.target as HTMLInputElement).value
+    val = inputVal === '' ? null : Number(inputVal)
+  }
+  else {
+    val = (event.target as HTMLInputElement).value
+  }
+  emit('update:modelValue', val)
+
+  // Sync checked only on input if it's a checkbox
+  if (
+    props.type === 'checkbox'
+    && labelCtx
+    && Object.prototype.hasOwnProperty.call(labelCtx, 'checked')
+    && typeof labelCtx.checked.value === 'boolean'
+  ) {
+    labelCtx.checked.value = Boolean(event.target.checked)
+  }
+}
 
 const inputAttrs = computed(() => {
   if (labelCtx) {
@@ -91,12 +114,6 @@ const inputModel = computed({
     v-else
     v-bind="inputAttrs"
     :value="inputModel"
-    @input="
-      $emit('update:modelValue',
-            props.type === 'number'
-              ? ($event.target as HTMLInputElement).value === '' ? null : Number(($event.target as HTMLInputElement).value)
-              : ($event.target as HTMLInputElement).value,
-      )
-    "
+    @input="handleInput"
   >
 </template>

package/app/components/Label.vue

@@ -1,14 +1,18 @@
 <script setup lang="ts">
-import { provide } from 'vue'
+import { provide, ref } from 'vue'
 import Text from './Text.vue'
 
 withDefaults(defineProps<{
   is?: string
   floating?: boolean
+
   input?: boolean
+  select?: boolean
+  toggle?: boolean
 
   join?: boolean
   color?: string
+  neutral?: boolean
   primary?: boolean
   secondary?: boolean
   accent?: boolean
@@ -28,7 +32,8 @@ withDefaults(defineProps<{
 })
 
 // Provide label context for child inputs
-provide('labelCtx', true)
+const checked = ref(false)
+provide('labelCtx', { checked })
 </script>
 
 <template>
@@ -37,7 +42,10 @@ provide('labelCtx', true)
     :class="[
       {
         'input': input,
-        'join-item': input && join,
+        'select': select,
+        'toggle': toggle,
+        'join-item': (input || select || toggle) && join,
+        'input-neutral': input && (neutral || color === 'neutral'),
         'input-primary': input && (primary || color === 'primary'),
         'input-secondary': input && (secondary || color === 'secondary'),
         'input-accent': input && (accent || color === 'accent'),
@@ -51,8 +59,36 @@ provide('labelCtx', true)
         'input-md': input && (size === 'md' || md),
         'input-sm': input && (size === 'sm' || sm),
         'input-xs': input && (size === 'xs' || xs),
+        'select-neutral': select && (neutral || color === 'neutral'),
+        'select-primary': select && (primary || color === 'primary'),
+        'select-secondary': select && (secondary || color === 'secondary'),
+        'select-accent': select && (accent || color === 'accent'),
+        'select-info': select && (info || color === 'info'),
+        'select-success': select && (success || color === 'success'),
+        'select-warning': select && (warning || color === 'warning'),
+        'select-error': select && (error || color === 'error'),
+        'select-ghost': select && ghost,
+        'select-xl': select && (size === 'xl' || xl),
+        'select-lg': select && (size === 'lg' || lg),
+        'select-md': select && (size === 'md' || md),
+        'select-sm': select && (size === 'sm' || sm),
+        'select-xs': select && (size === 'xs' || xs),
+        'text-neutral': toggle && checked && (neutral || color === 'neutral'),
+        'text-primary': toggle && checked && (primary || color === 'primary'),
+        'text-secondary': toggle && checked && (secondary || color === 'secondary'),
+        'text-accent': toggle && checked && (accent || color === 'accent'),
+        'text-info': toggle && checked && (info || color === 'info'),
+        'text-success': toggle && checked && (success || color === 'success'),
+        'text-warning': toggle && checked && (warning || color === 'warning'),
+        'text-error': toggle && checked && (error || color === 'error'),
+        'text-ghost': toggle && ghost,
+        'toggle-xl': toggle && (size === 'xl' || xl),
+        'toggle-lg': toggle && (size === 'lg' || lg),
+        'toggle-md': toggle && (size === 'md' || md),
+        'toggle-sm': toggle && (size === 'sm' || sm),
+        'toggle-xs': toggle && (size === 'xs' || xs),
       },
-      { label: !floating && !input },
+      { label: !floating && !(input || toggle) },
       { 'floating-label': floating },
     ]"
   >

package/app/components/MockupPhone.vue

@@ -1,7 +1,13 @@
+<script lang="ts" setup>
+defineProps<{
+  displayClasses?: string
+}>()
+</script>
+
 <template>
   <div class="mockup-phone">
-    <div class="camera" />
-    <div class="display">
+    <div class="mockup-phone-camera" />
+    <div class="mockup-phone-display" :class="displayClasses">
       <slot />
     </div>
   </div>

package/app/components/Radio.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { computed, inject } from 'vue';
+import { computed, inject } from 'vue'
 
 const props = defineProps<{
   modelValue?: any
   value: any
   disabled?: boolean
+  themeController?: boolean
 
   color?: string
   neutral?: boolean
@@ -60,6 +61,7 @@ const currentValue = computed({
       'radio-md': props.md || props.size === 'md',
       'radio-lg': props.lg || props.size === 'lg',
       'radio-xl': props.xl || props.size === 'xl',
+      'theme-controller': props.themeController,
     }"
     :disabled="props.disabled"
     :value="props.value"

package/app/components/Select.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed } from 'vue'
 
 type Color = | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
 

package/app/components/ThemeController.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { DaisyThemeInput } from '@/composables/use-daisy-theme'
+import { useDaisyTheme } from '@/composables/use-daisy-theme'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  /**
+   * Optional: List of themes to provide (string or DaisyThemeMeta)
+   */
+  themes?: DaisyThemeInput[]
+  /**
+   * Optional: Default theme name (string or 'default')
+   */
+  defaultTheme?: string
+  /**
+   * Optional: Storage function for persistence (e.g., useCookie, useLocalStorage, or ref)
+   */
+  storage?: <T>(key: string, initial: T) => import('vue').Ref<T>
+}>()
+
+const themeOptions = props.themes || props.defaultTheme
+  ? { themes: props.themes || [], defaultTheme: props.defaultTheme }
+  : undefined
+
+const { theme, effectiveTheme, themes, setTheme, cycleTheme, registerTheme, removeTheme } = useDaisyTheme(
+  props.storage,
+  themeOptions,
+)
+
+const availableThemes = computed(() => themes.value.map(t => typeof t === 'string' ? t : t.theme))
+</script>
+
+<template>
+  <div class="theme-controller">
+    <slot
+      :theme="theme"
+      :effective-theme="effectiveTheme"
+      :themes="themes"
+      :available-themes="availableThemes"
+      :set-theme="setTheme"
+      :cycle-theme="cycleTheme"
+      :register-theme="registerTheme"
+      :remove-theme="removeTheme"
+    />
+  </div>
+</template>

package/app/components/ThemeProvider.vue

@@ -0,0 +1,287 @@
+<script setup lang="ts">
+import type { ComputedThemeVarsSlot } from './ThemeProvider.inject.js'
+import { computed, nextTick, onUnmounted, provide, ref, watch } from 'vue'
+import { daisyUiThemeKey } from './ThemeProvider.inject.js'
+
+const props = defineProps<{
+  /**
+   * DaisyUI theme string (recommended prop name)
+   */
+  dataTheme?: string
+
+  cssVars?: string
+  snoop?: boolean
+}>()
+
+function cssVarToCamel(str: string): string {
+  return str.replace(/^--/, '').replace(/-([a-z0-9])/g, (_, c: string) => c.toUpperCase())
+}
+function dataAttrToCamel(str: string): string {
+  return str.replace(/-([a-z0-9])/g, (_, c: string) => c.toUpperCase())
+}
+function parseThemeString(themeString?: string): { style: Record<string, string>, dataAttrs: Record<string, string>, dataTheme: string | undefined, allAttrs: Record<string, string> } {
+  if (!themeString) {
+    return { style: {}, dataAttrs: {}, dataTheme: undefined, allAttrs: {} }
+  }
+  const varNamePattern = /^--[\w-]+$/
+  const attrNamePattern = /^[a-z_][\w-]*$/i
+  const forbiddenChars = /[<>{};]/g
+
+  const style: Record<string, string> = {}
+  const dataAttrs: Record<string, string> = {}
+  let dataTheme: string | undefined
+  const allAttrs: Record<string, string> = {}
+
+  // Remove @plugin ... { and closing } if present
+  const str = themeString.trim().replace(/^@plugin[^{}]*\{/, '').replace(/\}$/, '').trim()
+
+  // works with or without newline characters
+  str.split(/[\n;]/).forEach((line) => {
+    const trimmed = line.trim()
+    if (!trimmed || trimmed.startsWith('//')) {
+      return
+    }
+    const colonIdx = trimmed.indexOf(':')
+    if (colonIdx === -1) {
+      return
+    }
+    const key = trimmed.slice(0, colonIdx).trim()
+    let value = trimmed.slice(colonIdx + 1).trim()
+    if (value.endsWith(';')) {
+      value = value.slice(0, -1).trim()
+    }
+    value = value.replace(forbiddenChars, '')
+    if (!value) {
+      return
+    }
+    if (varNamePattern.test(key)) {
+      style[key] = value
+      allAttrs[cssVarToCamel(key)] = value
+    }
+    else if (key === 'name') {
+      dataTheme = value.replace(/"/g, '')
+      allAttrs.dataTheme = dataTheme
+    }
+    else if (attrNamePattern.test(key)) {
+      const attrKey = `data-${key.replace(/[^\w-]/g, '')}`
+      const attrVal = value.replace(/"/g, '')
+      dataAttrs[attrKey] = attrVal
+      if (attrKey.startsWith('data-')) {
+        allAttrs[dataAttrToCamel(attrKey)] = attrVal
+      }
+    }
+  })
+  return { style, dataAttrs, dataTheme, allAttrs }
+}
+
+const parsed = computed(() => parseThemeString(props.dataTheme ?? props.cssVars))
+
+const themeVars = ref<Record<string, string>>({})
+let observers: MutationObserver[] = []
+let themeControllerInputs: Array<{ el: HTMLInputElement, listener: () => void }> = []
+let themeControllerDomObserver: MutationObserver | null = null
+
+// Converts a themeAttrs object to a DaisyUI theme string
+function toThemeString(attrs: Record<string, string>, opts?: { asPlugin?: boolean }) {
+  const lines: string[] = []
+  // Map camelCase back to DaisyUI keys
+  for (const [key, value] of Object.entries(attrs)) {
+    if (key === 'dataTheme') {
+      lines.push(`name: "${value}";`)
+    }
+    else if (key.startsWith('data')) {
+      // Convert dataFooBar -> foo-bar
+      const attr = key.slice(4).replace(/([A-Z])/g, '-$1').toLowerCase()
+      if (attr !== 'theme') {
+        lines.push(`${attr}: ${value};`)
+      }
+    }
+    else {
+      // Convert camelCase to --kebab-case
+      const cssVar = `--${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`
+      lines.push(`${cssVar}: ${value};`)
+    }
+  }
+  const inner = lines.join('\n')
+  if (opts?.asPlugin) {
+    return `@plugin \"daisyui/theme\" {\n${inner}\n}`
+  }
+  return inner
+}
+
+// Returns the slot data object depending on snoop mode
+const slotData: ComputedThemeVarsSlot = computed(() => {
+  // Access both dependencies so Vue always tracks them for reactivity
+  void themeVars.value
+  void parsed.value.allAttrs
+  if (props.snoop) {
+    return {
+      vars: themeVars.value,
+      toThemeString: (attrs = themeVars.value, opts) => toThemeString(attrs, opts),
+    }
+  }
+  return {
+    vars: parsed.value.allAttrs,
+    toThemeString: (attrs = parsed.value.allAttrs, opts) => toThemeString(attrs, opts),
+  }
+})
+
+// Provide the slotData as 'daisyUiTheme' for child consumers
+provide(daisyUiThemeKey, slotData)
+
+// DaisyUI variable names
+const daisyVars = [
+  '--color-primary',
+  '--color-primary-content',
+  '--color-secondary',
+  '--color-secondary-content',
+  '--color-accent',
+  '--color-accent-content',
+  '--color-neutral',
+  '--color-neutral-content',
+  '--color-base-100',
+  '--color-base-200',
+  '--color-base-300',
+  '--color-base-content',
+  '--color-info',
+  '--color-info-content',
+  '--color-success',
+  '--color-success-content',
+  '--color-warning',
+  '--color-warning-content',
+  '--color-error',
+  '--color-error-content',
+  '--radius-selector',
+  '--radius-field',
+  '--radius-box',
+  '--size-selector',
+  '--size-field',
+  '--border',
+  '--depth',
+  '--noise',
+]
+
+function getDaisyVarsFromEl(el: HTMLElement): Record<string, string> {
+  const vars: Record<string, string> = {}
+  const style = getComputedStyle(el)
+  for (const varName of daisyVars) {
+    const val = style.getPropertyValue(varName)
+    if (val) {
+      vars[cssVarToCamel(varName)] = val.trim()
+    }
+  }
+  return vars
+}
+
+let prefersColorSchemeMql: MediaQueryList | null = null
+let prefersColorSchemeCleanup: (() => void) | null = null
+
+function setupSnoop(rootEl: HTMLElement): void {
+  function updateVars(): void {
+    themeVars.value = getDaisyVarsFromEl(rootEl)
+  }
+  // Observe the current element for data-theme changes
+  const obs = new MutationObserver(() => updateVars())
+  obs.observe(rootEl, { attributes: true, attributeFilter: ['data-theme'] })
+
+  // Also observe the <html> element for data-theme changes
+  const htmlEl = document.documentElement
+  const htmlObs = new MutationObserver(() => updateVars())
+  htmlObs.observe(htmlEl, { attributes: true, attributeFilter: ['data-theme'] })
+
+  observers = [obs, htmlObs]
+
+  // Listen for prefers-color-scheme changes
+  prefersColorSchemeMql = window.matchMedia('(prefers-color-scheme: dark)')
+  const prefersColorSchemeListener = () => updateVars()
+  prefersColorSchemeMql.addEventListener('change', prefersColorSchemeListener)
+  prefersColorSchemeCleanup = () => {
+    prefersColorSchemeMql?.removeEventListener('change', prefersColorSchemeListener)
+  }
+
+  // --- Observe theme-controller checkboxes/radios, including dynamic changes ---
+  function bindThemeControllerInputs() {
+    // Remove any previous listeners
+    themeControllerInputs.forEach(({ el, listener }) => {
+      el.removeEventListener('change', listener)
+    })
+    themeControllerInputs = []
+    // Find all matching inputs in the document
+    const inputs = Array.from(document.querySelectorAll('input[type="checkbox"].theme-controller, input[type="radio"].theme-controller')) as HTMLInputElement[]
+    inputs.forEach((el) => {
+      const listener = () => updateVars()
+      el.addEventListener('change', listener)
+      themeControllerInputs.push({ el, listener })
+    })
+  }
+  bindThemeControllerInputs()
+  // Observe DOM for dynamic addition/removal of theme-controller inputs
+  if (themeControllerDomObserver) {
+    themeControllerDomObserver.disconnect()
+    themeControllerDomObserver = null
+  }
+  themeControllerDomObserver = new MutationObserver(() => {
+    bindThemeControllerInputs()
+  })
+  themeControllerDomObserver.observe(document.body, { childList: true, subtree: true })
+
+  // Watch for applied style changes (parsed.style)
+  watch(() => parsed.value.style, () => {
+    nextTick(() => updateVars())
+  }, { immediate: false, deep: true })
+  updateVars()
+}
+
+const rootEl = ref<HTMLElement | null>(null)
+
+const isClient = typeof window !== 'undefined' && typeof document !== 'undefined'
+
+watch([
+  () => props.snoop,
+  () => rootEl.value,
+], ([snoop, el]) => {
+  if (isClient) {
+    // Clean up previous observers if any
+    observers.forEach((o: MutationObserver) => o.disconnect())
+    observers = []
+    if (snoop && el) {
+      nextTick(() => {
+        setupSnoop(el)
+      })
+    }
+  }
+}, { immediate: true })
+
+onUnmounted(() => {
+  observers.forEach((o: MutationObserver) => o.disconnect())
+  observers = []
+  // Remove prefers-color-scheme listener if present
+  if (prefersColorSchemeCleanup) {
+    prefersColorSchemeCleanup()
+    prefersColorSchemeCleanup = null
+    prefersColorSchemeMql = null
+  }
+  // Remove theme-controller listeners
+  themeControllerInputs.forEach(({ el, listener }) => {
+    el.removeEventListener('change', listener)
+  })
+  themeControllerInputs = []
+  // Disconnect theme-controller DOM observer
+  if (themeControllerDomObserver) {
+    themeControllerDomObserver.disconnect()
+    themeControllerDomObserver = null
+  }
+})
+</script>
+
+<template>
+  <div
+    ref="rootEl"
+    v-bind="parsed.dataAttrs"
+    :data-theme="dataTheme"
+    :style="parsed.style"
+    class="[background-color:unset] theme-provider"
+  >
+    <slot v-bind="slotData" />
+  </div>
+</template>

package/app/components/ThemeTile.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  theme?: string
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  xs?: boolean
+  sm?: boolean
+  md?: boolean
+  lg?: boolean
+  xl?: boolean
+}>()
+const size = computed(() => props.size ?? 'md')
+
+const squareClass = computed(() => {
+  switch (size.value) {
+    case 'xs':
+      return 'w-full h-full rounded-[2px]'
+    case 'sm':
+      return 'w-full h-full rounded-[2px]'
+    case 'md':
+      return 'w-full h-full rounded-xs'
+    case 'lg':
+      return 'w-full h-full rounded-sm'
+    case 'xl':
+      return 'w-full h-full rounded'
+    default:
+      return 'w-full h-full rounded-xs'
+  }
+})
+</script>
+
+<template>
+  <div
+    :data-theme="theme"
+    class="grid grid-cols-2 bg-white rounded-sm"
+    :class="{
+      '!size-4 p-0.5 gap-px': xs || size === 'xs',
+      '!size-5 p-0.5 gap-px': sm || size === 'sm',
+      'size-6 p-0.5 gap-0.5': md || size === 'md' || !size,
+      'size-8 p-0.75 gap-0.5': lg || size === 'lg',
+      'size-10 h-10 p-1 gap-0.75': xl || size === 'xl',
+    }"
+  >
+    <div class="bg-neutral" :class="squareClass" />
+    <div class="bg-primary" :class="squareClass" />
+    <div class="bg-secondary" :class="squareClass" />
+    <div class="bg-accent" :class="squareClass" />
+  </div>
+</template>

package/app/components/Toggle.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed } from 'vue'
 
 const props = defineProps<{
   modelValue?: any
   disabled?: boolean
   validator?: boolean
+  themeController?: boolean
 
   color?: string
   neutral?: boolean
@@ -53,6 +54,7 @@ const currentValue = computed({
       'toggle-md': md || size === 'md',
       'toggle-lg': lg || size === 'lg',
       'toggle-xl': xl || size === 'xl',
+      'theme-controller': themeController,
     }"
   >
 </template>

package/nuxt.js

@@ -14,9 +14,15 @@ export default defineNuxtModule({
 
     nuxt.hook('components:dirs', (dirs) => {
       dirs.push({
-        path: fileURLToPath(new URL('./components', import.meta.url)),
+        path: fileURLToPath(new URL('./app/components', import.meta.url)),
         prefix,
       })
     })
+
+    nuxt.hook('composables:dirs', (dirs) => {
+      dirs.push({
+        path: fileURLToPath(new URL('./app/composables-docs', import.meta.url)),
+      })
+    })
   },
 })

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "daisy-ui-kit",
   "type": "module",
-  "version": "5.0.0-pre.6",
-  "packageManager": "pnpm@10.9.0",
+  "version": "5.0.0-pre.8",
+  "packageManager": "pnpm@10.10.0",
   "files": [
     "app/components/*.vue",
     "app/utils/*",
     "nuxt.js"
   ],
   "scripts": {
+    "import-d1-dumps": "./import-d1-dumps.sh",
     "build": "nuxt build",
     "dev": "nuxt dev",
     "lint": "eslint",
@@ -20,7 +21,8 @@
     "release:pre": "npm version prerelease && npm publish --tag pre",
     "release:patch": "npm version patch && npm publish",
     "release:minor": "npm version minor && npm publish",
-    "release:major": "npm version major && npm publish"
+    "release:major": "npm version major && npm publish",
+    "deploy": "pnpm run build && npx wrangler pages deploy dist"
   },
   "peerDependencies": {
     "@vueuse/core": "^13.1.0",
@@ -28,34 +30,34 @@
   },
   "dependencies": {
     "@floating-ui/vue": "^1.1.6",
-    "@nuxt/content": "3.4.0",
+    "@nuxt/content": "3.5.1",
     "@nuxt/eslint": "1.3.0",
-    "@nuxt/fonts": "0.11.1",
+    "@nuxt/fonts": "0.11.2",
     "@nuxt/icon": "1.12.0",
     "@nuxt/image": "1.10.0",
-    "@nuxt/kit": "^3.17.1",
+    "@nuxt/kit": "^3.17.2",
     "@nuxt/scripts": "0.11.6",
-    "@nuxt/test-utils": "3.17.2",
+    "@nuxt/test-utils": "3.18.0",
     "@unhead/vue": "^2.0.8",
     "@vueuse/core": "^13.1.0",
     "@vueuse/integrations": "^13.1.0",
     "focus-trap": "^7.6.4",
-    "nuxt": "^3.16.2",
+    "nuxt": "^3.17.2",
     "pikaday": "^1.8.2",
     "shiki": "^3.3.0",
     "typescript": "^5.8.3",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0",
-    "zod": "^3.24.3"
+    "vue-router": "^4.5.1",
+    "zod": "^3.24.4"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^4.12.0",
     "@stylistic/eslint-plugin": "^4.2.0",
     "@tailwindcss/typography": "^0.5.16",
-    "@tailwindcss/vite": "^4.1.4",
+    "@tailwindcss/vite": "^4.1.5",
     "@types/pikaday": "^1.7.9",
-    "daisyui": "^5.0.27",
-    "eslint": "^9.25.1",
-    "tailwindcss": "^4.1.4"
+    "daisyui": "^5.0.35",
+    "eslint": "^9.26.0",
+    "tailwindcss": "^4.1.5"
   }
 }