Typescript: prop Type is not assignable to type never when extending `VariantProps`

[yaman3bd]

Describe the bug I am building a React UI Component library, and using tailwind-variants for the styles of the component. for the component props, I am extending VariantProps to have the component variants included in the props:

export type ButtonProps = RACButtonProps &
  Omit<ButtonVariantProps, "isDisabled" | "isFocusVisible" | "onlyIcon"> & {
  icon?: React.ReactElement<typeof Icon>;
  iconAlign?: "start" | "end";
};

however after I built the library and published it to NPM when I want to use any component in my project, typescript always throws an error on the component variants. my button styles:

import {VariantProps, tv} from "tailwind-variants";

const button = tv({
  variants: {
    variant: {
      solid: "...",
      outline: "...",
      link: "..."
    },
    color: {
      primary: "...",
      secondary: "...",
      warning: "...",
      success: "...",
      danger: "...",
      info: "...",
      gray: "...",
      gradient: "..."
    },
  },
  defaultVariants: {
    variant: "solid",
    color: "primary",
  },
});

export type ButtonVariantProps = VariantProps<typeof button>;
export {button};

To Reproduce Steps to reproduce the behavior: I have made this minimal reproducible example: https://github.com/yaman3bd/tailwind-variants-issue

1. npm i tailwind-variants-issue
2. import Button component from the package and use it in your project:

import { Button } from 'tailwind-variants-issue'

function App() {
  return (
    <div className="App">
      <Button
        variant="link"
        color="gray"
      />
    </div>
  );
}

3.typescript will throw an error on the variant/color props with the following message:

TS2322: Type string is not assignable to type never

Expected behavior I expected the types and intellisense to work as expected with correct types and props names, but it does not work

Screenshots

Additional context I thought it might be an IDE issue, I have tried it in Webstorm and VSCode and had the same issue, however when I hard coded the variants it worked without any issue:

export type ButtonProps = RACButtonProps & {
  variant?: "solid" | "outline" | "link";
  color?: "primary" | "secondary" | "warning" | "success" | "danger" | "info" | "gray" | "gradient";
};

[preshonyee]

I have the same issue and I can't seem to land on a solution yet.

[mskelton]

@yaman3bd It looks like you are on an old version of Tailwind Variants. Please update to the latest version and then see if you can still reproduce it.

[preshonyee]

@yaman3bd It looks like you are on an old version of Tailwind Variants. Please update to the latest version and then see if you can still reproduce it.

@yaman3bd still happens even on the latest version of tailwind-variants

[yaman3bd]

@yaman3bd It looks like you are on an old version of Tailwind Variants. Please update to the latest version and then see if you can still reproduce it.

@mskelton I have upgraded to the latest version and now I have a new run time error:

Uncaught TypeError: Cannot read properties of undefined (reading 'twMerge')

my repo which has my library setup: https://github.com/yaman3bd/vite-build-issue another repo has the library installed and shows the error: https://github.com/yaman3bd/test-lib-build

[mskelton]

@yaman3bd Can you set this up as a code sandbox so I can run the example quickly?