import { t as e } from "../../utils-B7XIe3qq.js";
import { t } from "../../x-BleQvk5v.js";
import { useCallback as n, useEffect as r } from "react";
import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
//#region src/react/primitives/slide-panel.tsx
var s = {
	sm: "w-64",
	md: "w-80",
	lg: "w-96",
	xl: "w-[480px]"
};
function c({ open: c, onClose: l, title: u, icon: d, children: f, side: p = "left", width: m = "md", showBackdrop: h = !0, className: g }) {
	let _ = n((e) => {
		e.key === "Escape" && c && l();
	}, [c, l]);
	r(() => (document.addEventListener("keydown", _), () => document.removeEventListener("keydown", _)), [_]), r(() => (c ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
		document.body.style.overflow = "";
	}), [c]);
	let v = p === "left";
	return /* @__PURE__ */ o(i, { children: [h && /* @__PURE__ */ a("div", {
		className: e("fixed inset-0 z-40 bg-black/40 backdrop-blur-sm", "transition-opacity duration-300", c ? "opacity-100" : "pointer-events-none opacity-0"),
		onClick: l,
		onKeyDown: (e) => e.key === "Enter" && l(),
		role: "button",
		tabIndex: c ? 0 : -1,
		"aria-label": "Close panel"
	}), /* @__PURE__ */ o("div", {
		role: "dialog",
		"aria-modal": "true",
		"aria-label": u || "Side panel",
		className: e("fixed inset-y-0 z-50", v ? "left-0" : "right-0", s[m], "bg-background-surface/95 backdrop-blur-xl", v ? "border-r" : "border-l", "border-border-default", "transform transition-transform duration-300 ease-out", c ? "translate-x-0" : v ? "-translate-x-full" : "translate-x-full", g),
		children: [(u || d) && /* @__PURE__ */ o("div", {
			className: "border-border-subtle flex items-center justify-between border-b px-5 py-4",
			children: [/* @__PURE__ */ o("div", {
				className: "flex items-center gap-2",
				children: [d && /* @__PURE__ */ a("span", {
					className: "text-accent-violet",
					children: d
				}), u && /* @__PURE__ */ a("h2", {
					className: "text-foreground font-semibold",
					children: u
				})]
			}), /* @__PURE__ */ a("button", {
				type: "button",
				onClick: l,
				className: "rounded-lg p-1.5 transition-colors hover:bg-white/5",
				"aria-label": "Close panel",
				children: /* @__PURE__ */ a(t, { className: "text-foreground-muted h-4 w-4" })
			})]
		}), /* @__PURE__ */ a("div", {
			className: "max-h-[calc(100vh-80px)] overflow-y-auto",
			children: f
		})]
	})] });
}
//#endregion
export { c as SlidePanel };

//# sourceMappingURL=slide-panel.js.map