Include example under "Merging Styles" for using a pattern inside a recipe

[rvankints-rm]

It took me a bit of time to figure how to use a pattern inside a recipe.

As an example, I have a button CVA recipe in which I wanted to use the circle pattern. Using the following resulted in a typescript error:

const button = cva({
    base: {
        ...circle({ size: '8' }),
        fontSize: 'xs',
        fontWeight: 'bold',
        color: 'gray.500',
        bgColor: 'white',
    },
    variants: {
        // ..
    },
})
// Results in: "TS2698: Spread types may only be created from object types."

But in the end, made it work with this:

const button = cva({
    base: {
        ...circle.raw({ size: '8' }),
        fontSize: 'xs',
        fontWeight: 'bold',
        color: 'gray.500',
        bgColor: 'white',
    },
    variants: {
        // ..
    },
})

In the section on "Merging Styles", the combination of css and cva (or sva) is covered, but for those cases, the css isn't used inside the cva itself.

Assuming my above solution is valid, it makes it very clear that the base cva extends itself from the circle pattern.