@onlynative/inertia 0.0.1-alpha.4 → 0.0.1-alpha.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/dist/index.d.mts +30 -4
  2. package/dist/index.d.ts +30 -4
  3. package/dist/index.js +123 -24
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +123 -25
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/motion/Image.d.mts +1 -1
  8. package/dist/motion/Image.d.ts +1 -1
  9. package/dist/motion/Image.js +100 -24
  10. package/dist/motion/Image.js.map +1 -1
  11. package/dist/motion/Image.mjs +100 -24
  12. package/dist/motion/Image.mjs.map +1 -1
  13. package/dist/motion/Pressable.d.mts +1 -1
  14. package/dist/motion/Pressable.d.ts +1 -1
  15. package/dist/motion/Pressable.js +100 -24
  16. package/dist/motion/Pressable.js.map +1 -1
  17. package/dist/motion/Pressable.mjs +100 -24
  18. package/dist/motion/Pressable.mjs.map +1 -1
  19. package/dist/motion/ScrollView.d.mts +1 -1
  20. package/dist/motion/ScrollView.d.ts +1 -1
  21. package/dist/motion/ScrollView.js +100 -24
  22. package/dist/motion/ScrollView.js.map +1 -1
  23. package/dist/motion/ScrollView.mjs +100 -24
  24. package/dist/motion/ScrollView.mjs.map +1 -1
  25. package/dist/motion/Text.d.mts +1 -1
  26. package/dist/motion/Text.d.ts +1 -1
  27. package/dist/motion/Text.js +100 -24
  28. package/dist/motion/Text.js.map +1 -1
  29. package/dist/motion/Text.mjs +100 -24
  30. package/dist/motion/Text.mjs.map +1 -1
  31. package/dist/motion/View.d.mts +1 -1
  32. package/dist/motion/View.d.ts +1 -1
  33. package/dist/motion/View.js +100 -24
  34. package/dist/motion/View.js.map +1 -1
  35. package/dist/motion/View.mjs +100 -24
  36. package/dist/motion/View.mjs.map +1 -1
  37. package/dist/{types-CjztO3RW.d.mts → types-NmNeJjo1.d.mts} +23 -2
  38. package/dist/{types-CjztO3RW.d.ts → types-NmNeJjo1.d.ts} +23 -2
  39. package/jest-preset.js +33 -0
  40. package/jest-setup.js +209 -0
  41. package/package.json +5 -1
  42. package/src/index.ts +1 -0
  43. package/src/motion/createMotionComponent.tsx +172 -26
  44. package/src/transitions/easing.ts +25 -3
  45. package/src/transitions/index.ts +1 -0
  46. package/src/transitions/runtime.ts +63 -0
  47. package/src/transitions/spring.ts +1 -0
  48. package/src/types.ts +23 -1
@@ -1,5 +1,5 @@
1
1
  import { Image } from 'react-native';
2
- import { M as MotionComponent } from '../types-CjztO3RW.mjs';
2
+ import { M as MotionComponent } from '../types-NmNeJjo1.mjs';
3
3
  import 'react';
4
4
 
5
5
  /**
@@ -1,5 +1,5 @@
1
1
  import { Image } from 'react-native';
2
- import { M as MotionComponent } from '../types-CjztO3RW.js';
2
+ import { M as MotionComponent } from '../types-NmNeJjo1.js';
3
3
  import 'react';
4
4
 
5
5
  /**
@@ -1451,13 +1451,17 @@ if (globalThis._ALWAYS_FALSE) {
1451
1451
  // src/transitions/easing.ts
1452
1452
  function ensureWorkletEasing(easing) {
1453
1453
  if (!easing) return void 0;
1454
- if (isWorkletFunction(easing)) return easing;
1454
+ const fn = isEasingFactory(easing) ? easing.factory() : easing;
1455
+ if (isWorkletFunction(fn)) return fn;
1455
1456
  const wrapped = (t) => {
1456
1457
  "worklet";
1457
- return easing(t);
1458
+ return fn(t);
1458
1459
  };
1459
1460
  return wrapped;
1460
1461
  }
1462
+ function isEasingFactory(value) {
1463
+ return typeof value === "object" && value !== null && "factory" in value && typeof value.factory === "function";
1464
+ }
1461
1465
 
1462
1466
  // src/transitions/spring.ts
1463
1467
  var DEFAULT_SPRING = {
@@ -1466,6 +1470,7 @@ var DEFAULT_SPRING = {
1466
1470
  mass: 1
1467
1471
  };
1468
1472
  function springToReanimated(t) {
1473
+ "worklet";
1469
1474
  return {
1470
1475
  stiffness: t.tension ?? DEFAULT_SPRING.tension,
1471
1476
  damping: t.friction ?? DEFAULT_SPRING.friction,
@@ -1700,21 +1705,28 @@ var NUMERIC_TOP_LEVEL_KEYS = [
1700
1705
  "opacity",
1701
1706
  "width",
1702
1707
  "height",
1703
- "borderRadius"
1708
+ "borderRadius",
1709
+ "shadowOpacity",
1710
+ "shadowRadius",
1711
+ "elevation"
1704
1712
  ];
1705
1713
  var COLOR_KEYS = [
1706
1714
  "backgroundColor",
1707
1715
  "borderColor",
1708
1716
  "color",
1709
- "tintColor"
1717
+ "tintColor",
1718
+ "shadowColor"
1710
1719
  ];
1720
+ var SHADOW_OFFSET_KEYS = ["shadowOffsetWidth", "shadowOffsetHeight"];
1711
1721
  var ALL_KEYS = [
1712
1722
  ...TRANSFORM_KEYS,
1713
1723
  ...NUMERIC_TOP_LEVEL_KEYS,
1714
- ...COLOR_KEYS
1724
+ ...COLOR_KEYS,
1725
+ ...SHADOW_OFFSET_KEYS
1715
1726
  ];
1716
1727
  var TRANSFORM_KEY_SET = new Set(TRANSFORM_KEYS);
1717
1728
  var COLOR_KEY_SET = new Set(COLOR_KEYS);
1729
+ var SHADOW_OFFSET_KEY_SET = new Set(SHADOW_OFFSET_KEYS);
1718
1730
  var GESTURE_LAYER_NAMES = [
1719
1731
  "hovered",
1720
1732
  "focused",
@@ -1736,6 +1748,9 @@ var DEFAULT_RESTING = {
1736
1748
  width: 0,
1737
1749
  height: 0,
1738
1750
  borderRadius: 0,
1751
+ shadowOpacity: 0,
1752
+ shadowRadius: 0,
1753
+ elevation: 0,
1739
1754
  // 'transparent' is the only safe universal default for colors: it works as
1740
1755
  // an initial seed for any color animation (no jarring opaque flash on mount
1741
1756
  // when `initial` is omitted) and rgba(0,0,0,0) interpolates cleanly into
@@ -1743,7 +1758,10 @@ var DEFAULT_RESTING = {
1743
1758
  backgroundColor: "transparent",
1744
1759
  borderColor: "transparent",
1745
1760
  color: "transparent",
1746
- tintColor: "transparent"
1761
+ tintColor: "transparent",
1762
+ shadowColor: "transparent",
1763
+ shadowOffsetWidth: 0,
1764
+ shadowOffsetHeight: 0
1747
1765
  };
1748
1766
  function transitionFor(prop, transition) {
1749
1767
  if (!transition) return void 0;
@@ -1797,16 +1815,12 @@ function createMotionComponent(Component) {
1797
1815
  const activeKeysRef = react.useRef(null);
1798
1816
  if (activeKeysRef.current === null) {
1799
1817
  const touched = /* @__PURE__ */ new Set();
1800
- for (const k of ALL_KEYS) {
1801
- if (k in animateRecord) touched.add(k);
1802
- if (initialRecord && k in initialRecord) touched.add(k);
1803
- }
1818
+ collectTouchedKeys(touched, animateRecord);
1819
+ if (initialRecord) collectTouchedKeys(touched, initialRecord);
1804
1820
  if (variants) {
1805
1821
  for (const variant of Object.values(variants)) {
1806
1822
  if (!variant) continue;
1807
- for (const k of ALL_KEYS) {
1808
- if (k in variant) touched.add(k);
1809
- }
1823
+ collectTouchedKeys(touched, variant);
1810
1824
  }
1811
1825
  }
1812
1826
  if (gesture) {
@@ -1817,22 +1831,29 @@ function createMotionComponent(Component) {
1817
1831
  gesture.hovered
1818
1832
  ]) {
1819
1833
  if (!subState) continue;
1820
- for (const k of ALL_KEYS) {
1821
- if (k in subState) touched.add(k);
1822
- }
1823
- }
1824
- }
1825
- if (exitRecord) {
1826
- for (const k of ALL_KEYS) {
1827
- if (k in exitRecord) touched.add(k);
1834
+ collectTouchedKeys(touched, subState);
1828
1835
  }
1829
1836
  }
1837
+ if (exitRecord) collectTouchedKeys(touched, exitRecord);
1830
1838
  activeKeysRef.current = ALL_KEYS.filter((k) => touched.has(k));
1831
1839
  }
1832
1840
  const hasTransformRef = react.useRef(
1833
1841
  activeKeysRef.current.some((k) => TRANSFORM_KEY_SET.has(k))
1834
1842
  );
1843
+ const hasShadowOffsetRef = react.useRef(
1844
+ activeKeysRef.current.some((k) => SHADOW_OFFSET_KEY_SET.has(k))
1845
+ );
1835
1846
  const sharedValues = useAnimatableSharedValues((key) => {
1847
+ if (SHADOW_OFFSET_KEY_SET.has(key)) {
1848
+ const axis = shadowOffsetAxisFor(key);
1849
+ if (initial === false) {
1850
+ return shadowOffsetAxisValue(animateRecord.shadowOffset, axis) ?? DEFAULT_RESTING[key];
1851
+ }
1852
+ return shadowOffsetAxisValue(
1853
+ initialRecord?.shadowOffset,
1854
+ axis
1855
+ ) ?? shadowOffsetAxisValue(animateRecord.shadowOffset, axis) ?? DEFAULT_RESTING[key];
1856
+ }
1836
1857
  if (initial === false) {
1837
1858
  const a = animateRecord[key];
1838
1859
  return restValue(a) ?? DEFAULT_RESTING[key];
@@ -1878,9 +1899,15 @@ function createMotionComponent(Component) {
1878
1899
  }
1879
1900
  const transformGroup = transformPending > 0 ? { remaining: transformPending } : void 0;
1880
1901
  for (const key of ALL_KEYS) {
1881
- const target = baseRecord[key];
1902
+ const target = SHADOW_OFFSET_KEY_SET.has(key) ? shadowOffsetAxisValue(
1903
+ baseRecord.shadowOffset,
1904
+ shadowOffsetAxisFor(key)
1905
+ ) : baseRecord[key];
1882
1906
  if (target === void 0) continue;
1883
- const cfg = shouldReduceMotion ? { type: "no-animation" } : transitionFor(key, transition);
1907
+ const cfg = shouldReduceMotion ? { type: "no-animation" } : transitionFor(
1908
+ SHADOW_OFFSET_KEY_SET.has(key) ? "shadowOffset" : key,
1909
+ transition
1910
+ );
1884
1911
  if (isExiting) pending++;
1885
1912
  const factory = makeKeyCallbackFactory(
1886
1913
  key,
@@ -1943,8 +1970,11 @@ function createMotionComponent(Component) {
1943
1970
  const animatedStyle = Animated.useAnimatedStyle(() => {
1944
1971
  const activeKeys = activeKeysRef.current;
1945
1972
  const hasTransform = hasTransformRef.current;
1973
+ const hasShadowOffset = hasShadowOffsetRef.current;
1946
1974
  const out = {};
1947
1975
  const transform = [];
1976
+ let shadowOffsetW = 0;
1977
+ let shadowOffsetH = 0;
1948
1978
  const ph = hoveredProgress.value;
1949
1979
  const pf = focusedProgress.value;
1950
1980
  const pfv = focusVisibleProgress.value;
@@ -1977,11 +2007,18 @@ function createMotionComponent(Component) {
1977
2007
  transform.push(
1978
2008
  ROTATION_KEYS.has(key) ? { [key]: `${v}deg` } : { [key]: v }
1979
2009
  );
2010
+ } else if (key === "shadowOffsetWidth") {
2011
+ shadowOffsetW = v;
2012
+ } else if (key === "shadowOffsetHeight") {
2013
+ shadowOffsetH = v;
1980
2014
  } else {
1981
2015
  out[key] = v;
1982
2016
  }
1983
2017
  }
1984
2018
  if (hasTransform) out.transform = transform;
2019
+ if (hasShadowOffset) {
2020
+ out.shadowOffset = { width: shadowOffsetW, height: shadowOffsetH };
2021
+ }
1985
2022
  return out;
1986
2023
  });
1987
2024
  const mergedStyle = react.useMemo(
@@ -2029,12 +2066,22 @@ function useAnimatableSharedValues(init2) {
2029
2066
  const width = Animated.useSharedValue(init2("width"));
2030
2067
  const height = Animated.useSharedValue(init2("height"));
2031
2068
  const borderRadius = Animated.useSharedValue(init2("borderRadius"));
2069
+ const shadowOpacity = Animated.useSharedValue(init2("shadowOpacity"));
2070
+ const shadowRadius = Animated.useSharedValue(init2("shadowRadius"));
2071
+ const elevation = Animated.useSharedValue(init2("elevation"));
2032
2072
  const backgroundColor = Animated.useSharedValue(
2033
2073
  init2("backgroundColor")
2034
2074
  );
2035
2075
  const borderColor = Animated.useSharedValue(init2("borderColor"));
2036
2076
  const color = Animated.useSharedValue(init2("color"));
2037
2077
  const tintColor = Animated.useSharedValue(init2("tintColor"));
2078
+ const shadowColor = Animated.useSharedValue(init2("shadowColor"));
2079
+ const shadowOffsetWidth = Animated.useSharedValue(
2080
+ init2("shadowOffsetWidth")
2081
+ );
2082
+ const shadowOffsetHeight = Animated.useSharedValue(
2083
+ init2("shadowOffsetHeight")
2084
+ );
2038
2085
  const ref = react.useRef(null);
2039
2086
  if (ref.current === null) {
2040
2087
  ref.current = {
@@ -2050,10 +2097,16 @@ function useAnimatableSharedValues(init2) {
2050
2097
  width,
2051
2098
  height,
2052
2099
  borderRadius,
2100
+ shadowOpacity,
2101
+ shadowRadius,
2102
+ elevation,
2053
2103
  backgroundColor,
2054
2104
  borderColor,
2055
2105
  color,
2056
- tintColor
2106
+ tintColor,
2107
+ shadowColor,
2108
+ shadowOffsetWidth,
2109
+ shadowOffsetHeight
2057
2110
  };
2058
2111
  }
2059
2112
  return ref.current;
@@ -2121,6 +2174,22 @@ function makeKeyCallbackFactory(key, sharedValue, target, onAnimationEndRef, met
2121
2174
  return cb;
2122
2175
  };
2123
2176
  }
2177
+ function shadowOffsetAxisFor(key) {
2178
+ return key === "shadowOffsetWidth" ? "width" : "height";
2179
+ }
2180
+ function shadowOffsetAxisValue(source, axis) {
2181
+ return source?.[axis];
2182
+ }
2183
+ function collectTouchedKeys(touched, record) {
2184
+ for (const k of ALL_KEYS) {
2185
+ if (k in record) touched.add(k);
2186
+ }
2187
+ if ("shadowOffset" in record && record.shadowOffset) {
2188
+ const so = record.shadowOffset;
2189
+ if (so.width !== void 0) touched.add("shadowOffsetWidth");
2190
+ if (so.height !== void 0) touched.add("shadowOffsetHeight");
2191
+ }
2192
+ }
2124
2193
  function stepCountOf(v) {
2125
2194
  if (Array.isArray(v)) return v.length;
2126
2195
  return 1;
@@ -2190,6 +2259,13 @@ function resolveGestureLayers(gesture) {
2190
2259
  if (!subState) continue;
2191
2260
  const resolved = {};
2192
2261
  for (const key of ALL_KEYS) {
2262
+ if (SHADOW_OFFSET_KEY_SET.has(key)) {
2263
+ const axis = shadowOffsetAxisFor(key);
2264
+ const so = subState.shadowOffset;
2265
+ const v = shadowOffsetAxisValue(so, axis);
2266
+ if (v !== void 0) resolved[key] = v;
2267
+ continue;
2268
+ }
2193
2269
  const raw = subState[key];
2194
2270
  if (raw === void 0) continue;
2195
2271
  const t = targetEndValue(raw);