@tamagui/toast 2.7.7 → 3.0.0-beta.643.1

package/dist/cjs/useToastAnimations.cjs

@@ -1,3 +1,4 @@
+
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -5,288 +6,215 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
 };
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-// If the importer is in node compatibility mode or this is not an ESM
-// file that has been converted to a CommonJS file using a Babel-
-// compatible transform (i.e. "__esModule" has not been set), then set
-// "default" to the CommonJS "module.exports" for node compatibility.
-isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-  value: mod,
-  enumerable: true
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
 }) : target, mod));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var useToastAnimations_exports = {};
-__export(useToastAnimations_exports, {
-  useToastAnimations: () => useToastAnimations
-});
+__export(useToastAnimations_exports, { useToastAnimations: () => useToastAnimations });
 module.exports = __toCommonJS(useToastAnimations_exports);
 var import_constants = require("@tamagui/constants");
 var import_core = require("@tamagui/core");
 var React = __toESM(require("react"), 1);
 const SPRING_CONFIG = {
-  type: "spring",
-  damping: 30,
-  stiffness: 400,
-  mass: 0.5
+	type: "spring",
+	damping: 30,
+	stiffness: 400,
+	mass: .5
 };
 const EXIT_DISTANCE = 200;
 function animateSpring(element, fromX, fromY, toX, toY, config, onComplete) {
-  const {
-    damping = 30,
-    stiffness = 400,
-    mass = 0.5,
-    initialVelocityX = 0,
-    initialVelocityY = 0,
-    fadeOut = false
-  } = config;
-  let x = fromX;
-  let y = fromY;
-  let velocityX = initialVelocityX;
-  let velocityY = initialVelocityY;
-  let animationId = null;
-  const targetX = toX;
-  const targetY = toY;
-  const totalDistance = Math.sqrt((toX - fromX) ** 2 + (toY - fromY) ** 2) || 1;
-  function step() {
-    const forceX = -stiffness * (x - targetX);
-    const forceY = -stiffness * (y - targetY);
-    const dampingForceX = -damping * velocityX;
-    const dampingForceY = -damping * velocityY;
-    const accelerationX = (forceX + dampingForceX) / mass;
-    const accelerationY = (forceY + dampingForceY) / mass;
-    velocityX += accelerationX * 0.016;
-    velocityY += accelerationY * 0.016;
-    x += velocityX * 0.016;
-    y += velocityY * 0.016;
-    element.style.transform = `translate3d(${x}px, ${y}px, 0)`;
-    if (fadeOut) {
-      const distanceTraveled = Math.sqrt((x - fromX) ** 2 + (y - fromY) ** 2);
-      const progress = Math.min(distanceTraveled / totalDistance, 1);
-      element.style.opacity = String(1 - progress);
-    }
-    const distanceX = Math.abs(x - targetX);
-    const distanceY = Math.abs(y - targetY);
-    const speed = Math.sqrt(velocityX * velocityX + velocityY * velocityY);
-    if (distanceX < 0.5 && distanceY < 0.5 && speed < 0.5) {
-      element.style.transform = `translate3d(${targetX}px, ${targetY}px, 0)`;
-      if (fadeOut) {
-        element.style.opacity = "0";
-      }
-      onComplete?.();
-      return;
-    }
-    animationId = requestAnimationFrame(step);
-  }
-  animationId = requestAnimationFrame(step);
-  return () => {
-    if (animationId) {
-      cancelAnimationFrame(animationId);
-    }
-  };
+	const { damping = 30, stiffness = 400, mass = .5, initialVelocityX = 0, initialVelocityY = 0, fadeOut = false } = config;
+	let x = fromX;
+	let y = fromY;
+	let velocityX = initialVelocityX;
+	let velocityY = initialVelocityY;
+	let animationId = null;
+	const targetX = toX;
+	const targetY = toY;
+	const totalDistance = Math.sqrt((toX - fromX) ** 2 + (toY - fromY) ** 2) || 1;
+	function step() {
+		const forceX = -stiffness * (x - targetX);
+		const forceY = -stiffness * (y - targetY);
+		const dampingForceX = -damping * velocityX;
+		const dampingForceY = -damping * velocityY;
+		const accelerationX = (forceX + dampingForceX) / mass;
+		const accelerationY = (forceY + dampingForceY) / mass;
+		velocityX += accelerationX * .016;
+		velocityY += accelerationY * .016;
+		x += velocityX * .016;
+		y += velocityY * .016;
+		element.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+		if (fadeOut) {
+			const distanceTraveled = Math.sqrt((x - fromX) ** 2 + (y - fromY) ** 2);
+			const progress = Math.min(distanceTraveled / totalDistance, 1);
+			element.style.opacity = String(1 - progress);
+		}
+		const distanceX = Math.abs(x - targetX);
+		const distanceY = Math.abs(y - targetY);
+		const speed = Math.sqrt(velocityX * velocityX + velocityY * velocityY);
+		if (distanceX < .5 && distanceY < .5 && speed < .5) {
+			element.style.transform = `translate3d(${targetX}px, ${targetY}px, 0)`;
+			if (fadeOut) {
+				element.style.opacity = "0";
+			}
+			onComplete?.();
+			return;
+		}
+		animationId = requestAnimationFrame(step);
+	}
+	animationId = requestAnimationFrame(step);
+	return () => {
+		if (animationId) {
+			cancelAnimationFrame(animationId);
+		}
+	};
 }
 function useToastAnimations(options = {}) {
-  const {
-    onExitComplete,
-    reducedMotion,
-    swipeAxis = "horizontal"
-  } = options;
-  const {
-    animationDriver
-  } = (0, import_core.useConfiguration)();
-  if (!animationDriver) {
-    throw new Error("Toast requires an animation driver to be set in TamaguiProvider");
-  }
-  const {
-    useAnimatedNumber,
-    useAnimatedNumberStyle,
-    useAnimatedNumbersStyle
-  } = animationDriver;
-  const AnimatedView = animationDriver.View ?? import_core.View;
-  const dragRef = React.useRef(null);
-  const cancelAnimationRef = React.useRef(null);
-  const currentOffsetRef = React.useRef({
-    x: 0,
-    y: 0
-  });
-  const useDirectDom = import_constants.isWeb;
-  const translateX = useAnimatedNumber(0);
-  const translateY = useAnimatedNumber(0);
-  const animatedStyle = useAnimatedNumbersStyle ? useAnimatedNumbersStyle([translateX, translateY], (x, y) => {
-    "worklet";
-
-    return {
-      transform: [{
-        translateX: x
-      }, {
-        translateY: y
-      }]
-    };
-  }) : useAnimatedNumberStyle(swipeAxis === "vertical" ? translateY : translateX, primary => {
-    "worklet";
-
-    const secondary = swipeAxis === "vertical" ? translateX.getValue() : translateY.getValue();
-    return swipeAxis === "vertical" ? {
-      transform: [{
-        translateX: secondary
-      }, {
-        translateY: primary
-      }]
-    } : {
-      transform: [{
-        translateX: primary
-      }, {
-        translateY: secondary
-      }]
-    };
-  });
-  const setDragOffset = (0, import_core.useEvent)((x, y) => {
-    cancelAnimationRef.current?.();
-    cancelAnimationRef.current = null;
-    currentOffsetRef.current = {
-      x,
-      y
-    };
-    if (useDirectDom && dragRef.current) {
-      dragRef.current.style.transform = `translate3d(${x}px, ${y}px, 0)`;
-      dragRef.current.style.opacity = "1";
-    } else {
-      translateX.setValue(x, {
-        type: "direct"
-      });
-      translateY.setValue(y, {
-        type: "direct"
-      });
-    }
-  });
-  const springBack = (0, import_core.useEvent)(onComplete => {
-    cancelAnimationRef.current?.();
-    if (reducedMotion) {
-      if (useDirectDom && dragRef.current) {
-        dragRef.current.style.transform = "translate3d(0px, 0px, 0)";
-      } else {
-        translateX.setValue(0, {
-          type: "direct"
-        });
-        translateY.setValue(0, {
-          type: "direct"
-        });
-      }
-      currentOffsetRef.current = {
-        x: 0,
-        y: 0
-      };
-      onComplete?.();
-      return;
-    }
-    if (useDirectDom && dragRef.current) {
-      const {
-        x,
-        y
-      } = currentOffsetRef.current;
-      cancelAnimationRef.current = animateSpring(dragRef.current, x, y, 0, 0, SPRING_CONFIG, () => {
-        currentOffsetRef.current = {
-          x: 0,
-          y: 0
-        };
-        onComplete?.();
-      });
-    } else {
-      translateX.setValue(0, SPRING_CONFIG);
-      translateY.setValue(0, SPRING_CONFIG, onComplete);
-    }
-  });
-  const animateOut = (0, import_core.useEvent)((direction, velocity, onComplete) => {
-    cancelAnimationRef.current?.();
-    const {
-      x: curX,
-      y: curY
-    } = currentOffsetRef.current;
-    let exitX = direction === "left" ? -EXIT_DISTANCE : direction === "right" ? EXIT_DISTANCE : 0;
-    let exitY = direction === "up" ? -EXIT_DISTANCE : direction === "down" ? EXIT_DISTANCE : 0;
-    if (direction === "left" && curX < exitX) exitX = curX - 50;else if (direction === "right" && curX > exitX) exitX = curX + 50;
-    if (direction === "up" && curY < exitY) exitY = curY - 50;else if (direction === "down" && curY > exitY) exitY = curY + 50;
-    if (reducedMotion) {
-      if (useDirectDom && dragRef.current) {
-        dragRef.current.style.transform = `translate3d(${exitX}px, ${exitY}px, 0)`;
-      } else {
-        translateX.setValue(exitX, {
-          type: "direct"
-        });
-        translateY.setValue(exitY, {
-          type: "direct"
-        });
-      }
-      onComplete?.();
-      onExitComplete?.();
-      return;
-    }
-    const velocityScale = (velocity ?? 0) * 500;
-    const initialVelocityX = direction === "left" ? -velocityScale : direction === "right" ? velocityScale : 0;
-    const initialVelocityY = direction === "up" ? -velocityScale : direction === "down" ? velocityScale : 0;
-    const exitConfig = {
-      damping: 25,
-      stiffness: 350,
-      mass: 0.4,
-      initialVelocityX,
-      initialVelocityY,
-      fadeOut: true
-    };
-    if (useDirectDom && dragRef.current) {
-      const {
-        x,
-        y
-      } = currentOffsetRef.current;
-      cancelAnimationRef.current = animateSpring(dragRef.current, x, y, exitX, exitY, exitConfig, () => {
-        onComplete?.();
-        onExitComplete?.();
-      });
-    } else {
-      const springConfig = {
-        type: "spring",
-        damping: 25,
-        stiffness: 350,
-        mass: 0.4
-      };
-      translateX.setValue(exitX, springConfig);
-      translateY.setValue(exitY, springConfig, () => {
-        onComplete?.();
-        onExitComplete?.();
-      });
-    }
-  });
-  const stop = (0, import_core.useEvent)(() => {
-    cancelAnimationRef.current?.();
-    translateX.stop();
-    translateY.stop();
-  });
-  React.useEffect(() => {
-    return () => {
-      cancelAnimationRef.current?.();
-    };
-  }, []);
-  return {
-    setDragOffset,
-    springBack,
-    animateOut,
-    stop,
-    animatedStyle,
-    AnimatedView,
-    dragRef
-  };
-}
+	const { onExitComplete, reducedMotion } = options;
+	const animationDriver = (0, import_core.useAnimationDriver)();
+	const AnimatedView = animationDriver.View ?? import_core.View;
+	const dragRef = React.useRef(null);
+	const cancelAnimationRef = React.useRef(null);
+	const currentOffsetRef = React.useRef({
+		x: 0,
+		y: 0
+	});
+	const useDirectDom = import_constants.isWeb;
+	const translateX = (0, import_core.useAnimatedNumber)(0);
+	const translateY = (0, import_core.useAnimatedNumber)(0);
+	const animatedStyle = (0, import_core.useAnimatedNumbersStyle)([translateX, translateY], (x, y) => {
+		"worklet";
+		return { transform: [{ translateX: x }, { translateY: y }] };
+	});
+	const setDragOffset = (0, import_core.useEvent)((x, y) => {
+		cancelAnimationRef.current?.();
+		cancelAnimationRef.current = null;
+		currentOffsetRef.current = {
+			x,
+			y
+		};
+		if (useDirectDom && dragRef.current) {
+			dragRef.current.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+			dragRef.current.style.opacity = "1";
+		} else {
+			translateX.setValue(x, { type: "direct" });
+			translateY.setValue(y, { type: "direct" });
+		}
+	});
+	const springBack = (0, import_core.useEvent)((onComplete) => {
+		cancelAnimationRef.current?.();
+		if (reducedMotion) {
+			if (useDirectDom && dragRef.current) {
+				dragRef.current.style.transform = "translate3d(0px, 0px, 0)";
+			} else {
+				translateX.setValue(0, { type: "direct" });
+				translateY.setValue(0, { type: "direct" });
+			}
+			currentOffsetRef.current = {
+				x: 0,
+				y: 0
+			};
+			onComplete?.();
+			return;
+		}
+		if (useDirectDom && dragRef.current) {
+			const { x, y } = currentOffsetRef.current;
+			cancelAnimationRef.current = animateSpring(dragRef.current, x, y, 0, 0, SPRING_CONFIG, () => {
+				currentOffsetRef.current = {
+					x: 0,
+					y: 0
+				};
+				onComplete?.();
+			});
+		} else {
+			translateX.setValue(0, SPRING_CONFIG);
+			translateY.setValue(0, SPRING_CONFIG, onComplete);
+		}
+	});
+	const animateOut = (0, import_core.useEvent)((direction, velocity, onComplete) => {
+		cancelAnimationRef.current?.();
+		const { x: curX, y: curY } = currentOffsetRef.current;
+		let exitX = direction === "left" ? -EXIT_DISTANCE : direction === "right" ? EXIT_DISTANCE : 0;
+		let exitY = direction === "up" ? -EXIT_DISTANCE : direction === "down" ? EXIT_DISTANCE : 0;
+		if (direction === "left" && curX < exitX) exitX = curX - 50;
+		else if (direction === "right" && curX > exitX) exitX = curX + 50;
+		if (direction === "up" && curY < exitY) exitY = curY - 50;
+		else if (direction === "down" && curY > exitY) exitY = curY + 50;
+		if (reducedMotion) {
+			if (useDirectDom && dragRef.current) {
+				dragRef.current.style.transform = `translate3d(${exitX}px, ${exitY}px, 0)`;
+			} else {
+				translateX.setValue(exitX, { type: "direct" });
+				translateY.setValue(exitY, { type: "direct" });
+			}
+			onComplete?.();
+			onExitComplete?.();
+			return;
+		}
+		const velocityScale = (velocity ?? 0) * 500;
+		const initialVelocityX = direction === "left" ? -velocityScale : direction === "right" ? velocityScale : 0;
+		const initialVelocityY = direction === "up" ? -velocityScale : direction === "down" ? velocityScale : 0;
+		const exitConfig = {
+			damping: 25,
+			stiffness: 350,
+			mass: .4,
+			initialVelocityX,
+			initialVelocityY,
+			fadeOut: true
+		};
+		if (useDirectDom && dragRef.current) {
+			const { x, y } = currentOffsetRef.current;
+			cancelAnimationRef.current = animateSpring(dragRef.current, x, y, exitX, exitY, exitConfig, () => {
+				onComplete?.();
+				onExitComplete?.();
+			});
+		} else {
+			const springConfig = {
+				type: "spring",
+				damping: 25,
+				stiffness: 350,
+				mass: .4
+			};
+			translateX.setValue(exitX, springConfig);
+			translateY.setValue(exitY, springConfig, () => {
+				onComplete?.();
+				onExitComplete?.();
+			});
+		}
+	});
+	const stop = (0, import_core.useEvent)(() => {
+		cancelAnimationRef.current?.();
+		translateX.stop();
+		translateY.stop();
+	});
+	React.useEffect(() => {
+		return () => {
+			cancelAnimationRef.current?.();
+		};
+	}, []);
+	return {
+		setDragOffset,
+		springBack,
+		animateOut,
+		stop,
+		animatedStyle,
+		AnimatedView,
+		dragRef
+	};
+}