"use client";
import { Portal as e } from "../ui/Portal.js";
import { useState as t } from "react";
import { jsx as n, jsxs as r } from "react/jsx-runtime";
//#region lib/examples/portal-demo.tsx
function i() {
	let [i, a] = t(!1);
	return /* @__PURE__ */ r("div", {
		className: "space-y-16",
		children: [
			/* @__PURE__ */ r("button", {
				onClick: () => a(!i),
				className: "rounded-md bg-blue-600 px-16 py-8 text-white hover:bg-blue-700",
				children: [i ? "Hide" : "Show", " Portal Content"]
			}),
			i && /* @__PURE__ */ n(e, {
				target: "portal-demo-target",
				children: /* @__PURE__ */ n("div", {
					className: "rounded-md border border-gray-300 bg-white p-16 shadow-lg",
					children: /* @__PURE__ */ n("p", {
						className: "text-gray-900",
						children: "This content is rendered in a portal outside the normal DOM hierarchy."
					})
				})
			}),
			/* @__PURE__ */ n("div", {
				id: "portal-demo-target",
				className: "min-h-64 rounded-md border-2 border-dashed border-gray-400 p-16",
				children: /* @__PURE__ */ n("p", {
					className: "mb-8 text-sm text-gray-600",
					children: "Portal Target Container:"
				})
			})
		]
	});
}
//#endregion
export { i as default };

//# sourceMappingURL=portal-demo.js.map