Distribute a component library

[MrSquaare]

Hello,

I would like to know the best way to distribute a component library using Panda CSS.

I currently have a UI Kit project structured into two packages:

• @ui-kit/core: exports a preset (with recipes)
• @ui-kit/components: imports the @ui-kit/core recipes

Both packages will be published on a npm registry.

The problem is the following: to use the library, a consumer will have to:

1. import the preset from @ui-kit/core + include @ui-kit/components's buildinfo
2. import the components from @ui-kit/components
3. specify the panda.config.ts's outdir to be the relative path to the styled-system described in the @ui-kit/core package.json's exports

• E.g.: node_modules/@ui-kit/core/styled-system

It's mainly the third point that bothers me:

• It seems strange to me to have to specify a path like this
• If there are several consumers sharing the same library with different configurations, they all end up generating a different styled-system to the same directory

My question: is there a better way to do this?

Thank you in advance for your advice!

[MrSquaare]

Here is the best result I could achieve with style system generated by package: https://github.com/MrSquaare/panda-css-lab/tree/main/1-config-recipes

This requires:

• a dedicated package that “virtually exports” the styled system
• a tool to create an alias between said package and the generated styled system (e.g.: TypeScript's paths config, Vite/Rollup resolve alias option) <-- This is the pain point of this solution

EDIT: I found a way to avoid using an alias system.
All you need is a package.json file with a fixed name at the root of the generated styled system and add it as a dependency of the project. This way, the resolution module system handles it natively.
To generate this package.json, I simply created a plugin that hooks config:resolved to find the path of the generated styled system and hooks codegen:done to write the package.json at its root: https://github.com/MrSquaare/panda-css-lab/blob/main/2-config-recipes-with-plugin/workspace/core/src/plugin/index.ts

(Note: I used a custom component factory because, for some reason, the styled and createStyleContext factories don't support Ark UI elements (even though I didn't use Ark UI in this example) and also don't provide the appropriate typing (the native properties of the HTML elements are missing). But of course this is not required.)