@payfit/unity-components/dist/esm/components/collapsible/parts/CollapsibleTitle.d.ts

import { ReactNode } from 'react';
import { HeadingProps } from 'react-aria-components/Heading';
/**
 * @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 extends Omit<HeadingProps, 'prefix'> {
    /**
     * The content of the collapsible title.
     */
    children: ReactNode;
    /**
     * Optional content displayed before the title.
     */
    prefix?: ReactNode;
    /**
     * Optional content to display after the title.
     */
    suffix?: ReactNode;
    /**
     * Places the disclosure caret before or after the title content.
     * @default 'left'
     */
    disclosurePosition?: 'left' | 'right';
}
/**
 * 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
 * @example
 * ```tsx
 * import {
 *   Collapsible,
 *   CollapsibleContent,
 *   CollapsibleTitle,
 * } from '@payfit/unity-components'
 *
 * function Example() {
 *   return (
 *     <Collapsible>
 *       <CollapsibleTitle suffix="12.5 days" disclosurePosition="right">
 *         Balance information
 *       </CollapsibleTitle>
 *       <CollapsibleContent>Details about the balance.</CollapsibleContent>
 *     </Collapsible>
 *   )
 * }
 * ```
 * @see {@link Collapsible} - The parent component
 * @see {@link CollapsibleContent} - The content component that is shown/hidden
 */
declare const CollapsibleTitle: import('react').ForwardRefExoticComponent<CollapsibleTitleProps & import('react').RefAttributes<HTMLDivElement>>;
export { CollapsibleTitle };