phase 0.0.12 → 0.2.0

package/dist/react.js

@@ -1,6 +1,6 @@
 "use client";
 import { clamp01, easeOutCubic } from "./ease.js";
-import { C as missingContextError, _ as subscribeMediaQuery, a as createPointer, c as prefersReducedMotion, d as subscribeDpr, f as createRenderState, g as readMediaQuery, h as createLifecycle, i as observeResize, l as whenIdle, m as createLoop, n as createThrottle, o as createMutation, p as createScrollProgress, r as createScroll, s as REDUCED_MOTION_QUERY, t as createDebounce, u as readDpr, v as createSight, x as invalidDurationError } from "./debounce-C0SgiTfm.js";
+import { S as invalidDurationError, _ as subscribeMediaQuery, a as createPointer, c as prefersReducedMotion, d as subscribeDpr, f as createRenderState, g as readMediaQuery, h as createLifecycle, i as observeResize, l as whenIdle, m as createLoop, n as createThrottle, o as createMutation, p as createScrollProgress, r as createScroll, s as REDUCED_MOTION_QUERY, t as createDebounce, u as readDpr, v as createSight, w as missingContextError, x as conflictingTargetError } from "./debounce-V_5xqZSY.js";
 import { createContext, createElement, use, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/react/use-synced-ref/index.ts
@@ -84,7 +84,7 @@ function useLoop(options) {
 			return;
 		}
 		const loop = createLoop({
-			element,
+			target: element,
 			onTick: (frame) => onTickRef.current(frame),
 			fps,
 			reducedMotion,
@@ -157,7 +157,7 @@ function useLifecycle(options) {
 			return;
 		}
 		const lifecycle = createLifecycle({
-			element,
+			target: element,
 			reducedMotion,
 			intersectionOptions,
 			onPhaseChange: (phase, phaseReason) => {
@@ -252,7 +252,7 @@ function useSight(options) {
 		if (!element) return;
 		let frozen = false;
 		const sight = createSight({
-			element,
+			target: element,
 			intersectionOptions: {
 				root: options?.root,
 				rootMargin: options?.rootMargin,
@@ -384,7 +384,7 @@ function useScrollProgress(options) {
 		const element = ref.current;
 		if (!element) return;
 		const scrollProgress = createScrollProgress({
-			element,
+			target: element,
 			onProgress: (ratio) => {
 				progressRef.current = ratio;
 				if (onProgressRef.current) onProgressRef.current(ratio);
@@ -428,7 +428,7 @@ function useRenderState(ref) {
 		const element = ref.current;
 		if (!element) return;
 		const render = createRenderState({
-			element,
+			target: element,
 			onPhaseChange: setPhase
 		});
 		return () => render.stop();
@@ -569,7 +569,7 @@ function useCanvas(options) {
 		canvas.addEventListener("contextrestored", onContextRestored);
 		let loopInstance = null;
 		const loop = createLoop({
-			element: container,
+			target: container,
 			fps,
 			reducedMotion,
 			...degradedConfig(degraded, degradedFps),
@@ -644,7 +644,7 @@ function useMutation(options) {
 			return;
 		}
 		const instance = createMutation({
-			element,
+			target: element,
 			mutation: mutationInit,
 			onMutations: (records) => onMutationsRef.current(records),
 			onPhaseChange: (phase, reason) => {
@@ -711,7 +711,7 @@ function usePointer(options) {
 			return;
 		}
 		const instance = createPointer({
-			element,
+			target: element,
 			onPointer: (pointerState) => {
 				stateRef.current = pointerState;
 				onPointerRef.current(pointerState);
@@ -767,7 +767,7 @@ function initialState() {
 */
 function useScroll(options) {
 	const [state, setState] = useState(INITIAL_STATE);
-	const { visibility = "pause", enabled = true, intersectionOptions } = options;
+	const { target, visibility = "pause", enabled = true, intersectionOptions } = options;
 	const phaseRef = useRef("paused");
 	const phaseReasonRef = useRef("initial");
 	const stateRef = useRef(initialState());
@@ -779,8 +779,9 @@ function useScroll(options) {
 		instanceRef.current?.measure();
 	}, []);
 	useEffect(() => {
-		const element = ref.current;
-		if (!element || !enabled) {
+		if (target && options.ref) conflictingTargetError("useScroll");
+		const anchor = target === "page" ? document : ref.current;
+		if (!anchor || !enabled) {
 			instanceRef.current = null;
 			setState(INITIAL_STATE);
 			phaseRef.current = "paused";
@@ -789,7 +790,7 @@ function useScroll(options) {
 			return;
 		}
 		const instance = createScroll({
-			element,
+			target: anchor,
 			onScroll: (scrollState) => {
 				stateRef.current = scrollState;
 				onScrollRef.current(scrollState);
@@ -810,7 +811,11 @@ function useScroll(options) {
 			instance.stop();
 			instanceRef.current = null;
 		};
-	}, [enabled, visibility]);
+	}, [
+		enabled,
+		visibility,
+		target
+	]);
 	return {
 		ref,
 		...state,
@@ -913,7 +918,7 @@ function useDebouncedCallback(callback, options) {
 //#endregion
 //#region src/react/use-tween/index.ts
 /**
-* Animate a value from its current position to `target` over `duration`.
+* Animate a value from its current position toward `to` over `duration`.
 *
 * Uses `useState` per frame. Appropriate for cheap renders (counters, opacity,
 * progress bars). For batch animations, use `useLoop` with ref-based DOM writes.
@@ -926,21 +931,21 @@ function useDebouncedCallback(callback, options) {
 * weight for no benefit.
 *
 * @example
-* const value = useTween({ target: 100, duration: 500 });
+* const value = useTween({ to: 100, duration: 500 });
 */
 function useTween(options) {
-	const { target, duration = 300, delay = 0, easing = easeOutCubic, enabled = true, reducedMotion = "complete" } = options;
-	const [value, setValue] = useState(target);
+	const { to, duration = 300, delay = 0, easing = easeOutCubic, enabled = true, reducedMotion = "complete" } = options;
+	const [value, setValue] = useState(to);
 	const easingRef = useSyncedRef(easing);
-	const fromRef = useRef(target);
-	const currentRef = useRef(target);
+	const fromRef = useRef(to);
+	const currentRef = useRef(to);
 	const isFirstRender = useRef(true);
 	useEffect(() => {
 		if (!Number.isFinite(duration) || duration <= 0) invalidDurationError("useTween", duration);
 		if (isFirstRender.current) {
 			isFirstRender.current = false;
 			jumpToTarget({
-				target,
+				to,
 				fromRef,
 				currentRef,
 				setValue
@@ -949,7 +954,7 @@ function useTween(options) {
 		}
 		if (!enabled || reducedMotion !== "ignore" && prefersReducedMotion()) {
 			jumpToTarget({
-				target,
+				to,
 				fromRef,
 				currentRef,
 				setValue
@@ -957,7 +962,7 @@ function useTween(options) {
 			return;
 		}
 		const from = currentRef.current;
-		if (from === target) return;
+		if (from === to) return;
 		let rafId;
 		let startTime = null;
 		function tick(now) {
@@ -968,11 +973,11 @@ function useTween(options) {
 				return;
 			}
 			const progress = clamp01(elapsed / duration);
-			const current = progress === 1 ? target : from + (target - from) * easingRef.current(progress);
+			const current = progress === 1 ? to : from + (to - from) * easingRef.current(progress);
 			currentRef.current = current;
 			setValue(current);
 			if (progress < 1) rafId = requestAnimationFrame(tick);
-			else fromRef.current = target;
+			else fromRef.current = to;
 		}
 		rafId = requestAnimationFrame(tick);
 		return () => {
@@ -980,7 +985,7 @@ function useTween(options) {
 			fromRef.current = currentRef.current;
 		};
 	}, [
-		target,
+		to,
 		duration,
 		delay,
 		enabled,
@@ -989,10 +994,10 @@ function useTween(options) {
 	return value;
 }
 function jumpToTarget(options) {
-	const { target, fromRef, currentRef, setValue } = options;
-	fromRef.current = target;
-	currentRef.current = target;
-	setValue(target);
+	const { to, fromRef, currentRef, setValue } = options;
+	fromRef.current = to;
+	currentRef.current = to;
+	setValue(to);
 }
 //#endregion
 //#region src/react/_internal/use-update-effect/index.ts