@hanzogui/animations-motion 2.0.0-rc.41-hanzoai.5

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 (38) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +72 -0
  3. package/dist/cjs/createAnimations.cjs +698 -0
  4. package/dist/cjs/createAnimations.native.js +822 -0
  5. package/dist/cjs/createAnimations.native.js.map +1 -0
  6. package/dist/cjs/index.cjs +21 -0
  7. package/dist/cjs/index.native.js +45 -0
  8. package/dist/cjs/index.native.js.map +1 -0
  9. package/dist/cjs/polyfill.cjs +3 -0
  10. package/dist/cjs/polyfill.native.js +6 -0
  11. package/dist/cjs/polyfill.native.js.map +1 -0
  12. package/dist/esm/createAnimations.mjs +661 -0
  13. package/dist/esm/createAnimations.mjs.map +1 -0
  14. package/dist/esm/createAnimations.native.js +782 -0
  15. package/dist/esm/createAnimations.native.js.map +1 -0
  16. package/dist/esm/index.js +2 -0
  17. package/dist/esm/index.js.map +1 -0
  18. package/dist/esm/index.mjs +2 -0
  19. package/dist/esm/index.mjs.map +1 -0
  20. package/dist/esm/index.native.js +17 -0
  21. package/dist/esm/index.native.js.map +1 -0
  22. package/dist/esm/polyfill.mjs +4 -0
  23. package/dist/esm/polyfill.mjs.map +1 -0
  24. package/dist/esm/polyfill.native.js +4 -0
  25. package/dist/esm/polyfill.native.js.map +1 -0
  26. package/package.json +53 -0
  27. package/src/createAnimations.tsx +991 -0
  28. package/src/index.native.ts +28 -0
  29. package/src/index.ts +3 -0
  30. package/src/polyfill.ts +4 -0
  31. package/types/createAnimations.d.ts +8 -0
  32. package/types/createAnimations.d.ts.map +11 -0
  33. package/types/index.d.ts +4 -0
  34. package/types/index.d.ts.map +11 -0
  35. package/types/index.native.d.ts +4 -0
  36. package/types/index.native.d.ts.map +11 -0
  37. package/types/polyfill.d.ts +2 -0
  38. package/types/polyfill.d.ts.map +11 -0
@@ -0,0 +1,698 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all) __defProp(target, name, {
9
+ get: all[name],
10
+ enumerable: true
11
+ });
12
+ };
13
+ var __copyProps = (to, from, except, desc) => {
14
+ if (from && typeof from === "object" || typeof from === "function") {
15
+ for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
16
+ get: () => from[key],
17
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
18
+ });
19
+ }
20
+ return to;
21
+ };
22
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
23
+ // If the importer is in node compatibility mode or this is not an ESM
24
+ // file that has been converted to a CommonJS file using a Babel-
25
+ // compatible transform (i.e. "__esModule" has not been set), then set
26
+ // "default" to the CommonJS "module.exports" for node compatibility.
27
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
28
+ value: mod,
29
+ enumerable: true
30
+ }) : target, mod));
31
+ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
32
+ value: true
33
+ }), mod);
34
+ var createAnimations_exports = {};
35
+ __export(createAnimations_exports, {
36
+ createAnimations: () => createAnimations,
37
+ disableAnimationProps: () => disableAnimationProps
38
+ });
39
+ module.exports = __toCommonJS(createAnimations_exports);
40
+ var import_animation_helpers = require("@hanzogui/animation-helpers");
41
+ var import_use_presence = require("@hanzogui/use-presence");
42
+ var import_web = require("@hanzogui/web");
43
+ var import_react = require("motion/react");
44
+ var import_react2 = __toESM(require("react"), 1);
45
+ var import_jsx_runtime = require("react/jsx-runtime");
46
+ const isServer = typeof window === "undefined";
47
+ function useAnimateSSRSafe() {
48
+ if (isServer) {
49
+ return [(0, import_react2.useRef)(null), () => {}];
50
+ }
51
+ return (0, import_react.useAnimate)();
52
+ }
53
+ const MotionValueStrategy = /* @__PURE__ */new WeakMap();
54
+ const PendingMotionOnFinish = /* @__PURE__ */new WeakMap();
55
+ function settlePendingMotionOnFinish(mv, controls) {
56
+ const onFinish = PendingMotionOnFinish.get(mv);
57
+ if (!onFinish) return;
58
+ PendingMotionOnFinish.delete(mv);
59
+ controls.then(() => onFinish()).catch(() => onFinish());
60
+ }
61
+ function createAnimations(animations) {
62
+ let isHydratingGlobal;
63
+ const hydratingComponents = /* @__PURE__ */new Set();
64
+ return {
65
+ View: MotionView,
66
+ Text: MotionText,
67
+ isReactNative: false,
68
+ inputStyle: "css",
69
+ outputStyle: "inline",
70
+ avoidReRenders: true,
71
+ animations,
72
+ usePresence: import_use_presence.usePresence,
73
+ ResetPresence: import_use_presence.ResetPresence,
74
+ onMount() {
75
+ isHydratingGlobal = false;
76
+ hydratingComponents.forEach(cb => cb());
77
+ },
78
+ useAnimations: animationProps => {
79
+ if (isHydratingGlobal === void 0 && !(0, import_web.getConfig)().settings.disableSSR) {
80
+ isHydratingGlobal = true;
81
+ }
82
+ const {
83
+ props,
84
+ style,
85
+ componentState,
86
+ stateRef,
87
+ useStyleEmitter,
88
+ presence
89
+ } = animationProps;
90
+ const animationKey = Array.isArray(props.transition) ? props.transition[0] : props.transition;
91
+ const isComponentHydrating = componentState.unmounted === true;
92
+ const isMounting = componentState.unmounted === "should-enter";
93
+ const isEntering = !!componentState.unmounted;
94
+ const isExiting = presence?.[0] === false;
95
+ const sendExitComplete = presence?.[1];
96
+ const refs = (0, import_react2.useRef)(null);
97
+ if (!refs.current) {
98
+ refs.current = {
99
+ isFirstRender: true,
100
+ lastDoAnimate: null,
101
+ lastDontAnimate: null,
102
+ controls: null,
103
+ lastAnimateAt: 0,
104
+ disposed: false,
105
+ wasExiting: false,
106
+ isExiting: false,
107
+ sendExitComplete: void 0,
108
+ animationState: "default",
109
+ frozenExitTarget: null,
110
+ exitCompleteScheduled: false,
111
+ wasEntering: false
112
+ };
113
+ }
114
+ const justFinishedEntering = refs.current.wasEntering && !isEntering;
115
+ (0, import_react2.useEffect)(() => {
116
+ refs.current.wasEntering = isEntering;
117
+ });
118
+ const animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default";
119
+ const disableAnimation = isComponentHydrating || isMounting || !animationKey;
120
+ const [scope, animate] = useAnimateSSRSafe();
121
+ refs.current.isExiting = isExiting;
122
+ refs.current.sendExitComplete = sendExitComplete;
123
+ refs.current.animationState = animationState;
124
+ const justStartedExiting = isExiting && !refs.current.wasExiting;
125
+ const justStoppedExiting = !isExiting && refs.current.wasExiting;
126
+ if (justStartedExiting || justStoppedExiting) {
127
+ refs.current.frozenExitTarget = null;
128
+ refs.current.exitCompleteScheduled = false;
129
+ }
130
+ (0, import_react2.useEffect)(() => {
131
+ refs.current.wasExiting = isExiting;
132
+ });
133
+ const {
134
+ dontAnimate = {},
135
+ doAnimate,
136
+ animationOptions
137
+ } = getMotionAnimatedProps(props, style, disableAnimation, animationState);
138
+ const [firstRenderStyle] = (0, import_react2.useState)(style);
139
+ if (refs.current.isFirstRender) {
140
+ refs.current.lastDontAnimate = firstRenderStyle;
141
+ }
142
+ const [isHydrating, setIsHydrating] = (0, import_react2.useState)(isHydratingGlobal);
143
+ (0, import_react2.useLayoutEffect)(() => {
144
+ if (isHydratingGlobal) {
145
+ hydratingComponents.add(() => {
146
+ setIsHydrating(false);
147
+ });
148
+ }
149
+ return () => {
150
+ refs.current.disposed = true;
151
+ };
152
+ }, []);
153
+ const flushAnimation = ({
154
+ doAnimate: doAnimateRaw = {},
155
+ animationOptions: passedOptions = {},
156
+ dontAnimate: dontAnimate2
157
+ }) => {
158
+ let startedControls = null;
159
+ const isCurrentlyExiting = refs.current.isExiting;
160
+ const currentSendExitComplete = refs.current.sendExitComplete;
161
+ let doAnimate2 = doAnimateRaw;
162
+ if (isCurrentlyExiting && refs.current.frozenExitTarget) {
163
+ doAnimate2 = refs.current.frozenExitTarget;
164
+ }
165
+ const animationOptions2 = isCurrentlyExiting && currentSendExitComplete ? getAnimationOptions(props.transition ?? null, "exit") : passedOptions;
166
+ try {
167
+ const node = stateRef.current.host;
168
+ if (refs.current.isFirstRender) {
169
+ refs.current.lastDontAnimate = null;
170
+ refs.current.lastDoAnimate = null;
171
+ }
172
+ if (process.env.NODE_ENV === "development") {
173
+ if (props["debug"] && props["debug"] !== "profile") {
174
+ console.groupCollapsed(`[motion] animate (${JSON.stringify(getDiff(refs.current.lastDoAnimate, doAnimate2), null, 2)})`);
175
+ console.info({
176
+ props,
177
+ componentState,
178
+ doAnimate: doAnimate2,
179
+ dontAnimate: dontAnimate2,
180
+ animationOptions: animationOptions2,
181
+ animationProps,
182
+ lastDoAnimate: {
183
+ ...refs.current.lastDoAnimate
184
+ },
185
+ lastDontAnimate: {
186
+ ...refs.current.lastDontAnimate
187
+ },
188
+ isExiting,
189
+ style,
190
+ node
191
+ });
192
+ console.groupCollapsed(`trace >`);
193
+ console.trace();
194
+ console.groupEnd();
195
+ console.groupEnd();
196
+ }
197
+ }
198
+ if (!(node instanceof HTMLElement)) {
199
+ return;
200
+ }
201
+ const prevDont = refs.current.lastDontAnimate;
202
+ if (dontAnimate2) {
203
+ if (prevDont) {
204
+ removeRemovedStyles(prevDont, dontAnimate2, node, doAnimate2);
205
+ const changed = getDiff(prevDont, dontAnimate2);
206
+ if (changed) {
207
+ Object.assign(node.style, changed);
208
+ }
209
+ } else {
210
+ Object.assign(node.style, dontAnimate2);
211
+ }
212
+ }
213
+ if (doAnimate2) {
214
+ if (prevDont) {
215
+ for (const key in prevDont) {
216
+ if (key in doAnimate2) {
217
+ node.style[key] = prevDont[key];
218
+ if (refs.current.lastDoAnimate) {
219
+ refs.current.lastDoAnimate[key] = prevDont[key];
220
+ }
221
+ }
222
+ }
223
+ }
224
+ const lastAnimated = refs.current.lastDoAnimate;
225
+ if (lastAnimated) {
226
+ removeRemovedStyles(lastAnimated, doAnimate2, node, dontAnimate2);
227
+ }
228
+ const diff = getDiff(refs.current.lastDoAnimate, doAnimate2);
229
+ if (diff) {
230
+ if (isCurrentlyExiting && !refs.current.frozenExitTarget) {
231
+ refs.current.frozenExitTarget = {
232
+ ...doAnimate2
233
+ };
234
+ }
235
+ const isPopperPosition = node.hasAttribute("data-popper-animate-position");
236
+ let midFlightValues = null;
237
+ if (refs.current.controls) {
238
+ try {
239
+ const computed = getComputedStyle(node);
240
+ midFlightValues = {};
241
+ for (const key in diff) {
242
+ const val = computed[key];
243
+ if (val !== void 0 && val !== "") {
244
+ midFlightValues[key] = val;
245
+ }
246
+ }
247
+ } catch {}
248
+ if (isCurrentlyExiting) {
249
+ refs.current.controls.stop();
250
+ }
251
+ if (midFlightValues) {
252
+ for (const key in midFlightValues) {
253
+ ;
254
+ node.style[key] = midFlightValues[key];
255
+ }
256
+ }
257
+ if (isPopperPosition) {
258
+ const anims = node.getAnimations();
259
+ for (const anim of anims) {
260
+ anim.cancel();
261
+ }
262
+ }
263
+ }
264
+ const fixedDiff = fixTransparentColors(diff, refs.current.lastDoAnimate, doAnimate2);
265
+ if (midFlightValues?.transform && fixedDiff.transform) {
266
+ fixedDiff.transform = [midFlightValues.transform, fixedDiff.transform];
267
+ }
268
+ startedControls = animate(scope.current, fixedDiff, animationOptions2);
269
+ refs.current.controls = startedControls;
270
+ refs.current.lastAnimateAt = Date.now();
271
+ }
272
+ }
273
+ refs.current.lastDontAnimate = dontAnimate2 ? {
274
+ ...dontAnimate2
275
+ } : {};
276
+ refs.current.lastDoAnimate = doAnimate2 ? {
277
+ ...doAnimate2
278
+ } : {};
279
+ } finally {
280
+ if (isCurrentlyExiting && currentSendExitComplete) {
281
+ if (startedControls) {
282
+ refs.current.exitCompleteScheduled = true;
283
+ startedControls.finished.then(() => {
284
+ if (refs.current.isExiting) {
285
+ currentSendExitComplete();
286
+ }
287
+ }).catch(() => {
288
+ if (refs.current.isExiting) {
289
+ currentSendExitComplete();
290
+ }
291
+ });
292
+ } else if (!refs.current.exitCompleteScheduled) {
293
+ currentSendExitComplete();
294
+ }
295
+ }
296
+ }
297
+ };
298
+ useStyleEmitter?.((nextStyle, effectiveTransition) => {
299
+ const animationProps2 = getMotionAnimatedProps(props, nextStyle, disableAnimation, refs.current.animationState, effectiveTransition);
300
+ flushAnimation(animationProps2);
301
+ });
302
+ (0, import_web.useIsomorphicLayoutEffect)(() => {
303
+ if (refs.current.isFirstRender) {
304
+ refs.current.isFirstRender = false;
305
+ if (isHydrating) {
306
+ if (doAnimate && Object.keys(doAnimate).length > 0) {
307
+ refs.current.lastDoAnimate = {
308
+ ...doAnimate
309
+ };
310
+ } else {
311
+ refs.current.lastDoAnimate = dontAnimate ? {
312
+ ...dontAnimate
313
+ } : {};
314
+ }
315
+ refs.current.lastDontAnimate = dontAnimate ? {
316
+ ...dontAnimate
317
+ } : {};
318
+ refs.current.lastAnimateAt = Date.now();
319
+ return;
320
+ }
321
+ refs.current.lastDontAnimate = dontAnimate ? {
322
+ ...dontAnimate
323
+ } : {};
324
+ refs.current.lastDoAnimate = doAnimate ? {
325
+ ...doAnimate
326
+ } : {};
327
+ return;
328
+ }
329
+ flushAnimation({
330
+ doAnimate,
331
+ dontAnimate,
332
+ animationOptions
333
+ });
334
+ }, [style, isExiting, disableAnimation]);
335
+ if (process.env.NODE_ENV === "development") {
336
+ if (props["debug"] && props["debug"] !== "profile") {
337
+ console.groupCollapsed(`[motion] render`);
338
+ console.info({
339
+ style,
340
+ doAnimate,
341
+ dontAnimate,
342
+ scope,
343
+ animationOptions,
344
+ isExiting,
345
+ isFirstRender: refs.current.isFirstRender,
346
+ animationProps
347
+ });
348
+ console.groupEnd();
349
+ }
350
+ }
351
+ return {
352
+ style: firstRenderStyle,
353
+ ref: scope,
354
+ render: "div"
355
+ };
356
+ },
357
+ useAnimatedNumber(initial) {
358
+ const motionValue = (0, import_react.useMotionValue)(initial);
359
+ return import_react2.default.useMemo(() => ({
360
+ getInstance() {
361
+ return motionValue;
362
+ },
363
+ getValue() {
364
+ return motionValue.get();
365
+ },
366
+ setValue(next, config = {
367
+ type: "spring"
368
+ }, onFinish) {
369
+ if (config.type === "direct") {
370
+ MotionValueStrategy.set(motionValue, {
371
+ type: "direct"
372
+ });
373
+ motionValue.set(next);
374
+ onFinish?.();
375
+ return;
376
+ }
377
+ MotionValueStrategy.set(motionValue, config);
378
+ if (onFinish) {
379
+ const prior = PendingMotionOnFinish.get(motionValue);
380
+ if (prior) {
381
+ PendingMotionOnFinish.delete(motionValue);
382
+ prior();
383
+ }
384
+ PendingMotionOnFinish.set(motionValue, onFinish);
385
+ }
386
+ motionValue.set(next);
387
+ },
388
+ stop() {
389
+ motionValue.stop();
390
+ }
391
+ }), [motionValue]);
392
+ },
393
+ useAnimatedNumberReaction({
394
+ value
395
+ }, onValue) {
396
+ const instance = value.getInstance();
397
+ (0, import_react.useMotionValueEvent)(instance, "change", onValue);
398
+ },
399
+ useAnimatedNumberStyle(val, getStyleProp) {
400
+ const motionValue = val.getInstance();
401
+ const getStyleRef = (0, import_react2.useRef)(getStyleProp);
402
+ getStyleRef.current = getStyleProp;
403
+ return (0, import_react2.useMemo)(() => {
404
+ return {
405
+ getStyle: cur => {
406
+ return getStyleRef.current(cur);
407
+ },
408
+ motionValue
409
+ };
410
+ }, []);
411
+ },
412
+ useAnimatedNumbersStyle(vals, getStyleProp) {
413
+ const motionValues = vals.map(v => v.getInstance());
414
+ const getStyleRef = (0, import_react2.useRef)(getStyleProp);
415
+ getStyleRef.current = getStyleProp;
416
+ return (0, import_react2.useMemo)(() => {
417
+ return {
418
+ getStyle: (...currentValues) => getStyleRef.current(...currentValues),
419
+ motionValues
420
+ };
421
+ }, []);
422
+ }
423
+ };
424
+ function getMotionAnimatedProps(props, style, disable, animationState = "default", transitionOverride) {
425
+ if (disable) {
426
+ return {
427
+ dontAnimate: style
428
+ };
429
+ }
430
+ const animationOptions = getAnimationOptions(transitionOverride ?? props.transition ?? null, animationState);
431
+ let dontAnimate;
432
+ let doAnimate;
433
+ const animateOnly = props.animateOnly;
434
+ for (const key in style) {
435
+ const value = style[key];
436
+ if (disableAnimationProps.has(key) || animateOnly && !animateOnly.includes(key)) {
437
+ dontAnimate ||= {};
438
+ dontAnimate[key] = value;
439
+ } else {
440
+ doAnimate ||= {};
441
+ doAnimate[key] = value;
442
+ }
443
+ }
444
+ return {
445
+ dontAnimate,
446
+ doAnimate,
447
+ animationOptions
448
+ };
449
+ }
450
+ function getAnimationOptions(transitionProp, animationState = "default") {
451
+ const normalized = (0, import_animation_helpers.normalizeTransition)(transitionProp);
452
+ let effectiveKey = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
453
+ if (!effectiveKey && animationState === "default") {
454
+ effectiveKey = normalized.enter || normalized.exit || null;
455
+ }
456
+ const globalConfigOverride = normalized.config ? {
457
+ ...normalized.config
458
+ } : void 0;
459
+ if (!effectiveKey && Object.keys(normalized.properties).length === 0 && !globalConfigOverride) {
460
+ return {};
461
+ }
462
+ const defaultConfig = effectiveKey ? withInferredType(animations[effectiveKey]) : null;
463
+ const delay = normalized.delay;
464
+ const result = {};
465
+ if (defaultConfig) {
466
+ Object.assign(result, defaultConfig);
467
+ }
468
+ if (globalConfigOverride) {
469
+ Object.assign(result, globalConfigOverride);
470
+ if (result.type === void 0 && result.duration !== void 0 && result.damping === void 0 && result.stiffness === void 0 && result.mass === void 0) {
471
+ result.type = "tween";
472
+ }
473
+ }
474
+ if (delay) {
475
+ result.delay = delay;
476
+ }
477
+ if (defaultConfig || globalConfigOverride || delay) {
478
+ result.default = {
479
+ ...defaultConfig,
480
+ ...globalConfigOverride,
481
+ ...(delay ? {
482
+ delay
483
+ } : null)
484
+ };
485
+ }
486
+ for (const [propName, animationNameOrConfig] of Object.entries(normalized.properties)) {
487
+ if (typeof animationNameOrConfig === "string") {
488
+ result[propName] = withInferredType(animations[animationNameOrConfig]);
489
+ } else if (animationNameOrConfig && typeof animationNameOrConfig === "object") {
490
+ const baseConfig = animationNameOrConfig.type ? withInferredType(animations[animationNameOrConfig.type]) : defaultConfig;
491
+ result[propName] = {
492
+ ...baseConfig,
493
+ ...animationNameOrConfig
494
+ };
495
+ }
496
+ }
497
+ convertMsToS(result);
498
+ convertMsToS(result.default);
499
+ for (const key in result) {
500
+ if (key !== "default" && typeof result[key] === "object") {
501
+ convertMsToS(result[key]);
502
+ }
503
+ }
504
+ return result;
505
+ }
506
+ }
507
+ function withInferredType(config) {
508
+ if (!config) {
509
+ return {
510
+ type: "spring"
511
+ };
512
+ }
513
+ const isTimingBased = config.duration !== void 0 && config.damping === void 0 && config.stiffness === void 0 && config.mass === void 0;
514
+ return {
515
+ type: isTimingBased ? "tween" : "spring",
516
+ ...config
517
+ };
518
+ }
519
+ function convertMsToS(config) {
520
+ if (!config) return;
521
+ if (typeof config.delay === "number") config.delay = config.delay / 1e3;
522
+ if (typeof config.duration === "number") {
523
+ const isTimingBased = config.type === "tween" || config.type === void 0 && config.damping === void 0 && config.stiffness === void 0 && config.mass === void 0;
524
+ if (isTimingBased) {
525
+ config.duration = config.duration / 1e3;
526
+ }
527
+ }
528
+ }
529
+ function removeRemovedStyles(prev, next, node, dontClearIfIn) {
530
+ for (const key in prev) {
531
+ if (!(key in next)) {
532
+ if (dontClearIfIn && key in dontClearIfIn) {
533
+ continue;
534
+ }
535
+ node.style[key] = "";
536
+ }
537
+ }
538
+ }
539
+ const disableAnimationProps = /* @__PURE__ */new Set(["alignContent", "alignItems", "boxSizing", "contain", "containerType", "display", "flexBasis", "flexDirection", "fontFamily", "justifyContent", "overflow", "overflowX", "overflowY", "pointerEvents", "position", "textWrap", "userSelect"]);
540
+ const MotionView = createMotionView("div");
541
+ const MotionText = createMotionView("span");
542
+ function createMotionView(defaultTag) {
543
+ const isText = defaultTag === "span";
544
+ const Component = (0, import_react2.forwardRef)((propsIn, ref) => {
545
+ const {
546
+ forwardedRef,
547
+ animation,
548
+ render = defaultTag,
549
+ style,
550
+ ...propsRest
551
+ } = propsIn;
552
+ const [scope, animate] = useAnimateSSRSafe();
553
+ const hostRef = (0, import_react2.useRef)(null);
554
+ const composedRefs = (0, import_web.useComposedRefs)(forwardedRef, ref, hostRef, scope);
555
+ const stateRef = (0, import_react2.useRef)(null);
556
+ if (!stateRef.current) {
557
+ stateRef.current = {
558
+ get host() {
559
+ return hostRef.current;
560
+ }
561
+ };
562
+ }
563
+ const [_, state] = (0, import_web.useThemeWithState)({});
564
+ const styles = Array.isArray(style) ? style : [style];
565
+ const [animatedStyle, nonAnimatedStyles] = (() => {
566
+ let animatedStyle2;
567
+ const nonAnimatedStyles2 = [];
568
+ for (const style2 of styles) {
569
+ if (style2.getStyle) {
570
+ animatedStyle2 = style2;
571
+ } else {
572
+ nonAnimatedStyles2.push(style2);
573
+ }
574
+ }
575
+ return [animatedStyle2, nonAnimatedStyles2];
576
+ })();
577
+ function getProps(props2) {
578
+ const out = (0, import_web.getSplitStyles)(props2, isText ? import_web.Text.staticConfig : import_web.View.staticConfig, state?.theme, state?.name, {
579
+ unmounted: false
580
+ }, {
581
+ isAnimated: false,
582
+ noClass: true,
583
+ resolveValues: "auto"
584
+ });
585
+ if (!out) {
586
+ return {};
587
+ }
588
+ if (out.viewProps.style) {
589
+ (0, import_web.fixStyles)(out.viewProps.style);
590
+ (0, import_web.styleToCSS)(out.viewProps.style);
591
+ }
592
+ return out.viewProps;
593
+ }
594
+ const props = getProps({
595
+ ...propsRest,
596
+ style: nonAnimatedStyles
597
+ });
598
+ const Element = render || "div";
599
+ const transformedProps = import_web.hooks.usePropsTransform?.(render, props, stateRef, false);
600
+ (0, import_react2.useEffect)(() => {
601
+ if (!animatedStyle) return;
602
+ if (animatedStyle.motionValues) {
603
+ const mvs = animatedStyle.motionValues;
604
+ const unsubs = mvs.map(mv => mv.on("change", () => {
605
+ const currentValues = mvs.map(v => v.get());
606
+ const nextStyle = animatedStyle.getStyle(...currentValues);
607
+ const animationConfig = MotionValueStrategy.get(mv);
608
+ const node = hostRef.current;
609
+ const webStyle = getProps({
610
+ style: nextStyle
611
+ }).style;
612
+ if (webStyle && node instanceof HTMLElement) {
613
+ const motionAnimationConfig = animationConfig?.type === "timing" ? {
614
+ type: "tween",
615
+ duration: (animationConfig?.duration || 0) / 1e3
616
+ } : animationConfig?.type === "direct" ? {
617
+ type: "tween",
618
+ duration: 0
619
+ } : {
620
+ type: "spring",
621
+ ...animationConfig
622
+ };
623
+ const controls = animate(node, webStyle, motionAnimationConfig);
624
+ settlePendingMotionOnFinish(mv, controls);
625
+ }
626
+ }));
627
+ return () => unsubs.forEach(fn => fn());
628
+ }
629
+ if (!animatedStyle.motionValue) return;
630
+ return animatedStyle.motionValue.on("change", value => {
631
+ const nextStyle = animatedStyle.getStyle(value);
632
+ const animationConfig = MotionValueStrategy.get(animatedStyle.motionValue);
633
+ const node = hostRef.current;
634
+ const webStyle = getProps({
635
+ style: nextStyle
636
+ }).style;
637
+ if (webStyle && node instanceof HTMLElement) {
638
+ const motionAnimationConfig = animationConfig?.type === "timing" ? {
639
+ type: "tween",
640
+ duration: (animationConfig?.duration || 0) / 1e3
641
+ } : animationConfig?.type === "direct" ? {
642
+ type: "tween",
643
+ duration: 0
644
+ } : {
645
+ type: "spring",
646
+ ...animationConfig
647
+ };
648
+ const controls = animate(node, webStyle, motionAnimationConfig);
649
+ settlePendingMotionOnFinish(animatedStyle.motionValue, controls);
650
+ }
651
+ });
652
+ }, [animatedStyle]);
653
+ return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Element, {
654
+ ...transformedProps,
655
+ ref: composedRefs
656
+ });
657
+ });
658
+ Component["acceptRenderProp"] = true;
659
+ return Component;
660
+ }
661
+ function getDiff(previous, next) {
662
+ if (!previous) {
663
+ return next;
664
+ }
665
+ let diff = null;
666
+ for (const key in next) {
667
+ if (next[key] !== previous[key]) {
668
+ diff ||= {};
669
+ diff[key] = next[key];
670
+ }
671
+ }
672
+ return diff;
673
+ }
674
+ function fixTransparentColors(diff, previous, next) {
675
+ let result = diff;
676
+ for (const key in diff) {
677
+ if (diff[key] === "transparent") {
678
+ let fixed = "rgba(0, 0, 0, 0)";
679
+ const candidates = [previous?.[key], next?.[key]];
680
+ for (const candidate of candidates) {
681
+ if (typeof candidate === "string" && candidate !== "transparent") {
682
+ const rgbaMatch = candidate.match(/^rgba?\(([^,]+),\s*([^,]+),\s*([^,)]+)/);
683
+ if (rgbaMatch) {
684
+ fixed = `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, 0)`;
685
+ break;
686
+ }
687
+ }
688
+ }
689
+ if (result === diff) {
690
+ result = {
691
+ ...diff
692
+ };
693
+ }
694
+ result[key] = fixed;
695
+ }
696
+ }
697
+ return result;
698
+ }