@primer/react-brand/esm/animation/AnimationProvider/AnimationProvider.js

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

import { useId as e } from "../../hooks/useId.js";
import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/animation/base-BIr7u5g8.css';/* empty css                                                                                  */
import t from "../Animation.module.js";
import { createContext as n, useEffect as r, useState as i } from "react";
import { jsx as a } from "react/jsx-runtime";
//#region src/animation/AnimationProvider/AnimationProvider.tsx
var o = [
	"fade-in",
	"fade-out",
	"slide-in-up",
	"slide-in-down",
	"slide-in-left",
	"slide-in-right",
	"scale-in-up",
	"scale-in-down",
	"scale-in",
	"fill-in-top",
	"scale-in-right",
	"scale-in-left",
	"fill-in-right",
	"reveal-in-up"
], s = n({});
function c(e) {
	let { visibilityOptions: t } = e;
	switch (t) {
		case "bottom-of-screen": return {
			rootMargin: "0px 0px -10% 0px",
			threshold: .4
		};
		case "middle-of-screen": return {
			rootMargin: "0px 0px -30% 0px",
			threshold: .4
		};
		case "about-to-leave": return {
			rootMargin: "0px 0px -100% 0px",
			threshold: .4
		};
		default: return typeof t == "number" ? {
			rootMargin: "0px",
			threshold: t / 100
		} : {
			rootMargin: "0px",
			threshold: .4
		};
	}
}
function l({ children: n, disableAnimations: o = !1, animationTrigger: l = "on-visible", visibilityOptions: u = "bottom-of-screen", runOnce: d = !1, autoStaggerChildren: f = !0, staggerDelayIncrement: p = 100 }) {
	let m = e(), [h, g] = i({
		disableAnimations: o,
		animationTrigger: l,
		visibilityOptions: u,
		runOnce: d
	});
	return r(() => {
		window.matchMedia("(prefers-reduced-motion: reduce)").matches && g({
			disableAnimations: !0,
			animationTrigger: l,
			visibilityOptions: u
		});
	}, []), r(() => {
		if (!o && f && m) {
			let e = p, n = document.getElementById(m);
			if (!n) return;
			let r = Array.from(n.querySelectorAll(`.${t.Animation}`));
			if (r.length === 0) return;
			for (let t = 0; t < r.length; t++) r[t].style.transitionDelay = `${t * e}ms`;
		}
	}, [
		o,
		f,
		p,
		m
	]), r(() => {
		if (!o && l === "immediate" && m) {
			let e = document.getElementById(m);
			if (!e) return;
			requestAnimationFrame(() => {
				let n = Array.from(e.querySelectorAll(`.${t.Animation}`));
				for (let e of n) e.classList.add(t["Animation--active"]);
			});
		}
	}, [
		o,
		l,
		m
	]), r(() => {
		if (!o && l === "on-visible") {
			let e = new IntersectionObserver((e) => {
				for (let n of e) n.isIntersecting && n.target.classList.contains(t.Animation) ? n.target.classList.add(t["Animation--active"]) : d || n.target.classList.remove(t["Animation--active"]);
			}, c({
				disableAnimations: o,
				animationTrigger: l,
				visibilityOptions: u
			})), n = Array.from(document.querySelectorAll(`.${t.Animation}`));
			for (let t of n) e.observe(t);
			return () => {
				e.disconnect();
			};
		}
		if (!o && l === "click") {
			let e = (e) => {
				let n = e.target;
				n.classList.contains(t.Animation) && n.classList.add(t["Animation--active"]);
			};
			return document.addEventListener("click", e), () => {
				document.removeEventListener("click", e);
			};
		}
	}, [
		o,
		l,
		u,
		d
	]), /* @__PURE__ */ a(s.Provider, {
		value: h,
		children: /* @__PURE__ */ a("div", {
			id: m,
			children: n
		})
	});
}
//#endregion
export { s as AnimationContext, l as AnimationProvider, o as AnimationVariants };

//# sourceMappingURL=AnimationProvider.js.map