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

package/dist/esm/createAnimations.native.js

@@ -1,499 +1,444 @@
-import { normalizeTransition, getAnimatedProperties, hasAnimation as hasNormalizedAnimation, getEffectiveAnimation, getAnimationConfigsForKeys } from "@tamagui/animation-helpers";
+import { getAnimatedProperties, getEffectiveAnimation, hasAnimation, normalizeTransition } from "@tamagui/animation-helpers";
 import { useIsomorphicLayoutEffect } from "@tamagui/constants";
 import { ResetPresence, usePresence } from "@tamagui/use-presence";
 import { transformsToString } from "@tamagui/web";
 import React from "react";
-function _type_of(obj) {
-  "@swc/helpers - typeof";
+import { useAnimatedNumber, useAnimatedNumberReaction, useAnimatedNumberStyle, useAnimatedNumbersStyle } from "./animated-number.native.js";
 
-  return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+var hasRAF = typeof requestAnimationFrame !== "undefined";
+function waitForAnimations(node) {
+	if (typeof node.getAnimations !== "function") {
+		return Promise.resolve(true);
+	}
+	return new Promise(function(resolve) {
+		var check = function() {
+			var animations = node.getAnimations();
+			if (animations.length === 0) {
+				resolve(true);
+				return;
+			}
+			Promise.all(animations.map(function(a) {
+				return a.finished;
+			})).then(function() {
+				return resolve(true);
+			}).catch(function() {
+				var remaining = node.getAnimations();
+				if (remaining.some(function(a) {
+					return a.playState === "running" || a.pending;
+				})) {
+					check();
+					return;
+				}
+				resolve(false);
+			});
+		};
+		if (hasRAF) {
+			requestAnimationFrame(check);
+		} else {
+			check();
+		}
+	});
 }
-var EXTRACT_MS_REGEX = /(\d+(?:\.\d+)?)\s*ms/;
-var EXTRACT_S_REGEX = /(\d+(?:\.\d+)?)\s*s/;
-function extractDuration(animation) {
-  var msMatch = animation.match(EXTRACT_MS_REGEX);
-  if (msMatch) {
-    return Number.parseInt(msMatch[1], 10);
-  }
-  var sMatch = animation.match(EXTRACT_S_REGEX);
-  if (sMatch) {
-    return Math.round(Number.parseFloat(sMatch[1]) * 1e3);
-  }
-  return 300;
-}
-var MS_DURATION_REGEX = /(\d+(?:\.\d+)?)\s*ms/;
-var S_DURATION_REGEX = /(\d+(?:\.\d+)?)\s*s(?!tiffness)/;
+var DURATION_REGEX = /(\d+(?:\.\d+)?)\s*(?:ms|s(?!tiffness))/;
 function applyDurationOverride(animation, durationMs) {
-  var msReplaced = animation.replace(MS_DURATION_REGEX, `${durationMs}ms`);
-  if (msReplaced !== animation) {
-    return msReplaced;
-  }
-  var sReplaced = animation.replace(S_DURATION_REGEX, `${durationMs}ms`);
-  if (sReplaced !== animation) {
-    return sReplaced;
-  }
-  return `${durationMs}ms ${animation}`;
+	var replaced = animation.replace(DURATION_REGEX, `${durationMs}ms`);
+	return replaced === animation ? `${durationMs}ms ${animation}` : replaced;
+}
+var CSS_TRANSFORM_PROPERTIES = {
+	transform: [
+		"translate",
+		"scale",
+		"rotate",
+		"transform"
+	],
+	x: ["translate"],
+	y: ["translate"],
+	scale: ["scale"],
+	scaleX: ["scale"],
+	scaleY: ["scale"],
+	rotate: ["rotate"],
+	rotateX: ["transform"],
+	rotateY: ["transform"],
+	rotateZ: ["transform"],
+	skewX: ["transform"],
+	skewY: ["transform"]
+};
+var getCSSProperties = function(key) {
+	return CSS_TRANSFORM_PROPERTIES[key] || [key];
+};
+var hyphenatedPropertyCache = {};
+var emptyProperties = [];
+function hyphenateProperty(property) {
+	var _hyphenatedPropertyCache, _property;
+	if (property.startsWith("--")) return property;
+	return (_hyphenatedPropertyCache = hyphenatedPropertyCache)[_property = property] || (_hyphenatedPropertyCache[_property] = property.replace(/[A-Z]/g, function(letter) {
+		return `-${letter.toLowerCase()}`;
+	}));
+}
+function getLifecycleCSSProperties(keys) {
+	if (!(keys === null || keys === void 0 ? void 0 : keys.size)) return emptyProperties;
+	var properties = /* @__PURE__ */ new Set();
+	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+	try {
+		for (var _iterator = keys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+			var key = _step.value;
+			var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = void 0;
+			try {
+				for (var _iterator1 = getCSSProperties(key)[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
+					var property = _step1.value;
+					properties.add(hyphenateProperty(property));
+				}
+			} catch (err) {
+				_didIteratorError1 = true;
+				_iteratorError1 = err;
+			} finally {
+				try {
+					if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
+						_iterator1.return();
+					}
+				} finally {
+					if (_didIteratorError1) {
+						throw _iteratorError1;
+					}
+				}
+			}
+		}
+	} catch (err) {
+		_didIteratorError = true;
+		_iteratorError = err;
+	} finally {
+		try {
+			if (!_iteratorNormalCompletion && _iterator.return != null) {
+				_iterator.return();
+			}
+		} finally {
+			if (_didIteratorError) {
+				throw _iteratorError;
+			}
+		}
+	}
+	return [...properties].sort();
 }
-var TRANSFORM_KEYS = ["x", "y", "scale", "scaleX", "scaleY", "rotate", "rotateX", "rotateY", "rotateZ", "skewX", "skewY"];
-function buildTransformString(style) {
-  if (!style) return "";
-  var parts = [];
-  if (style.x !== void 0 || style.y !== void 0) {
-    var _style_x;
-    var x = (_style_x = style.x) !== null && _style_x !== void 0 ? _style_x : 0;
-    var _style_y;
-    var y = (_style_y = style.y) !== null && _style_y !== void 0 ? _style_y : 0;
-    parts.push(`translate(${x}px, ${y}px)`);
-  }
-  if (style.scale !== void 0) {
-    parts.push(`scale(${style.scale})`);
-  }
-  if (style.scaleX !== void 0) {
-    parts.push(`scaleX(${style.scaleX})`);
-  }
-  if (style.scaleY !== void 0) {
-    parts.push(`scaleY(${style.scaleY})`);
-  }
-  if (style.rotate !== void 0) {
-    var val = style.rotate;
-    var unit = typeof val === "string" && val.includes("deg") ? "" : "deg";
-    parts.push(`rotate(${val}${unit})`);
-  }
-  if (style.rotateX !== void 0) {
-    parts.push(`rotateX(${style.rotateX}deg)`);
-  }
-  if (style.rotateY !== void 0) {
-    parts.push(`rotateY(${style.rotateY}deg)`);
-  }
-  if (style.rotateZ !== void 0) {
-    parts.push(`rotateZ(${style.rotateZ}deg)`);
-  }
-  if (style.skewX !== void 0) {
-    parts.push(`skewX(${style.skewX}deg)`);
-  }
-  if (style.skewY !== void 0) {
-    parts.push(`skewY(${style.skewY}deg)`);
-  }
-  return parts.join(" ");
+function readComputedProperties(node, properties) {
+	var computed = getComputedStyle(node);
+	var values = {};
+	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+	try {
+		for (var _iterator = properties[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+			var property = _step.value;
+			var value = computed.getPropertyValue(property);
+			if (value) values[property] = value;
+		}
+	} catch (err) {
+		_didIteratorError = true;
+		_iteratorError = err;
+	} finally {
+		try {
+			if (!_iteratorNormalCompletion && _iterator.return != null) {
+				_iterator.return();
+			}
+		} finally {
+			if (_didIteratorError) {
+				throw _iteratorError;
+			}
+		}
+	}
+	return values;
 }
-function applyStylesToNode(node, style) {
-  if (!style) return;
-  var transformStr = buildTransformString(style);
-  if (transformStr) {
-    node.style.transform = transformStr;
-  }
-  var _iteratorNormalCompletion = true,
-    _didIteratorError = false,
-    _iteratorError = void 0;
-  try {
-    for (var _iterator = Object.entries(style)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-      var [key, value] = _step.value;
-      if (TRANSFORM_KEYS.includes(key)) continue;
-      if (value === void 0) continue;
-      if (key === "opacity") {
-        node.style.opacity = String(value);
-      } else if (key === "backgroundColor") {
-        node.style.backgroundColor = String(value);
-      } else if (key === "color") {
-        node.style.color = String(value);
-      } else {
-        node.style[key] = typeof value === "number" ? `${value}px` : String(value);
-      }
-    }
-  } catch (err) {
-    _didIteratorError = true;
-    _iteratorError = err;
-  } finally {
-    try {
-      if (!_iteratorNormalCompletion && _iterator.return != null) {
-        _iterator.return();
-      }
-    } finally {
-      if (_didIteratorError) {
-        throw _iteratorError;
-      }
-    }
-  }
+function applyCSSProperties(node, values) {
+	for (var property in values) {
+		node.style.setProperty(property, values[property]);
+	}
+}
+function clearCSSProperties(node, properties) {
+	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+	try {
+		for (var _iterator = properties[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+			var property = _step.value;
+			node.style.removeProperty(property);
+		}
+	} catch (err) {
+		_didIteratorError = true;
+		_iteratorError = err;
+	} finally {
+		try {
+			if (!_iteratorNormalCompletion && _iterator.return != null) {
+				_iterator.return();
+			}
+		} finally {
+			if (_didIteratorError) {
+				throw _iteratorError;
+			}
+		}
+	}
 }
 function createAnimations(animations) {
-  var reactionListeners = /* @__PURE__ */new WeakMap();
-  return {
-    animations,
-    usePresence,
-    ResetPresence,
-    inputStyle: "css",
-    outputStyle: "css",
-    useAnimatedNumber(initial) {
-      var [val, setVal] = React.useState(initial);
-      var finishTimerRef = React.useRef(null);
-      return {
-        getInstance() {
-          return setVal;
-        },
-        getValue() {
-          return val;
-        },
-        setValue(next, config, onFinish) {
-          setVal(next);
-          if (finishTimerRef.current) {
-            clearTimeout(finishTimerRef.current);
-            finishTimerRef.current = null;
-          }
-          if (onFinish) {
-            if (!config || config.type === "direct" || config.type === "timing" && config.duration === 0) {
-              onFinish();
-            } else {
-              var duration = config.type === "timing" ? config.duration : 300;
-              finishTimerRef.current = setTimeout(onFinish, duration);
-            }
-          }
-          var listeners = reactionListeners.get(setVal);
-          if (listeners) {
-            listeners.forEach(function (listener) {
-              return listener(next);
-            });
-          }
-        },
-        stop() {
-          if (finishTimerRef.current) {
-            clearTimeout(finishTimerRef.current);
-            finishTimerRef.current = null;
-          }
-        }
-      };
-    },
-    useAnimatedNumberReaction(param, onValue) {
-      var {
-        value
-      } = param;
-      React.useEffect(function () {
-        var instance = value.getInstance();
-        var queue = reactionListeners.get(instance);
-        if (!queue) {
-          var next = /* @__PURE__ */new Set();
-          reactionListeners.set(instance, next);
-          queue = next;
-        }
-        queue.add(onValue);
-        return function () {
-          queue === null || queue === void 0 ? void 0 : queue.delete(onValue);
-        };
-      }, []);
-    },
-    useAnimatedNumberStyle(val, getStyle) {
-      return getStyle(val.getValue());
-    },
-    useAnimatedNumbersStyle(vals, getStyle) {
-      return getStyle(...vals.map(function (v) {
-        return v.getValue();
-      }));
-    },
-    // @ts-ignore - styleState is added by createComponent
-    useAnimations: function (param) {
-      var {
-        props,
-        presence,
-        style,
-        componentState,
-        stateRef,
-        styleState
-      } = param;
-      var _normalized_config;
-      var isHydrating = componentState.unmounted === true;
-      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 wasEnteringRef = React.useRef(isEntering);
-      var justFinishedEntering = wasEnteringRef.current && !isEntering;
-      React.useEffect(function () {
-        wasEnteringRef.current = isEntering;
-      });
-      var exitCycleIdRef = React.useRef(0);
-      var exitCompletedRef = React.useRef(false);
-      var wasExitingRef = React.useRef(false);
-      var exitInterruptedRef = React.useRef(false);
-      var sendExitCompleteRef = React.useRef(sendExitComplete);
-      var lastNonExitingStyleRef = React.useRef({});
-      sendExitCompleteRef.current = sendExitComplete;
-      var justStartedExiting = isExiting && !wasExitingRef.current;
-      var justStoppedExiting = !isExiting && wasExitingRef.current;
-      if (justStartedExiting) {
-        exitCycleIdRef.current++;
-        exitCompletedRef.current = false;
-      }
-      if (justStoppedExiting) {
-        exitCycleIdRef.current++;
-        exitInterruptedRef.current = true;
-      }
-      React.useEffect(function () {
-        wasExitingRef.current = isExiting;
-      });
-      useIsomorphicLayoutEffect(function () {
-        var host = stateRef.current.host;
-        if (isExiting || !host) return;
-        var computedStyle = getComputedStyle(host);
-        lastNonExitingStyleRef.current = {
-          opacity: computedStyle.opacity
-        };
-      });
-      var _styleState_effectiveTransition;
-      var effectiveTransition = (_styleState_effectiveTransition = styleState === null || styleState === void 0 ? void 0 : styleState.effectiveTransition) !== null && _styleState_effectiveTransition !== void 0 ? _styleState_effectiveTransition : props.transition;
-      var normalized = normalizeTransition(effectiveTransition);
-      var animationState = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default";
-      var effectiveAnimationKey = getEffectiveAnimation(normalized, animationState);
-      var defaultAnimation = effectiveAnimationKey ? animations[effectiveAnimationKey] : null;
-      var animatedProperties = getAnimatedProperties(normalized);
-      var hasDefault = normalized.default !== null || normalized.enter !== null || normalized.exit !== null;
-      var hasPerPropertyConfigs = animatedProperties.length > 0;
-      var keys;
-      if (props.animateOnly) {
-        keys = props.animateOnly;
-      } else if (hasPerPropertyConfigs && !hasDefault) {
-        keys = animatedProperties;
-      } else if (hasPerPropertyConfigs && hasDefault) {
-        keys = ["all", ...animatedProperties];
-      } else {
-        keys = ["all"];
-      }
-      useIsomorphicLayoutEffect(function () {
-        var _normalized_config2;
-        var host = stateRef.current.host;
-        if (!sendExitComplete || !isExiting || !host) return;
-        var node = host;
-        var cycleId = exitCycleIdRef.current;
-        var completeExit = function () {
-          var _sendExitCompleteRef_current;
-          if (cycleId !== exitCycleIdRef.current) return;
-          if (exitCompletedRef.current) return;
-          exitCompletedRef.current = true;
-          (_sendExitCompleteRef_current = sendExitCompleteRef.current) === null || _sendExitCompleteRef_current === void 0 ? void 0 : _sendExitCompleteRef_current.call(sendExitCompleteRef);
-        };
-        if (keys.length === 0) {
-          completeExit();
-          return;
-        }
-        var rafId;
-        var wasInterrupted = exitInterruptedRef.current;
-        var ignoreCancelEvents = wasInterrupted;
-        var enterStyle = props.enterStyle;
-        var exitStyle = props.exitStyle;
-        var delayStr2 = normalized.delay ? ` ${normalized.delay}ms` : "";
-        var durationOverride2 = (_normalized_config2 = normalized.config) === null || _normalized_config2 === void 0 ? void 0 : _normalized_config2.duration;
-        var exitTransitionString = keys.map(function (key2) {
-          var propAnimation = normalized.properties[key2];
-          var animationValue2 = null;
-          if (typeof propAnimation === "string") {
-            animationValue2 = animations[propAnimation];
-          } else if (propAnimation && (typeof propAnimation === "undefined" ? "undefined" : _type_of(propAnimation)) === "object" && propAnimation.type) {
-            animationValue2 = animations[propAnimation.type];
-          } else if (defaultAnimation) {
-            animationValue2 = defaultAnimation;
-          }
-          if (animationValue2 && durationOverride2) {
-            animationValue2 = applyDurationOverride(animationValue2, durationOverride2);
-          }
-          return animationValue2 ? `${key2} ${animationValue2}${delayStr2}` : null;
-        }).filter(Boolean).join(", ");
-        var getResetValue = function (key2) {
-          if (key2 === "opacity") {
-            var _style_opacity, _ref, _ref1;
-            return (_ref1 = (_ref = (_style_opacity = style === null || style === void 0 ? void 0 : style.opacity) !== null && _style_opacity !== void 0 ? _style_opacity : props.opacity) !== null && _ref !== void 0 ? _ref : lastNonExitingStyleRef.current.opacity) !== null && _ref1 !== void 0 ? _ref1 : 1;
-          }
-          if (TRANSFORM_KEYS.includes(key2)) {
-            return key2 === "scale" || key2 === "scaleX" || key2 === "scaleY" ? 1 : 0;
-          }
-          return enterStyle === null || enterStyle === void 0 ? void 0 : enterStyle[key2];
-        };
-        if (wasInterrupted) {
-          exitInterruptedRef.current = false;
-          node.style.transition = "none";
-          if (exitStyle) {
-            var resetStyle = {};
-            var _iteratorNormalCompletion = true,
-              _didIteratorError = false,
-              _iteratorError = void 0;
-            try {
-              for (var _iterator = Object.keys(exitStyle)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-                var key = _step.value;
-                var resetValue = getResetValue(key);
-                if (resetValue !== void 0) {
-                  resetStyle[key] = resetValue;
-                }
-              }
-            } catch (err) {
-              _didIteratorError = true;
-              _iteratorError = err;
-            } finally {
-              try {
-                if (!_iteratorNormalCompletion && _iterator.return != null) {
-                  _iterator.return();
-                }
-              } finally {
-                if (_didIteratorError) {
-                  throw _iteratorError;
-                }
-              }
-            }
-            applyStylesToNode(node, resetStyle);
-          } else {
-            node.style.opacity = "1";
-            node.style.transform = "none";
-          }
-          void node.offsetHeight;
-        } else if (exitStyle) {
-          ignoreCancelEvents = true;
-          node.style.transition = "none";
-          var resetStyle1 = {};
-          var _iteratorNormalCompletion1 = true,
-            _didIteratorError1 = false,
-            _iteratorError1 = void 0;
-          try {
-            for (var _iterator1 = Object.keys(exitStyle)[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
-              var key1 = _step1.value;
-              var resetValue1 = getResetValue(key1);
-              if (resetValue1 !== void 0) {
-                resetStyle1[key1] = resetValue1;
-              }
-            }
-          } catch (err) {
-            _didIteratorError1 = true;
-            _iteratorError1 = err;
-          } finally {
-            try {
-              if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
-                _iterator1.return();
-              }
-            } finally {
-              if (_didIteratorError1) {
-                throw _iteratorError1;
-              }
-            }
-          }
-          applyStylesToNode(node, resetStyle1);
-          void node.offsetHeight;
-          rafId = requestAnimationFrame(function () {
-            if (cycleId !== exitCycleIdRef.current) return;
-            node.style.transition = exitTransitionString;
-            void node.offsetHeight;
-            applyStylesToNode(node, exitStyle);
-            ignoreCancelEvents = false;
-          });
-        }
-        var maxDuration = defaultAnimation ? extractDuration(defaultAnimation) : 200;
-        var animationConfigs = getAnimationConfigsForKeys(normalized, animations, keys, defaultAnimation);
-        var _iteratorNormalCompletion2 = true,
-          _didIteratorError2 = false,
-          _iteratorError2 = void 0;
-        try {
-          for (var _iterator2 = animationConfigs.values()[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
-            var animationValue = _step2.value;
-            if (animationValue) {
-              var duration = extractDuration(animationValue);
-              if (duration > maxDuration) {
-                maxDuration = duration;
-              }
-            }
-          }
-        } catch (err) {
-          _didIteratorError2 = true;
-          _iteratorError2 = err;
-        } finally {
-          try {
-            if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
-              _iterator2.return();
-            }
-          } finally {
-            if (_didIteratorError2) {
-              throw _iteratorError2;
-            }
-          }
-        }
-        var _normalized_delay;
-        var delay = (_normalized_delay = normalized.delay) !== null && _normalized_delay !== void 0 ? _normalized_delay : 0;
-        var fallbackTimeout = maxDuration + delay;
-        var timeoutId = setTimeout(function () {
-          completeExit();
-        }, fallbackTimeout);
-        var transitioningProps = new Set(keys);
-        var completedCount = 0;
-        var onFinishAnimation = function (event) {
-          if (event.target !== node) return;
-          var eventProp = event.propertyName;
-          if (transitioningProps.has(eventProp) || eventProp === "all") {
-            completedCount++;
-            if (completedCount >= transitioningProps.size) {
-              clearTimeout(timeoutId);
-              completeExit();
-            }
-          }
-        };
-        var onCancelAnimation = function () {
-          if (ignoreCancelEvents) return;
-          clearTimeout(timeoutId);
-          completeExit();
-        };
-        node.addEventListener("transitionend", onFinishAnimation);
-        node.addEventListener("transitioncancel", onCancelAnimation);
-        if (wasInterrupted) {
-          rafId = requestAnimationFrame(function () {
-            if (cycleId !== exitCycleIdRef.current) return;
-            node.style.transition = exitTransitionString;
-            void node.offsetHeight;
-            applyStylesToNode(node, exitStyle);
-            ignoreCancelEvents = false;
-          });
-        }
-        return function () {
-          clearTimeout(timeoutId);
-          if (rafId !== void 0) cancelAnimationFrame(rafId);
-          node.removeEventListener("transitionend", onFinishAnimation);
-          node.removeEventListener("transitioncancel", onCancelAnimation);
-          node.style.transition = "";
-        };
-      }, [isExiting]);
-      if (isHydrating) {
-        return null;
-      }
-      if (!hasNormalizedAnimation(normalized)) {
-        return null;
-      }
-      if (Array.isArray(style.transform)) {
-        style.transform = transformsToString(style.transform);
-      }
-      var delayStr = normalized.delay ? ` ${normalized.delay}ms` : "";
-      var durationOverride = (_normalized_config = normalized.config) === null || _normalized_config === void 0 ? void 0 : _normalized_config.duration;
-      style.transition = keys.map(function (key) {
-        var propAnimation = normalized.properties[key];
-        var animationValue = null;
-        if (typeof propAnimation === "string") {
-          animationValue = animations[propAnimation];
-        } else if (propAnimation && (typeof propAnimation === "undefined" ? "undefined" : _type_of(propAnimation)) === "object" && propAnimation.type) {
-          animationValue = animations[propAnimation.type];
-        } else if (defaultAnimation) {
-          animationValue = defaultAnimation;
-        }
-        if (animationValue && durationOverride) {
-          animationValue = applyDurationOverride(animationValue, durationOverride);
-        }
-        return animationValue ? `${key} ${animationValue}${delayStr}` : null;
-      }).filter(Boolean).join(", ");
-      if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
-        console.info("CSS animation", {
-          props,
-          animations,
-          normalized,
-          defaultAnimation,
-          style,
-          isEntering,
-          isExiting
-        });
-      }
-      return {
-        style,
-        className: isEntering ? "t_unmounted" : ""
-      };
-    }
-  };
+	return {
+		animations,
+		usePresence,
+		ResetPresence,
+		inputStyle: "css",
+		outputStyle: "css",
+		useAnimatedNumber,
+		useAnimatedNumberReaction,
+		useAnimatedNumberStyle,
+		useAnimatedNumbersStyle,
+		useAnimations: function(param) {
+			var { props, presence, style, componentState, stateRef, styleState, onTransition } = param;
+			var _styleState_programLifecycleStyleKeys;
+			var isHydrating = componentState.unmounted === true;
+			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 onTransitionRef = React.useRef(onTransition);
+			onTransitionRef.current = onTransition;
+			var emit = function(phase, cause, finished) {
+				var _onTransitionRef_current;
+				(_onTransitionRef_current = onTransitionRef.current) === null || _onTransitionRef_current === void 0 ? void 0 : _onTransitionRef_current.call(onTransitionRef, phase === "end" ? {
+					phase,
+					cause,
+					finished
+				} : {
+					phase,
+					cause
+				});
+			};
+			var wasEnteringRef = React.useRef(isEntering);
+			var justFinishedEntering = wasEnteringRef.current && !isEntering;
+			React.useEffect(function() {
+				wasEnteringRef.current = isEntering;
+			});
+			var exitCycleIdRef = React.useRef(0);
+			var exitCompletedRef = React.useRef(false);
+			var wasExitingRef = React.useRef(false);
+			var sendExitCompleteRef = React.useRef(sendExitComplete);
+			var lastMountedStyleRef = React.useRef({});
+			sendExitCompleteRef.current = sendExitComplete;
+			var exitCSSProperties = getLifecycleCSSProperties(styleState === null || styleState === void 0 ? void 0 : (_styleState_programLifecycleStyleKeys = styleState.programLifecycleStyleKeys) === null || _styleState_programLifecycleStyleKeys === void 0 ? void 0 : _styleState_programLifecycleStyleKeys.exit);
+			var exitCSSPropertiesSignature = exitCSSProperties.join("\0");
+			var enterCycleIdRef = React.useRef(0);
+			var enterStartedRef = React.useRef(false);
+			var updateCycleIdRef = React.useRef(0);
+			var updateInFlightRef = React.useRef(false);
+			var prevUpdateSigRef = React.useRef(null);
+			var exitStartedRef = React.useRef(false);
+			var justStartedExiting = isExiting && !wasExitingRef.current;
+			var justStoppedExiting = !isExiting && wasExitingRef.current;
+			if (justStartedExiting) {
+				exitCycleIdRef.current++;
+				exitCompletedRef.current = false;
+			}
+			if (justStoppedExiting) {
+				exitCycleIdRef.current++;
+			}
+			React.useEffect(function() {
+				wasExitingRef.current = isExiting;
+			});
+			useIsomorphicLayoutEffect(function() {
+				if (isExiting) return;
+				var host = stateRef.current.host;
+				if (!host || !exitCSSProperties.length) {
+					lastMountedStyleRef.current = {};
+					return;
+				}
+				var node = host;
+				var capture = function() {
+					if (stateRef.current.host !== node || wasExitingRef.current) return;
+					lastMountedStyleRef.current = readComputedProperties(node, exitCSSProperties);
+				};
+				if (justFinishedEntering) {
+					void waitForAnimations(node).then(capture);
+				} else {
+					capture();
+				}
+			}, [
+				isExiting,
+				justFinishedEntering,
+				exitCSSPropertiesSignature
+			]);
+			var _styleState_effectiveTransition;
+			var effectiveTransition = (_styleState_effectiveTransition = styleState === null || styleState === void 0 ? void 0 : styleState.effectiveTransition) !== null && _styleState_effectiveTransition !== void 0 ? _styleState_effectiveTransition : props.transition;
+			var normalized = normalizeTransition(effectiveTransition);
+			var animationState = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default";
+			var effectiveAnimationKey = getEffectiveAnimation(normalized, animationState);
+			var defaultAnimation = effectiveAnimationKey ? animations[effectiveAnimationKey] : null;
+			var animatedProperties = getAnimatedProperties(normalized);
+			var hasDefault = normalized.default !== null || normalized.enter !== null || normalized.exit !== null;
+			var hasPerPropertyConfigs = animatedProperties.length > 0;
+			var keys;
+			if (props.animateOnly) {
+				keys = props.animateOnly;
+			} else if (hasPerPropertyConfigs && !hasDefault) {
+				keys = animatedProperties;
+			} else if (hasPerPropertyConfigs && hasDefault) {
+				keys = ["all", ...animatedProperties];
+			} else {
+				keys = ["all"];
+			}
+			var transition;
+			var getTransition = function() {
+				var _normalized_config;
+				if (transition !== void 0) return transition;
+				var delay = normalized.delay ? ` ${normalized.delay}ms` : "";
+				var duration = (_normalized_config = normalized.config) === null || _normalized_config === void 0 ? void 0 : _normalized_config.duration;
+				transition = keys.flatMap(function(key) {
+					var propertyAnimation = normalized.properties[key];
+					var animation = defaultAnimation;
+					if (typeof propertyAnimation === "string") {
+						animation = animations[propertyAnimation];
+					} else if (propertyAnimation === null || propertyAnimation === void 0 ? void 0 : propertyAnimation.type) {
+						animation = animations[propertyAnimation.type];
+					}
+					if (animation && duration) {
+						animation = applyDurationOverride(animation, duration);
+					}
+					return animation ? getCSSProperties(key).map(function(property) {
+						return `${property} ${animation}${delay}`;
+					}) : [];
+				}).join(", ");
+				return transition;
+			};
+			useIsomorphicLayoutEffect(function() {
+				var host = stateRef.current.host;
+				if (!sendExitComplete || !isExiting || !host) return;
+				var node = host;
+				var cycleId = exitCycleIdRef.current;
+				if (!exitStartedRef.current) {
+					exitStartedRef.current = true;
+					emit("start", "exit");
+				}
+				var completeExit = function() {
+					var finished = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true;
+					var _sendExitCompleteRef_current;
+					if (cycleId !== exitCycleIdRef.current) return;
+					if (exitCompletedRef.current) return;
+					exitCompletedRef.current = true;
+					if (exitStartedRef.current) {
+						exitStartedRef.current = false;
+						emit("end", "exit", finished);
+					}
+					(_sendExitCompleteRef_current = sendExitCompleteRef.current) === null || _sendExitCompleteRef_current === void 0 ? void 0 : _sendExitCompleteRef_current.call(sendExitCompleteRef);
+				};
+				if (keys.length === 0) {
+					completeExit();
+					return;
+				}
+				var rafId;
+				var disposed = false;
+				var mountedStyle = lastMountedStyleRef.current;
+				var canRestart = exitCSSProperties.length > 0 && Object.keys(mountedStyle).length > 0;
+				var exitTarget;
+				if (canRestart) {
+					node.style.transition = "none";
+					exitTarget = readComputedProperties(node, exitCSSProperties);
+					applyCSSProperties(node, mountedStyle);
+					void node.offsetHeight;
+					rafId = requestAnimationFrame(function() {
+						if (cycleId !== exitCycleIdRef.current) return;
+						node.style.transition = getTransition();
+						void node.offsetHeight;
+						applyCSSProperties(node, exitTarget);
+					});
+				}
+				void waitForAnimations(node).then(function(finished) {
+					if (!disposed) completeExit(finished);
+				});
+				return function() {
+					disposed = true;
+					if (rafId !== void 0) cancelAnimationFrame(rafId);
+					clearCSSProperties(node, exitCSSProperties);
+					node.style.transition = "";
+				};
+			}, [isExiting, exitCSSPropertiesSignature]);
+			var styleSignature = onTransition ? (function() {
+				var { transition: _t, ...rest } = style;
+				var _styleState_classNames;
+				return `${JSON.stringify((_styleState_classNames = styleState === null || styleState === void 0 ? void 0 : styleState.classNames) !== null && _styleState_classNames !== void 0 ? _styleState_classNames : null)}|${JSON.stringify(rest)}`;
+			})() : "";
+			useIsomorphicLayoutEffect(function() {
+				var host = stateRef.current.host;
+				if (!onTransitionRef.current || isExiting || !justFinishedEntering || !host) {
+					return;
+				}
+				var node = host;
+				var cycleId = ++enterCycleIdRef.current;
+				enterStartedRef.current = true;
+				emit("start", "enter");
+				void waitForAnimations(node).then(function(finished) {
+					if (cycleId !== enterCycleIdRef.current || !enterStartedRef.current) return;
+					enterStartedRef.current = false;
+					emit("end", "enter", finished);
+				});
+			}, [justFinishedEntering, isExiting]);
+			useIsomorphicLayoutEffect(function() {
+				var host = stateRef.current.host;
+				if (!onTransitionRef.current || isEntering || justFinishedEntering || isExiting || !host) {
+					prevUpdateSigRef.current = styleSignature;
+					return;
+				}
+				if (prevUpdateSigRef.current === null) {
+					prevUpdateSigRef.current = styleSignature;
+					return;
+				}
+				if (styleSignature === prevUpdateSigRef.current) return;
+				prevUpdateSigRef.current = styleSignature;
+				var node = host;
+				if (updateInFlightRef.current) {
+					emit("end", "update", false);
+				}
+				updateInFlightRef.current = true;
+				var cycleId = ++updateCycleIdRef.current;
+				emit("start", "update");
+				void waitForAnimations(node).then(function(finished) {
+					if (cycleId !== updateCycleIdRef.current) return;
+					updateInFlightRef.current = false;
+					emit("end", "update", finished);
+				});
+			}, [
+				styleSignature,
+				isEntering,
+				justFinishedEntering,
+				isExiting
+			]);
+			useIsomorphicLayoutEffect(function() {
+				if (justStartedExiting && enterStartedRef.current) {
+					enterCycleIdRef.current++;
+					enterStartedRef.current = false;
+					emit("end", "enter", false);
+				}
+				if (justStoppedExiting && exitStartedRef.current && !exitCompletedRef.current) {
+					exitStartedRef.current = false;
+					emit("end", "exit", false);
+				}
+			}, [justStartedExiting, justStoppedExiting]);
+			if (isHydrating) {
+				return null;
+			}
+			if (!hasAnimation(normalized)) {
+				return null;
+			}
+			if (Array.isArray(style.transform)) {
+				style.transform = transformsToString(style.transform);
+			}
+			style.transition = getTransition();
+			if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+				console.info("CSS animation", {
+					props,
+					animations,
+					normalized,
+					defaultAnimation,
+					style,
+					isEntering,
+					isExiting
+				});
+			}
+			return {
+				style,
+				className: isEntering ? "t_unmounted" : ""
+			};
+		}
+	};
 }
+
 export { createAnimations };
 //# sourceMappingURL=createAnimations.native.js.map