@coinbase/cds-mcp-server 8.17.2 → 8.17.3

package/mcp-docs/mobile/components/PortalProvider.txt

@@ -0,0 +1,79 @@
+# PortalProvider
+
+A component that manages the rendering of portals for overlay components.
+
+## Import
+
+```jsx
+import { PortalProvider } from '@coinbase/cds-mobile/overlays/PortalProvider'
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `nodes` | `PortalNode[]` | Yes | `-` | - |
+
+
+## Examples
+
+### Basic usage
+
+The PortalProvider component is typically used at the root of your mobile application to manage overlay components:
+
+```tsx
+function App() {
+  return (
+    <PortalProvider>
+      <Box padding={4} bordered borderRadius={200}>
+        Your app content
+      </Box>
+    </PortalProvider>
+  );
+}
+```
+
+### Custom Portal Nodes
+
+You can disable the default portal rendering and use the PortalNodes component separately:
+
+```tsx
+function App() {
+  return (
+    <PortalProvider renderPortals={false}>
+      <Box padding={4} bordered borderRadius={200}>
+        Your app content
+      </Box>
+      <PortalNodes />
+    </PortalProvider>
+  );
+}
+```
+
+### Toast Example
+
+The PortalProvider's `toastBottomOffset` prop sets the default bottom offset for all toasts:
+
+```tsx
+function App() {
+  function ToastDemo() {
+    const toast = useToast();
+    return (
+      <Box padding={4} bordered borderRadius={200}>
+        <Button
+          onPress={() => toast.show('This toast appears with a custom bottom offset (80px)')}
+          label="Show Toast"
+        />
+      </Box>
+    );
+  }
+
+  return (
+    <PortalProvider toastBottomOffset={80}>
+      <ToastDemo />
+    </PortalProvider>
+  );
+}
+```
+
+

package/mcp-docs/mobile/components/Pressable.txt

@@ -0,0 +1,211 @@
+# Pressable
+
+Extends the Interactable component to add accessibility support for press interactions.
+
+## Import
+
+```jsx
+import { Pressable } from '@coinbase/cds-mobile/system/Pressable'
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
+| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
+| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
+| `android_disableSound` | `boolean \| null` | No | `-` | If true, doesnt play system sound on touch. |
+| `android_ripple` | `PressableAndroidRippleConfig \| null` | No | `-` | Enables the Android ripple effect and configures its color. |
+| `aspectRatio` | `string \| number` | No | `-` | - |
+| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
+| `blendStyles` | `{ background?: string; pressedBackground?: string \| undefined; disabledBackground?: string \| undefined; borderColor?: string \| undefined; pressedBorderColor?: string \| undefined; disabledBorderColor?: string \| undefined; } \| undefined` | No | `-` | Custom color overrides for different interaction states. Base colors (background, borderColor) are used directly, while interaction state colors (pressed, disabled) are used as alternative base colors for blending calculations with blend strength and color scheme considerations. |
+| `block` | `boolean` | No | `-` | Set element to block and expand to 100% width. |
+| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
+| `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
+| `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
+| `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
+| `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
+| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
+| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
+| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
+| `bottom` | `string \| number` | No | `-` | - |
+| `cancelable` | `boolean \| null` | No | `-` | Whether a press gesture can be interrupted by a parent gesture such as a scroll event. Defaults to true. |
+| `children` | `((string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal) & (string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| ((state: PressableStateCallbackType) => ReactNode))) \| null` | No | `-` | Either children or a render prop that receives a boolean reflecting whether the component is currently pressed. |
+| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
+| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `contentStyle` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | Apply animated styles to the inner container. |
+| `dangerouslySetBackground` | `string` | No | `-` | - |
+| `debounceTime` | `number` | No | `500` | The amount of time to wait (in milliseconds) before invoking the debounced function. This prop is used in conjunction with the disableDebounce prop. The debounce function is configured to be invoked as soon as its called, but subsequent calls within the debounceTime period will be ignored. |
+| `delayHoverIn` | `number \| null` | No | `-` | Duration to wait after hover in before calling onHoverIn. |
+| `delayHoverOut` | `number \| null` | No | `-` | Duration to wait after hover out before calling onHoverOut. |
+| `delayLongPress` | `number \| null` | No | `-` | Duration (in milliseconds) from onPressIn before onLongPress is called. |
+| `disableDebounce` | `boolean` | No | `-` | React Native is historically trash at debouncing touch events. This can cause a lot of unwanted behavior such as double navigations where we push a screen onto the stack 2 times. Debouncing the event 500 miliseconds, but taking the leading event prevents this effect and the accidental double-tap. |
+| `disabled` | `boolean` | No | `-` | Is the element currently disabled. Whether the press behavior is disabled. |
+| `display` | `flex \| none` | No | `-` | - |
+| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
+| `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
+| `flexBasis` | `string \| number` | No | `-` | - |
+| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
+| `flexGrow` | `number` | No | `-` | - |
+| `flexShrink` | `number` | No | `-` | - |
+| `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
+| `font` | `inherit \| FontFamily` | No | `-` | - |
+| `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
+| `fontSize` | `inherit \| FontSize` | No | `-` | - |
+| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
+| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `height` | `string \| number` | No | `-` | - |
+| `hitSlop` | `number \| Insets \| null` | No | `-` | Additional distance outside of this view in which a press is detected. |
+| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
+| `key` | `Key \| null` | No | `-` | - |
+| `left` | `string \| number` | No | `-` | - |
+| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
+| `loading` | `boolean` | No | `-` | Is the element currenty loading. When set to true, will disable element from press and keyboard events Is the element currenty loading. |
+| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `maxHeight` | `string \| number` | No | `-` | - |
+| `maxWidth` | `string \| number` | No | `-` | - |
+| `minHeight` | `string \| number` | No | `-` | - |
+| `minWidth` | `string \| number` | No | `-` | - |
+| `noScaleOnPress` | `boolean` | No | `-` | Dont scale element on press. |
+| `onBlur` | `((event: NativeSyntheticEvent<TargetedEvent>) => void) \| null` | No | `-` | Called after the element loses focus. |
+| `onFocus` | `((event: NativeSyntheticEvent<TargetedEvent>) => void) \| null` | No | `-` | Called after the element is focused. |
+| `onHoverIn` | `((event: MouseEvent) => void) \| null` | No | `-` | Called when the hover is activated to provide visual feedback. |
+| `onHoverOut` | `((event: MouseEvent) => void) \| null` | No | `-` | Called when the hover is deactivated to undo visual feedback. |
+| `onLongPress` | `((event: GestureResponderEvent) => void) \| null` | No | `-` | Called when a long-tap gesture is detected. |
+| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerDownCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerEnter` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerEnterCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerLeave` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerLeaveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerMove` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerMoveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerUp` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPress` | `((event: GestureResponderEvent) => void) \| null` | No | `-` | Called when a single tap gesture is detected. |
+| `onPressIn` | `(((event: GestureResponderEvent) => void) & ((event: GestureResponderEvent) => void))` | No | `-` | Callback fired before onPress when button is pressed. Called when a touch is engaged before onPress. |
+| `onPressOut` | `(((event: GestureResponderEvent) => void) & ((event: GestureResponderEvent) => void))` | No | `-` | Callback fired before onPress when button is released. Called when a touch is released before onPress. |
+| `onTouchCancel` | `((event: GestureResponderEvent) => void)` | No | `-` | - |
+| `onTouchEnd` | `((event: GestureResponderEvent) => void)` | No | `-` | - |
+| `onTouchEndCapture` | `((event: GestureResponderEvent) => void)` | No | `-` | - |
+| `onTouchMove` | `((event: GestureResponderEvent) => void)` | No | `-` | - |
+| `onTouchStart` | `((event: GestureResponderEvent) => void)` | No | `-` | - |
+| `opacity` | `number \| AnimatedNode` | No | `-` | - |
+| `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
+| `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
+| `position` | `absolute \| relative \| static \| fixed \| sticky` | No | `-` | - |
+| `pressRetentionOffset` | `number \| Insets \| null` | No | `-` | Additional distance outside of this view in which a touch is considered a press before onPressOut is triggered. |
+| `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
+| `right` | `string \| number` | No | `-` | - |
+| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `style` | `StyleProp<ViewStyle> \| ((state: PressableStateCallbackType) => StyleProp<ViewStyle>)` | No | `-` | Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles. |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
+| `testOnly_pressed` | `boolean \| null` | No | `-` | Used only for documentation or testing (e.g. snapshot testing). |
+| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
+| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
+| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
+| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
+| `top` | `string \| number` | No | `-` | - |
+| `transform` | `string \| (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
+| `transparentWhileInactive` | `boolean` | No | `-` | Mark the background and border as transparent until the element is interacted with (hovered, pressed, etc). Must be used in conjunction with the pressed prop |
+| `transparentWhilePressed` | `boolean` | No | `-` | Mark the background and border as transparent even while element is interacted with (elevation underlay issue). Must be used in conjunction with the pressed prop |
+| `unstable_pressDelay` | `number` | No | `-` | Duration (in milliseconds) to wait after press down before calling onPressIn. |
+| `userSelect` | `none \| auto \| contain \| text \| all` | No | `-` | - |
+| `width` | `string \| number` | No | `-` | - |
+| `wrapperStyles` | `{ base?: StyleProp<ViewStyle>; pressed?: StyleProp<ViewStyle>; disabled?: StyleProp<ViewStyle>; }` | No | `-` | Apply styles to the outer container. |
+| `zIndex` | `number` | No | `-` | - |
+
+
+## Examples
+
+### Basic Pressable
+
+Pressables support an `onPress` prop for handling click/press interactions. When being pressed, the element will scale down to mimic a real-world button press. If this functionality is not desired, pass the `noScaleOnPress` prop.
+
+```jsx
+<Pressable
+  onPress={console.log}
+  background="bgAlternate"
+  borderColor="lineHeavy"
+  borderWidth={100}
+  borderRadius={300}
+>
+  <Box as="span" padding={2}>
+    <TextHeadline as="span">Click me...</TextHeadline>
+  </Box>
+</Pressable>
+```
+
+### Pressable with Transparent Background
+
+```jsx
+<Pressable
+  onPress={console.log}
+  as="button"
+  background="transparent"
+  borderColor="lineHeavy"
+  borderWidth={100}
+  borderRadius={300}
+>
+  <Box as="span" padding={2}>
+    <Text font="headline" as="span">
+      Click me...
+    </Text>
+  </Box>
+</Pressable>
+```
+
+### Block Pressable
+
+Pressables support an `onPress` prop for handling click/press interactions. When being pressed, the element will scale down to mimic a real-world button press. If this functionality is not desired, pass the `noScaleOnPress` prop.
+
+```jsx
+<Pressable
+  block
+  onPress={console.log}
+  background="bgAlternate"
+  borderColor="lineHeavy"
+  borderWidth={100}
+  borderRadius={300}
+>
+  <Box as="span" padding={2}>
+    <TextHeadline as="span">Click me...</TextHeadline>
+  </Box>
+</Pressable>
+```
+
+### A11y
+
+On mobile, all [AccessibilityProps](https://reactnative.dev/docs/accessibility#accessibility-properties) can be passed, with `accessibilityComponentType` and `accessibilityTraits` defaulting to `button`, and `accessibilityState` being set based on loading/disabled props.
+
+On web, all [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) can be passed, with `aria-busy` being set based on loading/disabled props.
+
+> The `as` prop allows any component to be used, but be sure you are using semantically correct elements! For example, no clickable divs.
+
+

package/mcp-docs/mobile/components/ProgressBar.txt

@@ -0,0 +1,130 @@
+# ProgressBar
+
+A visual indicator of completion progress.
+
+## Import
+
+```jsx
+import { ProgressBar } from '@coinbase/cds-mobile/visualizations/ProgressBar'
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
+| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `primary` | Custom progress color. |
+| `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
+| `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
+| `key` | `Key \| null` | No | `-` | - |
+| `onAnimationEnd` | `(() => void)` | No | `-` | Callback fired when the progress animation ends. |
+| `onAnimationStart` | `(() => void)` | No | `-` | Callback fired when the progress animation starts. |
+| `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
+| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | Custom styles for the progress bar root. |
+| `styles` | `{ root?: StyleProp<ViewStyle>; progress?: StyleProp<ViewStyle>; }` | No | `-` | Custom styles for the progress bar. |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
+| `weight` | `normal \| heavy \| thin \| semiheavy` | No | `normal` | Toggle used to change thickness of progress visualization |
+
+
+## Examples
+
+### Default
+
+```tsx
+<VStack gap={2}>
+  <ProgressBar progress={0} />
+  <ProgressBar progress={0.5} />
+  <ProgressBar progress={1} />
+</VStack>
+```
+
+### Weights
+
+```tsx
+<VStack gap={2}>
+  <ProgressBar weight="thin" progress={0.3} />
+  <ProgressBar weight="normal" progress={0.5} />
+  <ProgressBar weight="semiheavy" progress={0.7} />
+  <ProgressBar weight="heavy" progress={0.9} />
+</VStack>
+```
+
+### Disabled
+
+```tsx
+<VStack gap={2}>
+  <ProgressBar disabled progress={0} />
+  <ProgressBar disabled progress={0.5} />
+  <ProgressBar disabled progress={1} />
+</VStack>
+```
+
+### Colors
+
+```tsx
+<VStack gap={2}>
+  <ProgressBar color="bgPositive" progress={0.5} />
+  <ProgressBar color="bgNegative" progress={0.5} />
+  <ProgressBar color="bgPrimary" progress={0.5} />
+  <ProgressBar color="bgWarning" progress={0.5} />
+  <ProgressBar color="fg" progress={0.5} />
+  <ProgressBar disabled color="fg" progress={0.5} />
+</VStack>
+```
+
+### Custom Styles
+
+You can customize the appearance of the progress bar using the `styles` prop. The `root` style controls the container, and `progress` controls the fill bar.
+
+```tsx live
+<ProgressContainerWithButtons>
+  {({ calculateProgress }) => (
+    <VStack gap={2}>
+      <ProgressBar
+        progress={calculateProgress(0.6)}
+        styles={{
+          progress: { backgroundColor: 'orange' },
+        }}
+      />
+      <ProgressBar
+        progress={calculateProgress(0.3)}
+        styles={{
+          root: { height: 32, borderRadius: 16 },
+          progress: { borderRadius: 16 },
+        }}
+      />
+    </VStack>
+  )}
+</ProgressContainerWithButtons>
+```
+
+### Animation Callbacks
+
+You can use the `onAnimationStart` and `onAnimationEnd` callbacks to track the progress of the animation.
+
+```jsx
+function Example() {
+  const [animationStatus, setAnimationStatus] = React.useState('Ready');
+
+  const handleAnimationStart = useCallback(() => {
+    setAnimationStatus('Animating...');
+  }, []);
+
+  const handleAnimationEnd = useCallback(() => {
+    setAnimationStatus('Animation Ended');
+  }, []);
+
+  return (
+    <VStack gap={2}>
+      <Text>Animation Status: {animationStatus}</Text>
+      <ProgressBar
+        onAnimationEnd={handleAnimationEnd}
+        onAnimationStart={handleAnimationStart}
+        progress={calculateProgress(0.2)}
+      />
+    </VStack>
+  );
+}
+```
+
+

package/mcp-docs/mobile/components/ProgressBarWithFixedLabels.txt

@@ -0,0 +1,161 @@
+# ProgressBarWithFixedLabels
+
+A ProgressBar with fixed labels at defined positions.
+
+## Import
+
+```jsx
+import { ProgressBarWithFixedLabels } from '@coinbase/cds-mobile/visualizations/ProgressBarWithFixedLabels'
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
+| `endLabel` | `number \| { value: number; render: (num: number, disabled?: boolean \| undefined) => ReactNode; }` | No | `-` | Label that is pinned to the end of the container. If a number is used then it will format it as a percentage. |
+| `labelPlacement` | `above \| below \| beside` | No | `beside` | Position of label relative to the bar |
+| `startLabel` | `number \| { value: number; render: (num: number, disabled?: boolean \| undefined) => ReactNode; }` | No | `-` | Label that is pinned to the start of the container. If a number is used then it will format it as a percentage. |
+| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | Custom styles for the progress bar with fixed labels root. |
+| `styles` | `{ root?: StyleProp<ViewStyle>; labelContainer?: StyleProp<ViewStyle>; startLabel?: StyleProp<TextStyle>; endLabel?: StyleProp<TextStyle>; }` | No | `-` | Custom styles for the progress bar with fixed labels. |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
+
+
+## Examples
+
+### Label Below
+
+```jsx live
+<VStack gap={2}>
+  <ProgressBarWithFixedLabels startLabel={0} endLabel={20} labelPlacement="below">
+    <ProgressBar progress={0.2} />
+  </ProgressBarWithFixedLabels>
+  <ProgressBarWithFixedLabels endLabel={20} labelPlacement="below">
+    <ProgressBar progress={0.2} />
+  </ProgressBarWithFixedLabels>
+</VStack>
+```
+
+### Label Beside
+
+```jsx live
+<VStack gap={2}>
+  <ProgressBarWithFixedLabels startLabel={0} endLabel={20} labelPlacement="beside">
+    <ProgressBar progress={0.2} />
+  </ProgressBarWithFixedLabels>
+  <ProgressBarWithFixedLabels endLabel={20} labelPlacement="beside">
+    <ProgressBar progress={0.2} />
+  </ProgressBarWithFixedLabels>
+</VStack>
+```
+
+### Disabled
+
+```jsx live
+<VStack gap={2}>
+  <ProgressBarWithFixedLabels startLabel={0} endLabel={20} disabled labelPlacement="beside">
+    <ProgressBar disabled progress={0.2} />
+  </ProgressBarWithFixedLabels>
+  <ProgressBarWithFixedLabels startLabel={0} endLabel={20} disabled labelPlacement="above">
+    <ProgressBar disabled progress={0.2} />
+  </ProgressBarWithFixedLabels>
+</VStack>
+```
+
+### Custom Labels
+
+```jsx live
+function Example() {
+  const renderStartLabelNumStr = useCallback((num) => {
+    return `$${num.toLocaleString()}`;
+  }, []);
+
+  const renderEndLabelNumStr = useCallback((num) => {
+    return `${num.toLocaleString()} left`;
+  }, []);
+
+  const renderStartLabelNum = useCallback((num, disabled) => {
+    return (
+      <TextTitle3 disabled={disabled} as="span">
+        ${num.toLocaleString()}
+      </TextTitle3>
+    );
+  }, []);
+
+  const renderEndLabelNum = useCallback((num, disabled) => {
+    return (
+      <TextLabel2 disabled={disabled} as="span" align="end" noWrap>
+        ${num.toLocaleString()} left
+      </TextLabel2>
+    );
+  }, []);
+
+  return (
+    <VStack gap={2}>
+      <ProgressBarWithFixedLabels
+        startLabel={{ value: 12500, render: renderStartLabelNumStr }}
+        endLabel={{ value: 35500, render: renderEndLabelNumStr }}
+        labelPlacement="above"
+      >
+        <ProgressBar progress={0.6} />
+      </ProgressBarWithFixedLabels>
+      <ProgressBarWithFixedLabels
+        startLabel={{ value: 12500, render: renderStartLabelNum }}
+        endLabel={{ value: 35500, render: renderEndLabelNum }}
+        labelPlacement="above"
+      >
+        <ProgressBar progress={0.6} />
+      </ProgressBarWithFixedLabels>
+
+      <ProgressBarWithFixedLabels
+        startLabel={{ value: 12500, render: renderStartLabelNumStr }}
+        endLabel={{ value: 35500, render: renderEndLabelNumStr }}
+        labelPlacement="above"
+        disabled
+      >
+        <ProgressBar disabled progress={0.6} />
+      </ProgressBarWithFixedLabels>
+      <ProgressBarWithFixedLabels
+        startLabel={{ value: 12500, render: renderStartLabelNum }}
+        endLabel={{ value: 35500, render: renderEndLabelNum }}
+        labelPlacement="above"
+        disabled
+      >
+        <ProgressBar disabled progress={0.6} />
+      </ProgressBarWithFixedLabels>
+    </VStack>
+  );
+}
+```
+
+### Custom Styles
+
+You can customize the appearance of the progress bar and labels using the `styles` prop.
+
+```tsx live
+<ProgressContainerWithButtons>
+  {({ calculateProgress }) => (
+    <VStack gap={2}>
+      <ProgressBarWithFixedLabels
+        endLabel={Math.round(calculateProgress(0.7) * 100)}
+        labelPlacement="above"
+        startLabel={0}
+        styles={{
+          startLabel: { color: 'red' },
+          endLabel: { color: 'green' },
+        }}
+      >
+        <ProgressBar
+          progress={calculateProgress(0.7)}
+          styles={{
+            root: { height: 24 },
+            progress: { borderRadius: 12 },
+          }}
+        />
+      </ProgressBarWithFixedLabels>
+    </VStack>
+  )}
+</ProgressContainerWithButtons>
+```
+
+