daisy-ui-kit 5.0.0-pre.30 → 5.0.0-pre.32

package/app/components/Collapse.vue

@@ -2,6 +2,7 @@
 import { computed, inject, provide, ref, useId, watch } from 'vue'
 
 const props = defineProps<{
+  id?: string
   variant?: 'arrow' | 'plus'
   arrow?: boolean
   plus?: boolean
@@ -20,7 +21,7 @@ const useAccordion = accordionValue.value !== null
 const internalChecked = ref(props.open || false)
 
 // Generate unique ID for checkbox
-const checkboxId = `collapse-${useId()}`
+const checkboxId = props.id || `collapse-${useId()}`
 provide('collapseCheckboxId', checkboxId)
 provide('collapseToggle', props.toggle || useAccordion)
 

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

@@ -17,10 +17,6 @@ interface DaisyThemeOptions {
   defaultTheme?: string
 }
 
-// Global state (client only)
-let globalThemes: Ref<DaisyThemeMeta[]> | null = null
-let globalTheme: Ref<string> | null = null
-
 function normalizeTheme(input: DaisyThemeInput): DaisyThemeMeta {
   if (typeof input === 'string') {
     return { theme: input }
@@ -28,40 +24,53 @@ function normalizeTheme(input: DaisyThemeInput): DaisyThemeMeta {
   return { ...input }
 }
 
-// Provide a default storage implementation (plain ref)
-function defaultStorage<T>(_: string, initial: T): Ref<T> {
-  return ref(initial) as Ref<T>
+// SSR state using Nuxt's useState for proper hydration
+function useSSRState<T>(key: string, init: () => T): Ref<T> {
+  // Use Nuxt's useState if available (works on both server and client with proper hydration)
+  if (typeof useState !== 'undefined') {
+    try {
+      return useState(key, init)
+    } catch {
+      // Fallback if useState is not available
+    }
+  }
+  return ref(init()) as Ref<T>
 }
 
+// Global storage ref - set once in app.vue, reused elsewhere
+let globalStorageRef: Ref<string> | null = null
+
 /**
  * useDaisyTheme composable
  * @param storage Optional. Ref factory for persistence (e.g., useCookie, useLocalStorage, or ref). Defaults to ref.
  * @param options Optional. Theme options (themes, defaultTheme, etc.).
  *
- * Calling with arguments (in app.vue/root): initializes global state (client) or per-call state (server).
- * Calling with no arguments (in any component): reuses global state (client) or per-call state (server).
+ * Calling with arguments (in app.vue/root): initializes global state.
+ * Calling with no arguments (in any component): reuses global state.
  */
 export function useDaisyTheme(storage?: <T>(key: string, initial: T) => Ref<T>, options?: DaisyThemeOptions) {
-  // On client, always use global state for reactivity across consumers
-  // On server, always use per-call state
-  const isClient = typeof window !== 'undefined'
-
-  // Only initialize global state if provided options (themes, etc.)
-  if (isClient && options) {
-    globalThemes = ref(options.themes?.map(normalizeTheme) ?? [])
-    globalTheme = null // reset theme so it will be re-initialized below
-  }
+  // Use SSR-safe state that hydrates properly
+  const themes = useSSRState('daisy-themes', () => options?.themes?.map(normalizeTheme) ?? [])
 
-  // Themes list
-  const themes = isClient
-    ? (globalThemes ??= ref(options?.themes?.map(normalizeTheme) ?? []))
-    : ref(options?.themes?.map(normalizeTheme) ?? [])
+  // If options provided, update themes
+  if (options?.themes) {
+    themes.value = options.themes.map(normalizeTheme)
+  }
 
-  // Theme name (persisted)
-  const _storage = storage ?? defaultStorage
-  const theme = isClient
-    ? (globalTheme ??= _storage('theme', options?.defaultTheme ?? themes.value[0]?.theme ?? 'light'))
-    : _storage('theme', options?.defaultTheme ?? themes.value[0]?.theme ?? 'light')
+  // Theme name - use provided storage or reuse global 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
+  } else {
+    // Fallback to SSR state if no storage was ever provided
+    theme = useSSRState('daisy-theme', () => options?.defaultTheme ?? themes.value[0]?.theme ?? 'light')
+    globalStorageRef = theme
+  }
 
   // System dark mode
   const preferredDark = usePreferredDark()

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "daisy-ui-kit",
   "type": "module",
-  "version": "5.0.0-pre.30",
+  "version": "5.0.0-pre.32",
   "packageManager": "pnpm@10.10.0",
   "author": "feathers.dev",
   "exports": {