@coinbase/cds-mobile 9.14.0 → 9.16.0

package/esm/chips/InputChip.js

@@ -1,5 +1,6 @@
 const _excluded = ["ref"],
-  _excluded2 = ["value", "children", "accessibilityLabel", "invertColorScheme", "testID"];
+  _excluded2 = ["active", "invertColorScheme", "inverted"],
+  _excluded3 = ["value", "children", "accessibilityLabel", "testID", "active", "invertColorScheme", "inverted"];
 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 } from 'react';
@@ -12,18 +13,33 @@ export const InputChip = /*#__PURE__*/memo(_ref => {
       ref
     } = _ref,
     _props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const mergedProps = useComponentConfig('InputChip', _props);
+  const {
+      active: activeProp,
+      invertColorScheme,
+      inverted
+    } = _props,
+    restProps = _objectWithoutPropertiesLoose(_props, _excluded2);
+  // Default before component config so state-aware resolvers (active borders) see the
+  // same active semantics as the rendered chip.
+  const active = activeProp != null ? activeProp : invertColorScheme === undefined && inverted === undefined ? true : false;
+  const mergedProps = useComponentConfig('InputChip', _extends({}, restProps, {
+    active,
+    invertColorScheme,
+    inverted
+  }));
   const {
       value,
       children = value,
       accessibilityLabel = typeof children === 'string' ? "Remove " + children : 'Remove option',
-      invertColorScheme = true,
-      testID = 'input-chip'
+      testID = 'input-chip',
+      invertColorScheme: mergedInvertColorScheme,
+      inverted: mergedInverted
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded3);
   return /*#__PURE__*/_jsx(MediaChip, _extends({
     ref: ref,
     accessibilityLabel: accessibilityLabel,
+    active: active,
     end: /*#__PURE__*/_jsx(Icon, {
       active: true,
       color: "fg",
@@ -31,7 +47,9 @@ export const InputChip = /*#__PURE__*/memo(_ref => {
       size: "xs",
       testID: testID ? testID + "-close-icon" : 'input-chip-close-icon'
     }),
-    invertColorScheme: invertColorScheme
+    invertColorScheme: mergedInvertColorScheme,
+    inverted: mergedInverted,
+    testID: testID
   }, props, {
     children: children
   }));

package/esm/chips/__stories__/Chip.stories.js

@@ -107,9 +107,9 @@ const ChipScreen = () => /*#__PURE__*/_jsxs(ExampleScreen, {
     title: "Default",
     children: /*#__PURE__*/_jsx(ChipExamples, {})
   }), /*#__PURE__*/_jsx(Example, {
-    title: "Inverted",
+    title: "Active",
     children: /*#__PURE__*/_jsx(ChipExamples, {
-      inverted: true
+      active: true
     })
   }), /*#__PURE__*/_jsx(Example, {
     title: "Size xs",

package/esm/chips/__stories__/MediaChip.stories.js

@@ -81,9 +81,9 @@ const MediaChipScreen = () => /*#__PURE__*/_jsxs(ExampleScreen, {
     title: "Default (Automatic Spacing)",
     children: /*#__PURE__*/_jsx(MediaChipExamples, {})
   }), /*#__PURE__*/_jsx(Example, {
-    title: "Inverted",
+    title: "Active",
     children: /*#__PURE__*/_jsx(MediaChipExamples, {
-      inverted: true
+      active: true
     })
   }), /*#__PURE__*/_jsx(Example, {
     title: "Compact",

package/esm/collapsible/Collapsible.js

@@ -34,7 +34,8 @@ export const Collapsible = /*#__PURE__*/memo(_ref => {
     paddingEnd,
     paddingBottom,
     paddingStart,
-    scrollViewProps
+    scrollViewProps,
+    style
   } = mergedProps;
   const theme = useTheme();
   // TO DO: Remove this after refactoring useContentSize to default values to null on initial render
@@ -112,10 +113,11 @@ export const Collapsible = /*#__PURE__*/memo(_ref => {
   }));
   const animatedContainerStyles = useMemo(() => [styles.container, animatedStyles, animatedInMaxSize], [animatedStyles, animatedInMaxSize]);
   const containerStyles = isUnmountedExpanded ? styles.container : animatedContainerStyles;
+  const mergedContainerStyles = useMemo(() => style ? [containerStyles, style] : containerStyles, [containerStyles, style]);
   return /*#__PURE__*/_jsx(ReanimatedView, {
     ref: forwardedRef,
     "aria-expanded": !collapsed,
-    style: containerStyles,
+    style: mergedContainerStyles,
     testID: testID,
     children: /*#__PURE__*/_jsx(ScrollView, _extends({
       nestedScrollEnabled: true // for Android

package/esm/controls/Switch.js

@@ -1,5 +1,5 @@
 const _excluded = ["ref"],
-  _excluded2 = ["children", "style", "styles"];
+  _excluded2 = ["children", "style", "styles", "variant", "background", "checked"];
 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, useMemo } from 'react';
@@ -9,14 +9,26 @@ import { useTheme } from '../hooks/useTheme';
 import { Box } from '../layout/Box';
 import { Interactable } from '../system/Interactable';
 import { Control } from './Control';
+
+/** Border width of the switch head/handle, kept as a hairline regardless of theme. */
 import { jsx as _jsx } from "react/jsx-runtime";
+const switchThumbBorderWidth = 0.5;
+
+/** Semantic color variants for Switch, matching the semantics used by other control components. */
+
+/** Track background color applied when Switch is checked, keyed by `variant`. */
+const switchVariantBackground = {
+  primary: 'bgPrimary',
+  positive: 'bgPositive',
+  negative: 'bgNegative'
+};
 const SwitchIcon = _ref => {
   let {
     pressed,
     checked,
     disabled,
     controlColor,
-    background = checked ? 'bgPrimary' : 'bgTertiary',
+    background = 'bgTertiary',
     borderColor,
     borderRadius = 1000,
     borderWidth = 0,
@@ -45,7 +57,8 @@ const SwitchIcon = _ref => {
     height: switchThumbSize,
     position: 'absolute',
     top: thumbInset - borderSize,
-    left: thumbInset - borderSize
+    left: thumbInset - borderSize,
+    borderWidth: switchThumbBorderWidth
   }, {
     transform: [{
       translateX: animatedScaleValue.interpolate({
@@ -85,7 +98,10 @@ const SwitchWithRef = function SwitchWithRef(_ref2) {
   const {
       children,
       style,
-      styles
+      styles,
+      variant = 'primary',
+      background,
+      checked
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const theme = useTheme();
@@ -93,11 +109,16 @@ const SwitchWithRef = function SwitchWithRef(_ref2) {
     switchHeight
   } = theme.controlSize;
   const controlStyles = useMemo(() => StyleSheet.flatten([style, styles == null ? void 0 : styles.control]), [style, styles == null ? void 0 : styles.control]);
+  // The variant only informs the track color while checked; the background prop is more
+  // specific and always wins when provided.
+  const resolvedBackground = useMemo(() => background != null ? background : checked ? switchVariantBackground[variant] : undefined, [background, checked, variant]);
   const switchNode = /*#__PURE__*/_jsx(Control, _extends({
     ref: ref,
     accessible: true,
     shouldUseSwitchTransition: true,
     accessibilityRole: "switch",
+    background: resolvedBackground,
+    checked: checked,
     label: children,
     style: controlStyles
   }, props, {

package/esm/controls/__stories__/Switch.stories.js

@@ -1,7 +1,7 @@
 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, { useState } from 'react';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
-import { VStack } from '../../layout';
+import { HStack, VStack } from '../../layout';
 import { ThemeProvider } from '../../system/ThemeProvider';
 import { defaultTheme } from '../../themes/defaultTheme';
 import { Switch } from '../Switch';
@@ -68,6 +68,31 @@ const SwitchScreen = () => {
           })]
         });
       }
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "Variants",
+      children: /*#__PURE__*/_jsxs(HStack, {
+        flexWrap: "wrap",
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Switch, {
+          checked: true,
+          variant: "primary",
+          children: "Primary"
+        }), /*#__PURE__*/_jsx(Switch, {
+          checked: true,
+          variant: "positive",
+          children: "Positive"
+        }), /*#__PURE__*/_jsx(Switch, {
+          checked: true,
+          variant: "negative",
+          children: "Negative"
+        }), /*#__PURE__*/_jsx(Switch, {
+          checked: true,
+          background: "accentBoldPurple",
+          variant: "negative",
+          children: "Background override"
+        })]
+      })
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
       title: "Custom Theme",

package/esm/tabs/SegmentedTabs.js

@@ -1,16 +1,23 @@
 const _excluded = ["ref"],
-  _excluded2 = ["TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "background", "borderRadius"];
+  _excluded2 = ["TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "background", "borderRadius", "equalWidth", "alignSelf", "styles"];
 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 } from 'react';
+import React, { memo, useMemo } from 'react';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { SegmentedTab } from './SegmentedTab';
 import { SegmentedTabsActiveIndicator } from './SegmentedTabsActiveIndicator';
 import { Tabs } from './Tabs';
+import { jsx as _jsx } from "react/jsx-runtime";
+const equalWidthTabContainerStyle = {
+  flex: 1
+};
+const equalWidthTabStyle = {
+  alignSelf: 'stretch'
+};
 
 // We do Partial/Pick to allow TabComponent and TabsActiveIndicatorComponent to be optional
 // We grab 'tabs' from the Omit allowing it to stay required
-import { jsx as _jsx } from "react/jsx-runtime";
+
 const SegmentedTabsComponent = /*#__PURE__*/memo(_ref => {
   let {
       ref
@@ -22,16 +29,28 @@ const SegmentedTabsComponent = /*#__PURE__*/memo(_ref => {
       TabsActiveIndicatorComponent = SegmentedTabsActiveIndicator,
       activeBackground = 'bgInverse',
       background = 'bgSecondary',
-      borderRadius = 700
+      borderRadius = 700,
+      equalWidth,
+      alignSelf = equalWidth ? 'stretch' : undefined,
+      styles
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
+  const resolvedStyles = useMemo(() => {
+    if (!equalWidth) return styles;
+    return _extends({}, styles, {
+      tabContainer: [equalWidthTabContainerStyle, styles == null ? void 0 : styles.tabContainer],
+      tab: [equalWidthTabStyle, styles == null ? void 0 : styles.tab]
+    });
+  }, [equalWidth, styles]);
   return /*#__PURE__*/_jsx(Tabs, _extends({
     ref: ref,
     TabComponent: TabComponent,
     TabsActiveIndicatorComponent: TabsActiveIndicatorComponent,
     activeBackground: activeBackground,
+    alignSelf: alignSelf,
     background: background,
-    borderRadius: borderRadius
+    borderRadius: borderRadius,
+    styles: resolvedStyles
   }, props));
 });
 SegmentedTabsComponent.displayName = 'SegmentedTabs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "9.14.0",
+  "version": "9.16.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -218,9 +218,9 @@
     "react-native-worklets": "0.5.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.14.0",
+    "@coinbase/cds-common": "^9.16.0",
     "@coinbase/cds-icons": "^5.21.0",
-    "@coinbase/cds-illustrations": "^4.47.0",
+    "@coinbase/cds-illustrations": "^4.48.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
     "@floating-ui/react-native": "^0.10.5",