fix(docs): upgrade framer-motion (#8586)

* upgrade framer-motion

* fixed motion import in docs

* fixed easing function

* import the easing func is right approach

Author: Shubhdeep12

package.json

@@ -160,7 +160,6 @@
     "eslint-plugin-rulesdir": "^0.2.2",
     "fast-check": "^2.19.0",
     "fast-glob": "^3.1.0",
-    "framer-motion": "^11.3.0-alpha.0",
     "fs-extra": "^11.0.0",
     "glob": "^8.0.3",
     "glob-promise": "^6.0.5",
@@ -176,6 +175,7 @@
     "lfcdn": "^0.4.2",
     "lucide-react": "^0.294.0",
     "md5": "^2.2.1",
+    "motion": "^12.23.6",
     "npm-cli-login": "^1.0.0",
     "nyc": "^10.2.0",
     "p-queue": "^6.2.1",

packages/dev/docs/pages/react-aria/home/Styles.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 import {AddressBar, FileTab, Scrollable, Window} from './components';
-import {animate, AnimationPlaybackControls, motion, useMotionValueEvent, useReducedMotion, useScroll, useTransform} from 'framer-motion';
+import {animate, AnimationPlaybackControls, motion, useMotionValueEvent, useReducedMotion, useScroll, useTransform} from 'motion/react';
 import {
   Button,
   Collection,

packages/react-aria-components/docs/Button.mdx

@@ -412,7 +412,7 @@ This example uses [Framer Motion](https://www.framer.com/motion/) to create an `
 import type {ButtonProps} from 'react-aria-components';
 import {ButtonContext, useContextProps} from 'react-aria-components';
 import {useButton} from 'react-aria';
-import {motion} from 'framer-motion';
+import {motion} from 'motion/react';
 
 const AnimatedButton = React.forwardRef((props: ButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) => {
   // Merge the local props and ref with the ones provided via context.

packages/react-aria-components/docs/ToggleButton.mdx

@@ -269,7 +269,7 @@ import type {ToggleButtonProps} from 'react-aria-components';
 import {ToggleButtonContext, useContextProps} from 'react-aria-components';
 import {useToggleState} from 'react-stately';
 import {useToggleButton} from 'react-aria';
-import {motion} from 'framer-motion';
+import {motion} from 'motion/react';
 
 const AnimatedToggleButton = React.forwardRef((props: ToggleButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) => {
   // Merge the local props and ref with the ones provided via context.

packages/react-aria-components/docs/examples/framer-modal-sheet.mdx

@@ -57,8 +57,9 @@ import {
   useMotionTemplate,
   useMotionValue,
   useTransform,
-  useMotionValueEvent
-} from 'framer-motion';
+  useMotionValueEvent,
+  cubicBezier
+} from 'motion/react';
 import {
   Dialog,
   ModalOverlay,
@@ -68,7 +69,7 @@ import {
 } from 'react-aria-components';
 import { useState } from 'react';
 
-// Wrap React Aria modal components so they support framer-motion values.
+// Wrap React Aria modal components so they support motion values.
 const MotionModal = motion(Modal);
 const MotionModalOverlay = motion(ModalOverlay);
 
@@ -81,7 +82,7 @@ const inertiaTransition = {
 
 const staticTransition = {
   duration: 0.5,
-  ease: [0.32, 0.72, 0, 1]
+  ease: cubicBezier(0.32, 0.72, 0, 1)
 };
 
 const SHEET_MARGIN = 34;

packages/react-aria-components/docs/examples/ios-list.mdx

@@ -128,7 +128,7 @@ import {
   useIsPresent,
   useMotionTemplate,
   useMotionValueEvent
-} from "framer-motion";
+} from "motion/react";
 import { useRef, useState } from "react";
 import type {CSSProperties} from 'react';
 

packages/react-aria-components/docs/examples/swipeable-tabs.mdx

@@ -52,7 +52,7 @@ import {
   TabPanel,
   Collection
 } from "react-aria-components";
-import { motion, animate, useScroll, useTransform, useMotionValueEvent } from "framer-motion";
+import { motion, animate, useScroll, useTransform, useMotionValueEvent } from "motion/react";
 import { useCallback, useEffect, useRef, useState } from "react";
 
 let tabs = [

packages/react-aria-components/docs/styling.mdx

@@ -354,7 +354,7 @@ If you are using Tailwind CSS, we recommend using the [tailwindcss-animate](http
 
 ```tsx
 import {Modal, ModalOverlay} from 'react-aria-components';
-import {motion} from 'framer-motion';
+import {motion} from 'motion/react';
 
 // Create Framer Motion wrappers.
 const MotionModal = motion(Modal);
@@ -424,7 +424,7 @@ The [AnimatePresence](https://www.framer.com/motion/animate-presence/) component
 
 ```tsx
 import {GridList, GridListItem} from 'react-aria-components';
-import {motion, AnimatePresence} from 'framer-motion';
+import {motion, AnimatePresence} from 'motion/react';
 
 const MotionItem = motion(GridListItem);
 

scripts/buildWebsite.js

@@ -53,7 +53,7 @@ async function build() {
           name.startsWith('postcss') ||
           name === 'sharp' ||
           name === 'recast' ||
-          name === 'framer-motion' ||
+          name === 'motion' ||
           name === 'tailwindcss-animate' ||
           name === 'tailwindcss' ||
           name === '@tailwindcss/postcss' ||
@@ -82,7 +82,7 @@ async function build() {
       // Add a public url if provided via arg (for verdaccio prod doc website build since we want a commit hash)
       build: `DOCS_ENV=production PARCEL_WORKER_BACKEND=process GIT_HASH=${gitHash} parcel build 'docs/*/*/docs/*.mdx' 'docs/react-aria-components/docs/**/*.mdx' 'packages/dev/docs/pages/**/*.mdx' ${publicUrlFlag}`,
       postinstall: 'patch-package',
-      createRssFeed: "node scripts/createFeed.mjs"
+      createRssFeed: 'node scripts/createFeed.mjs'
     },
     '@parcel/transformer-css': packageJSON['@parcel/transformer-css'],
     '@parcel/resolver-default': {
@@ -174,8 +174,8 @@ async function build() {
 
   // Copy the build back into dist, and delete the temp dir.
   fs.copySync(path.join(dir, 'dist'), path.join(__dirname, '..', 'dist', 'production', 'docs'));
-  fs.copySync(path.join(dir, 'scripts', 'releases-feed.rss'), path.join(__dirname, '..', 'dist', 'production', 'docs', 'releases', 'releases-feed.rss'))
-  fs.copySync(path.join(dir, 'scripts', 'blog-feed.rss'), path.join(__dirname, '..', 'dist', 'production', 'docs', 'blog', 'blog-feed.rss'))
+  fs.copySync(path.join(dir, 'scripts', 'releases-feed.rss'), path.join(__dirname, '..', 'dist', 'production', 'docs', 'releases', 'releases-feed.rss'));
+  fs.copySync(path.join(dir, 'scripts', 'blog-feed.rss'), path.join(__dirname, '..', 'dist', 'production', 'docs', 'blog', 'blog-feed.rss'));
   fs.removeSync(dir);
 }
 

yarn.lock

@@ -16970,23 +16970,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"framer-motion@npm:^11.3.0-alpha.0":
-  version: 11.3.0-alpha.0
-  resolution: "framer-motion@npm:11.3.0-alpha.0"
+"framer-motion@npm:^12.23.6":
+  version: 12.23.6
+  resolution: "framer-motion@npm:12.23.6"
   dependencies:
+    motion-dom: "npm:^12.23.6"
+    motion-utils: "npm:^12.23.6"
     tslib: "npm:^2.4.0"
   peerDependencies:
     "@emotion/is-prop-valid": "*"
-    react: ^18.0.0
-    react-dom: ^18.0.0
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
   peerDependenciesMeta:
     "@emotion/is-prop-valid":
       optional: true
     react:
       optional: true
     react-dom:
       optional: true
-  checksum: 10c0/9ae2dab7ebfcaf2f4c1e277094b07f8ed405ce38055665937eddaaac1f70749234dd1500beeaa5cd3582373f2e1ea78fd7b07beb359066bf7085a2eb177bf4f3
+  checksum: 10c0/4bb30b6a39cb3a0cd70a103fa8c321c751d2d308253fb84c3ed3c97ac7278cbd2b66e8b76207f540f2760d024d516e50f7038c15ba63f42c9184d8dab02d7478
   languageName: node
   linkType: hard
 
@@ -23309,6 +23311,43 @@ __metadata:
   languageName: node
   linkType: hard
 
+"motion-dom@npm:^12.23.6":
+  version: 12.23.6
+  resolution: "motion-dom@npm:12.23.6"
+  dependencies:
+    motion-utils: "npm:^12.23.6"
+  checksum: 10c0/4f4c5e9fcabdad6e3523c71f1e23bd0cb50a71e362a02d1897dfd30f85b044c88ccf62d506dfa35388b035d4073714b9ad021c70c858eab7d6c2227908ee18cc
+  languageName: node
+  linkType: hard
+
+"motion-utils@npm:^12.23.6":
+  version: 12.23.6
+  resolution: "motion-utils@npm:12.23.6"
+  checksum: 10c0/c058e8ba6423b3baa63e985bcc669877ee7d9579d938f5348b4e60c5ea1b4b33dd7f4877434436a4a5807f3cf00370d3fd4079a6fdd6309c5c87aa62b311a897
+  languageName: node
+  linkType: hard
+
+"motion@npm:^12.23.6":
+  version: 12.23.6
+  resolution: "motion@npm:12.23.6"
+  dependencies:
+    framer-motion: "npm:^12.23.6"
+    tslib: "npm:^2.4.0"
+  peerDependencies:
+    "@emotion/is-prop-valid": "*"
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@emotion/is-prop-valid":
+      optional: true
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  checksum: 10c0/f0475a7b5e9b54919c45ce7e4a40bbeb46cdc84358e6c80c40ad797fe6d0bbbb83958c2d8f5522a7a4fb83d1f3ceddfa20505fa96b07ea2133bb9b60377f9cd7
+  languageName: node
+  linkType: hard
+
 "move-concurrently@npm:^1.0.1":
   version: 1.0.1
   resolution: "move-concurrently@npm:1.0.1"
@@ -26210,7 +26249,6 @@ __metadata:
     eslint-plugin-rulesdir: "npm:^0.2.2"
     fast-check: "npm:^2.19.0"
     fast-glob: "npm:^3.1.0"
-    framer-motion: "npm:^11.3.0-alpha.0"
     fs-extra: "npm:^11.0.0"
     glob: "npm:^8.0.3"
     glob-promise: "npm:^6.0.5"
@@ -26226,6 +26264,7 @@ __metadata:
     lfcdn: "npm:^0.4.2"
     lucide-react: "npm:^0.294.0"
     md5: "npm:^2.2.1"
+    motion: "npm:^12.23.6"
     npm-cli-login: "npm:^1.0.0"
     nyc: "npm:^10.2.0"
     p-queue: "npm:^6.2.1"