scroll-to-future 1.0.0

package/dist/index.mjs

@@ -0,0 +1,1770 @@
+"use client";
+
+// src/ScrollToFuture.tsx
+import { useRef as useRef3, useState as useState6 } from "react";
+
+// src/components/Axios/ScrollAxis.tsx
+import { useRef, useState } from "react";
+
+// src/utils/constants.ts
+var MIN_THUMB_SIZE = 24;
+var DEFAULT_TRACK_THICKNESS = 8;
+var MAX_THUMB_RATIO = 0.8;
+var EMPTY_AXIS_METRICS = {
+  scrollSize: 0,
+  clientSize: 0,
+  scrollPos: 0,
+  canScroll: false
+};
+
+// src/utils/helper.ts
+var clamp = (value, min, max) => Math.min(Math.max(value, min), Math.max(min, max));
+var parsePxValue = (value) => {
+  if (!value) return null;
+  const match = /^(-?\d+(?:\.\d+)?)px$/.exec(value.trim());
+  return match ? Number(match[1]) : null;
+};
+var parseBoundaryOffset = (value) => {
+  if (!value) {
+    return {
+      start: 0,
+      end: 0
+    };
+  }
+  const parts = value.trim().split(/\s+/);
+  const start = Math.max(0, parsePxValue(parts[0]) ?? 0);
+  const end = parts.length > 1 ? Math.max(0, parsePxValue(parts[1]) ?? 0) : start;
+  return {
+    start,
+    end
+  };
+};
+var fitInsetsWithinSize = (start, end, size, minInnerSize = 1) => {
+  const safeSize = Math.max(0, size);
+  if (safeSize <= 0) {
+    return {
+      start: 0,
+      end: 0,
+      innerSize: 0
+    };
+  }
+  const actualMinInnerSize = Math.min(Math.max(0, minInnerSize), safeSize);
+  const safeStart = Math.max(0, start);
+  const safeEnd = Math.max(0, end);
+  const requestedInsetsSize = safeStart + safeEnd;
+  const maximumInsetsSize = safeSize - actualMinInnerSize;
+  if (requestedInsetsSize <= maximumInsetsSize) {
+    return {
+      start: safeStart,
+      end: safeEnd,
+      innerSize: safeSize - safeStart - safeEnd
+    };
+  }
+  if (requestedInsetsSize <= 0) {
+    return {
+      start: 0,
+      end: 0,
+      innerSize: safeSize
+    };
+  }
+  const scale = maximumInsetsSize / requestedInsetsSize;
+  const fittedStart = safeStart * scale;
+  const fittedEnd = safeEnd * scale;
+  return {
+    start: fittedStart,
+    end: fittedEnd,
+    innerSize: Math.max(
+      actualMinInnerSize,
+      safeSize - fittedStart - fittedEnd
+    )
+  };
+};
+var resolveTrackLength = (value, containerSize) => {
+  if (!value) return containerSize;
+  const px = parsePxValue(value);
+  if (px !== null) return px;
+  const percentMatch = /^(-?\d+(?:\.\d+)?)%$/.exec(value);
+  if (percentMatch) return Number(percentMatch[1]) / 100 * containerSize;
+  const vhMatch = /^(-?\d+(?:\.\d+)?)vh$/.exec(value);
+  if (vhMatch) {
+    const vh = typeof window !== "undefined" ? window.innerHeight : containerSize;
+    return Number(vhMatch[1]) / 100 * vh;
+  }
+  const dvhMatch = /^(-?\d+(?:\.\d+)?)d(s)?vh$/.exec(value);
+  if (dvhMatch) {
+    const dvh = typeof window !== "undefined" ? window.visualViewport?.height ?? window.innerHeight : containerSize;
+    return Number(dvhMatch[1]) / 100 * dvh;
+  }
+  return containerSize;
+};
+var computeThumbSize = (trackLength, metrics, thumbHeightTrack) => {
+  if (trackLength <= 0) return 0;
+  const minSize = Math.min(MIN_THUMB_SIZE, trackLength);
+  const maxSize = Math.min(
+    trackLength,
+    Math.max(minSize, trackLength * MAX_THUMB_RATIO)
+  );
+  if (!thumbHeightTrack || thumbHeightTrack === "auto") {
+    const ratio = metrics.scrollSize > 0 ? metrics.clientSize / metrics.scrollSize : 1;
+    const autoSize = trackLength * clamp(ratio, 0, 1);
+    return clamp(autoSize, minSize, maxSize);
+  }
+  const px = parsePxValue(thumbHeightTrack);
+  if (px !== null) {
+    return clamp(px, minSize, maxSize);
+  }
+  const percentMatch = /^(-?\d+(?:\.\d+)?)%$/.exec(thumbHeightTrack.trim());
+  if (percentMatch) {
+    const size = Number(percentMatch[1]) / 100 * trackLength;
+    return clamp(size, minSize, maxSize);
+  }
+  return maxSize;
+};
+var computeThumbPosition = (trackLength, thumbSize, metrics) => {
+  const maxScroll = metrics.scrollSize - metrics.clientSize;
+  const maxThumbTravel = trackLength - thumbSize;
+  if (maxScroll <= 0 || maxThumbTravel <= 0) return 0;
+  const ratio = clamp(metrics.scrollPos / maxScroll, 0, 1);
+  return ratio * maxThumbTravel;
+};
+var trackPositionToScroll = (trackPos, trackLength, thumbSize, metrics) => {
+  const maxScroll = metrics.scrollSize - metrics.clientSize;
+  const maxThumbTravel = trackLength - thumbSize;
+  if (maxScroll <= 0 || maxThumbTravel <= 0) return 0;
+  const ratio = clamp(trackPos / maxThumbTravel, 0, 1);
+  return ratio * maxScroll;
+};
+var computeReservedSpace = (boundaryOffset, trackThicknessPx, superimposition) => {
+  if (superimposition !== "after") {
+    return 0;
+  }
+  const { start, end } = parseBoundaryOffset(boundaryOffset);
+  return start + trackThicknessPx + end;
+};
+var isPageScrollTarget = (el) => typeof document !== "undefined" && (el === document.body || el === document.documentElement);
+
+// src/components/Axios/ScrollAxis.tsx
+import { jsx } from "react/jsx-runtime";
+var ScrollAxis = ({
+  axis,
+  target,
+  metrics,
+  scrollBar,
+  thumb,
+  positionMode,
+  superimposition,
+  hasCrossAxis,
+  vars
+}) => {
+  const trackRef = useRef(null);
+  const dragState = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const requestedTrackThickness = parsePxValue(scrollBar.widthTrack) ?? DEFAULT_TRACK_THICKNESS;
+  const trackThickness = Math.max(1, requestedTrackThickness);
+  const trackBoundary = parseBoundaryOffset(scrollBar.boundaryOffset);
+  const thumbBoundary = parseBoundaryOffset(thumb.boundaryOffset);
+  const requestedCrossAxisOccupation = trackBoundary.start + trackThickness + trackBoundary.end;
+  const maximumCrossAxisOccupation = Math.max(0, metrics.clientSize - 1);
+  const crossAxisOccupation = hasCrossAxis ? clamp(requestedCrossAxisOccupation, 0, maximumCrossAxisOccupation) : 0;
+  const availableMainStart = hasCrossAxis && positionMode === "before" ? crossAxisOccupation : 0;
+  const availableMainSize = Math.max(
+    0,
+    metrics.clientSize - crossAxisOccupation
+  );
+  const trackCenter = availableMainStart + availableMainSize / 2;
+  const requestedTrackLength = resolveTrackLength(
+    scrollBar.heightTrack,
+    metrics.clientSize
+  );
+  const trackLength = availableMainSize > 0 ? clamp(requestedTrackLength, 1, availableMainSize) : 0;
+  const fittedThumbMainInsets = fitInsetsWithinSize(
+    thumbBoundary.start,
+    thumbBoundary.end,
+    trackLength,
+    1
+  );
+  const thumbMainStart = fittedThumbMainInsets.start;
+  const innerTrackLength = fittedThumbMainInsets.innerSize;
+  const requestedThumbCrossSize = trackThickness - thumbBoundary.start - thumbBoundary.end;
+  const thumbCrossSize = clamp(requestedThumbCrossSize, 1, trackThickness);
+  const thumbSize = computeThumbSize(
+    innerTrackLength,
+    metrics,
+    thumb.heightTrack
+  );
+  const thumbPositionInsideTrack = computeThumbPosition(
+    innerTrackLength,
+    thumbSize,
+    metrics
+  );
+  const thumbPosition = thumbMainStart + thumbPositionInsideTrack;
+  const maxScroll = Math.max(0, metrics.scrollSize - metrics.clientSize);
+  const maxThumbTravel = Math.max(0, innerTrackLength - thumbSize);
+  const setScrollPosition = (value) => {
+    const targetElement = target;
+    if (!targetElement) return;
+    const nextValue = clamp(value, 0, Math.max(0, maxScroll));
+    if (!isPageScrollTarget(targetElement)) {
+      if (axis === "x") {
+        targetElement.scrollLeft = nextValue;
+      } else {
+        targetElement.scrollTop = nextValue;
+      }
+      return;
+    }
+    const targetStyle = window.getComputedStyle(targetElement);
+    const overflowValue = axis === "x" ? targetStyle.overflowX : targetStyle.overflowY;
+    const targetCanScroll = axis === "x" ? targetElement.scrollWidth - targetElement.clientWidth > 1 : targetElement.scrollHeight - targetElement.clientHeight > 1;
+    const targetOwnsScroll = targetCanScroll && /^(auto|scroll|overlay)$/.test(overflowValue);
+    if (targetOwnsScroll) {
+      if (axis === "x") {
+        targetElement.scrollLeft = nextValue;
+      } else {
+        targetElement.scrollTop = nextValue;
+      }
+      return;
+    }
+    window.scrollTo({
+      left: axis === "x" ? nextValue : window.scrollX,
+      top: axis === "y" ? nextValue : window.scrollY,
+      behavior: "auto"
+    });
+  };
+  const handleThumbPointerDown = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    dragState.current = {
+      startPointer: axis === "x" ? event.clientX : event.clientY,
+      startScroll: metrics.scrollPos
+    };
+    setIsDragging(true);
+    event.currentTarget.setPointerCapture(event.pointerId);
+  };
+  const handleThumbPointerMove = (event) => {
+    const currentDragState = dragState.current;
+    if (!currentDragState) return;
+    if (maxScroll <= 0 || maxThumbTravel <= 0) return;
+    const pointerPosition = axis === "x" ? event.clientX : event.clientY;
+    const pointerDelta = pointerPosition - currentDragState.startPointer;
+    const scrollDelta = pointerDelta / maxThumbTravel * maxScroll;
+    setScrollPosition(currentDragState.startScroll + scrollDelta);
+  };
+  const stopDrag = (event) => {
+    if (!dragState.current) return;
+    dragState.current = null;
+    setIsDragging(false);
+    try {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    } catch {
+    }
+  };
+  const handleTrackPointerDown = (event) => {
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+    const trackElement = trackRef.current;
+    if (!trackElement) return;
+    if (maxThumbTravel <= 0) return;
+    const rect = trackElement.getBoundingClientRect();
+    const clickPosition = axis === "x" ? event.clientX - rect.left : event.clientY - rect.top;
+    const clickInsideInnerTrack = clickPosition - thumbMainStart;
+    const targetThumbStart = clamp(
+      clickInsideInnerTrack - thumbSize / 2,
+      0,
+      maxThumbTravel
+    );
+    const nextScroll = trackPositionToScroll(
+      targetThumbStart,
+      innerTrackLength,
+      thumbSize,
+      metrics
+    );
+    setScrollPosition(nextScroll);
+  };
+  if (!metrics.canScroll || metrics.clientSize <= 0 || trackLength < 1 || innerTrackLength < 1 || thumbSize < 1) {
+    return null;
+  }
+  const trackStyle = axis === "y" ? {
+    position: "absolute",
+    top: trackCenter,
+    transform: "translateY(-50%)",
+    width: trackThickness,
+    height: trackLength,
+    ...positionMode === "before" ? {
+      left: trackBoundary.start
+    } : {
+      right: trackBoundary.end
+    },
+    pointerEvents: "auto"
+  } : {
+    position: "absolute",
+    left: trackCenter,
+    transform: "translateX(-50%)",
+    width: trackLength,
+    height: trackThickness,
+    ...positionMode === "before" ? {
+      top: trackBoundary.start
+    } : {
+      bottom: trackBoundary.end
+    },
+    pointerEvents: "auto"
+  };
+  const thumbStyle = axis === "y" ? {
+    top: thumbPosition,
+    height: thumbSize,
+    //* horizontal center
+    left: "50%",
+    width: thumbCrossSize,
+    transform: "translateX(-50%)"
+  } : {
+    left: thumbPosition,
+    width: thumbSize,
+    //* vertical center
+    top: "50%",
+    height: thumbCrossSize,
+    transform: "translateY(-50%)"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: trackRef,
+      className: "scroll-to-future__track",
+      style: { ...trackStyle, ...vars },
+      onPointerDown: handleTrackPointerDown,
+      "data-axis": axis,
+      "data-superimposition": superimposition,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `scroll-to-future__thumb ${isDragging ? "scroll-to-future__thumb--dragging" : ""}`.trim(),
+          style: thumbStyle,
+          onPointerDown: handleThumbPointerDown,
+          onPointerMove: handleThumbPointerMove,
+          onPointerUp: stopDrag,
+          onPointerCancel: stopDrag
+        }
+      )
+    }
+  );
+};
+
+// src/hooks/useElementScrollObserver.ts
+import { useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
+
+// src/hooks/useRefReady.ts
+import { useEffect, useState as useState2 } from "react";
+var useRefReady = (target) => {
+  const [tick, setTick] = useState2(0);
+  useEffect(() => {
+    if (target) return;
+    let rafId;
+    const check = () => {
+      if (target) {
+        setTick((t) => t + 1);
+      } else {
+        rafId = requestAnimationFrame(check);
+      }
+    };
+    rafId = requestAnimationFrame(check);
+    return () => cancelAnimationFrame(rafId);
+  }, [target]);
+  return tick;
+};
+
+// src/hooks/useElementScrollObserver.ts
+var isSameAxisMetrics = (previous, next) => previous.scrollSize === next.scrollSize && previous.clientSize === next.clientSize && previous.scrollPos === next.scrollPos && previous.canScroll === next.canScroll;
+var getActualScrollPosition = (...values) => values.reduce((current, value) => {
+  return Math.abs(value) > Math.abs(current) ? value : current;
+}, 0);
+var useElementScrollObserver = (target) => {
+  const [metrics, setMetrics] = useState3({
+    x: EMPTY_AXIS_METRICS,
+    y: EMPTY_AXIS_METRICS
+  });
+  const rafRef = useRef2(null);
+  const ready = useRefReady(target);
+  useEffect2(() => {
+    const targetElement = target;
+    if (!targetElement) {
+      setMetrics({
+        x: EMPTY_AXIS_METRICS,
+        y: EMPTY_AXIS_METRICS
+      });
+      return;
+    }
+    const pageScroll = isPageScrollTarget(targetElement);
+    const measure = () => {
+      let nextX;
+      let nextY;
+      if (pageScroll) {
+        const root = document.documentElement;
+        const body = document.body;
+        const scrollingElement = document.scrollingElement;
+        const scrollWidth = Math.max(
+          root.scrollWidth,
+          body.scrollWidth,
+          scrollingElement?.scrollWidth ?? 0,
+          targetElement.scrollWidth
+        );
+        const scrollHeight = Math.max(
+          root.scrollHeight,
+          body.scrollHeight,
+          scrollingElement?.scrollHeight ?? 0,
+          targetElement.scrollHeight
+        );
+        const clientWidth = window.visualViewport?.width ?? window.innerWidth;
+        const clientHeight = window.visualViewport?.height ?? window.innerHeight;
+        const scrollLeft = getActualScrollPosition(
+          window.scrollX,
+          root.scrollLeft,
+          body.scrollLeft,
+          scrollingElement?.scrollLeft ?? 0,
+          targetElement.scrollLeft
+        );
+        const scrollTop = getActualScrollPosition(
+          window.scrollY,
+          root.scrollTop,
+          body.scrollTop,
+          scrollingElement?.scrollTop ?? 0,
+          targetElement.scrollTop
+        );
+        nextX = {
+          scrollSize: scrollWidth,
+          clientSize: clientWidth,
+          scrollPos: scrollLeft,
+          canScroll: scrollWidth - clientWidth > 1
+        };
+        nextY = {
+          scrollSize: scrollHeight,
+          clientSize: clientHeight,
+          scrollPos: scrollTop,
+          canScroll: scrollHeight - clientHeight > 1
+        };
+      } else {
+        nextX = {
+          scrollSize: targetElement.scrollWidth,
+          clientSize: targetElement.clientWidth,
+          scrollPos: targetElement.scrollLeft,
+          canScroll: targetElement.scrollWidth - targetElement.clientWidth > 1
+        };
+        nextY = {
+          scrollSize: targetElement.scrollHeight,
+          clientSize: targetElement.clientHeight,
+          scrollPos: targetElement.scrollTop,
+          canScroll: targetElement.scrollHeight - targetElement.clientHeight > 1
+        };
+      }
+      setMetrics((previous) => {
+        const sameX = isSameAxisMetrics(previous.x, nextX);
+        const sameY = isSameAxisMetrics(previous.y, nextY);
+        if (sameX && sameY) {
+          return previous;
+        }
+        return {
+          x: nextX,
+          y: nextY
+        };
+      });
+    };
+    const scheduleMeasure = () => {
+      if (rafRef.current !== null) return;
+      rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = null;
+        measure();
+      });
+    };
+    measure();
+    const resizeObserver = new ResizeObserver(scheduleMeasure);
+    if (pageScroll) {
+      resizeObserver.observe(document.documentElement);
+      resizeObserver.observe(document.body);
+      if (targetElement !== document.documentElement && targetElement !== document.body) {
+        resizeObserver.observe(targetElement);
+      }
+    } else {
+      resizeObserver.observe(targetElement);
+      Array.from(targetElement.children).forEach((child) => {
+        resizeObserver.observe(child);
+      });
+    }
+    const mutationRoot = pageScroll ? document.documentElement : targetElement;
+    const mutationObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type !== "childList") continue;
+        mutation.addedNodes.forEach((node) => {
+          if (!(node instanceof Element)) return;
+          try {
+            resizeObserver.observe(node);
+          } catch {
+          }
+        });
+      }
+      scheduleMeasure();
+    });
+    mutationObserver.observe(mutationRoot, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["style", "class", "hidden"]
+    });
+    window.addEventListener("scroll", scheduleMeasure, {
+      capture: true,
+      passive: true
+    });
+    targetElement.addEventListener("scroll", scheduleMeasure, {
+      passive: true
+    });
+    window.addEventListener("resize", scheduleMeasure);
+    window.visualViewport?.addEventListener("resize", scheduleMeasure);
+    window.visualViewport?.addEventListener("scroll", scheduleMeasure);
+    return () => {
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+      window.removeEventListener("scroll", scheduleMeasure, true);
+      targetElement.removeEventListener("scroll", scheduleMeasure);
+      window.removeEventListener("resize", scheduleMeasure);
+      window.visualViewport?.removeEventListener(
+        "resize",
+        scheduleMeasure
+      );
+      window.visualViewport?.removeEventListener(
+        "scroll",
+        scheduleMeasure
+      );
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, [target, ready]);
+  return metrics;
+};
+
+// src/hooks/useFuture.ts
+import { useEffect as useEffect3 } from "react";
+
+// src/utils/native-scrollbar.ts
+var STYLE_ID = "scroll-to-future-native-scrollbar-styles";
+var ALWAYS_CLASS = "scroll-to-future-hide-native-scrollbar";
+var FINE_POINTER_CLASS = "scroll-to-future-hide-native-scrollbar-fine";
+var classCounters = /* @__PURE__ */ new WeakMap();
+var installStyles = () => {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) {
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = `
+        .${ALWAYS_CLASS} {
+            scrollbar-width: none !important;
+            -ms-overflow-style: none !important;
+        }
+
+        .${ALWAYS_CLASS}::-webkit-scrollbar {
+            display: none !important;
+            width: 0 !important;
+            height: 0 !important;
+            background: transparent !important;
+        }
+
+        @media (any-pointer: fine) {
+            .${FINE_POINTER_CLASS} {
+                scrollbar-width: none !important;
+                -ms-overflow-style: none !important;
+            }
+
+            .${FINE_POINTER_CLASS}::-webkit-scrollbar {
+                display: none !important;
+                width: 0 !important;
+                height: 0 !important;
+                background: transparent !important;
+            }
+        }
+    `;
+  document.head.appendChild(style);
+};
+var retainClass = (element, className) => {
+  let elementCounters = classCounters.get(element);
+  if (!elementCounters) {
+    elementCounters = /* @__PURE__ */ new Map();
+    classCounters.set(element, elementCounters);
+  }
+  const currentCount = elementCounters.get(className) ?? 0;
+  elementCounters.set(className, currentCount + 1);
+  if (currentCount === 0) {
+    element.classList.add(className);
+  }
+  return () => {
+    const counters = classCounters.get(element);
+    if (!counters) return;
+    const count = counters.get(className) ?? 0;
+    if (count <= 1) {
+      counters.delete(className);
+      element.classList.remove(className);
+    } else {
+      counters.set(className, count - 1);
+    }
+    if (counters.size === 0) {
+      classCounters.delete(element);
+    }
+  };
+};
+var isDocumentScrollTarget = (target) => {
+  if (typeof document === "undefined") {
+    return false;
+  }
+  return target === document.body || target === document.documentElement || target === document.scrollingElement;
+};
+var resolveStyleTargets = (target) => {
+  if (!isDocumentScrollTarget(target)) {
+    return [target];
+  }
+  const targets = /* @__PURE__ */ new Set();
+  targets.add(document.documentElement);
+  if (document.body) {
+    targets.add(document.body);
+  }
+  const scrollingElement = document.scrollingElement;
+  if (scrollingElement instanceof HTMLElement) {
+    targets.add(scrollingElement);
+  }
+  return Array.from(targets);
+};
+var isMobileInputDevice = () => {
+  if (typeof window === "undefined" || typeof navigator === "undefined") {
+    return false;
+  }
+  const coarsePointer = window.matchMedia("(pointer: coarse)").matches;
+  const cannotHover = window.matchMedia("(hover: none)").matches;
+  const hasTouch = navigator.maxTouchPoints > 0;
+  return hasTouch && coarsePointer && cannotHover;
+};
+var hideNativeScrollbar = (target, mode, nativeOnMobile) => {
+  if (typeof window === "undefined" || typeof document === "undefined" || mode === false) {
+    return () => {
+    };
+  }
+  if (nativeOnMobile && isMobileInputDevice()) {
+    return () => {
+    };
+  }
+  installStyles();
+  const className = mode === "always" ? ALWAYS_CLASS : FINE_POINTER_CLASS;
+  const targets = resolveStyleTargets(target);
+  const cleanups = targets.map((element) => retainClass(element, className));
+  return () => {
+    cleanups.forEach((cleanup) => {
+      cleanup();
+    });
+  };
+};
+
+// src/hooks/useFuture.ts
+var useFuture = ({
+  target,
+  anchorRef,
+  targetRef,
+  setFindedTarget,
+  mounted,
+  config,
+  showY,
+  showX,
+  superimposition,
+  findedTarget,
+  positionMode,
+  coversAllScrollableAxes,
+  nativeOnMobile
+}) => {
+  useEffect3(() => {
+    if (!mounted) return;
+    let rafId = null;
+    const resolveTarget = () => {
+      const nextTarget = target ? target.current : anchorRef.current?.parentElement ?? null;
+      if (nextTarget) {
+        targetRef.current = nextTarget;
+        setFindedTarget(
+          (previousTarget) => previousTarget === nextTarget ? previousTarget : nextTarget
+        );
+        return;
+      }
+      rafId = requestAnimationFrame(resolveTarget);
+    };
+    resolveTarget();
+    return () => {
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+      }
+    };
+  }, [mounted, target]);
+  useEffect3(() => {
+    const el = targetRef.current;
+    if (!el) return;
+    const trackThickness = parsePxValue(config.scrollBar?.widthTrack) ?? DEFAULT_TRACK_THICKNESS;
+    const reservedY = showY ? computeReservedSpace(
+      config.scrollBar?.boundaryOffset,
+      trackThickness,
+      superimposition
+    ) : 0;
+    const reservedX = showX ? computeReservedSpace(
+      config.scrollBar?.boundaryOffset,
+      trackThickness,
+      superimposition
+    ) : 0;
+    const previousInlinePadding = {
+      left: el.style.paddingLeft,
+      right: el.style.paddingRight,
+      top: el.style.paddingTop,
+      bottom: el.style.paddingBottom
+    };
+    const computedStyle = window.getComputedStyle(el);
+    const basePadding = {
+      left: Number.parseFloat(computedStyle.paddingLeft) || 0,
+      right: Number.parseFloat(computedStyle.paddingRight) || 0,
+      top: Number.parseFloat(computedStyle.paddingTop) || 0,
+      bottom: Number.parseFloat(computedStyle.paddingBottom) || 0
+    };
+    if (reservedY > 0) {
+      if (positionMode === "before") {
+        el.style.paddingLeft = `${basePadding.left + reservedY}px`;
+      } else {
+        el.style.paddingRight = `${basePadding.right + reservedY}px`;
+      }
+    }
+    if (reservedX > 0) {
+      if (positionMode === "before") {
+        el.style.paddingTop = `${basePadding.top + reservedX}px`;
+      } else {
+        el.style.paddingBottom = `${basePadding.bottom + reservedX}px`;
+      }
+    }
+    return () => {
+      el.style.paddingLeft = previousInlinePadding.left;
+      el.style.paddingRight = previousInlinePadding.right;
+      el.style.paddingTop = previousInlinePadding.top;
+      el.style.paddingBottom = previousInlinePadding.bottom;
+    };
+  }, [
+    findedTarget,
+    showX,
+    showY,
+    positionMode,
+    superimposition,
+    config.scrollBar?.boundaryOffset,
+    config.scrollBar?.widthTrack
+  ]);
+  useEffect3(() => {
+    if (!findedTarget) return;
+    const mode = config.scrollBar?.hideNativeScrollbar ?? false;
+    console.log("native scrollbar effect:", {
+      mode,
+      nativeOnMobile,
+      coversAllScrollableAxes,
+      target: findedTarget
+    });
+    if (mode === false || !coversAllScrollableAxes) {
+      return;
+    }
+    return hideNativeScrollbar(findedTarget, mode, nativeOnMobile);
+  }, [
+    findedTarget,
+    coversAllScrollableAxes,
+    nativeOnMobile,
+    config.scrollBar?.hideNativeScrollbar
+  ]);
+};
+
+// src/hooks/useMounted.tsx
+import { useEffect as useEffect4, useState as useState4 } from "react";
+function useMounted() {
+  const [mounted, setMounted] = useState4(false);
+  useEffect4(() => {
+    if (mounted) return;
+    setMounted(true);
+  }, []);
+  return mounted;
+}
+
+// src/hooks/useTargetRect.ts
+import { useEffect as useEffect5, useState as useState5 } from "react";
+var EMPTY_RECT = { top: 0, left: 0, width: 0, height: 0 };
+var useTargetRect = (target) => {
+  const [rect, setRect] = useState5(EMPTY_RECT);
+  const ready = useRefReady(target);
+  useEffect5(() => {
+    const el = target;
+    if (!el) {
+      setRect(EMPTY_RECT);
+      return;
+    }
+    let rafId = null;
+    const pageScroll = isPageScrollTarget(el);
+    const measure = () => {
+      const r = pageScroll ? {
+        top: 0,
+        left: 0,
+        width: window.innerWidth,
+        height: window.innerHeight
+      } : el.getBoundingClientRect();
+      setRect((prev) => {
+        if (prev.top === r.top && prev.left === r.left && prev.width === r.width && prev.height === r.height) {
+          return prev;
+        }
+        return {
+          top: r.top,
+          left: r.left,
+          width: r.width,
+          height: r.height
+        };
+      });
+    };
+    const scheduleMeasure = () => {
+      if (rafId != null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        measure();
+      });
+    };
+    measure();
+    const resizeObserver = new ResizeObserver(scheduleMeasure);
+    resizeObserver.observe(el);
+    window.addEventListener("scroll", scheduleMeasure, {
+      capture: true,
+      passive: true
+    });
+    window.addEventListener("resize", scheduleMeasure);
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("scroll", scheduleMeasure, true);
+      window.removeEventListener("resize", scheduleMeasure);
+      if (rafId != null) cancelAnimationFrame(rafId);
+    };
+  }, [target, ready]);
+  return rect;
+};
+
+// src/themes/collection.theme.ts
+var primary = {
+  scrollBar: {
+    inactive: {
+      backgroundColor: "rgba(0, 0, 0, 0.15)",
+      borderRadius: "8px",
+      transition: "background-color 0.3s ease"
+    },
+    hover: {
+      backgroundColor: "rgba(0, 0, 0, 0.25)"
+    },
+    active: {
+      backgroundColor: "rgba(0, 0, 0, 0.35)",
+      transition: "background-color 0.15s ease"
+    }
+  },
+  thumb: {
+    inactive: {
+      backgroundColor: "rgba(255, 255, 255, 0.35)",
+      borderRadius: "8px"
+    },
+    hover: {
+      backgroundColor: "rgba(255, 255, 255, 0.55)",
+      transform: "scale(1)",
+      transition: "background-color 0s ease, transform 0s ease"
+    },
+    active: {
+      backgroundColor: "rgba(255, 255, 255, 0.75)",
+      transform: "scale(1.1)",
+      transition: "background-color 0.15s ease, transform 0.15s ease"
+    }
+  }
+};
+var midnight = {
+  scrollBar: {
+    inactive: {
+      backgroundColor: "rgba(15, 23, 42, 0.55)",
+      borderRadius: "8px",
+      transition: "background-color 0.3s ease"
+    },
+    hover: {
+      backgroundColor: "rgba(30, 41, 59, 0.72)"
+    },
+    active: {
+      backgroundColor: "rgba(51, 65, 85, 0.88)",
+      transition: "background-color 0.15s ease"
+    }
+  },
+  thumb: {
+    inactive: {
+      backgroundColor: "rgba(148, 163, 184, 0.55)",
+      borderRadius: "8px"
+    },
+    hover: {
+      backgroundColor: "rgba(203, 213, 225, 0.78)",
+      transform: "scale(1)",
+      transition: "background-color 0s ease, transform 0s ease"
+    },
+    active: {
+      backgroundColor: "rgba(241, 245, 249, 0.96)",
+      transform: "scale(1.1)",
+      transition: "background-color 0.15s ease, transform 0.15s ease"
+    }
+  }
+};
+var neonCyan = {
+  scrollBar: {
+    inactive: {
+      backgroundColor: "rgba(6, 78, 89, 0.35)",
+      borderRadius: "4px",
+      transition: "background-color 0.25s ease"
+    },
+    hover: {
+      backgroundColor: "rgba(8, 145, 178, 0.48)"
+    },
+    active: {
+      backgroundColor: "rgba(14, 116, 144, 0.68)",
+      transition: "background-color 0.12s ease"
+    }
+  },
+  thumb: {
+    inactive: {
+      backgroundColor: "rgba(34, 211, 238, 0.58)",
+      borderRadius: "3px"
+    },
+    hover: {
+      backgroundColor: "rgba(103, 232, 249, 0.85)",
+      transform: "scale(1.02)",
+      transition: "background-color 0.15s ease, transform 0.15s ease"
+    },
+    active: {
+      backgroundColor: "rgba(207, 250, 254, 1)",
+      transform: "scale(1.12)",
+      transition: "background-color 0.12s ease, transform 0.12s ease"
+    }
+  }
+};
+var ocean = {
+  scrollBar: {
+    inactive: {
+      backgroundColor: "rgba(7, 89, 133, 0.22)",
+      borderRadius: "999px",
+      transition: "background-color 0.35s ease"
+    },
+    hover: {
+      backgroundColor: "rgba(3, 105, 161, 0.35)"
+    },
+    active: {
+      backgroundColor: "rgba(2, 132, 199, 0.5)",
+      transition: "background-color 0.18s ease"
+    }
+  },
+  thumb: {
+    inactive: {
+      backgroundColor: "rgba(14, 165, 233, 0.58)",
+      borderRadius: "999px"
+    },
+    hover: {
+      backgroundColor: "rgba(56, 189, 248, 0.82)",
+      transform: "scale(1)",
+      transition: "background-color 0.2s ease"
+    },
+    active: {
+      backgroundColor: "rgba(186, 230, 253, 0.98)",
+      transform: "scale(1.08)",
+      transition: "background-color 0.14s ease, transform 0.14s ease"
+    }
+  }
+};
+var deepSea = {
+  scrollBar: {
+    inactive: {
+      backgroundColor: "rgba(2, 44, 55, 0.62)",
+      borderRadius: "999px",
+      transition: "background-color 0.3s ease"
+    },
+    hover: {
+      backgroundColor: "rgba(6, 78, 89, 0.78)"
+    },
+    active: {
+      backgroundColor: "rgba(14, 116, 144, 0.9)",
+      transition: "background-color 0.15s ease"
+    }
+  },
+  thumb: {
+    inactive: {
+      backgroundColor: "rgba(8, 145, 178, 0.62)",
+      borderRadius: "999px"
+    },
+    hover: {
+      backgroundColor: "rgba(34, 211, 238, 0.82)",
+      transform: "scale(1.03)",
+      transition: "background-color 0.18s ease, transform 0.18s ease"
+    },
+    active: {
+      backgroundColor: "rgba(165, 243, 252, 0.98)",
+      transform: "scale(1.12)",
+      transition: "background-color 0.12s ease, transform 0.12s ease"
+    }
+  }
+};
+var forest = {
+  scrollBar: {
+    inactive: {
+      backgroundColor: "rgba(20, 83, 45, 0.25)",
+      borderRadius: "999px",
+      transition: "background-color 0.3s ease"
+    },
+    hover: {
+      backgroundColor: "rgba(21, 128, 61, 0.38)"
+    },
+    active: {
+      backgroundColor: "rgba(22, 163, 74, 0.52)",
+      transition: "background-color 0.15s ease"
+    }
+  },
+  thumb: {
+    inactive: {
+      backgroundColor: "rgba(34, 197, 94, 0.55)",
+      borderRadius: "999px"
+    },
+    hover: {
+      backgroundColor: "rgba(74, 222, 128, 0.8)",
+      transform: "scale(1)",
+      transition: "background-color 0.2s ease"
+    },
+    active: {
+      backgroundColor: "rgba(187, 247, 208, 0.98)",
+      transform: "scale(1.1)",
+      transition: "background-color 0.15s ease, transform 0.15s ease"
+    }
+  }
+};
+var moss = {
+  scrollBar: {
+    inactive: {
+      backgroundColor: "rgba(54, 83, 20, 0.28)",
+      borderRadius: "6px",
+      transition: "background-color 0.3s ease"
+    },
+    hover: {
+      backgroundColor: "rgba(63, 98, 18, 0.42)"
+    },
+    active: {
+      backgroundColor: "rgba(77, 124, 15, 0.58)",
+      transition: "background-color 0.14s ease"
+    }
+  },
+  thumb: {
+    inactive: {
+      backgroundColor: "rgba(132, 204, 22, 0.55)",
+      borderRadius: "5px"
+    },
+    hover: {
+      backgroundColor: "rgba(163, 230, 53, 0.8)",
+      transform: "scale(1.02)",
+      transition: "background-color 0.18s ease, transform 0.18s ease"
+    },
+    active: {
+      backgroundColor: "rgba(217, 249, 157, 0.98)",
+      transform: "scale(1.1)",
+      transition: "background-color 0.12s ease, transform 0.12s ease"
+    }
+  }
+};
+var lava = {
+  scrollBar: {
+    inactive: {
+      backgroundColor: "rgba(69, 10, 10, 0.45)",
+      borderRadius: "999px",
+      transition: "background-color 0.22s ease"
+    },
+    hover: {
+      backgroundColor: "rgba(127, 29, 29, 0.62)"
+    },
+    active: {
+      backgroundColor: "rgba(153, 27, 27, 0.78)",
+      transition: "background-color 0.1s ease"
+    }
+  },
+  thumb: {
+    inactive: {
+      backgroundColor: "rgba(239, 68, 68, 0.62)",
+      borderRadius: "999px"
+    },
+    hover: {
+      backgroundColor: "rgba(249, 115, 22, 0.88)",
+      transform: "scale(1.03)",
+      transition: "background-color 0.16s ease, transform 0.16s ease"
+    },
+    active: {
+      backgroundColor: "rgba(253, 186, 116, 1)",
+      transform: "scale(1.14)",
+      transition: "background-color 0.1s ease, transform 0.1s ease"
+    }
+  }
+};
+var ember = {
+  scrollBar: {
+    inactive: {
+      backgroundColor: "rgba(67, 20, 7, 0.32)",
+      borderRadius: "5px",
+      transition: "background-color 0.25s ease"
+    },
+    hover: {
+      backgroundColor: "rgba(124, 45, 18, 0.48)"
+    },
+    active: {
+      backgroundColor: "rgba(154, 52, 18, 0.65)",
+      transition: "background-color 0.12s ease"
+    }
+  },
+  thumb: {
+    inactive: {
+      backgroundColor: "rgba(234, 88, 12, 0.6)",
+      borderRadius: "4px"
+    },
+    hover: {
+      backgroundColor: "rgba(251, 146, 60, 0.86)",
+      transform: "scale(1)",
+      transition: "background-color 0.18s ease"
+    },
+    active: {
+      backgroundColor: "rgba(254, 215, 170, 0.98)",
+      transform: "scale(1.1)",
+      transition: "background-color 0.12s ease, transform 0.12s ease"
+    }
+  }
+};
+var gold = {
+  scrollBar: {
+    inactive: {
+      backgroundColor: "rgba(113, 63, 18, 0.25)",
+      borderRadius: "999px",
+      transition: "background-color 0.3s ease"
+    },
+    hover: {
+      backgroundColor: "rgba(161, 98, 7, 0.4)"
+    },
+    active: {
+      backgroundColor: "rgba(202, 138, 4, 0.55)",
+      transition: "background-color 0.15s ease"
+    }
+  },
+  thumb: {
+    inactive: {
+      backgroundColor: "rgba(234, 179, 8, 0.62)",
+      borderRadius: "999px"
+    },
+    hover: {
+      backgroundColor: "rgba(250, 204, 21, 0.85)",
+      transform: "scale(1.02)",
+      transition: "background-color 0.2s ease, transform 0.2s ease"
+    },
+    active: {
+      backgroundColor: "rgba(254, 240, 138, 1)",
+      transform: "scale(1.1)",
+      transition: "background-color 0.14s ease, transform 0.14s ease"
+    }
+  }
+};
+var roseQuartz = {
+  scrollBar: {
+    inactive: {
+      backgroundColor: "rgba(136, 19, 55, 0.18)",
+      borderRadius: "999px",
+      transition: "background-color 0.32s ease"
+    },
+    hover: {
+      backgroundColor: "rgba(190, 24, 93, 0.28)"
+    },
+    active: {
+      backgroundColor: "rgba(219, 39, 119, 0.4)",
+      transition: "background-color 0.16s ease"
+    }
+  },
+  thumb: {
+    inactive: {
+      backgroundColor: "rgba(251, 113, 133, 0.58)",
+      borderRadius: "999px"
+    },
+    hover: {
+      backgroundColor: "rgba(244, 114, 182, 0.8)",
+      transform: "scale(1)",
+      transition: "background-color 0.2s ease"
+    },
+    active: {
+      backgroundColor: "rgba(253, 164, 175, 0.98)",
+      transform: "scale(1.1)",
+      transition: "background-color 0.15s ease, transform 0.15s ease"
+    }
+  }
+};
+var violet = {
+  scrollBar: {
+    inactive: {
+      backgroundColor: "rgba(76, 29, 149, 0.3)",
+      borderRadius: "999px",
+      transition: "background-color 0.28s ease"
+    },
+    hover: {
+      backgroundColor: "rgba(91, 33, 182, 0.45)"
+    },
+    active: {
+      backgroundColor: "rgba(109, 40, 217, 0.62)",
+      transition: "background-color 0.14s ease"
+    }
+  },
+  thumb: {
+    inactive: {
+      backgroundColor: "rgba(139, 92, 246, 0.62)",
+      borderRadius: "999px"
+    },
+    hover: {
+      backgroundColor: "rgba(167, 139, 250, 0.86)",
+      transform: "scale(1.03)",
+      transition: "background-color 0.18s ease, transform 0.18s ease"
+    },
+    active: {
+      backgroundColor: "rgba(221, 214, 254, 1)",
+      transform: "scale(1.12)",
+      transition: "background-color 0.12s ease, transform 0.12s ease"
+    }
+  }
+};
+var royal = {
+  scrollBar: {
+    inactive: {
+      backgroundColor: "rgba(30, 27, 75, 0.48)",
+      borderRadius: "999px",
+      transition: "background-color 0.3s ease"
+    },
+    hover: {
+      backgroundColor: "rgba(49, 46, 129, 0.65)"
+    },
+    active: {
+      backgroundColor: "rgba(67, 56, 202, 0.82)",
+      transition: "background-color 0.15s ease"
+    }
+  },
+  thumb: {
+    inactive: {
+      backgroundColor: "rgba(99, 102, 241, 0.65)",
+      borderRadius: "999px"
+    },
+    hover: {
+      backgroundColor: "rgba(165, 180, 252, 0.86)",
+      transform: "scale(1.02)",
+      transition: "background-color 0.2s ease, transform 0.2s ease"
+    },
+    active: {
+      backgroundColor: "rgba(224, 231, 255, 1)",
+      transform: "scale(1.12)",
+      transition: "background-color 0.14s ease, transform 0.14s ease"
+    }
+  }
+};
+var arctic = {
+  scrollBar: {
+    inactive: {
+      backgroundColor: "rgba(186, 230, 253, 0.22)",
+      borderRadius: "999px",
+      transition: "background-color 0.35s ease"
+    },
+    hover: {
+      backgroundColor: "rgba(125, 211, 252, 0.36)"
+    },
+    active: {
+      backgroundColor: "rgba(56, 189, 248, 0.5)",
+      transition: "background-color 0.18s ease"
+    }
+  },
+  thumb: {
+    inactive: {
+      backgroundColor: "rgba(224, 242, 254, 0.65)",
+      borderRadius: "999px"
+    },
+    hover: {
+      backgroundColor: "rgba(240, 249, 255, 0.88)",
+      transform: "scale(1)",
+      transition: "background-color 0.2s ease"
+    },
+    active: {
+      backgroundColor: "rgba(255, 255, 255, 1)",
+      transform: "scale(1.08)",
+      transition: "background-color 0.15s ease, transform 0.15s ease"
+    }
+  }
+};
+var glass = {
+  scrollBar: {
+    inactive: {
+      backgroundColor: "rgba(255, 255, 255, 0.08)",
+      borderRadius: "999px",
+      transition: "background-color 0.3s ease"
+    },
+    hover: {
+      backgroundColor: "rgba(255, 255, 255, 0.14)"
+    },
+    active: {
+      backgroundColor: "rgba(255, 255, 255, 0.22)",
+      transition: "background-color 0.15s ease"
+    }
+  },
+  thumb: {
+    inactive: {
+      backgroundColor: "rgba(255, 255, 255, 0.28)",
+      borderRadius: "999px"
+    },
+    hover: {
+      backgroundColor: "rgba(255, 255, 255, 0.46)",
+      transform: "scale(1)",
+      transition: "background-color 0.2s ease"
+    },
+    active: {
+      backgroundColor: "rgba(255, 255, 255, 0.7)",
+      transform: "scale(1.08)",
+      transition: "background-color 0.15s ease, transform 0.15s ease"
+    }
+  }
+};
+var graphite = {
+  scrollBar: {
+    inactive: {
+      backgroundColor: "rgba(17, 24, 39, 0.52)",
+      borderRadius: "3px",
+      transition: "background-color 0.22s ease"
+    },
+    hover: {
+      backgroundColor: "rgba(31, 41, 55, 0.7)"
+    },
+    active: {
+      backgroundColor: "rgba(55, 65, 81, 0.88)",
+      transition: "background-color 0.1s ease"
+    }
+  },
+  thumb: {
+    inactive: {
+      backgroundColor: "rgba(107, 114, 128, 0.65)",
+      borderRadius: "2px"
+    },
+    hover: {
+      backgroundColor: "rgba(156, 163, 175, 0.82)",
+      transform: "scale(1)",
+      transition: "background-color 0.15s ease"
+    },
+    active: {
+      backgroundColor: "rgba(229, 231, 235, 0.98)",
+      transform: "scale(1.06)",
+      transition: "background-color 0.1s ease, transform 0.1s ease"
+    }
+  }
+};
+var terminal = {
+  scrollBar: {
+    inactive: {
+      backgroundColor: "rgba(0, 20, 5, 0.72)",
+      borderRadius: "0px",
+      transition: "background-color 0.15s linear"
+    },
+    hover: {
+      backgroundColor: "rgba(0, 40, 10, 0.82)"
+    },
+    active: {
+      backgroundColor: "rgba(0, 65, 18, 0.92)",
+      transition: "background-color 0.08s linear"
+    }
+  },
+  thumb: {
+    inactive: {
+      backgroundColor: "rgba(34, 197, 94, 0.62)",
+      borderRadius: "0px"
+    },
+    hover: {
+      backgroundColor: "rgba(74, 222, 128, 0.85)",
+      transform: "scale(1)",
+      transition: "background-color 0.1s linear"
+    },
+    active: {
+      backgroundColor: "rgba(187, 247, 208, 1)",
+      transform: "scale(1.06)",
+      transition: "background-color 0.08s linear, transform 0.08s linear"
+    }
+  }
+};
+var toxic = {
+  scrollBar: {
+    inactive: {
+      backgroundColor: "rgba(54, 83, 20, 0.48)",
+      borderRadius: "2px",
+      transition: "background-color 0.2s ease"
+    },
+    hover: {
+      backgroundColor: "rgba(77, 124, 15, 0.65)"
+    },
+    active: {
+      backgroundColor: "rgba(101, 163, 13, 0.82)",
+      transition: "background-color 0.1s ease"
+    }
+  },
+  thumb: {
+    inactive: {
+      backgroundColor: "rgba(163, 230, 53, 0.68)",
+      borderRadius: "1px"
+    },
+    hover: {
+      backgroundColor: "rgba(190, 242, 100, 0.9)",
+      transform: "scale(1.04)",
+      transition: "background-color 0.14s ease, transform 0.14s ease"
+    },
+    active: {
+      backgroundColor: "rgba(236, 252, 203, 1)",
+      transform: "scale(1.15)",
+      transition: "background-color 0.08s ease, transform 0.08s ease"
+    }
+  }
+};
+var candy = {
+  scrollBar: {
+    inactive: {
+      backgroundColor: "rgba(244, 114, 182, 0.18)",
+      borderRadius: "999px",
+      transition: "background-color 0.3s ease"
+    },
+    hover: {
+      backgroundColor: "rgba(192, 132, 252, 0.28)"
+    },
+    active: {
+      backgroundColor: "rgba(129, 140, 248, 0.42)",
+      transition: "background-color 0.15s ease"
+    }
+  },
+  thumb: {
+    inactive: {
+      backgroundColor: "rgba(251, 113, 133, 0.62)",
+      borderRadius: "999px"
+    },
+    hover: {
+      backgroundColor: "rgba(244, 114, 182, 0.84)",
+      transform: "scale(1.03)",
+      transition: "background-color 0.18s ease, transform 0.18s ease"
+    },
+    active: {
+      backgroundColor: "rgba(224, 231, 255, 1)",
+      transform: "scale(1.12)",
+      transition: "background-color 0.12s ease, transform 0.12s ease"
+    }
+  }
+};
+var sand = {
+  scrollBar: {
+    inactive: {
+      backgroundColor: "rgba(120, 53, 15, 0.16)",
+      borderRadius: "999px",
+      transition: "background-color 0.32s ease"
+    },
+    hover: {
+      backgroundColor: "rgba(180, 83, 9, 0.25)"
+    },
+    active: {
+      backgroundColor: "rgba(217, 119, 6, 0.38)",
+      transition: "background-color 0.16s ease"
+    }
+  },
+  thumb: {
+    inactive: {
+      backgroundColor: "rgba(217, 119, 6, 0.52)",
+      borderRadius: "999px"
+    },
+    hover: {
+      backgroundColor: "rgba(245, 158, 11, 0.75)",
+      transform: "scale(1)",
+      transition: "background-color 0.2s ease"
+    },
+    active: {
+      backgroundColor: "rgba(253, 230, 138, 0.98)",
+      transform: "scale(1.08)",
+      transition: "background-color 0.15s ease, transform 0.15s ease"
+    }
+  }
+};
+var monoLight = {
+  scrollBar: {
+    inactive: {
+      backgroundColor: "rgba(0, 0, 0, 0.08)",
+      borderRadius: "6px",
+      transition: "background-color 0.3s ease"
+    },
+    hover: {
+      backgroundColor: "rgba(0, 0, 0, 0.14)"
+    },
+    active: {
+      backgroundColor: "rgba(0, 0, 0, 0.22)",
+      transition: "background-color 0.15s ease"
+    }
+  },
+  thumb: {
+    inactive: {
+      backgroundColor: "rgba(0, 0, 0, 0.32)",
+      borderRadius: "6px"
+    },
+    hover: {
+      backgroundColor: "rgba(0, 0, 0, 0.52)",
+      transform: "scale(1)",
+      transition: "background-color 0.18s ease"
+    },
+    active: {
+      backgroundColor: "rgba(0, 0, 0, 0.75)",
+      transform: "scale(1.08)",
+      transition: "background-color 0.12s ease, transform 0.12s ease"
+    }
+  }
+};
+var monoDark = {
+  scrollBar: {
+    inactive: {
+      backgroundColor: "rgba(255, 255, 255, 0.08)",
+      borderRadius: "6px",
+      transition: "background-color 0.3s ease"
+    },
+    hover: {
+      backgroundColor: "rgba(255, 255, 255, 0.14)"
+    },
+    active: {
+      backgroundColor: "rgba(255, 255, 255, 0.22)",
+      transition: "background-color 0.15s ease"
+    }
+  },
+  thumb: {
+    inactive: {
+      backgroundColor: "rgba(255, 255, 255, 0.32)",
+      borderRadius: "6px"
+    },
+    hover: {
+      backgroundColor: "rgba(255, 255, 255, 0.55)",
+      transform: "scale(1)",
+      transition: "background-color 0.18s ease"
+    },
+    active: {
+      backgroundColor: "rgba(255, 255, 255, 0.82)",
+      transform: "scale(1.08)",
+      transition: "background-color 0.12s ease, transform 0.12s ease"
+    }
+  }
+};
+
+// src/themes/preset.ts
+var presets = {
+  primary,
+  midnight,
+  neonCyan,
+  ocean,
+  deepSea,
+  forest,
+  moss,
+  lava,
+  ember,
+  gold,
+  roseQuartz,
+  violet,
+  royal,
+  arctic,
+  glass,
+  graphite,
+  terminal,
+  toxic,
+  candy,
+  sand,
+  monoLight,
+  monoDark
+};
+
+// src/utils/config.ts
+var defaultConfig = {
+  scrollBar: {
+    mode: "both",
+    positionMode: "after",
+    superimposition: "after",
+    boundaryOffset: "4px",
+    heightTrack: "98%",
+    hideNativeScrollbar: "always"
+  },
+  thumb: {
+    boundaryOffset: "1px 1px",
+    heightTrack: "auto"
+  },
+  nativeOnMobile: true,
+  selectTheme: "primary",
+  optionsTheme: {}
+};
+
+// src/utils/merge.ts
+var merge = (config) => {
+  const selectedTheme = presets[config.selectTheme ?? defaultConfig.selectTheme];
+  return {
+    scrollBar: {
+      ...defaultConfig.scrollBar,
+      ...config.scrollBar
+    },
+    thumb: {
+      ...defaultConfig.thumb,
+      ...config.thumb
+    },
+    optionsTheme: themeMerge(selectedTheme, config.optionsTheme)
+  };
+};
+var isPlainObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var themeMerge = (base, override) => {
+  if (!override) return base;
+  const result = { ...base };
+  for (const key of Object.keys(override)) {
+    const overrideValue = override[key];
+    const baseValue = base[key];
+    if (overrideValue === void 0) continue;
+    if (isPlainObject(overrideValue) && isPlainObject(baseValue)) {
+      result[key] = themeMerge(
+        baseValue,
+        overrideValue
+      );
+    } else {
+      result[key] = overrideValue;
+    }
+  }
+  return result;
+};
+
+// src/utils/mobile-detect.ts
+var shouldUseNativeScrollbar = () => {
+  if (typeof window === "undefined") {
+    return true;
+  }
+  const primaryPointerIsCoarse = window.matchMedia("(pointer: coarse)").matches;
+  const hasAnyFinePointer = window.matchMedia("(any-pointer: fine)").matches;
+  return primaryPointerIsCoarse && !hasAnyFinePointer;
+};
+
+// src/utils/variables-css.ts
+var variables = (theme) => {
+  const styles = {};
+  for (const key in theme) {
+    const k = key;
+    const statusTheme = theme[k];
+    if (!statusTheme) continue;
+    const type = k === "scrollBar" ? "scrollbar" : "thumb";
+    for (const status in statusTheme) {
+      const properties = statusTheme[status];
+      if (!properties) continue;
+      const statusPrefix = status === "inactive" ? "" : `-${status}`;
+      for (const prop in properties) {
+        const value = properties[prop];
+        if (value === void 0) continue;
+        styles[`--${type}${statusPrefix}-${prop}`] = value;
+      }
+    }
+  }
+  return styles;
+};
+
+// src/ScrollToFuture.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ScrollToFuture = ({
+  target,
+  scrollBar = {},
+  thumb = {},
+  selectTheme = "primary",
+  optionsTheme = {},
+  nativeOnMobile = true
+}) => {
+  const anchorRef = useRef3(null);
+  const targetRef = useRef3(null);
+  const mounted = useMounted();
+  const [findedTarget, setFindedTarget] = useState6(null);
+  const config = merge({ scrollBar, thumb, selectTheme, optionsTheme });
+  console.log("hideNativeScrollbar:", {
+    original: scrollBar.hideNativeScrollbar,
+    merged: config.scrollBar.hideNativeScrollbar
+  });
+  const vars = variables(config.optionsTheme);
+  const mode = config.scrollBar?.mode ?? "both";
+  const positionMode = config.scrollBar?.positionMode ?? "after";
+  const superimposition = config.scrollBar?.superimposition ?? "over";
+  const nativeScrollOnMobile = shouldUseNativeScrollbar() && nativeOnMobile;
+  const metrics = useElementScrollObserver(findedTarget);
+  const rect = useTargetRect(findedTarget);
+  const wantsY = mode === "vertical" || mode === "both";
+  const wantsX = mode === "horizontal" || mode === "both";
+  const showY = wantsY && metrics.y.canScroll;
+  const showX = wantsX && metrics.x.canScroll;
+  const coversAllScrollableAxes = (!metrics.x.canScroll || showX) && (!metrics.y.canScroll || showY);
+  useFuture({
+    target,
+    anchorRef,
+    targetRef,
+    setFindedTarget,
+    mounted,
+    config,
+    showY,
+    showX,
+    superimposition,
+    findedTarget,
+    positionMode,
+    coversAllScrollableAxes,
+    nativeOnMobile
+  });
+  if (!mounted || nativeScrollOnMobile) {
+    return null;
+  }
+  const canRenderOverlay = findedTarget !== null && rect.width > 0 && rect.height > 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !target && /* @__PURE__ */ jsx2(
+      "span",
+      {
+        ref: anchorRef,
+        "aria-hidden": "true",
+        style: { display: "none" }
+      }
+    ),
+    canRenderOverlay && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "scroll-to-future__overlay",
+        style: {
+          top: rect.top,
+          left: rect.left,
+          width: rect.width,
+          height: rect.height
+        },
+        children: [
+          showY && /* @__PURE__ */ jsx2(
+            ScrollAxis,
+            {
+              vars,
+              axis: "y",
+              target: findedTarget,
+              metrics: metrics.y,
+              scrollBar: config.scrollBar,
+              thumb,
+              positionMode,
+              superimposition,
+              hasCrossAxis: showX
+            }
+          ),
+          showX && /* @__PURE__ */ jsx2(
+            ScrollAxis,
+            {
+              vars,
+              axis: "x",
+              target: findedTarget,
+              metrics: metrics.x,
+              scrollBar: config.scrollBar,
+              thumb,
+              positionMode,
+              superimposition,
+              hasCrossAxis: showY
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  ScrollToFuture
+};
+//# sourceMappingURL=index.mjs.map