UNPKG

@payfit/unity-components

Version:

40 lines (39 loc) 1.55 kB
import { ReactNode } from 'react'; /** * @description * The CollapsibleTitle component renders the clickable header of a Collapsible component. * It displays a title with an icon that rotates based on the expanded state. * @example * ```tsx * <Collapsible> * <CollapsibleTitle>Section Title</CollapsibleTitle> * <CollapsibleContent>Content</CollapsibleContent> * </Collapsible> * ``` * @component * @see {@link Collapsible} - The parent component * @see {@link CollapsibleContent} - The content component that is shown/hidden */ interface CollapsibleTitleProps { /** * The content of the collapsible title. */ children: ReactNode; /** * Optional content to display after the title. */ suffix?: ReactNode; } /** * The title component for a Collapsible. * * This component renders a heading with a button that toggles the expanded state of the parent Collapsible. * It displays an icon that rotates based on the expanded state to indicate the current state. * @param {CollapsibleTitleProps} props - The component props * @param {ReactNode} props.children - The content of the title * @param {ReactNode} [props.suffix] - Optional content to display after the title * @param {React.Ref<HTMLDivElement>} ref - A ref to the underlying HTML div element * @returns {JSX.Element} The rendered CollapsibleTitle component */ declare const CollapsibleTitle: import('react').ForwardRefExoticComponent<CollapsibleTitleProps & import('react').RefAttributes<HTMLDivElement>>; export { CollapsibleTitle };