Add new machine for Disclosure

[TzviPM]

🚀 Feature request

Please describe your request in one or two sentences.

Add a new machine for the WAI-ARIA disclosure pattern (see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/)

This is also available in Chakra (https://chakra-ui.com/docs/hooks/use-disclosure) and Ariakit has some prior art (https://ariakit.org/components/disclosure).

Note this is not the same as Popover or Menu, because there is no concept of a positioner. It also isn't the same as an accodion, because there is no set of content in a disclosure and no concept that the trigger is a heading for the disclosure.

🧱 Problem Statement / Justification

Please provide valid reason(s) why this should added to Chakra UI.

If this feaure is related to a problem you've noticed. Mention it as well

This is a common design pattern that has many a11y concerns associated with it. It would be a valuable component of zag and could be composed as part of other components as well.

✅ Proposed solution or API

Please provide code snippets, gists, or links to the ideal design or API

The API should have:

• getTriggerProps for the element that shows and hides the content
• getContentProps for the element that contains all the content that is shown or hidden

The machine should be passed:

• open (optional) whether the content should begin in the open state (default is false)
• disabled (optional) whether the control should be disabled (default is false)

The following methods should be available:

• isOpen: boolean whether the disclosure content is open
• isDisabled: boolean whether the disclosure control is disabled
• isFocused(): boolean whether the disclosure control is focused
• setOpen(open: boolean): void Function to set the open state of the disclosure
• toggleOpen(): void Function to toggle the open state of the disclosure

↩️ Alternatives

What alternative solutions have you considered before making this request?

1. Use https://ariakit.org/components/disclosure. I think zag should support this behavior without needing to rely on other libraries
2. Use https://zagjs.com/components/react/switch. I think the content piece is significant as it has some a11y guidance that is non-trivial
3. Use https://zagjs.com/components/react/accordion with a single content element. I think the concept of accordion is fundamentally different than a disclosure, although I'd could see the accordion being implemented using a disclosure.

📝 Additional Information

What resources (links, screenshots, etc.) do you have to assist this effort?

[TzviPM]

I'd love to take a stab at adding this to zag

[segunadebayo]

Give it a shot @TzviPM 👍

[darkyelox]

Would love to have it, Kobalte already have it if you can borrow implementation from it.