heroui-inc · jrgarciadev · Jun 1, 2025 · May 11, 2025 · May 11, 2025 · May 11, 2025
diff --git a/.changeset/stale-chairs-tan.md b/.changeset/stale-chairs-tan.md
@@ -0,0 +1,22 @@
+---
+"@heroui/autocomplete": patch
+"@heroui/dom-animation": patch
+"@heroui/date-picker": patch
+"@heroui/framer-utils": patch
+"@heroui/accordion": patch
+"@heroui/calendar": patch
+"@heroui/dropdown": patch
+"@heroui/popover": patch
+"@heroui/snippet": patch
+"@heroui/tooltip": patch
+"@heroui/button": patch
+"@heroui/navbar": patch
+"@heroui/ripple": patch
+"@heroui/select": patch
+"@heroui/modal": patch
+"@heroui/card": patch
+"@heroui/tabs": patch
+"@heroui/system": patch
+---
+
+bump framer-motion version
diff --git a/apps/docs/components/sandpack/use-sandpack.ts b/apps/docs/components/sandpack/use-sandpack.ts
@@ -77,7 +77,7 @@ export const useSandpack = ({
   }, {});
 
   let dependencies = {
-    "framer-motion": "11.9.0",
+    "framer-motion": "11.18.2",
     "@heroui/react": "latest",
   };
 
@@ -150,7 +150,7 @@ export const useSandpack = ({
 
   // const dependencies = useMemo(() => {
   //   let deps = {
-  //     "framer-motion": "11.9.0",
+  //     "framer-motion": "11.18.2",
   //   };
 
   //   if (hasComponents) {

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -62,7 +62,7 @@
     "color2k": "2.0.3",
     "contentlayer2": "0.5.3",
     "date-fns": "4.1.0",
-    "framer-motion": "11.11.13",
+    "framer-motion": "11.18.2",
     "geist": "1.3.1",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.3",

diff --git a/packages/components/accordion/package.json b/packages/components/accordion/package.json
@@ -70,7 +70,7 @@
     "@heroui/avatar": "workspace:*",
     "@heroui/input": "workspace:*",
     "@heroui/test-utils": "workspace:*",
-    "framer-motion": "11.9.0",
+    "framer-motion": "11.18.2",
     "clean-package": "2.2.0",
     "react": "18.3.0",
     "react-dom": "18.3.0"

diff --git a/packages/components/accordion/src/base/accordion-item-base.tsx b/packages/components/accordion/src/base/accordion-item-base.tsx
@@ -51,7 +51,7 @@ export interface Props<T extends object = {}>
   /**
    * The props to modify the framer motion animation. Use the `variants` API to create your own animation.
    */
-  motionProps?: HTMLMotionProps<"section">;
+  motionProps?: Omit<HTMLMotionProps<"section">, "ref">;
   /**
    * Whether to keep the accordion content mounted when collapsed.
    * @default false

diff --git a/packages/components/autocomplete/package.json b/packages/components/autocomplete/package.json
@@ -74,7 +74,7 @@
     "@heroui/use-infinite-scroll": "workspace:*",
     "@react-stately/data": "3.12.3",
     "clean-package": "2.2.0",
-    "framer-motion": "11.9.0",
+    "framer-motion": "11.18.2",
     "react": "18.3.0",
     "react-dom": "18.3.0",
     "react-hook-form": "^7.51.3"

diff --git a/packages/components/button/package.json b/packages/components/button/package.json
@@ -57,7 +57,7 @@
     "@heroui/theme": "workspace:*",
     "@heroui/system": "workspace:*",
     "@heroui/shared-icons": "workspace:*",
-    "framer-motion": "11.9.0",
+    "framer-motion": "11.18.2",
     "clean-package": "2.2.0",
     "react": "18.3.0",
     "react-dom": "18.3.0"

diff --git a/packages/components/calendar/package.json b/packages/components/calendar/package.json
@@ -68,7 +68,7 @@
     "@heroui/theme": "workspace:*",
     "@heroui/radio": "workspace:*",
     "@heroui/test-utils": "workspace:*",
-    "framer-motion": "11.9.0",
+    "framer-motion": "11.18.2",
     "clean-package": "2.2.0",
     "react": "18.3.0",
     "react-dom": "18.3.0"

diff --git a/packages/components/card/package.json b/packages/components/card/package.json
@@ -59,7 +59,7 @@
     "@heroui/button": "workspace:*",
     "@heroui/avatar": "workspace:*",
     "@heroui/image": "workspace:*",
-    "framer-motion": "11.9.0",
+    "framer-motion": "11.18.2",
     "clean-package": "2.2.0",
     "react": "18.3.0",
     "react-dom": "18.3.0"

diff --git a/packages/components/date-picker/package.json b/packages/components/date-picker/package.json
@@ -65,7 +65,7 @@
     "@heroui/system": "workspace:*",
     "@heroui/test-utils": "workspace:*",
     "@heroui/theme": "workspace:*",
-    "framer-motion": "11.9.0",
+    "framer-motion": "11.18.2",
     "clean-package": "2.2.0",
     "react": "18.3.0",
     "react-dom": "18.3.0"

diff --git a/packages/components/dropdown/package.json b/packages/components/dropdown/package.json
@@ -62,7 +62,7 @@
     "@heroui/theme": "workspace:*",
     "@heroui/user": "workspace:*",
     "clean-package": "2.2.0",
-    "framer-motion": "11.9.0",
+    "framer-motion": "11.18.2",
     "react": "18.3.0",
     "react-dom": "18.3.0"
   },

diff --git a/packages/components/modal/package.json b/packages/components/modal/package.json
@@ -68,7 +68,7 @@
     "@heroui/switch": "workspace:*",
     "@heroui/test-utils": "workspace:*",
     "react-lorem-component": "0.13.0",
-    "framer-motion": "11.9.0",
+    "framer-motion": "11.18.2",
     "clean-package": "2.2.0",
     "react": "18.3.0",
     "react-dom": "18.3.0"

diff --git a/packages/components/modal/src/modal-content.tsx b/packages/components/modal/src/modal-content.tsx
@@ -94,7 +94,7 @@ const ModalContent = (props: ModalContentProps) => {
           exit="exit"
           initial="exit"
           variants={TRANSITION_VARIANTS.fade}
-          {...(getBackdropProps() as HTMLMotionProps<"div">)}
+          {...(getBackdropProps() as Omit<HTMLMotionProps<"div">, "ref">)}
         />
       </LazyMotion>
     );

diff --git a/packages/components/modal/src/use-modal.ts b/packages/components/modal/src/use-modal.ts
@@ -22,7 +22,7 @@ interface Props extends HTMLHeroUIProps<"section"> {
   /**
    * The props to modify the framer motion animation. Use the `variants` API to create your own animation.
    */
-  motionProps?: HTMLMotionProps<"section">;
+  motionProps?: Omit<HTMLMotionProps<"section">, "ref">;
   /**
    * Determines whether to hide the modal close button.
    * @default false

diff --git a/packages/components/navbar/package.json b/packages/components/navbar/package.json
@@ -64,7 +64,7 @@
     "@heroui/link": "workspace:*",
     "@heroui/test-utils": "workspace:*",
     "@heroui/shared-icons": "workspace:*",
-    "framer-motion": "11.9.0",
+    "framer-motion": "11.18.2",
     "react-lorem-component": "0.13.0",
     "clean-package": "2.2.0",
     "react": "18.3.0",

diff --git a/packages/components/navbar/src/navbar-menu.tsx b/packages/components/navbar/src/navbar-menu.tsx
@@ -19,7 +19,7 @@ export interface NavbarMenuProps extends HTMLHeroUIProps<"ul"> {
   /**
    * The props to modify the framer motion animation. Use the `variants` API to create your own animation.
    */
-  motionProps?: HTMLMotionProps<"ul">;
+  motionProps?: Omit<HTMLMotionProps<"ul">, "ref">;
 }
 
 const domAnimation = () => import("@heroui/dom-animation").then((res) => res.default);

diff --git a/packages/components/navbar/src/use-navbar.ts b/packages/components/navbar/src/use-navbar.ts
@@ -57,7 +57,7 @@ interface Props extends HTMLHeroUIProps<"nav"> {
    * The props to modify the framer motion animation. Use the `variants` API to create your own animation.
    * This motion is only available if the `shouldHideOnScroll` prop is set to `true`.
    */
-  motionProps?: HTMLMotionProps<"nav">;
+  motionProps?: Omit<HTMLMotionProps<"nav">, "ref">;
   /**
    * The event handler for the menu open state.
    * @param isOpen boolean

diff --git a/packages/components/popover/package.json b/packages/components/popover/package.json
@@ -65,7 +65,7 @@
     "@heroui/theme": "workspace:*",
     "@heroui/test-utils": "workspace:*",
     "clean-package": "2.2.0",
-    "framer-motion": "11.9.0",
+    "framer-motion": "11.18.2",
     "react": "18.3.0",
     "react-dom": "18.3.0"
   },

diff --git a/packages/components/popover/src/free-solo-popover.tsx b/packages/components/popover/src/free-solo-popover.tsx
@@ -135,7 +135,7 @@ const FreeSoloPopover = forwardRef<"div", FreeSoloPopoverProps>(
             exit="exit"
             initial="exit"
             variants={TRANSITION_VARIANTS.fade}
-            {...(getBackdropProps() as HTMLMotionProps<"div">)}
+            {...(getBackdropProps() as Omit<HTMLMotionProps<"div">, "ref">)}
           />
         </LazyMotion>
       );

diff --git a/packages/components/popover/src/popover-content.tsx b/packages/components/popover/src/popover-content.tsx
@@ -74,7 +74,7 @@ const PopoverContent = (props: PopoverContentProps) => {
           exit="exit"
           initial="exit"
           variants={TRANSITION_VARIANTS.fade}
-          {...(getBackdropProps() as HTMLMotionProps<"div">)}
+          {...(getBackdropProps() as Omit<HTMLMotionProps<"div">, "ref">)}
         />
       </LazyMotion>
     );

diff --git a/packages/components/popover/src/use-popover.ts b/packages/components/popover/src/use-popover.ts
@@ -50,7 +50,7 @@ export interface Props extends HTMLHeroUIProps<"div"> {
   /**
    * The props to modify the framer motion animation. Use the `variants` API to create your own animation.
    */
-  motionProps?: HTMLMotionProps<"div">;
+  motionProps?: Omit<HTMLMotionProps<"div">, "ref">;
   /**
    * The container element in which the overlay portal will be placed.
    * @default document.body

diff --git a/packages/components/ripple/package.json b/packages/components/ripple/package.json
@@ -49,7 +49,7 @@
     "@heroui/theme": "workspace:*",
     "@heroui/system": "workspace:*",
     "clean-package": "2.2.0",
-    "framer-motion": "11.9.0",
+    "framer-motion": "11.18.2",
     "react": "18.3.0",
     "react-dom": "18.3.0"
   },

diff --git a/packages/components/ripple/src/ripple.tsx b/packages/components/ripple/src/ripple.tsx
@@ -9,7 +9,7 @@ import {clamp} from "@heroui/shared-utils";
 export interface RippleProps extends HTMLHeroUIProps<"span"> {
   ripples: RippleType[];
   color?: string;
-  motionProps?: HTMLMotionProps<"span">;
+  motionProps?: Omit<HTMLMotionProps<"span">, "ref">;
   style?: React.CSSProperties;
   onClear: (key: React.Key) => void;
 }

diff --git a/packages/components/select/package.json b/packages/components/select/package.json
@@ -75,7 +75,7 @@
     "@react-aria/i18n": "3.12.8",
     "@react-stately/data": "3.12.3",
     "clean-package": "2.2.0",
-    "framer-motion": "11.9.0",
+    "framer-motion": "11.18.2",
     "react": "18.3.0",
     "react-dom": "18.3.0",
     "react-hook-form": "^7.51.3"

diff --git a/packages/components/snippet/package.json b/packages/components/snippet/package.json
@@ -53,7 +53,7 @@
   "devDependencies": {
     "@heroui/theme": "workspace:*",
     "@heroui/system": "workspace:*",
-    "framer-motion": "11.9.0",
+    "framer-motion": "11.18.2",
     "clean-package": "2.2.0",
     "react": "18.3.0",
     "react-dom": "18.3.0"

diff --git a/packages/components/tabs/package.json b/packages/components/tabs/package.json
@@ -59,7 +59,7 @@
   "devDependencies": {
     "@heroui/theme": "workspace:*",
     "@heroui/system": "workspace:*",
-    "framer-motion": "11.9.0",
+    "framer-motion": "11.18.2",
     "react-lorem-component": "0.13.0",
     "@heroui/card": "workspace:*",
     "@heroui/input": "workspace:*",

diff --git a/packages/components/tabs/src/use-tabs.ts b/packages/components/tabs/src/use-tabs.ts
@@ -21,7 +21,7 @@ export interface Props extends Omit<HTMLHeroUIProps, "children"> {
   /**
    * The props to modify the cursor motion animation. Use the `variants` API to create your own animation.
    */
-  motionProps?: HTMLMotionProps<"span">;
+  motionProps?: Omit<HTMLMotionProps<"span">, "ref">;
   /**
    * Whether the tabs selection should occur on press up instead of press down.
    * @default true
@@ -77,7 +77,7 @@ export type ValuesType<T = object> = {
   listRef?: RefObject<HTMLElement>;
   shouldSelectOnPressUp?: boolean;
   classNames?: SlotsToClasses<TabsSlots>;
-  motionProps?: HTMLMotionProps<"span">;
+  motionProps?: Omit<HTMLMotionProps<"span">, "ref">;
   disableAnimation?: boolean;
   isDisabled?: boolean;
 };

diff --git a/packages/components/tooltip/package.json b/packages/components/tooltip/package.json
@@ -61,7 +61,7 @@
     "@heroui/theme": "workspace:*",
     "@heroui/test-utils": "workspace:*",
     "clean-package": "2.2.0",
-    "framer-motion": "11.9.0"
+    "framer-motion": "11.18.2"
   },
   "clean-package": "../../../clean-package.config.json"
 }
diff --git a/packages/components/tooltip/src/use-tooltip.ts b/packages/components/tooltip/src/use-tooltip.ts
@@ -52,7 +52,7 @@ interface Props extends Omit<HTMLHeroUIProps, "content"> {
   /**
    * The props to modify the framer motion animation. Use the `variants` API to create your own animation.
    */
-  motionProps?: HTMLMotionProps<"div">;
+  motionProps?: Omit<HTMLMotionProps<"div">, "ref">;
   /**
    * The container element in which the overlay portal will be placed.
    * @default document.body

diff --git a/packages/core/system/package.json b/packages/core/system/package.json
@@ -40,7 +40,7 @@
   },
   "devDependencies": {
     "clean-package": "2.2.0",
-    "framer-motion": "11.9.0",
+    "framer-motion": "11.18.2",
     "react": "18.3.0",
     "react-dom": "18.3.0"
   },

diff --git a/packages/utilities/dom-animation/package.json b/packages/utilities/dom-animation/package.json
@@ -38,7 +38,7 @@
   },
   "devDependencies": {
     "clean-package": "2.2.0",
-    "framer-motion": "11.9.0"
+    "framer-motion": "11.18.2"
   },
   "clean-package": "../../../clean-package.config.json"
 }
diff --git a/packages/utilities/framer-utils/package.json b/packages/utilities/framer-utils/package.json
@@ -47,7 +47,7 @@
     "react": "18.3.0",
     "react-dom": "18.3.0",
     "clean-package": "2.2.0",
-    "framer-motion": "11.9.0"
+    "framer-motion": "11.18.2"
   },
   "clean-package": "../../../clean-package.config.json"
 }