From b5c948a2e2a2d65fd0f49192b83f3424e600731b Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 29 Jun 2024 13:40:01 +0800
Subject: [PATCH 01/31] refactor(ripple): load domAnimation dynamically

---
 packages/components/ripple/src/domAnimation.tsx | 2 ++
 packages/components/ripple/src/ripple.tsx       | 4 +++-
 2 files changed, 5 insertions(+), 1 deletion(-)
 create mode 100644 packages/components/ripple/src/domAnimation.tsx

diff --git a/packages/components/ripple/src/domAnimation.tsx b/packages/components/ripple/src/domAnimation.tsx
new file mode 100644
index 0000000000..0f667e5069
--- /dev/null
+++ b/packages/components/ripple/src/domAnimation.tsx
@@ -0,0 +1,2 @@
+import {domAnimation} from "framer-motion";
+export default domAnimation;
diff --git a/packages/components/ripple/src/ripple.tsx b/packages/components/ripple/src/ripple.tsx
index 92caacc451..7abc0d03b8 100644
--- a/packages/components/ripple/src/ripple.tsx
+++ b/packages/components/ripple/src/ripple.tsx
@@ -3,7 +3,7 @@ import type {FC} from "react";
 import type {HTMLMotionProps} from "framer-motion";
 import type {HTMLNextUIProps} from "@nextui-org/system";
 
-import {AnimatePresence, m, LazyMotion, domAnimation} from "framer-motion";
+import {AnimatePresence, m, LazyMotion} from "framer-motion";
 import {clamp} from "@nextui-org/shared-utils";
 
 export interface RippleProps extends HTMLNextUIProps<"span"> {
@@ -17,6 +17,8 @@ export interface RippleProps extends HTMLNextUIProps<"span"> {
 const Ripple: FC<RippleProps> = (props) => {
   const {ripples = [], motionProps, color = "currentColor", style, onClear} = props;
 
+  const domAnimation = () => import("./domAnimation").then((res) => res.default);
+
   return (
     <>
       {ripples.map((ripple) => {

From b6b968f9d84f496d9a30c5a469595ddb9cf9d117 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 29 Jun 2024 13:52:27 +0800
Subject: [PATCH 02/31] refactor(modal): load domAnimation dynamically

---
 .../components/modal/src/dom-animation.tsx    |  2 +
 .../components/modal/src/modal-content.tsx    | 50 +++++++++++--------
 2 files changed, 32 insertions(+), 20 deletions(-)
 create mode 100644 packages/components/modal/src/dom-animation.tsx

diff --git a/packages/components/modal/src/dom-animation.tsx b/packages/components/modal/src/dom-animation.tsx
new file mode 100644
index 0000000000..0f667e5069
--- /dev/null
+++ b/packages/components/modal/src/dom-animation.tsx
@@ -0,0 +1,2 @@
+import {domAnimation} from "framer-motion";
+export default domAnimation;
diff --git a/packages/components/modal/src/modal-content.tsx b/packages/components/modal/src/modal-content.tsx
index 23fec3da48..35f30186f7 100644
--- a/packages/components/modal/src/modal-content.tsx
+++ b/packages/components/modal/src/modal-content.tsx
@@ -6,7 +6,7 @@ import {forwardRef} from "@nextui-org/system";
 import {DismissButton} from "@react-aria/overlays";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
 import {CloseIcon} from "@nextui-org/shared-icons";
-import {domAnimation, LazyMotion, m} from "framer-motion";
+import {LazyMotion, m} from "framer-motion";
 import {useDialog} from "@react-aria/dialog";
 import {chain, mergeProps} from "@react-aria/utils";
 import {HTMLNextUIProps} from "@nextui-org/system";
@@ -84,6 +84,8 @@ const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _)
       return <div {...getBackdropProps()} />;
     }
 
+    const domAnimation = () => import("./dom-animation").then((res) => res.default);
+
     return (
       <LazyMotion features={domAnimation}>
         <m.div
@@ -97,25 +99,33 @@ const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _)
     );
   }, [backdrop, disableAnimation, getBackdropProps]);
 
-  const contents = disableAnimation ? (
-    <div className={slots.wrapper({class: classNames?.wrapper})} data-slot="wrapper">
-      {content}
-    </div>
-  ) : (
-    <LazyMotion features={domAnimation}>
-      <m.div
-        animate="enter"
-        className={slots.wrapper({class: classNames?.wrapper})}
-        data-slot="wrapper"
-        exit="exit"
-        initial="exit"
-        variants={scaleInOut}
-        {...motionProps}
-      >
-        {content}
-      </m.div>
-    </LazyMotion>
-  );
+  const contents = useMemo(() => {
+    if (disableAnimation) {
+      return (
+        <div className={slots.wrapper({class: classNames?.wrapper})} data-slot="wrapper">
+          {content}
+        </div>
+      );
+    }
+
+    const domAnimation = () => import("./dom-animation").then((res) => res.default);
+
+    return (
+      <LazyMotion features={domAnimation}>
+        <m.div
+          animate="enter"
+          className={slots.wrapper({class: classNames?.wrapper})}
+          data-slot="wrapper"
+          exit="exit"
+          initial="exit"
+          variants={scaleInOut}
+          {...motionProps}
+        >
+          {content}
+        </m.div>
+      </LazyMotion>
+    );
+  }, [disableAnimation, classNames, motionProps]);
 
   return (
     <div tabIndex={-1}>

From e46ed61b0ca10b859418dd3a06797daea28bd8fa Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 29 Jun 2024 13:53:11 +0800
Subject: [PATCH 03/31] refactor(accordion): load domAnimation dynamically

---
 packages/components/accordion/src/accordion-item.tsx | 4 +++-
 packages/components/accordion/src/dom-animation.tsx  | 2 ++
 2 files changed, 5 insertions(+), 1 deletion(-)
 create mode 100644 packages/components/accordion/src/dom-animation.tsx

diff --git a/packages/components/accordion/src/accordion-item.tsx b/packages/components/accordion/src/accordion-item.tsx
index 16022bedd4..fc2b115d4c 100644
--- a/packages/components/accordion/src/accordion-item.tsx
+++ b/packages/components/accordion/src/accordion-item.tsx
@@ -3,7 +3,7 @@ import type {Variants} from "framer-motion";
 import {forwardRef} from "@nextui-org/system";
 import {useMemo, ReactNode} from "react";
 import {ChevronIcon} from "@nextui-org/shared-icons";
-import {AnimatePresence, LazyMotion, domAnimation, m, useWillChange} from "framer-motion";
+import {AnimatePresence, LazyMotion, m, useWillChange} from "framer-motion";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
 
 import {UseAccordionItemProps, useAccordionItem} from "./use-accordion-item";
@@ -60,6 +60,8 @@ const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => {
       enter: {...TRANSITION_VARIANTS.collapse.enter, overflowY: "unset"},
     };
 
+    const domAnimation = () => import("./dom-animation").then((res) => res.default);
+
     return keepContentMounted ? (
       <LazyMotion features={domAnimation}>
         <m.section
diff --git a/packages/components/accordion/src/dom-animation.tsx b/packages/components/accordion/src/dom-animation.tsx
new file mode 100644
index 0000000000..0f667e5069
--- /dev/null
+++ b/packages/components/accordion/src/dom-animation.tsx
@@ -0,0 +1,2 @@
+import {domAnimation} from "framer-motion";
+export default domAnimation;

From afda27586ea468bb2a4622ac15de1ee7163907e7 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 29 Jun 2024 13:55:25 +0800
Subject: [PATCH 04/31] refactor(ripple): rename domAnimation

---
 .../ripple/src/{domAnimation.tsx => dom-animation.tsx}          | 0
 packages/components/ripple/src/ripple.tsx                       | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename packages/components/ripple/src/{domAnimation.tsx => dom-animation.tsx} (100%)

diff --git a/packages/components/ripple/src/domAnimation.tsx b/packages/components/ripple/src/dom-animation.tsx
similarity index 100%
rename from packages/components/ripple/src/domAnimation.tsx
rename to packages/components/ripple/src/dom-animation.tsx
diff --git a/packages/components/ripple/src/ripple.tsx b/packages/components/ripple/src/ripple.tsx
index 7abc0d03b8..9b6d48efbe 100644
--- a/packages/components/ripple/src/ripple.tsx
+++ b/packages/components/ripple/src/ripple.tsx
@@ -17,7 +17,7 @@ export interface RippleProps extends HTMLNextUIProps<"span"> {
 const Ripple: FC<RippleProps> = (props) => {
   const {ripples = [], motionProps, color = "currentColor", style, onClear} = props;
 
-  const domAnimation = () => import("./domAnimation").then((res) => res.default);
+  const domAnimation = () => import("./dom-animation").then((res) => res.default);
 
   return (
     <>

From 4151d5bce9dd1d57a9658bcc34a1b09a25114dcf Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 29 Jun 2024 14:01:47 +0800
Subject: [PATCH 05/31] refactor(popover): load domAnimation dynamically

---
 .../components/popover/src/dom-animation.tsx  |  2 ++
 .../popover/src/free-solo-popover.tsx         | 20 +++++++++++++------
 2 files changed, 16 insertions(+), 6 deletions(-)
 create mode 100644 packages/components/popover/src/dom-animation.tsx

diff --git a/packages/components/popover/src/dom-animation.tsx b/packages/components/popover/src/dom-animation.tsx
new file mode 100644
index 0000000000..0f667e5069
--- /dev/null
+++ b/packages/components/popover/src/dom-animation.tsx
@@ -0,0 +1,2 @@
+import {domAnimation} from "framer-motion";
+export default domAnimation;
diff --git a/packages/components/popover/src/free-solo-popover.tsx b/packages/components/popover/src/free-solo-popover.tsx
index 036a0ce348..902bcfef18 100644
--- a/packages/components/popover/src/free-solo-popover.tsx
+++ b/packages/components/popover/src/free-solo-popover.tsx
@@ -10,7 +10,7 @@
 import * as React from "react";
 import {DismissButton, Overlay} from "@react-aria/overlays";
 import {forwardRef} from "@nextui-org/system";
-import {domAnimation, HTMLMotionProps, LazyMotion, m} from "framer-motion";
+import {HTMLMotionProps, LazyMotion, m} from "framer-motion";
 import {mergeProps} from "@react-aria/utils";
 import {getTransformOrigins} from "@nextui-org/aria-utils";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
@@ -62,11 +62,17 @@ const FreeSoloPopoverWrapper = forwardRef<"div", FreeSoloPopoverWrapperProps>(
       };
     }
 
-    return disableAnimation ? (
-      <div {...otherProps} ref={ref}>
-        {children}
-      </div>
-    ) : (
+    if (disableAnimation) {
+      return (
+        <div {...otherProps} ref={ref}>
+          {children}
+        </div>
+      );
+    }
+
+    const domAnimation = () => import("./dom-animation").then((res) => res.default);
+
+    return (
       <LazyMotion features={domAnimation}>
         <m.div
           ref={ref}
@@ -122,6 +128,8 @@ const FreeSoloPopover = forwardRef<"div", FreeSoloPopoverProps>(
         return <div {...getBackdropProps()} />;
       }
 
+      const domAnimation = () => import("./dom-animation").then((res) => res.default);
+
       return (
         <LazyMotion features={domAnimation}>
           <m.div

From 5007d7e9747ab7ab47a2b3249ac66a5f1ff2a2ee Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 29 Jun 2024 14:06:12 +0800
Subject: [PATCH 06/31] refactor(popover): load domAnimation dynamically

---
 .../popover/src/popover-content.tsx           | 46 +++++++++++--------
 1 file changed, 27 insertions(+), 19 deletions(-)

diff --git a/packages/components/popover/src/popover-content.tsx b/packages/components/popover/src/popover-content.tsx
index 4f64da3257..547f66c12b 100644
--- a/packages/components/popover/src/popover-content.tsx
+++ b/packages/components/popover/src/popover-content.tsx
@@ -5,7 +5,7 @@ import {DOMAttributes, ReactNode, useMemo, useRef} from "react";
 import {forwardRef} from "@nextui-org/system";
 import {DismissButton} from "@react-aria/overlays";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
-import {m, domAnimation, LazyMotion} from "framer-motion";
+import {m, LazyMotion} from "framer-motion";
 import {HTMLNextUIProps} from "@nextui-org/system";
 import {RemoveScroll} from "react-remove-scroll";
 import {getTransformOrigins} from "@nextui-org/aria-utils";
@@ -69,6 +69,8 @@ const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
       return <div {...getBackdropProps()} />;
     }
 
+    const domAnimation = () => import("./dom-animation").then((res) => res.default);
+
     return (
       <LazyMotion features={domAnimation}>
         <m.div
@@ -82,26 +84,32 @@ const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
     );
   }, [backdrop, disableAnimation, getBackdropProps]);
 
+  const removeScrollContent = useMemo(() => {
+    if (disableAnimation) return content;
+
+    const domAnimation = () => import("./dom-animation").then((res) => res.default);
+
+    return (
+      <LazyMotion features={domAnimation}>
+        <m.div
+          animate="enter"
+          exit="exit"
+          initial="initial"
+          style={{
+            ...getTransformOrigins(placement === "center" ? "top" : placement),
+          }}
+          variants={TRANSITION_VARIANTS.scaleSpringOpacity}
+          {...motionProps}
+        >
+          {content}
+        </m.div>
+      </LazyMotion>
+    );
+  }, [disableAnimation, getTransformOrigins]);
+
   const contents = (
     <RemoveScroll enabled={shouldBlockScroll && isOpen} removeScrollBar={false}>
-      {disableAnimation ? (
-        content
-      ) : (
-        <LazyMotion features={domAnimation}>
-          <m.div
-            animate="enter"
-            exit="exit"
-            initial="initial"
-            style={{
-              ...getTransformOrigins(placement === "center" ? "top" : placement),
-            }}
-            variants={TRANSITION_VARIANTS.scaleSpringOpacity}
-            {...motionProps}
-          >
-            {content}
-          </m.div>
-        </LazyMotion>
-      )}
+      {removeScrollContent}
     </RemoveScroll>
   );
 

From ba392d37cf0666e248d80f25269958f0dc3980b2 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 29 Jun 2024 15:36:59 +0800
Subject: [PATCH 07/31] refactor(tooltip): load domAnimation dynamically

---
 .../components/tooltip/src/dom-animation.tsx  |  2 +
 packages/components/tooltip/src/tooltip.tsx   | 44 ++++++++++---------
 2 files changed, 26 insertions(+), 20 deletions(-)
 create mode 100644 packages/components/tooltip/src/dom-animation.tsx

diff --git a/packages/components/tooltip/src/dom-animation.tsx b/packages/components/tooltip/src/dom-animation.tsx
new file mode 100644
index 0000000000..0f667e5069
--- /dev/null
+++ b/packages/components/tooltip/src/dom-animation.tsx
@@ -0,0 +1,2 @@
+import {domAnimation} from "framer-motion";
+export default domAnimation;
diff --git a/packages/components/tooltip/src/tooltip.tsx b/packages/components/tooltip/src/tooltip.tsx
index 3bfa32c309..b967de67b5 100644
--- a/packages/components/tooltip/src/tooltip.tsx
+++ b/packages/components/tooltip/src/tooltip.tsx
@@ -1,9 +1,9 @@
 import {forwardRef} from "@nextui-org/system";
 import {OverlayContainer} from "@react-aria/overlays";
-import {AnimatePresence, m, LazyMotion, domAnimation} from "framer-motion";
+import {AnimatePresence, m, LazyMotion} from "framer-motion";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
 import {warn} from "@nextui-org/shared-utils";
-import {Children, cloneElement, isValidElement} from "react";
+import {useMemo, Children, cloneElement, isValidElement} from "react";
 import {getTransformOrigins} from "@nextui-org/aria-utils";
 import {mergeProps} from "@react-aria/utils";
 
@@ -55,24 +55,28 @@ const Tooltip = forwardRef<"div", TooltipProps>((props, ref) => {
 
   const {ref: tooltipRef, id, style, ...otherTooltipProps} = getTooltipProps();
 
-  const animatedContent = (
-    <div ref={tooltipRef} id={id} style={style}>
-      <LazyMotion features={domAnimation}>
-        <m.div
-          animate="enter"
-          exit="exit"
-          initial="exit"
-          variants={TRANSITION_VARIANTS.scaleSpring}
-          {...mergeProps(motionProps, otherTooltipProps)}
-          style={{
-            ...getTransformOrigins(placement),
-          }}
-        >
-          <Component {...getTooltipContentProps()}>{content}</Component>
-        </m.div>
-      </LazyMotion>
-    </div>
-  );
+  const animatedContent = useMemo(() => {
+    const domAnimation = () => import("./dom-animation").then((res) => res.default);
+
+    return (
+      <div ref={tooltipRef} id={id} style={style}>
+        <LazyMotion features={domAnimation}>
+          <m.div
+            animate="enter"
+            exit="exit"
+            initial="exit"
+            variants={TRANSITION_VARIANTS.scaleSpring}
+            {...mergeProps(motionProps, otherTooltipProps)}
+            style={{
+              ...getTransformOrigins(placement),
+            }}
+          >
+            <Component {...getTooltipContentProps()}>{content}</Component>
+          </m.div>
+        </LazyMotion>
+      </div>
+    );
+  }, [motionProps, otherTooltipProps, getTransformOrigins, getTooltipContentProps]);
 
   return (
     <>

From b6d92b3faa7d7ddfe1b4682857e250f345022558 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 29 Jun 2024 15:41:52 +0800
Subject: [PATCH 08/31] refactor(navbar): load domAnimation dynamically

---
 .../components/navbar/src/dom-animation.tsx   |  2 ++
 packages/components/navbar/src/navbar.tsx     | 29 +++++++++++++------
 2 files changed, 22 insertions(+), 9 deletions(-)
 create mode 100644 packages/components/navbar/src/dom-animation.tsx

diff --git a/packages/components/navbar/src/dom-animation.tsx b/packages/components/navbar/src/dom-animation.tsx
new file mode 100644
index 0000000000..0f667e5069
--- /dev/null
+++ b/packages/components/navbar/src/dom-animation.tsx
@@ -0,0 +1,2 @@
+import {domAnimation} from "framer-motion";
+export default domAnimation;
diff --git a/packages/components/navbar/src/navbar.tsx b/packages/components/navbar/src/navbar.tsx
index 6fe07b9a1c..cb5a2b887f 100644
--- a/packages/components/navbar/src/navbar.tsx
+++ b/packages/components/navbar/src/navbar.tsx
@@ -1,6 +1,7 @@
+import {useMemo} from "react";
 import {forwardRef} from "@nextui-org/system";
 import {pickChildren} from "@nextui-org/react-utils";
-import {LazyMotion, domAnimation, m} from "framer-motion";
+import {LazyMotion, m} from "framer-motion";
 import {mergeProps} from "@react-aria/utils";
 
 import {hideOnScrollVariants} from "./navbar-transitions";
@@ -28,9 +29,11 @@ const Navbar = forwardRef<"div", NavbarProps>((props, ref) => {
     </>
   );
 
-  return (
-    <NavbarProvider value={context}>
-      {context.shouldHideOnScroll ? (
+  const contents = useMemo(() => {
+    if (context.shouldHideOnScroll) {
+      const domAnimation = () => import("./dom-animation").then((res) => res.default);
+
+      return (
         <LazyMotion features={domAnimation}>
           <m.nav
             animate={context.isHidden ? "hidden" : "visible"}
@@ -41,11 +44,19 @@ const Navbar = forwardRef<"div", NavbarProps>((props, ref) => {
             {content}
           </m.nav>
         </LazyMotion>
-      ) : (
-        <Component {...context.getBaseProps()}>{content}</Component>
-      )}
-    </NavbarProvider>
-  );
+      );
+    }
+
+    return <Component {...context.getBaseProps()}>{content}</Component>;
+  }, [
+    context.shouldHideOnScroll,
+    context.motionProps,
+    context.isHidden,
+    context.getBaseProps,
+    content,
+  ]);
+
+  return <NavbarProvider value={context}>{contents}</NavbarProvider>;
 });
 
 Navbar.displayName = "NextUI.Navbar";

From 2ad3855b04cffc8d807fac9486dca3f2c8c4a78c Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 29 Jun 2024 15:45:02 +0800
Subject: [PATCH 09/31] refactor(tabs): load domAnimation dynamically

---
 .../components/tabs/src/dom-animation.tsx     |  2 +
 packages/components/tabs/src/tab.tsx          | 45 ++++++++++++-------
 2 files changed, 30 insertions(+), 17 deletions(-)
 create mode 100644 packages/components/tabs/src/dom-animation.tsx

diff --git a/packages/components/tabs/src/dom-animation.tsx b/packages/components/tabs/src/dom-animation.tsx
new file mode 100644
index 0000000000..0f667e5069
--- /dev/null
+++ b/packages/components/tabs/src/dom-animation.tsx
@@ -0,0 +1,2 @@
+import {domAnimation} from "framer-motion";
+export default domAnimation;
diff --git a/packages/components/tabs/src/tab.tsx b/packages/components/tabs/src/tab.tsx
index 1be4868b4e..b952842e23 100644
--- a/packages/components/tabs/src/tab.tsx
+++ b/packages/components/tabs/src/tab.tsx
@@ -1,5 +1,6 @@
 import type {TabItemProps as BaseTabItemProps} from "./base/tab-item-base";
 
+import {useMemo} from "react";
 import {forwardRef} from "@nextui-org/system";
 import {useDOMRef, filterDOMProps} from "@nextui-org/react-utils";
 import {clsx, dataAttr} from "@nextui-org/shared-utils";
@@ -9,7 +10,7 @@ import {useFocusRing} from "@react-aria/focus";
 import {Node} from "@react-types/shared";
 import {useTab} from "@react-aria/tabs";
 import {useHover} from "@react-aria/interactions";
-import {m, domMax, LazyMotion} from "framer-motion";
+import {m, LazyMotion} from "framer-motion";
 import {useIsMounted} from "@nextui-org/use-is-mounted";
 
 import {ValuesType} from "./use-tabs";
@@ -92,6 +93,31 @@ const Tab = forwardRef<"button", TabItemProps>((props, ref) => {
     });
   };
 
+  const cursor = useMemo(() => {
+    const domAnimation = () => import("./dom-animation").then((res) => res.default);
+
+    if (isSelected && !disableAnimation && !disableCursorAnimation && isMounted) {
+      return (
+        <LazyMotion features={domAnimation}>
+          <m.span
+            className={slots.cursor({class: classNames?.cursor})}
+            data-slot="cursor"
+            layoutDependency={false}
+            layoutId="cursor"
+            transition={{
+              type: "spring",
+              bounce: 0.15,
+              duration: 0.5,
+            }}
+            {...motionProps}
+          />
+        </LazyMotion>
+      );
+    }
+
+    return null;
+  }, [isSelected, disableAnimation, disableCursorAnimation, isMounted, motionProps]);
+
   return (
     <Component
       ref={domRef}
@@ -121,22 +147,7 @@ const Tab = forwardRef<"button", TabItemProps>((props, ref) => {
       title={otherProps?.titleValue}
       type={Component === "button" ? "button" : undefined}
     >
-      {isSelected && !disableAnimation && !disableCursorAnimation && isMounted ? (
-        <LazyMotion features={domMax}>
-          <m.span
-            className={slots.cursor({class: classNames?.cursor})}
-            data-slot="cursor"
-            layoutDependency={false}
-            layoutId="cursor"
-            transition={{
-              type: "spring",
-              bounce: 0.15,
-              duration: 0.5,
-            }}
-            {...motionProps}
-          />
-        </LazyMotion>
-      ) : null}
+      {cursor}
       <div
         className={slots.tabContent({
           class: classNames?.tabContent,

From 32d469982881da367daaf4f115c39fb01e7acb06 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 29 Jun 2024 15:45:26 +0800
Subject: [PATCH 10/31] refactor(tabs): import only needed

---
 packages/components/tabs/src/tab.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/tabs/src/tab.tsx b/packages/components/tabs/src/tab.tsx
index b952842e23..c3e5d6915a 100644
--- a/packages/components/tabs/src/tab.tsx
+++ b/packages/components/tabs/src/tab.tsx
@@ -94,9 +94,9 @@ const Tab = forwardRef<"button", TabItemProps>((props, ref) => {
   };
 
   const cursor = useMemo(() => {
-    const domAnimation = () => import("./dom-animation").then((res) => res.default);
-
     if (isSelected && !disableAnimation && !disableCursorAnimation && isMounted) {
+      const domAnimation = () => import("./dom-animation").then((res) => res.default);
+
       return (
         <LazyMotion features={domAnimation}>
           <m.span

From 995bc696ecca9d7725c374a4e53dd689477fc78b Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 29 Jun 2024 16:09:09 +0800
Subject: [PATCH 11/31] refactor(navbar): load domAnimation dynamically

---
 .../components/navbar/src/navbar-menu.tsx     | 51 +++++++++++--------
 1 file changed, 30 insertions(+), 21 deletions(-)

diff --git a/packages/components/navbar/src/navbar-menu.tsx b/packages/components/navbar/src/navbar-menu.tsx
index 6b010b9e18..a0e520b979 100644
--- a/packages/components/navbar/src/navbar-menu.tsx
+++ b/packages/components/navbar/src/navbar-menu.tsx
@@ -1,7 +1,8 @@
+import {useMemo} from "react";
 import {forwardRef, HTMLNextUIProps} from "@nextui-org/system";
 import {useDOMRef} from "@nextui-org/react-utils";
 import {clsx, dataAttr} from "@nextui-org/shared-utils";
-import {AnimatePresence, domAnimation, HTMLMotionProps, LazyMotion, m} from "framer-motion";
+import {AnimatePresence, HTMLMotionProps, LazyMotion, m} from "framer-motion";
 import {mergeProps} from "@react-aria/utils";
 import {ReactElement, useCallback} from "react";
 import {RemoveScroll} from "react-remove-scroll";
@@ -42,24 +43,11 @@ const NavbarMenu = forwardRef<"ul", NavbarMenuProps>((props, ref) => {
     [isMenuOpen],
   );
 
-  const contents = disableAnimation ? (
-    <MenuWrapper>
-      <ul
-        ref={domRef}
-        className={slots.menu?.({class: styles})}
-        data-open={dataAttr(isMenuOpen)}
-        style={{
-          // @ts-expect-error
-          "--navbar-height": height,
-        }}
-        {...otherProps}
-      >
-        {children}
-      </ul>
-    </MenuWrapper>
-  ) : (
-    <AnimatePresence mode="wait">
-      {isMenuOpen ? (
+  const content = useMemo(() => {
+    if (isMenuOpen) {
+      const domAnimation = () => import("./dom-animation").then((res) => res.default);
+
+      return (
         <LazyMotion features={domAnimation}>
           <MenuWrapper>
             <m.ul
@@ -82,8 +70,29 @@ const NavbarMenu = forwardRef<"ul", NavbarMenuProps>((props, ref) => {
             </m.ul>
           </MenuWrapper>
         </LazyMotion>
-      ) : null}
-    </AnimatePresence>
+      );
+    }
+
+    return null;
+  }, [otherProps, motionProps, height, style]);
+
+  const contents = disableAnimation ? (
+    <MenuWrapper>
+      <ul
+        ref={domRef}
+        className={slots.menu?.({class: styles})}
+        data-open={dataAttr(isMenuOpen)}
+        style={{
+          // @ts-expect-error
+          "--navbar-height": height,
+        }}
+        {...otherProps}
+      >
+        {children}
+      </ul>
+    </MenuWrapper>
+  ) : (
+    <AnimatePresence mode="wait">{content}</AnimatePresence>
   );
 
   return <Overlay portalContainer={portalContainer}>{contents}</Overlay>;

From ddc0f41edda8c55f7389d6001838064994eb3de2 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 29 Jun 2024 16:18:43 +0800
Subject: [PATCH 12/31] refactor(calendar): load domAnimation dynamically

---
 .../components/calendar/src/calendar-base.tsx | 52 +++++++++++--------
 .../components/calendar/src/dom-animation.tsx |  2 +
 2 files changed, 33 insertions(+), 21 deletions(-)
 create mode 100644 packages/components/calendar/src/dom-animation.tsx

diff --git a/packages/components/calendar/src/calendar-base.tsx b/packages/components/calendar/src/calendar-base.tsx
index 0d5def77b1..334719e61f 100644
--- a/packages/components/calendar/src/calendar-base.tsx
+++ b/packages/components/calendar/src/calendar-base.tsx
@@ -3,13 +3,12 @@ import type {As, HTMLNextUIProps} from "@nextui-org/system";
 import type {ButtonProps} from "@nextui-org/button";
 import type {HTMLAttributes, ReactNode, RefObject} from "react";
 
-import {Fragment} from "react";
-import {useState} from "react";
+import {Fragment, useState, useMemo} from "react";
 import {useLocale} from "@react-aria/i18n";
 import {VisuallyHidden} from "@react-aria/visually-hidden";
 import {Button} from "@nextui-org/button";
 import {chain, mergeProps} from "@react-aria/utils";
-import {AnimatePresence, LazyMotion, domAnimation, MotionConfig} from "framer-motion";
+import {AnimatePresence, LazyMotion, MotionConfig} from "framer-motion";
 import {ResizablePanel} from "@nextui-org/framer-utils";
 
 import {ChevronLeftIcon} from "./chevron-left";
@@ -133,6 +132,34 @@ export function CalendarBase(props: CalendarBaseProps) {
     </>
   );
 
+  const content = useMemo(() => {
+    if (disableAnimation) {
+      return (
+        <div className={slots?.content({class: classNames?.content})} data-slot="content">
+          {calendarContent}
+        </div>
+      );
+    }
+
+    const domAnimation = () => import("./dom-animation").then((res) => res.default);
+
+    return (
+      <ResizablePanel
+        data-
+        className={slots?.content({class: classNames?.content})}
+        data-slot="content"
+      >
+        <AnimatePresence custom={direction} initial={false} mode="popLayout">
+          <>
+            <MotionConfig transition={transition}>
+              <LazyMotion features={domAnimation}>{calendarContent}</LazyMotion>
+            </MotionConfig>
+          </>
+        </AnimatePresence>
+      </ResizablePanel>
+    );
+  }, [direction, transition, calendarContent]);
+
   return (
     <Component {...mergeProps(calendarProps, otherProps)} ref={ref}>
       {topContent}
@@ -144,24 +171,7 @@ export function CalendarBase(props: CalendarBaseProps) {
       <VisuallyHidden>
         <h2>{calendarProps["aria-label"]}</h2>
       </VisuallyHidden>
-      {disableAnimation ? (
-        <div className={slots?.content({class: classNames?.content})} data-slot="content">
-          {calendarContent}
-        </div>
-      ) : (
-        <ResizablePanel
-          className={slots?.content({class: classNames?.content})}
-          data-slot="content"
-        >
-          <AnimatePresence custom={direction} initial={false} mode="popLayout">
-            <>
-              <MotionConfig transition={transition}>
-                <LazyMotion features={domAnimation}>{calendarContent}</LazyMotion>
-              </MotionConfig>
-            </>
-          </AnimatePresence>
-        </ResizablePanel>
-      )}
+      {content}
       {/* For touch screen readers, add a visually hidden next button after the month grid
        * so it's easy to navigate after reaching the end without going all the way
        * back to the start of the month. */}
diff --git a/packages/components/calendar/src/dom-animation.tsx b/packages/components/calendar/src/dom-animation.tsx
new file mode 100644
index 0000000000..0f667e5069
--- /dev/null
+++ b/packages/components/calendar/src/dom-animation.tsx
@@ -0,0 +1,2 @@
+import {domAnimation} from "framer-motion";
+export default domAnimation;

From 2a8ec9507517c0ea5c05f4aa5a85001c89dd1dce Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 29 Jun 2024 16:21:11 +0800
Subject: [PATCH 13/31] refactor(components): revise extension

---
 .../accordion/src/{dom-animation.tsx => dom-animation.ts}         | 0
 .../calendar/src/{dom-animation.tsx => dom-animation.ts}          | 0
 .../components/modal/src/{dom-animation.tsx => dom-animation.ts}  | 0
 .../components/navbar/src/{dom-animation.tsx => dom-animation.ts} | 0
 .../popover/src/{dom-animation.tsx => dom-animation.ts}           | 0
 .../components/ripple/src/{dom-animation.tsx => dom-animation.ts} | 0
 .../components/tabs/src/{dom-animation.tsx => dom-animation.ts}   | 0
 .../tooltip/src/{dom-animation.tsx => dom-animation.ts}           | 0
 8 files changed, 0 insertions(+), 0 deletions(-)
 rename packages/components/accordion/src/{dom-animation.tsx => dom-animation.ts} (100%)
 rename packages/components/calendar/src/{dom-animation.tsx => dom-animation.ts} (100%)
 rename packages/components/modal/src/{dom-animation.tsx => dom-animation.ts} (100%)
 rename packages/components/navbar/src/{dom-animation.tsx => dom-animation.ts} (100%)
 rename packages/components/popover/src/{dom-animation.tsx => dom-animation.ts} (100%)
 rename packages/components/ripple/src/{dom-animation.tsx => dom-animation.ts} (100%)
 rename packages/components/tabs/src/{dom-animation.tsx => dom-animation.ts} (100%)
 rename packages/components/tooltip/src/{dom-animation.tsx => dom-animation.ts} (100%)

diff --git a/packages/components/accordion/src/dom-animation.tsx b/packages/components/accordion/src/dom-animation.ts
similarity index 100%
rename from packages/components/accordion/src/dom-animation.tsx
rename to packages/components/accordion/src/dom-animation.ts
diff --git a/packages/components/calendar/src/dom-animation.tsx b/packages/components/calendar/src/dom-animation.ts
similarity index 100%
rename from packages/components/calendar/src/dom-animation.tsx
rename to packages/components/calendar/src/dom-animation.ts
diff --git a/packages/components/modal/src/dom-animation.tsx b/packages/components/modal/src/dom-animation.ts
similarity index 100%
rename from packages/components/modal/src/dom-animation.tsx
rename to packages/components/modal/src/dom-animation.ts
diff --git a/packages/components/navbar/src/dom-animation.tsx b/packages/components/navbar/src/dom-animation.ts
similarity index 100%
rename from packages/components/navbar/src/dom-animation.tsx
rename to packages/components/navbar/src/dom-animation.ts
diff --git a/packages/components/popover/src/dom-animation.tsx b/packages/components/popover/src/dom-animation.ts
similarity index 100%
rename from packages/components/popover/src/dom-animation.tsx
rename to packages/components/popover/src/dom-animation.ts
diff --git a/packages/components/ripple/src/dom-animation.tsx b/packages/components/ripple/src/dom-animation.ts
similarity index 100%
rename from packages/components/ripple/src/dom-animation.tsx
rename to packages/components/ripple/src/dom-animation.ts
diff --git a/packages/components/tabs/src/dom-animation.tsx b/packages/components/tabs/src/dom-animation.ts
similarity index 100%
rename from packages/components/tabs/src/dom-animation.tsx
rename to packages/components/tabs/src/dom-animation.ts
diff --git a/packages/components/tooltip/src/dom-animation.tsx b/packages/components/tooltip/src/dom-animation.ts
similarity index 100%
rename from packages/components/tooltip/src/dom-animation.tsx
rename to packages/components/tooltip/src/dom-animation.ts

From da5286219e95180ccb32a3d6136fa9b6d5b9c8e7 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 29 Jun 2024 16:46:06 +0800
Subject: [PATCH 14/31] fix(modal): add content to memo dependency

---
 packages/components/modal/src/modal-content.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/modal/src/modal-content.tsx b/packages/components/modal/src/modal-content.tsx
index 35f30186f7..2a9bf5aa58 100644
--- a/packages/components/modal/src/modal-content.tsx
+++ b/packages/components/modal/src/modal-content.tsx
@@ -125,7 +125,7 @@ const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _)
         </m.div>
       </LazyMotion>
     );
-  }, [disableAnimation, classNames, motionProps]);
+  }, [disableAnimation, classNames, motionProps, content]);
 
   return (
     <div tabIndex={-1}>

From 4860c7ccfdea36e0ab2cb782b408248e42753848 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 29 Jun 2024 17:14:38 +0800
Subject: [PATCH 15/31] refactor(accordion): move domAnimation outside
 AccordionItem

---
 packages/components/accordion/src/accordion-item.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/accordion/src/accordion-item.tsx b/packages/components/accordion/src/accordion-item.tsx
index fc2b115d4c..7a21fc317a 100644
--- a/packages/components/accordion/src/accordion-item.tsx
+++ b/packages/components/accordion/src/accordion-item.tsx
@@ -10,6 +10,8 @@ import {UseAccordionItemProps, useAccordionItem} from "./use-accordion-item";
 
 export interface AccordionItemProps extends UseAccordionItemProps {}
 
+const domAnimation = () => import("./dom-animation").then((res) => res.default);
+
 const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => {
   const {
     Component,
@@ -60,8 +62,6 @@ const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => {
       enter: {...TRANSITION_VARIANTS.collapse.enter, overflowY: "unset"},
     };
 
-    const domAnimation = () => import("./dom-animation").then((res) => res.default);
-
     return keepContentMounted ? (
       <LazyMotion features={domAnimation}>
         <m.section

From d2271af3be434adffe34ecdc34cb8b819cdaa638 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 29 Jun 2024 17:15:40 +0800
Subject: [PATCH 16/31] refactor(calendar): move domAnimation outside

---
 .../components/calendar/src/calendar-base.tsx | 51 ++++++++-----------
 1 file changed, 21 insertions(+), 30 deletions(-)

diff --git a/packages/components/calendar/src/calendar-base.tsx b/packages/components/calendar/src/calendar-base.tsx
index 334719e61f..df45eea283 100644
--- a/packages/components/calendar/src/calendar-base.tsx
+++ b/packages/components/calendar/src/calendar-base.tsx
@@ -3,7 +3,7 @@ import type {As, HTMLNextUIProps} from "@nextui-org/system";
 import type {ButtonProps} from "@nextui-org/button";
 import type {HTMLAttributes, ReactNode, RefObject} from "react";
 
-import {Fragment, useState, useMemo} from "react";
+import {Fragment, useState} from "react";
 import {useLocale} from "@react-aria/i18n";
 import {VisuallyHidden} from "@react-aria/visually-hidden";
 import {Button} from "@nextui-org/button";
@@ -19,6 +19,8 @@ import {CalendarHeader} from "./calendar-header";
 import {CalendarPicker} from "./calendar-picker";
 import {useCalendarContext} from "./calendar-context";
 
+const domAnimation = () => import("./dom-animation").then((res) => res.default);
+
 export interface CalendarBaseProps extends HTMLNextUIProps<"div"> {
   Component?: As;
   showHelper?: boolean;
@@ -132,34 +134,6 @@ export function CalendarBase(props: CalendarBaseProps) {
     </>
   );
 
-  const content = useMemo(() => {
-    if (disableAnimation) {
-      return (
-        <div className={slots?.content({class: classNames?.content})} data-slot="content">
-          {calendarContent}
-        </div>
-      );
-    }
-
-    const domAnimation = () => import("./dom-animation").then((res) => res.default);
-
-    return (
-      <ResizablePanel
-        data-
-        className={slots?.content({class: classNames?.content})}
-        data-slot="content"
-      >
-        <AnimatePresence custom={direction} initial={false} mode="popLayout">
-          <>
-            <MotionConfig transition={transition}>
-              <LazyMotion features={domAnimation}>{calendarContent}</LazyMotion>
-            </MotionConfig>
-          </>
-        </AnimatePresence>
-      </ResizablePanel>
-    );
-  }, [direction, transition, calendarContent]);
-
   return (
     <Component {...mergeProps(calendarProps, otherProps)} ref={ref}>
       {topContent}
@@ -171,7 +145,24 @@ export function CalendarBase(props: CalendarBaseProps) {
       <VisuallyHidden>
         <h2>{calendarProps["aria-label"]}</h2>
       </VisuallyHidden>
-      {content}
+      {disableAnimation ? (
+        <div className={slots?.content({class: classNames?.content})} data-slot="content">
+          {calendarContent}
+        </div>
+      ) : (
+        <ResizablePanel
+          className={slots?.content({class: classNames?.content})}
+          data-slot="content"
+        >
+          <AnimatePresence custom={direction} initial={false} mode="popLayout">
+            <>
+              <MotionConfig transition={transition}>
+                <LazyMotion features={domAnimation}>{calendarContent}</LazyMotion>
+              </MotionConfig>
+            </>
+          </AnimatePresence>
+        </ResizablePanel>
+      )}
       {/* For touch screen readers, add a visually hidden next button after the month grid
        * so it's easy to navigate after reaching the end without going all the way
        * back to the start of the month. */}

From c47798733b0a543cfcce76b4482c2305010f5fca Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 29 Jun 2024 17:23:07 +0800
Subject: [PATCH 17/31] refactor(components): move domAnimation outside

---
 .../components/modal/src/modal-content.tsx    | 48 ++++++++---------
 .../components/navbar/src/navbar-menu.tsx     | 53 ++++++++-----------
 packages/components/navbar/src/navbar.tsx     | 31 ++++-------
 .../popover/src/free-solo-popover.tsx         | 20 +++----
 .../popover/src/popover-content.tsx           | 46 +++++++---------
 packages/components/ripple/src/ripple.tsx     |  4 +-
 packages/components/tabs/src/tab.tsx          | 45 +++++++---------
 packages/components/tooltip/src/tooltip.tsx   | 44 ++++++++-------
 8 files changed, 123 insertions(+), 168 deletions(-)

diff --git a/packages/components/modal/src/modal-content.tsx b/packages/components/modal/src/modal-content.tsx
index 2a9bf5aa58..c3a64a4382 100644
--- a/packages/components/modal/src/modal-content.tsx
+++ b/packages/components/modal/src/modal-content.tsx
@@ -21,6 +21,8 @@ export interface ModalContentProps extends AriaDialogProps, HTMLNextUIProps<"div
   children: ReactNode | ((onClose: () => void) => ReactNode);
 }
 
+const domAnimation = () => import("./dom-animation").then((res) => res.default);
+
 const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _) => {
   const {as, children, role = "dialog", ...otherProps} = props;
 
@@ -99,33 +101,25 @@ const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _)
     );
   }, [backdrop, disableAnimation, getBackdropProps]);
 
-  const contents = useMemo(() => {
-    if (disableAnimation) {
-      return (
-        <div className={slots.wrapper({class: classNames?.wrapper})} data-slot="wrapper">
-          {content}
-        </div>
-      );
-    }
-
-    const domAnimation = () => import("./dom-animation").then((res) => res.default);
-
-    return (
-      <LazyMotion features={domAnimation}>
-        <m.div
-          animate="enter"
-          className={slots.wrapper({class: classNames?.wrapper})}
-          data-slot="wrapper"
-          exit="exit"
-          initial="exit"
-          variants={scaleInOut}
-          {...motionProps}
-        >
-          {content}
-        </m.div>
-      </LazyMotion>
-    );
-  }, [disableAnimation, classNames, motionProps, content]);
+  const contents = disableAnimation ? (
+    <div className={slots.wrapper({class: classNames?.wrapper})} data-slot="wrapper">
+      {content}
+    </div>
+  ) : (
+    <LazyMotion features={domAnimation}>
+      <m.div
+        animate="enter"
+        className={slots.wrapper({class: classNames?.wrapper})}
+        data-slot="wrapper"
+        exit="exit"
+        initial="exit"
+        variants={scaleInOut}
+        {...motionProps}
+      >
+        {content}
+      </m.div>
+    </LazyMotion>
+  );
 
   return (
     <div tabIndex={-1}>
diff --git a/packages/components/navbar/src/navbar-menu.tsx b/packages/components/navbar/src/navbar-menu.tsx
index a0e520b979..cf3f5c127f 100644
--- a/packages/components/navbar/src/navbar-menu.tsx
+++ b/packages/components/navbar/src/navbar-menu.tsx
@@ -1,8 +1,7 @@
-import {useMemo} from "react";
 import {forwardRef, HTMLNextUIProps} from "@nextui-org/system";
 import {useDOMRef} from "@nextui-org/react-utils";
 import {clsx, dataAttr} from "@nextui-org/shared-utils";
-import {AnimatePresence, HTMLMotionProps, LazyMotion, m} from "framer-motion";
+import {AnimatePresence, domAnimation, HTMLMotionProps, LazyMotion, m} from "framer-motion";
 import {mergeProps} from "@react-aria/utils";
 import {ReactElement, useCallback} from "react";
 import {RemoveScroll} from "react-remove-scroll";
@@ -24,6 +23,8 @@ export interface NavbarMenuProps extends HTMLNextUIProps<"ul"> {
   motionProps?: HTMLMotionProps<"ul">;
 }
 
+const domAnimation = () => import("./dom-animation").then((res) => res.default);
+
 const NavbarMenu = forwardRef<"ul", NavbarMenuProps>((props, ref) => {
   const {className, children, portalContainer, motionProps, style, ...otherProps} = props;
   const domRef = useDOMRef(ref);
@@ -43,11 +44,24 @@ const NavbarMenu = forwardRef<"ul", NavbarMenuProps>((props, ref) => {
     [isMenuOpen],
   );
 
-  const content = useMemo(() => {
-    if (isMenuOpen) {
-      const domAnimation = () => import("./dom-animation").then((res) => res.default);
-
-      return (
+  const contents = disableAnimation ? (
+    <MenuWrapper>
+      <ul
+        ref={domRef}
+        className={slots.menu?.({class: styles})}
+        data-open={dataAttr(isMenuOpen)}
+        style={{
+          // @ts-expect-error
+          "--navbar-height": height,
+        }}
+        {...otherProps}
+      >
+        {children}
+      </ul>
+    </MenuWrapper>
+  ) : (
+    <AnimatePresence mode="wait">
+      {isMenuOpen ? (
         <LazyMotion features={domAnimation}>
           <MenuWrapper>
             <m.ul
@@ -70,29 +84,8 @@ const NavbarMenu = forwardRef<"ul", NavbarMenuProps>((props, ref) => {
             </m.ul>
           </MenuWrapper>
         </LazyMotion>
-      );
-    }
-
-    return null;
-  }, [otherProps, motionProps, height, style]);
-
-  const contents = disableAnimation ? (
-    <MenuWrapper>
-      <ul
-        ref={domRef}
-        className={slots.menu?.({class: styles})}
-        data-open={dataAttr(isMenuOpen)}
-        style={{
-          // @ts-expect-error
-          "--navbar-height": height,
-        }}
-        {...otherProps}
-      >
-        {children}
-      </ul>
-    </MenuWrapper>
-  ) : (
-    <AnimatePresence mode="wait">{content}</AnimatePresence>
+      ) : null}
+    </AnimatePresence>
   );
 
   return <Overlay portalContainer={portalContainer}>{contents}</Overlay>;
diff --git a/packages/components/navbar/src/navbar.tsx b/packages/components/navbar/src/navbar.tsx
index cb5a2b887f..d0d43a6ccf 100644
--- a/packages/components/navbar/src/navbar.tsx
+++ b/packages/components/navbar/src/navbar.tsx
@@ -1,7 +1,6 @@
-import {useMemo} from "react";
 import {forwardRef} from "@nextui-org/system";
 import {pickChildren} from "@nextui-org/react-utils";
-import {LazyMotion, m} from "framer-motion";
+import {LazyMotion, domAnimation, m} from "framer-motion";
 import {mergeProps} from "@react-aria/utils";
 
 import {hideOnScrollVariants} from "./navbar-transitions";
@@ -13,6 +12,8 @@ export interface NavbarProps extends Omit<UseNavbarProps, "hideOnScroll"> {
   children?: React.ReactNode | React.ReactNode[];
 }
 
+const domAnimation = () => import("./dom-animation").then((res) => res.default);
+
 const Navbar = forwardRef<"div", NavbarProps>((props, ref) => {
   const {children, ...otherProps} = props;
 
@@ -29,11 +30,9 @@ const Navbar = forwardRef<"div", NavbarProps>((props, ref) => {
     </>
   );
 
-  const contents = useMemo(() => {
-    if (context.shouldHideOnScroll) {
-      const domAnimation = () => import("./dom-animation").then((res) => res.default);
-
-      return (
+  return (
+    <NavbarProvider value={context}>
+      {context.shouldHideOnScroll ? (
         <LazyMotion features={domAnimation}>
           <m.nav
             animate={context.isHidden ? "hidden" : "visible"}
@@ -44,19 +43,11 @@ const Navbar = forwardRef<"div", NavbarProps>((props, ref) => {
             {content}
           </m.nav>
         </LazyMotion>
-      );
-    }
-
-    return <Component {...context.getBaseProps()}>{content}</Component>;
-  }, [
-    context.shouldHideOnScroll,
-    context.motionProps,
-    context.isHidden,
-    context.getBaseProps,
-    content,
-  ]);
-
-  return <NavbarProvider value={context}>{contents}</NavbarProvider>;
+      ) : (
+        <Component {...context.getBaseProps()}>{content}</Component>
+      )}
+    </NavbarProvider>
+  );
 });
 
 Navbar.displayName = "NextUI.Navbar";
diff --git a/packages/components/popover/src/free-solo-popover.tsx b/packages/components/popover/src/free-solo-popover.tsx
index 902bcfef18..9c8ba2b8e6 100644
--- a/packages/components/popover/src/free-solo-popover.tsx
+++ b/packages/components/popover/src/free-solo-popover.tsx
@@ -34,6 +34,8 @@ type FreeSoloPopoverWrapperProps = {
   motionProps?: UsePopoverProps["motionProps"];
 } & React.HTMLAttributes<HTMLDivElement>;
 
+const domAnimation = () => import("./dom-animation").then((res) => res.default);
+
 const FreeSoloPopoverWrapper = forwardRef<"div", FreeSoloPopoverWrapperProps>(
   (
     {
@@ -62,17 +64,11 @@ const FreeSoloPopoverWrapper = forwardRef<"div", FreeSoloPopoverWrapperProps>(
       };
     }
 
-    if (disableAnimation) {
-      return (
-        <div {...otherProps} ref={ref}>
-          {children}
-        </div>
-      );
-    }
-
-    const domAnimation = () => import("./dom-animation").then((res) => res.default);
-
-    return (
+    return disableAnimation ? (
+      <div {...otherProps} ref={ref}>
+        {children}
+      </div>
+    ) : (
       <LazyMotion features={domAnimation}>
         <m.div
           ref={ref}
@@ -128,8 +124,6 @@ const FreeSoloPopover = forwardRef<"div", FreeSoloPopoverProps>(
         return <div {...getBackdropProps()} />;
       }
 
-      const domAnimation = () => import("./dom-animation").then((res) => res.default);
-
       return (
         <LazyMotion features={domAnimation}>
           <m.div
diff --git a/packages/components/popover/src/popover-content.tsx b/packages/components/popover/src/popover-content.tsx
index 547f66c12b..2bf0897e60 100644
--- a/packages/components/popover/src/popover-content.tsx
+++ b/packages/components/popover/src/popover-content.tsx
@@ -19,6 +19,8 @@ export interface PopoverContentProps
   children: ReactNode | ((titleProps: DOMAttributes<HTMLElement>) => ReactNode);
 }
 
+const domAnimation = () => import("./dom-animation").then((res) => res.default);
+
 const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
   const {as, children, className, ...otherProps} = props;
 
@@ -69,8 +71,6 @@ const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
       return <div {...getBackdropProps()} />;
     }
 
-    const domAnimation = () => import("./dom-animation").then((res) => res.default);
-
     return (
       <LazyMotion features={domAnimation}>
         <m.div
@@ -84,32 +84,26 @@ const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
     );
   }, [backdrop, disableAnimation, getBackdropProps]);
 
-  const removeScrollContent = useMemo(() => {
-    if (disableAnimation) return content;
-
-    const domAnimation = () => import("./dom-animation").then((res) => res.default);
-
-    return (
-      <LazyMotion features={domAnimation}>
-        <m.div
-          animate="enter"
-          exit="exit"
-          initial="initial"
-          style={{
-            ...getTransformOrigins(placement === "center" ? "top" : placement),
-          }}
-          variants={TRANSITION_VARIANTS.scaleSpringOpacity}
-          {...motionProps}
-        >
-          {content}
-        </m.div>
-      </LazyMotion>
-    );
-  }, [disableAnimation, getTransformOrigins]);
-
   const contents = (
     <RemoveScroll enabled={shouldBlockScroll && isOpen} removeScrollBar={false}>
-      {removeScrollContent}
+      {disableAnimation ? (
+        content
+      ) : (
+        <LazyMotion features={domAnimation}>
+          <m.div
+            animate="enter"
+            exit="exit"
+            initial="initial"
+            style={{
+              ...getTransformOrigins(placement === "center" ? "top" : placement),
+            }}
+            variants={TRANSITION_VARIANTS.scaleSpringOpacity}
+            {...motionProps}
+          >
+            {content}
+          </m.div>
+        </LazyMotion>
+      )}
     </RemoveScroll>
   );
 
diff --git a/packages/components/ripple/src/ripple.tsx b/packages/components/ripple/src/ripple.tsx
index 9b6d48efbe..ad51345c50 100644
--- a/packages/components/ripple/src/ripple.tsx
+++ b/packages/components/ripple/src/ripple.tsx
@@ -14,11 +14,11 @@ export interface RippleProps extends HTMLNextUIProps<"span"> {
   onClear: (key: React.Key) => void;
 }
 
+const domAnimation = () => import("./dom-animation").then((res) => res.default);
+
 const Ripple: FC<RippleProps> = (props) => {
   const {ripples = [], motionProps, color = "currentColor", style, onClear} = props;
 
-  const domAnimation = () => import("./dom-animation").then((res) => res.default);
-
   return (
     <>
       {ripples.map((ripple) => {
diff --git a/packages/components/tabs/src/tab.tsx b/packages/components/tabs/src/tab.tsx
index c3e5d6915a..0a5aa92117 100644
--- a/packages/components/tabs/src/tab.tsx
+++ b/packages/components/tabs/src/tab.tsx
@@ -1,6 +1,5 @@
 import type {TabItemProps as BaseTabItemProps} from "./base/tab-item-base";
 
-import {useMemo} from "react";
 import {forwardRef} from "@nextui-org/system";
 import {useDOMRef, filterDOMProps} from "@nextui-org/react-utils";
 import {clsx, dataAttr} from "@nextui-org/shared-utils";
@@ -27,6 +26,8 @@ export interface TabItemProps<T extends object = object> extends BaseTabItemProp
   disableCursorAnimation?: ValuesType["disableCursorAnimation"];
 }
 
+const domAnimation = () => import("./dom-animation").then((res) => res.default);
+
 /**
  * @internal
  */
@@ -93,31 +94,6 @@ const Tab = forwardRef<"button", TabItemProps>((props, ref) => {
     });
   };
 
-  const cursor = useMemo(() => {
-    if (isSelected && !disableAnimation && !disableCursorAnimation && isMounted) {
-      const domAnimation = () => import("./dom-animation").then((res) => res.default);
-
-      return (
-        <LazyMotion features={domAnimation}>
-          <m.span
-            className={slots.cursor({class: classNames?.cursor})}
-            data-slot="cursor"
-            layoutDependency={false}
-            layoutId="cursor"
-            transition={{
-              type: "spring",
-              bounce: 0.15,
-              duration: 0.5,
-            }}
-            {...motionProps}
-          />
-        </LazyMotion>
-      );
-    }
-
-    return null;
-  }, [isSelected, disableAnimation, disableCursorAnimation, isMounted, motionProps]);
-
   return (
     <Component
       ref={domRef}
@@ -147,7 +123,22 @@ const Tab = forwardRef<"button", TabItemProps>((props, ref) => {
       title={otherProps?.titleValue}
       type={Component === "button" ? "button" : undefined}
     >
-      {cursor}
+      {isSelected && !disableAnimation && !disableCursorAnimation && isMounted ? (
+        <LazyMotion features={domAnimation}>
+          <m.span
+            className={slots.cursor({class: classNames?.cursor})}
+            data-slot="cursor"
+            layoutDependency={false}
+            layoutId="cursor"
+            transition={{
+              type: "spring",
+              bounce: 0.15,
+              duration: 0.5,
+            }}
+            {...motionProps}
+          />
+        </LazyMotion>
+      ) : null}
       <div
         className={slots.tabContent({
           class: classNames?.tabContent,
diff --git a/packages/components/tooltip/src/tooltip.tsx b/packages/components/tooltip/src/tooltip.tsx
index b967de67b5..58ac8449ae 100644
--- a/packages/components/tooltip/src/tooltip.tsx
+++ b/packages/components/tooltip/src/tooltip.tsx
@@ -3,7 +3,7 @@ import {OverlayContainer} from "@react-aria/overlays";
 import {AnimatePresence, m, LazyMotion} from "framer-motion";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
 import {warn} from "@nextui-org/shared-utils";
-import {useMemo, Children, cloneElement, isValidElement} from "react";
+import {Children, cloneElement, isValidElement} from "react";
 import {getTransformOrigins} from "@nextui-org/aria-utils";
 import {mergeProps} from "@react-aria/utils";
 
@@ -11,6 +11,8 @@ import {UseTooltipProps, useTooltip} from "./use-tooltip";
 
 export interface TooltipProps extends Omit<UseTooltipProps, "disableTriggerFocus" | "backdrop"> {}
 
+const domAnimation = () => import("./dom-animation").then((res) => res.default);
+
 const Tooltip = forwardRef<"div", TooltipProps>((props, ref) => {
   const {
     Component,
@@ -55,28 +57,24 @@ const Tooltip = forwardRef<"div", TooltipProps>((props, ref) => {
 
   const {ref: tooltipRef, id, style, ...otherTooltipProps} = getTooltipProps();
 
-  const animatedContent = useMemo(() => {
-    const domAnimation = () => import("./dom-animation").then((res) => res.default);
-
-    return (
-      <div ref={tooltipRef} id={id} style={style}>
-        <LazyMotion features={domAnimation}>
-          <m.div
-            animate="enter"
-            exit="exit"
-            initial="exit"
-            variants={TRANSITION_VARIANTS.scaleSpring}
-            {...mergeProps(motionProps, otherTooltipProps)}
-            style={{
-              ...getTransformOrigins(placement),
-            }}
-          >
-            <Component {...getTooltipContentProps()}>{content}</Component>
-          </m.div>
-        </LazyMotion>
-      </div>
-    );
-  }, [motionProps, otherTooltipProps, getTransformOrigins, getTooltipContentProps]);
+  const animatedContent = (
+    <div ref={tooltipRef} id={id} style={style}>
+      <LazyMotion features={domAnimation}>
+        <m.div
+          animate="enter"
+          exit="exit"
+          initial="exit"
+          variants={TRANSITION_VARIANTS.scaleSpring}
+          {...mergeProps(motionProps, otherTooltipProps)}
+          style={{
+            ...getTransformOrigins(placement),
+          }}
+        >
+          <Component {...getTooltipContentProps()}>{content}</Component>
+        </m.div>
+      </LazyMotion>
+    </div>
+  );
 
   return (
     <>

From 5cdfeb7ef1bd46bd257aa29faa41f1207a7a3218 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 29 Jun 2024 17:29:48 +0800
Subject: [PATCH 18/31] fix(navbar): remove duplicate definition

---
 packages/components/navbar/src/navbar-menu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/navbar/src/navbar-menu.tsx b/packages/components/navbar/src/navbar-menu.tsx
index cf3f5c127f..9d1899679a 100644
--- a/packages/components/navbar/src/navbar-menu.tsx
+++ b/packages/components/navbar/src/navbar-menu.tsx
@@ -1,7 +1,7 @@
 import {forwardRef, HTMLNextUIProps} from "@nextui-org/system";
 import {useDOMRef} from "@nextui-org/react-utils";
 import {clsx, dataAttr} from "@nextui-org/shared-utils";
-import {AnimatePresence, domAnimation, HTMLMotionProps, LazyMotion, m} from "framer-motion";
+import {AnimatePresence, HTMLMotionProps, LazyMotion, m} from "framer-motion";
 import {mergeProps} from "@react-aria/utils";
 import {ReactElement, useCallback} from "react";
 import {RemoveScroll} from "react-remove-scroll";

From 08ee9f8adf08d509969c1fd754ad7189fb01c610 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 29 Jun 2024 18:11:44 +0800
Subject: [PATCH 19/31] feat(utilities): @nextui-org/dom-animation

---
 packages/utilities/dom-animation/README.md    | 24 +++++++++++++++++++
 packages/utilities/dom-animation/src/index.ts |  2 ++
 .../utilities/dom-animation/tsconfig.json     |  4 ++++
 .../utilities/dom-animation/tsup.config.ts    |  8 +++++++
 4 files changed, 38 insertions(+)
 create mode 100644 packages/utilities/dom-animation/README.md
 create mode 100644 packages/utilities/dom-animation/src/index.ts
 create mode 100644 packages/utilities/dom-animation/tsconfig.json
 create mode 100644 packages/utilities/dom-animation/tsup.config.ts

diff --git a/packages/utilities/dom-animation/README.md b/packages/utilities/dom-animation/README.md
new file mode 100644
index 0000000000..d461d2d42c
--- /dev/null
+++ b/packages/utilities/dom-animation/README.md
@@ -0,0 +1,24 @@
+# @nextui-org/dom-animation
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @nextui-org/dom-animation
+# or
+npm i @nextui-org/dom-animation
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).
diff --git a/packages/utilities/dom-animation/src/index.ts b/packages/utilities/dom-animation/src/index.ts
new file mode 100644
index 0000000000..0f667e5069
--- /dev/null
+++ b/packages/utilities/dom-animation/src/index.ts
@@ -0,0 +1,2 @@
+import {domAnimation} from "framer-motion";
+export default domAnimation;
diff --git a/packages/utilities/dom-animation/tsconfig.json b/packages/utilities/dom-animation/tsconfig.json
new file mode 100644
index 0000000000..46e3b466c2
--- /dev/null
+++ b/packages/utilities/dom-animation/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["src", "index.ts"]
+}
diff --git a/packages/utilities/dom-animation/tsup.config.ts b/packages/utilities/dom-animation/tsup.config.ts
new file mode 100644
index 0000000000..3e2bcff6cc
--- /dev/null
+++ b/packages/utilities/dom-animation/tsup.config.ts
@@ -0,0 +1,8 @@
+import {defineConfig} from "tsup";
+
+export default defineConfig({
+  clean: true,
+  target: "es2019",
+  format: ["cjs", "esm"],
+  banner: {js: '"use client";'},
+});

From 5ed6551758a61f9a65aaab8c5feac5fafaf242f1 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 29 Jun 2024 18:18:14 +0800
Subject: [PATCH 20/31] chore(deps): add @nextui-org/dom-animation package

---
 packages/components/accordion/package.json    |  1 +
 packages/components/calendar/package.json     |  1 +
 packages/components/modal/package.json        |  1 +
 packages/components/navbar/package.json       |  1 +
 packages/components/popover/package.json      |  1 +
 packages/components/ripple/package.json       |  3 +-
 packages/components/tabs/package.json         |  1 +
 packages/components/tooltip/package.json      |  1 +
 packages/utilities/dom-animation/package.json | 44 +++++++++++++++++++
 pnpm-lock.yaml                                | 33 ++++++++++++++
 10 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 packages/utilities/dom-animation/package.json

diff --git a/packages/components/accordion/package.json b/packages/components/accordion/package.json
index eea9d9c92c..fcdc68789f 100644
--- a/packages/components/accordion/package.json
+++ b/packages/components/accordion/package.json
@@ -54,6 +54,7 @@
     "@nextui-org/framer-utils": "workspace:*",
     "@nextui-org/divider": "workspace:*",
     "@nextui-org/use-aria-accordion": "workspace:*",
+    "@nextui-org/dom-animation": "workspace:*",
     "@react-aria/interactions": "3.21.3",
     "@react-aria/focus": "3.17.1",
     "@react-aria/utils": "3.24.1",
diff --git a/packages/components/calendar/package.json b/packages/components/calendar/package.json
index 4f57b6ad50..6199f31905 100644
--- a/packages/components/calendar/package.json
+++ b/packages/components/calendar/package.json
@@ -46,6 +46,7 @@
     "@nextui-org/framer-utils": "workspace:*",
     "@nextui-org/use-aria-button": "workspace:*",
     "@nextui-org/button": "workspace:*",
+    "@nextui-org/dom-animation": "workspace:*",
     "lodash.debounce": "^4.0.8",
     "@internationalized/date": "^3.5.4",
     "@react-aria/calendar": "3.5.8",
diff --git a/packages/components/modal/package.json b/packages/components/modal/package.json
index ab4a4ce7fa..354a34ff10 100644
--- a/packages/components/modal/package.json
+++ b/packages/components/modal/package.json
@@ -48,6 +48,7 @@
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/use-aria-modal-overlay": "workspace:*",
+    "@nextui-org/dom-animation": "workspace:*",
     "@react-aria/dialog": "3.5.14",
     "@react-aria/focus": "3.17.1",
     "@react-aria/interactions": "3.21.3",
diff --git a/packages/components/navbar/package.json b/packages/components/navbar/package.json
index 1698a4f9e0..f0ef72ef09 100644
--- a/packages/components/navbar/package.json
+++ b/packages/components/navbar/package.json
@@ -46,6 +46,7 @@
     "@nextui-org/framer-utils": "workspace:*",
     "@nextui-org/use-aria-toggle-button": "workspace:*",
     "@nextui-org/use-scroll-position": "workspace:*",
+    "@nextui-org/dom-animation": "workspace:*",
     "@react-aria/focus": "3.17.1",
     "@react-aria/interactions": "3.21.3",
     "@react-aria/overlays": "3.22.1",
diff --git a/packages/components/popover/package.json b/packages/components/popover/package.json
index 599672dd25..9ed888b6a0 100644
--- a/packages/components/popover/package.json
+++ b/packages/components/popover/package.json
@@ -48,6 +48,7 @@
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/use-safe-layout-effect": "workspace:*",
+    "@nextui-org/dom-animation": "workspace:*",
     "@react-aria/dialog": "3.5.14",
     "@react-aria/focus": "3.17.1",
     "@react-aria/interactions": "3.21.3",
diff --git a/packages/components/ripple/package.json b/packages/components/ripple/package.json
index 275538fb9f..6f5d5eefc9 100644
--- a/packages/components/ripple/package.json
+++ b/packages/components/ripple/package.json
@@ -42,7 +42,8 @@
   },
   "dependencies": {
     "@nextui-org/shared-utils": "workspace:*",
-    "@nextui-org/react-utils": "workspace:*"
+    "@nextui-org/react-utils": "workspace:*",
+    "@nextui-org/dom-animation": "workspace:*"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",
diff --git a/packages/components/tabs/package.json b/packages/components/tabs/package.json
index 43d25d6e13..d7196086a0 100644
--- a/packages/components/tabs/package.json
+++ b/packages/components/tabs/package.json
@@ -47,6 +47,7 @@
     "@nextui-org/framer-utils": "workspace:*",
     "@nextui-org/use-is-mounted": "workspace:*",
     "@nextui-org/use-update-effect": "workspace:*",
+    "@nextui-org/dom-animation": "workspace:*",
     "@react-aria/focus": "3.17.1",
     "@react-aria/interactions": "3.21.3",
     "@react-aria/tabs": "3.9.1",
diff --git a/packages/components/tooltip/package.json b/packages/components/tooltip/package.json
index f7652b3ea0..dff56cb3f4 100644
--- a/packages/components/tooltip/package.json
+++ b/packages/components/tooltip/package.json
@@ -46,6 +46,7 @@
     "@nextui-org/aria-utils": "workspace:*",
     "@nextui-org/framer-utils": "workspace:*",
     "@nextui-org/use-safe-layout-effect": "workspace:*",
+    "@nextui-org/dom-animation": "workspace:*",
     "@react-aria/interactions": "3.21.3",
     "@react-aria/overlays": "3.22.1",
     "@react-aria/tooltip": "3.7.4",
diff --git a/packages/utilities/dom-animation/package.json b/packages/utilities/dom-animation/package.json
new file mode 100644
index 0000000000..ef2febdfd6
--- /dev/null
+++ b/packages/utilities/dom-animation/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "@nextui-org/dom-animation",
+  "version": "2.0.0",
+  "description": "Dom Animation from Framer Motion for dynamic import",
+  "keywords": [
+    "dom-animation"
+  ],
+  "author": "WK Wong <wingkwong.code@gmail.com>",
+  "homepage": "https://nextui.org",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nextui-org/nextui.git",
+    "directory": "packages/utilities/dom-animation"
+  },
+  "bugs": {
+    "url": "https://github.com/nextui-org/nextui/issues"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "peerDependencies": {
+    "framer-motion": ">=11.0.22"
+  },
+  "devDependencies": {
+    "clean-package": "2.2.0",
+    "framer-motion": "^11.0.22"
+  },
+  "clean-package": "../../../clean-package.config.json"
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b60736bbb7..8b5b813494 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -616,6 +616,9 @@ importers:
       '@nextui-org/divider':
         specifier: workspace:*
         version: link:../divider
+      '@nextui-org/dom-animation':
+        specifier: workspace:*
+        version: link:../../utilities/dom-animation
       '@nextui-org/framer-utils':
         specifier: workspace:*
         version: link:../../utilities/framer-utils
@@ -982,6 +985,9 @@ importers:
       '@nextui-org/button':
         specifier: workspace:*
         version: link:../button
+      '@nextui-org/dom-animation':
+        specifier: workspace:*
+        version: link:../../utilities/dom-animation
       '@nextui-org/framer-utils':
         specifier: workspace:*
         version: link:../../utilities/framer-utils
@@ -1792,6 +1798,9 @@ importers:
 
   packages/components/modal:
     dependencies:
+      '@nextui-org/dom-animation':
+        specifier: workspace:*
+        version: link:../../utilities/dom-animation
       '@nextui-org/framer-utils':
         specifier: workspace:*
         version: link:../../utilities/framer-utils
@@ -1871,6 +1880,9 @@ importers:
 
   packages/components/navbar:
     dependencies:
+      '@nextui-org/dom-animation':
+        specifier: workspace:*
+        version: link:../../utilities/dom-animation
       '@nextui-org/framer-utils':
         specifier: workspace:*
         version: link:../../utilities/framer-utils
@@ -2002,6 +2014,9 @@ importers:
       '@nextui-org/button':
         specifier: workspace:*
         version: link:../button
+      '@nextui-org/dom-animation':
+        specifier: workspace:*
+        version: link:../../utilities/dom-animation
       '@nextui-org/framer-utils':
         specifier: workspace:*
         version: link:../../utilities/framer-utils
@@ -2170,6 +2185,9 @@ importers:
 
   packages/components/ripple:
     dependencies:
+      '@nextui-org/dom-animation':
+        specifier: workspace:*
+        version: link:../../utilities/dom-animation
       '@nextui-org/react-utils':
         specifier: workspace:*
         version: link:../../utilities/react-utils
@@ -2657,6 +2675,9 @@ importers:
       '@nextui-org/aria-utils':
         specifier: workspace:*
         version: link:../../utilities/aria-utils
+      '@nextui-org/dom-animation':
+        specifier: workspace:*
+        version: link:../../utilities/dom-animation
       '@nextui-org/framer-utils':
         specifier: workspace:*
         version: link:../../utilities/framer-utils
@@ -2739,6 +2760,9 @@ importers:
       '@nextui-org/aria-utils':
         specifier: workspace:*
         version: link:../../utilities/aria-utils
+      '@nextui-org/dom-animation':
+        specifier: workspace:*
+        version: link:../../utilities/dom-animation
       '@nextui-org/framer-utils':
         specifier: workspace:*
         version: link:../../utilities/framer-utils
@@ -3677,6 +3701,15 @@ importers:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
 
+  packages/utilities/dom-animation:
+    devDependencies:
+      clean-package:
+        specifier: 2.2.0
+        version: 2.2.0
+      framer-motion:
+        specifier: ^11.0.22
+        version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
+
   packages/utilities/framer-utils:
     dependencies:
       '@nextui-org/shared-utils':

From 32e1215ed442bdcd962d61d72b7762697f271527 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 29 Jun 2024 18:18:45 +0800
Subject: [PATCH 21/31] chore: remove individual domAnimation

---
 packages/components/accordion/src/dom-animation.ts | 2 --
 packages/components/calendar/src/dom-animation.ts  | 2 --
 packages/components/modal/src/dom-animation.ts     | 2 --
 packages/components/navbar/src/dom-animation.ts    | 2 --
 packages/components/popover/src/dom-animation.ts   | 2 --
 packages/components/ripple/src/dom-animation.ts    | 2 --
 packages/components/tabs/src/dom-animation.ts      | 2 --
 packages/components/tooltip/src/dom-animation.ts   | 2 --
 8 files changed, 16 deletions(-)
 delete mode 100644 packages/components/accordion/src/dom-animation.ts
 delete mode 100644 packages/components/calendar/src/dom-animation.ts
 delete mode 100644 packages/components/modal/src/dom-animation.ts
 delete mode 100644 packages/components/navbar/src/dom-animation.ts
 delete mode 100644 packages/components/popover/src/dom-animation.ts
 delete mode 100644 packages/components/ripple/src/dom-animation.ts
 delete mode 100644 packages/components/tabs/src/dom-animation.ts
 delete mode 100644 packages/components/tooltip/src/dom-animation.ts

diff --git a/packages/components/accordion/src/dom-animation.ts b/packages/components/accordion/src/dom-animation.ts
deleted file mode 100644
index 0f667e5069..0000000000
--- a/packages/components/accordion/src/dom-animation.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import {domAnimation} from "framer-motion";
-export default domAnimation;
diff --git a/packages/components/calendar/src/dom-animation.ts b/packages/components/calendar/src/dom-animation.ts
deleted file mode 100644
index 0f667e5069..0000000000
--- a/packages/components/calendar/src/dom-animation.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import {domAnimation} from "framer-motion";
-export default domAnimation;
diff --git a/packages/components/modal/src/dom-animation.ts b/packages/components/modal/src/dom-animation.ts
deleted file mode 100644
index 0f667e5069..0000000000
--- a/packages/components/modal/src/dom-animation.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import {domAnimation} from "framer-motion";
-export default domAnimation;
diff --git a/packages/components/navbar/src/dom-animation.ts b/packages/components/navbar/src/dom-animation.ts
deleted file mode 100644
index 0f667e5069..0000000000
--- a/packages/components/navbar/src/dom-animation.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import {domAnimation} from "framer-motion";
-export default domAnimation;
diff --git a/packages/components/popover/src/dom-animation.ts b/packages/components/popover/src/dom-animation.ts
deleted file mode 100644
index 0f667e5069..0000000000
--- a/packages/components/popover/src/dom-animation.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import {domAnimation} from "framer-motion";
-export default domAnimation;
diff --git a/packages/components/ripple/src/dom-animation.ts b/packages/components/ripple/src/dom-animation.ts
deleted file mode 100644
index 0f667e5069..0000000000
--- a/packages/components/ripple/src/dom-animation.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import {domAnimation} from "framer-motion";
-export default domAnimation;
diff --git a/packages/components/tabs/src/dom-animation.ts b/packages/components/tabs/src/dom-animation.ts
deleted file mode 100644
index 0f667e5069..0000000000
--- a/packages/components/tabs/src/dom-animation.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import {domAnimation} from "framer-motion";
-export default domAnimation;
diff --git a/packages/components/tooltip/src/dom-animation.ts b/packages/components/tooltip/src/dom-animation.ts
deleted file mode 100644
index 0f667e5069..0000000000
--- a/packages/components/tooltip/src/dom-animation.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import {domAnimation} from "framer-motion";
-export default domAnimation;

From bff3e437b46d867a1123e5580bbec5e375283e57 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 29 Jun 2024 18:19:03 +0800
Subject: [PATCH 22/31] refactor(components): use @nextui-org/dom-animation
 instead

---
 packages/components/accordion/src/accordion-item.tsx  | 2 +-
 packages/components/calendar/src/calendar-base.tsx    | 2 +-
 packages/components/modal/src/modal-content.tsx       | 4 ++--
 packages/components/navbar/src/navbar-menu.tsx        | 2 +-
 packages/components/navbar/src/navbar.tsx             | 2 +-
 packages/components/popover/src/free-solo-popover.tsx | 2 +-
 packages/components/popover/src/popover-content.tsx   | 2 +-
 packages/components/ripple/src/ripple.tsx             | 2 +-
 packages/components/tabs/src/tab.tsx                  | 2 +-
 packages/components/tooltip/src/tooltip.tsx           | 2 +-
 10 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/components/accordion/src/accordion-item.tsx b/packages/components/accordion/src/accordion-item.tsx
index 7a21fc317a..0c2ac20d87 100644
--- a/packages/components/accordion/src/accordion-item.tsx
+++ b/packages/components/accordion/src/accordion-item.tsx
@@ -10,7 +10,7 @@ import {UseAccordionItemProps, useAccordionItem} from "./use-accordion-item";
 
 export interface AccordionItemProps extends UseAccordionItemProps {}
 
-const domAnimation = () => import("./dom-animation").then((res) => res.default);
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
 
 const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => {
   const {
diff --git a/packages/components/calendar/src/calendar-base.tsx b/packages/components/calendar/src/calendar-base.tsx
index df45eea283..a3ad6392f6 100644
--- a/packages/components/calendar/src/calendar-base.tsx
+++ b/packages/components/calendar/src/calendar-base.tsx
@@ -19,7 +19,7 @@ import {CalendarHeader} from "./calendar-header";
 import {CalendarPicker} from "./calendar-picker";
 import {useCalendarContext} from "./calendar-context";
 
-const domAnimation = () => import("./dom-animation").then((res) => res.default);
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
 
 export interface CalendarBaseProps extends HTMLNextUIProps<"div"> {
   Component?: As;
diff --git a/packages/components/modal/src/modal-content.tsx b/packages/components/modal/src/modal-content.tsx
index c3a64a4382..336c0f2392 100644
--- a/packages/components/modal/src/modal-content.tsx
+++ b/packages/components/modal/src/modal-content.tsx
@@ -21,7 +21,7 @@ export interface ModalContentProps extends AriaDialogProps, HTMLNextUIProps<"div
   children: ReactNode | ((onClose: () => void) => ReactNode);
 }
 
-const domAnimation = () => import("./dom-animation").then((res) => res.default);
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
 
 const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _) => {
   const {as, children, role = "dialog", ...otherProps} = props;
@@ -86,7 +86,7 @@ const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _)
       return <div {...getBackdropProps()} />;
     }
 
-    const domAnimation = () => import("./dom-animation").then((res) => res.default);
+    const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
 
     return (
       <LazyMotion features={domAnimation}>
diff --git a/packages/components/navbar/src/navbar-menu.tsx b/packages/components/navbar/src/navbar-menu.tsx
index 9d1899679a..6b91b7a7d4 100644
--- a/packages/components/navbar/src/navbar-menu.tsx
+++ b/packages/components/navbar/src/navbar-menu.tsx
@@ -23,7 +23,7 @@ export interface NavbarMenuProps extends HTMLNextUIProps<"ul"> {
   motionProps?: HTMLMotionProps<"ul">;
 }
 
-const domAnimation = () => import("./dom-animation").then((res) => res.default);
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
 
 const NavbarMenu = forwardRef<"ul", NavbarMenuProps>((props, ref) => {
   const {className, children, portalContainer, motionProps, style, ...otherProps} = props;
diff --git a/packages/components/navbar/src/navbar.tsx b/packages/components/navbar/src/navbar.tsx
index d0d43a6ccf..5310d0451a 100644
--- a/packages/components/navbar/src/navbar.tsx
+++ b/packages/components/navbar/src/navbar.tsx
@@ -12,7 +12,7 @@ export interface NavbarProps extends Omit<UseNavbarProps, "hideOnScroll"> {
   children?: React.ReactNode | React.ReactNode[];
 }
 
-const domAnimation = () => import("./dom-animation").then((res) => res.default);
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
 
 const Navbar = forwardRef<"div", NavbarProps>((props, ref) => {
   const {children, ...otherProps} = props;
diff --git a/packages/components/popover/src/free-solo-popover.tsx b/packages/components/popover/src/free-solo-popover.tsx
index 9c8ba2b8e6..1dab904b20 100644
--- a/packages/components/popover/src/free-solo-popover.tsx
+++ b/packages/components/popover/src/free-solo-popover.tsx
@@ -34,7 +34,7 @@ type FreeSoloPopoverWrapperProps = {
   motionProps?: UsePopoverProps["motionProps"];
 } & React.HTMLAttributes<HTMLDivElement>;
 
-const domAnimation = () => import("./dom-animation").then((res) => res.default);
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
 
 const FreeSoloPopoverWrapper = forwardRef<"div", FreeSoloPopoverWrapperProps>(
   (
diff --git a/packages/components/popover/src/popover-content.tsx b/packages/components/popover/src/popover-content.tsx
index 2bf0897e60..cadc80217f 100644
--- a/packages/components/popover/src/popover-content.tsx
+++ b/packages/components/popover/src/popover-content.tsx
@@ -19,7 +19,7 @@ export interface PopoverContentProps
   children: ReactNode | ((titleProps: DOMAttributes<HTMLElement>) => ReactNode);
 }
 
-const domAnimation = () => import("./dom-animation").then((res) => res.default);
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
 
 const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
   const {as, children, className, ...otherProps} = props;
diff --git a/packages/components/ripple/src/ripple.tsx b/packages/components/ripple/src/ripple.tsx
index ad51345c50..96d4c480cd 100644
--- a/packages/components/ripple/src/ripple.tsx
+++ b/packages/components/ripple/src/ripple.tsx
@@ -14,7 +14,7 @@ export interface RippleProps extends HTMLNextUIProps<"span"> {
   onClear: (key: React.Key) => void;
 }
 
-const domAnimation = () => import("./dom-animation").then((res) => res.default);
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
 
 const Ripple: FC<RippleProps> = (props) => {
   const {ripples = [], motionProps, color = "currentColor", style, onClear} = props;
diff --git a/packages/components/tabs/src/tab.tsx b/packages/components/tabs/src/tab.tsx
index 0a5aa92117..3d44e44f7c 100644
--- a/packages/components/tabs/src/tab.tsx
+++ b/packages/components/tabs/src/tab.tsx
@@ -26,7 +26,7 @@ export interface TabItemProps<T extends object = object> extends BaseTabItemProp
   disableCursorAnimation?: ValuesType["disableCursorAnimation"];
 }
 
-const domAnimation = () => import("./dom-animation").then((res) => res.default);
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
 
 /**
  * @internal
diff --git a/packages/components/tooltip/src/tooltip.tsx b/packages/components/tooltip/src/tooltip.tsx
index 58ac8449ae..e014eb8944 100644
--- a/packages/components/tooltip/src/tooltip.tsx
+++ b/packages/components/tooltip/src/tooltip.tsx
@@ -11,7 +11,7 @@ import {UseTooltipProps, useTooltip} from "./use-tooltip";
 
 export interface TooltipProps extends Omit<UseTooltipProps, "disableTriggerFocus" | "backdrop"> {}
 
-const domAnimation = () => import("./dom-animation").then((res) => res.default);
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
 
 const Tooltip = forwardRef<"div", TooltipProps>((props, ref) => {
   const {

From 1cf9d018fea020fd3413389289d978f1b61dc2af Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 29 Jun 2024 18:29:04 +0800
Subject: [PATCH 23/31] fix(navbar): remove duplicate definition

---
 packages/components/navbar/src/navbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/navbar/src/navbar.tsx b/packages/components/navbar/src/navbar.tsx
index 5310d0451a..be7fdb3593 100644
--- a/packages/components/navbar/src/navbar.tsx
+++ b/packages/components/navbar/src/navbar.tsx
@@ -1,6 +1,6 @@
 import {forwardRef} from "@nextui-org/system";
 import {pickChildren} from "@nextui-org/react-utils";
-import {LazyMotion, domAnimation, m} from "framer-motion";
+import {LazyMotion, m} from "framer-motion";
 import {mergeProps} from "@react-aria/utils";
 
 import {hideOnScrollVariants} from "./navbar-transitions";

From f4cd7656dce432dfd35fafa76a53a84704e14d31 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 29 Jun 2024 18:46:14 +0800
Subject: [PATCH 24/31] feat(changeset): add changeset

---
 .changeset/tiny-kids-thank.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 .changeset/tiny-kids-thank.md

diff --git a/.changeset/tiny-kids-thank.md b/.changeset/tiny-kids-thank.md
new file mode 100644
index 0000000000..659aab59ed
--- /dev/null
+++ b/.changeset/tiny-kids-thank.md
@@ -0,0 +1,16 @@
+---
+"@nextui-org/accordion": patch
+"@nextui-org/calendar": patch
+"@nextui-org/modal": patch
+"@nextui-org/navbar": patch
+"@nextui-org/popover": patch
+"@nextui-org/ripple": patch
+"@nextui-org/tabs": patch
+"@nextui-org/tooltip": patch
+"@nextui-org/theme": patch
+"@nextui-org/use-infinite-scroll": patch
+"@nextui-org/dom-animation": patch
+"@nextui-org/shared-utils": patch
+---
+
+framer motion optimization (#3340)

From 33ce0547f3c74f17c86d5de8f76a0693391462d9 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sun, 30 Jun 2024 13:05:53 +0800
Subject: [PATCH 25/31] fix(tabs): use domMax instead

---
 packages/components/tabs/package.json   | 1 -
 packages/components/tabs/src/dom-max.ts | 2 ++
 packages/components/tabs/src/tab.tsx    | 4 ++--
 3 files changed, 4 insertions(+), 3 deletions(-)
 create mode 100644 packages/components/tabs/src/dom-max.ts

diff --git a/packages/components/tabs/package.json b/packages/components/tabs/package.json
index d7196086a0..43d25d6e13 100644
--- a/packages/components/tabs/package.json
+++ b/packages/components/tabs/package.json
@@ -47,7 +47,6 @@
     "@nextui-org/framer-utils": "workspace:*",
     "@nextui-org/use-is-mounted": "workspace:*",
     "@nextui-org/use-update-effect": "workspace:*",
-    "@nextui-org/dom-animation": "workspace:*",
     "@react-aria/focus": "3.17.1",
     "@react-aria/interactions": "3.21.3",
     "@react-aria/tabs": "3.9.1",
diff --git a/packages/components/tabs/src/dom-max.ts b/packages/components/tabs/src/dom-max.ts
new file mode 100644
index 0000000000..e0c255116a
--- /dev/null
+++ b/packages/components/tabs/src/dom-max.ts
@@ -0,0 +1,2 @@
+import {domMax} from "framer-motion";
+export default domMax;
diff --git a/packages/components/tabs/src/tab.tsx b/packages/components/tabs/src/tab.tsx
index 3d44e44f7c..36d52e392e 100644
--- a/packages/components/tabs/src/tab.tsx
+++ b/packages/components/tabs/src/tab.tsx
@@ -26,7 +26,7 @@ export interface TabItemProps<T extends object = object> extends BaseTabItemProp
   disableCursorAnimation?: ValuesType["disableCursorAnimation"];
 }
 
-const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+const domMax = () => import("./dom-max").then((res) => res.default);
 
 /**
  * @internal
@@ -124,7 +124,7 @@ const Tab = forwardRef<"button", TabItemProps>((props, ref) => {
       type={Component === "button" ? "button" : undefined}
     >
       {isSelected && !disableAnimation && !disableCursorAnimation && isMounted ? (
-        <LazyMotion features={domAnimation}>
+        <LazyMotion features={domMax}>
           <m.span
             className={slots.cursor({class: classNames?.cursor})}
             data-slot="cursor"

From 59c82278740711ffa7e320ad0f28205c10c1a271 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sun, 30 Jun 2024 13:06:17 +0800
Subject: [PATCH 26/31] chore(deps): pnpm-lock.yaml

---
 pnpm-lock.yaml | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b3f17e041a..489604ec11 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2669,9 +2669,6 @@ importers:
       '@nextui-org/aria-utils':
         specifier: workspace:*
         version: link:../../utilities/aria-utils
-      '@nextui-org/dom-animation':
-        specifier: workspace:*
-        version: link:../../utilities/dom-animation
       '@nextui-org/framer-utils':
         specifier: workspace:*
         version: link:../../utilities/framer-utils

From 42e3b4e633943c7d97251cc2456aa86ce4085604 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sun, 30 Jun 2024 13:09:37 +0800
Subject: [PATCH 27/31] fix(tabs): discard dynamic load for domMax

---
 packages/components/tabs/src/dom-max.ts | 2 --
 packages/components/tabs/src/tab.tsx    | 4 +---
 2 files changed, 1 insertion(+), 5 deletions(-)
 delete mode 100644 packages/components/tabs/src/dom-max.ts

diff --git a/packages/components/tabs/src/dom-max.ts b/packages/components/tabs/src/dom-max.ts
deleted file mode 100644
index e0c255116a..0000000000
--- a/packages/components/tabs/src/dom-max.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import {domMax} from "framer-motion";
-export default domMax;
diff --git a/packages/components/tabs/src/tab.tsx b/packages/components/tabs/src/tab.tsx
index 36d52e392e..a5c607fb0e 100644
--- a/packages/components/tabs/src/tab.tsx
+++ b/packages/components/tabs/src/tab.tsx
@@ -9,7 +9,7 @@ import {useFocusRing} from "@react-aria/focus";
 import {Node} from "@react-types/shared";
 import {useTab} from "@react-aria/tabs";
 import {useHover} from "@react-aria/interactions";
-import {m, LazyMotion} from "framer-motion";
+import {m, LazyMotion, domMax} from "framer-motion";
 import {useIsMounted} from "@nextui-org/use-is-mounted";
 
 import {ValuesType} from "./use-tabs";
@@ -26,8 +26,6 @@ export interface TabItemProps<T extends object = object> extends BaseTabItemProp
   disableCursorAnimation?: ValuesType["disableCursorAnimation"];
 }
 
-const domMax = () => import("./dom-max").then((res) => res.default);
-
 /**
  * @internal
  */

From 25c35101be442f5d7ee63643628464a29d2d6bc6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= <wingkwong.code@gmail.com>
Date: Sun, 30 Jun 2024 13:20:39 +0800
Subject: [PATCH 28/31] chore(deps): framer-motion versions (#3308)

* chore(deps): update framer-motion version in peerDependencies

* chore(deps): sync framer-motion version across packages

* chore(deps): pnpm-lock.yaml

* feat(changeset): add changeset
---
 .changeset/pink-rivers-rush.md                | 20 +++++
 packages/components/accordion/package.json    |  4 +-
 packages/components/autocomplete/package.json |  2 +-
 packages/components/button/package.json       |  2 +-
 packages/components/calendar/package.json     |  2 +-
 packages/components/card/package.json         |  2 +-
 packages/components/dropdown/package.json     |  4 +-
 packages/components/modal/package.json        |  4 +-
 packages/components/navbar/package.json       |  2 +-
 packages/components/popover/package.json      |  4 +-
 packages/components/ripple/package.json       |  4 +-
 packages/components/select/package.json       |  4 +-
 packages/components/snippet/package.json      |  2 +-
 packages/components/tabs/package.json         |  4 +-
 packages/components/tooltip/package.json      |  4 +-
 packages/core/system/package.json             |  2 +-
 packages/utilities/framer-utils/package.json  |  2 +-
 pnpm-lock.yaml                                | 82 ++++++-------------
 18 files changed, 69 insertions(+), 81 deletions(-)
 create mode 100644 .changeset/pink-rivers-rush.md

diff --git a/.changeset/pink-rivers-rush.md b/.changeset/pink-rivers-rush.md
new file mode 100644
index 0000000000..c9cb866725
--- /dev/null
+++ b/.changeset/pink-rivers-rush.md
@@ -0,0 +1,20 @@
+---
+"@nextui-org/accordion": patch
+"@nextui-org/autocomplete": patch
+"@nextui-org/button": patch
+"@nextui-org/calendar": patch
+"@nextui-org/card": patch
+"@nextui-org/dropdown": patch
+"@nextui-org/modal": patch
+"@nextui-org/navbar": patch
+"@nextui-org/popover": patch
+"@nextui-org/ripple": patch
+"@nextui-org/select": patch
+"@nextui-org/snippet": patch
+"@nextui-org/tabs": patch
+"@nextui-org/tooltip": patch
+"@nextui-org/system": patch
+"@nextui-org/framer-utils": patch
+---
+
+update `framer-motion` versions
diff --git a/packages/components/accordion/package.json b/packages/components/accordion/package.json
index fcdc68789f..6b1fdc93d6 100644
--- a/packages/components/accordion/package.json
+++ b/packages/components/accordion/package.json
@@ -42,7 +42,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
@@ -70,7 +70,7 @@
     "@nextui-org/avatar": "workspace:*",
     "@nextui-org/input": "workspace:*",
     "@nextui-org/test-utils": "workspace:*",
-    "framer-motion": "^11.0.22",
+    "framer-motion": "^11.1.7",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
diff --git a/packages/components/autocomplete/package.json b/packages/components/autocomplete/package.json
index 67d769067b..0cc8215255 100644
--- a/packages/components/autocomplete/package.json
+++ b/packages/components/autocomplete/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
diff --git a/packages/components/button/package.json b/packages/components/button/package.json
index b7e44122ef..6650cc2be8 100644
--- a/packages/components/button/package.json
+++ b/packages/components/button/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
diff --git a/packages/components/calendar/package.json b/packages/components/calendar/package.json
index 61801b99e8..60857ea971 100644
--- a/packages/components/calendar/package.json
+++ b/packages/components/calendar/package.json
@@ -66,7 +66,7 @@
     "@nextui-org/theme": "workspace:*",
     "@nextui-org/radio": "workspace:*",
     "@nextui-org/test-utils": "workspace:*",
-    "framer-motion": "^10.16.4",
+    "framer-motion": "^11.1.7",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
diff --git a/packages/components/card/package.json b/packages/components/card/package.json
index b1a7048a34..3999ee656b 100644
--- a/packages/components/card/package.json
+++ b/packages/components/card/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
diff --git a/packages/components/dropdown/package.json b/packages/components/dropdown/package.json
index 6b9f7dc3f1..88fbb8e727 100644
--- a/packages/components/dropdown/package.json
+++ b/packages/components/dropdown/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
@@ -61,7 +61,7 @@
     "@nextui-org/image": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/test-utils": "workspace:*",
-    "framer-motion": "^11.0.22",
+    "framer-motion": "^11.1.7",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
diff --git a/packages/components/modal/package.json b/packages/components/modal/package.json
index 354a34ff10..1b8edc584e 100644
--- a/packages/components/modal/package.json
+++ b/packages/components/modal/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
@@ -65,7 +65,7 @@
     "@nextui-org/button": "workspace:*",
     "@nextui-org/link": "workspace:*",
     "react-lorem-component": "0.13.0",
-    "framer-motion": "^11.0.22",
+    "framer-motion": "^11.1.7",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
diff --git a/packages/components/navbar/package.json b/packages/components/navbar/package.json
index f0ef72ef09..aecb9bfa01 100644
--- a/packages/components/navbar/package.json
+++ b/packages/components/navbar/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
diff --git a/packages/components/popover/package.json b/packages/components/popover/package.json
index 9ed888b6a0..5a20f93120 100644
--- a/packages/components/popover/package.json
+++ b/packages/components/popover/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
@@ -64,7 +64,7 @@
     "@nextui-org/system": "workspace:*",
     "@nextui-org/input": "workspace:*",
     "@nextui-org/card": "workspace:*",
-    "framer-motion": "^11.0.22",
+    "framer-motion": "^11.1.7",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
diff --git a/packages/components/ripple/package.json b/packages/components/ripple/package.json
index 6f5d5eefc9..485e9f5972 100644
--- a/packages/components/ripple/package.json
+++ b/packages/components/ripple/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
@@ -49,7 +49,7 @@
     "@nextui-org/theme": "workspace:*",
     "@nextui-org/system": "workspace:*",
     "clean-package": "2.2.0",
-    "framer-motion": "^11.0.22",
+    "framer-motion": "^11.1.7",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
diff --git a/packages/components/select/package.json b/packages/components/select/package.json
index 40aea16170..c57a765c6b 100644
--- a/packages/components/select/package.json
+++ b/packages/components/select/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
@@ -68,7 +68,7 @@
     "@nextui-org/chip": "workspace:*",
     "@nextui-org/stories-utils": "workspace:*",
     "@nextui-org/use-infinite-scroll": "workspace:*",
-    "framer-motion": "^11.0.28",
+    "framer-motion": "^11.1.7",
     "@react-aria/i18n": "3.11.1",
     "@react-stately/data": "3.11.4",
     "clean-package": "2.2.0",
diff --git a/packages/components/snippet/package.json b/packages/components/snippet/package.json
index 415e008cad..fc3da063dd 100644
--- a/packages/components/snippet/package.json
+++ b/packages/components/snippet/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
diff --git a/packages/components/tabs/package.json b/packages/components/tabs/package.json
index 43d25d6e13..e4da6ac8d4 100644
--- a/packages/components/tabs/package.json
+++ b/packages/components/tabs/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
@@ -59,7 +59,7 @@
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",
     "@nextui-org/system": "workspace:*",
-    "framer-motion": "^11.0.22",
+    "framer-motion": "^11.1.7",
     "react-lorem-component": "0.13.0",
     "@nextui-org/card": "workspace:*",
     "@nextui-org/input": "workspace:*",
diff --git a/packages/components/tooltip/package.json b/packages/components/tooltip/package.json
index dff56cb3f4..191e0226b3 100644
--- a/packages/components/tooltip/package.json
+++ b/packages/components/tooltip/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
@@ -60,7 +60,7 @@
     "@nextui-org/system": "workspace:*",
     "@nextui-org/theme": "workspace:*",
     "clean-package": "2.2.0",
-    "framer-motion": "^11.0.28",
+    "framer-motion": "^11.1.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
diff --git a/packages/core/system/package.json b/packages/core/system/package.json
index 219d84aeab..3975dab245 100644
--- a/packages/core/system/package.json
+++ b/packages/core/system/package.json
@@ -42,7 +42,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "clean-package": "2.2.0",
-    "framer-motion": "^11.0.22"
+    "framer-motion": "^11.1.7"
   },
   "clean-package": "../../../clean-package.config.json",
   "tsup": {
diff --git a/packages/utilities/framer-utils/package.json b/packages/utilities/framer-utils/package.json
index 75315222d7..37460cae7e 100644
--- a/packages/utilities/framer-utils/package.json
+++ b/packages/utilities/framer-utils/package.json
@@ -47,7 +47,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "clean-package": "2.2.0",
-    "framer-motion": "^11.0.22"
+    "framer-motion": "^11.1.7"
   },
   "clean-package": "../../../clean-package.config.json"
 }
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 489604ec11..b1488a0e08 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -678,8 +678,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.22
-        version: 11.0.28(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.1.7
+        version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -955,7 +955,7 @@ importers:
         specifier: 3.23.1
         version: 3.23.1(react@18.2.0)
       framer-motion:
-        specifier: '>=10.17.0'
+        specifier: '>=11.0.22'
         version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
     devDependencies:
       '@nextui-org/shared-icons':
@@ -1056,8 +1056,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^10.16.4
-        version: 10.18.0(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.1.7
+        version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -1095,7 +1095,7 @@ importers:
         specifier: 3.23.1
         version: 3.23.1(react@18.2.0)
       framer-motion:
-        specifier: '>=10.17.0'
+        specifier: '>=11.0.22'
         version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
     devDependencies:
       '@nextui-org/avatar':
@@ -1487,8 +1487,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.22
-        version: 11.0.28(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.1.7
+        version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -1860,8 +1860,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.22
-        version: 11.0.28(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.1.7
+        version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -1911,7 +1911,7 @@ importers:
         specifier: 3.10.1
         version: 3.10.1(react@18.2.0)
       framer-motion:
-        specifier: '>=10.17.0'
+        specifier: '>=11.0.22'
         version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
       react-remove-scroll:
         specifier: ^2.5.6
@@ -2070,8 +2070,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.22
-        version: 11.0.28(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.1.7
+        version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -2199,8 +2199,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.22
-        version: 11.0.28(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.1.7
+        version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -2327,8 +2327,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.28
-        version: 11.0.28(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.1.7
+        version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -2452,7 +2452,7 @@ importers:
         specifier: 3.24.1
         version: 3.24.1(react@18.2.0)
       framer-motion:
-        specifier: '>=10.17.0'
+        specifier: '>=11.0.22'
         version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
     devDependencies:
       '@nextui-org/system':
@@ -2734,8 +2734,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.22
-        version: 11.0.28(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.1.7
+        version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -2801,8 +2801,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.28
-        version: 11.0.28(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.1.7
+        version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -3023,7 +3023,7 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.22
+        specifier: ^11.1.7
         version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
@@ -3683,8 +3683,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.22
-        version: 11.0.28(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.1.7
+        version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -6117,20 +6117,6 @@ packages:
     dev: true
     optional: true
 
-  /@emotion/is-prop-valid@0.8.8:
-    resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==}
-    requiresBuild: true
-    dependencies:
-      '@emotion/memoize': 0.7.4
-    dev: true
-    optional: true
-
-  /@emotion/memoize@0.7.4:
-    resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==}
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.2.0):
     resolution: {integrity: sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==}
     peerDependencies:
@@ -17336,24 +17322,6 @@ packages:
       map-cache: 0.2.2
     dev: true
 
-  /framer-motion@10.18.0(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-oGlDh1Q1XqYPksuTD/usb0I70hq95OUzmL9+6Zd+Hs4XV0oaISBa/UUMSjYiq6m8EUF32132mOJ8xVZS+I0S6w==}
-    peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
-    peerDependenciesMeta:
-      react:
-        optional: true
-      react-dom:
-        optional: true
-    dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      tslib: 2.6.2
-    optionalDependencies:
-      '@emotion/is-prop-valid': 0.8.8
-    dev: true
-
   /framer-motion@11.0.28(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-j/vNYTCH5MX5sY/3dwMs00z1+qAqKX3iIHF762bwqlU814ooD5dDbuj3pA0LmIT5YqyryCkXEb/q+zRblin0lw==}
     peerDependencies:

From 1aacbed63ad5c72af9a44aaa4469f56723ee80ea Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sun, 30 Jun 2024 13:25:48 +0800
Subject: [PATCH 29/31] chore(deps): sync framer-motion versions

---
 apps/docs/package.json                        |  2 +-
 packages/components/accordion/package.json    |  2 +-
 packages/components/autocomplete/package.json |  2 +-
 packages/components/calendar/package.json     |  2 +-
 packages/components/dropdown/package.json     |  2 +-
 packages/components/modal/package.json        |  2 +-
 packages/components/popover/package.json      |  2 +-
 packages/components/ripple/package.json       |  2 +-
 packages/components/select/package.json       |  2 +-
 packages/components/tabs/package.json         |  2 +-
 packages/components/tooltip/package.json      |  2 +-
 packages/core/react/package.json              |  2 +-
 packages/core/system/package.json             |  2 +-
 packages/utilities/framer-utils/package.json  |  4 +-
 pnpm-lock.yaml                                | 65 +++++++++----------
 15 files changed, 47 insertions(+), 48 deletions(-)

diff --git a/apps/docs/package.json b/apps/docs/package.json
index bfaf58848c..1190dc3182 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -55,7 +55,7 @@
     "color2k": "^2.0.2",
     "contentlayer": "^0.3.4",
     "date-fns": "^2.30.0",
-    "framer-motion": "^11.1.7",
+    "framer-motion": "^11.2.12",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.3",
     "hast-util-to-html": "7.1.2",
diff --git a/packages/components/accordion/package.json b/packages/components/accordion/package.json
index 6b1fdc93d6..7f2ac0c069 100644
--- a/packages/components/accordion/package.json
+++ b/packages/components/accordion/package.json
@@ -70,7 +70,7 @@
     "@nextui-org/avatar": "workspace:*",
     "@nextui-org/input": "workspace:*",
     "@nextui-org/test-utils": "workspace:*",
-    "framer-motion": "^11.1.7",
+    "framer-motion": "^11.2.12",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
diff --git a/packages/components/autocomplete/package.json b/packages/components/autocomplete/package.json
index 0cc8215255..19f991427b 100644
--- a/packages/components/autocomplete/package.json
+++ b/packages/components/autocomplete/package.json
@@ -71,7 +71,7 @@
     "@nextui-org/stories-utils": "workspace:*",
     "@nextui-org/use-infinite-scroll": "workspace:*",
     "@react-stately/data": "3.11.4",
-    "framer-motion": "^11.0.28",
+    "framer-motion": "^11.2.12",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
diff --git a/packages/components/calendar/package.json b/packages/components/calendar/package.json
index 60857ea971..4a9f1f55d2 100644
--- a/packages/components/calendar/package.json
+++ b/packages/components/calendar/package.json
@@ -66,7 +66,7 @@
     "@nextui-org/theme": "workspace:*",
     "@nextui-org/radio": "workspace:*",
     "@nextui-org/test-utils": "workspace:*",
-    "framer-motion": "^11.1.7",
+    "framer-motion": "^11.2.12",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
diff --git a/packages/components/dropdown/package.json b/packages/components/dropdown/package.json
index 88fbb8e727..9d2d23c5fc 100644
--- a/packages/components/dropdown/package.json
+++ b/packages/components/dropdown/package.json
@@ -61,7 +61,7 @@
     "@nextui-org/image": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/test-utils": "workspace:*",
-    "framer-motion": "^11.1.7",
+    "framer-motion": "^11.2.12",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
diff --git a/packages/components/modal/package.json b/packages/components/modal/package.json
index 1b8edc584e..9fe10c24ac 100644
--- a/packages/components/modal/package.json
+++ b/packages/components/modal/package.json
@@ -65,7 +65,7 @@
     "@nextui-org/button": "workspace:*",
     "@nextui-org/link": "workspace:*",
     "react-lorem-component": "0.13.0",
-    "framer-motion": "^11.1.7",
+    "framer-motion": "^11.2.12",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
diff --git a/packages/components/popover/package.json b/packages/components/popover/package.json
index 5a20f93120..a19f1f3529 100644
--- a/packages/components/popover/package.json
+++ b/packages/components/popover/package.json
@@ -64,7 +64,7 @@
     "@nextui-org/system": "workspace:*",
     "@nextui-org/input": "workspace:*",
     "@nextui-org/card": "workspace:*",
-    "framer-motion": "^11.1.7",
+    "framer-motion": "^11.2.12",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
diff --git a/packages/components/ripple/package.json b/packages/components/ripple/package.json
index 485e9f5972..9205c707ff 100644
--- a/packages/components/ripple/package.json
+++ b/packages/components/ripple/package.json
@@ -49,7 +49,7 @@
     "@nextui-org/theme": "workspace:*",
     "@nextui-org/system": "workspace:*",
     "clean-package": "2.2.0",
-    "framer-motion": "^11.1.7",
+    "framer-motion": "^11.2.12",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
diff --git a/packages/components/select/package.json b/packages/components/select/package.json
index c57a765c6b..88537c4e6f 100644
--- a/packages/components/select/package.json
+++ b/packages/components/select/package.json
@@ -68,7 +68,7 @@
     "@nextui-org/chip": "workspace:*",
     "@nextui-org/stories-utils": "workspace:*",
     "@nextui-org/use-infinite-scroll": "workspace:*",
-    "framer-motion": "^11.1.7",
+    "framer-motion": "^11.2.12",
     "@react-aria/i18n": "3.11.1",
     "@react-stately/data": "3.11.4",
     "clean-package": "2.2.0",
diff --git a/packages/components/tabs/package.json b/packages/components/tabs/package.json
index e4da6ac8d4..79fd53869b 100644
--- a/packages/components/tabs/package.json
+++ b/packages/components/tabs/package.json
@@ -59,7 +59,7 @@
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",
     "@nextui-org/system": "workspace:*",
-    "framer-motion": "^11.1.7",
+    "framer-motion": "^11.2.12",
     "react-lorem-component": "0.13.0",
     "@nextui-org/card": "workspace:*",
     "@nextui-org/input": "workspace:*",
diff --git a/packages/components/tooltip/package.json b/packages/components/tooltip/package.json
index 191e0226b3..0a86e1e0ec 100644
--- a/packages/components/tooltip/package.json
+++ b/packages/components/tooltip/package.json
@@ -60,7 +60,7 @@
     "@nextui-org/system": "workspace:*",
     "@nextui-org/theme": "workspace:*",
     "clean-package": "2.2.0",
-    "framer-motion": "^11.1.7",
+    "framer-motion": "^11.2.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
diff --git a/packages/core/react/package.json b/packages/core/react/package.json
index 446b9ff596..9dc49b24dc 100644
--- a/packages/core/react/package.json
+++ b/packages/core/react/package.json
@@ -89,7 +89,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0"
+    "framer-motion": ">=11.0.22"
   },
   "devDependencies": {
     "react": "^18.0.0",
diff --git a/packages/core/system/package.json b/packages/core/system/package.json
index 3975dab245..ee066c738c 100644
--- a/packages/core/system/package.json
+++ b/packages/core/system/package.json
@@ -42,7 +42,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "clean-package": "2.2.0",
-    "framer-motion": "^11.1.7"
+    "framer-motion": "^11.2.12"
   },
   "clean-package": "../../../clean-package.config.json",
   "tsup": {
diff --git a/packages/utilities/framer-utils/package.json b/packages/utilities/framer-utils/package.json
index 37460cae7e..c80a6a00a8 100644
--- a/packages/utilities/framer-utils/package.json
+++ b/packages/utilities/framer-utils/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0"
+    "framer-motion": ">=11.0.22"
   },
   "dependencies": {
     "@nextui-org/system": "workspace:*",
@@ -47,7 +47,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "clean-package": "2.2.0",
-    "framer-motion": "^11.1.7"
+    "framer-motion": "^11.2.12"
   },
   "clean-package": "../../../clean-package.config.json"
 }
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b1488a0e08..99767b4e1c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -391,8 +391,8 @@ importers:
         specifier: ^2.30.0
         version: 2.30.0
       framer-motion:
-        specifier: ^11.1.7
-        version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.2.12
+        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
       github-slugger:
         specifier: ^2.0.0
         version: 2.0.0
@@ -678,8 +678,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.1.7
-        version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.2.12
+        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -778,8 +778,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.28
-        version: 11.0.28(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.2.12
+        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -1056,8 +1056,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.1.7
-        version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.2.12
+        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -1487,8 +1487,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.1.7
-        version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.2.12
+        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -1860,8 +1860,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.1.7
-        version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.2.12
+        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -2070,8 +2070,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.1.7
-        version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.2.12
+        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -2199,8 +2199,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.1.7
-        version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.2.12
+        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -2327,8 +2327,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.1.7
-        version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.2.12
+        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -2734,8 +2734,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.1.7
-        version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.2.12
+        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -2801,8 +2801,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.1.7
-        version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.2.12
+        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -2982,8 +2982,8 @@ importers:
         specifier: 3.8.12
         version: 3.8.12(react@18.2.0)
       framer-motion:
-        specifier: '>=10.17.0'
-        version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
+        specifier: '>=11.0.22'
+        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
     devDependencies:
       clean-package:
         specifier: 2.2.0
@@ -3023,8 +3023,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.1.7
-        version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.2.12
+        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -3683,8 +3683,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.1.7
-        version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.2.12
+        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -17322,8 +17322,8 @@ packages:
       map-cache: 0.2.2
     dev: true
 
-  /framer-motion@11.0.28(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-j/vNYTCH5MX5sY/3dwMs00z1+qAqKX3iIHF762bwqlU814ooD5dDbuj3pA0LmIT5YqyryCkXEb/q+zRblin0lw==}
+  /framer-motion@11.1.7(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-cW11Pu53eDAXUEhv5hEiWuIXWhfkbV32PlgVISn7jRdcAiVrJ1S03YQQ0/DzoswGYYwKi4qYmHHjCzAH52eSdQ==}
     peerDependencies:
       '@emotion/is-prop-valid': '*'
       react: ^18.2.0
@@ -17339,10 +17339,9 @@ packages:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       tslib: 2.6.2
-    dev: true
 
-  /framer-motion@11.1.7(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-cW11Pu53eDAXUEhv5hEiWuIXWhfkbV32PlgVISn7jRdcAiVrJ1S03YQQ0/DzoswGYYwKi4qYmHHjCzAH52eSdQ==}
+  /framer-motion@11.2.12(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-lCjkV4nA9rWOy2bhR4RZzkp2xpB++kFmUZ6D44V9VQaxk+JDmbDd5lq+u58DjJIIllE8AZEXp9OG/TyDN4FB/w==}
     peerDependencies:
       '@emotion/is-prop-valid': '*'
       react: ^18.2.0

From 4b9a9b8e362c2118f80ea597ceb337698cd9ce0d Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sun, 30 Jun 2024 15:31:09 +0800
Subject: [PATCH 30/31] refactor(tabs): add comments

---
 packages/components/tabs/src/tab.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/components/tabs/src/tab.tsx b/packages/components/tabs/src/tab.tsx
index a5c607fb0e..d5a36be892 100644
--- a/packages/components/tabs/src/tab.tsx
+++ b/packages/components/tabs/src/tab.tsx
@@ -122,6 +122,8 @@ const Tab = forwardRef<"button", TabItemProps>((props, ref) => {
       type={Component === "button" ? "button" : undefined}
     >
       {isSelected && !disableAnimation && !disableCursorAnimation && isMounted ? (
+        // use synchronous loading for domMax here
+        // since lazy loading produces different behaviour
         <LazyMotion features={domMax}>
           <m.span
             className={slots.cursor({class: classNames?.cursor})}

From 8b4b1150df62f239a84620f778b414692547969d Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sun, 30 Jun 2024 16:19:44 +0800
Subject: [PATCH 31/31] chore(changeset): remove tabs

---
 .changeset/tiny-kids-thank.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.changeset/tiny-kids-thank.md b/.changeset/tiny-kids-thank.md
index 659aab59ed..71d470661f 100644
--- a/.changeset/tiny-kids-thank.md
+++ b/.changeset/tiny-kids-thank.md
@@ -5,7 +5,6 @@
 "@nextui-org/navbar": patch
 "@nextui-org/popover": patch
 "@nextui-org/ripple": patch
-"@nextui-org/tabs": patch
 "@nextui-org/tooltip": patch
 "@nextui-org/theme": patch
 "@nextui-org/use-infinite-scroll": patch