@tamagui/animations-css 2.7.7 → 3.0.0-beta.643.1

package/dist/cjs/animated-number.cjs

@@ -0,0 +1,195 @@
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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
+	});
+};
+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;
+};
+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 animated_number_exports = {};
+__export(animated_number_exports, {
+	useAnimatedNumber: () => useAnimatedNumber,
+	useAnimatedNumberReaction: () => useAnimatedNumberReaction,
+	useAnimatedNumberStyle: () => useAnimatedNumberStyle,
+	useAnimatedNumbersStyle: () => useAnimatedNumbersStyle
+});
+module.exports = __toCommonJS(animated_number_exports);
+var import_react = __toESM(require("react"), 1);
+var import_react_dom = require("react-dom");
+const hasRAF = typeof requestAnimationFrame !== "undefined";
+function notifyAnimatedNumber(instance, value) {
+	instance.current = value;
+	if (instance.listeners.size === 0) return;
+	(0, import_react_dom.unstable_batchedUpdates)(() => {
+		for (const listener of instance.listeners) listener(value);
+	});
+}
+function useAnimatedNumberStyles(values, getStyle) {
+	const token = import_react.default.useRef(null);
+	token.current ||= {};
+	const [, renderLinkedValue] = import_react.default.useReducer((value) => value + 1, 0);
+	const instances = values.map((value) => value.getInstance());
+	for (const instance of instances) {
+		if (!instance.styleHost) instance.styleHost = token.current;
+	}
+	import_react.default.useEffect(() => {
+		const listener = () => renderLinkedValue();
+		for (const instance of instances) {
+			if (instance.styleHost !== token.current) instance.listeners.add(listener);
+		}
+		return () => {
+			for (const instance of instances) {
+				instance.listeners.delete(listener);
+				if (instance.styleHost === token.current) instance.styleHost = null;
+			}
+		};
+	}, instances);
+	return getStyle(...instances.map((instance) => instance.styleHost === token.current ? instance.target : instance.current));
+}
+function useAnimatedNumber(initial) {
+	const [, renderTarget] = import_react.default.useReducer((value) => value + 1, 0);
+	const instanceRef = import_react.default.useRef(null);
+	if (!instanceRef.current) {
+		instanceRef.current = {
+			current: initial,
+			target: initial,
+			listeners: /* @__PURE__ */ new Set(),
+			styleHost: null,
+			raf: null,
+			finish: null,
+			renderTarget,
+			cancel() {
+				if (this.raf !== null) cancelAnimationFrame(this.raf);
+				this.raf = null;
+				this.finish = null;
+			}
+		};
+	}
+	const instance = instanceRef.current;
+	instance.renderTarget = renderTarget;
+	import_react.default.useEffect(() => () => instance.cancel(), [instance]);
+	return import_react.default.useMemo(() => ({
+		getInstance() {
+			return instance;
+		},
+		getValue() {
+			return instance.current;
+		},
+		setValue(next, config = { type: "spring" }, onFinish) {
+			instance.cancel();
+			const from = instance.current;
+			instance.target = next;
+			if (instance.styleHost) instance.renderTarget();
+			if (!hasRAF || config.type === "direct" || config.type === "timing" && config.duration === 0 || from === next) {
+				notifyAnimatedNumber(instance, next);
+				onFinish?.();
+				return;
+			}
+			if (instance.listeners.size === 0 && !onFinish) {
+				instance.current = next;
+				return;
+			}
+			instance.finish = onFinish ?? null;
+			const settle = () => {
+				instance.raf = null;
+				notifyAnimatedNumber(instance, next);
+				const finish = instance.finish;
+				instance.finish = null;
+				finish?.();
+			};
+			if (config.type === "timing") {
+				const startedAt2 = performance.now();
+				const tick2 = () => {
+					const progress = Math.min(1, (performance.now() - startedAt2) / config.duration);
+					if (progress === 1) {
+						settle();
+						return;
+					}
+					notifyAnimatedNumber(instance, from + (next - from) * progress);
+					instance.raf = requestAnimationFrame(tick2);
+				};
+				instance.raf = requestAnimationFrame(tick2);
+				return;
+			}
+			const { stiffness = 300, damping = 35, mass = 1, overshootClamping, restSpeedThreshold: restSpeed = .001, restDisplacementThreshold: restDisplacement = .001 } = config;
+			const displacement = from - next;
+			const decayRate = damping / (2 * mass);
+			const naturalFrequency = Math.sqrt(stiffness / mass);
+			const startedAt = performance.now();
+			const tick = () => {
+				const elapsed = (performance.now() - startedAt) / 1e3;
+				let value;
+				let velocity;
+				if (decayRate < naturalFrequency) {
+					const dampedFrequency = Math.sqrt(naturalFrequency ** 2 - decayRate ** 2);
+					const b = decayRate * displacement / dampedFrequency;
+					const decay = Math.exp(-decayRate * elapsed);
+					const cos = Math.cos(dampedFrequency * elapsed);
+					const sin = Math.sin(dampedFrequency * elapsed);
+					value = next + decay * (displacement * cos + b * sin);
+					velocity = decay * ((-decayRate * displacement + b * dampedFrequency) * cos + (-decayRate * b - displacement * dampedFrequency) * sin);
+				} else if (decayRate === naturalFrequency) {
+					const b = decayRate * displacement;
+					const decay = Math.exp(-decayRate * elapsed);
+					value = next + (displacement + b * elapsed) * decay;
+					velocity = (b - decayRate * (displacement + b * elapsed)) * decay;
+				} else {
+					const frequency = Math.sqrt(decayRate ** 2 - naturalFrequency ** 2);
+					const slowRoot = -decayRate + frequency;
+					const fastRoot = -decayRate - frequency;
+					const slowCoefficient = -fastRoot * displacement / (slowRoot - fastRoot);
+					const fastCoefficient = displacement - slowCoefficient;
+					value = next + slowCoefficient * Math.exp(slowRoot * elapsed) + fastCoefficient * Math.exp(fastRoot * elapsed);
+					velocity = slowCoefficient * slowRoot * Math.exp(slowRoot * elapsed) + fastCoefficient * fastRoot * Math.exp(fastRoot * elapsed);
+				}
+				if (overshootClamping && (from < next && value > next || from > next && value < next)) {
+					value = next;
+					velocity = 0;
+				}
+				if (Math.abs(velocity) <= restSpeed && Math.abs(next - value) <= restDisplacement) {
+					settle();
+					return;
+				}
+				notifyAnimatedNumber(instance, value);
+				instance.raf = requestAnimationFrame(tick);
+			};
+			instance.raf = requestAnimationFrame(tick);
+		},
+		stop() {
+			instance.cancel();
+		}
+	}), [instance]);
+}
+const useAnimatedNumberReaction = ({ value }, onValue) => {
+	const onValueRef = import_react.default.useRef(onValue);
+	onValueRef.current = onValue;
+	import_react.default.useEffect(() => {
+		const instance = value.getInstance();
+		const listener = (current) => onValueRef.current(current);
+		instance.listeners.add(listener);
+		return () => {
+			instance.listeners.delete(listener);
+		};
+	}, [value]);
+};
+const useAnimatedNumberStyle = (val, getStyle) => useAnimatedNumberStyles([val], getStyle);
+const useAnimatedNumbersStyle = (vals, getStyle) => useAnimatedNumberStyles(vals, getStyle);

package/dist/cjs/animated-number.native.cjs

@@ -0,0 +1,292 @@
+"use strict";
+
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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
+	});
+};
+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;
+};
+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 animated_number_exports = {};
+__export(animated_number_exports, {
+	useAnimatedNumber: () => useAnimatedNumber,
+	useAnimatedNumberReaction: () => useAnimatedNumberReaction,
+	useAnimatedNumberStyle: () => useAnimatedNumberStyle,
+	useAnimatedNumbersStyle: () => useAnimatedNumbersStyle
+});
+module.exports = __toCommonJS(animated_number_exports);
+var import_react = __toESM(require("react"), 1);
+var import_react_dom = require("react-dom");
+var hasRAF = typeof requestAnimationFrame !== "undefined";
+function notifyAnimatedNumber(instance, value) {
+	instance.current = value;
+	if (instance.listeners.size === 0) return;
+	(0, import_react_dom.unstable_batchedUpdates)(function() {
+		var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+		try {
+			for (var _iterator = instance.listeners[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+				var listener = _step.value;
+				listener(value);
+			}
+		} catch (err) {
+			_didIteratorError = true;
+			_iteratorError = err;
+		} finally {
+			try {
+				if (!_iteratorNormalCompletion && _iterator.return != null) {
+					_iterator.return();
+				}
+			} finally {
+				if (_didIteratorError) {
+					throw _iteratorError;
+				}
+			}
+		}
+	});
+}
+function useAnimatedNumberStyles(values, getStyle) {
+	var _token;
+	var token = import_react.default.useRef(null);
+	(_token = token).current || (_token.current = {});
+	var [, renderLinkedValue] = import_react.default.useReducer(function(value) {
+		return value + 1;
+	}, 0);
+	var instances = values.map(function(value) {
+		return value.getInstance();
+	});
+	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+	try {
+		for (var _iterator = instances[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+			var instance = _step.value;
+			if (!instance.styleHost) instance.styleHost = token.current;
+		}
+	} catch (err) {
+		_didIteratorError = true;
+		_iteratorError = err;
+	} finally {
+		try {
+			if (!_iteratorNormalCompletion && _iterator.return != null) {
+				_iterator.return();
+			}
+		} finally {
+			if (_didIteratorError) {
+				throw _iteratorError;
+			}
+		}
+	}
+	import_react.default.useEffect(function() {
+		var listener = function() {
+			return renderLinkedValue();
+		};
+		var _iteratorNormalCompletion2 = true, _didIteratorError2 = false, _iteratorError2 = void 0;
+		try {
+			for (var _iterator2 = instances[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+				var instance2 = _step2.value;
+				if (instance2.styleHost !== token.current) instance2.listeners.add(listener);
+			}
+		} catch (err) {
+			_didIteratorError2 = true;
+			_iteratorError2 = err;
+		} finally {
+			try {
+				if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+					_iterator2.return();
+				}
+			} finally {
+				if (_didIteratorError2) {
+					throw _iteratorError2;
+				}
+			}
+		}
+		return function() {
+			var _iteratorNormalCompletion3 = true, _didIteratorError3 = false, _iteratorError3 = void 0;
+			try {
+				for (var _iterator3 = instances[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
+					var instance3 = _step3.value;
+					instance3.listeners.delete(listener);
+					if (instance3.styleHost === token.current) instance3.styleHost = null;
+				}
+			} catch (err) {
+				_didIteratorError3 = true;
+				_iteratorError3 = err;
+			} finally {
+				try {
+					if (!_iteratorNormalCompletion3 && _iterator3.return != null) {
+						_iterator3.return();
+					}
+				} finally {
+					if (_didIteratorError3) {
+						throw _iteratorError3;
+					}
+				}
+			}
+		};
+	}, instances);
+	return getStyle(...instances.map(function(instance2) {
+		return instance2.styleHost === token.current ? instance2.target : instance2.current;
+	}));
+}
+function useAnimatedNumber(initial) {
+	var [, renderTarget] = import_react.default.useReducer(function(value) {
+		return value + 1;
+	}, 0);
+	var instanceRef = import_react.default.useRef(null);
+	if (!instanceRef.current) {
+		instanceRef.current = {
+			current: initial,
+			target: initial,
+			listeners: /* @__PURE__ */ new Set(),
+			styleHost: null,
+			raf: null,
+			finish: null,
+			renderTarget,
+			cancel() {
+				if (this.raf !== null) cancelAnimationFrame(this.raf);
+				this.raf = null;
+				this.finish = null;
+			}
+		};
+	}
+	var instance = instanceRef.current;
+	instance.renderTarget = renderTarget;
+	import_react.default.useEffect(function() {
+		return function() {
+			return instance.cancel();
+		};
+	}, [instance]);
+	return import_react.default.useMemo(function() {
+		return {
+			getInstance() {
+				return instance;
+			},
+			getValue() {
+				return instance.current;
+			},
+			setValue(next) {
+				var config = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : { type: "spring" }, onFinish = arguments.length > 2 ? arguments[2] : void 0;
+				instance.cancel();
+				var from = instance.current;
+				instance.target = next;
+				if (instance.styleHost) instance.renderTarget();
+				if (!hasRAF || config.type === "direct" || config.type === "timing" && config.duration === 0 || from === next) {
+					notifyAnimatedNumber(instance, next);
+					onFinish === null || onFinish === void 0 ? void 0 : onFinish();
+					return;
+				}
+				if (instance.listeners.size === 0 && !onFinish) {
+					instance.current = next;
+					return;
+				}
+				instance.finish = onFinish !== null && onFinish !== void 0 ? onFinish : null;
+				var settle = function() {
+					instance.raf = null;
+					notifyAnimatedNumber(instance, next);
+					var finish = instance.finish;
+					instance.finish = null;
+					finish === null || finish === void 0 ? void 0 : finish();
+				};
+				if (config.type === "timing") {
+					var startedAt = performance.now();
+					var tick = function() {
+						var progress = Math.min(1, (performance.now() - startedAt) / config.duration);
+						if (progress === 1) {
+							settle();
+							return;
+						}
+						notifyAnimatedNumber(instance, from + (next - from) * progress);
+						instance.raf = requestAnimationFrame(tick);
+					};
+					instance.raf = requestAnimationFrame(tick);
+					return;
+				}
+				var { stiffness = 300, damping = 35, mass = 1, overshootClamping, restSpeedThreshold: restSpeed = .001, restDisplacementThreshold: restDisplacement = .001 } = config;
+				var displacement = from - next;
+				var decayRate = damping / (2 * mass);
+				var naturalFrequency = Math.sqrt(stiffness / mass);
+				var startedAt1 = performance.now();
+				var tick1 = function() {
+					var elapsed = (performance.now() - startedAt1) / 1e3;
+					var value;
+					var velocity;
+					if (decayRate < naturalFrequency) {
+						var dampedFrequency = Math.sqrt(Math.pow(naturalFrequency, 2) - Math.pow(decayRate, 2));
+						var b = decayRate * displacement / dampedFrequency;
+						var decay = Math.exp(-decayRate * elapsed);
+						var cos = Math.cos(dampedFrequency * elapsed);
+						var sin = Math.sin(dampedFrequency * elapsed);
+						value = next + decay * (displacement * cos + b * sin);
+						velocity = decay * ((-decayRate * displacement + b * dampedFrequency) * cos + (-decayRate * b - displacement * dampedFrequency) * sin);
+					} else if (decayRate === naturalFrequency) {
+						var b1 = decayRate * displacement;
+						var decay1 = Math.exp(-decayRate * elapsed);
+						value = next + (displacement + b1 * elapsed) * decay1;
+						velocity = (b1 - decayRate * (displacement + b1 * elapsed)) * decay1;
+					} else {
+						var frequency = Math.sqrt(Math.pow(decayRate, 2) - Math.pow(naturalFrequency, 2));
+						var slowRoot = -decayRate + frequency;
+						var fastRoot = -decayRate - frequency;
+						var slowCoefficient = -fastRoot * displacement / (slowRoot - fastRoot);
+						var fastCoefficient = displacement - slowCoefficient;
+						value = next + slowCoefficient * Math.exp(slowRoot * elapsed) + fastCoefficient * Math.exp(fastRoot * elapsed);
+						velocity = slowCoefficient * slowRoot * Math.exp(slowRoot * elapsed) + fastCoefficient * fastRoot * Math.exp(fastRoot * elapsed);
+					}
+					if (overshootClamping && (from < next && value > next || from > next && value < next)) {
+						value = next;
+						velocity = 0;
+					}
+					if (Math.abs(velocity) <= restSpeed && Math.abs(next - value) <= restDisplacement) {
+						settle();
+						return;
+					}
+					notifyAnimatedNumber(instance, value);
+					instance.raf = requestAnimationFrame(tick1);
+				};
+				instance.raf = requestAnimationFrame(tick1);
+			},
+			stop() {
+				instance.cancel();
+			}
+		};
+	}, [instance]);
+}
+var useAnimatedNumberReaction = function(param, onValue) {
+	var { value } = param;
+	var onValueRef = import_react.default.useRef(onValue);
+	onValueRef.current = onValue;
+	import_react.default.useEffect(function() {
+		var instance = value.getInstance();
+		var listener = function(current) {
+			return onValueRef.current(current);
+		};
+		instance.listeners.add(listener);
+		return function() {
+			instance.listeners.delete(listener);
+		};
+	}, [value]);
+};
+var useAnimatedNumberStyle = function(val, getStyle) {
+	return useAnimatedNumberStyles([val], getStyle);
+};
+var useAnimatedNumbersStyle = function(vals, getStyle) {
+	return useAnimatedNumberStyles(vals, getStyle);
+};