Incorrect types inheritance when extending

[vanpav]

Describe the bug When using "extend" prop to compose class names, the prop-types produced in extended TVReturnType aren't correct. Without "boolean" variant, typescript happy, but the type of "props.variant" in the BuyButton component is "string | number | undefined" which looks incorrect too.

To Reproduce

const baseButton = tv({
  base: "",
  variants: {
    variant: {
      primary: "",
    },
    disabled: {
      true: "",
    },
  },
});

const buyButton = tv({
  extend: baseButton,
});

const Button = (props: VariantProps<typeof baseButton>) => {
  const className = baseButton(props);

  return (
    <div className="flex gap-3">
      <button className={className}>Buy button</button>
    </div>
  );
};

const BuyButton = (props: VariantProps<typeof buyButton>) => {
  const className = buyButton(props);

  return (
    <div className="flex gap-3">
      <button className={className}>Buy button</button>
    </div>
  );
};

Expected behavior Props for the "buyButton" inherited properly to let typescript pass without errors and suggest correct variants in autocomplete.

Screenshots

Desktop (please complete the following information):

• OS: MacOS Ventura 13.3.1

Additional context

• Typescript: 5.0.2
• tailwind-variants: 0.1.5

[eduardodallmann]

I think I encountered a similar problem. Boolean variant breaks typescript only when it is extended. See the example:

Codesandbox Fork is required to see the typescript error