Bindings for Zag.js (headless UI toolkit) & usage examples

[osdiab]

It would be very useful to be able to use a UI toolkit for common abstractions like tooltips, dialogs, accordions, toggles etc. Personally I like the headless approach taken by libraries in the React world like react-aria and radix, but those are React-specific.

The people at Chakra UI made a pretty cool set of libraries, Zag.js (and its companion library, Ark UI, for framework-specific headless components).

In theory these should be usable with Brisa, because they are not dependent on any one specific framework; but in practice it looks like it would be useful to have some level of integration into this, for instance the useMachine and normalizeProps helpers that are present for react/solid/vue are unclear how you would achieve the same logic with Brisa (e.g. see the examples in their Tooltip state machine, you can change the framework for different framework examples in the top left corner).

They have an example of how you would do things with Lit, as well as Vanilla TS, so it's definitely possible but not super easy without some kind of interop layer.

If something like this were present then Brisa would immediately have a robust headless UI library to work with, which would be sweet.

[aralroca]

Maybe @segunadebayo @anubra266 @cschroeter can guide us to see what we need to do and integrate it if necessary or show directly the example with Zag.js