@tamagui/animations-motion 1.0.1-beta.18 → 1.0.1-beta.181

package/dist/cjs/createAnimations.js

@@ -1,8 +1,8 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-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 });
@@ -18,21 +18,96 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var createAnimations_exports = {};
 __export(createAnimations_exports, {
-  createAnimations: () => createAnimations
+  AnimatedText: () => AnimatedText,
+  AnimatedView: () => AnimatedView,
+  createAnimations: () => createAnimations,
+  useAnimatedNumber: () => useAnimatedNumber,
+  useAnimatedNumberReaction: () => useAnimatedNumberReaction,
+  useAnimatedNumberStyle: () => useAnimatedNumberStyle
 });
 module.exports = __toCommonJS(createAnimations_exports);
+var import_animate_presence = require("@tamagui/animate-presence");
+var import_react = require("react");
+var import_react_native = require("react-native");
+const AnimatedView = import_react_native.View;
+const AnimatedText = import_react_native.Text;
+function useAnimatedNumber(initial) {
+  const state = (0, import_react.useRef)(
+    null
+  );
+  if (!state.current) {
+    state.current = {
+      val: initial,
+      controls: null
+    };
+  }
+  return {
+    getInstance() {
+      return state.current.controls;
+    },
+    getValue() {
+      return state.current.val;
+    },
+    stop() {
+      var _a;
+      (_a = state.current.controls) == null ? void 0 : _a.stop();
+    },
+    setValue(next, { type, ...config } = { type: "spring" }) {
+    }
+  };
+}
+function useAnimatedNumberReaction(value, cb) {
+}
+function useAnimatedNumberStyle(value, getStyle) {
+  return getStyle(value.getInstance());
+}
 function createAnimations(animations) {
-  const useAnimations = /* @__PURE__ */ __name((props, extra) => {
-    const { style, hoverStyle, pressStyle, exitStyle, onDidAnimate, delay } = extra;
-  }, "useAnimations");
+  AnimatedView["displayName"] = "AnimatedView";
+  AnimatedText["displayName"] = "AnimatedText";
   return {
-    useAnimations,
-    animations
+    avoidClasses: true,
+    animations,
+    View: AnimatedView,
+    Text: AnimatedText,
+    useAnimatedNumber,
+    useAnimatedNumberReaction,
+    useAnimatedNumberStyle,
+    useAnimations: (props, helpers) => {
+      const { onDidAnimate, delay, getStyle, state } = helpers;
+      const [isPresent, sendExitComplete] = (0, import_animate_presence.usePresence)();
+      const presence = (0, import_react.useContext)(import_animate_presence.PresenceContext);
+      const isExiting = isPresent === false;
+      const isEntering = !state.mounted;
+      const all = getStyle({
+        isExiting,
+        isEntering,
+        exitVariant: presence == null ? void 0 : presence.exitVariant,
+        enterVariant: presence == null ? void 0 : presence.enterVariant
+      });
+      const args = [
+        JSON.stringify(all),
+        state.mounted,
+        state.hover,
+        state.press,
+        state.pressIn,
+        state.focus,
+        delay,
+        isPresent,
+        onDidAnimate,
+        presence == null ? void 0 : presence.exitVariant,
+        presence == null ? void 0 : presence.enterVariant
+      ];
+      return {};
+    }
   };
 }
-__name(createAnimations, "createAnimations");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  createAnimations
+  AnimatedText,
+  AnimatedView,
+  createAnimations,
+  useAnimatedNumber,
+  useAnimatedNumberReaction,
+  useAnimatedNumberStyle
 });
 //# sourceMappingURL=createAnimations.js.map

package/dist/cjs/createAnimations.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/createAnimations.tsx"],
-  "sourcesContent": ["export function createAnimations<A>(animations: A): {\n  useAnimations: any\n  animations: A\n  View?: any\n  Text?: any\n} {\n  const useAnimations = (props: Object, extra) => {\n    const { style, hoverStyle, pressStyle, exitStyle, onDidAnimate, delay } = extra\n  }\n  return {\n    useAnimations,\n    animations,\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,0BAA6B,YAKlC;AACA,QAAM,gBAAgB,wBAAC,OAAe,UAAU;AAC9C,UAAM,EAAE,OAAO,YAAY,YAAY,WAAW,cAAc,UAAU;AAAA,EAC5E,GAFsB;AAGtB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AAbgB;",
+  "sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport {\n  AnimatedNumberStrategy,\n  AnimationConfigType,\n  AnimationDriver,\n  AnimationProp,\n  UniversalAnimatedNumber,\n  isWeb,\n  useEvent,\n  useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { AnimationControls, animate } from 'motion'\nimport { useContext, useEffect, useMemo, useRef } from 'react'\nimport { Text, View } from 'react-native'\n\nexport const AnimatedView = View\nexport const AnimatedText = Text\n\nexport function useAnimatedNumber(\n  initial: number\n): UniversalAnimatedNumber<AnimationControls | null> {\n  const state = useRef(\n    null as any as {\n      val: number\n      controls: AnimationControls | null\n    }\n  )\n  if (!state.current) {\n    state.current = {\n      val: initial,\n      controls: null,\n    }\n  }\n  return {\n    getInstance() {\n      return state.current.controls\n    },\n    getValue() {\n      return state.current.val\n    },\n    stop() {\n      state.current.controls?.stop()\n    },\n    setValue(next: number, { type, ...config } = { type: 'spring' }) {\n      // const val = state.current.val\n      // if (type === 'direct') {\n      //   val.setValue(next)\n      // } else if (type === 'spring') {\n      //   state.current.composite?.stop()\n      //   const composite = Animated.spring(val, {\n      //     ...config,\n      //     toValue: next,\n      //     useNativeDriver: !isWeb,\n      //   })\n      //   composite.start()\n      //   state.current.composite = composite\n      // } else {\n      //   state.current.composite?.stop()\n      //   const composite = Animated.timing(val, {\n      //     ...config,\n      //     toValue: next,\n      //     useNativeDriver: !isWeb,\n      //   })\n      //   composite.start()\n      //   state.current.composite = composite\n      // }\n    },\n  }\n}\n\nexport function useAnimatedNumberReaction(\n  value: UniversalAnimatedNumber<any>,\n  cb: (current: number) => void\n) {\n  // const onChange = useEvent((current) => {\n  //   cb(current.value)\n  // })\n  // useEffect(() => {\n  //   const id = value.getInstance().addListener(onChange)\n  //   return () => {\n  //     value.getInstance().removeListener(id)\n  //   }\n  // }, [value, onChange])\n}\n\nexport function useAnimatedNumberStyle<V extends UniversalAnimatedNumber<any>>(\n  value: V,\n  getStyle: (value: any) => any\n) {\n  return getStyle(value.getInstance())\n}\n\n// @ts-ignore\nexport function createAnimations<A extends AnimationConfigType>(animations: A): AnimationDriver<A> {\n  AnimatedView['displayName'] = 'AnimatedView'\n  AnimatedText['displayName'] = 'AnimatedText'\n\n  return {\n    avoidClasses: true,\n    animations,\n    View: AnimatedView,\n    Text: AnimatedText,\n    useAnimatedNumber,\n    useAnimatedNumberReaction,\n    useAnimatedNumberStyle,\n    useAnimations: (props, helpers) => {\n      const { onDidAnimate, delay, getStyle, state } = helpers\n      const [isPresent, sendExitComplete] = usePresence()\n      const presence = useContext(PresenceContext)\n\n      const isExiting = isPresent === false\n      const isEntering = !state.mounted\n\n      const all = getStyle({\n        isExiting,\n        isEntering,\n        exitVariant: presence?.exitVariant,\n        enterVariant: presence?.enterVariant,\n      })\n\n      const args = [\n        JSON.stringify(all),\n        state.mounted,\n        state.hover,\n        state.press,\n        state.pressIn,\n        state.focus,\n        delay,\n        isPresent,\n        onDidAnimate,\n        presence?.exitVariant,\n        presence?.enterVariant,\n      ]\n\n      // return useMemo(() => {\n      //   return {\n      //     style: [nonAnimatedStyle, animatedStyle],\n      //   }\n      //   // eslint-disable-next-line react-hooks/exhaustive-deps\n      // }, args)\n      return {}\n    },\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAA6C;AAY7C,mBAAuD;AACvD,0BAA2B;AAEpB,MAAM,eAAe;AACrB,MAAM,eAAe;AAErB,SAAS,kBACd,SACmD;AACnD,QAAM,YAAQ;AAAA,IACZ;AAAA,EAIF;AACA,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,UAAU;AAAA,MACd,KAAK;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,EACF;AACA,SAAO;AAAA,IACL,cAAc;AACZ,aAAO,MAAM,QAAQ;AAAA,IACvB;AAAA,IACA,WAAW;AACT,aAAO,MAAM,QAAQ;AAAA,IACvB;AAAA,IACA,OAAO;AAxCX;AAyCM,kBAAM,QAAQ,aAAd,mBAAwB;AAAA,IAC1B;AAAA,IACA,SAAS,MAAc,EAAE,SAAS,OAAO,IAAI,EAAE,MAAM,SAAS,GAAG;AAAA,IAuBjE;AAAA,EACF;AACF;AAEO,SAAS,0BACd,OACA,IACA;AAUF;AAEO,SAAS,uBACd,OACA,UACA;AACA,SAAO,SAAS,MAAM,YAAY,CAAC;AACrC;AAGO,SAAS,iBAAgD,YAAmC;AACjG,eAAa,iBAAiB;AAC9B,eAAa,iBAAiB;AAE9B,SAAO;AAAA,IACL,cAAc;AAAA,IACd;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,CAAC,OAAO,YAAY;AACjC,YAAM,EAAE,cAAc,OAAO,UAAU,MAAM,IAAI;AACjD,YAAM,CAAC,WAAW,gBAAgB,QAAI,qCAAY;AAClD,YAAM,eAAW,yBAAW,uCAAe;AAE3C,YAAM,YAAY,cAAc;AAChC,YAAM,aAAa,CAAC,MAAM;AAE1B,YAAM,MAAM,SAAS;AAAA,QACnB;AAAA,QACA;AAAA,QACA,aAAa,qCAAU;AAAA,QACvB,cAAc,qCAAU;AAAA,MAC1B,CAAC;AAED,YAAM,OAAO;AAAA,QACX,KAAK,UAAU,GAAG;AAAA,QAClB,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,qCAAU;AAAA,QACV,qCAAU;AAAA,MACZ;AAQA,aAAO,CAAC;AAAA,IACV;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,16 +1,84 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { PresenceContext, usePresence } from "@tamagui/animate-presence";
+import { useContext, useRef } from "react";
+import { Text, View } from "react-native";
+const AnimatedView = View;
+const AnimatedText = Text;
+function useAnimatedNumber(initial) {
+  const state = useRef(
+    null
+  );
+  if (!state.current) {
+    state.current = {
+      val: initial,
+      controls: null
+    };
+  }
+  return {
+    getInstance() {
+      return state.current.controls;
+    },
+    getValue() {
+      return state.current.val;
+    },
+    stop() {
+      var _a;
+      (_a = state.current.controls) == null ? void 0 : _a.stop();
+    },
+    setValue(next, { type, ...config } = { type: "spring" }) {
+    }
+  };
+}
+function useAnimatedNumberReaction(value, cb) {
+}
+function useAnimatedNumberStyle(value, getStyle) {
+  return getStyle(value.getInstance());
+}
 function createAnimations(animations) {
-  const useAnimations = /* @__PURE__ */ __name((props, extra) => {
-    const { style, hoverStyle, pressStyle, exitStyle, onDidAnimate, delay } = extra;
-  }, "useAnimations");
+  AnimatedView["displayName"] = "AnimatedView";
+  AnimatedText["displayName"] = "AnimatedText";
   return {
-    useAnimations,
-    animations
+    avoidClasses: true,
+    animations,
+    View: AnimatedView,
+    Text: AnimatedText,
+    useAnimatedNumber,
+    useAnimatedNumberReaction,
+    useAnimatedNumberStyle,
+    useAnimations: (props, helpers) => {
+      const { onDidAnimate, delay, getStyle, state } = helpers;
+      const [isPresent, sendExitComplete] = usePresence();
+      const presence = useContext(PresenceContext);
+      const isExiting = isPresent === false;
+      const isEntering = !state.mounted;
+      const all = getStyle({
+        isExiting,
+        isEntering,
+        exitVariant: presence == null ? void 0 : presence.exitVariant,
+        enterVariant: presence == null ? void 0 : presence.enterVariant
+      });
+      const args = [
+        JSON.stringify(all),
+        state.mounted,
+        state.hover,
+        state.press,
+        state.pressIn,
+        state.focus,
+        delay,
+        isPresent,
+        onDidAnimate,
+        presence == null ? void 0 : presence.exitVariant,
+        presence == null ? void 0 : presence.enterVariant
+      ];
+      return {};
+    }
   };
 }
-__name(createAnimations, "createAnimations");
 export {
-  createAnimations
+  AnimatedText,
+  AnimatedView,
+  createAnimations,
+  useAnimatedNumber,
+  useAnimatedNumberReaction,
+  useAnimatedNumberStyle
 };
 //# sourceMappingURL=createAnimations.js.map

package/dist/esm/createAnimations.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/createAnimations.tsx"],
-  "sourcesContent": ["export function createAnimations<A>(animations: A): {\n  useAnimations: any\n  animations: A\n  View?: any\n  Text?: any\n} {\n  const useAnimations = (props: Object, extra) => {\n    const { style, hoverStyle, pressStyle, exitStyle, onDidAnimate, delay } = extra\n  }\n  return {\n    useAnimations,\n    animations,\n  }\n}\n"],
-  "mappings": ";;AAAO,0BAA6B,YAKlC;AACA,QAAM,gBAAgB,wBAAC,OAAe,UAAU;AAC9C,UAAM,EAAE,OAAO,YAAY,YAAY,WAAW,cAAc,UAAU;AAAA,EAC5E,GAFsB;AAGtB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AAbgB;",
+  "sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport {\n  AnimatedNumberStrategy,\n  AnimationConfigType,\n  AnimationDriver,\n  AnimationProp,\n  UniversalAnimatedNumber,\n  isWeb,\n  useEvent,\n  useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { AnimationControls, animate } from 'motion'\nimport { useContext, useEffect, useMemo, useRef } from 'react'\nimport { Text, View } from 'react-native'\n\nexport const AnimatedView = View\nexport const AnimatedText = Text\n\nexport function useAnimatedNumber(\n  initial: number\n): UniversalAnimatedNumber<AnimationControls | null> {\n  const state = useRef(\n    null as any as {\n      val: number\n      controls: AnimationControls | null\n    }\n  )\n  if (!state.current) {\n    state.current = {\n      val: initial,\n      controls: null,\n    }\n  }\n  return {\n    getInstance() {\n      return state.current.controls\n    },\n    getValue() {\n      return state.current.val\n    },\n    stop() {\n      state.current.controls?.stop()\n    },\n    setValue(next: number, { type, ...config } = { type: 'spring' }) {\n      // const val = state.current.val\n      // if (type === 'direct') {\n      //   val.setValue(next)\n      // } else if (type === 'spring') {\n      //   state.current.composite?.stop()\n      //   const composite = Animated.spring(val, {\n      //     ...config,\n      //     toValue: next,\n      //     useNativeDriver: !isWeb,\n      //   })\n      //   composite.start()\n      //   state.current.composite = composite\n      // } else {\n      //   state.current.composite?.stop()\n      //   const composite = Animated.timing(val, {\n      //     ...config,\n      //     toValue: next,\n      //     useNativeDriver: !isWeb,\n      //   })\n      //   composite.start()\n      //   state.current.composite = composite\n      // }\n    },\n  }\n}\n\nexport function useAnimatedNumberReaction(\n  value: UniversalAnimatedNumber<any>,\n  cb: (current: number) => void\n) {\n  // const onChange = useEvent((current) => {\n  //   cb(current.value)\n  // })\n  // useEffect(() => {\n  //   const id = value.getInstance().addListener(onChange)\n  //   return () => {\n  //     value.getInstance().removeListener(id)\n  //   }\n  // }, [value, onChange])\n}\n\nexport function useAnimatedNumberStyle<V extends UniversalAnimatedNumber<any>>(\n  value: V,\n  getStyle: (value: any) => any\n) {\n  return getStyle(value.getInstance())\n}\n\n// @ts-ignore\nexport function createAnimations<A extends AnimationConfigType>(animations: A): AnimationDriver<A> {\n  AnimatedView['displayName'] = 'AnimatedView'\n  AnimatedText['displayName'] = 'AnimatedText'\n\n  return {\n    avoidClasses: true,\n    animations,\n    View: AnimatedView,\n    Text: AnimatedText,\n    useAnimatedNumber,\n    useAnimatedNumberReaction,\n    useAnimatedNumberStyle,\n    useAnimations: (props, helpers) => {\n      const { onDidAnimate, delay, getStyle, state } = helpers\n      const [isPresent, sendExitComplete] = usePresence()\n      const presence = useContext(PresenceContext)\n\n      const isExiting = isPresent === false\n      const isEntering = !state.mounted\n\n      const all = getStyle({\n        isExiting,\n        isEntering,\n        exitVariant: presence?.exitVariant,\n        enterVariant: presence?.enterVariant,\n      })\n\n      const args = [\n        JSON.stringify(all),\n        state.mounted,\n        state.hover,\n        state.press,\n        state.pressIn,\n        state.focus,\n        delay,\n        isPresent,\n        onDidAnimate,\n        presence?.exitVariant,\n        presence?.enterVariant,\n      ]\n\n      // return useMemo(() => {\n      //   return {\n      //     style: [nonAnimatedStyle, animatedStyle],\n      //   }\n      //   // eslint-disable-next-line react-hooks/exhaustive-deps\n      // }, args)\n      return {}\n    },\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,iBAAiB,mBAAmB;AAY7C,SAAS,YAAgC,cAAc;AACvD,SAAS,MAAM,YAAY;AAEpB,MAAM,eAAe;AACrB,MAAM,eAAe;AAErB,SAAS,kBACd,SACmD;AACnD,QAAM,QAAQ;AAAA,IACZ;AAAA,EAIF;AACA,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,UAAU;AAAA,MACd,KAAK;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,EACF;AACA,SAAO;AAAA,IACL,cAAc;AACZ,aAAO,MAAM,QAAQ;AAAA,IACvB;AAAA,IACA,WAAW;AACT,aAAO,MAAM,QAAQ;AAAA,IACvB;AAAA,IACA,OAAO;AAxCX;AAyCM,kBAAM,QAAQ,aAAd,mBAAwB;AAAA,IAC1B;AAAA,IACA,SAAS,MAAc,EAAE,SAAS,OAAO,IAAI,EAAE,MAAM,SAAS,GAAG;AAAA,IAuBjE;AAAA,EACF;AACF;AAEO,SAAS,0BACd,OACA,IACA;AAUF;AAEO,SAAS,uBACd,OACA,UACA;AACA,SAAO,SAAS,MAAM,YAAY,CAAC;AACrC;AAGO,SAAS,iBAAgD,YAAmC;AACjG,eAAa,iBAAiB;AAC9B,eAAa,iBAAiB;AAE9B,SAAO;AAAA,IACL,cAAc;AAAA,IACd;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,CAAC,OAAO,YAAY;AACjC,YAAM,EAAE,cAAc,OAAO,UAAU,MAAM,IAAI;AACjD,YAAM,CAAC,WAAW,gBAAgB,IAAI,YAAY;AAClD,YAAM,WAAW,WAAW,eAAe;AAE3C,YAAM,YAAY,cAAc;AAChC,YAAM,aAAa,CAAC,MAAM;AAE1B,YAAM,MAAM,SAAS;AAAA,QACnB;AAAA,QACA;AAAA,QACA,aAAa,qCAAU;AAAA,QACvB,cAAc,qCAAU;AAAA,MAC1B,CAAC;AAED,YAAM,OAAO;AAAA,QACX,KAAK,UAAU,GAAG;AAAA,QAClB,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,qCAAU;AAAA,QACV,qCAAU;AAAA,MACZ;AAQA,aAAO,CAAC;AAAA,IACV;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,15 +1,83 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { PresenceContext, usePresence } from "@tamagui/animate-presence";
+import { useContext, useRef } from "react";
+import { Text, View } from "react-native";
+const AnimatedView = View;
+const AnimatedText = Text;
+function useAnimatedNumber(initial) {
+  const state = useRef(
+    null
+  );
+  if (!state.current) {
+    state.current = {
+      val: initial,
+      controls: null
+    };
+  }
+  return {
+    getInstance() {
+      return state.current.controls;
+    },
+    getValue() {
+      return state.current.val;
+    },
+    stop() {
+      state.current.controls?.stop();
+    },
+    setValue(next, { type, ...config } = { type: "spring" }) {
+    }
+  };
+}
+function useAnimatedNumberReaction(value, cb) {
+}
+function useAnimatedNumberStyle(value, getStyle) {
+  return getStyle(value.getInstance());
+}
 function createAnimations(animations) {
-  const useAnimations = /* @__PURE__ */ __name((props, extra) => {
-    const { style, hoverStyle, pressStyle, exitStyle, onDidAnimate, delay } = extra;
-  }, "useAnimations");
+  AnimatedView["displayName"] = "AnimatedView";
+  AnimatedText["displayName"] = "AnimatedText";
   return {
-    useAnimations,
-    animations
+    avoidClasses: true,
+    animations,
+    View: AnimatedView,
+    Text: AnimatedText,
+    useAnimatedNumber,
+    useAnimatedNumberReaction,
+    useAnimatedNumberStyle,
+    useAnimations: (props, helpers) => {
+      const { onDidAnimate, delay, getStyle, state } = helpers;
+      const [isPresent, sendExitComplete] = usePresence();
+      const presence = useContext(PresenceContext);
+      const isExiting = isPresent === false;
+      const isEntering = !state.mounted;
+      const all = getStyle({
+        isExiting,
+        isEntering,
+        exitVariant: presence?.exitVariant,
+        enterVariant: presence?.enterVariant
+      });
+      const args = [
+        JSON.stringify(all),
+        state.mounted,
+        state.hover,
+        state.press,
+        state.pressIn,
+        state.focus,
+        delay,
+        isPresent,
+        onDidAnimate,
+        presence?.exitVariant,
+        presence?.enterVariant
+      ];
+      return {};
+    }
   };
 }
-__name(createAnimations, "createAnimations");
 export {
-  createAnimations
+  AnimatedText,
+  AnimatedView,
+  createAnimations,
+  useAnimatedNumber,
+  useAnimatedNumberReaction,
+  useAnimatedNumberStyle
 };
+//# sourceMappingURL=createAnimations.js.map

package/dist/jsx/createAnimations.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/createAnimations.tsx"],
+  "sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport {\n  AnimatedNumberStrategy,\n  AnimationConfigType,\n  AnimationDriver,\n  AnimationProp,\n  UniversalAnimatedNumber,\n  isWeb,\n  useEvent,\n  useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { AnimationControls, animate } from 'motion'\nimport { useContext, useEffect, useMemo, useRef } from 'react'\nimport { Text, View } from 'react-native'\n\nexport const AnimatedView = View\nexport const AnimatedText = Text\n\nexport function useAnimatedNumber(\n  initial: number\n): UniversalAnimatedNumber<AnimationControls | null> {\n  const state = useRef(\n    null as any as {\n      val: number\n      controls: AnimationControls | null\n    }\n  )\n  if (!state.current) {\n    state.current = {\n      val: initial,\n      controls: null,\n    }\n  }\n  return {\n    getInstance() {\n      return state.current.controls\n    },\n    getValue() {\n      return state.current.val\n    },\n    stop() {\n      state.current.controls?.stop()\n    },\n    setValue(next: number, { type, ...config } = { type: 'spring' }) {\n      // const val = state.current.val\n      // if (type === 'direct') {\n      //   val.setValue(next)\n      // } else if (type === 'spring') {\n      //   state.current.composite?.stop()\n      //   const composite = Animated.spring(val, {\n      //     ...config,\n      //     toValue: next,\n      //     useNativeDriver: !isWeb,\n      //   })\n      //   composite.start()\n      //   state.current.composite = composite\n      // } else {\n      //   state.current.composite?.stop()\n      //   const composite = Animated.timing(val, {\n      //     ...config,\n      //     toValue: next,\n      //     useNativeDriver: !isWeb,\n      //   })\n      //   composite.start()\n      //   state.current.composite = composite\n      // }\n    },\n  }\n}\n\nexport function useAnimatedNumberReaction(\n  value: UniversalAnimatedNumber<any>,\n  cb: (current: number) => void\n) {\n  // const onChange = useEvent((current) => {\n  //   cb(current.value)\n  // })\n  // useEffect(() => {\n  //   const id = value.getInstance().addListener(onChange)\n  //   return () => {\n  //     value.getInstance().removeListener(id)\n  //   }\n  // }, [value, onChange])\n}\n\nexport function useAnimatedNumberStyle<V extends UniversalAnimatedNumber<any>>(\n  value: V,\n  getStyle: (value: any) => any\n) {\n  return getStyle(value.getInstance())\n}\n\n// @ts-ignore\nexport function createAnimations<A extends AnimationConfigType>(animations: A): AnimationDriver<A> {\n  AnimatedView['displayName'] = 'AnimatedView'\n  AnimatedText['displayName'] = 'AnimatedText'\n\n  return {\n    avoidClasses: true,\n    animations,\n    View: AnimatedView,\n    Text: AnimatedText,\n    useAnimatedNumber,\n    useAnimatedNumberReaction,\n    useAnimatedNumberStyle,\n    useAnimations: (props, helpers) => {\n      const { onDidAnimate, delay, getStyle, state } = helpers\n      const [isPresent, sendExitComplete] = usePresence()\n      const presence = useContext(PresenceContext)\n\n      const isExiting = isPresent === false\n      const isEntering = !state.mounted\n\n      const all = getStyle({\n        isExiting,\n        isEntering,\n        exitVariant: presence?.exitVariant,\n        enterVariant: presence?.enterVariant,\n      })\n\n      const args = [\n        JSON.stringify(all),\n        state.mounted,\n        state.hover,\n        state.press,\n        state.pressIn,\n        state.focus,\n        delay,\n        isPresent,\n        onDidAnimate,\n        presence?.exitVariant,\n        presence?.enterVariant,\n      ]\n\n      // return useMemo(() => {\n      //   return {\n      //     style: [nonAnimatedStyle, animatedStyle],\n      //   }\n      //   // eslint-disable-next-line react-hooks/exhaustive-deps\n      // }, args)\n      return {}\n    },\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,iBAAiB,mBAAmB;AAY7C,SAAS,YAAgC,cAAc;AACvD,SAAS,MAAM,YAAY;AAEpB,MAAM,eAAe;AACrB,MAAM,eAAe;AAErB,SAAS,kBACd,SACmD;AACnD,QAAM,QAAQ;AAAA,IACZ;AAAA,EAIF;AACA,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,UAAU;AAAA,MACd,KAAK;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,EACF;AACA,SAAO;AAAA,IACL,cAAc;AACZ,aAAO,MAAM,QAAQ;AAAA,IACvB;AAAA,IACA,WAAW;AACT,aAAO,MAAM,QAAQ;AAAA,IACvB;AAAA,IACA,OAAO;AACL,YAAM,QAAQ,UAAU,KAAK;AAAA,IAC/B;AAAA,IACA,SAAS,MAAc,EAAE,SAAS,OAAO,IAAI,EAAE,MAAM,SAAS,GAAG;AAAA,IAuBjE;AAAA,EACF;AACF;AAEO,SAAS,0BACd,OACA,IACA;AAUF;AAEO,SAAS,uBACd,OACA,UACA;AACA,SAAO,SAAS,MAAM,YAAY,CAAC;AACrC;AAGO,SAAS,iBAAgD,YAAmC;AACjG,eAAa,iBAAiB;AAC9B,eAAa,iBAAiB;AAE9B,SAAO;AAAA,IACL,cAAc;AAAA,IACd;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,CAAC,OAAO,YAAY;AACjC,YAAM,EAAE,cAAc,OAAO,UAAU,MAAM,IAAI;AACjD,YAAM,CAAC,WAAW,gBAAgB,IAAI,YAAY;AAClD,YAAM,WAAW,WAAW,eAAe;AAE3C,YAAM,YAAY,cAAc;AAChC,YAAM,aAAa,CAAC,MAAM;AAE1B,YAAM,MAAM,SAAS;AAAA,QACnB;AAAA,QACA;AAAA,QACA,aAAa,UAAU;AAAA,QACvB,cAAc,UAAU;AAAA,MAC1B,CAAC;AAED,YAAM,OAAO;AAAA,QACX,KAAK,UAAU,GAAG;AAAA,QAClB,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,UAAU;AAAA,MACZ;AAQA,aAAO,CAAC;AAAA,IACV;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,23 @@
 {
   "name": "@tamagui/animations-motion",
-  "version": "1.0.1-beta.18",
+  "version": "1.0.1-beta.181",
   "source": "src/index.ts",
   "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.18"
+    "@tamagui/core": "^1.0.1-beta.181",
+    "motion": "^10.14.0"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.18"
+    "@tamagui/build": "^1.0.1-beta.181"
   },
   "scripts": {
     "build": "tamagui-build",

package/src/createAnimations.tsx

@@ -0,0 +1,144 @@
+import { PresenceContext, usePresence } from '@tamagui/animate-presence'
+import {
+  AnimatedNumberStrategy,
+  AnimationConfigType,
+  AnimationDriver,
+  AnimationProp,
+  UniversalAnimatedNumber,
+  isWeb,
+  useEvent,
+  useIsomorphicLayoutEffect,
+} from '@tamagui/core'
+import { AnimationControls, animate } from 'motion'
+import { useContext, useEffect, useMemo, useRef } from 'react'
+import { Text, View } from 'react-native'
+
+export const AnimatedView = View
+export const AnimatedText = Text
+
+export function useAnimatedNumber(
+  initial: number
+): UniversalAnimatedNumber<AnimationControls | null> {
+  const state = useRef(
+    null as any as {
+      val: number
+      controls: AnimationControls | null
+    }
+  )
+  if (!state.current) {
+    state.current = {
+      val: initial,
+      controls: null,
+    }
+  }
+  return {
+    getInstance() {
+      return state.current.controls
+    },
+    getValue() {
+      return state.current.val
+    },
+    stop() {
+      state.current.controls?.stop()
+    },
+    setValue(next: number, { type, ...config } = { type: 'spring' }) {
+      // const val = state.current.val
+      // if (type === 'direct') {
+      //   val.setValue(next)
+      // } else if (type === 'spring') {
+      //   state.current.composite?.stop()
+      //   const composite = Animated.spring(val, {
+      //     ...config,
+      //     toValue: next,
+      //     useNativeDriver: !isWeb,
+      //   })
+      //   composite.start()
+      //   state.current.composite = composite
+      // } else {
+      //   state.current.composite?.stop()
+      //   const composite = Animated.timing(val, {
+      //     ...config,
+      //     toValue: next,
+      //     useNativeDriver: !isWeb,
+      //   })
+      //   composite.start()
+      //   state.current.composite = composite
+      // }
+    },
+  }
+}
+
+export function useAnimatedNumberReaction(
+  value: UniversalAnimatedNumber<any>,
+  cb: (current: number) => void
+) {
+  // const onChange = useEvent((current) => {
+  //   cb(current.value)
+  // })
+  // useEffect(() => {
+  //   const id = value.getInstance().addListener(onChange)
+  //   return () => {
+  //     value.getInstance().removeListener(id)
+  //   }
+  // }, [value, onChange])
+}
+
+export function useAnimatedNumberStyle<V extends UniversalAnimatedNumber<any>>(
+  value: V,
+  getStyle: (value: any) => any
+) {
+  return getStyle(value.getInstance())
+}
+
+// @ts-ignore
+export function createAnimations<A extends AnimationConfigType>(animations: A): AnimationDriver<A> {
+  AnimatedView['displayName'] = 'AnimatedView'
+  AnimatedText['displayName'] = 'AnimatedText'
+
+  return {
+    avoidClasses: true,
+    animations,
+    View: AnimatedView,
+    Text: AnimatedText,
+    useAnimatedNumber,
+    useAnimatedNumberReaction,
+    useAnimatedNumberStyle,
+    useAnimations: (props, helpers) => {
+      const { onDidAnimate, delay, getStyle, state } = helpers
+      const [isPresent, sendExitComplete] = usePresence()
+      const presence = useContext(PresenceContext)
+
+      const isExiting = isPresent === false
+      const isEntering = !state.mounted
+
+      const all = getStyle({
+        isExiting,
+        isEntering,
+        exitVariant: presence?.exitVariant,
+        enterVariant: presence?.enterVariant,
+      })
+
+      const args = [
+        JSON.stringify(all),
+        state.mounted,
+        state.hover,
+        state.press,
+        state.pressIn,
+        state.focus,
+        delay,
+        isPresent,
+        onDidAnimate,
+        presence?.exitVariant,
+        presence?.enterVariant,
+      ]
+
+      // return useMemo(() => {
+      //   return {
+      //     style: [nonAnimatedStyle, animatedStyle],
+      //   }
+      //   // eslint-disable-next-line react-hooks/exhaustive-deps
+      // }, args)
+      return {}
+    },
+  }
+}

package/src/index.tsx

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

package/types/createAnimations.d.ts

@@ -1,7 +1,10 @@
-export declare function createAnimations<A>(animations: A): {
-    useAnimations: any;
-    animations: A;
-    View?: any;
-    Text?: any;
-};
+import { AnimationConfigType, AnimationDriver, UniversalAnimatedNumber } from '@tamagui/core';
+import { AnimationControls } from 'motion';
+import { Text, View } from 'react-native';
+export declare const AnimatedView: typeof View;
+export declare const AnimatedText: typeof Text;
+export declare function useAnimatedNumber(initial: number): UniversalAnimatedNumber<AnimationControls | null>;
+export declare function useAnimatedNumberReaction(value: UniversalAnimatedNumber<any>, cb: (current: number) => void): void;
+export declare function useAnimatedNumberStyle<V extends UniversalAnimatedNumber<any>>(value: V, getStyle: (value: any) => any): any;
+export declare function createAnimations<A extends AnimationConfigType>(animations: A): AnimationDriver<A>;
 //# sourceMappingURL=createAnimations.d.ts.map

package/types/createAnimations.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"createAnimations.d.ts","sourceRoot":"","sources":["../src/createAnimations.tsx"],"names":[],"mappings":"AAAA,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,GAAG;IAClD,aAAa,EAAE,GAAG,CAAA;IAClB,UAAU,EAAE,CAAC,CAAA;IACb,IAAI,CAAC,EAAE,GAAG,CAAA;IACV,IAAI,CAAC,EAAE,GAAG,CAAA;CACX,CAQA"}

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"}