import { AccordionProps as ChakraAccordionProps, AccordionItemProps, AccordionButtonProps, AccordionPanelProps } from "@chakra-ui/react";
/** Chakra's AccordionProps plus the header/content rows to render; each row can override its own button/panel/item styles. */
export type AccordionProps = ChakraAccordionProps & {
    /** One entry per accordion row, rendered in order. */
    items: {
        /** Always-visible content of the row's toggle button. */
        header: React.ReactNode;
        /** Panel body, shown while the row is expanded. */
        content: React.ReactNode;
        /** Spread after the built-in style props (incl. `_hover`) — `bg`/`_hover` here replace, not merge, the expanded/hover highlight. */
        buttonProps?: AccordionButtonProps;
        /** A control over the header's trailing edge, beside the button (a button inside a button is invalid); the header hover stays lit while the pointer is on it. Reserve its width in `header`. */
        headerAction?: React.ReactNode;
        /** Props spread onto the row's panel. */
        panelProps?: AccordionPanelProps;
        /** Props spread onto the row's item wrapper. */
        itemProps?: AccordionItemProps;
        /** Inline style overrides per part of this row. */
        customStyles?: {
            /** Inline style for the header button. */
            buttonStyle?: React.CSSProperties;
            /** Inline style applied to the header button on hover. */
            hoverbuttonStyle?: React.CSSProperties;
            /** Overrides the action's default `right` (button padding + chevron slot); set it when `buttonStyle` changes the button padding. */
            headerActionStyle?: React.CSSProperties;
            /** Inline style for the panel. */
            panelStyle?: React.CSSProperties;
            /** Inline style for the item wrapper. */
            itemStyle?: React.CSSProperties;
        };
    }[];
};