@utilitywarehouse/hearth-react-native 0.19.1 → 0.20.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.19.1 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.20.0 build /home/runner/work/hearth/hearth/packages/react-native
 > tsc
 

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.19.1 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.20.0 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint .
 
 
@@ -58,15 +58,15 @@
 
 ✖ 25 problems (0 errors, 25 warnings)
 
-Rule                                              | Time (ms) | Relative
-:-------------------------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars                 |  1514.844 |    61.6%
-no-global-assign                                  |    96.121 |     3.9%
-react-hooks/rules-of-hooks                        |    93.488 |     3.8%
-react-hooks/exhaustive-deps                       |    87.951 |     3.6%
-no-unexpected-multiline                           |    50.126 |     2.0%
-@typescript-eslint/triple-slash-reference         |    46.928 |     1.9%
-@typescript-eslint/ban-ts-comment                 |    41.120 |     1.7%
-no-misleading-character-class                     |    40.149 |     1.6%
-@typescript-eslint/no-unnecessary-type-constraint |    31.744 |     1.3%
-no-loss-of-precision                              |    31.510 |     1.3%
+Rule                                      | Time (ms) | Relative
+:-----------------------------------------|----------:|--------:
+@typescript-eslint/no-unused-vars         |  1584.824 |    64.0%
+react-hooks/exhaustive-deps               |   101.118 |     4.1%
+no-global-assign                          |    70.605 |     2.8%
+react-hooks/rules-of-hooks                |    63.862 |     2.6%
+no-misleading-character-class             |    49.106 |     2.0%
+@typescript-eslint/ban-ts-comment         |    38.021 |     1.5%
+no-unexpected-multiline                   |    35.859 |     1.4%
+no-loss-of-precision                      |    32.618 |     1.3%
+@typescript-eslint/triple-slash-reference |    29.048 |     1.2%
+no-useless-escape                         |    27.538 |     1.1%

package/CHANGELOG.md

@@ -1,19 +1,65 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.20.0
+
+### Minor Changes
+
+- [#898](https://github.com/utilitywarehouse/hearth/pull/898) [`d32a188`](https://github.com/utilitywarehouse/hearth/commit/d32a18840c04222b7b1348133137dc5e56745fe3) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add validation and helper text props to `Select` component
+
+  The `Select` component now supports built-in validation messages and helper text through new props: `invalidText`, `validText`, `helperText`, and `helperIcon`. This provides a more integrated validation experience without needing to wrap the component in FormField.
+
+  **Components affected**:
+  - `Select`
+
+  **Developer changes**:
+
+  You can now add helper text and validation messages directly to Select:
+
+  ```tsx
+  import { Select } from '@utilitywarehouse/hearth-react-native';
+
+  <Select
+    label="Choose an option"
+    placeholder="Select an option"
+    helperText="This is some helper text for the select component."
+    validationStatus="invalid"
+    invalidText="Please select a valid option"
+    options={[
+      { label: 'Option 1', value: '1' },
+      { label: 'Option 2', value: '2' },
+      { label: 'Option 3', value: '3' },
+    ]}
+    value={value}
+    onValueChange={setValue}
+  />;
+  ```
+
+  The component now also supports a `labelVariant` prop to control label styling:
+
+  ```tsx
+  <Select
+    label="Choose an option"
+    labelVariant="heading"
+    // ... other props
+  />
+  ```
+
+  These new props work seamlessly alongside the existing FormField wrapper if you prefer that approach. No changes are required to existing Select implementations.
+
 ## 0.19.1
 
 ### Patch Changes
 
 - [#886](https://github.com/utilitywarehouse/hearth/pull/886) [`7a948de`](https://github.com/utilitywarehouse/hearth/commit/7a948dea0d15ce7ca34e4d405e86984213c96196) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Add `loadingHeading` prop to `Modal` component
 
-  The `Modal` component now supports a `loadingHeading` prop to customize the heading text displayed during loading states. If not provided, it defaults to 'Loading...'.
+  The `Modal` component now supports a `loadingHeading` prop to customise the heading text displayed during loading states. If not provided, it defaults to 'Loading...'.
 
   **Components affected**:
   - `Modal`
 
   **Developer changes**:
 
-  No changes required. To customize the loading heading text, use the new `loadingHeading` prop:
+  No changes required. To customise the loading heading text, use the new `loadingHeading` prop:
 
   ```tsx
   <Modal
@@ -143,7 +189,7 @@
 
   **Developer changes**:
 
-  You can now customize `IconButton` colors for service-specific branding:
+  You can now customise `IconButton` colors for service-specific branding:
 
   ```tsx
   import { IconButton } from '@utilitywarehouse/hearth-react-native';
@@ -164,7 +210,7 @@
   - `activeBackgroundColor` - Sets the background color when pressed or in an active state
   - `shadowColor` - Sets the shadow/elevation color
 
-  These overrides work alongside the existing `variant` and `colorScheme` props, allowing you to maintain structural styling while customizing colors for specific branding requirements.
+  These overrides work alongside the existing `variant` and `colorScheme` props, allowing you to maintain structural styling while customising colors for specific branding requirements.
 
 ### Patch Changes
 

package/build/components/Select/Select.d.ts

@@ -1,6 +1,6 @@
 import SelectProps from './Select.props';
 declare const Select: {
-    ({ options, value, onValueChange, label, labelVariant, placeholder, disabled, leadingIcon: LeadingIcon, validationStatus, required, children, bottomSheetProps, menuHeading, readonly, emptyText, listProps, searchable, searchPlaceholder, ...rest }: SelectProps): import("react/jsx-runtime").JSX.Element;
+    ({ options, value, onValueChange, label, labelVariant, placeholder, disabled, leadingIcon: LeadingIcon, validationStatus, helperText, helperIcon, invalidText, validText, required, children, bottomSheetProps, menuHeading, readonly, emptyText, listProps, searchable, searchPlaceholder, ...rest }: SelectProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Select;

package/build/components/Select/Select.js

@@ -6,13 +6,12 @@ import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { BottomSheetFlatList, BottomSheetModal, BottomSheetScrollView, BottomSheetView, } from '../BottomSheet';
 import { DetailText } from '../DetailText';
-import { useFormFieldContext } from '../FormField';
+import { FormField, useFormFieldContext } from '../FormField';
 import { Icon } from '../Icon';
 import { Input } from '../Input';
-import { Label } from '../Label';
 import { SelectContext } from './Select.context';
 import SelectOption from './SelectOption';
-const Select = ({ options = [], value, onValueChange, label, labelVariant = 'body', placeholder = 'Select an option', disabled = false, leadingIcon: LeadingIcon, validationStatus = 'initial', required = true, children, bottomSheetProps, menuHeading, readonly = false, emptyText = 'No options available', listProps, searchable = false, searchPlaceholder = 'Search', ...rest }) => {
+const Select = ({ options = [], value, onValueChange, label, labelVariant = 'body', placeholder = 'Select an option', disabled = false, leadingIcon: LeadingIcon, validationStatus = 'initial', helperText, helperIcon, invalidText, validText, required = true, children, bottomSheetProps, menuHeading, readonly = false, emptyText = 'No options available', listProps, searchable = false, searchPlaceholder = 'Search', ...rest }) => {
     const formFieldContext = useFormFieldContext();
     const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
     const isRequired = formFieldContext?.required ?? required;
@@ -67,13 +66,13 @@ const Select = ({ options = [], value, onValueChange, label, labelVariant = 'bod
     }, []);
     const renderSelectOption = useCallback(({ item }) => (_jsx(SelectOption, { label: item.label, value: item.value, disabled: item.disabled, leadingIcon: item.leadingIcon, trailingIcon: item.trailingIcon })), []);
     const renderEmptyComponent = useCallback(() => (_jsx(BottomSheetView, { style: styles.emptyContainer, children: _jsx(DetailText, { children: emptyText }) })), [emptyText]);
-    return (_jsxs(View, { ...rest, style: [styles.container, rest.style], children: [!!label && (_jsx(View, { children: _jsxs(Label, { variant: labelVariant, children: [label, !isRequired && _jsx(Label, { variant: labelVariant, children: " (Optional)" })] }) })), _jsxs(Pressable, { onPress: openBottomSheet, disabled: isDisabled || isReadonly, style: ({ pressed }) => [
-                    styles.selectContainer,
-                    styles.pressedContainer(pressed || isOpen),
-                ], children: [!!LeadingIcon && (_jsx(View, { children: (() => {
-                            const IconAny = Icon;
-                            return _jsx(IconAny, { as: LeadingIcon, style: styles.icon });
-                        })() })), _jsx(View, { style: styles.optionContainer, children: _jsx(BodyText, { numberOfLines: 1, style: styles.placeholderText, children: selectedOption?.label || selectedLabel || placeholder }) }), _jsx(View, { children: _jsx(Icon, { as: ExpandSmallIcon, style: styles.icon }) })] }), _jsx(BottomSheetModal, { ref: bottomSheetModalRef, snapPoints: ['25%', '40%', '80%'], onChange: handleClose, enableDynamicSizing: false, ...bottomSheetProps, children: _jsxs(SelectContext.Provider, { value: {
+    return (_jsxs(View, { ...rest, style: [styles.container, rest.style], children: [_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatusFromContext, required: isRequired, disabled: isDisabled, readonly: isReadonly, invalidText: invalidText, validText: validText, children: _jsxs(Pressable, { onPress: openBottomSheet, disabled: isDisabled || isReadonly, style: ({ pressed }) => [
+                        styles.selectContainer,
+                        styles.pressedContainer(pressed || isOpen),
+                    ], children: [!!LeadingIcon && (_jsx(View, { children: (() => {
+                                const IconAny = Icon;
+                                return _jsx(IconAny, { as: LeadingIcon, style: styles.icon });
+                            })() })), _jsx(View, { style: styles.optionContainer, children: _jsx(BodyText, { numberOfLines: 1, style: styles.placeholderText, children: selectedOption?.label || selectedLabel || placeholder }) }), _jsx(View, { children: _jsx(Icon, { as: ExpandSmallIcon, style: styles.icon }) })] }) }), _jsx(BottomSheetModal, { ref: bottomSheetModalRef, snapPoints: ['25%', '40%', '80%'], onChange: handleClose, enableDynamicSizing: false, ...bottomSheetProps, children: _jsxs(SelectContext.Provider, { value: {
                         selectedValue: value,
                         onValueChange,
                         close: closeBottomSheet,

package/build/components/Select/Select.props.d.ts

@@ -50,6 +50,22 @@ interface SelectProps extends ViewProps {
      * @default 'body'.
      */
     labelVariant?: 'heading' | 'body';
+    /**
+     * Helper text to show below the select
+     */
+    helperText?: string;
+    /**
+     * Optional icon to display alongside the helper text
+     */
+    helperIcon?: React.ComponentType;
+    /**
+     *  Text to display when validationStatus is 'invalid'
+     */
+    invalidText?: string;
+    /**
+     * Text to display when validationStatus is 'valid'
+     */
+    validText?: string;
     /**
      * Placeholder text to show when no value is selected
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.19.1",
+  "version": "0.20.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -56,10 +56,10 @@
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
+    "@utilitywarehouse/hearth-tokens": "^0.2.2",
     "@utilitywarehouse/hearth-react-icons": "^0.8.0",
     "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
-    "@utilitywarehouse/hearth-svg-assets": "^0.3.0",
-    "@utilitywarehouse/hearth-tokens": "^0.2.2"
+    "@utilitywarehouse/hearth-svg-assets": "^0.3.0"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",

package/src/components/Checkbox/CheckboxGroup.figma.tsx

@@ -3,6 +3,10 @@ import { CheckboxGroup } from '../';
 
 const props = {
   label: figma.string('Group label'),
+  labelVariant: figma.enum('Label variant', {
+    Heading: 'heading',
+    Body: 'body',
+  }),
   helperText: figma.boolean('Helper text?', {
     true: figma.string('Helper text'),
     false: undefined,
@@ -13,6 +17,12 @@ const props = {
   }),
   tiles: figma.children('Checkbox Tile'),
   checkboxes: figma.children('Checkbox'),
+  validationStatus: figma.enum('State', {
+    Invalid: 'invalid',
+  }),
+  invalidText: figma.enum('State', {
+    Invalid: figma.string('Validation text'),
+  }),
 };
 
 figma.connect(
@@ -27,8 +37,11 @@ figma.connect(
       <CheckboxGroup
         type="tile"
         label={props.label}
+        labelVariant={props.labelVariant}
         helperText={props.helperText}
         direction={props.direction}
+        validationStatus={props.validationStatus}
+        invalidText={props.invalidText}
       >
         {props.tiles}
       </CheckboxGroup>
@@ -45,7 +58,14 @@ figma.connect(
     },
     props,
     example: props => (
-      <CheckboxGroup label={props.label} helperText={props.helperText} direction={props.direction}>
+      <CheckboxGroup
+        label={props.label}
+        labelVariant={props.labelVariant}
+        helperText={props.helperText}
+        direction={props.direction}
+        validationStatus={props.validationStatus}
+        invalidText={props.invalidText}
+      >
         {props.checkboxes}
       </CheckboxGroup>
     ),

package/src/components/PillGroup/Pill.figma.tsx

@@ -1,25 +1,12 @@
 import figma from '@figma/code-connect';
-import { Pill } from './Pill';
-
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
+import { Pill } from '../';
 
 figma.connect(Pill, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=4348%3A15595', {
   props: {
-    // These props were automatically mapped based on your linked code:
     label: figma.string('Label'),
-    focusable: figma.enum('State', {
-      Focus: true,
+    icon: figma.boolean('Icon?', {
+      true: figma.instance('Icon-20'),
     }),
-    // No matching props could be found for these Figma properties:
-    // "label": figma.string('Label'),
-    // "icon": figma.boolean('Icon?'),
-    // "icon20": figma.instance('Icon-20'),
-    // "selected": figma.boolean('Selected?')
   },
-  example: props => <Pill value={null} label={props.label} focusable={props.focusable} />,
+  example: props => <Pill value={props.label} label={props.label} />,
 });

package/src/components/PillGroup/PillGroup.figma.tsx

@@ -1,21 +1,20 @@
 import figma from '@figma/code-connect';
-import { PillGroup } from './PillGroup';
+import { PillGroup } from '../';
 
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
+const value = '';
 
 figma.connect(
   PillGroup,
   'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=4348%3A15988',
   {
     props: {
-      // These props were automatically mapped based on your linked code:
       wrap: figma.boolean('Wrap?'),
+      pills: figma.children('Pill'),
     },
-    example: props => <PillGroup value={null} wrap={props.wrap} />,
+    example: props => (
+      <PillGroup value={value} wrap={props.wrap}>
+        {props.pills}
+      </PillGroup>
+    ),
   }
 );

package/src/components/ProgressStepper/ProgressStep.figma.tsx

@@ -1,30 +1,19 @@
 import figma from '@figma/code-connect';
-import ProgressStep from './ProgressStep';
-
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
+import { ProgressStep } from '../';
 
 figma.connect(
   ProgressStep,
   'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6056%3A1987',
   {
     props: {
-      // These props were automatically mapped based on your linked code:
       status: figma.enum('State', {
         Complete: 'complete',
         Active: 'active',
         Incomplete: 'incomplete',
       }),
-      // No matching props could be found for these Figma properties:
-      // "label": figma.string('Label'),
-      // "label": figma.boolean('Label?'),
-      // "stepNumber": figma.string('Step number'),
-      // "interactive": figma.boolean('Interactive?')
+      label: figma.string('Label'),
+      id: figma.string('Step number'),
     },
-    example: props => <ProgressStep id={null} status={props.status} />,
+    example: props => <ProgressStep id={props.id} status={props.status} />,
   }
 );

package/src/components/ProgressStepper/ProgressStepper.figma.tsx

@@ -1,20 +1,13 @@
-import React from "react"
-import ProgressStepper from "./ProgressStepper"
-import figma from "@figma/code-connect"
-
-/**
- * -- This file was auto-generated by Code Connect --
- * None of your props could be automatically mapped to Figma properties.
- * You should update the `props` object to include a mapping from your
- * code props to Figma properties, and update the `example` function to
- * return the code example you'd like to see in Figma
- */
+import figma from '@figma/code-connect';
+import { ProgressStepper } from '../';
 
 figma.connect(
   ProgressStepper,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6056%3A2000",
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6056%3A2000',
   {
-    props: {},
-    example: (props) => <ProgressStepper />,
-  },
-)
+    props: {
+      steps: figma.children('Step'),
+    },
+    example: props => <ProgressStepper>{props.steps}</ProgressStepper>,
+  }
+);

package/src/components/Radio/Radio.figma.tsx

@@ -1,25 +1,38 @@
 import figma from '@figma/code-connect';
 import Radio from './Radio';
 
-/**
- * -- This file was auto-generated by Code Connect --
- * None of your props could be automatically mapped to Figma properties.
- * You should update the `props` object to include a mapping from your
- * code props to Figma properties, and update the `example` function to
- * return the code example you'd like to see in Figma
- */
-
-figma.connect(Radio, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7428%3A12685', {
-  props: {
-    // No matching props could be found for these Figma properties:
-    // "helperText": figma.boolean('Helper text?'),
-    // "helperText": figma.string('Helper text'),
-    // "label": figma.string('Label'),
-    // "image": figma.boolean('Image?'),
-    // "state": figma.enum('State', {
-    //   "Default": "default"
-    // }),
-    // "checked": figma.boolean('Checked?')
-  },
-  example: props => <Radio value={null} />,
-});
+figma.connect(
+  Radio,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=7428-12685&m=dev',
+  {
+    props: {
+      helperText: figma.boolean('Helper text?', {
+        true: figma.string('Helper text'),
+      }),
+      label: figma.string('Label'),
+      image: figma.boolean('Image?', {
+        true: figma.instance('Radio Image'),
+      }),
+      state: figma.enum('State', {
+        Default: 'default',
+      }),
+      checked: figma.boolean('Checked?'),
+      indicator: figma.nestedProps('Radio Item', {
+        disabled: figma.enum('State', {
+          Disabled: true,
+        }),
+      }),
+    },
+    example: props => (
+      <Radio
+        label={props.label}
+        helperText={props.helperText}
+        image={props.image}
+        state={props.state}
+        checked={props.checked}
+        disabled={props.indicator.disabled}
+        value="someValue"
+      />
+    ),
+  }
+);

package/src/components/Radio/RadioGroup.figma.tsx

@@ -1,54 +1,82 @@
-import React from "react"
-import RadioGroup from "./RadioGroup"
-import figma from "@figma/code-connect"
+import figma from '@figma/code-connect';
+import { RadioGroup } from '../';
 
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
+const props = {
+  validationStatus: figma.enum('State', {
+    Invalid: 'invalid',
+  }),
+  labelVariant: figma.enum('Label variant', {
+    Body: 'body',
+    Heading: 'heading',
+  }),
+  direction: figma.enum('Direction', {
+    Row: 'row',
+  }),
+  label: figma.string('Group label'),
+  helperText: figma.boolean('Helper text?', {
+    true: figma.string('Helper text'),
+  }),
+  invalidText: figma.enum('State', {
+    Invalid: figma.string('Validation text'),
+  }),
+};
+
+const value = '';
+const setValue = (value: string) => {};
 
 figma.connect(
   RadioGroup,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3138%3A13254",
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3138-13254&t=Uq6QfQcygdNGv5lM-4',
   {
+    variant: {
+      Content: 'Radio',
+    },
     props: {
-      // These props were automatically mapped based on your linked code:
-      label: figma.string("Group label"),
-      helperText: figma.string("Helper text"),
-      invalidText: figma.string("Helper text"),
-      validText: figma.string("Validation text"),
-      direction: figma.enum("Direction", {
-        Row: "row",
-        Column: "column",
-      }),
-      // No matching props could be found for these Figma properties:
-      // "groupLabel": figma.string('Group label'),
-      // "helperText": figma.boolean('Helper text?'),
-      // "helperText": figma.string('Helper text'),
-      // "validationText": figma.string('Validation text'),
-      // "state": figma.enum('State', {
-      //   "Default": "default",
-      //   "Invalid": "invalid"
-      // }),
-      // "labelVariant": figma.enum('Label variant', {
-      //   "Body": "body",
-      //   "Heading": "heading"
-      // }),
-      // "content": figma.enum('Content', {
-      //   "Radio": "radio",
-      //   "Radio Tile": "radio-tile"
-      // })
+      ...props,
+      items: figma.children('Radio'),
     },
-    example: (props) => (
+    example: props => (
       <RadioGroup
         label={props.label}
         helperText={props.helperText}
+        validationStatus={props.validationStatus}
+        labelVariant={props.labelVariant}
+        direction={props.direction}
         invalidText={props.invalidText}
-        validText={props.validText}
+        value={value}
+        onChange={value => setValue(value)}
+      >
+        {props.items}
+      </RadioGroup>
+    ),
+  }
+);
+
+figma.connect(
+  RadioGroup,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3138-13254&t=Uq6QfQcygdNGv5lM-4',
+  {
+    variant: {
+      Content: 'Radio Tile',
+    },
+    props: {
+      ...props,
+      items: figma.children('Radio Tile'),
+    },
+    example: props => (
+      <RadioGroup
+        label={props.label}
+        helperText={props.helperText}
+        validationStatus={props.validationStatus}
+        labelVariant={props.labelVariant}
         direction={props.direction}
-      />
+        invalidText={props.invalidText}
+        type="tile"
+        value={value}
+        onChange={value => setValue(value)}
+      >
+        {props.items}
+      </RadioGroup>
     ),
-  },
-)
+  }
+);

package/src/components/Radio/RadioTile.figma.tsx

@@ -0,0 +1,34 @@
+import figma from '@figma/code-connect';
+import { RadioTile } from '../';
+
+figma.connect(
+  RadioTile,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3138-13222&t=Uq6QfQcygdNGv5lM-4',
+  {
+    props: {
+      helperText: figma.boolean('Helper text?', {
+        true: figma.string('Helper text'),
+      }),
+      label: figma.string('Label'),
+      image: figma.boolean('Image?', {
+        true: figma.instance('Radio Image'),
+      }),
+      checked: figma.boolean('Checked?'),
+      indicator: figma.nestedProps('Radio Item', {
+        disabled: figma.enum('State', {
+          Disabled: true,
+        }),
+      }),
+    },
+    example: props => (
+      <RadioTile
+        label={props.label}
+        helperText={props.helperText}
+        image={props.image}
+        checked={props.checked}
+        disabled={props.indicator.disabled}
+        value="someValue"
+      />
+    ),
+  }
+);

package/src/components/RadioCard/RadioCard.figma.tsx

@@ -0,0 +1,24 @@
+import figma from '@figma/code-connect';
+import { RadioCard } from '../';
+
+figma.connect(
+  RadioCard,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=2164-727&t=Uq6QfQcygdNGv5lM-4',
+  {
+    variant: {
+      Variant: 'Radio',
+    },
+    props: {
+      radio: figma.nestedProps('Radio', {
+        label: figma.string('Label'),
+      }),
+      content: figma.instance('Content'),
+    },
+    example: props => (
+      // This should be wrapped in a RadioCardGroup, see docs
+      <RadioCard label={props.radio.label} value="someValue">
+        {props.content}
+      </RadioCard>
+    ),
+  }
+);