motion-v 0.8.1 → 0.9.0

package/dist/cjs/index.js

@@ -8244,6 +8244,9 @@ class MotionState {
   // Initialize animation target values
   initTarget(initialVariantSource) {
     this.baseTarget = resolveVariant(this.options[initialVariantSource] || this.context[initialVariantSource], this.options.variants) || {};
+    for (const key in this.baseTarget) {
+      this.visualElement.setStaticValue(key, this.baseTarget[key]);
+    }
     this.target = {};
   }
   // Get initial animation state
@@ -8280,15 +8283,6 @@ class MotionState {
     }
     this.visualElement.state = this;
     this.updateOptions();
-    if (typeof this.initial === "object") {
-      for (const key in this.initial) {
-        this.visualElement.setStaticValue(key, this.initial[key]);
-      }
-    } else if (typeof this.initial === "string" && this.options.variants) {
-      for (const key in this.options.variants[this.initial]) {
-        this.visualElement.setStaticValue(key, this.options.variants[this.initial][key]);
-      }
-    }
     this.featureManager.mount();
     if (!notAnimate && this.options.animate) {
       this.animateUpdates();
@@ -8384,7 +8378,7 @@ const [injectMotionConfig, provideMotionConfig] = createContext("MotionConfig");
 function useMotionConfig() {
   return injectMotionConfig(vue.computed(() => defaultConfig));
 }
-const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "Motion",
     inheritAttrs: false
@@ -8412,6 +8406,10 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     layoutRoot: { type: Boolean },
     "data-framer-portal-id": {},
     crossfade: { type: Boolean },
+    onBeforeLayoutMeasure: { type: Function },
+    onLayoutMeasure: { type: Function },
+    onLayoutAnimationStart: { type: Function },
+    onLayoutAnimationComplete: { type: Function },
     globalPressTarget: { type: Boolean },
     press: {},
     onPressStart: { type: Function },
@@ -8573,7 +8571,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const componentCache = /* @__PURE__ */ new Map();
-const motion = new Proxy(_sfc_main$3, {
+const motion = new Proxy(_sfc_main$5, {
   get(target, prop) {
     if (typeof prop === "symbol")
       return target[prop];
@@ -8585,7 +8583,7 @@ const motion = new Proxy(_sfc_main$3, {
           name: `motion.${component.$name}`,
           setup(_, { attrs, slots }) {
             return () => {
-              return vue.h(_sfc_main$3, {
+              return vue.h(_sfc_main$5, {
                 ...attrs,
                 as: component,
                 asChild: false
@@ -8601,7 +8599,7 @@ const motion = new Proxy(_sfc_main$3, {
         name: `motion.${prop}`,
         setup(_, { attrs, slots }) {
           return () => {
-            return vue.h(_sfc_main$3, {
+            return vue.h(_sfc_main$5, {
               ...attrs,
               as: prop,
               asChild: false
@@ -8665,7 +8663,7 @@ function usePopLayout(props) {
     styles
   };
 }
-const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "AnimatePresence",
     inheritAttrs: true
@@ -8763,7 +8761,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "MotionConfig",
     inheritAttrs: false
@@ -8788,82 +8786,163 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-function useForceUpdate() {
-  const key = vue.ref(0);
-  function forceUpdate() {
-    key.value++;
-  }
-  return [forceUpdate, key];
-}
-function notify(node) {
-  return !node.isLayoutDirty && node.willUpdate(false);
-}
-function nodeGroup() {
-  const nodes = /* @__PURE__ */ new Set();
-  const subscriptions = /* @__PURE__ */ new WeakMap();
-  const dirtyAll = () => nodes.forEach(notify);
-  return {
-    add: (node) => {
-      nodes.add(node);
-      subscriptions.set(
-        node,
-        node.addEventListener("willUpdate", dirtyAll)
-      );
-    },
-    remove: (node) => {
-      nodes.delete(node);
-      const unsubscribe = subscriptions.get(node);
-      if (unsubscribe) {
-        unsubscribe();
-        subscriptions.delete(node);
-      }
-    },
-    dirty: dirtyAll
-  };
-}
-function useLayoutGroupProvider(props) {
-  const parentGroup = injectLayoutGroup(null);
-  const [forceRender, key] = useForceUpdate();
-  const context = {
-    id: getGroupId(props, parentGroup),
-    group: getGroup(props, parentGroup),
-    forceRender,
-    key
-  };
-  provideLayoutGroup(context);
-  return context;
-}
-function useLayoutGroup() {
-  const { forceRender } = injectLayoutGroup({ forceRender: () => {
-  } });
-  return { forceRender };
-}
-function getGroupId(props, parentGroup) {
-  const shouldInherit = props.inherit === true || props.inherit === "id";
-  const parentId = parentGroup == null ? void 0 : parentGroup.id;
-  if (shouldInherit && parentId) {
-    return props.id ? `${parentId}-${props.id}` : parentId;
-  }
-  return props.id;
-}
-function getGroup(props, parentGroup) {
-  const shouldInherit = props.inherit === true || props.inherit === "group";
-  return shouldInherit ? (parentGroup == null ? void 0 : parentGroup.group) || nodeGroup() : nodeGroup();
+const [useReorderContext, reorderContextProvider] = createContext("ReorderContext");
+function compareMin(a, b) {
+  return a.layout.min - b.layout.min;
+}
+function getValue(item) {
+  return item.value;
+}
+function checkReorder(order2, value, offset, velocity) {
+  if (!velocity)
+    return order2;
+  const index = order2.findIndex((item2) => item2.value === value);
+  if (index === -1)
+    return order2;
+  const nextOffset = velocity > 0 ? 1 : -1;
+  const nextItem = order2[index + nextOffset];
+  if (!nextItem)
+    return order2;
+  const item = order2[index];
+  const nextLayout = nextItem.layout;
+  const nextItemCenter = mixNumber(nextLayout.min, nextLayout.max, 0.5);
+  if (nextOffset === 1 && item.layout.max + offset > nextItemCenter || nextOffset === -1 && item.layout.min + offset < nextItemCenter) {
+    return moveItem(order2, index, index + nextOffset);
+  }
+  return order2;
+}
+function moveItem([...arr], fromIndex, toIndex) {
+  const startIndex = fromIndex < 0 ? arr.length + fromIndex : fromIndex;
+  if (startIndex >= 0 && startIndex < arr.length) {
+    const endIndex = toIndex < 0 ? arr.length + toIndex : toIndex;
+    const [item] = arr.splice(fromIndex, 1);
+    arr.splice(endIndex, 0, item);
+  }
+  return arr;
+}
+function useDefaultMotionValue(value, defaultValue = 0) {
+  return isMotionValue(value) ? value : motionValue(defaultValue);
 }
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  __name: "LayoutGroup",
+const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "ReorderGroup",
+    inheritAttrs: false
+  },
+  __name: "Group",
   props: {
-    id: {},
-    inherit: { type: [Boolean, String] }
+    axis: { default: "y" },
+    "onUpdate:values": {},
+    values: {},
+    as: { default: "ul" },
+    asChild: { type: Boolean },
+    whileDrag: {},
+    custom: {},
+    initial: { type: [String, Object, Boolean] },
+    animate: {},
+    exit: {},
+    variants: {},
+    style: {},
+    transformTemplate: {},
+    transition: {},
+    layoutGroup: {},
+    motionConfig: {},
+    onAnimationComplete: {},
+    onUpdate: {},
+    layout: { type: [Boolean, String] },
+    layoutId: {},
+    layoutScroll: { type: Boolean },
+    layoutRoot: { type: Boolean },
+    "data-framer-portal-id": {},
+    crossfade: { type: Boolean },
+    onBeforeLayoutMeasure: {},
+    onLayoutMeasure: {},
+    onLayoutAnimationStart: {},
+    onLayoutAnimationComplete: {},
+    globalPressTarget: { type: Boolean },
+    press: {},
+    onPressStart: {},
+    onPress: {},
+    onPressCancel: {},
+    hover: {},
+    onHoverStart: {},
+    onHoverEnd: {},
+    inViewOptions: {},
+    inView: {},
+    onViewportEnter: {},
+    onViewportLeave: {},
+    drag: { type: [Boolean, String] },
+    dragSnapToOrigin: { type: Boolean },
+    dragDirectionLock: { type: Boolean },
+    dragPropagation: { type: Boolean },
+    dragConstraints: { type: [Boolean, Object] },
+    dragElastic: { type: [Boolean, Number, Object] },
+    dragMomentum: { type: Boolean },
+    dragTransition: {},
+    dragListener: { type: Boolean },
+    dragControls: {},
+    onDragStart: {},
+    onDragEnd: {},
+    onDrag: {},
+    onDirectionLock: {},
+    onDragTransitionEnd: {},
+    onMeasureDragConstraints: {},
+    onPanSessionStart: {},
+    onPanStart: {},
+    onPan: {},
+    onPanEnd: {},
+    focus: {},
+    onFocus: {},
+    onBlur: {}
   },
   setup(__props) {
     const props = __props;
-    const { forceRender, key } = useLayoutGroupProvider(props);
+    const { axis } = vue.toRefs(props);
+    const order2 = [];
+    let isReordering = false;
+    function warning2() {
+      heyListen.invariant(Boolean(props.values), "Reorder.Group must be provided a values prop");
+    }
+    vue.onUpdated(() => {
+      isReordering = false;
+    });
+    reorderContextProvider({
+      axis,
+      registerItem: (value, layout) => {
+        const idx = order2.findIndex((entry) => value === entry.value);
+        if (idx !== -1) {
+          order2[idx].layout = layout[axis.value];
+        } else {
+          order2.push({ value, layout: layout[axis.value] });
+        }
+        order2.sort(compareMin);
+      },
+      updateOrder: (item, offset, velocity) => {
+        if (isReordering)
+          return;
+        const newOrder = checkReorder(order2, item, offset, velocity);
+        if (order2 !== newOrder) {
+          isReordering = true;
+          props["onUpdate:values"](
+            newOrder.map(getValue).filter((value) => props.values.includes(value))
+          );
+        }
+      }
+    });
+    const attrs = vue.useAttrs();
+    function bindProps() {
+      return {
+        ...attrs,
+        ...props
+      };
+    }
     return (_ctx, _cache) => {
-      return vue.renderSlot(_ctx.$slots, "default", {
-        renderKey: vue.unref(key),
-        forceRender: vue.unref(forceRender)
-      });
+      return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$5), vue.normalizeProps(vue.guardReactiveProps(bindProps())), {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default"),
+          vue.createTextVNode(" " + vue.toDisplayString(warning2()), 1)
+        ]),
+        _: 3
+      }, 16);
     };
   }
 });
@@ -9067,12 +9146,221 @@ function useVelocity(value) {
   });
   return velocity;
 }
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "ReorderItem",
+    inheritAttrs: false
+  },
+  __name: "Item",
+  props: {
+    value: {},
+    layout: { type: [Boolean, String], default: true },
+    as: { default: "li" },
+    asChild: { type: Boolean },
+    whileDrag: { default: void 0 },
+    custom: {},
+    initial: { type: [String, Object, Boolean], default: void 0 },
+    animate: { default: void 0 },
+    exit: {},
+    variants: {},
+    style: {},
+    transformTemplate: {},
+    transition: {},
+    layoutGroup: {},
+    motionConfig: {},
+    onAnimationComplete: {},
+    onUpdate: {},
+    layoutId: { default: void 0 },
+    layoutScroll: { type: Boolean, default: false },
+    layoutRoot: { type: Boolean, default: false },
+    "data-framer-portal-id": {},
+    crossfade: { type: Boolean, default: true },
+    onBeforeLayoutMeasure: {},
+    onLayoutMeasure: {},
+    onLayoutAnimationStart: {},
+    onLayoutAnimationComplete: {},
+    globalPressTarget: { type: Boolean },
+    press: {},
+    onPressStart: {},
+    onPress: {},
+    onPressCancel: {},
+    hover: { default: void 0 },
+    onHoverStart: {},
+    onHoverEnd: {},
+    inViewOptions: {},
+    inView: { default: void 0 },
+    onViewportEnter: {},
+    onViewportLeave: {},
+    drag: { type: [Boolean, String] },
+    dragSnapToOrigin: { type: Boolean },
+    dragDirectionLock: { type: Boolean },
+    dragPropagation: { type: Boolean },
+    dragConstraints: { type: [Boolean, Object] },
+    dragElastic: { type: [Boolean, Number, Object], default: 0.5 },
+    dragMomentum: { type: Boolean, default: true },
+    dragTransition: {},
+    dragListener: { type: Boolean, default: true },
+    dragControls: {},
+    onDragStart: {},
+    onDragEnd: {},
+    onDrag: {},
+    onDirectionLock: {},
+    onDragTransitionEnd: {},
+    onMeasureDragConstraints: {},
+    onPanSessionStart: {},
+    onPanStart: {},
+    onPan: {},
+    onPanEnd: {},
+    focus: {},
+    onFocus: {},
+    onBlur: {}
+  },
+  setup(__props) {
+    var _a, _b;
+    const props = __props;
+    const { style: style2 } = vue.toRefs(props);
+    const context = useReorderContext(null);
+    const point2 = {
+      x: useDefaultMotionValue((_a = style2.value) == null ? void 0 : _a.x),
+      y: useDefaultMotionValue((_b = style2.value) == null ? void 0 : _b.y)
+    };
+    const zIndex = useTransform([point2.x, point2.y], ([latestX, latestY]) => latestX || latestY ? 1 : "unset");
+    function warning2() {
+      heyListen.invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
+    }
+    const { axis, registerItem, updateOrder } = context || {};
+    const attrs = vue.useAttrs();
+    function bindProps() {
+      return {
+        ...attrs,
+        ...props,
+        style: {
+          ...style2.value,
+          x: point2.x,
+          y: point2.y,
+          zIndex
+        }
+      };
+    }
+    const drag = vue.computed(() => {
+      if (props.drag) {
+        return props.drag;
+      }
+      return axis.value;
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$5), vue.mergeProps(bindProps(), {
+        drag: drag.value,
+        "drag-snap-to-origin": true,
+        onDrag: _cache[0] || (_cache[0] = (event, gesturePoint) => {
+          const { velocity } = gesturePoint;
+          velocity[vue.unref(axis)] && vue.unref(updateOrder)(_ctx.value, point2[vue.unref(axis)].get(), velocity[vue.unref(axis)]);
+          _ctx.onDrag && _ctx.onDrag(event, gesturePoint);
+        }),
+        onLayoutMeasure: _cache[1] || (_cache[1] = (measured) => vue.unref(registerItem)(_ctx.value, measured))
+      }), {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default"),
+          vue.createTextVNode(" " + vue.toDisplayString(warning2()), 1)
+        ]),
+        _: 3
+      }, 16, ["drag"]);
+    };
+  }
+});
+const ReorderGroup = _sfc_main$2;
+const ReorderItem = _sfc_main$1;
+const Reorder = {
+  Group: ReorderGroup,
+  Item: ReorderItem
+};
+function useForceUpdate() {
+  const key = vue.ref(0);
+  function forceUpdate() {
+    key.value++;
+  }
+  return [forceUpdate, key];
+}
+function notify(node) {
+  return !node.isLayoutDirty && node.willUpdate(false);
+}
+function nodeGroup() {
+  const nodes = /* @__PURE__ */ new Set();
+  const subscriptions = /* @__PURE__ */ new WeakMap();
+  const dirtyAll = () => nodes.forEach(notify);
+  return {
+    add: (node) => {
+      nodes.add(node);
+      subscriptions.set(
+        node,
+        node.addEventListener("willUpdate", dirtyAll)
+      );
+    },
+    remove: (node) => {
+      nodes.delete(node);
+      const unsubscribe = subscriptions.get(node);
+      if (unsubscribe) {
+        unsubscribe();
+        subscriptions.delete(node);
+      }
+    },
+    dirty: dirtyAll
+  };
+}
+function useLayoutGroupProvider(props) {
+  const parentGroup = injectLayoutGroup(null);
+  const [forceRender, key] = useForceUpdate();
+  const context = {
+    id: getGroupId(props, parentGroup),
+    group: getGroup(props, parentGroup),
+    forceRender,
+    key
+  };
+  provideLayoutGroup(context);
+  return context;
+}
+function useLayoutGroup() {
+  const { forceRender } = injectLayoutGroup({ forceRender: () => {
+  } });
+  return { forceRender };
+}
+function getGroupId(props, parentGroup) {
+  const shouldInherit = props.inherit === true || props.inherit === "id";
+  const parentId = parentGroup == null ? void 0 : parentGroup.id;
+  if (shouldInherit && parentId) {
+    return props.id ? `${parentId}-${props.id}` : parentId;
+  }
+  return props.id;
+}
+function getGroup(props, parentGroup) {
+  const shouldInherit = props.inherit === true || props.inherit === "group";
+  return shouldInherit ? (parentGroup == null ? void 0 : parentGroup.group) || nodeGroup() : nodeGroup();
+}
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "LayoutGroup",
+  props: {
+    id: {},
+    inherit: { type: [Boolean, String] }
+  },
+  setup(__props) {
+    const props = __props;
+    const { forceRender, key } = useLayoutGroupProvider(props);
+    return (_ctx, _cache) => {
+      return vue.renderSlot(_ctx.$slots, "default", {
+        renderKey: vue.unref(key),
+        forceRender: vue.unref(forceRender)
+      });
+    };
+  }
+});
 const components = {
   motion: [
     "Motion",
     "AnimatePresence",
     "LayoutGroup",
-    "MotionConfig"
+    "MotionConfig",
+    "ReorderGroup",
+    "ReorderItem"
   ]
 };
 const utilities = {
@@ -9249,11 +9537,14 @@ class DragControls {
 }
 const createDragControls = () => new DragControls();
 const useDragControls = createDragControls;
-exports.AnimatePresence = _sfc_main$2;
+exports.AnimatePresence = _sfc_main$4;
 exports.LayoutGroup = _sfc_main;
-exports.Motion = _sfc_main$3;
-exports.MotionConfig = _sfc_main$1;
+exports.Motion = _sfc_main$5;
+exports.MotionConfig = _sfc_main$3;
 exports.MotionValue = MotionValue;
+exports.Reorder = Reorder;
+exports.ReorderGroup = ReorderGroup;
+exports.ReorderItem = ReorderItem;
 exports.animate = animate;
 exports.animateMini = animateMini;
 exports.anticipate = anticipate;

package/dist/es/components/context.d.ts

@@ -6,7 +6,6 @@ export interface NodeGroup {
     add: (node: IProjectionNode) => void;
     remove: (node: IProjectionNode) => void;
     dirty: VoidFunction;
-    didUpdate: VoidFunction;
 }
 export interface LayoutGroupState {
     id?: string;

package/dist/es/components/index.d.ts

@@ -1,3 +1,4 @@
 export { Motion, motion, type MotionProps } from './motion';
 export * from './animate-presence';
 export * from './motion-config';
+export * from './reorder';

package/dist/es/components/motion/Motion.vue.mjs

@@ -35,6 +35,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     layoutRoot: { type: Boolean },
     "data-framer-portal-id": {},
     crossfade: { type: Boolean },
+    onBeforeLayoutMeasure: { type: Function },
+    onLayoutMeasure: { type: Function },
+    onLayoutAnimationStart: { type: Function },
+    onLayoutAnimationComplete: { type: Function },
     globalPressTarget: { type: Boolean },
     press: {},
     onPressStart: { type: Function },

package/dist/es/components/reorder/Group.d.ts

@@ -0,0 +1,71 @@
+import { MotionProps } from '../motion';
+import { ElementType } from '../../types';
+export interface GroupProps<T extends ElementType, K = unknown, V = unknown> extends MotionProps<T, K> {
+    /**
+     * The axis to reorder along. By default, items will be draggable on this axis.
+     * To make draggable on both axes, set `<Reorder.Item drag />`
+     *
+     * @public
+     */
+    'axis'?: 'x' | 'y';
+    /**
+     * A callback to fire with the new value order. For instance, if the values
+     * are provided as a state from `useState`, this could be the set state function.
+     *
+     * @public
+     */
+    'onUpdate:values'?: (newOrder: V[]) => void;
+    /**
+     * The latest values state.
+     *
+     * ```jsx
+     * function Component() {
+     *   const [items, setItems] = useState([0, 1, 2])
+     *
+     *   return (
+     *     <Reorder.Group values={items} onReorder={setItems}>
+     *         {items.map((item) => <Reorder.Item key={item} value={item} />)}
+     *     </Reorder.Group>
+     *   )
+     * }
+     * ```
+     *
+     * @public
+     */
+    'values': V[];
+}
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<GroupProps<keyof import('vue').IntrinsicElementAttributes, unknown, unknown>>, {
+    as: string;
+    axis: string;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GroupProps<keyof import('vue').IntrinsicElementAttributes, unknown, unknown>>, {
+    as: string;
+    axis: string;
+}>>>, {
+    as: keyof import('vue').IntrinsicElementAttributes;
+    axis: "x" | "y";
+}, {}>, {
+    default?(_: {}): any;
+}>;
+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/es/components/reorder/Group.vue.mjs

@@ -0,0 +1,131 @@
+import { defineComponent, toRefs, onUpdated, useAttrs, openBlock, createBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { invariant } from "hey-listen";
+import { reorderContextProvider } from "./context.mjs";
+import { compareMin, checkReorder, getValue } from "./utils.mjs";
+import _sfc_main$1 from "../motion/Motion.vue.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "ReorderGroup",
+    inheritAttrs: false
+  },
+  __name: "Group",
+  props: {
+    axis: { default: "y" },
+    "onUpdate:values": {},
+    values: {},
+    as: { default: "ul" },
+    asChild: { type: Boolean },
+    whileDrag: {},
+    custom: {},
+    initial: { type: [String, Object, Boolean] },
+    animate: {},
+    exit: {},
+    variants: {},
+    style: {},
+    transformTemplate: {},
+    transition: {},
+    layoutGroup: {},
+    motionConfig: {},
+    onAnimationComplete: {},
+    onUpdate: {},
+    layout: { type: [Boolean, String] },
+    layoutId: {},
+    layoutScroll: { type: Boolean },
+    layoutRoot: { type: Boolean },
+    "data-framer-portal-id": {},
+    crossfade: { type: Boolean },
+    onBeforeLayoutMeasure: {},
+    onLayoutMeasure: {},
+    onLayoutAnimationStart: {},
+    onLayoutAnimationComplete: {},
+    globalPressTarget: { type: Boolean },
+    press: {},
+    onPressStart: {},
+    onPress: {},
+    onPressCancel: {},
+    hover: {},
+    onHoverStart: {},
+    onHoverEnd: {},
+    inViewOptions: {},
+    inView: {},
+    onViewportEnter: {},
+    onViewportLeave: {},
+    drag: { type: [Boolean, String] },
+    dragSnapToOrigin: { type: Boolean },
+    dragDirectionLock: { type: Boolean },
+    dragPropagation: { type: Boolean },
+    dragConstraints: { type: [Boolean, Object] },
+    dragElastic: { type: [Boolean, Number, Object] },
+    dragMomentum: { type: Boolean },
+    dragTransition: {},
+    dragListener: { type: Boolean },
+    dragControls: {},
+    onDragStart: {},
+    onDragEnd: {},
+    onDrag: {},
+    onDirectionLock: {},
+    onDragTransitionEnd: {},
+    onMeasureDragConstraints: {},
+    onPanSessionStart: {},
+    onPanStart: {},
+    onPan: {},
+    onPanEnd: {},
+    focus: {},
+    onFocus: {},
+    onBlur: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { axis } = toRefs(props);
+    const order = [];
+    let isReordering = false;
+    function warning() {
+      invariant(Boolean(props.values), "Reorder.Group must be provided a values prop");
+    }
+    onUpdated(() => {
+      isReordering = false;
+    });
+    reorderContextProvider({
+      axis,
+      registerItem: (value, layout) => {
+        const idx = order.findIndex((entry) => value === entry.value);
+        if (idx !== -1) {
+          order[idx].layout = layout[axis.value];
+        } else {
+          order.push({ value, layout: layout[axis.value] });
+        }
+        order.sort(compareMin);
+      },
+      updateOrder: (item, offset, velocity) => {
+        if (isReordering)
+          return;
+        const newOrder = checkReorder(order, item, offset, velocity);
+        if (order !== newOrder) {
+          isReordering = true;
+          props["onUpdate:values"](
+            newOrder.map(getValue).filter((value) => props.values.includes(value))
+          );
+        }
+      }
+    });
+    const attrs = useAttrs();
+    function bindProps() {
+      return {
+        ...attrs,
+        ...props
+      };
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$1), normalizeProps(guardReactiveProps(bindProps())), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default"),
+          createTextVNode(" " + toDisplayString(warning()), 1)
+        ]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/es/components/reorder/Group.vue2.mjs

@@ -0,0 +1,4 @@
+import _sfc_main from "./Group.vue.mjs";
+export {
+  _sfc_main as default
+};

package/dist/es/components/reorder/Item.d.ts

@@ -0,0 +1,88 @@
+import { MotionProps } from '../motion';
+import { ElementType } from '../../types';
+export interface GroupItemProps<T extends ElementType, K = unknown, V = unknown> extends MotionProps<T, K> {
+    /**
+     * The value in the list that this component represents.
+     *
+     * @public
+     */
+    value: V;
+    /**
+     * A subset of layout options primarily used to disable layout="size"
+     *
+     * @public
+     * @default true
+     */
+    layout?: true | 'position';
+}
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<GroupItemProps<keyof import('vue').IntrinsicElementAttributes, unknown, unknown>>, {
+    layout: boolean;
+    as: ElementType;
+    initial: any;
+    animate: any;
+    hover: any;
+    inView: any;
+    layoutId: any;
+    layoutScroll: boolean;
+    layoutRoot: boolean;
+    dragListener: boolean;
+    dragElastic: number;
+    dragMomentum: boolean;
+    whileDrag: any;
+    crossfade: boolean;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GroupItemProps<keyof import('vue').IntrinsicElementAttributes, unknown, unknown>>, {
+    layout: boolean;
+    as: ElementType;
+    initial: any;
+    animate: any;
+    hover: any;
+    inView: any;
+    layoutId: any;
+    layoutScroll: boolean;
+    layoutRoot: boolean;
+    dragListener: boolean;
+    dragElastic: number;
+    dragMomentum: boolean;
+    whileDrag: any;
+    crossfade: boolean;
+}>>>, {
+    layout: true | "position";
+    layoutId: string;
+    layoutScroll: boolean;
+    layoutRoot: boolean;
+    crossfade: boolean;
+    initial: string | import('../../types').Variant | boolean;
+    animate: string | import('../../types').Variant | import('../../animation/types').AnimationControls;
+    inView: string | import('../../types').Variant;
+    hover: string | import('../../types').Variant;
+    whileDrag: import('../../types').Options["whileDrag"];
+    dragElastic: number;
+    dragMomentum: boolean;
+    dragListener: boolean;
+    as: keyof import('vue').IntrinsicElementAttributes;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+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/es/components/reorder/Item.vue.mjs

@@ -0,0 +1,131 @@
+import { defineComponent, toRefs, useAttrs, computed, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { useReorderContext } from "./context.mjs";
+import { useDefaultMotionValue } from "./utils.mjs";
+import { invariant } from "hey-listen";
+import { useTransform } from "../../value/use-transform.mjs";
+import _sfc_main$1 from "../motion/Motion.vue.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "ReorderItem",
+    inheritAttrs: false
+  },
+  __name: "Item",
+  props: {
+    value: {},
+    layout: { type: [Boolean, String], default: true },
+    as: { default: "li" },
+    asChild: { type: Boolean },
+    whileDrag: { default: void 0 },
+    custom: {},
+    initial: { type: [String, Object, Boolean], default: void 0 },
+    animate: { default: void 0 },
+    exit: {},
+    variants: {},
+    style: {},
+    transformTemplate: {},
+    transition: {},
+    layoutGroup: {},
+    motionConfig: {},
+    onAnimationComplete: {},
+    onUpdate: {},
+    layoutId: { default: void 0 },
+    layoutScroll: { type: Boolean, default: false },
+    layoutRoot: { type: Boolean, default: false },
+    "data-framer-portal-id": {},
+    crossfade: { type: Boolean, default: true },
+    onBeforeLayoutMeasure: {},
+    onLayoutMeasure: {},
+    onLayoutAnimationStart: {},
+    onLayoutAnimationComplete: {},
+    globalPressTarget: { type: Boolean },
+    press: {},
+    onPressStart: {},
+    onPress: {},
+    onPressCancel: {},
+    hover: { default: void 0 },
+    onHoverStart: {},
+    onHoverEnd: {},
+    inViewOptions: {},
+    inView: { default: void 0 },
+    onViewportEnter: {},
+    onViewportLeave: {},
+    drag: { type: [Boolean, String] },
+    dragSnapToOrigin: { type: Boolean },
+    dragDirectionLock: { type: Boolean },
+    dragPropagation: { type: Boolean },
+    dragConstraints: { type: [Boolean, Object] },
+    dragElastic: { type: [Boolean, Number, Object], default: 0.5 },
+    dragMomentum: { type: Boolean, default: true },
+    dragTransition: {},
+    dragListener: { type: Boolean, default: true },
+    dragControls: {},
+    onDragStart: {},
+    onDragEnd: {},
+    onDrag: {},
+    onDirectionLock: {},
+    onDragTransitionEnd: {},
+    onMeasureDragConstraints: {},
+    onPanSessionStart: {},
+    onPanStart: {},
+    onPan: {},
+    onPanEnd: {},
+    focus: {},
+    onFocus: {},
+    onBlur: {}
+  },
+  setup(__props) {
+    var _a, _b;
+    const props = __props;
+    const { style } = toRefs(props);
+    const context = useReorderContext(null);
+    const point = {
+      x: useDefaultMotionValue((_a = style.value) == null ? void 0 : _a.x),
+      y: useDefaultMotionValue((_b = style.value) == null ? void 0 : _b.y)
+    };
+    const zIndex = useTransform([point.x, point.y], ([latestX, latestY]) => latestX || latestY ? 1 : "unset");
+    function warning() {
+      invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
+    }
+    const { axis, registerItem, updateOrder } = context || {};
+    const attrs = useAttrs();
+    function bindProps() {
+      return {
+        ...attrs,
+        ...props,
+        style: {
+          ...style.value,
+          x: point.x,
+          y: point.y,
+          zIndex
+        }
+      };
+    }
+    const drag = computed(() => {
+      if (props.drag) {
+        return props.drag;
+      }
+      return axis.value;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$1), mergeProps(bindProps(), {
+        drag: drag.value,
+        "drag-snap-to-origin": true,
+        onDrag: _cache[0] || (_cache[0] = (event, gesturePoint) => {
+          const { velocity } = gesturePoint;
+          velocity[unref(axis)] && unref(updateOrder)(_ctx.value, point[unref(axis)].get(), velocity[unref(axis)]);
+          _ctx.onDrag && _ctx.onDrag(event, gesturePoint);
+        }),
+        onLayoutMeasure: _cache[1] || (_cache[1] = (measured) => unref(registerItem)(_ctx.value, measured))
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default"),
+          createTextVNode(" " + toDisplayString(warning()), 1)
+        ]),
+        _: 3
+      }, 16, ["drag"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/es/components/reorder/Item.vue2.mjs

@@ -0,0 +1,4 @@
+import _sfc_main from "./Item.vue.mjs";
+export {
+  _sfc_main as default
+};

package/dist/es/components/reorder/context.d.ts

@@ -0,0 +1,8 @@
+import { Box } from 'framer-motion';
+import { Ref } from 'vue';
+export interface ReorderContextProps<T> {
+    axis?: Ref<'x' | 'y'>;
+    registerItem?: (item: T, layout: Box) => void;
+    updateOrder?: (item: T, offset: number, velocity: number) => void;
+}
+export declare const useReorderContext: <T extends ReorderContextProps<any> = ReorderContextProps<any>>(fallback?: T) => T extends null ? ReorderContextProps<any> : ReorderContextProps<any>, reorderContextProvider: (contextValue: ReorderContextProps<any>) => ReorderContextProps<any>;

package/dist/es/components/reorder/context.mjs

@@ -0,0 +1,6 @@
+import { createContext } from "../../utils/createContext.mjs";
+const [useReorderContext, reorderContextProvider] = createContext("ReorderContext");
+export {
+  reorderContextProvider,
+  useReorderContext
+};

package/dist/es/components/reorder/index.d.ts

@@ -0,0 +1,13 @@
+import { DefineSetupFnComponent, IntrinsicElementAttributes } from 'vue';
+import { GroupProps } from './Group';
+import { GroupItemProps } from './Item';
+import { ElementType, SVGAttributesWithMotionValues, SetMotionValueType } from '../../types';
+type IntrinsicElementAttributesAsMotionValues = SetMotionValueType<IntrinsicElementAttributes, keyof SVGAttributesWithMotionValues>;
+type ItemProps<T extends ElementType = 'li'> = GroupItemProps<T, unknown, unknown> & IntrinsicElementAttributesAsMotionValues[T];
+export declare const ReorderGroup: DefineSetupFnComponent<GroupProps<ElementType, any, any>>;
+export declare const ReorderItem: DefineSetupFnComponent<ItemProps<ElementType>>;
+export declare const Reorder: {
+    Group: DefineSetupFnComponent<GroupProps<keyof IntrinsicElementAttributes, any, any>>;
+    Item: DefineSetupFnComponent<ItemProps<keyof IntrinsicElementAttributes>>;
+};
+export {};

package/dist/es/components/reorder/index.mjs

@@ -0,0 +1,13 @@
+import _sfc_main from "./Group.vue.mjs";
+import _sfc_main$1 from "./Item.vue.mjs";
+const ReorderGroup = _sfc_main;
+const ReorderItem = _sfc_main$1;
+const Reorder = {
+  Group: ReorderGroup,
+  Item: ReorderItem
+};
+export {
+  Reorder,
+  ReorderGroup,
+  ReorderItem
+};

package/dist/es/components/reorder/types.d.ts

@@ -0,0 +1,5 @@
+import { Axis } from 'framer-motion';
+export interface ItemData<T> {
+    value: T;
+    layout: Axis;
+}

package/dist/es/components/reorder/utils.d.ts

@@ -0,0 +1,6 @@
+import { ItemData } from './types';
+export declare function compareMin<V>(a: ItemData<V>, b: ItemData<V>): number;
+export declare function getValue<V>(item: ItemData<V>): V;
+export declare function checkReorder<T>(order: ItemData<T>[], value: T, offset: number, velocity: number): ItemData<T>[];
+export declare function moveItem<T>([...arr]: T[], fromIndex: number, toIndex: number): T[];
+export declare function useDefaultMotionValue(value: any, defaultValue?: number): import('framer-motion/dom').MotionValue<any>;

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

@@ -0,0 +1,46 @@
+import { mixNumber } from "../../utils/mix/number.mjs";
+import { motionValue } from "../../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/value/index.mjs";
+import { isMotionValue } from "../../utils/motion-value.mjs";
+function compareMin(a, b) {
+  return a.layout.min - b.layout.min;
+}
+function getValue(item) {
+  return item.value;
+}
+function checkReorder(order, value, offset, velocity) {
+  if (!velocity)
+    return order;
+  const index = order.findIndex((item2) => item2.value === value);
+  if (index === -1)
+    return order;
+  const nextOffset = velocity > 0 ? 1 : -1;
+  const nextItem = order[index + nextOffset];
+  if (!nextItem)
+    return order;
+  const item = order[index];
+  const nextLayout = nextItem.layout;
+  const nextItemCenter = mixNumber(nextLayout.min, nextLayout.max, 0.5);
+  if (nextOffset === 1 && item.layout.max + offset > nextItemCenter || nextOffset === -1 && item.layout.min + offset < nextItemCenter) {
+    return moveItem(order, index, index + nextOffset);
+  }
+  return order;
+}
+function moveItem([...arr], fromIndex, toIndex) {
+  const startIndex = fromIndex < 0 ? arr.length + fromIndex : fromIndex;
+  if (startIndex >= 0 && startIndex < arr.length) {
+    const endIndex = toIndex < 0 ? arr.length + toIndex : toIndex;
+    const [item] = arr.splice(fromIndex, 1);
+    arr.splice(endIndex, 0, item);
+  }
+  return arr;
+}
+function useDefaultMotionValue(value, defaultValue = 0) {
+  return isMotionValue(value) ? value : motionValue(defaultValue);
+}
+export {
+  checkReorder,
+  compareMin,
+  getValue,
+  moveItem,
+  useDefaultMotionValue
+};

package/dist/es/constants/index.mjs

@@ -3,7 +3,9 @@ const components = {
     "Motion",
     "AnimatePresence",
     "LayoutGroup",
-    "MotionConfig"
+    "MotionConfig",
+    "ReorderGroup",
+    "ReorderItem"
   ]
 };
 const utilities = {

package/dist/es/features/layout/types.d.ts

@@ -1,4 +1,17 @@
-export interface LayoutOptions {
+import { Box } from 'framer-motion';
+export interface LayoutLifecycles {
+    onBeforeLayoutMeasure?: (box: Box) => void;
+    onLayoutMeasure?: (box: Box, prevBox: Box) => void;
+    /**
+     * @internal
+     */
+    onLayoutAnimationStart?: () => void;
+    /**
+     * @internal
+     */
+    onLayoutAnimationComplete?: () => void;
+}
+export interface LayoutOptions extends LayoutLifecycles {
     'layout'?: boolean | 'position' | 'size' | 'preserve-aspect';
     'layoutId'?: string;
     'layoutScroll'?: boolean;

package/dist/es/index.mjs

@@ -41,6 +41,7 @@ import { cancelSync, sync } from "./external/.pnpm/framer-motion@11.16.6/externa
 import { cancelFrame, frame, frameData, frameSteps } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/frameloop/frame.mjs";
 import { motion } from "./components/motion/NameSpace.mjs";
 import { provideMotionConfig, useMotionConfig } from "./components/motion-config/context.mjs";
+import { Reorder, ReorderGroup, ReorderItem } from "./components/reorder/index.mjs";
 import { useComputed } from "./value/use-computed.mjs";
 import { useCombineMotionValues } from "./value/use-combine-values.mjs";
 import { useTransform } from "./value/use-transform.mjs";
@@ -64,6 +65,9 @@ export {
   default3 as Motion,
   default5 as MotionConfig,
   MotionValue,
+  Reorder,
+  ReorderGroup,
+  ReorderItem,
   animate,
   animateMini,
   anticipate,

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

@@ -68,6 +68,9 @@ class MotionState {
   // Initialize animation target values
   initTarget(initialVariantSource) {
     this.baseTarget = resolveVariant(this.options[initialVariantSource] || this.context[initialVariantSource], this.options.variants) || {};
+    for (const key in this.baseTarget) {
+      this.visualElement.setStaticValue(key, this.baseTarget[key]);
+    }
     this.target = {};
   }
   // Get initial animation state
@@ -104,15 +107,6 @@ class MotionState {
     }
     this.visualElement.state = this;
     this.updateOptions();
-    if (typeof this.initial === "object") {
-      for (const key in this.initial) {
-        this.visualElement.setStaticValue(key, this.initial[key]);
-      }
-    } else if (typeof this.initial === "string" && this.options.variants) {
-      for (const key in this.options.variants[this.initial]) {
-        this.visualElement.setStaticValue(key, this.options.variants[this.initial][key]);
-      }
-    }
     this.featureManager.mount();
     if (!notAnimate && this.options.animate) {
       this.animateUpdates();

package/dist/es/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>;
+export declare function useInView<T extends Element = any>(domRef: Ref<T | null>, options?: Options['inViewOptions'] | Ref<Options['inViewOptions']>): Ref<boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-v",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "",
   "author": "",
   "license": "MIT",
@@ -68,6 +68,7 @@
     "@vue/test-utils": "^2.4.5",
     "happy-dom": "^16.0.1",
     "jsdom": "^24.0.0",
+    "rimraf": "^6.0.1",
     "vite": "^5.4.8",
     "vite-plugin-dts": "^4.2.4",
     "vitest": "^1.4.0",
@@ -75,7 +76,7 @@
   },
   "scripts": {
     "dev": "vite build --watch",
-    "build": "rm -rf dist && vite build",
+    "build": "rimraf dist && vite build",
     "test": "vitest --dom",
     "coverage": "vitest run --coverage",
     "pub:release": "pnpm publish --access public"