@utilitywarehouse/hearth-react-native 0.8.1 → 0.9.0

package/src/components/Menu/MenuTrigger.props.ts

@@ -0,0 +1,14 @@
+import type { ReactElement } from 'react';
+
+export interface MenuTriggerProps {
+  /**
+   * The child element that triggers the menu (should be a single pressable element like Button)
+   */
+  children: ReactElement;
+  /**
+   * Called when the trigger is pressed.
+   */
+  onPress?: () => void;
+}
+
+export default MenuTriggerProps;

package/src/components/Menu/MenuTrigger.tsx

@@ -0,0 +1,20 @@
+import { cloneElement, isValidElement } from 'react';
+import type MenuTriggerProps from './MenuTrigger.props';
+
+interface MenuTriggerInternalProps extends MenuTriggerProps {
+  onPress: () => void;
+}
+
+const MenuTrigger = ({ children, onPress }: MenuTriggerInternalProps) => {
+  if (!isValidElement(children)) {
+    throw new Error('MenuTrigger: children must be a valid React element');
+  }
+
+  return cloneElement(children, {
+    onPress,
+  } as { onPress?: () => void });
+};
+
+MenuTrigger.displayName = 'MenuTrigger';
+
+export default MenuTrigger;

package/src/components/Menu/index.ts

@@ -0,0 +1,7 @@
+export { default as Menu } from './Menu';
+export { useMenuContext } from './Menu.context';
+export type { MenuMethods, default as MenuProps } from './Menu.props';
+export { default as MenuItem } from './MenuItem';
+export type { default as MenuItemProps } from './MenuItem.props';
+export { default as MenuTrigger } from './MenuTrigger';
+export type { default as MenuTriggerProps } from './MenuTrigger.props';

package/src/components/Modal/Modal.docs.mdx

@@ -25,11 +25,12 @@ The Modal component is ideal for displaying important information, collecting us
 - [Examples](#examples)
   - [Basic Modal](#basic-modal)
   - [Modal with Image](#modal-with-image)
+  - [Fullscreen Modal](#fullscreen-modal)
   - [Modal with Custom Content](#modal-with-custom-content)
   - [Loading State](#loading-state)
   - [Without Close Button](#without-close-button)
   - [Single Action Modal](#single-action-modal)
-  - [Fullscreen Modal (Usage with navigation modal)](#fullscreen-modal-usage-with-navigation-modal)
+  - [Modal in Navigation Modal](#modal-in-navigation-modal)
 - [Integration Notes](#integration-notes)
 - [External Resources](#external-resources)
 
@@ -104,7 +105,8 @@ The Modal component extends the `BottomSheetModal` component and accepts all of
 | `primaryButtonProps`          | `Omit<ButtonWithoutChildrenProps, 'children'>` | Additional props to pass to the primary button (colorScheme defaults to 'highlight', variant to 'solid')      | -       |
 | `secondaryButtonProps`        | `Omit<ButtonWithoutChildrenProps, 'children'>` | Additional props to pass to the secondary button (colorScheme defaults to 'functional', variant to 'outline') | -       |
 | `closeButtonProps`            | `Omit<UnstyledIconButtonProps, 'children'>`    | Additional props to pass to the close button                                                                  | -       |
-| `fullscreen`                  | `boolean`                                      | Whether the modal should take up the full screen height (useful for navigation modals)                        | `false` |
+| `fullscreen`                  | `boolean`                                      | Whether the modal should take up the full screen height                                                       | `false` |
+| `inNavModal`                  | `boolean`                                      | Renders the modal correctly when used inside a navigation modal                                               | `false` |
 
 ## Features
 
@@ -292,6 +294,33 @@ const ImageModal = () => {
 };
 ```
 
+### Fullscreen Modal
+
+Create a modal that takes up the full screen height:
+
+<Canvas of={Stories.FullscreenModal} />
+
+```tsx
+const FullscreenModal = () => {
+  const modalRef = useRef<BottomSheetModal>(null);
+
+  return (
+    <>
+      <Button onPress={() => modalRef.current?.present()}>Show Fullscreen Modal</Button>
+
+      <Modal
+        ref={modalRef}
+        heading="Fullscreen Modal"
+        description="This modal takes up the full screen height"
+        primaryButtonText="Close"
+        onPressPrimaryButton={() => modalRef.current?.dismiss()}
+        fullscreen
+      />
+    </>
+  );
+};
+```
+
 ### Modal with Custom Content
 
 Add custom content between the header and footer sections:
@@ -414,9 +443,9 @@ const AlertModal = () => {
 };
 ```
 
-### Fullscreen Modal (Usage with navigation modal)
+### Modal In Navigation Modal
 
-When using the Modal component in a navigation context, you can set it to fullscreen mode, this will make it behave like a standard modal screen.
+When using the Modal component in a navigation context, you can set it to `inNavModal` mode, this will make it behave like a standard modal screen.
 Here's an example of how to implement this with custom close animations for Android:
 
 ```tsx
@@ -465,7 +494,7 @@ export default function ModalScreen() {
   return (
     <Modal
       ref={modalRef}
-      fullscreen
+      inNavModal
       onPressCloseButton={handleClose}
       primaryButtonText="Action"
       onPressPrimaryButton={handleClose}

package/src/components/Modal/Modal.props.ts

@@ -9,6 +9,7 @@ interface ModalProps extends Omit<BottomSheetProps, 'children'> {
   showCloseButton?: boolean;
   heading?: string;
   description?: string;
+  inNavModal?: boolean;
   fullscreen?: boolean;
   children?: ViewProps['children'];
   onPressPrimaryButton?: () => void;

package/src/components/Modal/Modal.stories.tsx

@@ -41,6 +41,12 @@ const meta = {
       control: 'boolean',
       description: 'Whether the modal is in a loading state.',
     },
+    fullscreen: {
+      control: 'boolean',
+      description: 'Whether the modal should take up the full screen height.',
+    },
+  },
+  actions: {
     onPressPrimaryButton: { action: () => null },
     onPressSecondaryButton: { action: () => null },
     onPressCloseButton: { action: () => null },
@@ -52,6 +58,7 @@ const meta = {
     primaryButtonText: 'Primary',
     secondaryButtonText: 'Cancel',
     loading: false,
+    fullscreen: false,
     onPressCloseButton: () => null,
     onPressPrimaryButton: () => null,
     onPressSecondaryButton: () => null,
@@ -192,3 +199,42 @@ export const Loading = () => {
     </View>
   );
 };
+
+export const FullscreenModal: Story = {
+  render: () => {
+    const modalRef = useRef<BottomSheetModal>(null);
+
+    const openModal = () => {
+      modalRef.current?.present();
+    };
+
+    const closeModal = () => {
+      modalRef.current?.dismiss();
+    };
+
+    return (
+      <View style={Platform.OS === 'web' ? { width: 400, height: 800 } : { flex: 1 }}>
+        <ViewWrap>
+          <Button onPress={openModal}>Open Fullscreen Modal</Button>
+
+          <Modal
+            ref={modalRef}
+            heading="Fullscreen Modal Heading"
+            description="This is a fullscreen modal description"
+            onPressCloseButton={closeModal}
+            primaryButtonText="Primary"
+            onPressPrimaryButton={closeModal}
+            secondaryButtonText="Cancel"
+            onPressSecondaryButton={closeModal}
+            fullscreen
+          >
+            <Box gap="200">
+              <BodyText>This is a fullscreen modal with content.</BodyText>
+              <BodyText>You can swipe it up and down to close.</BodyText>
+            </Box>
+          </Modal>
+        </ViewWrap>
+      </View>
+    );
+  },
+};

package/src/components/Modal/Modal.tsx

@@ -37,11 +37,12 @@ const Modal = ({
   closeOnPrimaryButtonPress = true,
   closeOnSecondaryButtonPress = true,
   loading,
+  fullscreen = false,
   image,
   primaryButtonProps,
   secondaryButtonProps,
   closeButtonProps,
-  fullscreen = false,
+  inNavModal = false,
   ...props
 }: ModalProps) => {
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
@@ -52,7 +53,7 @@ const Modal = ({
   const pretendContentTranslateY = useSharedValue(20);
 
   const triggerCloseAnimation = useCallback(() => {
-    if (Platform.OS === 'android' && fullscreen) {
+    if (Platform.OS === 'android' && inNavModal) {
       pretendContentTranslateY.value = withTiming(20, {
         duration: 50,
         easing: Easing.in(Easing.quad),
@@ -62,16 +63,16 @@ const Modal = ({
         easing: Easing.in(Easing.quad),
       });
     }
-  }, [Platform.OS, fullscreen, pretendContentTranslateY, backgroundOpacity]);
+  }, [Platform.OS, inNavModal, pretendContentTranslateY, backgroundOpacity]);
 
   useImperativeHandle(ref, () => ({
     ...(bottomSheetModalRef.current as BottomSheetModal),
     triggerCloseAnimation,
   }));
 
-  // Trigger animations on render for fullscreen Android modal
+  // Trigger animations on render for inNavModal Android modal
   useEffect(() => {
-    if (Platform.OS === 'android' && fullscreen) {
+    if (Platform.OS === 'android' && inNavModal) {
       backgroundOpacity.value = withDelay(
         300,
         withTiming(1, {
@@ -87,7 +88,7 @@ const Modal = ({
         })
       );
     }
-  }, [fullscreen, backgroundOpacity, pretendContentTranslateY]);
+  }, [inNavModal, backgroundOpacity, pretendContentTranslateY]);
 
   const animatedBackgroundStyle = useAnimatedStyle(() => ({
     backgroundColor: hexWithOpacity(
@@ -96,7 +97,7 @@ const Modal = ({
     ),
   }));
 
-  const animatedFullscreenStyle = useAnimatedStyle(() => ({
+  const animatedInNavModalStyle = useAnimatedStyle(() => ({
     backgroundColor: hexWithOpacity(
       theme.components.overlay.backgroundColor,
       backgroundOpacity.value * (theme.components.overlay.opacity / 100)
@@ -240,7 +241,7 @@ const Modal = ({
     </>
   );
 
-  return fullscreen ? (
+  return inNavModal ? (
     <View style={{ flex: 1, backgroundColor: theme.color.background.primary }}>
       {Platform.OS === 'android' ? (
         <Animated.View style={[styles.androidContainer, animatedBackgroundStyle]}>
@@ -248,18 +249,19 @@ const Modal = ({
         </Animated.View>
       ) : null}
       <Animated.View
-        style={[styles.fullscreenContainer, Platform.OS === 'android' && animatedFullscreenStyle]}
+        style={[styles.inNavModalContainer, Platform.OS === 'android' && animatedInNavModalStyle]}
       >
-        <View style={styles.fullscreenContent}>{content}</View>
+        <View style={styles.inNavModalContent}>{content}</View>
       </Animated.View>
     </View>
   ) : (
     <BottomSheetModal
       ref={bottomSheetModalRef}
       enableDynamicSizing={true}
-      snapPoints={image ? ['90%'] : props.snapPoints}
+      snapPoints={image || fullscreen ? ['90%'] : props.snapPoints}
       showHandle={typeof loading !== 'undefined' && loading ? false : props.showHandle}
       accessible={false}
+      style={styles.modal}
       {...props}
       onChange={handleChange}
     >
@@ -272,9 +274,12 @@ const Modal = ({
 };
 
 const styles = StyleSheet.create((theme, rt) => ({
+  modal: {
+    gap: theme.components.modal.content.gap - theme.components.bottomSheet.gap,
+  },
   container: {
     flex: 1,
-    gap: theme.components.dialog.gap,
+    gap: theme.components.modal.gap,
     variants: {
       loading: {
         true: {
@@ -285,11 +290,11 @@ const styles = StyleSheet.create((theme, rt) => ({
   },
   header: {
     flexDirection: 'row',
-    gap: theme.components.dialog.gap,
+    gap: theme.components.modal.gap,
   },
   headerTextContent: {
     flex: 1,
-    gap: theme.components.dialog.content.gap,
+    gap: theme.components.modal.content.gap,
   },
   image: {
     width: 260,
@@ -297,52 +302,51 @@ const styles = StyleSheet.create((theme, rt) => ({
   },
   imageContainer: {
     alignItems: 'center',
-    justifyContent: 'center',
     flex: 1,
   },
   textContent: {
-    gap: theme.components.dialog.content.gap,
+    gap: theme.components.modal.content.gap,
   },
   loadingTop: {
-    borderTopLeftRadius: theme.components.dialog.borderRadius,
-    borderTopRightRadius: theme.components.dialog.borderRadius,
+    borderTopLeftRadius: theme.components.modal.borderRadius,
+    borderTopRightRadius: theme.components.modal.borderRadius,
     height: 16,
     backgroundColor: theme.color.surface.neutral.strong,
   },
   loadingContainer: {
-    borderTopLeftRadius: theme.components.dialog.borderRadius,
-    borderTopRightRadius: theme.components.dialog.borderRadius,
+    borderTopLeftRadius: theme.components.modal.borderRadius,
+    borderTopRightRadius: theme.components.modal.borderRadius,
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
     minHeight: 140,
-    gap: theme.components.dialog.content.gap,
+    gap: theme.components.modal.content.gap,
   },
   footer: {
-    gap: theme.components.dialog.action.gap,
+    gap: theme.components.modal.action.gap,
   },
-  fullscreenContainer: {
+  inNavModalContainer: {
     flex: 1,
     ...(Platform.OS === 'ios' ? { backgroundColor: theme.components.overlay.backgroundColor } : {}),
   },
-  fullscreenContent: {
+  inNavModalContent: {
     flex: 1,
-    borderTopLeftRadius: theme.components.dialog.borderRadius,
-    borderTopRightRadius: theme.components.dialog.borderRadius,
+    borderTopLeftRadius: theme.components.modal.borderRadius,
+    borderTopRightRadius: theme.components.modal.borderRadius,
     backgroundColor: theme.color.surface.neutral.strong,
-    gap: theme.components.dialog.gap,
-    padding: theme.components.dialog.padding,
-    paddingBottom: theme.components.dialog.padding + rt.insets.bottom,
+    gap: theme.components.modal.gap,
+    padding: theme.components.modal.padding,
+    paddingBottom: theme.components.modal.padding + rt.insets.bottom,
   },
   androidContainer: {
     height: rt.insets.top + 18,
-    paddingLeft: theme.components.dialog.padding,
-    paddingRight: theme.components.dialog.padding,
+    paddingLeft: theme.components.modal.padding,
+    paddingRight: theme.components.modal.padding,
     justifyContent: 'flex-end',
   },
   pretendContent: {
-    borderTopLeftRadius: theme.components.dialog.borderRadius,
-    borderTopRightRadius: theme.components.dialog.borderRadius,
+    borderTopLeftRadius: theme.components.modal.borderRadius,
+    borderTopRightRadius: theme.components.modal.borderRadius,
     height: 12,
     backgroundColor: theme.components.parts.modalStack.backgroundColorCardTop,
   },

package/src/components/Modal/Modal.web.tsx

@@ -41,7 +41,7 @@ const Modal = ({
   primaryButtonProps,
   secondaryButtonProps,
   closeButtonProps,
-  fullscreen = false,
+  inNavModal = false,
   ...props
 }: ModalProps) => {
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
@@ -52,7 +52,7 @@ const Modal = ({
   const pretendContentTranslateY = useSharedValue(20);
 
   const triggerCloseAnimation = useCallback(() => {
-    if (Platform.OS === 'android' && fullscreen) {
+    if (Platform.OS === 'android' && inNavModal) {
       pretendContentTranslateY.value = withTiming(20, {
         duration: 50,
         easing: Easing.in(Easing.quad),
@@ -62,16 +62,16 @@ const Modal = ({
         easing: Easing.in(Easing.quad),
       });
     }
-  }, [Platform.OS, fullscreen, pretendContentTranslateY, backgroundOpacity]);
+  }, [Platform.OS, inNavModal, pretendContentTranslateY, backgroundOpacity]);
 
   useImperativeHandle(ref, () => ({
     ...(bottomSheetModalRef.current as BottomSheetModal),
     triggerCloseAnimation,
   }));
 
-  // Trigger animations on render for fullscreen Android modal
+  // Trigger animations on render for inNavModal Android modal
   useEffect(() => {
-    if (Platform.OS === 'android' && fullscreen) {
+    if (Platform.OS === 'android' && inNavModal) {
       backgroundOpacity.value = withDelay(
         300,
         withTiming(1, {
@@ -87,7 +87,7 @@ const Modal = ({
         })
       );
     }
-  }, [fullscreen, backgroundOpacity, pretendContentTranslateY]);
+  }, [inNavModal, backgroundOpacity, pretendContentTranslateY]);
 
   const animatedBackgroundStyle = useAnimatedStyle(() => ({
     backgroundColor: hexWithOpacity(
@@ -96,7 +96,7 @@ const Modal = ({
     ),
   }));
 
-  const animatedFullscreenStyle = useAnimatedStyle(() => ({
+  const animatedInNavModalStyle = useAnimatedStyle(() => ({
     backgroundColor: hexWithOpacity(
       theme.components.overlay.backgroundColor,
       backgroundOpacity.value * (theme.components.overlay.opacity / 100)
@@ -238,7 +238,7 @@ const Modal = ({
     </>
   );
 
-  return fullscreen ? (
+  return inNavModal ? (
     <View style={{ flex: 1, backgroundColor: theme.color.background.primary }}>
       {Platform.OS === 'android' ? (
         <Animated.View style={[styles.androidContainer, animatedBackgroundStyle]}>
@@ -246,9 +246,9 @@ const Modal = ({
         </Animated.View>
       ) : null}
       <Animated.View
-        style={[styles.fullscreenContainer, Platform.OS === 'android' && animatedFullscreenStyle]}
+        style={[styles.inNavModalContainer, Platform.OS === 'android' && animatedInNavModalStyle]}
       >
-        <View style={styles.fullscreenContent}>{content}</View>
+        <View style={styles.inNavModalContent}>{content}</View>
       </Animated.View>
     </View>
   ) : (
@@ -271,15 +271,15 @@ const Modal = ({
 const styles = StyleSheet.create((theme, rt) => ({
   container: {
     flex: 1,
-    gap: theme.components.dialog.gap,
+    gap: theme.components.modal.gap,
   },
   header: {
     flexDirection: 'row',
-    gap: theme.components.dialog.gap,
+    gap: theme.components.modal.gap,
   },
   headerTextContent: {
     flex: 1,
-    gap: theme.components.dialog.content.gap,
+    gap: theme.components.modal.content.gap,
   },
   image: {
     width: 260,
@@ -291,40 +291,40 @@ const styles = StyleSheet.create((theme, rt) => ({
     flex: 1,
   },
   textContent: {
-    gap: theme.components.dialog.content.gap,
+    gap: theme.components.modal.content.gap,
   },
   loadingContainer: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
     minHeight: 140,
-    gap: theme.components.dialog.content.gap,
+    gap: theme.components.modal.content.gap,
   },
   footer: {
-    gap: theme.components.dialog.action.gap,
+    gap: theme.components.modal.action.gap,
   },
-  fullscreenContainer: {
+  inNavModalContainer: {
     flex: 1,
     ...(Platform.OS === 'ios' ? { backgroundColor: theme.components.overlay.backgroundColor } : {}),
   },
-  fullscreenContent: {
+  inNavModalContent: {
     flex: 1,
-    borderTopLeftRadius: theme.components.dialog.borderRadius,
-    borderTopRightRadius: theme.components.dialog.borderRadius,
+    borderTopLeftRadius: theme.components.modal.borderRadius,
+    borderTopRightRadius: theme.components.modal.borderRadius,
     backgroundColor: theme.color.surface.neutral.strong,
-    gap: theme.components.dialog.gap,
-    padding: theme.components.dialog.padding,
-    paddingBottom: theme.components.dialog.padding + rt.insets.bottom,
+    gap: theme.components.modal.gap,
+    padding: theme.components.modal.padding,
+    paddingBottom: theme.components.modal.padding + rt.insets.bottom,
   },
   androidContainer: {
     height: rt.insets.top + 18,
-    paddingLeft: theme.components.dialog.padding,
-    paddingRight: theme.components.dialog.padding,
+    paddingLeft: theme.components.modal.padding,
+    paddingRight: theme.components.modal.padding,
     justifyContent: 'flex-end',
   },
   pretendContent: {
-    borderTopLeftRadius: theme.components.dialog.borderRadius,
-    borderTopRightRadius: theme.components.dialog.borderRadius,
+    borderTopLeftRadius: theme.components.modal.borderRadius,
+    borderTopRightRadius: theme.components.modal.borderRadius,
     height: 12,
     backgroundColor: theme.components.parts.modalStack.backgroundColorCardTop,
   },

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

@@ -105,3 +105,21 @@ export const WithGrid: Story = {
     </RadioGroup>
   ),
 };
+
+export const LongContent: Story = {
+  args: {
+    type: 'tile',
+  },
+  render: args => (
+    <RadioGroup {...args}>
+      <Radio aria-label="Label 1" label="Option 1" value="Option 1" nativeID="Radio-1" />
+      <Radio
+        aria-label="Label 2"
+        label="Option 2 with a very long content that spans multiple lines to test text wrapping"
+        value="Option 2"
+        nativeID="Radio-2"
+      />
+      <Radio aria-label="Label 3" label="Option 3" value="Option 3" nativeID="Radio-3" />
+    </RadioGroup>
+  ),
+};

package/src/components/RadioCard/RadioCardGroup.context.ts

@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react';
+
+export const RadioCardGroupContext = createContext<{
+  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+  flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+  justifyContent?:
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'space-between'
+    | 'space-around'
+    | 'space-evenly';
+  alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+}>({});
+
+export const useRadioCardGroupContext = () => useContext(RadioCardGroupContext);

package/src/components/RadioCard/RadioCardGroup.stories.tsx

@@ -68,3 +68,27 @@ export const Playground: Story = {
     </RadioCardGroup>
   ),
 };
+
+export const LongContent: Story = {
+  args: {
+    flexDirection: 'column',
+  },
+  render: args => (
+    <RadioCardGroup {...args}>
+      <RadioCard aria-label="Label 1" label="Option 1" value="Option 1" nativeID="RadioCard-1">
+        <BodyText>Additional content</BodyText>
+      </RadioCard>
+      <RadioCard
+        aria-label="Label 2"
+        label="Option 2 with a very long content that should wrap into multiple lines to test the layout of the RadioCard component in such scenarios."
+        value="Option 2"
+        nativeID="RadioCard-2"
+      >
+        <BodyText>Additional content</BodyText>
+      </RadioCard>
+      <RadioCard aria-label="Label 3" label="Option 3" value="Option 3" nativeID="RadioCard-3">
+        <BodyText>Additional content</BodyText>
+      </RadioCard>
+    </RadioCardGroup>
+  ),
+};

package/src/components/RadioCard/RadioCardGroup.tsx

@@ -1,7 +1,9 @@
-import RadioCardGroupProps from './RadioCardGroup.props';
+import { useMemo } from 'react';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Grid } from '../Grid';
+import { RadioCardGroupContext } from './RadioCardGroup.context';
+import RadioCardGroupProps from './RadioCardGroup.props';
 
 const RadioCardGroup = ({
   children,
@@ -14,26 +16,33 @@ const RadioCardGroup = ({
   columns,
   ...props
 }: RadioCardGroupProps) => {
+  const context = useMemo(() => {
+    return { flexDirection, flexWrap, justifyContent, alignItems };
+  }, [flexDirection, flexWrap, justifyContent, alignItems]);
   return columns ? (
-    <Grid {...props} gap={gap} columns={columns} style={style}>
-      {children as any}
-    </Grid>
+    <RadioCardGroupContext.Provider value={context}>
+      <Grid {...props} gap={gap} columns={columns} style={style}>
+        {children as any}
+      </Grid>
+    </RadioCardGroupContext.Provider>
   ) : (
-    <View
-      {...props}
-      style={[
-        styles.containerGap(gap),
-        {
-          flexDirection,
-          flexWrap,
-          justifyContent,
-          alignItems,
-        },
-        style,
-      ]}
-    >
-      {children}
-    </View>
+    <RadioCardGroupContext.Provider value={context}>
+      <View
+        {...props}
+        style={[
+          styles.containerGap(gap),
+          {
+            flexDirection,
+            flexWrap,
+            justifyContent,
+            alignItems,
+          },
+          style,
+        ]}
+      >
+        {children}
+      </View>
+    </RadioCardGroupContext.Provider>
   );
 };