@coinbase/cds-mobile 8.43.2 → 8.44.1

package/dts/visualizations/ProgressCircle.d.ts

@@ -27,37 +27,20 @@ export type ProgressCircleBaseProps = ProgressBaseProps & {
   contentNode?: React.ReactNode;
 };
 export type ProgressCircleProps = ProgressCircleBaseProps & {
-  /**
-   * Custom styles for the progress circle root.
-   */
   style?: StyleProp<ViewStyle>;
-  /**
-   * Custom styles for the progress circle.
-   */
+  /** Custom styles for individual elements of the ProgressCircle component */
   styles?: {
-    /**
-     * Custom styles for the progress circle root.
-     */
+    /** Root element */
     root?: StyleProp<ViewStyle>;
-    /**
-     * Custom styles for the progress circle svg container.
-     */
+    /** SVG container element */
     svgContainer?: StyleProp<ViewStyle>;
-    /**
-     * Custom styles for the progress circle svg.
-     */
+    /** SVG element */
     svg?: StyleProp<ViewStyle>;
-    /**
-     * Custom styles for the text container.
-     */
+    /** Text container element */
     textContainer?: StyleProp<ViewStyle>;
-    /**
-     * Custom styles for the progress circle inner.
-     */
+    /** Foreground progress circle element */
     progress?: Partial<CircleProps>;
-    /**
-     * Custom styles for the progress circle inner.
-     */
+    /** Background circle element */
     circle?: Partial<CircleProps>;
   };
 };
@@ -105,37 +88,20 @@ export declare const ProgressCircle: React.MemoExoticComponent<
          */
         contentNode?: React.ReactNode;
       } & {
-        /**
-         * Custom styles for the progress circle root.
-         */
         style?: StyleProp<ViewStyle>;
-        /**
-         * Custom styles for the progress circle.
-         */
+        /** Custom styles for individual elements of the ProgressCircle component */
         styles?: {
-          /**
-           * Custom styles for the progress circle root.
-           */
+          /** Root element */
           root?: StyleProp<ViewStyle>;
-          /**
-           * Custom styles for the progress circle svg container.
-           */
+          /** SVG container element */
           svgContainer?: StyleProp<ViewStyle>;
-          /**
-           * Custom styles for the progress circle svg.
-           */
+          /** SVG element */
           svg?: StyleProp<ViewStyle>;
-          /**
-           * Custom styles for the text container.
-           */
+          /** Text container element */
           textContainer?: StyleProp<ViewStyle>;
-          /**
-           * Custom styles for the progress circle inner.
-           */
+          /** Foreground progress circle element */
           progress?: Partial<CircleProps>;
-          /**
-           * Custom styles for the progress circle inner.
-           */
+          /** Background circle element */
           circle?: Partial<CircleProps>;
         };
       } & React.RefAttributes<View>

package/dts/visualizations/ProgressCircle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressCircle.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAY,KAAK,SAAS,EAAE,KAAK,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACnF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AASnE,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AAG/C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AASvD,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,GAAG;IACxD;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,GAAG;IAC1D;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;WAEG;QACH,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACpC;;WAEG;QACH,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC3B;;WAEG;QACH,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACrC;;WAEG;QACH,QAAQ,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;QAChC;;WAEG;QACH,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;KAC/B,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,uBAAuB,EACvB,UAAU,GAAG,uBAAuB,GAAG,UAAU,CAClD,GACC,QAAQ,GAAG;IACT;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CACzB,CAAC;AAoEJ,eAAO,MAAM,cAAc;;;;;;;;IAxIzB;;OAEG;kBACW,OAAO;IACrB;;;OAGG;eACQ,OAAO;IAClB;;;;;OAKG;WACI,MAAM;IACb;;OAEG;kBACW,KAAK,CAAC,SAAS;;IAI7B;;OAEG;YACK,SAAS,CAAC,SAAS,CAAC;IAC5B;;OAEG;aACM;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;WAEG;QACH,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACpC;;WAEG;QACH,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC3B;;WAEG;QACH,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACrC;;WAEG;QACH,QAAQ,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;QAChC;;WAEG;QACH,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;KAC/B;+BAyMF,CAAC"}
+{"version":3,"file":"ProgressCircle.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAY,KAAK,SAAS,EAAE,KAAK,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACnF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AASnE,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AAG/C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AASvD,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,GAAG;IACxD;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,GAAG;IAC1D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,4EAA4E;IAC5E,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,4BAA4B;QAC5B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACpC,kBAAkB;QAClB,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC3B,6BAA6B;QAC7B,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACrC,yCAAyC;QACzC,QAAQ,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;QAChC,gCAAgC;QAChC,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;KAC/B,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,uBAAuB,EACvB,UAAU,GAAG,uBAAuB,GAAG,UAAU,CAClD,GACC,QAAQ,GAAG;IACT;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CACzB,CAAC;AAoEJ,eAAO,MAAM,cAAc;;;;;;;;IAvHzB;;OAEG;kBACW,OAAO;IACrB;;;OAGG;eACQ,OAAO;IAClB;;;;;OAKG;WACI,MAAM;IACb;;OAEG;kBACW,KAAK,CAAC,SAAS;;YAIrB,SAAS,CAAC,SAAS,CAAC;IAC5B,4EAA4E;aACnE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,4BAA4B;QAC5B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACpC,kBAAkB;QAClB,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC3B,6BAA6B;QAC7B,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACrC,yCAAyC;QACzC,QAAQ,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;QAChC,gCAAgC;QAChC,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;KAC/B;+BAyMF,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,

package/esm/carousel/__stories__/Carousel.stories.js

@@ -127,7 +127,7 @@ const BasicExamples = () => {
   const horizontalPadding = theme.space[2];
   const windowWidth = Dimensions.get('window').width;
   const carouselSizing = windowWidth - horizontalPadding * 2;
-  const horizontalGap = theme.space[1];
+  const horizontalGap = theme.space[2];
   const twoItemsWidth = (carouselSizing - horizontalGap) / 2;
   const threeItemsWidth = (carouselSizing - horizontalGap * 2) / 3;
   return /*#__PURE__*/_jsxs(_Fragment, {
@@ -213,7 +213,7 @@ const BasicExamples = () => {
             paddingHorizontal: horizontalPadding
           },
           carousel: {
-            gap: theme.space[1]
+            gap: theme.space[2]
           }
         },
         title: "Full Width Cards",
@@ -402,7 +402,7 @@ const AutoplayExample = () => {
           paddingHorizontal: theme.space[2]
         },
         carousel: {
-          gap: theme.space[1]
+          gap: theme.space[2]
         }
       },
       title: "Autoplay Carousel",
@@ -451,7 +451,7 @@ const DynamicContentExample = () => {
           paddingHorizontal: theme.space[3]
         },
         carousel: {
-          gap: theme.space[1],
+          gap: theme.space[2],
           height: 156
         }
       },
@@ -534,7 +534,7 @@ const AnimatedExample = () => {
           paddingHorizontal: theme.space[3]
         },
         carousel: {
-          gap: theme.space[1]
+          gap: theme.space[2]
         }
       },
       title: "Animated Selection",
@@ -645,7 +645,7 @@ const ImperativeApiExample = () => {
             paddingHorizontal: theme.space[3]
           },
           carousel: {
-            gap: theme.space[1]
+            gap: theme.space[2]
           }
         },
         title: "Imperative API",
@@ -667,7 +667,7 @@ const LoopingExamples = () => {
   const horizontalPadding = theme.space[2];
   const windowWidth = Dimensions.get('window').width;
   const carouselSizing = windowWidth - horizontalPadding * 2;
-  const horizontalGap = theme.space[1];
+  const horizontalGap = theme.space[2];
   const threeItemsWidth = (carouselSizing - horizontalGap * 2) / 3;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Example, {