glide-react 1.0.0

package/dist/index.js

@@ -0,0 +1,2043 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  Dots: () => Dots,
+  Glide: () => Glide,
+  NextArrow: () => NextArrow,
+  PrevArrow: () => PrevArrow,
+  Track: () => Track,
+  calculateSlideWidth: () => calculateSlideWidth,
+  canGoNext: () => canGoNext,
+  canGoPrev: () => canGoPrev,
+  canUseDOM: () => canUseDOM,
+  clamp: () => clamp,
+  default: () => index_default,
+  getHeight: () => getHeight,
+  getOnDemandLazySlides: () => getOnDemandLazySlides,
+  getPostClones: () => getPostClones,
+  getPreClones: () => getPreClones,
+  getSlideClasses: () => getSlideClasses,
+  getSwipeDirection: () => getSwipeDirection,
+  getTotalSlides: () => getTotalSlides,
+  getTrackAnimateCSS: () => getTrackAnimateCSS,
+  getTrackCSS: () => getTrackCSS,
+  getTrackLeft: () => getTrackLeft,
+  getWidth: () => getWidth,
+  keyHandler: () => keyHandler,
+  lazyEndIndex: () => lazyEndIndex,
+  lazySlidesOnLeft: () => lazySlidesOnLeft,
+  lazySlidesOnRight: () => lazySlidesOnRight,
+  lazyStartIndex: () => lazyStartIndex,
+  safePreventDefault: () => safePreventDefault,
+  swipeEnd: () => swipeEnd,
+  swipeMove: () => swipeMove,
+  swipeStart: () => swipeStart,
+  useTrack: () => useTrack
+});
+module.exports = __toCommonJS(index_exports);
+var import_react5 = __toESM(require("react"));
+
+// src/types.ts
+var defaultSettings = {
+  accessibility: true,
+  adaptiveHeight: false,
+  arrows: true,
+  autoplay: false,
+  autoplaySpeed: 3e3,
+  centerMode: false,
+  centerPadding: "50px",
+  className: "",
+  cssEase: "ease",
+  dots: false,
+  dotsClass: "glide-dots",
+  draggable: true,
+  easing: "linear",
+  edgeFriction: 0.35,
+  fade: false,
+  focusOnSelect: false,
+  infinite: true,
+  initialSlide: 0,
+  lazyLoad: null,
+  pauseOnDotsHover: false,
+  pauseOnFocus: false,
+  pauseOnHover: true,
+  responsive: null,
+  rows: 1,
+  rtl: false,
+  slide: "div",
+  slidesPerRow: 1,
+  slidesToScroll: 1,
+  slidesToShow: 1,
+  speed: 500,
+  swipe: true,
+  swipeToSlide: false,
+  touchMove: true,
+  touchThreshold: 5,
+  useCSS: true,
+  useTransform: true,
+  variableWidth: false,
+  vertical: false,
+  verticalSwiping: false,
+  waitForAnimate: true,
+  disabled: false
+};
+
+// src/components/Track.tsx
+var import_react = require("react");
+
+// src/utils/slideUtils.ts
+var canUseDOM = () => !!(typeof window !== "undefined" && window.document && window.document.createElement);
+var getWidth = (elem) => elem && elem.offsetWidth || 0;
+var getHeight = (elem) => elem && elem.offsetHeight || 0;
+function clamp(number, lowerBound, upperBound) {
+  return Math.max(lowerBound, Math.min(number, upperBound));
+}
+var getPreClones = (spec) => {
+  if (spec.disabled || !spec.infinite) {
+    return 0;
+  }
+  if (spec.variableWidth) {
+    return spec.slideCount || 0;
+  }
+  return (spec.slidesToShow || 1) + (spec.centerMode ? 1 : 0);
+};
+var getPostClones = (spec) => {
+  if (spec.disabled || !spec.infinite) {
+    return 0;
+  }
+  if (spec.variableWidth) {
+    return spec.slideCount || 0;
+  }
+  return (spec.slidesToShow || 1) + (spec.centerMode ? 1 : 0);
+};
+var getTotalSlides = (spec) => {
+  if (spec.slideCount === 1) {
+    return 1;
+  }
+  return getPreClones(spec) + (spec.slideCount || 0) + getPostClones(spec);
+};
+var canGoNext = (spec) => {
+  if (spec.infinite) {
+    return true;
+  }
+  const currentSlide = spec.currentSlide || 0;
+  const slideCount = spec.slideCount || 0;
+  const slidesToShow = spec.slidesToShow || 1;
+  if (spec.centerMode && currentSlide >= slideCount - 1) {
+    return false;
+  }
+  if (slideCount <= slidesToShow || currentSlide >= slideCount - slidesToShow) {
+    return false;
+  }
+  return true;
+};
+var canGoPrev = (spec) => {
+  if (spec.infinite) {
+    return true;
+  }
+  const currentSlide = spec.currentSlide || 0;
+  if (currentSlide <= 0) {
+    return false;
+  }
+  return true;
+};
+var getSwipeDirection = (touchObject, verticalSwiping = false) => {
+  const xDist = touchObject.startX - touchObject.curX;
+  const yDist = touchObject.startY - touchObject.curY;
+  const r = Math.atan2(yDist, xDist);
+  let swipeAngle = Math.round(r * 180 / Math.PI);
+  if (swipeAngle < 0) {
+    swipeAngle = 360 - Math.abs(swipeAngle);
+  }
+  if (swipeAngle <= 45 && swipeAngle >= 0 || swipeAngle <= 360 && swipeAngle >= 315) {
+    return "left";
+  }
+  if (swipeAngle >= 135 && swipeAngle <= 225) {
+    return "right";
+  }
+  if (verticalSwiping) {
+    if (swipeAngle >= 35 && swipeAngle <= 135) {
+      return "up";
+    }
+    return "down";
+  }
+  return "vertical";
+};
+var safePreventDefault = (event) => {
+  const passiveEvents = ["onTouchStart", "onTouchMove", "onWheel"];
+  const reactEvent = event;
+  if (reactEvent._reactName && !passiveEvents.includes(reactEvent._reactName)) {
+    event.preventDefault();
+  } else if (!reactEvent._reactName) {
+    try {
+      event.preventDefault();
+    } catch {
+    }
+  }
+};
+var swipeStart = (e, swipe, draggable) => {
+  if (e.target.tagName === "IMG") {
+    safePreventDefault(e);
+  }
+  if (!swipe || !draggable && e.type.indexOf("mouse") !== -1) {
+    return null;
+  }
+  const touches = "touches" in e ? e.touches : null;
+  return {
+    dragging: true,
+    touchObject: {
+      startX: touches ? touches[0].pageX : e.clientX,
+      startY: touches ? touches[0].pageY : e.clientY,
+      curX: touches ? touches[0].pageX : e.clientX,
+      curY: touches ? touches[0].pageY : e.clientY
+    }
+  };
+};
+var swipeMove = (e, spec) => {
+  const {
+    scrolling,
+    animating,
+    vertical,
+    swipeToSlide,
+    verticalSwiping,
+    rtl,
+    currentSlide,
+    edgeFriction,
+    edgeDragged,
+    onEdge,
+    swiped,
+    swiping,
+    slideCount,
+    slidesToScroll,
+    infinite,
+    touchObject,
+    swipeEvent,
+    listHeight,
+    listWidth
+  } = spec;
+  if (scrolling) return null;
+  if (animating) {
+    safePreventDefault(e);
+    return null;
+  }
+  if (vertical && swipeToSlide && verticalSwiping) {
+    safePreventDefault(e);
+  }
+  const touches = "touches" in e ? e.touches : null;
+  const newTouchObject = {
+    ...touchObject,
+    curX: touches ? touches[0].pageX : e.clientX,
+    curY: touches ? touches[0].pageY : e.clientY
+  };
+  newTouchObject.swipeLength = Math.round(
+    Math.sqrt(Math.pow(newTouchObject.curX - newTouchObject.startX, 2))
+  );
+  const verticalSwipeLength = Math.round(
+    Math.sqrt(Math.pow(newTouchObject.curY - newTouchObject.startY, 2))
+  );
+  if (!verticalSwiping && !swiping && verticalSwipeLength > 10) {
+    return { scrolling: true };
+  }
+  if (verticalSwiping) {
+    newTouchObject.swipeLength = verticalSwipeLength;
+  }
+  let positionOffset = (!rtl ? 1 : -1) * (newTouchObject.curX > newTouchObject.startX ? 1 : -1);
+  if (verticalSwiping) {
+    positionOffset = newTouchObject.curY > newTouchObject.startY ? 1 : -1;
+  }
+  const dotCount = Math.ceil(slideCount / slidesToScroll);
+  const swipeDirection = getSwipeDirection(newTouchObject, verticalSwiping);
+  let touchSwipeLength = newTouchObject.swipeLength;
+  const state = {};
+  if (!infinite) {
+    if (currentSlide === 0 && (swipeDirection === "right" || swipeDirection === "down") || currentSlide + 1 >= dotCount && (swipeDirection === "left" || swipeDirection === "up") || !canGoNext(spec) && (swipeDirection === "left" || swipeDirection === "up")) {
+      touchSwipeLength = newTouchObject.swipeLength * edgeFriction;
+      if (edgeDragged === false && onEdge) {
+        onEdge(swipeDirection);
+        state.edgeDragged = true;
+      }
+    }
+  }
+  if (!swiped && swipeEvent) {
+    swipeEvent(swipeDirection);
+    state.swiped = true;
+  }
+  const curLeft = getTrackLeft({
+    ...spec,
+    slideIndex: currentSlide
+  });
+  let swipeLeft;
+  if (!vertical) {
+    if (!rtl) {
+      swipeLeft = curLeft + touchSwipeLength * positionOffset;
+    } else {
+      swipeLeft = curLeft - touchSwipeLength * positionOffset;
+    }
+  } else {
+    swipeLeft = curLeft + touchSwipeLength * (listHeight / listWidth) * positionOffset;
+  }
+  if (verticalSwiping) {
+    swipeLeft = curLeft + touchSwipeLength * positionOffset;
+  }
+  const trackStyle = getTrackCSS({
+    ...spec,
+    left: swipeLeft
+  });
+  if (Math.abs(newTouchObject.curX - newTouchObject.startX) < Math.abs(newTouchObject.curY - newTouchObject.startY) * 0.8) {
+    return {
+      ...state,
+      touchObject: newTouchObject,
+      swipeLeft,
+      trackStyle
+    };
+  }
+  if (newTouchObject.swipeLength > 10) {
+    state.swiping = true;
+    safePreventDefault(e);
+  }
+  return {
+    ...state,
+    touchObject: newTouchObject,
+    swipeLeft,
+    trackStyle
+  };
+};
+var swipeEnd = (e, spec) => {
+  const {
+    dragging,
+    swipe,
+    touchObject,
+    listWidth,
+    touchThreshold,
+    verticalSwiping,
+    listHeight,
+    swipeToSlide,
+    scrolling,
+    onSwipe,
+    currentSlide,
+    infinite
+  } = spec;
+  const emptyTouchObject = { startX: 0, startY: 0, curX: 0, curY: 0 };
+  const state = {
+    dragging: false,
+    edgeDragged: false,
+    scrolling: false,
+    swiping: false,
+    swiped: false,
+    swipeLeft: null,
+    touchObject: emptyTouchObject
+  };
+  if (!dragging) {
+    if (swipe) safePreventDefault(e);
+    return state;
+  }
+  if (scrolling) {
+    return state;
+  }
+  if (!touchObject.swipeLength) {
+    return state;
+  }
+  const minSwipe = verticalSwiping ? listHeight / touchThreshold : listWidth / touchThreshold;
+  const swipeDirection = getSwipeDirection(touchObject, verticalSwiping);
+  if (touchObject.swipeLength > minSwipe) {
+    safePreventDefault(e);
+    if (onSwipe) {
+      onSwipe(swipeDirection);
+    }
+    let newSlide;
+    const activeSlide = infinite ? currentSlide : spec.targetSlide;
+    const slideCount = getSlideCount(spec);
+    switch (swipeDirection) {
+      case "left":
+      case "up":
+        newSlide = activeSlide + slideCount;
+        if (swipeToSlide) {
+          newSlide = checkNavigable(spec, newSlide);
+        }
+        state.triggerSlideHandler = newSlide;
+        state.currentDirection = 0;
+        break;
+      case "right":
+      case "down":
+        newSlide = activeSlide - slideCount;
+        if (swipeToSlide) {
+          newSlide = checkNavigable(spec, newSlide);
+        }
+        state.triggerSlideHandler = newSlide;
+        state.currentDirection = 1;
+        break;
+      default:
+        state.triggerSlideHandler = activeSlide;
+    }
+  } else {
+    const currentLeft = getTrackLeft({
+      ...spec,
+      slideIndex: currentSlide
+    });
+    state.trackStyle = getTrackAnimateCSS({
+      ...spec,
+      left: currentLeft
+    });
+  }
+  return state;
+};
+var getSlideCount = (spec) => {
+  if (spec.swipeToSlide) {
+    return 1;
+  }
+  return spec.slidesToScroll;
+};
+var getNavigableIndexes = (spec) => {
+  const max = spec.infinite ? spec.slideCount * 2 : spec.slideCount;
+  const breakpointStart = spec.infinite ? spec.slidesToShow * -1 : 0;
+  let counter = breakpointStart;
+  const indexes = [];
+  let breakpoint = breakpointStart;
+  while (breakpoint < max) {
+    indexes.push(breakpoint);
+    breakpoint = counter + spec.slidesToScroll;
+    counter += Math.min(spec.slidesToScroll, spec.slidesToShow);
+  }
+  return indexes;
+};
+var checkNavigable = (spec, index) => {
+  const navigables = getNavigableIndexes(spec);
+  let prevNavigable = 0;
+  if (index > navigables[navigables.length - 1]) {
+    return navigables[navigables.length - 1];
+  }
+  for (const nav of navigables) {
+    if (index < nav) {
+      return prevNavigable;
+    }
+    prevNavigable = nav;
+  }
+  return index;
+};
+var getTrackLeft = (spec) => {
+  if (spec.disabled) {
+    return 0;
+  }
+  const {
+    slideIndex,
+    infinite,
+    centerMode,
+    slideCount,
+    slidesToShow,
+    slidesToScroll,
+    slideWidth,
+    slideHeight,
+    fade,
+    vertical
+  } = spec;
+  if (fade || slideCount === 1) {
+    return 0;
+  }
+  let slidesToOffset = 0;
+  if (infinite) {
+    slidesToOffset = -getPreClones(spec);
+    if (slideCount % slidesToScroll !== 0 && slideIndex + slidesToScroll > slideCount) {
+      slidesToOffset = -(slideIndex > slideCount ? slidesToShow - (slideIndex - slideCount) : slideCount % slidesToScroll);
+    }
+    if (centerMode) {
+      slidesToOffset += Math.floor(slidesToShow / 2);
+    }
+  } else {
+    if (slideCount % slidesToScroll !== 0 && slideIndex + slidesToScroll > slideCount) {
+      slidesToOffset = slidesToShow - slideCount % slidesToScroll;
+    }
+    if (centerMode) {
+      slidesToOffset = Math.floor(slidesToShow / 2);
+    }
+  }
+  const slideOffset = slidesToOffset * slideWidth;
+  const verticalOffset = slidesToOffset * slideHeight;
+  let targetLeft;
+  if (!vertical) {
+    targetLeft = slideIndex * slideWidth * -1 + slideOffset;
+  } else {
+    targetLeft = slideIndex * slideHeight * -1 + verticalOffset;
+  }
+  return targetLeft;
+};
+var getTrackCSS = (spec) => {
+  let trackWidth;
+  let trackHeight;
+  const totalSlides = getTotalSlides(spec);
+  if (!spec.vertical) {
+    trackWidth = totalSlides * spec.slideWidth;
+  } else {
+    const trackChildren = spec.disabled ? spec.slideCount : spec.slideCount + 2 * spec.slidesToShow;
+    trackHeight = trackChildren * (spec.slideHeight || 0);
+  }
+  let style = {
+    opacity: 1,
+    transition: "",
+    WebkitTransition: ""
+  };
+  if (spec.useTransform) {
+    const transform = !spec.vertical ? `translate3d(${spec.left}px, 0px, 0px)` : `translate3d(0px, ${spec.left}px, 0px)`;
+    const msTransform = !spec.vertical ? `translateX(${spec.left}px)` : `translateY(${spec.left}px)`;
+    style = {
+      ...style,
+      WebkitTransform: transform,
+      transform,
+      msTransform
+    };
+  } else {
+    if (spec.vertical) {
+      style.top = spec.left;
+    } else {
+      style.left = spec.left;
+    }
+  }
+  if (spec.fade) {
+    style = { opacity: 1 };
+  }
+  if (trackWidth) {
+    style.width = trackWidth;
+  }
+  if (trackHeight) {
+    style.height = trackHeight;
+  }
+  return style;
+};
+var getTrackAnimateCSS = (spec) => {
+  const style = getTrackCSS(spec);
+  if (spec.useTransform) {
+    style.WebkitTransition = `-webkit-transform ${spec.speed}ms ${spec.cssEase}`;
+    style.transition = `transform ${spec.speed}ms ${spec.cssEase}`;
+  } else {
+    if (spec.vertical) {
+      style.transition = `top ${spec.speed}ms ${spec.cssEase}`;
+    } else {
+      style.transition = `left ${spec.speed}ms ${spec.cssEase}`;
+    }
+  }
+  return style;
+};
+var calculateSlideWidth = (listWidth, slidesToShow, centerMode, centerPadding, vertical) => {
+  if (vertical) {
+    return listWidth;
+  }
+  let centerPaddingAdj = 0;
+  if (centerMode) {
+    const paddingValue = parseInt(centerPadding, 10) || 0;
+    centerPaddingAdj = paddingValue * 2;
+    if (centerPadding.endsWith("%")) {
+      centerPaddingAdj = listWidth * paddingValue * 2 / 100;
+    }
+  }
+  return Math.ceil((listWidth - centerPaddingAdj) / slidesToShow);
+};
+var keyHandler = (e, accessibility, rtl) => {
+  if (e.target.tagName.match(/TEXTAREA|INPUT|SELECT/) || !accessibility) {
+    return "";
+  }
+  if (e.keyCode === 37) {
+    return rtl ? "next" : "previous";
+  }
+  if (e.keyCode === 39) {
+    return rtl ? "previous" : "next";
+  }
+  return "";
+};
+var lazyStartIndex = (spec) => {
+  return spec.currentSlide - lazySlidesOnLeft(spec);
+};
+var lazyEndIndex = (spec) => {
+  return spec.currentSlide + lazySlidesOnRight(spec);
+};
+var lazySlidesOnLeft = (spec) => {
+  if (spec.centerMode) {
+    return Math.floor(spec.slidesToShow / 2) + (parseInt(spec.centerPadding || "0", 10) > 0 ? 1 : 0);
+  }
+  return 0;
+};
+var lazySlidesOnRight = (spec) => {
+  if (spec.centerMode) {
+    return Math.floor((spec.slidesToShow - 1) / 2) + 1 + (parseInt(spec.centerPadding || "0", 10) > 0 ? 1 : 0);
+  }
+  return spec.slidesToShow;
+};
+var getOnDemandLazySlides = (spec) => {
+  const onDemandSlides = [];
+  const startIndex = lazyStartIndex(spec);
+  const endIndex = lazyEndIndex(spec);
+  for (let slideIndex = startIndex; slideIndex < endIndex; slideIndex++) {
+    if (!spec.lazyLoadedList.includes(slideIndex)) {
+      onDemandSlides.push(slideIndex);
+    }
+  }
+  return onDemandSlides;
+};
+var getSlideClasses = (spec) => {
+  let index = spec.index;
+  if (spec.rtl) {
+    index = spec.slideCount - 1 - spec.index;
+  }
+  const glideCloned = index < 0 || index >= spec.slideCount;
+  let glideActive = false;
+  let glideCenter = false;
+  if (spec.centerMode) {
+    const centerOffset = Math.floor(spec.slidesToShow / 2);
+    glideCenter = (index - spec.currentSlide) % spec.slideCount === 0;
+    if (index > spec.currentSlide - centerOffset - 1 && index <= spec.currentSlide + centerOffset) {
+      glideActive = true;
+    }
+  } else {
+    glideActive = spec.currentSlide <= index && index < spec.currentSlide + spec.slidesToShow;
+  }
+  let focusedSlide = spec.targetSlide;
+  if (spec.targetSlide < 0) {
+    focusedSlide = spec.targetSlide + spec.slideCount;
+  } else if (spec.targetSlide >= spec.slideCount) {
+    focusedSlide = spec.targetSlide - spec.slideCount;
+  }
+  const glideCurrent = index === focusedSlide;
+  return {
+    "glide-slide": true,
+    "glide-active": glideActive,
+    "glide-center": glideCenter,
+    "glide-cloned": glideCloned,
+    "glide-current": glideCurrent
+  };
+};
+
+// src/components/Track.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var getSlideStyle = (spec) => {
+  const style = {};
+  if (!spec.variableWidth) {
+    style.width = spec.slideWidth;
+  }
+  if (spec.fade) {
+    style.position = "relative";
+    if (spec.vertical) {
+      style.top = -spec.index * (spec.slideHeight || 0);
+    } else {
+      style.left = -spec.index * spec.slideWidth;
+    }
+    style.opacity = spec.currentSlide === spec.index ? 1 : 0;
+    style.zIndex = spec.currentSlide === spec.index ? 999 : 998;
+    if (spec.useCSS) {
+      style.transition = `opacity ${spec.speed}ms ${spec.cssEase}, visibility ${spec.speed}ms ${spec.cssEase}`;
+    }
+  }
+  return style;
+};
+var getKey = (child, fallbackKey) => {
+  if ((0, import_react.isValidElement)(child) && child.key !== null) {
+    return child.key;
+  }
+  return fallbackKey;
+};
+var classNames = (classes) => {
+  return Object.entries(classes).filter(([, value]) => value).map(([key]) => key).join(" ");
+};
+var Track = (0, import_react.forwardRef)(function Track2({
+  trackStyle,
+  slideWidth,
+  slideHeight,
+  slideCount,
+  currentSlide,
+  targetSlide,
+  slidesToShow,
+  slidesToScroll,
+  infinite,
+  centerMode,
+  centerPadding,
+  fade,
+  vertical,
+  variableWidth,
+  rtl,
+  disabled,
+  lazyLoad,
+  lazyLoadedList,
+  speed,
+  cssEase,
+  useCSS,
+  children,
+  onSlideClick,
+  focusOnSelect,
+  onMouseEnter,
+  onMouseOver,
+  onMouseLeave
+}, ref) {
+  const spec = (0, import_react.useMemo)(
+    () => ({
+      slideCount,
+      slidesToShow,
+      slidesToScroll,
+      currentSlide,
+      targetSlide,
+      centerMode,
+      centerPadding,
+      infinite,
+      rtl,
+      fade,
+      vertical,
+      variableWidth,
+      disabled
+    }),
+    [
+      slideCount,
+      slidesToShow,
+      slidesToScroll,
+      currentSlide,
+      targetSlide,
+      centerMode,
+      centerPadding,
+      infinite,
+      rtl,
+      fade,
+      vertical,
+      variableWidth,
+      disabled
+    ]
+  );
+  const startIndex = (0, import_react.useMemo)(
+    () => lazyStartIndex({ currentSlide, centerMode, slidesToShow, centerPadding }),
+    [currentSlide, centerMode, slidesToShow, centerPadding]
+  );
+  const endIndex = (0, import_react.useMemo)(
+    () => lazyEndIndex({ currentSlide, centerMode, slidesToShow, centerPadding }),
+    [currentSlide, centerMode, slidesToShow, centerPadding]
+  );
+  const preCloneCount = (0, import_react.useMemo)(() => getPreClones(spec), [spec]);
+  const postCloneCount = (0, import_react.useMemo)(() => getPostClones(spec), [spec]);
+  const handleSlideClick = (0, import_react.useCallback)(
+    (index, originalOnClick) => (e) => {
+      if (originalOnClick) {
+        originalOnClick(e);
+      }
+      if (focusOnSelect && onSlideClick) {
+        onSlideClick(index);
+      }
+    },
+    [focusOnSelect, onSlideClick]
+  );
+  const slides = (0, import_react.useMemo)(() => {
+    const output = [];
+    const preCloneSlides = [];
+    const postCloneSlides = [];
+    const childrenArray = import_react.Children.toArray(children);
+    const childrenCount = childrenArray.length;
+    childrenArray.forEach((elem, index) => {
+      if (!(0, import_react.isValidElement)(elem)) return;
+      let child = elem;
+      if (lazyLoad) {
+        const shouldLoad = lazyLoadedList.includes(index);
+        if (!shouldLoad) {
+          child = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {});
+        }
+      }
+      const childStyle = getSlideStyle({
+        index,
+        slideWidth,
+        slideHeight,
+        fade,
+        vertical,
+        variableWidth,
+        currentSlide,
+        speed,
+        cssEase,
+        useCSS
+      });
+      const slideClasses = getSlideClasses({
+        index,
+        currentSlide,
+        slideCount,
+        slidesToShow,
+        centerMode,
+        targetSlide,
+        rtl
+      });
+      const existingClassName = elem.props.className || "";
+      const className = `${classNames(slideClasses)} ${existingClassName}`.trim();
+      const originalOnClick = elem.props.onClick;
+      output.push(
+        (0, import_react.cloneElement)(child, {
+          key: `original${getKey(child, index)}`,
+          "data-index": index,
+          className,
+          tabIndex: -1,
+          "aria-hidden": !slideClasses["glide-active"],
+          style: {
+            outline: "none",
+            ...elem.props.style,
+            ...childStyle
+          },
+          onClick: handleSlideClick(index, originalOnClick)
+        })
+      );
+      if (infinite && childrenCount > 1 && !fade && !disabled) {
+        const preCloneNo = childrenCount - index;
+        if (preCloneNo <= preCloneCount) {
+          const key = -preCloneNo;
+          let cloneChild = elem;
+          if (lazyLoad && key >= startIndex) {
+            cloneChild = elem;
+          } else if (lazyLoad) {
+            cloneChild = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {});
+          }
+          const cloneClasses = getSlideClasses({
+            index: key,
+            currentSlide,
+            slideCount,
+            slidesToShow,
+            centerMode,
+            targetSlide,
+            rtl
+          });
+          preCloneSlides.push(
+            (0, import_react.cloneElement)(cloneChild, {
+              key: `precloned${getKey(cloneChild, key)}`,
+              "data-index": key,
+              tabIndex: -1,
+              className: `${classNames(cloneClasses)} ${existingClassName}`.trim(),
+              "aria-hidden": !cloneClasses["glide-active"],
+              style: {
+                ...elem.props.style,
+                ...childStyle
+              },
+              onClick: handleSlideClick(index, originalOnClick)
+            })
+          );
+        }
+        if (index < postCloneCount) {
+          const key = childrenCount + index;
+          let cloneChild = elem;
+          if (lazyLoad && key < endIndex) {
+            cloneChild = elem;
+          } else if (lazyLoad) {
+            cloneChild = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {});
+          }
+          const cloneClasses = getSlideClasses({
+            index: key,
+            currentSlide,
+            slideCount,
+            slidesToShow,
+            centerMode,
+            targetSlide,
+            rtl
+          });
+          postCloneSlides.push(
+            (0, import_react.cloneElement)(cloneChild, {
+              key: `postcloned${getKey(cloneChild, key)}`,
+              "data-index": key,
+              tabIndex: -1,
+              className: `${classNames(cloneClasses)} ${existingClassName}`.trim(),
+              "aria-hidden": !cloneClasses["glide-active"],
+              style: {
+                ...elem.props.style,
+                ...childStyle
+              },
+              onClick: handleSlideClick(index, originalOnClick)
+            })
+          );
+        }
+      }
+    });
+    let result = preCloneSlides.concat(output, postCloneSlides);
+    if (rtl) {
+      result = result.reverse();
+    }
+    return result;
+  }, [
+    children,
+    slideWidth,
+    slideHeight,
+    slideCount,
+    currentSlide,
+    targetSlide,
+    slidesToShow,
+    slidesToScroll,
+    infinite,
+    centerMode,
+    centerPadding,
+    fade,
+    vertical,
+    variableWidth,
+    rtl,
+    disabled,
+    lazyLoad,
+    lazyLoadedList,
+    speed,
+    cssEase,
+    useCSS,
+    preCloneCount,
+    postCloneCount,
+    startIndex,
+    endIndex,
+    handleSlideClick
+  ]);
+  const baseTrackStyle = {
+    position: "relative",
+    display: fade ? "block" : "flex",
+    flexDirection: vertical ? "column" : "row",
+    ...trackStyle
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref,
+      className: "glide-track",
+      style: baseTrackStyle,
+      onMouseEnter,
+      onMouseOver,
+      onMouseLeave,
+      children: slides
+    }
+  );
+});
+
+// src/components/Arrows.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var PrevArrowSVG = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "svg",
+  {
+    className,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    style: { width: 20, height: 20 },
+    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polyline", { points: "15 18 9 12 15 6" })
+  }
+);
+var NextArrowSVG = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "svg",
+  {
+    className,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    style: { width: 20, height: 20 },
+    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polyline", { points: "9 18 15 12 9 6" })
+  }
+);
+var baseArrowStyle = {
+  position: "absolute",
+  top: "50%",
+  transform: "translateY(-50%)",
+  zIndex: 10,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 40,
+  height: 40,
+  padding: 0,
+  border: "none",
+  borderRadius: "50%",
+  backgroundColor: "rgba(0, 0, 0, 0.5)",
+  color: "white",
+  cursor: "pointer",
+  transition: "background-color 0.2s, opacity 0.2s"
+};
+var disabledArrowStyle = {
+  ...baseArrowStyle,
+  opacity: 0.3,
+  cursor: "not-allowed"
+};
+var PrevArrow = ({
+  currentSlide,
+  slideCount,
+  slidesToShow,
+  infinite,
+  centerMode,
+  onClick,
+  customArrow
+}) => {
+  const canGo = canGoPrev({
+    currentSlide,
+    infinite
+  });
+  const handleClick = (e) => {
+    e.preventDefault();
+    if (canGo) {
+      onClick();
+    }
+  };
+  if (customArrow && (0, import_react2.isValidElement)(customArrow)) {
+    const arrowProps = customArrow.props;
+    return (0, import_react2.cloneElement)(customArrow, {
+      onClick: handleClick,
+      currentSlide,
+      slideCount,
+      className: `glide-arrow glide-prev ${!canGo ? "glide-disabled" : ""} ${arrowProps.className || ""}`.trim(),
+      style: { ...arrowProps.style },
+      "aria-disabled": !canGo
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      type: "button",
+      className: `glide-arrow glide-prev ${!canGo ? "glide-disabled" : ""}`,
+      style: {
+        ...canGo ? baseArrowStyle : disabledArrowStyle,
+        left: 10
+      },
+      onClick: handleClick,
+      "aria-label": "Previous slide",
+      "aria-disabled": !canGo,
+      disabled: !canGo,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrevArrowSVG, {})
+    }
+  );
+};
+var NextArrow = ({
+  currentSlide,
+  slideCount,
+  slidesToShow,
+  infinite,
+  centerMode,
+  onClick,
+  customArrow
+}) => {
+  const canGo = canGoNext({
+    currentSlide,
+    slideCount,
+    slidesToShow,
+    infinite,
+    centerMode
+  });
+  const handleClick = (e) => {
+    e.preventDefault();
+    if (canGo) {
+      onClick();
+    }
+  };
+  if (customArrow && (0, import_react2.isValidElement)(customArrow)) {
+    const arrowProps = customArrow.props;
+    return (0, import_react2.cloneElement)(customArrow, {
+      onClick: handleClick,
+      currentSlide,
+      slideCount,
+      className: `glide-arrow glide-next ${!canGo ? "glide-disabled" : ""} ${arrowProps.className || ""}`.trim(),
+      style: { ...arrowProps.style },
+      "aria-disabled": !canGo
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      type: "button",
+      className: `glide-arrow glide-next ${!canGo ? "glide-disabled" : ""}`,
+      style: {
+        ...canGo ? baseArrowStyle : disabledArrowStyle,
+        right: 10
+      },
+      onClick: handleClick,
+      "aria-label": "Next slide",
+      "aria-disabled": !canGo,
+      disabled: !canGo,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NextArrowSVG, {})
+    }
+  );
+};
+
+// src/components/Dots.tsx
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var defaultDotsContainerStyle = {
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  listStyle: "none",
+  margin: "16px 0 0",
+  padding: 0,
+  gap: 8
+};
+var defaultDotButtonStyle = {
+  width: 10,
+  height: 10,
+  padding: 0,
+  border: "none",
+  borderRadius: "50%",
+  backgroundColor: "rgba(0, 0, 0, 0.3)",
+  cursor: "pointer",
+  transition: "background-color 0.2s"
+};
+var activeDotButtonStyle = {
+  ...defaultDotButtonStyle,
+  backgroundColor: "rgba(0, 0, 0, 0.8)"
+};
+var Dots = ({
+  slideCount,
+  slidesToScroll,
+  slidesToShow,
+  currentSlide,
+  infinite,
+  onDotClick,
+  customPaging,
+  appendDots,
+  dotsClass,
+  onMouseEnter,
+  onMouseLeave
+}) => {
+  const dotCount = (0, import_react3.useMemo)(() => {
+    if (infinite) {
+      return Math.ceil(slideCount / slidesToScroll);
+    }
+    return Math.ceil((slideCount - slidesToShow) / slidesToScroll) + 1;
+  }, [slideCount, slidesToScroll, slidesToShow, infinite]);
+  const handleDotClick = (index) => (e) => {
+    e.preventDefault();
+    e.target.blur?.();
+    onDotClick(index * slidesToScroll);
+  };
+  const dots = (0, import_react3.useMemo)(() => {
+    return Array.from({ length: dotCount }).map((_, index) => {
+      const isActive = index === Math.floor(currentSlide / slidesToScroll);
+      const dotButton = customPaging ? customPaging(index) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          type: "button",
+          style: isActive ? activeDotButtonStyle : defaultDotButtonStyle,
+          "aria-label": `Go to slide ${index + 1}`
+        }
+      );
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "li",
+        {
+          className: isActive ? "glide-active" : "",
+          style: { display: "inline-block" },
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
+            {
+              onClick: handleDotClick(index),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  onDotClick(index * slidesToScroll);
+                }
+              },
+              role: "button",
+              tabIndex: 0,
+              "aria-current": isActive ? "true" : void 0,
+              children: dotButton
+            }
+          )
+        },
+        index
+      );
+    });
+  }, [dotCount, currentSlide, slidesToScroll, customPaging, onDotClick]);
+  const dotsContainer = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "ul",
+    {
+      className: dotsClass,
+      style: defaultDotsContainerStyle,
+      onMouseEnter,
+      onMouseLeave,
+      children: dots
+    }
+  );
+  if (appendDots) {
+    return appendDots(dots);
+  }
+  return dotsContainer;
+};
+
+// src/hooks/useTrack.ts
+var import_react4 = require("react");
+function useTrack(options) {
+  const {
+    currentSlide,
+    slideCount,
+    slidesToShow,
+    slidesToScroll,
+    infinite,
+    centerMode,
+    centerPadding,
+    listWidth,
+    listHeight,
+    slideWidth: providedSlideWidth,
+    slideHeight = 0,
+    fade,
+    vertical,
+    variableWidth,
+    useTransform,
+    disabled,
+    speed,
+    cssEase,
+    rtl,
+    animating,
+    swipeLeft
+  } = options;
+  const calculatedSlideWidth = (0, import_react4.useMemo)(() => {
+    if (providedSlideWidth && providedSlideWidth > 0) {
+      return providedSlideWidth;
+    }
+    if (listWidth <= 0) {
+      return 0;
+    }
+    return calculateSlideWidth(listWidth, slidesToShow, centerMode, centerPadding, vertical);
+  }, [providedSlideWidth, listWidth, slidesToShow, centerMode, centerPadding, vertical]);
+  const preCloneCount = (0, import_react4.useMemo)(() => {
+    return getPreClones({
+      disabled,
+      infinite,
+      variableWidth,
+      slideCount,
+      slidesToShow,
+      centerMode
+    });
+  }, [disabled, infinite, variableWidth, slideCount, slidesToShow, centerMode]);
+  const postCloneCount = (0, import_react4.useMemo)(() => {
+    return getPostClones({
+      disabled,
+      infinite,
+      variableWidth,
+      slideCount,
+      slidesToShow,
+      centerMode
+    });
+  }, [disabled, infinite, variableWidth, slideCount, slidesToShow, centerMode]);
+  const totalSlides = (0, import_react4.useMemo)(() => {
+    return getTotalSlides({
+      slideCount,
+      disabled,
+      infinite,
+      variableWidth,
+      slidesToShow,
+      centerMode
+    });
+  }, [slideCount, disabled, infinite, variableWidth, slidesToShow, centerMode]);
+  const trackWidth = (0, import_react4.useMemo)(() => {
+    if (vertical) {
+      return listWidth;
+    }
+    return totalSlides * calculatedSlideWidth;
+  }, [vertical, totalSlides, calculatedSlideWidth, listWidth]);
+  const spec = (0, import_react4.useMemo)(
+    () => ({
+      slideIndex: currentSlide,
+      infinite,
+      centerMode,
+      slideCount,
+      slidesToShow,
+      slidesToScroll,
+      slideWidth: calculatedSlideWidth,
+      slideHeight,
+      fade,
+      vertical,
+      variableWidth,
+      useTransform,
+      disabled,
+      listWidth,
+      centerPadding
+    }),
+    [
+      currentSlide,
+      infinite,
+      centerMode,
+      slideCount,
+      slidesToShow,
+      slidesToScroll,
+      calculatedSlideWidth,
+      slideHeight,
+      fade,
+      vertical,
+      variableWidth,
+      useTransform,
+      disabled,
+      listWidth,
+      centerPadding
+    ]
+  );
+  const getTrackStyleForSlide = (0, import_react4.useCallback)(
+    (slideIndex, animate = false) => {
+      const left = getTrackLeft({
+        ...spec,
+        slideIndex
+      });
+      if (animate) {
+        return getTrackAnimateCSS({
+          ...spec,
+          left,
+          speed,
+          cssEase
+        });
+      }
+      return getTrackCSS({
+        ...spec,
+        left
+      });
+    },
+    [spec, speed, cssEase]
+  );
+  const trackStyle = (0, import_react4.useMemo)(() => {
+    if (swipeLeft !== null) {
+      return getTrackCSS({
+        ...spec,
+        left: swipeLeft
+      });
+    }
+    const left = getTrackLeft({
+      ...spec,
+      slideIndex: currentSlide
+    });
+    if (animating) {
+      return getTrackAnimateCSS({
+        ...spec,
+        left,
+        speed,
+        cssEase
+      });
+    }
+    return getTrackCSS({
+      ...spec,
+      left
+    });
+  }, [spec, currentSlide, animating, swipeLeft, speed, cssEase]);
+  return {
+    slideWidth: calculatedSlideWidth,
+    trackStyle,
+    preCloneCount,
+    postCloneCount,
+    totalSlides,
+    getTrackStyleForSlide,
+    trackWidth
+  };
+}
+
+// src/index.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var createInitialState = (props) => ({
+  animating: false,
+  autoplaying: props.autoplay ? "playing" : null,
+  currentDirection: 0,
+  currentLeft: null,
+  currentSlide: props.initialSlide || 0,
+  direction: 1,
+  dragging: false,
+  edgeDragged: false,
+  initialized: false,
+  lazyLoadedList: props.lazyLoad ? [props.initialSlide || 0] : [],
+  listHeight: null,
+  listWidth: null,
+  scrolling: false,
+  slideCount: 0,
+  slideHeight: null,
+  slideWidth: null,
+  swipeLeft: null,
+  swiped: false,
+  swiping: false,
+  touchObject: { startX: 0, startY: 0, curX: 0, curY: 0 },
+  trackStyle: {},
+  trackWidth: 0,
+  targetSlide: props.initialSlide || 0
+});
+var glideReducer = (state, action) => {
+  switch (action.type) {
+    case "INIT":
+      return { ...state, ...action.payload, initialized: true };
+    case "SET_DIMENSIONS":
+      return { ...state, ...action.payload };
+    case "GO_TO_SLIDE":
+      return {
+        ...state,
+        currentSlide: action.payload.slide,
+        targetSlide: action.payload.slide,
+        animating: action.payload.animated !== false
+      };
+    case "NEXT":
+    case "PREV":
+      return state;
+    // Handled externally
+    case "SET_TRACK_STYLE":
+      return { ...state, trackStyle: action.payload };
+    case "SWIPE_START":
+      return {
+        ...state,
+        dragging: true,
+        touchObject: action.payload
+      };
+    case "SWIPE_MOVE":
+      return {
+        ...state,
+        touchObject: action.payload.touchObject,
+        swipeLeft: action.payload.swipeLeft,
+        trackStyle: action.payload.trackStyle,
+        swiping: action.payload.swiping ?? state.swiping
+      };
+    case "SWIPE_END":
+      return { ...state, ...action.payload };
+    case "ANIMATION_END":
+      return { ...state, animating: false };
+    case "SET_AUTOPLAY":
+      return { ...state, autoplaying: action.payload };
+    case "UPDATE":
+      return { ...state, ...action.payload };
+    default:
+      return state;
+  }
+};
+var Glide = (0, import_react5.forwardRef)(function Glide2(props, ref) {
+  const settings = {
+    ...defaultSettings,
+    ...props
+  };
+  const {
+    accessibility,
+    adaptiveHeight,
+    arrows,
+    autoplay,
+    autoplaySpeed,
+    centerMode,
+    centerPadding,
+    className,
+    cssEase,
+    dots,
+    dotsClass,
+    draggable,
+    fade,
+    focusOnSelect,
+    infinite,
+    initialSlide,
+    lazyLoad,
+    pauseOnDotsHover,
+    pauseOnFocus,
+    pauseOnHover,
+    rtl,
+    slidesToScroll,
+    slidesToShow,
+    speed,
+    swipe,
+    swipeToSlide,
+    touchMove,
+    touchThreshold,
+    useCSS,
+    useTransform,
+    variableWidth,
+    vertical,
+    verticalSwiping,
+    waitForAnimate,
+    disabled,
+    children,
+    afterChange,
+    beforeChange,
+    appendDots,
+    customPaging,
+    nextArrow,
+    prevArrow,
+    onEdge,
+    onInit,
+    onReInit,
+    onSwipe,
+    swipeEvent
+  } = settings;
+  const listRef = (0, import_react5.useRef)(null);
+  const trackRef = (0, import_react5.useRef)(null);
+  const autoplayTimerRef = (0, import_react5.useRef)(null);
+  const animationEndTimeoutRef = (0, import_react5.useRef)(null);
+  const resizeObserverRef = (0, import_react5.useRef)(null);
+  const [state, dispatch] = (0, import_react5.useReducer)(glideReducer, props, createInitialState);
+  const {
+    initialized,
+    currentSlide,
+    targetSlide,
+    animating,
+    dragging,
+    swiping,
+    swipeLeft,
+    touchObject,
+    listWidth,
+    listHeight,
+    slideWidth,
+    slideHeight,
+    lazyLoadedList,
+    autoplaying,
+    edgeDragged,
+    swiped,
+    scrolling
+  } = state;
+  const slideCount = import_react5.Children.count(children);
+  const {
+    slideWidth: calculatedSlideWidth,
+    trackStyle,
+    preCloneCount,
+    postCloneCount,
+    totalSlides,
+    getTrackStyleForSlide,
+    trackWidth
+  } = useTrack({
+    currentSlide,
+    slideCount,
+    slidesToShow,
+    slidesToScroll,
+    infinite,
+    centerMode,
+    centerPadding,
+    listWidth: listWidth || 0,
+    listHeight: listHeight || 0,
+    slideWidth: slideWidth ?? void 0,
+    slideHeight: slideHeight || 0,
+    fade,
+    vertical,
+    variableWidth,
+    useTransform,
+    disabled,
+    speed,
+    cssEase,
+    rtl,
+    animating,
+    swipeLeft
+  });
+  (0, import_react5.useEffect)(() => {
+    if (!canUseDOM() || !listRef.current) return;
+    const updateDimensions = () => {
+      if (!listRef.current) return;
+      const newListWidth = getWidth(listRef.current);
+      const newListHeight = getHeight(listRef.current);
+      const firstSlide = listRef.current.querySelector('[data-index="0"]');
+      const newSlideHeight = firstSlide ? getHeight(firstSlide) : null;
+      dispatch({
+        type: "INIT",
+        payload: {
+          listWidth: newListWidth,
+          listHeight: newListHeight,
+          slideHeight: newSlideHeight,
+          slideCount
+        }
+      });
+    };
+    updateDimensions();
+    resizeObserverRef.current = new ResizeObserver(updateDimensions);
+    resizeObserverRef.current.observe(listRef.current);
+    onInit?.();
+    return () => {
+      resizeObserverRef.current?.disconnect();
+    };
+  }, [slideCount, onInit]);
+  const autoplayIterator = (0, import_react5.useCallback)(() => {
+    if (autoplaying !== "playing") return;
+    const nextSlideIndex = currentSlide + slidesToScroll;
+    goToSlide(nextSlideIndex);
+  }, [autoplaying, currentSlide, slidesToScroll]);
+  (0, import_react5.useEffect)(() => {
+    if (!autoplay || !initialized) return;
+    if (autoplaying === "playing") {
+      autoplayTimerRef.current = setTimeout(autoplayIterator, autoplaySpeed);
+    }
+    return () => {
+      if (autoplayTimerRef.current) {
+        clearTimeout(autoplayTimerRef.current);
+      }
+    };
+  }, [autoplay, autoplaying, initialized, autoplayIterator, autoplaySpeed]);
+  (0, import_react5.useEffect)(() => {
+    if (animating) {
+      animationEndTimeoutRef.current = setTimeout(() => {
+        dispatch({ type: "ANIMATION_END" });
+        afterChange?.(currentSlide);
+      }, speed);
+    }
+    return () => {
+      if (animationEndTimeoutRef.current) {
+        clearTimeout(animationEndTimeoutRef.current);
+      }
+    };
+  }, [animating, speed, afterChange, currentSlide]);
+  const goToSlide = (0, import_react5.useCallback)(
+    (slideIndex, dontAnimate = false) => {
+      if (waitForAnimate && animating) return;
+      let targetIndex = slideIndex;
+      if (infinite) {
+        if (targetIndex < 0) {
+          targetIndex = slideCount + targetIndex;
+        } else if (targetIndex >= slideCount) {
+          targetIndex = targetIndex - slideCount;
+        }
+      } else {
+        targetIndex = clamp(targetIndex, 0, slideCount - slidesToShow);
+      }
+      beforeChange?.(currentSlide, targetIndex);
+      if (lazyLoad) {
+        const slidesToLoad = getOnDemandLazySlides({
+          currentSlide: targetIndex,
+          centerMode,
+          slidesToShow,
+          centerPadding,
+          lazyLoadedList
+        });
+        if (slidesToLoad.length > 0) {
+          dispatch({
+            type: "UPDATE",
+            payload: { lazyLoadedList: [...lazyLoadedList, ...slidesToLoad] }
+          });
+        }
+      }
+      dispatch({
+        type: "GO_TO_SLIDE",
+        payload: { slide: targetIndex, animated: !dontAnimate }
+      });
+    },
+    [
+      waitForAnimate,
+      animating,
+      infinite,
+      slideCount,
+      slidesToShow,
+      beforeChange,
+      currentSlide,
+      lazyLoad,
+      centerMode,
+      centerPadding,
+      lazyLoadedList
+    ]
+  );
+  const next = (0, import_react5.useCallback)(() => {
+    goToSlide(currentSlide + slidesToScroll);
+  }, [currentSlide, slidesToScroll, goToSlide]);
+  const prev = (0, import_react5.useCallback)(() => {
+    goToSlide(currentSlide - slidesToScroll);
+  }, [currentSlide, slidesToScroll, goToSlide]);
+  const goTo = (0, import_react5.useCallback)(
+    (index, dontAnimate = false) => {
+      goToSlide(index, dontAnimate);
+    },
+    [goToSlide]
+  );
+  const pause = (0, import_react5.useCallback)(() => {
+    dispatch({ type: "SET_AUTOPLAY", payload: "paused" });
+  }, []);
+  const play = (0, import_react5.useCallback)(() => {
+    dispatch({ type: "SET_AUTOPLAY", payload: "playing" });
+  }, []);
+  (0, import_react5.useImperativeHandle)(
+    ref,
+    () => ({
+      prev,
+      next,
+      goTo,
+      pause,
+      play,
+      innerSlider: { state: { currentSlide } }
+    }),
+    [prev, next, goTo, pause, play, currentSlide]
+  );
+  const handleKeyDown = (0, import_react5.useCallback)(
+    (e) => {
+      const action = keyHandler(e, accessibility, rtl);
+      if (action === "next") {
+        next();
+      } else if (action === "previous") {
+        prev();
+      }
+    },
+    [accessibility, rtl, next, prev]
+  );
+  const handleSwipeStart = (0, import_react5.useCallback)(
+    (e) => {
+      const result = swipeStart(e, swipe, draggable);
+      if (result) {
+        dispatch({ type: "SWIPE_START", payload: result.touchObject });
+      }
+    },
+    [swipe, draggable]
+  );
+  const handleSwipeMove = (0, import_react5.useCallback)(
+    (e) => {
+      if (!dragging) return;
+      const result = swipeMove(e, {
+        scrolling,
+        animating,
+        vertical,
+        swipeToSlide,
+        verticalSwiping,
+        rtl,
+        currentSlide,
+        edgeFriction: settings.edgeFriction,
+        edgeDragged,
+        onEdge,
+        swiped,
+        swiping,
+        slideCount,
+        slidesToScroll,
+        infinite,
+        touchObject,
+        swipeEvent,
+        listHeight: listHeight || 0,
+        listWidth: listWidth || 0,
+        slideWidth: calculatedSlideWidth,
+        slideHeight: slideHeight || 0,
+        centerMode,
+        slidesToShow,
+        fade,
+        disabled,
+        variableWidth,
+        useTransform
+      });
+      if (result && "scrolling" in result && result.scrolling) {
+        dispatch({ type: "UPDATE", payload: { scrolling: true } });
+      } else if (result && "swipeLeft" in result) {
+        dispatch({ type: "SWIPE_MOVE", payload: result });
+      }
+    },
+    [
+      dragging,
+      scrolling,
+      animating,
+      vertical,
+      swipeToSlide,
+      verticalSwiping,
+      rtl,
+      currentSlide,
+      settings.edgeFriction,
+      edgeDragged,
+      onEdge,
+      swiped,
+      swiping,
+      slideCount,
+      slidesToScroll,
+      infinite,
+      touchObject,
+      swipeEvent,
+      listHeight,
+      listWidth,
+      calculatedSlideWidth,
+      slideHeight,
+      centerMode,
+      slidesToShow,
+      fade,
+      disabled,
+      variableWidth,
+      useTransform
+    ]
+  );
+  const handleSwipeEnd = (0, import_react5.useCallback)(
+    (e) => {
+      const result = swipeEnd(e, {
+        dragging,
+        swipe,
+        touchObject,
+        listWidth: listWidth || 0,
+        touchThreshold,
+        verticalSwiping,
+        listHeight: listHeight || 0,
+        swipeToSlide,
+        scrolling,
+        onSwipe,
+        targetSlide,
+        currentSlide,
+        infinite,
+        slideCount,
+        slidesToScroll,
+        slidesToShow,
+        slideWidth: calculatedSlideWidth,
+        slideHeight: slideHeight || 0,
+        centerMode,
+        fade,
+        disabled,
+        variableWidth,
+        useTransform,
+        speed,
+        cssEase,
+        rtl,
+        vertical
+      });
+      dispatch({
+        type: "SWIPE_END",
+        payload: {
+          dragging: result.dragging,
+          edgeDragged: result.edgeDragged,
+          scrolling: result.scrolling,
+          swiping: result.swiping,
+          swiped: result.swiped,
+          swipeLeft: result.swipeLeft,
+          touchObject: result.touchObject
+        }
+      });
+      if (result.triggerSlideHandler !== void 0) {
+        goToSlide(result.triggerSlideHandler);
+      } else if (result.trackStyle) {
+        dispatch({ type: "SET_TRACK_STYLE", payload: result.trackStyle });
+      }
+    },
+    [
+      dragging,
+      swipe,
+      touchObject,
+      listWidth,
+      touchThreshold,
+      verticalSwiping,
+      listHeight,
+      swipeToSlide,
+      scrolling,
+      onSwipe,
+      targetSlide,
+      currentSlide,
+      infinite,
+      slideCount,
+      slidesToScroll,
+      slidesToShow,
+      calculatedSlideWidth,
+      slideHeight,
+      centerMode,
+      fade,
+      disabled,
+      variableWidth,
+      useTransform,
+      speed,
+      cssEase,
+      rtl,
+      vertical,
+      goToSlide
+    ]
+  );
+  const handleMouseEnter = (0, import_react5.useCallback)(() => {
+    if (autoplay && pauseOnHover) {
+      dispatch({ type: "SET_AUTOPLAY", payload: "hovered" });
+    }
+  }, [autoplay, pauseOnHover]);
+  const handleMouseLeave = (0, import_react5.useCallback)(() => {
+    if (autoplay && pauseOnHover && autoplaying === "hovered") {
+      dispatch({ type: "SET_AUTOPLAY", payload: "playing" });
+    }
+  }, [autoplay, pauseOnHover, autoplaying]);
+  const handleFocus = (0, import_react5.useCallback)(() => {
+    if (autoplay && pauseOnFocus) {
+      dispatch({ type: "SET_AUTOPLAY", payload: "focused" });
+    }
+  }, [autoplay, pauseOnFocus]);
+  const handleBlur = (0, import_react5.useCallback)(() => {
+    if (autoplay && pauseOnFocus && autoplaying === "focused") {
+      dispatch({ type: "SET_AUTOPLAY", payload: "playing" });
+    }
+  }, [autoplay, pauseOnFocus, autoplaying]);
+  const handleDotClick = (0, import_react5.useCallback)(
+    (index) => {
+      goToSlide(index);
+    },
+    [goToSlide]
+  );
+  const handleDotMouseEnter = (0, import_react5.useCallback)(() => {
+    if (autoplay && pauseOnDotsHover) {
+      dispatch({ type: "SET_AUTOPLAY", payload: "hovered" });
+    }
+  }, [autoplay, pauseOnDotsHover]);
+  const handleDotMouseLeave = (0, import_react5.useCallback)(() => {
+    if (autoplay && pauseOnDotsHover && autoplaying === "hovered") {
+      dispatch({ type: "SET_AUTOPLAY", payload: "playing" });
+    }
+  }, [autoplay, pauseOnDotsHover, autoplaying]);
+  const handleSlideClick = (0, import_react5.useCallback)(
+    (index) => {
+      if (focusOnSelect) {
+        goToSlide(index);
+      }
+    },
+    [focusOnSelect, goToSlide]
+  );
+  const sliderStyle = (0, import_react5.useMemo)(
+    () => ({
+      position: "relative",
+      display: "block",
+      boxSizing: "border-box",
+      userSelect: "none",
+      touchAction: vertical ? "pan-x" : "pan-y",
+      WebkitTapHighlightColor: "transparent"
+    }),
+    [vertical]
+  );
+  const listStyle = (0, import_react5.useMemo)(
+    () => ({
+      position: "relative",
+      display: "block",
+      overflow: "hidden",
+      margin: 0,
+      padding: 0
+    }),
+    []
+  );
+  if (!initialized || !canUseDOM()) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `glide-slider ${className}`.trim(), style: sliderStyle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "glide-list", style: listStyle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "glide-track", style: { display: "flex" }, children: import_react5.default.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        className: "glide-slide",
+        style: {
+          width: `${100 / slidesToShow}%`,
+          flexShrink: 0
+        },
+        children: child
+      },
+      idx
+    )) }) }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: `glide-slider ${className} ${vertical ? "glide-vertical" : ""}`.trim(),
+      style: sliderStyle,
+      onKeyDown: handleKeyDown,
+      tabIndex: accessibility ? 0 : void 0,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      children: [
+        arrows && !disabled && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          PrevArrow,
+          {
+            currentSlide,
+            slideCount,
+            slidesToShow,
+            infinite,
+            centerMode,
+            onClick: prev,
+            customArrow: prevArrow
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            ref: listRef,
+            className: "glide-list",
+            style: listStyle,
+            onMouseDown: touchMove ? handleSwipeStart : void 0,
+            onMouseMove: touchMove && dragging ? handleSwipeMove : void 0,
+            onMouseUp: touchMove ? handleSwipeEnd : void 0,
+            onMouseLeave: touchMove && dragging ? handleSwipeEnd : handleMouseLeave,
+            onMouseEnter: handleMouseEnter,
+            onTouchStart: swipe ? handleSwipeStart : void 0,
+            onTouchMove: swipe && dragging ? handleSwipeMove : void 0,
+            onTouchEnd: swipe ? handleSwipeEnd : void 0,
+            onTouchCancel: swipe && dragging ? handleSwipeEnd : void 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              Track,
+              {
+                ref: trackRef,
+                trackStyle,
+                slideWidth: calculatedSlideWidth,
+                slideHeight: slideHeight || void 0,
+                slideCount,
+                currentSlide,
+                targetSlide,
+                slidesToShow,
+                slidesToScroll,
+                infinite,
+                centerMode,
+                centerPadding,
+                fade,
+                vertical,
+                variableWidth,
+                rtl,
+                disabled,
+                lazyLoad,
+                lazyLoadedList,
+                speed,
+                cssEase,
+                useCSS,
+                focusOnSelect,
+                onSlideClick: handleSlideClick,
+                children
+              }
+            )
+          }
+        ),
+        arrows && !disabled && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          NextArrow,
+          {
+            currentSlide,
+            slideCount,
+            slidesToShow,
+            infinite,
+            centerMode,
+            onClick: next,
+            customArrow: nextArrow
+          }
+        ),
+        dots && !disabled && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Dots,
+          {
+            slideCount,
+            slidesToScroll,
+            slidesToShow,
+            currentSlide,
+            infinite,
+            onDotClick: handleDotClick,
+            customPaging,
+            appendDots,
+            dotsClass,
+            onMouseEnter: handleDotMouseEnter,
+            onMouseLeave: handleDotMouseLeave
+          }
+        )
+      ]
+    }
+  );
+});
+var index_default = Glide;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Dots,
+  Glide,
+  NextArrow,
+  PrevArrow,
+  Track,
+  calculateSlideWidth,
+  canGoNext,
+  canGoPrev,
+  canUseDOM,
+  clamp,
+  getHeight,
+  getOnDemandLazySlides,
+  getPostClones,
+  getPreClones,
+  getSlideClasses,
+  getSwipeDirection,
+  getTotalSlides,
+  getTrackAnimateCSS,
+  getTrackCSS,
+  getTrackLeft,
+  getWidth,
+  keyHandler,
+  lazyEndIndex,
+  lazySlidesOnLeft,
+  lazySlidesOnRight,
+  lazyStartIndex,
+  safePreventDefault,
+  swipeEnd,
+  swipeMove,
+  swipeStart,
+  useTrack
+});