import { ReactElement } from "react";
/** Themed Chakra ButtonGroup wrapper (left icon + text button + right icon/dropdown) — closed prop list, no ...rest, text via buttonText only. */
export type ButtonGroupIconProps = {
    /** Icon button at the left edge of the group; omitted entirely when unset. */
    leftIcon?: ReactElement;
    /** Icon button at the right edge; with `rightIconDropdown` it opens the `dropdownOptions` menu instead. */
    rightIcon?: ReactElement;
    /** Fires when the left icon button is clicked. */
    onLeftIconClick?: () => void;
    /** Fires when the right icon button is clicked; with `rightIconDropdown` it also toggles the menu. */
    onRightIconClick?: () => void;
    /** Auto-wrapped in a tooltip showing full text, but only when it visually truncates (maxW 200px). */
    buttonText: string;
    /** Fires when the centre text button is clicked. */
    onButtonClick?: () => void;
    /** Fires on every click inside the group via DOM bubbling too — not just clicks on group chrome. */
    onButtongroupClick?: () => void;
    /** Size of every segment; unset keeps the theme's default button size. */
    size?: "lg" | "md" | "sm" | "xs" | "xl";
    /** "gradient" paints one themed gradient across the whole group, with transparent segments; the rest style each segment. */
    variant?: "solid" | "outline" | "ghost" | "link" | "unstyled" | "gradient";
    /** Actually Chakra's colorScheme (a palette name like "red"), not a CSS text or icon color. */
    color?: "primary" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
    /** Inline style on the group wrapper, not on individual buttons. */
    buttonGroupStyle?: React.CSSProperties;
    /** Inline style on the left icon button. */
    buttonGroupLeftIconStyle?: React.CSSProperties;
    /** Inline style on the right icon button, or the dropdown trigger when `rightIconDropdown` is set. */
    buttonGroupRightIconStyle?: React.CSSProperties;
    /** Inline style on the centre text button. */
    buttonStyle?: React.CSSProperties;
    /** Fires when the left icon button loses focus. */
    onBlurLeftIcon?: () => void;
    /** Fires when the right icon button loses focus. */
    onBlurRightIcon?: () => void;
    /** Rendered only when BOTH rightIcon and rightIconDropdown are also set — otherwise silently unused. */
    dropdownOptions?: {
        label: string;
        id: string | number;
        image?: ReactElement | undefined;
    }[];
    /** Fires when a menu option is chosen, with the click event and the option; the menu closes first. */
    onDropdownOptionClick?: (event: React.MouseEvent, option: {
        label: string;
        id: string | number;
    }) => void;
    /** Also requires rightIcon — without it, neither the dropdown nor a plain right icon button renders. */
    rightIconDropdown?: boolean;
    /** Inline style on the dropdown menu list; used only when the dropdown renders. */
    menulistStyle?: React.CSSProperties;
    /** Inline style on each dropdown item; used only when the dropdown renders. */
    menuItemStyle?: React.CSSProperties;
    /** Shows a spinner on the centre text button only; icon buttons have their own loading flags. */
    isLoading?: boolean;
    /** Draws a rule between dropdown items. Defaults to true; false gives inset, rounded items instead. */
    divider?: boolean;
    /** Shows a spinner on the left icon button. */
    leftIconLoading?: boolean;
    /** Capitalized "R" unlike leftIconLoading — same casing must match exactly, there is no rightIconLoading. */
    RightIconLoading?: boolean;
};