@brandonsoccer22/gsap-editorial-carousel 0.1.2 → 0.1.4

package/dist/index.js

@@ -0,0 +1,971 @@
+import { gsap } from 'gsap';
+
+// src/carousel.ts
+
+// src/dom.ts
+function resolveRoot(root) {
+  if (typeof root === "string") {
+    const el = document.querySelector(root);
+    if (!el) {
+      throw new Error(`Carousel root not found for selector: ${root}`);
+    }
+    if (!(el instanceof HTMLElement)) {
+      throw new Error(`Carousel root must be an HTMLElement for selector: ${root}`);
+    }
+    return el;
+  }
+  if (!(root instanceof HTMLElement)) {
+    throw new Error("Carousel root must be an HTMLElement.");
+  }
+  return root;
+}
+function qs(root, selector) {
+  return root.querySelector(selector);
+}
+function qsa(root, selector) {
+  return Array.from(root.querySelectorAll(selector));
+}
+function toggleClass(el, name, active) {
+  if (active) {
+    el.classList.add(name);
+  } else {
+    el.classList.remove(name);
+  }
+}
+function setAriaDisabled(el, disabled) {
+  el.setAttribute("aria-disabled", disabled ? "true" : "false");
+}
+function setDisabled(el, disabled, disabledClass) {
+  if (!el) return;
+  const isButton = el instanceof HTMLButtonElement || el instanceof HTMLInputElement;
+  if (isButton) {
+    el.disabled = disabled;
+  }
+  setAriaDisabled(el, disabled);
+  toggleClass(el, disabledClass, disabled);
+}
+function ensureRootFocusable(root) {
+  if (!root.hasAttribute("tabindex")) {
+    root.setAttribute("tabindex", "0");
+  }
+}
+
+// src/a11y.ts
+function setSlidesState(slides, activeIndex, activeClass) {
+  slides.forEach((slide, index) => {
+    const isActive = index === activeIndex;
+    slide.setAttribute("aria-hidden", isActive ? "false" : "true");
+    if (isActive) {
+      slide.removeAttribute("inert");
+    } else {
+      slide.setAttribute("inert", "");
+    }
+    toggleClass(slide, activeClass, isActive);
+  });
+}
+function setDotsState(dots, activeIndex, activeClass) {
+  dots.forEach((dot, index) => {
+    const isActive = index === activeIndex;
+    if (isActive) {
+      dot.setAttribute("aria-current", "true");
+    } else {
+      dot.removeAttribute("aria-current");
+    }
+    toggleClass(dot, activeClass, isActive);
+  });
+}
+
+// src/registry.ts
+var registry = /* @__PURE__ */ new Map();
+function registerAnimation(name, factory) {
+  registry.set(name, factory);
+}
+function registerAnimations(map) {
+  Object.entries(map).forEach(([name, factory]) => {
+    registerAnimation(name, factory);
+  });
+}
+function getAnimation(name) {
+  return registry.get(name);
+}
+
+// src/defaults.ts
+var defaultSelectors = {
+  root: "[data-carousel]",
+  slide: "[data-carousel-slide], .gsap-carousel__slide",
+  prev: "[data-carousel-prev]",
+  next: "[data-carousel-next]",
+  dots: "[data-carousel-dots]",
+  dotTemplate: "[data-carousel-dot-template]"
+};
+var defaultClassNames = {
+  activeSlide: "is-active",
+  animatingRoot: "is-animating",
+  disabledControl: "is-disabled",
+  dot: "gsap-carousel__dot",
+  activeDot: "is-active"
+};
+var defaultOptions = {
+  loop: true,
+  initialIndex: 0,
+  transition: {
+    overlap: 0
+  },
+  defaults: {
+    dur: 0.6,
+    ease: "power2.out"
+  }
+};
+var didRegister = false;
+function ensureDefaultAnimationsRegistered() {
+  if (didRegister) return;
+  didRegister = true;
+  const fadeIn = ({ el, gsap: gsap3, opts, tl }) => {
+    tl.fromTo(
+      el,
+      { autoAlpha: 0 },
+      {
+        autoAlpha: 1,
+        duration: opts.dur,
+        delay: opts.delay,
+        ease: opts.ease
+      },
+      opts.at
+    );
+  };
+  fadeIn.reverse = ({ el, gsap: gsap3, opts, tl }) => {
+    tl.to(
+      el,
+      {
+        autoAlpha: 0,
+        duration: opts.dur,
+        delay: opts.delay,
+        ease: opts.ease
+      },
+      opts.at
+    );
+    tl.set(el, { autoAlpha: 0 }, ">");
+  };
+  const fadeUp = ({ el, gsap: gsap3, opts, tl }) => {
+    tl.fromTo(
+      el,
+      { autoAlpha: 0, y: 24 },
+      {
+        autoAlpha: 1,
+        y: 0,
+        duration: opts.dur,
+        delay: opts.delay,
+        ease: opts.ease
+      },
+      opts.at
+    );
+  };
+  fadeUp.reverse = ({ el, gsap: gsap3, opts, tl }) => {
+    tl.to(
+      el,
+      {
+        autoAlpha: 0,
+        y: -12,
+        duration: opts.dur,
+        delay: opts.delay,
+        ease: opts.ease
+      },
+      opts.at
+    );
+    tl.set(el, { autoAlpha: 0 }, ">");
+  };
+  const fadeDown = ({ el, gsap: gsap3, opts, tl }) => {
+    tl.fromTo(
+      el,
+      { autoAlpha: 0, y: -24 },
+      {
+        autoAlpha: 1,
+        y: 0,
+        duration: opts.dur,
+        delay: opts.delay,
+        ease: opts.ease
+      },
+      opts.at
+    );
+  };
+  fadeDown.reverse = ({ el, gsap: gsap3, opts, tl }) => {
+    tl.to(
+      el,
+      {
+        autoAlpha: 0,
+        y: 12,
+        duration: opts.dur,
+        delay: opts.delay,
+        ease: opts.ease
+      },
+      opts.at
+    );
+    tl.set(el, { autoAlpha: 0 }, ">");
+  };
+  const slideIn = ({ el, gsap: gsap3, opts, tl }) => {
+    tl.fromTo(
+      el,
+      { autoAlpha: 0, x: opts.direction * 40 },
+      {
+        autoAlpha: 1,
+        x: 0,
+        duration: opts.dur,
+        delay: opts.delay,
+        ease: opts.ease
+      },
+      opts.at
+    );
+  };
+  slideIn.reverse = ({ el, gsap: gsap3, opts, tl }) => {
+    tl.to(
+      el,
+      {
+        autoAlpha: 0,
+        x: opts.direction * -24,
+        duration: opts.dur,
+        delay: opts.delay,
+        ease: opts.ease
+      },
+      opts.at
+    );
+    tl.set(el, { autoAlpha: 0 }, ">");
+  };
+  const fadeOut = ({ el, gsap: gsap3, opts, tl }) => {
+    tl.to(
+      el,
+      {
+        autoAlpha: 0,
+        duration: opts.dur,
+        delay: opts.delay,
+        ease: opts.ease
+      },
+      opts.at
+    );
+    tl.set(el, { autoAlpha: 0 }, ">");
+  };
+  fadeOut.reverse = ({ el, gsap: gsap3, opts, tl }) => {
+    tl.to(
+      el,
+      {
+        autoAlpha: 1,
+        duration: opts.dur,
+        delay: opts.delay,
+        ease: opts.ease
+      },
+      opts.at
+    );
+  };
+  const slideOut = ({ el, gsap: gsap3, opts, tl }) => {
+    tl.to(
+      el,
+      {
+        autoAlpha: 0,
+        x: opts.direction * -24,
+        duration: opts.dur,
+        delay: opts.delay,
+        ease: opts.ease
+      },
+      opts.at
+    );
+    tl.set(el, { autoAlpha: 0 }, ">");
+  };
+  slideOut.reverse = ({ el, gsap: gsap3, opts, tl }) => {
+    tl.to(
+      el,
+      {
+        autoAlpha: 1,
+        x: 0,
+        duration: opts.dur,
+        delay: opts.delay,
+        ease: opts.ease
+      },
+      opts.at
+    );
+  };
+  registerAnimations({
+    "fade-in": fadeIn,
+    "fade-down": fadeDown,
+    "fade-down-in": fadeDownIn,
+    "fade-down-out": fadeDownOut,
+    "fade-out": fadeOut,
+    "fade-up": fadeUp,
+    "fade-up-in": fadeUpIn,
+    "fade-up-out": fadeUpOut,
+    "fade-start-in": fadeStartIn,
+    "fade-start-out": fadeStartOut,
+    "fade-end-in": fadeEndIn,
+    "fade-end-out": fadeEndOut,
+    "slide-in": slideIn,
+    "slide-out": slideOut
+  });
+}
+var fadeUpIn = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.fromTo(
+    el,
+    { autoAlpha: 0, y: 24 },
+    {
+      autoAlpha: 1,
+      y: 0,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+};
+fadeUpIn.reverse = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.to(
+    el,
+    {
+      autoAlpha: 0,
+      y: -12,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+  tl.set(el, { autoAlpha: 0 }, ">");
+};
+var fadeUpOut = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.to(
+    el,
+    {
+      autoAlpha: 0,
+      y: -12,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+  tl.set(el, { autoAlpha: 0 }, ">");
+};
+fadeUpOut.reverse = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.fromTo(
+    el,
+    { autoAlpha: 0, y: 24 },
+    {
+      autoAlpha: 1,
+      y: 0,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+};
+var fadeDownIn = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.fromTo(
+    el,
+    { autoAlpha: 0, y: -24 },
+    {
+      autoAlpha: 1,
+      y: 0,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+};
+fadeDownIn.reverse = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.to(
+    el,
+    {
+      autoAlpha: 0,
+      y: 12,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+  tl.set(el, { autoAlpha: 0 }, ">");
+};
+var fadeDownOut = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.to(
+    el,
+    {
+      autoAlpha: 0,
+      y: 12,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+  tl.set(el, { autoAlpha: 0 }, ">");
+};
+fadeDownOut.reverse = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.fromTo(
+    el,
+    { autoAlpha: 0, y: -24 },
+    {
+      autoAlpha: 1,
+      y: 0,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+};
+var fadeStartIn = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.fromTo(
+    el,
+    { autoAlpha: 0, x: -24 },
+    {
+      autoAlpha: 1,
+      x: 0,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+};
+fadeStartIn.reverse = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.to(
+    el,
+    {
+      autoAlpha: 0,
+      x: -12,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+  tl.set(el, { autoAlpha: 0 }, ">");
+};
+var fadeStartOut = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.to(
+    el,
+    {
+      autoAlpha: 0,
+      x: -12,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+  tl.set(el, { autoAlpha: 0 }, ">");
+};
+fadeStartOut.reverse = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.fromTo(
+    el,
+    { autoAlpha: 0, x: -24 },
+    {
+      autoAlpha: 1,
+      x: 0,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+};
+var fadeEndIn = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.fromTo(
+    el,
+    { autoAlpha: 0, x: 24 },
+    {
+      autoAlpha: 1,
+      x: 0,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+};
+fadeEndIn.reverse = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.to(
+    el,
+    {
+      autoAlpha: 0,
+      x: 12,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+  tl.set(el, { autoAlpha: 0 }, ">");
+};
+var fadeEndOut = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.to(
+    el,
+    {
+      autoAlpha: 0,
+      x: 12,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+  tl.set(el, { autoAlpha: 0 }, ">");
+};
+fadeEndOut.reverse = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.fromTo(
+    el,
+    { autoAlpha: 0, x: 24 },
+    {
+      autoAlpha: 1,
+      x: 0,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+};
+
+// src/timeline.ts
+function getDataNumber(el, name, fallback) {
+  const value = el.getAttribute(name);
+  if (!value) return fallback;
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : fallback;
+}
+function getDataString(el, name) {
+  const value = el.getAttribute(name);
+  return value && value.trim() ? value.trim() : void 0;
+}
+function parsePositionOffset(value) {
+  if (!value) return null;
+  const trimmed = value.trim();
+  const numberPattern = /^[+-]?(?:\d+\.?\d*|\.\d+)$/;
+  const relativeMatch = trimmed.match(/^([+-])=([+-]?(?:\d+\.?\d*|\.\d+))$/);
+  if (relativeMatch) {
+    const amount = Number.parseFloat(relativeMatch[2]);
+    if (!Number.isFinite(amount)) return null;
+    return relativeMatch[1] === "+" ? amount : -amount;
+  }
+  if (numberPattern.test(trimmed)) {
+    const amount = Number.parseFloat(trimmed);
+    return Number.isFinite(amount) ? amount : null;
+  }
+  return null;
+}
+function findAnimationName(el) {
+  const classList = Array.from(el.classList);
+  for (const className of classList) {
+    if (getAnimation(className)) return className;
+  }
+  return null;
+}
+function collectExternalControls(slide, options) {
+  const root = slide.closest(options.selectors.root);
+  if (!root) return [];
+  const rootId = root.getAttribute("id");
+  const selector = `${options.selectors.prev}, ${options.selectors.next}`;
+  let candidates = [];
+  if (rootId) {
+    const scopedSelector = `${selector}[data-for="${rootId}"]`;
+    candidates = Array.from(document.querySelectorAll(scopedSelector));
+    if (!candidates.length) {
+      candidates = Array.from(root.querySelectorAll(selector));
+    }
+  } else {
+    candidates = Array.from(root.querySelectorAll(selector));
+  }
+  return candidates.filter((el) => !el.closest(options.selectors.slide));
+}
+function collectAnimItems(slide, options) {
+  const elements = Array.from(slide.querySelectorAll("[class]"));
+  const externalControls = collectExternalControls(slide, options);
+  const items = [];
+  elements.concat(externalControls).forEach((el) => {
+    var _a, _b;
+    const animName = findAnimationName(el);
+    if (!animName) return;
+    const seq = Math.max(1, Math.floor(getDataNumber(el, "data-seq", 1)));
+    const exitSeq = Math.max(1, Math.floor(getDataNumber(el, "data-exit-seq", seq)));
+    const dur = getDataNumber(el, "data-dur", options.defaults.dur);
+    const delay = getDataNumber(el, "data-delay", 0);
+    const ease = (_a = getDataString(el, "data-ease")) != null ? _a : options.defaults.ease;
+    const exitDur = getDataNumber(el, "data-exit-dur", dur);
+    const exitDelay = getDataNumber(el, "data-exit-delay", delay);
+    const exitEase = (_b = getDataString(el, "data-exit-ease")) != null ? _b : ease;
+    const at = getDataString(el, "data-at");
+    items.push({ el, animName, seq, exitSeq, dur, delay, ease, exitDur, exitDelay, exitEase, at });
+  });
+  return items;
+}
+function groupBySequence(items, getSequence) {
+  const map = /* @__PURE__ */ new Map();
+  items.forEach((item) => {
+    var _a;
+    const sequence = getSequence(item);
+    const bucket = (_a = map.get(sequence)) != null ? _a : [];
+    bucket.push(item);
+    map.set(sequence, bucket);
+  });
+  return map;
+}
+function buildSlideEnterTimeline(slide, direction, options, gsapInstance) {
+  const tl = gsapInstance.timeline();
+  const items = collectAnimItems(slide, options);
+  if (!items.length) return tl;
+  const grouped = groupBySequence(items, (item) => item.seq);
+  const order = Array.from(grouped.keys()).sort((a, b) => a - b);
+  let cursor = 0;
+  order.forEach((seq) => {
+    const group = grouped.get(seq);
+    if (!group) return;
+    let groupMax = 0;
+    group.forEach((item) => {
+      var _a;
+      const factory = getAnimation(item.animName);
+      if (!factory) return;
+      const offset = (_a = parsePositionOffset(item.at)) != null ? _a : 0;
+      const position = cursor + offset;
+      factory({
+        el: item.el,
+        tl,
+        gsap: gsapInstance,
+        opts: {
+          dur: item.dur,
+          delay: item.delay,
+          ease: item.ease,
+          direction,
+          at: position
+        }
+      });
+      groupMax = Math.max(groupMax, offset + item.delay + item.dur);
+    });
+    cursor += Math.max(groupMax, 0);
+  });
+  return tl;
+}
+function buildSlideExitTimeline(slide, direction, options, gsapInstance) {
+  const tl = gsapInstance.timeline();
+  const items = collectAnimItems(slide, options);
+  if (!items.length) return tl;
+  const grouped = groupBySequence(items, (item) => item.exitSeq);
+  const order = Array.from(grouped.keys()).sort((a, b) => a - b);
+  let cursor = 0;
+  order.forEach((seq) => {
+    const group = grouped.get(seq);
+    if (!group) return;
+    let groupMax = 0;
+    group.forEach((item) => {
+      var _a;
+      const exitName = getDataString(item.el, "data-exit");
+      const factory = exitName ? getAnimation(exitName) : getAnimation(item.animName);
+      const reverseFactory = factory && "reverse" in factory ? factory.reverse : void 0;
+      const offset = (_a = parsePositionOffset(item.at)) != null ? _a : 0;
+      const position = cursor + offset;
+      let usedDuration = item.exitDur;
+      if (exitName && factory) {
+        factory({
+          el: item.el,
+          tl,
+          gsap: gsapInstance,
+          opts: {
+            dur: item.exitDur,
+            delay: item.exitDelay,
+            ease: item.exitEase,
+            direction,
+            at: position
+          }
+        });
+      } else if (!exitName && reverseFactory) {
+        reverseFactory({
+          el: item.el,
+          tl,
+          gsap: gsapInstance,
+          opts: {
+            dur: item.exitDur,
+            delay: item.exitDelay,
+            ease: item.exitEase,
+            direction,
+            at: position
+          }
+        });
+      } else {
+        tl.to(
+          item.el,
+          {
+            autoAlpha: 0,
+            duration: usedDuration,
+            delay: item.exitDelay,
+            ease: item.exitEase
+          },
+          position
+        );
+      }
+      groupMax = Math.max(groupMax, offset + item.exitDelay + usedDuration);
+    });
+    cursor += Math.max(groupMax, 0);
+  });
+  return tl;
+}
+
+// src/reducedMotion.ts
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || !("matchMedia" in window)) {
+    return false;
+  }
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+// src/carousel.ts
+var generatedDotSelector = '[data-carousel-dot="true"]';
+function createCarousel(rootInput, options = {}) {
+  var _a, _b, _c, _d;
+  ensureDefaultAnimationsRegistered();
+  const root = resolveRoot(rootInput);
+  const gsapInstance = (_a = options.gsap) != null ? _a : gsap;
+  ensureRootFocusable(root);
+  const ctx = gsapInstance.context(() => {
+  }, root);
+  const resolved = {
+    loop: (_b = options.loop) != null ? _b : defaultOptions.loop,
+    initialIndex: (_c = options.initialIndex) != null ? _c : defaultOptions.initialIndex,
+    transition: { ...defaultOptions.transition, ...options.transition },
+    selectors: { ...defaultSelectors, ...options.selectors },
+    classNames: { ...defaultClassNames, ...options.classNames },
+    defaults: { ...defaultOptions.defaults, ...options.defaults },
+    onInit: options.onInit,
+    onBeforeChange: options.onBeforeChange,
+    onAfterChange: options.onAfterChange
+  };
+  const slides = qsa(root, resolved.selectors.slide);
+  if (!slides.length) {
+    throw new Error("Carousel requires at least one slide element.");
+  }
+  const controls = resolveControls(root, resolved, slides.length);
+  const reducedMotion = prefersReducedMotion();
+  const state = { activeTimeline: null };
+  let currentIndex = normalizeIndex(resolved.initialIndex, slides.length, resolved.loop);
+  let animating = false;
+  setSlidesState(slides, currentIndex, resolved.classNames.activeSlide);
+  setAllDotsState(currentIndex);
+  const onPrevClick = (event) => {
+    event.preventDefault();
+    prev();
+  };
+  const onNextClick = (event) => {
+    event.preventDefault();
+    next();
+  };
+  const onDotsClick = (event) => {
+    var _a2;
+    const target = (_a2 = event.target) == null ? void 0 : _a2.closest(generatedDotSelector);
+    if (!target) return;
+    event.preventDefault();
+    const indexAttr = target.getAttribute("data-carousel-dot-index");
+    if (!indexAttr) return;
+    const index = Number.parseInt(indexAttr, 10);
+    if (!Number.isFinite(index)) return;
+    if (animating) return;
+    const nextIndex = normalizeIndex(index, slides.length, resolved.loop);
+    if (nextIndex === currentIndex) return;
+    setAllDotsState(nextIndex);
+    goTo(nextIndex);
+  };
+  controls.prev.forEach((control) => control.addEventListener("click", onPrevClick));
+  controls.next.forEach((control) => control.addEventListener("click", onNextClick));
+  controls.dotsContainers.forEach((container) => container.addEventListener("click", onDotsClick));
+  const instance = {
+    goTo,
+    next,
+    prev,
+    destroy,
+    getIndex: () => currentIndex,
+    getCount: () => slides.length,
+    isAnimating: () => animating
+  };
+  (_d = resolved.onInit) == null ? void 0 : _d.call(resolved, instance);
+  function disableControls(disabled) {
+    toggleClass(root, resolved.classNames.animatingRoot, disabled);
+    controls.prev.forEach((control) => {
+      setDisabled(control, disabled, resolved.classNames.disabledControl);
+    });
+    controls.next.forEach((control) => {
+      setDisabled(control, disabled, resolved.classNames.disabledControl);
+    });
+    controls.dotsContainers.forEach((container) => {
+      setAriaDisabled(container, disabled);
+    });
+    controls.dots.forEach((dotGroup) => {
+      dotGroup.forEach((dot) => {
+        setAriaDisabled(dot, disabled);
+        toggleClass(dot, resolved.classNames.disabledControl, disabled);
+      });
+    });
+  }
+  function setAllDotsState(activeIndex) {
+    controls.dots.forEach((dotGroup) => {
+      setDotsState(dotGroup, activeIndex, resolved.classNames.activeDot);
+    });
+  }
+  function applyActiveState(nextIndex) {
+    currentIndex = nextIndex;
+    setSlidesState(slides, currentIndex, resolved.classNames.activeSlide);
+    setAllDotsState(currentIndex);
+  }
+  function finalizeTransition(from, to, direction) {
+    var _a2;
+    animating = false;
+    disableControls(false);
+    state.activeTimeline = null;
+    (_a2 = resolved.onAfterChange) == null ? void 0 : _a2.call(resolved, { from, to, direction });
+  }
+  function transitionTo(nextIndex, immediate) {
+    var _a2, _b2;
+    if (animating) return;
+    if (nextIndex === currentIndex) return;
+    const from = currentIndex;
+    const to = nextIndex;
+    const direction = getDirection(from, to, slides.length, resolved.loop);
+    animating = true;
+    disableControls(true);
+    (_a2 = resolved.onBeforeChange) == null ? void 0 : _a2.call(resolved, { from, to, direction });
+    if (immediate || reducedMotion) {
+      applyActiveState(to);
+      finalizeTransition(from, to, direction);
+      return;
+    }
+    const exitTl = ctx.add(() => buildSlideExitTimeline(slides[from], direction, resolved, gsapInstance));
+    const enterTl = ctx.add(() => buildSlideEnterTimeline(slides[to], direction, resolved, gsapInstance));
+    const master = ctx.add(
+      () => gsapInstance.timeline({
+        onComplete: () => {
+          finalizeTransition(from, to, direction);
+        }
+      })
+    );
+    state.activeTimeline = master;
+    const overlap = Math.max(0, (_b2 = resolved.transition.exitOverlap) != null ? _b2 : resolved.transition.overlap);
+    const enterAt = Math.max(0, exitTl.duration() - overlap);
+    master.add(exitTl, 0);
+    master.add(() => applyActiveState(to), enterAt);
+    master.add(enterTl, enterAt);
+  }
+  function goTo(index, opts) {
+    if (animating) return;
+    const nextIndex = normalizeIndex(index, slides.length, resolved.loop);
+    if (nextIndex === currentIndex) return;
+    transitionTo(nextIndex, opts == null ? void 0 : opts.immediate);
+  }
+  function next(opts) {
+    if (animating) return;
+    const nextIndex = resolveNextIndex(currentIndex, slides.length, resolved.loop);
+    if (nextIndex === currentIndex) return;
+    setAllDotsState(nextIndex);
+    transitionTo(nextIndex, opts == null ? void 0 : opts.immediate);
+  }
+  function prev(opts) {
+    if (animating) return;
+    const nextIndex = resolvePrevIndex(currentIndex, slides.length, resolved.loop);
+    if (nextIndex === currentIndex) return;
+    setAllDotsState(nextIndex);
+    transitionTo(nextIndex, opts == null ? void 0 : opts.immediate);
+  }
+  function destroy() {
+    var _a2;
+    controls.prev.forEach((control) => control.removeEventListener("click", onPrevClick));
+    controls.next.forEach((control) => control.removeEventListener("click", onNextClick));
+    controls.dotsContainers.forEach((container) => container.removeEventListener("click", onDotsClick));
+    (_a2 = state.activeTimeline) == null ? void 0 : _a2.kill();
+    animating = false;
+    ctx.revert();
+    controls.dotsContainers.forEach((container) => {
+      container.querySelectorAll(generatedDotSelector).forEach((dot) => {
+        dot.remove();
+      });
+    });
+    controls.dotTemplates.forEach((template) => {
+      if (template) {
+        template.hidden = false;
+      }
+    });
+  }
+  return instance;
+}
+function resolveControls(root, options, slideCount) {
+  const rootId = root.getAttribute("id");
+  const queryAllWithFallback = (selector) => {
+    if (rootId) {
+      const scoped = Array.from(document.querySelectorAll(`${selector}[data-for="${rootId}"]`));
+      if (scoped.length) return scoped;
+    }
+    return qsa(root, selector);
+  };
+  const prev = queryAllWithFallback(options.selectors.prev);
+  const next = queryAllWithFallback(options.selectors.next);
+  const dotsContainers = queryAllWithFallback(options.selectors.dots);
+  const dotTemplates = [];
+  const dots = dotsContainers.map((container) => {
+    const template = qs(container, options.selectors.dotTemplate);
+    dotTemplates.push(template);
+    return setupDots(container, template, options, slideCount);
+  });
+  return { prev, next, dotsContainers, dotTemplates, dots };
+}
+function setupDots(container, template, options, slideCount) {
+  const dots = qsa(container, generatedDotSelector);
+  dots.forEach((dot) => dot.remove());
+  if (!template) return [];
+  const clones = [];
+  const disableOpacityAttr = template.getAttribute("data-carousel-disable-opacity");
+  for (let i = 0; i < slideCount; i += 1) {
+    const clone = template.cloneNode(true);
+    clone.removeAttribute("id");
+    clone.setAttribute("data-carousel-dot", "true");
+    clone.setAttribute("data-carousel-dot-index", String(i));
+    if (disableOpacityAttr !== null) {
+      clone.setAttribute("data-carousel-disable-opacity", disableOpacityAttr);
+    } else {
+      clone.removeAttribute("data-carousel-disable-opacity");
+    }
+    clone.setAttribute("aria-label", `Go to slide ${i + 1}`);
+    clone.classList.add(options.classNames.dot);
+    if (clone instanceof HTMLButtonElement && !clone.getAttribute("type")) {
+      clone.setAttribute("type", "button");
+    }
+    container.appendChild(clone);
+    clones.push(clone);
+  }
+  template.hidden = true;
+  return clones;
+}
+function normalizeIndex(index, count, loop) {
+  if (count <= 0) return 0;
+  if (loop) {
+    const wrapped = (index % count + count) % count;
+    return wrapped;
+  }
+  if (index < 0) return 0;
+  if (index >= count) return count - 1;
+  return index;
+}
+function resolveNextIndex(current, count, loop) {
+  if (count <= 0) return current;
+  if (current + 1 < count) return current + 1;
+  return loop ? 0 : current;
+}
+function resolvePrevIndex(current, count, loop) {
+  if (count <= 0) return current;
+  if (current - 1 >= 0) return current - 1;
+  return loop ? count - 1 : current;
+}
+function getDirection(from, to, count, loop) {
+  if (!loop) return to > from ? 1 : -1;
+  if (from === count - 1 && to === 0) return 1;
+  if (from === 0 && to === count - 1) return -1;
+  return to > from ? 1 : -1;
+}
+function registerGsapPlugins(...plugins) {
+  gsap.registerPlugin(...plugins);
+}
+
+export { createCarousel, registerAnimation, registerAnimations, registerGsapPlugins };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map