TS error providing compoundVariants to extendVariants

[jegork]

Hello!

I want to add new compound variants, but I get a typescript error.

import { extendVariants, Button, button } from "@nextui-org/react";

export const CustomButton = extendVariants(Button, {
  variants: {
    ...button.variants,
    variant: {
      ...button.variants.variant,
      "bordered-gray": "border border-secondary-800",
    },
    size: {
      ...button.variants.size,
      sm: "px-3 min-w-16 h-8 text-tiny gap-2 rounded-small",
      md: "px-4 min-w-22 h-10 text-small gap-2 rounded-medium",
      lg: "px-6 min-w-24 h-12 text-medium gap-3 rounded-large",
    },
    color: {
      ...button.variants.color,
      primary: "text-[#1A1A2E]",
    },
  },
  defaultVariants: {
    color: "primary",
    ...button.defaultVariants,
  },
  compoundVariants: [
    ...button.compoundVariants,
    {
      class: "box-content min-w-[fit-content]",
    },
    {
      variant: "bordered-gray",
      color: "primary",
      class: "bg-transparent text-primary",
    },
    {
      variant: "bordered-gray" as const,
      color: "default",
      class: "bg-transparent text-secondary-300",
    },
  ],
});

src/custom/CustomButton.tsx:26:5 - error TS2322: Type '{ color?: "default" | "success" | "secondary" | "primary" | "warning" | "danger" | ("default" | "success" | "secondary" | "primary" | "warning" | "danger")[] | undefined; variant?: "flat" | ... 7 more ... | undefined; ... 6 more ...; disableAnimation?: boolean | ... 1 more ... | undefined; } & ClassProp<...>' is not assignable to type 'VariantValue<{ variant: { "bordered-gray": "border border-secondary-800"; solid: ""; bordered: "border-medium bg-transparent"; light: "bg-transparent"; flat: ""; faded: "border-medium"; shadow: ""; ghost: "border-medium bg-transparent"; }; ... 7 more ...; disableAnimation: { ...; }; }, SuggestedVariants<...>> & Clas...'.
  Type '{ color?: "default" | "success" | "secondary" | "primary" | "warning" | "danger" | ("default" | "success" | "secondary" | "primary" | "warning" | "danger")[] | undefined; variant?: "flat" | ... 7 more ... | undefined; ... 6 more ...; disableAnimation?: boolean | ... 1 more ... | undefined; } & { ...; }' is not assignable to type 'VariantValue<{ variant: { "bordered-gray": "border border-secondary-800"; solid: ""; bordered: "border-medium bg-transparent"; light: "bg-transparent"; flat: ""; faded: "border-medium"; shadow: ""; ghost: "border-medium bg-transparent"; }; ... 7 more ...; disableAnimation: { ...; }; }, SuggestedVariants<...>> & Clas...'.
    Type '{ color?: "default" | "success" | "secondary" | "primary" | "warning" | "danger" | ("default" | "success" | "secondary" | "primary" | "warning" | "danger")[] | undefined; variant?: "flat" | ... 7 more ... | undefined; ... 6 more ...; disableAnimation?: boolean | ... 1 more ... | undefined; } & { ...; }' is not assignable to type 'VariantValue<{ variant: { "bordered-gray": "border border-secondary-800"; solid: ""; bordered: "border-medium bg-transparent"; light: "bg-transparent"; flat: ""; faded: "border-medium"; shadow: ""; ghost: "border-medium bg-transparent"; }; ... 7 more ...; disableAnimation: { ...; }; }, SuggestedVariants<...>> & { .....'.
      Type '{ color?: "default" | "success" | "secondary" | "primary" | "warning" | "danger" | ("default" | "success" | "secondary" | "primary" | "warning" | "danger")[] | undefined; variant?: "flat" | ... 7 more ... | undefined; ... 6 more ...; disableAnimation?: boolean | ... 1 more ... | undefined; } & { ...; }' is not assignable to type 'VariantValue<{ variant: { "bordered-gray": "border border-secondary-800"; solid: ""; bordered: "border-medium bg-transparent"; light: "bg-transparent"; flat: ""; faded: "border-medium"; shadow: ""; ghost: "border-medium bg-transparent"; }; ... 7 more ...; disableAnimation: { ...; }; }, SuggestedVariants<...>>'.
        Types of property 'color' are incompatible.
          Type '"default" | "success" | "secondary" | "primary" | "warning" | "danger" | ("default" | "success" | "secondary" | "primary" | "warning" | "danger")[] | undefined' is not assignable to type '"default" | "success" | "secondary" | "primary" | "warning" | "danger" | undefined'.
            Type '("default" | "success" | "secondary" | "primary" | "warning" | "danger")[]' is not assignable to type '"default" | "success" | "secondary" | "primary" | "warning" | "danger" | undefined'.

26     ...button.compoundVariants,
       ~~~~~~~~~~~~~~~~~~~~~~~~~~

src/custom/CustomButton.tsx:31:7 - error TS2322: Type '"flat" | "light" | "solid" | "bordered" | "faded" | "shadow" | "ghost" | "bordered-gray" | ("flat" | "light" | "solid" | "bordered" | "faded" | "shadow" | "ghost")[] | undefined' is not assignable to type '"flat" | "light" | "solid" | "bordered" | "faded" | "shadow" | "ghost" | "bordered-gray" | undefined'.
  Type '("flat" | "light" | "solid" | "bordered" | "faded" | "shadow" | "ghost")[]' is not assignable to type '"flat" | "light" | "solid" | "bordered" | "faded" | "shadow" | "ghost" | "bordered-gray" | undefined'.

31       variant: "bordered-gray",
         ~~~~~~~

src/custom/CustomButton.tsx:32:7 - error TS2322: Type '"default" | "success" | "secondary" | "primary" | "warning" | "danger" | ("default" | "success" | "secondary" | "primary" | "warning" | "danger")[] | undefined' is not assignable to type '"default" | "success" | "secondary" | "primary" | "warning" | "danger" | undefined'.
  Type '("default" | "success" | "secondary" | "primary" | "warning" | "danger")[]' is not assignable to type '"default" | "success" | "secondary" | "primary" | "warning" | "danger" | undefined'.

32       color: "primary",
         ~~~~~

src/custom/CustomButton.tsx:33:7 - error TS2322: Type 'ClassNameValue | SlotsClassValue<undefined, string[]>' is not assignable to type 'ClassNameValue'.
  Type 'SlotsClassValue<undefined, string[]>' is not assignable to type 'ClassNameValue'.

33       class: "bg-transparent text-primary",
         ~~~~~

[jegork]

Another TS error happening with CheckboxGroup.

Given this component:

import { CheckboxGroup, extendVariants } from "@nextui-org/react";

export const CustomCheckboxGroup = extendVariants(CheckboxGroup, {
  variants: {
    color: {
      "secondary-light": {
        wrapper: "bg-secondary-800 p-4 gap-4",
        label: "text-secondary-600",
      },
    },
  },
  compoundVariants: [{ className: { wrapper: "rounded" } }],
});

I receive the following error:

src/custom/CustomCheckboxGroup.tsx:12:24 - error TS2322: Type '{ wrapper: string; }' is not assignable to type 'string | (string & ClassNameArray) | undefined'.
  Type '{ wrapper: string; }' is not assignable to type 'undefined'.

12   compoundVariants: [{ className: { wrapper: "rounded" } }],
                          ~~~~~~~~~

  node_modules/tailwind-variants/dist/index.d.ts:20:21
    20   | {class?: never; className?: never};
                           ~~~~~~~~~
    The expected type comes from property 'className' which is declared here on type 'VariantValue<{ color: { "secondary-light": { wrapper: string; label: string; }; }; }, SuggestedVariants<MergeWithAs<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, Omit<...>, CheckboxGroupProps, As<...>>, SlotsToClasses<...>>> & ClassProp<...>'

Although the className is applied correctly to the component

[stylehuan]

Is there a solution?