overlapping-cards-scroll 0.1.6 → 0.1.8

package/dist/index.cjs

@@ -31,8 +31,24 @@ 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";
+var TABS_POSITION_MAP = {
+  "top-left": { side: "top", align: "start", orientation: "horizontal" },
+  "top-center": { side: "top", align: "center", orientation: "horizontal" },
+  "top-right": { side: "top", align: "end", orientation: "horizontal" },
+  "bottom-left": { side: "bottom", align: "start", orientation: "horizontal" },
+  "bottom-center": { side: "bottom", align: "center", orientation: "horizontal" },
+  "bottom-right": { side: "bottom", align: "end", orientation: "horizontal" },
+  "left-top": { side: "left", align: "start", orientation: "vertical" },
+  "left-center": { side: "left", align: "center", orientation: "vertical" },
+  "left-bottom": { side: "left", align: "end", orientation: "vertical" },
+  "right-top": { side: "right", align: "start", orientation: "vertical" },
+  "right-center": { side: "right", align: "center", orientation: "vertical" },
+  "right-bottom": { side: "right", align: "end", orientation: "vertical" },
+  "above": { side: "top", align: "center", orientation: "horizontal" },
+  "below": { side: "bottom", align: "center", orientation: "horizontal" }
+};
+var DEFAULT_TABS_POSITION = { side: "top", align: "center", orientation: "horizontal" };
+var parseTabsPosition = (value) => value && TABS_POSITION_MAP[value] || DEFAULT_TABS_POSITION;
 var lastKnownViewportWidth = 1;
 function DefaultTabsContainerComponent({
   children,
@@ -194,6 +210,7 @@ function OverlappingCardsScroll(props) {
   }, [itemsProp]);
   const cardCount = cards.length;
   const containerRef = (0, import_react.useRef)(null);
+  const stageRef = (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);
@@ -220,9 +237,9 @@ function OverlappingCardsScroll(props) {
   }, [clearFocusTransitionTimeout]);
   (0, import_react.useEffect)(() => {
     var _a;
-    const containerElement = containerRef.current;
+    const stageElement = stageRef.current;
     const scrollElement = scrollRef.current;
-    if (!containerElement || !scrollElement) {
+    if (!stageElement || !scrollElement) {
       return void 0;
     }
     const syncScroll = () => {
@@ -242,8 +259,8 @@ function OverlappingCardsScroll(props) {
       applyWidth(width);
       syncScroll();
     });
-    resizeObserver.observe(containerElement);
-    applyWidth((_a = containerElement.getBoundingClientRect().width) != null ? _a : 0);
+    resizeObserver.observe(stageElement);
+    applyWidth((_a = stageElement.getBoundingClientRect().width) != null ? _a : 0);
     syncScroll();
     scrollElement.addEventListener("scroll", syncScroll, { passive: true });
     return () => {
@@ -555,7 +572,6 @@ function OverlappingCardsScroll(props) {
     }
     touchStateRef.current = null;
   };
-  const stageRef = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
     const stageElement = stageRef.current;
     if (!stageElement) {
@@ -566,11 +582,16 @@ function OverlappingCardsScroll(props) {
       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 parsedTabsPosition = parseTabsPosition(tabsPosition);
+  const isVerticalTabs = parsedTabsPosition.orientation === "vertical";
   const showNavigationTabs = showTabs && cardCount > 1 && cardNames !== null;
+  const containerClassName = [
+    "overlapping-cards-scroll",
+    isVerticalTabs ? "overlapping-cards-scroll--vertical-tabs" : "",
+    className
+  ].filter(Boolean).join(" ");
   (0, import_react.useEffect)(() => {
     if (showTabs && cardNames === null) {
       console.warn(
@@ -578,17 +599,32 @@ function OverlappingCardsScroll(props) {
       );
     }
   }, [showTabs, cardNames]);
-  const renderTabs = (position) => {
+  const renderTabs = () => {
     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) };
+    const { side, align, orientation } = parsedTabsPosition;
+    const isVertical = orientation === "vertical";
+    const alignClass = align === "start" ? "ocs-tabs--align-start" : align === "end" ? "ocs-tabs--align-end" : "ocs-tabs--align-center";
+    const orientationClass = isVertical ? "ocs-tabs--vertical" : "";
+    const classNames = [
+      "ocs-tabs",
+      `ocs-tabs--${side}`,
+      alignClass,
+      orientationClass,
+      tabsClassName
+    ].filter(Boolean).join(" ");
+    const containerStyle = {};
+    if (side === "top") containerStyle.marginBottom = toCssDimension(tabsOffset);
+    else if (side === "bottom") containerStyle.marginTop = toCssDimension(tabsOffset);
+    else if (side === "left") containerStyle.marginRight = toCssDimension(tabsOffset);
+    else if (side === "right") containerStyle.marginLeft = toCssDimension(tabsOffset);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       TabsContainerComponent,
       {
-        position,
-        className: containerClassName2,
+        position: side,
+        align,
+        className: classNames,
         style: containerStyle,
         ariaLabel: "Card tabs",
         cardNames,
@@ -597,9 +633,7 @@ function OverlappingCardsScroll(props) {
         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 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)(
@@ -607,7 +641,8 @@ function OverlappingCardsScroll(props) {
             {
               name,
               index,
-              position,
+              position: side,
+              align,
               isPrincipal,
               influence,
               animate,
@@ -620,12 +655,167 @@ function OverlappingCardsScroll(props) {
                 transitionMode: "swoop"
               })
             },
-            `ocs-tab-${position}-${index}`
+            `ocs-tab-${side}-${index}`
           );
         })
       }
     );
   };
+  const tabsBeforeStage = parsedTabsPosition.side === "top" || parsedTabsPosition.side === "left";
+  const stageAndDots = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    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,
+                    pointerEvents: "none"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "div",
+                    {
+                      style: {
+                        pointerEvents: "auto",
+                        display: "flex",
+                        flexDirection: "column"
+                      },
+                      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
+  ] });
+  const stageContent = isVerticalTabs ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ocs-main-column", children: stageAndDots }) : stageAndDots;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     OverlappingCardsScrollControllerContext.Provider,
     {
@@ -637,159 +827,9 @@ function OverlappingCardsScroll(props) {
           "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,
-                            pointerEvents: "none"
-                          },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                            "div",
-                            {
-                              style: {
-                                pointerEvents: "auto",
-                                display: "flex",
-                                flexDirection: "column"
-                              },
-                              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
+            tabsBeforeStage ? renderTabs() : null,
+            stageContent,
+            !tabsBeforeStage ? renderTabs() : null
           ]
         }
       )