@rootnative/inertia 0.0.2 → 0.0.4
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.
- package/CHANGELOG.md +63 -5
- package/README.md +5 -3
- package/dist/{chunk-ZN3PNGHQ.mjs → chunk-4ASOELLA.mjs} +1 -1
- package/dist/{chunk-LYMLQ6WQ.mjs → chunk-55W7BNO2.mjs} +604 -106
- package/dist/chunk-5SRD2WCO.js +8 -0
- package/dist/{chunk-PTRF47DA.js → chunk-7A6WTXNK.js} +10 -3
- package/dist/{chunk-NKA6XR77.js → chunk-CENTULW6.js} +2 -2
- package/dist/{chunk-4PEHWDAZ.js → chunk-D5KAHWMC.js} +7 -7
- package/dist/{chunk-2DHKV2XY.mjs → chunk-J5Q46OPW.mjs} +1 -1
- package/dist/{chunk-RGNX6UZN.mjs → chunk-K3CLP74S.mjs} +2 -2
- package/dist/{chunk-IWLU3VDE.js → chunk-MYE5NMXW.js} +623 -123
- package/dist/{chunk-HFDZAHWP.mjs → chunk-NAOXQJ7U.mjs} +1 -1
- package/dist/{chunk-R63GIUNU.mjs → chunk-QKC3APP4.mjs} +1 -1
- package/dist/{chunk-V6BTXHZK.mjs → chunk-RF7J5FRM.mjs} +1 -1
- package/dist/{chunk-CY7Y64C3.mjs → chunk-TU2XFPAK.mjs} +10 -4
- package/dist/chunk-TVFNJ25Z.js +8 -0
- package/dist/chunk-VLDIFL3F.js +8 -0
- package/dist/{chunk-7AOERN53.js → chunk-WVRCKOPO.js} +3 -3
- package/dist/{chunk-TUYHTHVV.js → chunk-XMEVPEMH.js} +2 -2
- package/dist/{chunk-TUMNV4P7.mjs → chunk-YKGY22SB.mjs} +1 -1
- package/dist/gestureLayer/index.d.mts +2 -2
- package/dist/gestureLayer/index.d.ts +2 -2
- package/dist/gestureLayer/index.js +10 -10
- package/dist/gestureLayer/index.mjs +3 -3
- package/dist/index.d.mts +14 -12
- package/dist/index.d.ts +14 -12
- package/dist/index.js +68 -176
- package/dist/index.mjs +40 -147
- package/dist/motion/Image.d.mts +1 -1
- package/dist/motion/Image.d.ts +1 -1
- package/dist/motion/Image.js +5 -5
- package/dist/motion/Image.mjs +4 -4
- package/dist/motion/Pressable.d.mts +1 -1
- package/dist/motion/Pressable.d.ts +1 -1
- package/dist/motion/Pressable.js +5 -5
- package/dist/motion/Pressable.mjs +4 -4
- package/dist/motion/ScrollView.d.mts +1 -1
- package/dist/motion/ScrollView.d.ts +1 -1
- package/dist/motion/ScrollView.js +5 -5
- package/dist/motion/ScrollView.mjs +4 -4
- package/dist/motion/Text.d.mts +1 -1
- package/dist/motion/Text.d.ts +1 -1
- package/dist/motion/Text.js +5 -5
- package/dist/motion/Text.mjs +4 -4
- package/dist/motion/View.d.mts +1 -1
- package/dist/motion/View.d.ts +1 -1
- package/dist/motion/View.js +5 -5
- package/dist/motion/View.mjs +4 -4
- package/dist/touch/index.d.mts +1 -1
- package/dist/touch/index.d.ts +1 -1
- package/dist/touch/index.js +3 -3
- package/dist/touch/index.mjs +1 -1
- package/dist/{types-G1dBU2IQ.d.mts → types-37pN82yh.d.mts} +49 -14
- package/dist/{types-G1dBU2IQ.d.ts → types-37pN82yh.d.ts} +49 -14
- package/dist/{useGesture-D1e4ixJo.d.ts → useGesture-Cl4uzZIr.d.ts} +1 -1
- package/dist/{useGesture-RFY6kTL3.d.mts → useGesture-_IKkS8Dv.d.mts} +1 -1
- package/llms.txt +3 -1
- package/package.json +1 -1
- package/src/index.ts +2 -1
- package/src/internal/boxShadow.ts +177 -6
- package/src/internal/nonWorkletWarning.ts +4 -6
- package/src/internal/warnOnce.ts +28 -0
- package/src/layout/index.ts +11 -0
- package/src/layout/measureWindow.ts +135 -0
- package/src/layout/sharedRegistry.ts +156 -18
- package/src/layout/useSharedLayout.ts +256 -91
- package/src/motion/createMotionComponent.tsx +550 -55
- package/src/motion/installCheck.ts +1 -1
- package/src/presence/Presence.tsx +73 -10
- package/src/transitions/index.ts +1 -1
- package/src/types.ts +52 -12
- package/src/values/useAnimator.ts +25 -14
- package/src/values/useColorCascade.ts +34 -16
- package/src/values/useColorTransition.ts +1 -1
- package/dist/chunk-34Q4UM6V.js +0 -8
- package/dist/chunk-KYJROYCG.js +0 -8
- package/dist/chunk-X5J5M3K3.js +0 -8
package/dist/index.js
CHANGED
|
@@ -1,34 +1,34 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
var
|
|
3
|
+
var chunkD5KAHWMC_js = require('./chunk-D5KAHWMC.js');
|
|
4
|
+
var chunkVLDIFL3F_js = require('./chunk-VLDIFL3F.js');
|
|
5
|
+
var chunkTVFNJ25Z_js = require('./chunk-TVFNJ25Z.js');
|
|
6
|
+
var chunk5SRD2WCO_js = require('./chunk-5SRD2WCO.js');
|
|
7
|
+
var chunkCENTULW6_js = require('./chunk-CENTULW6.js');
|
|
8
|
+
var chunkXMEVPEMH_js = require('./chunk-XMEVPEMH.js');
|
|
9
|
+
var chunkMYE5NMXW_js = require('./chunk-MYE5NMXW.js');
|
|
10
|
+
var chunkWVRCKOPO_js = require('./chunk-WVRCKOPO.js');
|
|
11
|
+
var chunk7A6WTXNK_js = require('./chunk-7A6WTXNK.js');
|
|
12
12
|
var react = require('react');
|
|
13
13
|
var reactNativeReanimated = require('react-native-reanimated');
|
|
14
14
|
var reactNativeWorklets = require('react-native-worklets');
|
|
15
15
|
|
|
16
16
|
// src/motion/index.ts
|
|
17
17
|
var Motion = {
|
|
18
|
-
View:
|
|
19
|
-
Text:
|
|
20
|
-
Image:
|
|
21
|
-
Pressable:
|
|
22
|
-
ScrollView:
|
|
18
|
+
View: chunkVLDIFL3F_js.MotionView,
|
|
19
|
+
Text: chunkTVFNJ25Z_js.MotionText,
|
|
20
|
+
Image: chunk5SRD2WCO_js.MotionImage,
|
|
21
|
+
Pressable: chunkCENTULW6_js.MotionPressable,
|
|
22
|
+
ScrollView: chunkXMEVPEMH_js.MotionScrollView
|
|
23
23
|
};
|
|
24
24
|
function useAnimation(target, transition) {
|
|
25
25
|
const output = reactNativeReanimated.useSharedValue(target);
|
|
26
|
-
const shouldReduceMotion =
|
|
27
|
-
const resolved =
|
|
28
|
-
const cfgSig =
|
|
26
|
+
const shouldReduceMotion = chunkWVRCKOPO_js.useShouldReduceMotion();
|
|
27
|
+
const resolved = chunkWVRCKOPO_js.resolveNamedTransition(transition, chunkWVRCKOPO_js.useNamedTransitions());
|
|
28
|
+
const cfgSig = chunk7A6WTXNK_js.stableSig(resolved);
|
|
29
29
|
react.useEffect(() => {
|
|
30
30
|
const cfg = shouldReduceMotion ? { type: "no-animation" } : resolved ?? { type: "spring" };
|
|
31
|
-
output.value =
|
|
31
|
+
output.value = chunk7A6WTXNK_js.resolveTransition(cfg, target);
|
|
32
32
|
}, [target, cfgSig, shouldReduceMotion]);
|
|
33
33
|
react.useEffect(
|
|
34
34
|
() => () => reactNativeReanimated.cancelAnimation(output),
|
|
@@ -39,21 +39,22 @@ function useAnimation(target, transition) {
|
|
|
39
39
|
return output;
|
|
40
40
|
}
|
|
41
41
|
function useAnimator() {
|
|
42
|
-
const registry =
|
|
43
|
-
const shouldReduceMotion =
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
42
|
+
const registry = chunkWVRCKOPO_js.useNamedTransitions();
|
|
43
|
+
const shouldReduceMotion = chunkWVRCKOPO_js.useShouldReduceMotion();
|
|
44
|
+
const registryRef = react.useRef(registry);
|
|
45
|
+
registryRef.current = registry;
|
|
46
|
+
const reduceMotionRef = react.useRef(shouldReduceMotion);
|
|
47
|
+
reduceMotionRef.current = shouldReduceMotion;
|
|
48
|
+
return react.useCallback((value, to, transition) => {
|
|
49
|
+
const resolved = chunkWVRCKOPO_js.resolveNamedTransition(transition, registryRef.current);
|
|
50
|
+
const cfg = reduceMotionRef.current ? { type: "no-animation" } : resolved ?? { type: "spring" };
|
|
51
|
+
value.value = chunk7A6WTXNK_js.resolveTransition(cfg, to);
|
|
52
|
+
}, []);
|
|
52
53
|
}
|
|
53
54
|
function useSpring(target, config) {
|
|
54
|
-
const spring = resolveSpringInput(config,
|
|
55
|
+
const spring = resolveSpringInput(config, chunkWVRCKOPO_js.useNamedTransitions());
|
|
55
56
|
const reanimConfig = react.useMemo(
|
|
56
|
-
() =>
|
|
57
|
+
() => chunk7A6WTXNK_js.springToReanimated(spring ?? {}),
|
|
57
58
|
// Keyed on the resolved primitive fields rather than the `config` object
|
|
58
59
|
// identity: callers routinely pass a fresh object literal each render, so
|
|
59
60
|
// depending on `config` itself would rebuild the Reanimated config on
|
|
@@ -98,7 +99,7 @@ function useSpring(target, config) {
|
|
|
98
99
|
}
|
|
99
100
|
function resolveSpringInput(config, registry) {
|
|
100
101
|
if (typeof config !== "string") return config;
|
|
101
|
-
const cfg =
|
|
102
|
+
const cfg = chunkWVRCKOPO_js.lookupNamedTransition(config, registry);
|
|
102
103
|
if (cfg.type === void 0 || cfg.type === "spring") return cfg;
|
|
103
104
|
if (__DEV__) {
|
|
104
105
|
console.warn(
|
|
@@ -119,7 +120,19 @@ function useColorCascade(rest, layers, options) {
|
|
|
119
120
|
const key = options?.key ?? "backgroundColor";
|
|
120
121
|
const sig = `${key}|${rest}|${layers.length}|${layers.map((l) => l.color).join(",")}`;
|
|
121
122
|
const colors = react.useMemo(() => layers.map((l) => l.color), [sig]);
|
|
122
|
-
const
|
|
123
|
+
const progressRef = react.useRef([]);
|
|
124
|
+
const prevProgress = progressRef.current;
|
|
125
|
+
let progressChanged = prevProgress.length !== layers.length;
|
|
126
|
+
if (!progressChanged) {
|
|
127
|
+
for (let i = 0; i < layers.length; i++) {
|
|
128
|
+
if (prevProgress[i] !== layers[i].progress) {
|
|
129
|
+
progressChanged = true;
|
|
130
|
+
break;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
if (progressChanged) progressRef.current = layers.map((l) => l.progress);
|
|
135
|
+
const progressValues = progressRef.current;
|
|
123
136
|
return reactNativeReanimated.useAnimatedStyle(() => {
|
|
124
137
|
"worklet";
|
|
125
138
|
let acc = rest;
|
|
@@ -283,7 +296,7 @@ function useTransform(arg1, inputRange, outputRange, options) {
|
|
|
283
296
|
if (reactNativeWorklets.isWorkletFunction(userFn)) {
|
|
284
297
|
producer = userFn;
|
|
285
298
|
} else {
|
|
286
|
-
|
|
299
|
+
chunk7A6WTXNK_js.warnNonWorkletOnce(
|
|
287
300
|
"useTransform-transformer",
|
|
288
301
|
"[inertia] useTransform: the transformer is not a worklet, so the shared values it reads can't be tracked as dependencies \u2014 the derived value will only refresh on React re-renders, and native builds reject plain functions on the UI thread. Add the 'worklet' directive as the first statement of the transformer."
|
|
289
302
|
);
|
|
@@ -339,127 +352,6 @@ function useScroll() {
|
|
|
339
352
|
onScroll: handler
|
|
340
353
|
};
|
|
341
354
|
}
|
|
342
|
-
|
|
343
|
-
// src/internal/boxShadow.ts
|
|
344
|
-
var LENGTH = /^[+-]?(\d+\.?\d*|\.\d+)(px)?$/i;
|
|
345
|
-
var UNIT_LIKE = /^[+-]?(\d+\.?\d*|\.\d+)[a-z%]+$/i;
|
|
346
|
-
function invalid(input, reason) {
|
|
347
|
-
return new Error(
|
|
348
|
-
`[inertia] parseBoxShadow: ${reason} in ${JSON.stringify(input)}. Expected CSS box-shadow syntax with px lengths: '[inset] <offset-x> <offset-y> [blur] [spread] [color], ...'`
|
|
349
|
-
);
|
|
350
|
-
}
|
|
351
|
-
function splitLayers(input) {
|
|
352
|
-
const layers = [];
|
|
353
|
-
let depth = 0;
|
|
354
|
-
let start = 0;
|
|
355
|
-
for (let i = 0; i < input.length; i++) {
|
|
356
|
-
const ch = input[i];
|
|
357
|
-
if (ch === "(") depth++;
|
|
358
|
-
else if (ch === ")") depth--;
|
|
359
|
-
else if (ch === "," && depth === 0) {
|
|
360
|
-
layers.push(input.slice(start, i));
|
|
361
|
-
start = i + 1;
|
|
362
|
-
}
|
|
363
|
-
}
|
|
364
|
-
layers.push(input.slice(start));
|
|
365
|
-
return layers;
|
|
366
|
-
}
|
|
367
|
-
function tokenize(layer) {
|
|
368
|
-
const tokens = [];
|
|
369
|
-
let depth = 0;
|
|
370
|
-
let current = "";
|
|
371
|
-
for (const ch of layer) {
|
|
372
|
-
if (ch === "(") depth++;
|
|
373
|
-
else if (ch === ")") depth--;
|
|
374
|
-
if (depth === 0 && /\s/.test(ch)) {
|
|
375
|
-
if (current) tokens.push(current);
|
|
376
|
-
current = "";
|
|
377
|
-
} else {
|
|
378
|
-
current += ch;
|
|
379
|
-
}
|
|
380
|
-
}
|
|
381
|
-
if (current) tokens.push(current);
|
|
382
|
-
return tokens;
|
|
383
|
-
}
|
|
384
|
-
function parseBoxShadow(input) {
|
|
385
|
-
const trimmed = input.trim();
|
|
386
|
-
if (trimmed === "") throw invalid(input, "empty string");
|
|
387
|
-
if (trimmed.toLowerCase() === "none") return [];
|
|
388
|
-
return splitLayers(trimmed).map((layerString) => {
|
|
389
|
-
const tokens = tokenize(layerString.trim());
|
|
390
|
-
if (tokens.length === 0) throw invalid(input, "empty layer");
|
|
391
|
-
const lengths = [];
|
|
392
|
-
let color;
|
|
393
|
-
let inset = false;
|
|
394
|
-
for (const token of tokens) {
|
|
395
|
-
if (token.toLowerCase() === "inset") {
|
|
396
|
-
if (inset) throw invalid(input, "duplicate 'inset'");
|
|
397
|
-
inset = true;
|
|
398
|
-
} else if (LENGTH.test(token)) {
|
|
399
|
-
lengths.push(parseFloat(token));
|
|
400
|
-
} else if (UNIT_LIKE.test(token)) {
|
|
401
|
-
throw invalid(input, `unsupported unit in ${JSON.stringify(token)}`);
|
|
402
|
-
} else {
|
|
403
|
-
if (color !== void 0) throw invalid(input, "multiple colors");
|
|
404
|
-
color = token;
|
|
405
|
-
}
|
|
406
|
-
}
|
|
407
|
-
if (lengths.length < 2 || lengths.length > 4) {
|
|
408
|
-
throw invalid(input, `expected 2-4 lengths, got ${lengths.length}`);
|
|
409
|
-
}
|
|
410
|
-
const [offsetX = 0, offsetY = 0, blurRadius = 0, spreadDistance = 0] = lengths;
|
|
411
|
-
if (blurRadius < 0) throw invalid(input, "negative blur radius");
|
|
412
|
-
return {
|
|
413
|
-
offsetX,
|
|
414
|
-
offsetY,
|
|
415
|
-
blurRadius,
|
|
416
|
-
spreadDistance,
|
|
417
|
-
color: color ?? "black",
|
|
418
|
-
inset
|
|
419
|
-
};
|
|
420
|
-
});
|
|
421
|
-
}
|
|
422
|
-
function resolveBoxShadowInput(input) {
|
|
423
|
-
if (input === void 0) return [];
|
|
424
|
-
if (typeof input === "string") return parseBoxShadow(input);
|
|
425
|
-
return input.map((layer) => ({
|
|
426
|
-
offsetX: layer.offsetX,
|
|
427
|
-
offsetY: layer.offsetY,
|
|
428
|
-
blurRadius: layer.blurRadius ?? 0,
|
|
429
|
-
spreadDistance: layer.spreadDistance ?? 0,
|
|
430
|
-
color: layer.color ?? "black",
|
|
431
|
-
inset: layer.inset ?? false
|
|
432
|
-
}));
|
|
433
|
-
}
|
|
434
|
-
function pairBoxShadowLayers(from, to) {
|
|
435
|
-
const count = Math.max(from.length, to.length);
|
|
436
|
-
const pairs = [];
|
|
437
|
-
for (let i = 0; i < count; i++) {
|
|
438
|
-
const a = from[i];
|
|
439
|
-
const b = to[i];
|
|
440
|
-
const fromLayer = a ?? invisibleLayer(b.inset);
|
|
441
|
-
const toLayer = b ?? invisibleLayer(a.inset);
|
|
442
|
-
if (fromLayer.inset !== toLayer.inset) {
|
|
443
|
-
throw new Error(
|
|
444
|
-
`[inertia] useShadow: boxShadow layer ${i} is 'inset' on one side but not the other \u2014 inset cannot be interpolated. Give both sides the same inset-ness (pad with a transparent layer if needed).`
|
|
445
|
-
);
|
|
446
|
-
}
|
|
447
|
-
pairs.push({ from: fromLayer, to: toLayer });
|
|
448
|
-
}
|
|
449
|
-
return pairs;
|
|
450
|
-
}
|
|
451
|
-
function invisibleLayer(inset) {
|
|
452
|
-
return {
|
|
453
|
-
offsetX: 0,
|
|
454
|
-
offsetY: 0,
|
|
455
|
-
blurRadius: 0,
|
|
456
|
-
spreadDistance: 0,
|
|
457
|
-
color: "transparent",
|
|
458
|
-
inset
|
|
459
|
-
};
|
|
460
|
-
}
|
|
461
|
-
|
|
462
|
-
// src/values/useShadow.ts
|
|
463
355
|
function useShadow({
|
|
464
356
|
from,
|
|
465
357
|
to,
|
|
@@ -470,9 +362,9 @@ function useShadow({
|
|
|
470
362
|
const hasElevation = from.elevation !== void 0 || to.elevation !== void 0;
|
|
471
363
|
const hasColor = from.shadowColor !== void 0 || to.shadowColor !== void 0;
|
|
472
364
|
const hasOffset = from.shadowOffset !== void 0 || to.shadowOffset !== void 0;
|
|
473
|
-
const boxShadowPairs = from.boxShadow !== void 0 || to.boxShadow !== void 0 ? pairBoxShadowLayers(
|
|
474
|
-
resolveBoxShadowInput(from.boxShadow),
|
|
475
|
-
resolveBoxShadowInput(to.boxShadow)
|
|
365
|
+
const boxShadowPairs = from.boxShadow !== void 0 || to.boxShadow !== void 0 ? chunkMYE5NMXW_js.pairBoxShadowLayers(
|
|
366
|
+
chunkMYE5NMXW_js.resolveBoxShadowInput(from.boxShadow),
|
|
367
|
+
chunkMYE5NMXW_js.resolveBoxShadowInput(to.boxShadow)
|
|
476
368
|
) : [];
|
|
477
369
|
const opacityFrom = from.shadowOpacity ?? 0;
|
|
478
370
|
const opacityTo = to.shadowOpacity ?? 0;
|
|
@@ -571,79 +463,79 @@ function useVariants(variants, initial) {
|
|
|
571
463
|
|
|
572
464
|
Object.defineProperty(exports, "useGesture", {
|
|
573
465
|
enumerable: true,
|
|
574
|
-
get: function () { return
|
|
466
|
+
get: function () { return chunkD5KAHWMC_js.useGesture; }
|
|
575
467
|
});
|
|
576
468
|
Object.defineProperty(exports, "MotionView", {
|
|
577
469
|
enumerable: true,
|
|
578
|
-
get: function () { return
|
|
470
|
+
get: function () { return chunkVLDIFL3F_js.MotionView; }
|
|
579
471
|
});
|
|
580
472
|
Object.defineProperty(exports, "MotionText", {
|
|
581
473
|
enumerable: true,
|
|
582
|
-
get: function () { return
|
|
474
|
+
get: function () { return chunkTVFNJ25Z_js.MotionText; }
|
|
583
475
|
});
|
|
584
476
|
Object.defineProperty(exports, "MotionImage", {
|
|
585
477
|
enumerable: true,
|
|
586
|
-
get: function () { return
|
|
478
|
+
get: function () { return chunk5SRD2WCO_js.MotionImage; }
|
|
587
479
|
});
|
|
588
480
|
Object.defineProperty(exports, "MotionPressable", {
|
|
589
481
|
enumerable: true,
|
|
590
|
-
get: function () { return
|
|
482
|
+
get: function () { return chunkCENTULW6_js.MotionPressable; }
|
|
591
483
|
});
|
|
592
484
|
Object.defineProperty(exports, "MotionScrollView", {
|
|
593
485
|
enumerable: true,
|
|
594
|
-
get: function () { return
|
|
486
|
+
get: function () { return chunkXMEVPEMH_js.MotionScrollView; }
|
|
595
487
|
});
|
|
596
488
|
Object.defineProperty(exports, "Presence", {
|
|
597
489
|
enumerable: true,
|
|
598
|
-
get: function () { return
|
|
490
|
+
get: function () { return chunkMYE5NMXW_js.Presence; }
|
|
599
491
|
});
|
|
600
492
|
Object.defineProperty(exports, "createMotionComponent", {
|
|
601
493
|
enumerable: true,
|
|
602
|
-
get: function () { return
|
|
494
|
+
get: function () { return chunkMYE5NMXW_js.createMotionComponent; }
|
|
603
495
|
});
|
|
604
496
|
Object.defineProperty(exports, "usePresence", {
|
|
605
497
|
enumerable: true,
|
|
606
|
-
get: function () { return
|
|
498
|
+
get: function () { return chunkMYE5NMXW_js.usePresence; }
|
|
607
499
|
});
|
|
608
500
|
Object.defineProperty(exports, "MotionConfig", {
|
|
609
501
|
enumerable: true,
|
|
610
|
-
get: function () { return
|
|
502
|
+
get: function () { return chunkWVRCKOPO_js.MotionConfig; }
|
|
611
503
|
});
|
|
612
504
|
Object.defineProperty(exports, "resolveNamedTransition", {
|
|
613
505
|
enumerable: true,
|
|
614
|
-
get: function () { return
|
|
506
|
+
get: function () { return chunkWVRCKOPO_js.resolveNamedTransition; }
|
|
615
507
|
});
|
|
616
508
|
Object.defineProperty(exports, "useMotionConfig", {
|
|
617
509
|
enumerable: true,
|
|
618
|
-
get: function () { return
|
|
510
|
+
get: function () { return chunkWVRCKOPO_js.useMotionConfig; }
|
|
619
511
|
});
|
|
620
512
|
Object.defineProperty(exports, "useNamedTransitions", {
|
|
621
513
|
enumerable: true,
|
|
622
|
-
get: function () { return
|
|
514
|
+
get: function () { return chunkWVRCKOPO_js.useNamedTransitions; }
|
|
623
515
|
});
|
|
624
516
|
Object.defineProperty(exports, "useShouldReduceMotion", {
|
|
625
517
|
enumerable: true,
|
|
626
|
-
get: function () { return
|
|
518
|
+
get: function () { return chunkWVRCKOPO_js.useShouldReduceMotion; }
|
|
627
519
|
});
|
|
628
520
|
Object.defineProperty(exports, "buildReleaseAnimation", {
|
|
629
521
|
enumerable: true,
|
|
630
|
-
get: function () { return
|
|
522
|
+
get: function () { return chunk7A6WTXNK_js.buildReleaseAnimation; }
|
|
631
523
|
});
|
|
632
524
|
Object.defineProperty(exports, "cubicBezier", {
|
|
633
525
|
enumerable: true,
|
|
634
|
-
get: function () { return
|
|
526
|
+
get: function () { return chunk7A6WTXNK_js.cubicBezier; }
|
|
635
527
|
});
|
|
636
528
|
Object.defineProperty(exports, "ensureWorkletEasing", {
|
|
637
529
|
enumerable: true,
|
|
638
|
-
get: function () { return
|
|
530
|
+
get: function () { return chunk7A6WTXNK_js.ensureWorkletEasing; }
|
|
639
531
|
});
|
|
640
532
|
Object.defineProperty(exports, "resolveAnimatableValue", {
|
|
641
533
|
enumerable: true,
|
|
642
|
-
get: function () { return
|
|
534
|
+
get: function () { return chunk7A6WTXNK_js.resolveAnimatableValue; }
|
|
643
535
|
});
|
|
644
536
|
Object.defineProperty(exports, "resolveTransition", {
|
|
645
537
|
enumerable: true,
|
|
646
|
-
get: function () { return
|
|
538
|
+
get: function () { return chunk7A6WTXNK_js.resolveTransition; }
|
|
647
539
|
});
|
|
648
540
|
exports.Motion = Motion;
|
|
649
541
|
exports.useAnimation = useAnimation;
|
package/dist/index.mjs
CHANGED
|
@@ -1,20 +1,21 @@
|
|
|
1
|
-
export { useGesture } from './chunk-
|
|
2
|
-
import { MotionView } from './chunk-
|
|
3
|
-
export { MotionView } from './chunk-
|
|
4
|
-
import { MotionText } from './chunk-
|
|
5
|
-
export { MotionText } from './chunk-
|
|
6
|
-
import { MotionImage } from './chunk-
|
|
7
|
-
export { MotionImage } from './chunk-
|
|
8
|
-
import { MotionPressable } from './chunk-
|
|
9
|
-
export { MotionPressable } from './chunk-
|
|
10
|
-
import { MotionScrollView } from './chunk-
|
|
11
|
-
export { MotionScrollView } from './chunk-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
1
|
+
export { useGesture } from './chunk-K3CLP74S.mjs';
|
|
2
|
+
import { MotionView } from './chunk-YKGY22SB.mjs';
|
|
3
|
+
export { MotionView } from './chunk-YKGY22SB.mjs';
|
|
4
|
+
import { MotionText } from './chunk-4ASOELLA.mjs';
|
|
5
|
+
export { MotionText } from './chunk-4ASOELLA.mjs';
|
|
6
|
+
import { MotionImage } from './chunk-J5Q46OPW.mjs';
|
|
7
|
+
export { MotionImage } from './chunk-J5Q46OPW.mjs';
|
|
8
|
+
import { MotionPressable } from './chunk-RF7J5FRM.mjs';
|
|
9
|
+
export { MotionPressable } from './chunk-RF7J5FRM.mjs';
|
|
10
|
+
import { MotionScrollView } from './chunk-NAOXQJ7U.mjs';
|
|
11
|
+
export { MotionScrollView } from './chunk-NAOXQJ7U.mjs';
|
|
12
|
+
import { pairBoxShadowLayers, resolveBoxShadowInput } from './chunk-55W7BNO2.mjs';
|
|
13
|
+
export { Presence, createMotionComponent, usePresence } from './chunk-55W7BNO2.mjs';
|
|
14
|
+
import { useShouldReduceMotion, resolveNamedTransition, useNamedTransitions, lookupNamedTransition } from './chunk-QKC3APP4.mjs';
|
|
15
|
+
export { MotionConfig, resolveNamedTransition, useMotionConfig, useNamedTransitions, useShouldReduceMotion } from './chunk-QKC3APP4.mjs';
|
|
16
|
+
import { stableSig, resolveTransition, springToReanimated, warnNonWorkletOnce } from './chunk-TU2XFPAK.mjs';
|
|
17
|
+
export { buildReleaseAnimation, cubicBezier, ensureWorkletEasing, resolveAnimatableValue, resolveTransition } from './chunk-TU2XFPAK.mjs';
|
|
18
|
+
import { useEffect, useRef, useCallback, useMemo } from 'react';
|
|
18
19
|
import { useSharedValue, cancelAnimation, withSpring, useAnimatedReaction, useAnimatedStyle, interpolateColor, interpolate, useDerivedValue, Extrapolation, useAnimatedScrollHandler } from 'react-native-reanimated';
|
|
19
20
|
import { isWorkletFunction } from 'react-native-worklets';
|
|
20
21
|
|
|
@@ -46,14 +47,15 @@ function useAnimation(target, transition) {
|
|
|
46
47
|
function useAnimator() {
|
|
47
48
|
const registry = useNamedTransitions();
|
|
48
49
|
const shouldReduceMotion = useShouldReduceMotion();
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
50
|
+
const registryRef = useRef(registry);
|
|
51
|
+
registryRef.current = registry;
|
|
52
|
+
const reduceMotionRef = useRef(shouldReduceMotion);
|
|
53
|
+
reduceMotionRef.current = shouldReduceMotion;
|
|
54
|
+
return useCallback((value, to, transition) => {
|
|
55
|
+
const resolved = resolveNamedTransition(transition, registryRef.current);
|
|
56
|
+
const cfg = reduceMotionRef.current ? { type: "no-animation" } : resolved ?? { type: "spring" };
|
|
57
|
+
value.value = resolveTransition(cfg, to);
|
|
58
|
+
}, []);
|
|
57
59
|
}
|
|
58
60
|
function useSpring(target, config) {
|
|
59
61
|
const spring = resolveSpringInput(config, useNamedTransitions());
|
|
@@ -124,7 +126,19 @@ function useColorCascade(rest, layers, options) {
|
|
|
124
126
|
const key = options?.key ?? "backgroundColor";
|
|
125
127
|
const sig = `${key}|${rest}|${layers.length}|${layers.map((l) => l.color).join(",")}`;
|
|
126
128
|
const colors = useMemo(() => layers.map((l) => l.color), [sig]);
|
|
127
|
-
const
|
|
129
|
+
const progressRef = useRef([]);
|
|
130
|
+
const prevProgress = progressRef.current;
|
|
131
|
+
let progressChanged = prevProgress.length !== layers.length;
|
|
132
|
+
if (!progressChanged) {
|
|
133
|
+
for (let i = 0; i < layers.length; i++) {
|
|
134
|
+
if (prevProgress[i] !== layers[i].progress) {
|
|
135
|
+
progressChanged = true;
|
|
136
|
+
break;
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
if (progressChanged) progressRef.current = layers.map((l) => l.progress);
|
|
141
|
+
const progressValues = progressRef.current;
|
|
128
142
|
return useAnimatedStyle(() => {
|
|
129
143
|
"worklet";
|
|
130
144
|
let acc = rest;
|
|
@@ -344,127 +358,6 @@ function useScroll() {
|
|
|
344
358
|
onScroll: handler
|
|
345
359
|
};
|
|
346
360
|
}
|
|
347
|
-
|
|
348
|
-
// src/internal/boxShadow.ts
|
|
349
|
-
var LENGTH = /^[+-]?(\d+\.?\d*|\.\d+)(px)?$/i;
|
|
350
|
-
var UNIT_LIKE = /^[+-]?(\d+\.?\d*|\.\d+)[a-z%]+$/i;
|
|
351
|
-
function invalid(input, reason) {
|
|
352
|
-
return new Error(
|
|
353
|
-
`[inertia] parseBoxShadow: ${reason} in ${JSON.stringify(input)}. Expected CSS box-shadow syntax with px lengths: '[inset] <offset-x> <offset-y> [blur] [spread] [color], ...'`
|
|
354
|
-
);
|
|
355
|
-
}
|
|
356
|
-
function splitLayers(input) {
|
|
357
|
-
const layers = [];
|
|
358
|
-
let depth = 0;
|
|
359
|
-
let start = 0;
|
|
360
|
-
for (let i = 0; i < input.length; i++) {
|
|
361
|
-
const ch = input[i];
|
|
362
|
-
if (ch === "(") depth++;
|
|
363
|
-
else if (ch === ")") depth--;
|
|
364
|
-
else if (ch === "," && depth === 0) {
|
|
365
|
-
layers.push(input.slice(start, i));
|
|
366
|
-
start = i + 1;
|
|
367
|
-
}
|
|
368
|
-
}
|
|
369
|
-
layers.push(input.slice(start));
|
|
370
|
-
return layers;
|
|
371
|
-
}
|
|
372
|
-
function tokenize(layer) {
|
|
373
|
-
const tokens = [];
|
|
374
|
-
let depth = 0;
|
|
375
|
-
let current = "";
|
|
376
|
-
for (const ch of layer) {
|
|
377
|
-
if (ch === "(") depth++;
|
|
378
|
-
else if (ch === ")") depth--;
|
|
379
|
-
if (depth === 0 && /\s/.test(ch)) {
|
|
380
|
-
if (current) tokens.push(current);
|
|
381
|
-
current = "";
|
|
382
|
-
} else {
|
|
383
|
-
current += ch;
|
|
384
|
-
}
|
|
385
|
-
}
|
|
386
|
-
if (current) tokens.push(current);
|
|
387
|
-
return tokens;
|
|
388
|
-
}
|
|
389
|
-
function parseBoxShadow(input) {
|
|
390
|
-
const trimmed = input.trim();
|
|
391
|
-
if (trimmed === "") throw invalid(input, "empty string");
|
|
392
|
-
if (trimmed.toLowerCase() === "none") return [];
|
|
393
|
-
return splitLayers(trimmed).map((layerString) => {
|
|
394
|
-
const tokens = tokenize(layerString.trim());
|
|
395
|
-
if (tokens.length === 0) throw invalid(input, "empty layer");
|
|
396
|
-
const lengths = [];
|
|
397
|
-
let color;
|
|
398
|
-
let inset = false;
|
|
399
|
-
for (const token of tokens) {
|
|
400
|
-
if (token.toLowerCase() === "inset") {
|
|
401
|
-
if (inset) throw invalid(input, "duplicate 'inset'");
|
|
402
|
-
inset = true;
|
|
403
|
-
} else if (LENGTH.test(token)) {
|
|
404
|
-
lengths.push(parseFloat(token));
|
|
405
|
-
} else if (UNIT_LIKE.test(token)) {
|
|
406
|
-
throw invalid(input, `unsupported unit in ${JSON.stringify(token)}`);
|
|
407
|
-
} else {
|
|
408
|
-
if (color !== void 0) throw invalid(input, "multiple colors");
|
|
409
|
-
color = token;
|
|
410
|
-
}
|
|
411
|
-
}
|
|
412
|
-
if (lengths.length < 2 || lengths.length > 4) {
|
|
413
|
-
throw invalid(input, `expected 2-4 lengths, got ${lengths.length}`);
|
|
414
|
-
}
|
|
415
|
-
const [offsetX = 0, offsetY = 0, blurRadius = 0, spreadDistance = 0] = lengths;
|
|
416
|
-
if (blurRadius < 0) throw invalid(input, "negative blur radius");
|
|
417
|
-
return {
|
|
418
|
-
offsetX,
|
|
419
|
-
offsetY,
|
|
420
|
-
blurRadius,
|
|
421
|
-
spreadDistance,
|
|
422
|
-
color: color ?? "black",
|
|
423
|
-
inset
|
|
424
|
-
};
|
|
425
|
-
});
|
|
426
|
-
}
|
|
427
|
-
function resolveBoxShadowInput(input) {
|
|
428
|
-
if (input === void 0) return [];
|
|
429
|
-
if (typeof input === "string") return parseBoxShadow(input);
|
|
430
|
-
return input.map((layer) => ({
|
|
431
|
-
offsetX: layer.offsetX,
|
|
432
|
-
offsetY: layer.offsetY,
|
|
433
|
-
blurRadius: layer.blurRadius ?? 0,
|
|
434
|
-
spreadDistance: layer.spreadDistance ?? 0,
|
|
435
|
-
color: layer.color ?? "black",
|
|
436
|
-
inset: layer.inset ?? false
|
|
437
|
-
}));
|
|
438
|
-
}
|
|
439
|
-
function pairBoxShadowLayers(from, to) {
|
|
440
|
-
const count = Math.max(from.length, to.length);
|
|
441
|
-
const pairs = [];
|
|
442
|
-
for (let i = 0; i < count; i++) {
|
|
443
|
-
const a = from[i];
|
|
444
|
-
const b = to[i];
|
|
445
|
-
const fromLayer = a ?? invisibleLayer(b.inset);
|
|
446
|
-
const toLayer = b ?? invisibleLayer(a.inset);
|
|
447
|
-
if (fromLayer.inset !== toLayer.inset) {
|
|
448
|
-
throw new Error(
|
|
449
|
-
`[inertia] useShadow: boxShadow layer ${i} is 'inset' on one side but not the other \u2014 inset cannot be interpolated. Give both sides the same inset-ness (pad with a transparent layer if needed).`
|
|
450
|
-
);
|
|
451
|
-
}
|
|
452
|
-
pairs.push({ from: fromLayer, to: toLayer });
|
|
453
|
-
}
|
|
454
|
-
return pairs;
|
|
455
|
-
}
|
|
456
|
-
function invisibleLayer(inset) {
|
|
457
|
-
return {
|
|
458
|
-
offsetX: 0,
|
|
459
|
-
offsetY: 0,
|
|
460
|
-
blurRadius: 0,
|
|
461
|
-
spreadDistance: 0,
|
|
462
|
-
color: "transparent",
|
|
463
|
-
inset
|
|
464
|
-
};
|
|
465
|
-
}
|
|
466
|
-
|
|
467
|
-
// src/values/useShadow.ts
|
|
468
361
|
function useShadow({
|
|
469
362
|
from,
|
|
470
363
|
to,
|
package/dist/motion/Image.d.mts
CHANGED
package/dist/motion/Image.d.ts
CHANGED
package/dist/motion/Image.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
require('../chunk-
|
|
5
|
-
require('../chunk-
|
|
6
|
-
require('../chunk-
|
|
3
|
+
var chunk5SRD2WCO_js = require('../chunk-5SRD2WCO.js');
|
|
4
|
+
require('../chunk-MYE5NMXW.js');
|
|
5
|
+
require('../chunk-WVRCKOPO.js');
|
|
6
|
+
require('../chunk-7A6WTXNK.js');
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
Object.defineProperty(exports, "MotionImage", {
|
|
11
11
|
enumerable: true,
|
|
12
|
-
get: function () { return
|
|
12
|
+
get: function () { return chunk5SRD2WCO_js.MotionImage; }
|
|
13
13
|
});
|
package/dist/motion/Image.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { MotionImage } from '../chunk-
|
|
2
|
-
import '../chunk-
|
|
3
|
-
import '../chunk-
|
|
4
|
-
import '../chunk-
|
|
1
|
+
export { MotionImage } from '../chunk-J5Q46OPW.mjs';
|
|
2
|
+
import '../chunk-55W7BNO2.mjs';
|
|
3
|
+
import '../chunk-QKC3APP4.mjs';
|
|
4
|
+
import '../chunk-TU2XFPAK.mjs';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import * as react_native from 'react-native';
|
|
3
|
-
import { M as MotionComponent } from '../types-
|
|
3
|
+
import { M as MotionComponent } from '../types-37pN82yh.mjs';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* Animatable `Pressable`. The `gesture` prop's `pressed` sub-state hooks into
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import * as react_native from 'react-native';
|
|
3
|
-
import { M as MotionComponent } from '../types-
|
|
3
|
+
import { M as MotionComponent } from '../types-37pN82yh.js';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* Animatable `Pressable`. The `gesture` prop's `pressed` sub-state hooks into
|
package/dist/motion/Pressable.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
require('../chunk-
|
|
5
|
-
require('../chunk-
|
|
6
|
-
require('../chunk-
|
|
3
|
+
var chunkCENTULW6_js = require('../chunk-CENTULW6.js');
|
|
4
|
+
require('../chunk-MYE5NMXW.js');
|
|
5
|
+
require('../chunk-WVRCKOPO.js');
|
|
6
|
+
require('../chunk-7A6WTXNK.js');
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
Object.defineProperty(exports, "MotionPressable", {
|
|
11
11
|
enumerable: true,
|
|
12
|
-
get: function () { return
|
|
12
|
+
get: function () { return chunkCENTULW6_js.MotionPressable; }
|
|
13
13
|
});
|