@utilitywarehouse/hearth-react-native 0.3.0 → 0.3.1

package/src/components/IconContainer/IconContainer.docs.mdx

@@ -2,8 +2,8 @@ import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
 import {
   BroadbandMediumIcon,
   CashbackCardMediumIcon,
-  ConfettiMediumIcon,
   ElectricityMediumIcon,
+  EmailMediumIcon,
   InsuranceMediumIcon,
   MobileMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
@@ -42,7 +42,7 @@ Wrap an icon with the `IconContainer` to apply sizing + background styles withou
       <IconContainer icon={MobileMediumIcon} size="md" variant="emphasis" color="mobile" />
       <IconContainer icon={InsuranceMediumIcon} size="md" variant="emphasis" color="insurance" />
       <IconContainer icon={CashbackCardMediumIcon} size="md" variant="emphasis" color="cashback" />
-      <IconContainer icon={ConfettiMediumIcon} size="md" variant="emphasis" color="pig" />
+      <IconContainer icon={EmailMediumIcon} size="md" variant="emphasis" color="pig" />
     </Flex>
   </Center>
 </UsageWrap>
@@ -55,7 +55,7 @@ import {
   MobileMediumIcon,
   InsuranceMediumIcon,
   CashbackCardMediumIcon,
-  ConfettiMediumIcon,
+  ,
 } from '@utilitywarehouse/hearth-react-native-icons';
 
 const MyComponent = () => (
@@ -65,7 +65,7 @@ const MyComponent = () => (
     <IconContainer icon={MobileMediumIcon} size="md" variant="emphasis" color="mobile" />
     <IconContainer icon={InsuranceMediumIcon} size="md" variant="emphasis" color="insurance" />
     <IconContainer icon={CashbackCardMediumIcon} size="md" variant="emphasis" color="cashback" />
-    <IconContainer icon={ConfettiMediumIcon} size="md" variant="emphasis" color="pig" />
+    <IconContainer icon={EmailMediumIcon} size="md" variant="emphasis" color="pig" />
   </>
 );
 ```

package/src/components/Link/Link.props.ts

@@ -1,5 +1,6 @@
 import { ComponentType } from 'react';
 import { PressableProps, TextProps } from 'react-native';
+import { IconProps } from '../Icon';
 
 export interface LinkProps extends Omit<PressableProps, 'children'> {
   children: TextProps['children'];
@@ -10,6 +11,8 @@ export interface LinkProps extends Omit<PressableProps, 'children'> {
   icon?: ComponentType;
   iconPosition?: 'left' | 'right';
   showIcon?: boolean;
+  textStyle?: TextProps['style'];
+  iconStyle?: IconProps['style'];
 }
 
 export default LinkProps;

package/src/components/Link/Link.tsx

@@ -1,9 +1,9 @@
-import type { LinkProps } from './Link.props';
 import { createLink } from '@gluestack-ui/link';
+import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import type { LinkProps } from './Link.props';
+import LinkIcon from './LinkIcon';
 import LinkRoot from './LinkRoot';
 import LinkTextComponent from './LinkText';
-import LinkIcon from './LinkIcon';
-import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
 const LinkComponent = createLink({
   Root: LinkRoot,
@@ -21,14 +21,20 @@ const Link = ({
   target = '_self',
   iconPosition = 'right',
   showIcon = true,
+  textStyle,
+  iconStyle,
   ...props
 }: LinkProps) => {
   const LinkAny = LinkComponent as any;
   return (
     <LinkAny {...props} isDisabled={disabled} isExternal={target === '_blank'}>
-      {showIcon && icon && iconPosition === 'left' ? <LinkIcon as={icon} /> : null}
-      <LinkText>{children}</LinkText>
-      {showIcon && icon && iconPosition === 'right' ? <LinkIcon as={icon} /> : null}
+      {showIcon && icon && iconPosition === 'left' ? (
+        <LinkIcon as={icon} style={iconStyle} />
+      ) : null}
+      <LinkText style={textStyle}>{children}</LinkText>
+      {showIcon && icon && iconPosition === 'right' ? (
+        <LinkIcon as={icon} style={iconStyle} />
+      ) : null}
     </LinkAny>
   );
 };

package/src/components/List/List.docs.mdx

@@ -4,7 +4,8 @@ import {
   ChevronRightSmallIcon,
   ElectricityMediumIcon,
   GasMediumIcon,
-  HomeFilledMediumIcon,
+  InfoMediumIcon as HomeMediumIcon,
+  // HomeMediumIcon,
   PaymentMediumIcon,
   UserMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
@@ -15,7 +16,6 @@ import {
   FlatList,
   Image,
   List,
-  SectionHeader,
   ListItem,
   ListItemContent,
   ListItemHelperText,
@@ -24,6 +24,7 @@ import {
   ListItemText,
   ListItemTrailingContent,
   ListItemTrailingIcon,
+  SectionHeader,
 } from '../../';
 import { BackToTopButton, BadgeList, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './List.stories';
@@ -87,21 +88,21 @@ const MyComponent = () => (
 
 ### `List`
 
-| Name                    | Type                                                                                              | Default   | Description                                                |
-| ----------------------- | ------------------------------------------------------------------------------------------------- | --------- | ---------------------------------------------------------- |
-| container               | `'none' \| 'subtleWhite' \| 'emphasisWhite' \|` <br /> `'subtleWarmWhite' \| 'emphasisWarmWhite'` | `'none'`  | The container style of the list.                           |
-| heading                 | `string`                                                                                          |           | The text to display in the heading of the list.            |
-| helperText              | `string`                                                                                          |           | The supporting text to display in the heading of the list. |
-| linkText                | `string`                                                                                          |           | The text for the link in the heading.                      |
-| linkHref                | `string`                                                                                          |           | The href for the link in the heading.                      |
-| linkOnPress             | `() => void`                                                                                      |           | Callback function when the heading link is pressed.        |
-| linkTarget              | `'_blank' \| '_self' \| '_parent' \| '_top'`                                                      |           | Target for the link in the heading.                        |                   |
-| linkIcon                | `ComponentType`                                                                                   |           | Icon for the heading link.                                 |
-| linkIconPosition        | `'left' \| 'right'`                                                                               | `'right'` | Position of the icon in the heading link.                  |
-| linkShowIcon            | `boolean`                                                                                         | `true`    | Whether to show the icon in the heading link.              |
-| divider                 | `boolean`                                                                                         | `false`   | Whether to display a divider below the list items.         |
-| loading                 | `boolean`                                                                                         | `false`   | Whether to show the list items in loading state.           |
-| disabled                | `boolean`                                                                                         | `false`   | Whether to disable the list.                               |
+| Name             | Type                                                                                              | Default   | Description                                                |
+| ---------------- | ------------------------------------------------------------------------------------------------- | --------- | ---------------------------------------------------------- | --- |
+| container        | `'none' \| 'subtleWhite' \| 'emphasisWhite' \|` <br /> `'subtleWarmWhite' \| 'emphasisWarmWhite'` | `'none'`  | The container style of the list.                           |
+| heading          | `string`                                                                                          |           | The text to display in the heading of the list.            |
+| helperText       | `string`                                                                                          |           | The supporting text to display in the heading of the list. |
+| linkText         | `string`                                                                                          |           | The text for the link in the heading.                      |
+| linkHref         | `string`                                                                                          |           | The href for the link in the heading.                      |
+| linkOnPress      | `() => void`                                                                                      |           | Callback function when the heading link is pressed.        |
+| linkTarget       | `'_blank' \| '_self' \| '_parent' \| '_top'`                                                      |           | Target for the link in the heading.                        |     |
+| linkIcon         | `ComponentType`                                                                                   |           | Icon for the heading link.                                 |
+| linkIconPosition | `'left' \| 'right'`                                                                               | `'right'` | Position of the icon in the heading link.                  |
+| linkShowIcon     | `boolean`                                                                                         | `true`    | Whether to show the icon in the heading link.              |
+| divider          | `boolean`                                                                                         | `false`   | Whether to display a divider below the list items.         |
+| loading          | `boolean`                                                                                         | `false`   | Whether to show the list items in loading state.           |
+| disabled         | `boolean`                                                                                         | `false`   | Whether to disable the list.                               |
 
 ### `ListItem`
 
@@ -172,7 +173,7 @@ If you need to use the List component in a more advanced way, you can use the pa
     </ListItem>
     <ListItem onPress={() => console.log('pressed')}>
       <ListItemLeadingContent>
-        <ListItemIcon as={HomeFilledMediumIcon} />
+        <ListItemIcon as={HomeMediumIcon} />
       </ListItemLeadingContent>
       <ListItemContent>
         <ListItemText>Moving home</ListItemText>
@@ -214,7 +215,7 @@ import {
   BillMediumIcon,
   ChevronRightSmallIcon,
   PaymentMediumIcon,
-  HomeFilledMediumIcon,
+  HomeMediumIcon,
   UserMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
 
@@ -247,7 +248,7 @@ const MyComponent = () => (
     </ListItem>
     <ListItem onPress={() => console.log('pressed')}>
       <ListItemLeadingContent>
-        <ListItemIcon as={HomeFilledMediumIcon} />
+        <ListItemIcon as={HomeMediumIcon} />
       </ListItemLeadingContent>
       <ListItemContent>
         <ListItemText>Moving home</ListItemText>
@@ -302,7 +303,7 @@ the `Card` and child `ListItem` components.
       onPress={() => console.log('item pressed')}
     />
     <ListItem
-      leadingContent={<HomeFilledMediumIcon />}
+      leadingContent={<HomeMediumIcon />}
       text="Moving Home"
       onPress={() => console.log('item pressed')}
     />
@@ -314,7 +315,7 @@ import { List, ListItem, Card } from '@utilitywarehouse/hearth-react-native';
 import {
   BillMediumIcon,
   PaymentMediumIcon,
-  HomeFilledMediumIcon,
+  HomeMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
 
 const MyComponent = () => (
@@ -332,7 +333,7 @@ const MyComponent = () => (
       onPress={() => console.log('item pressed')}
     />
     <ListItem
-      leadingContent={<HomeFilledMediumIcon />}
+      leadingContent={<HomeMediumIcon />}
       text="Moving Home"
       onPress={() => console.log('item pressed')}
     />

package/src/components/Radio/Radio.docs.mdx

@@ -1,22 +1,20 @@
-import { Meta, Canvas, Story, Controls } from '@storybook/addon-docs/blocks';
-import * as Stories from './Radio.stories';
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
+import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import {
+  Box,
+  Center,
   Radio,
   RadioGroup,
-  RadioIndicator,
   RadioIcon,
+  RadioImage,
+  RadioIndicator,
   RadioLabel,
-  Center,
-  Box,
   RadioTile,
 } from '../../';
-import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import {
-  ViewFigmaButton,
-  BackToTopButton,
-  UsageWrap,
-  AdvancedRadioExample,
-} from '../../../docs/components';
+import mastercardLogo from '../../../docs/assets/bank-logo.png';
+import visaLogo from '../../../docs/assets/bank-logo1.png';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './Radio.stories';
 
 <Meta title="Forms / Radio" />
 
@@ -38,10 +36,12 @@ The Radio component presents users with predefined choices and enables them to s
   - [`RadioIcon`](#radioicon)
   - [`RadioLabel`](#radiolabel)
   - [`RadioGroup`](#radiogroup)
+  - [`RadioImage`](#radioimage)
 - [Variants](#variants)
 - [Advanced Usage](#advanced-usage)
 - [Examples](#examples)
   - [`RadioTile` component](#radiotile-component)
+  - [`RadioImage` component](#radioimage-component)
   - [`RadioGroup` component](#radiogroup-component)
 
 ## Playground
@@ -104,6 +104,7 @@ const MyComponent = () => {
 | `validText`          | `string`                            | -         | The valid text to be displayed below the radio.                                                      |
 | `showValidationIcon` | `boolean`                           | `true`    | Whether to show the validation icon.                                                                 |
 | `type`               | `'default' \| 'tile'`               | `default` | The type of the radio.                                                                               |
+| `image`              | `ImageProps`                        | -         | The image to be displayed next to the label.                                                         |
 
 ## Components
 
@@ -147,6 +148,10 @@ Contains all Group related layout style props and actions. It inherits all the p
 | `direction`          | `'row' \| 'column'`                 | `column`  | The direction of the radio group.                                   |
 | `gap`                | `string`                            | -         | The gap between the radio group items.                              |
 
+### `RadioImage`
+
+Contains all Image related layout style props and actions. It inherits all the properties of React Native's [Image component](https://reactnative.dev/docs/image).
+
 ## Variants
 
 <Canvas of={Stories.Variants} />
@@ -158,133 +163,65 @@ In this example, we will create a custom Radio component with a badge and bullet
 
 <UsageWrap>
   <Center>
-    <AdvancedRadioExample />
+    <RadioGroup type="tile" aria-label="Radio Group" nativeID="Radio-group">
+      <Radio value="option-1" aria-label="Label 1">
+        <RadioIndicator>
+          <RadioIcon />
+        </RadioIndicator>
+        <RadioImage source={visaLogo} style={{ width: 40, height: 24, resizeMode: 'contain' }} />
+        <RadioLabel>Visa</RadioLabel>
+      </Radio>
+      <Radio value="option-2" aria-label="Label 2">
+        <RadioIndicator>
+          <RadioIcon />
+        </RadioIndicator>
+        <RadioImage
+          source={mastercardLogo}
+          style={{ width: 40, height: 24, resizeMode: 'contain' }}
+        />
+        <RadioLabel>Mastercard</RadioLabel>
+      </Radio>
+    </RadioGroup>
   </Center>
 </UsageWrap>
 
 ```tsx
 import {
-  Badge,
-  Heading,
   Radio,
   RadioGroup,
-  RadioIcon,
+  RadioLabel,
   RadioIndicator,
-  BodyText,
-  Box,
-  type RadioProps as NativeUIRadioProps,
-} from '../../src';
+  RadioIcon,
+  RadioImage,
+} from '@utilitywarehouse/native-ui';
 import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import visaLogo from '../../assets/bank-logo1.png';
+import mastercardLogo from '../../assets/bank-logo.png';
 
-import { StyleSheet } from 'react-native-unistyles';
-
-interface RadioProps {
-  currentValue: string;
-}
-
-const styles = StyleSheet.create(({ colorMode, color, borderRadius, borderWidth, space }) => ({
-  radio: {
-    borderWidth: borderWidth[2],
-    borderColor: colorMode === 'light' ? color.grey[500] : color.grey[700],
-    borderRadius: borderRadius.xl,
-    padding: space[200],
-    variants: {
-      checked: {
-        true: {
-          borderColor: colorMode === 'light' ? color.green[500] : color.green[700],
-        },
-      },
-    },
-  },
-  indicator: {
-    variants: {
-      checked: {
-        true: {
-          backgroundColor: colorMode === 'light' ? color.green[500] : color.green[700],
-          borderColor: colorMode === 'light' ? color.green[500] : color.green[700],
-        },
-      },
-    },
-  },
-  heading: {
-    marginBottom: space[100],
-  },
-  badge: {
-    marginRight: space[200],
-    alignSelf: 'flex-end',
-  },
-}));
-
-const CustomRadio: React.FC<
-  RadioProps &
-    Omit<
-      NativeUIRadioProps,
-      'label' | 'helperText' | 'helperIcon' | 'invalidText' | 'validText' | 'showValidationIcon'
-    >
-> = ({ children, currentValue, ...props }) => {
-  styles.useVariants({ checked: currentValue === props.value });
+const AdvancedExample = () => {
+  const [value, setValue] = React.useState('option-1');
   return (
-    <Radio style={styles.radio} {...props}>
-      <Box flexDirection="row" flex={1}>
-        <Box pr="200" flex={1}>
-          {children}
-        </Box>
-        <RadioIndicator style={styles.indicator}>
-          <RadioIcon as={TickSmallIcon} color="white" />
+    <RadioGroup value={value} onChange={setValue} aria-label="Card type" type="tile">
+      <Radio value="option-1" aria-label="Visa">
+        <RadioIndicator>
+          <RadioIcon />
         </RadioIndicator>
-      </Box>
-    </Radio>
-  );
-};
-
-const BulletListItem = ({ children }: { children: React.ReactNode }) => (
-  <BodyText>
-    {'\u2022'} {children}
-  </BodyText>
-);
-
-const BulletList = ({ children }: { children: React.ReactNode }) => (
-  <Box pl="200" gap="100">
-    {children}
-  </Box>
-);
-
-const AdvancedRadioExample: React.FC = () => {
-  const [value, setValue] = React.useState('Option 1');
-
-  const handleChange = (val: string) => setValue(val);
-
-  return (
-    <RadioGroup onChange={handleChange} value={value} gap="200">
-      <Box>
-        <Badge colorScheme={value === 'Option 1' ? 'green' : 'grey'} flatBase style={styles.badge}>
-          Recommended
-        </Badge>
-        <CustomRadio value="Option 1" currentValue={value}>
-          <Heading size="md" style={styles.heading}>
-            Instant bank transfer
-          </Heading>
-          <BulletList>
-            <BulletListItem>Receive your money instantly</BulletListItem>
-            <BulletListItem>No fees</BulletListItem>
-            <BulletListItem>Available 24/7</BulletListItem>
-          </BulletList>
-        </CustomRadio>
-      </Box>
-      <CustomRadio value="Option 2" currentValue={value}>
-        <Heading size="md" style={styles.heading}>
-          Debit card payment
-        </Heading>
-        <BulletList>
-          <BulletListItem>£0.35 fee</BulletListItem>
-          <BulletListItem>Available 24/7</BulletListItem>
-        </BulletList>
-      </CustomRadio>
+        <RadioImage source={visaLogo} style={{ width: 40, height: 24, resizeMode: 'contain' }} />
+        <RadioLabel>Visa</RadioLabel>
+      </Radio>
+      <Radio value="option-2" aria-label="Mastercard">
+        <RadioIndicator>
+          <RadioIcon />
+        </RadioIndicator>
+        <RadioImage
+          source={mastercardLogo}
+          style={{ width: 40, height: 24, resizeMode: 'contain' }}
+        />
+        <RadioLabel>Mastercard</RadioLabel>
+      </Radio>
     </RadioGroup>
   );
 };
-
-export default AdvancedRadioExample;
 ```
 
 ## Examples
@@ -317,6 +254,41 @@ const MyComponent = () => {
 };
 ```
 
+### `RadioImage` component
+
+The `RadioImage` component is used to display an image next to the radio button.
+
+<Canvas of={Stories.WithImage} />
+
+```tsx
+import { Radio, RadioGroup } from '@utilitywarehouse/native-ui';
+import visaLogo from './visa-logo.png';
+import mastarcardLogo from './mastercard-logo.png';
+
+const MyComponent = () => {
+  const [value, setValue] = React.useState('Option 1');
+  return (
+    <RadioGroup value={value} onChange={setValue} aria-label="Radio Group" nativeID="Radio-group">
+      <Radio
+        value="visa"
+        aria-label="Visa"
+        label="Visa"
+        image={{ source: visaLogo, style: { width: 40, height: 24, resizeMode: 'contain' } }}
+      />
+      <Radio
+        value="mastercard"
+        aria-label="Mastercard"
+        label="Mastercard"
+        image={{
+          source: mastarcardLogo,
+          style: { width: 40, height: 24, resizeMode: 'contain' },
+        }}
+      />
+    </RadioGroup>
+  );
+};
+```
+
 ### `RadioGroup` component
 
 The `RadioGroup` component is used to group multiple `Radio` components together.

package/src/components/Radio/Radio.props.ts

@@ -1,5 +1,5 @@
 import type { ComponentType } from 'react';
-import type { PressableProps, ViewProps } from 'react-native';
+import type { ImageProps, PressableProps, ViewProps } from 'react-native';
 
 interface RadioBaseProps extends Omit<PressableProps, 'children'> {
   value: string;
@@ -17,6 +17,7 @@ interface RadioWithChildrenProps extends RadioBaseProps {
   invalidText?: never;
   validText?: never;
   showValidationIcon?: never;
+  image?: never;
 }
 
 interface RadioWithoutChildrenProps extends RadioBaseProps {
@@ -27,6 +28,7 @@ interface RadioWithoutChildrenProps extends RadioBaseProps {
   invalidText?: string;
   validText?: string;
   showValidationIcon?: boolean;
+  image?: ImageProps;
 }
 
 type RadioProps = RadioWithChildrenProps | RadioWithoutChildrenProps;

package/src/components/Radio/Radio.stories.tsx

@@ -1,6 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
+import { ImageSourcePropType } from 'react-native';
 import { Radio, RadioGroup } from '.';
+import bankLogo from '../../../docs/assets/bank-logo.png';
+import bankLogo1 from '../../../docs/assets/bank-logo1.png';
 import { VariantTitle } from '../../../docs/components';
 import { Flex } from '../Flex';
 
@@ -84,6 +87,50 @@ export const Playground: Story = {
   ),
 };
 
+export const WithImage: Story = {
+  parameters: {
+    controls: { exclude: ['image'] },
+  },
+  args: {
+    value: 'Option 1',
+    label: 'Label',
+  },
+  render: ({ children, ...args }) => (
+    <RadioGroup>
+      <Radio
+        aria-label="Label 1"
+        onChange={(checked: boolean) => {
+          console.log(checked, '###');
+        }}
+        nativeID="Radio-1"
+        {...args}
+        label="Visa"
+        value="Option 1"
+        image={{
+          source: bankLogo1 as ImageSourcePropType,
+          style: { width: 48, height: 32 },
+          resizeMode: 'cover',
+        }}
+      />
+      <Radio
+        aria-label="Label 2"
+        onChange={(checked: boolean) => {
+          console.log(checked, '###');
+        }}
+        nativeID="Radio-2"
+        {...args}
+        label="Mastercard"
+        value="Option 2"
+        image={{
+          source: bankLogo as ImageSourcePropType,
+          style: { width: 48, height: 32 },
+          resizeMode: 'cover',
+        }}
+      />
+    </RadioGroup>
+  ),
+};
+
 export const Variants: Story = {
   parameters: {
     controls: { exclude: ['value', 'label', 'disabled'] },

package/src/components/Radio/Radio.tsx

@@ -1,16 +1,17 @@
 import { createRadio } from '@gluestack-ui/radio';
-import StyledRadio from './RadioRoot';
-import StyledRadioIndicator from './RadioIndicator';
+import RadioProps from './Radio.props';
+import StyledRadioGroup from './RadioGroupRoot';
 import StyledRadioIcon from './RadioIcon';
+import StyledRadioIndicator from './RadioIndicator';
 import StyledRadioLabel from './RadioLabel';
-import StyledRadioGroup from './RadioGroupRoot';
-import RadioProps from './Radio.props';
+import StyledRadio from './RadioRoot';
 
+import { useFormFieldContext } from '../FormField';
 import { Helper } from '../Helper';
 import { useRadioGroupContext } from './RadioGroup.context';
-import { useFormFieldContext } from '../FormField';
-import RadioTileRoot from './RadioTileRoot';
+import RadioImage from './RadioImage';
 import RadioTextContent from './RadioTextContent';
+import RadioTileRoot from './RadioTileRoot';
 
 const RadioComponent = createRadio({
   Root: StyledRadio,
@@ -41,6 +42,7 @@ const Radio = ({
   validationStatus: validation,
   showValidationIcon,
   type = 'default',
+  image,
   ...props
 }: RadioProps) => {
   const { validationStatus: fieldValidationStatus } = useFormFieldContext();
@@ -55,6 +57,7 @@ const Radio = ({
       <RadioIndicator>
         <RadioIcon />
       </RadioIndicator>
+      {image ? <RadioImage {...image} /> : null}
       <RadioTextContent>
         {!!label && <RadioLabel>{label}</RadioLabel>}
         {!!helperText && <Helper disabled={disabled} icon={helperIcon} text={helperText} />}
@@ -89,6 +92,6 @@ const RadioTile = ({ type = 'tile', ...props }: RadioProps) => <Radio {...props}
 RadioTile.displayName = 'RadioTile';
 Radio.displayName = 'Radio';
 
-export { Radio, RadioGroup, RadioIndicator, RadioIcon, RadioLabel, RadioTile };
+export { Radio, RadioGroup, RadioIcon, RadioIndicator, RadioLabel, RadioTile };
 
 export default Radio;

package/src/components/Radio/RadioImage.tsx

@@ -0,0 +1,9 @@
+import { Image, ImageProps } from 'react-native';
+
+const RadioImage = ({ source, style, ...props }: ImageProps) => (
+  <Image source={source} style={style} {...props} />
+);
+
+RadioImage.displayName = 'RadioImage';
+
+export default RadioImage;

package/src/components/Radio/RadioTileRoot.tsx

@@ -19,7 +19,7 @@ const styles = StyleSheet.create(theme => ({
     gap: theme.components.radio.gap,
     padding: theme.components.radio.tile.padding,
     borderWidth: theme.components.radio.tile.borderWidth,
-    borderColor: theme.color.border.subtle,
+    borderColor: theme.color.border.strong,
     borderRadius: theme.components.radio.tile.borderRadius,
     backgroundColor: theme.color.surface.neutral.strong,
     variants: {

package/src/components/Radio/index.ts

@@ -1,5 +1,6 @@
-export { default as Radio, RadioIndicator, RadioLabel, RadioIcon, RadioTile } from './Radio';
+export { default as Radio, RadioIcon, RadioIndicator, RadioLabel, RadioTile } from './Radio';
+export type { default as RadioProps } from './Radio.props';
 export { default as RadioGroup } from './RadioGroup';
 export { default as RadioGroupTextContent } from './RadioGroupTextContent';
+export { default as RadioImage } from './RadioImage';
 export { default as RadioTextContent } from './RadioTextContent';
-export type { default as RadioProps } from './Radio.props';