@coinbase/ui-mobile-playground 4.5.7 → 4.5.9

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 4.5.9 (12/2/2025 PST)
+
+#### 🐞 Fixes
+
+- Regenerate routes. [[#200](https://github.com/coinbase/cds/pull/200)]
+
+## 4.5.8 (12/1/2025 PST)
+
+#### 🐞 Fixes
+
+- Chore: QOL improvements for searching/navigating example component routes. [[#199](https://github.com/coinbase/cds/pull/199)]
+
 ## 4.5.7 (11/19/2025 PST)
 
 #### 🐞 Fixes

package/dts/components/ExamplesListScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExamplesListScreen.d.ts","sourceRoot":"","sources":["../../src/components/ExamplesListScreen.tsx"],"names":[],"mappings":"AAeA,wBAAgB,kBAAkB,4CAkDjC"}
+{"version":3,"file":"ExamplesListScreen.d.ts","sourceRoot":"","sources":["../../src/components/ExamplesListScreen.tsx"],"names":[],"mappings":"AAeA,wBAAgB,kBAAkB,4CAgDjC"}

package/dts/components/IconSheetScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconSheetScreen.d.ts","sourceRoot":"","sources":["../../src/components/IconSheetScreen.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,eAAe,4CAqC9B"}
+{"version":3,"file":"IconSheetScreen.d.ts","sourceRoot":"","sources":["../../src/components/IconSheetScreen.tsx"],"names":[],"mappings":"AAcA,wBAAgB,eAAe,4CA2B9B"}

package/dts/components/useExampleNavigatorProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useExampleNavigatorProps.d.ts","sourceRoot":"","sources":["../../src/components/useExampleNavigatorProps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAUnE,OAAO,KAAK,EAAoB,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAKxF,KAAK,+BAA+B,GAAG;IACrC,cAAc,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC;CACpE,CAAC;AASF,wBAAgB,wBAAwB,CAAC,EAAE,cAAc,EAAE,EAAE,+BAA+B;;;EAsH3F"}
+{"version":3,"file":"useExampleNavigatorProps.d.ts","sourceRoot":"","sources":["../../src/components/useExampleNavigatorProps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAUnE,OAAO,KAAK,EAAoB,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAKxF,KAAK,+BAA+B,GAAG;IACrC,cAAc,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC;CACpE,CAAC;AAIF,wBAAgB,wBAAwB,CAAC,EAAE,cAAc,EAAE,EAAE,+BAA+B;;;EA+G3F"}

package/dts/routes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"routes.d.ts","sourceRoot":"","sources":["../src/routes.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,MAAM;;;GAutBlB,CAAC"}
+{"version":3,"file":"routes.d.ts","sourceRoot":"","sources":["../src/routes.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,MAAM;;;GAkzBlB,CAAC"}

package/esm/components/ExamplesListScreen.js

@@ -4,7 +4,7 @@ import { ListCell } from '@coinbase/cds-mobile/cells/ListCell';
 import { Box } from '@coinbase/cds-mobile/layout/Box';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import includes from 'lodash/includes';
-import { SearchFilterContext, SetSearchFilterContext } from './ExamplesSearchProvider';
+import { SearchFilterContext } from './ExamplesSearchProvider';
 import { keyToRouteName } from './keyToRouteName';
 import { initialRouteKey, searchRouteKey } from './staticRoutes';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -14,7 +14,6 @@ const innerSpacingConfig = {
 export function ExamplesListScreen() {
   var _routeKeys, _useRoute$params;
   const searchFilter = useContext(SearchFilterContext);
-  const setFilter = useContext(SetSearchFilterContext);
 
   // React Navigation Route Param typing is not clean because our routes are dynamic
   const routeKeys = (_routeKeys = (_useRoute$params = useRoute().params) === null || _useRoute$params === void 0 ? void 0 : _useRoute$params.routeKeys) !== null && _routeKeys !== void 0 ? _routeKeys : [];
@@ -26,7 +25,6 @@ export function ExamplesListScreen() {
       item
     } = _ref;
     const handlePress = () => {
-      setFilter('');
       // typing not clean due to dynamic routes
       navigate(keyToRouteName(item));
     };
@@ -37,7 +35,7 @@ export function ExamplesListScreen() {
       onPress: handlePress,
       title: item
     });
-  }, [navigate, setFilter]);
+  }, [navigate]);
   const data = [...routeKeys, 'IconSheet'].sort().filter(key => key !== initialRouteKey && key !== searchRouteKey).filter(key => {
     if (searchFilter !== '') {
       return includes(key.toLowerCase(), searchFilter.toLowerCase());

package/esm/components/IconSheetScreen.js

@@ -1,8 +1,6 @@
-import { ScrollView } from 'react-native';
 import { SvgXml } from 'react-native-svg';
 import { useTheme } from '@coinbase/cds-mobile';
 import { IconSheet } from '@coinbase/cds-mobile/icons/__stories__/IconSheet';
-import { Box } from '@coinbase/cds-mobile/layout';
 import { svgMap } from '../__generated__/iconSvgMap';
 
 // we only have svg assets for sizes xs, s, and m
@@ -14,34 +12,20 @@ const getIconSourceSize = iconSize => {
 };
 export function IconSheetScreen() {
   const theme = useTheme();
-  return /*#__PURE__*/_jsx(ScrollView, {
-    keyboardShouldPersistTaps: "always",
-    persistentScrollbar: false,
-    showsVerticalScrollIndicator: false,
-    style: {
-      backgroundColor: theme.color.bg,
-      height: '100%'
-    },
-    testID: "mobile-playground-scrollview",
-    children: /*#__PURE__*/_jsx(Box, {
-      background: "bg",
-      padding: 2,
-      children: /*#__PURE__*/_jsx(IconSheet, {
-        renderIcon: (iconName, iconSize) => {
-          const size = theme.iconSize[iconSize];
-          const sourceSize = getIconSourceSize(size);
-          const key = "".concat(iconName, "-").concat(sourceSize, "-inactive");
-          if (!(key in svgMap)) {
-            throw new Error("Icon ".concat(key, " not found in iconSvgMap. You probably need to run the generateIconSvgMap script to update it."));
-          }
-          return /*#__PURE__*/_jsx(SvgXml, {
-            accessibilityRole: "image",
-            height: size,
-            width: size,
-            xml: svgMap[key].content
-          }, "".concat(iconName, "-").concat(iconSize));
-        }
-      })
-    })
+  return /*#__PURE__*/_jsx(IconSheet, {
+    renderIcon: (iconName, iconSize) => {
+      const size = theme.iconSize[iconSize];
+      const sourceSize = getIconSourceSize(size);
+      const key = "".concat(iconName, "-").concat(sourceSize, "-inactive");
+      if (!(key in svgMap)) {
+        throw new Error("Icon ".concat(key, " not found in iconSvgMap. You probably need to run the generateIconSvgMap script to update it."));
+      }
+      return /*#__PURE__*/_jsx(SvgXml, {
+        accessibilityRole: "image",
+        height: size,
+        width: size,
+        xml: svgMap[key].content
+      }, "".concat(iconName, "-").concat(iconSize));
+    }
   });
 }

package/esm/components/useExampleNavigatorProps.js

@@ -9,13 +9,9 @@ import { Box } from '@coinbase/cds-mobile/layout/Box';
 import { HStack } from '@coinbase/cds-mobile/layout/HStack';
 import { Spacer } from '@coinbase/cds-mobile/layout/Spacer';
 import { TextHeadline } from '@coinbase/cds-mobile/typography/TextHeadline';
-import { SetSearchFilterContext } from './ExamplesSearchProvider';
+import { SearchFilterContext, SetSearchFilterContext } from './ExamplesSearchProvider';
 import { initialRouteName, searchRouteName } from './staticRoutes';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const invisiblePressableStyle = {
-  width: 40,
-  height: 40
-};
 const iconButtonHeight = interactableHeight.regular;
 export function useExampleNavigatorProps(_ref) {
   let {
@@ -26,6 +22,7 @@ export function useExampleNavigatorProps(_ref) {
     top
   } = useSafeAreaInsets();
   const [headerSize, onLayout] = useLayout();
+  const searchFilter = useContext(SearchFilterContext);
   const setFilter = useContext(SetSearchFilterContext);
   const style = useMemo(() => ({
     marginTop: top
@@ -35,35 +32,21 @@ export function useExampleNavigatorProps(_ref) {
       let {
         navigation,
         route,
-        options,
-        progress,
-        styleInterpolator
+        options
       } = _ref2;
       const isFocused = navigation.isFocused();
       const canGoBack = navigation.canGoBack();
       const goBack = () => {
         navigation.goBack();
+      };
+      const goBackFromSearch = () => {
         setFilter('');
+        navigation.goBack();
       };
       const goToSearch = () => navigation.navigate(searchRouteName);
       const routeName = route.name;
       const titleForScene = options.title;
       const isSearch = routeName === searchRouteName;
-      const {
-        titleStyle
-      } = styleInterpolator({
-        current: {
-          progress: progress.current
-        },
-        next: progress.next && {
-          progress: progress.next
-        },
-        layouts: {
-          header: headerSize,
-          title: headerSize,
-          screen: headerSize
-        }
-      });
       const showBackButton = isFocused && canGoBack && !isSearch;
       const showSearch = routeName === initialRouteName;
       const iconButtonPlaceholder = /*#__PURE__*/_jsx(Box, {
@@ -118,25 +101,23 @@ export function useExampleNavigatorProps(_ref) {
               start: /*#__PURE__*/_jsx(IconButton, {
                 transparent: true,
                 name: "backArrow",
-                onPress: goBack
-              })
+                onPress: goBackFromSearch
+              }),
+              value: searchFilter
             }) : /*#__PURE__*/_jsx(TextHeadline, {
-              animated: true,
               align: "center",
-              style: titleStyle,
               children: titleForScene
             })
           }), /*#__PURE__*/_jsx(Spacer, {}), rightHeaderButton]
         })
       });
     };
-  }, [headerSize, onLayout, setFilter, style, theme.activeColorScheme, setColorScheme]);
+  }, [onLayout, searchFilter, setFilter, style, theme.activeColorScheme, setColorScheme]);
   return useMemo(() => {
     const screenOptions = {
       headerBackAllowFontScaling: false,
       headerBackTitleVisible: false,
       headerTitleAllowFontScaling: false,
-      headerMode: 'float',
       headerStyle: {
         backgroundColor: theme.color.bg,
         borderWidth: 0,

package/esm/routes.js

@@ -2,7 +2,6 @@
  * DO NOT MODIFY
  * Generated from scripts/codegen/main.ts
  */
-
 export const routes = [{
   key: 'Accordion',
   getComponent: () => require('@coinbase/cds-mobile/accordion/__stories__/Accordion.stories').default
@@ -21,18 +20,42 @@ export const routes = [{
 }, {
   key: 'AlertSingleAction',
   getComponent: () => require('@coinbase/cds-mobile/overlays/__stories__/AlertSingleAction.stories').default
+}, {
+  key: 'AlertVerticalActions',
+  getComponent: () => require('@coinbase/cds-mobile/overlays/__stories__/AlertVerticalActions.stories').default
+}, {
+  key: 'AlphaSelect',
+  getComponent: () => require('@coinbase/cds-mobile/alpha/select/__stories__/AlphaSelect.stories').default
+}, {
+  key: 'AlphaTabbedChips',
+  getComponent: () => require('@coinbase/cds-mobile/alpha/tabbed-chips/__stories__/AlphaTabbedChips.stories').default
 }, {
   key: 'AnimatedCaret',
   getComponent: () => require('@coinbase/cds-mobile/motion/__stories__/AnimatedCaret.stories').default
+}, {
+  key: 'AreaChart',
+  getComponent: () => require('@coinbase/cds-mobile-visualization/chart/area/__stories__/AreaChart.stories').default
 }, {
   key: 'Avatar',
   getComponent: () => require('@coinbase/cds-mobile/media/__stories__/Avatar.stories').default
 }, {
   key: 'AvatarButton',
   getComponent: () => require('@coinbase/cds-mobile/buttons/__stories__/AvatarButton.stories').default
+}, {
+  key: 'Axis',
+  getComponent: () => require('@coinbase/cds-mobile-visualization/chart/axis/__stories__/Axis.stories').default
 }, {
   key: 'Banner',
   getComponent: () => require('@coinbase/cds-mobile/banner/__stories__/Banner.stories').default
+}, {
+  key: 'BannerActions',
+  getComponent: () => require('@coinbase/cds-mobile/banner/__stories__/BannerActions.stories').default
+}, {
+  key: 'BannerLayout',
+  getComponent: () => require('@coinbase/cds-mobile/banner/__stories__/BannerLayout.stories').default
+}, {
+  key: 'BarChart',
+  getComponent: () => require('@coinbase/cds-mobile-visualization/chart/bar/__stories__/BarChart.stories').default
 }, {
   key: 'Box',
   getComponent: () => require('@coinbase/cds-mobile/layout/__stories__/Box.stories').default
@@ -57,9 +80,18 @@ export const routes = [{
 }, {
   key: 'CarouselMedia',
   getComponent: () => require('@coinbase/cds-mobile/media/__stories__/CarouselMedia.stories').default
+}, {
+  key: 'CartesianChart',
+  getComponent: () => require('@coinbase/cds-mobile-visualization/chart/__stories__/CartesianChart.stories').default
+}, {
+  key: 'Chart',
+  getComponent: () => require('@coinbase/cds-mobile-visualization/chart/__stories__/Chart.stories').default
 }, {
   key: 'Checkbox',
   getComponent: () => require('@coinbase/cds-mobile/controls/__stories__/Checkbox.stories').default
+}, {
+  key: 'CheckboxCell',
+  getComponent: () => require('@coinbase/cds-mobile/controls/__stories__/CheckboxCell.stories').default
 }, {
   key: 'Chip',
   getComponent: () => require('@coinbase/cds-mobile/chips/__stories__/Chip.stories').default
@@ -81,6 +113,9 @@ export const routes = [{
 }, {
   key: 'ContentCellFallback',
   getComponent: () => require('@coinbase/cds-mobile/cells/__stories__/ContentCellFallback.stories').default
+}, {
+  key: 'ControlGroup',
+  getComponent: () => require('@coinbase/cds-mobile/controls/__stories__/ControlGroup.stories').default
 }, {
   key: 'DateInput',
   getComponent: () => require('@coinbase/cds-mobile/dates/__stories__/DateInput.stories').default
@@ -132,9 +167,6 @@ export const routes = [{
 }, {
   key: 'HintMotion',
   getComponent: () => require('@coinbase/cds-mobile/motion/__stories__/HintMotion.stories').default
-}, {
-  key: 'Icon',
-  getComponent: () => require('@coinbase/cds-mobile/icons/__stories__/Icon.stories').default
 }, {
   key: 'IconButton',
   getComponent: () => require('@coinbase/cds-mobile/buttons/__stories__/IconButton.stories').default
@@ -156,6 +188,9 @@ export const routes = [{
 }, {
   key: 'LinearGradient',
   getComponent: () => require('@coinbase/cds-mobile/gradients/__stories__/LinearGradient.stories').default
+}, {
+  key: 'LineChart',
+  getComponent: () => require('@coinbase/cds-mobile-visualization/chart/line/__stories__/LineChart.stories').default
 }, {
   key: 'Link',
   getComponent: () => require('@coinbase/cds-mobile/typography/__stories__/Link.stories').default
@@ -174,6 +209,9 @@ export const routes = [{
 }, {
   key: 'LottieStatusAnimation',
   getComponent: () => require('@coinbase/cds-mobile/animation/__stories__/LottieStatusAnimation.stories').default
+}, {
+  key: 'MediaChip',
+  getComponent: () => require('@coinbase/cds-mobile/chips/__stories__/MediaChip.stories').default
 }, {
   key: 'ModalBackButton',
   getComponent: () => require('@coinbase/cds-mobile/overlays/__stories__/ModalBackButton.stories').default
@@ -243,6 +281,9 @@ export const routes = [{
 }, {
   key: 'PatternError',
   getComponent: () => require('@coinbase/cds-mobile/system/__stories__/PatternError.stories').default
+}, {
+  key: 'PeriodSelector',
+  getComponent: () => require('@coinbase/cds-mobile-visualization/chart/__stories__/PeriodSelector.stories').default
 }, {
   key: 'Pictogram',
   getComponent: () => require('@coinbase/cds-mobile/illustrations/__stories__/Pictogram.stories').default
@@ -258,15 +299,24 @@ export const routes = [{
 }, {
   key: 'ProgressCircle',
   getComponent: () => require('@coinbase/cds-mobile/visualizations/__stories__/ProgressCircle.stories').default
+}, {
+  key: 'RadioCell',
+  getComponent: () => require('@coinbase/cds-mobile/controls/__stories__/RadioCell.stories').default
 }, {
   key: 'RadioGroup',
   getComponent: () => require('@coinbase/cds-mobile/controls/__stories__/RadioGroup.stories').default
+}, {
+  key: 'ReferenceLine',
+  getComponent: () => require('@coinbase/cds-mobile-visualization/chart/line/__stories__/ReferenceLine.stories').default
 }, {
   key: 'RemoteImage',
   getComponent: () => require('@coinbase/cds-mobile/media/__stories__/RemoteImage.stories').default
 }, {
   key: 'RemoteImageGroup',
   getComponent: () => require('@coinbase/cds-mobile/media/__stories__/RemoteImageGroup.stories').default
+}, {
+  key: 'RollingNumber',
+  getComponent: () => require('@coinbase/cds-mobile/numbers/__stories__/RollingNumber.stories').default
 }, {
   key: 'SearchInput',
   getComponent: () => require('@coinbase/cds-mobile/controls/__stories__/SearchInput.stories').default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/ui-mobile-playground",
-  "version": "4.5.7",
+  "version": "4.5.9",
   "description": "Mobile UI Components in a Playground",
   "repository": {
     "type": "git",
@@ -34,9 +34,9 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "@coinbase/cds-common": "^8.21.5",
-    "@coinbase/cds-mobile": "^8.21.5",
-    "@coinbase/cds-mobile-visualization": "^3.4.0-beta.5",
+    "@coinbase/cds-common": "^8.25.1",
+    "@coinbase/cds-mobile": "^8.25.1",
+    "@coinbase/cds-mobile-visualization": "^3.4.0-beta.7",
     "@react-navigation/elements": "^1.3.17",
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/stack": "^6.3.16",

package/src/components/ExamplesListScreen.tsx

@@ -7,7 +7,7 @@ import { Box } from '@coinbase/cds-mobile/layout/Box';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import includes from 'lodash/includes';
 
-import { SearchFilterContext, SetSearchFilterContext } from './ExamplesSearchProvider';
+import { SearchFilterContext } from './ExamplesSearchProvider';
 import { keyToRouteName } from './keyToRouteName';
 import { initialRouteKey, searchRouteKey } from './staticRoutes';
 
@@ -15,7 +15,6 @@ const innerSpacingConfig: CellSpacing = { paddingX: 1 };
 
 export function ExamplesListScreen() {
   const searchFilter = useContext(SearchFilterContext);
-  const setFilter = useContext(SetSearchFilterContext);
 
   // React Navigation Route Param typing is not clean because our routes are dynamic
   const routeKeys = (useRoute().params as { routeKeys: string[] } | undefined)?.routeKeys ?? [];
@@ -24,7 +23,6 @@ export function ExamplesListScreen() {
   const renderItem: ListRenderItem<string> = useCallback(
     ({ item }) => {
       const handlePress = () => {
-        setFilter('');
         // typing not clean due to dynamic routes
         navigate(keyToRouteName(item) as never);
       };
@@ -39,7 +37,7 @@ export function ExamplesListScreen() {
         />
       );
     },
-    [navigate, setFilter],
+    [navigate],
   );
 
   const data = [...routeKeys, 'IconSheet']

package/src/components/IconSheetScreen.tsx

@@ -1,9 +1,7 @@
-import { ScrollView } from 'react-native';
 import { SvgXml } from 'react-native-svg';
 import type { IconSourcePixelSize } from '@coinbase/cds-common/types';
 import { useTheme } from '@coinbase/cds-mobile';
 import { IconSheet } from '@coinbase/cds-mobile/icons/__stories__/IconSheet';
-import { Box } from '@coinbase/cds-mobile/layout';
 
 import { svgMap } from '../__generated__/iconSvgMap';
 
@@ -17,38 +15,28 @@ const getIconSourceSize = (iconSize: number): IconSourcePixelSize => {
 export function IconSheetScreen() {
   const theme = useTheme();
   return (
-    <ScrollView
-      keyboardShouldPersistTaps="always"
-      persistentScrollbar={false}
-      showsVerticalScrollIndicator={false}
-      style={{ backgroundColor: theme.color.bg, height: '100%' }}
-      testID="mobile-playground-scrollview"
-    >
-      <Box background="bg" padding={2}>
-        <IconSheet
-          renderIcon={(iconName, iconSize) => {
-            const size = theme.iconSize[iconSize];
-            const sourceSize = getIconSourceSize(size);
-            const key = `${iconName}-${sourceSize}-inactive`;
+    <IconSheet
+      renderIcon={(iconName, iconSize) => {
+        const size = theme.iconSize[iconSize];
+        const sourceSize = getIconSourceSize(size);
+        const key = `${iconName}-${sourceSize}-inactive`;
 
-            if (!(key in svgMap)) {
-              throw new Error(
-                `Icon ${key} not found in iconSvgMap. You probably need to run the generateIconSvgMap script to update it.`,
-              );
-            }
+        if (!(key in svgMap)) {
+          throw new Error(
+            `Icon ${key} not found in iconSvgMap. You probably need to run the generateIconSvgMap script to update it.`,
+          );
+        }
 
-            return (
-              <SvgXml
-                key={`${iconName}-${iconSize}`}
-                accessibilityRole="image"
-                height={size}
-                width={size}
-                xml={svgMap[key as keyof typeof svgMap].content}
-              />
-            );
-          }}
-        />
-      </Box>
-    </ScrollView>
+        return (
+          <SvgXml
+            key={`${iconName}-${iconSize}`}
+            accessibilityRole="image"
+            height={size}
+            width={size}
+            xml={svgMap[key as keyof typeof svgMap].content}
+          />
+        );
+      }}
+    />
   );
 }

package/src/components/useExampleNavigatorProps.tsx

@@ -1,5 +1,4 @@
 import React, { useContext, useMemo } from 'react';
-import { Pressable } from 'react-native';
 import type { NativeSyntheticEvent, TextInputChangeEventData } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { ColorScheme } from '@coinbase/cds-common/core/theme';
@@ -14,49 +13,39 @@ import { Spacer } from '@coinbase/cds-mobile/layout/Spacer';
 import { TextHeadline } from '@coinbase/cds-mobile/typography/TextHeadline';
 import type { StackHeaderProps, StackNavigationOptions } from '@react-navigation/stack';
 
-import { SetSearchFilterContext } from './ExamplesSearchProvider';
+import { SearchFilterContext, SetSearchFilterContext } from './ExamplesSearchProvider';
 import { initialRouteName, searchRouteName } from './staticRoutes';
 
 type UseExampleNavigatorPropsOptions = {
   setColorScheme?: React.Dispatch<React.SetStateAction<ColorScheme>>;
 };
 
-const invisiblePressableStyle = {
-  width: 40,
-  height: 40,
-};
-
 const iconButtonHeight = interactableHeight.regular;
 
 export function useExampleNavigatorProps({ setColorScheme }: UseExampleNavigatorPropsOptions) {
   const theme = useTheme();
   const { top } = useSafeAreaInsets();
   const [headerSize, onLayout] = useLayout();
+  const searchFilter = useContext(SearchFilterContext);
   const setFilter = useContext(SetSearchFilterContext);
 
   const style = useMemo(() => ({ marginTop: top }), [top]);
 
   const header = useMemo(() => {
-    return ({ navigation, route, options, progress, styleInterpolator }: StackHeaderProps) => {
+    return ({ navigation, route, options }: StackHeaderProps) => {
       const isFocused = navigation.isFocused();
       const canGoBack = navigation.canGoBack();
       const goBack = () => {
         navigation.goBack();
+      };
+      const goBackFromSearch = () => {
         setFilter('');
+        navigation.goBack();
       };
       const goToSearch = () => navigation.navigate(searchRouteName);
       const routeName = route.name;
       const titleForScene = options.title;
       const isSearch = routeName === searchRouteName;
-      const { titleStyle } = styleInterpolator({
-        current: { progress: progress.current },
-        next: progress.next && { progress: progress.next },
-        layouts: {
-          header: headerSize,
-          title: headerSize,
-          screen: headerSize,
-        },
-      });
       const showBackButton = isFocused && canGoBack && !isSearch;
       const showSearch = routeName === initialRouteName;
 
@@ -109,12 +98,11 @@ export function useExampleNavigatorProps({ setColorScheme }: UseExampleNavigator
                   label=""
                   onChange={handleSearch}
                   placeholder="Search"
-                  start={<IconButton transparent name="backArrow" onPress={goBack} />}
+                  start={<IconButton transparent name="backArrow" onPress={goBackFromSearch} />}
+                  value={searchFilter}
                 />
               ) : (
-                <TextHeadline animated align="center" style={titleStyle}>
-                  {titleForScene}
-                </TextHeadline>
+                <TextHeadline align="center">{titleForScene}</TextHeadline>
               )}
             </Box>
             <Spacer />
@@ -123,14 +111,13 @@ export function useExampleNavigatorProps({ setColorScheme }: UseExampleNavigator
         </Box>
       );
     };
-  }, [headerSize, onLayout, setFilter, style, theme.activeColorScheme, setColorScheme]);
+  }, [onLayout, searchFilter, setFilter, style, theme.activeColorScheme, setColorScheme]);
 
   return useMemo(() => {
     const screenOptions: StackNavigationOptions = {
       headerBackAllowFontScaling: false,
       headerBackTitleVisible: false,
       headerTitleAllowFontScaling: false,
-      headerMode: 'float',
       headerStyle: {
         backgroundColor: theme.color.bg,
         borderWidth: 0,

package/src/routes.ts

@@ -2,7 +2,6 @@
  * DO NOT MODIFY
  * Generated from scripts/codegen/main.ts
  */
-
 export const routes = [
   {
     key: 'Accordion',
@@ -34,11 +33,33 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/overlays/__stories__/AlertSingleAction.stories').default,
   },
+  {
+    key: 'AlertVerticalActions',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/overlays/__stories__/AlertVerticalActions.stories').default,
+  },
+  {
+    key: 'AlphaSelect',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/alpha/select/__stories__/AlphaSelect.stories').default,
+  },
+  {
+    key: 'AlphaTabbedChips',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/alpha/tabbed-chips/__stories__/AlphaTabbedChips.stories')
+        .default,
+  },
   {
     key: 'AnimatedCaret',
     getComponent: () =>
       require('@coinbase/cds-mobile/motion/__stories__/AnimatedCaret.stories').default,
   },
+  {
+    key: 'AreaChart',
+    getComponent: () =>
+      require('@coinbase/cds-mobile-visualization/chart/area/__stories__/AreaChart.stories')
+        .default,
+  },
   {
     key: 'Avatar',
     getComponent: () => require('@coinbase/cds-mobile/media/__stories__/Avatar.stories').default,
@@ -48,10 +69,30 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/buttons/__stories__/AvatarButton.stories').default,
   },
+  {
+    key: 'Axis',
+    getComponent: () =>
+      require('@coinbase/cds-mobile-visualization/chart/axis/__stories__/Axis.stories').default,
+  },
   {
     key: 'Banner',
     getComponent: () => require('@coinbase/cds-mobile/banner/__stories__/Banner.stories').default,
   },
+  {
+    key: 'BannerActions',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/banner/__stories__/BannerActions.stories').default,
+  },
+  {
+    key: 'BannerLayout',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/banner/__stories__/BannerLayout.stories').default,
+  },
+  {
+    key: 'BarChart',
+    getComponent: () =>
+      require('@coinbase/cds-mobile-visualization/chart/bar/__stories__/BarChart.stories').default,
+  },
   {
     key: 'Box',
     getComponent: () => require('@coinbase/cds-mobile/layout/__stories__/Box.stories').default,
@@ -89,11 +130,27 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/media/__stories__/CarouselMedia.stories').default,
   },
+  {
+    key: 'CartesianChart',
+    getComponent: () =>
+      require('@coinbase/cds-mobile-visualization/chart/__stories__/CartesianChart.stories')
+        .default,
+  },
+  {
+    key: 'Chart',
+    getComponent: () =>
+      require('@coinbase/cds-mobile-visualization/chart/__stories__/Chart.stories').default,
+  },
   {
     key: 'Checkbox',
     getComponent: () =>
       require('@coinbase/cds-mobile/controls/__stories__/Checkbox.stories').default,
   },
+  {
+    key: 'CheckboxCell',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/controls/__stories__/CheckboxCell.stories').default,
+  },
   {
     key: 'Chip',
     getComponent: () => require('@coinbase/cds-mobile/chips/__stories__/Chip.stories').default,
@@ -128,6 +185,11 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/cells/__stories__/ContentCellFallback.stories').default,
   },
+  {
+    key: 'ControlGroup',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/controls/__stories__/ControlGroup.stories').default,
+  },
   {
     key: 'DateInput',
     getComponent: () => require('@coinbase/cds-mobile/dates/__stories__/DateInput.stories').default,
@@ -207,10 +269,6 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/motion/__stories__/HintMotion.stories').default,
   },
-  {
-    key: 'Icon',
-    getComponent: () => require('@coinbase/cds-mobile/icons/__stories__/Icon.stories').default,
-  },
   {
     key: 'IconButton',
     getComponent: () =>
@@ -245,6 +303,12 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/gradients/__stories__/LinearGradient.stories').default,
   },
+  {
+    key: 'LineChart',
+    getComponent: () =>
+      require('@coinbase/cds-mobile-visualization/chart/line/__stories__/LineChart.stories')
+        .default,
+  },
   {
     key: 'Link',
     getComponent: () => require('@coinbase/cds-mobile/typography/__stories__/Link.stories').default,
@@ -272,6 +336,10 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/animation/__stories__/LottieStatusAnimation.stories').default,
   },
+  {
+    key: 'MediaChip',
+    getComponent: () => require('@coinbase/cds-mobile/chips/__stories__/MediaChip.stories').default,
+  },
   {
     key: 'ModalBackButton',
     getComponent: () =>
@@ -387,6 +455,12 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/system/__stories__/PatternError.stories').default,
   },
+  {
+    key: 'PeriodSelector',
+    getComponent: () =>
+      require('@coinbase/cds-mobile-visualization/chart/__stories__/PeriodSelector.stories')
+        .default,
+  },
   {
     key: 'Pictogram',
     getComponent: () =>
@@ -412,11 +486,22 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/visualizations/__stories__/ProgressCircle.stories').default,
   },
+  {
+    key: 'RadioCell',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/controls/__stories__/RadioCell.stories').default,
+  },
   {
     key: 'RadioGroup',
     getComponent: () =>
       require('@coinbase/cds-mobile/controls/__stories__/RadioGroup.stories').default,
   },
+  {
+    key: 'ReferenceLine',
+    getComponent: () =>
+      require('@coinbase/cds-mobile-visualization/chart/line/__stories__/ReferenceLine.stories')
+        .default,
+  },
   {
     key: 'RemoteImage',
     getComponent: () =>
@@ -427,6 +512,11 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/media/__stories__/RemoteImageGroup.stories').default,
   },
+  {
+    key: 'RollingNumber',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/numbers/__stories__/RollingNumber.stories').default,
+  },
   {
     key: 'SearchInput',
     getComponent: () =>