@utilitywarehouse/hearth-react-native 0.28.5 → 0.29.0

package/build/components/NavModal/NavModal.js

@@ -0,0 +1,190 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { useCallback, useEffect, useImperativeHandle, useMemo } from 'react';
+import { Platform, ScrollView, View } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withTiming, } from 'react-native-reanimated';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
+import { hexWithOpacity } from '../../utils';
+import { BodyText } from '../BodyText';
+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 theme = useTheme();
+    const backgroundOpacity = useSharedValue(0);
+    const pretendContentTranslateY = useSharedValue(20);
+    const isBrandBackground = background === 'brand';
+    const isFullScreenPresentation = presentation === 'fullScreenModal';
+    const usesSheetPresentation = !isFullScreenPresentation;
+    const triggerCloseAnimation = useCallback(() => {
+        if (Platform.OS === 'android') {
+            pretendContentTranslateY.value = withTiming(20, {
+                duration: 50,
+                easing: Easing.in(Easing.quad),
+            });
+            backgroundOpacity.value = withTiming(0, {
+                duration: 100,
+                easing: Easing.in(Easing.quad),
+            });
+        }
+    }, [backgroundOpacity, pretendContentTranslateY]);
+    useImperativeHandle(ref, () => ({
+        triggerCloseAnimation,
+    }));
+    useEffect(() => {
+        if (Platform.OS === 'android') {
+            backgroundOpacity.value = withDelay(300, withTiming(1, {
+                duration: 200,
+                easing: Easing.out(Easing.quad),
+            }));
+            pretendContentTranslateY.value = withDelay(500, withTiming(0, {
+                duration: 300,
+                easing: Easing.out(Easing.quad),
+            }));
+        }
+    }, [backgroundOpacity, pretendContentTranslateY]);
+    const animatedBackgroundStyle = useAnimatedStyle(() => ({
+        backgroundColor: hexWithOpacity(theme.components.overlay.backgroundColor, backgroundOpacity.value * (theme.components.overlay.opacity / 100)),
+    }));
+    const animatedPretendContentStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: pretendContentTranslateY.value }],
+    }));
+    const handleCloseButtonPress = useCallback(() => {
+        onPressCloseButton?.();
+    }, [onPressCloseButton]);
+    const handlePrimaryButtonPress = useCallback(() => {
+        onPressPrimaryButton?.();
+    }, [onPressPrimaryButton]);
+    const handleSecondaryButtonPress = useCallback(() => {
+        onPressSecondaryButton?.();
+    }, [onPressSecondaryButton]);
+    const noButtons = !onPressPrimaryButton && !onPressSecondaryButton;
+    styles.useVariants({
+        loading,
+        background: isBrandBackground ? 'brand' : 'primary',
+        presentation: isFullScreenPresentation ? 'fullScreen' : 'modal',
+    });
+    const footer = useMemo(() => (_jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, inverted: isBrandBackground, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, inverted: isBrandBackground, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] })), [
+        handlePrimaryButtonPress,
+        handleSecondaryButtonPress,
+        isBrandBackground,
+        onPressPrimaryButton,
+        onPressSecondaryButton,
+        primaryButtonProps,
+        primaryButtonText,
+        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: {
+                        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: {
+                        flex: stickyFooter ? 1 : 0,
+                    }, children: [children, !stickyFooter && !noButtons ? (_jsx(View, { style: styles.inNavModalFooterContainer, children: footer })) : null] })), stickyFooter && !noButtons ? footer : null] })) }));
+    const { style: safeAreaViewStyle, ...restSafeAreaViewProps } = safeAreaViewProps ?? {};
+    return (_jsxs(SafeAreaView, { style: [
+            {
+                flex: 1,
+                backgroundColor: theme.color.background[isBrandBackground ? 'brand' : 'secondary'],
+            },
+            safeAreaViewStyle,
+        ], ...restSafeAreaViewProps, children: [Platform.OS === 'android' && usesSheetPresentation ? (_jsx(Animated.View, { style: [styles.androidContainer, animatedBackgroundStyle], children: _jsx(Animated.View, { style: [styles.pretendContent, animatedPretendContentStyle] }) })) : null, _jsx(Animated.View, { style: [
+                    styles.inNavModalContainer,
+                    Platform.OS === 'android' && usesSheetPresentation && animatedBackgroundStyle,
+                ], ...props, children: _jsx(View, { style: styles.inNavModalContent, children: content }) })] }));
+};
+const styles = StyleSheet.create((theme, rt) => ({
+    container: {
+        flex: 1,
+        gap: theme.components.modal.gap,
+        variants: {
+            loading: {
+                true: {
+                    paddingTop: 0,
+                },
+            },
+        },
+    },
+    header: {
+        flexDirection: 'row',
+        gap: theme.components.modal.gap,
+    },
+    headerTextContent: {
+        flex: 1,
+        gap: theme.components.modal.content.gap,
+    },
+    imageContainer: {
+        alignItems: 'center',
+        flex: 1,
+    },
+    textContent: {
+        gap: theme.components.modal.content.gap,
+    },
+    loadingContainer: {
+        borderTopLeftRadius: theme.components.modal.borderRadius,
+        borderTopRightRadius: theme.components.modal.borderRadius,
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: 140,
+        gap: theme.components.modal.content.gap,
+    },
+    footer: {
+        gap: theme.components.modal.action.gap,
+    },
+    inNavModalContainer: {
+        flex: 1,
+        variants: {
+            presentation: {
+                modal: {
+                    ...(Platform.OS === 'ios'
+                        ? { backgroundColor: theme.components.overlay.backgroundColor }
+                        : {}),
+                },
+                fullScreen: {},
+            },
+        },
+    },
+    inNavModalContent: {
+        flex: 1,
+        variants: {
+            background: {
+                primary: {},
+                brand: {
+                    backgroundColor: theme.color.background.brand,
+                },
+            },
+            presentation: {
+                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,
+                },
+            },
+        },
+    },
+    inNavModalFooterContainer: {
+        paddingTop: theme.components.modal.padding,
+    },
+    androidContainer: {
+        height: rt.insets.top + 18,
+        paddingLeft: theme.components.modal.padding,
+        paddingRight: theme.components.modal.padding,
+        justifyContent: 'flex-end',
+    },
+    pretendContent: {
+        borderTopLeftRadius: theme.components.modal.borderRadius,
+        borderTopRightRadius: theme.components.modal.borderRadius,
+        height: 12,
+        backgroundColor: theme.components.parts.modalStack.backgroundColorCardTop,
+    },
+}));
+export default NavModal;

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

@@ -0,0 +1,15 @@
+import { Ref } from 'react';
+import { SafeAreaViewProps } from 'react-native-safe-area-context';
+import { ModalCommonProps } from '../Modal/Modal.shared.types';
+export interface NavModalRef {
+    triggerCloseAnimation?: () => void;
+}
+interface NavModalProps extends ModalCommonProps {
+    ref?: Ref<NavModalRef>;
+    background?: 'default' | 'brand';
+    scrollable?: boolean;
+    presentation?: 'fullScreenModal' | 'modal' | 'transparentModal' | 'containedModal' | 'containedTransparentModal';
+    safeAreaViewProps?: Omit<SafeAreaViewProps, 'children'>;
+    scrollViewProps?: Omit<SafeAreaViewProps, 'children'>;
+}
+export default NavModalProps;

package/build/components/NavModal/NavModal.props.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { default as NavModal } from './NavModal';
+export type { default as NavModalProps, NavModalRef } from './NavModal.props';

package/build/components/NavModal/index.js

@@ -0,0 +1 @@
+export { default as NavModal } from './NavModal';

package/build/components/Select/Select.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ExpandSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import React, { useCallback, useRef, useState } from 'react';
 import { Pressable, View } from 'react-native';
+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';
@@ -11,7 +12,6 @@ import { Icon } from '../Icon';
 import { Input } from '../Input';
 import { SelectContext } from './Select.context';
 import SelectOption from './SelectOption';
-import { SafeAreaView } from '../SafeAreaView';
 const Select = ({ options = [], value, onValueChange, label, labelVariant = 'body', placeholder = 'Select an option', disabled = false, leadingIcon: LeadingIcon, validationStatus = 'initial', helperText, helperIcon, invalidText, validText, required = true, children, bottomSheetProps, menuHeading, readonly = false, emptyText = 'No options available', listProps, searchable = false, searchPlaceholder = 'Search', testID, ...rest }) => {
     const formFieldContext = useFormFieldContext();
     const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;

package/build/components/index.d.ts

@@ -40,13 +40,13 @@ export * from './Link';
 export * from './List';
 export * from './Menu';
 export * from './Modal';
+export * from './NavModal';
 export * from './Pagination';
 export * from './PillGroup';
 export * from './ProgressBar';
 export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
-export * from './SafeAreaView';
 export * from './SectionHeader';
 export * from './SegmentedControl';
 export * from './Select';
@@ -65,4 +65,5 @@ export * from './ToggleButtonCard';
 export * from './VerificationInput';
 export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, View } from 'react-native';
 export { Pressable } from 'react-native';
+export { SafeAreaView } from 'react-native-safe-area-context';
 export { createIcon } from '@gluestack-ui/icon';

package/build/components/index.js

@@ -41,13 +41,13 @@ export * from './Link';
 export * from './List';
 export * from './Menu';
 export * from './Modal';
+export * from './NavModal';
 export * from './Pagination';
 export * from './PillGroup';
 export * from './ProgressBar';
 export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
-export * from './SafeAreaView';
 export * from './SectionHeader';
 export * from './SegmentedControl';
 export * from './Select';
@@ -66,4 +66,5 @@ export * from './ToggleButtonCard';
 export * from './VerificationInput';
 export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, View } from 'react-native';
 export { Pressable } from 'react-native';
+export { SafeAreaView } from 'react-native-safe-area-context';
 export { createIcon } from '@gluestack-ui/icon';

package/docs/changelog.mdx

@@ -9,6 +9,40 @@ 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.28.6
+
+### Patch Changes
+
+- [#1050](https://github.com/utilitywarehouse/hearth/pull/1050) [`13d2cca`](https://github.com/utilitywarehouse/hearth/commit/13d2ccab3abda60a35202847e3895017496c4dcf) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Expand react peer dependency to allow any React 19.x version for compatibility with all React 19 releases.
+
+## 0.28.5
+
+### Patch Changes
+
+- [#1045](https://github.com/utilitywarehouse/hearth/pull/1045) [`3778061`](https://github.com/utilitywarehouse/hearth/commit/37780613890221368edb74c0ce83b8bf3d03e5b3) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: The `BannerIllustration` now stays centered in vertical banners and no longer inherits image border styling or horizontal stretching.
+
+## 0.28.4
+
+### Patch Changes
+
+- [#1034](https://github.com/utilitywarehouse/hearth/pull/1034) [`76598eb`](https://github.com/utilitywarehouse/hearth/commit/76598eb0374c79f9e6c2c23c421f2b9602fbb113) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: The `CheckboxTile` spacing now uses the tile gap token instead of the base checkbox gap token.
+
+- [#1034](https://github.com/utilitywarehouse/hearth/pull/1034) [`76598eb`](https://github.com/utilitywarehouse/hearth/commit/76598eb0374c79f9e6c2c23c421f2b9602fbb113) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: The `Combobox` trigger outline so it is only shown when the control is focused.
+
+- [#1034](https://github.com/utilitywarehouse/hearth/pull/1034) [`76598eb`](https://github.com/utilitywarehouse/hearth/commit/76598eb0374c79f9e6c2c23c421f2b9602fbb113) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: The `RadioTile` spacing now uses the tile gap token instead of the base radio gap token.
+
+- [#1036](https://github.com/utilitywarehouse/hearth/pull/1036) [`b7636e6`](https://github.com/utilitywarehouse/hearth/commit/b7636e6185879264e8d929c3be44fd0d1a354c22) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: The `CurrencyInput` font size.
+
+- [#1039](https://github.com/utilitywarehouse/hearth/pull/1039) [`3a895bc`](https://github.com/utilitywarehouse/hearth/commit/3a895bcb8dcceb7d55a454ec63de9256d2d8322f) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Align all `Radio` and `Checkbox` default and tile gap sizes.
+
+- [#1035](https://github.com/utilitywarehouse/hearth/pull/1035) [`01633a7`](https://github.com/utilitywarehouse/hearth/commit/01633a73153563d9b2286f42b764ad771e48ff82) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: The `Pill` component no longer applies extra vertical padding and fixes vertical alignment.
+
+## 0.28.3
+
+### Patch Changes
+
+- [#1028](https://github.com/utilitywarehouse/hearth/pull/1028) [`dccffe1`](https://github.com/utilitywarehouse/hearth/commit/dccffe16342b22e58078dfc0aadfe9a482bfcc74) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: The `Combobox` trigger outline so it is only shown when the control is focused.
+
 ## 0.28.2
 
 ### Patch Changes