import React, { FC } from 'react'; import { IconName } from '../../elements/icon/icon'; export interface ExpandableSectionAction { /** The label for the action. */ label: string; /** The icon name for the action. */ icon?: IconName; /** The tooltip text for the action (optional, defaults to label). */ tooltip?: string; /** Called when the action is clicked. */ onClick: () => void; } interface ExpandableSectionProps { /** Contents of the section to be rendered. */ children: React.ReactNode; /** The title to render for the expandable section. */ title: React.ReactNode; /** Controls whether the section is expanded or not. */ isOpen?: boolean; /** Called when the section is opened/closed. */ onToggle?: (isOpen: boolean) => void; /** Optional actions to display on the right side of the header. */ actions?: ExpandableSectionAction[]; /** Whether to show the text before the icon (default: false) */ showTextBeforeIcon?: boolean; /** Custom icon name to use instead of the default CaretExpand. If empty or undefined, no icon will be shown. */ iconName?: 'CaretExpand' | 'ChevronDown' | ''; /** Border radius for the expandable section (default: 8px) */ borderRadius?: string; /** Background color for the header on hover (default: greys.shade10) */ hoverBackgroundColor?: string; /** Whether to show the border around the expandable section (default: true) */ showBorder?: boolean; /** Whether to show the border between header and content when expanded (default: true) */ showContentBorder?: boolean; /** Background color for the expandable section (default: greys.white) */ backgroundColor?: string; /** Whether actions should only be visible on hover (default: false - actions always visible). */ showActionsOnHover?: boolean; /** Whether to group actions into a dropdown menu (default: false - show as individual icon buttons). */ groupActions?: boolean; } export declare const ExpandableSection: FC; export {};