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

src/runtime/components/FormField.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/form-field'
-import { tv } from '../utils/tv'
+import type { ComponentConfig } from '../types/utils'
 
-const appConfigFormField = _appConfig as AppConfig & { ui: { formField: Partial<typeof theme> } }
-
-const formField = tv({ extend: tv(theme), ...(appConfigFormField.ui?.formField || {}) })
-
-type FormFieldVariants = VariantProps<typeof formField>
+type FormField = ComponentConfig<typeof theme, AppConfig, 'formField'>
 
 export interface FormFieldProps {
   /**
@@ -29,7 +23,7 @@ export interface FormFieldProps {
   /**
    * @defaultValue 'md'
    */
-  size?: FormFieldVariants['size']
+  size?: FormField['variants']['size']
   required?: boolean
   /** If true, validation on input will be active immediately instead of waiting for a blur event. */
   eagerValidation?: boolean
@@ -39,7 +33,7 @@ export interface FormFieldProps {
    */
   validateOnInputDelay?: number
   class?: any
-  ui?: Partial<typeof formField.slots>
+  ui?: FormField['slots']
 }
 
 export interface FormFieldSlots {
@@ -55,13 +49,17 @@ export interface FormFieldSlots {
 <script setup lang="ts">
 import { computed, ref, inject, provide, type Ref, useId } from 'vue'
 import { Primitive, Label } from 'reka-ui'
+import { useAppConfig } from '#imports'
 import { formFieldInjectionKey, inputIdInjectionKey } from '../composables/useFormField'
+import { tv } from '../utils/tv'
 import type { FormError, FormFieldInjectedOptions } from '../types/form'
 
 const props = defineProps<FormFieldProps>()
 const slots = defineSlots<FormFieldSlots>()
 
-const ui = computed(() => formField({
+const appConfig = useAppConfig() as FormField['AppConfig']
+
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.formField || {}) })({
   size: props.size,
   required: props.required
 }))