@utilitywarehouse/hearth-react-native 0.35.7 → 0.35.9

package/build/components/Menu/MenuItem.figma.js

@@ -0,0 +1,45 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3253-8193
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Menu/MenuItem.tsx
+// component=MenuItem
+import figma from 'figma';
+const text = figma.selectedInstance.getString('Text');
+const iconName = figma.selectedInstance.getBoolean('Icon left?', {
+    true: figma.selectedInstance.getInstanceSwap('Icon left-20')?.executeTemplate().metadata?.props
+        ?.componentName,
+    false: figma.selectedInstance.getBoolean('Icon right?', {
+        true: figma.selectedInstance.getInstanceSwap('Icon right-20')?.executeTemplate().metadata?.props
+            ?.componentName,
+    }),
+});
+const icon = iconName ? figma.helpers.react.reactComponent(iconName) : undefined;
+const iconPosition = figma.selectedInstance.getBoolean('Icon left?', {
+    true: 'left',
+    false: figma.selectedInstance.getBoolean('Icon right?', {
+        true: 'right',
+    }),
+});
+const colorScheme = figma.selectedInstance.getEnum('Color Scheme', {
+    Destructive: 'destructive',
+    Functional: undefined,
+});
+const disabled = figma.selectedInstance.getEnum('State', {
+    Disabled: true,
+    Default: undefined,
+    Hover: undefined,
+    Active: undefined,
+    Focus: undefined,
+});
+export default {
+    id: 'MenuItem',
+    imports: [
+        "import { MenuItem } from '@utilitywarehouse/hearth-react-native';",
+        ...(iconName
+            ? [`import { ${iconName} } from '@utilitywarehouse/hearth-react-native-icons';`]
+            : []),
+    ],
+    example: figma.code `<MenuItem${figma.helpers.react.renderProp('text', text)}${figma.helpers.react.renderProp('disabled', disabled)}${figma.helpers.react.renderProp('colorScheme', colorScheme)}${figma.helpers.react.renderProp('icon', icon)}${figma.helpers.react.renderProp('iconPosition', iconPosition)}/>`,
+    metadata: {
+        props: { text, icon, iconPosition, colorScheme, disabled },
+        nestable: true,
+    },
+};

package/build/components/Modal/Modal.figma.d.ts

@@ -0,0 +1,24 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            loading: boolean | undefined;
+            heading: string;
+            description: string;
+            fullscreen: boolean;
+            showHandle: boolean;
+            close: boolean;
+            image: figma.ResultSection[] | undefined;
+            loadingHeading: string;
+            slotContent: figma.ResultSection[][];
+            buttons: {
+                primaryButtonText: string | undefined;
+            };
+        };
+    };
+};
+export default _default;

package/build/components/Modal/Modal.figma.js

@@ -0,0 +1,64 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6300-2825
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Modal/Modal.tsx
+// component=Modal
+import figma from 'figma';
+const loading = figma.selectedInstance.getEnum('State', {
+    Loading: true,
+});
+const heading = figma.selectedInstance.getString('Heading');
+const description = figma.selectedInstance.getString('Description');
+const fullscreen = figma.selectedInstance.getBoolean('Full screen?');
+const showHandle = figma.selectedInstance.getBoolean('Handle?');
+const close = figma.selectedInstance.getBoolean('Close?');
+const image = figma.selectedInstance.getBoolean('Image?', {
+    true: figma.selectedInstance.getInstanceSwap('Modal illustration')?.executeTemplate().example,
+});
+const loadingHeading = figma.selectedInstance.getString('Loading heading');
+const slot = figma.selectedInstance.getSlot('Slot');
+const slotContent = slot?.connectedInstances.map(i => i.executeTemplate().example) ?? [];
+const buttons = figma.selectedInstance.getBoolean('Buttons?', {
+    true: (function () {
+        const nestedLayer0 = figma.selectedInstance.findInstance('Button');
+        return {
+            primaryButtonText: nestedLayer0.type !== 'ERROR' ? nestedLayer0.getString('Text') : undefined,
+        };
+    })(),
+});
+export default {
+    id: 'modal',
+    imports: [
+        "import { useRef, useCallback } from 'react';",
+        "import { Button, Modal, BottomSheetModal } from '@utilitywarehouse/hearth-react-native';",
+    ],
+    example: figma.code `function Example() {
+    const modalRef = useRef<BottomSheetModal>(null);
+    const handleOpenModal = useCallback(() => {
+        modalRef.current?.present();
+    }, []);
+    const handleCloseModal = useCallback(() => {
+        modalRef.current?.dismiss();
+    }, []);
+    return (<>
+          <Button onPress={handleOpenModal}>Open Modal</Button>
+
+          <Modal ref={modalRef}${figma.helpers.react.renderProp('heading', heading)}${figma.helpers.react.renderProp('description', description)}${figma.helpers.react.renderProp('loading', loading)}${figma.helpers.react.renderProp('loadingHeading', loadingHeading)}${figma.helpers.react.renderProp('showCloseButton', close)}${figma.helpers.react.renderProp('fullscreen', fullscreen)}${figma.helpers.react.renderProp('image', image)}${figma.helpers.react.renderProp('showHandle', showHandle)}${figma.helpers.react.renderProp('primaryButtonText', buttons.primaryButtonText)}${figma.helpers.react.renderProp('secondaryButtonText', buttons.primaryButtonText)} onPressPrimaryButton={handleCloseModal} onPressSecondaryButton={handleCloseModal}>
+            ${slotContent.flat()}
+          </Modal>
+        </>);
+}`,
+    metadata: {
+        nestable: true,
+        props: {
+            loading,
+            heading,
+            description,
+            fullscreen,
+            showHandle,
+            close,
+            image,
+            loadingHeading,
+            slotContent,
+            buttons,
+        },
+    },
+};

package/build/components/NavModal/NavModal.figma.d.ts

@@ -0,0 +1,19 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        props: {
+            showClose: boolean;
+            image: figma.ResultSection[][];
+            button: {
+                primaryButtonText: string | undefined;
+            };
+            showCarousel: boolean;
+            customContent: figma.ResultSection[][];
+            colorScheme: string | undefined;
+        };
+    };
+};
+export default _default;

package/build/components/NavModal/NavModal.figma.js

@@ -0,0 +1,42 @@
+// url=https://www.figma.com/design/dLI9bmyMr42LV7dtFeW27J/Hearth-Patterns---Guides?node-id=6314-9103&t=oq3NaPLaAu3di6Db-4
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/NavModal/NavModal.tsx
+// component=NavModal
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const showClose = instance.getBoolean('Close?');
+const image = instance.getSlot('Image');
+const button = instance.getBoolean('Button?', {
+    true: (function () {
+        const nestedLayer0 = instance.findInstance('Button');
+        return {
+            primaryButtonText: nestedLayer0.type !== 'ERROR' ? nestedLayer0.getString('Text') : undefined,
+        };
+    })(),
+});
+const showCarousel = instance.getBoolean('Carousel?');
+const customContent = instance.getSlot('Custom content');
+const colorScheme = instance.getEnum('Color Scheme', {
+    Brand: 'brand',
+    'Neutral Subtle': 'primary',
+    'Neutral Strong': 'default',
+});
+const imageItems = image?.connectedInstances.map(i => i.executeTemplate().example) ?? [];
+const contentItems = customContent?.connectedInstances.map(i => i.executeTemplate().example) ?? [];
+// An empty array passed to renderProp() renders as broken, unparseable `prop={}` syntax
+// instead of being omitted — only pass it through when there's actually something to render.
+const imageProp = imageItems.length > 0 ? imageItems.flat() : undefined;
+export default {
+    id: 'nav-modal',
+    imports: ["import { NavModal } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<NavModal${figma.helpers.react.renderProp('background', colorScheme)}${figma.helpers.react.renderProp('image', imageProp)}${figma.helpers.react.renderProp('showCloseButton', showClose)}${figma.helpers.react.renderProp('primaryButtonText', button.primaryButtonText)}>${contentItems.flat()}</NavModal>`,
+    metadata: {
+        props: {
+            showClose,
+            image: imageItems,
+            button,
+            showCarousel,
+            customContent: contentItems,
+            colorScheme,
+        },
+    },
+};

package/build/components/Pagination/Pagination.figma.d.ts

@@ -0,0 +1,16 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        props: {
+            condensed: figma.EnumOptionsValues<{
+                False: boolean;
+                True: boolean;
+            }> | undefined;
+            hideSkipButtons: boolean;
+        };
+    };
+};
+export default _default;

package/build/components/Pagination/Pagination.figma.js

@@ -0,0 +1,20 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6416-5836&t=pZwKJYFo1y1QRQD1-4
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Pagination/Pagination.tsx
+// component=Pagination
+import figma from 'figma';
+const condensed = figma.selectedInstance.getEnum('Condensed?', {
+    False: false,
+    True: true,
+});
+const hideSkipButtons = !figma.selectedInstance.getBoolean('Skip?');
+export default {
+    id: 'pagination',
+    imports: ["import { Pagination } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<Pagination currentPage={1} totalPages={10} onPageChange={() => {}}${figma.helpers.react.renderProp('condensed', condensed)}${figma.helpers.react.renderProp('hideSkipButtons', hideSkipButtons)}/>`,
+    metadata: {
+        props: {
+            condensed,
+            hideSkipButtons,
+        },
+    },
+};

package/build/components/PillGroup/Pill.figma.d.ts

@@ -0,0 +1,17 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            label: string;
+            icon: {
+                $value: string;
+                $type: "react-component";
+            } | undefined;
+        };
+    };
+};
+export default _default;

package/build/components/PillGroup/Pill.figma.js

@@ -0,0 +1,21 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=4348%3A15595
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/PillGroup/Pill.tsx
+// component=Pill
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const label = instance.getString('Label');
+const iconName = instance.getBoolean('Icon?', {
+    true: instance.getInstanceSwap('Icon-20')?.executeTemplate().metadata?.props?.componentName,
+});
+const icon = iconName ? figma.helpers.react.reactComponent(iconName) : undefined;
+export default {
+    id: 'Pill',
+    imports: [
+        "import { Pill } from '@utilitywarehouse/hearth-react-native';",
+        ...(iconName
+            ? [`import { ${iconName} } from '@utilitywarehouse/hearth-react-native-icons';`]
+            : []),
+    ],
+    example: figma.code `<Pill${figma.helpers.react.renderProp('value', label)}${figma.helpers.react.renderProp('label', label)}${figma.helpers.react.renderProp('icon', icon)}/>`,
+    metadata: { nestable: true, props: { label, icon } },
+};

package/build/components/PillGroup/PillGroup.figma.d.ts

@@ -0,0 +1,13 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            wrap: boolean;
+        };
+    };
+};
+export default _default;

package/build/components/PillGroup/PillGroup.figma.js

@@ -0,0 +1,18 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=4348%3A15988
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/PillGroup/PillGroup.tsx
+// component=PillGroup
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const wrap = instance.getBoolean('Wrap?');
+const pillLayers = instance.findLayers(n => n.type === 'INSTANCE');
+const pills = pillLayers
+    .map(layer => (layer.type === 'INSTANCE' ? layer.executeTemplate().example : ''))
+    .flat();
+export default {
+    id: 'PillGroup',
+    imports: ["import { PillGroup } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<PillGroup value=""${figma.helpers.react.renderProp('wrap', wrap)}>
+  ${pills}
+</PillGroup>`,
+    metadata: { nestable: true, props: { wrap } },
+};

package/build/components/ProgressBar/ProgressBar.circular.figma.d.ts

@@ -0,0 +1,16 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            value: number | undefined;
+            colorScheme: string | undefined;
+            size: string | undefined;
+            label: string;
+        };
+    };
+};
+export default _default;

package/build/components/ProgressBar/ProgressBar.circular.figma.js

@@ -0,0 +1,35 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=7863-3977
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/ProgressBar/ProgressBar.tsx
+// component=ProgressBar
+import figma from 'figma';
+const value = figma.selectedInstance.getEnum('Progress', {
+    '0%': 0,
+    '10%': 10,
+    '20%': 20,
+    '30%': 30,
+    '40%': 40,
+    '50%': 50,
+    '60%': 60,
+    '70%': 70,
+    '80%': 80,
+    '90%': 90,
+    '100%': 100,
+});
+const colorScheme = figma.selectedInstance.getEnum('Color Scheme', {
+    Default: 'default',
+    Success: 'success',
+    Danger: 'danger',
+});
+const size = figma.selectedInstance.getEnum('Size', {
+    'SM-80': 'sm',
+    'MD-140': 'md',
+});
+const label = figma.selectedInstance.getBoolean('Label?', {
+    true: figma.selectedInstance.getString('Label'),
+});
+export default {
+    id: 'progress-bar-circular',
+    imports: ["import { ProgressBar } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<ProgressBar variant="circular"${figma.helpers.react.renderProp('value', value)}${figma.helpers.react.renderProp('colorScheme', colorScheme)}${figma.helpers.react.renderProp('size', size)}${figma.helpers.react.renderProp('label', label)}/>`,
+    metadata: { nestable: true, props: { value, colorScheme, size, label } },
+};

package/build/components/ProgressBar/ProgressBar.figma.d.ts

@@ -0,0 +1,15 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            value: number | undefined;
+            colorScheme: string | undefined;
+            label: string;
+        };
+    };
+};
+export default _default;

package/build/components/ProgressBar/ProgressBar.figma.js

@@ -0,0 +1,31 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=7849-5704
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/ProgressBar/ProgressBar.tsx
+// component=ProgressBar
+import figma from 'figma';
+const value = figma.selectedInstance.getEnum('Progress', {
+    '0%': 0,
+    '10%': 10,
+    '20%': 20,
+    '30%': 30,
+    '40%': 40,
+    '50%': 50,
+    '60%': 60,
+    '70%': 70,
+    '80%': 80,
+    '90%': 90,
+    '100%': 100,
+});
+const colorScheme = figma.selectedInstance.getEnum('Color Scheme', {
+    Default: 'default',
+    Success: 'success',
+    Danger: 'danger',
+});
+const label = figma.selectedInstance.getBoolean('Label?', {
+    true: figma.selectedInstance.getString('Label'),
+});
+export default {
+    id: 'progress-bar-linear',
+    imports: ["import { ProgressBar } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<ProgressBar variant="linear"${figma.helpers.react.renderProp('value', value)}${figma.helpers.react.renderProp('colorScheme', colorScheme)}${figma.helpers.react.renderProp('label', label)}/>`,
+    metadata: { nestable: true, props: { value, colorScheme, label } },
+};

package/build/components/ProgressStepper/ProgressStep.figma.d.ts

@@ -0,0 +1,15 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            status: string | undefined;
+            label: string;
+            id: string;
+        };
+    };
+};
+export default _default;

package/build/components/ProgressStepper/ProgressStep.figma.js

@@ -0,0 +1,17 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6056%3A1987
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/ProgressStepper/ProgressStep.tsx
+// component=ProgressStep
+import figma from 'figma';
+const status = figma.selectedInstance.getEnum('State', {
+    Complete: 'complete',
+    Active: 'active',
+    Incomplete: 'incomplete',
+});
+const label = figma.selectedInstance.getString('Label');
+const id = figma.selectedInstance.getString('Step number');
+export default {
+    id: 'ProgressStep',
+    imports: ["import { ProgressStep } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<ProgressStep${figma.helpers.react.renderProp('id', id)}${figma.helpers.react.renderProp('status', status)}/>`,
+    metadata: { nestable: true, props: { status, label, id } },
+};

package/build/components/ProgressStepper/ProgressStepper.figma.d.ts

@@ -0,0 +1,13 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            steps: figma.ResultSection[][];
+        };
+    };
+};
+export default _default;

package/build/components/ProgressStepper/ProgressStepper.figma.js

@@ -0,0 +1,14 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6056%3A2000
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/ProgressStepper/ProgressStepper.tsx
+// component=ProgressStepper
+import figma from 'figma';
+const childLayers = figma.selectedInstance.findLayers(n => n.type === 'INSTANCE');
+const steps = childLayers
+    .filter(layer => layer.type === 'INSTANCE')
+    .map(layer => layer.executeTemplate().example);
+export default {
+    id: 'ProgressStepper',
+    imports: ["import { ProgressStepper } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<ProgressStepper>${steps.flat()}</ProgressStepper>`,
+    metadata: { nestable: true, props: { steps } },
+};

package/build/components/Radio/Radio.figma.d.ts

@@ -0,0 +1,15 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            label: string;
+            helperText: string;
+            image: figma.ResultSection[];
+        };
+    };
+};
+export default _default;

package/build/components/Radio/Radio.figma.js

@@ -0,0 +1,17 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=7428-12685&m=dev
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Radio/Radio.tsx
+// component=Radio
+import figma from 'figma';
+const label = figma.selectedInstance.getString('Label');
+const helperText = figma.selectedInstance.getBoolean('Helper text?', {
+    true: figma.selectedInstance.getString('Helper text'),
+});
+const image = figma.selectedInstance.getBoolean('Image?', {
+    true: figma.selectedInstance.findInstance('Radio Image')?.executeTemplate().example,
+});
+export default {
+    id: 'Radio',
+    imports: ["import { Radio } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<Radio${figma.helpers.react.renderProp('label', label)}${figma.helpers.react.renderProp('helperText', helperText)}${figma.helpers.react.renderProp('image', image)} value="someValue"/>`,
+    metadata: { nestable: true, props: { label, helperText, image } },
+};

package/build/components/Radio/RadioGroup.figma.d.ts

@@ -0,0 +1,19 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            label: string;
+            helperText: string;
+            validationStatus: string | undefined;
+            labelVariant: string | undefined;
+            direction: string | undefined;
+            invalidText: string | undefined;
+            type: string;
+        };
+    };
+};
+export default _default;

package/build/components/Radio/RadioGroup.figma.js

@@ -0,0 +1,45 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3138-13254&t=Uq6QfQcygdNGv5lM-4
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Radio/RadioGroup.tsx
+// component=RadioGroup
+import figma from 'figma';
+const label = figma.selectedInstance.getString('Group label');
+const helperText = figma.selectedInstance.getBoolean('Helper text?', {
+    true: figma.selectedInstance.getString('Helper text'),
+});
+const validationStatus = figma.selectedInstance.getEnum('State', {
+    Invalid: 'invalid',
+});
+const labelVariant = figma.selectedInstance.getEnum('Label variant', {
+    Body: 'body',
+    Heading: 'heading',
+});
+const direction = figma.selectedInstance.getEnum('Direction', {
+    Row: 'row',
+    Column: 'column',
+});
+const invalidText = figma.selectedInstance.getEnum('State', {
+    Invalid: figma.selectedInstance.getString('Validation text'),
+});
+const content = figma.selectedInstance.getPropertyValue('Content');
+const type = content === 'Radio Tile' ? 'tile' : 'default';
+const childLayers = figma.selectedInstance.findLayers(i => i.type === 'INSTANCE');
+const items = childLayers
+    .filter(i => {
+    if (i.type !== 'INSTANCE')
+        return false;
+    const name = i.name || '';
+    return ((content === 'Radio Tile' && name.includes('Radio Tile')) ||
+        (content === 'Radio' && name.includes('Radio') && !name.includes('Radio Tile')));
+})
+    .map(i => (i.type === 'INSTANCE' ? i.executeTemplate().example : ''));
+export default {
+    id: 'RadioGroup',
+    imports: ["import { RadioGroup } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<RadioGroup${figma.helpers.react.renderProp('label', label)}${figma.helpers.react.renderProp('helperText', helperText)}${figma.helpers.react.renderProp('validationStatus', validationStatus)}${figma.helpers.react.renderProp('labelVariant', labelVariant)}${figma.helpers.react.renderProp('direction', direction)}${figma.helpers.react.renderProp('invalidText', invalidText)}${type === 'tile' ? ' type="tile"' : ''} value="" onValueChange={() => {}}>
+    ${items.flat()}
+  </RadioGroup>`,
+    metadata: {
+        nestable: true,
+        props: { label, helperText, validationStatus, labelVariant, direction, invalidText, type },
+    },
+};

package/build/components/Radio/RadioImage.figma.d.ts

@@ -0,0 +1,11 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {};
+    };
+};
+export default _default;

package/build/components/Radio/RadioImage.figma.js

@@ -0,0 +1,10 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7428:8535
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Radio/RadioImage.tsx
+// component=RadioImage
+import figma from 'figma';
+export default {
+    id: 'RadioImage',
+    imports: ["import { RadioImage } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<RadioImage source={require('./image.png')} style={{ width: 40, height: 24, resizeMode: 'contain' }} />`,
+    metadata: { nestable: true, props: {} },
+};

package/build/components/Radio/RadioTile.figma.d.ts

@@ -0,0 +1,16 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            label: string;
+            helperText: string;
+            badge: figma.ResultSection[] | undefined;
+            image: figma.ResultSection[];
+        };
+    };
+};
+export default _default;

package/build/components/Radio/RadioTile.figma.js

@@ -0,0 +1,23 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3138-13222&t=Uq6QfQcygdNGv5lM-4
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Radio/Radio.tsx
+// component=RadioTile
+import figma from 'figma';
+const label = figma.selectedInstance.getString('Label');
+const helperText = figma.selectedInstance.getBoolean('Helper text?', {
+    true: figma.selectedInstance.getString('Helper text'),
+});
+const badgeLayers = figma.selectedInstance.findLayers(i => i.type === 'INSTANCE' && (i.name || '').includes('Badge'));
+const badge = figma.selectedInstance.getBoolean('Badge?', {
+    true: badgeLayers.length > 0 && badgeLayers[0].type === 'INSTANCE'
+        ? badgeLayers[0].executeTemplate().example
+        : undefined,
+});
+const image = figma.selectedInstance.getBoolean('Image?', {
+    true: figma.selectedInstance.findInstance('Radio Image')?.executeTemplate().example,
+});
+export default {
+    id: 'RadioTile',
+    imports: ["import { RadioTile } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<RadioTile${figma.helpers.react.renderProp('label', label)}${figma.helpers.react.renderProp('helperText', helperText)}${figma.helpers.react.renderProp('badge', badge)}${figma.helpers.react.renderProp('image', image)} value="someValue"/>`,
+    metadata: { nestable: true, props: { label, helperText, badge, image } },
+};