POC: bulk styled function

[FilipePfluck]

The problem

Currently the styles in PlucoUI are declared using the styled function for each part of each component. I like styled better then sva because I can export components instead of classes, and I don't need to apply the classes myself. This result in a much cleaner index.tsx file. However, this makes the styles.ts file a bit more clunky, because I need to call the styled function multiple times and I need to spell the name of the component twice. You can check this file as an example.

The proposed solution

I tried to create a function that receives as the first parameter an object containing all the parts of the components, and as the second parameter an object with the same keys as the first parameter, containing the styles for all the parts. The function then assigns each style to its corresponding part. This would allow me to write a code much more concise. Check this file out

The issue with this approach

The exported components don't have type declarations for the style variants. If you declare a variant in the style configuration of the component, typescript will not suggest that variant correctly when using the component.

[FilipePfluck]

I tried using RecipeVariantProps as recommended in panda css docs. It resulted in a typescript error.