@rootnative/inertia 0.0.0-alpha.2 → 0.0.0-alpha.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.
@@ -1,1172 +1,4 @@
1
- import { Text, Platform } from 'react-native';
2
- import { createContext, forwardRef, useRef, useState, useEffect, useMemo, useContext, useCallback } from 'react';
3
- import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, reanimatedVersion, useReducedMotion, withSequence, LinearTransition, runOnJS, withRepeat, withTiming, withSpring, withDelay, withDecay, Easing } from 'react-native-reanimated';
4
- import { isWorkletFunction } from 'react-native-worklets';
5
- import { jsx } from 'react/jsx-runtime';
6
-
7
- // src/motion/Text.tsx
8
-
9
- // src/transitions/sig.ts
10
- function stableSig(value) {
11
- if (value === void 0) return "";
12
- try {
13
- return stableStringify(value);
14
- } catch {
15
- return String(value);
16
- }
17
- }
18
- function stableStringify(v) {
19
- if (v === null || typeof v !== "object") {
20
- if (typeof v === "function" || v === void 0) return "null";
21
- return JSON.stringify(v);
22
- }
23
- if (Array.isArray(v)) {
24
- return "[" + v.map(stableStringify).join(",") + "]";
25
- }
26
- const obj = v;
27
- const keys = Object.keys(obj).sort();
28
- return "{" + keys.map((k) => JSON.stringify(k) + ":" + stableStringify(obj[k])).join(",") + "}";
29
- }
30
- var DEFAULT_MOTION_CONFIG = {
31
- reducedMotion: "user",
32
- transitions: {}
33
- };
34
- var MotionConfigContext = createContext(
35
- DEFAULT_MOTION_CONFIG
36
- );
37
- function useMotionConfig() {
38
- return useContext(MotionConfigContext);
39
- }
40
- function useNamedTransitions() {
41
- return useMotionConfig().transitions;
42
- }
43
- function useShouldReduceMotion() {
44
- const { reducedMotion } = useMotionConfig();
45
- const osReduced = useReducedMotion();
46
- if (reducedMotion === "never") return false;
47
- if (reducedMotion === "always") return true;
48
- return osReduced;
49
- }
50
-
51
- // src/transitions/keys.ts
52
- var TRANSITION_CONFIG_KEYS = /* @__PURE__ */ new Set([
53
- "type",
54
- "tension",
55
- "friction",
56
- "mass",
57
- "velocity",
58
- "restSpeedThreshold",
59
- "restDisplacementThreshold",
60
- "duration",
61
- "easing",
62
- "delay",
63
- "repeat",
64
- "deceleration",
65
- "clamp"
66
- ]);
67
- function isTopLevelTransition(t) {
68
- if (t === null || typeof t !== "object") return false;
69
- const keys = Object.keys(t);
70
- if (keys.length === 0) return false;
71
- return keys.every((k) => TRANSITION_CONFIG_KEYS.has(k));
72
- }
73
-
74
- // src/config/namedTransitions.ts
75
- var UNKNOWN_NAME_FALLBACK = { type: "spring" };
76
- function lookupNamedTransition(name, registry) {
77
- const cfg = registry[name];
78
- if (cfg) return cfg;
79
- if (__DEV__) {
80
- console.warn(
81
- `[inertia] Unknown transition name "${name}" \u2014 falling back to the default spring. Register it on a provider: <MotionConfig transitions={{ '${name}': { ... } }}>.`
82
- );
83
- }
84
- return UNKNOWN_NAME_FALLBACK;
85
- }
86
- function resolveNamedTransitionProp(transition, registry) {
87
- if (transition === void 0) return void 0;
88
- if (typeof transition === "string") {
89
- return lookupNamedTransition(transition, registry);
90
- }
91
- if (isTopLevelTransition(transition)) return transition;
92
- const map = transition;
93
- let out = null;
94
- for (const key in map) {
95
- const value = map[key];
96
- if (typeof value === "string") {
97
- if (out === null) out = { ...map };
98
- out[key] = lookupNamedTransition(value, registry);
99
- }
100
- }
101
- return out ?? transition;
102
- }
103
- var modality = "keyboard";
104
- var installed = false;
105
- function setKeyboard() {
106
- modality = "keyboard";
107
- }
108
- function setPointer() {
109
- modality = "pointer";
110
- }
111
- function ensureInstalled() {
112
- if (installed) return;
113
- if (Platform.OS !== "web") return;
114
- if (typeof document === "undefined") return;
115
- document.addEventListener("keydown", setKeyboard, true);
116
- document.addEventListener("mousedown", setPointer, true);
117
- document.addEventListener("pointerdown", setPointer, true);
118
- document.addEventListener("touchstart", setPointer, true);
119
- installed = true;
120
- }
121
- function isFocusVisible() {
122
- if (Platform.OS !== "web") return true;
123
- ensureInstalled();
124
- return modality === "keyboard";
125
- }
126
- function ensureWorkletEasing(easing) {
127
- if (!easing) return void 0;
128
- const fn = isEasingFactory(easing) ? easing.factory() : easing;
129
- if (isWorkletFunction(fn)) return fn;
130
- const wrapped = (t) => {
131
- "worklet";
132
- return fn(t);
133
- };
134
- return wrapped;
135
- }
136
- function isEasingFactory(value) {
137
- return typeof value === "object" && value !== null && "factory" in value && typeof value.factory === "function";
138
- }
139
-
140
- // src/transitions/spring.ts
141
- var DEFAULT_SPRING = {
142
- tension: 170,
143
- friction: 26,
144
- mass: 1
145
- };
146
- function springToReanimated(t) {
147
- "worklet";
148
- return {
149
- stiffness: t.tension ?? DEFAULT_SPRING.tension,
150
- damping: t.friction ?? DEFAULT_SPRING.friction,
151
- mass: t.mass ?? DEFAULT_SPRING.mass,
152
- velocity: t.velocity,
153
- restSpeedThreshold: t.restSpeedThreshold,
154
- restDisplacementThreshold: t.restDisplacementThreshold
155
- };
156
- }
157
-
158
- // src/layout/resolveLayout.ts
159
- function resolveLayoutTransition(layout) {
160
- if (!layout) return void 0;
161
- const cfg = layout === true ? { type: "spring" } : layout;
162
- if (cfg.type === "no-animation") return void 0;
163
- if (cfg.type === "timing") {
164
- let builder2 = LinearTransition.duration(cfg.duration ?? 300);
165
- const easing = ensureWorkletEasing(cfg.easing);
166
- if (easing) builder2 = builder2.easing(easing);
167
- if (cfg.delay) builder2 = builder2.delay(cfg.delay);
168
- return builder2;
169
- }
170
- const spring = cfg.type === "decay" ? { type: "spring" } : cfg;
171
- const { stiffness, damping, mass } = springToReanimated({
172
- ...DEFAULT_SPRING,
173
- ...spring
174
- });
175
- let builder = LinearTransition.springify().stiffness(stiffness).damping(damping).mass(mass);
176
- if ("delay" in spring && spring.delay) builder = builder.delay(spring.delay);
177
- return builder;
178
- }
179
-
180
- // src/layout/sharedRegistry.ts
181
- var REGISTRY = /* @__PURE__ */ new Map();
182
- var SHARED_LAYOUT_TTL_MS = 1e3;
183
- var now = () => Date.now();
184
- function registerLayout(id, rect) {
185
- REGISTRY.set(id, { rect, expiresAt: now() + SHARED_LAYOUT_TTL_MS });
186
- }
187
- function releaseLayout(id, rect) {
188
- REGISTRY.set(id, { rect, expiresAt: now() + SHARED_LAYOUT_TTL_MS });
189
- }
190
- function consumeLayout(id) {
191
- const entry = REGISTRY.get(id);
192
- if (!entry) return void 0;
193
- REGISTRY.delete(id);
194
- if (entry.expiresAt < now()) return void 0;
195
- return entry.rect;
196
- }
197
- function useSharedLayout(options) {
198
- const { layoutId, userRef, transition, shouldReduceMotion, userOnLayout } = options;
199
- const dx = useSharedValue(0);
200
- const dy = useSharedValue(0);
201
- const sx = useSharedValue(1);
202
- const sy = useSharedValue(1);
203
- const lastRectRef = useRef(null);
204
- const consumedRef = useRef(false);
205
- const transitionRef = useRef(transition);
206
- transitionRef.current = transition;
207
- const reducedMotionRef = useRef(shouldReduceMotion);
208
- reducedMotionRef.current = shouldReduceMotion;
209
- const setRef = useCallback(
210
- (node) => {
211
- if (typeof userRef === "function") userRef(node);
212
- else if (userRef) userRef.current = node;
213
- },
214
- [userRef]
215
- );
216
- const onLayout = useCallback(
217
- (event) => {
218
- userOnLayout?.(event);
219
- if (!layoutId) return;
220
- const { x, y, width, height } = event.nativeEvent.layout;
221
- const rect = { x, y, width, height };
222
- lastRectRef.current = rect;
223
- let source;
224
- if (!consumedRef.current) {
225
- consumedRef.current = true;
226
- source = consumeLayout(layoutId);
227
- }
228
- registerLayout(layoutId, rect);
229
- if (source) {
230
- applyFlip({
231
- source,
232
- target: rect,
233
- dx,
234
- dy,
235
- sx,
236
- sy,
237
- transition: transitionRef.current,
238
- shouldReduceMotion: reducedMotionRef.current
239
- });
240
- }
241
- },
242
- // dx/dy/sx/sy are stable refs from useSharedValue, but eslint's
243
- // exhaustive-deps would flag them — including them is harmless and
244
- // silences the warning.
245
- [layoutId, userOnLayout, dx, dy, sx, sy]
246
- );
247
- useEffect(() => {
248
- consumedRef.current = false;
249
- }, [layoutId]);
250
- useEffect(() => {
251
- return () => {
252
- if (!layoutId) return;
253
- const rect = lastRectRef.current;
254
- if (!rect) return;
255
- releaseLayout(layoutId, rect);
256
- };
257
- }, [layoutId]);
258
- return useMemo(
259
- () => ({
260
- flip: { dx, dy, sx, sy },
261
- setRef,
262
- onLayout
263
- }),
264
- [dx, dy, sx, sy, setRef, onLayout]
265
- );
266
- }
267
- function applyFlip(args) {
268
- const { source, target, dx, dy, sx, sy, transition, shouldReduceMotion } = args;
269
- const sourceCenterX = source.x + source.width / 2;
270
- const sourceCenterY = source.y + source.height / 2;
271
- const targetCenterX = target.x + target.width / 2;
272
- const targetCenterY = target.y + target.height / 2;
273
- const deltaX = sourceCenterX - targetCenterX;
274
- const deltaY = sourceCenterY - targetCenterY;
275
- const scaleX = target.width > 0 ? source.width / target.width : 1;
276
- const scaleY = target.height > 0 ? source.height / target.height : 1;
277
- if (shouldReduceMotion) {
278
- dx.value = 0;
279
- dy.value = 0;
280
- sx.value = 1;
281
- sy.value = 1;
282
- return;
283
- }
284
- if (transition?.type === "no-animation") {
285
- dx.value = 0;
286
- dy.value = 0;
287
- sx.value = 1;
288
- sy.value = 1;
289
- return;
290
- }
291
- if (transition?.type === "timing") {
292
- const duration = transition.duration ?? 300;
293
- dx.value = withSequence(
294
- withTiming(deltaX, { duration: 0 }),
295
- withTiming(0, { duration })
296
- );
297
- dy.value = withSequence(
298
- withTiming(deltaY, { duration: 0 }),
299
- withTiming(0, { duration })
300
- );
301
- sx.value = withSequence(
302
- withTiming(scaleX, { duration: 0 }),
303
- withTiming(1, { duration })
304
- );
305
- sy.value = withSequence(
306
- withTiming(scaleY, { duration: 0 }),
307
- withTiming(1, { duration })
308
- );
309
- return;
310
- }
311
- const springCfg = transition?.type === "spring" ? { ...DEFAULT_SPRING, ...transition } : { ...DEFAULT_SPRING };
312
- const springParams = springToReanimated(springCfg);
313
- dx.value = withSequence(
314
- withTiming(deltaX, { duration: 0 }),
315
- withSpring(0, springParams)
316
- );
317
- dy.value = withSequence(
318
- withTiming(deltaY, { duration: 0 }),
319
- withSpring(0, springParams)
320
- );
321
- sx.value = withSequence(
322
- withTiming(scaleX, { duration: 0 }),
323
- withSpring(1, springParams)
324
- );
325
- sy.value = withSequence(
326
- withTiming(scaleY, { duration: 0 }),
327
- withSpring(1, springParams)
328
- );
329
- }
330
- var PresenceContext = createContext(null);
331
- function usePresence() {
332
- return useContext(PresenceContext);
333
- }
334
- var DEFAULT_TIMING_DURATION = 250;
335
- function buildSpring(cfg, toValue, cb) {
336
- return withSpring(toValue, springToReanimated(cfg), cb);
337
- }
338
- function buildTiming(cfg, toValue, cb) {
339
- return withTiming(
340
- toValue,
341
- {
342
- duration: cfg.duration ?? DEFAULT_TIMING_DURATION,
343
- easing: ensureWorkletEasing(cfg.easing) ?? Easing.inOut(Easing.ease)
344
- },
345
- cb
346
- );
347
- }
348
- function buildDecay(cfg, cb) {
349
- return withDecay(
350
- {
351
- velocity: cfg.velocity ?? 0,
352
- deceleration: cfg.deceleration,
353
- clamp: cfg.clamp
354
- },
355
- cb
356
- );
357
- }
358
- function buildOne(cfg, toValue, cb) {
359
- if (cfg.type === "no-animation") {
360
- if (cb) cb(true, toValue);
361
- return toValue;
362
- }
363
- if (cfg.type === "decay") return buildDecay(cfg, cb);
364
- if (cfg.type === "timing") return buildTiming(cfg, toValue, cb);
365
- return buildSpring(cfg, toValue, cb);
366
- }
367
- function applyRepeat(animation, repeat) {
368
- if (repeat === void 0) return animation;
369
- if (repeat === "infinite") {
370
- return withRepeat(animation, -1, true);
371
- }
372
- if (typeof repeat === "number") {
373
- return withRepeat(animation, repeat, true);
374
- }
375
- const count = repeat.count === "infinite" ? -1 : repeat.count;
376
- const alternate = repeat.alternate ?? true;
377
- return withRepeat(animation, count, alternate);
378
- }
379
- function applyDelay(animation, delay) {
380
- if (!delay || delay <= 0) return animation;
381
- return withDelay(delay, animation);
382
- }
383
- function resolveTransition(config, toValue, callback) {
384
- const cfg = config ?? { type: "spring" };
385
- const base = buildOne(cfg, toValue, callback);
386
- const repeated = applyRepeat(base, repeatOf(cfg));
387
- return applyDelay(repeated, delayOf(cfg));
388
- }
389
- function repeatOf(cfg) {
390
- if (cfg.type === "no-animation" || cfg.type === "decay") return void 0;
391
- return cfg.repeat;
392
- }
393
- function stripRepeat(cfg) {
394
- if (!cfg) return cfg;
395
- if (cfg.type === "no-animation" || cfg.type === "decay") return cfg;
396
- if (cfg.repeat === void 0) return cfg;
397
- const next = { ...cfg };
398
- delete next.repeat;
399
- return next;
400
- }
401
- function delayOf(cfg) {
402
- if (cfg.type === "no-animation") return void 0;
403
- return cfg.delay;
404
- }
405
- function isStepObject(v) {
406
- return typeof v === "object" && v !== null && !Array.isArray(v) && "to" in v;
407
- }
408
- function resolveAnimatableValue(value, base, factory) {
409
- if (Array.isArray(value)) {
410
- const steps = value;
411
- const stepBase = stripRepeat(base);
412
- const animations = steps.map(
413
- (step2, i) => resolveStep(step2, stepBase, factory?.("step", i))
414
- );
415
- const seq = withSequence(...animations);
416
- return applyRepeat(seq, base ? repeatOf(base) : void 0);
417
- }
418
- const step = value;
419
- const cb = factory?.("animation", void 0);
420
- if (isStepObject(step)) {
421
- return resolveStep(step, base, cb);
422
- }
423
- return resolveTransition(base, step, cb);
424
- }
425
- function resolveStep(step, base, cb) {
426
- if (isStepObject(step)) {
427
- const { to, ...override } = step;
428
- const merged = mergeTransition(base, override);
429
- return resolveTransition(merged, to, cb);
430
- }
431
- return resolveTransition(base, step, cb);
432
- }
433
- function mergeTransition(base, override) {
434
- if (override.type && base && override.type !== base.type) {
435
- return override;
436
- }
437
- return { ...base ?? { type: "spring" }, ...override };
438
- }
439
- var alreadyChecked = false;
440
- function ensureReanimatedInstalled() {
441
- if (!__DEV__ || alreadyChecked) return;
442
- if (typeof process !== "undefined" && process.env?.NODE_ENV === "test") {
443
- return;
444
- }
445
- alreadyChecked = true;
446
- const version = reanimatedVersion;
447
- if (version) {
448
- const major = parseInt(version.split(".")[0] ?? "0", 10);
449
- if (major < 4) {
450
- console.error(
451
- `[inertia] react-native-reanimated v${version} is installed, but @rootnative/inertia requires v4.0.0 or later. Upgrade with \`pnpm add react-native-reanimated@^4\` (or your package manager's equivalent).`
452
- );
453
- return;
454
- }
455
- }
456
- const probe = function probe2() {
457
- "worklet";
458
- return 0;
459
- };
460
- if (typeof probe.__workletHash !== "number") {
461
- console.error(
462
- `[inertia] The Reanimated worklets babel plugin is not configured. Add \`'react-native-worklets/plugin'\` as the LAST entry in the \`plugins\` array of your \`babel.config.js\`, then restart Metro with a fresh cache: \`npx expo start -c\` or \`npx react-native start --reset-cache\`.`
463
- );
464
- }
465
- }
466
- var TRANSFORM_KEYS = [
467
- "translateX",
468
- "translateY",
469
- "scale",
470
- "scaleX",
471
- "scaleY",
472
- "rotate",
473
- "rotateX",
474
- "rotateY"
475
- ];
476
- var ROTATION_KEYS = /* @__PURE__ */ new Set(["rotate", "rotateX", "rotateY"]);
477
- var NUMERIC_TOP_LEVEL_KEYS = [
478
- "opacity",
479
- "width",
480
- "height",
481
- "borderRadius",
482
- "shadowOpacity",
483
- "shadowRadius",
484
- "elevation"
485
- ];
486
- var COLOR_KEYS = [
487
- "backgroundColor",
488
- "borderColor",
489
- "color",
490
- "tintColor",
491
- "shadowColor"
492
- ];
493
- var SHADOW_OFFSET_KEYS = ["shadowOffsetWidth", "shadowOffsetHeight"];
494
- var ALL_KEYS = [
495
- ...TRANSFORM_KEYS,
496
- ...NUMERIC_TOP_LEVEL_KEYS,
497
- ...COLOR_KEYS,
498
- ...SHADOW_OFFSET_KEYS
499
- ];
500
- var TRANSFORM_KEY_SET = new Set(TRANSFORM_KEYS);
501
- var COLOR_KEY_SET = new Set(COLOR_KEYS);
502
- var SHADOW_OFFSET_KEY_SET = new Set(SHADOW_OFFSET_KEYS);
503
- var GESTURE_LAYER_NAMES = [
504
- "hovered",
505
- "focused",
506
- "focusVisible",
507
- "pressed"
508
- ];
509
- var GESTURE_LAYER_NAME_SET = new Set(GESTURE_LAYER_NAMES);
510
- var EXITING_POINTER_EVENTS_STYLE = { pointerEvents: "none" };
511
- var DEFAULT_RESTING = {
512
- translateX: 0,
513
- translateY: 0,
514
- scale: 1,
515
- scaleX: 1,
516
- scaleY: 1,
517
- rotate: 0,
518
- rotateX: 0,
519
- rotateY: 0,
520
- opacity: 1,
521
- width: 0,
522
- height: 0,
523
- borderRadius: 0,
524
- shadowOpacity: 0,
525
- shadowRadius: 0,
526
- elevation: 0,
527
- // 'transparent' is the only safe universal default for colors: it works as
528
- // an initial seed for any color animation (no jarring opaque flash on mount
529
- // when `initial` is omitted) and rgba(0,0,0,0) interpolates cleanly into
530
- // any opaque target via Reanimated's color util.
531
- backgroundColor: "transparent",
532
- borderColor: "transparent",
533
- color: "transparent",
534
- tintColor: "transparent",
535
- shadowColor: "transparent",
536
- shadowOffsetWidth: 0,
537
- shadowOffsetHeight: 0
538
- };
539
- function transitionFor(prop, transition) {
540
- if (!transition) return void 0;
541
- if (typeof transition === "string") return void 0;
542
- if (isTopLevelTransition(transition)) return transition;
543
- if (GESTURE_LAYER_NAME_SET.has(prop)) return void 0;
544
- return transition[prop];
545
- }
546
- function gestureLayerTransitionFor(layer, transition) {
547
- if (!transition) return void 0;
548
- if (typeof transition === "string") return void 0;
549
- if (isTopLevelTransition(transition)) return transition;
550
- return transition[layer];
551
- }
552
- function createMotionComponent(Component) {
553
- ensureReanimatedInstalled();
554
- const AnimatedComponent = Animated.createAnimatedComponent(
555
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
556
- Component
557
- );
558
- const Motion = forwardRef(function Motion2(props, ref) {
559
- const {
560
- initial,
561
- animate,
562
- exit,
563
- transition: transitionProp,
564
- variants,
565
- controller,
566
- gesture,
567
- layout: layoutProp,
568
- layoutId,
569
- onAnimationEnd,
570
- style,
571
- onLayout: userOnLayout,
572
- ...rest
573
- } = props;
574
- const namedTransitions = useNamedTransitions();
575
- const transition = resolveNamedTransitionProp(
576
- transitionProp,
577
- namedTransitions
578
- );
579
- const layout = typeof layoutProp === "string" ? lookupNamedTransition(layoutProp, namedTransitions) : layoutProp;
580
- if (__DEV__ && typeof style === "function") {
581
- throw new Error(
582
- "[inertia] `style` must be a style object or array of style objects, not a function. The function-form `style={(state) => ...}` Pressable API is not supported \u2014 use `gesture.pressed` (or `gesture.focused`, etc.) to drive state-dependent styling instead."
583
- );
584
- }
585
- const presence = usePresence();
586
- const isExiting = presence !== null && presence.isPresent === false;
587
- const shouldReduceMotion = useShouldReduceMotion();
588
- const onAnimationEndRef = useRef(onAnimationEnd);
589
- onAnimationEndRef.current = onAnimationEnd;
590
- const variantKey = useControllerKey(controller);
591
- const resolvedAnimate = resolveAnimateInput(
592
- animate,
593
- variants,
594
- variantKey
595
- );
596
- const animateRecord = resolvedAnimate ?? {};
597
- const initialRecord = initial && initial !== false ? initial : void 0;
598
- const exitRecord = exit ? exit : void 0;
599
- const [pressed, setPressed] = useState(false);
600
- const [focused, setFocused] = useState(false);
601
- const [focusVisible, setFocusVisible] = useState(false);
602
- const [hovered, setHovered] = useState(false);
603
- const touched = /* @__PURE__ */ new Set();
604
- collectTouchedKeys(touched, animateRecord);
605
- if (initialRecord) collectTouchedKeys(touched, initialRecord);
606
- if (variants) {
607
- for (const variant of Object.values(variants)) {
608
- if (!variant) continue;
609
- collectTouchedKeys(touched, variant);
610
- }
611
- }
612
- if (gesture) {
613
- for (const subState of [
614
- gesture.pressed,
615
- gesture.focused,
616
- gesture.focusVisible,
617
- gesture.hovered
618
- ]) {
619
- if (!subState) continue;
620
- collectTouchedKeys(touched, subState);
621
- }
622
- }
623
- if (exitRecord) collectTouchedKeys(touched, exitRecord);
624
- const activeKeysRef = useRef(null);
625
- const hasTransformRef = useRef(false);
626
- const hasShadowOffsetRef = useRef(false);
627
- const prevActive = activeKeysRef.current;
628
- let grew = prevActive === null;
629
- if (!grew && prevActive) {
630
- for (const k of touched) {
631
- if (!prevActive.includes(k)) {
632
- grew = true;
633
- break;
634
- }
635
- }
636
- }
637
- if (grew) {
638
- const merged = new Set(prevActive ?? []);
639
- for (const k of touched) merged.add(k);
640
- activeKeysRef.current = ALL_KEYS.filter((k) => merged.has(k));
641
- hasTransformRef.current = activeKeysRef.current.some(
642
- (k) => TRANSFORM_KEY_SET.has(k)
643
- );
644
- hasShadowOffsetRef.current = activeKeysRef.current.some(
645
- (k) => SHADOW_OFFSET_KEY_SET.has(k)
646
- );
647
- }
648
- const sharedValues = useAnimatableSharedValues((key) => {
649
- if (SHADOW_OFFSET_KEY_SET.has(key)) {
650
- const axis = shadowOffsetAxisFor(key);
651
- if (initial === false) {
652
- return shadowOffsetAxisValue(animateRecord.shadowOffset, axis) ?? DEFAULT_RESTING[key];
653
- }
654
- return shadowOffsetAxisValue(
655
- initialRecord?.shadowOffset,
656
- axis
657
- ) ?? shadowOffsetAxisValue(animateRecord.shadowOffset, axis) ?? DEFAULT_RESTING[key];
658
- }
659
- if (initial === false) {
660
- const a = animateRecord[key];
661
- return restValue(a) ?? DEFAULT_RESTING[key];
662
- }
663
- return initialRecord?.[key] ?? restValue(animateRecord[key]) ?? DEFAULT_RESTING[key];
664
- });
665
- const pressedProgress = useSharedValue(0);
666
- const focusedProgress = useSharedValue(0);
667
- const focusVisibleProgress = useSharedValue(0);
668
- const hoveredProgress = useSharedValue(0);
669
- const gestureSV = useSharedValue(
670
- resolveGestureLayers(gesture)
671
- );
672
- const gestureTargetsSig = stableSig(gesture);
673
- useEffect(() => {
674
- gestureSV.value = resolveGestureLayers(gesture);
675
- }, [gestureTargetsSig]);
676
- const baseRecord = isExiting && exitRecord ? { ...animateRecord, ...exitRecord } : animateRecord;
677
- const baseSig = stableSig(baseRecord) + (isExiting ? "|exit" : "") + (shouldReduceMotion ? "|rm" : "");
678
- const transitionSig = stableSig(transition);
679
- const safeToRemoveRef = useRef(void 0);
680
- safeToRemoveRef.current = presence?.safeToRemove;
681
- useEffect(() => {
682
- if (isExiting && (!exitRecord || Object.keys(exitRecord).length === 0)) {
683
- safeToRemoveRef.current?.();
684
- return;
685
- }
686
- let pending = 0;
687
- let done = false;
688
- const onSettle = () => {
689
- if (done) return;
690
- pending--;
691
- if (pending <= 0) {
692
- done = true;
693
- if (isExiting) safeToRemoveRef.current?.();
694
- }
695
- };
696
- let transformPending = 0;
697
- for (const k of ALL_KEYS) {
698
- if (TRANSFORM_KEY_SET.has(k) && baseRecord[k] !== void 0) {
699
- transformPending++;
700
- }
701
- }
702
- const transformGroup = transformPending > 0 ? { remaining: transformPending } : void 0;
703
- for (const key of ALL_KEYS) {
704
- const target = SHADOW_OFFSET_KEY_SET.has(key) ? shadowOffsetAxisValue(
705
- baseRecord.shadowOffset,
706
- shadowOffsetAxisFor(key)
707
- ) : baseRecord[key];
708
- if (target === void 0) continue;
709
- const cfg = shouldReduceMotion ? { type: "no-animation" } : transitionFor(
710
- SHADOW_OFFSET_KEY_SET.has(key) ? "shadowOffset" : key,
711
- transition
712
- );
713
- if (isExiting) pending++;
714
- const factory = makeKeyCallbackFactory(
715
- key,
716
- sharedValues[key],
717
- targetEndValue(target),
718
- onAnimationEndRef,
719
- {
720
- stepCount: stepCountOf(target),
721
- totalIterations: totalIterationsOf(cfg)
722
- },
723
- isExiting ? onSettle : void 0,
724
- TRANSFORM_KEY_SET.has(key) ? transformGroup : void 0
725
- );
726
- sharedValues[key].value = resolveAnimatableValue(
727
- target,
728
- cfg,
729
- factory
730
- );
731
- }
732
- if (isExiting && pending === 0) {
733
- safeToRemoveRef.current?.();
734
- }
735
- }, [baseSig, transitionSig]);
736
- useGestureLayerProgress(
737
- pressedProgress,
738
- pressed,
739
- gesture?.pressed != null,
740
- "pressed",
741
- transition,
742
- isExiting,
743
- shouldReduceMotion
744
- );
745
- useGestureLayerProgress(
746
- focusedProgress,
747
- focused,
748
- gesture?.focused != null,
749
- "focused",
750
- transition,
751
- isExiting,
752
- shouldReduceMotion
753
- );
754
- useGestureLayerProgress(
755
- focusVisibleProgress,
756
- focusVisible,
757
- gesture?.focusVisible != null,
758
- "focusVisible",
759
- transition,
760
- isExiting,
761
- shouldReduceMotion
762
- );
763
- useGestureLayerProgress(
764
- hoveredProgress,
765
- hovered,
766
- gesture?.hovered != null,
767
- "hovered",
768
- transition,
769
- isExiting,
770
- shouldReduceMotion
771
- );
772
- const sharedLayout = useSharedLayout({
773
- layoutId,
774
- userRef: ref,
775
- transition: isTopLevelTransition(transition) ? transition : void 0,
776
- shouldReduceMotion,
777
- userOnLayout
778
- });
779
- const flip = sharedLayout.flip;
780
- const hasLayoutId = layoutId !== void 0;
781
- const animatedStyle = useAnimatedStyle(() => {
782
- const activeKeys = activeKeysRef.current;
783
- const hasTransform = hasTransformRef.current;
784
- const hasShadowOffset = hasShadowOffsetRef.current;
785
- const out = {};
786
- const transform = [];
787
- let shadowOffsetW = 0;
788
- let shadowOffsetH = 0;
789
- const ph = hoveredProgress.value;
790
- const pf = focusedProgress.value;
791
- const pfv = focusVisibleProgress.value;
792
- const pp = pressedProgress.value;
793
- const layers = gestureSV.value;
794
- const hoveredLayer = layers ? layers.hovered : null;
795
- const focusedLayer = layers ? layers.focused : null;
796
- const focusVisibleLayer = layers ? layers.focusVisible : null;
797
- const pressedLayer = layers ? layers.pressed : null;
798
- for (const key of activeKeys) {
799
- let v = sharedValues[key].value;
800
- const isColor = COLOR_KEY_SET.has(key);
801
- if (hoveredLayer && ph > 0 && hoveredLayer[key] !== void 0) {
802
- const t = hoveredLayer[key];
803
- v = isColor ? interpolateColor(ph, [0, 1], [v, t]) : v + (t - v) * ph;
804
- }
805
- if (focusedLayer && pf > 0 && focusedLayer[key] !== void 0) {
806
- const t = focusedLayer[key];
807
- v = isColor ? interpolateColor(pf, [0, 1], [v, t]) : v + (t - v) * pf;
808
- }
809
- if (focusVisibleLayer && pfv > 0 && focusVisibleLayer[key] !== void 0) {
810
- const t = focusVisibleLayer[key];
811
- v = isColor ? interpolateColor(pfv, [0, 1], [v, t]) : v + (t - v) * pfv;
812
- }
813
- if (pressedLayer && pp > 0 && pressedLayer[key] !== void 0) {
814
- const t = pressedLayer[key];
815
- v = isColor ? interpolateColor(pp, [0, 1], [v, t]) : v + (t - v) * pp;
816
- }
817
- if (TRANSFORM_KEY_SET.has(key)) {
818
- transform.push(
819
- ROTATION_KEYS.has(key) ? { [key]: `${v}deg` } : { [key]: v }
820
- );
821
- } else if (key === "shadowOffsetWidth") {
822
- shadowOffsetW = v;
823
- } else if (key === "shadowOffsetHeight") {
824
- shadowOffsetH = v;
825
- } else {
826
- out[key] = v;
827
- }
828
- }
829
- if (hasLayoutId) {
830
- transform.push({ translateX: flip.dx.value });
831
- transform.push({ translateY: flip.dy.value });
832
- transform.push({ scaleX: flip.sx.value });
833
- transform.push({ scaleY: flip.sy.value });
834
- }
835
- if (hasTransform || hasLayoutId) out.transform = transform;
836
- if (hasShadowOffset) {
837
- out.shadowOffset = { width: shadowOffsetW, height: shadowOffsetH };
838
- }
839
- return out;
840
- });
841
- const mergedStyle = useMemo(
842
- () => isExiting ? [style, animatedStyle, EXITING_POINTER_EVENTS_STYLE] : [style, animatedStyle],
843
- [style, animatedStyle, isExiting]
844
- );
845
- const gestureHandlers = useGestureHandlers(
846
- gesture,
847
- rest,
848
- setPressed,
849
- setFocused,
850
- setFocusVisible,
851
- setHovered
852
- );
853
- const layoutSig = stableSig(layout);
854
- const layoutTransition = useMemo(
855
- () => shouldReduceMotion ? void 0 : resolveLayoutTransition(layout),
856
- // eslint-disable-next-line react-hooks/exhaustive-deps
857
- [layoutSig, shouldReduceMotion]
858
- );
859
- return /* @__PURE__ */ jsx(
860
- AnimatedComponent,
861
- {
862
- ref: sharedLayout.setRef,
863
- ...rest,
864
- ...gestureHandlers,
865
- onLayout: sharedLayout.onLayout,
866
- layout: layoutTransition,
867
- style: mergedStyle
868
- }
869
- );
870
- });
871
- Motion.displayName = `Motion(${Component.displayName ?? Component.name ?? "Component"})`;
872
- return Motion;
873
- }
874
- function useAnimatableSharedValues(init) {
875
- const translateX = useSharedValue(init("translateX"));
876
- const translateY = useSharedValue(init("translateY"));
877
- const scale = useSharedValue(init("scale"));
878
- const scaleX = useSharedValue(init("scaleX"));
879
- const scaleY = useSharedValue(init("scaleY"));
880
- const rotate = useSharedValue(init("rotate"));
881
- const rotateX = useSharedValue(init("rotateX"));
882
- const rotateY = useSharedValue(init("rotateY"));
883
- const opacity = useSharedValue(init("opacity"));
884
- const width = useSharedValue(init("width"));
885
- const height = useSharedValue(init("height"));
886
- const borderRadius = useSharedValue(init("borderRadius"));
887
- const shadowOpacity = useSharedValue(init("shadowOpacity"));
888
- const shadowRadius = useSharedValue(init("shadowRadius"));
889
- const elevation = useSharedValue(init("elevation"));
890
- const backgroundColor = useSharedValue(
891
- init("backgroundColor")
892
- );
893
- const borderColor = useSharedValue(init("borderColor"));
894
- const color = useSharedValue(init("color"));
895
- const tintColor = useSharedValue(init("tintColor"));
896
- const shadowColor = useSharedValue(init("shadowColor"));
897
- const shadowOffsetWidth = useSharedValue(
898
- init("shadowOffsetWidth")
899
- );
900
- const shadowOffsetHeight = useSharedValue(
901
- init("shadowOffsetHeight")
902
- );
903
- const ref = useRef(null);
904
- if (ref.current === null) {
905
- ref.current = {
906
- translateX,
907
- translateY,
908
- scale,
909
- scaleX,
910
- scaleY,
911
- rotate,
912
- rotateX,
913
- rotateY,
914
- opacity,
915
- width,
916
- height,
917
- borderRadius,
918
- shadowOpacity,
919
- shadowRadius,
920
- elevation,
921
- backgroundColor,
922
- borderColor,
923
- color,
924
- tintColor,
925
- shadowColor,
926
- shadowOffsetWidth,
927
- shadowOffsetHeight
928
- };
929
- }
930
- return ref.current;
931
- }
932
- function makeKeyCallbackFactory(key, sharedValue, target, onAnimationEndRef, meta, onSettle, transformGroup) {
933
- if (!onAnimationEndRef.current && !onSettle) return void 0;
934
- const state = { iteration: 0 };
935
- const isTransformKey = TRANSFORM_KEY_SET.has(key);
936
- const dispatch = (rawPhase, step, finished, value) => {
937
- const isLastIteration = state.iteration >= meta.totalIterations - 1;
938
- let phase;
939
- let isTerminal = false;
940
- if (rawPhase === "step") {
941
- const isLastInPass = step !== void 0 && step === meta.stepCount - 1;
942
- if (!isLastInPass) {
943
- phase = "step";
944
- } else if (isLastIteration) {
945
- phase = "animation";
946
- isTerminal = true;
947
- } else {
948
- phase = "sequence";
949
- }
950
- } else if (isLastIteration) {
951
- phase = "animation";
952
- isTerminal = true;
953
- } else {
954
- phase = "repeat";
955
- }
956
- const reportedIteration = state.iteration;
957
- if (phase === "sequence" || phase === "repeat") state.iteration++;
958
- const fn = onAnimationEndRef.current;
959
- if (fn) {
960
- if (isTransformKey && transformGroup && phase === "animation") {
961
- transformGroup.remaining--;
962
- if (transformGroup.remaining <= 0) {
963
- fn({
964
- key: "transform",
965
- finished,
966
- value,
967
- target,
968
- phase,
969
- step,
970
- iteration: reportedIteration
971
- });
972
- }
973
- } else {
974
- fn({
975
- key,
976
- finished,
977
- value,
978
- target,
979
- phase,
980
- step,
981
- iteration: reportedIteration
982
- });
983
- }
984
- }
985
- if (onSettle && isTerminal) onSettle();
986
- };
987
- return (rawPhase, step) => {
988
- const cb = (finished) => {
989
- "worklet";
990
- runOnJS(dispatch)(rawPhase, step, !!finished, sharedValue.value);
991
- };
992
- return cb;
993
- };
994
- }
995
- function shadowOffsetAxisFor(key) {
996
- return key === "shadowOffsetWidth" ? "width" : "height";
997
- }
998
- function shadowOffsetAxisValue(source, axis) {
999
- return source?.[axis];
1000
- }
1001
- function collectTouchedKeys(touched, record) {
1002
- for (const k of ALL_KEYS) {
1003
- if (k in record) touched.add(k);
1004
- }
1005
- if ("shadowOffset" in record && record.shadowOffset) {
1006
- const so = record.shadowOffset;
1007
- if (so.width !== void 0) touched.add("shadowOffsetWidth");
1008
- if (so.height !== void 0) touched.add("shadowOffsetHeight");
1009
- }
1010
- }
1011
- function stepCountOf(v) {
1012
- if (Array.isArray(v)) return v.length;
1013
- return 1;
1014
- }
1015
- function totalIterationsOf(cfg) {
1016
- if (!cfg || cfg.type === "no-animation" || cfg.type === "decay") return 1;
1017
- const r = cfg.repeat;
1018
- if (r === void 0) return 1;
1019
- if (r === "infinite") return Number.POSITIVE_INFINITY;
1020
- if (typeof r === "number") return r;
1021
- if (r.count === "infinite") return Number.POSITIVE_INFINITY;
1022
- return r.count;
1023
- }
1024
- function targetEndValue(v) {
1025
- if (v === void 0) return void 0;
1026
- if (typeof v === "number" || typeof v === "string") return v;
1027
- if (Array.isArray(v)) {
1028
- return v.length > 0 ? targetEndValue(v[v.length - 1]) : void 0;
1029
- }
1030
- if (typeof v === "object" && v !== null && "to" in v) {
1031
- const to = v.to;
1032
- return typeof to === "number" || typeof to === "string" ? to : void 0;
1033
- }
1034
- return void 0;
1035
- }
1036
- function useControllerKey(controller) {
1037
- const [, setTick] = useState(0);
1038
- useEffect(() => {
1039
- if (!controller) return;
1040
- const unsub = controller.subscribe(() => setTick((n) => n + 1));
1041
- return unsub;
1042
- }, [controller]);
1043
- return controller?.current;
1044
- }
1045
- function resolveAnimateInput(animate, variants, controllerKey) {
1046
- if (controllerKey !== void 0 && variants && controllerKey in variants) {
1047
- return variants[controllerKey];
1048
- }
1049
- if (typeof animate === "string") {
1050
- if (variants && animate in variants) return variants[animate];
1051
- if (__DEV__) {
1052
- console.warn(
1053
- `[inertia] animate="${animate}" but no matching variant. Did you forget to pass \`variants\`?`
1054
- );
1055
- }
1056
- return void 0;
1057
- }
1058
- return animate;
1059
- }
1060
- function restValue(v) {
1061
- if (v === void 0) return void 0;
1062
- if (typeof v === "number" || typeof v === "string") return v;
1063
- if (Array.isArray(v)) {
1064
- return v.length > 0 ? restValue(v[0]) : void 0;
1065
- }
1066
- if (typeof v === "object" && v !== null && "to" in v) {
1067
- const to = v.to;
1068
- return typeof to === "number" || typeof to === "string" ? to : void 0;
1069
- }
1070
- return void 0;
1071
- }
1072
- function resolveGestureLayers(gesture) {
1073
- if (!gesture) return null;
1074
- const out = {};
1075
- for (const layer of GESTURE_LAYER_NAMES) {
1076
- const subState = gesture[layer];
1077
- if (!subState) continue;
1078
- const resolved = {};
1079
- for (const key of ALL_KEYS) {
1080
- if (SHADOW_OFFSET_KEY_SET.has(key)) {
1081
- const axis = shadowOffsetAxisFor(key);
1082
- const so = subState.shadowOffset;
1083
- const v = shadowOffsetAxisValue(so, axis);
1084
- if (v !== void 0) resolved[key] = v;
1085
- continue;
1086
- }
1087
- const raw = subState[key];
1088
- if (raw === void 0) continue;
1089
- const t = targetEndValue(raw);
1090
- if (t !== void 0) resolved[key] = t;
1091
- }
1092
- out[layer] = resolved;
1093
- }
1094
- return out;
1095
- }
1096
- function useGestureLayerProgress(progress, active, declared, layer, transition, isExiting, shouldReduceMotion) {
1097
- const layerCfgSig = stableSig(gestureLayerTransitionFor(layer, transition));
1098
- useEffect(() => {
1099
- if (!declared) return;
1100
- if (isExiting) {
1101
- progress.value = 0;
1102
- return;
1103
- }
1104
- const target = active ? 1 : 0;
1105
- const cfg = shouldReduceMotion ? { type: "no-animation" } : gestureLayerTransitionFor(layer, transition) ?? { type: "spring" };
1106
- progress.value = resolveTransition(cfg, target);
1107
- }, [active, declared, isExiting, shouldReduceMotion, layerCfgSig]);
1108
- }
1109
- function useGestureHandlers(gesture, rest, setPressed, setFocused, setFocusVisible, setHovered) {
1110
- const hasPressed = gesture?.pressed ? 1 : 0;
1111
- const hasFocused = gesture?.focused ? 1 : 0;
1112
- const hasFocusVisible = gesture?.focusVisible ? 1 : 0;
1113
- const hasHovered = gesture?.hovered ? 1 : 0;
1114
- return useMemo(() => {
1115
- if (!gesture) return {};
1116
- const handlers = {};
1117
- if (gesture.pressed) {
1118
- handlers.onTouchStart = compose(rest.onTouchStart, () => setPressed(true));
1119
- handlers.onTouchEnd = compose(rest.onTouchEnd, () => setPressed(false));
1120
- handlers.onTouchCancel = compose(
1121
- rest.onTouchCancel,
1122
- () => setPressed(false)
1123
- );
1124
- handlers.onPressIn = compose(rest.onPressIn, () => setPressed(true));
1125
- handlers.onPressOut = compose(rest.onPressOut, () => setPressed(false));
1126
- }
1127
- if (gesture.focused || gesture.focusVisible) {
1128
- handlers.onFocus = compose(rest.onFocus, () => {
1129
- if (gesture.focused) setFocused(true);
1130
- if (gesture.focusVisible && isFocusVisible()) setFocusVisible(true);
1131
- });
1132
- handlers.onBlur = compose(rest.onBlur, () => {
1133
- if (gesture.focused) setFocused(false);
1134
- if (gesture.focusVisible) setFocusVisible(false);
1135
- });
1136
- }
1137
- if (gesture.hovered) {
1138
- handlers.onMouseEnter = compose(rest.onMouseEnter, () => setHovered(true));
1139
- handlers.onMouseLeave = compose(
1140
- rest.onMouseLeave,
1141
- () => setHovered(false)
1142
- );
1143
- }
1144
- return handlers;
1145
- }, [
1146
- hasPressed,
1147
- hasFocused,
1148
- hasFocusVisible,
1149
- hasHovered,
1150
- rest.onTouchStart,
1151
- rest.onTouchEnd,
1152
- rest.onTouchCancel,
1153
- rest.onPressIn,
1154
- rest.onPressOut,
1155
- rest.onFocus,
1156
- rest.onBlur,
1157
- rest.onMouseEnter,
1158
- rest.onMouseLeave
1159
- ]);
1160
- }
1161
- function compose(user, ours) {
1162
- if (typeof user !== "function") return ours;
1163
- return (event) => {
1164
- user(event);
1165
- ours(event);
1166
- };
1167
- }
1168
-
1169
- // src/motion/Text.tsx
1170
- var MotionText = createMotionComponent(Text);
1171
-
1172
- export { MotionText };
1
+ export { MotionText } from '../chunk-IJNVUM5U.mjs';
2
+ import '../chunk-I76OC6RX.mjs';
3
+ import '../chunk-L2EVRKSC.mjs';
4
+ import '../chunk-6FENLMCA.mjs';