Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../../chunk-CKQMccvm.cjs");
let clsx = require("clsx");
clsx = require_chunk.__toESM(clsx);
let react = require("react");
react = require_chunk.__toESM(react, 1);
let react_jsx_runtime = require("react/jsx-runtime");
//#region src/hooks/useResponsiveContainer.ts
function getBreakpoint(width) {
	if (width < 480) return "mobile";
	if (width < 800) return "tablet";
	return "desktop";
}
/**
* Continuously tracks a container's size via ResizeObserver and returns
* width, height, and a breakpoint derived from the container width.
*
* Breakpoints: mobile (<480px) | tablet (480–800px) | desktop (>800px)
*/
function useResponsiveContainer(containerRef) {
	const [size, setSize] = (0, react.useState)({
		width: 0,
		height: 0,
		breakpoint: "mobile"
	});
	const [element, setElement] = (0, react.useState)(null);
	(0, react.useLayoutEffect)(() => {
		const current = containerRef.current;
		if (current !== element) setElement(current);
	});
	(0, react.useLayoutEffect)(() => {
		if (!element) return;
		const updateSize = () => {
			const width = element.clientWidth;
			const height = element.clientHeight;
			setSize((prev) => {
				if (prev.width === width && prev.height === height) return prev;
				return {
					width,
					height,
					breakpoint: getBreakpoint(width)
				};
			});
		};
		const rafUpdateSize = () => requestAnimationFrame(updateSize);
		const resizeObserver = new ResizeObserver(rafUpdateSize);
		resizeObserver.observe(element);
		updateSize();
		return () => {
			resizeObserver.disconnect();
		};
	}, [element]);
	return size;
}
//#endregion
//#region src/components/ImageBlock/ImageBlock.tsx
const ImageBlock = (0, react.forwardRef)(({ src, alt, className, imageLoading, ...rest }, ref) => {
	const [isImageLoading, setIsImageLoading] = (0, react.useState)(imageLoading ?? true);
	const [hasError, setHasError] = (0, react.useState)(false);
	const containerRef = (0, react.useRef)(null);
	const { breakpoint } = useResponsiveContainer(containerRef);
	const isMobile = breakpoint === "mobile";
	if (!src) return null;
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
		ref: (node) => {
			containerRef.current = node;
			if (typeof ref === "function") ref(node);
			else if (ref) ref.current = node;
		},
		className: (0, clsx.default)("openui-image-block-wrapper", {
			"openui-image-block-wrapper--mobile": isMobile,
			"openui-image-block-wrapper--error": hasError
		}, className),
		style: src && !hasError ? { "--bg-image": `url(${src})` } : void 0,
		...rest,
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
			src,
			alt,
			className: (0, clsx.default)("openui-image-block-image", {
				"openui-image-block-image--mobile": isMobile,
				"openui-image-block-image--error": hasError
			}),
			onLoad: () => {
				setIsImageLoading(false);
				setHasError(false);
			},
			onError: () => {
				setIsImageLoading(false);
				setHasError(true);
			}
		}), isImageLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "openui-image-block-loader" })]
	});
});
ImageBlock.displayName = "ImageBlock";
//#endregion
exports.ImageBlock = ImageBlock;

//# sourceMappingURL=index.cjs.map