[BUG] - Typescript error on extendVariants of Tabs component

[Aryan-mor]

NextUI Version

2.4.2

Describe the bug

import { extendVariants, Tabs } from '@nextui-org/react';

const CustomTabs = extendVariants(Tabs, {
  slots: {
    tabList: 'bg-white p-0',
    base: 'w-full bg-white rounded-lg overflow-hidden',
    tab: 'py-6',
    tabContent: 'font-medium text-gray-800',
  },
  defaultVariants: {
    variant: 'underlined',
    color: 'primary',
    classNames: {
      tabList: 'bg-white p-0',
      base: 'w-full bg-white rounded-lg overflow-hidden',
      tab: 'py-6',
      tabContent: 'font-medium text-gray-800',
    },
  },
});

export default CustomTabs;

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

In slot part i don't have typescript issue but nothing change on UI When i put classNames on defaultVariants the UI is changes but in code i have Typescript issue

Expected behavior

---

Screenshots or Videos

No response

Operating System Version

Windows

Browser

Chrome

[linear[bot]]

ENG-1031 [BUG] - Typescript error on extendVariants of Tabs component

[Aryan-mor]

I see this issue on another components also

[awesome-pro]

@Aryan-mor can you confirm which components you had this issue?

[Aryan-mor]

@Aryan-mor can you confirm which components you had this issue?

All components that use classNames

[rettimo]

I had the same problems with compoundVariants. Almost always, this method gives an error of non-existent keys. In other cases there is no error, but it just does not work. And only in Button I managed to get the result only if I pass the colors template. Looks like a global problem in the extendVariants method.

Button

const Button = extendVariants(NextUiButton, {
  variants: {
    color: {
      default: '',
      primary: '',
      secondary: '',
      success: '',
      warning: '',
      danger: '',
    },
  },
  defaultVariants: {
    size: 'md',
    color: 'default',
  },
  compoundVariants: [
    // bordered / color
    {
      variant: 'bordered',
      color: 'default',
      class: 'bg-transparent border-default text-foreground', // Works only if color passed
    },
...

Button

...
{
    isIconOnly: true, // Error: Type 'true' is not assignable to type '"true" | "false"'
    size: 'sm',
    class: 'min-w-6 h-6 w-6',
}
...

Tabs

compoundVariants: [
    {
      color: 'default',
      variant: 'light',
      class: {
        tab: 'data-[hover-unselected=true]:bg-default/30', // Error: Object literal may only specify known properties, and 'tab' does not exist in type 'ClassNameArray'
      },
    },
  ],