Accordion

Key Features

Context API for State Management:
- AccordionRoot uses React Context to manage the active accordion item's state.
Accessibility:
- Implements aria-expanded, aria-controls, aria-labelledby, and role="region" to ensure screen readers can navigate the accordion.
Flexible Styling:
- Accepts className props for customizing the appearance of each component.

Notes:

This implementation is highly modular, making it reusable across different parts of a project.
The headless design allows for maximum flexibility in styling and customization.

Example

Accordion

Props

`AccordionRoot`

Prop	Type	Description	Required
`className`	`string`	Additional CSS class names for styling the root accordion container.	No
`children`	`React.ReactNode`	The child components, typically `AccordionItem` components.	Yes

Functionality:

Manages the state of the active accordion item (activeId).
Provides a toggleActiveId function to open/close accordion items.

`AccordionItem`

Prop	Type	Description	Required
`className`	`string`	Additional CSS class names for styling the accordion item container.	No
`children`	`React.ReactNode`	The child components, typically `AccordionTrigger` and `AccordionContent`.	Yes

Functionality:

Wraps the AccordionTrigger and AccordionContent components for a single accordion item.
Provides contextual information about the item (IDs and state).

`AccordionTrigger`

Prop	Type	Description	Required
`className`	`string`	Additional CSS class names for styling the trigger (button).	No
`children`	`React.ReactNode`	The trigger content, typically text or icons.	Yes

Functionality:

Toggles the accordion item's state between "open" and "closed."
Uses aria-controls and aria-expanded for accessibility.
Automatically updates the active item in AccordionRoot.

`AccordionContent`

Prop	Type	Description	Required
`className`	`string`	Additional CSS class names for styling the content container.	No
`children`	`React.ReactNode`	The content to display when the accordion item is open.	Yes

Functionality:

Displays or hides content based on the current state (open or closed).
Uses role="region" and aria-labelledby for accessibility.

API Integration Alerts