feat: replace framer-motion with motion

apps/docs/components/blog-post.tsx

@@ -5,7 +5,7 @@ import {Card, CardFooter, CardBody, CardHeader, Link, Avatar, Image} from "@next
 import Balancer from "react-wrap-balancer";
 import {format, parseISO} from "date-fns";
 import NextLink from "next/link";
-import {AnimatePresence, motion} from "framer-motion";
+import {AnimatePresence, motion} from "motion/react";
 import {usePostHog} from "posthog-js/react";
 
 import {useIsMounted} from "@/hooks/use-is-mounted";

apps/docs/components/blog/video-in-view.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/media-has-caption */
 "use client";
 
-import {useInView} from "framer-motion";
+import {useInView} from "motion/react";
 import {useRef, FC, useEffect, useState, useCallback} from "react";
 import {Button, cn, Spinner, Tooltip} from "@nextui-org/react";
 

apps/docs/components/docs/components/code-demo/code-demo.tsx

@@ -3,7 +3,7 @@
 import React, {useCallback, useMemo, useRef} from "react";
 import dynamic from "next/dynamic";
 import {Skeleton, Tab, Tabs} from "@nextui-org/react";
-import {useInView} from "framer-motion";
+import {useInView} from "motion/react";
 
 import {useCodeDemo, UseCodeDemoProps} from "./use-code-demo";
 import WindowResizer, {WindowResizerProps} from "./window-resizer";

apps/docs/components/docs/components/code-demo/window-resizer.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import {motion, useMotionValue, useTransform} from "framer-motion";
+import {motion, useMotionValue, useTransform} from "motion/react";
 import {tv} from "tailwind-variants";
 
 import {useIsMobile} from "@/hooks/use-media-query";

apps/docs/components/marketing/a11y-otb.tsx

@@ -11,7 +11,7 @@ import {
   DropdownItem,
   Tooltip,
 } from "@nextui-org/react";
-import {useInView} from "framer-motion";
+import {useInView} from "motion/react";
 import {clsx} from "@nextui-org/shared-utils";
 import {
   AddNoteBulkIcon,

apps/docs/components/navbar.tsx

@@ -25,7 +25,7 @@ import {isAppleDevice} from "@react-aria/utils";
 import {clsx} from "@nextui-org/shared-utils";
 import NextLink from "next/link";
 import {usePathname} from "next/navigation";
-import {motion, AnimatePresence} from "framer-motion";
+import {motion, AnimatePresence} from "motion/react";
 import {useEffect} from "react";
 import {usePress} from "@react-aria/interactions";
 import {useFocusRing} from "@react-aria/focus";

apps/docs/components/sandpack/use-sandpack.ts

@@ -70,7 +70,7 @@ export const useSandpack = ({
   }, {});
 
   let dependencies = {
-    "framer-motion": "11.9.0",
+    motion: "11.13.1",
     "@nextui-org/react": "latest",
   };
 
@@ -143,7 +143,7 @@ export const useSandpack = ({
 
   // const dependencies = useMemo(() => {
   //   let deps = {
-  //     "framer-motion": "11.9.0",
+  //     "motion": "11.11.12",
   //   };
 
   //   if (hasComponents) {

apps/docs/config/search-meta.json

@@ -10774,14 +10774,14 @@
     }
   },
   {
-    "content": "Why does NextUI use Framer Motion?",
+    "content": "Why does NextUI use Motion?",
     "objectID": "d76533f7-0ca8-40cd-b77a-80f708d8d744",
     "type": "lvl3",
-    "url": "/docs/guide/introduction#why-does-nextui-use-framer-motion",
+    "url": "/docs/guide/introduction#why-does-nextui-use-motion",
     "hierarchy": {
       "lvl1": "Introduction",
       "lvl2": "Can I use NextUI with other front-end frameworks or libraries, such as Vue or Angular?",
-      "lvl3": "Why does NextUI use Framer Motion?"
+      "lvl3": "Why does NextUI use Motion?"
     }
   },
   {
@@ -11096,7 +11096,7 @@
     "content": "Install Framer motion",
     "objectID": "ef778f69-5c80-44b6-a995-1385c7136cdf",
     "type": "lvl3",
-    "url": "/docs/guide/upgrade-to-v2#install-framer-motion",
+    "url": "/docs/guide/upgrade-to-v2#install-motion",
     "hierarchy": {
       "lvl1": "Upgrade to v2",
       "lvl2": "Upgrade React version",

apps/docs/content/docs/api-references/nextui-provider.mdx

@@ -5,7 +5,7 @@ description: API References for NextUI Provider
 
 # NextUI Provider
 
-API reference for the `NextUIProvider`. 
+API reference for the `NextUIProvider`.
 
 ------
 
@@ -67,11 +67,11 @@ Here's the supported locales. By default, It is `en-US`.
 ```tsx
 const localeValues = [
   'fr-FR', 'fr-CA', 'de-DE', 'en-US', 'en-GB', 'ja-JP',
-  'da-DK', 'nl-NL', 'fi-FI', 'it-IT', 'nb-NO', 'es-ES', 
-  'sv-SE', 'pt-BR', 'zh-CN', 'zh-TW', 'ko-KR', 'bg-BG', 
-  'hr-HR', 'cs-CZ', 'et-EE', 'hu-HU', 'lv-LV', 'lt-LT', 
-  'pl-PL', 'ro-RO', 'ru-RU', 'sr-SP', 'sk-SK', 'sl-SI', 
-  'tr-TR', 'uk-UA', 'ar-AE', 'ar-DZ', 'AR-EG', 'ar-SA', 
+  'da-DK', 'nl-NL', 'fi-FI', 'it-IT', 'nb-NO', 'es-ES',
+  'sv-SE', 'pt-BR', 'zh-CN', 'zh-TW', 'ko-KR', 'bg-BG',
+  'hr-HR', 'cs-CZ', 'et-EE', 'hu-HU', 'lv-LV', 'lt-LT',
+  'pl-PL', 'ro-RO', 'ru-RU', 'sr-SP', 'sk-SK', 'sl-SI',
+  'tr-TR', 'uk-UA', 'ar-AE', 'ar-DZ', 'AR-EG', 'ar-SA',
   'el-GR', 'he-IL', 'fa-AF', 'am-ET', 'hi-IN', 'th-TH'
 ];
 ```
@@ -112,7 +112,7 @@ interface AppProviderProps {
 
 `createCalendar`
 
-- **Description**: 
+- **Description**:
     This function helps to reduce the bundle size by providing a custom calendar system.
 
     By default, this includes all calendar systems supported by `@internationalized/date`. However,
@@ -144,7 +144,7 @@ interface AppProviderProps {
 
 `disableAnimation`
 
-- **Description**: Disables animations globally. This will also avoid `framer-motion` features to be loaded in the bundle which can potentially reduce the bundle size.
+- **Description**: Disables animations globally. This will also avoid `motion` features to be loaded in the bundle which can potentially reduce the bundle size.
 - **Type**: `boolean`
 - **Default**: `false`
 
@@ -158,12 +158,12 @@ interface AppProviderProps {
 
 <Spacer y={2}/>
 
-`skipFramerMotionAnimations`
+`skipMotionAnimations`
 
 - **Description**:
-  Controls whether `framer-motion` animations are skipped within the application.
+  Controls whether `motion` animations are skipped within the application.
   This property is automatically enabled (`true`) when the `disableAnimation` prop is set to `true`,
-  effectively skipping all `framer-motion` animations. To retain `framer-motion` animations while
+  effectively skipping all `motion` animations. To retain `motion` animations while
   using the `disableAnimation` prop for other purposes, set this to `false`. However, note that
   animations in NextUI Components are still omitted if the `disableAnimation` prop is `true`.
 - **Type**: `boolean`
@@ -173,14 +173,14 @@ interface AppProviderProps {
 
 `validationBehavior`
 
-- **Description**: Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, 
+- **Description**: Whether to use native HTML form validation to prevent form submission when the value is missing or invalid,
 or mark the field as required or invalid via ARIA.
 - **Type**: `native | aria`
 - **Default**: `aria`
 
 `reducedMotion`
 
-- **Description**: Controls the motion preferences for the entire application, allowing developers to respect user settings for reduced motion. 
+- **Description**: Controls the motion preferences for the entire application, allowing developers to respect user settings for reduced motion.
 The available options are:
   - `"user"`: Adapts to the user's device settings for reduced motion.
   - `"always"`: Disables all animations.
@@ -216,4 +216,4 @@ type SupportedCalendars =
   | "persian"
   | "roc"
   | "gregory";
-```
+```

apps/docs/content/docs/frameworks/astro.mdx

@@ -31,10 +31,10 @@ In your Astro project, run one of the following command to install NextUI:
 
 <PackageManagers
   commands={{
-    npm: 'npm i @nextui-org/react framer-motion',
-    yarn: 'yarn add @nextui-org/react framer-motion',
-    pnpm: 'pnpm add @nextui-org/react framer-motion',
-    bun: "bun add @nextui-org/react framer-motion"
+    npm: 'npm i @nextui-org/react motion',
+    yarn: 'yarn add @nextui-org/react motion',
+    pnpm: 'pnpm add @nextui-org/react motion',
+    bun: "bun add @nextui-org/react motion"
   }}
 />
 
@@ -55,7 +55,7 @@ After modifying the `.npmrc` file, you need to run `pnpm install` again to ensur
 ### Tailwind CSS Setup
 
 NextUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official
-[installation guide](https://tailwindcss.com/docs/guides/astro) to install Tailwind CSS. Then you need to add 
+[installation guide](https://tailwindcss.com/docs/guides/astro) to install Tailwind CSS. Then you need to add
 the following code to your `tailwind.config.cjs` file:
 
 <Blockquote color="primary">

apps/docs/content/docs/frameworks/nextjs.mdx

@@ -21,7 +21,7 @@ To use NextUI in your Next.js project, you need to follow the steps below, depen
 
 ## App Directory Setup
 
-Next.js 13 introduces a new `app/` directory structure. By default it uses Server Components. 
+Next.js 13 introduces a new `app/` directory structure. By default it uses Server Components.
 As NextUI components use React hooks, we added the `use client;` at build time, so you can import them
 directly in your React Server Components (RSC).
 
@@ -39,7 +39,7 @@ npm install -g nextui-cli
 nextui init -t app
 ```
 
-### create-next-app 
+### create-next-app
 
 If you are starting a new project, you can run one of the following commands to create a Next.js project pre-configured with NextUI:
 
@@ -146,10 +146,10 @@ In your Next.js project, run one of the following commands to install NextUI:
 
 <PackageManagers
   commands={{
-    npm: 'npm i @nextui-org/react framer-motion',
-    yarn: 'yarn add @nextui-org/react framer-motion',
-    pnpm: 'pnpm add @nextui-org/react framer-motion',
-    bun: "bun add @nextui-org/react framer-motion"
+    npm: 'npm i @nextui-org/react motion',
+    yarn: 'yarn add @nextui-org/react motion',
+    pnpm: 'pnpm add @nextui-org/react motion',
+    bun: "bun add @nextui-org/react motion"
   }}
 />
 
@@ -170,7 +170,7 @@ After modifying the `.npmrc` file, you need to run `pnpm install` again to ensur
 ### Tailwind CSS Setup
 
 NextUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official
-[installation guide](https://tailwindcss.com/docs/guides/nextjs) to install Tailwind CSS. Then you need to add 
+[installation guide](https://tailwindcss.com/docs/guides/nextjs) to install Tailwind CSS. Then you need to add
 the following code to your `tailwind.config.js` file:
 
 <Blockquote color="primary">
@@ -242,7 +242,7 @@ export default function RootLayout({children}: { children: React.ReactNode }) {
 }
 ```
 
-> **Note**: NextUI automatically adds two themes, `light` and `dark`, to your application. You can use any 
+> **Note**: NextUI automatically adds two themes, `light` and `dark`, to your application. You can use any
 of them by adding the `dark`/`light` class to the `html` tag. See the [theme docs](/docs/customization/customize-theme) for more details.
 
 
@@ -253,7 +253,7 @@ the `use client;` directive:
 
 ```jsx {2,7}
 // app/page.tsx
-import {Button} from '@nextui-org/button'; 
+import {Button} from '@nextui-org/button';
 
 export default function Page() {
   return (
@@ -263,11 +263,11 @@ export default function Page() {
   )
 }
 ```
-> **Important 🚨**: Note that you need to import the component from the individual package, not from `@nextui-org/react`. 
+> **Important 🚨**: Note that you need to import the component from the individual package, not from `@nextui-org/react`.
 
 </Steps>
 
-## Pages Directory Setup 
+## Pages Directory Setup
 
 ### NextUI CLI (recommended)
 
@@ -285,7 +285,7 @@ nextui init -t pages
 
 If you are using the `/pages` Next.js project structure, you need to follow the steps below.
 
-### create-next-app 
+### create-next-app
 
 If you are starting a new project, you can run one of the following commands to create a Next.js project pre-configured with NextUI:
 
@@ -392,10 +392,10 @@ In your Next.js project, run one of the following commands to install NextUI:
 
 <PackageManagers
   commands={{
-    npm: 'npm i @nextui-org/react framer-motion',
-    yarn: 'yarn add @nextui-org/react framer-motion',
-    pnpm: 'pnpm add @nextui-org/react framer-motion',
-    bun: "bun add @nextui-org/react framer-motion"
+    npm: 'npm i @nextui-org/react motion',
+    yarn: 'yarn add @nextui-org/react motion',
+    pnpm: 'pnpm add @nextui-org/react motion',
+    bun: "bun add @nextui-org/react motion"
   }}
 />
 
@@ -416,7 +416,7 @@ After modifying the `.npmrc` file, you need to run `pnpm install` again to ensur
 ### Tailwind CSS Setup
 
 NextUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official
-[installation guide](https://tailwindcss.com/docs/guides/nextjs) to install Tailwind CSS. Then you need to add 
+[installation guide](https://tailwindcss.com/docs/guides/nextjs) to install Tailwind CSS. Then you need to add
 the following code to your `tailwind.config.js` file:
 
 <Blockquote color="primary">

apps/docs/content/docs/frameworks/remix.mdx

@@ -25,10 +25,10 @@ In your Remix project, run one of the following command to install NextUI:
 
 <PackageManagers
   commands={{
-    npm: 'npm i @nextui-org/react framer-motion',
-    yarn: 'yarn add @nextui-org/react framer-motion',
-    pnpm: 'pnpm add @nextui-org/react framer-motion',
-    bun: "bun add @nextui-org/react framer-motion"
+    npm: 'npm i @nextui-org/react motion',
+    yarn: 'yarn add @nextui-org/react motion',
+    pnpm: 'pnpm add @nextui-org/react motion',
+    bun: "bun add @nextui-org/react motion"
   }}
 />
 
@@ -49,7 +49,7 @@ After modifying the `.npmrc` file, you need to run `pnpm install` again to ensur
 ### Tailwind CSS Setup
 
 NextUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official
-[installation guide](https://tailwindcss.com/docs/guides/remix) to install Tailwind CSS. Then you need to add 
+[installation guide](https://tailwindcss.com/docs/guides/remix) to install Tailwind CSS. Then you need to add
 the following code to your `tailwind.config.js` file:
 
 <Blockquote color="primary">

apps/docs/content/docs/frameworks/vite.mdx

@@ -26,10 +26,10 @@ In your Vite React project, run one of the following command to install NextUI:
 
 <PackageManagers
   commands={{
-    npm: 'npm i @nextui-org/react framer-motion',
-    yarn: 'yarn add @nextui-org/react framer-motion',
-    pnpm: 'pnpm add @nextui-org/react framer-motion',
-    bun: "bun add @nextui-org/react framer-motion"
+    npm: 'npm i @nextui-org/react motion',
+    yarn: 'yarn add @nextui-org/react motion',
+    pnpm: 'pnpm add @nextui-org/react motion',
+    bun: "bun add @nextui-org/react motion"
   }}
 />
 
@@ -50,7 +50,7 @@ After modifying the `.npmrc` file, you need to run `pnpm install` again to ensur
 ### Tailwind CSS Setup
 
 NextUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official
-[installation guide](https://tailwindcss.com/docs/guides/vite#react) to install Tailwind CSS. Then you need to add 
+[installation guide](https://tailwindcss.com/docs/guides/vite#react) to install Tailwind CSS. Then you need to add
 the following code to your `tailwind.config.js` file:
 
 <Blockquote color="primary">