overlapping-cards-scroll 0.1.0

package/dist/index.cjs

@@ -0,0 +1,716 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/lib/index.ts
+var index_exports = {};
+__export(index_exports, {
+  OverlappingCardsScroll: () => OverlappingCardsScroll,
+  OverlappingCardsScrollFocusTrigger: () => OverlappingCardsScrollFocusTrigger
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/lib/OverlappingCardsScroll.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+var toCssDimension = (value) => typeof value === "number" ? `${value}px` : value;
+var PAGE_DOT_POSITIONS = /* @__PURE__ */ new Set(["above", "below", "overlay"]);
+var normalizePageDotsPosition = (value) => PAGE_DOT_POSITIONS.has(value) ? value : "below";
+var TAB_POSITIONS = /* @__PURE__ */ new Set(["above", "below"]);
+var normalizeTabsPosition = (value) => TAB_POSITIONS.has(value) ? value : "above";
+function DefaultTabsContainerComponent({
+  children,
+  className,
+  style,
+  ariaLabel
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className, style, "aria-label": ariaLabel, children });
+}
+function DefaultTabsComponent({
+  name,
+  className,
+  style,
+  ariaLabel,
+  ariaCurrent,
+  onClick
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      type: "button",
+      className,
+      "aria-label": ariaLabel,
+      "aria-current": ariaCurrent,
+      onClick,
+      style,
+      children: name
+    }
+  );
+}
+var resolveCardX = (index, principalIndex, transitionProgress, layout) => {
+  if (index <= principalIndex) {
+    return index * layout.peek;
+  }
+  let cardX = principalIndex * layout.peek + layout.cardWidth + (index - principalIndex - 1) * layout.peek;
+  if (index === principalIndex + 1) {
+    cardX -= transitionProgress * (layout.cardWidth - layout.peek);
+  }
+  return cardX;
+};
+var OverlappingCardsScrollControllerContext = (0, import_react.createContext)(null);
+var OverlappingCardsScrollCardIndexContext = (0, import_react.createContext)(null);
+function useOverlappingCardsScrollCardControl() {
+  const controller = (0, import_react.useContext)(OverlappingCardsScrollControllerContext);
+  const cardIndex = (0, import_react.useContext)(OverlappingCardsScrollCardIndexContext);
+  const canFocus = controller !== null && cardIndex !== null;
+  const focusCard = (0, import_react.useCallback)(
+    (options = {}) => {
+      if (!canFocus) {
+        return;
+      }
+      controller.focusCard(cardIndex, options);
+    },
+    [canFocus, cardIndex, controller]
+  );
+  return {
+    cardIndex,
+    canFocus,
+    focusCard
+  };
+}
+function OverlappingCardsScrollFocusTrigger({
+  children = "Make principal",
+  className = "",
+  behavior = "smooth",
+  transitionMode = "swoop",
+  onClick = void 0,
+  ...buttonProps
+}) {
+  const { canFocus, focusCard } = useOverlappingCardsScrollCardControl();
+  const handleClick = (event) => {
+    onClick == null ? void 0 : onClick(event);
+    if (!event.defaultPrevented) {
+      focusCard({ behavior, transitionMode });
+    }
+  };
+  const buttonClassName = className ? `ocs-focus-trigger ${className}` : "ocs-focus-trigger";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: buttonClassName, disabled: !canFocus, onClick: handleClick, ...buttonProps, children });
+}
+var resolveCardWidth = (cardWidth, viewportWidth, fallbackRatio) => {
+  if (typeof cardWidth === "number" && Number.isFinite(cardWidth) && cardWidth > 0) {
+    return cardWidth;
+  }
+  if (typeof cardWidth === "string") {
+    const value = cardWidth.trim();
+    if (value.endsWith("%")) {
+      const percent = Number.parseFloat(value.slice(0, -1));
+      if (Number.isFinite(percent) && percent > 0) {
+        return viewportWidth * percent / 100;
+      }
+    }
+    const numeric = Number.parseFloat(value);
+    if (Number.isFinite(numeric) && numeric > 0) {
+      return numeric;
+    }
+  }
+  return viewportWidth * fallbackRatio;
+};
+function OverlappingCardsScroll(props) {
+  const {
+    className = "",
+    cardHeight = 300,
+    cardWidth = void 0,
+    cardWidthRatio = 1 / 3,
+    basePeek = 64,
+    minPeek = 10,
+    maxPeek = 84,
+    showPageDots = false,
+    pageDotsPosition = "below",
+    pageDotsOffset = 10,
+    pageDotsBehavior = "smooth",
+    pageDotsClassName = "",
+    cardContainerClassName = "",
+    cardContainerStyle = {},
+    snapToCardOnRelease = true,
+    snapReleaseDelay = 800,
+    focusTransitionDuration = 420,
+    ariaLabel = "Overlapping cards scroll",
+    showTabs = false,
+    tabsPosition = "above",
+    tabsOffset = 10,
+    tabsBehavior = "smooth",
+    tabsClassName = "",
+    tabsComponent: TabsComponent = DefaultTabsComponent,
+    tabsContainerComponent: TabsContainerComponent = DefaultTabsContainerComponent
+  } = props;
+  const hasItems = "items" in props && Array.isArray(props.items);
+  const hasChildren = "children" in props && props.children != null;
+  (0, import_react.useEffect)(() => {
+    if (hasItems && hasChildren) {
+      console.warn(
+        "OverlappingCardsScroll: Both `items` and `children` were provided. `items` takes precedence."
+      );
+    }
+  }, [hasItems, hasChildren]);
+  const itemsProp = hasItems ? props.items : null;
+  const childrenProp = hasChildren ? props.children : null;
+  const cards = (0, import_react.useMemo)(() => {
+    if (itemsProp) {
+      return itemsProp.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: item.jsx }, item.id));
+    }
+    return import_react.Children.toArray(childrenProp);
+  }, [itemsProp, childrenProp]);
+  const cardNames = (0, import_react.useMemo)(() => {
+    if (itemsProp) {
+      return itemsProp.map((item) => item.name);
+    }
+    return null;
+  }, [itemsProp]);
+  const cardCount = cards.length;
+  const containerRef = (0, import_react.useRef)(null);
+  const scrollRef = (0, import_react.useRef)(null);
+  const touchStateRef = (0, import_react.useRef)(null);
+  const snapTimeoutRef = (0, import_react.useRef)(null);
+  const shouldSnapOnMouseMoveRef = (0, import_react.useRef)(false);
+  const focusTransitionTimeoutRef = (0, import_react.useRef)(null);
+  const [viewportWidth, setViewportWidth] = (0, import_react.useState)(1);
+  const [scrollLeft, setScrollLeft] = (0, import_react.useState)(0);
+  const [focusTransition, setFocusTransition] = (0, import_react.useState)(null);
+  const clearSnapTimeout = (0, import_react.useCallback)(() => {
+    if (snapTimeoutRef.current !== null) {
+      clearTimeout(snapTimeoutRef.current);
+      snapTimeoutRef.current = null;
+    }
+  }, []);
+  const clearFocusTransitionTimeout = (0, import_react.useCallback)(() => {
+    if (focusTransitionTimeoutRef.current !== null) {
+      clearTimeout(focusTransitionTimeoutRef.current);
+      focusTransitionTimeoutRef.current = null;
+    }
+  }, []);
+  const cancelFocusTransition = (0, import_react.useCallback)(() => {
+    clearFocusTransitionTimeout();
+    setFocusTransition(null);
+  }, [clearFocusTransitionTimeout]);
+  (0, import_react.useEffect)(() => {
+    const containerElement = containerRef.current;
+    const scrollElement = scrollRef.current;
+    if (!containerElement || !scrollElement) {
+      return void 0;
+    }
+    const syncScroll = () => {
+      setScrollLeft(scrollElement.scrollLeft);
+    };
+    const resizeObserver = new ResizeObserver((entries) => {
+      var _a, _b;
+      const entry = entries[0];
+      const width = (_b = (_a = entry == null ? void 0 : entry.contentRect) == null ? void 0 : _a.width) != null ? _b : 1;
+      setViewportWidth(Math.max(1, width));
+      syncScroll();
+    });
+    resizeObserver.observe(containerElement);
+    setViewportWidth(Math.max(1, containerElement.getBoundingClientRect().width || 1));
+    syncScroll();
+    scrollElement.addEventListener("scroll", syncScroll, { passive: true });
+    return () => {
+      resizeObserver.disconnect();
+      scrollElement.removeEventListener("scroll", syncScroll);
+    };
+  }, []);
+  (0, import_react.useEffect)(() => () => clearSnapTimeout(), [clearSnapTimeout]);
+  (0, import_react.useEffect)(() => () => clearFocusTransitionTimeout(), [clearFocusTransitionTimeout]);
+  (0, import_react.useEffect)(() => {
+    if (snapToCardOnRelease && cardCount > 1) {
+      return;
+    }
+    clearSnapTimeout();
+    shouldSnapOnMouseMoveRef.current = false;
+    cancelFocusTransition();
+  }, [cancelFocusTransition, cardCount, clearSnapTimeout, snapToCardOnRelease]);
+  (0, import_react.useEffect)(() => {
+    if (cardCount > 1) {
+      return;
+    }
+    cancelFocusTransition();
+  }, [cancelFocusTransition, cardCount]);
+  const layout = (0, import_react.useMemo)(() => {
+    const safeWidth = Math.max(1, viewportWidth);
+    const safeRatio = clamp(cardWidthRatio, 0.2, 0.95);
+    const width = Math.max(1, resolveCardWidth(cardWidth, safeWidth, safeRatio));
+    if (cardCount < 2) {
+      return {
+        cardWidth: width,
+        peek: 0,
+        stepDistance: 1,
+        scrollRange: 0,
+        trackWidth: safeWidth
+      };
+    }
+    const availableStackWidth = Math.max(0, safeWidth - width);
+    const maxVisiblePeek = availableStackWidth / (cardCount - 1);
+    const preferredPeek = clamp(basePeek, minPeek, maxPeek);
+    const peek = Math.min(preferredPeek, maxVisiblePeek);
+    const stepDistance = Math.max(1, width - peek);
+    const scrollRange = stepDistance * (cardCount - 1);
+    const trackWidth = safeWidth + scrollRange;
+    return {
+      cardWidth: width,
+      peek,
+      stepDistance,
+      scrollRange,
+      trackWidth
+    };
+  }, [basePeek, cardCount, cardWidth, cardWidthRatio, maxPeek, minPeek, viewportWidth]);
+  (0, import_react.useEffect)(() => {
+    const scrollElement = scrollRef.current;
+    if (!scrollElement) {
+      return;
+    }
+    if (scrollElement.scrollLeft > layout.scrollRange) {
+      scrollElement.scrollLeft = layout.scrollRange;
+      setScrollLeft(layout.scrollRange);
+    }
+  }, [layout.scrollRange]);
+  const progress = cardCount > 1 ? clamp(scrollLeft / layout.stepDistance, 0, cardCount - 1) : 0;
+  const activeIndex = Math.floor(progress);
+  const transitionProgress = progress - activeIndex;
+  const snapToNearestCard = (0, import_react.useCallback)(
+    (options = {}) => {
+      var _a;
+      if (!snapToCardOnRelease || cardCount < 2) {
+        return;
+      }
+      const scrollElement = scrollRef.current;
+      if (!scrollElement) {
+        return;
+      }
+      const currentScrollLeft = clamp(scrollElement.scrollLeft, 0, layout.scrollRange);
+      const nearestIndex = clamp(
+        Math.round(currentScrollLeft / layout.stepDistance),
+        0,
+        cardCount - 1
+      );
+      const targetScrollLeft = clamp(
+        nearestIndex * layout.stepDistance,
+        0,
+        layout.scrollRange
+      );
+      if (Math.abs(targetScrollLeft - currentScrollLeft) < 1) {
+        return;
+      }
+      const behavior = (_a = options.behavior) != null ? _a : "smooth";
+      if (typeof scrollElement.scrollTo === "function") {
+        scrollElement.scrollTo({
+          left: targetScrollLeft,
+          behavior
+        });
+      } else {
+        scrollElement.scrollLeft = targetScrollLeft;
+      }
+      if (behavior === "auto") {
+        setScrollLeft(targetScrollLeft);
+      }
+    },
+    [cardCount, layout.scrollRange, layout.stepDistance, snapToCardOnRelease]
+  );
+  const scheduleSnapToNearestCard = (0, import_react.useCallback)(
+    (delay = snapReleaseDelay) => {
+      if (!snapToCardOnRelease || cardCount < 2) {
+        return;
+      }
+      const safeDelay = Number.isFinite(delay) ? Math.max(0, delay) : 800;
+      clearSnapTimeout();
+      snapTimeoutRef.current = setTimeout(() => {
+        snapTimeoutRef.current = null;
+        shouldSnapOnMouseMoveRef.current = false;
+        snapToNearestCard({ behavior: "smooth" });
+      }, safeDelay);
+    },
+    [cardCount, clearSnapTimeout, snapReleaseDelay, snapToCardOnRelease, snapToNearestCard]
+  );
+  const markSnapCandidateFromScroll = (0, import_react.useCallback)(() => {
+    if (!snapToCardOnRelease || cardCount < 2) {
+      return;
+    }
+    shouldSnapOnMouseMoveRef.current = true;
+    scheduleSnapToNearestCard();
+  }, [cardCount, scheduleSnapToNearestCard, snapToCardOnRelease]);
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined" || !snapToCardOnRelease || cardCount < 2) {
+      return void 0;
+    }
+    const handleMouseMove = () => {
+      if (!shouldSnapOnMouseMoveRef.current) {
+        return;
+      }
+      shouldSnapOnMouseMoveRef.current = false;
+      clearSnapTimeout();
+      snapToNearestCard({ behavior: "smooth" });
+    };
+    window.addEventListener("mousemove", handleMouseMove, { passive: true });
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, [cardCount, clearSnapTimeout, snapToCardOnRelease, snapToNearestCard]);
+  const focusCard = (0, import_react.useCallback)(
+    (targetIndex, options = {}) => {
+      var _a, _b, _c;
+      const scrollElement = scrollRef.current;
+      if (!scrollElement || cardCount === 0) {
+        return;
+      }
+      clearSnapTimeout();
+      shouldSnapOnMouseMoveRef.current = false;
+      cancelFocusTransition();
+      const safeIndex = clamp(Math.round(targetIndex), 0, cardCount - 1);
+      const nextScrollLeft = clamp(safeIndex * layout.stepDistance, 0, layout.scrollRange);
+      const transitionMode = (_a = options.transitionMode) != null ? _a : "swoop";
+      if (transitionMode === "swoop") {
+        const duration = Number.isFinite(options.duration) ? Math.max(0, options.duration) : focusTransitionDuration;
+        clearFocusTransitionTimeout();
+        setFocusTransition({ duration });
+        scrollElement.scrollLeft = nextScrollLeft;
+        setScrollLeft(nextScrollLeft);
+        if (duration <= 0) {
+          setFocusTransition(null);
+          return;
+        }
+        focusTransitionTimeoutRef.current = setTimeout(() => {
+          focusTransitionTimeoutRef.current = null;
+          setFocusTransition(null);
+        }, duration + 40);
+        return;
+      }
+      if (typeof scrollElement.scrollTo === "function") {
+        scrollElement.scrollTo({
+          left: nextScrollLeft,
+          behavior: (_b = options.behavior) != null ? _b : "smooth"
+        });
+      } else {
+        scrollElement.scrollLeft = nextScrollLeft;
+      }
+      if (((_c = options.behavior) != null ? _c : "smooth") === "auto") {
+        setScrollLeft(nextScrollLeft);
+      }
+    },
+    [
+      cardCount,
+      cancelFocusTransition,
+      clearFocusTransitionTimeout,
+      clearSnapTimeout,
+      focusTransitionDuration,
+      layout.scrollRange,
+      layout.stepDistance
+    ]
+  );
+  const controllerContextValue = (0, import_react.useMemo)(
+    () => ({
+      focusCard
+    }),
+    [focusCard]
+  );
+  const setControllerScroll = (0, import_react.useCallback)(
+    (nextValue) => {
+      const scrollElement = scrollRef.current;
+      if (!scrollElement) {
+        return;
+      }
+      const nextScrollLeft = clamp(nextValue, 0, layout.scrollRange);
+      if (scrollElement.scrollLeft !== nextScrollLeft) {
+        scrollElement.scrollLeft = nextScrollLeft;
+      }
+      setScrollLeft(nextScrollLeft);
+    },
+    [layout.scrollRange]
+  );
+  const applyScrollDelta = (0, import_react.useCallback)(
+    (delta) => {
+      const scrollElement = scrollRef.current;
+      if (!scrollElement) {
+        return;
+      }
+      setControllerScroll(scrollElement.scrollLeft + delta);
+    },
+    [setControllerScroll]
+  );
+  const handleWheel = (0, import_react.useCallback)(
+    (event) => {
+      if (cardCount < 2) {
+        return;
+      }
+      const absX = Math.abs(event.deltaX);
+      const absY = Math.abs(event.deltaY);
+      if (absX === 0 && absY === 0) {
+        return;
+      }
+      if (absY > absX) {
+        return;
+      }
+      event.preventDefault();
+      cancelFocusTransition();
+      applyScrollDelta(event.deltaX);
+      markSnapCandidateFromScroll();
+    },
+    [cardCount, cancelFocusTransition, applyScrollDelta, markSnapCandidateFromScroll]
+  );
+  const handleTouchStart = (event) => {
+    if (cardCount < 2) {
+      return;
+    }
+    const scrollElement = scrollRef.current;
+    const touch = event.touches[0];
+    if (!scrollElement || !touch) {
+      return;
+    }
+    cancelFocusTransition();
+    touchStateRef.current = {
+      startX: touch.clientX,
+      startScrollLeft: scrollElement.scrollLeft
+    };
+  };
+  const handleTouchMove = (event) => {
+    const touchState = touchStateRef.current;
+    const touch = event.touches[0];
+    if (!touchState || !touch) {
+      return;
+    }
+    const delta = touchState.startX - touch.clientX;
+    if (Math.abs(delta) < 2) {
+      return;
+    }
+    event.preventDefault();
+    setControllerScroll(touchState.startScrollLeft + delta);
+    markSnapCandidateFromScroll();
+  };
+  const handleTouchEnd = () => {
+    if (touchStateRef.current && snapToCardOnRelease && cardCount > 1) {
+      scheduleSnapToNearestCard(80);
+    }
+    touchStateRef.current = null;
+  };
+  const stageRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const stageElement = stageRef.current;
+    if (!stageElement) {
+      return void 0;
+    }
+    stageElement.addEventListener("wheel", handleWheel, { passive: false });
+    return () => {
+      stageElement.removeEventListener("wheel", handleWheel);
+    };
+  }, [handleWheel]);
+  const containerClassName = className ? `overlapping-cards-scroll ${className}` : "overlapping-cards-scroll";
+  const resolvedPageDotsPosition = normalizePageDotsPosition(pageDotsPosition);
+  const showNavigationDots = showPageDots && cardCount > 1;
+  const resolvedTabsPosition = normalizeTabsPosition(tabsPosition);
+  const showNavigationTabs = showTabs && cardCount > 1 && cardNames !== null;
+  (0, import_react.useEffect)(() => {
+    if (showTabs && cardNames === null) {
+      console.warn(
+        "OverlappingCardsScroll: `showTabs` requires the `items` prop to provide card names. Tabs will not render."
+      );
+    }
+  }, [showTabs, cardNames]);
+  const renderTabs = (position) => {
+    if (!showNavigationTabs || cardNames === null) {
+      return null;
+    }
+    const containerClassName2 = tabsClassName ? `ocs-tabs ocs-tabs--${position} ${tabsClassName}` : `ocs-tabs ocs-tabs--${position}`;
+    const containerStyle = position === "above" ? { marginBottom: toCssDimension(tabsOffset) } : { marginTop: toCssDimension(tabsOffset) };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      TabsContainerComponent,
+      {
+        position,
+        className: containerClassName2,
+        style: containerStyle,
+        ariaLabel: "Card tabs",
+        cardNames,
+        activeIndex,
+        progress,
+        children: cardNames.map((name, index) => {
+          const influence = clamp(1 - Math.abs(progress - index), 0, 1);
+          const isPrincipal = influence > 0.98;
+          const animate = {
+            opacity: 0.45 + influence * 0.55
+          };
+          const className2 = isPrincipal ? "ocs-tab ocs-tab--active" : "ocs-tab";
+          const style = { opacity: animate.opacity };
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            TabsComponent,
+            {
+              name,
+              index,
+              position,
+              isPrincipal,
+              influence,
+              animate,
+              className: className2,
+              style,
+              ariaLabel: `Go to ${name}`,
+              ariaCurrent: isPrincipal ? "page" : void 0,
+              onClick: () => focusCard(index, {
+                behavior: tabsBehavior,
+                transitionMode: "swoop"
+              })
+            },
+            `ocs-tab-${position}-${index}`
+          );
+        })
+      }
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OverlappingCardsScrollControllerContext.Provider, { value: controllerContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: containerClassName, "aria-label": ariaLabel, ref: containerRef, children: [
+    resolvedTabsPosition === "above" ? renderTabs("above") : null,
+    showNavigationDots && resolvedPageDotsPosition === "above" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "nav",
+      {
+        className: pageDotsClassName ? `ocs-page-dots ocs-page-dots--above ${pageDotsClassName}` : "ocs-page-dots ocs-page-dots--above",
+        style: { marginBottom: toCssDimension(pageDotsOffset) },
+        "aria-label": "Card pages",
+        children: cards.map((_, index) => {
+          const influence = clamp(1 - Math.abs(progress - index), 0, 1);
+          const opacity = 0.25 + influence * 0.75;
+          const scale = 0.9 + influence * 0.22;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "ocs-page-dot",
+              "aria-label": `Go to card ${index + 1}`,
+              "aria-current": influence > 0.98 ? "page" : void 0,
+              onClick: () => focusCard(index, {
+                behavior: pageDotsBehavior,
+                transitionMode: "swoop"
+              }),
+              style: { opacity, transform: `scale(${scale})` }
+            },
+            `ocs-page-dot-above-${index}`
+          );
+        })
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ocs-stage-frame", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: "ocs-stage",
+          ref: stageRef,
+          style: {
+            minHeight: toCssDimension(cardHeight)
+          },
+          onTouchStart: handleTouchStart,
+          onTouchMove: handleTouchMove,
+          onTouchEnd: handleTouchEnd,
+          onTouchCancel: handleTouchEnd,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: "ocs-track",
+                children: cards.map((card, index) => {
+                  var _a;
+                  const cardX = resolveCardX(index, activeIndex, transitionProgress, layout);
+                  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "div",
+                    {
+                      className: cardContainerClassName ? `${focusTransition ? "ocs-card ocs-card--focus-transition" : "ocs-card"} ${cardContainerClassName}` : focusTransition ? "ocs-card ocs-card--focus-transition" : "ocs-card",
+                      style: {
+                        width: `${layout.cardWidth}px`,
+                        transform: `translate3d(${cardX}px, 0, 0)`,
+                        transitionDuration: focusTransition ? `${focusTransition.duration}ms` : void 0,
+                        ...cardContainerStyle
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OverlappingCardsScrollCardIndexContext.Provider, { value: index, children: card })
+                    },
+                    (_a = card.key) != null ? _a : `ocs-card-${index}`
+                  );
+                })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ocs-scroll-region", ref: scrollRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: "ocs-scroll-spacer",
+                style: {
+                  width: `${layout.trackWidth}px`
+                }
+              }
+            ) })
+          ]
+        }
+      ),
+      showNavigationDots && resolvedPageDotsPosition === "overlay" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "nav",
+        {
+          className: pageDotsClassName ? `ocs-page-dots ocs-page-dots--overlay ${pageDotsClassName}` : "ocs-page-dots ocs-page-dots--overlay",
+          style: { bottom: toCssDimension(pageDotsOffset) },
+          "aria-label": "Card pages",
+          children: cards.map((_, index) => {
+            const influence = clamp(1 - Math.abs(progress - index), 0, 1);
+            const opacity = 0.25 + influence * 0.75;
+            const scale = 0.9 + influence * 0.22;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "ocs-page-dot",
+                "aria-label": `Go to card ${index + 1}`,
+                "aria-current": influence > 0.98 ? "page" : void 0,
+                onClick: () => focusCard(index, {
+                  behavior: pageDotsBehavior,
+                  transitionMode: "swoop"
+                }),
+                style: { opacity, transform: `scale(${scale})` }
+              },
+              `ocs-page-dot-overlay-${index}`
+            );
+          })
+        }
+      ) : null
+    ] }),
+    showNavigationDots && resolvedPageDotsPosition === "below" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "nav",
+      {
+        className: pageDotsClassName ? `ocs-page-dots ocs-page-dots--below ${pageDotsClassName}` : "ocs-page-dots ocs-page-dots--below",
+        style: { marginTop: toCssDimension(pageDotsOffset) },
+        "aria-label": "Card pages",
+        children: cards.map((_, index) => {
+          const influence = clamp(1 - Math.abs(progress - index), 0, 1);
+          const opacity = 0.25 + influence * 0.75;
+          const scale = 0.9 + influence * 0.22;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "ocs-page-dot",
+              "aria-label": `Go to card ${index + 1}`,
+              "aria-current": influence > 0.98 ? "page" : void 0,
+              onClick: () => focusCard(index, {
+                behavior: pageDotsBehavior,
+                transitionMode: "swoop"
+              }),
+              style: { opacity, transform: `scale(${scale})` }
+            },
+            `ocs-page-dot-below-${index}`
+          );
+        })
+      }
+    ) : null,
+    resolvedTabsPosition === "below" ? renderTabs("below") : null
+  ] }) });
+}