Responsive variants with array syntax

[adbutterfield]

I'm building a component library using Panda. There's some cases where in an application, we want to use a text component like TitleText, and use large size variant for large/medium size screens, and medium size variant for small screens.

We don't want to bake the responsive behavior into the TitleText component, because depending on the feature or application, we could have different requirements. Of course consistency everywhere would be best (but you know how product development is...).

Does this sound like something you could support from cva and sva?

Or I guess we could accept a fontSize prop and narrow the values down to the valid tokens for this component, and pass that to css? Would probably have to generate static css for this though, because we don't know how users are going to use it ahead of time.

[adbutterfield]

Oh! I just noticed in the docs you can handle this kind of thing with config recipes.

I also saw another thread which mentions panda-plugin-crv.

Seems like other people need this kind of thing, so might be nice to integrate into Panda directly?