@primer/react-brand/esm/animation/TextRevealAnimation/TextRevealAnimation.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 { useTextRevealAnimationLines as t } from "./useTextRevealAnimationLines.js";
import n from "./TextRevealAnimation.module.js";
import { useProvidedRefOrCreate as r } from "../../hooks/useRef.js";
import i, { useEffect as a } from "react";
import { jsx as o, jsxs as s } from "react/jsx-runtime";
//#region src/animation/TextRevealAnimation/TextRevealAnimation.tsx
var c = i.forwardRef(function({ children: c, ...l }, u) {
	let d = r(u), { lines: f } = t(c || "", d), [p, m] = i.useState(!1), [h, g] = i.useState(!1), _ = (e) => {
		f && e === f.length - 1 && g(!0);
	};
	return a(() => {
		let e = d.current, t = new IntersectionObserver((n) => {
			for (let r of n) r.isIntersecting && (m(!0), e && t.unobserve(e));
		}, {
			threshold: 1,
			rootMargin: "0px 0px -10% 0px"
		});
		return e && t.observe(e), () => {
			e && t.unobserve(e);
		};
	}, [d]), typeof c != "string" && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") ? (console.warn("Children passed to TextRevealAnimation must be a string"), null) : /* @__PURE__ */ o("span", {
		ref: d,
		...l,
		children: f?.map((t, r) => /* @__PURE__ */ s(i.Fragment, { children: [/* @__PURE__ */ o("span", {
			className: e(n.TextRevealAnimation, p && n["TextRevealAnimation--visible"], p && (h ? n.TextRevealAnimation : n["TextRevealAnimation--animated"])),
			style: { "--animation-delay": `${220 + r * 200}ms` },
			onAnimationEnd: () => _(r),
			children: t
		}), " "] }, t))
	});
});
//#endregion
export { c as TextRevealAnimation };

//# sourceMappingURL=TextRevealAnimation.js.map