@underverse-ui/underverse 1.0.65 → 1.0.66

package/dist/index.js

@@ -16224,6 +16224,7 @@ function Carousel({
   const carouselRef = React42.useRef(null);
   const rafRef = React42.useRef(null);
   const isDraggingRef = React42.useRef(false);
+  const dragDistanceRef = React42.useRef(0);
   const startPosRef = React42.useRef(0);
   const lastDragPositionRef = React42.useRef(0);
   const slides = React42.useMemo(() => React42.Children.toArray(children), [children]);
@@ -16423,6 +16424,7 @@ function Carousel({
   };
   const touchStart = (event) => {
     isDraggingRef.current = true;
+    dragDistanceRef.current = 0;
     const pos = isHorizontal ? getPositionX(event.nativeEvent) : getPositionY(event.nativeEvent);
     startPosRef.current = pos;
     lastDragPositionRef.current = pos;
@@ -16431,6 +16433,7 @@ function Carousel({
     if (!isDraggingRef.current) return;
     const pos = isHorizontal ? getPositionX(event.nativeEvent) : getPositionY(event.nativeEvent);
     lastDragPositionRef.current = pos;
+    dragDistanceRef.current = Math.max(dragDistanceRef.current, Math.abs(pos - startPosRef.current));
   };
   const touchEnd = () => {
     if (!isDraggingRef.current) return;
@@ -16445,6 +16448,23 @@ function Carousel({
     startPosRef.current = 0;
     lastDragPositionRef.current = 0;
   };
+  const handleDeckAreaClick = React42.useCallback((event) => {
+    if (!isDeckAnimation || dragDistanceRef.current > 8) {
+      dragDistanceRef.current = 0;
+      return;
+    }
+    const activeDeck = event.currentTarget.querySelector("[data-active-deck='true']");
+    if (!activeDeck) return;
+    const activeRect = activeDeck.getBoundingClientRect();
+    const x = event.clientX;
+    if (x < activeRect.left) {
+      scrollPrev();
+      return;
+    }
+    if (x > activeRect.right) {
+      scrollNext();
+    }
+  }, [isDeckAnimation, scrollNext, scrollPrev]);
   React42.useEffect(() => {
     onSlideChange?.(currentIndex);
   }, [currentIndex, onSlideChange]);
@@ -16480,6 +16500,7 @@ function Carousel({
         return {
           opacity: 0,
           pointerEvents: "none",
+          zIndex: 0,
           transform: `translate3d(0, 0, -${mergedEffectOptions.depthStep * 2}px) scale(${mergedEffectOptions.farScale})`,
           filter: `blur(${mergedEffectOptions.blur * 1.4}px)`
         };
@@ -16492,7 +16513,8 @@ function Carousel({
           opacity: distance === 0 ? 1 : distance === 1 || distance === -1 ? mergedEffectOptions.sideOpacity : mergedEffectOptions.farOpacity,
           transform: `translate3d(${xOffset2}px, ${yOffset}px, -${absDistance * mergedEffectOptions.depthStep}px) scale(${scale2})`,
           filter: distance === 0 ? "blur(0px)" : `blur(${Math.min(absDistance, 2) * mergedEffectOptions.blur}px)`,
-          pointerEvents: "auto"
+          pointerEvents: "auto",
+          zIndex: 30 - absDistance
         };
       }
       const xOffset = distance * mergedEffectOptions.sideOffset;
@@ -16502,7 +16524,8 @@ function Carousel({
         opacity: distance === 0 ? 1 : distance === 1 || distance === -1 ? mergedEffectOptions.sideOpacity : mergedEffectOptions.farOpacity,
         transform: `translate3d(${xOffset}%, 0, -${absDistance * mergedEffectOptions.depthStep}px) rotateY(${rotateY}deg) scale(${scale})`,
         filter: distance === 0 ? "blur(0px)" : `blur(${Math.min(absDistance, 2) * mergedEffectOptions.blur}px)`,
-        pointerEvents: "auto"
+        pointerEvents: "auto",
+        zIndex: 30 - absDistance
       };
     },
     [effectiveAnimation, getLoopDistance, mergedEffectOptions]
@@ -16512,7 +16535,7 @@ function Carousel({
     {
       ref: carouselRef,
       className: cn(
-        "relative w-full overflow-hidden focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 rounded-xl md:rounded-3xl",
+        "relative w-full overflow-hidden focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 rounded-xl md:rounded-3xl",
         className
       ),
       onKeyDown: handleKeyDown,
@@ -16542,32 +16565,61 @@ function Carousel({
             onMouseMove: touchMove,
             onMouseUp: touchEnd,
             onMouseLeave: touchEnd,
+            onClick: handleDeckAreaClick,
             role: "group",
             "aria-atomic": "false",
             "aria-live": autoScroll ? "off" : "polite",
-            children: slides.map((child, idx) => /* @__PURE__ */ jsx49(
-              "div",
-              {
-                className: cn(
-                  "shrink-0",
-                  effectiveAnimation === "slide" ? isHorizontal ? "h-full" : "h-full w-full" : "col-start-1 row-start-1",
-                  effectiveAnimation === "fade" && (idx === currentIndex ? "opacity-100 z-10" : "opacity-0 pointer-events-none z-0"),
-                  effectiveAnimation === "scale" && (idx === currentIndex ? "opacity-100 scale-100 z-10" : "opacity-0 scale-95 pointer-events-none z-0"),
-                  isDeckAnimation && "w-full max-w-[78%] md:max-w-[72%] transition-[opacity,transform] duration-500 ease-out",
-                  isDeckAnimation && idx !== currentIndex && "cursor-pointer",
-                  effectiveAnimation !== "slide" && "transition-[opacity,transform] duration-500 ease-in-out",
-                  slideClassName
-                ),
-                style: effectiveAnimation === "slide" ? { [isHorizontal ? "width" : "height"]: `${slideWidth}%` } : isDeckAnimation ? getDeckSlideStyles(idx) : void 0,
-                onClick: isDeckAnimation && idx !== currentIndex ? () => scrollTo(idx) : void 0,
-                role: "group",
-                "aria-roledescription": "slide",
-                "aria-label": `${idx + 1} of ${totalSlides}`,
-                "aria-hidden": effectiveAnimation === "slide" ? idx < currentIndex || idx >= currentIndex + slidesToShow : idx !== currentIndex,
-                children: child
-              },
-              React42.isValidElement(child) && child.key || idx
-            ))
+            children: slides.map((child, idx) => {
+              const key = React42.isValidElement(child) && child.key || idx;
+              const ariaHidden = effectiveAnimation === "slide" ? idx < currentIndex || idx >= currentIndex + slidesToShow : idx !== currentIndex;
+              if (isDeckAnimation) {
+                return /* @__PURE__ */ jsx49(
+                  "div",
+                  {
+                    className: "col-start-1 row-start-1 flex w-full items-center justify-center pointer-events-none",
+                    "aria-hidden": ariaHidden,
+                    children: /* @__PURE__ */ jsx49(
+                      "div",
+                      {
+                        className: cn(
+                          "w-full max-w-[68%] md:max-w-[60%] transition-[opacity,transform,filter] duration-500 ease-out",
+                          idx !== currentIndex && "cursor-pointer",
+                          slideClassName
+                        ),
+                        "data-active-deck": idx === currentIndex ? "true" : void 0,
+                        style: getDeckSlideStyles(idx),
+                        onClick: idx !== currentIndex ? () => scrollTo(idx) : void 0,
+                        role: "group",
+                        "aria-roledescription": "slide",
+                        "aria-label": `${idx + 1} of ${totalSlides}`,
+                        children: child
+                      }
+                    )
+                  },
+                  key
+                );
+              }
+              return /* @__PURE__ */ jsx49(
+                "div",
+                {
+                  className: cn(
+                    "shrink-0",
+                    effectiveAnimation === "slide" ? isHorizontal ? "h-full" : "h-full w-full" : "col-start-1 row-start-1",
+                    effectiveAnimation === "fade" && (idx === currentIndex ? "opacity-100 z-10" : "opacity-0 pointer-events-none z-0"),
+                    effectiveAnimation === "scale" && (idx === currentIndex ? "opacity-100 scale-100 z-10" : "opacity-0 scale-95 pointer-events-none z-0"),
+                    effectiveAnimation !== "slide" && "transition-[opacity,transform] duration-500 ease-in-out",
+                    slideClassName
+                  ),
+                  style: effectiveAnimation === "slide" ? { [isHorizontal ? "width" : "height"]: `${slideWidth}%` } : void 0,
+                  role: "group",
+                  "aria-roledescription": "slide",
+                  "aria-label": `${idx + 1} of ${totalSlides}`,
+                  "aria-hidden": ariaHidden,
+                  children: child
+                },
+                key
+              );
+            })
           }
         ),
         shouldShowArrows && totalSlides > effectiveSlidesToShow && /* @__PURE__ */ jsxs41(Fragment17, { children: [