@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/system/__stories__/Spectrum.stories.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { useTheme } from '../../hooks/useTheme';
+import { VStack } from '../../layout/VStack';
+import { Text } from '../../typography/Text';
+import { jsx as _jsx } from "react/jsx-runtime";
+const hueNames = ['blue', 'teal', 'green', 'orange', 'yellow', 'gray', 'indigo', 'pink', 'purple', 'red'];
+export const hueSteps = [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100];
+const SpectrumScreen = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "Default",
+      children: hueNames.map(hue => {
+        return /*#__PURE__*/_jsx(VStack, {
+          children: hueSteps.map(step => {
+            const paletteValue = "" + hue + step;
+            const background = "rgb(" + theme.spectrum[paletteValue] + ")";
+            const foreground = getAccessibleColor({
+              background
+            });
+            return /*#__PURE__*/_jsx(VStack, {
+              dangerouslySetBackground: background,
+              children: /*#__PURE__*/_jsx(Text, {
+                align: "center",
+                dangerouslySetColor: foreground,
+                font: "caption",
+                children: paletteValue
+              })
+            }, paletteValue);
+          })
+        }, hue);
+      })
+    })
+  });
+};
+export default SpectrumScreen;

package/esm/system/__stories__/ThemeProvider.stories.js

@@ -0,0 +1,171 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Button } from '../../buttons';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { useTheme } from '../../hooks/useTheme';
+import { VStack } from '../../layout/VStack';
+import { defaultTheme } from '../../themes/defaultTheme';
+import { Text } from '../../typography/Text';
+import { ThemeProvider } from '../ThemeProvider';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Child = _ref => {
+  let {
+    expectedColorScheme
+  } = _ref;
+  const {
+    activeColorScheme
+  } = useTheme();
+  return /*#__PURE__*/_jsx(VStack, {
+    background: "bg",
+    children: /*#__PURE__*/_jsxs(VStack, {
+      gap: 3,
+      padding: 1,
+      children: [/*#__PURE__*/_jsxs(VStack, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          children: "Secondary button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "primary",
+          children: "Primary button"
+        }), /*#__PURE__*/_jsx(Text, {
+          color: "bgSecondary",
+          font: "body",
+          children: "Secondary text"
+        })]
+      }), /*#__PURE__*/_jsxs(VStack, {
+        borderRadius: 200,
+        elevation: 1,
+        gap: 1,
+        padding: 2,
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "body",
+          children: "Elevation 1"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          children: "Secondary button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "primary",
+          children: "Primary button"
+        })]
+      }), /*#__PURE__*/_jsxs(VStack, {
+        borderRadius: 200,
+        elevation: 2,
+        gap: 1,
+        padding: 2,
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "body",
+          children: "Elevation 2"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          children: "Secondary button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "primary",
+          children: "Primary button"
+        })]
+      }), /*#__PURE__*/_jsxs(Text, {
+        font: "body",
+        children: ["Spectrum value at parent level: ", activeColorScheme]
+      }), /*#__PURE__*/_jsxs(Text, {
+        font: "body",
+        children: ["Should be ", expectedColorScheme]
+      })]
+    })
+  });
+};
+const ChildThemeProviderDark = () => {
+  return /*#__PURE__*/_jsx(ThemeProvider, {
+    activeColorScheme: "dark",
+    theme: defaultTheme,
+    children: /*#__PURE__*/_jsx(Child, {
+      expectedColorScheme: "dark"
+    })
+  });
+};
+const customLightTheme = _extends({}, defaultTheme, {
+  lightColor: _extends({}, defaultTheme.lightColor, {
+    bg: "rgb(" + defaultTheme.lightSpectrum.orange50 + ")",
+    bgPrimary: "rgb(" + defaultTheme.lightSpectrum.red20 + ")",
+    bgSecondary: "rgb(" + defaultTheme.lightSpectrum.blue50 + ")"
+  })
+});
+const ChildThemeWithOverrides = () => {
+  return /*#__PURE__*/_jsxs(ThemeProvider, {
+    activeColorScheme: "light",
+    theme: customLightTheme,
+    children: [/*#__PURE__*/_jsx(Text, {
+      font: "body",
+      children: "With theme overrides"
+    }), /*#__PURE__*/_jsx(Child, {
+      expectedColorScheme: "light"
+    })]
+  });
+};
+const customDarkTheme = _extends({}, defaultTheme, {
+  darkColor: _extends({}, defaultTheme.darkColor, {
+    bg: "rgb(" + defaultTheme.darkSpectrum.orange50 + ")",
+    bgPrimary: "rgb(" + defaultTheme.darkSpectrum.red20 + ")",
+    bgSecondary: "rgb(" + defaultTheme.darkSpectrum.blue50 + ")"
+  })
+});
+const ChildThemeWithOverridesDark = () => {
+  return /*#__PURE__*/_jsxs(ThemeProvider, {
+    activeColorScheme: "dark",
+    theme: customDarkTheme,
+    children: [/*#__PURE__*/_jsx(Text, {
+      font: "body",
+      children: "With theme overrides"
+    }), /*#__PURE__*/_jsx(Child, {
+      expectedColorScheme: "dark"
+    })]
+  });
+};
+const ChildThemeWithNestedOverrides = () => {
+  return /*#__PURE__*/_jsx(ThemeProvider, {
+    activeColorScheme: "light",
+    theme: customLightTheme,
+    children: /*#__PURE__*/_jsxs(ThemeProvider, {
+      activeColorScheme: "light",
+      theme: defaultTheme,
+      children: [/*#__PURE__*/_jsx(Text, {
+        font: "body",
+        children: "With theme overrides"
+      }), /*#__PURE__*/_jsx(Child, {
+        expectedColorScheme: "light"
+      })]
+    })
+  });
+};
+const ChildThemeWithNestedOverridesDark = () => {
+  return /*#__PURE__*/_jsx(ThemeProvider, {
+    activeColorScheme: "dark",
+    theme: customDarkTheme,
+    children: /*#__PURE__*/_jsxs(ThemeProvider, {
+      activeColorScheme: "dark",
+      theme: defaultTheme,
+      children: [/*#__PURE__*/_jsx(Text, {
+        font: "body",
+        children: "With theme overrides"
+      }), /*#__PURE__*/_jsx(Child, {
+        expectedColorScheme: "dark"
+      })]
+    })
+  });
+};
+const ThemeProviderTest = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "Nested ThemeProviders",
+      children: /*#__PURE__*/_jsx(ThemeProvider, {
+        activeColorScheme: "light",
+        theme: defaultTheme,
+        children: /*#__PURE__*/_jsxs(VStack, {
+          gap: 3,
+          children: [/*#__PURE__*/_jsx(Child, {
+            expectedColorScheme: "light"
+          }), /*#__PURE__*/_jsx(ChildThemeProviderDark, {}), /*#__PURE__*/_jsx(ChildThemeWithOverrides, {}), /*#__PURE__*/_jsx(ChildThemeWithOverridesDark, {}), /*#__PURE__*/_jsx(ChildThemeWithNestedOverrides, {}), /*#__PURE__*/_jsx(ChildThemeWithNestedOverridesDark, {})]
+        })
+      })
+    })
+  });
+};
+export default ThemeProviderTest;

package/esm/system/index.js

@@ -0,0 +1,7 @@
+export * from './AndroidNavigationBar';
+export * from './EventHandlerProvider';
+export * from './Interactable';
+export * from './Pressable';
+export * from './PressableOpacity';
+export * from './StatusBar';
+export * from './ThemeProvider';

package/esm/tabs/SegmentedTab.js

@@ -0,0 +1,76 @@
+const _excluded = ["id", "label", "disabled", "onPress", "color", "activeColor", "style", "aria-selected", "accessibilityRole", "testID"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo, useCallback, useMemo } from 'react';
+import { Pressable } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
+import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interactable';
+import { useTheme } from '../hooks/useTheme';
+import { Box } from '../layout';
+import { Text } from '../typography/Text';
+import { tabsSpringConfig } from './Tabs';
+import { jsx as _jsx } from "react/jsx-runtime";
+const AnimatedTextHeadline = Animated.createAnimatedComponent(Text);
+const SegmentedTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      id,
+      label,
+      disabled: disabledProp,
+      onPress,
+      color = 'fg',
+      activeColor = 'fgInverse',
+      style,
+      'aria-selected': ariaSelected,
+      accessibilityRole = 'button',
+      testID
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    activeTab,
+    updateActiveTab,
+    disabled: allTabsDisabled
+  } = useTabsContext();
+  const isActive = (activeTab == null ? void 0 : activeTab.id) === id;
+  const isDisabled = disabledProp || allTabsDisabled;
+  const handlePress = useCallback(event => {
+    updateActiveTab(id);
+    onPress == null || onPress(id, event);
+  }, [id, onPress, updateActiveTab]);
+  const theme = useTheme();
+  const activeColorRgbaString = theme.color[activeColor];
+  const inactiveColorRgbaString = theme.color[color];
+  const animatedColor = useSharedValue(isActive ? activeColorRgbaString : inactiveColorRgbaString);
+  animatedColor.value = withSpring(isActive ? activeColorRgbaString : inactiveColorRgbaString, tabsSpringConfig);
+  const animatedTextStyles = useAnimatedStyle(() => ({
+    color: animatedColor.value
+  }), [animatedColor]);
+  const pressableStyle = useMemo(() => ({
+    borderRadius: theme.borderRadius[1000],
+    opacity: disabledProp && !allTabsDisabled ? accessibleOpacityDisabled : undefined
+  }), [theme.borderRadius, disabledProp, allTabsDisabled]);
+  return /*#__PURE__*/_jsx(Pressable, _extends({
+    ref: ref,
+    accessibilityRole: accessibilityRole,
+    "aria-selected": ariaSelected != null ? ariaSelected : isActive,
+    disabled: isDisabled,
+    onPress: handlePress,
+    style: [pressableStyle, style],
+    testID: testID
+  }, props, {
+    children: /*#__PURE__*/_jsx(Box, {
+      alignItems: "center",
+      paddingX: 2,
+      paddingY: 1,
+      children: typeof label === 'string' ? /*#__PURE__*/_jsx(AnimatedTextHeadline, {
+        animated: true,
+        font: "headline",
+        style: animatedTextStyles,
+        testID: testID + "-label",
+        children: label
+      }) : label
+    })
+  }));
+}));
+SegmentedTabComponent.displayName = 'SegmentedTab';
+export const SegmentedTab = SegmentedTabComponent;

package/esm/tabs/SegmentedTabs.js

@@ -0,0 +1,28 @@
+const _excluded = ["TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "background", "borderRadius"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo } from 'react';
+import { SegmentedTab } from './SegmentedTab';
+import { SegmentedTabsActiveIndicator } from './SegmentedTabsActiveIndicator';
+import { Tabs } from './Tabs';
+import { jsx as _jsx } from "react/jsx-runtime";
+const SegmentedTabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      TabComponent = SegmentedTab,
+      TabsActiveIndicatorComponent = SegmentedTabsActiveIndicator,
+      activeBackground = 'bgInverse',
+      background = 'bgSecondary',
+      borderRadius = 1000
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Tabs, _extends({
+    ref: ref,
+    TabComponent: TabComponent,
+    TabsActiveIndicatorComponent: TabsActiveIndicatorComponent,
+    activeBackground: activeBackground,
+    background: background,
+    borderRadius: borderRadius
+  }, props));
+}));
+SegmentedTabsComponent.displayName = 'SegmentedTabs';
+export const SegmentedTabs = SegmentedTabsComponent;

package/esm/tabs/SegmentedTabsActiveIndicator.js

@@ -0,0 +1,15 @@
+const _excluded = ["borderRadius"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React from 'react';
+import { TabsActiveIndicator } from './Tabs';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SegmentedTabsActiveIndicator = _ref => {
+  let {
+      borderRadius = 1000
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(TabsActiveIndicator, _extends({
+    borderRadius: borderRadius
+  }, props));
+};

package/esm/tabs/TabIndicator.js

@@ -0,0 +1,46 @@
+const _excluded = ["width", "x", "background", "testID"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo } from 'react';
+import { Animated } from 'react-native';
+import { Box } from '../layout';
+import { useTabIndicatorStyles } from './hooks/useTabIndicatorStyles';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TabIndicator = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+  let {
+      width,
+      x,
+      background = 'bg',
+      testID
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    widthStyle,
+    xStyle
+  } = useTabIndicatorStyles({
+    width,
+    x
+  });
+  return /*#__PURE__*/_jsx(Animated.View, _extends({
+    ref: forwardedRef,
+    style: xStyle,
+    testID: testID
+  }, props, {
+    children: /*#__PURE__*/_jsx(Box, {
+      background: "bgPrimary",
+      flexGrow: 1,
+      height: 2,
+      overflow: "hidden",
+      testID: "cds-tab-indicator-inner-bar-container",
+      children: /*#__PURE__*/_jsx(Box, {
+        animated: true,
+        background: background,
+        height: 2,
+        style: widthStyle,
+        testID: "cds-tab-indicator-inner-bar",
+        width: "100%"
+      })
+    })
+  }));
+}));
+TabIndicator.displayName = 'TabIndicator';

package/esm/tabs/TabLabel.js

@@ -0,0 +1,111 @@
+const _excluded = ["active", "variant", "count", "max"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { memo, useEffect, useMemo, useRef } from 'react';
+import { Animated, StyleSheet, View } from 'react-native';
+import { DotCount } from '../dots/DotCount';
+import { useTheme } from '../hooks/useTheme';
+import { HStack } from '../layout';
+import { Text } from '../typography/Text';
+import { useDotAnimation } from './hooks/useDotAnimation';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const COLORS = {
+  primary: {
+    active: 'fgPrimary',
+    inactive: 'fg'
+  },
+  secondary: {
+    active: 'fg',
+    inactive: 'fgMuted'
+  }
+};
+export const TabLabel = /*#__PURE__*/memo(_ref => {
+  let {
+      active,
+      variant = 'primary',
+      count = 0,
+      max
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  const shouldMeasureElement = useMemo(() => !active && variant !== 'primary', [active, variant]);
+  const color = useMemo(() => COLORS[variant][active ? 'active' : 'inactive'], [active, variant]);
+  const TextElement = useMemo(() => {
+    if (variant === 'primary') return props => /*#__PURE__*/_jsx(Text, _extends({}, props, {
+      font: "headline"
+    }));
+    if (active) return props => /*#__PURE__*/_jsx(Text, _extends({}, props, {
+      font: "title3"
+    }));
+    return props => /*#__PURE__*/_jsx(Text, _extends({}, props, {
+      font: "title4"
+    }));
+  }, [active, variant]);
+
+  // Styles
+  const dynamicStyles = useMemo(() =>
+  // Only primary tabs need special spacing
+  variant === 'primary' && {
+    paddingTop: theme.space[2],
+    paddingBottom: theme.space[2] - 2 // Account for the 2pt TabIndicator
+  }, [theme.space, variant]);
+
+  // ⚡️ Side effects
+  const lastCount = useRef(0);
+  const {
+    animateIn,
+    animateOut,
+    width,
+    opacity
+  } = useDotAnimation();
+  useEffect(() => {
+    // Animate dotBadge in
+    if (count && lastCount.current !== count) animateIn(count);
+    if (!count && lastCount.current !== count) animateOut(count);
+    lastCount.current = count;
+  }, [count, animateIn, animateOut]);
+
+  // Memoized dot Styles
+  const dotStyles = useMemo(() => ({
+    container: {
+      width
+    },
+    inner: {
+      opacity,
+      marginLeft: theme.space[0.5]
+    }
+  }), [opacity, theme.space, width]);
+  return /*#__PURE__*/_jsxs(HStack, {
+    alignItems: "center",
+    children: [shouldMeasureElement ? /*#__PURE__*/_jsxs(View, {
+      children: [/*#__PURE__*/_jsx(TextElement, _extends({}, props, {
+        color: color,
+        style: dynamicStyles
+      })), /*#__PURE__*/_jsx(Text, _extends({}, props, {
+        "aria-hidden": true,
+        font: "title3",
+        style: styles.hiddenElement
+      }))]
+    }) : /*#__PURE__*/_jsx(TextElement, _extends({}, props, {
+      color: color,
+      style: dynamicStyles
+    })), /*#__PURE__*/_jsx(Animated.View, {
+      style: dotStyles.container,
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: dotStyles.inner,
+        children: /*#__PURE__*/_jsx(DotCount, {
+          count: count,
+          max: max
+        })
+      })
+    })]
+  });
+});
+TabLabel.displayName = 'TabLabel';
+const styles = StyleSheet.create({
+  hiddenElement: {
+    opacity: 0,
+    width: '100%',
+    height: 0
+  }
+});

package/esm/tabs/TabNavigation.js

@@ -0,0 +1,145 @@
+const _excluded = ["tabs", "value", "variant", "testID", "background", "onChange", "Component", "gap", "role"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { ScrollView, View } from 'react-native';
+import { isDevelopment } from '@coinbase/cds-utils';
+import { useHorizontallyScrollingPressables } from '../hooks/useHorizontallyScrollingPressables';
+import { OverflowGradient } from '../layout';
+import { Box } from '../layout/Box';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
+import { Pressable } from '../system/Pressable';
+import { TabIndicator } from './TabIndicator';
+import { TabLabel } from './TabLabel';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TabNavigationComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+  let {
+      tabs,
+      value = tabs[0].id,
+      variant = 'primary',
+      testID = 'tabNavigation',
+      background = 'bg',
+      onChange,
+      Component,
+      gap = 4,
+      role = 'tablist'
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const isPrimary = useMemo(() => variant === 'primary', [variant]);
+  const [activeTabLayout, setActiveTabLayout] = useState({
+    width: 0,
+    x: 0,
+    y: 0,
+    height: 0
+  });
+  const {
+    scrollRef,
+    isScrollContentOverflowing,
+    isScrollContentOffscreenRight,
+    handleScroll,
+    handleScrollContainerLayout,
+    handleScrollContentSizeChange,
+    getPressableLayoutHandler
+  } = useHorizontallyScrollingPressables(value, {
+    setActivePressableLayout: setActiveTabLayout
+  });
+
+  // TO DO: The `tab` role is not being announced correctly because of this RN issue https://github.com/facebook/react-native/issues/43266
+  const descendantAriaRole = role === 'tablist' ? 'tab' : 'radio';
+  const getTabPressHandler = useCallback(_ref2 => {
+    let {
+      id,
+      onPress
+    } = _ref2;
+    return function handleTabPress() {
+      onChange(id);
+      onPress == null || onPress(id); // handle callback
+    };
+  }, [onChange]);
+  useEffect(() => {
+    if (isDevelopment() && variant === 'secondary') {
+      console.warn('Deprecation Warning: Secondary tabs are deprecated, please migrate to primary tabs. In the case of nested tabs, consider using TabbedChips');
+    }
+  }, [variant]);
+
+  // Iterate over the tabs and create Pressable TabLabels
+  const tabLabels = useMemo(() => tabs.filter(Boolean).map(_ref3 => {
+    let {
+      id,
+      onPress,
+      label,
+      disabled,
+      accessibilityLabel = label,
+      count,
+      max,
+      testID: tabLabelTestID = testID + "-tabLabel--" + id,
+      Component: TabComponent
+    } = _ref3;
+    const isActiveTab = id === value;
+    const a11yLabelToString = typeof accessibilityLabel === 'string' ? accessibilityLabel : undefined;
+    const a11yState = role === 'radiogroup' ? {
+      checked: isActiveTab
+    } : {
+      selected: isActiveTab
+    };
+    const CustomTabComponent = TabComponent != null ? TabComponent : Component;
+    return /*#__PURE__*/_jsx(View, {
+      onLayout: getPressableLayoutHandler(id),
+      children: /*#__PURE__*/_jsx(Pressable, {
+        transparentWhilePressed: true,
+        accessibilityHint: a11yLabelToString,
+        accessibilityLabel: a11yLabelToString,
+        accessibilityRole: descendantAriaRole,
+        accessibilityState: a11yState,
+        background: "transparent",
+        disabled: disabled,
+        onPress: getTabPressHandler({
+          id,
+          onPress
+        }),
+        testID: tabLabelTestID,
+        children: CustomTabComponent ? /*#__PURE__*/_jsx(CustomTabComponent, {
+          active: isActiveTab,
+          id: id,
+          label: label
+        }) : /*#__PURE__*/_jsx(TabLabel, {
+          active: id === value,
+          count: count,
+          max: max,
+          variant: variant,
+          children: label
+        })
+      })
+    }, id);
+  }), [tabs, testID, value, role, Component, getPressableLayoutHandler, descendantAriaRole, getTabPressHandler, variant]);
+  return /*#__PURE__*/_jsxs(Box, _extends({
+    ref: forwardedRef,
+    background: background,
+    overflow: isScrollContentOverflowing && isScrollContentOffscreenRight ? undefined : 'visible',
+    testID: testID
+  }, props, {
+    children: [/*#__PURE__*/_jsx(ScrollView, {
+      ref: scrollRef,
+      horizontal: true,
+      accessibilityRole: role,
+      onContentSizeChange: handleScrollContentSizeChange,
+      onLayout: handleScrollContainerLayout,
+      onScroll: handleScroll,
+      scrollEventThrottle: 1,
+      showsHorizontalScrollIndicator: false,
+      children: /*#__PURE__*/_jsxs(VStack, {
+        children: [/*#__PURE__*/_jsx(HStack, {
+          gap: gap,
+          children: tabLabels
+        }), isPrimary && /*#__PURE__*/_jsx(TabIndicator, {
+          background: background,
+          width: activeTabLayout.width,
+          x: activeTabLayout.x
+        })]
+      })
+    }), isScrollContentOverflowing && isScrollContentOffscreenRight ? /*#__PURE__*/_jsx(OverflowGradient, {}) : null]
+  }));
+}));
+export const TabNavigation = TabNavigationComponent;
+TabNavigationComponent.displayName = 'TabNavigation';