@drivy/cobalt
Version:
Opinionated design system for Drivy's projects.
61 lines (60 loc) • 2.56 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { Accordion, useAccordionItemContext } from "@ark-ui/react";
import classnames from "classnames";
import { useId } from "react";
import ToggleIcon from "./ToggleIcon.js";
const AccordionItemHeader = ({ children, className, headingLevel = 4, leftToggleIcon, useChevron = false, ...props })=>{
const Heading = `h${headingLevel}`;
const { expanded } = useAccordionItemContext();
return /*#__PURE__*/ jsx(Heading, {
children: /*#__PURE__*/ jsxs(Accordion.ItemTrigger, {
className: classnames("cobalt-accordion__header", {
"cobalt-accordion__header--left-toggle-icon": leftToggleIcon
}),
...props,
children: [
/*#__PURE__*/ jsx("span", {
className: classnames("cobalt-accordion__header-content", className),
children: children
}),
/*#__PURE__*/ jsx(ToggleIcon, {
useChevron: useChevron,
isOpen: expanded
})
]
})
});
};
AccordionItemHeader.displayName = "Accordion.Item.Header";
const AccordionItemPanel = ({ children, className, ...props })=>/*#__PURE__*/ jsx(Accordion.ItemContent, {
className: classnames("cobalt-accordion__panel", className),
...props,
children: children
});
AccordionItemPanel.displayName = "Accordion.Item.Panel";
const AccordionItem = ({ children, className, value, ...props })=>{
const generatedId = useId();
const accordionItemId = value || generatedId;
return /*#__PURE__*/ jsx(Accordion.Item, {
className: classnames("cobalt-accordions-list__item", className),
value: accordionItemId,
...props,
children: children
});
};
AccordionItem.displayName = "Accordion.Item";
AccordionItem.Header = AccordionItemHeader;
AccordionItem.Panel = AccordionItemPanel;
const Accordion_Accordion = ({ className, children, collapsible = true, onValueChange, ...props })=>/*#__PURE__*/ jsx(Accordion.Root, {
className: classnames("cobalt-accordions-list", className),
collapsible: collapsible,
onValueChange: (details)=>onValueChange?.(details.value),
...props,
children: children
});
Accordion_Accordion.displayName = "Accordion";
Accordion_Accordion.Item = AccordionItem;
const components_Accordion = Accordion_Accordion;
export default components_Accordion;
export { useAccordionItemContext };
//# sourceMappingURL=index.js.map