import * as React from 'react';

interface SectionHeadingInteractiveProps {
    /**
     * The heading text (required)
     */
    title: string;
    /**
     * Content to display when expanded (sub-sections, list rows, etc.)
     */
    children?: React.ReactNode;
    /**
     * Whether the section is expanded (controlled mode)
     */
    expanded?: boolean;
    /**
     * Default expanded state (uncontrolled mode)
     * @default true
     */
    defaultExpanded?: boolean;
    /**
     * Callback when expanded state changes
     */
    onExpandedChange?: (expanded: boolean) => void;
    /**
     * Additional CSS class name
     */
    className?: string;
    /**
     * Additional inline styles
     */
    style?: React.CSSProperties;
}
/**
 * SectionHeadingInteractive component - Arbor Design System
 *
 * A collapsible section heading component that can contain sub-sections,
 * list rows, and other content. Click the header to expand/collapse.
 * Uses h2 heading style (22px) for main section level.
 *
 * @example
 * ```tsx
 * // Basic collapsible section
 * <SectionHeadingInteractive title="Personal Information">
 *   <SubSectionInteractive title="Contact Details">
 *     <ListRow label="Email" value="john@example.com" />
 *   </SubSectionInteractive>
 * </SectionHeadingInteractive>
 *
 * // Initially collapsed
 * <SectionHeadingInteractive title="Additional Settings" defaultExpanded={false}>
 *   <ListRow label="Theme" value="Dark" />
 * </SectionHeadingInteractive>
 *
 * // Controlled mode
 * <SectionHeadingInteractive
 *   title="Account"
 *   expanded={isExpanded}
 *   onExpandedChange={setIsExpanded}
 * >
 *   <ListRow label="Status" value="Active" />
 * </SectionHeadingInteractive>
 * ```
 */
declare const SectionHeadingInteractive: React.ForwardRefExoticComponent<SectionHeadingInteractiveProps & React.RefAttributes<HTMLDivElement>>;

export { SectionHeadingInteractive, type SectionHeadingInteractiveProps };