@coinbase/cds-mobile 8.43.2 → 8.44.0

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.44.0 (2/9/2026 PST)
+
+#### 🚀 Updates
+
+- Add new tray design. [[#349](https://github.com/coinbase/cds/pull/349)]
+
 ## 8.43.2 ((2/9/2026, 09:05 AM PST))
 
 This is an artificial version bump with no new change.

package/dts/alpha/__figma__/Select.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Select.figma.d.ts.map

package/dts/alpha/__figma__/Select.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.figma.d.ts","sourceRoot":"","sources":["../../../src/alpha/__figma__/Select.figma.tsx"],"names":[],"mappings":""}

package/dts/alpha/combobox/Combobox.d.ts.map

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

package/dts/overlays/drawer/Drawer.d.ts

@@ -1,6 +1,11 @@
 import React from 'react';
-import type { ModalProps } from 'react-native';
-import type { PinningDirection, SharedProps } from '@coinbase/cds-common/types';
+import type { ModalProps, PressableProps, StyleProp, ViewStyle } from 'react-native';
+import type {
+  PinningDirection,
+  SharedAccessibilityProps,
+  SharedProps,
+} from '@coinbase/cds-common/types';
+import { type HandleBarProps } from '../handlebar/HandleBar';
 export type DrawerRenderChildren = React.FC<{
   handleClose: () => void;
 }>;
@@ -9,27 +14,31 @@ export type DrawerRefBaseProps = {
   handleClose: () => void;
 };
 export type DrawerBaseProps = SharedProps &
+  Pick<SharedAccessibilityProps, 'accessibilityLabel' | 'accessibilityLabelledBy'> &
   Omit<ModalProps, 'onRequestClose' | 'children'> & {
     /** Component to render as the Modal content */
-    children: DrawerRenderChildren | React.ReactNode;
+    children?: DrawerRenderChildren | React.ReactNode;
     /**
      * Pin the modal to one side of the screen
      * @default bottom
      * */
-    pin: PinningDirection;
+    pin?: PinningDirection;
     /**
      * Prevents a user from dismissing the drawer by pressing the overlay or swiping
-     * @default false
      */
     preventDismissGestures?: boolean;
     /**
      * Prevents a user from dismissing the drawer by pressing hardware back button on Android
-     * @default false
      */
     preventHardwareBackBehaviorAndroid?: boolean;
+    /**
+     * The HandleBar can be rendered inside or outside the drawer, when pinned to bottom.
+     * @default 'outside'
+     * @note The 'outside' variant is deprecated. Use 'inside' for new implementations.
+     */
+    handleBarVariant?: HandleBarProps['variant'];
     /**
      * The HandleBar by default only is used for a bottom pinned drawer. This removes it.
-     * @default false
      * */
     hideHandleBar?: boolean;
     /** Action that will happen when drawer is dismissed */
@@ -57,31 +66,44 @@ export type DrawerBaseProps = SharedProps &
      */
     stickyFooter?: DrawerRenderChildren | React.ReactNode;
   };
-export type DrawerProps = DrawerBaseProps;
+export type DrawerProps = DrawerBaseProps & {
+  styles?: {
+    root?: StyleProp<ViewStyle>;
+    overlay?: StyleProp<ViewStyle>;
+    container?: StyleProp<ViewStyle>;
+    handleBar?: PressableProps['style'];
+    handleBarHandle?: StyleProp<ViewStyle>;
+    drawer?: StyleProp<ViewStyle>;
+  };
+};
 export declare const Drawer: React.MemoExoticComponent<
   React.ForwardRefExoticComponent<
     SharedProps &
+      Pick<SharedAccessibilityProps, 'accessibilityLabel' | 'accessibilityLabelledBy'> &
       Omit<ModalProps, 'children' | 'onRequestClose'> & {
         /** Component to render as the Modal content */
-        children: DrawerRenderChildren | React.ReactNode;
+        children?: DrawerRenderChildren | React.ReactNode;
         /**
          * Pin the modal to one side of the screen
          * @default bottom
          * */
-        pin: PinningDirection;
+        pin?: PinningDirection;
         /**
          * Prevents a user from dismissing the drawer by pressing the overlay or swiping
-         * @default false
          */
         preventDismissGestures?: boolean;
         /**
          * Prevents a user from dismissing the drawer by pressing hardware back button on Android
-         * @default false
          */
         preventHardwareBackBehaviorAndroid?: boolean;
+        /**
+         * The HandleBar can be rendered inside or outside the drawer, when pinned to bottom.
+         * @default 'outside'
+         * @note The 'outside' variant is deprecated. Use 'inside' for new implementations.
+         */
+        handleBarVariant?: HandleBarProps['variant'];
         /**
          * The HandleBar by default only is used for a bottom pinned drawer. This removes it.
-         * @default false
          * */
         hideHandleBar?: boolean;
         /** Action that will happen when drawer is dismissed */
@@ -108,6 +130,15 @@ export declare const Drawer: React.MemoExoticComponent<
          * @deprecated Use TrayStickyFooter as a Tray child instead.
          */
         stickyFooter?: DrawerRenderChildren | React.ReactNode;
+      } & {
+        styles?: {
+          root?: StyleProp<ViewStyle>;
+          overlay?: StyleProp<ViewStyle>;
+          container?: StyleProp<ViewStyle>;
+          handleBar?: PressableProps['style'];
+          handleBarHandle?: StyleProp<ViewStyle>;
+          drawer?: StyleProp<ViewStyle>;
+        };
       } & React.RefAttributes<DrawerRefBaseProps>
   >
 >;

package/dts/overlays/drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/overlays/drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAUf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAa/C,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAahF,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,EAAE,CAAC;IAAE,WAAW,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC,CAAC;AAEzE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gDAAgD;IAChD,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,WAAW,GACvC,IAAI,CAAC,UAAU,EAAE,gBAAgB,GAAG,UAAU,CAAC,GAAG;IAChD,+CAA+C;IAC/C,QAAQ,EAAE,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAAC;IACjD;;;SAGK;IACL,GAAG,EAAE,gBAAgB,CAAC;IACtB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,kCAAkC,CAAC,EAAE,OAAO,CAAC;IAC7C;;;SAGK;IACL,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uDAAuD;IACvD,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,iCAAiC,CAAC,EAAE,OAAO,CAAC;IAC5C,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC;;;OAGG;IACH,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC;;;OAGG;IACH,YAAY,CAAC,EAAE,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAAC;CACvD,CAAC;AAEJ,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC;AAM1C,eAAO,MAAM,MAAM;IAvDf,+CAA+C;cACrC,oBAAoB,GAAG,KAAK,CAAC,SAAS;IAChD;;;SAGK;SACA,gBAAgB;IACrB;;;OAGG;6BACsB,OAAO;IAChC;;;OAGG;yCACkC,OAAO;IAC5C;;;SAGK;oBACW,OAAO;IACvB,uDAAuD;qBACtC,MAAM,IAAI;IAC3B;;;OAGG;wCACiC,OAAO;IAC3C,oEAAoE;aAC3D,MAAM,IAAI;IAEnB;;;OAGG;qCAC8B,MAAM;IACvC;;;OAGG;kCAC2B,MAAM;IACpC;;;OAGG;mBACY,oBAAoB,GAAG,KAAK,CAAC,SAAS;6CAsMxD,CAAC"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/overlays/drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAarF,OAAO,KAAK,EACV,gBAAgB,EAChB,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAIpC,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AASxE,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,EAAE,CAAC;IAAE,WAAW,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC,CAAC;AAEzE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gDAAgD;IAChD,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,WAAW,GACvC,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,GAAG,yBAAyB,CAAC,GAChF,IAAI,CAAC,UAAU,EAAE,gBAAgB,GAAG,UAAU,CAAC,GAAG;IAChD,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAAC;IAClD;;;SAGK;IACL,GAAG,CAAC,EAAE,gBAAgB,CAAC;IACvB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;OAEG;IACH,kCAAkC,CAAC,EAAE,OAAO,CAAC;IAC7C;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IAC7C;;SAEK;IACL,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uDAAuD;IACvD,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,iCAAiC,CAAC,EAAE,OAAO,CAAC;IAC5C,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC;;;OAGG;IACH,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC;;;OAGG;IACH,YAAY,CAAC,EAAE,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAAC;CACvD,CAAC;AAEJ,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IAC1C,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC/B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,SAAS,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;QACpC,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACvC,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC/B,CAAC;CACH,CAAC;AAQF,eAAO,MAAM,MAAM;IArEf,+CAA+C;eACpC,oBAAoB,GAAG,KAAK,CAAC,SAAS;IACjD;;;SAGK;UACC,gBAAgB;IACtB;;OAEG;6BACsB,OAAO;IAChC;;OAEG;yCACkC,OAAO;IAC5C;;;;OAIG;uBACgB,cAAc,CAAC,SAAS,CAAC;IAC5C;;SAEK;oBACW,OAAO;IACvB,uDAAuD;qBACtC,MAAM,IAAI;IAC3B;;;OAGG;wCACiC,OAAO;IAC3C,oEAAoE;aAC3D,MAAM,IAAI;IAEnB;;;OAGG;qCAC8B,MAAM;IACvC;;;OAGG;kCAC2B,MAAM;IACpC;;;OAGG;mBACY,oBAAoB,GAAG,KAAK,CAAC,SAAS;;aAI9C;QACP,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC/B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,SAAS,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;QACpC,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACvC,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC/B;6CAsOF,CAAC"}

package/dts/overlays/handlebar/HandleBar.d.ts

@@ -1,10 +1,34 @@
-import type { ViewProps } from 'react-native';
+import type {
+  GestureResponderHandlers,
+  PressableProps,
+  StyleProp,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
 export type HandleBarProps = ViewProps & {
   /** Callback fired when the handlebar is pressed via accessibility action */
   onAccessibilityPress?: () => void;
+  /**
+   * The HandleBar can be rendered inside or outside the drawer.
+   * @default 'outside'
+   */
+  variant?: 'inside' | 'outside';
+  /** Pan responder handlers for drag-to-dismiss functionality. */
+  panHandlers?: GestureResponderHandlers;
+  styles?: {
+    root?: PressableProps['style'];
+    handle?: StyleProp<ViewStyle>;
+  };
 };
 export declare const HandleBar: {
-  ({ onAccessibilityPress, ...props }: HandleBarProps): import('react/jsx-runtime').JSX.Element;
+  ({
+    onAccessibilityPress,
+    variant,
+    panHandlers,
+    style,
+    styles,
+    ...props
+  }: HandleBarProps): import('react/jsx-runtime').JSX.Element;
   displayName: string;
 };
 //# sourceMappingURL=HandleBar.d.ts.map

package/dts/overlays/handlebar/HandleBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HandleBar.d.ts","sourceRoot":"","sources":["../../../src/overlays/handlebar/HandleBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAA4B,SAAS,EAAE,MAAM,cAAc,CAAC;AAKxE,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG;IACvC,4EAA4E;IAC5E,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,SAAS;yCAAwC,cAAc;;CAiC3E,CAAC"}
+{"version":3,"file":"HandleBar.d.ts","sourceRoot":"","sources":["../../../src/overlays/handlebar/HandleBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAEV,wBAAwB,EACxB,cAAc,EAEd,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAKtB,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG;IACvC,4EAA4E;IAC5E,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,gEAAgE;IAChE,WAAW,CAAC,EAAE,wBAAwB,CAAC;IACvC,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;QAC/B,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC/B,CAAC;CACH,CAAC;AAOF,eAAO,MAAM,SAAS;8EAOnB,cAAc;;CAwEhB,CAAC"}

package/dts/overlays/tray/Tray.d.ts

@@ -1,15 +1,23 @@
 import React from 'react';
 import type { ReactNode } from 'react';
-import { type DrawerBaseProps, type DrawerRefBaseProps } from '../drawer/Drawer';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { ElevationLevels } from '@coinbase/cds-common';
+import { type DrawerBaseProps, type DrawerProps, type DrawerRefBaseProps } from '../drawer/Drawer';
 export type TrayRenderChildren = React.FC<{
   handleClose: () => void;
 }>;
 export type TrayBaseProps = Omit<DrawerBaseProps, 'pin' | 'children'> & {
-  children: React.ReactNode | TrayRenderChildren;
-  /** ReactNode to render as the Tray header */
-  header?: React.ReactNode;
-  /** ReactNode to render as the Tray footer */
-  footer?: React.ReactNode;
+  /** Component to render as the Tray content */
+  children?: React.ReactNode | TrayRenderChildren;
+  /** Component to render as the Tray header */
+  header?: React.ReactNode | TrayRenderChildren;
+  /**
+   * Elevation level for the header area (includes title and header content).
+   * Use this to add a drop shadow below the header when content is scrolled.
+   */
+  headerElevation?: ElevationLevels;
+  /** Component to render as the Tray footer */
+  footer?: React.ReactNode | TrayRenderChildren;
   /**
    * Optional callback that, if provided, will be triggered when the Tray is toggled open/ closed
    * If used for analytics, context ('visible' | 'hidden') can be bundled with the event info to track whether the
@@ -19,7 +27,18 @@ export type TrayBaseProps = Omit<DrawerBaseProps, 'pin' | 'children'> & {
   /** Text or ReactNode for optional Tray title */
   title?: React.ReactNode;
 };
-export type TrayProps = TrayBaseProps;
+export type TrayProps = TrayBaseProps &
+  Omit<DrawerProps, 'pin' | 'children'> & {
+    pin?: DrawerProps['pin'];
+    styles?: DrawerProps['styles'] & {
+      /** Styles for the content area */
+      content?: StyleProp<ViewStyle>;
+      /** Styles for the header section */
+      header?: StyleProp<ViewStyle>;
+      /** Styles for the title text */
+      title?: StyleProp<TextStyle>;
+    };
+  };
 export declare const TrayContext: React.Context<{
   verticalDrawerPercentageOfView: number;
   titleHeight: number;
@@ -27,11 +46,17 @@ export declare const TrayContext: React.Context<{
 export declare const Tray: React.MemoExoticComponent<
   React.ForwardRefExoticComponent<
     Omit<DrawerBaseProps, 'children' | 'pin'> & {
-      children: React.ReactNode | TrayRenderChildren;
-      /** ReactNode to render as the Tray header */
-      header?: React.ReactNode;
-      /** ReactNode to render as the Tray footer */
-      footer?: React.ReactNode;
+      /** Component to render as the Tray content */
+      children?: React.ReactNode | TrayRenderChildren;
+      /** Component to render as the Tray header */
+      header?: React.ReactNode | TrayRenderChildren;
+      /**
+       * Elevation level for the header area (includes title and header content).
+       * Use this to add a drop shadow below the header when content is scrolled.
+       */
+      headerElevation?: ElevationLevels;
+      /** Component to render as the Tray footer */
+      footer?: React.ReactNode | TrayRenderChildren;
       /**
        * Optional callback that, if provided, will be triggered when the Tray is toggled open/ closed
        * If used for analytics, context ('visible' | 'hidden') can be bundled with the event info to track whether the
@@ -40,7 +65,17 @@ export declare const Tray: React.MemoExoticComponent<
       onVisibilityChange?: (context: 'visible' | 'hidden') => void;
       /** Text or ReactNode for optional Tray title */
       title?: React.ReactNode;
-    } & React.RefAttributes<DrawerRefBaseProps>
+    } & Omit<DrawerProps, 'children' | 'pin'> & {
+        pin?: DrawerProps['pin'];
+        styles?: DrawerProps['styles'] & {
+          /** Styles for the content area */
+          content?: StyleProp<ViewStyle>;
+          /** Styles for the header section */
+          header?: StyleProp<ViewStyle>;
+          /** Styles for the title text */
+          title?: StyleProp<TextStyle>;
+        };
+      } & React.RefAttributes<DrawerRefBaseProps>
   >
 >;
 export declare const TrayStickyFooter: ({

package/dts/overlays/tray/Tray.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tray.d.ts","sourceRoot":"","sources":["../../../src/overlays/tray/Tray.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,OAAO,EAAU,KAAK,eAAe,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAEzF,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,EAAE,CAAC;IAAE,WAAW,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC,CAAC;AAEvE,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,eAAe,EAAE,KAAK,GAAG,UAAU,CAAC,GAAG;IACtE,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,kBAAkB,CAAC;IAC/C,6CAA6C;IAC7C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,GAAG,QAAQ,KAAK,IAAI,CAAC;IAC7D,gDAAgD;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC;AAEtC,eAAO,MAAM,WAAW;oCACU,MAAM;iBACzB,MAAM;EAInB,CAAC;AAEH,eAAO,MAAM,IAAI;cAzBL,KAAK,CAAC,SAAS,GAAG,kBAAkB;IAC9C,6CAA6C;aACpC,KAAK,CAAC,SAAS;IACxB,6CAA6C;aACpC,KAAK,CAAC,SAAS;IACxB;;;;OAIG;yBACkB,CAAC,OAAO,EAAE,SAAS,GAAG,QAAQ,KAAK,IAAI;IAC5D,gDAAgD;YACxC,KAAK,CAAC,SAAS;6CA4FxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CAQrE,CAAC"}
+{"version":3,"file":"Tray.d.ts","sourceRoot":"","sources":["../../../src/overlays/tray/Tray.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAqB,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACvF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAM5D,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,EAAE,CAAC;IAAE,WAAW,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC,CAAC;AAEvE,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,eAAe,EAAE,KAAK,GAAG,UAAU,CAAC,GAAG;IACtE,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,kBAAkB,CAAC;IAChD,6CAA6C;IAC7C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,kBAAkB,CAAC;IAC9C;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,6CAA6C;IAC7C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,kBAAkB,CAAC;IAC9C;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,GAAG,QAAQ,KAAK,IAAI,CAAC;IAC7D,gDAAgD;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GACnC,IAAI,CAAC,WAAW,EAAE,KAAK,GAAG,UAAU,CAAC,GAAG;IACtC,GAAG,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IACzB,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,GAAG;QAC/B,kCAAkC;QAClC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC/B,oCAAoC;QACpC,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC9B,gCAAgC;QAChC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC9B,CAAC;CACH,CAAC;AAEJ,eAAO,MAAM,WAAW;oCACU,MAAM;iBACzB,MAAM;EAInB,CAAC;AAEH,eAAO,MAAM,IAAI;IA1Cf,8CAA8C;eACnC,KAAK,CAAC,SAAS,GAAG,kBAAkB;IAC/C,6CAA6C;aACpC,KAAK,CAAC,SAAS,GAAG,kBAAkB;IAC7C;;;OAGG;sBACe,eAAe;IACjC,6CAA6C;aACpC,KAAK,CAAC,SAAS,GAAG,kBAAkB;IAC7C;;;;OAIG;yBACkB,CAAC,OAAO,EAAE,SAAS,GAAG,QAAQ,KAAK,IAAI;IAC5D,gDAAgD;YACxC,KAAK,CAAC,SAAS;;UAKf,WAAW,CAAC,KAAK,CAAC;aACf,WAAW,CAAC,QAAQ,CAAC,GAAG;QAC/B,kCAAkC;QAClC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC/B,oCAAoC;QACpC,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC9B,gCAAgC;QAChC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC9B;6CAmIJ,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CAQrE,CAAC"}

package/esm/alpha/__figma__/Select.figma.js

@@ -0,0 +1,63 @@
+const _excluded = ["type", "value"];
+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 { figma } from '@figma/code-connect';
+import { Select } from '../select/Select';
+import { jsx as _jsx } from "react/jsx-runtime";
+const selectOptions = [{
+  value: 'apple',
+  label: 'Apple'
+}, {
+  value: 'banana',
+  label: 'Banana'
+}, {
+  value: 'orange',
+  label: 'Orange',
+  description: 'Citrus'
+}];
+figma.connect(Select, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=71762-14938', {
+  imports: ["import { Select } from '@coinbase/cds-mobile/alpha/select/Select'"],
+  props: {
+    type: figma.enum('type', {
+      'single select': 'single',
+      'multi-select': 'multi'
+    }),
+    disabled: figma.boolean('disabled'),
+    compact: figma.boolean('compact'),
+    label: figma.boolean('show label', {
+      true: figma.boolean('show info icon') ? "<HStack alignItems=\"center\">\n          <InputLabel>" + figma.string('label string') + "</InputLabel>\n          <Tooltip content=\"This will be visible to other users.\">\n            <Icon active color=\"fg\" name=\"info\" padding={0.75} size=\"xs\" tabIndex={0} />\n          </Tooltip>\n        </HStack>" : figma.string('label string'),
+      false: undefined
+    }),
+    start: figma.boolean('show start', {
+      true: figma.instance('start'),
+      false: undefined
+    }),
+    helperText: figma.boolean('show helper text', {
+      true: figma.string('helper text'),
+      false: undefined
+    }),
+    placeholder: figma.string('placeholderText'),
+    variant: figma.enum('state', {
+      default: undefined,
+      positive: 'positive',
+      negative: 'negative'
+    }),
+    value: figma.enum('type', {
+      'single select': 'Item 1',
+      'multi-select': ['Item 1', 'Item 2']
+    })
+  },
+  example: _ref => {
+    let {
+        type,
+        value
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    return /*#__PURE__*/_jsx(Select, _extends({}, props, {
+      onChange: () => {},
+      options: selectOptions,
+      type: type,
+      value: value
+    }));
+  }
+});

package/esm/alpha/combobox/Combobox.js

@@ -124,32 +124,37 @@ const ComboboxBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
     label: label,
     minHeight: 500
   }, props, {
-    footer: /*#__PURE__*/_jsx(KeyboardAvoidingView, {
-      behavior: "padding",
-      keyboardVerticalOffset: Platform.OS === 'ios' ? 86 : 0,
-      children: /*#__PURE__*/_jsx(View, {
-        style: Platform.OS === 'android' ? {
-          overflow: 'hidden',
-          paddingTop: 4
-        } : undefined,
-        children: /*#__PURE__*/_jsx(StickyFooter, {
-          background: "bg",
-          elevation: 2,
-          style: {
-            shadowOffset: {
-              width: 0,
-              height: -32
+    footer: _ref3 => {
+      let {
+        handleClose
+      } = _ref3;
+      return /*#__PURE__*/_jsx(KeyboardAvoidingView, {
+        behavior: "padding",
+        keyboardVerticalOffset: Platform.OS === 'ios' ? 86 : 0,
+        children: /*#__PURE__*/_jsx(View, {
+          style: Platform.OS === 'android' ? {
+            overflow: 'hidden',
+            paddingTop: 4
+          } : undefined,
+          children: /*#__PURE__*/_jsx(StickyFooter, {
+            background: "bgElevation2",
+            elevation: 2,
+            style: {
+              shadowOffset: {
+                width: 0,
+                height: -32
+              },
+              shadowOpacity: 0.05
             },
-            shadowOpacity: 0.05
-          },
-          children: /*#__PURE__*/_jsx(Button, {
-            compact: true,
-            onPress: () => setOpen(false),
-            children: closeButtonLabel
+            children: /*#__PURE__*/_jsx(Button, {
+              compact: true,
+              onPress: handleClose,
+              children: closeButtonLabel
+            })
           })
         })
-      })
-    }),
+      });
+    },
     header: /*#__PURE__*/_jsx(Box, {
       paddingX: 3,
       children: /*#__PURE__*/_jsx(ComboboxControl, _extends({
@@ -165,7 +170,7 @@ const ComboboxBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
       }))
     }),
     onVisibilityChange: handleTrayVisibilityChange
-  })), [ComboboxControl, SelectDropdownComponent, accessibilityLabel, align, closeButtonLabel, endNode, handleTrayVisibilityChange, label, placeholder, setOpen, startNode, variant]);
+  })), [ComboboxControl, SelectDropdownComponent, accessibilityLabel, align, closeButtonLabel, endNode, handleTrayVisibilityChange, label, placeholder, startNode, variant]);
   return /*#__PURE__*/_jsx(ComboboxContext.Provider, {
     value: {
       searchText,