Components

Disclosure

A button that shows and hides a section, like finished goals under a list.

Goals

New phone70%
Emergency fund60%

Import

import { Disclosure, DisclosureTrigger, DisclosureContent } from '@rinzai/zen';

API reference

<Disclosure>

A section that a button shows and hides, e.g. "Past (3)" under a list. Put a DisclosureTrigger and a DisclosureContent inside (it adds no element of its own). Opens and closes on its own, or follows open/onOpenChange.

Prop	Type	Default
`defaultOpen`	`boolean`	`false`
`onOpenChange`	`((open: boolean) => void)`	`—`
`open` Show or hide it from your state; leave it out to let the trigger do it.	`boolean`	`—`

<DisclosureTrigger>

The button: your label after a chevron that turns down as the section opens. Brightens on hover and while open.

No props of its own; it accepts the props of the element it renders.

<DisclosureContent>

What the trigger shows and hides. It grows open and folds shut (the height animates, the content fades and settles). While closed it isn't rendered at all, so what's inside costs nothing and can't be found, focused or read; it mounts as it opens and unmounts once it has folded shut. className goes on the content itself.

No props of its own; it accepts the props of the element it renders.