fix(components): refactor types after @nuxt/module-builder upgrade (#3855)

src/runtime/components/Badge.vue

@@ -1,17 +1,11 @@
 <script lang="ts">
-import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
 import theme from '#build/ui/badge'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import { tv } from '../utils/tv'
 import type { AvatarProps } from '../types'
+import type { ComponentConfig } from '../types/utils'
 
-const appConfigBadge = _appConfig as AppConfig & { ui: { badge: Partial<typeof theme> } }
-
-const badge = tv({ extend: tv(theme), ...(appConfigBadge.ui?.badge || {}) })
-
-type BadgeVariants = VariantProps<typeof badge>
+type Badge = ComponentConfig<typeof theme, AppConfig, 'badge'>
 
 export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
   /**
@@ -23,17 +17,17 @@ export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'lo
   /**
    * @defaultValue 'primary'
    */
-  color?: BadgeVariants['color']
+  color?: Badge['variants']['color']
   /**
    * @defaultValue 'solid'
    */
-  variant?: BadgeVariants['variant']
+  variant?: Badge['variants']['variant']
   /**
    * @defaultValue 'md'
    */
-  size?: BadgeVariants['size']
+  size?: Badge['variants']['size']
   class?: any
-  ui?: Partial<typeof badge.slots>
+  ui?: Badge['slots']
 }
 
 export interface BadgeSlots {
@@ -46,8 +40,10 @@ export interface BadgeSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
+import { useAppConfig } from '#imports'
 import { useButtonGroup } from '../composables/useButtonGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
+import { tv } from '../utils/tv'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
 
@@ -56,10 +52,11 @@ const props = withDefaults(defineProps<BadgeProps>(), {
 })
 defineSlots<BadgeSlots>()
 
+const appConfig = useAppConfig() as Badge['AppConfig']
 const { orientation, size: buttonGroupSize } = useButtonGroup<BadgeProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
 
-const ui = computed(() => badge({
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.badge || {}) })({
   color: props.color,
   variant: props.variant,
   size: buttonGroupSize.value || props.size,