Mutual Exclusivity Between Variants

[ghost]

Is there a way to make variants mutually exclusive?

Here’s my problem: my button size can be either rec(rectangle) or sqr(square). However, I need a way to unset the default rec size that I passed. Is there a way to do this?

const buttonStyles = cva('font-medium text-sm focus:outline-none text-nowrap', {
	variants: {
		color: {
			primary: 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-400',
			secondary: 'text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-400',
			success: 'text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-400',
			danger: 'text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-400',
			warning: 'text-white bg-orange-700 hover:bg-orange-800 focus:ring-4 focus:ring-orange-400',
			alert: 'text-white bg-yellow-700 hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-400',
			light: 'text-gray-900 bg-white focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100',
			dark: 'text-white bg-gray-900 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300',
		},
		rec: {
			sm: 'text-xs px-3 py-1.5',
			md: 'text-sm px-5 py-2.5',
			lg: 'text-base px-7 py-3.5',
		},
		sqr: {
			sm: 'text-xs px-1.5 py-1.5',
			md: 'text-sm px-2.5 py-2.5',
			lg: 'text-base px-3.5 py-3.5',
		},
		rounded: {
			sm: 'rounded-sm',
			md: 'rounded-md',
			lg: 'rounded-lg',
			full: 'rounded-full',
		},
		disabled: {
			true: 'opacity-60 cursor-not-allowed',
		},
	},
	defaultVariants: {
		color: 'primary',
		rec: 'md',
		rounded: 'md',
	},
	compoundVariants: [
		{
			rec: undefined,
			sqr: 'md',
		},
		{
			sqr: undefined,  
			rec: 'md',       
		},
	],
});

<Button sqr={'md'}/>

This example gives me the following output:
font-medium text-sm focus:outline-none text-nowrap text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-400 text-sm px-5 py-2.5 text-sm px-2.5 py-2.5 rounded-md
I need to unset px-5 py-2.5 which is coming from default-rec-md.

[ghost]

Meanwhile, i'm doing this as a workaround:

size: {
	rec_sm: 'text-xs px-3 py-1.5',
	rec_md: 'text-sm px-5 py-2.5',
	rec_lg: 'text-base px-7 py-3.5',
	sqr_sm: 'text-xs px-1.5 py-1.5',
	sqr_md: 'text-sm px-2.5 py-2.5',
	sqr_lg: 'text-base px-3.5 py-3.5',
},