@underverse-ui/underverse 1.0.64 → 1.0.66

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.64",
+  "version": "1.0.66",
   "sourceEntry": "src/index.ts",
   "totalExports": 217,
   "exports": [

package/dist/index.cjs

@@ -16390,6 +16390,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]);
@@ -16416,12 +16417,12 @@ function Carousel({
         mainScale: 1.12,
         sideScale: 0.82,
         farScale: 0.72,
-        sideOpacity: 0.72,
-        farOpacity: 0.24,
+        sideOpacity: 0.84,
+        farOpacity: 0.44,
         sideOffset: 22,
         rotate: 20,
         depthStep: 120,
-        blur: 2.6
+        blur: 1.6
       };
     }
     if (effectPreset === "gallery") {
@@ -16500,12 +16501,12 @@ function Carousel({
       mainScale: 1.04,
       sideScale: effectiveAnimation === "stack" ? 0.93 : 0.88,
       farScale: effectiveAnimation === "stack" ? 0.86 : 0.76,
-      sideOpacity: effectiveAnimation === "stack" ? 0.74 : 0.78,
-      farOpacity: effectiveAnimation === "stack" ? 0.42 : 0.38,
+      sideOpacity: effectiveAnimation === "stack" ? 0.8 : 0.86,
+      farOpacity: effectiveAnimation === "stack" ? 0.5 : 0.48,
       sideOffset: effectiveAnimation === "stack" ? 20 : 28,
       rotate: 24,
       depthStep: effectiveAnimation === "stack" ? 60 : 90,
-      blur: 1.5,
+      blur: 1.1,
       stackOffset: 20,
       stackLift: 12,
       ...presetEffectOptions,
@@ -16589,6 +16590,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;
@@ -16597,6 +16599,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;
@@ -16611,6 +16614,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]);
@@ -16646,6 +16666,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)`
         };
@@ -16658,7 +16679,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: distance === 0 ? "auto" : "none"
+          pointerEvents: "auto",
+          zIndex: 30 - absDistance
         };
       }
       const xOffset = distance * mergedEffectOptions.sideOffset;
@@ -16668,7 +16690,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: distance === 0 ? "auto" : "none"
+        pointerEvents: "auto",
+        zIndex: 30 - absDistance
       };
     },
     [effectiveAnimation, getLoopDistance, mergedEffectOptions]
@@ -16678,7 +16701,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,
@@ -16708,30 +16731,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__ */ (0, import_jsx_runtime49.jsx)(
-              "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",
-                  effectiveAnimation !== "slide" && "transition-[opacity,transform] duration-500 ease-in-out",
-                  slideClassName
-                ),
-                style: effectiveAnimation === "slide" ? { [isHorizontal ? "width" : "height"]: `${slideWidth}%` } : isDeckAnimation ? getDeckSlideStyles(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__ */ (0, import_jsx_runtime49.jsx)(
+                  "div",
+                  {
+                    className: "col-start-1 row-start-1 flex w-full items-center justify-center pointer-events-none",
+                    "aria-hidden": ariaHidden,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                      "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__ */ (0, import_jsx_runtime49.jsx)(
+                "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__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [