Type collisions on extendVariants(...)

[EtienneSchneiderPro]

Since I migrated from NextUI to HeroUI and from React 18 to React 19, I've been having issues with refs. Indeed, in React 19, we no longer use forwardRef since we can now pass refs as parameters to our components. However, there seems to be a problem related to refs in my case. Do you have any ideas?

Additionally, I saw in your code this unit test proving that a solution exists:

Here the full example :

import { Button as NextButton, ButtonProps as NextButtonProps, extendVariants } from '@heroui/react';
import { createRef , useRef } from 'react';

type CustomButtonProps = Omit<
    NextButtonProps,
    'size' | 'variant' 
> & {
    size?: 'size1' | 'size2';
    variant?: 'variant1' | 'variant2';
};

const StyledButton = extendVariants(NextButton, {
    variants: {
        size: {
            size1: 'px-2 py-1 rounded-3xl text-sm',
            size2: 'px-4 py-2 rounded-lg text-sm',
        },
        variant: {
            variant1: 'bg-primary text-white',
            variant2: 'border border-primary text-primary',
        },
    },
});

const Button = (buttonProps: CustomButtonProps) => {

    const useref = useRef<HTMLButtonElement>(null);
    const createref = createRef<HTMLButtonElement>();

    return (
    <>
        {/* use extended HeroUi NextButton  */}

        <StyledButton
            ref={useref}  {/* ts error  */}
        ></StyledButton>

        <StyledButton
            ref={createref} {/* ts error  */}
        ></StyledButton>

        <StyledButton
            ref={buttonProps.ref} {/* ts error  */}
        ></StyledButton>

        {/* use HeroUi NextButton  */}

        <NextButton
            ref={useref}
        ></NextButton>

        <NextButton ref={createref} ></NextButton>

        <NextButton
            ref={buttonProps.ref}
        ></NextButton>
    </>
        
    );
};

export { Button };