VariantProps not working in a component library

[srijans38]

Describe the bug
I am creating a component library for internal org use. For this I have a few components that use cva but when consuming these components in applications, the types from VariantProps are not reflected. Interestingly, the types work perfectly when consuming the component directly in storybook within the lib.

Here is a sample component:

const button = cva(['some-styles'], {
  variants: {
    intent: {
      ....
    },
  }
});

interface ButtonProps
  extends VariantProps<typeof button>,
    React.ButtonHTMLAttributes<HTMLButtonElement> {
  text: string;
  icon?: React.ReactNode;
  iconPosition?: 'before' | 'after';
}

export function Button({
  text,
  className,
  intent,
  weight,
  icon,
  iconPosition = 'before',
  ...props
}: ButtonProps) {
    ....
}

And, here is the declaration file output by tsc:

/// <reference types="react" />
import { VariantProps } from 'class-variance-authority';
declare const button: (props?: ({
    intent?: "primary" | "danger" | "outline" | null | undefined;
    weight?: "semibold" | "medium" | null | undefined;
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
interface ButtonProps extends VariantProps<typeof button>, React.ButtonHTMLAttributes<HTMLButtonElement> {
    text: string;
    icon?: React.ReactNode;
    iconPosition?: 'before' | 'after';
}
export declare function Button({ text, className, intent, weight, icon, iconPosition, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
export { };

What I suspect is happening here is that typescript is not taking the exports field for "./types" in package.json into account because manually editing the .d.ts file as below seems to work:

declare const button: (props?: ({
    intent?: "primary" | "danger" | "outline" | null | undefined;
    weight?: "semibold" | "medium" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;

So using import("class-variance-authority/types").ClassProp instead of import("class-variance-authority/dist/types").ClassProp

package.json:

cva/packages/class-variance-authority/package.json

Lines 29 to 31 in a1f7f50

	"./types": {
	"types": "./dist/types.d.ts"
	}

Is there anything I can do to resolve this?

[joe-bell]

Appreciate you taking the time to write this up, but I’m going to consider this as a duplicate of #143

Will make sure to tackle in cva@1.0