import React from 'react'; export type AccordionHeadingLevel = 2 | 3 | 4 | 5 | 6; export interface AccordionProps extends Omit, 'onChange'> { /** Let more than one section be open at once. */ allowsMultiple?: boolean; /** Uncontrolled: which sections start open. */ defaultExpandedKeys?: string[]; /** Controlled: which sections are open. Pass `onExpandedChange` with it. */ expandedKeys?: string[]; onExpandedChange?: (keys: string[]) => void; /** * The level each section's heading renders at. Must fit the surrounding * document — a panel inside an `h2` section wants `3`. */ headingLevel?: AccordionHeadingLevel; children?: React.ReactNode; } export interface AccordionItemProps extends Omit, 'title' | 'id'> { /** Stable identity for the open set. Required. */ id: string; /** The always-visible label. */ title: React.ReactNode; isDisabled?: boolean; children?: React.ReactNode; } /** * Accordion — sections that collapse, with the heading structure intact. * * WHY THE TRIGGER IS A BUTTON INSIDE A HEADING * * Both parts are load-bearing and the obvious implementations drop one of them. * The heading is how a screen-reader user navigates a long page — pressing `h` * moves between sections, and an accordion built from `div`s removes every one * of those stops. The button is what makes the section operable by keyboard and * announced as expandable; a heading with a click handler is neither. * * So the shape is `