@coinbase/cds-mcp-server 8.17.2 → 8.17.3

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

@@ -0,0 +1,138 @@
+# ProgressBarWithFloatLabel
+
+A ProgressBar with a floating label that moves with progress.
+
+## Import
+
+```jsx
+import { ProgressBarWithFloatLabel } from '@coinbase/cds-mobile/visualizations/ProgressBarWithFloatLabel'
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `label` | `number \| { value: number; render: (num: number, disabled?: boolean \| undefined) => ReactNode; }` | Yes | `-` | Label that is floated at the end of the filled in bar. If a number is used then it will format it as a percentage. |
+| `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
+| `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
+| `labelPlacement` | `above \| below` | No | `above` | Position of label relative to the bar |
+| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | Custom styles for the progress bar with float label root. |
+| `styles` | `{ root?: StyleProp<ViewStyle>; labelContainer?: StyleProp<ViewStyle>; label?: StyleProp<TextStyle>; }` | No | `-` | Custom styles for the progress bar with float label. |
+| `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 Above
+
+```jsx live
+<VStack gap={2}>
+  <ProgressBarWithFloatLabel label={0} progress={0} labelPlacement="above">
+    <ProgressBar progress={0} />
+  </ProgressBarWithFloatLabel>
+  <ProgressBarWithFloatLabel label={20} progress={0.2} labelPlacement="above">
+    <ProgressBar progress={0.2} />
+  </ProgressBarWithFloatLabel>
+</VStack>
+```
+
+### Label Below
+
+```jsx live
+<VStack gap={2}>
+  <ProgressBarWithFloatLabel label={0} progress={0} labelPlacement="below">
+    <ProgressBar progress={0} />
+  </ProgressBarWithFloatLabel>
+  <ProgressBarWithFloatLabel label={20} progress={0.2} labelPlacement="below">
+    <ProgressBar progress={0.2} />
+  </ProgressBarWithFloatLabel>
+</VStack>
+```
+
+### Disabled
+
+```jsx live
+<VStack gap={2}>
+  <ProgressBarWithFloatLabel label={70} progress={0.7} disabled>
+    <ProgressBar progress={0.7} disabled />
+  </ProgressBarWithFloatLabel>
+</VStack>
+```
+
+### Custom Labels
+
+```jsx live
+function Example() {
+  const renderLabelNumStr = useCallback((num) => {
+    return `$${num.toLocaleString()}`;
+  }, []);
+
+  const renderLabelNum = useCallback((num, disabled) => {
+    return (
+      <TextTitle3 as="span" disabled={disabled}>
+        ${num.toLocaleString()}
+      </TextTitle3>
+    );
+  }, []);
+
+  return (
+    <VStack gap={2}>
+      <ProgressBarWithFloatLabel
+        progress={0.6}
+        label={{ value: 12500, render: renderLabelNumStr }}
+        labelPlacement="above"
+      >
+        <ProgressBar progress={0.6} />
+      </ProgressBarWithFloatLabel>
+      <ProgressBarWithFloatLabel
+        progress={0.6}
+        label={{ value: 12500, render: renderLabelNum }}
+        labelPlacement="above"
+      >
+        <ProgressBar progress={0.6} />
+      </ProgressBarWithFloatLabel>
+      <ProgressBarWithFloatLabel
+        progress={0.6}
+        label={{ value: 12500, render: renderLabelNumStr }}
+        labelPlacement="above"
+        disabled
+      >
+        <ProgressBar disabled progress={0.6} />
+      </ProgressBarWithFloatLabel>
+      <ProgressBarWithFloatLabel
+        progress={0.6}
+        label={{ value: 12500, render: renderLabelNum }}
+        labelPlacement="above"
+        disabled
+      >
+        <ProgressBar disabled progress={0.6} />
+      </ProgressBarWithFloatLabel>
+    </VStack>
+  );
+}
+```
+
+### Custom Styles
+
+You can customize the appearance of the progress bar and float label using the `styles` prop.
+
+```tsx live
+<ProgressContainerWithButtons>
+  {({ calculateProgress }) => (
+    <VStack gap={2}>
+      <ProgressBarWithFloatLabel
+        label={Math.round(calculateProgress(0.4) * 100)}
+        labelPlacement="above"
+        progress={calculateProgress(0.4)}
+        styles={{
+          label: { color: 'blue' },
+        }}
+      >
+        <ProgressBar progress={calculateProgress(0.4)} />
+      </ProgressBarWithFloatLabel>
+    </VStack>
+  )}
+</ProgressContainerWithButtons>
+```
+
+

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

@@ -0,0 +1,237 @@
+# ProgressCircle
+
+A circular visual indicator of completion progress.
+
+## Import
+
+```jsx
+import { ProgressCircle } from '@coinbase/cds-mobile/visualizations/ProgressCircle'
+```
+
+## 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. |
+| `contentNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Optional component to override the default content rendered inside the circle. |
+| `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
+| `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
+| `hideContent` | `boolean` | No | `-` | Toggle used to hide the content node rendered inside the circle. |
+| `hideText` | `boolean` | No | `-` | - |
+| `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 | `-` | - |
+| `size` | `number` | No | `-` | Optional size in px for the visualization. This is useful if the visualization is used in an HStack. If this is omitted the visualization will fill the parent width or height. Since its a circular visualization it will fill the smaller of the parent width or height |
+| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | Custom styles for the progress circle root. |
+| `styles` | `{ root?: StyleProp<ViewStyle>; svgContainer?: StyleProp<ViewStyle>; svg?: StyleProp<ViewStyle>; textContainer?: StyleProp<ViewStyle>; progress?: Partial<CircleProps>; circle?: Partial<CircleProps> \| undefined; } \| undefined` | No | `-` | Custom styles for the progress circle. |
+| `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
+
+```jsx
+<HStack gap={2}>
+  <ProgressCircle progress={0} size={100} />
+  <ProgressCircle progress={0.5} size={100} />
+  <ProgressCircle progress={1} size={100} />
+</HStack>
+```
+
+### Thin
+
+```jsx
+<HStack gap={2}>
+  <ProgressCircle progress={0} weight="thin" size={100} />
+  <ProgressCircle progress={0.5} weight="thin" size={100} />
+  <ProgressCircle progress={1} weight="thin" size={100} />
+</HStack>
+```
+
+### Semiheavy
+
+```jsx
+<HStack gap={2}>
+  <ProgressCircle progress={0} weight="semiheavy" size={100} />
+  <ProgressCircle progress={0.5} weight="semiheavy" size={100} />
+  <ProgressCircle progress={1} weight="semiheavy" size={100} />
+</HStack>
+```
+
+### Heavy
+
+```jsx
+<HStack gap={2}>
+  <ProgressCircle progress={0} weight="heavy" size={100} />
+  <ProgressCircle progress={0.5} weight="heavy" size={100} />
+  <ProgressCircle progress={1} weight="heavy" size={100} />
+</HStack>
+```
+
+### No Text
+
+```jsx
+<HStack gap={2}>
+  <ProgressCircle progress={0} hideContent size={25} />
+  <ProgressCircle progress={0.5} hideContent size={25} />
+  <ProgressCircle progress={1} hideContent size={25} />
+</HStack>
+```
+
+### Disabled
+
+```jsx
+<HStack gap={2}>
+  <ProgressCircle progress={0} disabled size={100} />
+  <ProgressCircle progress={0.5} disabled size={100} />
+  <ProgressCircle progress={1} disabled size={100} />
+</HStack>
+```
+
+### Colors
+
+```jsx
+<HStack gap={2}>
+  <ProgressCircle progress={0.5} color="fgPositive" size={100} />
+  <ProgressCircle progress={0.5} color="bgNegative" size={100} />
+  <ProgressCircle progress={0.5} color="bgPrimary" size={100} />
+  <ProgressCircle progress={0.5} color="fg" size={100} />
+</HStack>
+```
+
+### Fill Parent
+
+The progress circle can be dynamically sized to fit its parent. If you drag the browser window smaller or larger then the ProgressCircle will resize accordingly.
+
+```jsx
+<HStack gap={2} flexWrap="wrap">
+  <div style={{ height: '15vw', width: '15vw', minWidth: '60px', minHeight: '60px' }}>
+    <ProgressCircle progress={1} />
+  </div>
+  <div style={{ height: '10vw', width: '10vw', minWidth: '60px', minHeight: '60px' }}>
+    <ProgressCircle progress={1} />
+  </div>
+  <div style={{ height: '5vw', width: '5vw', minWidth: '60px', minHeight: '60px' }}>
+    <ProgressCircle progress={1} />
+  </div>
+</HStack>
+```
+
+### Content Node Customization
+
+You can override the default content node to display a custom node. Note that the content node is clipped to the circle.
+
+#### With Asset
+
+You can provide an image, such as an asset, as the content node.
+
+```jsx
+<ProgressCircle
+  progress={1}
+  size={56}
+  styles={{
+    progress: {
+      stroke: assets.eth.color,
+    },
+  }}
+  contentNode={
+    <Box height="100%" padding={0.25} width="100%">
+      <RemoteImage
+        alt={assets.eth.name}
+        shape="circle"
+        source={assets.eth.imageUrl}
+        style={{ width: '100%', height: '100%' }}
+      />
+    </Box>
+  }
+  weight="thin"
+/>
+```
+
+#### Custom Text Color
+
+The progress circle's default content can be customized to display a custom text color.
+
+```jsx
+<HStack gap={2}>
+  <ProgressCircle
+    color="fgPrimary"
+    progress={0.2}
+    size={100}
+    contentNode={<DefaultProgressCircleContent color="fgPrimary" progress={0.2} />}
+  />
+  <ProgressCircle
+    color="fgPositive"
+    progress={0.4}
+    size={100}
+    contentNode={<DefaultProgressCircleContent color="fgPositive" progress={0.4} />}
+  />
+</HStack>
+```
+
+### Custom Styles
+
+The progress circle can be customized with styles.
+
+```jsx
+<HStack gap={2}>
+  <ProgressCircle
+    progress={0.4}
+    size={100}
+    styles={{
+      circle: {
+        stroke: 'transparent',
+      },
+    }}
+    contentNode={<TextTitle1 color="fgPrimary">40%</TextTitle1>}
+    weight="semiheavy"
+  />
+  <ProgressCircle
+    color="fgPositive"
+    progress={0.6}
+    size={100}
+    styles={{
+      progress: {
+        strokeLinecap: 'square',
+      },
+    }}
+    contentNode={<Icon color="fgPositive" name="circleCheckmark" size="l" />}
+  />
+</HStack>
+```
+
+#### 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>
+      <ProgressCircle
+        onAnimationEnd={handleAnimationEnd}
+        onAnimationStart={handleAnimationStart}
+        progress={calculateProgress(0.2)}
+        size={100}
+      />
+    </VStack>
+  );
+}
+```
+
+

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

@@ -0,0 +1,242 @@
+# Radio
+
+Radio is a control component that allows users to select one option from a set of mutually exclusive options.
+
+## Import
+
+```jsx
+import { Radio } from '@coinbase/cds-mobile/controls/Radio'
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `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 | `bg` | Background color of the overlay (element being interacted with). |
+| `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 | `checked ? controlColor : 'bgLineHeavy'` | - |
+| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `1000` | - |
+| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `checked` | `boolean` | No | `-` | Set the control to selected/on. |
+| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label for the control option. |
+| `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 | `black` | - |
+| `controlColor` | `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 | `bgPrimary` | Sets the checked/active color of the control. |
+| `disabled` | `boolean` | No | `-` | Disable user interaction. |
+| `indeterminate` | `boolean` | No | `-` | Enable indeterminate state. Useful when you want to indicate that sub-items of a control are partially filled. |
+| `onChange` | `((value: T, checked?: boolean \| undefined) => void) \| undefined` | No | `-` | Toggle control selected state. |
+| `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. |
+| `readOnly` | `boolean` | No | `-` | Set the control to ready-only. Similar effect as disabled. |
+| `ref` | `null \| (instance: View \| null) => void \| RefObject<View>` | No | `-` | - |
+| `style` | `ViewStyle` | No | `-` | - |
+| `testID` | `string` | No | `-` | Used to locate this view in end-to-end tests. |
+| `value` | `string` | No | `-` | Value of the option. Useful for multiple choice. |
+
+
+## Examples
+
+### Basic Usage
+
+Radio components are typically used individually as part of a radio group. Each radio represents a single option in a mutually exclusive set.
+
+```jsx
+function BasicRadio() {
+  const [selectedValue, setSelectedValue] = useState('option1');
+
+  return (
+    <VStack gap={2}>
+      <Radio
+        name="basic-radio"
+        value="option1"
+        checked={selectedValue === 'option1'}
+        onChange={(value) => setSelectedValue(value)}
+      >
+        Option 1
+      </Radio>
+      <Radio
+        name="basic-radio"
+        value="option2"
+        checked={selectedValue === 'option2'}
+        onChange={(value) => setSelectedValue(value)}
+      >
+        Option 2
+      </Radio>
+      <Radio
+        name="basic-radio"
+        value="option3"
+        checked={selectedValue === 'option3'}
+        onChange={(value) => setSelectedValue(value)}
+      >
+        Option 3
+      </Radio>
+    </VStack>
+  );
+}
+```
+
+### Radio Groups
+
+The recommended way to use Radio components is with a ControlGroup for better accessibility and easier state management.
+
+```jsx
+function RadioGroupExample() {
+  const options = [
+    { value: 'btc', children: 'Bitcoin' },
+    { value: 'eth', children: 'Ethereum' },
+    { value: 'ltc', children: 'Litecoin' },
+  ];
+
+  const [selectedCurrency, setSelectedCurrency] = useState('btc');
+
+  return (
+    <ControlGroup
+      accessibilityRole="radiogroup"
+      ControlComponent={Radio}
+      label="Choose a cryptocurrency"
+      options={options}
+      value={selectedCurrency}
+      onChange={setSelectedCurrency}
+      name="currency-radio-group"
+    />
+  );
+}
+```
+
+### Custom Colors
+
+You can customize the radio's color using the `controlColor` prop.
+
+```jsx
+function CustomColorRadio() {
+  const [selectedColor, setSelectedColor] = useState('default');
+
+  return (
+    <VStack gap={2}>
+      <Radio
+        name="color-radio"
+        value="default"
+        checked={selectedColor === 'default'}
+        onChange={(value) => setSelectedColor(value)}
+      >
+        Default Color
+      </Radio>
+      <Radio
+        name="color-radio"
+        value="green"
+        checked={selectedColor === 'green'}
+        onChange={(value) => setSelectedColor(value)}
+        controlColor="accentBoldGreen"
+      >
+        Custom Green
+      </Radio>
+      <Radio
+        name="color-radio"
+        value="purple"
+        checked={selectedColor === 'purple'}
+        onChange={(value) => setSelectedColor(value)}
+        controlColor="accentBoldPurple"
+      >
+        Custom Purple
+      </Radio>
+    </VStack>
+  );
+}
+```
+
+### Disabled State
+
+Radio components can be disabled to prevent user interaction.
+
+```jsx
+function DisabledRadio() {
+  const [selectedValue, setSelectedValue] = useState('enabled');
+
+  return (
+    <VStack gap={2}>
+      <Radio
+        name="disabled-radio"
+        value="enabled"
+        checked={selectedValue === 'enabled'}
+        onChange={(value) => setSelectedValue(value)}
+      >
+        Enabled Radio
+      </Radio>
+      <Radio
+        name="disabled-radio"
+        value="disabled-unchecked"
+        checked={false}
+        disabled
+        onChange={(value) => setSelectedValue(value)}
+      >
+        Disabled & Unchecked
+      </Radio>
+      <Radio
+        name="disabled-radio"
+        value="disabled-checked"
+        checked={true}
+        disabled
+        onChange={(value) => setSelectedValue(value)}
+      >
+        Disabled & Checked
+      </Radio>
+    </VStack>
+  );
+}
+```
+
+### Accessibility
+
+Radio components on mobile should always include proper accessibility labels and hints.
+
+```jsx
+function AccessibleRadio() {
+  const [selectedPayment, setSelectedPayment] = useState('credit');
+
+  return (
+    <VStack gap={2}>
+      <Radio
+        name="payment-radio"
+        value="credit"
+        checked={selectedPayment === 'credit'}
+        onChange={(value) => setSelectedPayment(value)}
+        accessibilityLabel="Credit Card"
+        accessibilityHint="Pay with credit card"
+      >
+        Credit Card
+      </Radio>
+      <Radio
+        name="payment-radio"
+        value="debit"
+        checked={selectedPayment === 'debit'}
+        onChange={(value) => setSelectedPayment(value)}
+        accessibilityLabel="Debit Card"
+        accessibilityHint="Pay with debit card"
+      >
+        Debit Card
+      </Radio>
+      <Radio
+        name="payment-radio"
+        value="crypto"
+        checked={selectedPayment === 'crypto'}
+        onChange={(value) => setSelectedPayment(value)}
+        accessibilityLabel="Cryptocurrency"
+        accessibilityHint="Pay with cryptocurrency"
+      >
+        Cryptocurrency
+      </Radio>
+    </VStack>
+  );
+}
+```
+
+