Add option to pro-actively apply defaultVariants

[djamez]

Hello. Thank you for this wonderful package.

Assuming the following (notice there is no background-color in base):

const btnVariants = tv({
      base: 'font-semibold py-1 active:opacity-80',
      variants: {
          color: {
              primary: 'bg-blue-100 hover:bg-blue-700',
              secondary: 'bg-purple-100 hover:bg-purple-700',
              sucess: 'bg-green-100 hover:bg-green-700'
          },
          size: {
              sm: 'py-0 px-2 text-sm',
              md: 'py-1 px-2 text-md',
              lg: 'py-1.5 px-3 text-lg'
          },
          defaultVariants: {
              color: 'primary',
              size: 'md'
          }
      }
  });

...the following:

<button class={btnVariants({ size: 'sm' })}>
    Ok
</button>

...will only apply base and size:sm. The only way to get a default background-color rendered is to define it in base. In most cases base mostly yields output similar to defaultVariants.

It would be nice to not have to apply the same properties in base when there is a defaultVariants, and to have have keys in defaultVariants applied where the key does not exist in the "input" -- if not by default, to at least have a config option to enforce the same.

With this the following usage (example in Svelte):

<button class={ btnVariants({size: 'sm'}) }>
    Ok
</button>

...would apply the defaultVariants, but with size: 'sm'.

[mskelton]

You have an error in your code. You defined defaultVariants inside of variants, but they should be defined on the root of the object you pass to tv

const btnVariants = tv({
      base: 'font-semibold py-1 active:opacity-80',
      variants: {
          color: {
              primary: 'bg-blue-100 hover:bg-blue-700',
              secondary: 'bg-purple-100 hover:bg-purple-700',
              sucess: 'bg-green-100 hover:bg-green-700'
          },
          size: {
              sm: 'py-0 px-2 text-sm',
              md: 'py-1 px-2 text-md',
              lg: 'py-1.5 px-3 text-lg'
          },
-         defaultVariants: {
-            color: 'primary',
-            size: 'md'
-         },
      },
+     defaultVariants: {
+         color: 'primary',
+         size: 'md'
+     },
  });

[djamez]

Indeed. Thank you.