Default single/multiple values for each option

[MrOxMasTer]

Why not?

single:

export const typographyVariants = cva('text-black', {
  variants: {
    variant: {
      h1: {
          size: '4xl',
          theme: 'title'
      },
      h2: {
         size: '3.25xl',
         theme: 'title'
      },
      ...
      p: '',
      span: 'block',
    },
    theme: {
      title: 'font-bold font-integralCF',
      subtitle: 'text-black/60',
    },
    size: {
      sm: 'text-sm',
      base: 'text-base',
      lg: 'text-lg',
      xl: 'text-xl',
      '2xl': 'text-2xl',
      '3xl': 'text-3xl',
      '3.25xl': 'text-3.25xl',
      '4xl': 'text-4xl',
    },
  },
  compoundVariants: [
    {
      variant: 'h1',
      theme: 'title',
      size: '4xl',
      className: 'leading-[2.125rem]',
    },
    {
      variant: 'h2',
      theme: 'title',
      size: '3.25xl',
      className: 'leading-9',
    },
  ],
  defaultVariants: {
    variant: 'p',
    theme: null,
    size: null,
  },
});

multiple:

export const typographyVariants = cva('text-black', {
  variants: {
    variant: {
      "h*": {
         base: '...', // Or put it here instead of in the subject line 
         theme: 'title',
         '1': {
            base: '...',
             size: '4xl'
         },
         '2': {
           base: '...',
           size: '3.25xl'
        }
      } 
      ...
      p: '',
      span: 'block',
    },
    theme: {
      title: 'font-bold font-integralCF',
      subtitle: 'text-black/60',
    },
    size: {
      sm: 'text-sm',
      base: 'text-base',
      lg: 'text-lg',
      xl: 'text-xl',
      '2xl': 'text-2xl',
      '3xl': 'text-3xl',
      '3.25xl': 'text-3.25xl',
      '4xl': 'text-4xl',
    },
  },
  compoundVariants: [
    {
      variant: 'h1',
      theme: 'title',
      size: '4xl',
      className: 'leading-[2.125rem]',
    },
    {
      variant: 'h2',
      theme: 'title',
      size: '3.25xl',
      className: 'leading-9',
    },
  ],
  defaultVariants: {
    variant: 'p',
    theme: null,
    size: null,
  },
});

It is useful to make it all interact with compound Variants, as well as only classes that are already prescribed.

It is also convenient to set certain classes per group, because for example, writing the same thing for each heading does not look very nice either. And so the code is less bloated and more readable