daisy-ui-kit 2.1.3 → 2.1.5

package/components/Button.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-interface Props {
+import { computed } from 'vue'
+
+const props = defineProps<{
   is?: string
   join?: boolean
 
@@ -35,9 +37,7 @@ interface Props {
   xs?: boolean
 
   type?: 'button' | 'submit' | 'reset'
-}
-
-const props = defineProps<Props>()
+}>()
 
 const classes = computed(() => {
   return {

package/components/Card.vue

@@ -1,15 +1,14 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-interface Props {
+const props = withDefaults(defineProps<{
   is?: string | Object | Function
   bordered?: boolean
   compact?: boolean
   side?: boolean
   imageFull?: boolean
   glass?: boolean
-}
-const props = withDefaults(defineProps<Props>(), {
+}>(), {
   is: 'div',
 })
 

package/components/CardActions.vue

@@ -4,7 +4,7 @@ import Text from './Text.vue'
 interface Props {
   is?: string
 }
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   is: 'div',
 })
 </script>

package/components/CardBody.vue

@@ -4,7 +4,7 @@ import Text from './Text.vue'
 interface Props {
   is?: string
 }
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   is: 'div',
 })
 </script>

package/components/CardTitle.vue

@@ -4,7 +4,7 @@ import Text from './Text.vue'
 interface Props {
   is?: string
 }
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   is: 'div',
 })
 </script>

package/components/Carousel.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-interface Props {
+const props = defineProps<{
   snapTo?: 'center' | 'end'
   center?: boolean
   end?: boolean
   vertical?: boolean
-}
-const props = defineProps<Props>()
+}>()
 
 const classes = computed(() => {
   const { snapTo, center, end, vertical } = props

package/components/Collapse.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-interface Props {
+const props = defineProps<{
   style?: 'arrow' | 'plus'
   arrow?: boolean
   plus?: boolean
@@ -13,8 +13,7 @@ interface Props {
 
   // for accordion
   value?: any
-}
-const props = defineProps<Props>()
+}>()
 
 const accordionValue: any = inject('accordion-value', ref('no-accordion-value'))
 const useAccordion = computed(() => {

package/components/Countdown.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-interface Props {
+const props = defineProps<{
   is?: string | Function | Object
-}
-const props = defineProps<Props>()
+}>()
 
 const tag = computed(() => props.is || 'span')
 </script>

package/components/CountdownTimers.vue

@@ -2,11 +2,10 @@
 import { useIntervalFn } from '@vueuse/core'
 import { computed } from 'vue'
 
-interface Props {
+const props = withDefaults(defineProps<{
   durationInSeconds?: number
   untilDate?: Date
-}
-const props = withDefaults(defineProps<Props>(), { durationInSeconds: 0 })
+}>(), { durationInSeconds: 0 })
 const emit = defineEmits(['done'])
 
 const calculateDate = () => props.untilDate || new Date(Date.now() + props.durationInSeconds * 1000)

package/components/Counter.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-interface Props {
+const props = defineProps<{
   value: number
   is?: string | Function
-}
-const props = defineProps<Props>()
+}>()
 
 const tag = computed(() => props.is || 'span')
 </script>

package/components/Divider.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-interface Props {
+const props = withDefaults(defineProps<{
   horizontal?: boolean
   vertical?: boolean
-}
-const props = withDefaults(defineProps<Props>(), {
+}>(), {
   horizontal: false,
   vertical: false,
 })

package/components/Drawer.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { createDrawerState } from '../utils/drawer-utils'
 
 const props = withDefaults(defineProps<{

package/components/Dropdown.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { onClickOutside, syncRefs, useElementHover } from '@vueuse/core'
 
-interface Props {
+const props = withDefaults(defineProps<{
   position?: string
   top?: boolean
   bottom?: boolean
@@ -15,8 +15,7 @@ interface Props {
   delayLeave?: number
   open?: boolean
   closeOnClickOutside?: boolean
-}
-const props = withDefaults(defineProps<Props>(), {
+}>(), {
   position: 'bottom',
   end: false,
   hover: false,

package/components/FileInput.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-interface Props {
+const props = defineProps<{
   join?: boolean
 
   color?: string
@@ -22,8 +22,7 @@ interface Props {
   md?: boolean
   sm?: boolean
   xs?: boolean
-}
-const props = defineProps<Props>()
+}>()
 defineEmits(['files'])
 
 const classes = computed(() => {

package/components/Flex.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-interface Props {
+const props = withDefaults(defineProps<{
   is?: string | Object | Function
   join?: boolean
 
@@ -24,8 +24,7 @@ interface Props {
   wrap?: boolean
   nowrap?: boolean
   wrapReverse?: boolean
-}
-const props = withDefaults(defineProps<Props>(), {
+}>(), {
   is: 'div',
   flex: true,
 })

package/components/FlexItem.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-interface Props {
+const props = withDefaults(defineProps<{
   is?: string | Object | Function
   join?: boolean
 
@@ -24,8 +24,7 @@ interface Props {
   wrap?: boolean
   nowrap?: boolean
   wrapReverse?: boolean
-}
-const props = withDefaults(defineProps<Props>(), {
+}>(), {
   is: 'div',
   flex: false,
 })

package/components/Footer.vue

@@ -2,11 +2,10 @@
 import { computed } from 'vue'
 import Text from './Text.vue'
 
-interface Props {
+const props = withDefaults(defineProps<{
   center?: boolean
   is?: string
-}
-const props = withDefaults(defineProps<Props>(), {
+}>(), {
   center: false,
   is: 'footer',
 })

package/components/FooterTitle.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import Text from './Text.vue'
 
-interface Props {
+withDefaults(defineProps<{
   is?: string
-}
-withDefaults(defineProps<Props>(), {
+}>(), {
   is: 'span',
 })
 </script>

package/components/Hero.vue

@@ -2,10 +2,9 @@
 import { withDefaults } from 'vue'
 import Text from './Text.vue'
 
-interface Props {
+withDefaults(defineProps<{
   is?: string
-}
-withDefaults(defineProps<Props>(), {
+}>(), {
   is: 'div',
 })
 </script>

package/components/HeroContent.vue

@@ -2,10 +2,9 @@
 import { withDefaults } from 'vue'
 import Text from './Text.vue'
 
-interface Props {
+withDefaults(defineProps<{
   is?: string
-}
-withDefaults(defineProps<Props>(), {
+}>(), {
   is: 'div',
 })
 </script>

package/components/Indicator.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { withDefaults } from 'vue'
 
-interface Props {
+withDefaults(defineProps<{
   is?: string
-}
-withDefaults(defineProps<Props>(), {
+}>(), {
   is: 'div',
 })
 </script>

package/components/IndicatorItem.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, withDefaults } from 'vue'
 
-interface Props {
+const props = withDefaults(defineProps<{
   is?: string
 
   align?: 'start' | 'center' | 'end'
@@ -13,8 +13,7 @@ interface Props {
   top?: boolean
   middle?: boolean
   bottom?: boolean
-}
-const props = withDefaults(defineProps<Props>(), {
+}>(), {
   is: 'div',
 })
 const classes = computed(() => {

package/components/Kbd.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-interface Props {
+const props = defineProps<{
   size?: 'lg' | 'md' | 'sm' | 'xs'
   lg?: boolean
   md?: boolean
   sm?: boolean
   xs?: boolean
-}
-const props = defineProps<Props>()
+}>()
 
 const classes = computed(() => {
   const { size, lg, md, sm, xs } = props

package/components/Label.vue

@@ -2,10 +2,9 @@
 import { withDefaults } from 'vue'
 import Text from './Text.vue'
 
-interface Props {
+withDefaults(defineProps<{
   is?: string
-}
-withDefaults(defineProps<Props>(), {
+}>(), {
   is: 'label',
 })
 </script>

package/components/LabelText.vue

@@ -2,10 +2,9 @@
 import { withDefaults } from 'vue'
 import Text from './Text.vue'
 
-interface Props {
+withDefaults(defineProps<{
   is?: string
-}
-withDefaults(defineProps<Props>(), {
+}>(), {
   is: 'span',
 })
 </script>

package/components/LabelTextAlt.vue

@@ -2,10 +2,9 @@
 import { withDefaults } from 'vue'
 import Text from './Text.vue'
 
-interface Props {
+withDefaults(defineProps<{
   is?: string
-}
-withDefaults(defineProps<Props>(), {
+}>(), {
   is: 'span',
 })
 </script>

package/components/Link.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-interface Props {
+const props = withDefaults(defineProps<{
   is?: string
   hover?: boolean
 
@@ -12,8 +12,7 @@ interface Props {
   info?: boolean
   warning?: boolean
   error?: boolean
-}
-const props = withDefaults(defineProps<Props>(), {
+}>(), {
   is: 'a',
 })
 

package/components/Menu.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-interface Props {
+const props = defineProps<{
   align?: 'vertical' | 'horizontal'
   vertical?: boolean
   horizontal?: boolean
@@ -11,8 +11,7 @@ interface Props {
   md?: boolean
   sm?: boolean
   xs?: boolean
-}
-const props = defineProps<Props>()
+}>()
 
 // `normal` and `compact` provide backwards compatibility with DaisyUI 2.x
 const classes = computed(() => {

package/components/MenuItem.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-interface Props {
+defineProps<{
   active?: boolean
   disabled?: boolean
-}
-defineProps<Props>()
+}>()
 </script>
 
 <template>

package/components/Modal.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-interface Props {
+const props = defineProps<{
   modelValue?: boolean
   closeOnClickOutside?: boolean
   top?: boolean
   bottom?: boolean
-}
-const props = defineProps<Props>()
+}>()
 
 const is = 'div'
 

package/components/NavButton.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-interface Props {
+const props = defineProps<{
   active?: boolean
   disabled?: boolean
-}
-
-const props = defineProps<Props>()
+}>()
 const classes = computed(() => {
   return {
     active: props.active,

package/components/Navbar.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { withDefaults } from 'vue'
 
-interface Props {
+const props = withDefaults(defineProps<{
   is?: string | Object | Function
   glass?: boolean
-}
-const props = withDefaults(defineProps<Props>(), {
+}>(), {
   is: 'div',
 })
 </script>

package/components/NavbarCenter.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { withDefaults } from 'vue'
 
-interface Props {
+const props = withDefaults(defineProps<{
   is?: string | Object | Function
-}
-const props = withDefaults(defineProps<Props>(), {
+}>(), {
   is: 'div',
 })
 </script>

package/components/NavbarEnd.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { withDefaults } from 'vue'
 
-interface Props {
+const props = withDefaults(defineProps<{
   is?: string | Object | Function
-}
-const props = withDefaults(defineProps<Props>(), {
+}>(), {
   is: 'div',
 })
 </script>

package/components/NavbarStart.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { withDefaults } from 'vue'
 
-interface Props {
+const props = withDefaults(defineProps<{
   is?: string | Object | Function
-}
-const props = withDefaults(defineProps<Props>(), {
+}>(), {
   is: 'div',
 })
 </script>

package/components/Progress.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-interface Props {
+const props = withDefaults(defineProps<{
   value: any
   max?: any
 
@@ -13,8 +13,7 @@ interface Props {
   info?: boolean
   warning?: boolean
   error?: boolean
-}
-const props = withDefaults(defineProps<Props>(), {
+}>(), {
   value: 0,
   max: 100,
 })

package/components/RadialProgress.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-interface Props {
+const props = defineProps<{
   value: number | string
   size?: string
   thickness?: string
@@ -15,8 +15,7 @@ interface Props {
   success?: boolean
   warning?: boolean
   error?: boolean
-}
-const props = defineProps<Props>()
+}>()
 
 const calculatedSize = computed(() => props.size || '4rem')
 const calculatedThickness = computed(() => props.thickness || 'calc(var(--size) / 10)')

package/components/Range.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-interface Props {
+const props = defineProps<{
   modelValue?: number | string
   min?: number | string
   max?: number | string
@@ -23,8 +23,7 @@ interface Props {
   md?: boolean
   sm?: boolean
   xs?: boolean
-}
-const props = defineProps<Props>()
+}>()
 defineEmits(['update:modelValue'])
 
 const classes = computed(() => {

package/components/Rating.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-interface Props {
+const props = withDefaults(defineProps<{
   modelValue?: number | string
   count?: number | string
   half?: boolean
@@ -46,8 +46,7 @@ interface Props {
   md?: boolean
   sm?: boolean
   xs?: boolean
-}
-const props = withDefaults(defineProps<Props>(), {
+}>(), {
   count: 5,
 })
 const emit = defineEmits(['update:modelValue'])

package/components/Select.vue

@@ -1,12 +1,5 @@
 <script setup lang="ts">
-type Color =
-  | 'primary'
-  | 'secondary'
-  | 'accent'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'error'
+type Color = | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
 
 const props = withDefaults(defineProps<{
   modelValue: any

package/components/Stack.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { withDefaults } from 'vue'
 
-interface Props {
+withDefaults(defineProps<{
   is?: string
-}
-withDefaults(defineProps<Props>(), {
+}>(), {
   is: 'div',
 })
 </script>

package/components/Steps.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-interface Props {
+const props = defineProps<{
   vertical?: boolean
   horizontal?: boolean
-}
-const props = defineProps<Props>()
+}>()
 
 const classes = computed(() => {
   return {

package/components/Swap.vue

@@ -1,14 +1,12 @@
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from 'vue'
 
-interface Props {
+const props = defineProps<{
   modelValue?: boolean | null
   indeterminate?: boolean
   rotate?: boolean
   flip?: boolean
-}
-
-const props = defineProps<Props>()
+}>()
 const emit = defineEmits(['update:modelValue'])
 const classes = computed(() => {
   return {

package/components/TabContent.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue'
 
-interface Props {
+const props = withDefaults(defineProps<{
   is?: any
   name: string
-}
-const props = withDefaults(defineProps<Props>(), {
+}>(), {
   is: 'div',
 })
 

package/components/Tabs.vue

@@ -2,7 +2,7 @@
 import { computed, inject } from 'vue'
 import Tab from './Tab.vue'
 
-interface Props {
+const props = withDefaults(defineProps<{
   is?: string | Object | Function
   tabs?: string[]
 
@@ -17,8 +17,7 @@ interface Props {
   md?: boolean
   sm?: boolean
   xs?: boolean
-}
-const props = withDefaults(defineProps<Props>(), {
+}>(), {
   is: 'a',
   tabs: [] as any,
 })

package/components/TabsManager.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { provide, reactive, watch } from 'vue'
 
-interface Props {
+const props = defineProps<{
   tab?: string
-}
-const props = defineProps<Props>()
+}>()
 const emit = defineEmits(['update:tab'])
 
 const manager = reactive({

package/components/Text.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-interface Props {
+const props = defineProps<{
   is?: string
   join?: boolean
 
@@ -9,23 +9,7 @@ interface Props {
   inline?: boolean
   inlineBlock?: boolean
 
-  color?:
-  | 'neutral'
-  | 'primary'
-  | 'secondary'
-  | 'accent'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'error'
-  | 'primary-content'
-  | 'secondary-content'
-  | 'neutral-content'
-  | 'accent-content'
-  | 'info-content'
-  | 'success-content'
-  | 'warning-content'
-  | 'error-content'
+  color?: | 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'primary-content' | 'secondary-content' | 'neutral-content' | 'accent-content' | 'info-content' | 'success-content' | 'warning-content' | 'error-content'
   neutral?: boolean
   primary?: boolean
   secondary?: boolean
@@ -43,20 +27,7 @@ interface Props {
   warningContent?: boolean
   errorContent?: boolean
 
-  size?:
-  | '9xl'
-  | '8xl'
-  | '7xl'
-  | '6xl'
-  | '5xl'
-  | '4xl'
-  | '3xl'
-  | '2xl'
-  | 'xl'
-  | 'lg'
-  | 'md'
-  | 'sm'
-  | 'xs'
+  size?: | '9xl' | '8xl' | '7xl' | '6xl' | '5xl' | '4xl' | '3xl' | '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'
   xl?: boolean
   lg?: boolean
   md?: boolean
@@ -80,16 +51,7 @@ interface Props {
   serif?: boolean
   mono?: boolean
 
-  weight?:
-  | 'thin'
-  | 'extralight'
-  | 'light'
-  | 'normal'
-  | 'medium'
-  | 'semibold'
-  | 'bold'
-  | 'extrabold'
-  | 'black'
+  weight?: | 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black'
   thin?: boolean
   extralight?: boolean
   light?: boolean
@@ -99,9 +61,7 @@ interface Props {
   bold?: boolean
   extrabold?: boolean
   black?: boolean
-}
-
-const props = defineProps<Props>()
+}>()
 
 const classes = computed(() => {
   return {

package/components/TextArea.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-interface Props {
+const props = withDefaults(defineProps<{
   modelValue?: string
   placeholder?: string
   type?: 'text' | 'phone' | 'email' | 'search'
@@ -24,8 +24,7 @@ interface Props {
   md?: boolean
   sm?: boolean
   xs?: boolean
-}
-const props = withDefaults(defineProps<Props>(), {
+}>(), {
   type: 'text',
 })
 defineEmits(['update:modelValue'])

package/components/TextInput.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-interface Props {
+const props = withDefaults(defineProps<{
   modelValue?: string | number
   placeholder?: string
   type?: 'text' | 'phone' | 'email' | 'search' | 'password' | 'number'
@@ -25,8 +25,7 @@ interface Props {
   md?: boolean
   sm?: boolean
   xs?: boolean
-}
-const props = withDefaults(defineProps<Props>(), {
+}>(), {
   type: 'text',
 })
 defineEmits(['update:modelValue'])

package/components/Toast.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-interface Props {
+const props = defineProps<{
   hAlign?: 'start' | 'center' | 'end'
   start?: boolean
   center?: boolean
@@ -11,9 +11,7 @@ interface Props {
   top?: boolean
   middle?: boolean
   bottom?: boolean
-}
-
-const props = defineProps<Props>()
+}>()
 const classes = computed(() => {
   return {
     'toast-start': props.start || props.hAlign === 'start',

package/components/Toggle.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-interface Props {
+const props = defineProps<{
   modelValue?: any
   disabled?: boolean
 
@@ -20,8 +20,7 @@ interface Props {
   sm?: boolean
   md?: boolean
   lg?: boolean
-}
-const props = defineProps<Props>()
+}>()
 const emit = defineEmits(['update:modelValue'])
 
 const classes = computed(() => {

package/components/Tooltip.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-interface Props {
+const props = defineProps<{
   tip?: string | number
   open?: boolean
 
@@ -20,9 +20,7 @@ interface Props {
   right?: boolean
   bottom?: boolean
   left?: boolean
-}
-
-const props = defineProps<Props>()
+}>()
 const classes = computed(() => {
   return {
     'tooltip-open': props.open,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "daisy-ui-kit",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "description": "",
   "scripts": {
     "build": "nuxi build",
@@ -17,6 +17,7 @@
   "files": [
     "components/*.vue",
     "components/Mask.config.ts",
+    "utils/*",
     "nuxt.js"
   ],
   "peerDependencies": {

package/utils/-utils.ts

@@ -0,0 +1,41 @@
+import { computed } from 'vue'
+
+interface MakeExclusiveClassOptions {
+  props: Record<string, any>
+  prefix: string
+  prop: string
+  propList: string[]
+  defaultVal?: string
+}
+/**
+ * Creates a className for the provided `prop` name  and checks that multiple are not enabled.
+ * @param prefix will be added to all classes that do not begin with `-`. For those that do, the `-` will be stripped.
+ * @param prop
+ * @param propList
+ * @param defaultVal
+ */
+export function makeExclusiveClass({
+  props,
+  prefix,
+  prop,
+  propList,
+  defaultVal = '',
+}: MakeExclusiveClassOptions) {
+  return computed(() => {
+    const active = propList.filter((v: string) => props[v.replace('-', '')])
+    if (active.length > 1) {
+      throw new Error(
+        `only one ${prop} can be enabled at a time. Current are ${active}`
+      )
+    }
+    const current = active[0] || ''
+    const _prefix = current.startsWith('-') ? '' : prefix
+    return current ? `${_prefix}${current.replace('-', '') || defaultVal}` : ''
+  })
+}
+
+export function makeIndividualClass({ props, prefix, prop }) {
+  return computed(() => {
+    return props[prop] ? `${prefix}${prop}` : ''
+  })
+}

package/utils/Button.config.ts

@@ -0,0 +1,26 @@
+export * from './-utils'
+
+/**
+ * Converts a list of prop names to an object of Booleans. Can be spread into props.
+ * @param propList list of prop names to become booleans
+ */
+export function toProps(propList: string[]): Record<string, boolean> {
+  return propList.reduce((all: Record<string, any>, current: string) => {
+    all[current.replace('-', '')] = Boolean
+    return all
+  }, {})
+}
+
+export const directionVariants = ['top', 'bottom', 'left', 'right']
+export const colorVariants = ['neutral', 'primary', 'secondary', 'accent']
+export const stateVariants = ['info', 'success', 'warning', 'error']
+export const allColorVariants = [...colorVariants, ...stateVariants]
+export const variants = [
+  ...colorVariants,
+  ...stateVariants,
+  'ghost',
+  'link',
+  'glass',
+]
+export const sizes = ['xs', 'sm', 'md', 'lg']
+export const shapes = ['circle', 'square']

package/utils/drawer-utils.ts

@@ -0,0 +1,30 @@
+export interface DrawerState {
+  name: string
+  isDrawerOpen: boolean
+  openDrawer: () => void
+  closeDrawer: () => void
+  toggleDrawer: () => void
+}
+export interface Drawers {
+  [key: string]: DrawerState
+}
+
+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
+    },
+  })
+  drawers[name] = drawerState
+  return drawerState
+}

package/utils/fixtures.ts

@@ -0,0 +1,62 @@
+export const people = [
+  {
+    id: 1,
+    name: 'Wade Cooper',
+    avatar:
+      'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+  },
+  {
+    id: 2,
+    name: 'Arlene Mccoy',
+    avatar:
+      'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+  },
+  {
+    id: 3,
+    name: 'Devon Webb',
+    avatar:
+      'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80',
+  },
+  {
+    id: 4,
+    name: 'Tom Cook',
+    avatar:
+      'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+  },
+  {
+    id: 5,
+    name: 'Tanya Fox',
+    avatar:
+      'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+  },
+  {
+    id: 6,
+    name: 'Hellen Schmidt',
+    avatar:
+      'https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+  },
+  {
+    id: 7,
+    name: 'Caroline Schultz',
+    avatar:
+      'https://images.unsplash.com/photo-1568409938619-12e139227838?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+  },
+  {
+    id: 8,
+    name: 'Mason Heaney',
+    avatar:
+      'https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+  },
+  {
+    id: 9,
+    name: 'Claudie Smitham',
+    avatar:
+      'https://images.unsplash.com/photo-1584486520270-19eca1efcce5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+  },
+  {
+    id: 10,
+    name: 'Emil Schaefer',
+    avatar:
+      'https://images.unsplash.com/photo-1561505457-3bcad021f8ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+  },
+]

package/utils/types.ts

@@ -0,0 +1,7 @@
+export interface StateProps {
+  state: string
+  info: boolean
+  success: boolean
+  warning: boolean
+  error: boolean
+}

package/components/CodeWrapper.vue

@@ -1,10 +0,0 @@
-<template>
-  <Collapse arrow toggle class="mb-8 rounded-b-xl rounded-t-none bg-base-200 p-0">
-    <CollapseTitle class="text-lg font-medium">
-      Code Example
-    </CollapseTitle>
-    <CollapseContent class="overflow-hidden">
-      <slot />
-    </CollapseContent>
-  </Collapse>
-</template>

package/components/DarkToggle.vue

@@ -1,11 +0,0 @@
-<script setup lang='ts'>
-const isDark = useDark()
-const toggleDark = useToggle(isDark)
-</script>
-
-<template>
-  <button class="!outline-none" @click="toggleDark()">
-    <div v-if="isDark" class="i-carbon-moon" />
-    <div v-else class="i-carbon-sun" />
-  </button>
-</template>

package/components/Logo.vue

@@ -1,8 +0,0 @@
-<template>
-  <div class="">
-    <Text class="font-bold whitespace-nowrap">
-      <span class="text-primary">daisy</span>UI Kit
-      <span>🌼</span>
-    </Text>
-  </div>
-</template>