@utilitywarehouse/hearth-react-native 0.29.0 → 0.29.2

package/.turbo/turbo-build.log

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

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.29.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.29.2 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint .
 
 
@@ -51,15 +51,15 @@
 
 ✖ 22 problems (0 errors, 22 warnings)
 
-Rule                                      | Time (ms) | Relative
-:-----------------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars         |  1560.145 |    62.1%
-react-hooks/exhaustive-deps               |   117.093 |     4.7%
-no-global-assign                          |    95.045 |     3.8%
-react-hooks/rules-of-hooks                |    70.847 |     2.8%
-no-misleading-character-class             |    41.174 |     1.6%
-@typescript-eslint/ban-ts-comment         |    40.449 |     1.6%
-no-unexpected-multiline                   |    38.671 |     1.5%
-no-useless-escape                         |    35.996 |     1.4%
-@typescript-eslint/no-unused-expressions  |    34.583 |     1.4%
-@typescript-eslint/triple-slash-reference |    33.557 |     1.3%
+Rule                                     | Time (ms) | Relative
+:----------------------------------------|----------:|--------:
+@typescript-eslint/no-unused-vars        |  1520.806 |    60.5%
+react-hooks/exhaustive-deps              |   119.554 |     4.8%
+no-global-assign                         |    82.827 |     3.3%
+react-hooks/rules-of-hooks               |    73.620 |     2.9%
+no-loss-of-precision                     |    46.636 |     1.9%
+no-unexpected-multiline                  |    38.241 |     1.5%
+no-misleading-character-class            |    37.413 |     1.5%
+@typescript-eslint/no-unused-expressions |    31.682 |     1.3%
+no-useless-escape                        |    28.666 |     1.1%
+@typescript-eslint/ban-ts-comment        |    27.948 |     1.1%

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @utilitywarehouse/hearth-react-native
 
+## 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

package/build/components/BottomSheet/BottomSheet.context.d.ts

@@ -1,5 +1,6 @@
 interface BottomSheetContextProps {
     handle?: boolean;
+    useSafeAreaInsets: boolean;
 }
 export declare const BottomSheetContext: import("react").Context<BottomSheetContextProps>;
 export declare const useBottomSheetContext: () => BottomSheetContextProps;

package/build/components/BottomSheet/BottomSheet.context.js

@@ -1,5 +1,7 @@
 import { createContext, useContext } from 'react';
-export const BottomSheetContext = createContext({});
+export const BottomSheetContext = createContext({
+    useSafeAreaInsets: true,
+});
 export const useBottomSheetContext = () => {
     const context = useContext(BottomSheetContext);
     return context;

package/build/components/BottomSheet/BottomSheet.js

@@ -7,6 +7,7 @@ import useBottomSheetLogic from './useBottomSheetLogic';
 const StyledBottomSheetCore = withUnistyles(BottomSheetCore);
 const BottomSheet = ({ children, containerStyle, handleStyle, backdrop = true, showHandle = true, ref, ...rest }) => {
     const bottomSheetRef = React.useRef(null);
+    const parentContext = React.useContext(BottomSheetContext);
     const { renderBackdrop, renderHandle } = useBottomSheetLogic({
         ref,
         bottomSheetRef,
@@ -14,7 +15,10 @@ const BottomSheet = ({ children, containerStyle, handleStyle, backdrop = true, s
         showHandle,
         handleStyle,
     });
-    const value = useMemo(() => ({ handle: showHandle }), [showHandle]);
+    const value = useMemo(() => ({
+        ...parentContext,
+        handle: showHandle,
+    }), [parentContext, showHandle]);
     return (_jsx(StyledBottomSheetCore, { ref: bottomSheetRef, index: -1, backdropComponent: renderBackdrop, handleComponent: renderHandle, style: [styles.container, containerStyle], backgroundStyle: styles.background, ...rest, children: _jsx(BottomSheetContext.Provider, { value: value, children: children }) }));
 };
 const styles = StyleSheet.create(theme => ({

package/build/components/BottomSheet/BottomSheetFlatList.js

@@ -4,10 +4,11 @@ import { StyleSheet, withUnistyles } from 'react-native-unistyles';
 import { useBottomSheetContext } from './BottomSheet.context';
 const StyledBottomSheetFlatList = withUnistyles(FlatList);
 const BottomSheetFlatList = ({ style, contentContainerStyle, isModal = true, ...props }) => {
-    const { handle } = useBottomSheetContext();
+    const { handle, useSafeAreaInsets } = useBottomSheetContext();
     styles.useVariants({
         isModal,
         handle,
+        useSafeAreaInsets,
     });
     return (_jsx(StyledBottomSheetFlatList, { style: [styles.container, style], contentContainerStyle: [styles.contentContainer, contentContainerStyle], ...props }));
 };
@@ -19,7 +20,7 @@ const styles = StyleSheet.create((theme, rt) => ({
         variants: {
             isModal: {
                 true: {
-                    paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
+                    paddingBottom: theme.components.bottomSheet.padding,
                 },
             },
             handle: {
@@ -27,7 +28,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,
+                },
+            },
+        ],
     },
 }));
 BottomSheetFlatList.displayName = 'BottomSheetFlatList';

package/build/components/BottomSheet/BottomSheetModal.js

@@ -7,6 +7,7 @@ import useBottomSheetLogic from './useBottomSheetLogic';
 const StyledBottomSheetModalCore = withUnistyles(BottomSheetModalCore);
 const BottomSheetModal = ({ children, containerStyle, handleStyle, backdrop = true, showHandle = true, ref, ...rest }) => {
     const bottomSheetRef = React.useRef(null);
+    const parentContext = React.useContext(BottomSheetContext);
     const { renderBackdrop, renderHandle } = useBottomSheetLogic({
         // @ts-expect-error - ref
         ref,
@@ -15,7 +16,10 @@ const BottomSheetModal = ({ children, containerStyle, handleStyle, backdrop = tr
         showHandle,
         handleStyle,
     });
-    const value = useMemo(() => ({ handle: showHandle }), [showHandle]);
+    const value = useMemo(() => ({
+        ...parentContext,
+        handle: showHandle,
+    }), [parentContext, showHandle]);
     return (_jsx(StyledBottomSheetModalCore, { ref: bottomSheetRef, backdropComponent: renderBackdrop, handleComponent: renderHandle, style: [styles.container, containerStyle], backgroundStyle: styles.background, ...rest, children: _jsx(BottomSheetContext.Provider, { value: value, children: children }) }));
 };
 const styles = StyleSheet.create(theme => ({

package/build/components/BottomSheet/BottomSheetModalProvider.d.ts

@@ -0,0 +1,9 @@
+import type { BottomSheetModalProviderProps as GorhomBottomSheetModalProviderProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetModalProvider/types';
+export interface BottomSheetModalProviderProps extends GorhomBottomSheetModalProviderProps {
+    useSafeAreaInsets?: boolean;
+}
+declare const BottomSheetModalProvider: {
+    ({ children, useSafeAreaInsets, ...props }: BottomSheetModalProviderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default BottomSheetModalProvider;

package/build/components/BottomSheet/BottomSheetModalProvider.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BottomSheetModalProvider as GorhomBottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import { useMemo } from 'react';
+import { BottomSheetContext, useBottomSheetContext } from './BottomSheet.context';
+const BottomSheetModalProvider = ({ children, useSafeAreaInsets = true, ...props }) => {
+    const parentContext = useBottomSheetContext();
+    const value = useMemo(() => ({
+        ...parentContext,
+        useSafeAreaInsets,
+    }), [parentContext, useSafeAreaInsets]);
+    return (_jsx(GorhomBottomSheetModalProvider, { ...props, children: _jsx(BottomSheetContext.Provider, { value: value, children: children }) }));
+};
+BottomSheetModalProvider.displayName = 'BottomSheetModalProvider';
+export default BottomSheetModalProvider;

package/build/components/BottomSheet/BottomSheetScrollView.js

@@ -4,10 +4,11 @@ import { StyleSheet, withUnistyles } from 'react-native-unistyles';
 import { useBottomSheetContext } from './BottomSheet.context';
 const StyledBottomSheetScrollView = withUnistyles(ScrollView);
 const BottomSheetScrollView = ({ children, style, contentContainerStyle, isModal = true, ...props }) => {
-    const { handle } = useBottomSheetContext();
+    const { handle, useSafeAreaInsets } = useBottomSheetContext();
     styles.useVariants({
         isModal,
         handle,
+        useSafeAreaInsets,
     });
     return (_jsx(StyledBottomSheetScrollView, { style: [styles.container, style], contentContainerStyle: [styles.contentContainer, contentContainerStyle], ...props, children: children }));
 };
@@ -23,7 +24,7 @@ const styles = StyleSheet.create((theme, rt) => ({
         variants: {
             isModal: {
                 true: {
-                    paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
+                    paddingBottom: theme.components.bottomSheet.padding,
                 },
             },
             handle: {
@@ -31,7 +32,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,
+                },
+            },
+        ],
     },
 }));
 BottomSheetScrollView.displayName = 'BottomSheetScrollView';

package/build/components/BottomSheet/BottomSheetView.js

@@ -4,10 +4,11 @@ import { StyleSheet, withUnistyles } from 'react-native-unistyles';
 import { useBottomSheetContext } from './BottomSheet.context';
 const StyledBottomSheetView = withUnistyles(View);
 const BottomSheetView = ({ children, style, isModal = true, ...props }) => {
-    const { handle } = useBottomSheetContext();
+    const { handle, useSafeAreaInsets } = useBottomSheetContext();
     styles.useVariants({
         isModal,
         handle,
+        useSafeAreaInsets,
     });
     return (_jsx(StyledBottomSheetView, { style: [styles.contentContainer, style], ...props, children: children }));
 };
@@ -21,7 +22,7 @@ const styles = StyleSheet.create((theme, rt) => ({
         variants: {
             isModal: {
                 true: {
-                    paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
+                    paddingBottom: theme.components.bottomSheet.padding,
                 },
             },
             handle: {
@@ -29,7 +30,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,
+                },
+            },
+        ],
     },
 }));
 BottomSheetView.displayName = 'BottomSheetView';

package/build/components/BottomSheet/index.d.ts

@@ -1,7 +1,9 @@
-export { BottomSheetFlashList, BottomSheetFooter, BottomSheetModalProvider, BottomSheetSectionList, BottomSheetVirtualizedList, useBottomSheet, useBottomSheetModal, type BottomSheetBackdropProps, type BottomSheetBackgroundProps, type BottomSheetHandleProps, type BottomSheetModalProps, } from '@gorhom/bottom-sheet';
+export { BottomSheetFlashList, BottomSheetFooter, BottomSheetSectionList, BottomSheetVirtualizedList, useBottomSheet, useBottomSheetModal, type BottomSheetBackdropProps, type BottomSheetBackgroundProps, type BottomSheetHandleProps, type BottomSheetModalProps, } from '@gorhom/bottom-sheet';
 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/build/components/BottomSheet/index.js

@@ -1,6 +1,7 @@
-export { BottomSheetFlashList, BottomSheetFooter, BottomSheetModalProvider, BottomSheetSectionList, BottomSheetVirtualizedList, useBottomSheet, useBottomSheetModal, } from '@gorhom/bottom-sheet';
+export { BottomSheetFlashList, BottomSheetFooter, BottomSheetSectionList, BottomSheetVirtualizedList, useBottomSheet, useBottomSheetModal, } from '@gorhom/bottom-sheet';
 export { default as BottomSheet } from './BottomSheet';
 export { default as BottomSheetFlatList } from './BottomSheetFlatList';
 export { default as BottomSheetModal } from './BottomSheetModal';
+export { default as BottomSheetModalProvider } from './BottomSheetModalProvider';
 export { default as BottomSheetScrollView } from './BottomSheetScrollView';
 export { default as BottomSheetView } from './BottomSheetView';

package/build/components/Combobox/Combobox.js

@@ -7,6 +7,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';
@@ -23,6 +24,7 @@ const Combobox = ({ options = [], value, onValueChange, inputValue, onInputValue
     const isDisabled = formFieldContext?.disabled ?? disabled;
     const isReadonly = formFieldContext?.readonly ?? readonly;
     const { color } = useTheme();
+    const { useSafeAreaInsets } = useBottomSheetContext();
     const bottomSheetModalRef = useRef(null);
     const searchInputRef = useRef(null);
     const focusTimeoutRef = useRef(null);
@@ -162,7 +164,7 @@ const Combobox = ({ options = [], value, onValueChange, inputValue, onInputValue
                         selectedValue: value,
                         selectOption,
                         setSearch,
-                    }, children: [_jsxs(SafeAreaView, { edges: ['top'], children: [menuHeading && (_jsx(View, { style: styles.headingContainer, children: _jsx(DetailText, { size: "lg", children: menuHeading }) })), _jsx(View, { style: styles.searchContainer, children: _jsx(Input, { ref: searchInputRef, placeholder: searchPlaceholder, value: search, inBottomSheet: true, onChangeText: setSearch, type: "search", clearable: true, onClear: handleClear, loading: loading }) })] }), customContent || (_jsx(BottomSheetFlatList, { data: filteredOptions, keyExtractor: (option) => option.value, renderItem: renderSelectOption, ListEmptyComponent: renderEmptyComponent, ...listProps }))] }) })] }));
+                    }, children: [_jsxs(SafeAreaView, { edges: useSafeAreaInsets ? ['top'] : [], children: [menuHeading && (_jsx(View, { style: styles.headingContainer, children: _jsx(DetailText, { size: "lg", children: menuHeading }) })), _jsx(View, { style: styles.searchContainer, children: _jsx(Input, { ref: searchInputRef, placeholder: searchPlaceholder, value: search, inBottomSheet: true, onChangeText: setSearch, type: "search", clearable: true, onClear: handleClear, loading: loading }) })] }), customContent || (_jsx(BottomSheetFlatList, { data: filteredOptions, keyExtractor: (option) => option.value, renderItem: renderSelectOption, ListEmptyComponent: renderEmptyComponent, ...listProps }))] }) })] }));
 };
 const styles = StyleSheet.create(theme => ({
     container: {

package/build/components/Modal/Modal.js

@@ -6,6 +6,7 @@ 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';
@@ -14,6 +15,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
     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,
@@ -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/NavModal/NavModal.js

@@ -152,7 +152,9 @@ const styles = StyleSheet.create((theme, rt) => ({
         flex: 1,
         variants: {
             background: {
-                primary: {},
+                primary: {
+                    backgroundColor: theme.color.surface.neutral.strong,
+                },
                 brand: {
                     backgroundColor: theme.color.background.brand,
                 },
@@ -161,11 +163,9 @@ const styles = StyleSheet.create((theme, rt) => ({
                 modal: {
                     borderTopLeftRadius: theme.components.modal.borderRadius,
                     borderTopRightRadius: theme.components.modal.borderRadius,
-                    backgroundColor: theme.color.surface.neutral.strong,
                     padding: theme.components.bottomSheet.padding,
                 },
                 fullScreen: {
-                    backgroundColor: theme.color.surface.neutral.strong,
                     padding: theme.components.bottomSheet.padding,
                 },
             },

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.29.0",
+  "version": "0.29.2",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",

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/Modal/Modal.docs.mdx

@@ -476,6 +476,20 @@ const App = () => {
 };
 ```
 
+If your app already handles safe-area padding around modal content, you can disable Hearth's bottom-sheet safe-area spacing:
+
+```tsx
+import { BottomSheetModalProvider } from '@utilitywarehouse/hearth-react-native';
+
+const App = () => {
+  return (
+    <BottomSheetModalProvider useSafeAreaInsets={false}>
+      {/* Your app content */}
+    </BottomSheetModalProvider>
+  );
+};
+```
+
 ### Ref Usage
 
 The Modal component forwards its ref to the underlying `BottomSheetModal`, giving you access to methods like:

package/src/components/Modal/Modal.tsx

@@ -11,6 +11,7 @@ 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';
@@ -45,6 +46,7 @@ const Modal = ({
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
   const viewRef = useRef<View>(null);
   const scrollViewRef = useRef<BottomSheetScrollViewMethods>(null);
+  const { useSafeAreaInsets } = useBottomSheetContext();
 
   useImperativeHandle(ref, () => ({
     ...(bottomSheetModalRef.current as BottomSheetModal),
@@ -105,6 +107,7 @@ const Modal = ({
     noButtons,
     stickyFooter,
     showHandle: props.showHandle,
+    useSafeAreaInsets,
   });
 
   const footer = useMemo(
@@ -256,13 +259,44 @@ 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 -
@@ -270,24 +304,27 @@ const styles = StyleSheet.create((theme, rt) => ({
             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',
@@ -333,7 +370,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,
+        },
+      },
+    },
   },
 }));
 

package/src/components/NavModal/NavModal.tsx

@@ -336,7 +336,9 @@ const styles = StyleSheet.create((theme, rt) => ({
     flex: 1,
     variants: {
       background: {
-        primary: {},
+        primary: {
+          backgroundColor: theme.color.surface.neutral.strong,
+        },
         brand: {
           backgroundColor: theme.color.background.brand,
         },
@@ -345,11 +347,9 @@ const styles = StyleSheet.create((theme, rt) => ({
         modal: {
           borderTopLeftRadius: theme.components.modal.borderRadius,
           borderTopRightRadius: theme.components.modal.borderRadius,
-          backgroundColor: theme.color.surface.neutral.strong,
           padding: theme.components.bottomSheet.padding,
         },
         fullScreen: {
-          backgroundColor: theme.color.surface.neutral.strong,
           padding: theme.components.bottomSheet.padding,
         },
       },

package/src/components/Select/Select.tsx

@@ -10,6 +10,7 @@ import {
   BottomSheetScrollView,
   BottomSheetView,
 } from '../BottomSheet';
+import { useBottomSheetContext } from '../BottomSheet/BottomSheet.context';
 import { DetailText } from '../DetailText';
 import { FormField, useFormFieldContext } from '../FormField';
 import { Icon } from '../Icon';
@@ -49,6 +50,7 @@ const Select = ({
   const isRequired = formFieldContext?.required ?? required;
   const isDisabled = formFieldContext?.disabled ?? disabled;
   const isReadonly = formFieldContext?.readonly ?? readonly;
+  const { useSafeAreaInsets } = useBottomSheetContext();
 
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
   const [search, setSearch] = useState('');
@@ -183,7 +185,7 @@ const Select = ({
             close: closeBottomSheet,
           }}
         >
-          <SafeAreaView edges={['top']} style={{ flex: 1 }}>
+          <SafeAreaView edges={useSafeAreaInsets ? ['top'] : []} style={{ flex: 1 }}>
             {menuHeading && (
               <View style={styles.headingContainer}>
                 <DetailText size="lg">{menuHeading}</DetailText>