import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from 'react';
import { styled, useStyleConfig, vui } from '../core';
import List from '../list';
import { cs, filterUndefined } from '../utils';
import AccordionItem from './accordionItem';
import AccordionItemHorizontal from './accordionItemHorizontal';
import { AccordionProvider } from './context';
export const AccordionBase = styled.divBox `
  display: flex;
  min-width: 0;
  transition-duration: normal;
`;
/** Allows to show and hide sections of related content on a page. */
export const Accordion = vui((props, ref) => {
    const { children, className, items, orientation = 'vertical', iconPosition = 'end', size, variant, ...rest } = props;
    const styles = useStyleConfig('Accordion', props);
    const context = useMemo(() => filterUndefined({ size, variant }), [size, variant]);
    const aliasedProps = filterUndefined({});
    const isVertical = orientation === 'vertical';
    return (_jsx(AccordionProvider, { value: context, children: _jsx(AccordionBase, { borderLeft: isVertical
                ? undefined
                : `1px solid transparent
        `, borderTop: isVertical ? `1px solid transparent` : undefined, className: cs('vui-accordion', className), ref: ref, w: "100%", ...styles.container, ...aliasedProps, ...rest, children: isVertical ? (_jsx(List, { w: "100%", children: items
                    ? items?.map?.((item, key) => (_jsx(AccordionItem, { iconPosition: iconPosition, ...item }, key)))
                    : children })) : items ? (items?.map?.((item, key) => _jsx(AccordionItemHorizontal, { ...item }, key))) : (children) }) }));
});
Accordion.Item = AccordionItem;
Accordion.ItemHorizontal = AccordionItemHorizontal;
Accordion.displayName = 'Accordion';
export default Accordion;
//# sourceMappingURL=accordion.js.map