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

package/app/components/Text.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 const props = defineProps<{
   is?: string
   join?: boolean
@@ -8,7 +10,23 @@ const props = defineProps<{
   inlineBlock?: boolean
   label?: boolean
 
-  color?: | 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'primary-content' | 'secondary-content' | 'neutral-content' | 'accent-content' | 'info-content' | 'success-content' | 'warning-content' | 'error-content'
+  color?:
+    | 'neutral'
+    | 'primary'
+    | 'secondary'
+    | 'accent'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'error'
+    | 'primary-content'
+    | 'secondary-content'
+    | 'neutral-content'
+    | 'accent-content'
+    | 'info-content'
+    | 'success-content'
+    | 'warning-content'
+    | 'error-content'
   neutral?: boolean
   primary?: boolean
   secondary?: boolean
@@ -26,7 +44,7 @@ const props = defineProps<{
   warningContent?: boolean
   errorContent?: boolean
 
-  size?: | '9xl' | '8xl' | '7xl' | '6xl' | '5xl' | '4xl' | '3xl' | '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+  size?: '9xl' | '8xl' | '7xl' | '6xl' | '5xl' | '4xl' | '3xl' | '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'
   xl?: boolean
   lg?: boolean
   md?: boolean
@@ -50,7 +68,7 @@ const props = defineProps<{
   serif?: boolean
   mono?: boolean
 
-  weight?: | 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black'
+  weight?: 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black'
   thin?: boolean
   extralight?: boolean
   light?: boolean
@@ -61,40 +79,42 @@ const props = defineProps<{
   extrabold?: boolean
   black?: boolean
 }>()
+const NuxtLink = resolveComponent('NuxtLink')
+const RouterLink = resolveComponent('RouterLink')
+
+const resolvedComponent = computed(() => {
+  if (props.is === 'NuxtLink') return NuxtLink
+  if (props.is === 'RouterLink') return RouterLink
+  return props.is || 'span'
+})
 </script>
 
 <template>
   <component
-    :is="is || 'span'"
+    :is="resolvedComponent"
     v-bind="label ? { 'data-role': 'label' } : {}"
     :class="{
       'join-item': join,
 
-      'block': block,
-      'inline': inline,
+      block,
+      inline,
       'inline-block': inlineBlock,
-      'label': label,
+      label,
 
       'text-primary': primary || color === 'primary',
-      'text-primary-content':
-        primaryContent || color === 'primary-content',
+      'text-primary-content': primaryContent || color === 'primary-content',
       'text-secondary': secondary || color === 'secondary',
-      'text-secondary-content':
-        secondaryContent || color === 'secondary-content',
+      'text-secondary-content': secondaryContent || color === 'secondary-content',
       'text-neutral': neutral || color === 'neutral',
-      'text-neutral-content':
-        neutralContent || color === 'neutral-content',
+      'text-neutral-content': neutralContent || color === 'neutral-content',
       'text-accent': accent || color === 'accent',
-      'text-accent-content':
-        accentContent || color === 'accent-content',
+      'text-accent-content': accentContent || color === 'accent-content',
       'text-info': info || color === 'info',
       'text-info-content': infoContent || color === 'info-content',
       'text-success': success || color === 'success',
-      'text-success-content':
-        successContent || color === 'success-content',
+      'text-success-content': successContent || color === 'success-content',
       'text-warning': warning || color === 'warning',
-      'text-warning-content':
-        warningContent || color === 'warning-content',
+      'text-warning-content': warningContent || color === 'warning-content',
       'text-error': error || color === 'error',
       'text-error-content': errorContent || color === 'error-content',
 
@@ -117,9 +137,9 @@ const props = defineProps<{
       'text-right': right || align === 'right',
       'text-justify': justify || align === 'justify',
 
-      'uppercase': uppercase || props.case === 'upper',
-      'lowercase': lowercase || props.case === 'lower',
-      'capitalize': capitalize || props.case === 'capitalize',
+      uppercase: uppercase || props.case === 'upper',
+      lowercase: lowercase || props.case === 'lower',
+      capitalize: capitalize || props.case === 'capitalize',
       'normal-case': normalCase || props.case === 'normal',
 
       'font-sans': sans || font === 'sans',

package/app/components/TextArea.vue

@@ -1,32 +1,35 @@
 <script setup lang="ts">
-const props = withDefaults(defineProps<{
-  modelValue?: string
-  placeholder?: string
-  type?: 'text' | 'phone' | 'email' | 'search'
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string
+    placeholder?: string
+    type?: 'text' | 'phone' | 'email' | 'search'
 
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
+    color?: string
+    neutral?: boolean
+    primary?: boolean
+    secondary?: boolean
+    accent?: boolean
+    info?: boolean
+    success?: boolean
+    warning?: boolean
+    error?: boolean
 
-  ghost?: boolean
-  disabled?: boolean
-  validator?: boolean
+    ghost?: boolean
+    disabled?: boolean
+    validator?: boolean
 
-  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
-  xl?: boolean
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>(), {
-  type: 'text',
-})
+    size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+    xl?: boolean
+    lg?: boolean
+    md?: boolean
+    sm?: boolean
+    xs?: boolean
+  }>(),
+  {
+    type: 'text',
+  },
+)
 defineEmits(['update:modelValue'])
 </script>
 
@@ -48,7 +51,7 @@ defineEmits(['update:modelValue'])
       'textarea-error': props.error || props.color === 'error',
 
       'textarea-ghost': props.ghost,
-      'validator': props.validator,
+      validator: props.validator,
 
       'textarea-xl': props.xl || props.size === 'xl',
       'textarea-lg': props.lg || props.size === 'lg',
@@ -56,6 +59,6 @@ defineEmits(['update:modelValue'])
       'textarea-sm': props.sm || props.size === 'sm',
       'textarea-xs': props.xs || props.size === 'xs',
     }"
-    @input="(event) => $emit('update:modelValue', (event.target as HTMLTextAreaElement).value)"
+    @input="event => $emit('update:modelValue', (event.target as HTMLTextAreaElement).value)"
   />
 </template>

package/app/components/TextRotate.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  is?: any
+  center?: boolean
+  duration?: number
+}>()
+
+const style = computed(() => {
+  if (props.duration) {
+    return { animationDuration: `${props.duration}ms` }
+  }
+  return undefined
+})
+</script>
+
+<template>
+  <component :is="props.is || 'span'" class="text-rotate" :style="style">
+    <span :class="{ 'justify-items-center': props.center }">
+      <slot />
+    </span>
+  </component>
+</template>

package/app/components/ThemeController.vue

@@ -18,16 +18,15 @@ const props = defineProps<{
   storage?: <T>(key: string, initial: T) => import('vue').Ref<T>
 }>()
 
-const themeOptions = props.themes || props.defaultTheme
-  ? { themes: props.themes || [], defaultTheme: props.defaultTheme }
-  : undefined
+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))
+const availableThemes = computed(() => themes.value.map(t => (typeof t === 'string' ? t : t.theme)))
 </script>
 
 <template>

package/app/components/ThemeProvider.vue

@@ -19,7 +19,12 @@ function cssVarToCamel(str: string): string {
 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> } {
+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: {} }
   }
@@ -33,10 +38,14 @@ function parseThemeString(themeString?: string): { style: Record<string, string>
   const allAttrs: Record<string, string> = {}
 
   // Remove @plugin ... { and closing } if present
-  const str = themeString.trim().replace(/^@plugin[^{}]*\{/, '').replace(/\}$/, '').trim()
+  const str = themeString
+    .trim()
+    .replace(/^@plugin[^{}]*\{/, '')
+    .replace(/\}$/, '')
+    .trim()
 
   // works with or without newline characters
-  str.split(/[\n;]/).forEach((line) => {
+  str.split(/[\n;]/).forEach(line => {
     const trimmed = line.trim()
     if (!trimmed || trimmed.startsWith('//')) {
       return
@@ -57,12 +66,10 @@ function parseThemeString(themeString?: string): { style: Record<string, string>
     if (varNamePattern.test(key)) {
       style[key] = value
       allAttrs[cssVarToCamel(key)] = value
-    }
-    else if (key === 'name') {
+    } else if (key === 'name') {
       dataTheme = value.replace(/"/g, '')
       allAttrs.dataTheme = dataTheme
-    }
-    else if (attrNamePattern.test(key)) {
+    } else if (attrNamePattern.test(key)) {
       const attrKey = `data-${key.replace(/[^\w-]/g, '')}`
       const attrVal = value.replace(/"/g, '')
       dataAttrs[attrKey] = attrVal
@@ -78,7 +85,7 @@ 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 themeControllerInputs: Array<{ el: HTMLInputElement; listener: () => void }> = []
 let themeControllerDomObserver: MutationObserver | null = null
 
 // Converts a themeAttrs object to a DaisyUI theme string
@@ -88,15 +95,16 @@ function toThemeString(attrs: Record<string, string>, opts?: { asPlugin?: boolea
   for (const [key, value] of Object.entries(attrs)) {
     if (key === 'dataTheme') {
       lines.push(`name: "${value}";`)
-    }
-    else if (key.startsWith('data')) {
+    } else if (key.startsWith('data')) {
       // Convert dataFooBar -> foo-bar
-      const attr = key.slice(4).replace(/([A-Z])/g, '-$1').toLowerCase()
+      const attr = key
+        .slice(4)
+        .replace(/([A-Z])/g, '-$1')
+        .toLowerCase()
       if (attr !== 'theme') {
         lines.push(`${attr}: ${value};`)
       }
-    }
-    else {
+    } else {
       // Convert camelCase to --kebab-case
       const cssVar = `--${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`
       lines.push(`${cssVar}: ${value};`)
@@ -207,8 +215,10 @@ function setupSnoop(rootEl: HTMLElement): void {
     })
     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 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 })
@@ -226,9 +236,13 @@ function setupSnoop(rootEl: HTMLElement): void {
   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 })
+  watch(
+    () => parsed.value.style,
+    () => {
+      nextTick(() => updateVars())
+    },
+    { immediate: false, deep: true },
+  )
   updateVars()
 }
 
@@ -236,21 +250,22 @@ 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)
-      })
+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 })
+  },
+  { immediate: true },
+)
 
 onUnmounted(() => {
   observers.forEach((o: MutationObserver) => o.disconnect())

package/app/components/TimelineLine.vue

@@ -25,5 +25,5 @@ defineProps<{
       'bg-warning': warning || color === 'warning',
       'bg-error': error || color === 'error',
     }"
-  >
+  />
 </template>

package/app/components/TimelineStart.vue

@@ -4,7 +4,8 @@ defineProps<{ box?: boolean }>()
 
 <template>
   <div
-    class="timeline-start" :class="{
+    class="timeline-start"
+    :class="{
       'timeline-box': box,
     }"
   >

package/app/components/Toast.vue

@@ -61,12 +61,7 @@ const visibleToasts = computed(() => toasts.value ?? [])
       'toast-bottom': props.bottom || props.vAlign === 'bottom',
     }"
   >
-    <slot
-      v-for="toast in visibleToasts"
-      :key="toast.id"
-      :toast="toast"
-      :remove-toast="removeToast"
-    />
+    <slot v-for="toast in visibleToasts" :key="toast.id" :toast="toast" :remove-toast="removeToast" />
     <slot />
   </div>
 </template>

package/app/components/Toggle.vue

@@ -40,7 +40,7 @@ const currentValue = computed({
     class="toggle"
     :disabled="disabled"
     :class="{
-      'validator': validator,
+      validator,
       'toggle-neutral': neutral || color === 'neutral',
       'toggle-primary': primary || color === 'primary',
       'toggle-secondary': secondary || color === 'secondary',
@@ -56,5 +56,5 @@ const currentValue = computed({
       'toggle-xl': xl || size === 'xl',
       'theme-controller': themeController,
     }"
-  >
+  />
 </template>

package/app/components/Tooltip.vue

@@ -24,7 +24,8 @@ const props = defineProps<{
 <template>
   <div
     :data-tip="tip"
-    class="tooltip" :class="{
+    class="tooltip"
+    :class="{
       'tooltip-open': props.open,
 
       'tooltip-top': props.top || props.position === 'top',

package/app/utils/drawer-utils.ts

@@ -14,19 +14,21 @@ export interface Drawers {
 export const drawers = reactive<Drawers>({})
 
 export function createDrawerState(name: string) {
-  const drawerState = drawers[name] || reactive<DrawerState>({
-    name,
-    isDrawerOpen: false,
-    openDrawer() {
-      drawerState.isDrawerOpen = true
-    },
-    closeDrawer() {
-      drawerState.isDrawerOpen = false
-    },
-    toggleDrawer() {
-      drawerState.isDrawerOpen = !drawerState.isDrawerOpen
-    },
-  })
+  const drawerState =
+    drawers[name] ||
+    reactive<DrawerState>({
+      name,
+      isDrawerOpen: false,
+      openDrawer() {
+        drawerState.isDrawerOpen = true
+      },
+      closeDrawer() {
+        drawerState.isDrawerOpen = false
+      },
+      toggleDrawer() {
+        drawerState.isDrawerOpen = !drawerState.isDrawerOpen
+      },
+    })
   drawers[name] = drawerState
   return drawerState
 }

package/app/utils/position-area.ts

@@ -0,0 +1,41 @@
+/**
+ * Maps placement values to CSS position-area values for anchor positioning
+ *
+ * Using span to align edges:
+ * - "bottom span-right" = below anchor, aligned to left edge (spans from left to center)
+ * - "bottom span-left" = below anchor, aligned to right edge (spans from center to right)
+ */
+export function getPositionArea(placement: string): string {
+  const positionMap: Record<string, string> = {
+    // Top positions
+    top: 'top', // centered above
+    'top-start': 'top span-right', // above, left edge aligned
+    'top-end': 'top span-left', // above, right edge aligned
+
+    // Right positions
+    right: 'center right', // centered to right
+    'right-start': 'right span-bottom', // right, top edge aligned
+    'right-end': 'right span-top', // right, bottom edge aligned
+
+    // Bottom positions (most common for dropdowns)
+    bottom: 'center bottom', // centered below
+    'bottom-start': 'bottom span-right', // below, left edge aligned
+    'bottom-end': 'bottom span-left', // below, right edge aligned
+
+    // Left positions
+    left: 'center left', // centered to left
+    'left-start': 'left span-bottom', // left, top edge aligned
+    'left-end': 'left span-top', // left, bottom edge aligned
+  }
+
+  return positionMap[placement] || 'bottom span-right'
+}
+
+/**
+ * Gets position-try-fallbacks for automatic repositioning
+ */
+export function getPositionFallbacks(placement: string): string {
+  // Use flip-block and flip-inline to automatically flip positions
+  // when there's not enough room in the preferred direction
+  return 'flip-block, flip-inline'
+}

package/package.json

@@ -1,10 +1,8 @@
 {
   "name": "daisy-ui-kit",
   "type": "module",
-  "version": "5.0.0-pre.10",
+  "version": "5.0.0-pre.12",
   "packageManager": "pnpm@10.10.0",
-  "main": "./nuxt.js",
-  "module": "./nuxt.js",
   "exports": {
     ".": {
       "import": "./nuxt.js",
@@ -17,6 +15,8 @@
     "./components/*": "./app/components/*",
     "./utils/*": "./app/utils/*"
   },
+  "main": "./nuxt.js",
+  "module": "./nuxt.js",
   "files": [
     "app/components/*.vue",
     "app/utils/*",
@@ -43,20 +43,20 @@
     "daisyui": "^5"
   },
   "dependencies": {
-    "@floating-ui/vue": "^1.1.6",
     "@nuxt/content": "3.5.1",
     "@nuxt/eslint": "1.3.0",
     "@nuxt/fonts": "0.11.2",
     "@nuxt/icon": "1.12.0",
     "@nuxt/image": "1.10.0",
-    "@nuxt/kit": "^3.17.2",
+    "@nuxt/kit": "^4.2.1",
     "@nuxt/scripts": "0.11.6",
     "@nuxt/test-utils": "3.18.0",
+    "@oddbird/css-anchor-positioning": "^0.7.0",
     "@unhead/vue": "^2.0.8",
     "@vueuse/core": "^13.1.0",
     "@vueuse/integrations": "^13.1.0",
     "focus-trap": "^7.6.4",
-    "nuxt": "^3.17.2",
+    "nuxt": "^4.2.1",
     "pikaday": "^1.8.2",
     "shiki": "^3.3.0",
     "typescript": "^5.8.3",
@@ -70,8 +70,10 @@
     "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "^4.1.5",
     "@types/pikaday": "^1.7.9",
-    "daisyui": "^5.0.35",
+    "daisyui": "^5.5.5",
     "eslint": "^9.26.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-vue": "^10.5.1",
     "tailwindcss": "^4.1.5"
   }
 }