[BUG] - Default Card radius className still gets applied despite defining and using custom radius variant

[mrrts]

HeroUI Version

@heroui/react 2.6.14

Describe the bug

I have defined variants for the Card radius prop:

const ExtendedCard = extendVariants(
    HeroUiCard,
    {
        variants: {
            shadow: {
                card: {
                    base: 'shadow-[0_2px_10px_0_rgba(0,0,0,0.1)]',
                },
                none: {
                    base: 'shadow-none',
                },
            },
            radius: {
                8: {
                    base: 'rounded-8',
                    header: 'rounded-t-8',
                    footer: 'rounded-b-8',
                },
                2: {
                    base: 'rounded-2',
                    header: 'rounded-t-2',
                    footer: 'rounded-b-2',
                },
            },
        },
        defaultVariants: {
            shadow: 'card',
            radius: 8,
        },
    },
);

Note that '8' and '2' are border radii defined in our Tailwind config mapped to certain pixel values.

// tailwind.config.js

//...
module.exports = {
  theme: {
    extend: {
      // ...
      
      borderRadius: {
            none: '0px',
            1: '2px',
            2: '4px',
            3: '5px',
            4: '6px',
            5: '8px',
            6: '10px',
            7: '12px',
            8: '16px',
            9: '18px',
            10: '20px',
            11: '23px',
            12: '28px',
            13: '40px',
            full: '9999px',
      },

      // ...
//...

When I pass radius={2} to the Card component, however, the default HeroUI className rounded-large appears in the final class list, and so does rounded-2, and rounded-large is winning.

This did not happen with the shadow='card' variant also configured above. In that variant's case, the HeroUI default className was omitted from the final class list and only the variant shadow-[0_2px_10px_0_rgba(0,0,0,0.1)] className ended up in the DOM.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Create a Card component with extended radius variants that apply custom classnames
2. Inspect DOM and see that the HeroUI default rounded-large class is present in addition to the custom classname from the variant

Expected behavior

I expected the variant classname rounded-2 to appear in the DOM but not rounded-large; instead, I am seeing both classnames.

Screenshots or Videos

Operating System Version

macOS Sequoia 15.4.1

Browser

Chrome

[linear[bot]]

ENG-2502 [BUG] - Default Card radius className still gets applied despite defining and using custom radius variant

[heath-pack]

A very similar issue exists in the button component. Even with a variant added for

 radius: {
            full: 'rounded-full',
            5: 'rounded-5',
        }

and compound variants defined as

 {
            radius: 'full',
            size: 'md',
            className: 'rounded-full',
        },
        {
            radius: '5',
            size: 'md',
            className: 'rounded-5',
        },

he border radius set up from the default styling of the "md" size variant, which includes rounded-medium will still be applied