overlapping-cards-scroll 0.1.0 → 0.1.2

package/README.md

@@ -68,16 +68,24 @@ import 'overlapping-cards-scroll/styles.css'
 ## Props
 
 - `children`: card nodes
+- `items` (`{ id: string | number; name: string; jsx: ReactElement }[]`) optional alternative to `children`; required for named tabs (`showTabs`)
 - `cardHeight` (`number | string`, default `300`)
 - `cardWidth` (`number | string`) accepts px number (e.g. `250`) or percent string (e.g. `'50%'`)
 - `cardWidthRatio` (`number`, default `1 / 3`)
 - `basePeek` (`number`, default `64`)
 - `minPeek` (`number`, default `10`)
 - `maxPeek` (`number`, default `84`)
+- `cardContainerStyle` (web: `CSSProperties`, RN native: `StyleProp<ViewStyle>`) applied to each positioned card container
 - `showPageDots` (`boolean`, default `false`) renders clickable page dots
 - `pageDotsPosition` (`'above' | 'below' | 'overlay'`, default `'below'`)
 - `pageDotsOffset` (`number | string`, default `10`) distance from stage
 - `pageDotsBehavior` (`'smooth' | 'auto'`, web only, default `'smooth'`)
+- `showTabs` (`boolean`, default `false`) renders card-name tabs when `items` is provided
+- `tabsPosition` (`'above' | 'below'`, default `'above'`)
+- `tabsOffset` (`number | string`, default `10`)
+- `tabsBehavior` (`'smooth' | 'auto'`, web only, default `'smooth'`)
+- `tabsComponent` (custom tab renderer; supported on web and RN native)
+- `tabsContainerComponent` (custom tab container renderer; supported on web and RN native)
 - `snapToCardOnRelease` (`boolean`, default `true`) web/RN-web uses idle + mousemove snap, RN native uses `snapToInterval` on iOS
 - `snapReleaseDelay` (`number`, default `800`) web/RN-web debounce before auto-snap
 - `snapDecelerationRate` (`'normal' | 'fast' | number`, RN native only, default `'normal'`) controls fling feel while snapping
@@ -106,6 +114,14 @@ Expo development:
 npm run dev:expo
 ```
 
+The Expo app shell lives in `expo-demo/` and imports the demo screen from the package root via `../App`.
+You can also run it directly with:
+
+```bash
+cd expo-demo
+npm run dev
+```
+
 Build package artifacts:
 
 ```bash

package/dist/react-native-web.cjs

@@ -23,7 +23,7 @@ __export(OverlappingCardsScrollRN_web_exports, {
   OverlappingCardsScrollRNFocusTrigger: () => OverlappingCardsScrollRNFocusTrigger
 });
 module.exports = __toCommonJS(OverlappingCardsScrollRN_web_exports);
-var import_react_native_web = require("react-native-web");
+var import_react_native = require("react-native");
 
 // src/lib/OverlappingCardsScroll.tsx
 var import_react = require("react");
@@ -721,10 +721,19 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 function OverlappingCardsScrollRNFocusTrigger({
   children = "Make principal",
   className = "",
+  style = void 0,
+  textStyle = void 0,
+  behavior = "smooth",
+  transitionMode = "swoop",
+  disabled = false,
+  accessibilityLabel = void 0,
+  testID = void 0,
   onPress = void 0,
   onClick = void 0,
   ...buttonProps
 }) {
+  void style;
+  void textStyle;
   const handleClick = (event) => {
     onClick == null ? void 0 : onClick(event);
     onPress == null ? void 0 : onPress(event);
@@ -733,6 +742,11 @@ function OverlappingCardsScrollRNFocusTrigger({
     OverlappingCardsScrollFocusTrigger,
     {
       className,
+      behavior,
+      transitionMode,
+      disabled,
+      "aria-label": accessibilityLabel,
+      "data-testid": testID,
       onClick: handleClick,
       ...buttonProps,
       children
@@ -740,7 +754,6 @@ function OverlappingCardsScrollRNFocusTrigger({
   );
 }
 function OverlappingCardsScrollRN({
-  children,
   style = void 0,
   showsHorizontalScrollIndicator = true,
   snapDecelerationRate = "normal",
@@ -750,9 +763,14 @@ function OverlappingCardsScrollRN({
   void showsHorizontalScrollIndicator;
   void snapDecelerationRate;
   void snapDisableIntervalMomentum;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_web.View, { style: [styles.root, style], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OverlappingCardsScroll, { ...overlappingCardsScrollProps, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.View, { style: [styles.root, style], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    OverlappingCardsScroll,
+    {
+      ...overlappingCardsScrollProps
+    }
+  ) });
 }
-var styles = import_react_native_web.StyleSheet.create({
+var styles = import_react_native.StyleSheet.create({
   root: {
     width: "100%",
     minWidth: 0,

package/dist/react-native-web.js

@@ -1,5 +1,5 @@
 // src/rn/OverlappingCardsScrollRN.web.tsx
-import { StyleSheet, View } from "react-native-web";
+import { StyleSheet, View } from "react-native";
 
 // src/lib/OverlappingCardsScroll.tsx
 import {
@@ -707,10 +707,19 @@ import { jsx as jsx2 } from "react/jsx-runtime";
 function OverlappingCardsScrollRNFocusTrigger({
   children = "Make principal",
   className = "",
+  style = void 0,
+  textStyle = void 0,
+  behavior = "smooth",
+  transitionMode = "swoop",
+  disabled = false,
+  accessibilityLabel = void 0,
+  testID = void 0,
   onPress = void 0,
   onClick = void 0,
   ...buttonProps
 }) {
+  void style;
+  void textStyle;
   const handleClick = (event) => {
     onClick == null ? void 0 : onClick(event);
     onPress == null ? void 0 : onPress(event);
@@ -719,6 +728,11 @@ function OverlappingCardsScrollRNFocusTrigger({
     OverlappingCardsScrollFocusTrigger,
     {
       className,
+      behavior,
+      transitionMode,
+      disabled,
+      "aria-label": accessibilityLabel,
+      "data-testid": testID,
       onClick: handleClick,
       ...buttonProps,
       children
@@ -726,7 +740,6 @@ function OverlappingCardsScrollRNFocusTrigger({
   );
 }
 function OverlappingCardsScrollRN({
-  children,
   style = void 0,
   showsHorizontalScrollIndicator = true,
   snapDecelerationRate = "normal",
@@ -736,7 +749,12 @@ function OverlappingCardsScrollRN({
   void showsHorizontalScrollIndicator;
   void snapDecelerationRate;
   void snapDisableIntervalMomentum;
-  return /* @__PURE__ */ jsx2(View, { style: [styles.root, style], children: /* @__PURE__ */ jsx2(OverlappingCardsScroll, { ...overlappingCardsScrollProps, children }) });
+  return /* @__PURE__ */ jsx2(View, { style: [styles.root, style], children: /* @__PURE__ */ jsx2(
+    OverlappingCardsScroll,
+    {
+      ...overlappingCardsScrollProps
+    }
+  ) });
 }
 var styles = StyleSheet.create({
   root: {

package/dist/react-native.cjs

@@ -28,7 +28,43 @@ var import_react_native = require("react-native");
 var import_jsx_runtime = require("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 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;
+  }
+  if (typeof value === "string") {
+    const parsed = Number.parseFloat(value.trim());
+    if (Number.isFinite(parsed)) {
+      return parsed;
+    }
+  }
+  return fallback;
+};
+var toNativeDimension = (value, fallback = 0) => {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (trimmed === "auto") {
+      return "auto";
+    }
+    if (trimmed.endsWith("%")) {
+      const percent = Number.parseFloat(trimmed.slice(0, -1));
+      if (Number.isFinite(percent)) {
+        return `${percent}%`;
+      }
+    }
+    const numeric = Number.parseFloat(trimmed);
+    if (Number.isFinite(numeric)) {
+      return numeric;
+    }
+  }
+  return fallback;
+};
 var resolveCardXAtProgress = (index, progress, layout) => {
   const principalIndex = Math.floor(progress);
   const transitionProgress = progress - principalIndex;
@@ -66,26 +102,69 @@ function OverlappingCardsScrollRNFocusTrigger({
   children = "Make principal",
   style = void 0,
   textStyle = void 0,
+  behavior = "smooth",
   transitionMode = "swoop",
+  disabled = false,
+  accessibilityLabel = void 0,
+  testID = void 0,
   onPress = void 0,
+  onClick = void 0,
   ...pressableProps
 }) {
   const { canFocus, focusCard } = useOverlappingCardsScrollRNCardControl();
   const handlePress = (event) => {
+    onClick == null ? void 0 : onClick(event);
     onPress == null ? void 0 : onPress(event);
-    focusCard({ animated: true, transitionMode });
+    focusCard({
+      animated: behavior !== "auto",
+      transitionMode
+    });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_react_native.Pressable,
     {
       style: ({ pressed }) => [styles.focusTrigger, pressed && styles.focusTriggerPressed, style],
-      disabled: !canFocus,
+      disabled: disabled || !canFocus,
+      accessibilityLabel,
+      testID,
       onPress: handlePress,
       ...pressableProps,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [styles.focusTriggerText, textStyle], children })
     }
   );
 }
+function DefaultTabsContainerComponent({
+  children,
+  style,
+  ariaLabel
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { accessibilityRole: "tablist", accessibilityLabel: ariaLabel, style, children });
+}
+function DefaultTabsComponent({
+  name,
+  style,
+  textStyle,
+  accessibilityLabel,
+  accessibilityState,
+  onPress,
+  onClick
+}) {
+  const handlePress = () => {
+    onClick();
+    onPress();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native.Pressable,
+    {
+      accessibilityRole: "tab",
+      accessibilityLabel,
+      accessibilityState,
+      onPress: handlePress,
+      style: ({ pressed }) => [styles.tab, pressed && styles.tabPressed, style],
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [styles.tabText, textStyle], children: name })
+    }
+  );
+}
 var resolveCardWidth = (cardWidth, viewportWidth, fallbackRatio) => {
   if (typeof cardWidth === "number" && Number.isFinite(cardWidth) && cardWidth > 0) {
     return cardWidth;
@@ -105,26 +184,66 @@ var resolveCardWidth = (cardWidth, viewportWidth, fallbackRatio) => {
   }
   return viewportWidth * fallbackRatio;
 };
-function OverlappingCardsScrollRN({
-  children,
-  style = void 0,
-  cardHeight = 300,
-  cardWidth = void 0,
-  cardWidthRatio = 1 / 3,
-  basePeek = 64,
-  minPeek = 10,
-  maxPeek = 84,
-  showsHorizontalScrollIndicator = true,
-  snapToCardOnRelease = true,
-  snapDecelerationRate = "normal",
-  snapDisableIntervalMomentum = false,
-  showPageDots = false,
-  pageDotsPosition = "below",
-  pageDotsOffset = 10,
-  focusTransitionDuration = 420
-}) {
-  const cards = (0, import_react.useMemo)(() => import_react.Children.toArray(children), [children]);
+function OverlappingCardsScrollRN(props) {
+  const {
+    style = void 0,
+    cardHeight = 300,
+    cardWidth = void 0,
+    cardWidthRatio = 1 / 3,
+    basePeek = 64,
+    minPeek = 10,
+    maxPeek = 84,
+    showsHorizontalScrollIndicator = true,
+    snapToCardOnRelease = true,
+    snapDecelerationRate = "normal",
+    snapDisableIntervalMomentum = false,
+    showPageDots = false,
+    pageDotsPosition = "below",
+    pageDotsOffset = 10,
+    focusTransitionDuration = 420,
+    cardContainerStyle = void 0,
+    showTabs = false,
+    tabsPosition = "above",
+    tabsOffset = 10,
+    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(
+        "OverlappingCardsScrollRN: 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);
+  }, [childrenProp, itemsProp]);
+  const cardNames = (0, import_react.useMemo)(() => {
+    if (itemsProp) {
+      return itemsProp.map((item) => item.name);
+    }
+    return null;
+  }, [itemsProp]);
   const cardCount = cards.length;
+  const resolvedTabsPosition = normalizeTabsPosition(tabsPosition);
+  const showNavigationTabs = showTabs && cardCount > 1 && cardNames !== null;
+  const resolvedPageDotsOffset = toNumericOffset(pageDotsOffset, 10);
+  const resolvedTabsOffset = toNumericOffset(tabsOffset, 10);
+  const resolvedCardHeight = toNativeDimension(cardHeight, 300);
+  (0, import_react.useEffect)(() => {
+    if (showTabs && cardNames === null) {
+      console.warn(
+        "OverlappingCardsScrollRN: `showTabs` requires the `items` prop to provide card names. Tabs will not render."
+      );
+    }
+  }, [cardNames, showTabs]);
   const scrollRef = (0, import_react.useRef)(null);
   const scrollX = (0, import_react.useRef)(new import_react_native.Animated.Value(0)).current;
   const scrollXValueRef = (0, import_react.useRef)(0);
@@ -133,6 +252,7 @@ function OverlappingCardsScrollRN({
   const focusTransitionIdRef = (0, import_react.useRef)(0);
   const [viewportWidth, setViewportWidth] = (0, import_react.useState)(1);
   const [focusTransition, setFocusTransition] = (0, import_react.useState)(null);
+  const [scrollProgress, setScrollProgress] = (0, import_react.useState)(0);
   const layout = (0, import_react.useMemo)(() => {
     const safeWidth = Math.max(1, viewportWidth);
     const safeRatio = clamp(cardWidthRatio, 0.2, 0.95);
@@ -175,11 +295,26 @@ function OverlappingCardsScrollRN({
   (0, import_react.useEffect)(() => {
     const id = scrollX.addListener(({ value }) => {
       scrollXValueRef.current = value;
+      if (!showNavigationTabs) {
+        return;
+      }
+      const nextProgress = cardCount > 1 ? clamp(value / layout.stepDistance, 0, cardCount - 1) : 0;
+      setScrollProgress(
+        (currentProgress) => Math.abs(currentProgress - nextProgress) < 1e-3 ? currentProgress : nextProgress
+      );
     });
     return () => {
       scrollX.removeListener(id);
     };
-  }, [scrollX]);
+  }, [cardCount, layout.stepDistance, scrollX, showNavigationTabs]);
+  (0, import_react.useEffect)(() => {
+    if (!showNavigationTabs) {
+      setScrollProgress(0);
+      return;
+    }
+    const nextProgress = cardCount > 1 ? clamp(scrollXValueRef.current / layout.stepDistance, 0, cardCount - 1) : 0;
+    setScrollProgress(nextProgress);
+  }, [cardCount, layout.stepDistance, showNavigationTabs]);
   (0, import_react.useEffect)(() => () => stopFocusTransitionAnimation(), [stopFocusTransitionAnimation]);
   (0, import_react.useEffect)(() => {
     if (cardCount > 1) {
@@ -214,6 +349,9 @@ function OverlappingCardsScrollRN({
       const nextScrollLeft = clamp(safeIndex * layout.stepDistance, 0, layout.scrollRange);
       const transitionMode = (_a = options.transitionMode) != null ? _a : "swoop";
       if (transitionMode === "swoop" && cardCount > 1) {
+        if (showNavigationTabs) {
+          setScrollProgress(safeIndex);
+        }
         const fromProgress = clamp(
           scrollXValueRef.current / layout.stepDistance,
           0,
@@ -270,6 +408,9 @@ function OverlappingCardsScrollRN({
       if (((_c = options.animated) != null ? _c : true) === false) {
         scrollX.setValue(nextScrollLeft);
         scrollXValueRef.current = nextScrollLeft;
+        if (showNavigationTabs) {
+          setScrollProgress(safeIndex);
+        }
       }
     },
     [
@@ -280,6 +421,7 @@ function OverlappingCardsScrollRN({
       layout.scrollRange,
       layout.stepDistance,
       scrollX,
+      showNavigationTabs,
       stopFocusTransitionAnimation
     ]
   );
@@ -304,11 +446,13 @@ function OverlappingCardsScrollRN({
       extrapolate: "clamp"
     });
   }, [focusTransition, focusTransitionProgress, layout.stepDistance, scrollX]);
+  const progress = showNavigationTabs ? scrollProgress : 0;
+  const activeIndex = Math.floor(progress);
   const renderPageDots = (placement) => {
     if (!showNavigationDots || resolvedPageDotsPosition !== placement) {
       return null;
     }
-    const rowStyle = placement === "above" ? [styles.pageDotsRow, { marginBottom: pageDotsOffset }] : placement === "below" ? [styles.pageDotsRow, { marginTop: pageDotsOffset }] : [styles.pageDotsRow, styles.pageDotsOverlay, { bottom: pageDotsOffset }];
+    const rowStyle = placement === "above" ? [styles.pageDotsRow, { marginBottom: resolvedPageDotsOffset }] : placement === "below" ? [styles.pageDotsRow, { marginTop: resolvedPageDotsOffset }] : [styles.pageDotsRow, styles.pageDotsOverlay, { bottom: resolvedPageDotsOffset }];
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_react_native.View,
       {
@@ -344,12 +488,63 @@ function OverlappingCardsScrollRN({
       }
     );
   };
+  const renderTabs = (position) => {
+    if (!showNavigationTabs || resolvedTabsPosition !== position || cardNames === null) {
+      return null;
+    }
+    const containerStyle = position === "above" ? [styles.tabsRow, { marginBottom: resolvedTabsOffset }] : [styles.tabsRow, { marginTop: resolvedTabsOffset }];
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      TabsContainerComponent,
+      {
+        position,
+        className: `rn-ocs-tabs rn-ocs-tabs--${position}`,
+        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 pressTab = () => focusCard(index, {
+            animated: true,
+            transitionMode: "swoop"
+          });
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            TabsComponent,
+            {
+              name,
+              index,
+              position,
+              isPrincipal,
+              influence,
+              animate,
+              className: isPrincipal ? "rn-ocs-tab rn-ocs-tab--active" : "rn-ocs-tab",
+              style: { opacity: animate.opacity },
+              textStyle: isPrincipal ? styles.tabTextActive : void 0,
+              ariaLabel: `Go to ${name}`,
+              ariaCurrent: isPrincipal ? "page" : void 0,
+              accessibilityLabel: `Go to ${name}`,
+              accessibilityState: { selected: isPrincipal },
+              onPress: pressTab,
+              onClick: pressTab
+            },
+            `rn-ocs-tab-${position}-${index}`
+          );
+        })
+      }
+    );
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OverlappingCardsScrollRNControllerContext.Provider, { value: controllerContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: [styles.shell, style], children: [
+    renderTabs("above"),
     renderPageDots("above"),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_react_native.View,
       {
-        style: [styles.root, { height: cardHeight }],
+        style: [styles.root, { height: resolvedCardHeight }],
         onLayout: (event) => {
           const width = event.nativeEvent.layout.width || 1;
           setViewportWidth(Math.max(1, width));
@@ -360,8 +555,8 @@ function OverlappingCardsScrollRN({
             {
               ref: scrollRef,
               horizontal: true,
-              style: [styles.scrollRegion, { height: cardHeight }],
-              contentContainerStyle: { width: layout.trackWidth, height: cardHeight },
+              style: [styles.scrollRegion, { height: resolvedCardHeight }],
+              contentContainerStyle: { width: layout.trackWidth, height: resolvedCardHeight },
               onScroll,
               onScrollBeginDrag: cancelFocusTransition,
               onMomentumScrollBegin: cancelFocusTransition,
@@ -371,7 +566,7 @@ function OverlappingCardsScrollRN({
               snapToAlignment: shouldSnapToCard ? "start" : void 0,
               decelerationRate: shouldSnapToCard ? snapDecelerationRate : "normal",
               disableIntervalMomentum: shouldSnapToCard ? snapDisableIntervalMomentum : false,
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: [styles.track, { width: layout.trackWidth, height: cardHeight }], children: cards.map((card, index) => {
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { 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;
@@ -396,13 +591,14 @@ function OverlappingCardsScrollRN({
                       styles.card,
                       {
                         width: layout.cardWidth,
-                        height: cardHeight,
+                        height: resolvedCardHeight,
                         transform: [
                           {
                             translateX: import_react_native.Animated.add(scrollX, animatedCardX)
                           }
                         ]
-                      }
+                      },
+                      cardContainerStyle
                     ],
                     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OverlappingCardsScrollRNCardIndexContext.Provider, { value: index, children: card })
                   },
@@ -415,7 +611,8 @@ function OverlappingCardsScrollRN({
         ]
       }
     ),
-    renderPageDots("below")
+    renderPageDots("below"),
+    renderTabs("below")
   ] }) });
 }
 var styles = import_react_native.StyleSheet.create({
@@ -466,6 +663,36 @@ var styles = import_react_native.StyleSheet.create({
     borderRadius: 999,
     backgroundColor: "#1f4666"
   },
+  tabsRow: {
+    width: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    flexWrap: "wrap",
+    zIndex: 6
+  },
+  tab: {
+    borderRadius: 999,
+    borderWidth: 1,
+    borderColor: "rgba(30, 67, 99, 0.2)",
+    backgroundColor: "#eef5ff",
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    marginHorizontal: 4,
+    marginVertical: 4
+  },
+  tabPressed: {
+    opacity: 0.85
+  },
+  tabText: {
+    color: "#275070",
+    fontSize: 12,
+    fontWeight: "700",
+    letterSpacing: 0.2
+  },
+  tabTextActive: {
+    color: "#173047"
+  },
   focusTrigger: {
     alignSelf: "flex-start",
     borderRadius: 99,