fix(theme): improve app config types for ui object

Resolves #3579

Author: benjamincanac

src/runtime/types/tv.ts

@@ -0,0 +1,63 @@
+import type { ClassValue, TVVariants, TVCompoundVariants, TVDefaultVariants } from 'tailwind-variants'
+
+/**
+ * Defines the AppConfig object based on the tailwind-variants configuration.
+ */
+export type TVConfig<T extends Record<string, any>> = {
+  [P in keyof T]?: {
+    [K in keyof T[P]as K extends 'base' | 'slots' | 'variants' | 'compoundVariants' | 'defaultVariants' ? K : never]?: K extends 'base' ? ClassValue
+      : K extends 'slots' ? {
+        [S in keyof T[P]['slots']]?: ClassValue
+      }
+        : K extends 'variants' ? TVVariants<T[P]['slots'], ClassValue, T[P]['variants']>
+          : K extends 'compoundVariants' ? TVCompoundVariants<T[P]['variants'], T[P]['slots'], ClassValue, object, undefined>
+            : K extends 'defaultVariants' ? TVDefaultVariants<T[P]['variants'], T[P]['slots'], object, undefined>
+              : never
+  }
+}
+
+/**
+ * Utility type to flatten intersection types for better IDE hover information.
+ * @template T The type to flatten.
+ */
+type Id<T> = {} & { [P in keyof T]: T[P] }
+
+type ComponentVariants<T extends { variants?: Record<string, Record<string, any>> }> = {
+  [K in keyof T['variants']]: keyof T['variants'][K]
+}
+
+type ComponentSlots<T extends { slots?: Record<string, any> }> = Id<{
+  [K in keyof T['slots']]?: ClassValue
+}>
+
+type GetComponentAppConfig<A, U extends string, K extends string> =
+  A extends Record<U, Record<K, any>> ? A[U][K] : {}
+
+type ComponentAppConfig<
+  T,
+  A extends Record<string, any>,
+  K extends string,
+  U extends string = 'ui' | 'uiPro' | 'uiPro.prose'
+> = A & (
+  U extends 'uiPro.prose'
+    ? { uiPro?: { prose?: { [k in K]?: Partial<T> } } }
+    : { [key in Exclude<U, 'uiPro.prose'>]?: { [k in K]?: Partial<T> } }
+)
+
+/**
+ * Defines the configuration shape expected for a component.
+ * @template T The component's theme imported from `#build/ui/*`.
+ * @template A The base AppConfig type from `@nuxt/schema`.
+ * @template K The key identifying the component (e.g., 'badge').
+ * @template U The top-level key in AppConfig ('ui' or 'uiPro').
+ */
+export type ComponentConfig<
+  T extends Record<string, any>,
+  A extends Record<string, any>,
+  K extends string,
+  U extends 'ui' | 'uiPro' | 'uiPro.prose' = 'ui'
+> = {
+  AppConfig: ComponentAppConfig<T, A, K, U>
+  variants: ComponentVariants<T & GetComponentAppConfig<A, U, K>>
+  slots: ComponentSlots<T>
+}

src/runtime/types/utils.ts

@@ -1,20 +1,5 @@
-import type { AcceptableValue as _AcceptableValue } from 'reka-ui'
-import type { ClassValue } from 'tailwind-variants'
 import type { VNode } from 'vue'
-
-export interface TightMap<O = any> {
-  [key: string]: TightMap | O
-}
-
-export type DeepPartial<T, O = any> = {
-  [P in keyof T]?: T[P] extends Array<string>
-    ? string
-    : T[P] extends object
-      ? DeepPartial<T[P], O>
-      : T[P];
-} & {
-  [key: string]: O | TightMap<O>
-}
+import type { AcceptableValue as _AcceptableValue } from 'reka-ui'
 
 export type DynamicSlotsKeys<Name extends string | undefined, Suffix extends string | undefined = undefined> = (
   Name extends string
@@ -56,13 +41,13 @@ export type MergeTypes<T extends object> = {
 export type GetItemKeys<I> = keyof Extract<NestedItem<I>, object>
 
 export type GetItemValue<I, VK extends GetItemKeys<I> | undefined, T extends NestedItem<I> = NestedItem<I>> =
-T extends object
-  ? VK extends undefined
-    ? T
-    : VK extends keyof T
-      ? T[VK]
-      : never
-  : T
+  T extends object
+    ? VK extends undefined
+      ? T
+      : VK extends keyof T
+        ? T[VK]
+        : never
+    : T
 
 export type GetModelValue<
   T,
@@ -92,48 +77,4 @@ export type EmitsToProps<T> = {
     : never
 }
 
-/**
- * Utility type to flatten intersection types for better IDE hover information.
- * @template T The type to flatten.
- */
-type Id<T> = {} & { [P in keyof T]: T[P] }
-
-type ComponentVariants<T extends { variants?: Record<string, Record<string, any>> }> = {
-  [K in keyof T['variants']]: keyof T['variants'][K]
-}
-
-type ComponentSlots<T extends { slots?: Record<string, any> }> = Id<{
-  [K in keyof T['slots']]?: ClassValue
-}>
-
-type GetComponentAppConfig<A, U extends string, K extends string> =
-  A extends Record<U, Record<K, any>> ? A[U][K] : {}
-
-type ComponentAppConfig<
-  T,
-  A extends Record<string, any>,
-  K extends string,
-  U extends string = 'ui' | 'uiPro' | 'uiPro.prose'
-> = A & (
-  U extends 'uiPro.prose'
-    ? { uiPro?: { prose?: { [k in K]?: Partial<T> } } }
-    : { [key in Exclude<U, 'uiPro.prose'>]?: { [k in K]?: Partial<T> } }
-)
-
-/**
- * Defines the configuration shape expected for a component.
- * @template T The component's theme imported from `#build/ui/*`.
- * @template A The base AppConfig type from `@nuxt/schema`.
- * @template K The key identifying the component (e.g., 'badge').
- * @template U The top-level key in AppConfig ('ui' or 'uiPro').
- */
-export type ComponentConfig<
-  T extends Record<string, any>,
-  A extends Record<string, any>,
-  K extends string,
-  U extends 'ui' | 'uiPro' | 'uiPro.prose' = 'ui'
-> = {
-  AppConfig: ComponentAppConfig<T, A, K, U>
-  variants: ComponentVariants<T & GetComponentAppConfig<A, U, K>>
-  slots: ComponentSlots<T>
-}
+export * from './tv'

src/templates.ts

@@ -149,7 +149,7 @@ export function getTemplates(options: ModuleOptions, uiConfig: Record<string, an
   templates.push({
     filename: 'types/ui.d.ts',
     getContents: () => `import * as ui from '#build/ui'
-import type { DeepPartial } from '@nuxt/ui'
+import type { TVConfig } from '@nuxt/ui'
 import type { defaultConfig } from 'tailwind-variants'
 import colors from 'tailwindcss/colors'
 
@@ -165,7 +165,7 @@ type AppConfigUI = {
   }
   icons?: Partial<typeof icons>
   tv?: typeof defaultConfig
-} & DeepPartial<typeof ui>
+} & TVConfig<typeof ui>
 
 declare module '@nuxt/schema' {
   interface AppConfigInput {

src/unplugin.ts

@@ -20,18 +20,18 @@ import PluginsPlugin from './plugins/plugins'
 import AppConfigPlugin from './plugins/app-config'
 import ComponentImportPlugin from './plugins/components'
 import NuxtEnvironmentPlugin from './plugins/nuxt-environment'
-
-import type { DeepPartial } from './runtime/types/utils'
 import AutoImportPlugin from './plugins/auto-import'
 
+import type { TVConfig } from './runtime/types/tv'
+
 type NeutralColor = 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone'
 type Color = Exclude<keyof typeof colors, 'inherit' | 'current' | 'transparent' | 'black' | 'white' | NeutralColor> | (string & {})
 
 type AppConfigUI = {
   // TODO: add type hinting for colors from `options.theme.colors`
   colors?: Record<string, Color> & { neutral?: NeutralColor }
   icons?: Partial<typeof icons>
-} & DeepPartial<typeof ui>
+} & TVConfig<typeof ui>
 
 export interface NuxtUIOptions extends Omit<ModuleOptions, 'fonts' | 'colorMode'> {
   /** Whether to generate declaration files for auto-imported components. */