@payfit/unity-components/dist/esm/components/nav/parts/NavGroup.js

import { Icon as e } from "../../icon/Icon.js";
import t from "../../../hooks/use-id.js";
import { navItemBase as n } from "./RawNavItem.js";
import r, { useCallback as i, useMemo as a, useState as o } from "react";
import { uyTv as s } from "@payfit/unity-themes";
import { jsx as c, jsxs as l } from "react/jsx-runtime";
import { Button as u } from "react-aria-components/Button";
//#region src/components/nav/parts/NavGroup.tsx
var d = s({
	extend: n,
	slots: {
		base: "uy:theme-rebrand:border-1 uy:theme-rebrand:border-solid",
		caret: "uy:transition-transform uy:duration-150 uy:delay-25 uy:ease-linear motion-reduce:transition-none",
		contentWrapper: "uy:transition-[max-height] uy:duration-200 uy:ease-linear motion-reduce:transition-none",
		content: "uy:list-none uy:flex uy:flex-col uy:gap-50 uy:transition-opacity uy:duration-150 uy:delay-25 uy:ease-linear"
	},
	variants: { expanded: {
		true: {
			base: ["uy:theme-legacy:bg-surface-neutral-low-active", "uy:theme-rebrand:bg-surface-neutral uy:theme-rebrand:border-border-neutral uy:theme-rebrand:shadow-100"],
			prefix: ["uy:theme-legacy:text-content-neutral", "uy:theme-rebrand:text-content-primary"],
			caret: "uy:rotate-180",
			contentWrapper: "uy:max-h-[1000px] uy:overflow-visible",
			label: "uy:typography-body-strong",
			content: "uy:opacity-100 uy:visible"
		},
		false: {
			caret: "uy:rotate-0",
			contentWrapper: "uy:max-h-0 uy:overflow-hidden",
			content: "uy:opacity-0 uy:invisible uy:pointer-events-none",
			label: "uy:typography-body",
			base: "uy:theme-rebrand:border-transparent"
		}
	} }
});
function f({ children: n, label: s, prefix: f, suffix: p, defaultExpanded: m = !1, isExpanded: h, onToggle: g, ..._ }) {
	let v = t(), [y, b] = o(m), x = h !== void 0, S = x ? h : y, C = i(() => {
		x || b((e) => !e), g?.(!S);
	}, [
		x,
		S,
		g
	]), w = r.Children.map(n, (e) => r.isValidElement(e) ? r.cloneElement(e, {
		isDisabled: !S,
		level: 1
	}) : e), T = `${v}-toggle`, E = `${v}-content`, { baseClassName: D, prefixClassName: O, labelClassName: k, suffixClassName: A, contentClassName: j, contentWrapperClassName: M, caretClassName: N } = a(() => {
		let e = d({
			level: 0,
			expanded: S
		});
		return {
			baseClassName: e.base({ className: "uy:w-full" }),
			prefixClassName: e.prefix(),
			suffixClassName: e.suffix(),
			labelClassName: e.label(),
			contentWrapperClassName: e.contentWrapper(),
			contentClassName: e.content(),
			caretClassName: e.caret()
		};
	}, [S]);
	return /* @__PURE__ */ l("li", {
		className: "uy:flex uy:flex-col uy:gap-50",
		children: [/* @__PURE__ */ l(u, {
			id: T,
			className: D,
			onPress: C,
			"aria-expanded": S,
			"aria-controls": E,
			..._,
			children: [
				f && /* @__PURE__ */ c("span", {
					className: O,
					children: f({ isExpanded: S })
				}),
				/* @__PURE__ */ c("span", {
					className: k,
					children: s
				}),
				/* @__PURE__ */ l("span", {
					className: A,
					role: "presentation",
					children: [p, /* @__PURE__ */ c(e, {
						src: "CaretDownOutlined",
						alt: "expand group",
						size: 20,
						className: N,
						color: "inherit"
					})]
				})
			]
		}), /* @__PURE__ */ c("div", {
			className: M,
			style: { maxHeight: S ? 1e3 : 0 },
			children: /* @__PURE__ */ c("ul", {
				id: E,
				className: j,
				"aria-labelledby": T,
				"aria-hidden": !S,
				children: w
			})
		})]
	});
}
f.displayName = "NavGroup";
//#endregion
export { f as NavGroup };