@jfrader/ui 0.7.0 → 0.7.3

package/dist/in-view-title-BUZCMqge.js

@@ -1,225 +0,0 @@
-'use client';
-import { a as e, i as t } from "./css-BYJhdGh-.js";
-import { n, r } from "./media-8yrN85VT.js";
-import { t as i } from "./sx-BJXJ2xJK.js";
-import { t as a } from "./visually-hidden-DgVO3NaB.js";
-import { useCallback as o, useEffect as s, useMemo as c, useState as l } from "react";
-import { vars as u } from "@jfrader/tokens/vars";
-import { jsx as d, jsxs as f } from "@emotion/react/jsx-runtime";
-//#region src/components/in-view-title/in-view-title.tsx
-var p = {
-	1: "h1",
-	2: "h2",
-	3: "h3",
-	4: "h4",
-	5: "h5",
-	6: "h6"
-}, m = .45, h = "0.15em", g = e({
-	from: { transform: "translateY(0.6em)" },
-	to: { transform: "none" }
-}), _ = e({
-	from: { opacity: 0 },
-	to: { opacity: 1 }
-}), v = e({
-	from: { filter: "blur(0.12em)" },
-	to: { filter: "none" }
-}), y = e({
-	from: { letterSpacing: "-0.04em" },
-	to: { letterSpacing: "inherit" }
-}), b = e({
-	from: {
-		maskImage: `linear-gradient(to right, ${u.color.text} 50%, transparent 50%)`,
-		maskSize: "200% 100%",
-		maskPosition: "100% 0"
-	},
-	to: {
-		maskImage: `linear-gradient(to right, ${u.color.text} 50%, transparent 50%)`,
-		maskSize: "200% 100%",
-		maskPosition: "0% 0"
-	}
-}), x = e({
-	from: {
-		maskImage: `linear-gradient(to left, ${u.color.text} 50%, transparent 50%)`,
-		maskSize: "200% 100%",
-		maskPosition: "0% 0"
-	},
-	to: {
-		maskImage: `linear-gradient(to left, ${u.color.text} 50%, transparent 50%)`,
-		maskSize: "200% 100%",
-		maskPosition: "100% 0"
-	}
-}), S = (e, t) => `${e} ${t} ${u.motion.easeStandard} var(--in-view-delay, 0ms) backwards`, C = {
-	word: t({ animation: `${S(g, u.motion.duration.slow)}, ${S(_, u.motion.duration.fast)}` }),
-	line: t({ animation: `${S(g, u.motion.duration.slow)}, ${S(_, u.motion.duration.fast)}` }),
-	blur: t({ animation: `${S(g, u.motion.duration.base)}, ${S(v, u.motion.duration.base)}, ${S(_, u.motion.duration.fast)}` }),
-	tracking: t({ animation: `${S(y, u.motion.duration.base)}, ${S(_, u.motion.duration.fast)}` }),
-	wipe: t({
-		animation: S(b, u.motion.duration.slow),
-		"&:dir(rtl)": { animation: S(x, u.motion.duration.slow) }
-	})
-}, w = t({
-	position: "relative",
-	margin: 0,
-	minInlineSize: 0,
-	maxInlineSize: "100%",
-	color: u.color.text,
-	font: "inherit",
-	"& [data-in-view-plain]": { display: "none" },
-	"&:not([data-state=\"revealing\"]) [data-in-view-segment]": { animation: "none" },
-	[r]: {
-		"& [data-in-view-parts]": { display: "none" },
-		"& [data-in-view-plain]": {
-			display: "inline",
-			whiteSpace: "pre-wrap"
-		},
-		"& [data-in-view-segment]": {
-			animation: "none",
-			transform: "none",
-			filter: "none",
-			maskImage: "none",
-			opacity: 1
-		}
-	},
-	[n]: {
-		color: "CanvasText",
-		"& [data-in-view-parts]": { display: "none" },
-		"& [data-in-view-plain]": {
-			display: "inline",
-			whiteSpace: "pre-wrap"
-		},
-		"& [data-in-view-segment]": {
-			animation: "none",
-			transform: "none",
-			filter: "none",
-			maskImage: "none",
-			opacity: 1
-		}
-	}
-}), T = t({
-	whiteSpace: "pre-wrap",
-	overflowWrap: "anywhere"
-}), E = t({
-	display: "block",
-	minInlineSize: 0,
-	maxInlineSize: "100%"
-}), D = {
-	word: !0,
-	line: !0,
-	blur: !0,
-	tracking: !1,
-	wipe: !1
-}, O = t({
-	display: "inline-block",
-	verticalAlign: "bottom",
-	maxInlineSize: "100%",
-	overflowX: "visible",
-	overflowY: "clip",
-	paddingBlock: h,
-	marginBlock: `-${h}`
-}), k = t({
-	display: "inline-block",
-	maxInlineSize: "100%",
-	verticalAlign: "bottom"
-});
-function A({ text: e, level: t = 2, variant: n = "blur", once: r = !0, locale: h, slotProps: g, ref: v, className: y, sx: b, ...x }) {
-	let [S, A] = l(null), j = o((e) => {
-		A(e);
-		let t = typeof v == "function" ? v(e) : void 0;
-		return v && typeof v != "function" && (v.current = e), () => {
-			A(null), typeof t == "function" ? t() : typeof v == "function" ? v(null) : v && (v.current = null);
-		};
-	}, [v]);
-	s(() => {
-		if (!S) return;
-		let t = S.ownerDocument.defaultView;
-		if (S.dataset.state = "settled", !t) return;
-		let n = !0, i = !1, a, o = !1, s = S.getBoundingClientRect().top > t.innerHeight, c = !s, l, u, d = () => {
-			n && (S.dataset.state = "settled");
-		}, f = () => {
-			d(), a?.disconnect(), s = !1, i = !0;
-		}, p = (e) => {
-			let n = e.target;
-			n instanceof t.HTMLElement && n.hasAttribute("data-in-view-last") && S.dataset.state === "revealing" && e.animationName !== _.name && (d(), r && a?.disconnect());
-		}, h = () => {
-			(l?.matches || u?.matches) && f();
-		}, g = () => {
-			S.id && t.location.hash.slice(1) === S.id && f();
-		}, v = () => {
-			let e = S.ownerDocument.getSelection();
-			e?.anchorNode && S.contains(e.anchorNode) && f();
-		};
-		try {
-			if (l = t.matchMedia("(prefers-reduced-motion: reduce)"), u = t.matchMedia("(forced-colors: active)"), !e.trim() || !t.IntersectionObserver || !t.CSS?.supports("animation-name", "none") || l.matches || u.matches || (g(), i || !s && r)) return;
-			a = new t.IntersectionObserver((e) => {
-				if (n && !i) for (let t of e) t.target === S && (!t.isIntersecting || t.intersectionRatio === 0 ? (c && (d(), r ? o && a?.disconnect() : s = !0), o = !1) : (c = !0, t.intersectionRatio >= m && !o && (o = !0, s &&= (S.dataset.state = "revealing", !1))));
-			}, { threshold: [0, m] }), s && (S.dataset.state = "idle"), a.observe(S), S.addEventListener("animationend", p), S.addEventListener("focusin", f), S.ownerDocument.addEventListener("selectionchange", v), t.addEventListener("hashchange", g), l.addEventListener("change", h), u.addEventListener("change", h);
-		} catch {
-			f();
-		}
-		return () => {
-			n = !1, a?.disconnect(), S.removeEventListener("animationend", p), S.removeEventListener("focusin", f), S.ownerDocument.removeEventListener("selectionchange", v), t.removeEventListener("hashchange", g), l?.removeEventListener("change", h), u?.removeEventListener("change", h);
-		};
-	}, [
-		S,
-		e,
-		n,
-		r,
-		h
-	]);
-	let M = p[t], N = n === "tracking" || n === "wipe", P = c(() => typeof Intl.Segmenter == "function" ? new Intl.Segmenter(h, { granularity: "word" }) : void 0, [h]), F = (N ? [e] : e.split("\n")).map((e) => n === "line" || N || !P ? [e] : Array.from(P.segment(e), ({ segment: e }) => e)), I = F.flat().filter((e) => e.trim()).length;
-	return /* @__PURE__ */ d(i, {
-		className: y,
-		styles: w,
-		sx: b,
-		children: (t) => {
-			let r = 0;
-			return /* @__PURE__ */ f(M, {
-				...x,
-				ref: j,
-				"data-ui": "in-view-title",
-				"data-state": "settled",
-				className: t,
-				children: [/* @__PURE__ */ d("span", {
-					css: a,
-					children: e.replace(/\s+/gu, " ").trim()
-				}), /* @__PURE__ */ f("span", {
-					"data-ui": "in-view-title-visual",
-					"aria-hidden": "true",
-					className: g?.visual?.className,
-					css: [T, g?.visual?.css],
-					children: [/* @__PURE__ */ d("span", {
-						"data-in-view-plain": "",
-						children: e
-					}), /* @__PURE__ */ d("span", {
-						"data-in-view-parts": "",
-						children: F.map((e, t) => /* @__PURE__ */ d("span", {
-							css: !N && E,
-							children: e.map((e, t) => {
-								if (!e.trim()) return /* @__PURE__ */ d("span", { children: e || "​" }, t);
-								let i = r++;
-								return /* @__PURE__ */ d("span", {
-									css: D[n] && O,
-									children: /* @__PURE__ */ d("span", {
-										"data-in-view-segment": "",
-										"data-in-view-last": i === I - 1 ? "" : void 0,
-										className: g?.segment?.className,
-										style: { "--in-view-delay": `calc(${u.motion.duration.slow} * ${I > 1 ? i / (I - 1) : 0})` },
-										css: [
-											k,
-											C[n],
-											g?.segment?.css
-										],
-										children: e
-									})
-								}, t);
-							})
-						}, t))
-					})]
-				})]
-			});
-		}
-	});
-}
-A.displayName = "InViewTitle";
-//#endregion
-export { A as t };

package/dist/in-view-title.js

@@ -1,2 +0,0 @@
-'use client';
-export { t as InViewTitle } from "./in-view-title-BUZCMqge.js";