RecipeVariantProps gives undefined in unions due to which storybook doesn't render controls

[abhayzmp]

Description

When I use below to export types

type ButtonVariantProps = NonNullable<RecipeVariantProps<typeof buttonRecipe>>;

Output is

type ButtonVariantProps = {
    variant?: "outline" | "solid" | undefined;
    size?: "medium" | "large" | undefined;
    shape?: "rounded" | "pill" | "square" | undefined;
}

and storybook doesn't render controls

But when I pass the types like below

export type ButtonProps = ComponentProps<"button"> & {
  variant?: "outline" | "solid";
  size?: "medium" | "large";
  shape?: "rounded" | "pill" | "square";
};

Storybook renders the controls correctly

I was just following this tutorial
https://www.youtube.com/watch?v=KgcSZednCmk

Link to Reproduction

https://www.youtube.com/watch?v=KgcSZednCmk

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

JS Framework

React (TS)

Panda CSS Version

0.44.0

Browser

Version 127.0.6533.89 (Official Build) (arm64)

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[abhayzmp]

Tried this, didn't work

type WithoutUndefined<T> = {
    [P in keyof T]?: T[P];
};

type ButtonVariantProps = WithoutUndefined<{
    variant: "outline" | "solid";
    size: "medium" | "large";
    shape: "rounded" | "pill" | "square";
}>;

[cgatian]

NonNullable<ButtonVariantProps> might be what youre looking for