busbud / tailwind-buddy

Tailwind Buddy: Your Friendly Helper for Composing Tailwind Classes 🎨
https://busbud.github.io/tailwind-buddy/
12 stars 1 forks source link

Props doesn't work without `PropsWithChildren` #9

Closed chekromul closed 2 months ago

chekromul commented 4 months ago

Preconditions

"@busbud/tailwind-buddy": "^0.0.33"

Steps to reproduce

import { FC } from "react";
import { VariantsProps, compose } from "@busbud/tailwind-buddy";

interface FooBaseProps {
  someProp?: string;
}

const fooVariants = compose({
  slots: {
    root: "",
  },
  variants: {
    size: {
      md: {
        root: "text-size-150",
      },
    },
  },
  defaultVariants: {
    size: "md",
  },
  responsiveVariants: [],
})<FooBaseProps>();

type FooProps = VariantsProps<typeof fooVariants>;

export const Foo: FC<FooProps> = ({ someProp, size }) => (
  <div data-prop={someProp} data-size={size} />
);

Actual result

Here's the error:

TS2339: Property someProp does not exist on type


MergedProps<FooBaseProps, {
 size: {
   md: {
     root: string;
   };
 };
}, never[]> | undefined
Error screenshot

But if I add PropsWithChildren then everything works fine.

With PropsWithChildren screenshot
flozero commented 2 months ago

I am closing this as you can see https://github.com/busbud/tailwind-buddy/blob/main/packages/ui/src/components/Button/Button.variants.ts

I am not use with children but just React.FC

If you can provide a pr here with the type failing would help a lot