motion-v 0.7.0 → 0.8.0

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 (144) hide show
  1. package/dist/cjs/index.js +290 -134
  2. package/dist/es/animation/hooks/animation-controls.d.ts +8 -0
  3. package/dist/es/animation/hooks/animation-controls.mjs +89 -0
  4. package/dist/es/animation/{use-animate.mjs → hooks/use-animate.mjs} +1 -1
  5. package/dist/es/animation/hooks/use-animation-controls.d.ts +33 -0
  6. package/dist/es/animation/hooks/use-animation-controls.mjs +16 -0
  7. package/dist/es/animation/index.d.ts +2 -0
  8. package/dist/es/animation/types.d.ts +68 -0
  9. package/dist/es/animation/utils.d.ts +2 -0
  10. package/dist/es/animation/utils.mjs +6 -0
  11. package/dist/es/components/animate-presence/AnimatePresence.vue.mjs +2 -2
  12. package/dist/{src → es}/components/index.d.ts +1 -1
  13. package/dist/es/components/motion/Motion.vue.mjs +4 -1
  14. package/dist/{src → es}/components/motion/NameSpace.d.ts +2 -2
  15. package/dist/es/constants/index.mjs +0 -1
  16. package/dist/es/features/animation/animation.d.ts +13 -0
  17. package/dist/es/features/animation/animation.mjs +33 -0
  18. package/dist/es/features/feature-manager.mjs +5 -1
  19. package/dist/{src → es}/features/gestures/drag/types.d.ts +1 -1
  20. package/dist/es/features/gestures/focus/index.d.ts +7 -0
  21. package/dist/es/features/gestures/focus/index.mjs +36 -0
  22. package/dist/es/features/gestures/focus/types.d.ts +6 -0
  23. package/dist/{src → es}/features/index.d.ts +1 -0
  24. package/dist/es/index.mjs +3 -1
  25. package/dist/es/state/animate-updates.d.ts +19 -0
  26. package/dist/es/state/animate-updates.mjs +129 -0
  27. package/dist/es/state/animation/types.d.ts +0 -0
  28. package/dist/{src → es}/state/motion-state.d.ts +2 -4
  29. package/dist/es/state/motion-state.mjs +6 -123
  30. package/dist/es/state/style.mjs +2 -2
  31. package/dist/{src → es}/state/utils.d.ts +1 -1
  32. package/dist/{src → es}/types/state.d.ts +4 -2
  33. package/package.json +6 -5
  34. package/dist/es/components/animate-presence/utils.mjs +0 -10
  35. package/dist/src/animation/index.d.ts +0 -1
  36. package/dist/src/components/animate-presence/utils.d.ts +0 -1
  37. /package/dist/{src/animation → es/animation/hooks}/use-animate.d.ts +0 -0
  38. /package/dist/{src → es}/components/LayoutGroup.d.ts +0 -0
  39. /package/dist/{src → es}/components/animate-presence/AnimatePresence.d.ts +0 -0
  40. /package/dist/{src → es}/components/animate-presence/index.d.ts +0 -0
  41. /package/dist/{src → es}/components/animate-presence/types.d.ts +0 -0
  42. /package/dist/{src → es}/components/animate-presence/use-pop-layout.d.ts +0 -0
  43. /package/dist/{src → es}/components/animate-presence/use-presence.d.ts +0 -0
  44. /package/dist/{src/animation/types.d.ts → es/components/animate-presence/utils.d.ts} +0 -0
  45. /package/dist/{src → es}/components/context.d.ts +0 -0
  46. /package/dist/{src → es}/components/group.d.ts +0 -0
  47. /package/dist/{src → es}/components/hooks/use-motion-elm.d.ts +0 -0
  48. /package/dist/{src → es}/components/motion/Motion.d.ts +0 -0
  49. /package/dist/{src → es}/components/motion/Primitive.d.ts +0 -0
  50. /package/dist/{src → es}/components/motion/Slot.d.ts +0 -0
  51. /package/dist/{src → es}/components/motion/index.d.ts +0 -0
  52. /package/dist/{src → es}/components/motion/renderSlotFragments.d.ts +0 -0
  53. /package/dist/{src → es}/components/motion/utils.d.ts +0 -0
  54. /package/dist/{src → es}/components/motion-config/MotionConfig.d.ts +0 -0
  55. /package/dist/{src → es}/components/motion-config/context.d.ts +0 -0
  56. /package/dist/{src → es}/components/motion-config/index.d.ts +0 -0
  57. /package/dist/{src → es}/components/motion-config/types.d.ts +0 -0
  58. /package/dist/{src → es}/components/presence.d.ts +0 -0
  59. /package/dist/{src → es}/components/use-force-update.d.ts +0 -0
  60. /package/dist/{src → es}/components/use-layout-group.d.ts +0 -0
  61. /package/dist/{src → es}/components/use-slot-change-index.d.ts +0 -0
  62. /package/dist/{src → es}/constants/index.d.ts +0 -0
  63. /package/dist/{src → es}/events/add-dom-event.d.ts +0 -0
  64. /package/dist/{src → es}/events/add-pointer-event.d.ts +0 -0
  65. /package/dist/{src → es}/events/event-info.d.ts +0 -0
  66. /package/dist/{src → es}/events/index.d.ts +0 -0
  67. /package/dist/{src → es}/events/types.d.ts +0 -0
  68. /package/dist/{src → es}/events/utils/index.d.ts +0 -0
  69. /package/dist/{src → es}/events/utils/is-primary-pointer.d.ts +0 -0
  70. /package/dist/{src → es}/features/feature-manager.d.ts +0 -0
  71. /package/dist/{src → es}/features/feature.d.ts +0 -0
  72. /package/dist/{src → es}/features/gestures/base.d.ts +0 -0
  73. /package/dist/{src → es}/features/gestures/drag/VisualElementDragControls.d.ts +0 -0
  74. /package/dist/{src → es}/features/gestures/drag/index.d.ts +0 -0
  75. /package/dist/{src → es}/features/gestures/drag/lock.d.ts +0 -0
  76. /package/dist/{src → es}/features/gestures/drag/use-drag-controls.d.ts +0 -0
  77. /package/dist/{src → es}/features/gestures/drag/utils/constraints.d.ts +0 -0
  78. /package/dist/{src → es}/features/gestures/drag/utils/is.d.ts +0 -0
  79. /package/dist/{src → es}/features/gestures/hover/index.d.ts +0 -0
  80. /package/dist/{src → es}/features/gestures/hover/types.d.ts +0 -0
  81. /package/dist/{src → es}/features/gestures/in-view/index.d.ts +0 -0
  82. /package/dist/{src → es}/features/gestures/in-view/types.d.ts +0 -0
  83. /package/dist/{src → es}/features/gestures/index.d.ts +0 -0
  84. /package/dist/{src → es}/features/gestures/pan/PanSession.d.ts +0 -0
  85. /package/dist/{src → es}/features/gestures/pan/index.d.ts +0 -0
  86. /package/dist/{src → es}/features/gestures/pan/types.d.ts +0 -0
  87. /package/dist/{src → es}/features/gestures/press/index.d.ts +0 -0
  88. /package/dist/{src → es}/features/gestures/press/types.d.ts +0 -0
  89. /package/dist/{src → es}/features/gestures/types.d.ts +0 -0
  90. /package/dist/{src → es}/features/layout/config.d.ts +0 -0
  91. /package/dist/{src → es}/features/layout/layout.d.ts +0 -0
  92. /package/dist/{src → es}/features/layout/projection.d.ts +0 -0
  93. /package/dist/{src → es}/features/layout/types.d.ts +0 -0
  94. /package/dist/{src → es}/features/layout/utils.d.ts +0 -0
  95. /package/dist/{src → es}/features/svg.d.ts +0 -0
  96. /package/dist/{src → es}/index.d.ts +0 -0
  97. /package/dist/{src → es}/projection/conversion.d.ts +0 -0
  98. /package/dist/{src → es}/projection/geometry/delta-apply.d.ts +0 -0
  99. /package/dist/{src → es}/projection/geometry/delta-calc.d.ts +0 -0
  100. /package/dist/{src → es}/projection/geometry/models.d.ts +0 -0
  101. /package/dist/{src → es}/projection/node/types.d.ts +0 -0
  102. /package/dist/{src → es}/projection/utils/each-axis.d.ts +0 -0
  103. /package/dist/{src → es}/projection/utils/measure.d.ts +0 -0
  104. /package/dist/{src → es}/render/utils/setters.d.ts +0 -0
  105. /package/dist/{src → es}/shared/index.d.ts +0 -0
  106. /package/dist/{src → es}/shared/test.d.ts +0 -0
  107. /package/dist/{src → es}/state/animate-variants-children.d.ts +0 -0
  108. /package/dist/{src/animation/use-animation.d.ts → es/state/animation/index.d.ts} +0 -0
  109. /package/dist/{src → es}/state/create-visual-element.d.ts +0 -0
  110. /package/dist/{src → es}/state/event.d.ts +0 -0
  111. /package/dist/{src → es}/state/index.d.ts +0 -0
  112. /package/dist/{src → es}/state/style.d.ts +0 -0
  113. /package/dist/{src → es}/state/transform.d.ts +0 -0
  114. /package/dist/{src → es}/state/utils/is-present.d.ts +0 -0
  115. /package/dist/{src → es}/types/framer-motion.d.ts +0 -0
  116. /package/dist/{src → es}/types/index.d.ts +0 -0
  117. /package/dist/{src → es}/types/motion-values.d.ts +0 -0
  118. /package/dist/{src → es}/types/transform.d.ts +0 -0
  119. /package/dist/{src → es}/utils/clamp.d.ts +0 -0
  120. /package/dist/{src → es}/utils/createContext.d.ts +0 -0
  121. /package/dist/{src → es}/utils/get-context-window.d.ts +0 -0
  122. /package/dist/{src → es}/utils/index.d.ts +0 -0
  123. /package/dist/{src → es}/utils/mix/number.d.ts +0 -0
  124. /package/dist/{src → es}/utils/motion-value.d.ts +0 -0
  125. /package/dist/{src → es}/utils/noop.d.ts +0 -0
  126. /package/dist/{src → es}/utils/progress.d.ts +0 -0
  127. /package/dist/{src → es}/utils/time-conversion.d.ts +0 -0
  128. /package/dist/{src → es}/utils/use-animation-frame.d.ts +0 -0
  129. /package/dist/{src → es}/utils/use-dom-ref.d.ts +0 -0
  130. /package/dist/{src → es}/utils/use-in-view.d.ts +0 -0
  131. /package/dist/{src → es}/value/index.d.ts +0 -0
  132. /package/dist/{src → es}/value/types/numbers/units.d.ts +0 -0
  133. /package/dist/{src → es}/value/use-combine-values.d.ts +0 -0
  134. /package/dist/{src → es}/value/use-computed.d.ts +0 -0
  135. /package/dist/{src → es}/value/use-motion-template.d.ts +0 -0
  136. /package/dist/{src → es}/value/use-motion-value-event.d.ts +0 -0
  137. /package/dist/{src → es}/value/use-scroll.d.ts +0 -0
  138. /package/dist/{src → es}/value/use-spring.d.ts +0 -0
  139. /package/dist/{src → es}/value/use-time.d.ts +0 -0
  140. /package/dist/{src → es}/value/use-transform.d.ts +0 -0
  141. /package/dist/{src → es}/value/use-velocity.d.ts +0 -0
  142. /package/dist/{src → es}/value/use-will-change/add-will-change.d.ts +0 -0
  143. /package/dist/{src → es}/value/use-will-change/is.d.ts +0 -0
  144. /package/dist/{src → es}/value/use-will-change/types.d.ts +0 -0
package/dist/cjs/index.js CHANGED
@@ -3309,7 +3309,7 @@ function initPrefersReducedMotion() {
3309
3309
  }
3310
3310
  const valueTypes = [...dimensionValueTypes, color, complex];
3311
3311
  const findValueType = (v) => valueTypes.find(testValueType(v));
3312
- function isAnimationControls(v) {
3312
+ function isAnimationControls$1(v) {
3313
3313
  return v !== null && typeof v === "object" && typeof v.start === "function";
3314
3314
  }
3315
3315
  function isVariantLabel(v) {
@@ -3326,7 +3326,7 @@ const variantPriorityOrder = [
3326
3326
  ];
3327
3327
  const variantProps = ["initial", ...variantPriorityOrder];
3328
3328
  function isControllingVariants(props) {
3329
- return isAnimationControls(props.animate) || variantProps.some((name) => isVariantLabel(props[name]));
3329
+ return isAnimationControls$1(props.animate) || variantProps.some((name) => isVariantLabel(props[name]));
3330
3330
  }
3331
3331
  function isVariantNode(props) {
3332
3332
  return Boolean(isControllingVariants(props) || props.variants);
@@ -7943,6 +7943,36 @@ class ProjectionFeature extends Feature {
7943
7943
  (_a = this.state.visualElement.projection) == null ? void 0 : _a.mount(this.state.element);
7944
7944
  }
7945
7945
  }
7946
+ class FocusGesture extends Feature {
7947
+ constructor() {
7948
+ super(...arguments);
7949
+ this.isActive = false;
7950
+ }
7951
+ onFocus() {
7952
+ let isFocusVisible = false;
7953
+ try {
7954
+ isFocusVisible = this.state.element.matches(":focus-visible");
7955
+ } catch (e) {
7956
+ isFocusVisible = true;
7957
+ }
7958
+ if (!isFocusVisible)
7959
+ return;
7960
+ this.state.setActive("focus", true);
7961
+ this.isActive = true;
7962
+ }
7963
+ onBlur() {
7964
+ if (!this.isActive)
7965
+ return;
7966
+ this.state.setActive("focus", false);
7967
+ this.isActive = false;
7968
+ }
7969
+ mount() {
7970
+ this.unmount = pipe(
7971
+ addDomEvent$1(this.state.element, "focus", () => this.onFocus()),
7972
+ addDomEvent$1(this.state.element, "blur", () => this.onBlur())
7973
+ );
7974
+ }
7975
+ }
7946
7976
  class FeatureManager {
7947
7977
  constructor(state2) {
7948
7978
  this.features = [];
@@ -7954,7 +7984,9 @@ class FeatureManager {
7954
7984
  new LayoutFeature(state2),
7955
7985
  new ProjectionFeature(state2),
7956
7986
  new PanGesture(state2),
7957
- new DragGesture(state2)
7987
+ new DragGesture(state2),
7988
+ new FocusGesture(state2),
7989
+ new AnimationFeature(state2)
7958
7990
  ];
7959
7991
  }
7960
7992
  mount() {
@@ -7982,13 +8014,160 @@ class FeatureManager {
7982
8014
  this.features.forEach((feature) => feature.beforeUnmount());
7983
8015
  }
7984
8016
  }
7985
- function motionEvent(name, target, isExit) {
7986
- return new CustomEvent(name, { detail: { target, isExit } });
8017
+ function isAnimationControls(v) {
8018
+ return v !== null && typeof v === "object" && typeof v.start === "function";
8019
+ }
8020
+ class AnimationFeature extends Feature {
8021
+ constructor(state2) {
8022
+ super(state2);
8023
+ }
8024
+ updateAnimationControlsSubscription() {
8025
+ const { animate: animate2 } = this.state.options;
8026
+ if (isAnimationControls(animate2)) {
8027
+ this.unmountControls = animate2.subscribe(this.state);
8028
+ }
8029
+ }
8030
+ /**
8031
+ * Subscribe any provided AnimationControls to the component's VisualElement
8032
+ */
8033
+ mount() {
8034
+ this.updateAnimationControlsSubscription();
8035
+ }
8036
+ update() {
8037
+ const { animate: animate2 } = this.state.options;
8038
+ const { animate: prevAnimate } = this.state.visualElement.prevProps || {};
8039
+ if (animate2 !== prevAnimate) {
8040
+ this.updateAnimationControlsSubscription();
8041
+ }
8042
+ }
8043
+ unmount() {
8044
+ var _a;
8045
+ (_a = this.unmountControls) == null ? void 0 : _a.call(this);
8046
+ }
7987
8047
  }
7988
8048
  function createVisualElement(Component, options) {
7989
8049
  return isSVGElement$1(Component) ? new SVGVisualElement(options) : new HTMLVisualElement(options);
7990
8050
  }
7991
- const STATE_TYPES = ["initial", "animate", "inView", "hover", "press", "whileDrag", "exit"];
8051
+ function motionEvent(name, target, isExit) {
8052
+ return new CustomEvent(name, { detail: { target, isExit } });
8053
+ }
8054
+ const STATE_TYPES = ["initial", "animate", "inView", "hover", "press", "whileDrag", "focus", "exit"];
8055
+ function animateUpdates({
8056
+ controlActiveState = void 0,
8057
+ controlDelay = 0,
8058
+ directAnimate,
8059
+ directTransition,
8060
+ isFallback = false
8061
+ } = {}) {
8062
+ const prevTarget = this.target;
8063
+ this.target = { ...this.baseTarget };
8064
+ const animationOptions = {};
8065
+ const transition = { ...this.options.transition };
8066
+ if (directAnimate)
8067
+ resolveDirectAnimation.call(this, directAnimate, directTransition, animationOptions);
8068
+ else
8069
+ resolveStateAnimation.call(this, controlActiveState, animationOptions);
8070
+ const factories = createAnimationFactories.call(this, prevTarget, animationOptions, controlDelay);
8071
+ const { getChildAnimations, childAnimations } = setupChildAnimations.call(this, transition, controlActiveState, isFallback);
8072
+ return executeAnimations.call(this, factories, getChildAnimations, childAnimations, transition, controlActiveState);
8073
+ }
8074
+ function resolveDirectAnimation(directAnimate, directTransition, animationOptions) {
8075
+ const variant = resolveVariant(directAnimate, this.options.variants, this.options.custom);
8076
+ if (!variant)
8077
+ return;
8078
+ const transition = { ...this.options.transition, ...directTransition || variant.transition };
8079
+ Object.entries(variant).forEach(([key, value]) => {
8080
+ if (key === "transition")
8081
+ return;
8082
+ this.target[key] = value;
8083
+ animationOptions[key] = getOptions(transition, key);
8084
+ });
8085
+ }
8086
+ function resolveStateAnimation(controlActiveState, animationOptions) {
8087
+ if (controlActiveState)
8088
+ this.activeStates = { ...this.activeStates, ...controlActiveState };
8089
+ STATE_TYPES.forEach((name) => {
8090
+ if (!this.activeStates[name] || isAnimationControls(this.options[name]))
8091
+ return;
8092
+ const definition = core.isDef(this.options[name]) ? this.options[name] : this.context[name];
8093
+ const variant = resolveVariant(definition, this.options.variants, this.options.custom);
8094
+ if (!variant)
8095
+ return;
8096
+ const transition = { ...this.options.transition, ...variant.transition };
8097
+ Object.entries(variant).forEach(([key, value]) => {
8098
+ if (key === "transition")
8099
+ return;
8100
+ this.target[key] = value;
8101
+ animationOptions[key] = getOptions(transition, key);
8102
+ });
8103
+ });
8104
+ }
8105
+ function createAnimationFactories(prevTarget, animationOptions, controlDelay) {
8106
+ const factories = [];
8107
+ Object.keys(this.target).forEach((key) => {
8108
+ var _a;
8109
+ if (!hasChanged(prevTarget[key], this.target[key]))
8110
+ return;
8111
+ (_a = this.baseTarget)[key] ?? (_a[key] = style.get(this.element, key));
8112
+ const keyValue = this.target[key] === "none" ? transformResetValue[key] : this.target[key];
8113
+ const targetTransition = animationOptions[key];
8114
+ factories.push(() => animate(
8115
+ this.element,
8116
+ { [key]: keyValue },
8117
+ {
8118
+ ...targetTransition,
8119
+ delay: ((targetTransition == null ? void 0 : targetTransition.delay) || 0) + controlDelay
8120
+ }
8121
+ ));
8122
+ });
8123
+ return factories;
8124
+ }
8125
+ function setupChildAnimations(transition, controlActiveState, isFallback) {
8126
+ var _a;
8127
+ if (!((_a = this.visualElement.variantChildren) == null ? void 0 : _a.size) || controlActiveState)
8128
+ return { getChildAnimations: () => Promise.resolve(), childAnimations: [] };
8129
+ const { staggerChildren = 0, staggerDirection = 1, delayChildren = 0 } = transition || {};
8130
+ const maxStaggerDuration = (this.visualElement.variantChildren.size - 1) * staggerChildren;
8131
+ const generateStaggerDuration = staggerDirection === 1 ? (i = 0) => i * staggerChildren : (i = 0) => maxStaggerDuration - i * staggerChildren;
8132
+ const childAnimations = Array.from(this.visualElement.variantChildren).map((child, index) => {
8133
+ const childDelay = delayChildren + generateStaggerDuration(index);
8134
+ return child.state.animateUpdates({
8135
+ controlActiveState: this.activeStates,
8136
+ controlDelay: isFallback ? 0 : childDelay
8137
+ });
8138
+ }).filter(Boolean);
8139
+ return {
8140
+ getChildAnimations: () => Promise.all(childAnimations.map((animation) => animation())),
8141
+ childAnimations
8142
+ };
8143
+ }
8144
+ function executeAnimations(factories, getChildAnimations, childAnimations, transition, controlActiveState) {
8145
+ let animations;
8146
+ const getAnimation = () => {
8147
+ animations = factories.map((factory) => factory()).filter(Boolean);
8148
+ return Promise.all(animations);
8149
+ };
8150
+ const isExit = this.activeStates.exit;
8151
+ const animationTarget2 = { ...this.target };
8152
+ const element = this.element;
8153
+ const finishAnimation2 = (animationPromise) => {
8154
+ if (!(animations == null ? void 0 : animations.length) && !childAnimations.length) {
8155
+ if (isExit) {
8156
+ element.dispatchEvent(motionEvent("motionstart", animationTarget2));
8157
+ element.dispatchEvent(motionEvent("motioncomplete", animationTarget2, isExit));
8158
+ }
8159
+ return;
8160
+ }
8161
+ element.dispatchEvent(motionEvent("motionstart", animationTarget2));
8162
+ animationPromise.then(() => element.dispatchEvent(motionEvent("motioncomplete", animationTarget2, isExit))).catch(noop);
8163
+ };
8164
+ const getAnimationPromise = () => {
8165
+ const animationPromise = (transition == null ? void 0 : transition.when) ? (transition.when === "beforeChildren" ? getAnimation() : getChildAnimations()).then(() => transition.when === "beforeChildren" ? getChildAnimations() : getAnimation()) : Promise.all([getAnimation(), getChildAnimations()]);
8166
+ finishAnimation2(animationPromise);
8167
+ return animationPromise;
8168
+ };
8169
+ return controlActiveState ? getAnimationPromise : getAnimationPromise();
8170
+ }
7992
8171
  const mountedStates = /* @__PURE__ */ new WeakMap();
7993
8172
  let id = 0;
7994
8173
  class MotionState {
@@ -8003,6 +8182,7 @@ class MotionState {
8003
8182
  animate: true
8004
8183
  };
8005
8184
  this._context = null;
8185
+ this.animateUpdates = animateUpdates;
8006
8186
  this.id = `motion-state-${id++}`;
8007
8187
  this.options = options;
8008
8188
  this.parent = parent;
@@ -8152,122 +8332,10 @@ class MotionState {
8152
8332
  child.state.setActive(name, isActive, false);
8153
8333
  });
8154
8334
  if (isAnimate) {
8155
- this.animateUpdates();
8156
- }
8157
- }
8158
- // Core animation update logic
8159
- animateUpdates(controlActiveState = void 0, controlDelay = 0) {
8160
- var _a;
8161
- const prevTarget = this.target;
8162
- this.target = {
8163
- ...this.baseTarget
8164
- };
8165
- const animationOptions = {};
8166
- let transition;
8167
- if (controlActiveState) {
8168
- this.activeStates = { ...this.activeStates, ...controlActiveState };
8169
- }
8170
- for (const name of STATE_TYPES) {
8171
- if (!this.activeStates[name]) {
8172
- continue;
8173
- }
8174
- const definition = core.isDef(this.options[name]) ? this.options[name] : this.context[name];
8175
- const variant = resolveVariant(
8176
- definition,
8177
- this.options.variants,
8178
- this.options.custom
8179
- );
8180
- transition = Object.assign({}, this.options.transition, variant == null ? void 0 : variant.transition);
8181
- if (!variant)
8182
- continue;
8183
- const allTarget = { ...variant };
8184
- for (const key in allTarget) {
8185
- if (key === "transition")
8186
- continue;
8187
- this.target[key] = variant[key];
8188
- animationOptions[key] = getOptions(
8189
- transition,
8190
- key
8191
- );
8192
- }
8193
- }
8194
- const allTargetKeys = /* @__PURE__ */ new Set([
8195
- ...Object.keys(this.target)
8196
- ]);
8197
- const animationFactories = [];
8198
- allTargetKeys.forEach((key) => {
8199
- var _a2;
8200
- if (hasChanged(prevTarget[key], this.target[key])) {
8201
- (_a2 = this.baseTarget)[key] ?? (_a2[key] = style.get(this.element, key));
8202
- const keyValue = this.target[key] === "none" ? transformResetValue[key] : this.target[key];
8203
- const targetTransition = animationOptions[key];
8204
- animationFactories.push(
8205
- () => {
8206
- return animate(
8207
- this.element,
8208
- {
8209
- [key]: keyValue
8210
- },
8211
- {
8212
- ...targetTransition,
8213
- delay: ((targetTransition == null ? void 0 : targetTransition.delay) || 0) + controlDelay
8214
- }
8215
- );
8216
- }
8217
- );
8218
- }
8219
- });
8220
- let getChildAnimations = () => Promise.resolve();
8221
- let childAnimations = [];
8222
- if (((_a = this.visualElement.variantChildren) == null ? void 0 : _a.size) && !controlActiveState) {
8223
- const { staggerChildren = 0, staggerDirection = 1, delayChildren = 0 } = transition || {};
8224
- const maxStaggerDuration = (this.visualElement.variantChildren.size - 1) * staggerChildren;
8225
- const generateStaggerDuration = staggerDirection === 1 ? (i = 0) => i * staggerChildren : (i = 0) => maxStaggerDuration - i * staggerChildren;
8226
- childAnimations = Array.from(this.visualElement.variantChildren).map((child, index) => {
8227
- const childDelay = delayChildren + generateStaggerDuration(index);
8228
- return child.state.animateUpdates(this.activeStates, childDelay);
8229
- }).filter(Boolean);
8230
- getChildAnimations = () => Promise.all(childAnimations.map((animation) => animation()));
8231
- }
8232
- let animations;
8233
- const getAnimation = () => {
8234
- animations = animationFactories.map((factory) => factory()).filter(Boolean);
8235
- return Promise.all(animations);
8236
- };
8237
- const { when } = transition;
8238
- let animationPromise;
8239
- const isExit = this.activeStates.exit;
8240
- const animationTarget2 = { ...this.target };
8241
- const element = this.element;
8242
- function finishAnimation2() {
8243
- if (!(animations == null ? void 0 : animations.length) && !childAnimations.length) {
8244
- if (isExit) {
8245
- element.dispatchEvent(motionEvent("motionstart", animationTarget2));
8246
- element.dispatchEvent(motionEvent("motioncomplete", animationTarget2, isExit));
8247
- }
8248
- return;
8249
- }
8250
- element.dispatchEvent(motionEvent("motionstart", animationTarget2));
8251
- animationPromise.then(() => {
8252
- element.dispatchEvent(motionEvent("motioncomplete", animationTarget2, isExit));
8253
- }).catch(noop);
8254
- }
8255
- function getAnimationPromise() {
8256
- if (when) {
8257
- const [first, last] = when === "beforeChildren" ? [getAnimation, getChildAnimations] : [getChildAnimations, getAnimation];
8258
- animationPromise = first().then(() => last());
8259
- finishAnimation2();
8260
- return animationPromise;
8261
- } else {
8262
- animationPromise = Promise.all([getAnimation(), getChildAnimations()]);
8263
- finishAnimation2();
8264
- return animationPromise;
8265
- }
8266
- }
8267
- if (controlActiveState) {
8268
- return getAnimationPromise;
8335
+ this.animateUpdates({
8336
+ isFallback: !isActive
8337
+ });
8269
8338
  }
8270
- getAnimationPromise();
8271
8339
  }
8272
8340
  isMounted() {
8273
8341
  return Boolean(this.element);
@@ -8359,7 +8427,10 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
8359
8427
  onPanSessionStart: { type: Function },
8360
8428
  onPanStart: { type: Function },
8361
8429
  onPan: { type: Function },
8362
- onPanEnd: { type: Function }
8430
+ onPanEnd: { type: Function },
8431
+ focus: {},
8432
+ onFocus: { type: Function },
8433
+ onBlur: { type: Function }
8363
8434
  }, {
8364
8435
  as: "div",
8365
8436
  asChild: false,
@@ -8578,13 +8649,6 @@ function usePopLayout(props) {
8578
8649
  styles
8579
8650
  };
8580
8651
  }
8581
- function requestIdleCallback$1(callback) {
8582
- if (typeof requestIdleCallback$1 !== "undefined") {
8583
- requestIdleCallback$1(callback);
8584
- } else {
8585
- setTimeout(callback, 50);
8586
- }
8587
- }
8588
8652
  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
8589
8653
  ...{
8590
8654
  name: "AnimatePresence",
@@ -8646,7 +8710,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
8646
8710
  if (!styles.has(state2)) {
8647
8711
  state2.willUpdate("done");
8648
8712
  } else {
8649
- requestIdleCallback$1(() => {
8713
+ frame.render(() => {
8650
8714
  removePopStyle(state2);
8651
8715
  });
8652
8716
  }
@@ -8891,7 +8955,7 @@ function useSpring(source, config = {}) {
8891
8955
  let latestValue = value.get();
8892
8956
  let latestSetter = () => {
8893
8957
  };
8894
- const stopAnimation = () => {
8958
+ const stopAnimation2 = () => {
8895
8959
  if (activeSpringAnimation) {
8896
8960
  activeSpringAnimation.stop();
8897
8961
  activeSpringAnimation = null;
@@ -8902,7 +8966,7 @@ function useSpring(source, config = {}) {
8902
8966
  if ((animation == null ? void 0 : animation.time) === 0) {
8903
8967
  animation.sample(frameData.delta);
8904
8968
  }
8905
- stopAnimation();
8969
+ stopAnimation2();
8906
8970
  activeSpringAnimation = animateValue({
8907
8971
  keyframes: [value.get(), latestValue],
8908
8972
  velocity: value.getVelocity(),
@@ -8919,7 +8983,7 @@ function useSpring(source, config = {}) {
8919
8983
  latestSetter = set;
8920
8984
  frame.update(startAnimation);
8921
8985
  return value.get();
8922
- }, stopAnimation);
8986
+ }, stopAnimation2);
8923
8987
  }, { immediate: true });
8924
8988
  if (isMotionValue(source)) {
8925
8989
  source.on("change", (v) => {
@@ -8993,7 +9057,6 @@ function useVelocity(value) {
8993
9057
  }
8994
9058
  const components = {
8995
9059
  motion: [
8996
- "motion",
8997
9060
  "Motion",
8998
9061
  "AnimatePresence",
8999
9062
  "LayoutGroup",
@@ -9043,6 +9106,98 @@ function useAnimate() {
9043
9106
  });
9044
9107
  return [domProxy, animate2];
9045
9108
  }
9109
+ function stopAnimation(visualElement) {
9110
+ visualElement.values.forEach((value) => value.stop());
9111
+ }
9112
+ function setStateTarget(state2, definition) {
9113
+ const resolvedVariant = resolveVariant(definition, state2.options.variants, state2.options.custom);
9114
+ Object.entries(resolvedVariant).forEach(([key, value]) => {
9115
+ if (key === "transition")
9116
+ return;
9117
+ state2.target[key] = value;
9118
+ });
9119
+ }
9120
+ function animationControls() {
9121
+ let hasMounted = false;
9122
+ const subscribers = /* @__PURE__ */ new Set();
9123
+ const controls = {
9124
+ subscribe(state2) {
9125
+ subscribers.add(state2);
9126
+ return () => void subscribers.delete(state2);
9127
+ },
9128
+ start(definition, transitionOverride) {
9129
+ heyListen.invariant(
9130
+ hasMounted,
9131
+ "controls.start() should only be called after a component has mounted. Consider calling within a useEffect hook."
9132
+ );
9133
+ const animations = [];
9134
+ subscribers.forEach((state2) => {
9135
+ animations.push(
9136
+ state2.animateUpdates({
9137
+ directAnimate: definition,
9138
+ directTransition: transitionOverride
9139
+ })
9140
+ );
9141
+ });
9142
+ return Promise.all(animations);
9143
+ },
9144
+ set(definition) {
9145
+ heyListen.invariant(
9146
+ hasMounted,
9147
+ "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook."
9148
+ );
9149
+ return subscribers.forEach((state2) => {
9150
+ setValues(state2, definition);
9151
+ });
9152
+ },
9153
+ stop() {
9154
+ subscribers.forEach((state2) => {
9155
+ stopAnimation(state2.visualElement);
9156
+ });
9157
+ },
9158
+ mount() {
9159
+ hasMounted = true;
9160
+ return () => {
9161
+ hasMounted = false;
9162
+ controls.stop();
9163
+ };
9164
+ }
9165
+ };
9166
+ return controls;
9167
+ }
9168
+ function setValues(state2, definition) {
9169
+ if (typeof definition === "string") {
9170
+ return setVariants(state2, [definition]);
9171
+ } else {
9172
+ setStateTarget(state2, definition);
9173
+ setTarget(state2.visualElement, definition);
9174
+ }
9175
+ }
9176
+ function setVariants(state2, variantLabels) {
9177
+ const reversedLabels = [...variantLabels].reverse();
9178
+ const visualElement = state2.visualElement;
9179
+ reversedLabels.forEach((key) => {
9180
+ const variant = visualElement.getVariant(key);
9181
+ variant && setTarget(visualElement, variant);
9182
+ setStateTarget(state2, variant);
9183
+ if (visualElement.variantChildren) {
9184
+ visualElement.variantChildren.forEach((child) => {
9185
+ setVariants(mountedStates.get(child.current), variantLabels);
9186
+ });
9187
+ }
9188
+ });
9189
+ }
9190
+ function useAnimationControls() {
9191
+ const controls = animationControls();
9192
+ let unmount;
9193
+ vue.onMounted(() => {
9194
+ unmount = controls.mount();
9195
+ });
9196
+ vue.onUnmounted(() => {
9197
+ unmount();
9198
+ });
9199
+ return controls;
9200
+ }
9046
9201
  class DragControls {
9047
9202
  constructor() {
9048
9203
  this.componentControls = /* @__PURE__ */ new Set();
@@ -9143,6 +9298,7 @@ exports.sync = sync;
9143
9298
  exports.time = time;
9144
9299
  exports.transform = transform;
9145
9300
  exports.useAnimate = useAnimate;
9301
+ exports.useAnimationControls = useAnimationControls;
9146
9302
  exports.useAnimationFrame = useAnimationFrame;
9147
9303
  exports.useCombineMotionValues = useCombineMotionValues;
9148
9304
  exports.useComputed = useComputed;
@@ -0,0 +1,8 @@
1
+ import { AnimationControls } from '../types';
2
+ import { MotionState } from '../../state';
3
+ import { Options } from '../../types';
4
+ /**
5
+ * @public
6
+ */
7
+ export declare function animationControls(): AnimationControls;
8
+ export declare function setValues(state: MotionState, definition: Options['animate']): void;
@@ -0,0 +1,89 @@
1
+ import { mountedStates } from "../../state/motion-state.mjs";
2
+ import { invariant } from "hey-listen";
3
+ import { setTarget } from "../../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/render/utils/setters.mjs";
4
+ import { resolveVariant } from "../../state/utils.mjs";
5
+ function stopAnimation(visualElement) {
6
+ visualElement.values.forEach((value) => value.stop());
7
+ }
8
+ function setStateTarget(state, definition) {
9
+ const resolvedVariant = resolveVariant(definition, state.options.variants, state.options.custom);
10
+ Object.entries(resolvedVariant).forEach(([key, value]) => {
11
+ if (key === "transition")
12
+ return;
13
+ state.target[key] = value;
14
+ });
15
+ }
16
+ function animationControls() {
17
+ let hasMounted = false;
18
+ const subscribers = /* @__PURE__ */ new Set();
19
+ const controls = {
20
+ subscribe(state) {
21
+ subscribers.add(state);
22
+ return () => void subscribers.delete(state);
23
+ },
24
+ start(definition, transitionOverride) {
25
+ invariant(
26
+ hasMounted,
27
+ "controls.start() should only be called after a component has mounted. Consider calling within a useEffect hook."
28
+ );
29
+ const animations = [];
30
+ subscribers.forEach((state) => {
31
+ animations.push(
32
+ state.animateUpdates({
33
+ directAnimate: definition,
34
+ directTransition: transitionOverride
35
+ })
36
+ );
37
+ });
38
+ return Promise.all(animations);
39
+ },
40
+ set(definition) {
41
+ invariant(
42
+ hasMounted,
43
+ "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook."
44
+ );
45
+ return subscribers.forEach((state) => {
46
+ setValues(state, definition);
47
+ });
48
+ },
49
+ stop() {
50
+ subscribers.forEach((state) => {
51
+ stopAnimation(state.visualElement);
52
+ });
53
+ },
54
+ mount() {
55
+ hasMounted = true;
56
+ return () => {
57
+ hasMounted = false;
58
+ controls.stop();
59
+ };
60
+ }
61
+ };
62
+ return controls;
63
+ }
64
+ function setValues(state, definition) {
65
+ if (typeof definition === "string") {
66
+ return setVariants(state, [definition]);
67
+ } else {
68
+ setStateTarget(state, definition);
69
+ setTarget(state.visualElement, definition);
70
+ }
71
+ }
72
+ function setVariants(state, variantLabels) {
73
+ const reversedLabels = [...variantLabels].reverse();
74
+ const visualElement = state.visualElement;
75
+ reversedLabels.forEach((key) => {
76
+ const variant = visualElement.getVariant(key);
77
+ variant && setTarget(visualElement, variant);
78
+ setStateTarget(state, variant);
79
+ if (visualElement.variantChildren) {
80
+ visualElement.variantChildren.forEach((child) => {
81
+ setVariants(mountedStates.get(child.current), variantLabels);
82
+ });
83
+ }
84
+ });
85
+ }
86
+ export {
87
+ animationControls,
88
+ setValues
89
+ };
@@ -1,5 +1,5 @@
1
1
  import { ref, onUnmounted } from "vue";
2
- import { createScopedAnimate } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/animation/animate/index.mjs";
2
+ import { createScopedAnimate } from "../../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/animation/animate/index.mjs";
3
3
  function useAnimate() {
4
4
  const dom = ref(null);
5
5
  const domProxy = new Proxy(dom, {
@@ -0,0 +1,33 @@
1
+ /**
2
+ * Creates `AnimationControls`, which can be used to manually start, stop
3
+ * and sequence animations on one or more components.
4
+ *
5
+ * The returned `AnimationControls` should be passed to the `animate` property
6
+ * of the components you want to animate.
7
+ *
8
+ * These components can then be animated with the `start` method.
9
+ *
10
+ * ```jsx
11
+ * import { motion, useAnimationControls } from 'motion-v'
12
+ *
13
+ * export default defineComponent({
14
+ * setup() {
15
+ * const controls = useAnimationControls()
16
+ *
17
+ * controls.start({
18
+ * x: 100,
19
+ * transition: { duration: 0.5 },
20
+ * })
21
+ *
22
+ * return () => (
23
+ * <motion.div animate={controls} />
24
+ * )
25
+ * }
26
+ * })
27
+ * ```
28
+ *
29
+ * @returns Animation controller with `start`, `stop`, `set` and `mount` methods
30
+ *
31
+ * @public
32
+ */
33
+ export declare function useAnimationControls(): import('../types').AnimationControls;
@@ -0,0 +1,16 @@
1
+ import { animationControls } from "./animation-controls.mjs";
2
+ import { onMounted, onUnmounted } from "vue";
3
+ function useAnimationControls() {
4
+ const controls = animationControls();
5
+ let unmount;
6
+ onMounted(() => {
7
+ unmount = controls.mount();
8
+ });
9
+ onUnmounted(() => {
10
+ unmount();
11
+ });
12
+ return controls;
13
+ }
14
+ export {
15
+ useAnimationControls
16
+ };
@@ -0,0 +1,2 @@
1
+ export * from './hooks/use-animate';
2
+ export * from './hooks/use-animation-controls';