motion-v 0.2.5 → 0.3.0

package/dist/es/value/use-scroll.mjs

@@ -0,0 +1,47 @@
+import { onMounted as d, onUnmounted as m, watch as n } from "vue";
+import { warning as p } from "../node_modules/.pnpm/hey-listen@1.0.8/node_modules/hey-listen/dist/hey-listen.es.mjs";
+import { motionValue as l } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/value/index.mjs";
+import { scroll as v } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/render/dom/scroll/index.mjs";
+function i(s, o) {
+  p(
+    !!(!o || o.value),
+    `You have defined a ${s} options but the provided ref is not yet hydrated, probably because it's defined higher up the tree. Try calling useScroll() in the same component as the ref.`
+  );
+}
+function h() {
+  return {
+    scrollX: l(0),
+    scrollY: l(0),
+    scrollXProgress: l(0),
+    scrollYProgress: l(0)
+  };
+}
+function g({
+  container: s,
+  target: o,
+  ...u
+} = {}) {
+  const e = h();
+  let r;
+  const c = () => {
+    r == null || r(), r = v(
+      (Y, { x: t, y: f }) => {
+        e.scrollX.set(t.current), e.scrollXProgress.set(t.progress), e.scrollY.set(f.current), e.scrollYProgress.set(f.progress);
+      },
+      {
+        ...u,
+        container: (s == null ? void 0 : s.value) ?? void 0,
+        target: (o == null ? void 0 : o.value) ?? void 0
+      }
+    );
+  };
+  return d(() => {
+    i("target", o), i("container", s), c();
+  }), m(() => r == null ? void 0 : r()), n(
+    () => [s == null ? void 0 : s.value, o == null ? void 0 : o.value, u.offset],
+    c
+  ), e;
+}
+export {
+  g as useScroll
+};

package/dist/es/value/use-spring.mjs

@@ -0,0 +1,39 @@
+import { watch as c, onBeforeUnmount as g } from "vue";
+import { animateValue as y } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs";
+import { motionValue as d } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/value/index.mjs";
+import { frame as S, frameData as V } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/frameloop/frame.mjs";
+import { isMotionValue as l } from "../utils/motion-value.mjs";
+function p(t) {
+  return typeof t == "number" ? t : parseFloat(t);
+}
+function U(t, r = {}) {
+  let o = null;
+  const n = d(
+    l(t) ? p(t.get()) : t
+  );
+  let a = n.get(), i = () => {
+  };
+  const m = () => {
+    o && (o.stop(), o = null);
+  }, f = () => {
+    const e = o;
+    (e == null ? void 0 : e.time) === 0 && e.sample(V.delta), m(), o = y({
+      keyframes: [n.get(), a],
+      velocity: n.getVelocity(),
+      type: "spring",
+      restDelta: 1e-3,
+      restSpeed: 0.01,
+      ...r,
+      onUpdate: i
+    });
+  };
+  return c(() => JSON.stringify(r), () => {
+    const e = n.attach((s, u) => (a = s, i = u, S.update(f), n.get()), m);
+    g(() => e());
+  }, { immediate: !0 }), l(t) && t.on("change", (e) => {
+    n.set(p(e));
+  }), n;
+}
+export {
+  U as useSpring
+};

package/dist/es/value/use-time.mjs

@@ -0,0 +1,9 @@
+import { useAnimationFrame as e } from "../utils/use-animation-frame.mjs";
+import { motionValue as m } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/value/index.mjs";
+function n() {
+  const o = m(0);
+  return e((t) => o.set(t)), o;
+}
+export {
+  n as useTime
+};

package/dist/es/value/use-transform.mjs

@@ -0,0 +1,25 @@
+import { useComputed as u } from "./use-computed.mjs";
+import { useCombineMotionValues as c } from "./use-combine-values.mjs";
+import { transform as i } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/utils/transform.mjs";
+function b(o, t, r, s) {
+  if (typeof o == "function")
+    return u(o);
+  const e = typeof t == "function" ? t : i(t, r, s);
+  return Array.isArray(o) ? m(
+    o,
+    e
+  ) : m([o], ([f]) => e(f));
+}
+function m(o, t) {
+  const r = [], { value: s, subscribe: e } = c(() => {
+    r.length = 0;
+    const f = o.length;
+    for (let n = 0; n < f; n++)
+      r[n] = o[n].get();
+    return t(r);
+  });
+  return e(o), s;
+}
+export {
+  b as useTransform
+};

package/dist/src/animation/index.d.ts

@@ -0,0 +1 @@
+export * from './use-animate';

package/dist/src/animation/use-animate.d.ts

@@ -0,0 +1,8 @@
+import { AnimationPlaybackControls } from 'framer-motion';
+import { Ref, UnwrapRef } from 'vue';
+import { createScopedAnimate } from 'framer-motion/dom';
+type Scope = Ref<UnwrapRef<Element>> & {
+    animations: AnimationPlaybackControls[];
+};
+export declare function useAnimate<T extends Element = any>(): [Scope, ReturnType<typeof createScopedAnimate>];
+export {};

package/dist/src/components/Motion.d.ts

@@ -1,11 +1,11 @@
 import { IntrinsicElementAttributes } from 'vue';
 import { ElementType, Options, SVGAttributesWithMotionValues, SetMotionValueType } from '../types';
-export interface MotionProps<T extends ElementType = 'div'> extends Options {
+export interface MotionProps<T extends ElementType = 'div', K = unknown> extends Options<K> {
     as?: T;
     asChild?: boolean;
 }
-declare const _default: <T extends ElementType = "div">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{}>>, never>, never> & (Omit<SetMotionValueType<IntrinsicElementAttributes, keyof SVGAttributesWithMotionValues>[T], keyof Options | "asChild"> & MotionProps<T>)> & import('vue').PublicProps;
+declare const _default: <T extends ElementType = "div", K = unknown>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{}>>, never>, never> & (Omit<SetMotionValueType<IntrinsicElementAttributes, keyof SVGAttributesWithMotionValues>[T], "asChild" | keyof Options<any>> & MotionProps<T, K>)> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {

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

@@ -1,4 +1,4 @@
-import { Feature } from './feature';
+import { Feature } from '.';
 export declare class EventFeature extends Feature {
     private handlers;
     mount(): void;

package/dist/src/features/feature-manager.d.ts

@@ -0,0 +1,9 @@
+import { Feature } from '.';
+import { MotionState } from '../state';
+export declare class FeatureManager {
+    features: Feature[];
+    constructor(state: MotionState);
+    mount(): void;
+    unmount(): void;
+    update(): void;
+}

package/dist/src/features/feature.d.ts

@@ -6,10 +6,3 @@ export declare abstract class Feature {
     abstract unmount(): void;
     update(): void;
 }
-export declare class FeatureManager {
-    features: Feature[];
-    constructor(state: MotionState);
-    mount(): void;
-    unmount(): void;
-    update(): void;
-}

package/dist/src/features/index.d.ts

@@ -1,4 +1,5 @@
 export * from './feature';
-export * from './gestures';
 export * from './events';
+export * from './gestures';
 export * from './svg';
+export * from './feature-manager';

package/dist/src/index.d.ts

@@ -4,3 +4,6 @@ export { default as Motion, type MotionProps } from './components/Motion';
 export { default as AnimatePresence, type AnimatePresenceProps } from './components/AnimatePresence';
 export * from './value';
 export * from './constants';
+export type { Variant, Options } from './types';
+export * from './animation';
+export * from './utils';

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

@@ -1,11 +1,10 @@
-import { Options } from '../types';
+import { MotionStateContext, Options } from '../types';
 import { DOMKeyframesDefinition, VisualElement } from 'framer-motion';
 declare const STATE_TYPES: readonly ["initial", "animate", "inView", "hover", "press", "exit", "drag"];
 type StateType = typeof STATE_TYPES[number];
 export declare const mountedStates: WeakMap<Element, MotionState>;
 export declare class MotionState {
     private element;
-    private context;
     private parent?;
     private options;
     private activeStates;
@@ -15,7 +14,8 @@ export declare class MotionState {
     private featureManager;
     visualElement: VisualElement;
     constructor(options: Options, parent?: MotionState);
-    private initContext;
+    private _context;
+    get context(): MotionStateContext;
     private initTarget;
     get initial(): string | boolean | import('../types').Variant;
     mount(element: HTMLElement): void;
@@ -25,7 +25,7 @@ export declare class MotionState {
     animateUpdates(): Generator<any, void, unknown>;
     isMounted(): boolean;
     getDepth(): number;
-    getOptions(): Options;
+    getOptions(): Options<any>;
     getElement(): HTMLElement;
     getTarget(): DOMKeyframesDefinition;
 }

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

@@ -1,7 +1,7 @@
 import { Options } from '../types';
 import { DynamicAnimationOptions, Variant } from 'framer-motion';
 import { IntrinsicElementAttributes } from 'vue';
-export declare function resolveVariant(definition?: Options['initial'], variants?: Options['variants']): Variant | undefined;
+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;

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

@@ -28,7 +28,8 @@ export type MotionStyle = Partial<{
     [K in keyof Variant]: Variant[K] | MotionValue;
 }>;
 export type ElementType = keyof IntrinsicElementAttributes;
-export interface Options {
+export interface Options<T = any> {
+    custom?: T;
     as?: ElementType;
     inViewOptions?: InViewOptions & {
         once?: boolean;
@@ -40,7 +41,7 @@ export interface Options {
     animate?: string | Variant;
     exit?: string | Variant;
     variants?: {
-        [k: string]: Variant;
+        [k: string]: Variant | ((custom: T) => Variant);
     };
     style?: MotionStyle;
     transformTemplate?: (transform: TransformProperties, generatedTransform: string) => string;

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

@@ -1,2 +1,4 @@
 export * from './createContext';
 export * from './motion-value';
+export * from './use-in-view';
+export * from './use-animation-frame';

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

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

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

@@ -0,0 +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>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-v",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "description": "",
   "author": "",
   "license": "MIT",
@@ -18,8 +18,8 @@
   "exports": {
     ".": {
       "types": "./dist/src/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.umd.cjs"
+      "import": "./dist/es/index.mjs",
+      "require": "./dist/cjs/index.js"
     },
     "./nuxt": {
       "import": {
@@ -32,14 +32,14 @@
       }
     }
   },
-  "main": "./dist/index.umd.cjs",
-  "module": "./dist/index.js",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/es/index.mjs",
   "types": "./dist/src/index.d.ts",
   "typesVersions": {
     "*": {
       "*": [
         "./dist/*/index.d.ts",
-        "./dist/index.d.ts"
+        "./dist/src/index.d.ts"
       ],
       "nuxt": [
         "./dist/nuxt/index.d.mts",
@@ -66,7 +66,7 @@
   },
   "scripts": {
     "dev": "vite build --watch",
-    "build": "vite build",
+    "build": "rm -rf dist && vite build",
     "test": "vitest",
     "coverage": "vitest run --coverage",
     "pub:release": "pnpm publish --access public"