@coinbase/cds-mobile 8.56.0 → 8.57.0

package/CHANGELOG.md

@@ -8,6 +8,16 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.57.0 (3/24/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: support focusedBorderWidth on TextInput. [[#537](https://github.com/coinbase/cds/pull/537)]
+
+## 8.56.1 ((3/24/2026, 08:39 AM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.56.0 (3/23/2026 PST)
 
 #### 🚀 Updates

package/dts/controls/SearchInput.d.ts

@@ -11,9 +11,11 @@ export type SearchInputBaseProps = Pick<
   | 'accessibilityHint'
   | 'accessibilityLabel'
   | 'accessibilityLabelledBy'
+  | 'bordered'
   | 'compact'
   | 'disabled'
   | 'enableColorSurge'
+  | 'focusedBorderWidth'
   | 'helperTextErrorIconAccessibilityLabel'
   | 'placeholder'
   | 'testID'
@@ -83,10 +85,12 @@ export declare const SearchInput: React.MemoExoticComponent<
       | 'accessibilityLabel'
       | 'accessibilityHint'
       | 'accessibilityLabelledBy'
+      | 'bordered'
       | 'disabled'
       | 'placeholder'
       | 'compact'
       | 'enableColorSurge'
+      | 'focusedBorderWidth'
       | 'testIDMap'
       | 'helperTextErrorIconAccessibilityLabel'
     > & {

package/dts/controls/SearchInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../src/controls/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAExF,OAAO,KAAK,EACV,qBAAqB,EAErB,SAAS,IAAI,WAAW,EAExB,cAAc,IAAI,gBAAgB,EACnC,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAK3D,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjE,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,kBAAkB,EAChB,mBAAmB,GACnB,oBAAoB,GACpB,yBAAyB,GACzB,SAAS,GACT,UAAU,GACV,kBAAkB,GAClB,uCAAuC,GACvC,aAAa,GACb,QAAQ,GACR,WAAW,GACX,OAAO,CACV,GAAG;IACF;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,QAAQ,EAAE,QAAQ,GAAG,WAAW,CAAC,CAAC;IACtD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,2BAA2B,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjD;;OAEG;IACH,2BAA2B,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,gBAAgB,GAAG;IACjB,uDAAuD;IACvD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD;;;SAGK;IACL,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD;;;;SAIK;IACL,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,GAAG,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC;AAEjE,eAAO,MAAM,WAAW;IAxDtB;;;OAGG;eACQ,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI;IAChC;;;OAGG;oBACa,OAAO;IACvB;;;;;;;OAOG;gBACS,OAAO,CAAC,QAAQ,EAAE,QAAQ,GAAG,WAAW,CAAC;IACrD;;;OAGG;kBACW,OAAO;IACrB;;;OAGG;UACG,KAAK,CAAC,SAAS;IACrB;;OAEG;kCAC2B,MAAM,GAAG,SAAS;IAChD;;OAEG;kCAC2B,MAAM,GAAG,SAAS;;IAK9C,uDAAuD;cAC7C,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI;IAChD;;;SAGK;aACI,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI;IAC/C;;;;SAIK;uBACc,OAAO;mGAmI7B,CAAC"}
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../src/controls/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAExF,OAAO,KAAK,EACV,qBAAqB,EAErB,SAAS,IAAI,WAAW,EAExB,cAAc,IAAI,gBAAgB,EACnC,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAK3D,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjE,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,kBAAkB,EAChB,mBAAmB,GACnB,oBAAoB,GACpB,yBAAyB,GACzB,UAAU,GACV,SAAS,GACT,UAAU,GACV,kBAAkB,GAClB,oBAAoB,GACpB,uCAAuC,GACvC,aAAa,GACb,QAAQ,GACR,WAAW,GACX,OAAO,CACV,GAAG;IACF;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,QAAQ,EAAE,QAAQ,GAAG,WAAW,CAAC,CAAC;IACtD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,2BAA2B,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjD;;OAEG;IACH,2BAA2B,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,gBAAgB,GAAG;IACjB,uDAAuD;IACvD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD;;;SAGK;IACL,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD;;;;SAIK;IACL,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,GAAG,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC;AAEjE,eAAO,MAAM,WAAW;IAxDtB;;;OAGG;eACQ,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI;IAChC;;;OAGG;oBACa,OAAO;IACvB;;;;;;;OAOG;gBACS,OAAO,CAAC,QAAQ,EAAE,QAAQ,GAAG,WAAW,CAAC;IACrD;;;OAGG;kBACW,OAAO;IACrB;;;OAGG;UACG,KAAK,CAAC,SAAS;IACrB;;OAEG;kCAC2B,MAAM,GAAG,SAAS;IAChD;;OAEG;kCAC2B,MAAM,GAAG,SAAS;;IAK9C,uDAAuD;cAC7C,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI;IAChD;;;SAGK;aACI,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI;IAC/C;;;;SAIK;uBACc,OAAO;mGAmI7B,CAAC"}

package/dts/controls/TextInput.d.ts

@@ -22,6 +22,7 @@ export type TextInputBaseProps = SharedProps &
     | 'disabled'
     | 'borderRadius'
     | 'enableColorSurge'
+    | 'focusedBorderWidth'
     | 'labelVariant'
     | 'inputBackground'
   > & {
@@ -57,6 +58,12 @@ export type TextInputBaseProps = SharedProps &
      * @note if both labelNode and label are provided, label will still be used as accessibility label for the input if no accessibilityLabel is provided.
      */
     labelNode?: React.ReactNode;
+    /**
+     * Determines if the input should have a border.
+     * When set to `false`, focus border styling is disabled by default.
+     * @default true
+     */
+    bordered?: boolean;
   };
 export type TextInputProps = TextInputBaseProps &
   Omit<RNTextInputProps, 'value' | 'onChange' | 'onChangeText' | 'textAlign'> & {
@@ -73,11 +80,6 @@ export type TextInputProps = TextInputBaseProps &
      * Use this to workaround the issue where long text does not ellipsis in TextInput
      */
     textAlign?: RNTextInputProps['textAlign'] | 'unset';
-    /**
-     * Determines if the input should have a border
-     * @default true
-     */
-    bordered?: boolean;
   };
 export declare const TextInput: React.MemoExoticComponent<
   React.ForwardRefExoticComponent<
@@ -97,6 +99,7 @@ export declare const TextInput: React.MemoExoticComponent<
         | 'enableColorSurge'
         | 'labelVariant'
         | 'inputBackground'
+        | 'focusedBorderWidth'
       > & {
         /**
          * Aligns text inside input and helperText
@@ -130,6 +133,12 @@ export declare const TextInput: React.MemoExoticComponent<
          * @note if both labelNode and label are provided, label will still be used as accessibility label for the input if no accessibilityLabel is provided.
          */
         labelNode?: React.ReactNode;
+        /**
+         * Determines if the input should have a border.
+         * When set to `false`, focus border styling is disabled by default.
+         * @default true
+         */
+        bordered?: boolean;
       } & Omit<RNTextInputProps, 'value' | 'textAlign' | 'onChange' | 'onChangeText'> & {
         value?: RNTextInputProps['value'];
         onChange?: RNTextInputProps['onChange'];
@@ -144,11 +153,6 @@ export declare const TextInput: React.MemoExoticComponent<
          * Use this to workaround the issue where long text does not ellipsis in TextInput
          */
         textAlign?: RNTextInputProps['textAlign'] | 'unset';
-        /**
-         * Determines if the input should have a border
-         * @default true
-         */
-        bordered?: boolean;
       } & React.RefAttributes<RNTextInput>
   >
 >;

package/dts/controls/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/controls/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAEV,SAAS,IAAI,WAAW,EAExB,cAAc,IAAI,gBAAgB,EAEnC,MAAM,cAAc,CAAC;AAItB,OAAO,KAAK,EACV,wBAAwB,EACxB,gBAAgB,EAChB,WAAW,EACX,cAAc,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAC;AAcjF,OAAO,EAAc,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAGpE,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAC1C,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,gBAAgB,GAChB,IAAI,CACF,mBAAmB,EACjB,QAAQ,GACR,SAAS,GACT,OAAO,GACP,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,cAAc,GACd,iBAAiB,CACpB,GAAG;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uHAAuH;IACvH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mHAAmH;IACnH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF;;;OAGG;IACH,qCAAqC,CAAC,EAAE,MAAM,CAAC;IAC/C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,UAAU,GAAG,cAAc,GAAG,WAAW,CAAC,GAAG;IAC5E,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,OAAO,CAAC;IACpD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAWJ,eAAO,MAAM,SAAS;IAjElB;;;OAGG;YACK,cAAc,CAAC,OAAO,CAAC;IAC/B;;OAEG;aACM,MAAM;IACf,uHAAuH;YAC/G,KAAK,CAAC,SAAS;IACvB,mHAAmH;UAC7G,KAAK,CAAC,SAAS;IACrB;;OAEG;gBACS;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB;IACD;;;OAGG;4CACqC,MAAM;IAC9C;;;OAGG;gBACS,KAAK,CAAC,SAAS;;YAKnB,gBAAgB,CAAC,OAAO,CAAC;eACtB,gBAAgB,CAAC,UAAU,CAAC;mBACxB,gBAAgB,CAAC,cAAc,CAAC;IAC/C;;;OAGG;gBACS,cAAc;IAC1B;;;OAGG;gBACS,gBAAgB,CAAC,WAAW,CAAC,GAAG,OAAO;IACnD;;;OAGG;eACQ,OAAO;sCA4PrB,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/controls/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAEV,SAAS,IAAI,WAAW,EAExB,cAAc,IAAI,gBAAgB,EAEnC,MAAM,cAAc,CAAC;AAItB,OAAO,KAAK,EACV,wBAAwB,EACxB,gBAAgB,EAChB,WAAW,EACX,cAAc,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAC;AAcjF,OAAO,EAAc,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAGpE,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAC1C,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,gBAAgB,GAChB,IAAI,CACF,mBAAmB,EACjB,QAAQ,GACR,SAAS,GACT,OAAO,GACP,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,oBAAoB,GACpB,cAAc,GACd,iBAAiB,CACpB,GAAG;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uHAAuH;IACvH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mHAAmH;IACnH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF;;;OAGG;IACH,qCAAqC,CAAC,EAAE,MAAM,CAAC;IAC/C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,UAAU,GAAG,cAAc,GAAG,WAAW,CAAC,GAAG;IAC5E,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,OAAO,CAAC;CACrD,CAAC;AAWJ,eAAO,MAAM,SAAS;IAlElB;;;OAGG;YACK,cAAc,CAAC,OAAO,CAAC;IAC/B;;OAEG;aACM,MAAM;IACf,uHAAuH;YAC/G,KAAK,CAAC,SAAS;IACvB,mHAAmH;UAC7G,KAAK,CAAC,SAAS;IACrB;;OAEG;gBACS;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB;IACD;;;OAGG;4CACqC,MAAM;IAC9C;;;OAGG;gBACS,KAAK,CAAC,SAAS;IAC3B;;;;OAIG;eACQ,OAAO;;YAKV,gBAAgB,CAAC,OAAO,CAAC;eACtB,gBAAgB,CAAC,UAAU,CAAC;mBACxB,gBAAgB,CAAC,cAAc,CAAC;IAC/C;;;OAGG;gBACS,cAAc;IAC1B;;;OAGG;gBACS,gBAAgB,CAAC,WAAW,CAAC,GAAG,OAAO;sCAiQtD,CAAC"}

package/dts/dates/DateInput.d.ts

@@ -1,22 +1,25 @@
 import React from 'react';
 import { type StyleProp, type TextInput as NativeTextInput, type ViewStyle } from 'react-native';
 import { type DateInputOptions } from '@coinbase/cds-common/dates/useDateInput';
-import { type TextInputProps } from '../controls/TextInput';
-export type DateInputProps = {
-  /** Date format separator character, e.g. the / in "MM/DD/YYYY". Defaults to forward slash (/). */
-  separator?: string;
-  style?: StyleProp<ViewStyle>;
-} & Omit<DateInputOptions, 'intlDateFormat'> &
-  Omit<TextInputProps, 'inputNode' | 'value' | 'defaultValue' | 'style'>;
+import { type TextInputBaseProps, type TextInputProps } from '../controls/TextInput';
+export type DateInputBaseProps = Omit<DateInputOptions, 'intlDateFormat'> &
+  Omit<TextInputBaseProps, 'inputNode' | 'value' | 'defaultValue'> & {
+    /** Date format separator character, e.g. the / in "MM/DD/YYYY". Defaults to forward slash (/). */
+    separator?: string;
+  };
+export type DateInputProps = DateInputBaseProps &
+  Omit<TextInputProps, 'inputNode' | 'value' | 'defaultValue' | 'style'> & {
+    style?: StyleProp<ViewStyle>;
+  };
 export declare const DateInput: React.MemoExoticComponent<
   React.ForwardRefExoticComponent<
-    {
-      /** Date format separator character, e.g. the / in "MM/DD/YYYY". Defaults to forward slash (/). */
-      separator?: string;
-      style?: StyleProp<ViewStyle>;
-    } & Omit<DateInputOptions, 'intlDateFormat'> &
-      Omit<TextInputProps, 'value' | 'style' | 'defaultValue' | 'inputNode'> &
-      React.RefAttributes<NativeTextInput>
+    Omit<DateInputOptions, 'intlDateFormat'> &
+      Omit<TextInputBaseProps, 'value' | 'defaultValue' | 'inputNode'> & {
+        /** Date format separator character, e.g. the / in "MM/DD/YYYY". Defaults to forward slash (/). */
+        separator?: string;
+      } & Omit<TextInputProps, 'value' | 'style' | 'defaultValue' | 'inputNode'> & {
+        style?: StyleProp<ViewStyle>;
+      } & React.RefAttributes<NativeTextInput>
   >
 >;
 //# sourceMappingURL=DateInput.d.ts.map

package/dts/dates/DateInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../src/dates/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAC9E,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,SAAS,IAAI,eAAe,EAIjC,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,KAAK,gBAAgB,EAAgB,MAAM,yCAAyC,CAAC;AAG9F,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvE,MAAM,MAAM,cAAc,GAAG;IAC3B,kGAAkG;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,GAAG,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,GAC1C,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,OAAO,GAAG,cAAc,GAAG,OAAO,CAAC,CAAC;AAEzE,eAAO,MAAM,SAAS;IANpB,kGAAkG;gBACtF,MAAM;YACV,SAAS,CAAC,SAAS,CAAC;8JAsH7B,CAAC"}
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../src/dates/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAC9E,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,SAAS,IAAI,eAAe,EAIjC,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,KAAK,gBAAgB,EAAgB,MAAM,yCAAyC,CAAC;AAG9F,OAAO,EAAa,KAAK,kBAAkB,EAAE,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGhG,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,GACvE,IAAI,CAAC,kBAAkB,EAAE,WAAW,GAAG,OAAO,GAAG,cAAc,CAAC,GAAG;IACjE,kGAAkG;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,OAAO,GAAG,cAAc,GAAG,OAAO,CAAC,GAAG;IACvE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEJ,eAAO,MAAM,SAAS;IATlB,kGAAkG;gBACtF,MAAM;;YAKV,SAAS,CAAC,SAAS,CAAC;0CAqH/B,CAAC"}

package/esm/controls/TextInput.js

@@ -1,4 +1,4 @@
-const _excluded = ["label", "helperText", "variant", "testID", "testIDMap", "start", "end", "width", "disabled", "align", "compact", "suffix", "accessibilityLabel", "borderRadius", "enableColorSurge", "helperTextErrorIconAccessibilityLabel", "bordered", "labelVariant", "labelNode", "inputBackground"];
+const _excluded = ["label", "helperText", "variant", "testID", "testIDMap", "start", "end", "width", "disabled", "align", "compact", "suffix", "accessibilityLabel", "borderRadius", "enableColorSurge", "helperTextErrorIconAccessibilityLabel", "bordered", "focusedBorderWidth", "labelVariant", "labelNode", "inputBackground"];
 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, { cloneElement, forwardRef, isValidElement, memo, useCallback, useMemo, useRef, useState } from 'react';
@@ -45,6 +45,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       enableColorSurge = false,
       helperTextErrorIconAccessibilityLabel = 'error',
       bordered = true,
+      focusedBorderWidth,
       labelVariant = 'outside',
       labelNode,
       inputBackground
@@ -58,7 +59,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
   const {
     borderFocusedStyle,
     borderUnfocusedStyle
-  } = useInputBorderStyle(focused, variant, focusedVariant, bordered);
+  } = useInputBorderStyle(focused, variant, focusedVariant, bordered, bordered ? 100 : 0, focusedBorderWidth);
   const editableInputAddonProps = _extends({}, editableInputProps, {
     onFocus: e => {
       editableInputProps == null || editableInputProps.onFocus == null || editableInputProps.onFocus(e);
@@ -114,6 +115,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
     borderFocusedStyle: borderFocusedStyle,
     borderRadius: borderRadius,
     borderStyle: borderUnfocusedStyle,
+    borderWidth: bordered ? 100 : 0,
     disabled: disabled,
     enableColorSurge: enableColorSurge,
     endNode: (suffix !== '' || !!end) && /*#__PURE__*/_jsx(HStack, {
@@ -140,6 +142,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       })
     }),
     focused: focused,
+    focusedBorderWidth: focusedBorderWidth,
     helperTextNode: !!helperText && (typeof helperText === 'string' ? /*#__PURE__*/_jsx(HelperText, {
       align: align,
       color: variantColorMap[variant],

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

@@ -1,9 +1,10 @@
 import React, { useCallback, useRef, useState } from 'react';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { VStack } from '../../layout/VStack';
 import { Text } from '../../typography/Text';
 import { InputIconButton } from '../InputIconButton';
 import { SearchInput } from '../SearchInput';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const Basic = () => {
   const [text, setText] = useState('');
   return /*#__PURE__*/_jsx(SearchInput, {
@@ -21,6 +22,27 @@ const Compact = () => {
     value: text
   });
 };
+const BorderlessVariants = () => {
+  const [defaultBorderlessText, setDefaultBorderlessText] = useState('');
+  const [focusBorderText, setFocusBorderText] = useState('');
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(SearchInput, {
+      bordered: false,
+      editable: __DEV__,
+      onChangeText: setDefaultBorderlessText,
+      placeholder: "Borderless (no focus border)",
+      value: defaultBorderlessText
+    }), /*#__PURE__*/_jsx(SearchInput, {
+      bordered: false,
+      editable: __DEV__,
+      focusedBorderWidth: 200,
+      onChangeText: setFocusBorderText,
+      placeholder: "Borderless (with focus border)",
+      value: focusBorderText
+    })]
+  });
+};
 const HideStartIcon = () => {
   const [text, setText] = useState('');
   return /*#__PURE__*/_jsx(SearchInput, {
@@ -176,6 +198,9 @@ const SearchInputScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "Compact",
       children: /*#__PURE__*/_jsx(Compact, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Borderless variants",
+      children: /*#__PURE__*/_jsx(BorderlessVariants, {})
     }), /*#__PURE__*/_jsx(Example, {
       title: "Custom Start Icon - Search",
       children: /*#__PURE__*/_jsx(SetCustomSearchStartIcon, {})

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

@@ -438,14 +438,21 @@ const InputScreen = () => {
         placeholder: "john.doe@coinbase.com",
         style: customStyle
       })
-    }), /*#__PURE__*/_jsx(Example, {
+    }), /*#__PURE__*/_jsxs(Example, {
       inline: true,
-      title: "TextInput without border",
-      children: /*#__PURE__*/_jsx(MockTextInput, {
+      title: "TextInput borderless variants",
+      children: [/*#__PURE__*/_jsx(MockTextInput, {
         bordered: false,
+        helperText: "Default borderless behavior with no focus border.",
         label: "Username",
         placeholder: "john.doe@coinbase.com"
-      })
+      }), /*#__PURE__*/_jsx(MockTextInput, {
+        bordered: false,
+        focusedBorderWidth: 200,
+        helperText: "Set focusedBorderWidth to opt into a focus border.",
+        label: "Username with focus border",
+        placeholder: "john.doe@coinbase.com"
+      })]
     }), /*#__PURE__*/_jsxs(Example, {
       inline: true,
       title: "Read-Only TextInput",

package/esm/dates/__stories__/DateInput.stories.js

@@ -80,6 +80,11 @@ export const Examples = () => {
           })
         })), /*#__PURE__*/_jsx(DateInput, _extends({
           disabled: true
+        }, sharedProps, props)), /*#__PURE__*/_jsx(DateInput, _extends({
+          bordered: false
+        }, sharedProps, props)), /*#__PURE__*/_jsx(DateInput, _extends({
+          bordered: false,
+          focusedBorderWidth: 200
         }, sharedProps, props)), /*#__PURE__*/_jsx(DateInput, _extends({
           required: true
         }, sharedProps, props))]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.56.0",
+  "version": "8.57.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -197,7 +197,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.56.0",
+    "@coinbase/cds-common": "^8.57.0",
     "@coinbase/cds-icons": "^5.13.0",
     "@coinbase/cds-illustrations": "^4.35.0",
     "@coinbase/cds-lottie-files": "^3.3.4",