daisy-ui-kit 5.0.3 → 5.0.5

package/app/components/ThemeProvider.vue

@@ -1,302 +0,0 @@
-<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

@@ -1,50 +0,0 @@
-<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/Timeline.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  vertical?: boolean
-  horizontal?: boolean
-  compact?: boolean
-  snapIcon?: boolean
-}>()
-</script>
-
-<template>
-  <ul
-    class="timeline"
-    :class="{
-      'timeline-vertical': vertical,
-      'timeline-horizontal': horizontal,
-      'timeline-compact': compact,
-      'timeline-snap-icon': snapIcon,
-    }"
-  >
-    <slot />
-  </ul>
-</template>

package/app/components/TimelineEnd.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-defineProps<{ box?: boolean }>()
-</script>
-
-<template>
-  <div
-    class="timeline-end"
-    :class="{
-      'timeline-box': box,
-    }"
-  >
-    <slot />
-  </div>
-</template>

package/app/components/TimelineItem.vue

@@ -1,5 +0,0 @@
-<template>
-  <li class="timeline-item">
-    <slot />
-  </li>
-</template>

package/app/components/TimelineLine.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  color?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-}>()
-</script>
-
-<template>
-  <hr
-    class="timeline-line"
-    :class="{
-      'bg-neutral': neutral || color === 'neutral',
-      'bg-primary': primary || color === 'primary',
-      'bg-secondary': secondary || color === 'secondary',
-      'bg-accent': accent || color === 'accent',
-      'bg-info': info || color === 'info',
-      'bg-success': success || color === 'success',
-      'bg-warning': warning || color === 'warning',
-      'bg-error': error || color === 'error',
-    }"
-  />
-</template>

package/app/components/TimelineMiddle.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="timeline-middle">
-    <slot />
-  </div>
-</template>

package/app/components/TimelineStart.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-defineProps<{ box?: boolean }>()
-</script>
-
-<template>
-  <div
-    class="timeline-start"
-    :class="{
-      'timeline-box': box,
-    }"
-  >
-    <slot />
-  </div>
-</template>

package/app/components/Toast.vue

@@ -1,67 +0,0 @@
-<script setup lang="ts">
-import type { Toast } from '../composables/use-toast'
-import { computed } from 'vue'
-import { useToast } from '../composables/use-toast'
-
-// Explicit slot typing (Vue 3.4+ / Volar)
-interface ToastSlotProps {
-  toast?: Toast
-  removeToast?: (id: number) => void
-  [key: string]: unknown
-}
-const props = defineProps<{
-  /**
-   * Horizontal alignment (start, center, end)
-   */
-  hAlign?: 'start' | 'center' | 'end'
-  start?: boolean
-  center?: boolean
-  end?: boolean
-  /**
-   * Vertical alignment (top, middle, bottom)
-   */
-  vAlign?: 'top' | 'middle' | 'bottom'
-  top?: boolean
-  middle?: boolean
-  bottom?: boolean
-  /**
-   * Toast channel name (for named channels)
-   */
-  name?: string
-  /**
-   * Default toast settings for this channel (merged into every toast)
-   * Example: { duration: 6000, type: 'info', position: 'top-center' }
-   */
-  defaults?: Partial<Toast>
-}>()
-
-defineSlots<{
-  default: (props: ToastSlotProps) => any
-}>()
-
-// Extract useToast options from props (name, defaults, future-proof)
-const toastOptions = computed(() => {
-  const { name, defaults } = props
-  return { name, defaults }
-})
-
-const { toasts, removeToast } = useToast(toastOptions.value)
-const visibleToasts = computed(() => toasts.value ?? [])
-</script>
-
-<template>
-  <div
-    class="toast"
-    :class="{
-      'toast-start': props.start || props.hAlign === 'start',
-      'toast-center': props.center || props.hAlign === 'center',
-      'toast-end': props.end || props.hAlign === 'end',
-      'toast-top': props.top || props.vAlign === 'top',
-      'toast-middle': props.middle || props.vAlign === 'middle',
-      'toast-bottom': props.bottom || props.vAlign === 'bottom',
-    }"
-  >
-    <slot v-for="toast in visibleToasts" :key="toast.id" :toast="toast" :remove-toast="removeToast" />
-    <slot />
-  </div>
-</template>

package/app/components/Toggle.vue

@@ -1,60 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  modelValue?: any
-  disabled?: boolean
-  validator?: boolean
-  themeController?: boolean
-
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  success?: boolean
-  info?: boolean
-  warning?: boolean
-  error?: boolean
-
-  size?: string
-  xs?: boolean
-  sm?: boolean
-  md?: boolean
-  lg?: boolean
-  xl?: boolean
-}>()
-const emit = defineEmits(['update:modelValue'])
-
-const currentValue = computed({
-  get: () => props.modelValue,
-  set: (val: string) => emit('update:modelValue', val),
-})
-</script>
-
-<template>
-  <input
-    v-model="currentValue"
-    type="checkbox"
-    v-bind="$attrs"
-    class="toggle"
-    :disabled="disabled"
-    :class="{
-      validator,
-      'toggle-neutral': neutral || color === 'neutral',
-      'toggle-primary': primary || color === 'primary',
-      'toggle-secondary': secondary || color === 'secondary',
-      'toggle-accent': accent || color === 'accent',
-      'toggle-success': success || color === 'success',
-      'toggle-info': info || color === 'info',
-      'toggle-warning': warning || color === 'warning',
-      'toggle-error': error || color === 'error',
-      'toggle-xs': xs || size === 'xs',
-      'toggle-sm': sm || size === 'sm',
-      'toggle-md': md || size === 'md',
-      'toggle-lg': lg || size === 'lg',
-      'toggle-xl': xl || size === 'xl',
-      'theme-controller': themeController,
-    }"
-  />
-</template>