import { t as e } from "../chunks/clsx.js";
import { n as t } from "../chunks/bundle-mjs.js";
import { useSlots as n } from "./hooks/useSlots.js";
import { HamburgerIcon as r } from "./HamburgerIcon.js";
import { useCallback as i, useRef as a, useState as o } from "react";
import { Icon as s } from "@clubmed/trident-icons";
import { jsx as c, jsxs as l } from "react/jsx-runtime";
//#region lib/ui/SidebarLayout.tsx
function u(e) {
	if ("href" in e) {
		let { children: t, icon: n, label: r, ...i } = e;
		return /* @__PURE__ */ c("a", {
			...i,
			className: "flex whitespace-nowrap items-center text-white hover:text-saffron transition-colors outline-none focus-visible:bg-white/20 rounded-pill relative group/sidebar-item",
			children: t
		});
	}
	let { children: t, icon: n, label: r, ...i } = e;
	return /* @__PURE__ */ c("button", {
		...i,
		className: "flex whitespace-nowrap items-center text-white outline-none rounded-pill relative group/sidebar-item",
		children: t
	});
}
var d = ({ item: e, isActive: n = !1, isCollapsed: r = !1, anchorName: i, onItemClick: a }) => {
	let o = e.items && e.items.length > 0;
	return /* @__PURE__ */ l("div", {
		className: "col-start-1 col-end-3",
		children: [/* @__PURE__ */ l(u, {
			...e,
			onClick: (e) => {
				o && a && (e.preventDefault(), a());
			},
			style: { anchorName: `--${i}` },
			children: [/* @__PURE__ */ l("div", {
				className: "relative",
				children: [/* @__PURE__ */ c("div", {
					className: t("aspect-square w-48 rounded-full flex items-center justify-center"),
					children: /* @__PURE__ */ c(s, {
						name: e.icon,
						className: "w-24 text-white"
					})
				}), /* @__PURE__ */ c("div", {
					className: "absolute inset-0 pointer-events-none",
					"aria-hidden": "true",
					inert: !0,
					children: /* @__PURE__ */ c("div", {
						className: t("max-md:hidden aspect-square w-48 rounded-full flex items-center justify-center bg-lightSand text-black", "[clip-path:circle(var(--sidebarItem_clipCircle))] transition-all duration-200 delay-100 ease-in-out group-focus-visible/sidebar-item:ring-8 group-focus-visible/sidebar-item:ring-lavender/20", n ? "[--sidebarItem_clipCircle:100%]" : "[--sidebarItem_clipCircle:0%]", "group-hover/sidebar-item:[--sidebarItem_clipCircle:100%] group-focus-within/sidebar-item:[--sidebarItem_clipCircle:100%]", !n && "group-hover/sidebar-item:bg-lightSand/80 group-focus-within/sidebar-item:bg-lightSand/80"),
						children: /* @__PURE__ */ c(s, {
							name: e.icon,
							className: "w-24"
						})
					})
				})]
			}), /* @__PURE__ */ c("span", {
				className: t("transition-all duration-300 ease-in-out whitespace-nowrap ps-8 pe-12 truncate md:max-w-240", r ? "opacity-0" : "opacity-100"),
				children: e.label
			})]
		}), o && /* @__PURE__ */ c("div", {
			className: t("grid transition-[grid-template-rows,opacity] duration-300 ease-in-out overflow-hidden max-md:grid-rows-[1fr] max-md:opacity-100", r ? "grid-rows-[0fr] opacity-0" : "grid-rows-[1fr] opacity-100 pb-12"),
			inert: r,
			children: /* @__PURE__ */ c("div", {
				className: "outline-none relative overflow-hidden flex flex-col gap-8 ps-48 font-normal",
				children: e.items.map((e, t) => /* @__PURE__ */ c("a", {
					href: e.href,
					className: "text-white hover:text-saffron transition-colors text-b4 whitespace-nowrap outline-none focus-visible:bg-white/20 ps-8 pe-16 rounded-pill",
					children: e.label
				}, t))
			})
		})]
	});
}, f = ({ isCollapsed: e }) => /* @__PURE__ */ c("svg", {
	xmlns: "http://www.w3.org/2000/svg",
	width: "33",
	height: "48",
	children: /* @__PURE__ */ l("g", {
		fill: "none",
		fillRule: "nonzero",
		children: [/* @__PURE__ */ c("path", {
			fill: "#FFF",
			d: "M10.008 48v-1.829c0-4.116-1.722-8.045-4.75-10.835-6.331-5.837-6.331-15.835 0-21.672a14.736 14.736 0 0 0 4.75-10.835V0h27.417v48H10.008Z"
		}), /* @__PURE__ */ c("g", {
			className: t("transition-transform duration-500 ease-in-out origin-center [transform-box:fill-box]", e ? "rotate-180" : "rotate-0"),
			children: /* @__PURE__ */ c("path", {
				fill: "#1E2643",
				d: "M19.686 12.547c6.617 0 12 5.383 12 12s-5.383 12-12 12-12-5.383-12-12 5.383-12 12-12Zm0 1.986c-5.522 0-10.015 4.492-10.015 10.014 0 5.523 4.493 10.015 10.016 10.015 5.52 0 10.012-4.492 10.012-10.015 0-5.522-4.492-10.014-10.012-10.014Zm-2.097 4.382c.376-.366 1.032-.366 1.409 0l5.037 4.895a.948.948 0 0 1 0 1.37l-5.037 4.894a1.002 1.002 0 0 1-.705.285 1 1 0 0 1-.704-.285.947.947 0 0 1 0-1.369l4.332-4.21-4.332-4.21a.95.95 0 0 1 0-1.37Z"
			})
		})]
	})
});
function p({ isCollapsed: e, onCollapsedChange: t }) {
	let [n, r] = o(() => e ?? !0), s = a(null), c = i((e) => {
		r((n) => {
			let r = typeof e == "function" ? e(n) : e;
			return r !== n && t?.(r), r;
		});
	}, [t]);
	return {
		isCollapsed: n,
		setIsCollapsed: c,
		overlayRef: s,
		handleToggleCollapse: i(() => {
			c((e) => !e);
		}, [c])
	};
}
var m = ({ items: i, children: a, className: o, activeIndex: s = 0, isCollapsed: u, onCollapsedChange: m, ...h }) => {
	let { isCollapsed: g, setIsCollapsed: _, handleToggleCollapse: v } = p({
		isCollapsed: u,
		onCollapsedChange: m
	}), { "header-logo": y, header: b, "header-actions": x, children: S } = n(a, [
		"header-logo",
		"header",
		"header-actions"
	]);
	return /* @__PURE__ */ l("div", {
		"data-name": "SidebarLayout",
		className: e("h-screen overflow-clip flex flex-col bg-ultramarine", o),
		...h,
		children: [/* @__PURE__ */ l("header", {
			className: "bg-ultramarine h-64 flex items-center justify-between gap-8 p-8 ps-20 md:px-24 text-white shrink-0",
			children: [
				y,
				b,
				x,
				/* @__PURE__ */ c("button", {
					className: "md:hidden w-48 h-48 focus-visible:ring-8 focus-visible:ring-lavender/20 rounded-full flex items-center justify-center text-white transition-opacity outline-none",
					"aria-label": g ? "Open the navigation menu" : "Close the navigation menu",
					onClick: v,
					children: /* @__PURE__ */ c(r, { isActive: !g })
				})
			]
		}), /* @__PURE__ */ l("div", {
			className: "flex h-full overflow-x-clip overflow-y-hidden",
			children: [/* @__PURE__ */ l("aside", {
				className: t("z-10 max-md:absolute max-md:top-64 max-md:h-[calc(100dvh-64px)] max-md:w-screen flex bg-ultramarine px-8 md:py-16 md:ps-28 md:pe-16 text-white flex-col gap-24 transition-all duration-300 ease-in-out relative h-full shrink-0", g ? "max-md:-translate-x-full" : "md:pe-24"),
				children: [/* @__PURE__ */ c("button", {
					className: "hidden md:block absolute transition-top duration-300 ease-in-out rounded-pill outline-none focus-visible:ring-8 focus-visible:ring-lavender/20 [--indicatorYPos:anchor(top)] top-[max(var(--indicatorYPos,24px),24px)] left-[max(calc(100%_-_10px),86px)]",
					onClick: v,
					"aria-label": g ? "Expand sidebar" : "Collapse sidebar",
					style: { positionAnchor: `--sidebar-item-${s}` },
					children: /* @__PURE__ */ c(f, { isCollapsed: g })
				}), /* @__PURE__ */ c("nav", {
					className: t("max-md:divide-y-1 p-8 max-md:h-full max-md:overflow-auto md:gap-y-20 grid overflow-hidden text-b3 font-semibold relative transition-grid-template-columns duration-300 ease-in-out", g ? "grid-cols-[48px_0fr]" : "grid-cols-[48px_1fr]"),
					children: i.map((e, t) => /* @__PURE__ */ c(d, {
						item: e,
						isActive: t === s,
						isCollapsed: g,
						anchorName: `sidebar-item-${t}`,
						onItemClick: () => {
							e.items && e.items.length > 0 && _((e) => e && !1);
						}
					}, t))
				})]
			}), /* @__PURE__ */ c("main", {
				className: "w-full md:min-w-0 md:w-[calc(100%-108px)] bg-white p-24 overflow-auto md:rounded-ss-16 h-full shrink-0",
				children: S
			})]
		})]
	});
};
//#endregion
export { f as CollapseIndicatorSVG, m as SidebarLayout };

//# sourceMappingURL=SidebarLayout.js.map