Type error for responsive variants of defineRecipe

[lhguerra]

Description

I defined a recipe using defineRecipe so I could use them in a responsive way. They work pretty well but the generated type does not allow setting the breakpoints. This is the recipe:

import { defineRecipe } from "@pandacss/dev"

export const jokerCardStyles = defineRecipe({
  className: "jokerCard",
  description:
    "Style definitions for the Joker Card component and its variants",
  variants: {
    size: {
      sm: { width: "120px" },
      md: { width: "240px" },
      lg: { width: "360px" },
    },
  },
  staticCss: ["*"],
})

And this is how I'm using it:

<Flex
      className={jokerCard({
        sm: { size: "sm" },
        md: { size: "md" },
        lg: { size: "lg" },
      })}
    >

And this is the error I get:

TS2353: Object literal may only specify known properties, and sm does not exist in type JokerCardVariantProps
``
`

As I said, everything works nicely but typescript doesn't pass.

### Link to Reproduction

.

### Steps to reproduce

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


### JS Framework

Next

### Panda CSS Version

[email protected]

### Browser

_No response_

### Operating System

- [X] macOS
- [ ] Windows
- [ ] Linux

### Additional Information

_No response_

[segunadebayo]

The type expects that you pass the property first then you can apply the responsive values

jokerCard({ size: { sm: “sm”, md: “lg” })

[lhguerra]

Thanks, that works, but I'm not able to reference this type elsewhere. I use the generated type like the docs say:
import { JokerCardVariant, jokerCard } from "../../../../styled-system/recipes"

but it doesn't accept conditional variants. Should I use another type to be able to pass variants via props?

[lhguerra]

Also I've been doing some tests and it doesn't look like it is generating all the styles for all the conditions: https://play.panda-css.com/rFf802J1xx

[lhguerra]

The 3rd and 4th buttons should transition between outlilne and solid styles but their behavior is very weird when resizing the browser

[lhguerra]

I got it working by making things not too dynamic: instead of executing jokerCard in my component and receiving its params where I was using the component, I know pass the whole function call.

I believe this works because now I have static calls in my code to the classes Panda needs to generate.

[segunadebayo]

Nice. It doesn't transition nicely because of the style leaks between the breakpoints.

You can use something like this to keep the style boundaries clear.

<span className={button({ visual: { xlDown: 'solid', xl: 'outline' } })}>Button</span>