improved extendVariants for compoundVariants and compoundSlots

[dvzrd]

As of right now, it's difficult to extend slot components with extendVariants because it doesn't allow for compoundSlots, you can only use compoundVariants right now but you can't pass an object with slots into the class. This limits extending components with slots.

For example, take the Card component:

const Card = extendVariants(UICard, {
  variants: {
    color: {
      default: {
        base: colorPattern.default,
      },
      primary: {
        base: colorPattern.primary,
      },
      secondary: {
        base: colorPattern.secondary,
      },
      content: {
        base: colorPattern.content,
      },
      inherit: {
        base: colorPattern.inherit,
      },
    },
    radius: {
      xs: {
        base: borderRadius.xs,
      },
      sm: {
        base: borderRadius.sm,
      },
      md: {
        base: borderRadius.md,
      },
      lg: {
        base: borderRadius.lg,
      },
      xl: {
        base: borderRadius.xl,
      },
    },
    size: {
      none: {
        base: "p-0 gap-0",
      },
      xs: {
        base: `${padding.card.xs} ${gap.content.md}`,
      },
      sm: {
        base: `${padding.card.sm} ${gap.content.md}`,
      },
      md: {
        base: `${padding.card.md} ${gap.content.lg}`,
      },
      lg: {
        base: `${padding.card.lg} ${gap.content.xl}`,
      },
      xl: {
        base: `${padding.card.xl} ${gap.content["2xl"]}`,
      },
    },
    isBordered: {
      true: {
        base: "border border-solid",
      },
    },
  },
  defaultVariants: {
    color: "content",
    radius: "md",
    size: "md",
    isBordered: false,
  },
  compoundVariants: [
    {
      isBordered: true,
      color: "default",
      className: "border-default",
    },
    {
      isBordered: true,
      color: "primary",
      className: "border-primary",
    },
    {
      isBordered: true,
      color: "secondary",
      className: "border-secondary",
    },
    {
      isBordered: true,
      color: "content",
      className: "border-divider",
    },
    {
      isBordered: true,
      color: "inherit",
      className: "border-inherit",
    },
  ],
})

The borderColor does not make it into the component because it has no understanding of className, being a slot component it will only understand the slot param key.

This doesn't work because className/class is typed as string or string[] at this time:

compoundVariants: [
    {
      isBordered: true,
      color: "default",
      className: {
        base: "border-default",
      },
    },
 ]

ref: https://www.tailwind-variants.org/docs/slots#slots-with-compound-variants

Also, can't use compoundSlots in case you want multiple slots to inherit the same compound variant overrides.

compoundSlots: [
    {
      slots: ["base", "img"],
      isBordered: true,
      color: "default",
      className: "border-default",
    },
  ],

ref: https://www.tailwind-variants.org/docs/slots#compound-slots

---

For now, as a work around I'm just adding the border colors into the color variants, something like this:

variants: {
    color: {
      default: {
        base: `${colorPattern.default} border-default`,
      },
   }
}

But this would only work for this specific use case so it's not an ideal solution.

[criskell]

https://github.com/frontio-ai/heroui/blob/canary/packages/core/system-rsc/src/extend-variants.js

[criskell]

related #1379