daisy-ui-kit 5.0.12 → 5.1.2

package/README.md

@@ -14,7 +14,7 @@ Import components directly from the package:
 
 ```vue
 <script setup lang="ts">
-import { Button, Badge } from 'daisy-ui-kit'
+import { Badge, Button } from 'daisy-ui-kit'
 </script>
 
 <template>

package/app/components/AvatarGroup.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 const props = defineProps<{
-  orientation: string
-  horizontal: boolean
-  vertical: boolean
+  orientation?: 'horizontal' | 'vertical'
+  horizontal?: boolean
+  vertical?: boolean
 }>()
 </script>
 

package/app/components/Badge.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { computed, defineComponent, h, mergeProps } from 'vue'
+import { resolveIs } from '../utils/resolve-is'
 
 export default defineComponent({
   inheritAttrs: false,
@@ -53,7 +54,7 @@ export default defineComponent({
       },
     ])
 
-    return () => h(props.is as any, mergeProps(attrs, { class: classes.value }), slots.default?.())
+    return () => h(resolveIs(props.is), mergeProps(attrs, { class: classes.value }), slots.default?.())
   },
 })
 </script>

package/app/components/Button.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { computed, defineComponent, h, mergeProps } from 'vue'
+import { resolveIs } from '../utils/resolve-is'
 
 export default defineComponent({
   inheritAttrs: false,
@@ -103,7 +104,7 @@ export default defineComponent({
     }
 
     return () => {
-      const tag = props.is || 'button'
+      const tag = props.is ? resolveIs(props.is) : 'button'
       const isBtnEl = isButton.value
 
       return h(

package/app/components/Card.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { computed, defineComponent, h, mergeProps } from 'vue'
+import { resolveIs } from '../utils/resolve-is'
 
 export default defineComponent({
   inheritAttrs: false,
@@ -32,7 +33,7 @@ export default defineComponent({
       },
     ])
 
-    return () => h(props.is as any, mergeProps(attrs, { class: classes.value }), slots.default?.())
+    return () => h(resolveIs(props.is), mergeProps(attrs, { class: classes.value }), slots.default?.())
   },
 })
 </script>

package/app/components/Countdown.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { defineComponent, h, mergeProps } from 'vue'
+import { resolveIs } from '../utils/resolve-is'
 
 export default defineComponent({
   inheritAttrs: false,
@@ -7,7 +8,7 @@ export default defineComponent({
     is: { type: [String, Object], default: 'span' },
   },
   setup(props, { slots, attrs }) {
-    return () => h(props.is as any, mergeProps(attrs, { class: 'countdown' }), slots.default?.())
+    return () => h(resolveIs(props.is), mergeProps(attrs, { class: 'countdown' }), slots.default?.())
   },
 })
 </script>

package/app/components/DaisyLink.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { computed, defineComponent, h, mergeProps } from 'vue'
+import { resolveIs } from '../utils/resolve-is'
 
 export default defineComponent({
   inheritAttrs: false,
@@ -33,7 +34,7 @@ export default defineComponent({
       },
     ])
 
-    return () => h(props.is as any, mergeProps(attrs, { class: classes.value }), slots.default?.())
+    return () => h(resolveIs(props.is), mergeProps(attrs, { class: classes.value }), slots.default?.())
   },
 })
 </script>

package/app/components/Dropdown.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { useId } from 'vue'
 import { useElementHover } from '@vueuse/core'
-import { onMounted, provide, ref, watch } from 'vue'
+import { onMounted, provide, ref, useId, watch  } from 'vue'
 
 const props = withDefaults(
   defineProps<{

package/app/components/Fieldset.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { defineComponent, h, mergeProps } from 'vue'
+import { resolveIs } from '../utils/resolve-is'
 
 export default defineComponent({
   inheritAttrs: false,
@@ -9,10 +10,11 @@ export default defineComponent({
   },
   setup(props, { slots, attrs }) {
     return () =>
-      h(props.is as any, mergeProps(attrs, { class: 'fieldset bg-base-200 border-base-300 rounded-box border p-4' }), [
-        props.legend ? h('legend', { class: 'fieldset-legend' }, props.legend) : slots.legend?.(),
-        slots.default?.(),
-      ])
+      h(
+        resolveIs(props.is),
+        mergeProps(attrs, { class: 'fieldset bg-base-200 border-base-300 rounded-box border p-4' }),
+        [props.legend ? h('legend', { class: 'fieldset-legend' }, props.legend) : slots.legend?.(), slots.default?.()],
+      )
   },
 })
 </script>

package/app/components/Flex.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { computed, defineComponent, h, mergeProps } from 'vue'
+import { resolveIs } from '../utils/resolve-is'
 
 export default defineComponent({
   inheritAttrs: false,
@@ -81,7 +82,7 @@ export default defineComponent({
       },
     ])
 
-    return () => h(props.is as any, mergeProps(attrs, { class: classes.value }), slots.default?.())
+    return () => h(resolveIs(props.is), mergeProps(attrs, { class: classes.value }), slots.default?.())
   },
 })
 </script>

package/app/components/FlexItem.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { computed, defineComponent, h, mergeProps } from 'vue'
+import { resolveIs } from '../utils/resolve-is'
 
 export default defineComponent({
   inheritAttrs: false,
@@ -51,7 +52,7 @@ export default defineComponent({
       },
     ])
 
-    return () => h(props.is as any, mergeProps(attrs, { class: classes.value }), slots.default?.())
+    return () => h(resolveIs(props.is), mergeProps(attrs, { class: classes.value }), slots.default?.())
   },
 })
 </script>

package/app/components/Indicator.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { defineComponent, h, mergeProps } from 'vue'
+import { resolveIs } from '../utils/resolve-is'
 
 export default defineComponent({
   inheritAttrs: false,
@@ -7,7 +8,7 @@ export default defineComponent({
     is: { type: [String, Object], default: 'div' },
   },
   setup(props, { slots, attrs }) {
-    return () => h(props.is as any, mergeProps(attrs, { class: 'indicator' }), slots.default?.())
+    return () => h(resolveIs(props.is), mergeProps(attrs, { class: 'indicator' }), slots.default?.())
   },
 })
 </script>

package/app/components/IndicatorItem.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { computed, defineComponent, h, mergeProps } from 'vue'
+import { resolveIs } from '../utils/resolve-is'
 
 export default defineComponent({
   inheritAttrs: false,
@@ -30,7 +31,7 @@ export default defineComponent({
       },
     ])
 
-    return () => h(props.is as any, mergeProps(attrs, { class: classes.value }), slots.default?.())
+    return () => h(resolveIs(props.is), mergeProps(attrs, { class: classes.value }), slots.default?.())
   },
 })
 </script>

package/app/components/Join.vue

@@ -1,5 +1,19 @@
+<script setup lang="ts">
+defineProps<{
+  direction?: 'horizontal' | 'vertical'
+  horizontal?: boolean
+  vertical?: boolean
+}>()
+</script>
+
 <template>
-  <div class="join">
+  <div
+    class="join"
+    :class="{
+      'join-vertical': direction === 'vertical' || vertical,
+      'join-horizontal': direction === 'horizontal' || horizontal,
+    }"
+  >
     <slot />
   </div>
 </template>

package/app/components/Navbar.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { defineComponent, h, mergeProps } from 'vue'
+import { resolveIs } from '../utils/resolve-is'
 
 export default defineComponent({
   inheritAttrs: false,
@@ -8,7 +9,8 @@ export default defineComponent({
     glass: { type: Boolean, default: false },
   },
   setup(props, { slots, attrs }) {
-    return () => h(props.is as any, mergeProps(attrs, { class: ['navbar', { glass: props.glass }] }), slots.default?.())
+    return () =>
+      h(resolveIs(props.is), mergeProps(attrs, { class: ['navbar', { glass: props.glass }] }), slots.default?.())
   },
 })
 </script>

package/app/components/NavbarCenter.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { defineComponent, h, mergeProps } from 'vue'
+import { resolveIs } from '../utils/resolve-is'
 
 export default defineComponent({
   inheritAttrs: false,
@@ -7,7 +8,7 @@ export default defineComponent({
     is: { type: [String, Object], default: 'div' },
   },
   setup(props, { slots, attrs }) {
-    return () => h(props.is as any, mergeProps(attrs, { class: 'navbar-center' }), slots.default?.())
+    return () => h(resolveIs(props.is), mergeProps(attrs, { class: 'navbar-center' }), slots.default?.())
   },
 })
 </script>

package/app/components/NavbarEnd.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { defineComponent, h, mergeProps } from 'vue'
+import { resolveIs } from '../utils/resolve-is'
 
 export default defineComponent({
   inheritAttrs: false,
@@ -7,7 +8,7 @@ export default defineComponent({
     is: { type: [String, Object], default: 'div' },
   },
   setup(props, { slots, attrs }) {
-    return () => h(props.is as any, mergeProps(attrs, { class: 'navbar-end' }), slots.default?.())
+    return () => h(resolveIs(props.is), mergeProps(attrs, { class: 'navbar-end' }), slots.default?.())
   },
 })
 </script>

package/app/components/NavbarStart.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { defineComponent, h, mergeProps } from 'vue'
+import { resolveIs } from '../utils/resolve-is'
 
 export default defineComponent({
   inheritAttrs: false,
@@ -7,7 +8,7 @@ export default defineComponent({
     is: { type: [String, Object], default: 'div' },
   },
   setup(props, { slots, attrs }) {
-    return () => h(props.is as any, mergeProps(attrs, { class: 'navbar-start' }), slots.default?.())
+    return () => h(resolveIs(props.is), mergeProps(attrs, { class: 'navbar-start' }), slots.default?.())
   },
 })
 </script>

package/app/components/SkeletonText.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { defineComponent, h, mergeProps } from 'vue'
+import { resolveIs } from '../utils/resolve-is'
 
 export default defineComponent({
   inheritAttrs: false,
@@ -7,7 +8,7 @@ export default defineComponent({
     is: { type: [String, Object], default: 'span' },
   },
   setup(props, { slots, attrs }) {
-    return () => h(props.is as any, mergeProps(attrs, { class: 'skeleton skeleton-text' }), slots.default?.())
+    return () => h(resolveIs(props.is), mergeProps(attrs, { class: 'skeleton skeleton-text' }), slots.default?.())
   },
 })
 </script>

package/app/components/Stack.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { computed, defineComponent, h, mergeProps } from 'vue'
+import { resolveIs } from '../utils/resolve-is'
 
 export default defineComponent({
   inheritAttrs: false,
@@ -22,7 +23,7 @@ export default defineComponent({
       },
     ])
 
-    return () => h(props.is as any, mergeProps(attrs, { class: classes.value }), slots.default?.())
+    return () => h(resolveIs(props.is), mergeProps(attrs, { class: classes.value }), slots.default?.())
   },
 })
 </script>

package/app/components/Text.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { computed, defineComponent, h, mergeProps } from 'vue'
+import { resolveIs } from '../utils/resolve-is'
 
 export default defineComponent({
   inheritAttrs: false,
@@ -170,7 +171,7 @@ export default defineComponent({
 
     return () =>
       h(
-        props.is as any,
+        resolveIs(props.is),
         mergeProps(attrs, { ...(props.label ? { 'data-role': 'label' } : {}), class: classes.value }),
         slots.default?.(),
       )

package/app/components/Tooltip.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { useId } from 'vue'
 import { useElementHover } from '@vueuse/core'
-import { computed, onMounted, provide, ref, watch } from 'vue'
+import { computed, onMounted, provide, ref, useId, watch } from 'vue'
 
 const props = withDefaults(
   defineProps<{

package/app/components/content/ProsePre2.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Button from '../Button.vue'
 import { useClipboard } from '@vueuse/core'
+import Button from '../Button.vue'
 
 const props = defineProps({
   code: {

package/app/components/content/SearchModal.vue

@@ -4,6 +4,7 @@ import { useFuse } from '@vueuse/integrations/useFuse'
 import { computed, nextTick, ref, watch } from 'vue'
 
 const { isSearchOpen, openSearch, closeSearch } = useSearch()
+const { themes, setTheme } = useDaisyTheme()
 
 // Handle escape key
 onKeyStroke('Escape', () => {
@@ -25,7 +26,19 @@ const search = ref('')
 const searchInput = ref<HTMLInputElement | null>(null)
 const { allLinks } = useNav()
 
-const tags = allLinks.flatMap(item => item.tags)
+// Build theme search items
+const themeItems = themes.value
+  .filter(t => t.theme !== 'system')
+  .map(t => ({
+    label: t.theme,
+    to: '',
+    tags: ['theme'],
+    isTheme: true,
+  }))
+
+const allSearchItems = [...allLinks, ...themeItems]
+
+const tags = allSearchItems.flatMap(item => item.tags)
 const matchingTag = computed(() => {
   if (search.value.length < 2) {
     return null
@@ -34,11 +47,22 @@ const matchingTag = computed(() => {
 })
 
 // search results and popular results
-const { results } = useFuse(search, allLinks, {
+const { results } = useFuse(search, allSearchItems, {
   fuseOptions: { keys: ['label', 'tags'], includeScore: true, distance: 3 },
   resultLimit: 12,
 })
 
+// Split results into nav links and themes
+const navResults = computed(() => results.value.filter(r => !(r.item as any).isTheme))
+const themeResults = computed(() => {
+  const fromFuse = results.value.filter(r => (r.item as any).isTheme)
+  // If user typed "theme", show all themes (fuse's resultLimit caps at 12)
+  if (fromFuse.length > 0 && matchingTag.value === 'theme') {
+    return themeItems.map(item => ({ item }))
+  }
+  return fromFuse
+})
+
 const popularResults = ['Button', 'Menu', 'Drawer', 'Tabs', 'Dropdown']
   .map(label => allLinks.find(item => item.label === label)!)
   .filter(Boolean)
@@ -56,15 +80,24 @@ const eitherResults = computed(() => {
   if (results.value.length === 0) {
     return allDefaultResults.value
   }
-  return results.value
+  return [...navResults.value, ...themeResults.value]
 })
 
 // track the highlighted index in the list
 const highlightedIndex = ref(0)
+const resultsContainer = ref<HTMLElement | null>(null)
 const highlightedItem = computed(() => {
   return eitherResults.value[highlightedIndex.value]?.item
 })
 
+// scroll highlighted item into view
+watch(highlightedIndex, () => {
+  nextTick(() => {
+    const el = resultsContainer.value?.querySelector('[data-highlighted]')
+    el?.scrollIntoView({ block: 'nearest' })
+  })
+})
+
 // when results change, reset the highlighted index
 watch(eitherResults, () => {
   highlightedIndex.value = 0
@@ -82,14 +115,23 @@ watch(isSearchOpen, val => {
   }
 })
 
-// enter --> navigate to highlighted item
+// enter --> navigate to highlighted item or apply theme
 function handleEnter() {
   if (highlightedItem.value) {
-    navigateTo(highlightedItem.value.to)
+    if ((highlightedItem.value as any).isTheme) {
+      setTheme(highlightedItem.value.label)
+    } else {
+      navigateTo(highlightedItem.value.to)
+    }
     closeSearch()
   }
 }
 
+function handleThemeClick(themeName: string) {
+  setTheme(themeName)
+  closeSearch()
+}
+
 // arrow up --> highlighted previous item
 function handleArrowUp() {
   highlightedIndex.value = Math.max(highlightedIndex.value - 1, 0)
@@ -128,7 +170,7 @@ function handleResultClick(to: string) {
           </div>
 
           <!-- Results -->
-          <div class="max-h-[60vh] overflow-y-auto">
+          <div ref="resultsContainer" class="max-h-[60vh] overflow-y-auto">
             <div v-if="!search.length" class="p-2">
               <Text sm class="px-3 py-2 opacity-50 uppercase tracking-wider">Popular</Text>
               <Menu class="w-full">
@@ -136,6 +178,7 @@ function handleResultClick(to: string) {
                   v-for="(result, index) in popularResults"
                   :key="result.item.label"
                   :class="{ 'bg-primary/10': index === highlightedIndex }"
+                  :data-highlighted="index === highlightedIndex ? '' : undefined"
                 >
                   <a class="flex items-center gap-3" @click="handleResultClick(result.item.to)">
                     <Icon
@@ -154,6 +197,7 @@ function handleResultClick(to: string) {
                   v-for="(result, index) in newResults"
                   :key="result.item.label"
                   :class="{ 'bg-primary/10': index + popularResults.length === highlightedIndex }"
+                  :data-highlighted="index + popularResults.length === highlightedIndex ? '' : undefined"
                 >
                   <a class="flex items-center gap-3" @click="handleResultClick(result.item.to)">
                     <Icon
@@ -169,26 +213,53 @@ function handleResultClick(to: string) {
             </div>
 
             <div v-else-if="results.length" class="p-2">
-              <Text sm class="px-3 py-2 opacity-50 uppercase tracking-wider">Results</Text>
-              <Menu class="w-full">
-                <MenuItem
-                  v-for="(result, index) in results"
-                  :key="result.item.label"
-                  :class="{ 'bg-primary/10': index === highlightedIndex }"
-                >
-                  <a class="flex items-center gap-3" @click="handleResultClick(result.item.to)">
-                    <Icon
-                      v-if="(result.item as any).icon"
-                      :name="(result.item as any).icon"
-                      class="size-5 opacity-60"
-                    />
-                    <span class="flex-1">{{ result.item.label }}</span>
-                    <Badge v-if="matchingTag && result.item.tags.includes(matchingTag)" warning sm>
-                      {{ matchingTag }}
-                    </Badge>
-                  </a>
-                </MenuItem>
-              </Menu>
+              <template v-if="navResults.length">
+                <Text sm class="px-3 py-2 opacity-50 uppercase tracking-wider">Results</Text>
+                <Menu class="w-full">
+                  <MenuItem
+                    v-for="(result, index) in navResults"
+                    :key="result.item.label"
+                    :class="{ 'bg-primary/10': index === highlightedIndex }"
+                    :data-highlighted="index === highlightedIndex ? '' : undefined"
+                  >
+                    <a class="flex items-center gap-3" @click="handleResultClick(result.item.to)">
+                      <Icon
+                        v-if="(result.item as any).icon"
+                        :name="(result.item as any).icon"
+                        class="size-5 opacity-60"
+                      />
+                      <span class="flex-1">{{ result.item.label }}</span>
+                      <Badge v-if="matchingTag && result.item.tags.includes(matchingTag)" warning sm>
+                        {{ matchingTag }}
+                      </Badge>
+                    </a>
+                  </MenuItem>
+                </Menu>
+              </template>
+
+              <template v-if="themeResults.length">
+                <Text sm class="px-3 py-2 opacity-50 uppercase tracking-wider" :class="{ 'mt-4': navResults.length }">
+                  Themes
+                </Text>
+                <Menu class="w-full">
+                  <li
+                    v-for="(result, index) in themeResults"
+                    :key="result.item.label"
+                    :data-theme="result.item.label"
+                    :data-highlighted="index + navResults.length === highlightedIndex ? '' : undefined"
+                  >
+                    <a
+                      class="flex items-center gap-3"
+                      :style="{ backgroundColor: 'var(--color-base-100)', color: 'var(--color-base-content)' }"
+                      :class="{ 'bg-primary! text-primary-content!': index + navResults.length === highlightedIndex }"
+                      @click="handleThemeClick(result.item.label)"
+                    >
+                      <ThemeTile :theme="result.item.label" xs class="size-5!" />
+                      <span class="flex-1">{{ result.item.label }}</span>
+                    </a>
+                  </li>
+                </Menu>
+              </template>
             </div>
 
             <div v-else class="p-8 text-center">

package/app/components/content/TableOfContents.vue

@@ -56,7 +56,7 @@ function setupIntersectionObserver() {
     },
   )
 
-  // Observe all headings
+  // Observe all headings (ids are auto-generated by scanHeadings if missing)
   const headings = document.querySelectorAll('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]')
   headings.forEach(heading => {
     headingObserver?.observe(heading)
@@ -90,9 +90,10 @@ function scanHeadings() {
     return
   }
 
-  // Find all headings (h1-h6) with IDs
-  const headings = document.querySelectorAll('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]')
+  // Find all headings (h1-h6), auto-generating ids for any that lack one
+  const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6')
   const links: TocLink[] = []
+  const usedIds = new Set<string>()
 
   // Get the page title from the first h1
   const h1 = document.querySelector('h1')
@@ -107,6 +108,25 @@ function scanHeadings() {
       return
     }
 
+    // Auto-generate id from text content if missing
+    if (!heading.id) {
+      const text = heading.textContent || ''
+      const slug = text
+        .toLowerCase()
+        .trim()
+        .replace(/[^\w\s-]/g, '')
+        .replace(/[\s_]+/g, '-')
+        .replace(/^-+|-+$/g, '')
+      // Deduplicate
+      let candidate = slug
+      let n = 1
+      while (usedIds.has(candidate)) {
+        candidate = `${slug}-${n++}`
+      }
+      heading.id = candidate
+    }
+    usedIds.add(heading.id)
+
     const id = heading.id
     const level = Number.parseInt(heading.tagName.substring(1), 10)
 

package/app/composables/use-calendar.ts

@@ -17,6 +17,20 @@ export interface CalendarOptions {
   weekdaysShort?: string[]
   /** Full weekday names */
   weekdays?: string[]
+  /** Disable weekend days */
+  disableWeekends?: boolean
+  /** Dates that have events (highlighted) */
+  events?: string[]
+  /** Number of months to display side by side */
+  numberOfMonths?: number
+  /** Right-to-left layout */
+  isRTL?: boolean
+  /** Year range for the year selector [start, end] */
+  yearRange?: [number, number]
+  /** Date format string */
+  format?: string
+  /** Custom date-to-string formatter */
+  toString?: (date: Date, format: string) => string
 }
 
 export interface CalendarDay {

package/app/composables/use-daisy-theme.ts

@@ -24,13 +24,29 @@ function normalizeTheme(input: DaisyThemeInput): DaisyThemeMeta {
   return { ...input }
 }
 
-// Simple reactive state - storage parameter handles persistence if needed
-function useSSRState<T>(_key: string, init: () => T): Ref<T> {
-  return ref(init()) as Ref<T>
+// Shared state factory — uses Nuxt useState when available, falls back to
+// module-level refs for standalone Vue usage. Nuxt's useState ensures
+// SSR-to-client hydration and per-request isolation on the server.
+const sharedRefs = new Map<string, Ref<any>>()
+function useSharedState<T>(key: string, init: () => T): Ref<T> {
+  // Try Nuxt's useState (auto-imported in Nuxt context)
+  if (typeof useState === 'function') {
+    try {
+      return (useState as any)(key, init) as Ref<T>
+    } catch {
+      // Not in Nuxt runtime — fall through to ref-based approach
+    }
+  }
+  // Fallback for standalone Vue: module-level shared refs
+  if (!sharedRefs.has(key)) {
+    sharedRefs.set(key, ref(init()) as Ref<T>)
+  }
+  return sharedRefs.get(key) as Ref<T>
 }
 
-// Global storage ref - set once in app.vue, reused elsewhere
-let globalStorageRef: Ref<string> | null = null
+// Holds the canonical theme ref (cookie-backed or shared state)
+// so all callers of useDaisyTheme() read/write the same ref.
+let themeRef: Ref<string> | null = null
 
 /**
  * useDaisyTheme composable
@@ -41,27 +57,26 @@ let globalStorageRef: Ref<string> | null = null
  * Calling with no arguments (in any component): reuses global state.
  */
 export function useDaisyTheme(storage?: <T>(key: string, initial: T) => Ref<T>, options?: DaisyThemeOptions) {
-  // Use SSR-safe state that hydrates properly
-  const themes = useSSRState('daisy-themes', () => options?.themes?.map(normalizeTheme) ?? [])
+  // Shared themes list — SSR-safe via useState in Nuxt, shared ref otherwise
+  const themes = useSharedState<DaisyThemeMeta[]>('daisy-themes', () => options?.themes?.map(normalizeTheme) ?? [])
 
-  // If options provided, update themes
+  // If options provided, update themes (covers the app.vue initialization call)
   if (options?.themes) {
     themes.value = options.themes.map(normalizeTheme)
   }
 
-  // Theme name - use provided storage or reuse global ref
+  // Theme name — all callers must share the same ref.
+  // When storage is provided (app.vue), it creates the canonical ref (e.g. cookie-backed).
+  // Subsequent callers without storage reuse that same ref.
   let theme: Ref<string>
   if (storage) {
-    // Initialize with provided storage (e.g., useCookie in app.vue)
     theme = storage('theme', options?.defaultTheme ?? themes.value[0]?.theme ?? 'light')
-    globalStorageRef = theme
-  } else if (globalStorageRef) {
-    // Reuse the existing storage ref
-    theme = globalStorageRef
+    themeRef = theme
+  } else if (themeRef) {
+    theme = themeRef
   } else {
-    // Fallback to SSR state if no storage was ever provided
-    theme = useSSRState('daisy-theme', () => options?.defaultTheme ?? themes.value[0]?.theme ?? 'light')
-    globalStorageRef = theme
+    theme = useSharedState<string>('daisy-theme', () => options?.defaultTheme ?? themes.value[0]?.theme ?? 'light')
+    themeRef = theme
   }
 
   // System dark mode

package/app/utils/debug-shim.mjs

@@ -0,0 +1,23 @@
+// ESM shim for the 'debug' package (CJS-only).
+// micromark's dev build does `import createDebug from 'debug'` which fails
+// when Vite serves the raw CJS file as ESM in the browser.
+// This provides a no-op replacement for client-side use.
+function debug() {
+  return function noop() {}
+}
+debug.enable = function () {}
+debug.disable = function () {}
+debug.enabled = function () { return false }
+debug.log = function () {}
+debug.formatArgs = function () {}
+debug.save = function () {}
+debug.load = function () { return undefined }
+debug.useColors = function () { return false }
+debug.destroy = function () {}
+debug.colors = []
+debug.names = []
+debug.skips = []
+debug.formatters = {}
+
+export default debug
+export { debug }

package/app/utils/resolve-is.ts

@@ -0,0 +1,19 @@
+import { resolveComponent } from 'vue'
+
+/**
+ * Resolves the `is` prop value for render functions.
+ * Must be called inside a setup() or render function context.
+ *
+ * If `is` is already a component object, returns it directly.
+ * If `is` is a PascalCase string, tries resolveComponent().
+ * Otherwise returns the string as-is (treated as HTML tag).
+ */
+export function resolveIs(is: string | object): any {
+  if (typeof is !== 'string') return is
+  // PascalCase — try to resolve as a registered component
+  if (/^[A-Z]/.test(is)) {
+    const resolved = resolveComponent(is)
+    if (typeof resolved !== 'string') return resolved
+  }
+  return is
+}

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "5.0.12",
+  "version": "5.1.2",
   "packageManager": "pnpm@10.10.0",
   "author": "feathers.dev",
   "exports": {
@@ -24,13 +24,13 @@
   "module": "./src/index.ts",
   "types": "./src/index.d.ts",
   "files": [
-    "src",
+    "README.md",
     "app/components",
     "app/composables",
     "app/utils",
-    "nuxt.js",
     "nuxt.d.ts",
-    "README.md"
+    "nuxt.js",
+    "src"
   ],
   "scripts": {
     "import-d1-dumps": "./import-d1-dumps.sh",
@@ -55,6 +55,7 @@
     "daisyui": "^5"
   },
   "dependencies": {
+    "@formkit/auto-animate": "^0.9.0",
     "@nuxt/content": "3.5.1",
     "@nuxt/eslint": "1.3.0",
     "@nuxt/fonts": "0.11.2",