Component multi-part styling

[wrux]

Some components consist of multiple parts, so component styling should reflect that.

Possible usage:

{% set button = cvaMultiPart({
  base: 'block outline-none',
  icon: 'text-[1.5em]',
}, {
  variants: {
    display: {
      primary: {
        base: 'bg-blue-500 text-white',
      },
      secondary: {
        base: 'bg-purple-500 text-white',
        icon: 'opacity-50',
      },
    },
    size: {
      base: 'py-2 px-4 text-base',
      large: 'py-3 p-6 text-lg',
    },
  },
  defaultVariants: {
    display: 'primary',
    size: 'base',
  },
}) %}
{% set buttonStyle({ size: 'large' }) %}

<button class="{{ buttonStyle.button }}">
  <svg class="{{ buttonStyle.icon }}">
    <use xlink:href="#icon-check" />
  </svg>
  Click me
</button>