aura-ui-library 1.0.4 → 1.0.5

package/dist/index.js

@@ -29,6 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.js
 var index_exports = {};
 __export(index_exports, {
+  Carousel: () => Carousel,
   MagneticButton: () => MagneticButton,
   Navbar: () => Navbar,
   SpotlightCard: () => SpotlightCard
@@ -3697,8 +3698,587 @@ var SpotlightCard = ({
     )
   );
 };
+
+// src/components/Carousel/Carousel.jsx
+var import_react4 = __toESM(require("react"));
+var TRANSITION_MODES = ["slide", "fade", "zoom"];
+var KEN_BURNS = [
+  { from: "scale(1.12) translate(2%, 1%)", to: "scale(1) translate(0%, 0%)" },
+  { from: "scale(1.1) translate(-3%, -2%)", to: "scale(1) translate(0%, 0%)" },
+  { from: "scale(1) translate(0%, 0%)", to: "scale(1.1) translate(3%, 2%)" },
+  { from: "scale(1.08) translate(1%, -3%)", to: "scale(1) translate(-1%, 1%)" }
+];
+var DEFAULT_CAPTIONS = [];
+var prefersReducedMotion = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+var Carousel = ({
+  images = [],
+  captions = DEFAULT_CAPTIONS,
+  height = "520px",
+  borderRadius = "20px",
+  autoPlay = true,
+  interval = 5e3,
+  showDots = true,
+  showThumbnails = true,
+  showProgress = true,
+  showCounter = true,
+  showFullscreen = true,
+  showCaptions = true,
+  accentColor = "#ffffff",
+  transitionMode = "slide",
+  gap = 0
+}) => {
+  const [currentIndex, setCurrentIndex] = (0, import_react4.useState)(0);
+  const [prevIndex, setPrevIndex] = (0, import_react4.useState)(null);
+  const [isDragging, setIsDragging] = (0, import_react4.useState)(false);
+  const [startX, setStartX] = (0, import_react4.useState)(0);
+  const [startTime, setStartTime] = (0, import_react4.useState)(0);
+  const [dragOffset, setDragOffset] = (0, import_react4.useState)(0);
+  const [isHovered, setIsHovered] = (0, import_react4.useState)(false);
+  const [isFullscreen, setIsFullscreen] = (0, import_react4.useState)(false);
+  const [captionVisible, setCaptionVisible] = (0, import_react4.useState)(true);
+  const [loadedImages, setLoadedImages] = (0, import_react4.useState)(/* @__PURE__ */ new Set([0]));
+  const [activeMode, setActiveMode] = (0, import_react4.useState)(transitionMode);
+  const [progressKey, setProgressKey] = (0, import_react4.useState)(0);
+  const containerRef = (0, import_react4.useRef)(null);
+  const timerRef = (0, import_react4.useRef)(null);
+  const count = images.length;
+  const goTo = (0, import_react4.useCallback)(
+    (index, direction) => {
+      const next = (index % count + count) % count;
+      setCaptionVisible(false);
+      setPrevIndex(currentIndex);
+      setTimeout(() => {
+        setCurrentIndex(next);
+        setProgressKey((k) => k + 1);
+        setLoadedImages((prev) => {
+          const s = new Set(prev);
+          s.add(next);
+          s.add((next + 1) % count);
+          return s;
+        });
+        setTimeout(() => setCaptionVisible(true), 80);
+      }, 40);
+    },
+    [currentIndex, count]
+  );
+  const handleNext = (0, import_react4.useCallback)(
+    () => goTo(currentIndex + 1),
+    [goTo, currentIndex]
+  );
+  const handlePrev = (0, import_react4.useCallback)(
+    () => goTo(currentIndex - 1),
+    [goTo, currentIndex]
+  );
+  (0, import_react4.useEffect)(() => {
+    if (!autoPlay || isHovered || isDragging) return;
+    timerRef.current = setInterval(handleNext, interval);
+    return () => clearInterval(timerRef.current);
+  }, [autoPlay, isHovered, isDragging, handleNext, interval, currentIndex]);
+  (0, import_react4.useEffect)(() => {
+    const onKey = (e) => {
+      if (e.key === "ArrowRight") handleNext();
+      if (e.key === "ArrowLeft") handlePrev();
+      if (e.key === "Escape" && isFullscreen) exitFullscreen();
+      const num = parseInt(e.key);
+      if (!isNaN(num) && num >= 1 && num <= count) goTo(num - 1);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [handleNext, handlePrev, isFullscreen, count, goTo]);
+  (0, import_react4.useEffect)(() => {
+    const onFsChange = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+    };
+    document.addEventListener("fullscreenchange", onFsChange);
+    return () => document.removeEventListener("fullscreenchange", onFsChange);
+  }, []);
+  const toggleFullscreen = () => {
+    var _a;
+    if (!document.fullscreenElement) {
+      (_a = containerRef.current) == null ? void 0 : _a.requestFullscreen();
+    } else {
+      document.exitFullscreen();
+    }
+  };
+  const exitFullscreen = () => document.exitFullscreen();
+  const onStart = (e) => {
+    setIsDragging(true);
+    const x = e.type.includes("mouse") ? e.pageX : e.touches[0].pageX;
+    setStartX(x);
+    setStartTime(Date.now());
+  };
+  const onMove = (e) => {
+    if (!isDragging) return;
+    const x = e.type.includes("mouse") ? e.pageX : e.touches[0].pageX;
+    setDragOffset(x - startX);
+  };
+  const onEnd = () => {
+    if (!isDragging) return;
+    const velocity = dragOffset / (Date.now() - startTime);
+    const threshold = Math.abs(velocity) > 0.4 ? 30 : 80;
+    if (dragOffset < -threshold) handleNext();
+    else if (dragOffset > threshold) handlePrev();
+    setIsDragging(false);
+    setDragOffset(0);
+  };
+  const kb = KEN_BURNS[currentIndex % KEN_BURNS.length];
+  const animDuration = prefersReducedMotion ? 0 : interval + 500;
+  const getTransform = (idx) => {
+    var _a;
+    if (activeMode !== "slide") return "translateX(0)";
+    const base = (idx - currentIndex) * 100;
+    const drag = isDragging ? dragOffset / (((_a = containerRef.current) == null ? void 0 : _a.offsetWidth) || 1) * 100 : 0;
+    return `translateX(calc(${base}% + ${drag}px))`;
+  };
+  const getOpacity = (idx) => activeMode === "slide" ? 1 : idx === currentIndex ? 1 : 0;
+  const getScale = (idx) => activeMode === "zoom" && idx === currentIndex ? 1 : activeMode === "zoom" ? 0.9 : 1;
+  const caption = captions[currentIndex];
+  return /* @__PURE__ */ import_react4.default.createElement(
+    "div",
+    {
+      ref: containerRef,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => {
+        setIsHovered(false);
+        onEnd();
+      },
+      onMouseDown: onStart,
+      onMouseMove: onMove,
+      onMouseUp: onEnd,
+      onTouchStart: onStart,
+      onTouchMove: onMove,
+      onTouchEnd: onEnd,
+      style: {
+        position: "relative",
+        width: "100%",
+        height: isFullscreen ? "100vh" : height,
+        borderRadius: isFullscreen ? 0 : borderRadius,
+        overflow: "hidden",
+        background: "#000",
+        cursor: isDragging ? "grabbing" : "grab",
+        userSelect: "none",
+        WebkitUserSelect: "none",
+        fontFamily: "system-ui, sans-serif"
+      }
+    },
+    images.map((src, idx) => {
+      const shouldRender = loadedImages.has(idx);
+      return /* @__PURE__ */ import_react4.default.createElement(
+        "div",
+        {
+          key: idx,
+          style: {
+            position: "absolute",
+            inset: 0,
+            opacity: getOpacity(idx),
+            transform: activeMode === "slide" ? getTransform(idx) : `scale(${getScale(idx)})`,
+            transition: isDragging ? "none" : prefersReducedMotion ? "none" : activeMode === "slide" ? "transform 0.75s cubic-bezier(0.23, 1, 0.32, 1)" : "opacity 0.7s ease, transform 0.7s ease",
+            zIndex: idx === currentIndex ? 2 : 1
+          }
+        },
+        shouldRender && /* @__PURE__ */ import_react4.default.createElement(
+          "img",
+          {
+            src,
+            alt: `Slide ${idx + 1}`,
+            draggable: false,
+            style: {
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              pointerEvents: "none",
+              transformOrigin: "center center",
+              transform: idx === currentIndex ? kb.to : kb.from,
+              transition: prefersReducedMotion ? "none" : `transform ${animDuration}ms ease-out`,
+              willChange: "transform"
+            }
+          }
+        )
+      );
+    }),
+    /* @__PURE__ */ import_react4.default.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          zIndex: 3,
+          pointerEvents: "none",
+          background: "linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.2) 40%, transparent 70%)"
+        }
+      }
+    ),
+    /* @__PURE__ */ import_react4.default.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          zIndex: 3,
+          pointerEvents: "none",
+          background: "linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 30%)"
+        }
+      }
+    ),
+    showProgress && autoPlay && !isHovered && /* @__PURE__ */ import_react4.default.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          height: "3px",
+          background: "rgba(255,255,255,0.15)",
+          zIndex: 10
+        }
+      },
+      /* @__PURE__ */ import_react4.default.createElement(
+        "div",
+        {
+          key: progressKey,
+          style: {
+            height: "100%",
+            background: accentColor,
+            animation: prefersReducedMotion ? "none" : `progressFill ${interval}ms linear forwards`,
+            width: prefersReducedMotion ? "100%" : "0%"
+          }
+        }
+      )
+    ),
+    showCaptions && caption && /* @__PURE__ */ import_react4.default.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          bottom: showThumbnails ? "110px" : "72px",
+          left: 0,
+          right: 0,
+          zIndex: 10,
+          padding: "0 56px 0 32px",
+          transform: captionVisible ? "translateY(0)" : "translateY(16px)",
+          opacity: captionVisible ? 1 : 0,
+          transition: prefersReducedMotion ? "none" : "opacity 0.5s ease, transform 0.5s ease"
+        }
+      },
+      caption.tag && /* @__PURE__ */ import_react4.default.createElement(
+        "span",
+        {
+          style: {
+            display: "inline-block",
+            marginBottom: "8px",
+            background: "rgba(255,255,255,0.15)",
+            backdropFilter: "blur(8px)",
+            border: "0.5px solid rgba(255,255,255,0.25)",
+            color: "#fff",
+            fontSize: "11px",
+            fontWeight: 500,
+            letterSpacing: "0.08em",
+            textTransform: "uppercase",
+            padding: "3px 10px",
+            borderRadius: "100px"
+          }
+        },
+        caption.tag
+      ),
+      caption.title && /* @__PURE__ */ import_react4.default.createElement(
+        "h2",
+        {
+          style: {
+            margin: "0 0 6px",
+            color: "#fff",
+            fontSize: "clamp(18px, 3vw, 28px)",
+            fontWeight: 600,
+            lineHeight: 1.2,
+            textShadow: "0 2px 12px rgba(0,0,0,0.4)"
+          }
+        },
+        caption.title
+      ),
+      caption.subtitle && /* @__PURE__ */ import_react4.default.createElement(
+        "p",
+        {
+          style: {
+            margin: "0 0 14px",
+            color: "rgba(255,255,255,0.78)",
+            fontSize: "clamp(13px, 1.8vw, 15px)",
+            lineHeight: 1.5,
+            textShadow: "0 1px 6px rgba(0,0,0,0.4)",
+            maxWidth: "480px"
+          }
+        },
+        caption.subtitle
+      ),
+      caption.cta && /* @__PURE__ */ import_react4.default.createElement(
+        "button",
+        {
+          onClick: caption.onCta,
+          style: {
+            background: "rgba(255,255,255,0.18)",
+            backdropFilter: "blur(12px)",
+            border: "0.5px solid rgba(255,255,255,0.35)",
+            color: "#fff",
+            padding: "8px 20px",
+            borderRadius: "100px",
+            fontSize: "13px",
+            fontWeight: 500,
+            cursor: "pointer",
+            letterSpacing: "0.02em",
+            transition: "background 0.2s"
+          },
+          onMouseEnter: (e) => e.currentTarget.style.background = "rgba(255,255,255,0.28)",
+          onMouseLeave: (e) => e.currentTarget.style.background = "rgba(255,255,255,0.18)"
+        },
+        caption.cta,
+        " \u2192"
+      )
+    ),
+    showThumbnails && images.length > 1 && /* @__PURE__ */ import_react4.default.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          bottom: "20px",
+          left: "50%",
+          transform: "translateX(-50%)",
+          zIndex: 10,
+          display: "flex",
+          gap: "6px",
+          maxWidth: "calc(100% - 48px)",
+          overflowX: "auto",
+          scrollbarWidth: "none"
+        }
+      },
+      images.map((src, idx) => /* @__PURE__ */ import_react4.default.createElement(
+        "div",
+        {
+          key: idx,
+          onClick: (e) => {
+            e.stopPropagation();
+            goTo(idx);
+          },
+          style: {
+            width: idx === currentIndex ? "64px" : "44px",
+            height: "40px",
+            flexShrink: 0,
+            borderRadius: "6px",
+            overflow: "hidden",
+            border: idx === currentIndex ? `2px solid ${accentColor}` : "1.5px solid rgba(255,255,255,0.25)",
+            transition: "all 0.35s ease",
+            opacity: idx === currentIndex ? 1 : 0.55,
+            cursor: "pointer"
+          }
+        },
+        /* @__PURE__ */ import_react4.default.createElement(
+          "img",
+          {
+            src,
+            alt: "",
+            style: {
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              display: "block"
+            }
+          }
+        )
+      ))
+    ),
+    showDots && !showThumbnails && images.length > 1 && /* @__PURE__ */ import_react4.default.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          bottom: "20px",
+          left: "50%",
+          transform: "translateX(-50%)",
+          display: "flex",
+          gap: "6px",
+          zIndex: 10
+        }
+      },
+      images.map((_, idx) => /* @__PURE__ */ import_react4.default.createElement(
+        "div",
+        {
+          key: idx,
+          onClick: () => goTo(idx),
+          style: {
+            width: idx === currentIndex ? "22px" : "7px",
+            height: "7px",
+            borderRadius: "4px",
+            background: accentColor,
+            opacity: idx === currentIndex ? 1 : 0.35,
+            cursor: "pointer",
+            transition: "all 0.35s ease"
+          }
+        }
+      ))
+    ),
+    /* @__PURE__ */ import_react4.default.createElement(
+      NavBtn,
+      {
+        side: "left",
+        onClick: (e) => {
+          e.stopPropagation();
+          handlePrev();
+        },
+        color: accentColor
+      }
+    ),
+    /* @__PURE__ */ import_react4.default.createElement(
+      NavBtn,
+      {
+        side: "right",
+        onClick: (e) => {
+          e.stopPropagation();
+          handleNext();
+        },
+        color: accentColor
+      }
+    ),
+    /* @__PURE__ */ import_react4.default.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: "16px",
+          right: "16px",
+          zIndex: 10,
+          display: "flex",
+          gap: "8px",
+          alignItems: "center"
+        }
+      },
+      /* @__PURE__ */ import_react4.default.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            background: "rgba(0,0,0,0.35)",
+            backdropFilter: "blur(8px)",
+            border: "0.5px solid rgba(255,255,255,0.15)",
+            borderRadius: "100px",
+            padding: "3px",
+            gap: "2px"
+          }
+        },
+        TRANSITION_MODES.map((m) => /* @__PURE__ */ import_react4.default.createElement(
+          "button",
+          {
+            key: m,
+            onClick: (e) => {
+              e.stopPropagation();
+              setActiveMode(m);
+            },
+            title: m,
+            style: {
+              background: activeMode === m ? "rgba(255,255,255,0.25)" : "transparent",
+              border: "none",
+              color: "#fff",
+              fontSize: "10px",
+              fontWeight: 500,
+              padding: "3px 10px",
+              borderRadius: "100px",
+              cursor: "pointer",
+              textTransform: "uppercase",
+              letterSpacing: "0.06em",
+              transition: "background 0.2s"
+            }
+          },
+          m
+        ))
+      ),
+      showCounter && /* @__PURE__ */ import_react4.default.createElement(
+        "div",
+        {
+          style: {
+            background: "rgba(0,0,0,0.35)",
+            backdropFilter: "blur(8px)",
+            border: "0.5px solid rgba(255,255,255,0.15)",
+            borderRadius: "100px",
+            padding: "4px 12px",
+            color: "#fff",
+            fontSize: "12px",
+            fontWeight: 500
+          }
+        },
+        currentIndex + 1,
+        " / ",
+        count
+      ),
+      showFullscreen && /* @__PURE__ */ import_react4.default.createElement(
+        "button",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            toggleFullscreen();
+          },
+          style: {
+            background: "rgba(0,0,0,0.35)",
+            backdropFilter: "blur(8px)",
+            border: "0.5px solid rgba(255,255,255,0.15)",
+            borderRadius: "50%",
+            color: "#fff",
+            width: "30px",
+            height: "30px",
+            cursor: "pointer",
+            fontSize: "14px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            lineHeight: 1
+          },
+          title: "Toggle fullscreen"
+        },
+        isFullscreen ? "\u2921" : "\u2922"
+      )
+    ),
+    /* @__PURE__ */ import_react4.default.createElement("style", null, `
+        @keyframes progressFill {
+          from { width: 0%; }
+          to { width: 100%; }
+        }
+      `)
+  );
+};
+var NavBtn = ({ side, onClick, color }) => /* @__PURE__ */ import_react4.default.createElement(
+  "button",
+  {
+    onClick,
+    style: {
+      position: "absolute",
+      [side]: "16px",
+      top: "50%",
+      transform: "translateY(-50%)",
+      background: "rgba(0,0,0,0.3)",
+      backdropFilter: "blur(12px)",
+      border: "0.5px solid rgba(255,255,255,0.2)",
+      color,
+      width: "42px",
+      height: "42px",
+      borderRadius: "50%",
+      cursor: "pointer",
+      zIndex: 10,
+      fontSize: "18px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      transition: "background 0.2s, transform 0.15s"
+    },
+    onMouseEnter: (e) => {
+      e.currentTarget.style.background = "rgba(0,0,0,0.55)";
+      e.currentTarget.style.transform = "translateY(-50%) scale(1.08)";
+    },
+    onMouseLeave: (e) => {
+      e.currentTarget.style.background = "rgba(0,0,0,0.3)";
+      e.currentTarget.style.transform = "translateY(-50%) scale(1)";
+    }
+  },
+  side === "left" ? "\u2190" : "\u2192"
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Carousel,
   MagneticButton,
   Navbar,
   SpotlightCard

package/dist/index.mjs

@@ -3666,7 +3666,592 @@ var SpotlightCard = ({
     )
   );
 };
+
+// src/components/Carousel/Carousel.jsx
+import React4, {
+  useState as useState4,
+  useEffect as useEffect4,
+  useRef as useRef4,
+  useCallback as useCallback4,
+  useMemo
+} from "react";
+var TRANSITION_MODES = ["slide", "fade", "zoom"];
+var KEN_BURNS = [
+  { from: "scale(1.12) translate(2%, 1%)", to: "scale(1) translate(0%, 0%)" },
+  { from: "scale(1.1) translate(-3%, -2%)", to: "scale(1) translate(0%, 0%)" },
+  { from: "scale(1) translate(0%, 0%)", to: "scale(1.1) translate(3%, 2%)" },
+  { from: "scale(1.08) translate(1%, -3%)", to: "scale(1) translate(-1%, 1%)" }
+];
+var DEFAULT_CAPTIONS = [];
+var prefersReducedMotion = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+var Carousel = ({
+  images = [],
+  captions = DEFAULT_CAPTIONS,
+  height = "520px",
+  borderRadius = "20px",
+  autoPlay = true,
+  interval = 5e3,
+  showDots = true,
+  showThumbnails = true,
+  showProgress = true,
+  showCounter = true,
+  showFullscreen = true,
+  showCaptions = true,
+  accentColor = "#ffffff",
+  transitionMode = "slide",
+  gap = 0
+}) => {
+  const [currentIndex, setCurrentIndex] = useState4(0);
+  const [prevIndex, setPrevIndex] = useState4(null);
+  const [isDragging, setIsDragging] = useState4(false);
+  const [startX, setStartX] = useState4(0);
+  const [startTime, setStartTime] = useState4(0);
+  const [dragOffset, setDragOffset] = useState4(0);
+  const [isHovered, setIsHovered] = useState4(false);
+  const [isFullscreen, setIsFullscreen] = useState4(false);
+  const [captionVisible, setCaptionVisible] = useState4(true);
+  const [loadedImages, setLoadedImages] = useState4(/* @__PURE__ */ new Set([0]));
+  const [activeMode, setActiveMode] = useState4(transitionMode);
+  const [progressKey, setProgressKey] = useState4(0);
+  const containerRef = useRef4(null);
+  const timerRef = useRef4(null);
+  const count = images.length;
+  const goTo = useCallback4(
+    (index, direction) => {
+      const next = (index % count + count) % count;
+      setCaptionVisible(false);
+      setPrevIndex(currentIndex);
+      setTimeout(() => {
+        setCurrentIndex(next);
+        setProgressKey((k) => k + 1);
+        setLoadedImages((prev) => {
+          const s = new Set(prev);
+          s.add(next);
+          s.add((next + 1) % count);
+          return s;
+        });
+        setTimeout(() => setCaptionVisible(true), 80);
+      }, 40);
+    },
+    [currentIndex, count]
+  );
+  const handleNext = useCallback4(
+    () => goTo(currentIndex + 1),
+    [goTo, currentIndex]
+  );
+  const handlePrev = useCallback4(
+    () => goTo(currentIndex - 1),
+    [goTo, currentIndex]
+  );
+  useEffect4(() => {
+    if (!autoPlay || isHovered || isDragging) return;
+    timerRef.current = setInterval(handleNext, interval);
+    return () => clearInterval(timerRef.current);
+  }, [autoPlay, isHovered, isDragging, handleNext, interval, currentIndex]);
+  useEffect4(() => {
+    const onKey = (e) => {
+      if (e.key === "ArrowRight") handleNext();
+      if (e.key === "ArrowLeft") handlePrev();
+      if (e.key === "Escape" && isFullscreen) exitFullscreen();
+      const num = parseInt(e.key);
+      if (!isNaN(num) && num >= 1 && num <= count) goTo(num - 1);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [handleNext, handlePrev, isFullscreen, count, goTo]);
+  useEffect4(() => {
+    const onFsChange = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+    };
+    document.addEventListener("fullscreenchange", onFsChange);
+    return () => document.removeEventListener("fullscreenchange", onFsChange);
+  }, []);
+  const toggleFullscreen = () => {
+    var _a;
+    if (!document.fullscreenElement) {
+      (_a = containerRef.current) == null ? void 0 : _a.requestFullscreen();
+    } else {
+      document.exitFullscreen();
+    }
+  };
+  const exitFullscreen = () => document.exitFullscreen();
+  const onStart = (e) => {
+    setIsDragging(true);
+    const x = e.type.includes("mouse") ? e.pageX : e.touches[0].pageX;
+    setStartX(x);
+    setStartTime(Date.now());
+  };
+  const onMove = (e) => {
+    if (!isDragging) return;
+    const x = e.type.includes("mouse") ? e.pageX : e.touches[0].pageX;
+    setDragOffset(x - startX);
+  };
+  const onEnd = () => {
+    if (!isDragging) return;
+    const velocity = dragOffset / (Date.now() - startTime);
+    const threshold = Math.abs(velocity) > 0.4 ? 30 : 80;
+    if (dragOffset < -threshold) handleNext();
+    else if (dragOffset > threshold) handlePrev();
+    setIsDragging(false);
+    setDragOffset(0);
+  };
+  const kb = KEN_BURNS[currentIndex % KEN_BURNS.length];
+  const animDuration = prefersReducedMotion ? 0 : interval + 500;
+  const getTransform = (idx) => {
+    var _a;
+    if (activeMode !== "slide") return "translateX(0)";
+    const base = (idx - currentIndex) * 100;
+    const drag = isDragging ? dragOffset / (((_a = containerRef.current) == null ? void 0 : _a.offsetWidth) || 1) * 100 : 0;
+    return `translateX(calc(${base}% + ${drag}px))`;
+  };
+  const getOpacity = (idx) => activeMode === "slide" ? 1 : idx === currentIndex ? 1 : 0;
+  const getScale = (idx) => activeMode === "zoom" && idx === currentIndex ? 1 : activeMode === "zoom" ? 0.9 : 1;
+  const caption = captions[currentIndex];
+  return /* @__PURE__ */ React4.createElement(
+    "div",
+    {
+      ref: containerRef,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => {
+        setIsHovered(false);
+        onEnd();
+      },
+      onMouseDown: onStart,
+      onMouseMove: onMove,
+      onMouseUp: onEnd,
+      onTouchStart: onStart,
+      onTouchMove: onMove,
+      onTouchEnd: onEnd,
+      style: {
+        position: "relative",
+        width: "100%",
+        height: isFullscreen ? "100vh" : height,
+        borderRadius: isFullscreen ? 0 : borderRadius,
+        overflow: "hidden",
+        background: "#000",
+        cursor: isDragging ? "grabbing" : "grab",
+        userSelect: "none",
+        WebkitUserSelect: "none",
+        fontFamily: "system-ui, sans-serif"
+      }
+    },
+    images.map((src, idx) => {
+      const shouldRender = loadedImages.has(idx);
+      return /* @__PURE__ */ React4.createElement(
+        "div",
+        {
+          key: idx,
+          style: {
+            position: "absolute",
+            inset: 0,
+            opacity: getOpacity(idx),
+            transform: activeMode === "slide" ? getTransform(idx) : `scale(${getScale(idx)})`,
+            transition: isDragging ? "none" : prefersReducedMotion ? "none" : activeMode === "slide" ? "transform 0.75s cubic-bezier(0.23, 1, 0.32, 1)" : "opacity 0.7s ease, transform 0.7s ease",
+            zIndex: idx === currentIndex ? 2 : 1
+          }
+        },
+        shouldRender && /* @__PURE__ */ React4.createElement(
+          "img",
+          {
+            src,
+            alt: `Slide ${idx + 1}`,
+            draggable: false,
+            style: {
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              pointerEvents: "none",
+              transformOrigin: "center center",
+              transform: idx === currentIndex ? kb.to : kb.from,
+              transition: prefersReducedMotion ? "none" : `transform ${animDuration}ms ease-out`,
+              willChange: "transform"
+            }
+          }
+        )
+      );
+    }),
+    /* @__PURE__ */ React4.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          zIndex: 3,
+          pointerEvents: "none",
+          background: "linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.2) 40%, transparent 70%)"
+        }
+      }
+    ),
+    /* @__PURE__ */ React4.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          zIndex: 3,
+          pointerEvents: "none",
+          background: "linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 30%)"
+        }
+      }
+    ),
+    showProgress && autoPlay && !isHovered && /* @__PURE__ */ React4.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          height: "3px",
+          background: "rgba(255,255,255,0.15)",
+          zIndex: 10
+        }
+      },
+      /* @__PURE__ */ React4.createElement(
+        "div",
+        {
+          key: progressKey,
+          style: {
+            height: "100%",
+            background: accentColor,
+            animation: prefersReducedMotion ? "none" : `progressFill ${interval}ms linear forwards`,
+            width: prefersReducedMotion ? "100%" : "0%"
+          }
+        }
+      )
+    ),
+    showCaptions && caption && /* @__PURE__ */ React4.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          bottom: showThumbnails ? "110px" : "72px",
+          left: 0,
+          right: 0,
+          zIndex: 10,
+          padding: "0 56px 0 32px",
+          transform: captionVisible ? "translateY(0)" : "translateY(16px)",
+          opacity: captionVisible ? 1 : 0,
+          transition: prefersReducedMotion ? "none" : "opacity 0.5s ease, transform 0.5s ease"
+        }
+      },
+      caption.tag && /* @__PURE__ */ React4.createElement(
+        "span",
+        {
+          style: {
+            display: "inline-block",
+            marginBottom: "8px",
+            background: "rgba(255,255,255,0.15)",
+            backdropFilter: "blur(8px)",
+            border: "0.5px solid rgba(255,255,255,0.25)",
+            color: "#fff",
+            fontSize: "11px",
+            fontWeight: 500,
+            letterSpacing: "0.08em",
+            textTransform: "uppercase",
+            padding: "3px 10px",
+            borderRadius: "100px"
+          }
+        },
+        caption.tag
+      ),
+      caption.title && /* @__PURE__ */ React4.createElement(
+        "h2",
+        {
+          style: {
+            margin: "0 0 6px",
+            color: "#fff",
+            fontSize: "clamp(18px, 3vw, 28px)",
+            fontWeight: 600,
+            lineHeight: 1.2,
+            textShadow: "0 2px 12px rgba(0,0,0,0.4)"
+          }
+        },
+        caption.title
+      ),
+      caption.subtitle && /* @__PURE__ */ React4.createElement(
+        "p",
+        {
+          style: {
+            margin: "0 0 14px",
+            color: "rgba(255,255,255,0.78)",
+            fontSize: "clamp(13px, 1.8vw, 15px)",
+            lineHeight: 1.5,
+            textShadow: "0 1px 6px rgba(0,0,0,0.4)",
+            maxWidth: "480px"
+          }
+        },
+        caption.subtitle
+      ),
+      caption.cta && /* @__PURE__ */ React4.createElement(
+        "button",
+        {
+          onClick: caption.onCta,
+          style: {
+            background: "rgba(255,255,255,0.18)",
+            backdropFilter: "blur(12px)",
+            border: "0.5px solid rgba(255,255,255,0.35)",
+            color: "#fff",
+            padding: "8px 20px",
+            borderRadius: "100px",
+            fontSize: "13px",
+            fontWeight: 500,
+            cursor: "pointer",
+            letterSpacing: "0.02em",
+            transition: "background 0.2s"
+          },
+          onMouseEnter: (e) => e.currentTarget.style.background = "rgba(255,255,255,0.28)",
+          onMouseLeave: (e) => e.currentTarget.style.background = "rgba(255,255,255,0.18)"
+        },
+        caption.cta,
+        " \u2192"
+      )
+    ),
+    showThumbnails && images.length > 1 && /* @__PURE__ */ React4.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          bottom: "20px",
+          left: "50%",
+          transform: "translateX(-50%)",
+          zIndex: 10,
+          display: "flex",
+          gap: "6px",
+          maxWidth: "calc(100% - 48px)",
+          overflowX: "auto",
+          scrollbarWidth: "none"
+        }
+      },
+      images.map((src, idx) => /* @__PURE__ */ React4.createElement(
+        "div",
+        {
+          key: idx,
+          onClick: (e) => {
+            e.stopPropagation();
+            goTo(idx);
+          },
+          style: {
+            width: idx === currentIndex ? "64px" : "44px",
+            height: "40px",
+            flexShrink: 0,
+            borderRadius: "6px",
+            overflow: "hidden",
+            border: idx === currentIndex ? `2px solid ${accentColor}` : "1.5px solid rgba(255,255,255,0.25)",
+            transition: "all 0.35s ease",
+            opacity: idx === currentIndex ? 1 : 0.55,
+            cursor: "pointer"
+          }
+        },
+        /* @__PURE__ */ React4.createElement(
+          "img",
+          {
+            src,
+            alt: "",
+            style: {
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              display: "block"
+            }
+          }
+        )
+      ))
+    ),
+    showDots && !showThumbnails && images.length > 1 && /* @__PURE__ */ React4.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          bottom: "20px",
+          left: "50%",
+          transform: "translateX(-50%)",
+          display: "flex",
+          gap: "6px",
+          zIndex: 10
+        }
+      },
+      images.map((_, idx) => /* @__PURE__ */ React4.createElement(
+        "div",
+        {
+          key: idx,
+          onClick: () => goTo(idx),
+          style: {
+            width: idx === currentIndex ? "22px" : "7px",
+            height: "7px",
+            borderRadius: "4px",
+            background: accentColor,
+            opacity: idx === currentIndex ? 1 : 0.35,
+            cursor: "pointer",
+            transition: "all 0.35s ease"
+          }
+        }
+      ))
+    ),
+    /* @__PURE__ */ React4.createElement(
+      NavBtn,
+      {
+        side: "left",
+        onClick: (e) => {
+          e.stopPropagation();
+          handlePrev();
+        },
+        color: accentColor
+      }
+    ),
+    /* @__PURE__ */ React4.createElement(
+      NavBtn,
+      {
+        side: "right",
+        onClick: (e) => {
+          e.stopPropagation();
+          handleNext();
+        },
+        color: accentColor
+      }
+    ),
+    /* @__PURE__ */ React4.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: "16px",
+          right: "16px",
+          zIndex: 10,
+          display: "flex",
+          gap: "8px",
+          alignItems: "center"
+        }
+      },
+      /* @__PURE__ */ React4.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            background: "rgba(0,0,0,0.35)",
+            backdropFilter: "blur(8px)",
+            border: "0.5px solid rgba(255,255,255,0.15)",
+            borderRadius: "100px",
+            padding: "3px",
+            gap: "2px"
+          }
+        },
+        TRANSITION_MODES.map((m) => /* @__PURE__ */ React4.createElement(
+          "button",
+          {
+            key: m,
+            onClick: (e) => {
+              e.stopPropagation();
+              setActiveMode(m);
+            },
+            title: m,
+            style: {
+              background: activeMode === m ? "rgba(255,255,255,0.25)" : "transparent",
+              border: "none",
+              color: "#fff",
+              fontSize: "10px",
+              fontWeight: 500,
+              padding: "3px 10px",
+              borderRadius: "100px",
+              cursor: "pointer",
+              textTransform: "uppercase",
+              letterSpacing: "0.06em",
+              transition: "background 0.2s"
+            }
+          },
+          m
+        ))
+      ),
+      showCounter && /* @__PURE__ */ React4.createElement(
+        "div",
+        {
+          style: {
+            background: "rgba(0,0,0,0.35)",
+            backdropFilter: "blur(8px)",
+            border: "0.5px solid rgba(255,255,255,0.15)",
+            borderRadius: "100px",
+            padding: "4px 12px",
+            color: "#fff",
+            fontSize: "12px",
+            fontWeight: 500
+          }
+        },
+        currentIndex + 1,
+        " / ",
+        count
+      ),
+      showFullscreen && /* @__PURE__ */ React4.createElement(
+        "button",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            toggleFullscreen();
+          },
+          style: {
+            background: "rgba(0,0,0,0.35)",
+            backdropFilter: "blur(8px)",
+            border: "0.5px solid rgba(255,255,255,0.15)",
+            borderRadius: "50%",
+            color: "#fff",
+            width: "30px",
+            height: "30px",
+            cursor: "pointer",
+            fontSize: "14px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            lineHeight: 1
+          },
+          title: "Toggle fullscreen"
+        },
+        isFullscreen ? "\u2921" : "\u2922"
+      )
+    ),
+    /* @__PURE__ */ React4.createElement("style", null, `
+        @keyframes progressFill {
+          from { width: 0%; }
+          to { width: 100%; }
+        }
+      `)
+  );
+};
+var NavBtn = ({ side, onClick, color }) => /* @__PURE__ */ React4.createElement(
+  "button",
+  {
+    onClick,
+    style: {
+      position: "absolute",
+      [side]: "16px",
+      top: "50%",
+      transform: "translateY(-50%)",
+      background: "rgba(0,0,0,0.3)",
+      backdropFilter: "blur(12px)",
+      border: "0.5px solid rgba(255,255,255,0.2)",
+      color,
+      width: "42px",
+      height: "42px",
+      borderRadius: "50%",
+      cursor: "pointer",
+      zIndex: 10,
+      fontSize: "18px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      transition: "background 0.2s, transform 0.15s"
+    },
+    onMouseEnter: (e) => {
+      e.currentTarget.style.background = "rgba(0,0,0,0.55)";
+      e.currentTarget.style.transform = "translateY(-50%) scale(1.08)";
+    },
+    onMouseLeave: (e) => {
+      e.currentTarget.style.background = "rgba(0,0,0,0.3)";
+      e.currentTarget.style.transform = "translateY(-50%) scale(1)";
+    }
+  },
+  side === "left" ? "\u2190" : "\u2192"
+);
 export {
+  Carousel,
   MagneticButton,
   Navbar,
   SpotlightCard

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aura-ui-library",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "A modern and customizable UI library for React applications.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",