@primer/react-brand/esm/Card/CardSkewEffect.js

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import e from "../node_modules/clsx/dist/clsx.js";
import { useTheme as t } from "../ThemeProvider/useTheme.js";
import n from "./Card.module.js";
import { useEffect as r, useRef as i } from "react";
import { jsx as a, jsxs as o } from "react/jsx-runtime";
//#region src/Card/CardSkewEffect.tsx
var s = ({ color: s, children: c, className: l, perspective: u = 700, disableSkew: d = !1, ...f }) => {
	let { colorMode: p } = t(), m = i(null), h = i(null);
	return r(() => {
		if (p === "light" || d) return;
		let e = window.matchMedia("(prefers-reduced-motion: reduce)"), t = m.current, n = h.current;
		if (!t) return;
		let r = () => {
			e.matches ? t.removeEventListener("mousemove", i) : t.addEventListener("mousemove", i);
		}, i = (e) => {
			let r = t.getBoundingClientRect(), i = n ? r.width - (e.clientX - r.left) - n.offsetWidth / 2 : 0, a = n ? r.height - (e.clientY - r.top) - n.offsetHeight / 2 : 0, o = -((e.clientX - r.left - r.width / 2) / r.width) * 3, s = (e.clientY - r.top - r.height / 2) / r.height * 2;
			n && (n.style.transform = `translate(${-i}px, ${-a / 2}px)`), t.style.transform = `perspective(${u}px) rotateX(${Math.round(s * 100) / 100}deg) rotateY(${Math.round(o * 100) / 100}deg)`;
		};
		return e.addEventListener("change", r), t.addEventListener("mousemove", i), r(), () => {
			t.removeEventListener("mousemove", i), n?.removeEventListener("mousemove", i), e.removeEventListener("change", r);
		};
	}, [
		d,
		u,
		p
	]), /* @__PURE__ */ a("div", {
		ref: m,
		className: e(n["Card--skew"], l),
		...f,
		children: /* @__PURE__ */ o("div", {
			className: n["Card__skew-bounding"],
			children: [c, /* @__PURE__ */ a("div", {
				ref: h,
				className: e(!d && n.Card__torch, n[`Card--skew-colorMode-${p}`])
			})]
		})
	});
};
//#endregion
export { s as CardSkewEffect };

//# sourceMappingURL=CardSkewEffect.js.map