@utilitywarehouse/hearth-react-native 0.32.0 → 0.32.1

package/.turbo/turbo-build.log

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

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.32.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.32.1 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint .
 
 
@@ -27,9 +27,6 @@
 /home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerYears.tsx
   52:6  warning  React Hook useCallback has a missing dependency: 'containerHeight'. Either include it or remove the dependency array. Outer scope values like 'styles' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
 
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Input/Input.tsx
-  78:8  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
-
 /home/runner/work/hearth/hearth/packages/react-native/src/components/PillGroup/PillGroup.tsx
   17:9  warning  The 'normalizedValue' conditional could make the dependencies of useMemo Hook (at line 33) change on every render. Move it inside the useMemo callback. Alternatively, wrap the initialization of 'normalizedValue' in its own useMemo() Hook  react-hooks/exhaustive-deps
 
@@ -46,17 +43,17 @@
    14:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
   106:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
 
-✖ 21 problems (0 errors, 21 warnings)
+✖ 20 problems (0 errors, 20 warnings)
 
 Rule                                      | Time (ms) | Relative
 :-----------------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars         |  1597.986 |    54.8%
-react-hooks/exhaustive-deps               |   222.159 |     7.6%
-no-global-assign                          |   113.864 |     3.9%
-react-hooks/rules-of-hooks                |    86.855 |     3.0%
-no-misleading-character-class             |    82.947 |     2.8%
-no-unexpected-multiline                   |    65.031 |     2.2%
-@typescript-eslint/ban-ts-comment         |    59.965 |     2.1%
-no-regex-spaces                           |    42.086 |     1.4%
-no-useless-escape                         |    37.102 |     1.3%
-@typescript-eslint/triple-slash-reference |    36.097 |     1.2%
+@typescript-eslint/no-unused-vars         |  1452.998 |    57.8%
+react-hooks/exhaustive-deps               |   126.724 |     5.0%
+no-global-assign                          |    93.240 |     3.7%
+react-hooks/rules-of-hooks                |    91.457 |     3.6%
+@typescript-eslint/ban-ts-comment         |    64.809 |     2.6%
+no-unexpected-multiline                   |    56.861 |     2.3%
+@typescript-eslint/triple-slash-reference |    35.707 |     1.4%
+no-misleading-character-class             |    35.239 |     1.4%
+no-regex-spaces                           |    34.132 |     1.4%
+no-useless-escape                         |    32.069 |     1.3%

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.32.1
+
+### Patch Changes
+
+- [#1144](https://github.com/utilitywarehouse/hearth/pull/1144) [`85459f2`](https://github.com/utilitywarehouse/hearth/commit/85459f2f4d7dcd8a99685a11dcda070530cee8dc) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Add the missing `highlight` color scheme support across the `Banner` and `Card` components.
+
 ## 0.32.0
 
 ### Minor Changes
@@ -9,6 +15,7 @@
 `Roundel` is a compact status indicator with `success`, `pending`, and `error` variants, intended for inline state cues.
 
 **Components affected**:
+
 - `Roundel`
 
 **Developer changes**:
@@ -18,7 +25,7 @@ Import and use `Roundel` from `@utilitywarehouse/hearth-react-native`:
 ```tsx
 import { Roundel } from '@utilitywarehouse/hearth-react-native';
 
-<Roundel variant="success" />
+<Roundel variant="success" />;
 ```
 
 - [#1132](https://github.com/utilitywarehouse/hearth/pull/1132) [`8824186`](https://github.com/utilitywarehouse/hearth/commit/882418633ee8c3a11e204329d07363dc411996dc) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add the `Rating` component

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

@@ -2,7 +2,7 @@ import { PressableProps } from 'react-native';
 import { DisplayProps, FlexLayoutProps, GapProps, MarginProps, SpacingValues } from '../../types';
 interface CardProps extends PressableProps, MarginProps, GapProps, FlexLayoutProps, Omit<DisplayProps, 'direction'> {
     variant?: 'emphasis' | 'subtle';
-    colorScheme?: 'neutralStrong' | 'neutralSubtle' | 'brand' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'pig';
+    colorScheme?: 'neutralStrong' | 'neutralSubtle' | 'brand' | 'energy' | 'broadband' | 'highlight' | 'mobile' | 'insurance' | 'cashback' | 'pig';
     shadowColor?: 'functional' | 'brand' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'pig';
     noPadding?: boolean;
     disabled?: boolean;

package/build/components/Card/CardRoot.js

@@ -111,6 +111,9 @@ const styles = StyleSheet.create(theme => ({
                 pig: {
                     borderWidth: theme.components.card.brand.borderWidth,
                 },
+                highlight: {
+                    borderWidth: theme.components.card.brand.borderWidth,
+                },
             },
             shadowColor: {
                 functional: {
@@ -278,6 +281,22 @@ const styles = StyleSheet.create(theme => ({
                     borderColor: theme.color.border.strong,
                 },
             },
+            {
+                variant: 'subtle',
+                colorScheme: 'highlight',
+                styles: {
+                    backgroundColor: theme.color.surface.highlight.subtle,
+                    borderColor: theme.color.border.strong,
+                },
+            },
+            {
+                variant: 'emphasis',
+                colorScheme: 'highlight',
+                styles: {
+                    backgroundColor: theme.color.surface.highlight.default,
+                    borderColor: theme.color.border.strong,
+                },
+            },
         ],
     },
 }));

package/build/components/Input/Input.js

@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { createInput } from '@gluestack-ui/input';
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { CloseSmallIcon, EyeOffSmallIcon, EyeSmallIcon, SearchMediumIcon, } from '@utilitywarehouse/hearth-react-native-icons';
-import { useTheme } from '../../hooks';
+import { useFormFieldAccessibility, useTheme } from '../../hooks';
 import { BodyText } from '../BodyText';
 import { FormField, useFormFieldContext } from '../FormField';
 import { Spinner } from '../Spinner';
@@ -34,7 +34,7 @@ const Input = forwardRef(({ validationStatus = 'initial', children, disabled, fo
         if (formFieldContext?.setShouldHandleAccessibility) {
             formFieldContext.setShouldHandleAccessibility(true);
         }
-    }, []);
+    }, [formFieldContext]);
     const [fieldType, setFieldType] = useState(type === 'password' ? 'password' : 'text');
     const { color } = useTheme();
     const inputRef = useRef(null);
@@ -42,6 +42,16 @@ const Input = forwardRef(({ validationStatus = 'initial', children, disabled, fo
     useImperativeHandle(ref, () => inputRef.current, []);
     const shouldShowPasswordToggle = type === 'password' && showPasswordToggle;
     const shouldShowClear = clearable && !!props?.value;
+    const { accessibilityHint, accessibilityLabel } = useFormFieldAccessibility({
+        label: inputLabel,
+        helperText: inputHelperText,
+        validText: inputValidText,
+        invalidText: inputInvalidText,
+        required: inputRequired,
+        validationStatus: inputValidationStatus,
+        fallbackLabel: props.accessibilityLabel,
+        fallbackHint: props.accessibilityHint,
+    });
     const toggleFieldType = () => {
         setFieldType(fieldType === 'password' ? 'text' : 'password');
     };
@@ -57,39 +67,11 @@ const Input = forwardRef(({ validationStatus = 'initial', children, disabled, fo
         }
         return undefined;
     })();
-    const getAccessibilityLabel = () => {
-        let accessibilityLabel = '';
-        if (inputLabel) {
-            accessibilityLabel = accessibilityLabel + inputLabel;
-        }
-        if (inputRequired) {
-            accessibilityLabel = accessibilityLabel + ', required';
-        }
-        return accessibilityLabel || props.accessibilityLabel;
-    };
-    const getAccessibilityHint = () => {
-        let accessibilityHint = '';
-        if (inputHelperText) {
-            accessibilityHint = accessibilityHint + inputHelperText;
-        }
-        if (inputValidationStatus !== 'initial') {
-            if (accessibilityHint.length > 0) {
-                accessibilityHint = accessibilityHint + ', ';
-            }
-            if (inputValidationStatus === 'invalid' && inputInvalidText) {
-                accessibilityHint = accessibilityHint + inputInvalidText;
-            }
-            if (inputValidationStatus === 'valid' && inputValidText) {
-                accessibilityHint = accessibilityHint + inputValidText;
-            }
-        }
-        return accessibilityHint || props.accessibilityHint;
-    };
     return (_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validText: validText, invalidText: invalidText, required: required, validationStatus: validationStatus, disabled: disabled, readonly: readonly, accessibilityHandledByChildren: true, children: _jsx(InputComponent, { ...(children ? props : {}), validationStatus: inputValidationStatus, isInvalid: inputValidationStatus === 'invalid', isReadOnly: inputReadonly, isDisabled: inputDisabled, isFocused: focused, type: type, isRequired: inputRequired, style: style, children: children ? (_jsx(_Fragment, { children: children })) : (_jsxs(_Fragment, { children: [!!leadingIconComponent && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: leadingIconComponent }) })), !!prefix && (_jsx(InputSlot, { children: typeof prefix === 'string' || typeof prefix === 'number' ? (_jsx(BodyText, { children: prefix })) : (prefix) })), _jsx(InputField
                     // @ts-expect-error - ref forwarding issue
                     , { 
                         // @ts-expect-error - ref forwarding issue
-                        ref: inputRef, type: fieldType, inputMode: getInputMode, inBottomSheet: inBottomSheet, ...props, "aria-label": getAccessibilityLabel(), accessibilityHint: getAccessibilityHint() }), shouldShowClear && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: onClear, icon: CloseSmallIcon }) })), loading && (_jsx(InputSlot, { children: _jsx(Spinner, { size: "xs", color: color.icon.primary }) })), shouldShowPasswordToggle && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: toggleFieldType, icon: fieldType === 'password' ? EyeSmallIcon : EyeOffSmallIcon }) })), !!suffix && (_jsx(InputSlot, { children: typeof suffix === 'string' || typeof suffix === 'number' ? (_jsx(BodyText, { children: suffix })) : (suffix) })), !!trailingIcon && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: trailingIcon }) }))] })) }) }));
+                        ref: inputRef, type: fieldType, inputMode: getInputMode, inBottomSheet: inBottomSheet, ...props, "aria-label": accessibilityLabel, accessibilityHint: accessibilityHint }), shouldShowClear && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: onClear, icon: CloseSmallIcon }) })), loading && (_jsx(InputSlot, { children: _jsx(Spinner, { size: "xs", color: color.icon.primary }) })), shouldShowPasswordToggle && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: toggleFieldType, icon: fieldType === 'password' ? EyeSmallIcon : EyeOffSmallIcon }) })), !!suffix && (_jsx(InputSlot, { children: typeof suffix === 'string' || typeof suffix === 'number' ? (_jsx(BodyText, { children: suffix })) : (suffix) })), !!trailingIcon && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: trailingIcon }) }))] })) }) }));
 });
 Input.displayName = 'Input';
 export default Input;

package/build/components/StepperInput/StepperInput.js

@@ -3,6 +3,7 @@ import { AddSmallIcon, MinusSmallIcon } from '@utilitywarehouse/hearth-react-nat
 import { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
+import { useFormFieldAccessibility } from '../../hooks';
 import { FormField } from '../FormField';
 import { InputComponent, InputField } from '../Input/Input';
 import StepperButton from './StepperButton';
@@ -81,6 +82,16 @@ const StepperInput = ({ value, defaultValue, onChangeText, onChangeValue, min, m
     const allowDecimal = decimalPrecision > 0;
     const keyboardType = allowNegative || allowDecimal ? 'numeric' : 'number-pad';
     const inputMode = allowDecimal ? 'decimal' : 'numeric';
+    const { accessibilityHint, accessibilityLabel } = useFormFieldAccessibility({
+        label,
+        helperText,
+        validText,
+        invalidText,
+        required,
+        validationStatus,
+        fallbackLabel: props.accessibilityLabel,
+        fallbackHint: props.accessibilityHint,
+    });
     useImperativeHandle(ref, () => inputRef.current, []);
     useEffect(() => {
         if (!isControlled && defaultValue !== undefined) {
@@ -134,39 +145,11 @@ const StepperInput = ({ value, defaultValue, onChangeText, onChangeValue, min, m
         setIsInputFocused(false);
         onBlur?.(event);
     };
-    const getAccessibilityLabel = () => {
-        let accessibilityLabel = '';
-        if (label) {
-            accessibilityLabel = accessibilityLabel + label;
-        }
-        if (required) {
-            accessibilityLabel = accessibilityLabel + ', required';
-        }
-        return accessibilityLabel || props.accessibilityLabel;
-    };
-    const getAccessibilityHint = () => {
-        let accessibilityHint = '';
-        if (helperText) {
-            accessibilityHint = accessibilityHint + helperText;
-        }
-        if (validationStatus !== 'initial') {
-            if (accessibilityHint.length > 0) {
-                accessibilityHint = accessibilityHint + ', ';
-            }
-            if (validationStatus === 'invalid' && invalidText) {
-                accessibilityHint = accessibilityHint + invalidText;
-            }
-            if (validationStatus === 'valid' && validText) {
-                accessibilityHint = accessibilityHint + validText;
-            }
-        }
-        return accessibilityHint || props.accessibilityHint;
-    };
     return (_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validText: validText, invalidText: invalidText, required: required, validationStatus: validationStatus, disabled: disabled, readonly: readonly, accessibilityHandledByChildren: true, style: [styles.root, style], children: _jsxs(View, { style: styles.controls, children: [_jsx(StepperButton, { icon: MinusSmallIcon, disabled: decrementDisabled, accessibilityLabel: decrementAccessibilityLabel, onPress: () => handleStepPress(-1) }), _jsx(InputComponent, { validationStatus: validationStatus, isInvalid: validationStatus === 'invalid', isReadOnly: readonly, isDisabled: disabled, isFocused: resolvedFocused, isRequired: required, style: styles.inputRoot, children: _jsx(InputField
                     // @ts-expect-error - ref forwarding issue mirrors the base Input component
                     , { 
                         // @ts-expect-error - ref forwarding issue mirrors the base Input component
-                        ref: inputRef, inputMode: inputMode, keyboardType: keyboardType, inBottomSheet: inBottomSheet, editable: !disabled && !readonly, textAlign: "center", value: displayValue, onFocus: handleFocus, onBlur: handleBlur, onChangeText: handleChangeText, accessibilityLabel: getAccessibilityLabel(), accessibilityHint: getAccessibilityHint(), accessibilityState: {
+                        ref: inputRef, inputMode: inputMode, keyboardType: keyboardType, inBottomSheet: inBottomSheet, editable: !disabled && !readonly, textAlign: "center", value: displayValue, onFocus: handleFocus, onBlur: handleBlur, onChangeText: handleChangeText, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, accessibilityState: {
                             ...(props.accessibilityState ?? {}),
                             disabled: disabled || readonly,
                         }, "aria-disabled": disabled || readonly, "aria-readonly": readonly, "aria-required": required, "aria-invalid": validationStatus === 'invalid', ...props, style: styles.inputField }) }), _jsx(StepperButton, { icon: AddSmallIcon, disabled: incrementDisabled, accessibilityLabel: incrementAccessibilityLabel, onPress: () => handleStepPress(1) })] }) }));

package/build/components/Textarea/Textarea.js

@@ -6,7 +6,7 @@ import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 import { Path, Svg } from 'react-native-svg';
 import { StyleSheet } from 'react-native-unistyles';
-import { useTheme } from '../../hooks';
+import { useFormFieldAccessibility, useTheme } from '../../hooks';
 import { FormField, useFormFieldContext } from '../FormField';
 import TextareaFieldComponent from './TextareaField';
 import TextareaRoot from './TextareaRoot';
@@ -33,6 +33,16 @@ const Textarea = ({ validationStatus = 'initial', children, resizable = false, d
     const textareaHeight = useSharedValue(textareaDefaultHeight);
     const resizeStartHeight = useSharedValue(textareaDefaultHeight);
     const theme = useTheme();
+    const { accessibilityHint, accessibilityLabel } = useFormFieldAccessibility({
+        label: textareaLabel,
+        helperText: textareaHelperText,
+        validText: textareaValidText,
+        invalidText: textareaInvalidText,
+        required: textareaRequired,
+        validationStatus: textareaValidationStatus,
+        fallbackLabel: props.accessibilityLabel,
+        fallbackHint: props.accessibilityHint,
+    });
     useEffect(() => {
         if (formFieldContext?.setShouldHandleAccessibility) {
             formFieldContext.setShouldHandleAccessibility(true);
@@ -44,34 +54,6 @@ const Textarea = ({ validationStatus = 'initial', children, resizable = false, d
             resizeStartHeight.value = textareaDefaultHeight;
         }
     }, [resizeStartHeight, textareaDefaultHeight, textareaHeight]);
-    const getAccessibilityLabel = () => {
-        let accessibilityLabel = '';
-        if (textareaLabel) {
-            accessibilityLabel = accessibilityLabel + textareaLabel;
-        }
-        if (textareaRequired) {
-            accessibilityLabel = accessibilityLabel + ', required';
-        }
-        return accessibilityLabel || props.accessibilityLabel;
-    };
-    const getAccessibilityHint = () => {
-        let accessibilityHint = '';
-        if (textareaHelperText) {
-            accessibilityHint = accessibilityHint + textareaHelperText;
-        }
-        if (textareaValidationStatus !== 'initial') {
-            if (accessibilityHint.length > 0) {
-                accessibilityHint = accessibilityHint + ', ';
-            }
-            if (textareaValidationStatus === 'invalid' && textareaInvalidText) {
-                accessibilityHint = accessibilityHint + textareaInvalidText;
-            }
-            if (textareaValidationStatus === 'valid' && textareaValidText) {
-                accessibilityHint = accessibilityHint + textareaValidText;
-            }
-        }
-        return accessibilityHint || props.accessibilityHint;
-    };
     const handleTextareaLayout = (event) => {
         if (!hasMeasuredHeight.current) {
             textareaHeight.value = event.nativeEvent.layout.height;
@@ -97,7 +79,7 @@ const Textarea = ({ validationStatus = 'initial', children, resizable = false, d
     const rootStyle = (children ? props.style : undefined);
     const inputStyle = (!children ? props.style : undefined);
     const textareaStyle = (resizable ? [rootStyle, animatedHeightStyle] : rootStyle);
-    return (_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validText: validText, invalidText: invalidText, required: required, validationStatus: validationStatus, disabled: disabled, readonly: readonly, accessibilityHandledByChildren: true, children: _jsxs(TextareaComponent, { ...(children ? props : {}), onLayout: handleTextareaLayout, style: textareaStyle, validationStatus: textareaValidationStatus, isInvalid: textareaValidationStatus === 'invalid', isReadOnly: textareaReadonly, isDisabled: textareaDisabled, isFocused: focused, required: textareaRequired, "aria-label": getAccessibilityLabel(), accessibilityHint: getAccessibilityHint(), children: [children ? (_jsx(_Fragment, { children: children })) : (_jsx(_Fragment, { children: _jsx(TextareaField, { ...props, onLayout: onLayout, style: [styles.textarea, inputStyle] }) })), resizable && !textareaDisabled ? (_jsx(GestureDetector, { gesture: resizeGesture, children: _jsx(View, { style: styles.resizeHandle, children: _jsx(Svg, { width: RESIZE_HANDLE_ICON_SIZE, height: RESIZE_HANDLE_ICON_SIZE, viewBox: "0 0 9 9", fill: "none", children: _jsx(Path, { d: "M0.353516 8.35355L8.35352 0.353546M4.35352 8.35355L8.35352 4.35355", stroke: theme.color.icon.primary }) }) }) })) : null] }) }));
+    return (_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validText: validText, invalidText: invalidText, required: required, validationStatus: validationStatus, disabled: disabled, readonly: readonly, accessibilityHandledByChildren: true, children: _jsxs(TextareaComponent, { ...(children ? props : {}), onLayout: handleTextareaLayout, style: textareaStyle, validationStatus: textareaValidationStatus, isInvalid: textareaValidationStatus === 'invalid', isReadOnly: textareaReadonly, isDisabled: textareaDisabled, isFocused: focused, required: textareaRequired, "aria-label": accessibilityLabel, accessibilityHint: accessibilityHint, children: [children ? (_jsx(_Fragment, { children: children })) : (_jsx(_Fragment, { children: _jsx(TextareaField, { ...props, onLayout: onLayout, style: [styles.textarea, inputStyle] }) })), resizable && !textareaDisabled ? (_jsx(GestureDetector, { gesture: resizeGesture, children: _jsx(View, { style: styles.resizeHandle, children: _jsx(Svg, { width: RESIZE_HANDLE_ICON_SIZE, height: RESIZE_HANDLE_ICON_SIZE, viewBox: "0 0 9 9", fill: "none", children: _jsx(Path, { d: "M0.353516 8.35355L8.35352 0.353546M4.35352 8.35355L8.35352 4.35355", stroke: theme.color.icon.primary }) }) }) })) : null] }) }));
 };
 const styles = StyleSheet.create({
     textarea: {

package/build/components/VerificationInput/VerificationInput.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { TextInput, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
+import { useFormFieldAccessibility } from '../../hooks';
 import { FormField } from '../FormField';
 import { getNextIndexFromValueChange } from './VerificationInput.utils';
 import { VerificationInputSlot } from './VerificationInputSlot';
@@ -125,28 +126,17 @@ const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVa
         },
     }), [length, updateValue]);
     const slots = Array.from({ length }, (_, index) => index);
-    const getAccessibilityLabel = () => {
-        return label || props.accessibilityLabel;
-    };
-    const getAccessibilityHint = () => {
-        let accessibilityHint = '';
-        if (helperText) {
-            accessibilityHint = accessibilityHint + helperText;
-        }
-        if (validationStatus !== 'initial') {
-            if (accessibilityHint.length > 0) {
-                accessibilityHint = accessibilityHint + ', ';
-            }
-            if (validationStatus === 'invalid' && invalidText) {
-                accessibilityHint = accessibilityHint + invalidText;
-            }
-            if (validationStatus === 'valid' && validText) {
-                accessibilityHint = accessibilityHint + validText;
-            }
-        }
-        return accessibilityHint || props.accessibilityHint;
-    };
-    return (_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatus, validText: validText, invalidText: invalidText, disabled: disabled, readonly: readonly, accessibilityHandledByChildren: true, style: [styles.root, style], ...props, children: _jsxs(View, { style: styles.slotsContainer, children: [_jsx(TextInput, { ref: inputRef, value: displayValue, autoFocus: autoFocus, editable: !disabled && !readonly, accessibilityLabel: getAccessibilityLabel(), accessibilityHint: getAccessibilityHint(), accessibilityState: { disabled: disabled || readonly }, importantForAccessibility: "yes", onChangeText: handleChangeText, onSelectionChange: event => {
+    const { accessibilityHint, accessibilityLabel } = useFormFieldAccessibility({
+        label,
+        helperText,
+        validText,
+        invalidText,
+        validationStatus,
+        fallbackLabel: props.accessibilityLabel,
+        fallbackHint: props.accessibilityHint,
+        includeRequiredInLabel: false,
+    });
+    return (_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatus, validText: validText, invalidText: invalidText, disabled: disabled, readonly: readonly, accessibilityHandledByChildren: true, style: [styles.root, style], ...props, children: _jsxs(View, { style: styles.slotsContainer, children: [_jsx(TextInput, { ref: inputRef, value: displayValue, autoFocus: autoFocus, editable: !disabled && !readonly, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, accessibilityState: { disabled: disabled || readonly }, importantForAccessibility: "yes", onChangeText: handleChangeText, onSelectionChange: event => {
                         const nextSelection = event.nativeEvent.selection;
                         if (ignoreNextSelectionRef.current &&
                             (nextSelection.start !== latestSelectionRef.current.start ||

package/build/hooks/index.d.ts

@@ -1,5 +1,6 @@
 export { default as useBreakpointValue } from './useBreakpointValue';
 export { default as useColorMode } from './useColorMode';
+export { default as useFormFieldAccessibility } from './useFormFieldAccessibility';
 export { default as useMedia } from './useMedia';
 export { usePrevious } from './usePrevious';
 export { useStyleProps } from './useStyleProps';

package/build/hooks/index.js

@@ -1,5 +1,6 @@
 export { default as useBreakpointValue } from './useBreakpointValue';
 export { default as useColorMode } from './useColorMode';
+export { default as useFormFieldAccessibility } from './useFormFieldAccessibility';
 export { default as useMedia } from './useMedia';
 export { usePrevious } from './usePrevious';
 export { useStyleProps } from './useStyleProps';

package/build/hooks/useFormFieldAccessibility.d.ts

@@ -0,0 +1,17 @@
+type ValidationStatus = 'initial' | 'valid' | 'invalid';
+type UseFormFieldAccessibilityArgs = {
+    label?: string;
+    helperText?: string;
+    validText?: string;
+    invalidText?: string;
+    required?: boolean;
+    validationStatus?: ValidationStatus;
+    fallbackLabel?: string;
+    fallbackHint?: string;
+    includeRequiredInLabel?: boolean;
+};
+declare const useFormFieldAccessibility: ({ label, helperText, validText, invalidText, required, validationStatus, fallbackLabel, fallbackHint, includeRequiredInLabel, }: UseFormFieldAccessibilityArgs) => {
+    accessibilityHint: string | undefined;
+    accessibilityLabel: string | undefined;
+};
+export default useFormFieldAccessibility;

package/build/hooks/useFormFieldAccessibility.js

@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+const useFormFieldAccessibility = ({ label, helperText, validText, invalidText, required = false, validationStatus = 'initial', fallbackLabel, fallbackHint, includeRequiredInLabel = true, }) => {
+    const accessibilityLabel = useMemo(() => {
+        const nextAccessibilityLabelParts = [];
+        if (label) {
+            nextAccessibilityLabelParts.push(label);
+        }
+        if (includeRequiredInLabel && required) {
+            nextAccessibilityLabelParts.push('required');
+        }
+        const nextAccessibilityLabel = nextAccessibilityLabelParts.join(', ');
+        return nextAccessibilityLabel || fallbackLabel;
+    }, [fallbackLabel, includeRequiredInLabel, label, required]);
+    const accessibilityHint = useMemo(() => {
+        const accessibilityHints = [];
+        if (helperText) {
+            accessibilityHints.push(helperText);
+        }
+        if (validationStatus === 'invalid' && invalidText) {
+            accessibilityHints.push(invalidText);
+        }
+        if (validationStatus === 'valid' && validText) {
+            accessibilityHints.push(validText);
+        }
+        return accessibilityHints.join(', ') || fallbackHint;
+    }, [fallbackHint, helperText, invalidText, validText, validationStatus]);
+    return {
+        accessibilityHint,
+        accessibilityLabel,
+    };
+};
+export default useFormFieldAccessibility;

package/build/hooks/useFormFieldAccessibility.test.d.ts

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

package/build/hooks/useFormFieldAccessibility.test.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+import useFormFieldAccessibility from './useFormFieldAccessibility';
+const renderHook = (args) => {
+    let result;
+    const TestComponent = () => {
+        result = useFormFieldAccessibility(args);
+        return null;
+    };
+    renderToStaticMarkup(_jsx(TestComponent, {}));
+    if (!result) {
+        throw new Error('Hook did not return a result');
+    }
+    return result;
+};
+describe('useFormFieldAccessibility', () => {
+    it('builds a label from the field label and required state', () => {
+        expect(renderHook({
+            label: 'Email',
+            required: true,
+        })).toEqual({
+            accessibilityHint: undefined,
+            accessibilityLabel: 'Email, required',
+        });
+    });
+    it('builds a hint from helper text and validation feedback', () => {
+        expect(renderHook({
+            helperText: 'Enter the code we sent you',
+            validationStatus: 'invalid',
+            invalidText: 'Code is invalid',
+        })).toEqual({
+            accessibilityHint: 'Enter the code we sent you, Code is invalid',
+            accessibilityLabel: undefined,
+        });
+    });
+    it('falls back to provided accessibility props when no composed value exists', () => {
+        expect(renderHook({
+            fallbackLabel: 'Custom label',
+            fallbackHint: 'Custom hint',
+        })).toEqual({
+            accessibilityHint: 'Custom hint',
+            accessibilityLabel: 'Custom label',
+        });
+    });
+    it('supports omitting the required suffix from the label', () => {
+        expect(renderHook({
+            label: 'Verification code',
+            required: true,
+            includeRequiredInLabel: false,
+        })).toEqual({
+            accessibilityHint: undefined,
+            accessibilityLabel: 'Verification code',
+        });
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.32.0",
+  "version": "0.32.1",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -33,6 +33,7 @@
     "@storybook/addon-vitest": "^10.2.1",
     "@storybook/react-native-web-vite": "^10.2.1",
     "@types/prismjs": "^1.26.5",
+    "@types/react-dom": "^19.1.6",
     "@types/react": "^19.1.10",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
@@ -41,6 +42,7 @@
     "playwright": "^1.55.1",
     "prismjs": "^1.30.0",
     "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "react-native": "0.80.0",
     "react-native-edge-to-edge": "1.6.1",
     "react-native-gesture-handler": "2.28.0",
@@ -86,7 +88,7 @@
     "watch": "tsc --watch",
     "figma:create": "figma connect create",
     "figma:publish": "figma connect publish",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "vitest run --config vitest.unit.config.ts",
     "test:storybook": "vitest run --project storybook",
     "dev": "npm run copyChangelog && storybook dev -p 6006",
     "dev:docs": "storybook dev -p 6002 --no-open --docs",

package/src/components/Banner/Banner.stories.tsx

@@ -55,6 +55,7 @@ const meta = {
         'insurance',
         'cashback',
         'pig',
+        'highlight',
       ],
     },
     iconContainerVariant: {
@@ -548,6 +549,19 @@ export const ColorSchemes: Story = {
               </Button>
             }
           />
+          <Banner
+            icon={HomeMediumIcon}
+            iconContainerColor="highlight"
+            iconContainerVariant="emphasis"
+            colorScheme="highlight"
+            heading="Highlight Yellow"
+            description="Banner with highlight color scheme."
+            button={
+              <Button size="sm" onPress={() => console.log('Action pressed')}>
+                Action
+              </Button>
+            }
+          />
         </Flex>
       </View>
     );