@mlw-packages/react-components 1.9.10 → 1.9.11

package/dist/index.css

@@ -585,6 +585,9 @@ body {
 .z-\[1\] {
   z-index: 1;
 }
+.z-\[60\] {
+  z-index: 60;
+}
 .z-\[9998\] {
   z-index: 9998;
 }
@@ -1583,6 +1586,9 @@ body {
 .cursor-move {
   cursor: move;
 }
+.cursor-none {
+  cursor: none;
+}
 .cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -2201,6 +2207,9 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
 }
+.border-white\/10 {
+  border-color: rgb(255 255 255 / 0.1);
+}
 .border-white\/20 {
   border-color: rgb(255 255 255 / 0.2);
 }
@@ -4450,6 +4459,9 @@ body {
 .hover\:bg-background\/20:hover {
   background-color: hsl(var(--background) / 0.2);
 }
+.hover\:bg-black\/70:hover {
+  background-color: rgb(0 0 0 / 0.7);
+}
 .hover\:bg-blue-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));

package/dist/index.d.mts

@@ -2323,8 +2323,10 @@ interface CarouselBaseProps {
         stiffness?: number;
         damping?: number;
     };
+    zoomEffect?: "lens" | "scale" | null;
+    download?: boolean;
 }
-declare function CarouselBase({ items, className, containerClassName, imageClassName, width, height, showControls, showIndicators, autoPlay, autoPlayInterval, springConfig, }: CarouselBaseProps): react_jsx_runtime.JSX.Element;
+declare function CarouselBase({ items, className, containerClassName, imageClassName, width, height, showControls, showIndicators, autoPlay, autoPlayInterval, springConfig, zoomEffect, download, }: CarouselBaseProps): react_jsx_runtime.JSX.Element;
 
 declare function useIsMobile(): boolean;
 

package/dist/index.d.ts

@@ -2323,8 +2323,10 @@ interface CarouselBaseProps {
         stiffness?: number;
         damping?: number;
     };
+    zoomEffect?: "lens" | "scale" | null;
+    download?: boolean;
 }
-declare function CarouselBase({ items, className, containerClassName, imageClassName, width, height, showControls, showIndicators, autoPlay, autoPlayInterval, springConfig, }: CarouselBaseProps): react_jsx_runtime.JSX.Element;
+declare function CarouselBase({ items, className, containerClassName, imageClassName, width, height, showControls, showIndicators, autoPlay, autoPlayInterval, springConfig, zoomEffect, download, }: CarouselBaseProps): react_jsx_runtime.JSX.Element;
 
 declare function useIsMobile(): boolean;
 

package/dist/index.js

@@ -18647,13 +18647,290 @@ function Leaderboard({
     }
   );
 }
+var Lens = ({
+  children,
+  initialZoom = 1.5,
+  maxZoom = 4,
+  lensSize = 150,
+  isStatic = false,
+  position = { x: 200, y: 150 },
+  hovering,
+  setHovering
+}) => {
+  const containerRef = React32.useRef(null);
+  const [localIsHovering, setLocalIsHovering] = React32.useState(false);
+  const isHovering = hovering !== void 0 ? hovering : localIsHovering;
+  const setIsHovering = setHovering || setLocalIsHovering;
+  const [mousePosition, setMousePosition] = React32.useState({ x: 100, y: 100 });
+  const [zoomFactor, setZoomFactor] = React32.useState(initialZoom);
+  const [isActivated, setIsActivated] = React32.useState(false);
+  const handleMouseMove = (e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    setMousePosition({ x, y });
+  };
+  const handleWheel = (e) => {
+    if (!isActivated) return;
+    const delta = -e.deltaY * 5e-3;
+    setZoomFactor((prev) => Math.min(Math.max(1.1, prev + delta), maxZoom));
+  };
+  const resetZoom = () => {
+    setZoomFactor(initialZoom);
+    setIsActivated(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        "relative overflow-hidden rounded-lg z-20 h-full",
+        isActivated ? "cursor-none" : "cursor-pointer"
+      ),
+      onClick: () => setIsActivated(!isActivated),
+      onMouseEnter: () => {
+        setIsHovering(true);
+      },
+      onMouseLeave: () => {
+        setIsHovering(false);
+        resetZoom();
+      },
+      onMouseMove: handleMouseMove,
+      onWheel: handleWheel,
+      children: [
+        children,
+        isStatic ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.div,
+            {
+              initial: { opacity: 0, scale: 0.58 },
+              animate: { opacity: 1, scale: 1 },
+              exit: { opacity: 0, scale: 0.8 },
+              transition: { duration: 0.3, ease: "easeOut" },
+              className: "absolute inset-0 overflow-hidden",
+              style: {
+                maskImage: `radial-gradient(circle ${lensSize / 2}px at ${position.x}px ${position.y}px, black 100%, transparent 100%)`,
+                WebkitMaskImage: `radial-gradient(circle ${lensSize / 2}px at ${position.x}px ${position.y}px, black 100%, transparent 100%)`,
+                transformOrigin: `${position.x}px ${position.y}px`
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    transform: `scale(${zoomFactor})`,
+                    transformOrigin: `${position.x}px ${position.y}px`
+                  },
+                  children
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute pointer-events-none",
+              style: {
+                left: position.x - lensSize / 2,
+                top: position.y - lensSize / 2,
+                width: lensSize,
+                height: lensSize,
+                borderRadius: "50%",
+                boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2)",
+                background: "radial-gradient(circle at center, transparent 60%, rgba(255, 255, 255, 0.1) 70%, rgba(255, 255, 255, 0.2) 80%, transparent 100%)"
+              }
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isHovering && isActivated && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.div,
+            {
+              initial: { opacity: 0, scale: 0.58 },
+              animate: { opacity: 1, scale: 1 },
+              exit: { opacity: 0, scale: 0.8 },
+              transition: { duration: 0.3, ease: "easeOut" },
+              className: "absolute inset-0 overflow-hidden",
+              style: {
+                maskImage: `radial-gradient(circle ${lensSize / 2}px at ${mousePosition.x}px ${mousePosition.y}px, black 100%, transparent 100%)`,
+                WebkitMaskImage: `radial-gradient(circle ${lensSize / 2}px at ${mousePosition.x}px ${mousePosition.y}px, black 100%, transparent 100%)`,
+                transformOrigin: `${mousePosition.x}px ${mousePosition.y}px`,
+                zIndex: 50
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    transform: `scale(${zoomFactor})`,
+                    transformOrigin: `${mousePosition.x}px ${mousePosition.y}px`
+                  },
+                  children
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.div,
+            {
+              initial: { opacity: 0, scale: 0.58 },
+              animate: { opacity: 1, scale: 1 },
+              exit: { opacity: 0, scale: 0.8 },
+              transition: { duration: 0.3, ease: "easeOut" },
+              className: "absolute pointer-events-none z-[60]",
+              style: {
+                left: mousePosition.x - lensSize / 2,
+                top: mousePosition.y - lensSize / 2,
+                width: lensSize,
+                height: lensSize,
+                borderRadius: "50%",
+                boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2)",
+                background: "radial-gradient(circle at center, transparent 60%, rgba(255, 255, 255, 0.1) 70%, rgba(255, 255, 255, 0.2) 80%, transparent 100%)"
+              }
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+};
+var ZoomImage = React32__namespace.forwardRef(
+  ({
+    className,
+    src,
+    alt,
+    maxZoom = 2,
+    transitionDuration = 0.3,
+    borderRadius = 12,
+    imageClassName,
+    ...props
+  }, ref) => {
+    const mouseX = framerMotion.useMotionValue(50);
+    const mouseY = framerMotion.useMotionValue(50);
+    const zoomLevel = framerMotion.useMotionValue(1);
+    const springConfig = { damping: 20, stiffness: 150, mass: 0.5 };
+    const smoothMouseX = framerMotion.useSpring(mouseX, springConfig);
+    const smoothMouseY = framerMotion.useSpring(mouseY, springConfig);
+    const smoothZoomLevel = framerMotion.useSpring(zoomLevel, springConfig);
+    const transformOrigin = framerMotion.useTransform(
+      [smoothMouseX, smoothMouseY],
+      ([latestX, latestY]) => `${latestX}% ${latestY}%`
+    );
+    const touchStartDist = React32__namespace.useRef(0);
+    const touchStartZoom = React32__namespace.useRef(1);
+    const isPinching = React32__namespace.useRef(false);
+    const handleMouseMove = (e) => {
+      if (isPinching.current) return;
+      const { left, top, width, height } = e.currentTarget.getBoundingClientRect();
+      const x = (e.clientX - left) / width * 100;
+      const y = (e.clientY - top) / height * 100;
+      mouseX.set(x);
+      mouseY.set(y);
+    };
+    const handleWheel = (e) => {
+      const delta = -e.deltaY * 5e-3;
+      const newZoom = Math.min(Math.max(1, zoomLevel.get() + delta), maxZoom);
+      zoomLevel.set(newZoom);
+    };
+    const handleMouseLeave = () => {
+      if (!isPinching.current) {
+        mouseX.set(50);
+        mouseY.set(50);
+        zoomLevel.set(1);
+      }
+    };
+    const getDistance = (touches) => {
+      const dx = touches[0].clientX - touches[1].clientX;
+      const dy = touches[0].clientY - touches[1].clientY;
+      return Math.sqrt(dx * dx + dy * dy);
+    };
+    const getCenter = (touches, rect) => {
+      const x = (touches[0].clientX + touches[1].clientX) / 2;
+      const y = (touches[0].clientY + touches[1].clientY) / 2;
+      return {
+        x: (x - rect.left) / rect.width * 100,
+        y: (y - rect.top) / rect.height * 100
+      };
+    };
+    const handleTouchStart = (e) => {
+      if (e.touches.length === 2) {
+        isPinching.current = true;
+        touchStartDist.current = getDistance(e.touches);
+        touchStartZoom.current = zoomLevel.get();
+        const rect = e.currentTarget.getBoundingClientRect();
+        const center = getCenter(e.touches, rect);
+        mouseX.set(center.x);
+        mouseY.set(center.y);
+      }
+    };
+    const handleTouchMove = (e) => {
+      if (e.touches.length === 2 && isPinching.current) {
+        e.preventDefault();
+        const dist = getDistance(e.touches);
+        const rect = e.currentTarget.getBoundingClientRect();
+        const scaleChange = dist / touchStartDist.current;
+        const newZoom = Math.min(
+          Math.max(1, touchStartZoom.current * scaleChange),
+          maxZoom
+        );
+        zoomLevel.set(newZoom);
+        const center = getCenter(e.touches, rect);
+        mouseX.set(center.x);
+        mouseY.set(center.y);
+      }
+    };
+    const handleTouchEnd = (e) => {
+      if (e.touches.length < 2) {
+        if (isPinching.current) {
+          isPinching.current = false;
+        }
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        ref,
+        className: cn(
+          "relative w-full h-full overflow-hidden touch-none",
+          className
+        ),
+        style: { borderRadius: `${borderRadius}px` },
+        onMouseMove: handleMouseMove,
+        onMouseLeave: handleMouseLeave,
+        onWheel: handleWheel,
+        onTouchStart: handleTouchStart,
+        onTouchMove: handleTouchMove,
+        onTouchEnd: handleTouchEnd,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.img,
+          {
+            src,
+            alt,
+            className: cn("w-full h-full object-cover", imageClassName),
+            style: {
+              borderRadius: `${borderRadius}px`,
+              transformOrigin,
+              scale: smoothZoomLevel
+            },
+            transition: {
+              type: "spring",
+              duration: transitionDuration,
+              bounce: 0
+            }
+          }
+        )
+      }
+    );
+  }
+);
+ZoomImage.displayName = "ZoomImage";
 function CarouselBase({
   items,
   className,
   containerClassName,
   imageClassName,
   width,
-  height = "400px",
+  height,
   showControls = true,
   showIndicators = true,
   autoPlay = false,
@@ -18661,11 +18938,16 @@ function CarouselBase({
   springConfig = {
     stiffness: 300,
     damping: 30
-  }
+  },
+  zoomEffect = null,
+  download = false
 }) {
+  const isMobile = useIsMobile();
   const [index, setIndex] = React32.useState(0);
   const containerRef = React32.useRef(null);
   const x = framerMotion.useMotionValue(0);
+  const [isDownloading, setIsDownloading] = React32.useState(false);
+  const [downloadSuccess, setDownloadSuccess] = React32.useState(false);
   React32.useEffect(() => {
     if (containerRef.current) {
       const containerWidth = containerRef.current.offsetWidth || 1;
@@ -18684,21 +18966,66 @@ function CarouselBase({
     }, autoPlayInterval);
     return () => clearInterval(interval);
   }, [autoPlay, autoPlayInterval, items.length]);
+  const handleDownload = async () => {
+    if (isDownloading) return;
+    setIsDownloading(true);
+    setDownloadSuccess(false);
+    const currentItem = items[index];
+    try {
+      const response = await fetch(currentItem.url);
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = currentItem.title || "image";
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(url);
+      setIsDownloading(false);
+      setDownloadSuccess(true);
+      setTimeout(() => setDownloadSuccess(false), 2e3);
+    } catch (error) {
+      console.error("Error downloading image:", error);
+      setIsDownloading(false);
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: cn("w-full lg:p-10 sm:p-4 p-2", className),
-      style: { width },
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      style: { width, height },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3 h-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
           className: cn(
-            "relative overflow-hidden rounded-lg",
+            "relative overflow-hidden rounded-lg h-full",
             containerClassName
           ),
           ref: containerRef,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { className: "flex", style: { x }, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 w-full", style: { height }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { className: "flex h-full", style: { x }, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 w-full h-full", children: isMobile || zoomEffect === "scale" ? /* @__PURE__ */ jsxRuntime.jsx(
+              ZoomImage,
+              {
+                src: item.url,
+                alt: item.title,
+                className: cn("w-full h-full select-none"),
+                imageClassName,
+                borderRadius: 8,
+                maxZoom: 3
+              }
+            ) : zoomEffect === "lens" ? /* @__PURE__ */ jsxRuntime.jsx(Lens, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: item.url,
+                alt: item.title,
+                className: cn(
+                  "w-full h-full object-cover rounded-lg select-none pointer-events-none",
+                  imageClassName
+                ),
+                draggable: false
+              }
+            ) }) : /* @__PURE__ */ jsxRuntime.jsx(
               "img",
               {
                 src: item.url,
@@ -18710,13 +19037,93 @@ function CarouselBase({
                 draggable: false
               }
             ) }, item.id)) }),
+            download && /* @__PURE__ */ jsxRuntime.jsx(
+              framerMotion.motion.button,
+              {
+                onClick: handleDownload,
+                className: cn(
+                  "absolute top-4 right-4 z-30 p-2 rounded-full text-white transition-colors border border-white/10",
+                  downloadSuccess ? "bg-green-500 hover:bg-green-600" : "bg-black/50 hover:bg-black/70"
+                ),
+                title: "Download image",
+                initial: false,
+                animate: {
+                  scale: isDownloading ? 0.9 : 1,
+                  backgroundColor: downloadSuccess ? "rgb(34, 197, 94)" : "rgba(0, 0, 0, 0.5)"
+                },
+                whileHover: { scale: 1.05 },
+                whileTap: { scale: 0.95 },
+                children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", initial: false, children: isDownloading ? /* @__PURE__ */ jsxRuntime.jsx(
+                  framerMotion.motion.svg,
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    animate: { rotate: 360 },
+                    transition: {
+                      repeat: Infinity,
+                      ease: "linear",
+                      duration: 1
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+                  },
+                  "loading"
+                ) : downloadSuccess ? /* @__PURE__ */ jsxRuntime.jsx(
+                  framerMotion.motion.svg,
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    initial: { scale: 0.5, opacity: 0 },
+                    animate: { scale: 1, opacity: 1 },
+                    exit: { scale: 0.5, opacity: 0 },
+                    children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
+                  },
+                  "success"
+                ) : /* @__PURE__ */ jsxRuntime.jsxs(
+                  framerMotion.motion.svg,
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    initial: { scale: 0.5, opacity: 0 },
+                    animate: { scale: 1, opacity: 1 },
+                    exit: { scale: 0.5, opacity: 0 },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "7 10 12 15 17 10" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
+                    ]
+                  },
+                  "download"
+                ) })
+              }
+            ),
             showControls && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 framerMotion.motion.button,
                 {
                   disabled: index === 0,
                   onClick: () => setIndex((i) => Math.max(0, i - 1)),
-                  className: `absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full flex items-center justify-center shadow-lg transition-transform z-10
+                  className: `absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full flex items-center justify-center shadow-lg transition-transform z-30
                   ${index === 0 ? "opacity-40 cursor-not-allowed" : "bg-secondary hover:scale-110 hover:opacity-100 opacity-70"}`,
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     "svg",
@@ -18743,7 +19150,7 @@ function CarouselBase({
                 {
                   disabled: index === items.length - 1,
                   onClick: () => setIndex((i) => Math.min(items.length - 1, i + 1)),
-                  className: `absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full flex items-center justify-center shadow-lg transition-transform z-10
+                  className: `absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full flex items-center justify-center shadow-lg transition-transform z-30
                   ${index === items.length - 1 ? "opacity-40 cursor-not-allowed" : "bg-secondary hover:scale-110 hover:opacity-100 opacity-70"}`,
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     "svg",

package/dist/index.mjs

@@ -15,7 +15,7 @@ import { toast as toast$1, Toaster as Toaster$1 } from 'sonner';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import 'react-router-dom';
 import { Command } from 'cmdk';
-import { AnimatePresence, motion, useMotionValue, animate } from 'framer-motion';
+import { AnimatePresence, motion, useMotionValue, useSpring, useTransform, animate } from 'framer-motion';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { XIcon as XIcon$1, CalendarDotIcon, DotsThreeIcon as DotsThreeIcon$1, Check, CheckIcon as CheckIcon$1 } from '@phosphor-icons/react/dist/ssr';
 import * as SelectPrimitive from '@radix-ui/react-select';
@@ -18605,13 +18605,290 @@ function Leaderboard({
     }
   );
 }
+var Lens = ({
+  children,
+  initialZoom = 1.5,
+  maxZoom = 4,
+  lensSize = 150,
+  isStatic = false,
+  position = { x: 200, y: 150 },
+  hovering,
+  setHovering
+}) => {
+  const containerRef = useRef(null);
+  const [localIsHovering, setLocalIsHovering] = useState(false);
+  const isHovering = hovering !== void 0 ? hovering : localIsHovering;
+  const setIsHovering = setHovering || setLocalIsHovering;
+  const [mousePosition, setMousePosition] = useState({ x: 100, y: 100 });
+  const [zoomFactor, setZoomFactor] = useState(initialZoom);
+  const [isActivated, setIsActivated] = useState(false);
+  const handleMouseMove = (e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    setMousePosition({ x, y });
+  };
+  const handleWheel = (e) => {
+    if (!isActivated) return;
+    const delta = -e.deltaY * 5e-3;
+    setZoomFactor((prev) => Math.min(Math.max(1.1, prev + delta), maxZoom));
+  };
+  const resetZoom = () => {
+    setZoomFactor(initialZoom);
+    setIsActivated(false);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        "relative overflow-hidden rounded-lg z-20 h-full",
+        isActivated ? "cursor-none" : "cursor-pointer"
+      ),
+      onClick: () => setIsActivated(!isActivated),
+      onMouseEnter: () => {
+        setIsHovering(true);
+      },
+      onMouseLeave: () => {
+        setIsHovering(false);
+        resetZoom();
+      },
+      onMouseMove: handleMouseMove,
+      onWheel: handleWheel,
+      children: [
+        children,
+        isStatic ? /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { opacity: 0, scale: 0.58 },
+              animate: { opacity: 1, scale: 1 },
+              exit: { opacity: 0, scale: 0.8 },
+              transition: { duration: 0.3, ease: "easeOut" },
+              className: "absolute inset-0 overflow-hidden",
+              style: {
+                maskImage: `radial-gradient(circle ${lensSize / 2}px at ${position.x}px ${position.y}px, black 100%, transparent 100%)`,
+                WebkitMaskImage: `radial-gradient(circle ${lensSize / 2}px at ${position.x}px ${position.y}px, black 100%, transparent 100%)`,
+                transformOrigin: `${position.x}px ${position.y}px`
+              },
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    transform: `scale(${zoomFactor})`,
+                    transformOrigin: `${position.x}px ${position.y}px`
+                  },
+                  children
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute pointer-events-none",
+              style: {
+                left: position.x - lensSize / 2,
+                top: position.y - lensSize / 2,
+                width: lensSize,
+                height: lensSize,
+                borderRadius: "50%",
+                boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2)",
+                background: "radial-gradient(circle at center, transparent 60%, rgba(255, 255, 255, 0.1) 70%, rgba(255, 255, 255, 0.2) 80%, transparent 100%)"
+              }
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx(AnimatePresence, { children: isHovering && isActivated && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { opacity: 0, scale: 0.58 },
+              animate: { opacity: 1, scale: 1 },
+              exit: { opacity: 0, scale: 0.8 },
+              transition: { duration: 0.3, ease: "easeOut" },
+              className: "absolute inset-0 overflow-hidden",
+              style: {
+                maskImage: `radial-gradient(circle ${lensSize / 2}px at ${mousePosition.x}px ${mousePosition.y}px, black 100%, transparent 100%)`,
+                WebkitMaskImage: `radial-gradient(circle ${lensSize / 2}px at ${mousePosition.x}px ${mousePosition.y}px, black 100%, transparent 100%)`,
+                transformOrigin: `${mousePosition.x}px ${mousePosition.y}px`,
+                zIndex: 50
+              },
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    transform: `scale(${zoomFactor})`,
+                    transformOrigin: `${mousePosition.x}px ${mousePosition.y}px`
+                  },
+                  children
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { opacity: 0, scale: 0.58 },
+              animate: { opacity: 1, scale: 1 },
+              exit: { opacity: 0, scale: 0.8 },
+              transition: { duration: 0.3, ease: "easeOut" },
+              className: "absolute pointer-events-none z-[60]",
+              style: {
+                left: mousePosition.x - lensSize / 2,
+                top: mousePosition.y - lensSize / 2,
+                width: lensSize,
+                height: lensSize,
+                borderRadius: "50%",
+                boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2)",
+                background: "radial-gradient(circle at center, transparent 60%, rgba(255, 255, 255, 0.1) 70%, rgba(255, 255, 255, 0.2) 80%, transparent 100%)"
+              }
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+};
+var ZoomImage = React32.forwardRef(
+  ({
+    className,
+    src,
+    alt,
+    maxZoom = 2,
+    transitionDuration = 0.3,
+    borderRadius = 12,
+    imageClassName,
+    ...props
+  }, ref) => {
+    const mouseX = useMotionValue(50);
+    const mouseY = useMotionValue(50);
+    const zoomLevel = useMotionValue(1);
+    const springConfig = { damping: 20, stiffness: 150, mass: 0.5 };
+    const smoothMouseX = useSpring(mouseX, springConfig);
+    const smoothMouseY = useSpring(mouseY, springConfig);
+    const smoothZoomLevel = useSpring(zoomLevel, springConfig);
+    const transformOrigin = useTransform(
+      [smoothMouseX, smoothMouseY],
+      ([latestX, latestY]) => `${latestX}% ${latestY}%`
+    );
+    const touchStartDist = React32.useRef(0);
+    const touchStartZoom = React32.useRef(1);
+    const isPinching = React32.useRef(false);
+    const handleMouseMove = (e) => {
+      if (isPinching.current) return;
+      const { left, top, width, height } = e.currentTarget.getBoundingClientRect();
+      const x = (e.clientX - left) / width * 100;
+      const y = (e.clientY - top) / height * 100;
+      mouseX.set(x);
+      mouseY.set(y);
+    };
+    const handleWheel = (e) => {
+      const delta = -e.deltaY * 5e-3;
+      const newZoom = Math.min(Math.max(1, zoomLevel.get() + delta), maxZoom);
+      zoomLevel.set(newZoom);
+    };
+    const handleMouseLeave = () => {
+      if (!isPinching.current) {
+        mouseX.set(50);
+        mouseY.set(50);
+        zoomLevel.set(1);
+      }
+    };
+    const getDistance = (touches) => {
+      const dx = touches[0].clientX - touches[1].clientX;
+      const dy = touches[0].clientY - touches[1].clientY;
+      return Math.sqrt(dx * dx + dy * dy);
+    };
+    const getCenter = (touches, rect) => {
+      const x = (touches[0].clientX + touches[1].clientX) / 2;
+      const y = (touches[0].clientY + touches[1].clientY) / 2;
+      return {
+        x: (x - rect.left) / rect.width * 100,
+        y: (y - rect.top) / rect.height * 100
+      };
+    };
+    const handleTouchStart = (e) => {
+      if (e.touches.length === 2) {
+        isPinching.current = true;
+        touchStartDist.current = getDistance(e.touches);
+        touchStartZoom.current = zoomLevel.get();
+        const rect = e.currentTarget.getBoundingClientRect();
+        const center = getCenter(e.touches, rect);
+        mouseX.set(center.x);
+        mouseY.set(center.y);
+      }
+    };
+    const handleTouchMove = (e) => {
+      if (e.touches.length === 2 && isPinching.current) {
+        e.preventDefault();
+        const dist = getDistance(e.touches);
+        const rect = e.currentTarget.getBoundingClientRect();
+        const scaleChange = dist / touchStartDist.current;
+        const newZoom = Math.min(
+          Math.max(1, touchStartZoom.current * scaleChange),
+          maxZoom
+        );
+        zoomLevel.set(newZoom);
+        const center = getCenter(e.touches, rect);
+        mouseX.set(center.x);
+        mouseY.set(center.y);
+      }
+    };
+    const handleTouchEnd = (e) => {
+      if (e.touches.length < 2) {
+        if (isPinching.current) {
+          isPinching.current = false;
+        }
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        ref,
+        className: cn(
+          "relative w-full h-full overflow-hidden touch-none",
+          className
+        ),
+        style: { borderRadius: `${borderRadius}px` },
+        onMouseMove: handleMouseMove,
+        onMouseLeave: handleMouseLeave,
+        onWheel: handleWheel,
+        onTouchStart: handleTouchStart,
+        onTouchMove: handleTouchMove,
+        onTouchEnd: handleTouchEnd,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          motion.img,
+          {
+            src,
+            alt,
+            className: cn("w-full h-full object-cover", imageClassName),
+            style: {
+              borderRadius: `${borderRadius}px`,
+              transformOrigin,
+              scale: smoothZoomLevel
+            },
+            transition: {
+              type: "spring",
+              duration: transitionDuration,
+              bounce: 0
+            }
+          }
+        )
+      }
+    );
+  }
+);
+ZoomImage.displayName = "ZoomImage";
 function CarouselBase({
   items,
   className,
   containerClassName,
   imageClassName,
   width,
-  height = "400px",
+  height,
   showControls = true,
   showIndicators = true,
   autoPlay = false,
@@ -18619,11 +18896,16 @@ function CarouselBase({
   springConfig = {
     stiffness: 300,
     damping: 30
-  }
+  },
+  zoomEffect = null,
+  download = false
 }) {
+  const isMobile = useIsMobile();
   const [index, setIndex] = useState(0);
   const containerRef = useRef(null);
   const x = useMotionValue(0);
+  const [isDownloading, setIsDownloading] = useState(false);
+  const [downloadSuccess, setDownloadSuccess] = useState(false);
   useEffect(() => {
     if (containerRef.current) {
       const containerWidth = containerRef.current.offsetWidth || 1;
@@ -18642,21 +18924,66 @@ function CarouselBase({
     }, autoPlayInterval);
     return () => clearInterval(interval);
   }, [autoPlay, autoPlayInterval, items.length]);
+  const handleDownload = async () => {
+    if (isDownloading) return;
+    setIsDownloading(true);
+    setDownloadSuccess(false);
+    const currentItem = items[index];
+    try {
+      const response = await fetch(currentItem.url);
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = currentItem.title || "image";
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(url);
+      setIsDownloading(false);
+      setDownloadSuccess(true);
+      setTimeout(() => setDownloadSuccess(false), 2e3);
+    } catch (error) {
+      console.error("Error downloading image:", error);
+      setIsDownloading(false);
+    }
+  };
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn("w-full lg:p-10 sm:p-4 p-2", className),
-      style: { width },
-      children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ jsxs(
+      style: { width, height },
+      children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 h-full", children: /* @__PURE__ */ jsxs(
         "div",
         {
           className: cn(
-            "relative overflow-hidden rounded-lg",
+            "relative overflow-hidden rounded-lg h-full",
             containerClassName
           ),
           ref: containerRef,
           children: [
-            /* @__PURE__ */ jsx(motion.div, { className: "flex", style: { x }, children: items.map((item) => /* @__PURE__ */ jsx("div", { className: "shrink-0 w-full", style: { height }, children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(motion.div, { className: "flex h-full", style: { x }, children: items.map((item) => /* @__PURE__ */ jsx("div", { className: "shrink-0 w-full h-full", children: isMobile || zoomEffect === "scale" ? /* @__PURE__ */ jsx(
+              ZoomImage,
+              {
+                src: item.url,
+                alt: item.title,
+                className: cn("w-full h-full select-none"),
+                imageClassName,
+                borderRadius: 8,
+                maxZoom: 3
+              }
+            ) : zoomEffect === "lens" ? /* @__PURE__ */ jsx(Lens, { children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: item.url,
+                alt: item.title,
+                className: cn(
+                  "w-full h-full object-cover rounded-lg select-none pointer-events-none",
+                  imageClassName
+                ),
+                draggable: false
+              }
+            ) }) : /* @__PURE__ */ jsx(
               "img",
               {
                 src: item.url,
@@ -18668,13 +18995,93 @@ function CarouselBase({
                 draggable: false
               }
             ) }, item.id)) }),
+            download && /* @__PURE__ */ jsx(
+              motion.button,
+              {
+                onClick: handleDownload,
+                className: cn(
+                  "absolute top-4 right-4 z-30 p-2 rounded-full text-white transition-colors border border-white/10",
+                  downloadSuccess ? "bg-green-500 hover:bg-green-600" : "bg-black/50 hover:bg-black/70"
+                ),
+                title: "Download image",
+                initial: false,
+                animate: {
+                  scale: isDownloading ? 0.9 : 1,
+                  backgroundColor: downloadSuccess ? "rgb(34, 197, 94)" : "rgba(0, 0, 0, 0.5)"
+                },
+                whileHover: { scale: 1.05 },
+                whileTap: { scale: 0.95 },
+                children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: isDownloading ? /* @__PURE__ */ jsx(
+                  motion.svg,
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    animate: { rotate: 360 },
+                    transition: {
+                      repeat: Infinity,
+                      ease: "linear",
+                      duration: 1
+                    },
+                    children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+                  },
+                  "loading"
+                ) : downloadSuccess ? /* @__PURE__ */ jsx(
+                  motion.svg,
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    initial: { scale: 0.5, opacity: 0 },
+                    animate: { scale: 1, opacity: 1 },
+                    exit: { scale: 0.5, opacity: 0 },
+                    children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+                  },
+                  "success"
+                ) : /* @__PURE__ */ jsxs(
+                  motion.svg,
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    initial: { scale: 0.5, opacity: 0 },
+                    animate: { scale: 1, opacity: 1 },
+                    exit: { scale: 0.5, opacity: 0 },
+                    children: [
+                      /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                      /* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
+                      /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
+                    ]
+                  },
+                  "download"
+                ) })
+              }
+            ),
             showControls && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(
                 motion.button,
                 {
                   disabled: index === 0,
                   onClick: () => setIndex((i) => Math.max(0, i - 1)),
-                  className: `absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full flex items-center justify-center shadow-lg transition-transform z-10
+                  className: `absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full flex items-center justify-center shadow-lg transition-transform z-30
                   ${index === 0 ? "opacity-40 cursor-not-allowed" : "bg-secondary hover:scale-110 hover:opacity-100 opacity-70"}`,
                   children: /* @__PURE__ */ jsx(
                     "svg",
@@ -18701,7 +19108,7 @@ function CarouselBase({
                 {
                   disabled: index === items.length - 1,
                   onClick: () => setIndex((i) => Math.min(items.length - 1, i + 1)),
-                  className: `absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full flex items-center justify-center shadow-lg transition-transform z-10
+                  className: `absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full flex items-center justify-center shadow-lg transition-transform z-30
                   ${index === items.length - 1 ? "opacity-40 cursor-not-allowed" : "bg-secondary hover:scale-110 hover:opacity-100 opacity-70"}`,
                   children: /* @__PURE__ */ jsx(
                     "svg",

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.9.10",
+  "version": "1.9.11",
   "homepage": "https://main--68e80310a069c2f10b546ef3.chromatic.com/",
   "repository": {
     "type": "git",