import * as React from 'react';
import { SectionIconVariant } from './SectionIcon.mjs';

interface SectionHeadingButton {
    /**
     * The label for the button
     */
    label: string;
    /**
     * Optional icon to display before the label
     */
    icon?: React.ReactNode;
    /**
     * Click handler for the button
     */
    onClick?: () => void;
}
interface SectionHeadingButtonGroupItem {
    /**
     * The label for the button
     */
    label: string;
    /**
     * Optional icon to display before the label
     */
    icon?: React.ReactNode;
    /**
     * Optional value identifier
     */
    value?: string;
}
interface SectionHeadingProps {
    /**
     * The heading title text
     */
    title: string;
    /**
     * Show an icon badge next to the title.
     * Can be a boolean (defaults to 'info') or a specific variant.
     * Available variants: 'warning', 'danger', 'info', 'success'
     */
    icon?: boolean | SectionIconVariant;
    /**
     * Avatar configuration - can be an image URL or initials
     */
    avatar?: {
        src?: string;
        initials?: string;
        alt?: string;
    };
    /**
     * Primary button configuration (mutually exclusive with buttonGroup)
     */
    button?: SectionHeadingButton;
    /**
     * Button group configuration (mutually exclusive with button)
     */
    buttonGroup?: {
        items: SectionHeadingButtonGroupItem[];
        activeIndex?: number;
        onChange?: (index: number) => void;
    };
    /**
     * Additional CSS class name
     */
    className?: string;
    /**
     * Additional inline styles
     */
    style?: React.CSSProperties;
}
/**
 * SectionHeading component - Arbor Design System
 *
 * A flexible section heading component that can include an icon, avatar,
 * button, or button group. Button and button group are mutually exclusive.
 *
 * @example
 * ```tsx
 * // Basic heading
 * <SectionHeading title="Section Title" />
 *
 * // With icon
 * <SectionHeading title="Section Title" icon />
 *
 * // With avatar
 * <SectionHeading
 *   title="User Profile"
 *   avatar={{ src: "/avatar.jpg", alt: "User" }}
 * />
 *
 * // With button
 * <SectionHeading
 *   title="Section Title"
 *   button={{ label: "Add Item", onClick: () => {} }}
 * />
 *
 * // With button group
 * <SectionHeading
 *   title="Section Title"
 *   buttonGroup={{
 *     items: [{ label: "Day" }, { label: "Week" }],
 *     activeIndex: 0,
 *     onChange: (index) => {}
 *   }}
 * />
 * ```
 */
declare const SectionHeading: React.ForwardRefExoticComponent<SectionHeadingProps & React.RefAttributes<HTMLDivElement>>;

export { SectionHeading, type SectionHeadingButton, type SectionHeadingButtonGroupItem, type SectionHeadingProps };