compoundVariants does not recognize falsy boolean variant

[spetrac]

Describe the bug

When using compoundVariants with a boolean variant, it does not recognize undefined as a false equivalent. On the other hand, including undefined as an array will be caught by typescript as an error.

To Reproduce

Having a component with a tag, you usually do not add false as value, but just skip the tag entirely:

<Element color='red' monochrome />
<Element color='blue' monochrome={false} />
<Element color='blue' />

Defining a compoundVariant could look like this:

const element = tv({
  base: '',
  variants: {
    color: {
      red: 'text-red-600',
      blue: 'text-blue-600'
    },
    monochrome: {
      true: 'text-black'
    }
  },
  compoundVariants: [{
    color: 'blue',
    monochrome: false, // will not recognize the missing tag, if it is undefined
    class: 'bg-red-600'
  }, {
    color: 'blue',
    monochrome: [false, undefined], // will be caught by typescript, because of non-boolean value
    class: 'bg-red-600'
  }]
})

Expected behavior

1. The compoundVariant should treat undefined as false for boolean variants.
2. The typescript definition for boolean variants should include undefined.

Desktop (please complete the following information):

• Windows 11
• Chrome: 126.0.6478.127
• NextJS: 14.2.5
• Typescript: 5.5.3

[thefalked]

Hello, i know that this issue was open a long time ago and it has a PR to fix this, but while is not merge, you should be using this: https://www.tailwind-variants.org/docs/variants#default-variants