"use client";
import { t as e } from "../chunks/clsx.js";
import { getBgColor as t, getTextColor as n } from "./helpers/colors/colors.js";
import { useCallback as r, useEffect as i, useId as a, useRef as o, useState as s } from "react";
import { Icon as c } from "@clubmed/trident-icons";
import { jsx as l, jsxs as u } from "react/jsx-runtime";
//#region lib/ui/ChoiceExpander.tsx
var d = ({ label: d, showCheckIcon: f = !1, children: p, expanded: m, defaultExpanded: h = !1, onExpandedChange: g, disabled: _ = !1, ariaLabel: v, buttonBgColor: y = "black", buttonTextColor: b = "white", collapseLabel: x, expandLabel: S, className: C, ...w }) => {
	let [T, E] = s(h), D = a(), O = o(null), k = o(null), A = o(null), j = o(!1), M = m === void 0 ? T : m, N = r(() => {
		if (_) return;
		j.current = !0;
		let e = !M;
		m === void 0 && E(e), g?.(e);
	}, [
		_,
		M,
		m,
		g
	]);
	return i(() => {
		if (!M) return;
		let e = (e) => {
			e.key === "Escape" && N();
		};
		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
	}, [M, N]), i(() => {
		M && k.current ? k.current.focus() : !M && j.current && A.current && A.current.focus();
	}, [M]), i(() => {
		if (!M) return;
		let e = (e) => {
			O.current && !O.current.contains(e.target) && N();
		};
		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
	}, [M, N]), /* @__PURE__ */ l("div", {
		className: e("relative flex items-center justify-center", C),
		"data-name": "ChoiceExpander",
		"data-testid": "choice-expander",
		style: {
			width: "240px",
			height: 48
		},
		...w,
		children: /* @__PURE__ */ u("div", {
			ref: O,
			className: e("absolute top-0 grid transition-all duration-500", !M && [
				"w-240 rounded-pill-transitionable border-transparent",
				t(y),
				n(b)
			], M && [
				"w-324 rounded-16 bg-white text-black border border-gray-900",
				"z-10",
				_ && "opacity-50"
			]),
			children: [/* @__PURE__ */ u("button", {
				ref: A,
				type: "button",
				"data-testid": "choice-expander-button",
				"aria-expanded": M,
				"aria-controls": D,
				"aria-label": v || d,
				disabled: _,
				onClick: N,
				className: e("flex items-center justify-center w-240 mx-auto relative gap-20 transition-opacity duration-200", "rounded-pill focus-visible:ring focus-visible:ring-8 focus-visible:ring-lavender/20 outline-none px-20 py-12 ", _ ? "opacity-50 cursor-not-allowed" : "cursor-pointer", "[@supports(anchor-name:_--label-anchor)]:[--anchorSupport:1]"),
				children: [
					/* @__PURE__ */ l("div", {
						"aria-hidden": "true",
						className: "absolute h-24 w-24 mx-auto pointer-events-none",
						style: { anchorName: "--middle-anchor" }
					}),
					/* @__PURE__ */ u("span", {
						className: "text-b3 flex items-center font-semibold",
						children: [
							/* @__PURE__ */ l("span", {
								className: e("transition-opacity duration-200 pe-8", M && "opacity-0"),
								children: d
							}),
							/* @__PURE__ */ l("div", {
								className: "h-24 w-24",
								style: { anchorName: "--label-anchor" },
								"aria-hidden": "true",
								children: /* @__PURE__ */ l(c, {
									name: "ArrowDefaultDown",
									width: "24px",
									"aria-hidden": "true",
									className: e(M ? "absolute left-[calc(50%-12px)] rotate-180" : "rotate-[0deg]"),
									style: {
										transition: "rotate 0.3s, left 0.3s",
										opacity: "calc((1 - var(--anchorSupport)) * 1)"
									}
								})
							}),
							/* @__PURE__ */ l("span", {
								className: "sr-only",
								children: M ? x : S
							})
						]
					}),
					/* @__PURE__ */ l(c, {
						name: "ArrowDefaultDown",
						width: "24px",
						"aria-hidden": "true",
						className: e("absolute", M ? "rotate-180" : "rotate-[0deg]"),
						style: {
							positionAnchor: M ? "--middle-anchor" : "--label-anchor",
							left: "anchor(left)",
							top: "anchor(top)",
							transition: "left 0.3s, rotate 0.3s"
						}
					}),
					f && /* @__PURE__ */ l(c, {
						name: "CheckDefault",
						width: "24px",
						"aria-hidden": "true",
						className: e("transition-opacity duration-200", M && "opacity-0")
					})
				]
			}), /* @__PURE__ */ l("div", {
				className: e("grid overflow-hidden transition-[grid-template-rows,opacity] duration-500", M ? "grid-rows-[1fr]" : "grid-rows-[0fr] opacity-0"),
				children: /* @__PURE__ */ l("div", {
					className: "overflow-hidden",
					children: /* @__PURE__ */ l("div", {
						className: "px-8 pb-8",
						id: D,
						children: p
					})
				})
			})]
		})
	});
};
//#endregion
export { d as ChoiceExpander };

//# sourceMappingURL=ChoiceExpander.js.map