@tamagui/animations-css 1.0.1-beta.20 → 1.0.1-beta.201

package/dist/cjs/createAnimations.js

@@ -1,22 +1,8 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -35,27 +21,78 @@ __export(createAnimations_exports, {
   createAnimations: () => createAnimations
 });
 module.exports = __toCommonJS(createAnimations_exports);
+var import_core = require("@tamagui/core");
+var import_use_presence = require("@tamagui/use-presence");
+var import_react = require("react");
 function createAnimations(animations) {
   return {
-    avoidClasses: false,
-    View: "div",
-    Text: "span",
+    View: import_core.Stack,
+    Text: import_core.Text,
     animations,
-    useAnimations: (props, { getStyle }) => {
-      const animation = animations[props.animation];
+    useAnimatedNumber(initial) {
+      const val = (0, import_react.useRef)(initial);
+      return {
+        getInstance() {
+          return val;
+        },
+        getValue() {
+          return val.current;
+        },
+        setValue(next) {
+          val.current = next;
+        },
+        stop() {
+        }
+      };
+    },
+    useAnimatedNumberReaction(val, reaction) {
+    },
+    useAnimatedNumberStyle(val, getStyle) {
+      return getStyle(val.getValue());
+    },
+    useAnimations: (props, { getStyle, state, hostRef }) => {
+      const [isPresent, sendExitComplete] = (0, import_use_presence.usePresence)();
+      const presence = (0, import_react.useContext)(import_use_presence.PresenceContext);
+      const isExiting = isPresent === false;
+      const isEntering = !state.mounted;
+      const animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation;
+      const animation = animations[animationKey];
       if (!animation) {
-        throw new Error(`no animation found: ${props.animation}`);
+        return null;
       }
       const keys = props.animateOnly ? props.animateOnly.join(" ") : "all";
-      return {
-        style: __spreadValues({
-          transition: `${keys} ${animation}`
-        }, getStyle())
+      (0, import_core.useIsomorphicLayoutEffect)(() => {
+        if (!sendExitComplete || !isExiting || !hostRef.current)
+          return;
+        const node = hostRef.current;
+        const onFinishAnimation = () => {
+          sendExitComplete == null ? void 0 : sendExitComplete();
+        };
+        node.addEventListener("transitionend", onFinishAnimation);
+        node.addEventListener("transitioncancel", onFinishAnimation);
+        return () => {
+          node.removeEventListener("transitionend", onFinishAnimation);
+          node.addEventListener("transitioncancel", onFinishAnimation);
+        };
+      }, [sendExitComplete, isExiting]);
+      const style = {
+        transition: `${keys} ${animation}`,
+        ...getStyle({
+          isEntering,
+          isExiting,
+          exitVariant: presence == null ? void 0 : presence.exitVariant,
+          enterVariant: presence == null ? void 0 : presence.enterVariant
+        })
       };
+      if (process.env.NODE_ENV === "development" && props["debug"]) {
+        console.log("CSS animation", style, { isEntering, isExiting });
+      }
+      return (0, import_react.useMemo)(() => {
+        return { style };
+      }, [JSON.stringify(style)]);
     }
   };
 }
-__name(createAnimations, "createAnimations");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   createAnimations

package/dist/cjs/createAnimations.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/createAnimations.tsx"],
-  "sourcesContent": ["import { AnimationDriver } from '@tamagui/core'\n\nexport function createAnimations<A extends Object>(animations: A): AnimationDriver<A> {\n  return {\n    avoidClasses: false,\n    View: 'div',\n    Text: 'span',\n    animations,\n    useAnimations: (props, { getStyle }) => {\n      const animation = animations[props.animation]\n      if (!animation) {\n        throw new Error(`no animation found: ${props.animation}`)\n      }\n\n      const keys = props.animateOnly ? props.animateOnly.join(' ') : 'all'\n\n      return {\n        style: {\n          transition: `${keys} ${animation}`,\n          ...getStyle(),\n        },\n      }\n    },\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,0BAA4C,YAAmC;AACpF,SAAO;AAAA,IACL,cAAc;AAAA,IACd,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA,eAAe,CAAC,OAAO,EAAE,eAAe;AACtC,YAAM,YAAY,WAAW,MAAM;AACnC,UAAI,CAAC,WAAW;AACd,cAAM,IAAI,MAAM,uBAAuB,MAAM,WAAW;AAAA,MAC1D;AAEA,YAAM,OAAO,MAAM,cAAc,MAAM,YAAY,KAAK,GAAG,IAAI;AAE/D,aAAO;AAAA,QACL,OAAO;AAAA,UACL,YAAY,GAAG,QAAQ;AAAA,WACpB,SAAS;AAAA,MAEhB;AAAA,IACF;AAAA,EACF;AACF;AAtBgB;",
+  "sourcesContent": ["import { AnimationDriver, Stack, Text, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport { PresenceContext, usePresence } from '@tamagui/use-presence'\nimport { useContext, useMemo, useRef } from 'react'\n\nexport function createAnimations<A extends Object>(animations: A): AnimationDriver<A> {\n  return {\n    View: Stack,\n    Text: Text,\n    animations,\n\n    useAnimatedNumber(initial) {\n      const val = useRef(initial)\n      return {\n        getInstance() {\n          return val\n        },\n        getValue() {\n          return val.current\n        },\n        setValue(next) {\n          val.current = next\n        },\n        stop() {},\n      }\n    },\n\n    useAnimatedNumberReaction(val, reaction) {\n      // TODO use event listeners, would need access to the corresponsing node...\n    },\n\n    useAnimatedNumberStyle(val, getStyle) {\n      return getStyle(val.getValue())\n    },\n\n    useAnimations: (props, { getStyle, state, hostRef }) => {\n      const [isPresent, sendExitComplete] = usePresence()\n      const presence = useContext(PresenceContext)\n      const isExiting = isPresent === false\n      const isEntering = !state.mounted\n      const animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation\n      const animation = animations[animationKey as any]\n      if (!animation) {\n        return null\n      }\n\n      const keys = props.animateOnly ? props.animateOnly.join(' ') : 'all'\n\n      useIsomorphicLayoutEffect(() => {\n        if (!sendExitComplete || !isExiting || !hostRef.current) return\n        const node = hostRef.current as HTMLElement\n        const onFinishAnimation = () => {\n          sendExitComplete?.()\n        }\n        node.addEventListener('transitionend', onFinishAnimation)\n        node.addEventListener('transitioncancel', onFinishAnimation)\n        return () => {\n          node.removeEventListener('transitionend', onFinishAnimation)\n          node.addEventListener('transitioncancel', onFinishAnimation)\n        }\n      }, [sendExitComplete, isExiting])\n\n      const style = {\n        transition: `${keys} ${animation}`,\n        ...getStyle({\n          isEntering,\n          isExiting,\n          exitVariant: presence?.exitVariant,\n          enterVariant: presence?.enterVariant,\n        }),\n      }\n\n      if (process.env.NODE_ENV === 'development' && props['debug']) {\n        // eslint-disable-next-line no-console\n        console.log('CSS animation', style, { isEntering, isExiting })\n      }\n\n      return useMemo(() => {\n        return { style }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n      }, [JSON.stringify(style)])\n    },\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAwE;AACxE,0BAA6C;AAC7C,mBAA4C;AAErC,SAAS,iBAAmC,YAAmC;AACpF,SAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IAEA,kBAAkB,SAAS;AACzB,YAAM,UAAM,qBAAO,OAAO;AAC1B,aAAO;AAAA,QACL,cAAc;AACZ,iBAAO;AAAA,QACT;AAAA,QACA,WAAW;AACT,iBAAO,IAAI;AAAA,QACb;AAAA,QACA,SAAS,MAAM;AACb,cAAI,UAAU;AAAA,QAChB;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,KAAK,UAAU;AAAA,IAEzC;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,OAAO,EAAE,UAAU,OAAO,QAAQ,MAAM;AACtD,YAAM,CAAC,WAAW,gBAAgB,QAAI,iCAAY;AAClD,YAAM,eAAW,yBAAW,mCAAe;AAC3C,YAAM,YAAY,cAAc;AAChC,YAAM,aAAa,CAAC,MAAM;AAC1B,YAAM,eAAe,MAAM,QAAQ,MAAM,SAAS,IAAI,MAAM,UAAU,KAAK,MAAM;AACjF,YAAM,YAAY,WAAW;AAC7B,UAAI,CAAC,WAAW;AACd,eAAO;AAAA,MACT;AAEA,YAAM,OAAO,MAAM,cAAc,MAAM,YAAY,KAAK,GAAG,IAAI;AAE/D,iDAA0B,MAAM;AAC9B,YAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,QAAQ;AAAS;AACzD,cAAM,OAAO,QAAQ;AACrB,cAAM,oBAAoB,MAAM;AAC9B;AAAA,QACF;AACA,aAAK,iBAAiB,iBAAiB,iBAAiB;AACxD,aAAK,iBAAiB,oBAAoB,iBAAiB;AAC3D,eAAO,MAAM;AACX,eAAK,oBAAoB,iBAAiB,iBAAiB;AAC3D,eAAK,iBAAiB,oBAAoB,iBAAiB;AAAA,QAC7D;AAAA,MACF,GAAG,CAAC,kBAAkB,SAAS,CAAC;AAEhC,YAAM,QAAQ;AAAA,QACZ,YAAY,GAAG,QAAQ;AAAA,QACvB,GAAG,SAAS;AAAA,UACV;AAAA,UACA;AAAA,UACA,aAAa,qCAAU;AAAA,UACvB,cAAc,qCAAU;AAAA,QAC1B,CAAC;AAAA,MACH;AAEA,UAAI,QAAQ,IAAI,aAAa,iBAAiB,MAAM,UAAU;AAE5D,gBAAQ,IAAI,iBAAiB,OAAO,EAAE,YAAY,UAAU,CAAC;AAAA,MAC/D;AAEA,iBAAO,sBAAQ,MAAM;AACnB,eAAO,EAAE,MAAM;AAAA,MAEjB,GAAG,CAAC,KAAK,UAAU,KAAK,CAAC,CAAC;AAAA,IAC5B;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/cjs/index.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/dist/cjs/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/index.tsx"],
   "sourcesContent": ["export * from './createAnimations'\n"],
-  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,+BAAd;",
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,+BAAd;",
   "names": []
 }

package/dist/esm/createAnimations.js

@@ -1,27 +1,75 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { Stack, Text, useIsomorphicLayoutEffect } from "@tamagui/core";
+import { PresenceContext, usePresence } from "@tamagui/use-presence";
+import { useContext, useMemo, useRef } from "react";
 function createAnimations(animations) {
   return {
-    avoidClasses: false,
-    View: "div",
-    Text: "span",
+    View: Stack,
+    Text,
     animations,
-    useAnimations: (props, { getStyle }) => {
-      const animation = animations[props.animation];
+    useAnimatedNumber(initial) {
+      const val = useRef(initial);
+      return {
+        getInstance() {
+          return val;
+        },
+        getValue() {
+          return val.current;
+        },
+        setValue(next) {
+          val.current = next;
+        },
+        stop() {
+        }
+      };
+    },
+    useAnimatedNumberReaction(val, reaction) {
+    },
+    useAnimatedNumberStyle(val, getStyle) {
+      return getStyle(val.getValue());
+    },
+    useAnimations: (props, { getStyle, state, hostRef }) => {
+      const [isPresent, sendExitComplete] = usePresence();
+      const presence = useContext(PresenceContext);
+      const isExiting = isPresent === false;
+      const isEntering = !state.mounted;
+      const animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation;
+      const animation = animations[animationKey];
       if (!animation) {
-        throw new Error(`no animation found: ${props.animation}`);
+        return null;
       }
       const keys = props.animateOnly ? props.animateOnly.join(" ") : "all";
-      return {
-        style: {
-          transition: `${keys} ${animation}`,
-          ...getStyle()
-        }
+      useIsomorphicLayoutEffect(() => {
+        if (!sendExitComplete || !isExiting || !hostRef.current)
+          return;
+        const node = hostRef.current;
+        const onFinishAnimation = () => {
+          sendExitComplete == null ? void 0 : sendExitComplete();
+        };
+        node.addEventListener("transitionend", onFinishAnimation);
+        node.addEventListener("transitioncancel", onFinishAnimation);
+        return () => {
+          node.removeEventListener("transitionend", onFinishAnimation);
+          node.addEventListener("transitioncancel", onFinishAnimation);
+        };
+      }, [sendExitComplete, isExiting]);
+      const style = {
+        transition: `${keys} ${animation}`,
+        ...getStyle({
+          isEntering,
+          isExiting,
+          exitVariant: presence == null ? void 0 : presence.exitVariant,
+          enterVariant: presence == null ? void 0 : presence.enterVariant
+        })
       };
+      if (process.env.NODE_ENV === "development" && props["debug"]) {
+        console.log("CSS animation", style, { isEntering, isExiting });
+      }
+      return useMemo(() => {
+        return { style };
+      }, [JSON.stringify(style)]);
     }
   };
 }
-__name(createAnimations, "createAnimations");
 export {
   createAnimations
 };

package/dist/esm/createAnimations.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/createAnimations.tsx"],
-  "sourcesContent": ["import { AnimationDriver } from '@tamagui/core'\n\nexport function createAnimations<A extends Object>(animations: A): AnimationDriver<A> {\n  return {\n    avoidClasses: false,\n    View: 'div',\n    Text: 'span',\n    animations,\n    useAnimations: (props, { getStyle }) => {\n      const animation = animations[props.animation]\n      if (!animation) {\n        throw new Error(`no animation found: ${props.animation}`)\n      }\n\n      const keys = props.animateOnly ? props.animateOnly.join(' ') : 'all'\n\n      return {\n        style: {\n          transition: `${keys} ${animation}`,\n          ...getStyle(),\n        },\n      }\n    },\n  }\n}\n"],
-  "mappings": ";;AAEO,0BAA4C,YAAmC;AACpF,SAAO;AAAA,IACL,cAAc;AAAA,IACd,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA,eAAe,CAAC,OAAO,EAAE,eAAe;AACtC,YAAM,YAAY,WAAW,MAAM;AACnC,UAAI,CAAC,WAAW;AACd,cAAM,IAAI,MAAM,uBAAuB,MAAM,WAAW;AAAA,MAC1D;AAEA,YAAM,OAAO,MAAM,cAAc,MAAM,YAAY,KAAK,GAAG,IAAI;AAE/D,aAAO;AAAA,QACL,OAAO;AAAA,UACL,YAAY,GAAG,QAAQ;AAAA,aACpB,SAAS;AAAA,QACd;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAtBgB;",
+  "sourcesContent": ["import { AnimationDriver, Stack, Text, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport { PresenceContext, usePresence } from '@tamagui/use-presence'\nimport { useContext, useMemo, useRef } from 'react'\n\nexport function createAnimations<A extends Object>(animations: A): AnimationDriver<A> {\n  return {\n    View: Stack,\n    Text: Text,\n    animations,\n\n    useAnimatedNumber(initial) {\n      const val = useRef(initial)\n      return {\n        getInstance() {\n          return val\n        },\n        getValue() {\n          return val.current\n        },\n        setValue(next) {\n          val.current = next\n        },\n        stop() {},\n      }\n    },\n\n    useAnimatedNumberReaction(val, reaction) {\n      // TODO use event listeners, would need access to the corresponsing node...\n    },\n\n    useAnimatedNumberStyle(val, getStyle) {\n      return getStyle(val.getValue())\n    },\n\n    useAnimations: (props, { getStyle, state, hostRef }) => {\n      const [isPresent, sendExitComplete] = usePresence()\n      const presence = useContext(PresenceContext)\n      const isExiting = isPresent === false\n      const isEntering = !state.mounted\n      const animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation\n      const animation = animations[animationKey as any]\n      if (!animation) {\n        return null\n      }\n\n      const keys = props.animateOnly ? props.animateOnly.join(' ') : 'all'\n\n      useIsomorphicLayoutEffect(() => {\n        if (!sendExitComplete || !isExiting || !hostRef.current) return\n        const node = hostRef.current as HTMLElement\n        const onFinishAnimation = () => {\n          sendExitComplete?.()\n        }\n        node.addEventListener('transitionend', onFinishAnimation)\n        node.addEventListener('transitioncancel', onFinishAnimation)\n        return () => {\n          node.removeEventListener('transitionend', onFinishAnimation)\n          node.addEventListener('transitioncancel', onFinishAnimation)\n        }\n      }, [sendExitComplete, isExiting])\n\n      const style = {\n        transition: `${keys} ${animation}`,\n        ...getStyle({\n          isEntering,\n          isExiting,\n          exitVariant: presence?.exitVariant,\n          enterVariant: presence?.enterVariant,\n        }),\n      }\n\n      if (process.env.NODE_ENV === 'development' && props['debug']) {\n        // eslint-disable-next-line no-console\n        console.log('CSS animation', style, { isEntering, isExiting })\n      }\n\n      return useMemo(() => {\n        return { style }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n      }, [JSON.stringify(style)])\n    },\n  }\n}\n"],
+  "mappings": "AAAA,SAA0B,OAAO,MAAM,iCAAiC;AACxE,SAAS,iBAAiB,mBAAmB;AAC7C,SAAS,YAAY,SAAS,cAAc;AAErC,SAAS,iBAAmC,YAAmC;AACpF,SAAO;AAAA,IACL,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IAEA,kBAAkB,SAAS;AACzB,YAAM,MAAM,OAAO,OAAO;AAC1B,aAAO;AAAA,QACL,cAAc;AACZ,iBAAO;AAAA,QACT;AAAA,QACA,WAAW;AACT,iBAAO,IAAI;AAAA,QACb;AAAA,QACA,SAAS,MAAM;AACb,cAAI,UAAU;AAAA,QAChB;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,KAAK,UAAU;AAAA,IAEzC;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,OAAO,EAAE,UAAU,OAAO,QAAQ,MAAM;AACtD,YAAM,CAAC,WAAW,gBAAgB,IAAI,YAAY;AAClD,YAAM,WAAW,WAAW,eAAe;AAC3C,YAAM,YAAY,cAAc;AAChC,YAAM,aAAa,CAAC,MAAM;AAC1B,YAAM,eAAe,MAAM,QAAQ,MAAM,SAAS,IAAI,MAAM,UAAU,KAAK,MAAM;AACjF,YAAM,YAAY,WAAW;AAC7B,UAAI,CAAC,WAAW;AACd,eAAO;AAAA,MACT;AAEA,YAAM,OAAO,MAAM,cAAc,MAAM,YAAY,KAAK,GAAG,IAAI;AAE/D,gCAA0B,MAAM;AAC9B,YAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,QAAQ;AAAS;AACzD,cAAM,OAAO,QAAQ;AACrB,cAAM,oBAAoB,MAAM;AAC9B;AAAA,QACF;AACA,aAAK,iBAAiB,iBAAiB,iBAAiB;AACxD,aAAK,iBAAiB,oBAAoB,iBAAiB;AAC3D,eAAO,MAAM;AACX,eAAK,oBAAoB,iBAAiB,iBAAiB;AAC3D,eAAK,iBAAiB,oBAAoB,iBAAiB;AAAA,QAC7D;AAAA,MACF,GAAG,CAAC,kBAAkB,SAAS,CAAC;AAEhC,YAAM,QAAQ;AAAA,QACZ,YAAY,GAAG,QAAQ;AAAA,QACvB,GAAG,SAAS;AAAA,UACV;AAAA,UACA;AAAA,UACA,aAAa,qCAAU;AAAA,UACvB,cAAc,qCAAU;AAAA,QAC1B,CAAC;AAAA,MACH;AAEA,UAAI,QAAQ,IAAI,aAAa,iBAAiB,MAAM,UAAU;AAE5D,gBAAQ,IAAI,iBAAiB,OAAO,EAAE,YAAY,UAAU,CAAC;AAAA,MAC/D;AAEA,aAAO,QAAQ,MAAM;AACnB,eAAO,EAAE,MAAM;AAAA,MAEjB,GAAG,CAAC,KAAK,UAAU,KAAK,CAAC,CAAC;AAAA,IAC5B;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/index.tsx"],
   "sourcesContent": ["export * from './createAnimations'\n"],
-  "mappings": "AAAA;",
+  "mappings": "AAAA,cAAc;",
   "names": []
 }

package/dist/jsx/createAnimations.js

@@ -1,27 +1,76 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { Stack, Text, useIsomorphicLayoutEffect } from "@tamagui/core";
+import { PresenceContext, usePresence } from "@tamagui/use-presence";
+import { useContext, useMemo, useRef } from "react";
 function createAnimations(animations) {
   return {
-    avoidClasses: false,
-    View: "div",
-    Text: "span",
+    View: Stack,
+    Text,
     animations,
-    useAnimations: (props, { getStyle }) => {
-      const animation = animations[props.animation];
+    useAnimatedNumber(initial) {
+      const val = useRef(initial);
+      return {
+        getInstance() {
+          return val;
+        },
+        getValue() {
+          return val.current;
+        },
+        setValue(next) {
+          val.current = next;
+        },
+        stop() {
+        }
+      };
+    },
+    useAnimatedNumberReaction(val, reaction) {
+    },
+    useAnimatedNumberStyle(val, getStyle) {
+      return getStyle(val.getValue());
+    },
+    useAnimations: (props, { getStyle, state, hostRef }) => {
+      const [isPresent, sendExitComplete] = usePresence();
+      const presence = useContext(PresenceContext);
+      const isExiting = isPresent === false;
+      const isEntering = !state.mounted;
+      const animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation;
+      const animation = animations[animationKey];
       if (!animation) {
-        throw new Error(`no animation found: ${props.animation}`);
+        return null;
       }
       const keys = props.animateOnly ? props.animateOnly.join(" ") : "all";
-      return {
-        style: {
-          transition: `${keys} ${animation}`,
-          ...getStyle()
-        }
+      useIsomorphicLayoutEffect(() => {
+        if (!sendExitComplete || !isExiting || !hostRef.current)
+          return;
+        const node = hostRef.current;
+        const onFinishAnimation = () => {
+          sendExitComplete?.();
+        };
+        node.addEventListener("transitionend", onFinishAnimation);
+        node.addEventListener("transitioncancel", onFinishAnimation);
+        return () => {
+          node.removeEventListener("transitionend", onFinishAnimation);
+          node.addEventListener("transitioncancel", onFinishAnimation);
+        };
+      }, [sendExitComplete, isExiting]);
+      const style = {
+        transition: `${keys} ${animation}`,
+        ...getStyle({
+          isEntering,
+          isExiting,
+          exitVariant: presence?.exitVariant,
+          enterVariant: presence?.enterVariant
+        })
       };
+      if (process.env.NODE_ENV === "development" && props["debug"]) {
+        console.log("CSS animation", style, { isEntering, isExiting });
+      }
+      return useMemo(() => {
+        return { style };
+      }, [JSON.stringify(style)]);
     }
   };
 }
-__name(createAnimations, "createAnimations");
 export {
   createAnimations
 };
+//# sourceMappingURL=createAnimations.js.map

package/dist/jsx/createAnimations.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/createAnimations.tsx"],
+  "sourcesContent": ["import { AnimationDriver, Stack, Text, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport { PresenceContext, usePresence } from '@tamagui/use-presence'\nimport { useContext, useMemo, useRef } from 'react'\n\nexport function createAnimations<A extends Object>(animations: A): AnimationDriver<A> {\n  return {\n    View: Stack,\n    Text: Text,\n    animations,\n\n    useAnimatedNumber(initial) {\n      const val = useRef(initial)\n      return {\n        getInstance() {\n          return val\n        },\n        getValue() {\n          return val.current\n        },\n        setValue(next) {\n          val.current = next\n        },\n        stop() {},\n      }\n    },\n\n    useAnimatedNumberReaction(val, reaction) {\n      // TODO use event listeners, would need access to the corresponsing node...\n    },\n\n    useAnimatedNumberStyle(val, getStyle) {\n      return getStyle(val.getValue())\n    },\n\n    useAnimations: (props, { getStyle, state, hostRef }) => {\n      const [isPresent, sendExitComplete] = usePresence()\n      const presence = useContext(PresenceContext)\n      const isExiting = isPresent === false\n      const isEntering = !state.mounted\n      const animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation\n      const animation = animations[animationKey as any]\n      if (!animation) {\n        return null\n      }\n\n      const keys = props.animateOnly ? props.animateOnly.join(' ') : 'all'\n\n      useIsomorphicLayoutEffect(() => {\n        if (!sendExitComplete || !isExiting || !hostRef.current) return\n        const node = hostRef.current as HTMLElement\n        const onFinishAnimation = () => {\n          sendExitComplete?.()\n        }\n        node.addEventListener('transitionend', onFinishAnimation)\n        node.addEventListener('transitioncancel', onFinishAnimation)\n        return () => {\n          node.removeEventListener('transitionend', onFinishAnimation)\n          node.addEventListener('transitioncancel', onFinishAnimation)\n        }\n      }, [sendExitComplete, isExiting])\n\n      const style = {\n        transition: `${keys} ${animation}`,\n        ...getStyle({\n          isEntering,\n          isExiting,\n          exitVariant: presence?.exitVariant,\n          enterVariant: presence?.enterVariant,\n        }),\n      }\n\n      if (process.env.NODE_ENV === 'development' && props['debug']) {\n        // eslint-disable-next-line no-console\n        console.log('CSS animation', style, { isEntering, isExiting })\n      }\n\n      return useMemo(() => {\n        return { style }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n      }, [JSON.stringify(style)])\n    },\n  }\n}\n"],
+  "mappings": "AAAA,SAA0B,OAAO,MAAM,iCAAiC;AACxE,SAAS,iBAAiB,mBAAmB;AAC7C,SAAS,YAAY,SAAS,cAAc;AAErC,SAAS,iBAAmC,YAAmC;AACpF,SAAO;AAAA,IACL,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IAEA,kBAAkB,SAAS;AACzB,YAAM,MAAM,OAAO,OAAO;AAC1B,aAAO;AAAA,QACL,cAAc;AACZ,iBAAO;AAAA,QACT;AAAA,QACA,WAAW;AACT,iBAAO,IAAI;AAAA,QACb;AAAA,QACA,SAAS,MAAM;AACb,cAAI,UAAU;AAAA,QAChB;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,KAAK,UAAU;AAAA,IAEzC;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,OAAO,EAAE,UAAU,OAAO,QAAQ,MAAM;AACtD,YAAM,CAAC,WAAW,gBAAgB,IAAI,YAAY;AAClD,YAAM,WAAW,WAAW,eAAe;AAC3C,YAAM,YAAY,cAAc;AAChC,YAAM,aAAa,CAAC,MAAM;AAC1B,YAAM,eAAe,MAAM,QAAQ,MAAM,SAAS,IAAI,MAAM,UAAU,KAAK,MAAM;AACjF,YAAM,YAAY,WAAW;AAC7B,UAAI,CAAC,WAAW;AACd,eAAO;AAAA,MACT;AAEA,YAAM,OAAO,MAAM,cAAc,MAAM,YAAY,KAAK,GAAG,IAAI;AAE/D,gCAA0B,MAAM;AAC9B,YAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,QAAQ;AAAS;AACzD,cAAM,OAAO,QAAQ;AACrB,cAAM,oBAAoB,MAAM;AAC9B,6BAAmB;AAAA,QACrB;AACA,aAAK,iBAAiB,iBAAiB,iBAAiB;AACxD,aAAK,iBAAiB,oBAAoB,iBAAiB;AAC3D,eAAO,MAAM;AACX,eAAK,oBAAoB,iBAAiB,iBAAiB;AAC3D,eAAK,iBAAiB,oBAAoB,iBAAiB;AAAA,QAC7D;AAAA,MACF,GAAG,CAAC,kBAAkB,SAAS,CAAC;AAEhC,YAAM,QAAQ;AAAA,QACZ,YAAY,GAAG,QAAQ;AAAA,QACvB,GAAG,SAAS;AAAA,UACV;AAAA,UACA;AAAA,UACA,aAAa,UAAU;AAAA,UACvB,cAAc,UAAU;AAAA,QAC1B,CAAC;AAAA,MACH;AAEA,UAAI,QAAQ,IAAI,aAAa,iBAAiB,MAAM,UAAU;AAE5D,gBAAQ,IAAI,iBAAiB,OAAO,EAAE,YAAY,UAAU,CAAC;AAAA,MAC/D;AAEA,aAAO,QAAQ,MAAM;AACnB,eAAO,EAAE,MAAM;AAAA,MAEjB,GAAG,CAAC,KAAK,UAAU,KAAK,CAAC,CAAC;AAAA,IAC5B;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/jsx/index.js

@@ -1 +1,2 @@
 export * from "./createAnimations";
+//# sourceMappingURL=index.js.map

package/dist/jsx/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.tsx"],
+  "sourcesContent": ["export * from './createAnimations'\n"],
+  "mappings": "AAAA,cAAc;",
+  "names": []
+}

package/package.json

@@ -1,21 +1,24 @@
 {
   "name": "@tamagui/animations-css",
-  "version": "1.0.1-beta.20",
+  "version": "1.0.1-beta.201",
   "source": "src/index.ts",
+  "sideEffects": false,
   "license": "MIT",
-  "typings": "types",
+  "types": "./types/index.d.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
   "module:jsx": "dist/jsx",
   "files": [
+    "src",
     "types",
     "dist"
   ],
   "dependencies": {
-    "@tamagui/core": "^1.0.1-beta.20"
+    "@tamagui/core": "^1.0.1-beta.201",
+    "@tamagui/use-presence": "^1.0.1-beta.201"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.20"
+    "@tamagui/build": "^1.0.1-beta.201"
   },
   "scripts": {
     "build": "tamagui-build",

package/src/createAnimations.tsx

@@ -0,0 +1,83 @@
+import { AnimationDriver, Stack, Text, useIsomorphicLayoutEffect } from '@tamagui/core'
+import { PresenceContext, usePresence } from '@tamagui/use-presence'
+import { useContext, useMemo, useRef } from 'react'
+
+export function createAnimations<A extends Object>(animations: A): AnimationDriver<A> {
+  return {
+    View: Stack,
+    Text: Text,
+    animations,
+
+    useAnimatedNumber(initial) {
+      const val = useRef(initial)
+      return {
+        getInstance() {
+          return val
+        },
+        getValue() {
+          return val.current
+        },
+        setValue(next) {
+          val.current = next
+        },
+        stop() {},
+      }
+    },
+
+    useAnimatedNumberReaction(val, reaction) {
+      // TODO use event listeners, would need access to the corresponsing node...
+    },
+
+    useAnimatedNumberStyle(val, getStyle) {
+      return getStyle(val.getValue())
+    },
+
+    useAnimations: (props, { getStyle, state, hostRef }) => {
+      const [isPresent, sendExitComplete] = usePresence()
+      const presence = useContext(PresenceContext)
+      const isExiting = isPresent === false
+      const isEntering = !state.mounted
+      const animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation
+      const animation = animations[animationKey as any]
+      if (!animation) {
+        return null
+      }
+
+      const keys = props.animateOnly ? props.animateOnly.join(' ') : 'all'
+
+      useIsomorphicLayoutEffect(() => {
+        if (!sendExitComplete || !isExiting || !hostRef.current) return
+        const node = hostRef.current as HTMLElement
+        const onFinishAnimation = () => {
+          sendExitComplete?.()
+        }
+        node.addEventListener('transitionend', onFinishAnimation)
+        node.addEventListener('transitioncancel', onFinishAnimation)
+        return () => {
+          node.removeEventListener('transitionend', onFinishAnimation)
+          node.addEventListener('transitioncancel', onFinishAnimation)
+        }
+      }, [sendExitComplete, isExiting])
+
+      const style = {
+        transition: `${keys} ${animation}`,
+        ...getStyle({
+          isEntering,
+          isExiting,
+          exitVariant: presence?.exitVariant,
+          enterVariant: presence?.enterVariant,
+        }),
+      }
+
+      if (process.env.NODE_ENV === 'development' && props['debug']) {
+        // eslint-disable-next-line no-console
+        console.log('CSS animation', style, { isEntering, isExiting })
+      }
+
+      return useMemo(() => {
+        return { style }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [JSON.stringify(style)])
+    },
+  }
+}

package/src/index.tsx

@@ -0,0 +1 @@
+export * from './createAnimations'

package/types/createAnimations.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"createAnimations.d.ts","sourceRoot":"","sources":["../src/createAnimations.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAE/C,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,EAAE,UAAU,EAAE,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAsBpF"}

package/types/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA"}