@utilitywarehouse/hearth-react-native 0.15.1 → 0.15.3

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.15.1 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.1 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,19 @@
 # @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
+
+- [#771](https://github.com/utilitywarehouse/hearth/pull/771) [`5320be5`](https://github.com/utilitywarehouse/hearth/commit/5320be544992c137e201be7750d30ea098a7d399) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Adds missing `ref` prop to the `CurrencyInput` component
+
 ## 0.15.1
 
 ### 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/CurrencyInput/CurrencyInput.d.ts

@@ -1,6 +1,6 @@
 import type CurrencyInputProps from './CurrencyInput.props';
 declare const CurrencyInput: {
-    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, required, disableGroupSeparator, value, onChangeText, ...rest }: CurrencyInputProps): import("react/jsx-runtime").JSX.Element;
+    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, required, disableGroupSeparator, value, onChangeText, ref, ...rest }: CurrencyInputProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default CurrencyInput;

package/build/components/CurrencyInput/CurrencyInput.js

@@ -5,7 +5,7 @@ import { formatThousands } from '../../utils';
 import { DetailText } from '../DetailText';
 import { useFormFieldContext } from '../FormField';
 import { Input, InputField, InputSlot } from '../Input';
-const CurrencyInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder, inBottomSheet = false, required, disableGroupSeparator = false, value, onChangeText, ...rest }) => {
+const CurrencyInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder, inBottomSheet = false, required, disableGroupSeparator = false, value, onChangeText, ref, ...rest }) => {
     const formFieldContext = useFormFieldContext();
     const { disabled: formFieldDisabled } = formFieldContext;
     const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
@@ -21,7 +21,7 @@ const CurrencyInput = ({ validationStatus = 'initial', disabled, focused, readon
         }
     };
     const displayValue = !disableGroupSeparator && typeof value === 'string' ? formatThousands(value) : value;
-    return (_jsxs(Input, { validationStatus: validationStatusFromContext, disabled: formFieldDisabled ?? disabled, readonly: readonly, focused: focused, style: styles.wrap, children: [_jsx(InputSlot, { children: _jsx(DetailText, { size: "4xl", style: styles.text, accessible: false, children: "\u00A3" }) }), _jsx(InputField, { inputMode: "decimal", inBottomSheet: inBottomSheet, accessibilityHint: 'Enter the amount in pounds and pence, for example "10.99"', ...rest, placeholder: getPlaceholder, keyboardType: "decimal-pad", style: styles.input, value: displayValue, onChangeText: handleChangeText })] }));
+    return (_jsxs(Input, { validationStatus: validationStatusFromContext, disabled: formFieldDisabled ?? disabled, readonly: readonly, focused: focused, style: styles.wrap, children: [_jsx(InputSlot, { children: _jsx(DetailText, { size: "4xl", style: styles.text, accessible: false, children: "\u00A3" }) }), _jsx(InputField, { ref: ref, inputMode: "decimal", inBottomSheet: inBottomSheet, accessibilityHint: 'Enter the amount in pounds and pence, for example "10.99"', ...rest, placeholder: getPlaceholder, keyboardType: "decimal-pad", style: styles.input, value: displayValue, onChangeText: handleChangeText })] }));
 };
 CurrencyInput.displayName = 'CurrencyInput';
 const styles = StyleSheet.create(theme => ({

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

@@ -1,5 +1,7 @@
-import type { TextInputProps, ViewProps } from 'react-native';
+import type { Ref } from 'react';
+import type { TextInput, TextInputProps, ViewProps } from 'react-native';
 export interface CurrencyInputBaseProps {
+    ref?: Ref<TextInput>;
     disabled?: boolean;
     validationStatus?: 'initial' | 'valid' | 'invalid';
     readonly?: boolean;

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.1",
+  "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/CurrencyInput/CurrencyInput.props.ts

@@ -1,6 +1,8 @@
-import type { TextInputProps, ViewProps } from 'react-native';
+import type { Ref } from 'react';
+import type { TextInput, TextInputProps, ViewProps } from 'react-native';
 
 export interface CurrencyInputBaseProps {
+  ref?: Ref<TextInput>;
   disabled?: boolean;
   validationStatus?: 'initial' | 'valid' | 'invalid';
   readonly?: boolean;

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -17,6 +17,7 @@ const CurrencyInput = ({
   disableGroupSeparator = false,
   value,
   onChangeText,
+  ref,
   ...rest
 }: CurrencyInputProps) => {
   const formFieldContext = useFormFieldContext();
@@ -52,6 +53,7 @@ const CurrencyInput = ({
         </DetailText>
       </InputSlot>
       <InputField
+        ref={ref as any}
         inputMode="decimal"
         inBottomSheet={inBottomSheet}
         accessibilityHint='Enter the amount in pounds and pence, for example "10.99"'
@@ -67,7 +69,6 @@ const CurrencyInput = ({
 };
 
 CurrencyInput.displayName = 'CurrencyInput';
-
 const styles = StyleSheet.create(theme => ({
   wrap: {
     height: theme.components.input.currency.height,

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,