import { useCallback as e, useEffect as t, useRef as n, useState as r, useSyncExternalStore as i } from "react";
import { jsx as a } from "react/jsx-runtime";
//#region src/react/primitives/ripple.tsx
var o = "(prefers-reduced-motion: reduce)";
function s() {
	return typeof window > "u" ? !1 : window.matchMedia(o).matches;
}
function c() {
	return !1;
}
function l(e) {
	let t = window.matchMedia(o);
	return t.addEventListener("change", e), () => t.removeEventListener("change", e);
}
function u() {
	return i(l, s, c);
}
function d(i = 600) {
	let [a, o] = r([]), s = u(), c = n(0), l = e((e) => {
		if (s) return;
		let t = e.currentTarget.getBoundingClientRect(), n = e.clientX - t.left, r = e.clientY - t.top, i = Math.max(t.width, t.height) * 2, a = {
			id: c.current++,
			x: n,
			y: r,
			size: i
		};
		o((e) => [...e, a]);
	}, [s]), d = e((e) => {
		o((t) => t.filter((t) => t.id !== e));
	}, []);
	return t(() => {
		if (a.length === 0) return;
		let e = setTimeout(() => {
			o((e) => e.slice(1));
		}, i + 100);
		return () => clearTimeout(e);
	}, [a.length, i]), {
		ripples: a,
		onPointerDown: l,
		onAnimationEnd: d
	};
}
function f({ ripples: e, onAnimationEnd: t, color: n = "rgba(255, 255, 255, 0.3)", duration: r = 600 }) {
	return /* @__PURE__ */ a("span", {
		className: "pointer-events-none absolute inset-0 overflow-hidden",
		children: e.map((e) => /* @__PURE__ */ a("span", {
			className: "animate-ripple absolute rounded-full",
			style: {
				left: e.x - e.size / 2,
				top: e.y - e.size / 2,
				width: e.size,
				height: e.size,
				backgroundColor: n,
				animationDuration: `${r}ms`
			},
			onAnimationEnd: () => t(e.id)
		}, e.id))
	});
}
//#endregion
export { f as RippleContainer, d as useRipple };

//# sourceMappingURL=ripple.js.map