My approach with cva is as follows:
const checkboxOptions = cva('border ...', {
variants: {
size: {
sm: 'h-4 w-4',
md: 'h-5 w-5',
lg: 'h-6 w-6',
},
},
defaultVariants: {
size: 'md',
},
});
Additionally,
type CheckboxProperties = VariantProps<typeof checkboxOptions>
However, I have noticed that null values are being accepted in the component props. This results in none of the size classes being applied when null is passed. https://i.sstatic.net/MelI9.png
Is there a way to prevent null from being an available value?
This issue is causing problems both in usage and in storybook because it indicates that null is an acceptable value, which impacts appearance negatively: