@drivy/cobalt/components/Accordion/index.js

Opinionated design system for Drivy's projects.

import React, { useId } from 'react';
import { Accordion as Accordion$1, useAccordionItemContext } from '@ark-ui/react';
export { useAccordionItemContext } from '@ark-ui/react';
import cx from 'classnames';
import ToggleIcon from './ToggleIcon.js';

const AccordionItemHeader = ({ children, className, headingLevel = 4, leftToggleIcon, useChevron = false, ...props }) => {
    const Heading = `h${headingLevel}`;
    const { expanded } = useAccordionItemContext();
    return (React.createElement(Heading, null,
        React.createElement(Accordion$1.ItemTrigger, { className: cx("cobalt-accordion__header", {
                "cobalt-accordion__header--left-toggle-icon": leftToggleIcon,
            }), ...props },
            React.createElement("span", { className: cx("cobalt-accordion__header-content", className) }, children),
            React.createElement(ToggleIcon, { useChevron: useChevron, isOpen: expanded }))));
};
AccordionItemHeader.displayName = "Accordion.Item.Header";
const AccordionItemPanel = ({ children, className, ...props }) => {
    return (React.createElement(Accordion$1.ItemContent, { className: cx("cobalt-accordion__panel", className), ...props }, children));
};
AccordionItemPanel.displayName = "Accordion.Item.Panel";
const AccordionItem = ({ children, className, value, ...props }) => {
    const accordionItemId = value || useId();
    return (React.createElement(Accordion$1.Item, { className: cx("cobalt-accordions-list__item", className), value: accordionItemId, ...props }, children));
};
AccordionItem.displayName = "Accordion.Item";
AccordionItem.Header = AccordionItemHeader;
AccordionItem.Panel = AccordionItemPanel;
const Accordion = ({ className, children, collapsible = true, onValueChange, ...props }) => {
    return (React.createElement(Accordion$1.Root, { className: cx("cobalt-accordions-list", className), collapsible: collapsible, onValueChange: (details) => onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(details.value), ...props }, children));
};
Accordion.displayName = "Accordion";
Accordion.Item = AccordionItem;

export { Accordion as default };
//# sourceMappingURL=index.js.map