import type { BaseProps } from "@stratakit/foundations/secret-internals";
interface AccordionItemProps extends BaseProps {
/**
* The accordion item’s initial open state.
*
* @default false
*/
defaultOpen?: boolean;
/**
* The accordion item’s controlled open state.
*
* @default false
*/
open?: boolean;
/**
* Callback fired when the accordion item is opened.
*
* Should be used with the `open` prop.
*/
setOpen?: (open: boolean) => void;
}
/**
* An item within an accordion. Disclosed content with a label.
*
* Bare minimum example:
* ```tsx
*
*
*
*
* Label
*
*
* Body
*
* ```
*
* If the accordion item discloses a significant section of the page, it may be
* desirable to markup its label as a heading for accessibility purposes (e.g.
* screen reader users often navigate by heading). For those cases, you can wrap
* the `AccordionItem.Button` component with an `AccordionItem.Heading`
* component and use its `render` prop for rendering an HTML heading element.
* ```tsx
*
*
*
* }>
*
* Label
*
*
*
* Body
*
* ```
*
* Example with a decoration:
* ```tsx
*
*
*
* } />
*
* Label
*
*
* Body
*
* ```
*/
declare const AccordionItemRoot: import("react").ForwardRefExoticComponent>;
/**
* The always visible header of an accordion item.
*
* Must include an `AccordionItem.Button` and `AccordionItem.Marker` as a direct
* descendants.
*
* Example:
* ```tsx
*
*
*
*
* Label
*
*
* Body
*
* ```
*/
declare const AccordionItemHeader: import("react").ForwardRefExoticComponent & Omit, HTMLDivElement>, "ref">, "render"> & import("react").RefAttributes>;
/**
* The accordion item button.
*
* Must be a direct descendant of `AccordionItem.Header`.
*
* Example:
* ```tsx
*
*
*
* Label
*
*
* ```
*/
declare const AccordionItemButton: import("react").ForwardRefExoticComponent & Omit, HTMLButtonElement>, "ref">, "render"> & import("react").RefAttributes>;
/**
* An accordion item’s label.
*
* Must be a descendant of `AccordionItem.Button`.
*
* Example:
* ```tsx
*
* Label
*
* ```
*/
declare const AccordionItemLabel: import("react").ForwardRefExoticComponent & Omit, HTMLDivElement>, "ref">, "render"> & import("react").RefAttributes>;
/**
* The always-visible, optional decoration of the `AccordionItem.Header` content.
* It can be placed before or after the rest of the content in
* `AccordionItem.Header`. However, the `AccordionItem.Marker` must always be
* placed at either edge (beginning or end) of the header.
*
* Use as a direct descendant of `AccordionItem.Header`. The decoration
* can be placed before the rest of the header content.
*
* Example:
* ```tsx
*
*
* } />
*
* Label
*
*
* ```
*
* Alternatively, the decoration can also be placed after the rest of the
* header content.
*
* Example:
* ```tsx
*
*
*
* Label
*
* } />
*
* ```
*
* There can also be multiple decorations if passed as children under
* `AccordionItem.Decoration`.
*
* Example:
* ```tsx
*
*
*
*
*
*
*
* Label
*
*
* ```
*/
declare const AccordionItemDecoration: import("react").ForwardRefExoticComponent & Omit, HTMLDivElement>, "ref">, "render"> & import("react").RefAttributes>;
/**
* The visual marker of the `AccordionItem.Header` content. While it can be
* placed before or after the rest of the content in `AccordionItem.Header`,
* it is recommended to place the marker before.
*
* Example:
* ```tsx
*
*
*
* Label
*
*
* ```
*
* Alternatively, the marker can also be placed after the rest of the header
* content.
*
* Example:
* ```tsx
*
*
* Label
*
*
*
* ```
*
* Pass an icon as a child to override the default chevron icon:
* ```tsx
*
*
*
*
*
* Label
*
*
* ```
*/
declare const AccordionItemMarker: import("react").ForwardRefExoticComponent & Omit, HTMLDivElement>, "ref">, "render"> & import("react").RefAttributes>;
/**
* The disclosed content of the accordion item.
*
* Example:
* ```tsx
*
*
*
*
* Label
*
*
* Body
*
* ```
*/
declare const AccordionItemContent: import("react").ForwardRefExoticComponent & Omit, HTMLDivElement>, "ref">, "render"> & import("react").RefAttributes>;
interface AccordionItemHeadingProps extends BaseProps {
render: NonNullable;
}
/**
* A heading for wrapping `AccordionItem.Button`.
*
* The `render` prop is required.
*
* Example:
* ```tsx
*
*
* }>
*
* Label
*
*
*
*/
declare const AccordionItemHeading: import("react").ForwardRefExoticComponent>;
export { AccordionItemRoot as Root, AccordionItemContent as Content, AccordionItemHeader as Header, AccordionItemButton as Button, AccordionItemLabel as Label, AccordionItemDecoration as Decoration, AccordionItemMarker as Marker, AccordionItemHeading as Heading, };