Passing type into a recipe or cva instead of infer from them

[theMasix]

Description

The only guide in the document tells us that there is a way to infer types from cva or defineRecipe and not pass types into them. I think there is a need to accept types from the outer scope and as a single source of truth for types of variants.

We already have the props (variants) type, Is there a way to use them as a validation type in recipes?

Problem Statement/Justification

The problem is we can not use our pre-defined types as a source of truth for our PandaCSS cva or recipes and it may end up with type inconsistencies.

Proposed Solution or API

cva or defineRecipe should accept type:

const Button = cva<ButtonTypes>({})
// OR
const Button = defineRecipe<ButtonTypes>({})

Alternatives

No response

Additional Information

No response

[astahmer]

not sure I understand the purpose, can you show your use-case through a complete example ?

[astahmer]

I didnt know about your use-case, that's why ! 😄 feel free to send a PR if you feel this is worth mentioning in the docs

[theMasix]

The type has an issue. boolean props can not be written in this way. Let's assume the ButtonProps has a rounded: boolean prop.

Then PandaCSS complains:

[theMasix]

I solved it by defining the defineRecipeWithVariants this way:

const defineRecipeWithVariants = <
  T extends RecipeSelection<RecipeVariantRecord>
>(
  config: RecipeConfig<{
    [K in keyof T]: T[K] extends string
      ? Record<T[K], SystemStyleObject>
      : T[K] extends boolean
      ? Record<'true' | 'false', SystemStyleObject>
      : never;
  }>
) => config;

Could I define better type?

[astahmer]

that looks fine to me 👍

[theMasix]

Could you please send me a type for slotRecipe as well?