/**
* AccordionStandard component
*/
///
import React from 'react';
import { Sizes } from '../../core/types';
import './AccordionStandard.scss';
export interface AccordionStandardProps {
open?: boolean;
highlighted?: boolean;
initialOpen?: boolean;
onHeaderClick?: () => void;
onCaretClick?: () => void;
isTitleClickable?: boolean;
onToggle?: () => void;
onOpen?: () => void;
onClose?: () => void;
className?: string;
style?: React.CSSProperties;
size?: Sizes;
color?: string;
headerStyle?: React.CSSProperties;
headerLeftStyle?: React.CSSProperties;
headerRightStyle?: React.CSSProperties;
bodyStyle?: React.CSSProperties;
footerStyle?: React.CSSProperties;
hasColorItem?: boolean;
hasColorBlock?: boolean;
colorBlockColor?: string;
hasCaret?: boolean;
draggable?: boolean;
hasHoverBtn?: boolean;
hoverBtnIcon?: React.ReactNode;
hoverBtnOnClick?: () => void;
children?: React.ReactNode;
title?: string | React.ReactNode;
header?: React.ReactNode | string;
body?: React.ReactNode | string;
footer?: React.ReactNode | string;
footerTitle?: string;
onSetTimeout?: (timer: NodeJS.Timeout) => void;
}
/**
* AccordionStandard component
* @param props
* @param open - boolean to control the open state of the accordion
* @param highlighted - boolean to control the highlighted state of the accordion
* @param initialOpen - boolean to control the initial open state of the accordion
* @param onHeaderClick - callback function to handle the header click event
* @param onCaretClick - callback function to be called if user clicks on the caret
* @param isTitleClickable - boolean to make the title clickable
* @param onToggle - callback function to handle the toggle event
* @param onOpen - callback function to handle the open event
* @param onClose - callback function to handle the close event
* @param className - additional class name for the accordion
* @param overrideClassName - override class name for the AccordionStandard component
* @param style - additional styles for the accordion
* @param size - size of the accordion. Use the enum `Sizes` to set the size.
* @param color - custom color for the accordion color item
* @param headerStyle - additional styles for the header
* @param headerLeftStyle - additional styles for the right class in header
* @param headerRightStyle - additional styles for the left class in header
* @param bodyStyle - additional styles for the body
* @param footerStyle - additional styles for the footer
* @param hasColorItem - boolean to show the color item on the left side of the accordion
* @param hasColorBlock - boolean to show the color square block on the left side of the title
* @param colorBlockColor - custom color for the accordion color block
* @param hasCaret - boolean to show the caret icon on the left side of the accordion
* @param draggable - boolean to show the draggable icon on the left side of the accordion
* @param hasHoverBtn - whether to have the hover button or not
* @param hoverBtnIcon - icon for the hover button
* @param hoverBtnOnClick - callback function for the hover button
* @portal Title - h3 element to be rendered in the header, style: uppercase
* @portal Header - span element to be rendered at the end of the header
* @portal Body - main element to be rendered in the body
* @portal Footer - footer element to be rendered in the footer
* @note - `Title`, `Header`, `Body`, `Footer`, `FooterTitle` are the portals. U can also choose to pass in content through props, but not recommended.
* @example
*
* Accordion Title
* Accordion Header
* Accordion Body
*
*
* @returns AccordionStandard component
*/
export declare const AccordionStandard: (props: AccordionStandardProps) => import("react/jsx-runtime").JSX.Element;
export declare const AccordionBasic: (props: AccordionStandardProps) => import("react/jsx-runtime").JSX.Element;
export default AccordionStandard;