@utilitywarehouse/hearth-react-native 0.29.1 → 0.30.0

package/build/components/Modal/Modal.js

@@ -6,14 +6,16 @@ import { AccessibilityInfo, Platform, View, findNodeHandle } from 'react-native'
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { BottomSheetModal, BottomSheetScrollView } from '../BottomSheet';
+import { useBottomSheetContext } from '../BottomSheet/BottomSheet.context';
 import { Button } from '../Button';
 import { Heading } from '../Heading';
 import { Spinner } from '../Spinner';
 import { UnstyledIconButton } from '../UnstyledIconButton';
-const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', fullscreen = false, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter = true, ...props }) => {
+const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', loadingDescription, fullscreen = false, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter = true, ...props }) => {
     const bottomSheetModalRef = useRef(null);
     const viewRef = useRef(null);
     const scrollViewRef = useRef(null);
+    const { useSafeAreaInsets } = useBottomSheetContext();
     useImperativeHandle(ref, () => ({
         ...bottomSheetModalRef.current,
     }));
@@ -64,6 +66,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         noButtons,
         stickyFooter,
         showHandle: props.showHandle,
+        useSafeAreaInsets,
     });
     const footer = useMemo(() => (_jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] })), [
         handlePrimaryButtonPress,
@@ -75,7 +78,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         secondaryButtonProps,
         secondaryButtonText,
     ]);
-    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, description && !image ? _jsx(BodyText, { accessible: true, children: description }) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : null] })] })) : null, children, !stickyFooter && !noButtons ? footer : null] })) }));
+    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? (loadingHeading ?? 'Loading') : undefined, accessibilityHint: Platform.OS === 'android' && loadingDescription ? loadingDescription : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: loadingHeading }), loadingDescription ? _jsx(BodyText, { textAlign: "center", children: loadingDescription }) : null] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, description && !image ? _jsx(BodyText, { accessible: true, children: description }) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : null] })] })) : null, children, !stickyFooter && !noButtons ? footer : null] })) }));
     const renderFooter = useCallback((props) => (_jsx(BottomSheetFooter, { ...props, children: _jsx(View, { style: styles.footerWrap, children: footer }) })), [footer]);
     return (_jsxs(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image || fullscreen ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, style: styles.modal, footerComponent: stickyFooter && !noButtons ? renderFooter : undefined, ...props, onChange: handleChange, children: [loading ? _jsx(View, { style: styles.loadingTop }) : null, _jsx(BottomSheetScrollView, { contentContainerStyle: styles.scrollView, ref: scrollViewRef, children: content })] }));
 };
@@ -99,34 +102,68 @@ const styles = StyleSheet.create((theme, rt) => ({
         variants: {
             bothButtons: {
                 true: {
+                    paddingBottom: 166,
+                },
+                false: {
+                    paddingBottom: 102,
+                },
+            },
+            noButtons: {
+                true: {
+                    paddingBottom: theme.components.modal.padding,
+                },
+            },
+            stickyFooter: {
+                true: {},
+                false: {
+                    paddingBottom: theme.components.modal.padding + theme.components.bottomSheet.padding,
+                },
+            },
+            useSafeAreaInsets: {
+                true: {},
+                false: {},
+            },
+        },
+        compoundVariants: [
+            {
+                bothButtons: true,
+                useSafeAreaInsets: true,
+                styles: {
                     paddingBottom: 166 +
                         rt.insets.bottom -
                         theme.components.modal.padding +
                         theme.components.bottomSheet.padding,
                 },
-                false: {
+            },
+            {
+                bothButtons: false,
+                useSafeAreaInsets: true,
+                styles: {
                     paddingBottom: 102 +
                         rt.insets.bottom -
                         theme.components.modal.padding +
                         theme.components.bottomSheet.padding,
                 },
             },
-            noButtons: {
-                true: {
+            {
+                noButtons: true,
+                useSafeAreaInsets: true,
+                styles: {
                     paddingBottom: rt.insets.bottom +
                         theme.components.modal.padding +
                         theme.components.bottomSheet.padding,
                 },
             },
-            stickyFooter: {
-                true: {},
-                false: {
+            {
+                useSafeAreaInsets: true,
+                stickyFooter: false,
+                styles: {
                     paddingBottom: rt.insets.bottom +
                         theme.components.modal.padding +
                         theme.components.bottomSheet.padding,
                 },
             },
-        },
+        ],
     },
     header: {
         flexDirection: 'row',
@@ -172,7 +209,16 @@ const styles = StyleSheet.create((theme, rt) => ({
     footerWrap: {
         backgroundColor: theme.color.surface.neutral.strong,
         paddingHorizontal: theme.components.bottomSheet.padding,
-        paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
+        variants: {
+            useSafeAreaInsets: {
+                true: {
+                    paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
+                },
+                false: {
+                    paddingBottom: theme.components.bottomSheet.padding,
+                },
+            },
+        },
     },
 }));
 export default Modal;

package/build/components/Modal/Modal.shared.types.d.ts

@@ -8,6 +8,7 @@ export interface ModalCommonProps {
     showCloseButton?: boolean;
     heading?: string;
     loadingHeading?: string;
+    loadingDescription?: string;
     description?: string;
     stickyFooter?: boolean;
     children?: ViewProps['children'];

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

@@ -1,3 +1,3 @@
 import NavModalProps from './NavModal.props';
-declare const NavModal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, loading, loadingHeading, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter, background, scrollable, presentation, scrollViewProps, safeAreaViewProps, ...props }: NavModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const NavModal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, loading, loadingHeading, loadingDescription, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter, background, scrollable, presentation, scrollViewProps, safeAreaViewProps, ...props }: NavModalProps) => import("react/jsx-runtime").JSX.Element;
 export default NavModal;

package/build/components/NavModal/NavModal.js

@@ -12,7 +12,7 @@ import { Button } from '../Button';
 import { Heading } from '../Heading';
 import { Spinner } from '../Spinner';
 import { UnstyledIconButton } from '../UnstyledIconButton';
-const NavModal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, loading, loadingHeading = 'Loading...', image, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter = true, background = 'default', scrollable = true, presentation = 'modal', scrollViewProps, safeAreaViewProps, ...props }) => {
+const NavModal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, loading, loadingHeading = 'Loading...', loadingDescription, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter = true, background = 'default', scrollable = true, presentation = 'modal', scrollViewProps, safeAreaViewProps, ...props }) => {
     const theme = useTheme();
     const backgroundOpacity = useSharedValue(0);
     const pretendContentTranslateY = useSharedValue(20);
@@ -78,7 +78,7 @@ const NavModal = ({ ref, children, heading, description, showCloseButton = true,
         secondaryButtonProps,
         secondaryButtonText,
     ]);
-    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, children: [_jsx(Spinner, { size: "lg", color: isBrandBackground ? theme.color.icon.inverted : undefined }), _jsx(Heading, { size: "lg", textAlign: "center", inverted: isBrandBackground, children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, inverted: isBrandBackground, children: heading })) : null, description && !image ? (_jsx(BodyText, { accessible: true, inverted: isBrandBackground, children: description })) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", inverted: isBrandBackground, ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, inverted: isBrandBackground, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, inverted: isBrandBackground, children: description })) : null] })] })) : null, scrollable ? (_jsxs(ScrollView, { style: {
+    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? (loadingHeading ?? 'Loading') : undefined, accessibilityHint: Platform.OS === 'android' && loadingDescription ? loadingDescription : undefined, screenReaderFocusable: true, children: [_jsx(Spinner, { size: "lg", color: isBrandBackground ? theme.color.icon.inverted : undefined }), _jsx(Heading, { size: "lg", textAlign: "center", inverted: isBrandBackground, children: loadingHeading }), loadingDescription ? (_jsx(BodyText, { size: "md", textAlign: "center", inverted: isBrandBackground, children: loadingDescription })) : null] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, inverted: isBrandBackground, children: heading })) : null, description && !image ? (_jsx(BodyText, { accessible: true, inverted: isBrandBackground, children: description })) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", inverted: isBrandBackground, ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, inverted: isBrandBackground, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, inverted: isBrandBackground, children: description })) : null] })] })) : null, scrollable ? (_jsxs(ScrollView, { style: {
                         flex: stickyFooter ? 1 : 0,
                         marginHorizontal: -4,
                     }, contentContainerStyle: { paddingHorizontal: 4 }, ...scrollViewProps, children: [children, !stickyFooter && !noButtons ? (_jsx(View, { style: styles.inNavModalFooterContainer, children: footer })) : null] })) : (_jsxs(View, { style: {

package/build/components/Select/Select.js

@@ -6,6 +6,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { BottomSheetFlatList, BottomSheetModal, BottomSheetScrollView, BottomSheetView, } from '../BottomSheet';
+import { useBottomSheetContext } from '../BottomSheet/BottomSheet.context';
 import { DetailText } from '../DetailText';
 import { FormField, useFormFieldContext } from '../FormField';
 import { Icon } from '../Icon';
@@ -18,6 +19,7 @@ const Select = ({ options = [], value, onValueChange, label, labelVariant = 'bod
     const isRequired = formFieldContext?.required ?? required;
     const isDisabled = formFieldContext?.disabled ?? disabled;
     const isReadonly = formFieldContext?.readonly ?? readonly;
+    const { useSafeAreaInsets } = useBottomSheetContext();
     const bottomSheetModalRef = useRef(null);
     const [search, setSearch] = useState('');
     const [isOpen, setIsOpen] = useState(false);
@@ -77,7 +79,7 @@ const Select = ({ options = [], value, onValueChange, label, labelVariant = 'bod
                         selectedValue: value,
                         onValueChange,
                         close: closeBottomSheet,
-                    }, children: _jsxs(SafeAreaView, { edges: ['top'], style: { flex: 1 }, children: [menuHeading && (_jsx(View, { style: styles.headingContainer, children: _jsx(DetailText, { size: "lg", children: menuHeading }) })), searchable && (_jsx(View, { style: styles.searchContainer, children: _jsx(Input, { placeholder: searchPlaceholder, value: search, inBottomSheet: true, onChangeText: setSearch, type: "search", testID: testID ? `${testID}-search` : undefined }) })), children ? (_jsx(BottomSheetScrollView, { testID: testID ? `${testID}-options` : undefined, children: children })) : (_jsx(BottomSheetFlatList, { data: filteredOptions, keyExtractor: (option) => option.value, renderItem: renderSelectOption, ListEmptyComponent: renderEmptyComponent, testID: testID ? `${testID}-options` : undefined, ...listProps }))] }) }) })] }));
+                    }, children: _jsxs(SafeAreaView, { edges: useSafeAreaInsets ? ['top'] : [], style: { flex: 1 }, children: [menuHeading && (_jsx(View, { style: styles.headingContainer, children: _jsx(DetailText, { size: "lg", children: menuHeading }) })), searchable && (_jsx(View, { style: styles.searchContainer, children: _jsx(Input, { placeholder: searchPlaceholder, value: search, inBottomSheet: true, onChangeText: setSearch, type: "search", testID: testID ? `${testID}-search` : undefined }) })), children ? (_jsx(BottomSheetScrollView, { testID: testID ? `${testID}-options` : undefined, children: children })) : (_jsx(BottomSheetFlatList, { data: filteredOptions, keyExtractor: (option) => option.value, renderItem: renderSelectOption, ListEmptyComponent: renderEmptyComponent, testID: testID ? `${testID}-options` : undefined, ...listProps }))] }) }) })] }));
 };
 const styles = StyleSheet.create(theme => ({
     container: {

package/docs/changelog.mdx

@@ -9,6 +9,92 @@ import { BackToTopButton, NextPrevPage } from './components';
 The changelog for the Hearth React Native library. Here you can find all the changes, improvements, and bug fixes for each version.
 
 
+## 0.29.2
+
+### Patch Changes
+
+- [#1067](https://github.com/utilitywarehouse/hearth/pull/1067) [`893cbfd`](https://github.com/utilitywarehouse/hearth/commit/893cbfd1bf090b8b75df6f58f2babaf8ba1e0033) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add a `useSafeAreaInsets` prop to `BottomSheetModalProvider` to control Hearth's bottom-sheet safe-area spacing.
+
+  Bottom-sheet wrappers such as `BottomSheetView`, `BottomSheetScrollView`, `BottomSheetFlatList`, and components that render `SafeAreaView` inside a bottom sheet now respect `BottomSheetModalProvider` configuration.
+
+  **Components affected**:
+  - `BottomSheetModalProvider`
+  - `BottomSheetView`
+  - `BottomSheetScrollView`
+  - `BottomSheetFlatList`
+  - `Modal`
+  - `Select`
+  - `Combobox`
+
+  **Developer changes**:
+
+  No changes are required if you want the current behaviour. If your app already applies its own safe-area padding around bottom-sheet content, opt out like this:
+
+  ```tsx
+  <BottomSheetModalProvider useSafeAreaInsets={false}>
+    {/* Your app content */}
+  </BottomSheetModalProvider>
+  ```
+
+## 0.29.1
+
+### Patch Changes
+
+- [#1062](https://github.com/utilitywarehouse/hearth/pull/1062) [`0da3ffe`](https://github.com/utilitywarehouse/hearth/commit/0da3ffe12691a4287694ae9fcb2290d459e3c041) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Respect the selected `NavModal` background style
+
+  Fixed an issue where `NavModal` always rendered its inner content with the default surface background, which prevented the `background="brand"` treatment from being applied correctly.
+
+  **Components affected**:
+  - `NavModal`
+
+  **Developer changes**:
+
+  No changes are required.
+
+## 0.29.0
+
+### Minor Changes
+
+- [#1060](https://github.com/utilitywarehouse/hearth/pull/1060) [`05d38f9`](https://github.com/utilitywarehouse/hearth/commit/05d38f9414fec6d6b4a0733829b4d290d96fccae) Thanks [@jordmccord](https://github.com/jordmccord)! - 💔 [BREAKING CHANGE]: Extract navigation-presented modal behaviour into `NavModal`
+
+  `Modal` now only supports the bottom-sheet modal behaviour. The React Navigation screen-based API that was previously exposed through `inNavModal`, `background`, and `scrollable` has moved to the new `NavModal` component.
+
+  `NavModal` also adds a `presentation` prop so the component can match the React Navigation screen presentation style for sheet-style and full-screen modal routes.
+
+  The package-owned `SafeAreaView` component has also been removed in favour of the `react-native-safe-area-context` `SafeAreaView`. Hearth now re-exports that implementation from the package root.
+
+  **Components affected**:
+  - `Modal`
+  - `NavModal`
+  - `SafeAreaView`
+
+  **Developer changes**:
+
+  Update navigation modal screens to use `NavModal` instead of `Modal`:
+
+  ```diff
+  - import { Modal } from '@utilitywarehouse/hearth-react-native';
+  + import { NavModal, type NavModalRef } from '@utilitywarehouse/hearth-react-native';
+
+  - const modalRef = useRef<Modal>(null);
+  + const modalRef = useRef<NavModalRef>(null);
+
+  - <Modal inNavModal background="brand" scrollable={false}>
+  + <NavModal background="brand" scrollable={false} presentation="modal">
+      {/* content */}
+  - </Modal>
+  + </NavModal>
+  ```
+
+  If you are using the bottom-sheet modal API, no changes are required.
+
+  If you were importing the old component from the component path, update it to use the package root re-export or import directly from `react-native-safe-area-context`:
+
+  ```diff
+  - import { SafeAreaView } from '@utilitywarehouse/hearth-react-native';
+  + import { SafeAreaView } from 'react-native-safe-area-context';
+  ```
+
 ## 0.28.6
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.29.1",
+  "version": "0.30.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -60,8 +60,8 @@
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
     "@utilitywarehouse/hearth-react-icons": "^0.8.0",
     "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
-    "@utilitywarehouse/hearth-tokens": "^0.2.4",
-    "@utilitywarehouse/hearth-svg-assets": "^0.5.0"
+    "@utilitywarehouse/hearth-svg-assets": "^0.5.0",
+    "@utilitywarehouse/hearth-tokens": "^0.2.4"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=5.0.0",

package/src/components/BottomSheet/BottomSheet.context.ts

@@ -2,9 +2,12 @@ import { createContext, useContext } from 'react';
 
 interface BottomSheetContextProps {
   handle?: boolean;
+  useSafeAreaInsets: boolean;
 }
 
-export const BottomSheetContext = createContext<BottomSheetContextProps>({});
+export const BottomSheetContext = createContext<BottomSheetContextProps>({
+  useSafeAreaInsets: true,
+});
 
 export const useBottomSheetContext = (): BottomSheetContextProps => {
   const context = useContext(BottomSheetContext);

package/src/components/BottomSheet/BottomSheet.docs.mdx

@@ -129,6 +129,20 @@ const App = () => {
 };
 ```
 
+`BottomSheetModalProvider` adds Hearth's bottom-sheet safe-area spacing by default. If your app already handles safe-area padding, you can opt out and avoid double spacing:
+
+```tsx
+import { BottomSheetModalProvider } from '@utilitywarehouse/hearth-react-native';
+
+const App = () => {
+  return (
+    <BottomSheetModalProvider useSafeAreaInsets={false}>
+      {/* Your app content */}
+    </BottomSheetModalProvider>
+  );
+};
+```
+
 ### `BottomSheetScrollView`
 
 For scrollable content within a bottom sheet, use the `BottomSheetScrollView` component instead of the standard ScrollView:
@@ -169,6 +183,12 @@ const App = () => {
 };
 ```
 
+Use the `useSafeAreaInsets` prop to control whether Hearth applies bottom-sheet safe-area spacing for modal content, list wrappers, and the top `SafeAreaView` used by components such as `Select` and `Combobox`.
+
+| Property            | Type      | Description                                                                                                                                         | Default |
+| ------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| `useSafeAreaInsets` | `boolean` | Applies Hearth's safe-area insets inside bottom sheets. Set to `false` when your app already manages safe-area padding around bottom-sheet content. | `true`  |
+
 ### `Input` in Bottom Sheets
 
 When using the `Input` component inside a `BottomSheet` or `BottomSheetModal`, you need to pass the `inBottomSheet` prop to ensure proper behavior with the keyboard and focus management.

package/src/components/BottomSheet/BottomSheet.tsx

@@ -22,6 +22,7 @@ const BottomSheet = ({
   ...rest
 }: BottomSheetProps) => {
   const bottomSheetRef = React.useRef<BottomSheet>(null);
+  const parentContext = React.useContext(BottomSheetContext);
 
   const { renderBackdrop, renderHandle } = useBottomSheetLogic<BottomSheet>({
     ref,
@@ -31,7 +32,13 @@ const BottomSheet = ({
     handleStyle,
   });
 
-  const value = useMemo(() => ({ handle: showHandle }), [showHandle]);
+  const value = useMemo(
+    () => ({
+      ...parentContext,
+      handle: showHandle,
+    }),
+    [parentContext, showHandle]
+  );
 
   return (
     <StyledBottomSheetCore

package/src/components/BottomSheet/BottomSheetFlatList.tsx

@@ -11,10 +11,11 @@ const BottomSheetFlatList = ({
   isModal = true,
   ...props
 }: BottomSheetFlatListProps<any> & { isModal?: boolean }) => {
-  const { handle } = useBottomSheetContext();
+  const { handle, useSafeAreaInsets } = useBottomSheetContext();
   styles.useVariants({
     isModal,
     handle,
+    useSafeAreaInsets,
   });
 
   return (
@@ -34,7 +35,7 @@ const styles = StyleSheet.create((theme, rt) => ({
     variants: {
       isModal: {
         true: {
-          paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
+          paddingBottom: theme.components.bottomSheet.padding,
         },
       },
       handle: {
@@ -42,7 +43,20 @@ const styles = StyleSheet.create((theme, rt) => ({
           paddingTop: theme.components.bottomSheet.padding,
         },
       },
+      useSafeAreaInsets: {
+        true: {},
+        false: {},
+      },
     },
+    compoundVariants: [
+      {
+        isModal: true,
+        useSafeAreaInsets: true,
+        styles: {
+          paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
+        },
+      },
+    ],
   },
 }));
 

package/src/components/BottomSheet/BottomSheetModal.tsx

@@ -20,6 +20,7 @@ const BottomSheetModal = ({
   ...rest
 }: BottomSheetProps) => {
   const bottomSheetRef = React.useRef<BottomSheetModalMethods<any>>(null);
+  const parentContext = React.useContext(BottomSheetContext);
 
   const { renderBackdrop, renderHandle } = useBottomSheetLogic<BottomSheetModal>({
     // @ts-expect-error - ref
@@ -30,7 +31,13 @@ const BottomSheetModal = ({
     handleStyle,
   });
 
-  const value = useMemo(() => ({ handle: showHandle }), [showHandle]);
+  const value = useMemo(
+    () => ({
+      ...parentContext,
+      handle: showHandle,
+    }),
+    [parentContext, showHandle]
+  );
 
   return (
     <StyledBottomSheetModalCore

package/src/components/BottomSheet/BottomSheetModalProvider.tsx

@@ -0,0 +1,33 @@
+import { BottomSheetModalProvider as GorhomBottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import type { BottomSheetModalProviderProps as GorhomBottomSheetModalProviderProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetModalProvider/types';
+import { useMemo } from 'react';
+import { BottomSheetContext, useBottomSheetContext } from './BottomSheet.context';
+
+export interface BottomSheetModalProviderProps extends GorhomBottomSheetModalProviderProps {
+  useSafeAreaInsets?: boolean;
+}
+
+const BottomSheetModalProvider = ({
+  children,
+  useSafeAreaInsets = true,
+  ...props
+}: BottomSheetModalProviderProps) => {
+  const parentContext = useBottomSheetContext();
+  const value = useMemo(
+    () => ({
+      ...parentContext,
+      useSafeAreaInsets,
+    }),
+    [parentContext, useSafeAreaInsets]
+  );
+
+  return (
+    <GorhomBottomSheetModalProvider {...props}>
+      <BottomSheetContext.Provider value={value}>{children}</BottomSheetContext.Provider>
+    </GorhomBottomSheetModalProvider>
+  );
+};
+
+BottomSheetModalProvider.displayName = 'BottomSheetModalProvider';
+
+export default BottomSheetModalProvider;

package/src/components/BottomSheet/BottomSheetScrollView.tsx

@@ -14,10 +14,11 @@ const BottomSheetScrollView = ({
   isModal = true,
   ...props
 }: BottomSheetScrollViewProps & { isModal?: boolean }) => {
-  const { handle } = useBottomSheetContext();
+  const { handle, useSafeAreaInsets } = useBottomSheetContext();
   styles.useVariants({
     isModal,
     handle,
+    useSafeAreaInsets,
   });
 
   return (
@@ -43,7 +44,7 @@ const styles = StyleSheet.create((theme, rt) => ({
     variants: {
       isModal: {
         true: {
-          paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
+          paddingBottom: theme.components.bottomSheet.padding,
         },
       },
       handle: {
@@ -51,7 +52,20 @@ const styles = StyleSheet.create((theme, rt) => ({
           paddingTop: theme.components.bottomSheet.padding,
         },
       },
+      useSafeAreaInsets: {
+        true: {},
+        false: {},
+      },
     },
+    compoundVariants: [
+      {
+        isModal: true,
+        useSafeAreaInsets: true,
+        styles: {
+          paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
+        },
+      },
+    ],
   },
 }));
 

package/src/components/BottomSheet/BottomSheetView.tsx

@@ -13,11 +13,13 @@ const BottomSheetView = ({
   isModal = true,
   ...props
 }: BottomSheetViewProps & { isModal?: boolean }) => {
-  const { handle } = useBottomSheetContext();
+  const { handle, useSafeAreaInsets } = useBottomSheetContext();
   styles.useVariants({
     isModal,
     handle,
+    useSafeAreaInsets,
   });
+
   return (
     <StyledBottomSheetView style={[styles.contentContainer, style]} {...props}>
       {children}
@@ -35,7 +37,7 @@ const styles = StyleSheet.create((theme, rt) => ({
     variants: {
       isModal: {
         true: {
-          paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
+          paddingBottom: theme.components.bottomSheet.padding,
         },
       },
       handle: {
@@ -43,7 +45,20 @@ const styles = StyleSheet.create((theme, rt) => ({
           paddingTop: theme.components.bottomSheet.padding,
         },
       },
+      useSafeAreaInsets: {
+        true: {},
+        false: {},
+      },
     },
+    compoundVariants: [
+      {
+        isModal: true,
+        useSafeAreaInsets: true,
+        styles: {
+          paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
+        },
+      },
+    ],
   },
 }));
 

package/src/components/BottomSheet/index.ts

@@ -1,7 +1,6 @@
 export {
   BottomSheetFlashList,
   BottomSheetFooter,
-  BottomSheetModalProvider,
   BottomSheetSectionList,
   BottomSheetVirtualizedList,
   useBottomSheet,
@@ -15,5 +14,7 @@ export { default as BottomSheet } from './BottomSheet';
 export type { default as BottomSheetProps } from './BottomSheet.props';
 export { default as BottomSheetFlatList } from './BottomSheetFlatList';
 export { default as BottomSheetModal } from './BottomSheetModal';
+export { default as BottomSheetModalProvider } from './BottomSheetModalProvider';
+export type { BottomSheetModalProviderProps } from './BottomSheetModalProvider';
 export { default as BottomSheetScrollView } from './BottomSheetScrollView';
 export { default as BottomSheetView } from './BottomSheetView';

package/src/components/Combobox/Combobox.tsx

@@ -6,6 +6,7 @@ import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { BodyText } from '../BodyText';
 import { BottomSheetFlatList, BottomSheetModal, BottomSheetView } from '../BottomSheet';
+import { useBottomSheetContext } from '../BottomSheet/BottomSheet.context';
 import { DetailText } from '../DetailText';
 import { FormField, useFormFieldContext } from '../FormField';
 import { Icon } from '../Icon';
@@ -55,6 +56,7 @@ const Combobox = ({
   const isDisabled = formFieldContext?.disabled ?? disabled;
   const isReadonly = formFieldContext?.readonly ?? readonly;
   const { color } = useTheme();
+  const { useSafeAreaInsets } = useBottomSheetContext();
 
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
   const searchInputRef = useRef<TextInput>(null);
@@ -325,7 +327,7 @@ const Combobox = ({
             setSearch,
           }}
         >
-          <SafeAreaView edges={['top']}>
+          <SafeAreaView edges={useSafeAreaInsets ? ['top'] : []}>
             {menuHeading && (
               <View style={styles.headingContainer}>
                 <DetailText size="lg">{menuHeading}</DetailText>

package/src/components/DescriptionList/DescriptionListItem.tsx

@@ -3,7 +3,6 @@ import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { BodyText } from '../BodyText';
-import { DetailText } from '../DetailText';
 import Helper from '../Helper/Helper';
 import { useDescriptionListContext } from './DescriptionList.context';
 import type DescriptionListItemProps from './DescriptionListItem.props';
@@ -55,7 +54,7 @@ const DescriptionListItem = ({
         </View>
         {numericValue ? (
           <View style={styles.descriptionWrapper}>
-            <DetailText size="lg">{numericValue}</DetailText>
+            <BodyText weight="semibold">{numericValue}</BodyText>
           </View>
         ) : null}
       </View>