@underverse-ui/underverse 0.1.33 → 0.1.35

package/dist/index.cjs

@@ -214,6 +214,7 @@ var Button = (0, import_react.forwardRef)(
     lockMs = 600,
     asContainer = false,
     noWrap = true,
+    noHoverOverlay = false,
     ...rest
   }, ref) => {
     const baseStyles = asContainer ? "relative inline-flex justify-center rounded-md font-medium transition-colors duration-150 ease-soft outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background active:translate-y-px" : "relative inline-flex items-center justify-center gap-2 rounded-md font-medium overflow-hidden transition-colors duration-150 ease-soft outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background active:translate-y-px";
@@ -275,7 +276,7 @@ var Button = (0, import_react.forwardRef)(
         "aria-label": rest["aria-label"] || title,
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute inset-0 bg-gradient-to-r from-primary-foreground/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200" }),
+          !noHoverOverlay && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute inset-0 bg-gradient-to-r from-primary-foreground/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200" }),
           loading2 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SpinnerIcon, { className: "w-4 h-4 animate-spin" }),
             loadingText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-2", "aria-live": "polite", children: loadingText }),
@@ -6897,57 +6898,296 @@ function ImageUpload({
 var React27 = __toESM(require("react"), 1);
 var import_lucide_react19 = require("lucide-react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
-function Carousel({ children, autoScroll = true, autoScrollInterval = 5e3 }) {
+function Carousel({
+  children,
+  autoScroll = true,
+  autoScrollInterval = 5e3,
+  animation = "slide",
+  orientation = "horizontal",
+  showArrows = true,
+  showDots = true,
+  showProgress = false,
+  showThumbnails = false,
+  loop = true,
+  slidesToShow = 1,
+  slidesToScroll = 1,
+  className,
+  containerClassName,
+  slideClassName,
+  onSlideChange,
+  thumbnailRenderer,
+  ariaLabel = "Carousel"
+}) {
   const [currentIndex, setCurrentIndex] = React27.useState(0);
-  const totalSlides = React27.Children.count(children);
   const [isPaused, setIsPaused] = React27.useState(false);
+  const [isDragging, setIsDragging] = React27.useState(false);
+  const [startPos, setStartPos] = React27.useState(0);
+  const [currentTranslate, setCurrentTranslate] = React27.useState(0);
+  const [prevTranslate, setPrevTranslate] = React27.useState(0);
+  const [progress, setProgress] = React27.useState(0);
+  const carouselRef = React27.useRef(null);
+  const progressIntervalRef = React27.useRef(null);
+  const totalSlides = React27.Children.count(children);
+  const maxIndex = Math.max(0, totalSlides - slidesToShow);
+  const isHorizontal = orientation === "horizontal";
   const scrollPrev = React27.useCallback(() => {
-    setCurrentIndex((prev) => prev > 0 ? prev - 1 : totalSlides - 1);
-  }, [totalSlides]);
+    setCurrentIndex((prev) => {
+      if (prev === 0) {
+        return loop ? maxIndex : 0;
+      }
+      return Math.max(0, prev - slidesToScroll);
+    });
+  }, [loop, maxIndex, slidesToScroll]);
   const scrollNext = React27.useCallback(() => {
-    setCurrentIndex((prev) => prev < totalSlides - 1 ? prev + 1 : 0);
-  }, [totalSlides]);
+    setCurrentIndex((prev) => {
+      if (prev >= maxIndex) {
+        return loop ? 0 : maxIndex;
+      }
+      return Math.min(maxIndex, prev + slidesToScroll);
+    });
+  }, [loop, maxIndex, slidesToScroll]);
+  const scrollTo = React27.useCallback(
+    (index) => {
+      setCurrentIndex(Math.min(maxIndex, Math.max(0, index)));
+    },
+    [maxIndex]
+  );
   React27.useEffect(() => {
-    if (!autoScroll || isPaused || totalSlides <= 1) return;
-    const interval = setInterval(() => {
-      scrollNext();
-    }, autoScrollInterval);
-    return () => clearInterval(interval);
-  }, [autoScroll, isPaused, totalSlides, autoScrollInterval, scrollNext]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "relative w-full overflow-hidden", onMouseEnter: () => setIsPaused(true), onMouseLeave: () => setIsPaused(false), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex transition-transform duration-500 ease-in-out", style: { transform: `translateX(-${currentIndex * 100}%)` }, children: React27.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex-shrink-0 w-full h-full", children: child }, idx)) }),
-    totalSlides > 1 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-        Button_default,
-        {
-          onClick: scrollPrev,
-          variant: "outline",
-          size: "icon",
-          icon: import_lucide_react19.ArrowLeft,
-          className: "absolute left-4 top-1/2 -translate-y-1/2 hover:-translate-y-1/2 z-10 rounded-full will-change-transform bg-background/80 hover:bg-background border-border/50 hover:border-border text-foreground"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-        Button_default,
-        {
-          onClick: scrollNext,
-          variant: "outline",
-          size: "icon",
-          icon: import_lucide_react19.ArrowRight,
-          className: "absolute right-4 top-1/2 -translate-y-1/2 hover:-translate-y-1/2 z-10 rounded-full will-change-transform bg-background/80 hover:bg-background border-border/50 hover:border-border text-foreground"
+    const handleKeyDown = (e) => {
+      if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        e.preventDefault();
+        scrollPrev();
+      } else if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        e.preventDefault();
+        scrollNext();
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        scrollTo(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        scrollTo(maxIndex);
+      }
+    };
+    const carousel = carouselRef.current;
+    if (carousel) {
+      carousel.addEventListener("keydown", handleKeyDown);
+      return () => carousel.removeEventListener("keydown", handleKeyDown);
+    }
+  }, [scrollPrev, scrollNext, scrollTo, maxIndex]);
+  React27.useEffect(() => {
+    if (!autoScroll || isPaused || totalSlides <= slidesToShow) {
+      setProgress(0);
+      if (progressIntervalRef.current) {
+        clearInterval(progressIntervalRef.current);
+      }
+      return;
+    }
+    setProgress(0);
+    const progressStep = 100 / (autoScrollInterval / 50);
+    progressIntervalRef.current = setInterval(() => {
+      setProgress((prev) => {
+        if (prev >= 100) {
+          scrollNext();
+          return 0;
         }
-      )
-    ] }),
-    totalSlides > 1 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2", children: Array.from({ length: totalSlides }, (_, idx) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-      "button",
-      {
-        onClick: () => setCurrentIndex(idx),
-        className: `w-2 h-2 rounded-full transition-all ${idx === currentIndex ? "bg-primary w-6" : "bg-muted-foreground/50 hover:bg-muted-foreground/75"}`,
-        "aria-label": `Go to slide ${idx + 1}`
-      },
-      idx
-    )) })
-  ] });
+        return prev + progressStep;
+      });
+    }, 50);
+    return () => {
+      if (progressIntervalRef.current) {
+        clearInterval(progressIntervalRef.current);
+      }
+    };
+  }, [autoScroll, isPaused, totalSlides, slidesToShow, autoScrollInterval, scrollNext]);
+  const getPositionX = (event) => {
+    return event.type.includes("mouse") ? event.pageX : event.touches[0].clientX;
+  };
+  const getPositionY = (event) => {
+    return event.type.includes("mouse") ? event.pageY : event.touches[0].clientY;
+  };
+  const touchStart = (event) => {
+    setIsDragging(true);
+    const pos = isHorizontal ? getPositionX(event.nativeEvent) : getPositionY(event.nativeEvent);
+    setStartPos(pos);
+    setPrevTranslate(currentTranslate);
+  };
+  const touchMove = (event) => {
+    if (!isDragging) return;
+    const pos = isHorizontal ? getPositionX(event.nativeEvent) : getPositionY(event.nativeEvent);
+    const currentPosition = pos;
+    setCurrentTranslate(prevTranslate + currentPosition - startPos);
+  };
+  const touchEnd = () => {
+    if (!isDragging) return;
+    setIsDragging(false);
+    const movedBy = currentTranslate - prevTranslate;
+    const threshold = 50;
+    if (movedBy < -threshold && currentIndex < maxIndex) {
+      scrollNext();
+    } else if (movedBy > threshold && currentIndex > 0) {
+      scrollPrev();
+    }
+    setCurrentTranslate(0);
+    setPrevTranslate(0);
+  };
+  React27.useEffect(() => {
+    onSlideChange?.(currentIndex);
+  }, [currentIndex, onSlideChange]);
+  const getAnimationStyles = () => {
+    const baseTransform = isHorizontal ? `translateX(-${currentIndex * (100 / slidesToShow)}%)` : `translateY(-${currentIndex * (100 / slidesToShow)}%)`;
+    if (animation === "fade") {
+      return {
+        transition: "opacity 500ms ease-in-out"
+      };
+    }
+    if (animation === "scale") {
+      return {
+        transform: baseTransform,
+        transition: "transform 500ms ease-in-out, scale 500ms ease-in-out"
+      };
+    }
+    return {
+      transform: baseTransform,
+      transition: isDragging ? "none" : "transform 500ms ease-in-out"
+    };
+  };
+  const slideWidth = 100 / slidesToShow;
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+    "div",
+    {
+      ref: carouselRef,
+      className: cn("relative w-full overflow-hidden focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 rounded-lg", className),
+      onMouseEnter: () => setIsPaused(true),
+      onMouseLeave: () => setIsPaused(false),
+      role: "region",
+      "aria-label": ariaLabel,
+      "aria-roledescription": "carousel",
+      tabIndex: 0,
+      children: [
+        showProgress && autoScroll && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "absolute top-0 left-0 right-0 h-1 bg-muted z-20", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-full bg-primary transition-all duration-50 ease-linear", style: { width: `${progress}%` } }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          "div",
+          {
+            className: cn("flex", isHorizontal ? "flex-row" : "flex-col", containerClassName),
+            style: getAnimationStyles(),
+            onTouchStart: touchStart,
+            onTouchMove: touchMove,
+            onTouchEnd: touchEnd,
+            onMouseDown: touchStart,
+            onMouseMove: touchMove,
+            onMouseUp: touchEnd,
+            onMouseLeave: touchEnd,
+            role: "group",
+            "aria-atomic": "false",
+            "aria-live": autoScroll ? "off" : "polite",
+            children: React27.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              "div",
+              {
+                className: cn(
+                  "flex-shrink-0",
+                  isHorizontal ? "h-full" : "w-full",
+                  animation === "fade" && idx !== currentIndex && "opacity-0",
+                  animation === "scale" && idx !== currentIndex && "scale-95",
+                  slideClassName
+                ),
+                style: {
+                  [isHorizontal ? "width" : "height"]: `${slideWidth}%`
+                },
+                role: "group",
+                "aria-roledescription": "slide",
+                "aria-label": `${idx + 1} of ${totalSlides}`,
+                "aria-hidden": idx < currentIndex || idx >= currentIndex + slidesToShow,
+                children: child
+              },
+              idx
+            ))
+          }
+        ),
+        showArrows && totalSlides > slidesToShow && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            Button_default,
+            {
+              onClick: scrollPrev,
+              variant: "ghost",
+              size: "icon",
+              icon: import_lucide_react19.ChevronLeft,
+              noHoverOverlay: true,
+              disabled: !loop && currentIndex === 0,
+              className: cn(
+                "absolute top-1/2 -translate-y-1/2 hover:-translate-y-1/2 active:-translate-y-1/2 z-10 rounded-full will-change-transform backdrop-blur-0 hover:backdrop-blur-0 hover:bg-transparent border-0",
+                isHorizontal ? "left-4" : "top-4 left-1/2 -translate-x-1/2 rotate-90"
+              ),
+              "aria-label": "Previous slide"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            Button_default,
+            {
+              onClick: scrollNext,
+              variant: "ghost",
+              size: "icon",
+              icon: import_lucide_react19.ChevronRight,
+              noHoverOverlay: true,
+              disabled: !loop && currentIndex >= maxIndex,
+              className: cn(
+                "absolute top-1/2 -translate-y-1/2 hover:-translate-y-1/2 active:-translate-y-1/2 z-10 rounded-full will-change-transform backdrop-blur-0 hover:backdrop-blur-0 hover:bg-transparent border-0",
+                isHorizontal ? "right-4" : "bottom-4 left-1/2 -translate-x-1/2 rotate-90"
+              ),
+              "aria-label": "Next slide"
+            }
+          )
+        ] }),
+        showDots && totalSlides > slidesToShow && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          "div",
+          {
+            className: cn(
+              "absolute flex gap-2 z-10",
+              isHorizontal ? "bottom-4 left-1/2 -translate-x-1/2 flex-row" : "right-4 top-1/2 -translate-y-1/2 flex-col"
+            ),
+            role: "tablist",
+            "aria-label": "Carousel pagination",
+            children: Array.from({ length: maxIndex + 1 }, (_, idx) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              "button",
+              {
+                onClick: () => scrollTo(idx),
+                className: cn(
+                  "rounded-full transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
+                  isHorizontal ? "w-2 h-2" : "w-2 h-2",
+                  idx === currentIndex ? `bg-primary ${isHorizontal ? "w-6" : "h-6"}` : "bg-muted-foreground/50 hover:bg-muted-foreground/75"
+                ),
+                "aria-label": `Go to slide ${idx + 1}`,
+                "aria-selected": idx === currentIndex,
+                role: "tab"
+              },
+              idx
+            ))
+          }
+        ),
+        showThumbnails && totalSlides > slidesToShow && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          "div",
+          {
+            className: cn(
+              "absolute bottom-0 left-0 right-0 flex gap-2 p-4 bg-gradient-to-t from-black/50 to-transparent overflow-x-auto",
+              isHorizontal ? "flex-row" : "flex-col"
+            ),
+            children: React27.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              "button",
+              {
+                onClick: () => scrollTo(idx),
+                className: cn(
+                  "flex-shrink-0 w-16 h-16 rounded-md overflow-hidden border-2 transition-all focus:outline-none focus:ring-2 focus:ring-primary",
+                  idx === currentIndex ? "border-primary scale-110" : "border-transparent opacity-70 hover:opacity-100"
+                ),
+                "aria-label": `Thumbnail ${idx + 1}`,
+                children: thumbnailRenderer ? thumbnailRenderer(child, idx) : child
+              },
+              idx
+            ))
+          }
+        )
+      ]
+    }
+  );
 }
 
 // ../../components/ui/ClientOnly.tsx