daisy-ui-kit 5.0.3 → 5.0.4

package/package.json

@@ -4,43 +4,31 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "5.0.3",
+  "version": "5.0.4",
   "packageManager": "pnpm@10.10.0",
   "author": "feathers.dev",
   "exports": {
     ".": {
-      "types": "./index.d.ts",
-      "import": "./index.js"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     },
     "./nuxt": {
       "types": "./nuxt.d.ts",
       "import": "./nuxt.js"
-    },
-    "./components": {
-      "types": "./components.d.ts",
-      "import": "./components.js"
-    },
-    "./components/*": "./app/components/*",
-    "./composables/*": "./app/composables/*",
-    "./utils/*": "./app/utils/*"
+    }
   },
-  "main": "./index.js",
-  "module": "./index.js",
-  "types": "./index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
-    "app/components/*.vue",
-    "app/composables/*",
-    "app/utils/*",
-    "index.js",
-    "index.d.ts",
+    "dist",
     "nuxt.js",
     "nuxt.d.ts",
-    "components.js",
-    "components.d.ts",
     "README.md"
   ],
   "scripts": {
     "import-d1-dumps": "./import-d1-dumps.sh",
+    "build:lib": "vite build --config vite.lib.config.ts",
     "prebuild": "cp CHANGELOG.md content/docs/changelog.md",
     "build": "NODE_OPTIONS='--max-old-space-size=7168' nuxt build",
     "predev": "cp CHANGELOG.md content/docs/changelog.md",
@@ -95,6 +83,8 @@
     "eslint-plugin-vue": "^10.5.1",
     "happy-dom": "^20.0.11",
     "tailwindcss": "^4.1.5",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
     "vitest": "^4.0.16"
   }
 }

package/app/components/Accordion.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { 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
-  },
-)
-watch(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/app/components/Alert.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  outline?: boolean
-  dash?: boolean
-  soft?: boolean
-  type?: 'info' | 'success' | 'warning' | 'error'
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-  orientation?: 'vertical' | 'horizontal'
-  vertical?: boolean
-  horizontal?: boolean
-}>()
-</script>
-
-<template>
-  <div
-    class="alert"
-    :class="{
-      'alert-outline': props.outline,
-      'alert-dash': props.dash,
-      'alert-soft': props.soft,
-
-      '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',
-
-      'alert-vertical': props.vertical || props.orientation === 'vertical',
-      'alert-horizontal': props.horizontal || props.orientation === 'horizontal',
-    }"
-  >
-    <slot />
-  </div>
-</template>

package/app/components/Avatar.vue

@@ -1,131 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import Mask from './Mask.vue'
-
-const props = defineProps({
-  backgroundColor: { type: String, default: '#BBB' },
-  maskClasses: String,
-  showStatus: Boolean,
-  // Presence props
-  presence: String,
-  online: Boolean,
-  offline: Boolean,
-  // Mask shape props (self-contained, no Mask.config.ts dependency)
-  shape: String,
-  squircle: Boolean,
-  heart: Boolean,
-  hexagon: Boolean,
-  hexagon2: Boolean,
-  decagon: Boolean,
-  pentagon: Boolean,
-  diamond: Boolean,
-  square: Boolean,
-  circle: Boolean,
-  star: Boolean,
-  star2: Boolean,
-  triangle: Boolean,
-  triangle2: Boolean,
-  triangle3: Boolean,
-  triangle4: Boolean,
-  half1: Boolean,
-  half2: Boolean,
-})
-
-const maskShapeKeys = [
-  'mask-squircle',
-  'mask-heart',
-  'mask-hexagon',
-  'mask-hexagon-2',
-  'mask-decagon',
-  'mask-pentagon',
-  'mask-diamond',
-  'mask-square',
-  'mask-circle',
-  'mask-star',
-  'mask-star-2',
-  'mask-triangle',
-  'mask-triangle-2',
-  'mask-triangle-3',
-  'mask-triangle-4',
-  'mask-half-1',
-  'mask-half-2',
-] as const
-
-type AvatarClassKey = (typeof maskShapeKeys)[number] | 'rounded-box' | 'avatar-online' | 'avatar-offline'
-
-const avatarClasses = computed<Record<AvatarClassKey, boolean>>(() => {
-  const mask: Record<AvatarClassKey, boolean> = {
-    'mask-squircle': props.squircle || props.shape === 'squircle',
-    'mask-heart': props.heart || props.shape === 'heart',
-    'mask-hexagon': props.hexagon || props.shape === 'hexagon',
-    'mask-hexagon-2': props.hexagon2 || props.shape === 'hexagon-2',
-    'mask-decagon': props.decagon || props.shape === 'decagon',
-    'mask-pentagon': props.pentagon || props.shape === 'pentagon',
-    'mask-diamond': props.diamond || props.shape === 'diamond',
-    'mask-square': props.square || props.shape === 'square',
-    'mask-circle': props.circle || props.shape === 'circle',
-    'mask-star': props.star || props.shape === 'star',
-    'mask-star-2': props.star2 || props.shape === 'star-2',
-    'mask-triangle': props.triangle || props.shape === 'triangle',
-    'mask-triangle-2': props.triangle2 || props.shape === 'triangle-2',
-    'mask-triangle-3': props.triangle3 || props.shape === 'triangle-3',
-    'mask-triangle-4': props.triangle4 || props.shape === 'triangle-4',
-    'mask-half-1': props.half1 || props.shape === 'half-1',
-    'mask-half-2': props.half2 || props.shape === 'half-2',
-    'rounded-box': false,
-    'avatar-online': props.presence === 'online' || props.online,
-    'avatar-offline': props.presence === 'offline' || props.offline,
-  }
-  const hasMask = maskShapeKeys.some(k => mask[k])
-  mask['rounded-box'] = !hasMask
-  return mask
-})
-
-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">
-    <Mask
-      :style="{ backgroundColor, color }"
-      class="w-full h-full avatar-mask aspect-square"
-      :class="[avatarClasses, 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/app/components/AvatarGroup.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  orientation: string
-  horizontal: boolean
-  vertical: boolean
-}>()
-</script>
-
-<template>
-  <div
-    class="avatar-group"
-    :class="{
-      'flex-row':
-        props.orientation === 'horizontal' ||
-        props.horizontal ||
-        (!props.orientation && !props.vertical && !props.horizontal),
-      'flex-col': props.orientation === 'vertical' || props.vertical,
-    }"
-  >
-    <slot />
-  </div>
-</template>

package/app/components/Badge.vue

@@ -1,72 +0,0 @@
-<script setup lang="ts">
-import { computed, resolveComponent } from 'vue'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const { is = 'div', ...props } = defineProps<{
-  is?: string
-  outline?: boolean
-  soft?: boolean
-  dash?: boolean
-  ghost?: boolean
-
-  size?: string
-  xl?: boolean
-  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
-}>()
-
-const NuxtLink = resolveComponent('NuxtLink')
-const RouterLink = resolveComponent('RouterLink')
-
-const resolvedComponent = computed(() => {
-  if (is === 'NuxtLink') return NuxtLink
-  if (is === 'RouterLink') return RouterLink
-  return is
-})
-</script>
-
-<template>
-  <component
-    :is="resolvedComponent"
-    v-bind="$attrs"
-    class="badge"
-    :class="{
-      'badge-outline': props.outline,
-      'badge-ghost': props.ghost,
-      'badge-soft': props.soft,
-      'badge-dash': props.dash,
-
-      'badge-xl': props.xl || props.size === 'xl',
-      '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',
-    }"
-  >
-    <slot />
-  </component>
-</template>

package/app/components/Breadcrumbs.vue

@@ -1,7 +0,0 @@
-<template>
-  <div class="breadcrumbs">
-    <ul>
-      <slot />
-    </ul>
-  </div>
-</template>

package/app/components/Button.vue

@@ -1,140 +0,0 @@
-<script setup lang="ts">
-import { computed, resolveComponent } from 'vue'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(
-  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
-    dash?: boolean
-    soft?: 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' | 'xl'
-    xl?: boolean
-    lg?: boolean
-    md?: boolean
-    sm?: boolean
-    xs?: boolean
-
-    type?: 'button' | 'submit' | 'reset'
-  }>(),
-  {
-    type: 'button',
-  },
-)
-const NuxtLink = resolveComponent('NuxtLink')
-const RouterLink = resolveComponent('RouterLink')
-
-// Accessibility: Determine if rendering a native button
-const isButton = computed(() => (props.is || 'button') === 'button')
-
-// Resolve the component to render
-const resolvedComponent = computed(() => {
-  if (!props.is || props.is === 'button' || props.is === 'a') {
-    return props.is || 'button'
-  }
-  if (props.is === 'NuxtLink') return NuxtLink
-  if (props.is === 'RouterLink') return RouterLink
-  return props.is
-})
-
-// Accessibility: Keyboard event handler for custom elements
-function onKeydown(e: KeyboardEvent) {
-  if (props.disabled) {
-    return
-  }
-  if (e.code === 'Space' || e.code === 'Enter' || e.key === ' ' || e.key === 'Enter') {
-    e.preventDefault()
-    // @ts-expect-error: $el may not exist yet
-    e.currentTarget?.click?.()
-  }
-}
-</script>
-
-<template>
-  <component
-    :is="resolvedComponent"
-    v-bind="$attrs"
-    :type="isButton ? type : undefined"
-    :disabled="isButton && disabled ? true : undefined"
-    :aria-disabled="!isButton && disabled ? true : undefined"
-    :tabindex="!isButton ? (disabled ? -1 : 0) : undefined"
-    :role="!isButton ? 'button' : undefined"
-    class="btn"
-    :class="{
-      'join-item': join,
-
-      'btn-neutral': !disabled && (neutral || color === 'neutral'),
-      'btn-primary': !disabled && (primary || color === 'primary'),
-      'btn-secondary': !disabled && (secondary || color === 'secondary'),
-      'btn-accent': !disabled && (accent || color === 'accent'),
-      'btn-info': !disabled && (info || color === 'info'),
-      'btn-success': !disabled && (success || color === 'success'),
-      'btn-warning': !disabled && (warning || color === 'warning'),
-      'btn-error': !disabled && (error || color === 'error'),
-
-      'text-primary': !disabled && (primary || color === 'primary') && link,
-      'text-secondary': !disabled && (secondary || color === 'secondary') && link,
-      'text-neutral': !disabled && (neutral || color === 'neutral') && link,
-      'text-accent': !disabled && (accent || color === 'accent') && link,
-      'text-info': !disabled && (info || color === 'info') && link,
-      'text-success': !disabled && (success || color === 'success') && link,
-      'text-warning': !disabled && (warning || color === 'warning') && link,
-      'text-error': !disabled && (error || color === 'error') && link,
-
-      glass: !disabled && glass,
-
-      'btn-circle': circle || shape === 'circle',
-      'btn-square': square || shape === 'square',
-      'btn-wide': wide || shape === 'wide',
-      'btn-block': block || shape === 'block',
-
-      'btn-xl': xl || size === 'xl',
-      'btn-lg': lg || size === 'lg',
-      'btn-md': md || size === 'md',
-      'btn-sm': sm || size === 'sm',
-      'btn-xs': xs || size === 'xs',
-
-      'btn-outline': !disabled && outline,
-      'btn-dash': !disabled && dash,
-      'btn-ghost': !disabled && ghost,
-      'btn-soft': !disabled && soft,
-      'btn-link': !disabled && link,
-      'btn-disabled': disabled,
-
-      'no-animation': noAnimation,
-      'btn-active': !disabled && active,
-    }"
-    @keydown="!isButton ? onKeydown : undefined"
-  >
-    <slot />
-  </component>
-</template>

package/app/components/Calendar.vue

@@ -1,175 +0,0 @@
-<script setup lang="ts">
-import type { CalendarOptions } from '../composables/use-calendar'
-import { computed, watch } from 'vue'
-import { useCalendar } from '../composables/use-calendar'
-
-const props = defineProps<{
-  /** Bound value: Date object or ISO string or null */
-  modelValue?: Date | string | null
-  /** Calendar options */
-  options?: CalendarOptions
-  /** If true, default to today when no value provided */
-  autoDefault?: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', v: Date | null): void
-}>()
-
-// Parse initial date from modelValue
-function parseDate(value: Date | string | null | undefined): Date | null {
-  if (!value) return null
-  if (value instanceof Date) return value
-  const d = new Date(value)
-  return Number.isNaN(d.getTime()) ? null : d
-}
-
-const initialDate = computed(() => {
-  const parsed = parseDate(props.modelValue)
-  if (parsed) return parsed
-  if (props.autoDefault) return new Date()
-  return null
-})
-
-const {
-  selectedDate,
-  viewMonth,
-  viewYear,
-  monthName,
-  weekdayHeaders,
-  weekdayHeadersFull,
-  calendarDays,
-  prevMonth,
-  nextMonth,
-  selectDate,
-  goToDate,
-} = useCalendar(initialDate.value, props.options)
-
-// Sync selectedDate back to modelValue
-watch(selectedDate, date => {
-  emit('update:modelValue', date)
-})
-
-// Watch for external modelValue changes
-watch(
-  () => props.modelValue,
-  newValue => {
-    const parsed = parseDate(newValue)
-    if (parsed && (!selectedDate.value || parsed.getTime() !== selectedDate.value.getTime())) {
-      selectDate(parsed)
-      goToDate(parsed)
-    }
-  },
-)
-
-function handleDayClick(day: (typeof calendarDays.value)[0]) {
-  if (day.isDisabled) return
-  selectDate(day.date)
-}
-</script>
-
-<template>
-  <div class="pika-single">
-    <div class="pika-lendar">
-      <!-- Header with navigation -->
-      <div class="pika-title">
-        <div class="pika-label">
-          {{ monthName }}
-          <select
-            class="pika-select pika-select-month"
-            :value="viewMonth"
-            @change="
-              e => {
-                const target = e.target as HTMLSelectElement
-                const newMonth = parseInt(target.value, 10)
-                const d = new Date(viewYear, newMonth, 1)
-                goToDate(d)
-              }
-            "
-          >
-            <option
-              v-for="(m, i) in [
-                'January',
-                'February',
-                'March',
-                'April',
-                'May',
-                'June',
-                'July',
-                'August',
-                'September',
-                'October',
-                'November',
-                'December',
-              ]"
-              :key="i"
-              :value="i"
-            >
-              {{ m }}
-            </option>
-          </select>
-        </div>
-        <div class="pika-label">
-          {{ viewYear }}
-          <select
-            class="pika-select pika-select-year"
-            :value="viewYear"
-            @change="
-              e => {
-                const target = e.target as HTMLSelectElement
-                const newYear = parseInt(target.value, 10)
-                const d = new Date(newYear, viewMonth, 1)
-                goToDate(d)
-              }
-            "
-          >
-            <option v-for="y in Array.from({ length: 21 }, (_, i) => viewYear - 10 + i)" :key="y" :value="y">
-              {{ y }}
-            </option>
-          </select>
-        </div>
-        <button type="button" class="pika-prev" @click="prevMonth">Previous Month</button>
-        <button type="button" class="pika-next" @click="nextMonth">Next Month</button>
-      </div>
-
-      <!-- Calendar grid -->
-      <table class="pika-table" role="grid">
-        <thead>
-          <tr>
-            <th v-for="(day, i) in weekdayHeaders" :key="i" scope="col">
-              <abbr :title="weekdayHeadersFull[i]">{{ day }}</abbr>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="week in 6" :key="week" class="pika-row">
-            <td
-              v-for="dayIndex in 7"
-              :key="dayIndex"
-              :class="{
-                'is-today': calendarDays[(week - 1) * 7 + dayIndex - 1]?.isToday,
-                'is-selected': calendarDays[(week - 1) * 7 + dayIndex - 1]?.isSelected,
-                'is-disabled': calendarDays[(week - 1) * 7 + dayIndex - 1]?.isDisabled,
-                'is-outside-current-month': calendarDays[(week - 1) * 7 + dayIndex - 1]?.isOutsideMonth,
-              }"
-              :aria-selected="calendarDays[(week - 1) * 7 + dayIndex - 1]?.isSelected"
-              :data-day="calendarDays[(week - 1) * 7 + dayIndex - 1]?.day"
-            >
-              <button
-                type="button"
-                class="pika-button pika-day"
-                :disabled="calendarDays[(week - 1) * 7 + dayIndex - 1]?.isDisabled"
-                :data-pika-year="calendarDays[(week - 1) * 7 + dayIndex - 1]?.year"
-                :data-pika-month="calendarDays[(week - 1) * 7 + dayIndex - 1]?.month"
-                :data-pika-day="calendarDays[(week - 1) * 7 + dayIndex - 1]?.day"
-                @click="handleDayClick(calendarDays[(week - 1) * 7 + dayIndex - 1]!)"
-              >
-                {{ calendarDays[(week - 1) * 7 + dayIndex - 1]?.day }}
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</template>