overlapping-cards-scroll 0.1.6 → 0.1.7

package/dist/react-native.js

@@ -19,12 +19,28 @@ import {
   Text,
   View
 } from "react-native";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
 var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 var PAGE_DOT_POSITIONS = /* @__PURE__ */ new Set(["above", "below", "overlay"]);
-var TAB_POSITIONS = /* @__PURE__ */ new Set(["above", "below"]);
+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 normalizePageDotsPosition = (value) => PAGE_DOT_POSITIONS.has(value) ? value : "below";
-var normalizeTabsPosition = (value) => TAB_POSITIONS.has(value) ? value : "above";
 var toNumericOffset = (value, fallback = 0) => {
   if (typeof value === "number" && Number.isFinite(value)) {
     return value;
@@ -238,7 +254,8 @@ function OverlappingCardsScrollRN(props) {
     return null;
   }, [itemsProp]);
   const cardCount = cards.length;
-  const resolvedTabsPosition = normalizeTabsPosition(tabsPosition);
+  const parsedTabsPosition = parseTabsPosition(tabsPosition);
+  const isVerticalTabs = parsedTabsPosition.orientation === "vertical";
   const showNavigationTabs = showTabs && cardCount > 1 && cardNames !== null;
   const resolvedPageDotsOffset = toNumericOffset(pageDotsOffset, 10);
   const resolvedTabsOffset = toNumericOffset(tabsOffset, 10);
@@ -528,16 +545,21 @@ function OverlappingCardsScrollRN(props) {
       }
     );
   };
-  const renderTabs = (position) => {
-    if (!showNavigationTabs || resolvedTabsPosition !== position || cardNames === null) {
+  const renderTabs = () => {
+    if (!showNavigationTabs || cardNames === null) {
       return null;
     }
-    const containerStyle = position === "above" ? [styles.tabsRow, { marginBottom: resolvedTabsOffset }] : [styles.tabsRow, { marginTop: resolvedTabsOffset }];
+    const { side, align, orientation } = parsedTabsPosition;
+    const isVertical = orientation === "vertical";
+    const justifyContent = align === "start" ? "flex-start" : align === "end" ? "flex-end" : "center";
+    const baseStyle = isVertical ? styles.tabsColumn : styles.tabsRow;
+    const containerStyle = side === "top" ? [baseStyle, { justifyContent, marginBottom: resolvedTabsOffset }] : side === "bottom" ? [baseStyle, { justifyContent, marginTop: resolvedTabsOffset }] : side === "left" ? [baseStyle, { justifyContent, marginRight: resolvedTabsOffset }] : [baseStyle, { justifyContent, marginLeft: resolvedTabsOffset }];
     return /* @__PURE__ */ jsx(
       TabsContainerComponent,
       {
-        position,
-        className: `rn-ocs-tabs rn-ocs-tabs--${position}`,
+        position: side,
+        align,
+        className: `rn-ocs-tabs rn-ocs-tabs--${side}`,
         style: containerStyle,
         ariaLabel: "Card tabs",
         cardNames,
@@ -558,7 +580,8 @@ function OverlappingCardsScrollRN(props) {
             {
               name,
               index,
-              position,
+              position: side,
+              align,
               isPrincipal,
               influence,
               animate,
@@ -572,121 +595,126 @@ function OverlappingCardsScrollRN(props) {
               onPress: pressTab,
               onClick: pressTab
             },
-            `rn-ocs-tab-${position}-${index}`
+            `rn-ocs-tab-${side}-${index}`
           );
         })
       }
     );
   };
-  return /* @__PURE__ */ jsx(
-    OverlappingCardsScrollRNControllerContext.Provider,
-    {
-      value: controllerContextValue,
-      children: /* @__PURE__ */ jsxs(View, { style: [styles.shell, style], children: [
-        renderTabs("above"),
-        renderPageDots("above"),
-        /* @__PURE__ */ jsxs(
-          View,
-          {
-            style: [styles.root, { height: resolvedCardHeight }],
-            onLayout: (event) => {
-              const width = event.nativeEvent.layout.width || 1;
-              setViewportWidth(Math.max(1, width));
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                Animated.ScrollView,
+  const tabsBeforeStage = parsedTabsPosition.side === "top" || parsedTabsPosition.side === "left";
+  const stageAndDots = /* @__PURE__ */ jsxs(Fragment2, { children: [
+    renderPageDots("above"),
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: [styles.root, { height: resolvedCardHeight }],
+        onLayout: (event) => {
+          const width = event.nativeEvent.layout.width || 1;
+          setViewportWidth(Math.max(1, width));
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Animated.ScrollView,
+            {
+              ref: scrollRef,
+              horizontal: true,
+              style: [styles.scrollRegion, { height: resolvedCardHeight }],
+              contentContainerStyle: {
+                width: layout.trackWidth,
+                height: resolvedCardHeight
+              },
+              onScroll,
+              onScrollBeginDrag: cancelFocusTransition,
+              onMomentumScrollBegin: cancelFocusTransition,
+              scrollEventThrottle: 16,
+              showsHorizontalScrollIndicator,
+              snapToInterval: shouldSnapToCard ? layout.stepDistance : void 0,
+              snapToAlignment: shouldSnapToCard ? "start" : void 0,
+              decelerationRate: shouldSnapToCard ? snapDecelerationRate : "normal",
+              disableIntervalMomentum: shouldSnapToCard ? snapDisableIntervalMomentum : false,
+              children: /* @__PURE__ */ jsx(
+                View,
                 {
-                  ref: scrollRef,
-                  horizontal: true,
-                  style: [styles.scrollRegion, { height: resolvedCardHeight }],
-                  contentContainerStyle: {
-                    width: layout.trackWidth,
-                    height: resolvedCardHeight
-                  },
-                  onScroll,
-                  onScrollBeginDrag: cancelFocusTransition,
-                  onMomentumScrollBegin: cancelFocusTransition,
-                  scrollEventThrottle: 16,
-                  showsHorizontalScrollIndicator,
-                  snapToInterval: shouldSnapToCard ? layout.stepDistance : void 0,
-                  snapToAlignment: shouldSnapToCard ? "start" : void 0,
-                  decelerationRate: shouldSnapToCard ? snapDecelerationRate : "normal",
-                  disableIntervalMomentum: shouldSnapToCard ? snapDisableIntervalMomentum : false,
-                  children: /* @__PURE__ */ jsx(
-                    View,
-                    {
-                      style: [
-                        styles.track,
-                        { width: layout.trackWidth, height: resolvedCardHeight }
+                  style: [
+                    styles.track,
+                    { width: layout.trackWidth, height: resolvedCardHeight }
+                  ],
+                  children: cards.map((card, index) => {
+                    var _a;
+                    const restingRightX = index === 0 ? 0 : (index - 1) * layout.peek + layout.cardWidth;
+                    const restingLeftX = index * layout.peek;
+                    const cardXDuringNormalScroll = index === 0 ? 0 : scrollX.interpolate({
+                      inputRange: index === 1 ? [0, layout.stepDistance] : [
+                        (index - 1) * layout.stepDistance,
+                        index * layout.stepDistance
+                      ],
+                      outputRange: [restingRightX, restingLeftX],
+                      extrapolate: "clamp"
+                    });
+                    const cardXDuringFocusTransition = focusTransition ? focusTransitionProgress.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [
+                        resolveCardXAtProgress(
+                          index,
+                          focusTransition.fromProgress,
+                          layout
+                        ),
+                        resolveCardXAtProgress(
+                          index,
+                          focusTransition.toProgress,
+                          layout
+                        )
                       ],
-                      children: cards.map((card, index) => {
-                        var _a;
-                        const restingRightX = index === 0 ? 0 : (index - 1) * layout.peek + layout.cardWidth;
-                        const restingLeftX = index * layout.peek;
-                        const cardXDuringNormalScroll = index === 0 ? 0 : scrollX.interpolate({
-                          inputRange: index === 1 ? [0, layout.stepDistance] : [
-                            (index - 1) * layout.stepDistance,
-                            index * layout.stepDistance
-                          ],
-                          outputRange: [restingRightX, restingLeftX],
-                          extrapolate: "clamp"
-                        });
-                        const cardXDuringFocusTransition = focusTransition ? focusTransitionProgress.interpolate({
-                          inputRange: [0, 1],
-                          outputRange: [
-                            resolveCardXAtProgress(
-                              index,
-                              focusTransition.fromProgress,
-                              layout
-                            ),
-                            resolveCardXAtProgress(
-                              index,
-                              focusTransition.toProgress,
-                              layout
-                            )
-                          ],
-                          extrapolate: "clamp"
-                        }) : null;
-                        const animatedCardX = cardXDuringFocusTransition != null ? cardXDuringFocusTransition : cardXDuringNormalScroll;
-                        return /* @__PURE__ */ jsx(
-                          Animated.View,
+                      extrapolate: "clamp"
+                    }) : null;
+                    const animatedCardX = cardXDuringFocusTransition != null ? cardXDuringFocusTransition : cardXDuringNormalScroll;
+                    return /* @__PURE__ */ jsx(
+                      Animated.View,
+                      {
+                        pointerEvents: "box-none",
+                        style: [
+                          styles.card,
                           {
-                            pointerEvents: "box-none",
-                            style: [
-                              styles.card,
+                            width: layout.cardWidth,
+                            height: resolvedCardHeight,
+                            transform: [
                               {
-                                width: layout.cardWidth,
-                                height: resolvedCardHeight,
-                                transform: [
-                                  {
-                                    translateX: Animated.add(scrollX, animatedCardX)
-                                  }
-                                ]
-                              },
-                              cardContainerStyle
-                            ],
-                            children: /* @__PURE__ */ jsx(View, { pointerEvents: "auto", style: styles.cardContent, children: /* @__PURE__ */ jsx(
-                              OverlappingCardsScrollRNCardIndexContext.Provider,
-                              {
-                                value: index,
-                                children: card
+                                translateX: Animated.add(scrollX, animatedCardX)
                               }
-                            ) })
+                            ]
                           },
-                          (_a = card.key) != null ? _a : `rn-ocs-card-${index}`
-                        );
-                      })
-                    }
-                  )
+                          cardContainerStyle
+                        ],
+                        children: /* @__PURE__ */ jsx(View, { pointerEvents: "auto", style: styles.cardContent, children: /* @__PURE__ */ jsx(
+                          OverlappingCardsScrollRNCardIndexContext.Provider,
+                          {
+                            value: index,
+                            children: card
+                          }
+                        ) })
+                      },
+                      (_a = card.key) != null ? _a : `rn-ocs-card-${index}`
+                    );
+                  })
                 }
-              ),
-              renderPageDots("overlay")
-            ]
-          }
-        ),
-        renderPageDots("below"),
-        renderTabs("below")
+              )
+            }
+          ),
+          renderPageDots("overlay")
+        ]
+      }
+    ),
+    renderPageDots("below")
+  ] });
+  const stageContent = isVerticalTabs ? /* @__PURE__ */ jsx(View, { style: styles.mainColumn, children: stageAndDots }) : stageAndDots;
+  return /* @__PURE__ */ jsx(
+    OverlappingCardsScrollRNControllerContext.Provider,
+    {
+      value: controllerContextValue,
+      children: /* @__PURE__ */ jsxs(View, { style: [isVerticalTabs ? styles.shellRow : styles.shell, style], children: [
+        tabsBeforeStage ? renderTabs() : null,
+        stageContent,
+        !tabsBeforeStage ? renderTabs() : null
       ] })
     }
   );
@@ -696,6 +724,15 @@ var styles = StyleSheet.create({
     width: "100%",
     minWidth: 0
   },
+  shellRow: {
+    width: "100%",
+    minWidth: 0,
+    flexDirection: "row"
+  },
+  mainColumn: {
+    flex: 1,
+    minWidth: 0
+  },
   root: {
     width: "100%",
     minWidth: 0,
@@ -751,6 +788,12 @@ var styles = StyleSheet.create({
     flexWrap: "wrap",
     zIndex: 6
   },
+  tabsColumn: {
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 6
+  },
   tab: {
     borderRadius: 999,
     borderWidth: 1,

package/dist/styles.css

@@ -189,3 +189,34 @@
   outline: 2px solid rgba(16, 57, 93, 0.52);
   outline-offset: 2px;
 }
+.overlapping-cards-scroll--vertical-tabs {
+  flex-direction: row;
+}
+.ocs-main-column {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+.ocs-tabs--vertical {
+  flex-direction: column;
+  width: auto;
+  overflow-x: visible;
+  overflow-y: auto;
+}
+.ocs-tabs--align-start {
+  justify-content: flex-start;
+}
+.ocs-tabs--align-center {
+  justify-content: center;
+}
+.ocs-tabs--align-end {
+  justify-content: flex-end;
+}
+.ocs-tabs--vertical .ocs-tab:hover {
+  transform: translateX(1px);
+}
+.ocs-tabs--left .ocs-tab:hover {
+  transform: translateX(-1px);
+}

package/dist/types/lib/OverlappingCardsScroll.d.ts

@@ -6,10 +6,14 @@ export interface CardItem {
     id: string | number;
     jsx: ReactElement;
 }
+export type TabsPositionSide = "top" | "bottom" | "left" | "right";
+export type TabsPositionAlign = "start" | "center" | "end";
+export type TabsPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "left-top" | "left-center" | "left-bottom" | "right-top" | "right-center" | "right-bottom" | "above" | "below";
 export interface OverlappingCardsScrollTabProps {
     name: string;
     index: number;
-    position: "above" | "below";
+    position: TabsPositionSide;
+    align: TabsPositionAlign;
     isPrincipal: boolean;
     influence: number;
     animate: {
@@ -23,7 +27,8 @@ export interface OverlappingCardsScrollTabProps {
 }
 export interface OverlappingCardsScrollTabsContainerProps {
     children: ReactNode;
-    position: "above" | "below";
+    position: TabsPositionSide;
+    align: TabsPositionAlign;
     className: string;
     style: CSSProperties;
     ariaLabel: string;
@@ -51,7 +56,7 @@ type SharedProps = {
     focusTransitionDuration?: number;
     ariaLabel?: string;
     showTabs?: boolean;
-    tabsPosition?: "above" | "below";
+    tabsPosition?: TabsPosition;
     tabsOffset?: number | string;
     tabsBehavior?: "smooth" | "auto";
     tabsClassName?: string;

package/dist/types/lib/index.d.ts

@@ -1,2 +1,2 @@
 export { OverlappingCardsScroll, OverlappingCardsScrollFocusTrigger, } from "./OverlappingCardsScroll";
-export type { CardItem, OverlappingCardsScrollTabProps, OverlappingCardsScrollTabsContainerProps, } from "./OverlappingCardsScroll";
+export type { CardItem, TabsPosition, TabsPositionSide, TabsPositionAlign, OverlappingCardsScrollTabProps, OverlappingCardsScrollTabsContainerProps, } from "./OverlappingCardsScroll";

package/dist/types/rn/OverlappingCardsScrollRN.native.d.ts

@@ -1,4 +1,4 @@
 import type { OverlappingCardsScrollRNFocusTriggerProps, OverlappingCardsScrollRNProps } from "./OverlappingCardsScrollRN.types";
-export type { OverlappingCardsScrollRNFocusTransitionMode, OverlappingCardsScrollRNFocusTriggerBehavior, OverlappingCardsScrollRNFocusTriggerProps, OverlappingCardsScrollRNItem, OverlappingCardsScrollRNPageDotsPosition, OverlappingCardsScrollRNProps, OverlappingCardsScrollRNSnapDecelerationRate, OverlappingCardsScrollRNTabsContainerProps, OverlappingCardsScrollRNTabProps, OverlappingCardsScrollRNTabsPosition, } from "./OverlappingCardsScrollRN.types";
+export type { OverlappingCardsScrollRNFocusTransitionMode, OverlappingCardsScrollRNFocusTriggerBehavior, OverlappingCardsScrollRNFocusTriggerProps, OverlappingCardsScrollRNItem, OverlappingCardsScrollRNPageDotsPosition, OverlappingCardsScrollRNProps, OverlappingCardsScrollRNSnapDecelerationRate, OverlappingCardsScrollRNTabsAlign, OverlappingCardsScrollRNTabsContainerProps, OverlappingCardsScrollRNTabProps, OverlappingCardsScrollRNTabsPosition, } from "./OverlappingCardsScrollRN.types";
 export declare function OverlappingCardsScrollRNFocusTrigger({ children, style, textStyle, behavior, transitionMode, disabled, accessibilityLabel, testID, onPress, onClick, ...pressableProps }: OverlappingCardsScrollRNFocusTriggerProps): import("react/jsx-runtime").JSX.Element;
 export declare function OverlappingCardsScrollRN(props: OverlappingCardsScrollRNProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/rn/OverlappingCardsScrollRN.types.d.ts

@@ -8,11 +8,13 @@ export type OverlappingCardsScrollRNFocusTriggerBehavior = OverlappingCardsScrol
 export type OverlappingCardsScrollRNFocusTransitionMode = NonNullable<OverlappingCardsScrollWebFocusTriggerProps["transitionMode"]>;
 export type OverlappingCardsScrollRNSnapDecelerationRate = "normal" | "fast" | number;
 export type OverlappingCardsScrollRNItem = OverlappingCardsScrollWebCardItem;
-export type OverlappingCardsScrollRNTabsPosition = "above" | "below";
+export type OverlappingCardsScrollRNTabsPosition = "top" | "bottom" | "left" | "right";
+export type OverlappingCardsScrollRNTabsAlign = "start" | "center" | "end";
 export interface OverlappingCardsScrollRNTabProps {
     name: string;
     index: number;
     position: OverlappingCardsScrollRNTabsPosition;
+    align: OverlappingCardsScrollRNTabsAlign;
     isPrincipal: boolean;
     influence: number;
     animate: {
@@ -33,6 +35,7 @@ export interface OverlappingCardsScrollRNTabProps {
 export interface OverlappingCardsScrollRNTabsContainerProps {
     children: ReactNode;
     position: OverlappingCardsScrollRNTabsPosition;
+    align: OverlappingCardsScrollRNTabsAlign;
     className: string;
     style: StyleProp<ViewStyle>;
     ariaLabel: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "overlapping-cards-scroll",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Overlapping cards scroll component for React, React Native, and React Native Web.",
   "license": "MIT",
   "type": "module",

package/src/lib/OverlappingCardsScroll.css

@@ -213,3 +213,42 @@
   outline: 2px solid rgba(16, 57, 93, 0.52);
   outline-offset: 2px;
 }
+
+.overlapping-cards-scroll--vertical-tabs {
+  flex-direction: row;
+}
+
+.ocs-main-column {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.ocs-tabs--vertical {
+  flex-direction: column;
+  width: auto;
+  overflow-x: visible;
+  overflow-y: auto;
+}
+
+.ocs-tabs--align-start {
+  justify-content: flex-start;
+}
+
+.ocs-tabs--align-center {
+  justify-content: center;
+}
+
+.ocs-tabs--align-end {
+  justify-content: flex-end;
+}
+
+.ocs-tabs--vertical .ocs-tab:hover {
+  transform: translateX(1px);
+}
+
+.ocs-tabs--left .ocs-tab:hover {
+  transform: translateX(-1px);
+}