From becf16fb8bcb1bfc97bd637256c006f84c6a1d05 Mon Sep 17 00:00:00 2001
From: Haneet Singh <haneet.singh@everstream.ai>
Date: Mon, 6 Jan 2025 15:23:42 -0500
Subject: [PATCH 1/2] fix: improve arrow container structure for hover
 interactions

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

diff --git a/packages/nuka/src/Carousel/Carousel.tsx b/packages/nuka/src/Carousel/Carousel.tsx
index db0fbb24..0896645a 100644
--- a/packages/nuka/src/Carousel/Carousel.tsx
+++ b/packages/nuka/src/Carousel/Carousel.tsx
@@ -190,8 +190,8 @@ export const Carousel = forwardRef<SlideHandle, CarouselProps>(
               >
                 {children}
               </div>
+              {showArrows && <div className="nuka-arrows">{arrows}</div>}
             </div>
-            {showArrows && arrows}
           </div>
         </div>
         {showDots && dots}

From f591390a5378b36a419a3bc964887d87cb9e701b Mon Sep 17 00:00:00 2001
From: Haneet Singh <haneet.singh@everstream.ai>
Date: Tue, 7 Jan 2025 14:23:29 -0500
Subject: [PATCH 2/2] fix: improve hover interactions for custom and default
 arrows

---
 docs/api/autoplay.mdx                   | 25 ++++++++++++++++++++++++-
 packages/nuka/src/Carousel/Carousel.tsx | 10 ++++++++--
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/docs/api/autoplay.mdx b/docs/api/autoplay.mdx
index 01286a8b..572c726b 100644
--- a/docs/api/autoplay.mdx
+++ b/docs/api/autoplay.mdx
@@ -14,7 +14,7 @@ For accessibility, the carousel will pause when the user is interacting with it.
 | `autoplay`         | boolean | `false`       |
 | `autoplayInterval` | number  | `3000`        |
 
-### Example
+#### Example
 
 <Carousel autoplay={true} autoplayInterval={1000} wrapMode="wrap">
   <img src="/open-source/nuka-carousel/img/pexels-01.jpg" />
@@ -31,3 +31,26 @@ For accessibility, the carousel will pause when the user is interacting with it.
   <img src="pexels-03.jpg" />
 </Carousel>
 ```
+
+### Navigation Arrows
+
+| Prop Name          | Type    | Default Value |
+| :----------------- | :------ | :------------ |
+| `autoplay`         | boolean | `false`       |
+| `showArrows`       | boolean \| `always` \| `hover` | `false`       |
+
+<Carousel autoplay={true} autoplayInterval={2000} wrapMode="wrap" showArrows={true}>
+  <img src="/open-source/nuka-carousel/img/pexels-01.jpg" />
+  <img src="/open-source/nuka-carousel/img/pexels-02.jpg" />
+  <img src="/open-source/nuka-carousel/img/pexels-03.jpg" />
+</Carousel>
+
+#### Code
+
+```tsx
+<Carousel autoplay={true} showArrows={true}>
+  <img src="pexels-01.jpg" />
+  <img src="pexels-02.jpg" />
+  <img src="pexels-03.jpg" />
+</Carousel>
+```
\ No newline at end of file
diff --git a/packages/nuka/src/Carousel/Carousel.tsx b/packages/nuka/src/Carousel/Carousel.tsx
index 0896645a..9784a30b 100644
--- a/packages/nuka/src/Carousel/Carousel.tsx
+++ b/packages/nuka/src/Carousel/Carousel.tsx
@@ -64,6 +64,7 @@ export const Carousel = forwardRef<SlideHandle, CarouselProps>(
     const carouselRef = useRef<HTMLDivElement | null>(null);
     const containerRef = useRef<HTMLDivElement | null>(null);
     const previousPageRef = useRef<number>(-1);
+    const arrowsContainerRef = useRef<HTMLDivElement | null>(null);
 
     // -- update page count and scroll offset based on scroll distance
     const { totalPages, scrollOffset } = useMeasurement({
@@ -126,8 +127,13 @@ export const Carousel = forwardRef<SlideHandle, CarouselProps>(
 
     // -- autoplay
     const isHovered = useHover({ element: containerRef, enabled: autoplay });
+    const isArrowHovered = useHover({
+      element: arrowsContainerRef,
+      enabled: autoplay && showArrows === true,
+    });
     const prefersReducedMotion = useReducedMotion({ enabled: autoplay });
-    const autoplayEnabled = autoplay && !(isHovered || prefersReducedMotion);
+    const autoplayEnabled =
+      autoplay && !(isHovered || prefersReducedMotion || isArrowHovered);
     useInterval(goForward, autoplayInterval, autoplayEnabled);
 
     // -- scroll container when page index changes
@@ -190,8 +196,8 @@ export const Carousel = forwardRef<SlideHandle, CarouselProps>(
               >
                 {children}
               </div>
-              {showArrows && <div className="nuka-arrows">{arrows}</div>}
             </div>
+            {showArrows && <div ref={arrowsContainerRef}>{arrows}</div>}
           </div>
         </div>
         {showDots && dots}