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

package/dist/cjs/createAnimations.native.cjs

@@ -0,0 +1,1158 @@
+"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 createAnimations_exports = {};
+__export(createAnimations_exports, {
+	createAnimations: () => createAnimations,
+	disableAnimationProps: () => disableAnimationProps
+});
+module.exports = __toCommonJS(createAnimations_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_animation_helpers = require("@tamagui/animation-helpers");
+var import_use_presence = require("@tamagui/use-presence");
+var import_web = require("@tamagui/web");
+var import_react = require("motion/react");
+var import_react2 = __toESM(require("react"), 1);
+function _instanceof(left, right) {
+	if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+		return !!right[Symbol.hasInstance](left);
+	} else {
+		return left instanceof right;
+	}
+}
+function _type_of(obj) {
+	"@swc/helpers - typeof";
+	return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+var isServer = typeof window === "undefined";
+function useAnimateSSRSafe() {
+	if (isServer) {
+		return [(0, import_react2.useRef)(null), function() {}];
+	}
+	return (0, import_react.useAnimate)();
+}
+var asStyleRecord = function(style) {
+	return style && (typeof style === "undefined" ? "undefined" : _type_of(style)) === "object" && !Array.isArray(style) ? style : {};
+};
+function assignInlineStyles(node, styles) {
+	for (var key in styles) {
+		node.style[key] = (0, import_web.normalizeValueWithProperty)(styles[key], key);
+	}
+}
+var MotionValueStrategy = /* @__PURE__ */ new WeakMap();
+var PendingMotionOnFinish = /* @__PURE__ */ new WeakMap();
+function settlePendingMotionOnFinish(mv, controls) {
+	var onFinish = PendingMotionOnFinish.get(mv);
+	if (!onFinish) return;
+	PendingMotionOnFinish.delete(mv);
+	controls.then(function() {
+		return onFinish();
+	}).catch(function() {
+		return onFinish();
+	});
+}
+var PopperPositionAnims = /* @__PURE__ */ new WeakMap();
+function parseTranslate(transform) {
+	if (!transform || transform === "none") return {
+		x: 0,
+		y: 0
+	};
+	try {
+		var m = new DOMMatrixReadOnly(transform);
+		if (!m.is2D || m.a !== 1 || m.b !== 0 || m.c !== 0 || m.d !== 1) return null;
+		return {
+			x: m.e,
+			y: m.f
+		};
+	} catch (e) {
+		return null;
+	}
+}
+function createAnimations(animations) {
+	var isHydratingGlobal;
+	var hydratingComponents = /* @__PURE__ */ new Set();
+	return {
+		View: MotionView,
+		Text: MotionText,
+		isReactNative: false,
+		inputStyle: "css",
+		outputStyle: "inline",
+		avoidReRenders: true,
+		animations,
+		usePresence: import_use_presence.usePresence,
+		ResetPresence: import_use_presence.ResetPresence,
+		onMount() {
+			isHydratingGlobal = false;
+			hydratingComponents.forEach(function(cb) {
+				return cb();
+			});
+		},
+		useAnimations: function(animationProps) {
+			if (isHydratingGlobal === void 0 && !(0, import_web.getConfig)().settings.disableSSR) {
+				isHydratingGlobal = true;
+			}
+			var { props, style, componentState, stateRef, useStyleEmitter, presence, onTransition, styleProps } = animationProps;
+			var animationKey = Array.isArray(props.transition) ? props.transition[0] : props.transition;
+			var isComponentHydrating = componentState.unmounted === true;
+			var isMounting = componentState.unmounted === "should-enter";
+			var isEntering = !!componentState.unmounted;
+			var isExiting = (presence === null || presence === void 0 ? void 0 : presence[0]) === false;
+			var sendExitComplete = presence === null || presence === void 0 ? void 0 : presence[1];
+			var refs = (0, import_react2.useRef)(null);
+			if (!refs.current) {
+				refs.current = {
+					isFirstRender: true,
+					lastDoAnimate: null,
+					lastDontAnimate: null,
+					controls: null,
+					lastAnimateAt: 0,
+					disposed: false,
+					wasExiting: false,
+					isExiting: false,
+					sendExitComplete: void 0,
+					animationState: "default",
+					frozenExitTarget: null,
+					exitCompleteScheduled: false,
+					enterCompleteScheduled: false,
+					disableAnimation: true,
+					wasEntering: false,
+					wasDisabled: false,
+					onTransition: void 0,
+					enterStarted: false,
+					exitStarted: false,
+					updateInFlight: false,
+					updateControls: null,
+					wasNoClass: !!styleProps.noClass
+				};
+			}
+			var emit = function(phase, cause, finished) {
+				var _refs_current_onTransition, _refs_current;
+				(_refs_current_onTransition = (_refs_current = refs.current).onTransition) === null || _refs_current_onTransition === void 0 ? void 0 : _refs_current_onTransition.call(_refs_current, phase === "end" ? {
+					phase,
+					cause,
+					finished
+				} : {
+					phase,
+					cause
+				});
+			};
+			var justFinishedEntering = refs.current.wasEntering && !isEntering;
+			(0, import_react2.useEffect)(function() {
+				refs.current.wasEntering = isEntering;
+			});
+			var animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default";
+			var disableAnimation = isComponentHydrating || isMounting || !animationKey;
+			var [scope] = useAnimateSSRSafe();
+			refs.current.isExiting = isExiting;
+			refs.current.sendExitComplete = sendExitComplete;
+			refs.current.animationState = animationState;
+			refs.current.disableAnimation = disableAnimation;
+			refs.current.onTransition = onTransition;
+			var justStartedExiting = isExiting && !refs.current.wasExiting;
+			var justStoppedExiting = !isExiting && refs.current.wasExiting;
+			if (justStartedExiting || justStoppedExiting) {
+				refs.current.frozenExitTarget = null;
+				refs.current.exitCompleteScheduled = false;
+				refs.current.enterCompleteScheduled = false;
+			}
+			(0, import_react2.useEffect)(function() {
+				refs.current.wasExiting = isExiting;
+			});
+			(0, import_web.useIsomorphicLayoutEffect)(function() {
+				if (justStoppedExiting && refs.current.exitStarted) {
+					refs.current.exitStarted = false;
+					emit("end", "exit", false);
+				}
+			}, [justStoppedExiting]);
+			var { dontAnimate = {}, doAnimate, animationOptions } = getMotionAnimatedProps(props, style, disableAnimation, animationState);
+			var [firstRenderStyle] = (0, import_react2.useState)(style);
+			if (refs.current.isFirstRender) {
+				refs.current.lastDontAnimate = firstRenderStyle;
+			}
+			var [isHydrating, setIsHydrating] = (0, import_react2.useState)(isHydratingGlobal);
+			(0, import_react2.useLayoutEffect)(function() {
+				if (isHydratingGlobal) {
+					hydratingComponents.add(function() {
+						setIsHydrating(false);
+					});
+				}
+				return function() {
+					refs.current.disposed = true;
+				};
+			}, []);
+			var flushAnimation = function(param) {
+				var { doAnimate: doAnimateRaw = {}, animationOptions: passedOptions = {}, dontAnimate: dontAnimate2 } = param;
+				var startedControls = null;
+				var isCurrentlyExiting = refs.current.isExiting;
+				var currentSendExitComplete = refs.current.sendExitComplete;
+				var currentAnimationState = refs.current.animationState;
+				var doAnimate2 = doAnimateRaw;
+				if (isCurrentlyExiting && refs.current.frozenExitTarget) {
+					doAnimate2 = refs.current.frozenExitTarget;
+				}
+				var _props_transition;
+				var animationOptions2 = isCurrentlyExiting && currentSendExitComplete ? getAnimationOptions((_props_transition = props.transition) !== null && _props_transition !== void 0 ? _props_transition : null, "exit") : passedOptions;
+				try {
+					var node = stateRef.current.host;
+					if (refs.current.isFirstRender) {
+						refs.current.lastDontAnimate = null;
+						refs.current.lastDoAnimate = null;
+					}
+					if (process.env.NODE_ENV === "development") {
+						if (props["debug"] && props["debug"] !== "profile") {
+							console.groupCollapsed(`[motion] animate (${JSON.stringify(getDiff(refs.current.lastDoAnimate, doAnimate2), null, 2)})`);
+							console.info({
+								props,
+								componentState,
+								doAnimate: doAnimate2,
+								dontAnimate: dontAnimate2,
+								animationOptions: animationOptions2,
+								animationProps,
+								lastDoAnimate: { ...refs.current.lastDoAnimate },
+								lastDontAnimate: { ...refs.current.lastDontAnimate },
+								isExiting,
+								style,
+								node
+							});
+							console.groupCollapsed(`trace >`);
+							console.trace();
+							console.groupEnd();
+							console.groupEnd();
+						}
+					}
+					if (!_instanceof(node, HTMLElement)) {
+						return;
+					}
+					var prevDont = refs.current.lastDontAnimate;
+					if (dontAnimate2) {
+						if (prevDont) {
+							removeRemovedStyles(prevDont, dontAnimate2, node, doAnimate2);
+							var changed = getDiff(prevDont, dontAnimate2);
+							if (changed) {
+								assignInlineStyles(node, changed);
+							}
+						} else {
+							assignInlineStyles(node, dontAnimate2);
+						}
+					}
+					if (doAnimate2) {
+						if (prevDont) {
+							for (var key in prevDont) {
+								if (key in doAnimate2) {
+									node.style[key] = (0, import_web.normalizeValueWithProperty)(prevDont[key], key);
+									if (refs.current.lastDoAnimate) {
+										refs.current.lastDoAnimate[key] = prevDont[key];
+									}
+								}
+							}
+						}
+						var lastAnimated = refs.current.lastDoAnimate;
+						if (lastAnimated) {
+							removeRemovedStyles(lastAnimated, doAnimate2, node, dontAnimate2);
+						}
+						var diff = getDiff(refs.current.lastDoAnimate, doAnimate2);
+						if (diff) {
+							if (isCurrentlyExiting && !refs.current.frozenExitTarget) {
+								refs.current.frozenExitTarget = { ...doAnimate2 };
+							}
+							var isPopperPosition = node.hasAttribute("data-popper-animate-position");
+							var popperHandledTransform = false;
+							if (isPopperPosition && !isCurrentlyExiting && typeof diff.transform === "string") {
+								var target = parseTranslate(diff.transform);
+								if (target) {
+									var entry = PopperPositionAnims.get(node);
+									if (!entry) {
+										var seed = target;
+										try {
+											var _parseTranslate;
+											seed = (_parseTranslate = parseTranslate(getComputedStyle(node).transform)) !== null && _parseTranslate !== void 0 ? _parseTranslate : target;
+										} catch (e) {}
+										var x = (0, import_react.motionValue)(seed.x);
+										var y = (0, import_react.motionValue)(seed.y);
+										var write = function() {
+											node.style.transform = `translate3d(${x.get()}px, ${y.get()}px, 0)`;
+										};
+										x.on("change", write);
+										y.on("change", write);
+										entry = {
+											x,
+											y,
+											stop: null
+										};
+										PopperPositionAnims.set(node, entry);
+									}
+									if (!entry.stop) {
+										try {
+											var live = parseTranslate(getComputedStyle(node).transform);
+											if (live) {
+												entry.x.jump(live.x);
+												entry.y.jump(live.y);
+											}
+										} catch (e) {}
+									}
+									var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+									try {
+										for (var _iterator = node.getAnimations()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+											var anim = _step.value;
+											try {
+												var _anim_effect_getKeyframes, _anim_effect;
+												var kf = (_anim_effect = anim.effect) === null || _anim_effect === void 0 ? void 0 : (_anim_effect_getKeyframes = _anim_effect.getKeyframes) === null || _anim_effect_getKeyframes === void 0 ? void 0 : _anim_effect_getKeyframes.call(_anim_effect);
+												if (kf === null || kf === void 0 ? void 0 : kf.some(function(k) {
+													return "transform" in k;
+												})) {
+													anim.cancel();
+												}
+											} catch (e) {}
+										}
+									} catch (err) {
+										_didIteratorError = true;
+										_iteratorError = err;
+									} finally {
+										try {
+											if (!_iteratorNormalCompletion && _iterator.return != null) {
+												_iterator.return();
+											}
+										} finally {
+											if (_didIteratorError) {
+												throw _iteratorError;
+											}
+										}
+									}
+									var opts = animationOptions2;
+									var _opts_transform, _ref;
+									var positionTransition = (_ref = (_opts_transform = opts.transform) !== null && _opts_transform !== void 0 ? _opts_transform : opts.default) !== null && _ref !== void 0 ? _ref : animationOptions2;
+									var cx = (0, import_react.animate)(entry.x, target.x, positionTransition);
+									var cy = (0, import_react.animate)(entry.y, target.y, positionTransition);
+									entry.stop = function() {
+										cx.stop();
+										cy.stop();
+									};
+									popperHandledTransform = true;
+								}
+							}
+							if (isCurrentlyExiting) {
+								var entry1 = PopperPositionAnims.get(node);
+								if (entry1 === null || entry1 === void 0 ? void 0 : entry1.stop) {
+									entry1.stop();
+									entry1.stop = null;
+								}
+							}
+							var midFlightValues = null;
+							if (refs.current.controls) {
+								try {
+									var computed = getComputedStyle(node);
+									midFlightValues = {};
+									for (var key1 in diff) {
+										var val = computed[key1];
+										if (val !== void 0 && val !== "") {
+											midFlightValues[key1] = val;
+										}
+									}
+								} catch (e) {}
+								if (isCurrentlyExiting) {
+									refs.current.controls.stop();
+								}
+								if (midFlightValues) {
+									for (var key2 in midFlightValues) {
+										if (key2 === "transform" && popperHandledTransform) continue;
+										node.style[key2] = midFlightValues[key2];
+									}
+								}
+								if (isPopperPosition && !popperHandledTransform) {
+									var anims = node.getAnimations();
+									var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = void 0;
+									try {
+										for (var _iterator1 = anims[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
+											var anim1 = _step1.value;
+											anim1.cancel();
+										}
+									} catch (err) {
+										_didIteratorError1 = true;
+										_iteratorError1 = err;
+									} finally {
+										try {
+											if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
+												_iterator1.return();
+											}
+										} finally {
+											if (_didIteratorError1) {
+												throw _iteratorError1;
+											}
+										}
+									}
+								}
+							}
+							var fixedDiff = fixTransparentColors(diff, refs.current.lastDoAnimate, doAnimate2);
+							var waapiDiff = Object.fromEntries(Object.entries(fixedDiff).map(function(param2) {
+								var [key3, value] = param2;
+								return [key3, Array.isArray(value) ? value.map(function(item) {
+									return (0, import_web.normalizeValueWithProperty)(item, key3);
+								}) : (0, import_web.normalizeValueWithProperty)(value, key3)];
+							}));
+							if (popperHandledTransform && "transform" in waapiDiff) {
+								waapiDiff = { ...waapiDiff };
+								delete waapiDiff.transform;
+							}
+							if ((isPopperPosition || isCurrentlyExiting) && (midFlightValues === null || midFlightValues === void 0 ? void 0 : midFlightValues.transform) && waapiDiff.transform) {
+								waapiDiff.transform = [midFlightValues.transform, waapiDiff.transform];
+							}
+							if (Object.keys(waapiDiff).length > 0) {
+								startedControls = (0, import_react.animate)(node, waapiDiff, animationOptions2);
+								refs.current.controls = startedControls;
+							}
+							refs.current.lastAnimateAt = Date.now();
+						}
+					}
+					refs.current.lastDontAnimate = dontAnimate2 ? { ...dontAnimate2 } : {};
+					refs.current.lastDoAnimate = doAnimate2 ? { ...doAnimate2 } : {};
+				} finally {
+					if (isCurrentlyExiting && currentSendExitComplete) {
+						if (refs.current.enterStarted) {
+							refs.current.enterStarted = false;
+							emit("end", "enter", false);
+						}
+						if (startedControls) {
+							if (!refs.current.exitStarted) {
+								refs.current.exitStarted = true;
+								emit("start", "exit");
+							}
+							refs.current.exitCompleteScheduled = true;
+							var complete = function(finished) {
+								if (!refs.current.isExiting) return;
+								if (refs.current.exitStarted) {
+									refs.current.exitStarted = false;
+									emit("end", "exit", finished);
+								}
+								currentSendExitComplete();
+							};
+							startedControls.finished.then(function() {
+								return complete(true);
+							}).catch(function() {
+								return complete(false);
+							});
+						} else if (!refs.current.exitCompleteScheduled) {
+							emit("start", "exit");
+							emit("end", "exit", true);
+							currentSendExitComplete();
+						}
+					} else if (currentAnimationState === "enter") {
+						if (startedControls) {
+							if (!refs.current.enterStarted) {
+								refs.current.enterStarted = true;
+								emit("start", "enter");
+							}
+							refs.current.enterCompleteScheduled = true;
+							var complete1 = function(finished) {
+								if (refs.current.disposed || refs.current.animationState !== "enter") return;
+								if (refs.current.enterStarted) {
+									refs.current.enterStarted = false;
+									emit("end", "enter", finished);
+								}
+							};
+							startedControls.finished.then(function() {
+								return complete1(true);
+							}).catch(function() {
+								return complete1(false);
+							});
+						} else if (!refs.current.enterCompleteScheduled && !refs.current.disableAnimation) {
+							emit("start", "enter");
+							emit("end", "enter", true);
+						}
+					} else if (startedControls) {
+						var controls = startedControls;
+						if (refs.current.updateInFlight) {
+							emit("end", "update", false);
+						}
+						refs.current.updateInFlight = true;
+						refs.current.updateControls = controls;
+						emit("start", "update");
+						var settle = function(finished) {
+							if (refs.current.updateControls !== controls) return;
+							refs.current.updateInFlight = false;
+							refs.current.updateControls = null;
+							emit("end", "update", finished);
+						};
+						controls.finished.then(function() {
+							return settle(true);
+						}).catch(function() {
+							return settle(false);
+						});
+					}
+				}
+			};
+			useStyleEmitter === null || useStyleEmitter === void 0 ? void 0 : useStyleEmitter(function(nextStyle, effectiveTransition) {
+				var _$animationProps = getMotionAnimatedProps(props, nextStyle, disableAnimation, refs.current.animationState, effectiveTransition);
+				flushAnimation(_$animationProps);
+			});
+			(0, import_web.useIsomorphicLayoutEffect)(function() {
+				if (refs.current.isFirstRender) {
+					refs.current.isFirstRender = false;
+					refs.current.wasDisabled = disableAnimation;
+					if (isHydrating) {
+						if (doAnimate && Object.keys(doAnimate).length > 0) {
+							refs.current.lastDoAnimate = { ...doAnimate };
+						} else {
+							refs.current.lastDoAnimate = dontAnimate ? { ...dontAnimate } : {};
+						}
+						refs.current.lastDontAnimate = dontAnimate ? { ...dontAnimate } : {};
+						refs.current.lastAnimateAt = Date.now();
+						return;
+					}
+					refs.current.lastDontAnimate = dontAnimate ? { ...dontAnimate } : {};
+					refs.current.lastDoAnimate = doAnimate ? { ...doAnimate } : {};
+					return;
+				}
+				var justEnabled = refs.current.wasDisabled && !disableAnimation;
+				refs.current.wasDisabled = disableAnimation;
+				var justStrippedClasses = !refs.current.wasNoClass && !!styleProps.noClass;
+				refs.current.wasNoClass = !!styleProps.noClass;
+				if ((justEnabled || justStrippedClasses) && animationState !== "enter") {
+					var node = stateRef.current.host;
+					if (_instanceof(node, HTMLElement)) {
+						if (dontAnimate) assignInlineStyles(node, dontAnimate);
+						if (doAnimate) assignInlineStyles(node, doAnimate);
+						var entry = PopperPositionAnims.get(node);
+						if (entry) {
+							var _doAnimate_transform;
+							var target = parseTranslate((_doAnimate_transform = doAnimate === null || doAnimate === void 0 ? void 0 : doAnimate.transform) !== null && _doAnimate_transform !== void 0 ? _doAnimate_transform : dontAnimate === null || dontAnimate === void 0 ? void 0 : dontAnimate.transform);
+							if (target) {
+								var _entry_stop;
+								(_entry_stop = entry.stop) === null || _entry_stop === void 0 ? void 0 : _entry_stop.call(entry);
+								entry.stop = null;
+								entry.x.jump(target.x);
+								entry.y.jump(target.y);
+							}
+						}
+					}
+					refs.current.lastDontAnimate = dontAnimate ? { ...dontAnimate } : {};
+					refs.current.lastDoAnimate = doAnimate ? { ...doAnimate } : {};
+					return;
+				}
+				flushAnimation({
+					doAnimate,
+					dontAnimate,
+					animationOptions
+				});
+			}, [
+				style,
+				isExiting,
+				disableAnimation,
+				styleProps.noClass
+			]);
+			if (process.env.NODE_ENV === "development") {
+				if (props["debug"] && props["debug"] !== "profile") {
+					console.groupCollapsed(`[motion] render`);
+					console.info({
+						style,
+						doAnimate,
+						dontAnimate,
+						scope,
+						animationOptions,
+						isExiting,
+						isFirstRender: refs.current.isFirstRender,
+						animationProps
+					});
+					console.groupEnd();
+				}
+			}
+			return {
+				style: firstRenderStyle,
+				ref: scope,
+				render: "div"
+			};
+		},
+		useAnimatedNumber(initial) {
+			var motionValue2 = (0, import_react.useMotionValue)(initial);
+			return import_react2.default.useMemo(function() {
+				return {
+					getInstance() {
+						return motionValue2;
+					},
+					getValue() {
+						return motionValue2.get();
+					},
+					setValue(next) {
+						var config = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : { type: "spring" }, onFinish = arguments.length > 2 ? arguments[2] : void 0;
+						if (config.type === "direct") {
+							MotionValueStrategy.set(motionValue2, { type: "direct" });
+							motionValue2.set(next);
+							onFinish === null || onFinish === void 0 ? void 0 : onFinish();
+							return;
+						}
+						MotionValueStrategy.set(motionValue2, config);
+						if (onFinish) {
+							var prior = PendingMotionOnFinish.get(motionValue2);
+							if (prior) {
+								PendingMotionOnFinish.delete(motionValue2);
+								prior();
+							}
+							PendingMotionOnFinish.set(motionValue2, onFinish);
+						}
+						motionValue2.set(next);
+					},
+					stop() {
+						motionValue2.stop();
+					}
+				};
+			}, [motionValue2]);
+		},
+		useAnimatedNumberReaction(param, onValue) {
+			var { value } = param;
+			var instance = value.getInstance();
+			(0, import_react.useMotionValueEvent)(instance, "change", onValue);
+		},
+		useAnimatedNumberStyle(val, getStyleProp) {
+			var motionValue2 = val.getInstance();
+			var getStyleRef = (0, import_react2.useRef)(getStyleProp);
+			getStyleRef.current = getStyleProp;
+			return (0, import_react2.useMemo)(function() {
+				return {
+					getStyle: function(cur) {
+						return getStyleRef.current(cur);
+					},
+					motionValue: motionValue2
+				};
+			}, []);
+		},
+		useAnimatedNumbersStyle(vals, getStyleProp) {
+			var motionValues = vals.map(function(v) {
+				return v.getInstance();
+			});
+			var getStyleRef = (0, import_react2.useRef)(getStyleProp);
+			getStyleRef.current = getStyleProp;
+			return (0, import_react2.useMemo)(function() {
+				return {
+					getStyle: function() {
+						for (var _len = arguments.length, currentValues = new Array(_len), _key = 0; _key < _len; _key++) {
+							currentValues[_key] = arguments[_key];
+						}
+						return getStyleRef.current(...currentValues);
+					},
+					motionValues
+				};
+			}, []);
+		}
+	};
+	function getMotionAnimatedProps(props, style, disable) {
+		var animationState = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "default", transitionOverride = arguments.length > 4 ? arguments[4] : void 0;
+		if (disable) {
+			return { dontAnimate: style };
+		}
+		var _ref;
+		var animationOptions = getAnimationOptions((_ref = transitionOverride !== null && transitionOverride !== void 0 ? transitionOverride : props.transition) !== null && _ref !== void 0 ? _ref : null, animationState);
+		var dontAnimate;
+		var doAnimate;
+		var animateOnly = props.animateOnly;
+		for (var key in style) {
+			var value = style[key];
+			if (disableAnimationProps.has(key) || animateOnly && !animateOnly.includes(key)) {
+				dontAnimate || (dontAnimate = {});
+				dontAnimate[key] = value;
+			} else {
+				doAnimate || (doAnimate = {});
+				doAnimate[key] = value;
+			}
+		}
+		return {
+			dontAnimate,
+			doAnimate,
+			animationOptions
+		};
+	}
+	function getAnimationOptions(transitionProp) {
+		var animationState = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "default";
+		var normalized = (0, import_animation_helpers.normalizeTransition)(transitionProp);
+		var effectiveKey = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
+		if (!effectiveKey && animationState === "default") {
+			effectiveKey = normalized.enter || normalized.exit || null;
+		}
+		var globalConfigOverride = normalized.config ? { ...normalized.config } : void 0;
+		if (!effectiveKey && Object.keys(normalized.properties).length === 0 && !globalConfigOverride) {
+			return {};
+		}
+		var defaultConfig = effectiveKey ? withInferredType(animations[effectiveKey]) : null;
+		var delay = normalized.delay;
+		var result = {};
+		if (defaultConfig) {
+			Object.assign(result, defaultConfig);
+		}
+		if (globalConfigOverride) {
+			Object.assign(result, globalConfigOverride);
+			if (result.type === void 0 && result.duration !== void 0 && result.damping === void 0 && result.stiffness === void 0 && result.mass === void 0) {
+				result.type = "tween";
+			}
+		}
+		if (delay) {
+			result.delay = delay;
+		}
+		if (defaultConfig || globalConfigOverride || delay) {
+			result.default = {
+				...defaultConfig,
+				...globalConfigOverride,
+				...delay ? { delay } : null
+			};
+		}
+		var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+		try {
+			for (var _iterator = Object.entries(normalized.properties)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+				var [propName, animationNameOrConfig] = _step.value;
+				if (typeof animationNameOrConfig === "string") {
+					result[propName] = withInferredType(animations[animationNameOrConfig]);
+				} else if (animationNameOrConfig && (typeof animationNameOrConfig === "undefined" ? "undefined" : _type_of(animationNameOrConfig)) === "object") {
+					var baseConfig = animationNameOrConfig.type ? withInferredType(animations[animationNameOrConfig.type]) : defaultConfig;
+					result[propName] = {
+						...baseConfig,
+						...animationNameOrConfig
+					};
+				}
+			}
+		} catch (err) {
+			_didIteratorError = true;
+			_iteratorError = err;
+		} finally {
+			try {
+				if (!_iteratorNormalCompletion && _iterator.return != null) {
+					_iterator.return();
+				}
+			} finally {
+				if (_didIteratorError) {
+					throw _iteratorError;
+				}
+			}
+		}
+		convertMsToS(result);
+		convertMsToS(result.default);
+		for (var key in result) {
+			if (key !== "default" && _type_of(result[key]) === "object") {
+				convertMsToS(result[key]);
+			}
+		}
+		return result;
+	}
+}
+function withInferredType(config) {
+	if (!config) {
+		return { type: "spring" };
+	}
+	var isTimingBased = config.duration !== void 0 && config.damping === void 0 && config.stiffness === void 0 && config.mass === void 0;
+	return {
+		type: isTimingBased ? "tween" : "spring",
+		...config
+	};
+}
+function convertMsToS(config) {
+	if (!config) return;
+	if (typeof config.delay === "number") config.delay = config.delay / 1e3;
+	if (typeof config.duration === "number") {
+		var isTimingBased = config.type === "tween" || config.type === void 0 && config.damping === void 0 && config.stiffness === void 0 && config.mass === void 0;
+		if (isTimingBased) {
+			config.duration = config.duration / 1e3;
+		}
+	}
+}
+function removeRemovedStyles(prev, next, node, dontClearIfIn) {
+	for (var key in prev) {
+		if (!(key in next)) {
+			if (dontClearIfIn && key in dontClearIfIn) {
+				continue;
+			}
+			node.style[key] = "";
+		}
+	}
+}
+var disableAnimationProps = /* @__PURE__ */ new Set([
+	"alignContent",
+	"alignItems",
+	"boxSizing",
+	"contain",
+	"containerType",
+	"display",
+	"flexBasis",
+	"flexDirection",
+	"fontFamily",
+	"justifyContent",
+	"overflow",
+	"overflowX",
+	"overflowY",
+	"pointerEvents",
+	"position",
+	"textWrap",
+	"userSelect"
+]);
+function motionPropsEqual(a, b) {
+	for (var key in a) {
+		if (!(key in b)) return false;
+	}
+	for (var key1 in b) {
+		if (key1 === "children") continue;
+		var av = a[key1];
+		var bv = b[key1];
+		if (typeof bv === "function" && typeof av === "function") continue;
+		if (!Object.is(av, bv)) return false;
+	}
+	return true;
+}
+function motionStylesEqual(a, b) {
+	if (a.length !== b.length) return false;
+	for (var i = 0; i < a.length; i++) {
+		var sa = a[i];
+		var sb = b[i];
+		if (sa === sb) continue;
+		if (!sa || !sb) return false;
+		var aCount = 0;
+		for (var key in sa) {
+			aCount++;
+			if (!Object.is(sa[key], sb[key])) return false;
+		}
+		var bCount = 0;
+		for (var _key in sb) {
+			bCount++;
+		}
+		if (aCount !== bCount) return false;
+	}
+	return true;
+}
+var MotionView = createMotionView("div");
+var MotionText = createMotionView("span");
+var transformAliases = {
+	x: "translateX",
+	y: "translateY",
+	scale: "scale",
+	scaleX: "scaleX",
+	scaleY: "scaleY",
+	rotate: "rotate",
+	rotateX: "rotateX",
+	rotateY: "rotateY",
+	rotateZ: "rotateZ",
+	skewX: "skewX",
+	skewY: "skewY"
+};
+function compileAnimatedStyle(initialSource, initialResolved) {
+	var shorthands = (0, import_web.getConfig)().shorthands;
+	var entries = Object.keys(initialSource).map(function(source) {
+		var _shorthands_source, _shorthands_source1, _shorthands_source2;
+		return {
+			source,
+			target: (_shorthands_source = shorthands === null || shorthands === void 0 ? void 0 : shorthands[source]) !== null && _shorthands_source !== void 0 ? _shorthands_source : source,
+			tokenValue: typeof initialSource[source] === "string" && initialResolved[(_shorthands_source1 = shorthands === null || shorthands === void 0 ? void 0 : shorthands[source]) !== null && _shorthands_source1 !== void 0 ? _shorthands_source1 : source] !== initialSource[source] ? initialResolved[(_shorthands_source2 = shorthands === null || shorthands === void 0 ? void 0 : shorthands[source]) !== null && _shorthands_source2 !== void 0 ? _shorthands_source2 : source] : void 0
+		};
+	});
+	return function(sourceStyle) {
+		var resolved = {};
+		var transforms = [];
+		var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+		try {
+			for (var _iterator = entries[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+				var entry = _step.value;
+				var value = sourceStyle[entry.source];
+				if (value === void 0) continue;
+				if (entry.source === "transform" && Array.isArray(value)) {
+					resolved.transform = (0, import_web.transformsToString)(value);
+				} else if (entry.source in transformAliases) {
+					transforms.push({ [transformAliases[entry.source]]: value });
+				} else {
+					var _entry_tokenValue;
+					resolved[entry.target] = (_entry_tokenValue = entry.tokenValue) !== null && _entry_tokenValue !== void 0 ? _entry_tokenValue : (0, import_web.normalizeValueWithProperty)(value, entry.target);
+				}
+			}
+		} catch (err) {
+			_didIteratorError = true;
+			_iteratorError = err;
+		} finally {
+			try {
+				if (!_iteratorNormalCompletion && _iterator.return != null) {
+					_iterator.return();
+				}
+			} finally {
+				if (_didIteratorError) {
+					throw _iteratorError;
+				}
+			}
+		}
+		if (transforms.length) resolved.transform = (0, import_web.transformsToString)(transforms);
+		return resolved;
+	};
+}
+function createMotionView(defaultTag) {
+	var isText = defaultTag === "span";
+	var Component = (0, import_web.createRefComponent)(function(propsIn, ref) {
+		var _hooks_usePropsTransform;
+		var { forwardedRef, animation, render = defaultTag, style, ...propsRest } = propsIn;
+		var [scope, animate] = useAnimateSSRSafe();
+		var hostRef = (0, import_react2.useRef)(null);
+		var seededNode = (0, import_react2.useRef)(null);
+		var seededInCurrentFrame = (0, import_react2.useRef)(false);
+		var queuedAnimationFrames = (0, import_react2.useRef)(/* @__PURE__ */ new WeakMap());
+		var composedRefs = (0, import_web.useComposedRefs)(forwardedRef, ref, hostRef, scope);
+		var stateRef = (0, import_react2.useRef)(null);
+		if (!stateRef.current) {
+			stateRef.current = { get host() {
+				return hostRef.current;
+			} };
+		}
+		var [_, state] = (0, import_web.useThemeWithState)({});
+		var styles = Array.isArray(style) ? style : [style];
+		var [animatedStyle, nonAnimatedStyles] = (function() {
+			var animatedStyle2;
+			var nonAnimatedStyles2 = [];
+			var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+			try {
+				for (var _iterator = styles[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+					var style2 = _step.value;
+					if (style2.getStyle) {
+						animatedStyle2 = style2;
+					} else {
+						nonAnimatedStyles2.push(style2);
+					}
+				}
+			} catch (err) {
+				_didIteratorError = true;
+				_iteratorError = err;
+			} finally {
+				try {
+					if (!_iteratorNormalCompletion && _iterator.return != null) {
+						_iterator.return();
+					}
+				} finally {
+					if (_didIteratorError) {
+						throw _iteratorError;
+					}
+				}
+			}
+			return [animatedStyle2, nonAnimatedStyles2];
+		})();
+		function getProps(props2) {
+			if (process.env.NODE_ENV === "development" && propsIn.debug === "profile" && typeof performance !== "undefined") {
+				performance.mark("tamagui-motion-style-split");
+			}
+			var out = (0, import_web.getSplitStyles)(props2, isText ? import_web.Text.staticConfig : import_web.View.staticConfig, state === null || state === void 0 ? void 0 : state.theme, state === null || state === void 0 ? void 0 : state.name, { unmounted: false }, {
+				isAnimated: false,
+				noClass: true,
+				resolveValues: "auto"
+			});
+			if (!out) {
+				return {};
+			}
+			if (out.viewProps.style) {
+				(0, import_web.fixStyles)(out.viewProps.style);
+				(0, import_web.styleToCSS)(out.viewProps.style);
+			}
+			return out.viewProps;
+		}
+		var resolvedAnimatedStyle = (0, import_react2.useMemo)(function() {
+			if (!animatedStyle) return null;
+			var currentValues = animatedStyle.motionValues ? animatedStyle.motionValues.map(function(value) {
+				return value.get();
+			}) : animatedStyle.motionValue ? [animatedStyle.motionValue.get()] : [];
+			var initialSource = animatedStyle.getStyle(...currentValues);
+			var initialResolved = asStyleRecord(getProps({ style: initialSource }).style);
+			return {
+				initial: initialResolved,
+				resolve: compileAnimatedStyle(initialSource, initialResolved)
+			};
+		}, [
+			animatedStyle,
+			state === null || state === void 0 ? void 0 : state.theme,
+			state === null || state === void 0 ? void 0 : state.name
+		]);
+		var memoRef = (0, import_react2.useRef)(null);
+		var props;
+		var cached = memoRef.current;
+		if (cached && cached.theme === (state === null || state === void 0 ? void 0 : state.theme) && cached.themeName === (state === null || state === void 0 ? void 0 : state.name) && motionStylesEqual(cached.styles, nonAnimatedStyles) && motionPropsEqual(cached.propsRest, propsRest)) {
+			props = { ...cached.result };
+			for (var key in propsRest) {
+				var val = propsRest[key];
+				if (key === "children" || typeof val === "function") {
+					props[key] = val;
+				}
+			}
+		} else {
+			props = getProps({
+				...propsRest,
+				style: nonAnimatedStyles
+			});
+			memoRef.current = {
+				propsRest,
+				styles: nonAnimatedStyles,
+				theme: state === null || state === void 0 ? void 0 : state.theme,
+				themeName: state === null || state === void 0 ? void 0 : state.name,
+				result: props
+			};
+		}
+		if (resolvedAnimatedStyle) {
+			props = {
+				...props,
+				style: {
+					...asStyleRecord(props.style),
+					...resolvedAnimatedStyle.initial
+				}
+			};
+		}
+		var Element = render || "div";
+		var transformedProps = (_hooks_usePropsTransform = import_web.hooks.usePropsTransform) === null || _hooks_usePropsTransform === void 0 ? void 0 : _hooks_usePropsTransform.call(import_web.hooks, render, props, stateRef, false);
+		(0, import_web.useIsomorphicLayoutEffect)(function() {
+			if (!animatedStyle) return;
+			var node = hostRef.current;
+			if (_instanceof(node, HTMLElement) && seededNode.current !== node) {
+				var currentStyle = animatedStyle.motionValues ? animatedStyle.getStyle(...animatedStyle.motionValues.map(function(value) {
+					return value.get();
+				})) : animatedStyle.motionValue ? animatedStyle.getStyle(animatedStyle.motionValue.get()) : null;
+				var webStyle = currentStyle && (resolvedAnimatedStyle === null || resolvedAnimatedStyle === void 0 ? void 0 : resolvedAnimatedStyle.resolve(currentStyle));
+				if (webStyle) {
+					assignInlineStyles(node, webStyle);
+					seededNode.current = node;
+					seededInCurrentFrame.current = true;
+					requestAnimationFrame(function() {
+						if (seededNode.current === node) seededInCurrentFrame.current = false;
+					});
+				}
+			}
+			var toTransition = function(animationConfig) {
+				return (animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.type) === "timing" ? {
+					type: "tween",
+					duration: (animationConfig.duration || 0) / 1e3
+				} : (animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.type) === "direct" ? {
+					type: "tween",
+					duration: 0
+				} : {
+					type: "spring",
+					...animationConfig
+				};
+			};
+			var animateNodeTo = function(nextStyle, transition, motionValue3) {
+				if (!_instanceof(node, HTMLElement) || hostRef.current !== node) return;
+				var webStyle2 = resolvedAnimatedStyle === null || resolvedAnimatedStyle === void 0 ? void 0 : resolvedAnimatedStyle.resolve(nextStyle);
+				if (!webStyle2) return;
+				settlePendingMotionOnFinish(motionValue3, animate(node, webStyle2, transition));
+			};
+			var animateChangedValue = function(nextStyle, transition, motionValue3) {
+				if (seededInCurrentFrame.current && seededNode.current === node) {
+					var queuedFrame = queuedAnimationFrames.current.get(motionValue3);
+					if (queuedFrame !== void 0) cancelAnimationFrame(queuedFrame);
+					var frame = requestAnimationFrame(function() {
+						if (queuedAnimationFrames.current.get(motionValue3) !== frame) return;
+						queuedAnimationFrames.current.delete(motionValue3);
+						if (hostRef.current === node) {
+							animateNodeTo(nextStyle, transition, motionValue3);
+						} else {
+							var onFinish = PendingMotionOnFinish.get(motionValue3);
+							PendingMotionOnFinish.delete(motionValue3);
+							onFinish === null || onFinish === void 0 ? void 0 : onFinish();
+						}
+					});
+					queuedAnimationFrames.current.set(motionValue3, frame);
+					return;
+				}
+				animateNodeTo(nextStyle, transition, motionValue3);
+			};
+			if (animatedStyle.motionValues) {
+				var mvs = animatedStyle.motionValues;
+				var styleForAll = function() {
+					return animatedStyle.getStyle(...mvs.map(function(value) {
+						return value.get();
+					}));
+				};
+				var unsubs = mvs.map(function(mv) {
+					return mv.on("change", function() {
+						return animateChangedValue(styleForAll(), toTransition(MotionValueStrategy.get(mv)), mv);
+					});
+				});
+				return function() {
+					return unsubs.forEach(function(fn) {
+						return fn();
+					});
+				};
+			}
+			var motionValue2 = animatedStyle.motionValue;
+			if (!motionValue2) return;
+			return motionValue2.on("change", function(value) {
+				return animateChangedValue(animatedStyle.getStyle(value), toTransition(MotionValueStrategy.get(motionValue2)), motionValue2);
+			});
+		}, [animatedStyle, resolvedAnimatedStyle]);
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Element, {
+			...transformedProps,
+			ref: composedRefs
+		});
+	});
+	Component["acceptRenderProp"] = true;
+	return Component;
+}
+function getDiff(previous, next) {
+	if (!previous) {
+		return next;
+	}
+	var diff = null;
+	for (var key in next) {
+		if (next[key] !== previous[key]) {
+			diff || (diff = {});
+			diff[key] = next[key];
+		}
+	}
+	return diff;
+}
+function fixTransparentColors(diff, previous, next) {
+	var result = diff;
+	for (var key in diff) {
+		if (diff[key] === "transparent") {
+			var fixed = "rgba(0, 0, 0, 0)";
+			var candidates = [previous === null || previous === void 0 ? void 0 : previous[key], next === null || next === void 0 ? void 0 : next[key]];
+			var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+			try {
+				for (var _iterator = candidates[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+					var candidate = _step.value;
+					if (typeof candidate === "string" && candidate !== "transparent") {
+						var rgbaMatch = candidate.match(/^rgba?\(([^,]+),\s*([^,]+),\s*([^,)]+)/);
+						if (rgbaMatch) {
+							fixed = `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, 0)`;
+							break;
+						}
+					}
+				}
+			} catch (err) {
+				_didIteratorError = true;
+				_iteratorError = err;
+			} finally {
+				try {
+					if (!_iteratorNormalCompletion && _iterator.return != null) {
+						_iterator.return();
+					}
+				} finally {
+					if (_didIteratorError) {
+						throw _iteratorError;
+					}
+				}
+			}
+			if (result === diff) {
+				result = { ...diff };
+			}
+			result[key] = fixed;
+		}
+	}
+	return result;
+}