framer-motion 12.23.12 → 12.23.14

package/README.md

@@ -1,4 +1,3 @@
-
 <h1 align="center"> <img width="35" height="35" alt="Motion logo" src="https://github.com/user-attachments/assets/00d6d1c3-72c4-4c2f-a664-69da13182ffc" /><br />Motion for React</h1>
 <h3 align="center">
   An open source animation library<br />for React
@@ -11,7 +10,6 @@
   <img alt="NPM License" src="https://img.shields.io/npm/l/motion?color=FF2B6E">
 </p>
 
-
 ```bash
 npm install motion
 ```
@@ -19,28 +17,26 @@ npm install motion
 ## Table of Contents
 
 1. [Why Motion?](#why-motion)
-2. [🍦 Flavours](#-flavours)
+2. [🍦 Platforms](#-platforms)
 3. [🎓 Examples](#-examples)
-4. [🎨 Studio](#-studio)
-5. [⚡️ Motion+](#-motion)
-6. [👩🏻‍⚖️ License](#-license)
-7. [💎 Contribute](#-contribute)
-8. [✨ Sponsors](#-sponsors)
+4. [⚡️ Motion+](#-motion)
+5. [👩🏻‍⚖️ License](#-license)
+6. [💎 Contribute](#-contribute)
+7. [✨ Sponsors](#-sponsors)
 
 ## Why Motion?
 
-Motion is an animation library for making beautiful animations.
-
-* The **only** library with first‑class APIs for React, JavaScript, **and** Vue.
-* Powered by a **hybrid engine** that blends JavaScript flexibility with native browser APIs for **120fps GPU‑accelerated** motion.
-* Tiny footprint, tree‑shakable, and fully TypeScript‑typed.
+-   **Simple API:** First-class React, JavaScript, and Vue packages.
+-   **Hybrid engine:** Power of JavaScript combined with native browser APIs for 120fps, GPU-accelerated animations.
+-   **Production-ready:** TypeScript, extensive test suite, tree-shakable, tiny footprint.
+    **Batteries included:** Gestures, springs, layout transitions, scroll-linked effects, timelines.
 
-## 🍦 Flavours
+## 🍦 Platforms
 
 Motion is available for [React](https://motion.dev/docs/react), [JavaScript](https://motion.dev/docs/quick-start) and [Vue](https://motion.dev/docs/vue).
 
 <details>
-<summary>React ⬇</summary>
+<summary>React</summary>
 
 ```jsx
 import { motion } from "motion/react"
@@ -55,7 +51,7 @@ Get started with [Motion for React](https://motion.dev/docs/react).
 </details>
 
 <details>
-<summary>JavaScript ⬇</summary>
+<summary>JavaScript</summary>
 
 ```javascript
 import { animate } from "motion"
@@ -68,7 +64,7 @@ Get started with [JavaScript](https://motion.dev/docs/quick-start).
 </details>
 
 <details>
-<summary>Vue ⬇</summary>
+<summary>Vue</summary>
 
 ```html
 <script>
@@ -84,30 +80,19 @@ Get started with [Motion for Vue](https://motion.dev/docs/vue).
 
 ## 🎓 Examples
 
-[Motion Examples](https://motion.dev/examples) offers 100s of free and Motion+ examples for beginners and advanced users alike. Easy copy/paste code to kick‑start your next project.
+Browse 100+ free and 180+ premium [Motion Examples](https://motion.dev/examples), with copy-paste code that'll level-up your animations whether you're a beginner or an expert.
 
 ## ⚡️ Motion+
 
-Learn, Design, Build. [Motion+](https://motion.dev/plus) is a one-time fee, lifetime update membership that provides:
-- 160+ premium Motion Examples
-- Motion UI features like Cursor and Ticker
-- Motion Studio animation editing for VS Code `alpha`
-- Early access content
-- Private Discord
-
-[Get Motion+](https://motion.dev/plus)
+A one-time payment, lifetime-updates membership:
 
-## 🎨 Studio
+-   **180+ premium examples**
+-   **Premium APIs** like [Cursor](https://motion.dev/docs/cursor) and [Ticker](https://motion.dev/docs/react-ticker)
+-   **Visual editing** for VS Code (alpha)
+-   **Private Discord**
+-   **Early access content**
 
-![Video of bezier curve editing](https://framerusercontent.com/images/KO5dnHOUSNGb9S73p1J7nLhoFI.gif)
-
-Motion Studio is a versatile suite of developer tools allowing you to:
-
--   Visually edit CSS and Motion easing curves in VS Code
--   Generate CSS springs with LLMs
--   Load Motion docs into your LLM
-
-Get started with [Motion Studio](https://motion.dev/docs/tools-quick-start).
+[Get Motion+](https://motion.dev/plus)
 
 ## 👩🏻‍⚖️ License
 
@@ -121,27 +106,27 @@ Get started with [Motion Studio](https://motion.dev/docs/tools-quick-start).
 
 Motion is sustainable thanks to the kind support of its sponsors.
 
-### Partners
+[Become a sponsor](https://motion.dev/sponsor)
 
-#### Framer
+### Partner
 
 Motion powers Framer animations, the web builder for creative pros. Design and ship your dream site. Zero code, maximum speed.
 
-<a href="https://www.framer.com?utm_source=motion-readme">
-  <img alt="Framer" src="https://github.com/user-attachments/assets/0404c7a1-c29d-4785-89ae-aae315f3c759" width="300px" height="200px">
+<a href="https://framer.link/FlnUbQY">
+  <img alt="Framer" src="https://github.com/user-attachments/assets/22a79be7-672e-4336-bfb7-5d55d1deb917" width="250px" height="150px">
 </a>
 
 ### Platinum
 
-<a href="https://tailwindcss.com"><img alt="Tailwind" src="https://github.com/user-attachments/assets/c0496f09-b8ee-4bc4-85ab-83a071bbbdec" width="300px" height="200px"></a> <a href="https://linear.app"><img alt="Linear" src="https://github.com/user-attachments/assets/a93710bb-d8ed-40e3-b0fb-1c5b3e2b16bb" width="300px" height="200px"></a>
+<a href="https://linear.app"><img alt="Linear" src="https://github.com/user-attachments/assets/f9ce44b4-af28-4770-bb6e-9515b474bfb2" width="250px" height="150px"></a> <a href="https://figma.com"><img alt="Figma" src="https://github.com/user-attachments/assets/1077d0ab-4305-4a1f-81c8-d5be8c4c6717" width="250px" height="150px"></a> <a href="https://sanity.io"><img alt="Sanity" src="https://github.com/user-attachments/assets/80134088-f456-483f-8edd-940593c120ce" width="250px" height="150px"></a>
 
 ### Gold
 
-<a href="https://vercel.com"><img alt="Vercel" src="https://github.com/user-attachments/assets/23cb1e37-fa67-49ad-8f77-7f4b8eaba325" width="225px" height="150px"></a> <a href="https://liveblocks.io"><img alt="Liveblocks" src="https://github.com/user-attachments/assets/31436a47-951e-4eab-9a68-bdd54ccf9444" width="225px" height="150px"></a> <a href="https://lu.ma"><img alt="Luma" src="https://github.com/user-attachments/assets/4fae0c9d-de0f-4042-9cd6-e07885d028a9" width="225px" height="150px"></a> <a href="https://emilkowal.ski"><img alt="Emil Kowalski" src="https://github.com/user-attachments/assets/29f56b1a-37fb-4695-a6a6-151f6c24864f" width="300px" height="200px"></a>
+<a href="https://tailwindcss.com"><img alt="Tailwind" src="https://github.com/user-attachments/assets/1d5f2571-8bc3-4367-9fec-14d291168ff0" width="200px" height="120px"></a> <a href="https://emilkowal.ski"><img alt="Emil Kowalski" src="https://github.com/user-attachments/assets/33d1cb98-238a-4eed-a0df-9c7ab097d65b" width="200px" height="120px"></a> <a href="https://liveblocks.io"><img alt="Liveblocks" src="https://github.com/user-attachments/assets/28eddbe5-1617-4e74-969d-2eb6fcd481af" width="200px" height="120px"></a> <a href="https://vercel.com"><img alt="Vercel" src="https://github.com/user-attachments/assets/abc473bd-07ae-4a7d-9833-efe9dadb3773" width="200px" height="120px"></a> <a href="https://lu.ma"><img alt="Luma" src="https://github.com/user-attachments/assets/ac282433-6adb-4ad2-9fd2-5c6ee513c14b" width="200px" height="120px"></a>
 
 ### Silver
 
-<a href="https://www.frontend.fyi/?utm_source=motion"><img alt="Frontend.fyi" src="https://github.com/user-attachments/assets/07d23aa5-69db-44a0-849d-90177e6fc817" width="150px" height="100px"></a> <a href="https://firecrawl.dev"><img alt="Firecrawl" src="https://github.com/user-attachments/assets/cba90e54-1329-4353-8fba-85beef4d2ee9" width="150px" height="100px"></a> <a href="https://puzzmo.com"><img alt="Puzzmo" src="https://github.com/user-attachments/assets/aa2d5586-e5e2-43b9-8446-db456e4b0758" width="150px" height="100px"></a>
+<a href="https://www.frontend.fyi/?utm_source=motion"><img alt="Frontend.fyi" src="https://github.com/user-attachments/assets/f16e3eb9-f0bd-4ad1-8049-f079a3d65c69" width="150px" height="100px"></a> <a href="https://firecrawl.dev"><img alt="Firecrawl" src="https://github.com/user-attachments/assets/2c44e7f4-5c2a-4714-9050-1570538665ff" width="150px" height="100px"></a> <a href="https://puzzmo.com"><img alt="Puzzmo" src="https://github.com/user-attachments/assets/e32205a7-3ab1-41ec-8729-a794058fd655" width="150px" height="100px"></a> <a href="https://bolt.new"><img alt="Bolt.new" src="https://github.com/user-attachments/assets/7932d4b2-bb6c-422e-82b9-6ad78a7e3090" width="150px" height="100px"></a>
 
 ### Personal
 

package/dist/cjs/client.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var featureBundle = require('./feature-bundle-PNQ-8QDo.js');
+var featureBundle = require('./feature-bundle-DUWayF3h.js');
 require('react');
 require('motion-dom');
 require('motion-utils');

package/dist/cjs/{feature-bundle-PNQ-8QDo.js → feature-bundle-DUWayF3h.js}

@@ -4091,9 +4091,8 @@ function useMotionRef(visualState, visualElement, externalRef) {
         }
     }, 
     /**
-     * Only pass a new ref callback to React if we've received a visual element
-     * factory. Otherwise we'll be mounting/remounting every time externalRef
-     * or other dependencies change.
+     * Include externalRef in dependencies to ensure the callback updates
+     * when the ref changes, allowing proper ref forwarding.
      */
     [visualElement]);
 }

package/dist/cjs/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var featureBundle = require('./feature-bundle-PNQ-8QDo.js');
+var featureBundle = require('./feature-bundle-DUWayF3h.js');
 var motionDom = require('motion-dom');
 var motionUtils = require('motion-utils');
 

package/dist/cjs/m.js

@@ -799,9 +799,8 @@ function useMotionRef(visualState, visualElement, externalRef) {
         }
     }, 
     /**
-     * Only pass a new ref callback to React if we've received a visual element
-     * factory. Otherwise we'll be mounting/remounting every time externalRef
-     * or other dependencies change.
+     * Include externalRef in dependencies to ensure the callback updates
+     * when the ref changes, allowing proper ref forwarding.
      */
     [visualElement]);
 }

package/dist/es/motion/utils/use-motion-ref.mjs

@@ -28,9 +28,8 @@ function useMotionRef(visualState, visualElement, externalRef) {
         }
     }, 
     /**
-     * Only pass a new ref callback to React if we've received a visual element
-     * factory. Otherwise we'll be mounting/remounting every time externalRef
-     * or other dependencies change.
+     * Include externalRef in dependencies to ensure the callback updates
+     * when the ref changes, allowing proper ref forwarding.
      */
     [visualElement]);
 }

package/dist/framer-motion.dev.js

@@ -9568,9 +9568,8 @@
             }
         }, 
         /**
-         * Only pass a new ref callback to React if we've received a visual element
-         * factory. Otherwise we'll be mounting/remounting every time externalRef
-         * or other dependencies change.
+         * Include externalRef in dependencies to ensure the callback updates
+         * when the ref changes, allowing proper ref forwarding.
          */
         [visualElement]);
     }

package/dist/types/client.d.ts

@@ -1,5 +1,5 @@
-import { p as ForwardRefComponent, H as HTMLMotionProps, r as SVGMotionProps } from '../types.d-Cjd591yU.js';
-export { c as create } from '../types.d-Cjd591yU.js';
+import { p as ForwardRefComponent, b as HTMLMotionProps, r as SVGMotionProps } from '../types.d-CSbqhfMB.js';
+export { c as create } from '../types.d-CSbqhfMB.js';
 import 'react';
 import 'motion-dom';
 import 'motion-utils';

package/dist/types/index.d.ts

@@ -5,8 +5,8 @@ export * from 'motion-dom';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import { useEffect, RefObject } from 'react';
-import { F as FeatureBundle, M as MotionProps, a as MotionConfigContext, H as HTMLMotionProps, b as HTMLElements, c as createMotionComponent, d as HTMLMotionComponents, S as SVGMotionComponents, e as FeaturePackages, V as VisualElement, f as VisualElementAnimationOptions, I as IProjectionNode, R as ResolvedValues, g as HTMLRenderState } from '../types.d-Cjd591yU.js';
-export { A as AnimationType, C as CreateVisualElement, D as DOMMotionComponents, v as FeatureDefinition, w as FeatureDefinitions, x as FeaturePackage, s as FlatTree, p as ForwardRefComponent, t as HydratedFeatureDefinition, u as HydratedFeatureDefinitions, L as LazyFeatureBundle, k as MotionStyle, l as MotionTransform, P as PresenceContext, q as SVGAttributesAsMotionValues, r as SVGMotionProps, h as ScrapeMotionValuesFromProps, j as SwitchLayoutGroupContext, n as VariantLabels, i as VisualState, m as makeUseVisualState, o as optimizedAppearDataAttribute } from '../types.d-Cjd591yU.js';
+import { F as FeatureBundle, M as MotionProps, a as MotionConfigContext, H as HTMLElements, b as HTMLMotionProps, c as createMotionComponent, d as HTMLMotionComponents, S as SVGMotionComponents, e as FeaturePackages, V as VisualElement, f as VisualElementAnimationOptions, I as IProjectionNode, R as ResolvedValues, g as HTMLRenderState } from '../types.d-CSbqhfMB.js';
+export { A as AnimationType, C as CreateVisualElement, D as DOMMotionComponents, v as FeatureDefinition, w as FeatureDefinitions, x as FeaturePackage, s as FlatTree, p as ForwardRefComponent, t as HydratedFeatureDefinition, u as HydratedFeatureDefinitions, L as LazyFeatureBundle, k as MotionStyle, l as MotionTransform, P as PresenceContext, q as SVGAttributesAsMotionValues, r as SVGMotionProps, h as ScrapeMotionValuesFromProps, j as SwitchLayoutGroupContext, n as VariantLabels, i as VisualState, m as makeUseVisualState, o as optimizedAppearDataAttribute } from '../types.d-CSbqhfMB.js';
 import { Easing, EasingFunction, Point, Axis, Box } from 'motion-utils';
 export * from 'motion-utils';
 export { MotionGlobalConfig } from 'motion-utils';
@@ -243,13 +243,17 @@ interface MotionConfigProps extends Partial<MotionConfigContext> {
  */
 declare function MotionConfig({ children, isValidProp, ...config }: MotionConfigProps): react_jsx_runtime.JSX.Element;
 
-interface Props$1<V> {
+type ReorderElementTag = keyof HTMLElements;
+type DefaultGroupElement = "ul";
+type DefaultItemElement = "li";
+
+interface Props$1<V, TagName extends ReorderElementTag = DefaultGroupElement> {
     /**
      * A HTML element to render this component as. Defaults to `"ul"`.
      *
      * @public
      */
-    as?: keyof HTMLElements;
+    as?: TagName;
     /**
      * The axis to reorder along. By default, items will be draggable on this axis.
      * To make draggable on both axes, set `<Reorder.Item drag />`
@@ -283,19 +287,19 @@ interface Props$1<V> {
      */
     values: V[];
 }
-type ReorderGroupProps<V> = Props$1<V> & Omit<HTMLMotionProps<any>, "values"> & React$1.PropsWithChildren<{}>;
-declare function ReorderGroupComponent<V>({ children, as, axis, onReorder, values, ...props }: ReorderGroupProps<V>, externalRef?: React$1.ForwardedRef<any>): react_jsx_runtime.JSX.Element;
-declare const ReorderGroup: <V>(props: ReorderGroupProps<V> & {
+type ReorderGroupProps<V, TagName extends ReorderElementTag = DefaultGroupElement> = Props$1<V, TagName> & Omit<HTMLMotionProps<TagName>, "values"> & React$1.PropsWithChildren<{}>;
+declare function ReorderGroupComponent<V, TagName extends ReorderElementTag = DefaultGroupElement>({ children, as, axis, onReorder, values, ...props }: ReorderGroupProps<V, TagName>, externalRef?: React$1.ForwardedRef<any>): JSX.Element;
+declare const ReorderGroup: <V, TagName extends keyof HTMLElements = "ul">(props: ReorderGroupProps<V, TagName> & {
     ref?: React$1.ForwardedRef<any>;
 }) => ReturnType<typeof ReorderGroupComponent>;
 
-interface Props<V> {
+interface Props<V, TagName extends ReorderElementTag = DefaultItemElement> {
     /**
      * A HTML element to render this component as. Defaults to `"li"`.
      *
      * @public
      */
-    as?: keyof HTMLElements;
+    as?: TagName;
     /**
      * The value in the list that this component represents.
      *
@@ -310,9 +314,9 @@ interface Props<V> {
      */
     layout?: true | "position";
 }
-type ReorderItemProps<V> = Props<V> & Omit<HTMLMotionProps<any>, "value" | "layout"> & React$1.PropsWithChildren<{}>;
-declare function ReorderItemComponent<V>({ children, style, value, as, onDrag, layout, ...props }: ReorderItemProps<V>, externalRef?: React$1.ForwardedRef<any>): react_jsx_runtime.JSX.Element;
-declare const ReorderItem: <V>(props: ReorderItemProps<V> & {
+type ReorderItemProps<V, TagName extends ReorderElementTag = DefaultItemElement> = Props<V, TagName> & Omit<HTMLMotionProps<TagName>, "value" | "layout"> & React$1.PropsWithChildren<{}>;
+declare function ReorderItemComponent<V, TagName extends ReorderElementTag = DefaultItemElement>({ children, style, value, as, onDrag, layout, ...props }: ReorderItemProps<V, TagName>, externalRef?: React$1.ForwardedRef<any>): JSX.Element;
+declare const ReorderItem: <V, TagName extends keyof HTMLElements = "li">(props: ReorderItemProps<V, TagName> & {
     ref?: React$1.ForwardedRef<any>;
 }) => ReturnType<typeof ReorderItemComponent>;
 

package/dist/{types.d-Cjd591yU.d.ts → types.d-CSbqhfMB.d.ts}

@@ -955,4 +955,4 @@ declare global {
     }
 }
 
-export { type AnimationType as A, type CreateVisualElement as C, type DOMMotionComponents as D, type FeatureBundle as F, type HTMLMotionProps as H, type IProjectionNode as I, type LazyFeatureBundle as L, type MotionProps as M, PresenceContext as P, type ResolvedValues as R, type SVGMotionComponents as S, VisualElement as V, MotionConfigContext as a, type HTMLElements as b, createMotionComponent as c, type HTMLMotionComponents as d, type FeaturePackages as e, type VisualElementAnimationOptions as f, type HTMLRenderState as g, type ScrapeMotionValuesFromProps as h, type VisualState as i, SwitchLayoutGroupContext as j, type MotionStyle as k, type MotionTransform as l, makeUseVisualState as m, type VariantLabels as n, optimizedAppearDataAttribute as o, type ForwardRefComponent as p, type SVGAttributesAsMotionValues as q, type SVGMotionProps as r, FlatTree as s, type HydratedFeatureDefinition as t, type HydratedFeatureDefinitions as u, type FeatureDefinition as v, type FeatureDefinitions as w, type FeaturePackage as x };
+export { type AnimationType as A, type CreateVisualElement as C, type DOMMotionComponents as D, type FeatureBundle as F, type HTMLElements as H, type IProjectionNode as I, type LazyFeatureBundle as L, type MotionProps as M, PresenceContext as P, type ResolvedValues as R, type SVGMotionComponents as S, VisualElement as V, MotionConfigContext as a, type HTMLMotionProps as b, createMotionComponent as c, type HTMLMotionComponents as d, type FeaturePackages as e, type VisualElementAnimationOptions as f, type HTMLRenderState as g, type ScrapeMotionValuesFromProps as h, type VisualState as i, SwitchLayoutGroupContext as j, type MotionStyle as k, type MotionTransform as l, makeUseVisualState as m, type VariantLabels as n, optimizedAppearDataAttribute as o, type ForwardRefComponent as p, type SVGAttributesAsMotionValues as q, type SVGMotionProps as r, FlatTree as s, type HydratedFeatureDefinition as t, type HydratedFeatureDefinitions as u, type FeatureDefinition as v, type FeatureDefinitions as w, type FeaturePackage as x };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "12.23.12",
+    "version": "12.23.14",
     "description": "A simple and powerful JavaScript animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -142,5 +142,5 @@
             "maxSize": "2.26 kB"
         }
     ],
-    "gitHead": "e0f7e07570e281b8932c897afb5f6a348c7f97de"
+    "gitHead": "c512db38b2259aaef412605f88799e05055f9be3"
 }