@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
@@ -1445,13 +1445,17 @@ if (globalThis._ALWAYS_FALSE) {
1445
1445
  // src/transitions/easing.ts
1446
1446
  function ensureWorkletEasing(easing) {
1447
1447
  if (!easing) return void 0;
1448
- if (isWorkletFunction(easing)) return easing;
1448
+ const fn = isEasingFactory(easing) ? easing.factory() : easing;
1449
+ if (isWorkletFunction(fn)) return fn;
1449
1450
  const wrapped = (t) => {
1450
1451
  "worklet";
1451
- return easing(t);
1452
+ return fn(t);
1452
1453
  };
1453
1454
  return wrapped;
1454
1455
  }
1456
+ function isEasingFactory(value) {
1457
+ return typeof value === "object" && value !== null && "factory" in value && typeof value.factory === "function";
1458
+ }
1455
1459
 
1456
1460
  // src/transitions/spring.ts
1457
1461
  var DEFAULT_SPRING = {
@@ -1460,6 +1464,7 @@ var DEFAULT_SPRING = {
1460
1464
  mass: 1
1461
1465
  };
1462
1466
  function springToReanimated(t) {
1467
+ "worklet";
1463
1468
  return {
1464
1469
  stiffness: t.tension ?? DEFAULT_SPRING.tension,
1465
1470
  damping: t.friction ?? DEFAULT_SPRING.friction,
@@ -1694,21 +1699,28 @@ var NUMERIC_TOP_LEVEL_KEYS = [
1694
1699
  "opacity",
1695
1700
  "width",
1696
1701
  "height",
1697
- "borderRadius"
1702
+ "borderRadius",
1703
+ "shadowOpacity",
1704
+ "shadowRadius",
1705
+ "elevation"
1698
1706
  ];
1699
1707
  var COLOR_KEYS = [
1700
1708
  "backgroundColor",
1701
1709
  "borderColor",
1702
1710
  "color",
1703
- "tintColor"
1711
+ "tintColor",
1712
+ "shadowColor"
1704
1713
  ];
1714
+ var SHADOW_OFFSET_KEYS = ["shadowOffsetWidth", "shadowOffsetHeight"];
1705
1715
  var ALL_KEYS = [
1706
1716
  ...TRANSFORM_KEYS,
1707
1717
  ...NUMERIC_TOP_LEVEL_KEYS,
1708
- ...COLOR_KEYS
1718
+ ...COLOR_KEYS,
1719
+ ...SHADOW_OFFSET_KEYS
1709
1720
  ];
1710
1721
  var TRANSFORM_KEY_SET = new Set(TRANSFORM_KEYS);
1711
1722
  var COLOR_KEY_SET = new Set(COLOR_KEYS);
1723
+ var SHADOW_OFFSET_KEY_SET = new Set(SHADOW_OFFSET_KEYS);
1712
1724
  var GESTURE_LAYER_NAMES = [
1713
1725
  "hovered",
1714
1726
  "focused",
@@ -1730,6 +1742,9 @@ var DEFAULT_RESTING = {
1730
1742
  width: 0,
1731
1743
  height: 0,
1732
1744
  borderRadius: 0,
1745
+ shadowOpacity: 0,
1746
+ shadowRadius: 0,
1747
+ elevation: 0,
1733
1748
  // 'transparent' is the only safe universal default for colors: it works as
1734
1749
  // an initial seed for any color animation (no jarring opaque flash on mount
1735
1750
  // when `initial` is omitted) and rgba(0,0,0,0) interpolates cleanly into
@@ -1737,7 +1752,10 @@ var DEFAULT_RESTING = {
1737
1752
  backgroundColor: "transparent",
1738
1753
  borderColor: "transparent",
1739
1754
  color: "transparent",
1740
- tintColor: "transparent"
1755
+ tintColor: "transparent",
1756
+ shadowColor: "transparent",
1757
+ shadowOffsetWidth: 0,
1758
+ shadowOffsetHeight: 0
1741
1759
  };
1742
1760
  function transitionFor(prop, transition) {
1743
1761
  if (!transition) return void 0;
@@ -1791,16 +1809,12 @@ function createMotionComponent(Component) {
1791
1809
  const activeKeysRef = useRef(null);
1792
1810
  if (activeKeysRef.current === null) {
1793
1811
  const touched = /* @__PURE__ */ new Set();
1794
- for (const k of ALL_KEYS) {
1795
- if (k in animateRecord) touched.add(k);
1796
- if (initialRecord && k in initialRecord) touched.add(k);
1797
- }
1812
+ collectTouchedKeys(touched, animateRecord);
1813
+ if (initialRecord) collectTouchedKeys(touched, initialRecord);
1798
1814
  if (variants) {
1799
1815
  for (const variant of Object.values(variants)) {
1800
1816
  if (!variant) continue;
1801
- for (const k of ALL_KEYS) {
1802
- if (k in variant) touched.add(k);
1803
- }
1817
+ collectTouchedKeys(touched, variant);
1804
1818
  }
1805
1819
  }
1806
1820
  if (gesture) {
@@ -1811,22 +1825,29 @@ function createMotionComponent(Component) {
1811
1825
  gesture.hovered
1812
1826
  ]) {
1813
1827
  if (!subState) continue;
1814
- for (const k of ALL_KEYS) {
1815
- if (k in subState) touched.add(k);
1816
- }
1817
- }
1818
- }
1819
- if (exitRecord) {
1820
- for (const k of ALL_KEYS) {
1821
- if (k in exitRecord) touched.add(k);
1828
+ collectTouchedKeys(touched, subState);
1822
1829
  }
1823
1830
  }
1831
+ if (exitRecord) collectTouchedKeys(touched, exitRecord);
1824
1832
  activeKeysRef.current = ALL_KEYS.filter((k) => touched.has(k));
1825
1833
  }
1826
1834
  const hasTransformRef = useRef(
1827
1835
  activeKeysRef.current.some((k) => TRANSFORM_KEY_SET.has(k))
1828
1836
  );
1837
+ const hasShadowOffsetRef = useRef(
1838
+ activeKeysRef.current.some((k) => SHADOW_OFFSET_KEY_SET.has(k))
1839
+ );
1829
1840
  const sharedValues = useAnimatableSharedValues((key) => {
1841
+ if (SHADOW_OFFSET_KEY_SET.has(key)) {
1842
+ const axis = shadowOffsetAxisFor(key);
1843
+ if (initial === false) {
1844
+ return shadowOffsetAxisValue(animateRecord.shadowOffset, axis) ?? DEFAULT_RESTING[key];
1845
+ }
1846
+ return shadowOffsetAxisValue(
1847
+ initialRecord?.shadowOffset,
1848
+ axis
1849
+ ) ?? shadowOffsetAxisValue(animateRecord.shadowOffset, axis) ?? DEFAULT_RESTING[key];
1850
+ }
1830
1851
  if (initial === false) {
1831
1852
  const a = animateRecord[key];
1832
1853
  return restValue(a) ?? DEFAULT_RESTING[key];
@@ -1872,9 +1893,15 @@ function createMotionComponent(Component) {
1872
1893
  }
1873
1894
  const transformGroup = transformPending > 0 ? { remaining: transformPending } : void 0;
1874
1895
  for (const key of ALL_KEYS) {
1875
- const target = baseRecord[key];
1896
+ const target = SHADOW_OFFSET_KEY_SET.has(key) ? shadowOffsetAxisValue(
1897
+ baseRecord.shadowOffset,
1898
+ shadowOffsetAxisFor(key)
1899
+ ) : baseRecord[key];
1876
1900
  if (target === void 0) continue;
1877
- const cfg = shouldReduceMotion ? { type: "no-animation" } : transitionFor(key, transition);
1901
+ const cfg = shouldReduceMotion ? { type: "no-animation" } : transitionFor(
1902
+ SHADOW_OFFSET_KEY_SET.has(key) ? "shadowOffset" : key,
1903
+ transition
1904
+ );
1878
1905
  if (isExiting) pending++;
1879
1906
  const factory = makeKeyCallbackFactory(
1880
1907
  key,
@@ -1937,8 +1964,11 @@ function createMotionComponent(Component) {
1937
1964
  const animatedStyle = useAnimatedStyle(() => {
1938
1965
  const activeKeys = activeKeysRef.current;
1939
1966
  const hasTransform = hasTransformRef.current;
1967
+ const hasShadowOffset = hasShadowOffsetRef.current;
1940
1968
  const out = {};
1941
1969
  const transform = [];
1970
+ let shadowOffsetW = 0;
1971
+ let shadowOffsetH = 0;
1942
1972
  const ph = hoveredProgress.value;
1943
1973
  const pf = focusedProgress.value;
1944
1974
  const pfv = focusVisibleProgress.value;
@@ -1971,11 +2001,18 @@ function createMotionComponent(Component) {
1971
2001
  transform.push(
1972
2002
  ROTATION_KEYS.has(key) ? { [key]: `${v}deg` } : { [key]: v }
1973
2003
  );
2004
+ } else if (key === "shadowOffsetWidth") {
2005
+ shadowOffsetW = v;
2006
+ } else if (key === "shadowOffsetHeight") {
2007
+ shadowOffsetH = v;
1974
2008
  } else {
1975
2009
  out[key] = v;
1976
2010
  }
1977
2011
  }
1978
2012
  if (hasTransform) out.transform = transform;
2013
+ if (hasShadowOffset) {
2014
+ out.shadowOffset = { width: shadowOffsetW, height: shadowOffsetH };
2015
+ }
1979
2016
  return out;
1980
2017
  });
1981
2018
  const mergedStyle = useMemo(
@@ -2023,12 +2060,22 @@ function useAnimatableSharedValues(init2) {
2023
2060
  const width = useSharedValue(init2("width"));
2024
2061
  const height = useSharedValue(init2("height"));
2025
2062
  const borderRadius = useSharedValue(init2("borderRadius"));
2063
+ const shadowOpacity = useSharedValue(init2("shadowOpacity"));
2064
+ const shadowRadius = useSharedValue(init2("shadowRadius"));
2065
+ const elevation = useSharedValue(init2("elevation"));
2026
2066
  const backgroundColor = useSharedValue(
2027
2067
  init2("backgroundColor")
2028
2068
  );
2029
2069
  const borderColor = useSharedValue(init2("borderColor"));
2030
2070
  const color = useSharedValue(init2("color"));
2031
2071
  const tintColor = useSharedValue(init2("tintColor"));
2072
+ const shadowColor = useSharedValue(init2("shadowColor"));
2073
+ const shadowOffsetWidth = useSharedValue(
2074
+ init2("shadowOffsetWidth")
2075
+ );
2076
+ const shadowOffsetHeight = useSharedValue(
2077
+ init2("shadowOffsetHeight")
2078
+ );
2032
2079
  const ref = useRef(null);
2033
2080
  if (ref.current === null) {
2034
2081
  ref.current = {
@@ -2044,10 +2091,16 @@ function useAnimatableSharedValues(init2) {
2044
2091
  width,
2045
2092
  height,
2046
2093
  borderRadius,
2094
+ shadowOpacity,
2095
+ shadowRadius,
2096
+ elevation,
2047
2097
  backgroundColor,
2048
2098
  borderColor,
2049
2099
  color,
2050
- tintColor
2100
+ tintColor,
2101
+ shadowColor,
2102
+ shadowOffsetWidth,
2103
+ shadowOffsetHeight
2051
2104
  };
2052
2105
  }
2053
2106
  return ref.current;
@@ -2115,6 +2168,22 @@ function makeKeyCallbackFactory(key, sharedValue, target, onAnimationEndRef, met
2115
2168
  return cb;
2116
2169
  };
2117
2170
  }
2171
+ function shadowOffsetAxisFor(key) {
2172
+ return key === "shadowOffsetWidth" ? "width" : "height";
2173
+ }
2174
+ function shadowOffsetAxisValue(source, axis) {
2175
+ return source?.[axis];
2176
+ }
2177
+ function collectTouchedKeys(touched, record) {
2178
+ for (const k of ALL_KEYS) {
2179
+ if (k in record) touched.add(k);
2180
+ }
2181
+ if ("shadowOffset" in record && record.shadowOffset) {
2182
+ const so = record.shadowOffset;
2183
+ if (so.width !== void 0) touched.add("shadowOffsetWidth");
2184
+ if (so.height !== void 0) touched.add("shadowOffsetHeight");
2185
+ }
2186
+ }
2118
2187
  function stepCountOf(v) {
2119
2188
  if (Array.isArray(v)) return v.length;
2120
2189
  return 1;
@@ -2184,6 +2253,13 @@ function resolveGestureLayers(gesture) {
2184
2253
  if (!subState) continue;
2185
2254
  const resolved = {};
2186
2255
  for (const key of ALL_KEYS) {
2256
+ if (SHADOW_OFFSET_KEY_SET.has(key)) {
2257
+ const axis = shadowOffsetAxisFor(key);
2258
+ const so = subState.shadowOffset;
2259
+ const v = shadowOffsetAxisValue(so, axis);
2260
+ if (v !== void 0) resolved[key] = v;
2261
+ continue;
2262
+ }
2187
2263
  const raw = subState[key];
2188
2264
  if (raw === void 0) continue;
2189
2265
  const t = targetEndValue(raw);