@coinbase/cds-mobile 8.62.1 → 8.66.1

package/esm/overlays/__stories__/ModalCustomHeader.stories.js

@@ -0,0 +1,86 @@
+import React, { useCallback, useState } from 'react';
+import { Button } from '../../buttons/Button';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { LoremIpsum } from '../../layout/__stories__/LoremIpsum';
+import { HStack } from '../../layout/HStack';
+import { Text } from '../../typography/Text';
+import { Modal } from '../modal/Modal';
+import { ModalBody } from '../modal/ModalBody';
+import { ModalFooter } from '../modal/ModalFooter';
+import { ModalHeader } from '../modal/ModalHeader';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function ModalCustomHeaderScreen() {
+  const [customFontVisible, setCustomFontVisible] = useState(false);
+  const handleCustomFontClose = useCallback(() => setCustomFontVisible(false), []);
+  const handleCustomFontOpen = useCallback(() => setCustomFontVisible(true), []);
+  const [reactNodeVisible, setReactNodeVisible] = useState(false);
+  const handleReactNodeClose = useCallback(() => setReactNodeVisible(false), []);
+  const handleReactNodeOpen = useCallback(() => setReactNodeVisible(true), []);
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsxs(Example, {
+      title: "Custom Font Title",
+      children: [/*#__PURE__*/_jsx(Button, {
+        onPress: handleCustomFontOpen,
+        children: "Open"
+      }), /*#__PURE__*/_jsxs(Modal, {
+        onRequestClose: handleCustomFontClose,
+        visible: customFontVisible,
+        children: [/*#__PURE__*/_jsx(ModalHeader, {
+          closeAccessibilityLabel: "Close",
+          font: "title1",
+          fontSize: "display3",
+          title: "Large Title Modal"
+        }), /*#__PURE__*/_jsx(ModalBody, {
+          children: /*#__PURE__*/_jsx(LoremIpsum, {})
+        }), /*#__PURE__*/_jsx(ModalFooter, {
+          primaryAction: /*#__PURE__*/_jsx(Button, {
+            onPress: handleCustomFontClose,
+            children: "Save"
+          }),
+          secondaryAction: /*#__PURE__*/_jsx(Button, {
+            onPress: handleCustomFontClose,
+            variant: "secondary",
+            children: "Cancel"
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(Example, {
+      title: "ReactNode Title",
+      children: [/*#__PURE__*/_jsx(Button, {
+        onPress: handleReactNodeOpen,
+        children: "Open"
+      }), /*#__PURE__*/_jsxs(Modal, {
+        onRequestClose: handleReactNodeClose,
+        visible: reactNodeVisible,
+        children: [/*#__PURE__*/_jsx(ModalHeader, {
+          closeAccessibilityLabel: "Close",
+          title: /*#__PURE__*/_jsxs(HStack, {
+            alignItems: "center",
+            gap: 0.5,
+            justifyContent: "center",
+            children: [/*#__PURE__*/_jsx(Text, {
+              font: "title2",
+              children: "Custom Title"
+            }), /*#__PURE__*/_jsx(Text, {
+              color: "fgMuted",
+              font: "caption",
+              children: "with subtitle"
+            })]
+          })
+        }), /*#__PURE__*/_jsx(ModalBody, {
+          children: /*#__PURE__*/_jsx(LoremIpsum, {})
+        }), /*#__PURE__*/_jsx(ModalFooter, {
+          primaryAction: /*#__PURE__*/_jsx(Button, {
+            onPress: handleReactNodeClose,
+            children: "Save"
+          }),
+          secondaryAction: /*#__PURE__*/_jsx(Button, {
+            onPress: handleReactNodeClose,
+            variant: "secondary",
+            children: "Cancel"
+          })
+        })]
+      })]
+    })]
+  });
+}

package/esm/overlays/modal/ModalHeader.js

@@ -1,4 +1,4 @@
-const _excluded = ["alignItems", "paddingX", "paddingY", "title", "onBackButtonClick", "backAccessibilityLabel", "backAccessibilityHint", "closeAccessibilityLabel", "closeAccessibilityHint"];
+const _excluded = ["alignItems", "paddingX", "paddingY", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "title", "onBackButtonClick", "backAccessibilityLabel", "backAccessibilityHint", "closeAccessibilityLabel", "closeAccessibilityHint"];
 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';
@@ -15,6 +15,11 @@ export const ModalHeader = _props => {
       alignItems = 'center',
       paddingX = 3,
       paddingY = 2,
+      font = 'headline',
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
       title,
       onBackButtonClick,
       backAccessibilityLabel,
@@ -50,11 +55,15 @@ export const ModalHeader = _props => {
       flexBasis: 0,
       flexGrow: 6,
       justifyContent: "center",
-      children: title && /*#__PURE__*/_jsx(Text, {
+      children: title && (typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
         align: "center",
-        font: "headline",
+        font: font,
+        fontFamily: fontFamily,
+        fontSize: fontSize,
+        fontWeight: fontWeight,
+        lineHeight: lineHeight,
         children: title
-      })
+      }) : title)
     }), /*#__PURE__*/_jsx(Box, {
       alignItems: "flex-end",
       flexBasis: 0,

package/esm/stepper/Stepper.js

@@ -109,9 +109,10 @@ const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
   const previousComplete = (_usePreviousValue = usePreviousValue(complete)) != null ? _usePreviousValue : false;
   const previousActiveStepIndex = (_usePreviousValue2 = usePreviousValue(activeStepIndex)) != null ? _usePreviousValue2 : -1;
   const [progressSprings, progressSpringsApi] = useSprings(steps.length, index => ({
-    progress: complete ? 1 : 0,
-    config: progressSpringConfig,
-    immediate: !animate || disableAnimateOnMount && !hasMounted
+    from: {
+      progress: complete ? 1 : 0
+    },
+    config: progressSpringConfig
   }));
   useEffect(() => {
     // update the previous values for next render

package/esm/tabs/DefaultTab.js

@@ -0,0 +1,75 @@
+const _excluded = ["id", "label", "disabled", "onPress", "count", "max", "accessibilityLabel", "style", "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 { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
+import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interactable';
+import { DotCount } from '../dots/DotCount';
+import { useTheme } from '../hooks/useTheme';
+import { HStack } from '../layout';
+import { Text } from '../typography/Text';
+
+/** Optional dot count and a11y overrides for the default tab row. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DefaultTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      id,
+      label,
+      disabled: disabledProp,
+      onPress,
+      count,
+      max,
+      accessibilityLabel,
+      style,
+      testID
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  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 labelPaddingStyle = useMemo(() => ({
+    paddingTop: theme.space[2],
+    paddingBottom: theme.space[2] - 2
+  }), [theme.space]);
+  return /*#__PURE__*/_jsx(Pressable, _extends({
+    ref: ref,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: "tab",
+    accessibilityState: {
+      disabled: isDisabled,
+      selected: isActive
+    },
+    disabled: isDisabled,
+    onPress: handlePress,
+    style: [disabledProp && !allTabsDisabled ? {
+      opacity: accessibleOpacityDisabled
+    } : undefined, style],
+    testID: testID
+  }, props, {
+    children: /*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      gap: 0.5,
+      children: [/*#__PURE__*/_jsx(Text, {
+        color: isActive ? 'fgPrimary' : 'fg',
+        font: "headline",
+        style: labelPaddingStyle,
+        children: label
+      }), !!count && /*#__PURE__*/_jsx(DotCount, {
+        count: count,
+        max: max
+      })]
+    })
+  }));
+}));
+DefaultTabComponent.displayName = 'DefaultTab';
+export const DefaultTab = DefaultTabComponent;

package/esm/tabs/DefaultTabsActiveIndicator.js

@@ -0,0 +1,58 @@
+const _excluded = ["activeTabRect", "background", "style", "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 { memo, useEffect } from 'react';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import { Box } from '../layout';
+import { tabsSpringConfig } from './Tabs';
+
+/**
+ * Default underline-style indicator for mobile `Tabs`. Pass as
+ * `TabsActiveIndicatorComponent={DefaultTabsActiveIndicator}` with `TabComponent={DefaultTab}`.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const AnimatedBox = Animated.createAnimatedComponent(Box);
+export const DefaultTabsActiveIndicator = /*#__PURE__*/memo(_ref => {
+  let {
+      activeTabRect,
+      background = 'bgPrimary',
+      style,
+      testID
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    width,
+    x
+  } = activeTabRect;
+  const rect = useSharedValue({
+    width,
+    x
+  });
+  useEffect(() => {
+    if (!width) return;
+    rect.value = withSpring({
+      x,
+      width
+    }, tabsSpringConfig);
+  }, [rect, width, x]);
+  const animatedBoxStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: rect.value.x
+    }],
+    width: rect.value.width
+  }), []);
+  if (!width) return null;
+  return /*#__PURE__*/_jsx(AnimatedBox, _extends({
+    animated: true,
+    background: background,
+    bottom: 0,
+    height: 2,
+    left: 0,
+    pointerEvents: "none",
+    position: "absolute",
+    style: [animatedBoxStyle, style],
+    testID: testID,
+    zIndex: 0
+  }, props));
+});
+DefaultTabsActiveIndicator.displayName = 'DefaultTabsActiveIndicator';

package/esm/tabs/TabIndicator.js

@@ -6,6 +6,8 @@ import { Animated } from 'react-native';
 import { Box } from '../layout';
 import { useTabIndicatorStyles } from './hooks/useTabIndicatorStyles';
 import { jsx as _jsx } from "react/jsx-runtime";
+/** @deprecated Use DefaultTabsActiveIndicator instead. This will be removed in a future major release. */
+/** @deprecationExpectedRemoval v10 */
 export const TabIndicator = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
   let {
       width,

package/esm/tabs/TabLabel.js

@@ -19,6 +19,8 @@ const COLORS = {
     inactive: 'fgMuted'
   }
 };
+/** @deprecated Use DefaultTab instead. This will be removed in a future major release. */
+/** @deprecationExpectedRemoval v10 */
 export const TabLabel = /*#__PURE__*/memo(_ref => {
   let {
       active,

package/esm/tabs/TabNavigation.js

@@ -12,6 +12,26 @@ import { VStack } from '../layout/VStack';
 import { Pressable } from '../system/Pressable';
 import { TabIndicator } from './TabIndicator';
 import { TabLabel } from './TabLabel';
+
+/**
+ * @deprecated Use Tabs instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use Tabs instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use Tabs instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use Tabs instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TabNavigationComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
   let {

package/esm/tabs/Tabs.js

@@ -1,7 +1,7 @@
 const _excluded = ["id", "registerRef"],
-  _excluded2 = ["tabs", "TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "activeTab", "disabled", "onChange", "styles", "style", "role", "position", "alignSelf", "opacity", "onActiveTabElementChange", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius"],
-  _excluded3 = ["id", "Component", "disabled"],
-  _excluded4 = ["activeTabRect", "position", "style"];
+  _excluded2 = ["tabs", "TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "activeTab", "disabled", "onChange", "styles", "style", "role", "position", "alignSelf", "opacity", "onActiveTabElementChange", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "testID"],
+  _excluded3 = ["id", "Component"],
+  _excluded4 = ["activeTabRect", "position", "style", "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, useImperativeHandle, useRef, useState } from 'react';
@@ -14,6 +14,8 @@ import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interacta
 import { defaultRect } from '@coinbase/cds-common/types/Rect';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box, HStack } from '../layout';
+import { DefaultTab } from './DefaultTab';
+import { DefaultTabsActiveIndicator } from './DefaultTabsActiveIndicator';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AnimatedBox = Animated.createAnimatedComponent(Box);
 const TabContainer = _ref => {
@@ -37,8 +39,8 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
   const mergedProps = useComponentConfig('Tabs', _props);
   const {
       tabs,
-      TabComponent,
-      TabsActiveIndicatorComponent,
+      TabComponent = DefaultTab,
+      TabsActiveIndicatorComponent = DefaultTabsActiveIndicator,
       activeBackground,
       activeTab,
       disabled,
@@ -54,7 +56,8 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       borderTopLeftRadius,
       borderTopRightRadius,
       borderBottomLeftRadius,
-      borderBottomRightRadius
+      borderBottomRightRadius,
+      testID
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const tabsContainerRef = useRef(null);
@@ -101,7 +104,8 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
     opacity: opacity != null ? opacity : disabled ? accessibleOpacityDisabled : 1,
     position: position,
     role: role,
-    style: styles != null && styles.root ? [style, styles.root] : style
+    style: styles != null && styles.root ? [style, styles.root] : style,
+    testID: testID
   }, props, {
     children: /*#__PURE__*/_jsxs(TabsContext.Provider, {
       value: api,
@@ -113,12 +117,12 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
         borderRadius: borderRadius,
         borderTopLeftRadius: borderTopLeftRadius,
         borderTopRightRadius: borderTopRightRadius,
-        style: styles == null ? void 0 : styles.activeIndicator
+        style: styles == null ? void 0 : styles.activeIndicator,
+        testID: testID ? testID + "-active-indicator" : undefined
       }), tabs.map(_ref2 => {
         let {
             id,
-            Component: CustomTabComponent,
-            disabled: tabDisabled
+            Component: CustomTabComponent
           } = _ref2,
           props = _objectWithoutPropertiesLoose(_ref2, _excluded3);
         const RenderedTab = CustomTabComponent != null ? CustomTabComponent : TabComponent;
@@ -126,7 +130,6 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
           id: id,
           registerRef: registerRef,
           children: /*#__PURE__*/_jsx(RenderedTab, _extends({
-            disabled: tabDisabled,
             id: id,
             style: styles == null ? void 0 : styles.tab
           }, props))
@@ -141,7 +144,8 @@ export const TabsActiveIndicator = _ref3 => {
   let {
       activeTabRect,
       position = 'absolute',
-      style
+      style,
+      testID = 'tabs-active-indicator'
     } = _ref3,
     props = _objectWithoutPropertiesLoose(_ref3, _excluded4);
   const previousActiveTabRect = useRef(activeTabRect);
@@ -170,6 +174,6 @@ export const TabsActiveIndicator = _ref3 => {
     position: position,
     role: "none",
     style: [animatedBoxStyle, style],
-    testID: "tabs-active-indicator"
+    testID: testID
   }, props));
 };

package/esm/tabs/__stories__/Tabs.stories.js

@@ -1,79 +1,180 @@
-import React, { useState } from 'react';
+const _excluded = ["title", "defaultActiveTab", "TabComponent", "TabsActiveIndicatorComponent"];
+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; }
+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 { useCallback, useState } from 'react';
+import { sampleTabs } from '@coinbase/cds-common/internal/data/tabs';
 import { gutter } from '@coinbase/cds-common/tokens/sizing';
+import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
-import { VStack } from '../../layout/VStack';
+import { VStack } from '../../layout';
+import { ThemeProvider } from '../../system/ThemeProvider';
+import { defaultTheme } from '../../themes/defaultTheme';
 import { Text } from '../../typography/Text';
-import { TabNavigation } from '../TabNavigation';
+import { DefaultTab } from '../DefaultTab';
+import { DefaultTabsActiveIndicator } from '../DefaultTabsActiveIndicator';
+import { Tabs, TabsActiveIndicator } from '../Tabs';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const tabs = [{
-  id: 'first_item',
-  label: 'First item',
-  onPress: console.warn
+const basicTabs = [{
+  id: 'buy',
+  label: 'Buy',
+  testID: 'buy-tab'
 }, {
-  id: 'second_item',
-  label: 'Second item'
+  id: 'sell',
+  label: 'Sell',
+  testID: 'sell-tab'
 }, {
-  id: 'third_item',
-  label: 'Third item',
-  onPress: console.warn
+  id: 'convert',
+  label: 'Convert',
+  testID: 'convert-tab'
+}];
+const longTabs = sampleTabs.slice(0, 9);
+const tabsWithDisabled = [{
+  id: 'buy',
+  label: 'Buy'
 }, {
-  id: 'fourth_item',
-  label: 'Fourth item'
+  id: 'sell',
+  label: 'Sell',
+  disabled: true
 }, {
-  id: 'fifth_item',
-  label: 'Fifth item'
+  id: 'convert',
+  label: 'Convert'
 }];
-
-// TODO update once _Tabs_ component is complete
-const TabScreen = () => {
-  const [activeTabOne, setActiveTabOne] = useState(tabs[0].id);
-  return /*#__PURE__*/_jsxs(ExampleScreen, {
-    children: [/*#__PURE__*/_jsxs(Example, {
-      overflow: "visible",
-      padding: gutter,
-      title: "Tab System",
-      children: [/*#__PURE__*/_jsx(TabNavigation, {
-        onChange: setActiveTabOne,
-        tabs: tabs,
-        value: activeTabOne
-      }), /*#__PURE__*/_jsxs(VStack, {
-        alignItems: "center",
+const typedTabs = [{
+  id: 'buy',
+  label: 'Buy'
+}, {
+  id: 'sell',
+  label: 'Sell'
+}, {
+  id: 'convert',
+  label: 'Convert'
+}];
+const tabsWithDotCounts = basicTabs.map((tab, index) => index === 0 ? _extends({}, tab, {
+  count: 3,
+  max: 99
+}) : tab);
+const CustomSpringIndicator = props => /*#__PURE__*/_jsx(TabsActiveIndicator, _extends({}, props, {
+  background: "bgOverlay"
+}));
+const TabsExample = _ref => {
+  let {
+      title,
+      defaultActiveTab,
+      TabComponent = DefaultTab,
+      TabsActiveIndicatorComponent = DefaultTabsActiveIndicator
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const [activeTab, setActiveTab] = useState(defaultActiveTab);
+  const handleChange = useCallback(next => setActiveTab(next), []);
+  return /*#__PURE__*/_jsx(Example, {
+    overflow: "visible",
+    padding: gutter,
+    title: title,
+    children: /*#__PURE__*/_jsx(Tabs, _extends({
+      TabComponent: TabComponent,
+      TabsActiveIndicatorComponent: TabsActiveIndicatorComponent,
+      accessibilityLabel: "Example tabs",
+      activeBackground: "bgPrimary",
+      activeTab: activeTab,
+      background: "bg",
+      gap: 4,
+      onChange: handleChange,
+      zIndex: zIndex.navigation
+    }, props))
+  });
+};
+const panelTabs = sampleTabs.slice(0, 3);
+const TabsWithPanelsExample = () => {
+  const [activeTab, setActiveTab] = useState(panelTabs[0]);
+  return /*#__PURE__*/_jsx(Example, {
+    overflow: "visible",
+    padding: gutter,
+    title: "With content panels",
+    children: /*#__PURE__*/_jsxs(VStack, {
+      gap: 3,
+      children: [/*#__PURE__*/_jsx(Text, {
+        font: "body",
+        children: "Pair tab buttons with content regions that follow the active tab (see panel below)."
+      }), /*#__PURE__*/_jsx(Tabs, {
+        TabComponent: DefaultTab,
+        TabsActiveIndicatorComponent: DefaultTabsActiveIndicator,
+        accessibilityLabel: "Content sections",
+        activeBackground: "bg",
+        activeTab: activeTab,
+        background: "bgPrimary",
+        gap: 4,
+        onChange: setActiveTab,
+        tabs: panelTabs,
+        zIndex: zIndex.navigation
+      }), panelTabs.map(tab => (activeTab == null ? void 0 : activeTab.id) === tab.id ? /*#__PURE__*/_jsxs(VStack, {
+        accessibilityLabel: tab.label + " panel",
         background: "bgAlternate",
-        justifyContent: "center",
-        paddingY: 6,
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "label1",
-          children: "Static preview"
-        }), /*#__PURE__*/_jsx(Text, {
-          color: "fgPrimary",
+        gap: 1,
+        padding: 3,
+        children: [/*#__PURE__*/_jsxs(Text, {
           font: "title2",
-          children: activeTabOne
-        })]
-      })]
-    }), /*#__PURE__*/_jsxs(Example, {
-      overflow: "visible",
-      padding: gutter,
-      title: "Tab System (Secondary)",
-      children: [/*#__PURE__*/_jsx(TabNavigation, {
-        onChange: setActiveTabOne,
-        tabs: tabs,
-        value: activeTabOne,
-        variant: "secondary"
-      }), /*#__PURE__*/_jsxs(VStack, {
-        alignItems: "center",
-        background: "bgAlternate",
-        justifyContent: "center",
-        paddingY: 6,
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "label1",
-          children: "Static preview"
+          children: ["Panel: ", tab.label]
         }), /*#__PURE__*/_jsx(Text, {
-          color: "fgPrimary",
-          font: "title2",
-          children: activeTabOne
+          font: "body",
+          children: "Content for this tab."
         })]
-      })]
-    })]
+      }, tab.id) : null)]
+    })
   });
 };
-export default TabScreen;
+const DefaultTabsScreen = () => /*#__PURE__*/_jsxs(ExampleScreen, {
+  children: [/*#__PURE__*/_jsx(TabsExample, {
+    defaultActiveTab: basicTabs[0],
+    tabs: basicTabs,
+    title: "DefaultTab + DefaultTabIndicator"
+  }), /*#__PURE__*/_jsx(ThemeProvider, {
+    activeColorScheme: "dark",
+    theme: defaultTheme,
+    children: /*#__PURE__*/_jsx(TabsExample, {
+      defaultActiveTab: basicTabs[0],
+      tabs: basicTabs,
+      title: "Dark"
+    })
+  }), /*#__PURE__*/_jsx(TabsExample, {
+    background: "bgAlternate",
+    defaultActiveTab: basicTabs[0],
+    tabs: basicTabs,
+    title: "Alternate background"
+  }), /*#__PURE__*/_jsx(TabsExample, {
+    defaultActiveTab: basicTabs.slice(0, 2)[0],
+    tabs: basicTabs.slice(0, 2),
+    title: "Two tabs"
+  }), /*#__PURE__*/_jsx(TabsExample, {
+    defaultActiveTab: basicTabs[1],
+    tabs: basicTabs,
+    title: "Initial second tab"
+  }), /*#__PURE__*/_jsx(TabsExample, {
+    defaultActiveTab: null,
+    tabs: basicTabs,
+    title: "No initial active tab"
+  }), /*#__PURE__*/_jsx(TabsExample, {
+    defaultActiveTab: typedTabs[0],
+    tabs: typedTabs,
+    title: "Typed tab ids"
+  }), /*#__PURE__*/_jsx(TabsExample, {
+    disabled: true,
+    defaultActiveTab: basicTabs[0],
+    tabs: basicTabs,
+    title: "All tabs disabled"
+  }), /*#__PURE__*/_jsx(TabsExample, {
+    defaultActiveTab: tabsWithDisabled[0],
+    tabs: tabsWithDisabled,
+    title: "One tab disabled"
+  }), /*#__PURE__*/_jsx(TabsExample, {
+    defaultActiveTab: tabsWithDotCounts[0],
+    tabs: tabsWithDotCounts,
+    title: "Dot counts (DefaultTab)"
+  }), /*#__PURE__*/_jsx(TabsExample, {
+    TabComponent: DefaultTab,
+    TabsActiveIndicatorComponent: CustomSpringIndicator,
+    defaultActiveTab: basicTabs[0],
+    tabs: basicTabs,
+    title: "TabsActiveIndicator (spring) instead of DefaultTabIndicator"
+  }), /*#__PURE__*/_jsx(TabsWithPanelsExample, {})]
+});
+export default DefaultTabsScreen;

package/esm/tabs/index.js

@@ -1,3 +1,5 @@
+export * from './DefaultTab';
+export * from './DefaultTabsActiveIndicator';
 export * from './SegmentedTabs';
 export * from './TabIndicator';
 export * from './TabLabel';