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

package/README.md

@@ -1,27 +1,75 @@
-# DaisyUI Kit
+# Nuxt Minimal Starter
 
-[Read the Docs](https://daisyuikit.com)
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 
-## Start with CSS. Sprinkle in VueJS
+## Setup
 
-You can do a lot with CSS. VueJS lets us go beyond any limitations to give your users exactly the UX they desire. Where it makes sense, we've integrated components with reactive `v-model` support.
+Make sure to install dependencies:
 
-## No Memorizing Class Names
+```bash
+# npm
+npm install
 
-When you don't have to memorize class names, you can start building right away.
+# pnpm
+pnpm install
 
-## Semantic Markup
+# yarn
+yarn install
 
-It's much nicer to read component names than `<div class="" />`. It reduces mental overhead and frees up creativity.
+# bun
+bun install
+```
 
-## Built with TypeScript
+## Development Server
 
-Since DaisyUI is built with Typescript, you get type-friendly components and props. The props practically document themselves.
+Start the development server on `http://localhost:3000`:
 
-## Great Documentation
+```bash
+# npm
+npm run dev
 
-The DaisyUI Kit documentation is loaded with examples. Expand the code panel below any example to copy, paste, then customize.
+# pnpm
+pnpm dev
 
-## Small Bundle Size
+# yarn
+yarn dev
 
-We've found the perfect middle ground that captures the ease-of-use you get with components while also not bundling a lot of extra CSS class utilities.
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

package/package.json

@@ -1,27 +1,21 @@
 {
   "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"
-  },
-  "main": "index.ts",
+  "type": "module",
+  "version": "5.0.0-pre.4",
+  "packageManager": "pnpm@10.9.0",
   "files": [
     "components/*.vue",
-    "components/Mask.config.ts",
-    "utils/*",
-    "nuxt.js"
+    "nuxt.js",
+    "utils/*"
   ],
   "scripts": {
-    "generate": "nuxi generate",
-    "build": "nuxi build",
-    "dev": "nuxi dev",
-    "start": "node .output/server/index.mjs",
-    "lint": "eslint .",
+    "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",
@@ -29,52 +23,38 @@
     "release:major": "npm version major && npm publish"
   },
   "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.4.0",
+    "@nuxt/eslint": "1.3.0",
+    "@nuxt/fonts": "0.11.1",
+    "@nuxt/icon": "1.12.0",
+    "@nuxt/image": "1.10.0",
+    "@nuxt/scripts": "0.11.6",
+    "@nuxt/test-utils": "3.17.2",
+    "@unhead/vue": "^2.0.8",
+    "@vueuse/core": "^13.1.0",
+    "@vueuse/integrations": "^13.1.0",
+    "focus-trap": "^7.6.4",
+    "nuxt": "^3.16.2",
+    "pikaday": "^1.8.2",
+    "shiki": "^3.3.0",
+    "typescript": "^5.8.3",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
+    "zod": "^3.24.3"
   },
   "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.4",
+    "@types/pikaday": "^1.7.9",
+    "daisyui": "^5.0.27",
+    "eslint": "^9.25.1",
+    "tailwindcss": "^4.1.4"
   }
 }

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>

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

@@ -1,7 +0,0 @@
-<template>
-  <div class="breadcrumbs">
-    <ul>
-      <slot />
-    </ul>
-  </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/CardActions.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import Text from './Text.vue'
-
-interface Props {
-  is?: string
-}
-withDefaults(defineProps<Props>(), {
-  is: 'div',
-})
-</script>
-
-<template>
-  <Text :is="is" class="card-actions">
-    <slot />
-  </Text>
-</template>

package/components/CardBody.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import Text from './Text.vue'
-
-interface Props {
-  is?: string
-}
-withDefaults(defineProps<Props>(), {
-  is: 'div',
-})
-</script>
-
-<template>
-  <Text :is="is" class="card-body">
-    <slot />
-  </Text>
-</template>

package/components/CardTitle.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import Text from './Text.vue'
-
-interface Props {
-  is?: string
-}
-withDefaults(defineProps<Props>(), {
-  is: 'div',
-})
-</script>
-
-<template>
-  <Text :is="is" class="card-title">
-    <slot />
-  </Text>
-</template>