motion-v 2.2.1 → 2.3.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.
@@ -1,5 +1,6 @@
1
+ import { useMotionConfig } from "../../components/motion-config/context.mjs";
1
2
  import { createScopedAnimate } from "framer-motion/dom";
2
- import { onUnmounted, ref } from "vue";
3
+ import { computed, onUnmounted, ref } from "vue";
3
4
  function useAnimate() {
4
5
  const dom = ref(null);
5
6
  const domProxy = new Proxy(dom, {
@@ -16,7 +17,12 @@ function useAnimate() {
16
17
  }
17
18
  });
18
19
  domProxy.animations = [];
19
- const animate = createScopedAnimate({ scope: domProxy });
20
+ const config = useMotionConfig();
21
+ const scopedAnimate = computed(() => createScopedAnimate({
22
+ scope: domProxy,
23
+ skipAnimations: config.value.skipAnimations
24
+ }));
25
+ const animate = ((...args) => scopedAnimate.value(...args));
20
26
  onUnmounted(() => {
21
27
  domProxy.animations.forEach((animation) => animation.stop());
22
28
  });
@@ -16,6 +16,7 @@ var MotionConfig_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
16
16
  }
17
17
  return defaultConfig.reducedMotion;
18
18
  } },
19
+ skipAnimations: { type: Boolean },
19
20
  nonce: {},
20
21
  inViewOptions: {}
21
22
  },
@@ -25,6 +26,7 @@ var MotionConfig_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
25
26
  provideMotionConfig(computed(() => ({
26
27
  transition: props.transition ?? parentConfig.value.transition,
27
28
  reducedMotion: props.reducedMotion ?? parentConfig.value.reducedMotion,
29
+ skipAnimations: props.skipAnimations ?? parentConfig.value.skipAnimations,
28
30
  nonce: props.nonce ?? parentConfig.value.nonce,
29
31
  inViewOptions: props.inViewOptions ?? parentConfig.value.inViewOptions
30
32
  })));
@@ -11,6 +11,8 @@ export interface MotionConfigState {
11
11
  reduceMotion?: 'user' | 'never' | 'always';
12
12
  /** Controls motion reduction based on user preference or explicit setting */
13
13
  reducedMotion?: 'user' | 'never' | 'always';
14
+ /** Skip all animations in this subtree, applying final values instantly */
15
+ skipAnimations?: boolean;
14
16
  /** Custom nonce for CSP compliance with inline styles */
15
17
  nonce?: string;
16
18
  /** Options for the inView prop */
@@ -18,8 +18,16 @@ export declare const ReorderGroup: <T, K, V>(__VLS_props: NonNullable<Awaited<ty
18
18
  whileFocus?: import('../..').Options["whileFocus"];
19
19
  forwardMotionProps?: boolean;
20
20
  ignoreStrict?: boolean;
21
- transition?: import('../..').$Transition & {
22
- layout?: import('../..').$Transition;
21
+ transition?: ((Omit<import('motion-dom').ValueAnimationTransition<any>, "path"> & {
22
+ path?: import('motion-dom').MotionPath;
23
+ }) | (Omit<import('motion-dom').TransitionWithValueOverrides<any>, "path"> & {
24
+ path?: import('motion-dom').MotionPath;
25
+ })) & {
26
+ layout?: (Omit<import('motion-dom').ValueAnimationTransition<any>, "path"> & {
27
+ path?: import('motion-dom').MotionPath;
28
+ }) | (Omit<import('motion-dom').TransitionWithValueOverrides<any>, "path"> & {
29
+ path?: import('motion-dom').MotionPath;
30
+ });
23
31
  };
24
32
  layout?: boolean | "position" | "size" | "preserve-aspect";
25
33
  layoutId?: string;
@@ -35,6 +43,8 @@ export declare const ReorderGroup: <T, K, V>(__VLS_props: NonNullable<Awaited<ty
35
43
  [k: string]: import('../..').VariantType | ((custom: K) => import('../..').VariantType);
36
44
  };
37
45
  custom?: K;
46
+ inherit?: boolean;
47
+ onUpdate?: (latest: import('motion-dom').ResolvedValues) => void;
38
48
  initial?: import('motion-dom').VariantLabels | import('../..').VariantType | boolean;
39
49
  style?: Partial<{
40
50
  [x: `--${string}`]: string | number | import('motion-dom').MotionValue<any>;
@@ -747,8 +757,6 @@ export declare const ReorderGroup: <T, K, V>(__VLS_props: NonNullable<Awaited<ty
747
757
  inViewOptions?: import('../../features/gestures/in-view/types').InViewOptions & {
748
758
  once?: boolean;
749
759
  };
750
- inherit?: boolean;
751
- onUpdate?: (latest: import('motion-dom').ResolvedValues) => void;
752
760
  onDragTransitionEnd?: () => void;
753
761
  onDragEnd?: (event: PointerEvent, info: import('motion-dom').PanInfo) => void;
754
762
  dragPropagation?: boolean;
@@ -804,8 +812,16 @@ export declare const ReorderItem: <T extends import('../..').ElementType = "li",
804
812
  whileFocus?: import('../..').Options["whileFocus"];
805
813
  forwardMotionProps?: boolean;
806
814
  ignoreStrict?: boolean;
807
- transition?: import('../..').$Transition & {
808
- layout?: import('../..').$Transition;
815
+ transition?: ((Omit<import('motion-dom').ValueAnimationTransition<any>, "path"> & {
816
+ path?: import('motion-dom').MotionPath;
817
+ }) | (Omit<import('motion-dom').TransitionWithValueOverrides<any>, "path"> & {
818
+ path?: import('motion-dom').MotionPath;
819
+ })) & {
820
+ layout?: (Omit<import('motion-dom').ValueAnimationTransition<any>, "path"> & {
821
+ path?: import('motion-dom').MotionPath;
822
+ }) | (Omit<import('motion-dom').TransitionWithValueOverrides<any>, "path"> & {
823
+ path?: import('motion-dom').MotionPath;
824
+ });
809
825
  };
810
826
  layoutId?: string;
811
827
  layoutScroll?: boolean;
@@ -820,6 +836,8 @@ export declare const ReorderItem: <T extends import('../..').ElementType = "li",
820
836
  [k: string]: import('../..').VariantType | ((custom: unknown) => import('../..').VariantType);
821
837
  };
822
838
  custom?: unknown;
839
+ inherit?: boolean;
840
+ onUpdate?: (latest: import('motion-dom').ResolvedValues) => void;
823
841
  initial?: import('motion-dom').VariantLabels | import('../..').VariantType | boolean;
824
842
  style?: Partial<{
825
843
  [x: `--${string}`]: string | number | import('motion-dom').MotionValue<any>;
@@ -1532,8 +1550,6 @@ export declare const ReorderItem: <T extends import('../..').ElementType = "li",
1532
1550
  inViewOptions?: import('../../features/gestures/in-view/types').InViewOptions & {
1533
1551
  once?: boolean;
1534
1552
  };
1535
- inherit?: boolean;
1536
- onUpdate?: (latest: import('motion-dom').ResolvedValues) => void;
1537
1553
  onDragTransitionEnd?: () => void;
1538
1554
  onDragEnd?: (event: PointerEvent, info: import('motion-dom').PanInfo) => void;
1539
1555
  dragPropagation?: boolean;
@@ -1591,8 +1607,16 @@ export declare const Reorder: {
1591
1607
  whileFocus?: import('../..').Options["whileFocus"];
1592
1608
  forwardMotionProps?: boolean;
1593
1609
  ignoreStrict?: boolean;
1594
- transition?: import('../..').$Transition & {
1595
- layout?: import('../..').$Transition;
1610
+ transition?: ((Omit<import('motion-dom').ValueAnimationTransition<any>, "path"> & {
1611
+ path?: import('motion-dom').MotionPath;
1612
+ }) | (Omit<import('motion-dom').TransitionWithValueOverrides<any>, "path"> & {
1613
+ path?: import('motion-dom').MotionPath;
1614
+ })) & {
1615
+ layout?: (Omit<import('motion-dom').ValueAnimationTransition<any>, "path"> & {
1616
+ path?: import('motion-dom').MotionPath;
1617
+ }) | (Omit<import('motion-dom').TransitionWithValueOverrides<any>, "path"> & {
1618
+ path?: import('motion-dom').MotionPath;
1619
+ });
1596
1620
  };
1597
1621
  layout?: boolean | "position" | "size" | "preserve-aspect";
1598
1622
  layoutId?: string;
@@ -1608,6 +1632,8 @@ export declare const Reorder: {
1608
1632
  [k: string]: import('../..').VariantType | ((custom: K) => import('../..').VariantType);
1609
1633
  };
1610
1634
  custom?: K;
1635
+ inherit?: boolean;
1636
+ onUpdate?: (latest: import('motion-dom').ResolvedValues) => void;
1611
1637
  initial?: import('motion-dom').VariantLabels | import('../..').VariantType | boolean;
1612
1638
  style?: Partial<{
1613
1639
  [x: `--${string}`]: string | number | import('motion-dom').MotionValue<any>;
@@ -2320,8 +2346,6 @@ export declare const Reorder: {
2320
2346
  inViewOptions?: import('../../features/gestures/in-view/types').InViewOptions & {
2321
2347
  once?: boolean;
2322
2348
  };
2323
- inherit?: boolean;
2324
- onUpdate?: (latest: import('motion-dom').ResolvedValues) => void;
2325
2349
  onDragTransitionEnd?: () => void;
2326
2350
  onDragEnd?: (event: PointerEvent, info: import('motion-dom').PanInfo) => void;
2327
2351
  dragPropagation?: boolean;
@@ -2377,8 +2401,16 @@ export declare const Reorder: {
2377
2401
  whileFocus?: import('../..').Options["whileFocus"];
2378
2402
  forwardMotionProps?: boolean;
2379
2403
  ignoreStrict?: boolean;
2380
- transition?: import('../..').$Transition & {
2381
- layout?: import('../..').$Transition;
2404
+ transition?: ((Omit<import('motion-dom').ValueAnimationTransition<any>, "path"> & {
2405
+ path?: import('motion-dom').MotionPath;
2406
+ }) | (Omit<import('motion-dom').TransitionWithValueOverrides<any>, "path"> & {
2407
+ path?: import('motion-dom').MotionPath;
2408
+ })) & {
2409
+ layout?: (Omit<import('motion-dom').ValueAnimationTransition<any>, "path"> & {
2410
+ path?: import('motion-dom').MotionPath;
2411
+ }) | (Omit<import('motion-dom').TransitionWithValueOverrides<any>, "path"> & {
2412
+ path?: import('motion-dom').MotionPath;
2413
+ });
2382
2414
  };
2383
2415
  layoutId?: string;
2384
2416
  layoutScroll?: boolean;
@@ -2393,6 +2425,8 @@ export declare const Reorder: {
2393
2425
  [k: string]: import('../..').VariantType | ((custom: unknown) => import('../..').VariantType);
2394
2426
  };
2395
2427
  custom?: unknown;
2428
+ inherit?: boolean;
2429
+ onUpdate?: (latest: import('motion-dom').ResolvedValues) => void;
2396
2430
  initial?: import('motion-dom').VariantLabels | import('../..').VariantType | boolean;
2397
2431
  style?: Partial<{
2398
2432
  [x: `--${string}`]: string | number | import('motion-dom').MotionValue<any>;
@@ -3105,8 +3139,6 @@ export declare const Reorder: {
3105
3139
  inViewOptions?: import('../../features/gestures/in-view/types').InViewOptions & {
3106
3140
  once?: boolean;
3107
3141
  };
3108
- inherit?: boolean;
3109
- onUpdate?: (latest: import('motion-dom').ResolvedValues) => void;
3110
3142
  onDragTransitionEnd?: () => void;
3111
3143
  onDragEnd?: (event: PointerEvent, info: import('motion-dom').PanInfo) => void;
3112
3144
  dragPropagation?: boolean;
@@ -1,5 +1,5 @@
1
1
  export * from 'framer-motion/dom';
2
- export { delay as delayInMs, addScaleCorrector, attachFollow, attachSpring } from 'motion-dom';
2
+ export { delay as delayInMs } from 'motion-dom';
3
3
  export { motionValue as useMotionValue } from 'motion-dom';
4
4
  export * from './components';
5
5
  export { default as LayoutGroup } from './components/LayoutGroup';
package/dist/es/index.mjs CHANGED
@@ -35,6 +35,6 @@ import { useReducedMotion } from "./animation/hooks/use-reduced-motion.mjs";
35
35
  import { useDragControls } from "./features/gestures/drag/use-drag-controls.mjs";
36
36
  import { domAnimation } from "./features/dom-animation.mjs";
37
37
  import { MotionPlugin, createMotionDirective, createPresetDirective, vMotion } from "./directive/index.mjs";
38
- import { addScaleCorrector, attachFollow, attachSpring, delay as delayInMs, motionValue as useMotionValue } from "motion-dom";
38
+ import { delay as delayInMs, motionValue as useMotionValue } from "motion-dom";
39
39
  export * from "framer-motion/dom";
40
- export { AnimatePresence_default as AnimatePresence, LayoutGroup_default as LayoutGroup, LazyMotion, M, Motion, MotionConfig_default as MotionConfig, MotionPlugin, Reorder, ReorderGroup, ReorderItem, RowValue_default as RowValue, ScrollOffset, addScaleCorrector, attachFollow, attachSpring, createContext, createMotionDirective, createPresetDirective, delayInMs, domAnimation, domMax, getContextWindow, injectLayoutGroup, injectMotion, layoutGroupInjectionKey, m, motion, motionGlobalConfig, motionInjectionKey, mountedStates, offsetToViewTimelineRange, provideLayoutGroup, provideMotion, provideMotionConfig, resolveMotionProps, useAnimate, useAnimationControls, useAnimationFrame, useCombineMotionValues, useComputed, useDomRef, useDragControls, useFollowValue, useInView, useLayoutGroup, useMotionConfig, useMotionTemplate, useMotionValue, useMotionValueEvent, usePageInView, useReducedMotion, useScroll, useSpring, useTime, useTransform, useVelocity, vMotion };
40
+ export { AnimatePresence_default as AnimatePresence, LayoutGroup_default as LayoutGroup, LazyMotion, M, Motion, MotionConfig_default as MotionConfig, MotionPlugin, Reorder, ReorderGroup, ReorderItem, RowValue_default as RowValue, ScrollOffset, createContext, createMotionDirective, createPresetDirective, delayInMs, domAnimation, domMax, getContextWindow, injectLayoutGroup, injectMotion, layoutGroupInjectionKey, m, motion, motionGlobalConfig, motionInjectionKey, mountedStates, offsetToViewTimelineRange, provideLayoutGroup, provideMotion, provideMotionConfig, resolveMotionProps, useAnimate, useAnimationControls, useAnimationFrame, useCombineMotionValues, useComputed, useDomRef, useDragControls, useFollowValue, useInView, useLayoutGroup, useMotionConfig, useMotionTemplate, useMotionValue, useMotionValueEvent, usePageInView, useReducedMotion, useScroll, useSpring, useTime, useTransform, useVelocity, vMotion };
@@ -1,4 +1,4 @@
1
- import { DOMKeyframesDefinition, LegacyAnimationControls, MotionValue, ResolvedValues, TransformProperties, VariantLabels } from 'motion-dom';
1
+ import { DOMKeyframesDefinition, LegacyAnimationControls, MotionPath, MotionValue, ResolvedValues, TransformProperties, VariantLabels } from 'motion-dom';
2
2
  import { animate } from 'framer-motion/dom';
3
3
  import { LayoutOptions } from '../features/layout/types';
4
4
  import { DragProps } from '../features/gestures/drag/types';
@@ -29,6 +29,19 @@ export interface DragOptions {
29
29
  dragSnapToOrigin?: boolean;
30
30
  }
31
31
  type TransformPropertiesWithoutTransition = Omit<TransformProperties, 'transition'>;
32
+ /**
33
+ * In motion-dom's `Transition` union, the `path` key carries two meanings:
34
+ * the curved-motion factory (`arc()`, typed `MotionPath`) and the SVG `path`
35
+ * attribute's per-value transition (typed `ValueTransition`, and non-optional
36
+ * in the mapped `SVGPathTransitions`). That collision can obscure the
37
+ * `MotionPath` type at call sites like `transition: { path: arc() }`.
38
+ *
39
+ * This distributive override pins `path` to `MotionPath` on every union member
40
+ * while preserving each member's other fields, so `arc()` is accepted cleanly.
41
+ */
42
+ type WithMotionPath<T> = T extends any ? Omit<T, 'path'> & {
43
+ path?: MotionPath;
44
+ } : never;
32
45
  export type MotionStyleProps = Partial<{
33
46
  [K in keyof Omit<VariantType & TransformPropertiesWithoutTransition, 'attrX' | 'attrY' | 'attrScale'>]: string | number | undefined | MotionValue;
34
47
  }>;
@@ -44,8 +57,8 @@ export interface Options<T = any> extends LayoutOptions, PressProps, HoverProps,
44
57
  inherit?: boolean;
45
58
  style?: MotionStyleProps;
46
59
  transformTemplate?: (transform: TransformProperties, generatedTransform: string) => string;
47
- transition?: $Transition & {
48
- layout?: $Transition;
60
+ transition?: WithMotionPath<$Transition> & {
61
+ layout?: WithMotionPath<$Transition>;
49
62
  };
50
63
  layoutGroup?: LayoutGroupState;
51
64
  motionConfig?: MotionConfigState;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "motion-v",
3
3
  "type": "module",
4
- "version": "2.2.1",
4
+ "version": "2.3.0",
5
5
  "description": "",
6
6
  "author": "",
7
7
  "license": "MIT",
@@ -55,10 +55,10 @@
55
55
  "vue": ">=3.0.0"
56
56
  },
57
57
  "dependencies": {
58
- "framer-motion": "^12.38.0",
58
+ "framer-motion": "^12.40.0",
59
59
  "hey-listen": "^1.0.8",
60
- "motion-dom": "^12.38.0",
61
- "motion-utils": "^12.36.0"
60
+ "motion-dom": "^12.40.0",
61
+ "motion-utils": "^12.39.0"
62
62
  },
63
63
  "scripts": {
64
64
  "dev": "vite build --watch",