@coinbase/cds-mobile 8.48.3 → 8.49.0

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.49.0 (2/26/2026 PST)
+
+#### 🚀 Updates
+
+- Add styles props to Tab components. [[#438](https://github.com/coinbase/cds/pull/438)]
+
 ## 8.48.3 ((2/25/2026, 08:36 PM PST))
 
 This is an artificial version bump with no new change.

package/dts/buttons/DefaultSlideButtonBackground.d.ts

@@ -1,18 +1,19 @@
 import React from 'react';
-import { View } from 'react-native';
-export declare const styles: {
-  base: {
-    width: '100%';
-    height: '100%';
-    alignItems: 'center';
-    justifyContent: 'center';
-  };
-};
+import type { View } from 'react-native';
 export declare const DefaultSlideButtonBackground: React.MemoExoticComponent<
   React.ForwardRefExoticComponent<
     Pick<
       import('./SlideButton').SlideButtonBaseProps,
-      'borderRadius' | 'disabled' | 'checked' | 'variant' | 'compact' | 'uncheckedLabel'
+      | 'borderRadius'
+      | 'borderTopLeftRadius'
+      | 'borderTopRightRadius'
+      | 'borderBottomLeftRadius'
+      | 'borderBottomRightRadius'
+      | 'disabled'
+      | 'checked'
+      | 'variant'
+      | 'compact'
+      | 'uncheckedLabel'
     > & {
       progress: import('@react-spring/core').SpringValue<number>;
       style?: import('react-native').StyleProp<import('react-native').ViewStyle>;

package/dts/buttons/DefaultSlideButtonBackground.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultSlideButtonBackground.d.ts","sourceRoot":"","sources":["../../src/buttons/DefaultSlideButtonBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAc,IAAI,EAAE,MAAM,cAAc,CAAC;AAQhD,eAAO,MAAM,MAAM;;;;;;;CAOjB,CAAC;AAEH,eAAO,MAAM,4BAA4B;;;+BA2CxC,CAAC"}
+{"version":3,"file":"DefaultSlideButtonBackground.d.ts","sourceRoot":"","sources":["../../src/buttons/DefaultSlideButtonBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAQzC,eAAO,MAAM,4BAA4B;;;+BAyDxC,CAAC"}

package/dts/buttons/DefaultSlideButtonHandle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultSlideButtonHandle.d.ts","sourceRoot":"","sources":["../../src/buttons/DefaultSlideButtonHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAiBzC,OAAO,KAAK,EAAE,oBAAoB,EAA0B,MAAM,eAAe,CAAC;AAElF,eAAO,MAAM,eAAe;;;CAAgE,CAAC;AAE7F,MAAM,MAAM,6BAA6B,GAAG,IAAI,CAAC,oBAAoB,EAAE,SAAS,GAAG,SAAS,CAAC,GAAG;IAC9F,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iCAAiC,GAAG,CAC9C,KAAK,EAAE,6BAA6B,KACjC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,MAAM,MAAM,+BAA+B,GAAG,IAAI,CAAC,oBAAoB,EAAE,SAAS,GAAG,SAAS,CAAC,GAAG;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,mCAAmC,GAAG,CAChD,KAAK,EAAE,+BAA+B,KACnC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;CAgBjB,CAAC;AAEH,eAAO,MAAM,wBAAwB,sDACT,6BAA6B,6CAmBxD,CAAC;AAEF,eAAO,MAAM,0BAA0B,iDAChB,+BAA+B,6CAgBrD,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;;;;;;;;;+BA+EpC,CAAC"}
+{"version":3,"file":"DefaultSlideButtonHandle.d.ts","sourceRoot":"","sources":["../../src/buttons/DefaultSlideButtonHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAiBzC,OAAO,KAAK,EAAE,oBAAoB,EAA0B,MAAM,eAAe,CAAC;AAElF,eAAO,MAAM,eAAe;;;CAAgE,CAAC;AAE7F,MAAM,MAAM,6BAA6B,GAAG,IAAI,CAAC,oBAAoB,EAAE,SAAS,GAAG,SAAS,CAAC,GAAG;IAC9F,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iCAAiC,GAAG,CAC9C,KAAK,EAAE,6BAA6B,KACjC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,MAAM,MAAM,+BAA+B,GAAG,IAAI,CAAC,oBAAoB,EAAE,SAAS,GAAG,SAAS,CAAC,GAAG;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,mCAAmC,GAAG,CAChD,KAAK,EAAE,+BAA+B,KACnC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;CAgBjB,CAAC;AAEH,eAAO,MAAM,wBAAwB,sDACT,6BAA6B,6CAmBxD,CAAC;AAEF,eAAO,MAAM,0BAA0B,iDAChB,+BAA+B,6CAgBrD,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;;;;;;;;;+BAuFpC,CAAC"}

package/dts/buttons/SlideButton.d.ts

@@ -6,7 +6,16 @@ import type { PressableProps } from '../system/Pressable';
 export declare const slideButtonTestID = 'slide-button';
 export type SlideButtonBackgroundProps = Pick<
   SlideButtonBaseProps,
-  'borderRadius' | 'checked' | 'compact' | 'disabled' | 'uncheckedLabel' | 'variant'
+  | 'borderBottomLeftRadius'
+  | 'borderBottomRightRadius'
+  | 'borderRadius'
+  | 'borderTopLeftRadius'
+  | 'borderTopRightRadius'
+  | 'checked'
+  | 'compact'
+  | 'disabled'
+  | 'uncheckedLabel'
+  | 'variant'
 > & {
   progress: SpringValue<number>;
   style?: StyleProp<ViewStyle>;

package/dts/buttons/SlideButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SlideButton.d.ts","sourceRoot":"","sources":["../../src/buttons/SlideButton.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SlideButton.d.ts","sourceRoot":"","sources":["../../src/buttons/SlideButton.tsx"],"names":[],"mappings":"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"}

package/dts/tabs/SegmentedTabs.d.ts

@@ -1,10 +1,20 @@
 import React from 'react';
-import type { View } from 'react-native';
+import type { StyleProp, View, ViewStyle } from 'react-native';
 import { type TabsProps } from './Tabs';
 export type SegmentedTabsProps<TabId extends string = string> = Partial<
   Pick<TabsProps<TabId>, 'TabComponent' | 'TabsActiveIndicatorComponent'>
 > &
-  Omit<TabsProps<TabId>, 'TabComponent' | 'TabsActiveIndicatorComponent'>;
+  Omit<TabsProps<TabId>, 'TabComponent' | 'TabsActiveIndicatorComponent' | 'styles'> & {
+    /** Custom styles for individual elements of the SegmentedTabs component */
+    styles?: {
+      /** Root container element */
+      root?: StyleProp<ViewStyle>;
+      /** Tab element */
+      tab?: StyleProp<ViewStyle>;
+      /** Active indicator element */
+      activeIndicator?: StyleProp<ViewStyle>;
+    };
+  };
 type SegmentedTabsFC = <TabId extends string = string>(
   props: SegmentedTabsProps<TabId> & {
     ref?: React.ForwardedRef<View>;

package/dts/tabs/SegmentedTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedTabs.d.ts","sourceRoot":"","sources":["../../src/tabs/SegmentedTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIzC,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAE9C,MAAM,MAAM,kBAAkB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,OAAO,CACrE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,8BAA8B,CAAC,CACxE,GACC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,8BAA8B,CAAC,CAAC;AAE1E,KAAK,eAAe,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACnD,KAAK,EAAE,kBAAkB,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KAClE,KAAK,CAAC,YAAY,CAAC;AA8BxB,eAAO,MAAM,aAAa,EAA6B,eAAe,CAAC"}
+{"version":3,"file":"SegmentedTabs.d.ts","sourceRoot":"","sources":["../../src/tabs/SegmentedTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI/D,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAE9C,MAAM,MAAM,kBAAkB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,OAAO,CACrE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,8BAA8B,CAAC,CACxE,GACC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,8BAA8B,GAAG,QAAQ,CAAC,GAAG;IACnF,2EAA2E;IAC3E,MAAM,CAAC,EAAE;QACP,6BAA6B;QAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,kBAAkB;QAClB,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC3B,+BAA+B;QAC/B,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACxC,CAAC;CACH,CAAC;AAEJ,KAAK,eAAe,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACnD,KAAK,EAAE,kBAAkB,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KAClE,KAAK,CAAC,YAAY,CAAC;AA8BxB,eAAO,MAAM,aAAa,EAA6B,eAAe,CAAC"}

package/dts/tabs/Tabs.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View } from 'react-native';
+import { type StyleProp, View, type ViewStyle } from 'react-native';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import { type TabsOptions, type TabValue } from '@coinbase/cds-common/tabs/useTabs';
 import { type Rect } from '@coinbase/cds-common/types/Rect';
@@ -13,7 +13,10 @@ export declare const tabsSpringConfig: {
 export type TabsActiveIndicatorProps = {
   activeTabRect: Rect;
 } & BoxProps;
-export type TabComponent<TabId extends string = string> = React.FC<TabValue<TabId>>;
+export type TabComponentProps<TabId extends string = string> = TabValue<TabId> & {
+  style?: StyleProp<ViewStyle>;
+};
+export type TabComponent<TabId extends string = string> = React.FC<TabComponentProps<TabId>>;
 export type TabsActiveIndicatorComponent = React.FC<TabsActiveIndicatorProps>;
 export type TabsBaseProps<TabId extends string = string> = {
   /** The array of tabs data. Each tab may optionally define a custom Component to render. */
@@ -28,6 +31,15 @@ export type TabsBaseProps<TabId extends string = string> = {
   activeBackground?: ThemeVars.Color;
   /** Optional callback to receive the active tab element. */
   onActiveTabElementChange?: (element: View | null) => void;
+  /** Custom styles for individual elements of the Tabs component */
+  styles?: {
+    /** Root container element */
+    root?: StyleProp<ViewStyle>;
+    /** Tab element */
+    tab?: StyleProp<ViewStyle>;
+    /** Active indicator element */
+    activeIndicator?: StyleProp<ViewStyle>;
+  };
 } & Omit<TabsOptions<TabId>, 'tabs'>;
 export type TabsProps<TabId extends string = string> = TabsBaseProps<TabId> &
   Omit<HStackProps, 'onChange'>;
@@ -40,6 +52,7 @@ export declare const Tabs: TabsFC;
 export declare const TabsActiveIndicator: ({
   activeTabRect,
   position,
+  style,
   ...props
 }: TabsActiveIndicatorProps) => import('react/jsx-runtime').JSX.Element;
 export {};

package/dts/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+E,MAAM,OAAO,CAAC;AACpG,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAOpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAGjE,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,QAAQ,EAEd,MAAM,mCAAmC,CAAC;AAE3C,OAAO,EAAe,KAAK,IAAI,EAAE,MAAM,iCAAiC,CAAC;AAEzE,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAmBvD,eAAO,MAAM,gBAAgB;;;;;CAKQ,CAAC;AAEtC,MAAM,MAAM,wBAAwB,GAAG;IACrC,aAAa,EAAE,IAAI,CAAC;CACrB,GAAG,QAAQ,CAAC;AAEb,MAAM,MAAM,YAAY,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;AAEpF,MAAM,MAAM,4BAA4B,GAAG,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAAC,CAAC;AAE9E,MAAM,MAAM,aAAa,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI;IACzD,2FAA2F;IAC3F,IAAI,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG;QAAE,SAAS,CAAC,EAAE,YAAY,CAAC,KAAK,CAAC,CAAA;KAAE,CAAC,EAAE,CAAC;IAChE,gDAAgD;IAChD,YAAY,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC;IAClC,iEAAiE;IACjE,4BAA4B,EAAE,4BAA4B,CAAC;IAC3D,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACnC,2DAA2D;IAC3D,wBAAwB,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3D,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC;AAErC,MAAM,MAAM,SAAS,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,aAAa,CAAC,KAAK,CAAC,GACzE,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;AAEhC,KAAK,MAAM,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EAC1C,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KACzD,KAAK,CAAC,YAAY,CAAC;AAsFxB,eAAO,MAAM,IAAI,EAAoB,MAAM,CAAC;AAE5C,eAAO,MAAM,mBAAmB,GAAI,uCAIjC,wBAAwB,4CAiC1B,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+E,MAAM,OAAO,CAAC;AACpG,OAAO,EAAE,KAAK,SAAS,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAOpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAGjE,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,QAAQ,EAEd,MAAM,mCAAmC,CAAC;AAE3C,OAAO,EAAe,KAAK,IAAI,EAAE,MAAM,iCAAiC,CAAC;AAEzE,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAmBvD,eAAO,MAAM,gBAAgB;;;;;CAKQ,CAAC;AAEtC,MAAM,MAAM,wBAAwB,GAAG;IACrC,aAAa,EAAE,IAAI,CAAC;CACrB,GAAG,QAAQ,CAAC;AAEb,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,QAAQ,CAAC,KAAK,CAAC,GAAG;IAC/E,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,YAAY,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;AAE7F,MAAM,MAAM,4BAA4B,GAAG,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAAC,CAAC;AAE9E,MAAM,MAAM,aAAa,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI;IACzD,2FAA2F;IAC3F,IAAI,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG;QAAE,SAAS,CAAC,EAAE,YAAY,CAAC,KAAK,CAAC,CAAA;KAAE,CAAC,EAAE,CAAC;IAChE,gDAAgD;IAChD,YAAY,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC;IAClC,iEAAiE;IACjE,4BAA4B,EAAE,4BAA4B,CAAC;IAC3D,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACnC,2DAA2D;IAC3D,wBAAwB,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1D,kEAAkE;IAClE,MAAM,CAAC,EAAE;QACP,6BAA6B;QAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,kBAAkB;QAClB,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC3B,+BAA+B;QAC/B,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACxC,CAAC;CACH,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC;AAErC,MAAM,MAAM,SAAS,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,aAAa,CAAC,KAAK,CAAC,GACzE,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;AAEhC,KAAK,MAAM,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EAC1C,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KACzD,KAAK,CAAC,YAAY,CAAC;AAyGxB,eAAO,MAAM,IAAI,EAAoB,MAAM,CAAC;AAE5C,eAAO,MAAM,mBAAmB,GAAI,8CAKjC,wBAAwB,4CAiC1B,CAAC"}

package/esm/buttons/DefaultSlideButtonBackground.js

@@ -1,17 +1,8 @@
 import React, { forwardRef, memo, useMemo } from 'react';
-import { StyleSheet, View } from 'react-native';
 import { animated, to } from '@react-spring/native';
-import { useTheme } from '../hooks/useTheme';
+import { Box } from '../layout/Box';
 import { TextHeadline } from '../typography/TextHeadline';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const styles = StyleSheet.create({
-  base: {
-    width: '100%',
-    height: '100%',
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
 export const DefaultSlideButtonBackground = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     progress,
@@ -19,21 +10,30 @@ export const DefaultSlideButtonBackground = /*#__PURE__*/memo(/*#__PURE__*/forwa
     disabled,
     compact,
     style,
-    borderRadius
+    borderRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius
   } = _ref;
-  const theme = useTheme();
   const horizontalPadding = compact ? 7 : 9;
-  const containerStyle = useMemo(() => [styles.base, {
-    backgroundColor: theme.color.bgSecondary,
-    borderRadius
-  }, style], [theme.color.bgSecondary, style, borderRadius]);
   const animatedStyle = useMemo(() => ({
     opacity: disabled ? 0.5 : to(progress, value => 1 - value)
   }), [progress, disabled]);
-  return /*#__PURE__*/_jsx(View, {
+  return /*#__PURE__*/_jsx(Box, {
     ref: ref,
     "aria-hidden": true,
-    style: containerStyle,
+    alignItems: "center",
+    background: "bgSecondary",
+    borderBottomLeftRadius: borderBottomLeftRadius,
+    borderBottomRightRadius: borderBottomRightRadius,
+    borderRadius: borderRadius,
+    borderTopLeftRadius: borderTopLeftRadius,
+    borderTopRightRadius: borderTopRightRadius,
+    height: "100%",
+    justifyContent: "center",
+    style: style,
+    width: "100%",
     children: /*#__PURE__*/_jsx(animated.View, {
       style: animatedStyle,
       children: typeof uncheckedLabel !== 'string' ? uncheckedLabel : /*#__PURE__*/_jsx(TextHeadline, {

package/esm/buttons/DefaultSlideButtonHandle.js

@@ -1,4 +1,4 @@
-const _excluded = ["checked", "compact", "disabled", "style", "variant", "startUncheckedNode", "endCheckedNode", "checkedLabel", "borderRadius"];
+const _excluded = ["checked", "compact", "disabled", "style", "variant", "startUncheckedNode", "endCheckedNode", "checkedLabel", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius"];
 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, useMemo } from 'react';
@@ -92,7 +92,11 @@ export const DefaultSlideButtonHandle = /*#__PURE__*/memo(/*#__PURE__*/forwardRe
       startUncheckedNode,
       endCheckedNode,
       checkedLabel,
-      borderRadius
+      borderRadius,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius
     } = _ref3,
     props = _objectWithoutPropertiesLoose(_ref3, _excluded);
   const backgroundColor = variants[variant].background;
@@ -121,7 +125,11 @@ export const DefaultSlideButtonHandle = /*#__PURE__*/memo(/*#__PURE__*/forwardRe
     ref: ref,
     noScaleOnPress: true,
     background: backgroundColor,
+    borderBottomLeftRadius: borderBottomLeftRadius,
+    borderBottomRightRadius: borderBottomRightRadius,
     borderRadius: borderRadius,
+    borderTopLeftRadius: borderTopLeftRadius,
+    borderTopRightRadius: borderTopRightRadius,
     contentStyle: containerStyle,
     disabled: disabled,
     loading: checked

package/esm/buttons/SlideButton.js

@@ -1,4 +1,4 @@
-const _excluded = ["checked", "compact", "borderRadius", "uncheckedLabel", "checkedLabel", "onSlideStart", "onSlideCancel", "onSlideEnd", "onSlideComplete", "onChange", "disabled", "height", "checkThreshold", "SlideButtonHandleComponent", "SlideButtonBackgroundComponent", "styles", "testID", "autoCompleteSlideOnThresholdMet", "variant", "startUncheckedNode", "endCheckedNode"];
+const _excluded = ["checked", "compact", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "uncheckedLabel", "checkedLabel", "onSlideStart", "onSlideCancel", "onSlideEnd", "onSlideComplete", "onChange", "disabled", "height", "checkThreshold", "SlideButtonHandleComponent", "SlideButtonBackgroundComponent", "styles", "testID", "autoCompleteSlideOnThresholdMet", "variant", "startUncheckedNode", "endCheckedNode"];
 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, useId, useMemo } from 'react';
@@ -16,6 +16,10 @@ export const SlideButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
       checked,
       compact,
       borderRadius = compact ? 700 : 900,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
       uncheckedLabel,
       checkedLabel,
       onSlideStart,
@@ -109,7 +113,11 @@ export const SlideButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
     style: containerStyle,
     testID: testID,
     children: [/*#__PURE__*/_jsx(SlideButtonBackgroundComponent, {
+      borderBottomLeftRadius: borderBottomLeftRadius,
+      borderBottomRightRadius: borderBottomRightRadius,
       borderRadius: borderRadius,
+      borderTopLeftRadius: borderTopLeftRadius,
+      borderTopRightRadius: borderTopRightRadius,
       checked: checked,
       compact: compact,
       disabled: disabled,
@@ -129,7 +137,11 @@ export const SlideButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
         } : {
           accessibilityLabelledBy: labelId
         }, {
+          borderBottomLeftRadius: borderBottomLeftRadius,
+          borderBottomRightRadius: borderBottomRightRadius,
           borderRadius: borderRadius,
+          borderTopLeftRadius: borderTopLeftRadius,
+          borderTopRightRadius: borderTopRightRadius,
           checked: checked,
           checkedLabel: checkedLabel,
           compact: compact,

package/esm/buttons/__stories__/SlideButton.stories.js

@@ -185,6 +185,11 @@ export const SlideButtonStories = () => {
         SlideButtonHandleComponent: CustomHandle,
         height: 50
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom border radius",
+      children: /*#__PURE__*/_jsx(SlideButtonExample, {
+        borderRadius: 200
+      })
     })]
   });
 };

package/esm/tabs/SegmentedTabs.js

@@ -12,7 +12,7 @@ const SegmentedTabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref,
       TabsActiveIndicatorComponent = SegmentedTabsActiveIndicator,
       activeBackground = 'bgInverse',
       background = 'bgSecondary',
-      borderRadius = 1000
+      borderRadius = 700
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/_jsx(Tabs, _extends({

package/esm/tabs/Tabs.js

@@ -1,7 +1,7 @@
 const _excluded = ["id", "registerRef"],
-  _excluded2 = ["tabs", "TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "activeTab", "disabled", "onChange", "role", "position", "alignSelf", "opacity", "onActiveTabElementChange"],
+  _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"];
+  _excluded4 = ["activeTabRect", "position", "style"];
 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';
@@ -41,11 +41,18 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =>
       activeTab,
       disabled,
       onChange,
+      styles,
+      style,
       role = 'tablist',
       position = 'relative',
       alignSelf = 'flex-start',
       opacity,
-      onActiveTabElementChange
+      onActiveTabElementChange,
+      borderRadius,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius
     } = _ref2,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   const tabsContainerRef = useRef(null);
@@ -83,16 +90,28 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =>
   return /*#__PURE__*/_jsx(HStack, _extends({
     ref: tabsContainerRef,
     alignSelf: alignSelf,
+    borderBottomLeftRadius: borderBottomLeftRadius,
+    borderBottomRightRadius: borderBottomRightRadius,
+    borderRadius: borderRadius,
+    borderTopLeftRadius: borderTopLeftRadius,
+    borderTopRightRadius: borderTopRightRadius,
     onLayout: updateActiveTabRect,
     opacity: opacity != null ? opacity : disabled ? accessibleOpacityDisabled : 1,
     position: position,
-    role: role
+    role: role,
+    style: styles != null && styles.root ? [style, styles.root] : style
   }, props, {
     children: /*#__PURE__*/_jsxs(TabsContext.Provider, {
       value: api,
       children: [/*#__PURE__*/_jsx(TabsActiveIndicatorComponent, {
         activeTabRect: activeTabRect,
-        background: activeBackground
+        background: activeBackground,
+        borderBottomLeftRadius: borderBottomLeftRadius,
+        borderBottomRightRadius: borderBottomRightRadius,
+        borderRadius: borderRadius,
+        borderTopLeftRadius: borderTopLeftRadius,
+        borderTopRightRadius: borderTopRightRadius,
+        style: styles == null ? void 0 : styles.activeIndicator
       }), tabs.map(_ref3 => {
         let {
             id,
@@ -107,7 +126,9 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =>
           children: /*#__PURE__*/_jsx(RenderedTab, _extends({
             disabled: tabDisabled,
             id: id
-          }, props))
+          }, props, {
+            style: styles == null ? void 0 : styles.tab
+          }))
         }, id);
       })]
     })
@@ -118,7 +139,8 @@ export const Tabs = TabsComponent;
 export const TabsActiveIndicator = _ref4 => {
   let {
       activeTabRect,
-      position = 'absolute'
+      position = 'absolute',
+      style
     } = _ref4,
     props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
   const previousActiveTabRect = useRef(activeTabRect);
@@ -146,7 +168,7 @@ export const TabsActiveIndicator = _ref4 => {
     height: activeTabRect.height,
     position: position,
     role: "none",
-    style: animatedBoxStyle,
+    style: [animatedBoxStyle, style],
     testID: "tabs-active-indicator"
   }, props));
 };

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

@@ -1,15 +1,18 @@
 const _excluded = ["title", "defaultActiveTab"];
 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 React, { useCallback, useState } from 'react';
+import React, { memo, useCallback, useEffect, useState } from 'react';
 import { Pressable, ScrollView } from 'react-native';
+import { interpolateColor, runOnJS, useAnimatedReaction, useSharedValue, withSpring } from 'react-native-reanimated';
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { useTheme } from '../../hooks/useTheme';
+import { Icon } from '../../icons/Icon';
 import { Box } from '../../layout';
 import { Text } from '../../typography/Text';
 import { SegmentedTab } from '../SegmentedTab';
 import { SegmentedTabs } from '../SegmentedTabs';
-import { TabsActiveIndicator } from '../Tabs';
+import { TabsActiveIndicator, tabsSpringConfig } from '../Tabs';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CustomActiveIndicator = _ref => {
   let {
@@ -65,6 +68,54 @@ const CustomSegmentedTabColor = props => /*#__PURE__*/_jsx(SegmentedTab, _extend
 const CustomSegmentedTabFont = props => /*#__PURE__*/_jsx(SegmentedTab, _extends({}, props, {
   font: "label2"
 }));
+const ColoredIcon = /*#__PURE__*/memo(_ref3 => {
+  let {
+    tabId,
+    name
+  } = _ref3;
+  const {
+    activeTab
+  } = useTabsContext();
+  const isActive = (activeTab == null ? void 0 : activeTab.id) === tabId;
+  const theme = useTheme();
+  const progress = useSharedValue(isActive ? 1 : 0);
+  const [color, setColor] = useState(isActive ? theme.color.fgInverse : theme.color.fg);
+  useEffect(() => {
+    progress.value = withSpring(isActive ? 1 : 0, tabsSpringConfig);
+  }, [isActive, progress]);
+  useAnimatedReaction(() => interpolateColor(progress.value, [0, 1], [theme.color.fg, theme.color.fgInverse]), newColor => {
+    runOnJS(setColor)(newColor);
+  });
+  return /*#__PURE__*/_jsx(Icon, {
+    active: true,
+    name: name,
+    size: "s",
+    styles: {
+      icon: {
+        color
+      }
+    }
+  });
+});
+const iconSegments = [{
+  id: 'buy',
+  label: /*#__PURE__*/_jsx(ColoredIcon, {
+    name: "chartLine",
+    tabId: "buy"
+  })
+}, {
+  id: 'sell',
+  label: /*#__PURE__*/_jsx(ColoredIcon, {
+    name: "chartCandles",
+    tabId: "sell"
+  })
+}, {
+  id: 'convert',
+  label: /*#__PURE__*/_jsx(ColoredIcon, {
+    name: "chartBar",
+    tabId: "convert"
+  })
+}];
 const basicSegments = [{
   id: 'buy',
   label: 'Buy'
@@ -145,12 +196,12 @@ const mixedCustomSegments = [{
   label: 'Convert',
   Component: CustomSegmentedTabColor
 }];
-const SegmentedTabsExample = _ref3 => {
+const SegmentedTabsExample = _ref4 => {
   let {
       title,
       defaultActiveTab
-    } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded);
+    } = _ref4,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded);
   const [activeTab, updateActiveTab] = useState(defaultActiveTab);
   const handleChange = useCallback(activeTab => updateActiveTab(activeTab), []);
   return /*#__PURE__*/_jsx(Example, {
@@ -236,6 +287,43 @@ const SegmentedTabsScreen = () => /*#__PURE__*/_jsxs(ExampleScreen, {
     tabs: basicSegments,
     title: "With Padding",
     width: "fit-content"
-  })]
+  }), /*#__PURE__*/_jsx(SegmentedTabsExample, {
+    borderRadius: 300,
+    defaultActiveTab: basicSegments[0],
+    tabs: basicSegments,
+    title: "Border Radius"
+  }), /*#__PURE__*/_jsx(CustomStylesExample, {}), /*#__PURE__*/_jsx(IconLabelsExample, {})]
 });
+const CustomStylesExample = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(SegmentedTabsExample, {
+    borderRadius: 300,
+    defaultActiveTab: basicSegments[0],
+    padding: 0.5,
+    styles: {
+      activeIndicator: {
+        borderRadius: theme.borderRadius[200]
+      }
+    },
+    tabs: basicSegments,
+    title: "Custom Padding with Inner Border Radius"
+  });
+};
+const IconLabelsExample = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(SegmentedTabsExample, {
+    borderRadius: 300,
+    defaultActiveTab: iconSegments[0],
+    gap: 0.5,
+    padding: 0.5,
+    styles: {
+      activeIndicator: {
+        borderRadius: theme.borderRadius[200]
+      }
+    },
+    tabs: iconSegments,
+    title: "Icon Labels",
+    width: "fit-content"
+  });
+};
 export default SegmentedTabsScreen;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.48.3",
+  "version": "8.49.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -198,7 +198,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.48.3",
+    "@coinbase/cds-common": "^8.49.0",
     "@coinbase/cds-icons": "^5.11.0",
     "@coinbase/cds-illustrations": "^4.31.0",
     "@coinbase/cds-lottie-files": "^3.3.4",