framer-motion->motion

Author: lerte

apps/docs/src/components/Logo.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import React from 'react'
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 
 const Logo = ({ height }: React.ComponentProps<'svg'>) => {
   return (

apps/docs/src/views/icon.tsx

@@ -6,7 +6,7 @@ import { RefObject, useEffect, useRef, useState, useTransition } from 'react'
 import DocPreview from '@/components/DocPreview'
 import icons from './icons.json'
 import { toast } from 'sonner'
-import { useInView } from 'framer-motion'
+import { useInView } from 'motion/react'
 
 const IconWrapper = ({
   children,

packages/actify/package.json

@@ -58,8 +58,7 @@
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "es-toolkit": "^1.29.0",
-    "motion": "12.0.0-alpha.2",
-    "popmotion": "^11.0.5",
+    "motion": "^11.14.4",
     "react-aria": "^3.36.0",
     "react-aria-components": "^1.5.0",
     "react-stately": "^3.34.0"

packages/actify/rollup.config.mjs

@@ -46,11 +46,10 @@ export default [
     external: [
       'clsx',
       'react',
+      'motion',
       'tslib',
       'date-fns',
       'react-dom',
-      'popmotion',
-      'framer-motion',
       '@babel/runtime'
     ],
     plugins: [

packages/actify/src/components/Carousel/CarouselContent.tsx

@@ -1,10 +1,9 @@
 'use client'
 
-import { AnimatePresence, motion } from 'framer-motion'
+import { AnimatePresence, motion, wrap } from 'motion/react'
 import React, { Children, isValidElement, useEffect } from 'react'
 
 import { useCarousel } from './CarouselContext'
-import { wrap } from 'popmotion'
 
 const variants = {
   enter: (direction: number) => {
@@ -51,7 +50,6 @@ const CarouselContent = ({ children }: React.ComponentProps<'div'>) => {
     <AnimatePresence initial={false} custom={direction}>
       {Children.map(children, (child, index) => {
         if (isValidElement(child)) {
-          // @ts-expect-error
           const MotionComponent = motion(child.type)
           if (current == index) {
             return (

packages/actify/src/components/Field/Field.tsx

@@ -1,5 +1,5 @@
 import { SupportingText, SupportingTextProps } from './SupportingText'
-import { cubicBezier, motion } from 'framer-motion'
+import { cubicBezier, motion } from 'motion/react'
 
 import React from 'react'
 import clsx from 'clsx'

packages/actify/src/components/Lists/List.tsx

@@ -3,7 +3,7 @@
 import React, { useId } from 'react'
 
 import { ListContext } from './ListContext'
-import { Transition } from 'framer-motion'
+import { Transition } from 'motion/react'
 import clsx from 'clsx'
 import styles from './list.module.css'
 

packages/actify/src/components/Lists/ListContext.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Transition } from 'framer-motion'
+import { Transition } from 'motion/react'
 import { createContext } from 'react'
 
 const ListContext = createContext({

packages/actify/src/components/Lists/ListGroup.tsx

@@ -11,7 +11,7 @@ import React, {
 import { Icon } from './../Icon'
 import { ListContext } from './ListContext'
 import clsx from 'clsx'
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import styles from './list-group.module.css'
 
 interface ListItemProps extends React.ComponentProps<'li'> {

packages/actify/src/components/Lists/ListItem.tsx

@@ -5,7 +5,7 @@ import React, { useContext, useId, useMemo, useState } from 'react'
 import { ListContext } from './ListContext'
 import { Ripple } from './../Ripple'
 import clsx from 'clsx'
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import styles from './list-item.module.css'
 
 interface ListItemProps extends React.ComponentProps<'li'> {