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

package/app/components/Tooltip.vue

@@ -0,0 +1,47 @@
+<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/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,77 @@
 {
   "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.10",
+  "packageManager": "pnpm@10.10.0",
+  "main": "./nuxt.js",
+  "module": "./nuxt.js",
+  "exports": {
+    ".": {
+      "import": "./nuxt.js",
+      "require": "./nuxt.js"
+    },
+    "./nuxt": {
+      "import": "./nuxt.js",
+      "require": "./nuxt.js"
+    },
+    "./components/*": "./app/components/*",
+    "./utils/*": "./app/utils/*"
   },
-  "main": "index.ts",
   "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"
+    "@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/scripts": "0.11.6",
+    "@nuxt/test-utils": "3.18.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",
+    "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.0.35",
+    "eslint": "^9.26.0",
+    "tailwindcss": "^4.1.5"
   }
 }

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>

package/components/Avatar.vue

@@ -1,70 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { makeMaskClasses, maskProps } from './Mask.config'
-import Mask from './Mask.vue'
-
-const props = defineProps({
-  backgroundColor: { type: String, default: '#BBB' },
-  maskClasses: String,
-  showStatus: Boolean,
-  online: Boolean,
-  ...maskProps,
-})
-
-const classes = computed(() => {
-  return {
-    online: props.showStatus && props.online,
-  }
-})
-
-const internalMaskClasses = makeMaskClasses(props)
-const allMaskClasses = computed(() => {
-  const classes = internalMaskClasses.value
-  const hasMaskClass = Object.values(classes).find(v => v)
-  // Enable rounded-btn class only if no mask classes are applied
-  Object.assign(classes, { 'rounded-btn': !hasMaskClass })
-  return classes
-})
-
-const color = computed(() => {
-  return `#${contrastingColor(props.backgroundColor.replace('#', ''))}`
-})
-
-function contrastingColor(color: any) {
-  return (luma(color) >= 155) ? '000' : 'fff'
-}
-// color can be a hx string or an array of RGB values 0-255
-function luma(color: any) {
-  const rgb = (typeof color === 'string') ? hexToRGBArray(color) : color
-  return (0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2]) // SMPTE C, Rec. 709 weightings
-}
-function hexToRGBArray(color: any) {
-  if (color.length === 3)
-    color = color.charAt(0) + color.charAt(0) + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2)
-  else if (color.length !== 6)
-    throw new Error(`Invalid hex color: ${color}`)
-  const rgb = []
-  for (let i = 0; i <= 2; i++)
-    rgb[i] = Number.parseInt(color.substr(i * 2, 2), 16)
-  return rgb
-}
-</script>
-
-<template>
-  <div class="avatar" :class="classes">
-    <Mask :style="{ backgroundColor, color }" class="w-full h-full avatar-mask aspect-square" :class="[allMaskClasses, maskClasses]">
-      <slot />
-    </Mask>
-  </div>
-</template>
-
-<style lang="postcss">
-.avatar-mask > * {
-  aspect-ratio: 1/1;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-</style>

package/components/AvatarGroup.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps({
-  vertical: Boolean,
-})
-const classes = computed(() => {
-  return {
-    'flex-col': props.vertical,
-    'flex-row': !props.vertical,
-  }
-})
-</script>
-
-<template>
-  <div class="avatar-group" :class="classes">
-    <slot />
-  </div>
-</template>

package/components/Badge.vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  outline?: boolean
-
-  size?: string
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-
-  ghost?: boolean
-}>()
-
-const classes = computed(() => {
-  return {
-    'badge-outline': props.outline,
-    'badge-ghost': props.ghost,
-    'badge-lg': props.lg || props.size === 'lg',
-    'badge-md': props.md || props.size === 'md',
-    'badge-sm': props.sm || props.size === 'sm',
-    'badge-xs': props.xs || props.size === 'xs',
-    'badge-neutral': props.neutral || props.color === 'neutral',
-    'badge-primary': props.primary || props.color === 'primary',
-    'badge-secondary': props.secondary || props.color === 'secondary',
-    'badge-accent': props.accent || props.color === 'accent',
-    'badge-info': props.info || props.color === 'info',
-    'badge-success': props.success || props.color === 'success',
-    'badge-warning': props.warning || props.color === 'warning',
-    'badge-error': props.error || props.color === 'error',
-  }
-})
-</script>
-
-<template>
-  <div class="badge" :class="classes">
-    <slot />
-  </div>
-</template>

package/components/BottomNav.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  size?: string
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>()
-const classes = computed(() => {
-  return {
-    'btm-nav-lg': props.lg || props.size === 'lg',
-    'btm-nav-md': props.md || props.size === 'md',
-    'btm-nav-sm': props.sm || props.size === 'sm',
-    'btm-nav-xs': props.xs || props.size === 'xs',
-  }
-})
-</script>
-
-<template>
-  <div class="btm-nav" :class="classes">
-    <slot />
-  </div>
-</template>

package/components/Button.vue

@@ -1,111 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  is?: string
-  join?: boolean
-
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-
-  ghost?: boolean
-  link?: boolean
-  glass?: boolean
-  outline?: boolean
-  disabled?: boolean
-
-  shape?: 'circle' | 'square' | 'wide' | 'block'
-  circle?: boolean
-  square?: boolean
-  wide?: boolean
-  block?: boolean
-
-  noAnimation?: boolean
-  active?: boolean
-
-  size?: 'lg' | 'md' | 'sm' | 'xs'
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-
-  type?: 'button' | 'submit' | 'reset'
-}>()
-
-const classes = computed(() => {
-  return {
-    'join-item': props.join,
-
-    'btn-primary': !props.disabled && (props.primary || props.color === 'primary'),
-    'btn-secondary': !props.disabled && (props.secondary || props.color === 'secondary'),
-    'btn-neutral': !props.disabled && (props.neutral || props.color === 'neutral'),
-    'btn-accent': !props.disabled && (props.accent || props.color === 'accent'),
-    'btn-info': !props.disabled && (props.info || props.color === 'info'),
-    'btn-success': !props.disabled && (props.success || props.color === 'success'),
-    'btn-warning': !props.disabled && (props.warning || props.color === 'warning'),
-    'btn-error': !props.disabled && (props.error || props.color === 'error'),
-
-    'text-primary': !props.disabled && (props.primary || props.color === 'primary') && props.link,
-    'text-secondary': !props.disabled && (props.secondary || props.color === 'secondary') && props.link,
-    'text-neutral': !props.disabled && (props.neutral || props.color === 'neutral') && props.link,
-    'text-accent': !props.disabled && (props.accent || props.color === 'accent') && props.link,
-    'text-info': !props.disabled && (props.info || props.color === 'info') && props.link,
-    'text-success': !props.disabled && (props.success || props.color === 'success') && props.link,
-    'text-warning': !props.disabled && (props.warning || props.color === 'warning') && props.link,
-    'text-error': !props.disabled && (props.error || props.color === 'error') && props.link,
-
-    'glass': !props.disabled && props.glass,
-
-    'btn-circle': props.circle || props.shape === 'circle',
-    'btn-square': props.square || props.shape === 'square',
-    'btn-wide': props.wide || props.shape === 'wide',
-    'btn-block': props.block || props.shape === 'block',
-
-    'btn-lg': props.lg || props.size === 'lg',
-    'btn-md': props.md || props.size === 'md',
-    'btn-sm': props.sm || props.size === 'sm',
-    'btn-xs': props.xs || props.size === 'xs',
-
-    'btn-outline': !props.disabled && props.outline,
-    'btn-ghost': !props.disabled && props.ghost,
-    'btn-link': !props.disabled && props.link,
-    'btn-disabled': props.disabled,
-
-    'no-animation': props.noAnimation,
-    'btn-active': !props.disabled && props.active,
-  }
-})
-
-// Accessibility-friendly attributes for disabling the button
-const disabledAttrs = computed(() => {
-  if (props.disabled) {
-    return {
-      'tabindex': -1,
-      'role': 'button',
-      'aria-disabled': true,
-    }
-  }
-  else {
-    return {}
-  }
-})
-</script>
-
-<template>
-  <component
-    :is="is || 'button'"
-    :type="type"
-    class="btn"
-    :class="[classes]"
-    v-bind="{ ...disabledAttrs, ...$attrs }"
-  >
-    <slot />
-  </component>
-</template>

package/components/Card.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<{
-  is?: string | Object | Function
-  bordered?: boolean
-  compact?: boolean
-  side?: boolean
-  imageFull?: boolean
-  glass?: boolean
-}>(), {
-  is: 'div',
-})
-
-const classes = computed(() => {
-  return {
-    'card-bordered': props.bordered,
-    'card-compact': props.compact,
-    'card-side': props.side,
-    'image-full': props.imageFull,
-    'glass': props.glass,
-  }
-})
-</script>
-
-<template>
-  <component :is="is" class="card" :class="classes">
-    <slot />
-  </component>
-</template>

package/components/Carousel.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  snapTo?: 'center' | 'end'
-  center?: boolean
-  end?: boolean
-  vertical?: boolean
-}>()
-
-const classes = computed(() => {
-  const { snapTo, center, end, vertical } = props
-  return {
-    'carousel-center': center || snapTo === 'center',
-    'carousel-end': end || snapTo === 'end',
-    'carousel-vertical': vertical,
-  }
-})
-</script>
-
-<template>
-  <div class="carousel" :class="classes">
-    <slot />
-  </div>
-</template>

package/components/Chat.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<{
-  pre?: boolean
-  align?: string
-  start?: boolean
-  end?: boolean
-}>(), {
-  align: 'start',
-})
-
-const classes = computed(() => {
-  const { align, start, end } = props
-  return {
-    'chat-start': start || (!end && align === 'start'),
-    'chat-end': end || align === 'end',
-    'whitespace-pre': props.pre,
-  }
-})
-</script>
-
-<template>
-  <div class="chat" :class="classes">
-    <slot />
-  </div>
-</template>

package/components/ChatBubble.vue

@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-}>()
-
-const classes = computed(() => {
-  return {
-    'badge-neutral': props.neutral || props.color === 'neutral',
-    'badge-primary': props.primary || props.color === 'primary',
-    'badge-secondary': props.secondary || props.color === 'secondary',
-    'badge-accent': props.accent || props.color === 'accent',
-    'badge-info': props.info || props.color === 'info',
-    'badge-success': props.success || props.color === 'success',
-    'badge-warning': props.warning || props.color === 'warning',
-    'badge-error': props.error || props.color === 'error',
-  }
-})
-</script>
-
-<template>
-  <div class="chat-bubble" :class="classes">
-    <slot />
-  </div>
-</template>