@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/HUDCarousel.js

The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useState, useRef, useEffect } from "react";
import { useSwipeable } from "react-swipeable";
import { useTimeout } from "../HUDManagers/HUDUniversalHUDEventEffectsManager.js";
import HUDIcon from "./HUDIcon.js";
function HUDCarousel(_ref) {
  var _ref$carouselArrowRig = _ref.carouselArrowRightHoverConfigurationSettings,
    carouselArrowRightHoverConfigurationSettings = _ref$carouselArrowRig === void 0 ? {} : _ref$carouselArrowRig,
    _ref$carouselDotConte = _ref.carouselDotContentHoverConfigurationSettings,
    carouselDotContentHoverConfigurationSettings = _ref$carouselDotConte === void 0 ? {} : _ref$carouselDotConte,
    _ref$carouselSlideCon = _ref.carouselSlideContainerConfigurationSettings,
    carouselSlideContainerConfigurationSettings = _ref$carouselSlideCon === void 0 ? {} : _ref$carouselSlideCon,
    _ref$carouselArrowLef = _ref.carouselArrowLeftHoverConfigurationSettings,
    carouselArrowLeftHoverConfigurationSettings = _ref$carouselArrowLef === void 0 ? {} : _ref$carouselArrowLef,
    _ref$carouselDotsCont = _ref.carouselDotsContainerConfigurationSettings,
    carouselDotsContainerConfigurationSettings = _ref$carouselDotsCont === void 0 ? {} : _ref$carouselDotsCont,
    _ref$carouselDotConte2 = _ref.carouselDotContentConfigurationSettings,
    carouselDotContentConfigurationSettings = _ref$carouselDotConte2 === void 0 ? {} : _ref$carouselDotConte2,
    _ref$carouselArrowRig2 = _ref.carouselArrowRightConfigurationSettings,
    carouselArrowRightConfigurationSettings = _ref$carouselArrowRig2 === void 0 ? {} : _ref$carouselArrowRig2,
    _ref$carouselContaine = _ref.carouselContainerConfigurationSettings,
    carouselContainerConfigurationSettings = _ref$carouselContaine === void 0 ? {} : _ref$carouselContaine,
    _ref$carouselArrowLef2 = _ref.carouselArrowLeftConfigurationSettings,
    carouselArrowLeftConfigurationSettings = _ref$carouselArrowLef2 === void 0 ? {} : _ref$carouselArrowLef2,
    _ref$carouselRightSid = _ref.carouselRightSideConfigurationSettings,
    carouselRightSideConfigurationSettings = _ref$carouselRightSid === void 0 ? {} : _ref$carouselRightSid,
    _ref$carouselDotHover = _ref.carouselDotHoverConfigurationSettings,
    carouselDotHoverConfigurationSettings = _ref$carouselDotHover === void 0 ? {} : _ref$carouselDotHover,
    _ref$carouselLeftSide = _ref.carouselLeftSideConfigurationSettings,
    carouselLeftSideConfigurationSettings = _ref$carouselLeftSide === void 0 ? {} : _ref$carouselLeftSide,
    _ref$carouselDotConfi = _ref.carouselDotConfigurationSettings,
    carouselDotConfigurationSettings = _ref$carouselDotConfi === void 0 ? {} : _ref$carouselDotConfi,
    _ref$slideConfigurati = _ref.slideConfigurationSettings,
    slideConfigurationSettings = _ref$slideConfigurati === void 0 ? {} : _ref$slideConfigurati,
    _ref$carouselDotsCont2 = _ref.carouselDotsContainerConfigurations,
    carouselDotsContainerConfigurations = _ref$carouselDotsCont2 === void 0 ? {} : _ref$carouselDotsCont2,
    _ref$carouselDotConte3 = _ref.carouselDotContentConfigurations,
    carouselDotContentConfigurations = _ref$carouselDotConte3 === void 0 ? {} : _ref$carouselDotConte3,
    _ref$carouselArrowRig3 = _ref.carouselArrowRightConfigurations,
    carouselArrowRightConfigurations = _ref$carouselArrowRig3 === void 0 ? {} : _ref$carouselArrowRig3,
    _ref$carouselArrowLef3 = _ref.carouselArrowLeftConfigurations,
    carouselArrowLeftConfigurations = _ref$carouselArrowLef3 === void 0 ? {} : _ref$carouselArrowLef3,
    _ref$carouselRightSid2 = _ref.carouselRightSideConfigurations,
    carouselRightSideConfigurations = _ref$carouselRightSid2 === void 0 ? {} : _ref$carouselRightSid2,
    _ref$carouselLeftSide2 = _ref.carouselLeftSideConfigurations,
    carouselLeftSideConfigurations = _ref$carouselLeftSide2 === void 0 ? {} : _ref$carouselLeftSide2,
    _ref$carouselDotConfi2 = _ref.carouselDotConfigurations,
    carouselDotConfigurations = _ref$carouselDotConfi2 === void 0 ? {} : _ref$carouselDotConfi2,
    _ref$rightSideNavigat = _ref.rightSideNavigationBackgroundColor,
    rightSideNavigationBackgroundColor = _ref$rightSideNavigat === void 0 ? "linear-gradient(to right, transparent -0.69%, rgba(255, 255, 255, 0.0869) 50%)" : _ref$rightSideNavigat,
    _ref$leftSideNavigati = _ref.leftSideNavigationBackgroundColor,
    leftSideNavigationBackgroundColor = _ref$leftSideNavigati === void 0 ? "linear-gradient(to left, transparent -0.69%, rgba(255, 255, 255, 0.0869) 50%)" : _ref$leftSideNavigati,
    _ref$dotActiveColor = _ref.dotActiveColor,
    dotActiveColor = _ref$dotActiveColor === void 0 ? "rgba(255, 0, 0, 1)" : _ref$dotActiveColor,
    _ref$dotColor = _ref.dotColor,
    dotColor = _ref$dotColor === void 0 ? "rgba(57.69, 57.69, 57.69, 1)" : _ref$dotColor,
    _ref$reflectionOpacit = _ref.reflectionOpacity,
    reflectionOpacity = _ref$reflectionOpacit === void 0 ? 0.69 : _ref$reflectionOpacit,
    _ref$reflectionBlur = _ref.reflectionBlur,
    reflectionBlur = _ref$reflectionBlur === void 0 ? 47 : _ref$reflectionBlur,
    _ref$backgroundLayerI = _ref.backgroundLayerIntensity,
    backgroundLayerIntensity = _ref$backgroundLayerI === void 0 ? 0.5 : _ref$backgroundLayerI,
    _ref$holoDistortionIn = _ref.holoDistortionIntensity,
    holoDistortionIntensity = _ref$holoDistortionIn === void 0 ? 2 : _ref$holoDistortionIn,
    _ref$motionBlurIntens = _ref.motionBlurIntensity,
    motionBlurIntensity = _ref$motionBlurIntens === void 0 ? 1.69 : _ref$motionBlurIntens,
    _ref$parallaxIntensit = _ref.parallaxIntensity,
    parallaxIntensity = _ref$parallaxIntensit === void 0 ? 30.69 : _ref$parallaxIntensit,
    _ref$aberrationIntens = _ref.aberrationIntensity,
    aberrationIntensity = _ref$aberrationIntens === void 0 ? 2 : _ref$aberrationIntens,
    _ref$hudOverlayIntens = _ref.hudOverlayIntensity,
    hudOverlayIntensity = _ref$hudOverlayIntens === void 0 ? 0.3 : _ref$hudOverlayIntens,
    _ref$lightBloomIntens = _ref.lightBloomIntensity,
    lightBloomIntensity = _ref$lightBloomIntens === void 0 ? 0.69 : _ref$lightBloomIntens,
    _ref$lensFlareIntensi = _ref.lensFlareIntensity,
    lensFlareIntensity = _ref$lensFlareIntensi === void 0 ? 0.8 : _ref$lensFlareIntensi,
    _ref$floatingIntensit = _ref.floatingIntensity,
    floatingIntensity = _ref$floatingIntensit === void 0 ? 15 : _ref$floatingIntensit,
    _ref$rotationIntensit = _ref.rotationIntensity,
    rotationIntensity = _ref$rotationIntensit === void 0 ? 5 : _ref$rotationIntensit,
    _ref$zoomIntensity = _ref.zoomIntensity,
    zoomIntensity = _ref$zoomIntensity === void 0 ? 1.05 : _ref$zoomIntensity,
    _ref$tiltIntensity = _ref.tiltIntensity,
    tiltIntensity = _ref$tiltIntensity === void 0 ? 10 : _ref$tiltIntensity,
    _ref$slides = _ref.slides,
    slides = _ref$slides === void 0 ? [] : _ref$slides,
    _ref$autoPlayInterval = _ref.autoPlayInterval,
    autoPlayInterval = _ref$autoPlayInterval === void 0 ? 3000 : _ref$autoPlayInterval,
    _ref$autoPlay = _ref.autoPlay,
    autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
    _ref$enableChromaticA = _ref.enableChromaticAberration,
    enableChromaticAberration = _ref$enableChromaticA === void 0 ? false : _ref$enableChromaticA,
    _ref$enableBackground = _ref.enableBackgroundLayers,
    enableBackgroundLayers = _ref$enableBackground === void 0 ? false : _ref$enableBackground,
    _ref$enableFloatingEf = _ref.enableFloatingEffect,
    enableFloatingEffect = _ref$enableFloatingEf === void 0 ? false : _ref$enableFloatingEf,
    _ref$enableRotationEf = _ref.enableRotationEffect,
    enableRotationEffect = _ref$enableRotationEf === void 0 ? true : _ref$enableRotationEf,
    _ref$enableHoloDistor = _ref.enableHoloDistortion,
    enableHoloDistortion = _ref$enableHoloDistor === void 0 ? false : _ref$enableHoloDistor,
    _ref$enableReflection = _ref.enableReflections,
    enableReflections = _ref$enableReflection === void 0 ? false : _ref$enableReflection,
    _ref$enableTiltEffect = _ref.enableTiltEffect,
    enableTiltEffect = _ref$enableTiltEffect === void 0 ? true : _ref$enableTiltEffect,
    _ref$enableZoomEffect = _ref.enableZoomEffect,
    enableZoomEffect = _ref$enableZoomEffect === void 0 ? true : _ref$enableZoomEffect,
    _ref$enableMotionBlur = _ref.enableMotionBlur,
    enableMotionBlur = _ref$enableMotionBlur === void 0 ? true : _ref$enableMotionBlur,
    _ref$enableLightBloom = _ref.enableLightBloom,
    enableLightBloom = _ref$enableLightBloom === void 0 ? false : _ref$enableLightBloom,
    _ref$enableHUDOverlay = _ref.enableHUDOverlay,
    enableHUDOverlay = _ref$enableHUDOverlay === void 0 ? false : _ref$enableHUDOverlay,
    _ref$enableLensFlare = _ref.enableLensFlare,
    enableLensFlare = _ref$enableLensFlare === void 0 ? false : _ref$enableLensFlare,
    _ref$enableParallax = _ref.enableParallax,
    enableParallax = _ref$enableParallax === void 0 ? true : _ref$enableParallax,
    _ref$sideNavigation = _ref.sideNavigation,
    sideNavigation = _ref$sideNavigation === void 0 ? true : _ref$sideNavigation,
    _ref$showArrows = _ref.showArrows,
    showArrows = _ref$showArrows === void 0 ? true : _ref$showArrows,
    _ref$showDots = _ref.showDots,
    showDots = _ref$showDots === void 0 ? true : _ref$showDots,
    _ref$loop = _ref.loop,
    loop = _ref$loop === void 0 ? true : _ref$loop;
  var _useTimeout = useTimeout(),
    schedule = _useTimeout.schedule;
  var _useState = useState(null),
    _useState2 = _slicedToArray(_useState, 2),
    carouselNavigationArrowHover = _useState2[0],
    setCarouselNavigationArrowHover = _useState2[1];
  var _useState3 = useState(null),
    _useState4 = _slicedToArray(_useState3, 2),
    carouselNavigationDotHover = _useState4[0],
    setCarouselNavigationDotHover = _useState4[1];
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    transitioningSlides = _useState6[0],
    setTransitioningSlides = _useState6[1];
  var _useState7 = useState(null),
    _useState8 = _slicedToArray(_useState7, 2),
    sideNavigationHover = _useState8[0],
    setSideNavigationHover = _useState8[1];
  var _useState9 = useState(0.869),
    _useState10 = _slicedToArray(_useState9, 2),
    transitionSpeed = _useState10[0],
    setTransitionSpeed = _useState10[1];
  var _useState11 = useState(0),
    _useState12 = _slicedToArray(_useState11, 2),
    currentIndex = _useState12[0],
    setCurrentIndex = _useState12[1];
  var _useState13 = useState("50%"),
    _useState14 = _slicedToArray(_useState13, 2),
    lensFlareX = _useState14[0],
    setLensFlareX = _useState14[1];
  var _useState15 = useState("50%"),
    _useState16 = _slicedToArray(_useState15, 2),
    lensFlareY = _useState16[0],
    setLensFlareY = _useState16[1];
  var _useState17 = useState(hudOverlayIntensity),
    _useState18 = _slicedToArray(_useState17, 2),
    hudOpacity = _useState18[0],
    setHudOpacity = _useState18[1];
  var _useState19 = useState(0),
    _useState20 = _slicedToArray(_useState19, 2),
    bloomOpacity = _useState20[0],
    setBloomOpacity = _useState20[1];
  var _useState21 = useState(0),
    _useState22 = _slicedToArray(_useState21, 2),
    motionBlur = _useState22[0],
    setMotionBlur = _useState22[1];
  var backgroundRef = useRef({
    x: 0,
    y: 0
  });
  var tiltRef = useRef({
    x: 0,
    y: 0
  });
  var prevTimeRef = useRef(Date.now());
  var distortionRef = useRef(0);
  var slidesRef = useRef(null);
  var floatingRef = useRef(0);
  var rotationRef = useRef(0);
  var timerRef = useRef(null);
  var goToSlide = function goToSlide(index) {
    var now = Date.now();
    var timeDiff = now - prevTimeRef.current;
    prevTimeRef.current = now;
    var speedFactor = Math.max(0.5, 1.5 - timeDiff / 500);
    setTransitionSpeed(speedFactor * 0.869);
    setMotionBlur(enableMotionBlur ? Math.min(speedFactor * motionBlurIntensity, motionBlurIntensity) : 0);
    setTransitioningSlides(true);
    if (loop) {
      var totalSlides = slides.length;
      var newIndex = (index + totalSlides) % totalSlides;
      setCurrentIndex(newIndex);
    } else {
      if (index >= 0 && index < slides.length) {
        setCurrentIndex(index);
      }
    }
    schedule(function () {
      setMotionBlur(0);
      setTransitioningSlides(false);
    }, speedFactor * 500);
  };
  var nextSlide = function nextSlide() {
    return goToSlide(currentIndex + 1);
  };
  var prevSlide = function prevSlide() {
    return goToSlide(currentIndex - 1);
  };
  var handleLensFlareMouseMove = function handleLensFlareMouseMove(e) {
    if (!enableLensFlare) {
      return;
    }
    var clientX = e.clientX,
      clientY = e.clientY;
    setLensFlareY("".concat(clientY / window.innerHeight * 100, "%"));
    setLensFlareX("".concat(clientX / window.innerWidth * 100, "%"));
  };
  var handleTiltMouseMove = function handleTiltMouseMove(e) {
    if (!enableTiltEffect) {
      return;
    }
    var clientX = e.clientX,
      clientY = e.clientY,
      currentTarget = e.currentTarget;
    var _currentTarget$getBou = currentTarget.getBoundingClientRect(),
      width = _currentTarget$getBou.width,
      height = _currentTarget$getBou.height,
      left = _currentTarget$getBou.left,
      top = _currentTarget$getBou.top;
    var y = ((clientY - top) / height - 0.5) * -tiltIntensity;
    var x = ((clientX - left) / width - 0.5) * tiltIntensity;
    tiltRef.current = {
      x: x,
      y: y
    };
  };
  var handleTiltMouseLeave = function handleTiltMouseLeave() {
    tiltRef.current = {
      x: 0,
      y: 0
    };
  };
  useEffect(function () {
    if (autoPlay) {
      timerRef.current = setInterval(nextSlide, autoPlayInterval);
    }
    return function () {
      return clearInterval(timerRef.current);
    };
  }, [currentIndex, autoPlay, autoPlayInterval]);
  useEffect(function () {
    if (!enableFloatingEffect) {
      return;
    }
    var startTime = Date.now();
    var animationFrame;
    var animateFloating = function animateFloating() {
      var elapsedTime = (Date.now() - startTime) / 1000;
      floatingRef.current = Math.sin(elapsedTime) * floatingIntensity;
      animationFrame = requestAnimationFrame(animateFloating);
    };
    animateFloating();
    return function () {
      return cancelAnimationFrame(animationFrame);
    };
  }, [enableFloatingEffect, floatingIntensity, slides]);
  useEffect(function () {
    if (!enableRotationEffect) {
      return;
    }
    var startTime = Date.now();
    var animationFrame;
    var animateRotation = function animateRotation() {
      var elapsedTime = (Date.now() - startTime) / 1000;
      rotationRef.current = Math.sin(elapsedTime * 0.5) * rotationIntensity;
      animationFrame = requestAnimationFrame(animateRotation);
    };
    animateRotation();
    return function () {
      return cancelAnimationFrame(animationFrame);
    };
  }, [enableRotationEffect, rotationIntensity, slides]);
  useEffect(function () {
    if (!enableLightBloom) {
      return;
    }
    if (transitioningSlides) {
      setBloomOpacity(lightBloomIntensity);
      return;
    }
    setBloomOpacity(0);
  }, [transitioningSlides, enableLightBloom, lightBloomIntensity]);
  useEffect(function () {
    if (!enableHoloDistortion) {
      return;
    }
    var startTime = Date.now();
    var animationFrame;
    var animateDistortion = function animateDistortion() {
      var elapsedTime = (Date.now() - startTime) / 1000;
      distortionRef.current = Math.sin(elapsedTime * 4) * holoDistortionIntensity;
      animationFrame = requestAnimationFrame(animateDistortion);
    };
    animateDistortion();
    return function () {
      return cancelAnimationFrame(animationFrame);
    };
  }, [enableHoloDistortion, holoDistortionIntensity]);
  useEffect(function () {
    var nodes = slidesRef.current;
    if (!nodes) {
      return;
    }
    var handleTransitionStart = function handleTransitionStart(e) {
      setTransitioningSlides(true);
    };
    nodes.addEventListener("transitionstart", handleTransitionStart);
    return function () {
      nodes.removeEventListener("transitionstart", handleTransitionStart);
    };
  }, []);
  var gestureHandlers = useSwipeable({
    preventDefaultTouchmoveEvent: true,
    onSwipedRight: function onSwipedRight() {
      return prevSlide();
    },
    onSwipedLeft: function onSwipedLeft() {
      return nextSlide();
    },
    trackMouse: true
  });
  return /*#__PURE__*/React.createElement("div", _extends({
    className: "hud-carousel-container",
    style: _objectSpread({
      position: "relative",
      overflow: "hidden",
      backdropFilter: "blur(10px)",
      borderRadius: "20px",
      boxShadow: "0px 4px 30px rgba(0, 0, 0, 0.3)",
      background: "rgba(255, 255, 255, 0.1)",
      width: "100%",
      perspective: "1000px"
    }, carouselContainerConfigurationSettings)
  }, gestureHandlers, {
    onMouseMove: handleLensFlareMouseMove
  }), enableBackgroundLayers && /*#__PURE__*/React.createElement("div", {
    style: {
      position: "absolute",
      pointerEvents: "none",
      transition: "transform 0.269s ease",
      background: "radial-gradient(circle, rgba(0,255,255,0.1) 0%, rgba(0,0,0,0) 70%)",
      height: "100%",
      width: "100%",
      opacity: 0.3,
      zIndex: 0,
      left: "".concat(backgroundRef.current.x * 0.2, "px"),
      top: "".concat(backgroundRef.current.y * 0.2, "px")
    }
  }), enableBackgroundLayers && /*#__PURE__*/React.createElement("div", {
    style: {
      position: "absolute",
      pointerEvents: "none",
      transition: "transform 0.269s ease",
      backgroundSize: "50px 50px",
      background: "linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,0.02) 1px, transparent 1px)",
      height: "100%",
      width: "100%",
      opacity: 0.1,
      zIndex: 1,
      left: "".concat(backgroundRef.current.x * 0.4, "px"),
      top: "".concat(backgroundRef.current.y * 0.4, "px")
    }
  }), enableBackgroundLayers && /*#__PURE__*/React.createElement("div", {
    style: {
      position: "absolute",
      pointerEvents: "none",
      transition: "transform 0.269s ease",
      backgroundSize: "5px 5px",
      background: "radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px)",
      height: "100%",
      width: "100%",
      opacity: 0.1,
      zIndex: 2,
      left: "".concat(backgroundRef.current.x * 0.6, "px"),
      top: "".concat(backgroundRef.current.y * 0.6, "px")
    }
  }), enableHUDOverlay && /*#__PURE__*/React.createElement("div", {
    style: {
      position: "absolute",
      pointerEvents: "none",
      transition: "opacity 0.369s ease-in-out",
      backdropFilter: "blur(5px)",
      borderRadius: "20px",
      background: "radial-gradient(circle, rgba(0,255,255,".concat(hudOpacity, ") 0%, rgba(0,0,0,0) 80%)"),
      height: "100%",
      width: "100%",
      opacity: transitioningSlides ? hudOverlayIntensity + 0.1 : hudOverlayIntensity,
      zIndex: 2,
      left: 0,
      top: 0
    }
  }), enableHUDOverlay && /*#__PURE__*/React.createElement("div", {
    style: {
      position: "absolute",
      pointerEvents: "none",
      animation: "scanlines 5.69s linear infinite",
      background: "repeating-linear-gradient(transparent, rgba(0, 255, 255, 0.03) 2px, transparent 4px)",
      height: "100%",
      width: "100%",
      zIndex: 3,
      left: 0,
      top: 0
    }
  }), enableHUDOverlay && /*#__PURE__*/React.createElement("div", {
    style: {
      position: "absolute",
      pointerEvents: "none",
      border: "2px solid rgba(0,255,255,0.5)",
      borderRadius: "20px",
      boxShadow: "0px 0px 10px rgba(0,255,255,0.4)",
      height: "100%",
      width: "100%",
      zIndex: 3
    }
  }), enableLightBloom && /*#__PURE__*/React.createElement("div", {
    style: {
      position: "absolute",
      pointerEvents: "none",
      transition: "opacity 0.569s ease",
      transform: "translate(-50%, -50%)",
      filter: "blur(30px)",
      background: "radial-gradient(circle, rgba(255,255,255,".concat(bloomOpacity, ") 0%, rgba(255,255,255,0) 80%)"),
      height: "100%",
      width: "100%",
      opacity: bloomOpacity,
      zIndex: 1,
      left: "50%",
      top: "50%"
    }
  }), enableLensFlare && /*#__PURE__*/React.createElement("div", {
    style: {
      position: "absolute",
      pointerEvents: "none",
      transition: "all 0.269s ease",
      transform: "translate(-50%, -50%)",
      filter: "blur(20px)",
      background: "radial-gradient(ellipse at center, rgba(255,255,255,".concat(lensFlareIntensity, ") 0%, rgba(255,255,255,0) 80%)"),
      height: "169px",
      width: "300px",
      opacity: transitioningSlides ? 1 : 0,
      zIndex: 2,
      left: lensFlareX,
      top: lensFlareY
    }
  }), enableHoloDistortion && /*#__PURE__*/React.createElement("div", {
    style: {
      position: "absolute",
      top: 0,
      left: 0,
      height: "100%",
      width: "100%",
      background: "linear-gradient(transparent, rgba(0,255,255,0.1) 50%, transparent), \n                                    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 1px, transparent 2px)",
      backgroundSize: "100% 20px, 100% 5px",
      filter: "blur(".concat(transitioningSlides ? holoDistortionIntensity * 2 : holoDistortionIntensity, "px)"),
      mixBlendMode: "screen",
      opacity: transitioningSlides ? 0.5 : 0.1269,
      transition: "opacity 0.369s ease, filter 0.369s ease",
      zIndex: 3
    }
  }), sideNavigation && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
    className: "hud-carousel-side-nav hud-carousel-side-left",
    style: _objectSpread({
      position: "absolute",
      cursor: "pointer",
      transition: "background 0.269s ease-out",
      background: sideNavigationHover === "left" ? leftSideNavigationBackgroundColor : "transparent",
      height: "100%",
      width: "18.69%",
      zIndex: 5,
      left: 0,
      top: 0
    }, carouselLeftSideConfigurationSettings),
    onMouseLeave: function onMouseLeave(e) {
      setSideNavigationHover(null);
    },
    onMouseEnter: function onMouseEnter(e) {
      setSideNavigationHover("left");
    },
    onClick: prevSlide
  }, carouselLeftSideConfigurations)), /*#__PURE__*/React.createElement("div", _extends({
    className: "hud-carousel-side-nav hud-carousel-side-right",
    style: _objectSpread({
      position: "absolute",
      cursor: "pointer",
      transition: "background 0.269s ease-out",
      background: sideNavigationHover === "right" ? rightSideNavigationBackgroundColor : "transparent",
      height: "100%",
      width: "18.69%",
      zIndex: 5,
      right: 0,
      top: 0
    }, carouselRightSideConfigurationSettings),
    onMouseLeave: function onMouseLeave(e) {
      setSideNavigationHover(null);
    },
    onMouseEnter: function onMouseEnter(e) {
      setSideNavigationHover("right");
    },
    onClick: nextSlide
  }, carouselRightSideConfigurations))), /*#__PURE__*/React.createElement("div", {
    ref: slidesRef,
    className: "hud-carousel-slides",
    style: _objectSpread(_objectSpread({
      display: "flex",
      transformStyle: "preserve-3d",
      transition: "transform ".concat(transitionSpeed, "s cubic-bezier(0.25, 1, 0.5, 1)"),
      transform: "translateX(-".concat(currentIndex * 100, "%)"),
      filter: enableMotionBlur ? "blur(".concat(motionBlur, "px)") : "none",
      transformOrigin: "center"
    }, transitioningSlides ? {
      transform: "translateX(-".concat(currentIndex * 100, "%) skewX(").concat(motionBlur / 3, "deg)")
    } : {}), carouselSlideContainerConfigurationSettings),
    onTransitionEnd: function onTransitionEnd(e) {
      return setTransitioningSlides(false);
    }
  }, slides.map(function (slide, index) {
    var depth = enableParallax ? (index - currentIndex) * parallaxIntensity : 0;
    var scale = enableZoomEffect && index !== currentIndex ? zoomIntensity : 1;
    var floating = enableFloatingEffect && index !== currentIndex ? floatingRef.current : 0;
    var rotation = enableRotationEffect && index !== currentIndex ? rotationRef.current : 0;
    var tiltX = enableTiltEffect && index === currentIndex ? tiltRef.current.x : 0;
    var tiltY = enableTiltEffect && index === currentIndex ? tiltRef.current.y : 0;
    return /*#__PURE__*/React.createElement("div", {
      key: index,
      className: "hud-carousel-slide",
      style: _objectSpread({
        display: "flex",
        flexShrink: 0,
        justifyContent: "center",
        alignItems: "center",
        transition: "all 0.369s ease-in-out, transform 0.69s ease-out",
        transform: "translateZ(".concat(depth, "px) scale(").concat(scale, ") translateY(").concat(floating, "px) rotate(").concat(rotation, "deg) rotateX(").concat(tiltY, "deg) rotateY(").concat(tiltX, "deg)"),
        minWidth: "100%",
        paddingBottom: "50px",
        paddingTop: "20px"
      }, slideConfigurationSettings),
      onMouseLeave: handleTiltMouseLeave,
      onMouseMove: handleTiltMouseMove
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        position: "relative",
        transition: "filter 0.369s ease-in-out",
        filter: enableChromaticAberration && transitioningSlides ? "drop-shadow(".concat(aberrationIntensity, "px 0px 0px red)\n                                                 drop-shadow(").concat(-aberrationIntensity, "px 0px 0px blue)\n                                                 drop-shadow(0px ").concat(aberrationIntensity, "px 0px green)") : "none"
      }
    }, slide), enableReflections && /*#__PURE__*/React.createElement("div", {
      style: {
        position: "absolute",
        pointerEvents: "none",
        transform: "scaleY(-1) translateY(10px)",
        filter: "blur(".concat(reflectionBlur, "px)"),
        background: "linear-gradient(to top, rgba(255, 255, 255, ".concat(reflectionOpacity, ") 0%, rgba(255, 255, 255, 0) 80%)"),
        height: "100%",
        width: "100%",
        opacity: reflectionOpacity,
        bottom: "-100%",
        left: "0"
      }
    }));
  })), showArrows && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HUDIcon, _extends({
    className: "hud-carousel-arrow hud-carousel-arrow-right",
    iconConfigurationSettings: _objectSpread(_objectSpread({
      position: "absolute",
      cursor: "pointer",
      transition: "all 0.369s ease",
      transform: "translateY(-50%)",
      backdropFilter: "blur(15px)",
      border: "none",
      borderRadius: "0.69rem",
      background: "rgba(255, 255, 255, 0)",
      height: "2.69rem",
      width: "1.169rem",
      scale: carouselNavigationArrowHover === "left" ? "1.1069" : "1",
      zIndex: 10,
      padding: "10px",
      left: "15px",
      top: "50%"
    }, carouselArrowLeftConfigurationSettings), carouselNavigationArrowHover === "left" ? carouselArrowLeftHoverConfigurationSettings : {}),
    color: "#fff",
    name: "chevron-left",
    onMouseLeave: function onMouseLeave() {
      setCarouselNavigationArrowHover(null);
    },
    onMouseEnter: function onMouseEnter() {
      setCarouselNavigationArrowHover("left");
    },
    onClick: prevSlide
  }, carouselArrowLeftConfigurations)), /*#__PURE__*/React.createElement(HUDIcon, _extends({
    className: "hud-carousel-arrow hud-carousel-arrow-right",
    iconConfigurationSettings: _objectSpread(_objectSpread({
      position: "absolute",
      cursor: "pointer",
      transition: "all 0.369s ease",
      transform: "translateY(-50%)",
      backdropFilter: "blur(15px)",
      border: "none",
      borderRadius: "0.69rem",
      background: "rgba(255, 255, 255, 0)",
      height: "2.69rem",
      width: "1.169rem",
      scale: carouselNavigationArrowHover === "right" ? "1.1069" : "1",
      zIndex: 10,
      padding: "10px",
      right: "15px",
      top: "50%"
    }, carouselArrowRightConfigurationSettings), carouselNavigationArrowHover === "right" ? carouselArrowRightHoverConfigurationSettings : {}),
    color: "#fff",
    name: "chevron-right",
    onMouseLeave: function onMouseLeave() {
      setCarouselNavigationArrowHover(null);
    },
    onMouseEnter: function onMouseEnter() {
      setCarouselNavigationArrowHover("right");
    },
    onClick: nextSlide
  }, carouselArrowRightConfigurations))), showDots && /*#__PURE__*/React.createElement("div", _extends({
    className: "hud-carousel-dots",
    style: _objectSpread({
      position: "absolute",
      display: "flex",
      justifyContent: "center",
      width: "100%",
      gap: "8px",
      bottom: "15px"
    }, carouselDotsContainerConfigurationSettings)
  }, carouselDotsContainerConfigurations), slides.map(function (_, index) {
    return /*#__PURE__*/React.createElement("div", _extends({
      key: index,
      className: "hud-carousel-dot ".concat(index === currentIndex ? "active" : ""),
      style: _objectSpread(_objectSpread({
        position: "relative",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        overflow: "hidden",
        cursor: "pointer",
        transition: "all 0.369s ease",
        border: "2px solid ".concat(index === currentIndex ? dotActiveColor : dotColor),
        borderRadius: "50%",
        background: "transparent",
        height: "12px",
        width: "12px",
        scale: carouselNavigationDotHover === index ? "1.1069" : "1"
      }, carouselDotConfigurationSettings), carouselNavigationDotHover === index ? carouselDotHoverConfigurationSettings : {}),
      onMouseLeave: function onMouseLeave() {
        setCarouselNavigationDotHover(null);
      },
      onMouseEnter: function onMouseEnter() {
        setCarouselNavigationDotHover(index);
      },
      onClick: function onClick() {
        return goToSlide(index);
      }
    }, carouselDotConfigurations), /*#__PURE__*/React.createElement("div", _extends({
      style: _objectSpread(_objectSpread({
        transition: "transform 0.369s ease-in-out",
        transform: index === currentIndex ? "scale(1)" : "scale(0)",
        borderRadius: "50%",
        background: dotActiveColor,
        height: "100%",
        width: "100%"
      }, carouselDotContentConfigurationSettings), carouselNavigationDotHover === index ? carouselDotContentHoverConfigurationSettings : {})
    }, carouselDotContentConfigurations)));
  })));
}
;
export default HUDCarousel;