refactor: Replaced classNames with tailwind merge in badge component

src/components/Badge/Badge.vue

@@ -1,33 +1,28 @@
 <template>
   <component :is="wrapperType" :class="badgeClasses" :href="href">
-    <slot name="icon"/>
+    <slot name="icon" />
     <slot name="default" />
   </component>
 </template>
 <script lang="ts" setup>
-import { computed, toRefs, useSlots } from 'vue'
-import type { PropType } from 'vue'
+import { computed, useSlots } from 'vue'
 import type { BadgeType, BadgeSize } from './types'
 import { useBadgeClasses } from '@/components/Badge/composables/useBadgeClasses'
 
-const props = defineProps({
-  type: {
-    type: String as PropType<BadgeType>,
-    default: 'default',
-  },
-  size: {
-    type: String as PropType<BadgeSize>,
-    default: 'xs',
-  },
-  href: {
-    type: String,
-    default: null,
-  },
+interface IBadgeProps {
+  type?: BadgeType
+  size?: BadgeSize
+  href?: string | null
+}
+const props = withDefaults(defineProps<IBadgeProps>(), {
+  type: 'default',
+  size: 'xs',
+  href: null,
 })
 
 const slots = useSlots()
 const isContentEmpty = computed(() => !slots.default)
-const wrapperType = computed(() => props.href ? 'a' : 'span')
+const wrapperType = computed(() => (props.href ? 'a' : 'span'))
 
-const { badgeClasses } = useBadgeClasses(toRefs(props), { isContentEmpty })
+const { badgeClasses } = useBadgeClasses(props, { isContentEmpty })
 </script>

src/components/Badge/composables/useBadgeClasses.ts

@@ -1,7 +1,6 @@
 import type { BadgeType, BadgeSize } from '../types'
-import { computed } from 'vue'
-import type { Ref } from 'vue'
-import classNames from 'classnames'
+import { computed, type Ref, useAttrs } from 'vue'
+import { twMerge } from 'tailwind-merge'
 
 const defaultBadgeClasses = 'mr-2 px-2.5 py-0.5 rounded flex items-center justify-center'
 const badgeLinkClasses = 'bg-blue-100 hover:bg-blue-200 text-blue-800 dark:text-blue-800 dark:hover:bg-blue-300'
@@ -35,24 +34,29 @@ const badgeSizeClasses: Record<BadgeSize, string> = {
 }
 
 export type UseBadgeClassesProps = {
-    type: Ref<BadgeType>
-    size: Ref<BadgeSize>
-    href: Ref<string>
+  type: BadgeType
+  size: BadgeSize
+  href: string | null
 }
 export type UseBadgeClassesOptions = {
   isContentEmpty: Ref<boolean>
 }
 
-export function useBadgeClasses(props: UseBadgeClassesProps, options: UseBadgeClassesOptions): {
+export function useBadgeClasses(
+  props: UseBadgeClassesProps,
+  options: UseBadgeClassesOptions,
+): {
   badgeClasses: Ref<string>
 } {
+  const attrs = useAttrs()
   const badgeClasses = computed<string>(() => {
-        return classNames(
-            badgeSizeClasses[props.size.value],
-            props.href.value ? '' : badgeTypeClasses[props.type.value],
-            props.href.value ? '' : badgeTextClasses[props.type.value],
-            props.href.value ? badgeLinkClasses : '',
+    return twMerge(
+      badgeSizeClasses[props.size],
+      props.href ? '' : badgeTypeClasses[props.type],
+      props.href ? '' : badgeTextClasses[props.type],
+      props.href ? badgeLinkClasses : '',
       options.isContentEmpty.value ? onlyIconClasses : defaultBadgeClasses,
+      attrs.class as string,
     )
   })
   return {