@veracity/vui/dist/accordion/accordionItemHorizontal.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 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/accordionItemHorizontal.tsx
/** An accordion item (horizontal AccordionOrientation). */
const AccordionItemHorizontal = (props) => {
	const { className, children, collapsed, content, disabled, id, contentPx, 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 cursor = disabled ? "not-allowed" : "pointer";
	const fontWeight = typeof title === "string" ? "500" : "inherit";
	const expandedContentPx = contentPx ? contentPx : styles.itemHorizontal.space;
	return /* @__PURE__ */ jsxs(Box, {
		alignItems: isCollapsedInternal ? "normal" : "baseline",
		bg: disabled ? "disabled.bg" : void 0,
		borderRight: "1px solid transparent",
		className: cs("vui-accordion-item-horizontal", className),
		color: disabled ? "disabled.color" : void 0,
		column: true,
		cursor: disabled ? "not-allowed" : void 0,
		id: `${id}`,
		maxW: isCollapsedInternal ? styles.item.minH : "auto",
		minW: styles.item.minH,
		transitionDuration: "0ms",
		userSelect: disabled ? "none" : void 0,
		...styles.item,
		p: 0,
		...rest,
		children: [/* @__PURE__ */ jsxs(Box, {
			cursor,
			hoverBg: disabled ? "transparent" : isCollapsedInternal ? styles.item.itemTitleHoverBg : styles.item.expandedItemTitleHoverBg,
			justifyContent: "space-between",
			minH: styles.item.minH,
			onClick: toggle,
			p: styles.itemHorizontal.space,
			w: "100%",
			children: [!isCollapsedInternal && /* @__PURE__ */ jsx(Box, {
				fontWeight,
				opacity: disabled ? .5 : 1,
				children: title
			}), /* @__PURE__ */ jsx(accordionItemArrow_default, {
				collapsed: isCollapsedInternal,
				color: styles.icon.color,
				disabled,
				orientation: "horizontal"
			})]
		}), !isCollapsedInternal ? /* @__PURE__ */ jsx(Box, {
			p: styles.itemHorizontal.space,
			pt: 0,
			px: expandedContentPx,
			transitionDuration: "0ms",
			w: 1,
			children: children ?? content
		}) : /* @__PURE__ */ jsx(Box, {
			cursor,
			flexDirection: "row-reverse",
			fontWeight,
			mb: styles.item.minH,
			mt: styles.itemHorizontal.space,
			onClick: toggle,
			transform: "rotate(-90deg)",
			transitionDuration: "0ms",
			whiteSpace: "nowrap",
			children: title
		})]
	});
};
AccordionItemHorizontal.displayName = "AccordionItemHorizontal";

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