diff --git a/package.json b/package.json index fb4b86a89f0..58889e73574 100644 --- a/package.json +++ b/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", diff --git a/packages/dev/docs/pages/react-aria/home/Styles.tsx b/packages/dev/docs/pages/react-aria/home/Styles.tsx index a0f5d74ee75..9ca4af33d0f 100644 --- a/packages/dev/docs/pages/react-aria/home/Styles.tsx +++ b/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, diff --git a/packages/react-aria-components/docs/Button.mdx b/packages/react-aria-components/docs/Button.mdx index 0bb6ce7bbb0..0e001d3b205 100644 --- a/packages/react-aria-components/docs/Button.mdx +++ b/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) => { // Merge the local props and ref with the ones provided via context. diff --git a/packages/react-aria-components/docs/ToggleButton.mdx b/packages/react-aria-components/docs/ToggleButton.mdx index df6375562c4..451d638713b 100644 --- a/packages/react-aria-components/docs/ToggleButton.mdx +++ b/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) => { // Merge the local props and ref with the ones provided via context. diff --git a/packages/react-aria-components/docs/examples/framer-modal-sheet.mdx b/packages/react-aria-components/docs/examples/framer-modal-sheet.mdx index 384eaf44324..ecd2d220cb6 100644 --- a/packages/react-aria-components/docs/examples/framer-modal-sheet.mdx +++ b/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; diff --git a/packages/react-aria-components/docs/examples/ios-list.mdx b/packages/react-aria-components/docs/examples/ios-list.mdx index 61f8b6e19a1..93d0e7fdcaf 100644 --- a/packages/react-aria-components/docs/examples/ios-list.mdx +++ b/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'; diff --git a/packages/react-aria-components/docs/examples/swipeable-tabs.mdx b/packages/react-aria-components/docs/examples/swipeable-tabs.mdx index 6eeded767d8..a17b39f27e2 100644 --- a/packages/react-aria-components/docs/examples/swipeable-tabs.mdx +++ b/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 = [ diff --git a/packages/react-aria-components/docs/styling.mdx b/packages/react-aria-components/docs/styling.mdx index 48694320008..37c86d811c6 100644 --- a/packages/react-aria-components/docs/styling.mdx +++ b/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); diff --git a/scripts/buildWebsite.js b/scripts/buildWebsite.js index a7c8bc0faa1..3469bc4c104 100644 --- a/scripts/buildWebsite.js +++ b/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); } diff --git a/yarn.lock b/yarn.lock index 806902c8e69..009a250feb7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16970,15 +16970,17 @@ __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 @@ -16986,7 +16988,7 @@ __metadata: 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"