How Can I Use RecipeVariant?

[seongminn]

I'm using pandacss's recipe in a React environment to style components.

And I want to get the type of the recipe using RecipeVariant.

This is my recipe declaration file.

interface ComponentVariant {
    xxx: boolean;
    yyy: boolean;
    zzz: 'md'
}

type ComponentVariantMap = {
    [key in keyof ComponentVariant]: Array<ComponentVariant[key]>;
};

export type ComponentVariantProps = {
    [key in keyof ComponentVariant]?:
        | ConditionalValue<ComponentVariant[key]>
        | undefined;
};

As you can see, the ComponentVariant type is not exported. I want to import that type into the component and use it, but is there a way to export it?

p.s. I don't want to use types wrapped in ConditionalValue.

[cgatian]

I'm not 100% sure I understand the question, but typically you define a recipe and then export the types from that recipe.

import { cva, type RecipeVariantProps } from styled-system/css'
 
const button = cva({
  base: {
    display: 'flex'
  },
  variants: {
    visual: {
      solid: { bg: 'red.200', color: 'white' },
      outline: { borderWidth: '1px', borderColor: 'red.200' }
    },
    size: {
      sm: { padding: '4', fontSize: '12px' },
      lg: { padding: '8', fontSize: '24px' }
    }
  }
})

export ButtonRecipeVariantProps = RecipeVariantProps<typeof checkboxRecipe>; // Use this in your component

[seongminn]

Thank you for your help!

But, It's about the cva. I use defineRecipe or defineSlotRecipe. When you use recipe, ConditionalValue type is always added.