import { BoxProps, ElementProps, Factory, MantineRadius, StylesApiProps } from '../../core'; import { AccordionChevronPosition, AccordionHeadingOrder, AccordionValue } from './Accordion.types'; import { AccordionChevron } from './AccordionChevron'; import { AccordionControl, type AccordionControlProps } from './AccordionControl/AccordionControl'; import { AccordionItem, type AccordionItemProps } from './AccordionItem/AccordionItem'; import { AccordionPanel, type AccordionPanelProps } from './AccordionPanel/AccordionPanel'; import type { AccordionItemContextValue } from './AccordionItem.context'; export type AccordionStylesNames = 'root' | 'content' | 'item' | 'panel' | 'icon' | 'chevron' | 'label' | 'itemTitle' | 'control'; export type AccordionVariant = 'default' | 'contained' | 'filled' | 'separated'; export type AccordionCssVariables = { root: '--accordion-transition-duration' | '--accordion-chevron-size' | '--accordion-radius'; }; export interface AccordionProps extends BoxProps, StylesApiProps, ElementProps<'div', 'value' | 'defaultValue' | 'onChange'> { /** If set, multiple items can be opened at the same time */ multiple?: Multiple; /** Controlled component value */ value?: AccordionValue; /** Uncontrolled component default value */ defaultValue?: AccordionValue; /** Called when value changes, payload type depends on `multiple` prop */ onChange?: (value: AccordionValue) => void; /** If set, arrow keys loop through items (first to last and last to first) @default true */ loop?: boolean; /** Transition duration in ms @default 200 */ transitionDuration?: number; /** If set, chevron rotation is disabled */ disableChevronRotation?: boolean; /** Position of the chevron relative to the item label @default right */ chevronPosition?: AccordionChevronPosition; /** Size of the chevron icon container @default auto */ chevronSize?: number | string; /** Size of the default chevron icon. Ignored when `chevron` prop is set. Use `chevronSize` instead when using custom chevron. @default 16 */ chevronIconSize?: number | string; /** Sets heading level (h2-h6) for `Accordion.Control` elements to meet WAI-ARIA requirements. Has no visual effect. */ order?: AccordionHeadingOrder; /** Custom chevron icon */ chevron?: React.ReactNode; /** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. @default theme.defaultRadius */ radius?: MantineRadius; /** If set to `false`, panels are unmounted when collapsed. By default, panels stay mounted when collapsed. */ keepMounted?: boolean; } export type AccordionFactory = Factory<{ props: AccordionProps; ref: HTMLDivElement; stylesNames: AccordionStylesNames; vars: AccordionCssVariables; variant: AccordionVariant; signature: (props: AccordionProps) => React.JSX.Element; staticComponents: { Item: typeof AccordionItem; Panel: typeof AccordionPanel; Control: typeof AccordionControl; Chevron: typeof AccordionChevron; }; }>; export declare const Accordion: ((props: AccordionProps) => React.JSX.Element) & import("../..").ThemeExtend<{ props: AccordionProps; ref: HTMLDivElement; stylesNames: AccordionStylesNames; vars: AccordionCssVariables; variant: AccordionVariant; signature: (props: AccordionProps) => React.JSX.Element; staticComponents: { Item: typeof AccordionItem; Panel: typeof AccordionPanel; Control: typeof AccordionControl; Chevron: typeof AccordionChevron; }; }> & import("../..").ComponentClasses<{ props: AccordionProps; ref: HTMLDivElement; stylesNames: AccordionStylesNames; vars: AccordionCssVariables; variant: AccordionVariant; signature: (props: AccordionProps) => React.JSX.Element; staticComponents: { Item: typeof AccordionItem; Panel: typeof AccordionPanel; Control: typeof AccordionControl; Chevron: typeof AccordionChevron; }; }> & { Item: typeof AccordionItem; Panel: typeof AccordionPanel; Control: typeof AccordionControl; Chevron: typeof AccordionChevron; } & { varsResolver: import("../..").VarsResolver<{ props: AccordionProps; ref: HTMLDivElement; stylesNames: AccordionStylesNames; vars: AccordionCssVariables; variant: AccordionVariant; signature: (props: AccordionProps) => React.JSX.Element; staticComponents: { Item: typeof AccordionItem; Panel: typeof AccordionPanel; Control: typeof AccordionControl; Chevron: typeof AccordionChevron; }; }>; } & import("../..").FactoryComponentWithProps<{ props: AccordionProps; ref: HTMLDivElement; stylesNames: AccordionStylesNames; vars: AccordionCssVariables; variant: AccordionVariant; signature: (props: AccordionProps) => React.JSX.Element; staticComponents: { Item: typeof AccordionItem; Panel: typeof AccordionPanel; Control: typeof AccordionControl; Chevron: typeof AccordionChevron; }; }> & { displayName?: string; }; export declare namespace Accordion { type Props = AccordionProps; type StylesNames = AccordionStylesNames; type CssVariables = AccordionCssVariables; type Factory = AccordionFactory; type Variant = AccordionVariant; namespace Control { type Props = AccordionControlProps; } namespace Item { type Props = AccordionItemProps; type Context = AccordionItemContextValue; } namespace Panel { type Props = AccordionPanelProps; } }