import { cn } from "./index3.js";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/templates/PageBackground/PageBackground.tsx
/** Grid pattern: 17 vertical + 17 horizontal lines at 48px spacing */
function GridPattern() {
	return /* @__PURE__ */ jsxs("g", {
		className: "stroke-border",
		strokeWidth: "1",
		children: [Array.from({ length: 17 }).map((_, i) => /* @__PURE__ */ jsx("line", {
			x1: i * 48,
			y1: "0",
			x2: i * 48,
			y2: "768"
		}, `v-${i}`)), Array.from({ length: 17 }).map((_, i) => /* @__PURE__ */ jsx("line", {
			x1: "0",
			y1: i * 48,
			x2: "768",
			y2: i * 48
		}, `h-${i}`))]
	});
}
/** Circular pattern: 8 concentric circles at 48px radius increments */
function CircularPattern() {
	return /* @__PURE__ */ jsx("g", {
		className: "stroke-border",
		strokeWidth: "1",
		fill: "none",
		children: [
			48,
			96,
			144,
			192,
			240,
			288,
			336,
			384
		].map((radius) => /* @__PURE__ */ jsx("circle", {
			cx: "384",
			cy: "384",
			r: radius
		}, radius))
	});
}
var FADE_MASK = "radial-gradient(circle at center, black 0%, transparent 70%)";
function PageBackground({ pattern, offset = "top", className }) {
	const isIconCenter = offset === "icon-center";
	const topOffset = isIconCenter ? void 0 : offset === "top" ? -260 : offset === "center" ? -384 : offset;
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "page-background",
		className: cn("pointer-events-none absolute left-1/2 -translate-x-1/2 size-[768px]", isIconCenter && "top-1/2 -translate-y-1/2", className),
		style: {
			...topOffset !== void 0 ? { top: topOffset } : {},
			maskImage: FADE_MASK,
			WebkitMaskImage: FADE_MASK
		},
		"aria-hidden": "true",
		children: /* @__PURE__ */ jsx("svg", {
			className: "absolute inset-0 size-[768px]",
			viewBox: "0 0 768 768",
			fill: "none",
			focusable: "false",
			children: pattern === "grid" ? /* @__PURE__ */ jsx(GridPattern, {}) : /* @__PURE__ */ jsx(CircularPattern, {})
		})
	});
}
PageBackground.displayName = "PageBackground";
//#endregion
export { PageBackground };

//# sourceMappingURL=index481.js.map