@veracity/vui/dist/accordion/accordionItem.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { cs } from "../utils/styles.js";
import { omitThemingProps, useStyleConfig } from "../core/theme.js";
import { Box } from "../box/box.js";
import { ListItem } from "../list/listItem.js";
import accordionItemArrow_default from "./accordionItemArrow.js";
import { useAccordionContext } from "./context.js";
import { useEffect, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/accordion/accordionItem.tsx
/** An accordion item. */
const AccordionItem = (props) => {
	const { className, children, collapsed, content, disabled, id, iconPosition = "end", title, onToggle, ...rest } = omitThemingProps(props);
	const [isCollapsedInternal, setIsCollapsedInternal] = useState(false);
	const styles = useStyleConfig("Accordion", useAccordionContext());
	useEffect(() => {
		setIsCollapsedInternal(!!collapsed);
	}, [collapsed]);
	const toggle = () => {
		if (!disabled) {
			onToggle?.({
				id,
				collapsed: !isCollapsedInternal
			});
			setIsCollapsedInternal(!isCollapsedInternal);
		}
	};
	const isIconStart = iconPosition === "start";
	const isIconEnd = iconPosition === "end";
	return /* @__PURE__ */ jsxs(ListItem, {
		borderBottom: "1px solid transparent",
		borderColor: styles.item.borderColor,
		className: cs("vui-accordion-item", className),
		color: "yellow",
		disabled,
		disabledBg: styles.item.disabledBg,
		disabledColor: styles.item.disabledColor,
		flexDirection: "column",
		h: "auto",
		id: `${id}`,
		p: 0,
		w: "100%",
		...rest,
		children: [/* @__PURE__ */ jsxs(Box, {
			center: true,
			color: "yellow",
			cursor: disabled ? "not-allowed" : "pointer",
			hoverBg: disabled ? "transparent" : isCollapsedInternal ? styles.item.itemTitleHoverBg : styles.item.expandedItemTitleHoverBg,
			justifyContent: iconPosition === "start" ? "initial" : "space-between",
			onClick: toggle,
			px: 2,
			w: "100%",
			...styles.item,
			children: [
				isIconStart && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(accordionItemArrow_default, {
					collapsed: isCollapsedInternal,
					color: styles.icon.color
				}) }),
				/* @__PURE__ */ jsx(Box, {
					fontWeight: typeof title === "string" ? "500" : "inherit",
					ml: isIconStart ? 2 : 0,
					opacity: disabled ? .5 : 1,
					children: title
				}),
				isIconEnd && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(accordionItemArrow_default, {
					collapsed: isCollapsedInternal,
					color: styles.icon.color,
					disabled
				}) })
			]
		}), !isCollapsedInternal && /* @__PURE__ */ jsx(Box, {
			mb: 2,
			mt: 2,
			px: 2,
			py: 1,
			w: "100%",
			children: children ?? content
		})]
	});
};
AccordionItem.displayName = "AccordionItem";

//#endregion
export { AccordionItem, AccordionItem as default };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=accordionItem.js.map