tailwind-variants icon indicating copy to clipboard operation
tailwind-variants copied to clipboard

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

Open yaman3bd opened this issue 3 months ago • 5 comments

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 Screenshot 2024-03-27 at 11 31 21 AM

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";
};

yaman3bd avatar Mar 27 '24 08:03 yaman3bd