@utilitywarehouse/hearth-react-native 0.15.2 → 0.15.3

package/.turbo/turbo-build.log

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

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.15.2 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.15.3 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint --max-warnings 0
 
 Rule | Time (ms) | Relative

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.15.3
+
+### Patch Changes
+
+- [#801](https://github.com/utilitywarehouse/hearth/pull/801) [`6d11339`](https://github.com/utilitywarehouse/hearth/commit/6d1133997b28efa104c282522a5708f1d4d8614c) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: `Modal` without handle heading padding issue
+
+- [#796](https://github.com/utilitywarehouse/hearth/pull/796) [`f0ccadb`](https://github.com/utilitywarehouse/hearth/commit/f0ccadbb48fb7a7a70520d7521746a63421e01cc) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: `CheckboxTile` text wrapping issue
+
 ## 0.15.2
 
 ### Patch Changes

package/build/components/BottomSheet/BottomSheetScrollView.js

@@ -14,6 +14,8 @@ const BottomSheetScrollView = ({ children, style, contentContainerStyle, isModal
 const styles = StyleSheet.create((theme, rt) => ({
     container: {
         backgroundColor: theme.color.surface.neutral.strong,
+        borderTopLeftRadius: theme.components.bottomSheet.borderTopLeftRadius,
+        borderTopRightRadius: theme.components.bottomSheet.borderTopRightRadius,
     },
     contentContainer: {
         paddingHorizontal: theme.components.bottomSheet.padding,

package/build/components/Checkbox/CheckboxTileRoot.js

@@ -36,6 +36,9 @@ const styles = StyleSheet.create(theme => ({
                 column: {
                     flex: 1,
                 },
+                default: {
+                    flex: 1,
+                },
             },
         },
     },

package/build/components/Modal/Modal.js

@@ -104,6 +104,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         bothButtons: !!(onPressPrimaryButton && onPressSecondaryButton),
         noButtons,
         stickyFooter,
+        showHandle: props.showHandle,
     });
     const footer = (_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] }));
     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: "Loading..." })] })) : (_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] })) }));
@@ -159,6 +160,14 @@ const styles = StyleSheet.create((theme, rt) => ({
     header: {
         flexDirection: 'row',
         gap: theme.components.modal.gap,
+        variants: {
+            showHandle: {
+                true: {},
+                false: {
+                    marginTop: -6,
+                },
+            },
+        },
     },
     headerTextContent: {
         flex: 1,

package/docs/components/AllComponents.web.tsx

@@ -17,7 +17,7 @@ import {
 import SpotBillingDark from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-dark.svg';
 // @ts-ignore
 import SpotBillingLight from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-light.svg';
-import { Pressable, ScrollView, View, ViewProps } from 'react-native';
+import { Image, Pressable, ScrollView, View, ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import {
   Accordion,
@@ -488,11 +488,13 @@ const AllComponents: React.FC = () => {
                 heading="Featured Content"
                 headingColor="energy"
                 imageContainerHeight={40}
-                image={{
-                  source: {
-                    uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=800&q=80',
-                  },
-                }}
+                image={
+                  <Image
+                    source={{
+                      uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=800&q=80',
+                    }}
+                  />
+                }
                 description="Banner description goes here."
               />
             </Center>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.15.2",
+  "version": "0.15.3",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -55,9 +55,9 @@
     "vite": "^7.1.3",
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
-    "@utilitywarehouse/hearth-fonts": "^0.0.4",
     "@utilitywarehouse/hearth-react-icons": "^0.7.4",
     "@utilitywarehouse/hearth-react-native-icons": "^0.7.4",
+    "@utilitywarehouse/hearth-fonts": "^0.0.4",
     "@utilitywarehouse/hearth-svg-assets": "^0.3.0",
     "@utilitywarehouse/hearth-tokens": "^0.2.2"
   },

package/src/components/BottomSheet/BottomSheetScrollView.tsx

@@ -34,6 +34,8 @@ const BottomSheetScrollView = ({
 const styles = StyleSheet.create((theme, rt) => ({
   container: {
     backgroundColor: theme.color.surface.neutral.strong,
+    borderTopLeftRadius: theme.components.bottomSheet.borderTopLeftRadius,
+    borderTopRightRadius: theme.components.bottomSheet.borderTopRightRadius,
   },
   contentContainer: {
     paddingHorizontal: theme.components.bottomSheet.padding,

package/src/components/Checkbox/CheckboxTileRoot.tsx

@@ -37,6 +37,9 @@ const styles = StyleSheet.create(theme => ({
         column: {
           flex: 1,
         },
+        default: {
+          flex: 1,
+        },
       },
     },
   },

package/src/components/Modal/Modal.tsx

@@ -168,6 +168,7 @@ const Modal = ({
     bothButtons: !!(onPressPrimaryButton && onPressSecondaryButton),
     noButtons,
     stickyFooter,
+    showHandle: props.showHandle,
   });
 
   const footer = (
@@ -349,6 +350,14 @@ const styles = StyleSheet.create((theme, rt) => ({
   header: {
     flexDirection: 'row',
     gap: theme.components.modal.gap,
+    variants: {
+      showHandle: {
+        true: {},
+        false: {
+          marginTop: -6,
+        },
+      },
+    },
   },
   headerTextContent: {
     flex: 1,