Toggle component that supports text inside the toggle

[mcullifer]

I think it would be nice for the existing Toggle component to have a variant that allows text inside the switch. The circle inside the toggle would be the width of the text. Toggling would transition its position to the other side and transition its width. Basically a similar little animation that the current Toggle component already has. Not sure how complicated this is to implement but it seems like it could be done with a similar structure to the Swap component? I guess with the different toggle types (toggle-primary, toggle-secondary, etc.) the toggle-on and toggle-off classes would have to apply text-primary-content, text-secondary-content, etc accordingly.

<label class="toggle">
  <input type="checkbox" />
  <div class="toggle-on">ON</div>
  <div class="toggle-off">OFF</div>
</label>

This medium article has a pretty good example and gets the idea across. Could be more refined though like having select-none/user-select: none; seems pretty sensible because it's kinda gross accidentally double clicking that and it ends up highlighting the text.

Another example is the toggle switch uber eats has

Let me know if this is already possible because I'd love to have something like this in a project I'm using DaisyUI for!

[saadeghi]

This will be in daisyUI 5 (coming soon)!