TypeScript + Recipes

[altano]

In the TypeScript Guide you show how to use the helper RecipeVariantProps type to extract the variant types, e.g.:

For some reason this helper has a much looser type locally for me than the example docs and the playground:

Playground (link):

Local:

I'm using panda v0.6.0 and typescript v5.1.3 and I couldn't find any interesting differences in panda or typescript's configs so I'm not sure what is causing the difference. I think it boils down to the fact that Parameters gives me undefined here:

Any idea what might be different between the documentation and the playground and my local environment?

The workaround is simple: I have to wrap my type in NonNullable, and maybe Required if I want it to be required. This is what my final prop type looks like:

type ButtonVariants = Required<NonNullable<RecipeVariantProps<typeof buttonStyle>>>;
...
size: ButtonVariants["size"];

[altano]

FWIW, the behavior I'm seeing locally is actually what I'd expect, because of these types which clearly make the props argument and all its keys optional. The real mystery is why the playground works as desired?

[anubra266]

@altano check this type if they're the same

The playground uses dev version of panda, so it's possible the types are changed but unreleased

[altano]

Yep, that's the difference!

Playground:

v0.6.0:
https://github.com/chakra-ui/panda/blob/%40pandacss/types%400.6.0/packages/types/src/recipe.ts#L17

[altano]

If the version in the playground is on its way to release eventually, we can go ahead and close this discussion?

[abhayzmp]

This issue also doesn't allow the storybook stories to render its controls