daisy-ui-kit 3.0.12 → 5.0.0-pre.11

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/Timeline.vue

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

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

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

package/app/components/TimelineLine.vue

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

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

package/app/components/TimelineStart.vue

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

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

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

package/app/components/Tooltip.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+const props = defineProps<{
+  tip?: string | number
+  open?: boolean
+
+  color?: string
+  neutral?: boolean
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+
+  position?: 'top' | 'right' | 'bottom' | 'left'
+  top?: boolean
+  right?: boolean
+  bottom?: boolean
+  left?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    :data-tip="tip"
+    class="tooltip"
+    :class="{
+      'tooltip-open': props.open,
+
+      'tooltip-top': props.top || props.position === 'top',
+      'tooltip-bottom': props.bottom || props.position === 'bottom',
+      'tooltip-left': props.left || props.position === 'left',
+      'tooltip-right': props.right || props.position === 'right',
+
+      'tooltip-neutral': props.neutral || props.color === 'neutral',
+      'tooltip-primary': props.primary || props.color === 'primary',
+      'tooltip-secondary': props.secondary || props.color === 'secondary',
+      'tooltip-accent': props.accent || props.color === 'accent',
+      'tooltip-info': props.info || props.color === 'info',
+      'tooltip-success': props.success || props.color === 'success',
+      'tooltip-warning': props.warning || props.color === 'warning',
+      'tooltip-error': props.error || props.color === 'error',
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/TooltipContent.vue

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

package/app/components/ValidatorHint.vue

@@ -0,0 +1,5 @@
+<template>
+  <span class="validator-hint">
+    <slot />
+  </span>
+</template>

package/{utils → 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/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,80 +1,79 @@
 {
   "name": "daisy-ui-kit",
-  "version": "3.0.12",
-  "description": "Start with DaisyUI CSS and Sprinkle in TypeScript and A11y.",
-  "author": "Marshall Thompson",
-  "license": "MIT",
-  "homepage": "https://daisyuikit.com",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/marshallswain/daisy-ui-kit"
+  "type": "module",
+  "version": "5.0.0-pre.11",
+  "packageManager": "pnpm@10.10.0",
+  "exports": {
+    ".": {
+      "import": "./nuxt.js",
+      "require": "./nuxt.js"
+    },
+    "./nuxt": {
+      "import": "./nuxt.js",
+      "require": "./nuxt.js"
+    },
+    "./components/*": "./app/components/*",
+    "./utils/*": "./app/utils/*"
   },
-  "main": "index.ts",
+  "main": "./nuxt.js",
+  "module": "./nuxt.js",
   "files": [
-    "components/*.vue",
-    "components/Mask.config.ts",
-    "utils/*",
+    "app/components/*.vue",
+    "app/utils/*",
     "nuxt.js"
   ],
   "scripts": {
-    "generate": "nuxi generate",
-    "build": "nuxi build",
-    "dev": "nuxi dev",
-    "start": "node .output/server/index.mjs",
-    "lint": "eslint .",
+    "import-d1-dumps": "./import-d1-dumps.sh",
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
     "publish": "git push origin --tags && git push origin",
     "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": "^10.2.1",
-    "daisyui": "^3",
-    "prismjs": "^1.29.0"
+    "@vueuse/core": "^13.1.0",
+    "daisyui": "^5"
   },
   "dependencies": {
-    "@floating-ui/vue": "^1.0.2",
-    "@vueuse/integrations": "^10.4.0",
-    "focus-trap": "^7.5.2"
-  },
-  "optionalPeerDependencies": {
-    "prismjs": "^1.29.0"
+    "@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": "^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": "^4.2.1",
+    "pikaday": "^1.8.2",
+    "shiki": "^3.3.0",
+    "typescript": "^5.8.3",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.1",
+    "zod": "^3.24.4"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.41.0",
-    "@headlessui/vue": "^1.7.16",
-    "@heroicons/vue": "^2.0.18",
-    "@iconify/json": "^2.2.106",
-    "@nuxt/content": "^2.7.2",
-    "@nuxt/devtools": "^2.0.0",
-    "@nuxt/kit": "link:@nuxt/kit",
-    "@nuxtjs/color-mode": "^3.3.0",
-    "@nuxtjs/tailwindcss": "^6.8.0",
-    "@pinia/nuxt": "^0.4.11",
-    "@popperjs/core": "^2.11.8",
-    "@rovit/popper": "^3.9.0",
-    "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/forms": "^0.5.5",
-    "@tailwindcss/line-clamp": "^0.4.4",
-    "@tailwindcss/typography": "^0.5.9",
-    "@vueuse/core": "^10.3.0",
-    "@vueuse/nuxt": "^10.3.0",
-    "autoprefixer": "^10.4.15",
-    "cookie": "^0.5.0",
-    "daisyui": "^3.6.3",
-    "eslint": "^8.48.0",
-    "feathers-pinia": "^4.0.0",
-    "fuse.js": "^6.6.2",
-    "mobile-detect": "^1.4.5",
-    "nuxt": "^3.6.5",
-    "nuxt-icon": "^0.5.0",
-    "ohmyfetch": "^0.4.21",
-    "pinia": "^2.1.6",
-    "postcss": "^8.4.28",
-    "tailwindcss": "^3.3.3",
-    "typescript": "^5.2.2",
-    "unplugin-icons": "^0.16.5",
-    "vue": "^3.3.4"
+    "@antfu/eslint-config": "^4.12.0",
+    "@stylistic/eslint-plugin": "^4.2.0",
+    "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "^4.1.5",
+    "@types/pikaday": "^1.7.9",
+    "daisyui": "^5.5.5",
+    "eslint": "^9.26.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-vue": "^10.5.1",
+    "tailwindcss": "^4.1.5"
   }
 }

package/components/Accordion.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { computed, provide, ref, watch } from 'vue'
-
-const props = defineProps<{
-  modelValue?: string | number
-}>()
-const emit = defineEmits(['update:modelValue'])
-
-const _value = ref(props.modelValue)
-watch(() => props.modelValue, (val) => {
-  _value.value = val
-})
-const value = computed({
-  get: () => _value.value,
-  set: (val) => {
-    _value.value = val
-    if (props.modelValue !== val)
-      emit('update:modelValue', val)
-  },
-})
-
-provide('accordion-value', value)
-</script>
-
-<template>
-  <div class="daisy-ui-kit-accordion">
-    <slot />
-  </div>
-</template>

package/components/Alert.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props: any = defineProps<{
-  type?: string
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-}>()
-const classes = computed(() => {
-  return {
-    'alert-info': props.info || props.type === 'info',
-    'alert-success': props.success || props.type === 'success',
-    'alert-warning': props.warning || props.type === 'warning',
-    'alert-error': props.error || props.type === 'error',
-  }
-})
-</script>
-
-<template>
-  <div class="alert" :class="classes">
-    <slot />
-  </div>
-</template>

package/components/Artboard.vue

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  demo?: boolean
-  horizontal?: boolean
-  size?: string
-  phone1?: boolean
-  phone2?: boolean
-  phone3?: boolean
-  phone4?: boolean
-  phone5?: boolean
-  phone6?: boolean
-}>()
-const classes = computed(() => {
-  return {
-    'artboard-demo': props.demo,
-    'horizontal': props.horizontal,
-    'phone-1': props.phone1 || props.size === 'phone-1',
-    'phone-2': props.phone2 || props.size === 'phone-2',
-    'phone-3': props.phone3 || props.size === 'phone-3',
-    'phone-4': props.phone4 || props.size === 'phone-4',
-    'phone-5': props.phone5 || props.size === 'phone-5',
-    'phone-6': props.phone6 || props.size === 'phone-6',
-  }
-})
-</script>
-
-<template>
-  <div class="artboard" :class="classes">
-    <slot />
-  </div>
-</template>