motion-v 0.6.1 → 0.7.0

package/dist/src/components/{Primitive.d.ts → motion/Primitive.d.ts}

@@ -13,7 +13,7 @@ export interface PrimitiveProps {
      */
     as?: AsTag | Component;
 }
-export declare const Primitive: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const Primitive: import('vue').DefineComponent<{
     asChild: {
         type: BooleanConstructor;
         default: boolean;
@@ -26,9 +26,9 @@ export declare const Primitive: import('vue').DefineComponent<import('vue').Extr
         type: FunctionConstructor;
         default: () => {};
     };
-}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
-}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}>, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     asChild: {
         type: BooleanConstructor;
         default: boolean;
@@ -41,8 +41,8 @@ export declare const Primitive: import('vue').DefineComponent<import('vue').Extr
         type: FunctionConstructor;
         default: () => {};
     };
-}>> & Readonly<{}>, {
+}>>, {
     as: AsTag;
     asChild: boolean;
     getProps: Function;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}>;

package/dist/src/components/{Slot.d.ts → motion/Slot.d.ts}

@@ -2,4 +2,4 @@ export declare const Slot: import('vue').DefineComponent<{}, () => import('vue')
     [key: string]: any;
 }> | import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
-}>[], {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}>[], {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;

package/dist/src/components/motion/index.d.ts

@@ -0,0 +1,2 @@
+export { motion } from './NameSpace';
+export { default as Motion, type MotionProps } from './Motion';

package/dist/src/components/motion-config/MotionConfig.d.ts

@@ -6,13 +6,34 @@ declare function __VLS_template(): {
     attrs: Partial<{}>;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<import('./types').MotionConfigState, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('./types').MotionConfigState> & Readonly<{}>, {
+declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<import('./types').MotionConfigState>, {
     reduceMotion: "user" | "never" | "always";
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<import('./types').MotionConfigState>, {
+    reduceMotion: "user" | "never" | "always";
+}>>>, {
+    reduceMotion: "user" | "never" | "always";
+}, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/src/features/gestures/drag/VisualElementDragControls.d.ts

@@ -1,4 +1,4 @@
-import { MotionProps } from '../../../components/Motion';
+import { MotionProps } from '../../../components/motion/Motion';
 import { Options } from '../../../types';
 import { Point, VisualElement } from 'framer-motion';
 export declare const elementDragControls: WeakMap<VisualElement<unknown, unknown, {}>, VisualElementDragControls>;

package/dist/src/features/gestures/in-view/index.d.ts

@@ -3,5 +3,7 @@ import { Feature } from '../..';
 export declare class InViewGesture extends Feature {
     isActive(): boolean;
     constructor(state: MotionState);
+    startObserver(): void;
     mount(): void;
+    update(): void;
 }

package/dist/src/features/layout/projection.d.ts

@@ -3,6 +3,7 @@ export declare class ProjectionFeature extends Feature {
     constructor(state: any);
     initProjection(): void;
     beforeMount(): void;
+    setOptions(): void;
     update(): void;
     mount(): void;
 }

package/dist/src/index.d.ts

@@ -1,6 +1,5 @@
 export * from 'framer-motion/dom';
 export { motionValue as useMotionValue } from 'framer-motion/dom';
-export { default as Motion, type MotionProps } from './components/Motion';
 export * from './components';
 export { default as LayoutGroup } from './components/LayoutGroup';
 export { useLayoutGroup } from './components/use-layout-group';
@@ -11,4 +10,5 @@ export * from './constants';
 export * from './types';
 export * from './animation';
 export * from './utils';
+export { useDragControls } from './features/gestures/drag/use-drag-controls';
 export type { PanInfo } from './features/gestures/pan/PanSession';

package/dist/src/shared/test.d.ts

@@ -0,0 +1 @@
+export declare const delay: (ms: number) => Promise<unknown>;

package/dist/src/state/animate-variants-children.d.ts

@@ -1,9 +1,9 @@
 import { MotionState } from './motion-state';
-import { AnimateOptions, AnimationFactory } from '../types';
+import { $Transition, AnimationFactory } from '../types';
 export type ActiveVariant = {
     [key: string]: {
         definition: string;
-        transition: AnimateOptions;
+        transition: $Transition;
     };
 };
 export declare function animateVariantsChildren(state: MotionState, activeState: ActiveVariant, isFirstAnimate?: boolean): {

package/dist/src/state/motion-state.d.ts

@@ -3,6 +3,9 @@ import { DOMKeyframesDefinition, VisualElement } from 'framer-motion';
 declare const STATE_TYPES: readonly ["initial", "animate", "inView", "hover", "press", "whileDrag", "exit"];
 type StateType = typeof STATE_TYPES[number];
 export declare const mountedStates: WeakMap<Element, MotionState>;
+/**
+ * Core class that manages animation state and orchestrates animations
+ */
 export declare class MotionState {
     readonly id: string;
     element: HTMLElement | null;
@@ -30,7 +33,7 @@ export declare class MotionState {
     beforeUpdate(): void;
     update(options: Options, notAnimate?: boolean): void;
     setActive(name: StateType, isActive: boolean, isAnimate?: boolean): void;
-    animateUpdates(isInitial?: boolean): void;
+    animateUpdates(controlActiveState?: typeof this.activeStates, controlDelay?: number): () => Promise<any>;
     isMounted(): boolean;
     getOptions(): Options<any>;
     willUpdate(label: string): void;

package/dist/src/state/utils.d.ts

@@ -1,12 +1,12 @@
-import { Options } from '../types';
-import { AnimationOptions, Variant } from 'framer-motion';
+import { $Transition, Options } from '../types';
+import { Variant } from 'framer-motion';
 import { IntrinsicElementAttributes } from 'vue';
 export declare function resolveVariant(definition?: Options['initial'], variants?: Options['variants'], custom?: Options['custom']): Variant | undefined;
 export declare function hasChanged(a: any, b: any): boolean;
 export declare function shallowCompare(next: any[], prev: any[]): boolean;
 export declare function addUniqueItem<T>(array: T[], item: T): void;
 export declare function removeItem<T>(array: T[], item: T): void;
-export declare function getOptions(options: AnimationOptions, key: string): AnimationOptions;
+export declare function getOptions(options: $Transition, key: string): $Transition;
 export declare function isCssVar(name: string): boolean;
 export declare const noopReturn: <V>(v: V) => V;
 export declare function isNumber(value: any): boolean;

package/dist/src/types/framer-motion.d.ts

@@ -1,3 +1,4 @@
+import { Inertia, Keyframes, None, Repeat, Spring, Tween } from 'framer-motion';
 export interface FrameData {
     delta: number;
     timestamp: number;
@@ -24,3 +25,19 @@ export interface ScrollInfoOptions {
     axis?: 'x' | 'y';
     offset?: ScrollOffset;
 }
+export interface Orchestration {
+    delay?: number;
+    when?: false | 'beforeChildren' | 'afterChildren' | string;
+    delayChildren?: number;
+    staggerChildren?: number;
+    staggerDirection?: number;
+}
+type PermissiveTransitionDefinition = {
+    [key: string]: any;
+};
+type TransitionDefinition = Tween | Spring | Keyframes | Inertia | None | PermissiveTransitionDefinition;
+type TransitionMap = Orchestration & TransitionDefinition & {
+    [key: string]: TransitionDefinition;
+};
+export type $Transition = (Orchestration & Repeat & TransitionDefinition) | (Orchestration & Repeat & TransitionMap);
+export {};

package/dist/src/types/state.d.ts

@@ -1,4 +1,4 @@
-import { AnimationOptions, DOMKeyframesDefinition, ResolvedValues, Target, TargetAndTransition } from 'framer-motion';
+import { DOMKeyframesDefinition, ResolvedValues, Target, TargetAndTransition } from 'framer-motion';
 import { MotionValue, TransformProperties, animate } from 'framer-motion/dom';
 import { IntrinsicElementAttributes } from 'vue';
 import { LayoutOptions } from '../features/layout/types';
@@ -9,19 +9,11 @@ import { InViewProps } from '../features/gestures/in-view/types';
 import { LayoutGroupState } from '../components/context';
 import { PanProps } from '../features/gestures/pan/types';
 import { MotionConfigState } from '../components/motion-config/types';
+import { $Transition } from './framer-motion';
 type AnimationPlaybackControls = ReturnType<typeof animate>;
-export interface Orchestration {
-    delay?: number;
-    when?: false | 'beforeChildren' | 'afterChildren' | string;
-    delayChildren?: number;
-    staggerChildren?: number;
-    staggerDirection?: number;
-}
-export interface AnimateOptions extends Omit<Orchestration, 'delay'>, AnimationOptions {
-}
 export type TargetResolver = (custom: any, current: Target, velocity: Target) => TargetAndTransition | string;
 export interface Variant extends DOMKeyframesDefinition {
-    transition?: AnimateOptions;
+    transition?: $Transition;
 }
 export type VariantLabels = string | Variant;
 interface BoundingBox {
@@ -49,12 +41,12 @@ export interface Options<T = any> extends LayoutOptions, PressProps, HoverProps,
     };
     style?: MotionStyle;
     transformTemplate?: (transform: TransformProperties, generatedTransform: string) => string;
-    transition?: AnimateOptions & {
-        layout?: AnimationOptions;
+    transition?: $Transition & {
+        layout?: $Transition;
     };
     layoutGroup?: LayoutGroupState;
     motionConfig?: MotionConfigState;
-    onAnimationComplete?: (definition: AnimateOptions) => void;
+    onAnimationComplete?: (definition: Options['animate']) => void;
     onUpdate?: (latest: ResolvedValues) => void;
 }
 export interface MotionStateContext {

package/dist/src/utils/use-dom-ref.d.ts

@@ -1,2 +1 @@
-import { Ref } from 'vue';
-export declare function useDomRef<T extends Element = any>(): Ref<T>;
+export declare function useDomRef<T extends Element = any>(): import('vue').Ref<import('vue').UnwrapRef<T>>;

package/dist/src/utils/use-in-view.d.ts

@@ -1,3 +1,3 @@
 import { Ref } from 'vue';
 import { Options } from '../types/state';
-export declare function useInView<T extends Element = any>(domRef: Ref<T>, options?: Options['inViewOptions'] | Ref<Options['inViewOptions']>): Ref<boolean, boolean>;
+export declare function useInView<T extends Element = any>(domRef: Ref<T>, options?: Options['inViewOptions'] | Ref<Options['inViewOptions']>): Ref<boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-v",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "",
   "author": "",
   "license": "MIT",
@@ -65,7 +65,6 @@
     "@vitejs/plugin-vue-jsx": "^4.0.1",
     "@vitest/coverage-v8": "^1.4.0",
     "@vue/test-utils": "^2.4.5",
-    "framer-motion": "^11.15.0",
     "happy-dom": "^16.0.1",
     "jsdom": "^24.0.0",
     "vite": "^5.4.8",

package/dist/es/external/.pnpm/@vueuse_shared@12.0.0_typescript@5.7.2/external/@vueuse/shared/index.mjs

@@ -1,6 +0,0 @@
-import "vue";
-typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
-const isDef = (val) => typeof val !== "undefined";
-export {
-  isDef
-};

package/dist/es/state/animate-variants-children.mjs

@@ -1,74 +0,0 @@
-import { style } from "./style.mjs";
-import { transformResetValue } from "./transform.mjs";
-import { resolveVariant, hasChanged, getOptions } from "./utils.mjs";
-import { animate } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/animation/animate/index.mjs";
-function animateVariantsChildren(state, activeState, isFirstAnimate = false) {
-  const variantChildren = state.visualElement.variantChildren;
-  if (!(variantChildren == null ? void 0 : variantChildren.size)) {
-    return {
-      animations: [],
-      getAnimations: () => Promise.resolve()
-    };
-  }
-  const animationFactories = [];
-  Array.from(variantChildren).forEach((child, index) => {
-    var _a;
-    const prevTarget = isFirstAnimate ? child.state.baseTarget : child.state.target;
-    const childState = child.state;
-    childState.target = {};
-    for (const name in activeState) {
-      if (name === "initial" && !isFirstAnimate) {
-        continue;
-      }
-      const { definition, transition } = activeState[name];
-      const { staggerChildren = 0, staggerDirection = 1, delayChildren = 0 } = transition || {};
-      const maxStaggerDuration = (variantChildren.size - 1) * staggerChildren;
-      const generateStaggerDuration = staggerDirection === 1 ? (i = 0) => i * staggerChildren : (i = 0) => maxStaggerDuration - i * staggerChildren;
-      const variant = resolveVariant(
-        definition,
-        child.props.variants,
-        child.props.custom
-      );
-      const animationOptions = {};
-      const allTarget = { ...prevTarget, ...variant };
-      for (const key in allTarget) {
-        if (key === "transition")
-          continue;
-        childState.target[key] = allTarget[key];
-        if (childState.target[key] === void 0) {
-          childState.target[key] = childState.baseTarget[key];
-        }
-        if (hasChanged(prevTarget[key], childState.target[key])) {
-          (_a = childState.baseTarget)[key] ?? (_a[key] = style.get(child.current, key));
-          animationOptions[key] = getOptions(
-            Object.assign({}, transition, allTarget.transition, child.props.transition),
-            key
-          );
-          const keyValue = childState.target[key] === "none" ? transformResetValue[key] : childState.target[key];
-          animationFactories.push(
-            () => {
-              var _a2;
-              return animate(
-                child.current,
-                {
-                  [key]: keyValue
-                },
-                {
-                  ...animationOptions[key] || {},
-                  delay: (((_a2 = animationOptions[key]) == null ? void 0 : _a2.delay) || 0) + delayChildren + generateStaggerDuration(index)
-                }
-              );
-            }
-          );
-        }
-      }
-    }
-  });
-  return {
-    animations: animationFactories,
-    getAnimations: () => Promise.all(animationFactories.map((factory) => factory()))
-  };
-}
-export {
-  animateVariantsChildren
-};

package/dist/src/utils/events.d.ts

@@ -1,2 +0,0 @@
-import { MotionEventNames } from '../types';
-export declare function dispatchPointerEvent(element: HTMLElement, name: MotionEventNames, event: any): void;