feat(toast): add Toast.useToastTime

[MariusDoe]

Adds Toast.useToastTime, which can be used to access the elapsed and remaining time (or fraction of the duration) that a toast has been / will stay open for.

The code is extracted from/inspired by Toast.ProgressFill and I adjusted Toast.ProgressFill to use the new API.

Motivation

I use daisyUI to style kobalte components. daisyUI provides a progress component (component means set of css classes here), that i would like to use with kobalte's toast system.

The problem is that daisyUI uses a native progress element, while kobalte uses two divs (Toast.ProgressTrack and Toast.ProgressFill) and relies on a css variable to show the current value. Sadly, I don't think there is a direct way to use the css variable to populate the value attribute of the progress element. I could try to use a hidden Toast.ProgressFill, listen to changes of its --kb-toast-progress-fill-width variable and apply the value to the value property of the progress element, but that sounds like ugly code and poor performance.

Since I see no other way to get the value I need from kobalte, I propose to add this API. If there is a way I didn't see, please let me know :)

Docs

The custom progress element in the new example for Toast.useToastTime is currently unstyled, which doesn't fit nicely into the rest of the docs. I'm unsure whether we should add some styles to make it fit better or leave it as-is to show that it really is a raw/native progress element.

[netlify[bot]]

👷 Deploy request for kobalte pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	b21625e8858392c334793087eb0363f97ee1ce3d

[jer3m01]

We plan to expose all component context for custom use cases. We want to finish a few tasks before we tackle this.

Thanks for the work, will definitely merge once ready.