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

src/runtime/components/Input.vue

@@ -1,19 +1,12 @@
 <script lang="ts">
 import type { InputHTMLAttributes } from 'vue'
-import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
 import theme from '#build/ui/input'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import { tv } from '../utils/tv'
 import type { AvatarProps } from '../types'
-import type { PartialString } from '../types/utils'
+import type { ComponentConfig } from '../types/utils'
 
-const appConfigInput = _appConfig as AppConfig & { ui: { input: Partial<typeof theme> } }
-
-const input = tv({ extend: tv(theme), ...(appConfigInput.ui?.input || {}) })
-
-type InputVariants = VariantProps<typeof input>
+type Input = ComponentConfig<typeof theme, AppConfig, 'input'>
 
 export interface InputProps extends UseComponentIconsProps {
   /**
@@ -29,15 +22,15 @@ export interface InputProps extends UseComponentIconsProps {
   /**
    * @defaultValue 'primary'
    */
-  color?: InputVariants['color']
+  color?: Input['variants']['color']
   /**
    * @defaultValue 'outline'
    */
-  variant?: InputVariants['variant']
+  variant?: Input['variants']['variant']
   /**
    * @defaultValue 'md'
    */
-  size?: InputVariants['size']
+  size?: Input['variants']['size']
   required?: boolean
   autocomplete?: InputHTMLAttributes['autocomplete']
   autofocus?: boolean
@@ -46,7 +39,7 @@ export interface InputProps extends UseComponentIconsProps {
   /** Highlight the ring color like a focus state. */
   highlight?: boolean
   class?: any
-  ui?: PartialString<typeof input.slots>
+  ui?: Input['slots']
 }
 
 export interface InputEmits {
@@ -65,10 +58,12 @@ export interface InputSlots {
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { Primitive } from 'reka-ui'
+import { useAppConfig } from '#imports'
 import { useButtonGroup } from '../composables/useButtonGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useFormField } from '../composables/useFormField'
 import { looseToNumber } from '../utils'
+import { tv } from '../utils/tv'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
 
@@ -84,14 +79,15 @@ const slots = defineSlots<InputSlots>()
 
 const [modelValue, modelModifiers] = defineModel<string | number | null>()
 
+const appConfig = useAppConfig() as Input['AppConfig']
 const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField<InputProps>(props, { deferInputValidation: true })
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
 
 const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value)
 
-const ui = computed(() => input({
-  type: props.type as InputVariants['type'],
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.input || {}) })({
+  type: props.type as Input['variants']['type'],
   color: color.value,
   variant: props.variant,
   size: inputSize?.value,