Compound variants example seems wrong

[crhistianramirez]

I'm just learning this library so I could be wrong but the example seems wrong. Here's the code:

import { tv } from 'tailwind-variants';

const button = tv({
 base: 'font-semibold text-white text-sm py-1 px-4 rounded-full active:opacity-80',
 variants: {
   color: {
     primary: 'bg-blue-500 hover:bg-blue-700',
     secondary: 'bg-purple-500 hover:bg-purple-700',
     success: 'bg-green-500 hover:bg-green-700'
   },
   disabled: {
     true: 'opacity-50 bg-gray-500 pointer-events-none'
   }
 },
 compoundVariants: [
   {
     color: 'success',
     disabled: true,
     class: 'bg-green-100 text-green-700 dark:text-green-800' // You can also use "className"
   }
 ]
});

button({ color: 'success', disabled: true });
/**
* Result:
* font-semibold text-sm py-1 px-4 rounded-full active:opacity-80 hover:bg-green-700
* opacity-50 pointer-events-none bg-green-100 text-green-600
*/

1. Shouldn't text-green-700 and dark:text-green-800 be part of the output since it matched the condition?
2. text-green-600 is part of the output but is not a class in any of the inputs

[mskelton]

@crhistianramirez Can you please create reproduction code sandbox? There is not enough to go on here, as this is likely a misconfiguration in your project since text-green-600 would not just appear out of no where, so definitely something with your usage is wrong.

[crhistianramirez]

@mskelton This is the example in the docs for compound variants. Sorry for the confusion, I had meant to link to it.

https://www.tailwind-variants.org/docs/variants#compound-variants

[mskelton]

@crhistianramirez Gotcha, thanks for the callout, I pushed a fix to the docs.