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

src/runtime/components/ButtonGroup.vue

@@ -1,15 +1,9 @@
 <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/button-group'
-import { tv } from '../utils/tv'
+import type { ComponentConfig } from '../types/utils'
 
-const appConfigButtonGroup = _appConfig as AppConfig & { ui: { buttonGroup: Partial<typeof theme> } }
-
-const buttonGroup = tv({ extend: tv(theme), ...(appConfigButtonGroup.ui?.buttonGroup) })
-
-type ButtonGroupVariants = VariantProps<typeof buttonGroup>
+type ButtonGroup = ComponentConfig<typeof theme, AppConfig, 'buttonGroup'>
 
 export interface ButtonGroupProps {
   /**
@@ -20,13 +14,14 @@ export interface ButtonGroupProps {
   /**
    * @defaultValue 'md'
    */
-  size?: ButtonGroupVariants['size']
+  size?: ButtonGroup['variants']['size']
   /**
    * The orientation the buttons are laid out.
    * @defaultValue 'horizontal'
    */
-  orientation?: ButtonGroupVariants['orientation']
+  orientation?: ButtonGroup['variants']['orientation']
   class?: any
+  ui?: ButtonGroup['slots']
 }
 
 export interface ButtonGroupSlots {
@@ -37,13 +32,20 @@ export interface ButtonGroupSlots {
 <script setup lang="ts">
 import { provide, computed } from 'vue'
 import { Primitive } from 'reka-ui'
+import { useAppConfig } from '#imports'
 import { buttonGroupInjectionKey } from '../composables/useButtonGroup'
+import { tv } from '../utils/tv'
 
 const props = withDefaults(defineProps<ButtonGroupProps>(), {
   orientation: 'horizontal'
 })
 defineSlots<ButtonGroupSlots>()
 
+const appConfig = useAppConfig() as ButtonGroup['AppConfig']
+
+// eslint-disable-next-line vue/no-dupe-keys
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.buttonGroup || {}) }))
+
 provide(buttonGroupInjectionKey, computed(() => ({
   orientation: props.orientation,
   size: props.size
@@ -51,7 +53,7 @@ provide(buttonGroupInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="buttonGroup({ orientation, class: props.class })">
+  <Primitive :as="as" :class="ui({ orientation, class: props.class })">
     <slot />
   </Primitive>
 </template>