motion-v 1.0.0-alpha.4 → 1.0.0-beta.0

package/dist/es/components/animate-presence/AnimatePresence.d.ts

@@ -16,8 +16,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
     initial: boolean;
     anchorX: string;
 }>>>, {
-    mode: "wait" | "popLayout" | "sync";
     initial: boolean;
+    mode: "wait" | "popLayout" | "sync";
     anchorX: "left" | "right";
 }, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/dist/es/components/animate-presence/use-pop-layout.mjs

@@ -1,5 +1,6 @@
 import { useMotionConfig } from "../motion-config/context.mjs";
-import { frame } from "motion-dom";
+import { frame } from "../../external/.pnpm/motion-dom@12.5.0/external/motion-dom/dist/es/frameloop/frame.mjs";
+import "../../external/.pnpm/motion-utils@12.5.0/external/motion-utils/dist/es/errors.mjs";
 function usePopLayout(props) {
   const styles = /* @__PURE__ */ new WeakMap();
   const config = useMotionConfig();

package/dist/es/components/motion/props.d.ts

@@ -218,10 +218,4 @@ export declare const MotionComponentProps: {
     onPanEnd: {
         type: FunctionConstructor;
     };
-    onFocus: {
-        type: FunctionConstructor;
-    };
-    onBlur: {
-        type: FunctionConstructor;
-    };
 };

package/dist/es/components/motion/props.mjs

@@ -84,9 +84,7 @@ const MotionComponentProps = {
   "onPanSessionStart": { type: Function },
   "onPanStart": { type: Function },
   "onPan": { type: Function },
-  "onPanEnd": { type: Function },
-  "onFocus": { type: Function },
-  "onBlur": { type: Function }
+  "onPanEnd": { type: Function }
 };
 export {
   MotionComponentProps

package/dist/es/components/motion/use-motion-state.d.ts

@@ -13,7 +13,7 @@ export declare function useMotionState(props: MotionProps): {
             once?: boolean;
         };
         animatePresenceContext: import('../presence').PresenceContext;
-        initial: false | import('../..').Variant | import('../..').VariantLabels;
+        initial: false | import('../..').VariantLabels | import('../..').Variant;
         as?: "div";
         asChild?: boolean;
         hover?: import('../..').Options["hover"];
@@ -39,15 +39,43 @@ export declare function useMotionState(props: MotionProps): {
             [x: number]: string | number | import('motion-dom').MotionValue<any>;
             [x: `--${string}`]: string | number | import('motion-dom').MotionValue<any>;
             string?: string | number | import('motion-dom').MotionValue<any>;
-            readonly length?: string | number | import('motion-dom').MotionValue<any>;
-            readonly parentRule?: string | number | import('motion-dom').MotionValue<any>;
+            end?: string | number | import('motion-dom').MotionValue<any>;
+            x?: string | number | import('motion-dom').MotionValue<any>;
+            y?: string | number | import('motion-dom').MotionValue<any>;
+            position?: string | number | import('motion-dom').MotionValue<any>;
+            page?: string | number | import('motion-dom').MotionValue<any>;
             [Symbol.iterator]?: string | number | import('motion-dom').MotionValue<any>;
+            top?: string | number | import('motion-dom').MotionValue<any>;
+            right?: string | number | import('motion-dom').MotionValue<any>;
+            bottom?: string | number | import('motion-dom').MotionValue<any>;
+            left?: string | number | import('motion-dom').MotionValue<any>;
+            readonly length?: string | number | import('motion-dom').MotionValue<any>;
+            filter?: string | number | import('motion-dom').MotionValue<any>;
+            fill?: string | number | import('motion-dom').MotionValue<any>;
+            values?: string | number | import('motion-dom').MotionValue<any>;
+            all?: string | number | import('motion-dom').MotionValue<any>;
+            clear?: string | number | import('motion-dom').MotionValue<any>;
+            willChange?: string | number | import('motion-dom').MotionValue<any>;
+            rotate?: string | number | import('motion-dom').MotionValue<any>;
+            scale?: string | number | import('motion-dom').MotionValue<any>;
+            perspective?: string | number | import('motion-dom').MotionValue<any>;
+            transition?: string | number | import('motion-dom').MotionValue<any>;
+            translate?: string | number | import('motion-dom').MotionValue<any>;
+            from?: string | number | import('motion-dom').MotionValue<any>;
+            resize?: string | number | import('motion-dom').MotionValue<any>;
+            transform?: string | number | import('motion-dom').MotionValue<any>;
+            offset?: string | number | import('motion-dom').MotionValue<any>;
+            clipPath?: string | number | import('motion-dom').MotionValue<any>;
+            marker?: string | number | import('motion-dom').MotionValue<any>;
+            mask?: string | number | import('motion-dom').MotionValue<any>;
+            path?: string | number | import('motion-dom').MotionValue<any>;
+            direction?: string | number | import('motion-dom').MotionValue<any>;
+            z?: string | number | import('motion-dom').MotionValue<any>;
             accentColor?: string | number | import('motion-dom').MotionValue<any>;
             alignContent?: string | number | import('motion-dom').MotionValue<any>;
             alignItems?: string | number | import('motion-dom').MotionValue<any>;
             alignSelf?: string | number | import('motion-dom').MotionValue<any>;
             alignmentBaseline?: string | number | import('motion-dom').MotionValue<any>;
-            all?: string | number | import('motion-dom').MotionValue<any>;
             animation?: string | number | import('motion-dom').MotionValue<any>;
             animationComposition?: string | number | import('motion-dom').MotionValue<any>;
             animationDelay?: string | number | import('motion-dom').MotionValue<any>;
@@ -138,7 +166,6 @@ export declare function useMotionState(props: MotionProps): {
             borderTopStyle?: string | number | import('motion-dom').MotionValue<any>;
             borderTopWidth?: string | number | import('motion-dom').MotionValue<any>;
             borderWidth?: string | number | import('motion-dom').MotionValue<any>;
-            bottom?: string | number | import('motion-dom').MotionValue<any>;
             boxShadow?: string | number | import('motion-dom').MotionValue<any>;
             boxSizing?: string | number | import('motion-dom').MotionValue<any>;
             breakAfter?: string | number | import('motion-dom').MotionValue<any>;
@@ -146,9 +173,7 @@ export declare function useMotionState(props: MotionProps): {
             breakInside?: string | number | import('motion-dom').MotionValue<any>;
             captionSide?: string | number | import('motion-dom').MotionValue<any>;
             caretColor?: string | number | import('motion-dom').MotionValue<any>;
-            clear?: string | number | import('motion-dom').MotionValue<any>;
             clip?: string | number | import('motion-dom').MotionValue<any>;
-            clipPath?: string | number | import('motion-dom').MotionValue<any>;
             clipRule?: string | number | import('motion-dom').MotionValue<any>;
             color?: string | number | import('motion-dom').MotionValue<any>;
             colorInterpolation?: string | number | import('motion-dom').MotionValue<any>;
@@ -184,14 +209,11 @@ export declare function useMotionState(props: MotionProps): {
             cx?: string | number | import('motion-dom').MotionValue<any>;
             cy?: string | number | import('motion-dom').MotionValue<any>;
             d?: string | number | import('motion-dom').MotionValue<any>;
-            direction?: string | number | import('motion-dom').MotionValue<any>;
             display?: string | number | import('motion-dom').MotionValue<any>;
             dominantBaseline?: string | number | import('motion-dom').MotionValue<any>;
             emptyCells?: string | number | import('motion-dom').MotionValue<any>;
-            fill?: string | number | import('motion-dom').MotionValue<any>;
             fillOpacity?: string | number | import('motion-dom').MotionValue<any>;
             fillRule?: string | number | import('motion-dom').MotionValue<any>;
-            filter?: string | number | import('motion-dom').MotionValue<any>;
             flex?: string | number | import('motion-dom').MotionValue<any>;
             flexBasis?: string | number | import('motion-dom').MotionValue<any>;
             flexDirection?: string | number | import('motion-dom').MotionValue<any>;
@@ -262,7 +284,6 @@ export declare function useMotionState(props: MotionProps): {
             justifyContent?: string | number | import('motion-dom').MotionValue<any>;
             justifyItems?: string | number | import('motion-dom').MotionValue<any>;
             justifySelf?: string | number | import('motion-dom').MotionValue<any>;
-            left?: string | number | import('motion-dom').MotionValue<any>;
             letterSpacing?: string | number | import('motion-dom').MotionValue<any>;
             lightingColor?: string | number | import('motion-dom').MotionValue<any>;
             lineBreak?: string | number | import('motion-dom').MotionValue<any>;
@@ -282,11 +303,9 @@ export declare function useMotionState(props: MotionProps): {
             marginLeft?: string | number | import('motion-dom').MotionValue<any>;
             marginRight?: string | number | import('motion-dom').MotionValue<any>;
             marginTop?: string | number | import('motion-dom').MotionValue<any>;
-            marker?: string | number | import('motion-dom').MotionValue<any>;
             markerEnd?: string | number | import('motion-dom').MotionValue<any>;
             markerMid?: string | number | import('motion-dom').MotionValue<any>;
             markerStart?: string | number | import('motion-dom').MotionValue<any>;
-            mask?: string | number | import('motion-dom').MotionValue<any>;
             maskClip?: string | number | import('motion-dom').MotionValue<any>;
             maskComposite?: string | number | import('motion-dom').MotionValue<any>;
             maskImage?: string | number | import('motion-dom').MotionValue<any>;
@@ -309,7 +328,6 @@ export declare function useMotionState(props: MotionProps): {
             mixBlendMode?: string | number | import('motion-dom').MotionValue<any>;
             objectFit?: string | number | import('motion-dom').MotionValue<any>;
             objectPosition?: string | number | import('motion-dom').MotionValue<any>;
-            offset?: string | number | import('motion-dom').MotionValue<any>;
             offsetAnchor?: string | number | import('motion-dom').MotionValue<any>;
             offsetDistance?: string | number | import('motion-dom').MotionValue<any>;
             offsetPath?: string | number | import('motion-dom').MotionValue<any>;
@@ -345,29 +363,23 @@ export declare function useMotionState(props: MotionProps): {
             paddingLeft?: string | number | import('motion-dom').MotionValue<any>;
             paddingRight?: string | number | import('motion-dom').MotionValue<any>;
             paddingTop?: string | number | import('motion-dom').MotionValue<any>;
-            page?: string | number | import('motion-dom').MotionValue<any>;
             pageBreakAfter?: string | number | import('motion-dom').MotionValue<any>;
             pageBreakBefore?: string | number | import('motion-dom').MotionValue<any>;
             pageBreakInside?: string | number | import('motion-dom').MotionValue<any>;
             paintOrder?: string | number | import('motion-dom').MotionValue<any>;
-            perspective?: string | number | import('motion-dom').MotionValue<any>;
+            readonly parentRule?: string | number | import('motion-dom').MotionValue<any>;
             perspectiveOrigin?: string | number | import('motion-dom').MotionValue<any>;
             placeContent?: string | number | import('motion-dom').MotionValue<any>;
             placeItems?: string | number | import('motion-dom').MotionValue<any>;
             placeSelf?: string | number | import('motion-dom').MotionValue<any>;
             pointerEvents?: string | number | import('motion-dom').MotionValue<any>;
-            position?: string | number | import('motion-dom').MotionValue<any>;
             printColorAdjust?: string | number | import('motion-dom').MotionValue<any>;
             quotes?: string | number | import('motion-dom').MotionValue<any>;
             r?: string | number | import('motion-dom').MotionValue<any>;
-            resize?: string | number | import('motion-dom').MotionValue<any>;
-            right?: string | number | import('motion-dom').MotionValue<any>;
-            rotate?: string | number | import('motion-dom').MotionValue<any>;
             rowGap?: string | number | import('motion-dom').MotionValue<any>;
             rubyPosition?: string | number | import('motion-dom').MotionValue<any>;
             rx?: string | number | import('motion-dom').MotionValue<any>;
             ry?: string | number | import('motion-dom').MotionValue<any>;
-            scale?: string | number | import('motion-dom').MotionValue<any>;
             scrollBehavior?: string | number | import('motion-dom').MotionValue<any>;
             scrollMargin?: string | number | import('motion-dom').MotionValue<any>;
             scrollMarginBlock?: string | number | import('motion-dom').MotionValue<any>;
@@ -438,19 +450,15 @@ export declare function useMotionState(props: MotionProps): {
             textWrap?: string | number | import('motion-dom').MotionValue<any>;
             textWrapMode?: string | number | import('motion-dom').MotionValue<any>;
             textWrapStyle?: string | number | import('motion-dom').MotionValue<any>;
-            top?: string | number | import('motion-dom').MotionValue<any>;
             touchAction?: string | number | import('motion-dom').MotionValue<any>;
-            transform?: string | number | import('motion-dom').MotionValue<any>;
             transformBox?: string | number | import('motion-dom').MotionValue<any>;
             transformOrigin?: string | number | import('motion-dom').MotionValue<any>;
             transformStyle?: string | number | import('motion-dom').MotionValue<any>;
-            transition?: string | number | import('motion-dom').MotionValue<any>;
             transitionBehavior?: string | number | import('motion-dom').MotionValue<any>;
             transitionDelay?: string | number | import('motion-dom').MotionValue<any>;
             transitionDuration?: string | number | import('motion-dom').MotionValue<any>;
             transitionProperty?: string | number | import('motion-dom').MotionValue<any>;
             transitionTimingFunction?: string | number | import('motion-dom').MotionValue<any>;
-            translate?: string | number | import('motion-dom').MotionValue<any>;
             unicodeBidi?: string | number | import('motion-dom').MotionValue<any>;
             userSelect?: string | number | import('motion-dom').MotionValue<any>;
             vectorEffect?: string | number | import('motion-dom').MotionValue<any>;
@@ -530,13 +538,10 @@ export declare function useMotionState(props: MotionProps): {
             whiteSpaceCollapse?: string | number | import('motion-dom').MotionValue<any>;
             widows?: string | number | import('motion-dom').MotionValue<any>;
             width?: string | number | import('motion-dom').MotionValue<any>;
-            willChange?: string | number | import('motion-dom').MotionValue<any>;
             wordBreak?: string | number | import('motion-dom').MotionValue<any>;
             wordSpacing?: string | number | import('motion-dom').MotionValue<any>;
             wordWrap?: string | number | import('motion-dom').MotionValue<any>;
             writingMode?: string | number | import('motion-dom').MotionValue<any>;
-            x?: string | number | import('motion-dom').MotionValue<any>;
-            y?: string | number | import('motion-dom').MotionValue<any>;
             zIndex?: string | number | import('motion-dom').MotionValue<any>;
             zoom?: string | number | import('motion-dom').MotionValue<any>;
             getPropertyPriority?: string | number | import('motion-dom').MotionValue<any>;
@@ -544,23 +549,14 @@ export declare function useMotionState(props: MotionProps): {
             item?: string | number | import('motion-dom').MotionValue<any>;
             removeProperty?: string | number | import('motion-dom').MotionValue<any>;
             setProperty?: string | number | import('motion-dom').MotionValue<any>;
-            z?: string | number | import('motion-dom').MotionValue<any>;
-            translateX?: string | number | import('motion-dom').MotionValue<any>;
-            translateY?: string | number | import('motion-dom').MotionValue<any>;
-            translateZ?: string | number | import('motion-dom').MotionValue<any>;
             rotateX?: string | number | import('motion-dom').MotionValue<any>;
             rotateY?: string | number | import('motion-dom').MotionValue<any>;
             rotateZ?: string | number | import('motion-dom').MotionValue<any>;
             scaleX?: string | number | import('motion-dom').MotionValue<any>;
             scaleY?: string | number | import('motion-dom').MotionValue<any>;
             scaleZ?: string | number | import('motion-dom').MotionValue<any>;
-            skew?: string | number | import('motion-dom').MotionValue<any>;
             skewX?: string | number | import('motion-dom').MotionValue<any>;
             skewY?: string | number | import('motion-dom').MotionValue<any>;
-            originX?: string | number | import('motion-dom').MotionValue<any>;
-            originY?: string | number | import('motion-dom').MotionValue<any>;
-            originZ?: string | number | import('motion-dom').MotionValue<any>;
-            transformPerspective?: string | number | import('motion-dom').MotionValue<any>;
             accentHeight?: string | number | import('motion-dom').MotionValue<any>;
             accumulate?: string | number | import('motion-dom').MotionValue<any>;
             additive?: string | number | import('motion-dom').MotionValue<any>;
@@ -596,7 +592,6 @@ export declare function useMotionState(props: MotionProps): {
             edgeMode?: string | number | import('motion-dom').MotionValue<any>;
             elevation?: string | number | import('motion-dom').MotionValue<any>;
             enableBackground?: string | number | import('motion-dom').MotionValue<any>;
-            end?: string | number | import('motion-dom').MotionValue<any>;
             exponent?: string | number | import('motion-dom').MotionValue<any>;
             externalResourcesRequired?: string | number | import('motion-dom').MotionValue<any>;
             filterRes?: string | number | import('motion-dom').MotionValue<any>;
@@ -604,7 +599,6 @@ export declare function useMotionState(props: MotionProps): {
             focusable?: string | number | import('motion-dom').MotionValue<any>;
             format?: string | number | import('motion-dom').MotionValue<any>;
             fr?: string | number | import('motion-dom').MotionValue<any>;
-            from?: string | number | import('motion-dom').MotionValue<any>;
             fx?: string | number | import('motion-dom').MotionValue<any>;
             fy?: string | number | import('motion-dom').MotionValue<any>;
             g1?: string | number | import('motion-dom').MotionValue<any>;
@@ -652,7 +646,6 @@ export declare function useMotionState(props: MotionProps): {
             overlinePosition?: string | number | import('motion-dom').MotionValue<any>;
             overlineThickness?: string | number | import('motion-dom').MotionValue<any>;
             panose1?: string | number | import('motion-dom').MotionValue<any>;
-            path?: string | number | import('motion-dom').MotionValue<any>;
             pathLength?: string | number | import('motion-dom').MotionValue<any>;
             patternContentUnits?: string | number | import('motion-dom').MotionValue<any>;
             patternTransform?: string | number | import('motion-dom').MotionValue<any>;
@@ -703,7 +696,6 @@ export declare function useMotionState(props: MotionProps): {
             unicodeRange?: string | number | import('motion-dom').MotionValue<any>;
             unitsPerEm?: string | number | import('motion-dom').MotionValue<any>;
             vAlphabetic?: string | number | import('motion-dom').MotionValue<any>;
-            values?: string | number | import('motion-dom').MotionValue<any>;
             version?: string | number | import('motion-dom').MotionValue<any>;
             vertAdvY?: string | number | import('motion-dom').MotionValue<any>;
             vertOriginX?: string | number | import('motion-dom').MotionValue<any>;
@@ -736,6 +728,14 @@ export declare function useMotionState(props: MotionProps): {
             zoomAndPan?: string | number | import('motion-dom').MotionValue<any>;
             pathOffset?: string | number | import('motion-dom').MotionValue<any>;
             pathSpacing?: string | number | import('motion-dom').MotionValue<any>;
+            translateX?: string | number | import('motion-dom').MotionValue<any>;
+            translateY?: string | number | import('motion-dom').MotionValue<any>;
+            translateZ?: string | number | import('motion-dom').MotionValue<any>;
+            skew?: string | number | import('motion-dom').MotionValue<any>;
+            originX?: string | number | import('motion-dom').MotionValue<any>;
+            originY?: string | number | import('motion-dom').MotionValue<any>;
+            originZ?: string | number | import('motion-dom').MotionValue<any>;
+            transformPerspective?: string | number | import('motion-dom').MotionValue<any>;
         }>;
         transformTemplate?: (transform: import('motion-dom').TransformProperties, generatedTransform: string) => string;
         onAnimationComplete?: (definition: import('../..').Options["animate"]) => void;

package/dist/es/components/motion/use-motion-state.mjs

@@ -66,12 +66,12 @@ function useMotionState(props) {
       ...isSVG ? {} : ((_a2 = state.visualElement) == null ? void 0 : _a2.latestValues) || state.baseTarget
     };
     if (isSVG) {
-      const { attributes, style } = convertSvgStyleToAttributes({
+      const { attributes, style: style2 } = convertSvgStyleToAttributes({
         ...state.isMounted() ? state.target : state.baseTarget,
         ...styleProps
       });
       Object.assign(attrsProps, attributes);
-      styleProps = style;
+      styleProps = style2;
     }
     if (props.drag && props.dragListener !== false) {
       Object.assign(styleProps, {
@@ -81,7 +81,9 @@ function useMotionState(props) {
         touchAction: props.drag === true ? "none" : `pan-${props.drag === "x" ? "y" : "x"}`
       });
     }
-    attrsProps.style = createStyles(styleProps);
+    const style = createStyles(styleProps);
+    if (style)
+      attrsProps.style = style;
     return attrsProps;
   }
   const instance = getCurrentInstance().proxy;

package/dist/es/components/motion/utils.mjs

@@ -80,8 +80,10 @@ function createMotionComponent(component, options = {}) {
         const isComponent = typeof props.as === "object";
         if ((!isComponent || props.asChild) && el) {
           const { style } = getAttrs();
-          for (const [key, val] of Object.entries(style)) {
-            el.style[key] = val;
+          if (style) {
+            for (const [key, val] of Object.entries(style)) {
+              el.style[key] = val;
+            }
           }
         }
       }