Incorrect compound button variants types

[MichailShcherbakov]

Environment

• Operating System: Linux
• Node Version: v22.13.1
• Nuxt Version: 3.16.1
• CLI Version: 3.23.1
• Nitro Version: 2.11.8
• Package Manager: yarn@4.8.1
• Builder: -
• User Config: compatibilityDate, imports, components, devtools, modules, css, fonts, ui
• Runtime Modules: @nuxt/eslint@1.2.0, @nuxt/fonts@0.11.0, @nuxt/image@1.10.0, @nuxt/test-utils@3.17.2, @nuxt/ui@3.0.2
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

3.0.2

Reproduction

https://github.com/nuxt/ui/blob/v3/src/theme/button.ts

Description

I want to customize a button variant by size, trailing and square params. It works, but the types are broken.

The line in the compoundVariants:
{ size: 'md', trailing: true, square: false, class: { trailingIcon: '-mr-1' } }

Errors:
Type '{ trailingIcon: string; }' is not assignable to type 'string'

Additional context

No response

Logs

[jeannen]

Same issue here!

In the meantime, <!-- @vue-ignore --> above the component in the .vue file removes the linter error