import * as React from 'react';

interface SubSectionInteractiveProps {
    /**
     * The heading text (required)
     */
    title: string;
    /**
     * Content to display when expanded (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;
}
/**
 * SubSectionInteractive component - Arbor Design System
 *
 * A collapsible sub-section component that can contain list rows and other content.
 * Click the header to expand/collapse the content area.
 *
 * @example
 * ```tsx
 * // Basic collapsible section
 * <SubSectionInteractive title="Personal Details">
 *   <ListRow label="Name" value="John Smith" />
 *   <ListRow label="Email" value="john@example.com" />
 * </SubSectionInteractive>
 *
 * // Initially collapsed
 * <SubSectionInteractive title="Additional Info" defaultExpanded={false}>
 *   <ListRow label="Notes" value="Some notes here" />
 * </SubSectionInteractive>
 *
 * // Controlled mode
 * <SubSectionInteractive
 *   title="Settings"
 *   expanded={isExpanded}
 *   onExpandedChange={setIsExpanded}
 * >
 *   <ListRow label="Theme" value="Dark" />
 * </SubSectionInteractive>
 * ```
 */
declare const SubSectionInteractive: React.ForwardRefExoticComponent<SubSectionInteractiveProps & React.RefAttributes<HTMLDivElement>>;

export { SubSectionInteractive, type SubSectionInteractiveProps };