@utilitywarehouse/hearth-react-native 0.27.0 → 0.27.2-test

package/.storybook/vitest.setup.ts

@@ -1,7 +1,39 @@
-import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
 import { setProjectAnnotations } from '@storybook/react-native-web-vite';
-import * as projectAnnotations from './preview';
+import { vi } from 'vitest';
+
+// react-native-unistyles/mocks relies on Jest globals.
+if (!(globalThis as { jest?: unknown }).jest) {
+  (globalThis as any).jest = vi;
+}
+
+await import('react-native-unistyles/mocks');
+const { StyleSheet } = await import('react-native-unistyles');
+const { breakpoints } = await import('../src/core/breakpoints');
+const { themes } = await import('../src/core/themes');
+
+vi.mock('../src/core', async () => {
+  const unistyles = await import('react-native-unistyles');
+
+  return {
+    breakpoints,
+    themes,
+    StyleSheet: unistyles.StyleSheet,
+    UnistylesRuntime: unistyles.UnistylesRuntime,
+  };
+});
+
+StyleSheet.configure({
+  breakpoints,
+  themes,
+  settings: {
+    initialTheme: 'light',
+    adaptiveThemes: false,
+  },
+});
+
+const a11yAddonAnnotations = await import('@storybook/addon-a11y/preview');
+const projectAnnotations = await import('./preview');
 
 // This is an important step to apply the right configuration when testing your stories.
 // More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
-setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);
+setProjectAnnotations([a11yAddonAnnotations as any, projectAnnotations as any]);

package/.turbo/turbo-build.log

@@ -1,4 +1,5 @@
-
-> @utilitywarehouse/hearth-react-native@0.27.0 build /home/runner/work/hearth/hearth/packages/react-native
-> tsc
-
+
+
+> @utilitywarehouse/hearth-react-native@0.27.2-test build /Users/filmondaniels/Projects/Work/hearth/packages/react-native
+> tsc
+

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.27.1
+
+### Patch Changes
+
+- [#990](https://github.com/utilitywarehouse/hearth/pull/990) [`958e0e1`](https://github.com/utilitywarehouse/hearth/commit/958e0e1a9d5451d1e11fecadc69ae3c5ad9d42ca) Thanks [@declanelcocks](https://github.com/declanelcocks)! - 🐛 [FIX]: Fix `Modal` layout when `inNavModal` and `stickyFooter={false}`.
+
+  Corrects the container flex style for `inNavModal` modals with a non-sticky footer, where the UX was not great when scrolling.
+
+  **Components affected**:
+  - `Modal`
+
+  **Developer changes**:
+
+  No changes required.
+
+- [#992](https://github.com/utilitywarehouse/hearth/pull/992) [`2560b3d`](https://github.com/utilitywarehouse/hearth/commit/2560b3dcba7ed4981fad585628f96afd07d8de4f) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Add optional leading `icon` support to `SegmentedControlOption`.
+
+  This adds an optional `icon` prop to `SegmentedControlOption`, allowing icons to be displayed before option labels in segmented controls.
+
+  Docs and stories were updated to include icon usage examples.
+
+  **Components affected**:
+  - `SegmentedControlOption`
+
+  **Developer changes**:
+
+  No changes required for existing usage.
+
+  To use the new optional icon prop:
+
+  ```tsx
+  import { SegmentedControl, SegmentedControlOption } from '@utilitywarehouse/hearth-react-native';
+  import { ElectricitySmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+
+  <SegmentedControl defaultValue="energy">
+    <SegmentedControlOption value="energy" icon={ElectricitySmallIcon}>
+      Energy
+    </SegmentedControlOption>
+    <SegmentedControlOption value="broadband">Broadband</SegmentedControlOption>
+  </SegmentedControl>;
+  ```
+
 ## 0.27.0
 
 ### Minor Changes

package/build/components/Carousel/Carousel.js

@@ -213,7 +213,12 @@ const Carousel = ({ centered = false, children, disabled = false, inactiveItemOp
     const controls = (_jsx(CarouselControls, { style: [styles.controls, controlsStyle], itemStyle: controlsItemStyle, activeItemStyle: controlsActiveItemStyle, showNavigation: showNavigation, accessibilityHidden: controlsAccessibilityHidden }));
     // Render for web using ScrollView with scroll snap
     if (isWeb) {
-        return (_jsx(CarouselContext.Provider, { value: context, children: _jsxs(View, { style: style, children: [_jsx(ScrollView, { horizontal: true, onScroll: handleWebScroll, onMomentumScrollEnd: handleWebScrollEnd, onScrollEndDrag: handleWebScrollEnd, ref: scrollViewRef, scrollEnabled: !disabled, pointerEvents: disabled ? 'none' : 'auto', scrollEventThrottle: 16, showsHorizontalScrollIndicator: false, snapToInterval: itemWidth || width, snapToAlignment: centered ? 'center' : 'start', decelerationRate: "fast", style: [styles.webContainer, webContainerStyles, itemsStyle], contentContainerStyle: [styles.webContentContainer, webContentContainerStyle], ...props, children: carouselItems.map((item, index) => cloneElement(item, {
+        return (_jsx(CarouselContext.Provider, { value: context, children: _jsxs(View, { style: style, children: [_jsx(ScrollView, { horizontal: true, onScroll: handleWebScroll, onMomentumScrollEnd: handleWebScrollEnd, onScrollEndDrag: handleWebScrollEnd, ref: scrollViewRef, scrollEnabled: !disabled, scrollEventThrottle: 16, showsHorizontalScrollIndicator: false, snapToInterval: itemWidth || width, snapToAlignment: centered ? 'center' : 'start', decelerationRate: "fast", style: [
+                            styles.webContainer,
+                            webContainerStyles,
+                            itemsStyle,
+                            { pointerEvents: disabled ? 'none' : 'auto' },
+                        ], contentContainerStyle: [styles.webContentContainer, webContentContainerStyle], ...props, children: carouselItems.map((item, index) => cloneElement(item, {
                             active: index === activeIndex,
                             inactiveOpacity: inactiveItemOpacity,
                             key: item?.key || item.props?.id || index,

package/build/components/List/List.js

@@ -6,7 +6,7 @@ import { Card } from '../Card';
 import { SectionHeader } from '../SectionHeader';
 import { ListContext } from './List.context';
 const List = ({ children, heading, helperText, headerTrailingContent, invalidText, ...props }) => {
-    const { loading, disabled, container = 'none' } = props;
+    const { loading, disabled, container = 'none', testID, style, ...rest } = props;
     const orderRef = useRef([]);
     const [firstItemId, setFirstItemId] = useState(undefined);
     const containerToCard = {
@@ -35,7 +35,7 @@ const List = ({ children, heading, helperText, headerTrailingContent, invalidTex
         registerItem,
     };
     styles.useVariants({ disabled });
-    return (_jsx(ListContext.Provider, { value: value, children: _jsxs(View, { ...props, style: [styles.container, props.style], children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, trailingContent: headerTrailingContent, invalidText: invalidText })) : null, container === 'none' ? (_jsx(View, { children: children })) : (React.Children.count(children) > 0 && (_jsx(Card, { ...containerToCard, noPadding: true, style: styles.card, children: _jsx(_Fragment, { children: children }) })))] }) }));
+    return (_jsx(ListContext.Provider, { value: value, children: _jsxs(View, { ...rest, style: [styles.container, style], children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, trailingContent: headerTrailingContent, invalidText: invalidText })) : null, container === 'none' ? (_jsx(View, { testID: testID, children: children })) : (React.Children.count(children) > 0 && (_jsx(Card, { ...containerToCard, noPadding: true, style: styles.card, testID: testID, children: _jsx(_Fragment, { children: children }) })))] }) }));
 };
 List.displayName = 'List';
 const styles = StyleSheet.create(theme => ({

package/build/components/Modal/Modal.js

@@ -120,7 +120,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
     });
     const footer = (_jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, inverted: isBrandBackground && inNavModal, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, inverted: isBrandBackground && inNavModal, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] }));
     const InNavModalContainer = scrollable ? ScrollView : View;
-    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", color: isBrandBackground && inNavModal ? theme.color.icon.inverted : undefined }), _jsx(Heading, { size: "lg", textAlign: "center", inverted: isBrandBackground && inNavModal, children: loadingHeading })] })) : (_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, inverted: isBrandBackground && inNavModal, children: heading })) : null, description && !image ? (_jsx(BodyText, { accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", inverted: isBrandBackground && inNavModal, ...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 && inNavModal, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] })] })) : null, inNavModal && (_jsxs(InNavModalContainer, { style: { flexGrow: stickyFooter ? 1 : 0 }, children: [children, !stickyFooter ? _jsx(View, { style: styles.inNavModalFooterContainer, children: footer }) : null] })), !inNavModal && children, ((!stickyFooter && !inNavModal) || (inNavModal && stickyFooter)) && !noButtons ? footer : 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", color: isBrandBackground && inNavModal ? theme.color.icon.inverted : undefined }), _jsx(Heading, { size: "lg", textAlign: "center", inverted: isBrandBackground && inNavModal, children: loadingHeading })] })) : (_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, inverted: isBrandBackground && inNavModal, children: heading })) : null, description && !image ? (_jsx(BodyText, { accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", inverted: isBrandBackground && inNavModal, ...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 && inNavModal, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] })] })) : null, inNavModal && (_jsxs(InNavModalContainer, { style: { flex: stickyFooter ? 1 : 0 }, children: [children, !stickyFooter ? _jsx(View, { style: styles.inNavModalFooterContainer, children: footer }) : null] })), !inNavModal && children, ((!stickyFooter && !inNavModal) || (inNavModal && stickyFooter)) && !noButtons ? footer : null] })) }));
     const renderFooter = useCallback((props) => (_jsx(BottomSheetFooter, { ...props, children: _jsx(View, { style: styles.footerWrap, children: footer }) })), [
         onPressPrimaryButton,
         primaryButtonText,

package/build/components/SegmentedControl/SegmentedControl.js

@@ -153,7 +153,7 @@ const SegmentedControl = ({ value: controlledValue, defaultValue, onValueChange,
         size,
         registerOptionLayout,
     }), [currentValue, select, disabled, size, registerOptionLayout]);
-    return (_jsx(SegmentedControlContext.Provider, { value: contextValue, children: _jsxs(View, { accessibilityRole: "radiogroup", accessibilityState: { disabled }, style: [styles.container, computedStyles, style], ...remainingProps, children: [hasIndicator ? (_jsx(Indicator, { pointerEvents: "none", style: [styles.indicator, indicatorStyle] })) : null, children] }) }));
+    return (_jsx(SegmentedControlContext.Provider, { value: contextValue, children: _jsxs(View, { accessibilityRole: "radiogroup", accessibilityState: { disabled }, style: [styles.container, computedStyles, style], ...remainingProps, children: [hasIndicator ? (_jsx(Indicator, { style: [styles.indicator, styles.pointerEventsNone, indicatorStyle] })) : null, children] }) }));
 };
 SegmentedControl.displayName = 'SegmentedControl';
 const styles = StyleSheet.create(theme => ({
@@ -192,5 +192,8 @@ const styles = StyleSheet.create(theme => ({
         borderRadius: theme.components.segmentedControl.borderRadius,
         backgroundColor: theme.color.interactive.brand.surface.strong.default,
     },
+    pointerEventsNone: {
+        pointerEvents: 'none',
+    },
 }));
 export default SegmentedControl;

package/build/components/SegmentedControl/SegmentedControlOption.js

@@ -5,9 +5,10 @@ import { Platform, Pressable, View } from 'react-native';
 import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming, } from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
+import { Icon } from '../Icon';
 import { useSegmentedControlContext } from './SegmentedControl.context';
 const AnimatedView = Animated.createAnimatedComponent(View);
-const SegmentedControlOptionRoot = ({ value, children, accessibilityLabel, disabled = false, style, states = {}, ...props }) => {
+const SegmentedControlOptionRoot = ({ value, children, icon, accessibilityLabel, disabled = false, style, states = {}, ...props }) => {
     const { value: selectedValue, select, disabled: allDisabled, size, registerOptionLayout, } = useSegmentedControlContext();
     const { active = false } = states;
     const reducedMotion = useReducedMotion();
@@ -35,7 +36,7 @@ const SegmentedControlOptionRoot = ({ value, children, accessibilityLabel, disab
     const accessibleLabel = typeof children === 'string' || typeof children === 'number' ? String(children) : value;
     return (_jsx(Pressable, { ...props, accessibilityRole: "radio", accessibilityState: { checked: selected, disabled: isDisabled }, accessibilityLabel: accessibilityLabel ?? accessibleLabel, onPress: onPress, onLayout: e => registerOptionLayout(value, e.nativeEvent.layout), disabled: isDisabled, style: [styles.option, style], ...(Platform.OS === 'web'
             ? { 'aria-label': accessibilityLabel ?? accessibleLabel }
-            : null), children: _jsxs(View, { style: styles.labelWrap, accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: [_jsx(BodyText, { size: "md", weight: "semibold", style: styles.labelSizer, accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: children }), _jsx(AnimatedView, { pointerEvents: "none", style: [styles.textLayer, regularLabelStyle], accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: _jsx(BodyText, { size: "md", weight: "regular", style: styles.textRegular, children: children }) }), _jsx(AnimatedView, { pointerEvents: "none", style: [styles.textLayer, selectedLabelStyle], accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: _jsx(BodyText, { size: "md", weight: "semibold", style: styles.textSelected, children: children }) })] }) }));
+            : null), children: _jsxs(View, { style: styles.contentWrap, accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: [icon ? _jsx(Icon, { as: icon, size: "sm", style: styles.icon }) : null, _jsxs(View, { style: styles.labelWrap, children: [_jsx(BodyText, { size: "md", weight: "semibold", style: styles.labelSizer, accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: children }), _jsx(AnimatedView, { style: [styles.textLayer, styles.pointerEventsNone, regularLabelStyle], accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: _jsx(BodyText, { size: "md", weight: "regular", style: styles.textRegular, children: children }) }), _jsx(AnimatedView, { style: [styles.textLayer, styles.pointerEventsNone, selectedLabelStyle], accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: _jsx(BodyText, { size: "md", weight: "semibold", style: styles.textSelected, children: children }) })] })] }) }));
 };
 const SegmentedControlOption = createPressable({ Root: SegmentedControlOptionRoot });
 SegmentedControlOption.displayName = 'SegmentedControlOption';
@@ -90,6 +91,12 @@ const styles = StyleSheet.create(theme => ({
             },
         },
     },
+    contentWrap: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: theme.components.segmentedControl.gap,
+    },
     labelWrap: {
         position: 'relative',
         alignItems: 'center',
@@ -105,6 +112,21 @@ const styles = StyleSheet.create(theme => ({
         alignItems: 'center',
         justifyContent: 'center',
     },
+    pointerEventsNone: {
+        pointerEvents: 'none',
+    },
+    icon: {
+        variants: {
+            selected: {
+                true: {
+                    color: theme.color.icon.inverted,
+                },
+                false: {
+                    color: theme.color.icon.primary,
+                },
+            },
+        },
+    },
     textRegular: {
         color: theme.color.text.primary,
     },

package/build/components/SegmentedControl/SegmentedControlOption.props.d.ts

@@ -1,10 +1,12 @@
-import type { ReactNode } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import type { PressableProps, ViewProps } from 'react-native';
 export interface SegmentedControlOptionProps extends Omit<PressableProps, 'children'> {
     /** Unique option value. */
     value: string;
     /** Option label/content. */
     children: ReactNode;
+    /** Optional leading icon. */
+    icon?: ComponentType<any>;
     /** Disables only this option. */
     disabled?: boolean;
     style?: ViewProps['style'];

package/build/components/TimePicker/TimePickerWheel.js

@@ -26,7 +26,12 @@ const TimePickerWheel = ({ value, setValue = () => { }, items }) => {
             setValue(item.value);
         }
     }, [setValue, value]);
-    const renderOverlay = useCallback(() => (_jsxs(View, { style: [styles.overlayContainer], pointerEvents: "none", children: [_jsx(View, { pointerEvents: "none", style: [styles.fadeOverlay, { height: fadeHeight }], children: _jsxs(Svg, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [_jsx(Defs, { children: _jsxs(LinearGradient, { id: `${gradientId}-top`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx(Stop, { offset: "0", stopColor: theme.color.background.secondary, stopOpacity: 1 }), _jsx(Stop, { offset: "1", stopColor: theme.color.background.secondary, stopOpacity: 0 })] }) }), _jsx(Rect, { width: "100%", height: "100%", fill: `url(#${gradientId}-top)` })] }) }), _jsx(View, { pointerEvents: "none", style: [styles.fadeOverlay, styles.fadeOverlayBottom, { height: fadeHeight }], children: _jsxs(Svg, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [_jsx(Defs, { children: _jsxs(LinearGradient, { id: `${gradientId}-bottom`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx(Stop, { offset: "0", stopColor: theme.color.background.secondary, stopOpacity: 0 }), _jsx(Stop, { offset: "1", stopColor: theme.color.background.secondary, stopOpacity: 1 })] }) }), _jsx(Rect, { width: "100%", height: "100%", fill: `url(#${gradientId}-bottom)` })] }) })] })), [fadeHeight, gradientId, theme.color.background.secondary]);
+    const renderOverlay = useCallback(() => (_jsxs(View, { style: [styles.overlayContainer, styles.pointerEventsNone], children: [_jsx(View, { style: [styles.fadeOverlay, styles.pointerEventsNone, { height: fadeHeight }], children: _jsxs(Svg, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [_jsx(Defs, { children: _jsxs(LinearGradient, { id: `${gradientId}-top`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx(Stop, { offset: "0", stopColor: theme.color.background.secondary, stopOpacity: 1 }), _jsx(Stop, { offset: "1", stopColor: theme.color.background.secondary, stopOpacity: 0 })] }) }), _jsx(Rect, { width: "100%", height: "100%", fill: `url(#${gradientId}-top)` })] }) }), _jsx(View, { style: [
+                    styles.fadeOverlay,
+                    styles.fadeOverlayBottom,
+                    styles.pointerEventsNone,
+                    { height: fadeHeight },
+                ], children: _jsxs(Svg, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [_jsx(Defs, { children: _jsxs(LinearGradient, { id: `${gradientId}-bottom`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx(Stop, { offset: "0", stopColor: theme.color.background.secondary, stopOpacity: 0 }), _jsx(Stop, { offset: "1", stopColor: theme.color.background.secondary, stopOpacity: 1 })] }) }), _jsx(Rect, { width: "100%", height: "100%", fill: `url(#${gradientId}-bottom)` })] }) })] })), [fadeHeight, gradientId, theme.color.background.secondary]);
     const renderItem = useCallback(({ item }) => (_jsx(View, { style: styles.indicator, children: _jsx(BodyText, { size: "lg", children: item.label }) })), []);
     return (_jsxs(View, { style: [styles.container, { height: pickerHeight }], children: [_jsx(View, { style: styles.overlayContainer, children: _jsx(View, { style: [styles.selection] }) }), _jsx(WheelPicker, { data: data, value: value, onValueChanged: handleValueChanged, itemHeight: ITEM_HEIGHT, visibleItemCount: displayCount, width: theme.components.timePicker.time.item.width, renderItem: renderItem, renderOverlay: renderOverlay })] }));
 };
@@ -74,5 +79,8 @@ const styles = StyleSheet.create(theme => ({
         top: undefined,
         bottom: 0,
     },
+    pointerEventsNone: {
+        pointerEvents: 'none',
+    },
 }));
 export default TimePickerWheel;

package/build/components/Toast/Toast.context.js

@@ -63,7 +63,7 @@ export const ToastProvider = ({ children, safeAreaPadding = true, }) => {
             timers.current = {};
         };
     }, []);
-    return (_jsxs(ToastContext.Provider, { value: { addToast, removeToast }, children: [children, _jsx(View, { pointerEvents: "box-none", style: styles.container, children: _jsx(View, { style: styles.stack, children: toasts.map(t => (_jsx(ToastItem, { ref: el => {
+    return (_jsxs(ToastContext.Provider, { value: { addToast, removeToast }, children: [children, _jsx(View, { style: styles.container, children: _jsx(View, { style: styles.stack, children: toasts.map(t => (_jsx(ToastItem, { ref: el => {
                             toastRefs.current[t.id] = el;
                         }, toast: t, onClose: removeToast }, t.id))) }) })] }));
 };

package/build/components/VerificationInput/VerificationInput.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { Platform, TextInput, View } from 'react-native';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { TextInput, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { FormField } from '../FormField';
+import { getNextIndexFromValueChange } from './VerificationInput.utils';
 import { VerificationInputSlot } from './VerificationInputSlot';
 const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVariant = 'body', helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled = false, readonly = false, secureTextEntry = false, autoFocus = false, style, ...props }, ref) => {
     const length = 6;
@@ -26,12 +27,12 @@ const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVa
             setSelection(nextSelection);
         }
     }, [length, value]);
-    const updateValue = (nextValue) => {
+    const updateValue = useCallback((nextValue) => {
         const trimmedValue = nextValue.slice(0, length);
         latestValueRef.current = trimmedValue;
         setDisplayValue(trimmedValue);
         onChangeText?.(trimmedValue);
-    };
+    }, [length, onChangeText]);
     const setSelectionIndex = (index) => {
         const clampedIndex = Math.max(0, Math.min(index, length));
         const hasChar = !!latestValueRef.current[clampedIndex];
@@ -50,15 +51,6 @@ const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVa
         setSelection(nextSelection);
         setFocusedIndex(Math.min(clampedIndex, length - 1));
     };
-    const findDiffIndex = (prevValue, nextValue) => {
-        const minLength = Math.min(prevValue.length, nextValue.length);
-        for (let i = 0; i < minLength; i += 1) {
-            if (prevValue[i] !== nextValue[i]) {
-                return i;
-            }
-        }
-        return minLength;
-    };
     const handleChangeText = (text) => {
         const prevValue = latestValueRef.current;
         const nextValue = text.slice(0, length);
@@ -67,11 +59,7 @@ const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVa
         const diff = nextLength - prevLength;
         const isBulkInsert = text.length > 1 && diff > 1;
         const shouldBlur = nextLength >= length;
-        let nextIndex = Math.max(0, Math.min(latestSelectionRef.current.start + (diff >= 0 ? 1 : diff), length));
-        if (Platform.OS === 'android') {
-            const editedIndex = findDiffIndex(prevValue, nextValue);
-            nextIndex = diff >= 0 ? Math.min(editedIndex + 1, length) : Math.max(editedIndex, 0);
-        }
+        const nextIndex = getNextIndexFromValueChange({ prevValue, nextValue, length });
         updateValue(nextValue);
         if (isBulkInsert) {
             setCaretIndex(Math.min(nextLength, length));
@@ -135,7 +123,7 @@ const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVa
                 setSelectionIndex(index);
             }
         },
-    }), [length, onChangeText]);
+    }), [length, updateValue]);
     const slots = Array.from({ length }, (_, index) => index);
     const getAccessibilityLabel = () => {
         return label || props.accessibilityLabel;
@@ -172,7 +160,7 @@ const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVa
                         latestSelectionRef.current = nextSelection;
                         setSelection(nextSelection);
                         setFocusedIndex(Math.min(nextSelection.start, length - 1));
-                    }, onFocus: handleFocus, onBlur: handleBlur, selection: selection, keyboardType: "number-pad", textContentType: "oneTimeCode", autoComplete: "sms-otp", secureTextEntry: secureTextEntry, maxLength: length, caretHidden: true, style: styles.hiddenInput, pointerEvents: "none" }), slots.map(index => {
+                    }, onFocus: handleFocus, onBlur: handleBlur, selection: selection, keyboardType: "number-pad", textContentType: "oneTimeCode", autoComplete: "sms-otp", secureTextEntry: secureTextEntry, maxLength: length, caretHidden: true, style: styles.hiddenInput }), slots.map(index => {
                     const char = displayValue[index] || '';
                     const isActive = focusedIndex === index;
                     const displayChar = secureTextEntry && char ? '*' : char;
@@ -199,11 +187,12 @@ const styles = StyleSheet.create(theme => ({
         position: 'absolute',
         width: '100%',
         height: '100%',
+        pointerEvents: 'none',
         left: 0,
         top: 0,
         color: 'transparent',
         fontSize: 1,
-        opacity: 0.1,
+        opacity: 0.01,
     },
 }));
 VerificationInput.displayName = 'VerificationInput';

package/build/components/VerificationInput/VerificationInput.utils.d.ts

@@ -0,0 +1,8 @@
+interface GetNextIndexFromValueChangeOptions {
+    prevValue: string;
+    nextValue: string;
+    length: number;
+}
+export declare const findDiffIndex: (prevValue: string, nextValue: string) => number;
+export declare const getNextIndexFromValueChange: ({ prevValue, nextValue, length, }: GetNextIndexFromValueChangeOptions) => number;
+export {};

package/build/components/VerificationInput/VerificationInput.utils.js

@@ -0,0 +1,17 @@
+export const findDiffIndex = (prevValue, nextValue) => {
+    const minLength = Math.min(prevValue.length, nextValue.length);
+    for (let i = 0; i < minLength; i += 1) {
+        if (prevValue[i] !== nextValue[i]) {
+            return i;
+        }
+    }
+    return minLength;
+};
+export const getNextIndexFromValueChange = ({ prevValue, nextValue, length, }) => {
+    const diff = nextValue.length - prevValue.length;
+    const editedIndex = findDiffIndex(prevValue, nextValue);
+    if (diff >= 0) {
+        return Math.min(editedIndex + 1, length);
+    }
+    return Math.max(editedIndex, 0);
+};

package/build/components/VerificationInput/VerificationInput.utils.test.d.ts

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

package/build/components/VerificationInput/VerificationInput.utils.test.js

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest';
+import { findDiffIndex, getNextIndexFromValueChange } from './VerificationInput.utils';
+describe('findDiffIndex', () => {
+    it('returns first differing index', () => {
+        expect(findDiffIndex('12', '19')).toBe(1);
+    });
+    it('returns previous length when next appends', () => {
+        expect(findDiffIndex('12', '123')).toBe(2);
+    });
+    it('returns next length when next shortens with same prefix', () => {
+        expect(findDiffIndex('123', '12')).toBe(2);
+    });
+});
+describe('getNextIndexFromValueChange', () => {
+    it('moves to the slot after the one that changed when inserting in an empty later slot', () => {
+        expect(getNextIndexFromValueChange({
+            prevValue: '12',
+            nextValue: '123',
+            length: 6,
+        })).toBe(3);
+    });
+    it('caps at length when value becomes full', () => {
+        expect(getNextIndexFromValueChange({
+            prevValue: '12345',
+            nextValue: '123456',
+            length: 6,
+        })).toBe(6);
+    });
+    it('stays at edited index for deletions', () => {
+        expect(getNextIndexFromValueChange({
+            prevValue: '123',
+            nextValue: '12',
+            length: 6,
+        })).toBe(2);
+    });
+});

package/docs/changelog.mdx

@@ -9,6 +9,119 @@ import { BackToTopButton } 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.27.1
+
+### Patch Changes
+
+- [#990](https://github.com/utilitywarehouse/hearth/pull/990) [`958e0e1`](https://github.com/utilitywarehouse/hearth/commit/958e0e1a9d5451d1e11fecadc69ae3c5ad9d42ca) Thanks [@declanelcocks](https://github.com/declanelcocks)! - 🐛 [FIX]: Fix `Modal` layout when `inNavModal` and `stickyFooter={false}`.
+
+  Corrects the container flex style for `inNavModal` modals with a non-sticky footer, where the UX was not great when scrolling.
+
+  **Components affected**:
+  - `Modal`
+
+  **Developer changes**:
+
+  No changes required.
+
+- [#992](https://github.com/utilitywarehouse/hearth/pull/992) [`2560b3d`](https://github.com/utilitywarehouse/hearth/commit/2560b3dcba7ed4981fad585628f96afd07d8de4f) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Add optional leading `icon` support to `SegmentedControlOption`.
+
+  This adds an optional `icon` prop to `SegmentedControlOption`, allowing icons to be displayed before option labels in segmented controls.
+
+  Docs and stories were updated to include icon usage examples.
+
+  **Components affected**:
+  - `SegmentedControlOption`
+
+  **Developer changes**:
+
+  No changes required for existing usage.
+
+  To use the new optional icon prop:
+
+  ```tsx
+  import { SegmentedControl, SegmentedControlOption } from '@utilitywarehouse/hearth-react-native';
+  import { ElectricitySmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+
+  <SegmentedControl defaultValue="energy">
+    <SegmentedControlOption value="energy" icon={ElectricitySmallIcon}>
+      Energy
+    </SegmentedControlOption>
+    <SegmentedControlOption value="broadband">Broadband</SegmentedControlOption>
+  </SegmentedControl>;
+  ```
+
+## 0.27.0
+
+### Minor Changes
+
+- [#987](https://github.com/utilitywarehouse/hearth/pull/987) [`eb962d2`](https://github.com/utilitywarehouse/hearth/commit/eb962d2f33b63fa3aeda0b291fd41ace90d04c41) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `SegmentedControl` and `SegmentedControlOption` components.
+
+  This introduces a new segmented control component for switching between a small set of related options.
+  The component includes controlled and uncontrolled usage, size variants (`sm`, `md`), animated selected indicator movement, and improved accessibility semantics for screen readers.
+
+  **Components affected**:
+  - `SegmentedControl`
+  - `SegmentedControlOption`
+
+  **Developer changes**:
+
+  Import and compose the new components as follows:
+
+  ```tsx
+  import { SegmentedControl, SegmentedControlOption } from '@utilitywarehouse/hearth-react-native';
+
+  <SegmentedControl defaultValue="day" size="sm">
+    <SegmentedControlOption value="day">Day</SegmentedControlOption>
+    <SegmentedControlOption value="week">Week</SegmentedControlOption>
+    <SegmentedControlOption value="month">Month</SegmentedControlOption>
+  </SegmentedControl>;
+  ```
+
+### Patch Changes
+
+- [#989](https://github.com/utilitywarehouse/hearth/pull/989) [`c97122e`](https://github.com/utilitywarehouse/hearth/commit/c97122eb429ec4adef656fb245a9256a5619df61) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Ensure horizontal `Banner` fills available width when `onPress` is not provided.
+
+  Fixed a layout issue where a horizontal `Banner` without `onPress` could fail to stretch correctly within its parent container.
+
+  **Components affected**:
+  - `Banner`
+
+  **Developer changes**:
+
+  No changes required.
+
+## 0.26.0
+
+### Minor Changes
+
+- [#981](https://github.com/utilitywarehouse/hearth/pull/981) [`df56387`](https://github.com/utilitywarehouse/hearth/commit/df563872e6bf040d419f6c7fce2343ebe560edb9) Thanks [@declanelcocks](https://github.com/declanelcocks)! - 🌟 [ENHANCEMENT]: Improve `Modal` behaviour when used inside a React Navigation modal (`inNavModal`).
+
+  The following improvements have been made to the `Modal` component when used in a navigation context with `inNavModal={true}`:
+  - **`scrollable` prop**: Content is now rendered inside a `ScrollView` by default. Set `scrollable={false}` to opt out, for example when you need to centre content or use a custom layout.
+  - **`stickyFooter` support**: The `stickyFooter` prop now works correctly in `inNavModal` mode.
+  - **Auto full-screen detection**: When the modal fills the entire screen (e.g. with `presentation: 'fullScreenModal'`), the `fullscreen` style is applied automatically. The `fullscreen` prop is no longer available when `inNavModal` is `true`.
+
+  **Components affected**:
+  - `Modal`
+
+  **Developer changes**:
+
+  No changes are required for existing usage. If you were passing `fullscreen` alongside `inNavModal={true}`, remove the `fullscreen` prop — full-screen styling is now detected automatically:
+
+  ```diff
+  - <Modal inNavModal fullscreen>
+  + <Modal inNavModal>
+  ```
+
+  To disable the default `ScrollView` wrapping in `inNavModal` mode:
+
+  ```tsx
+  <Modal inNavModal scrollable={false}>
+    {/* custom layout */}
+  </Modal>
+  ```
+
 ## 0.25.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.27.0",
+  "version": "0.27.2-test",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -56,11 +56,11 @@
     "vite": "^7.1.3",
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
-    "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
     "@utilitywarehouse/hearth-svg-assets": "^0.5.0",
-    "@utilitywarehouse/hearth-tokens": "^0.2.3",
-    "@utilitywarehouse/hearth-react-icons": "^0.8.0"
+    "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
+    "@utilitywarehouse/hearth-react-icons": "^0.8.0",
+    "@utilitywarehouse/hearth-fonts": "^0.0.4",
+    "@utilitywarehouse/hearth-tokens": "^0.2.3"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",
@@ -85,6 +85,7 @@
     "figma:create": "figma connect create",
     "figma:publish": "figma connect publish",
     "test": "echo \"Error: no test specified\" && exit 1",
+    "test:storybook": "vitest run --project storybook",
     "dev": "npm run copyChangelog && storybook dev -p 6006",
     "dev:docs": "storybook dev -p 6002 --no-open --docs",
     "build:storybook": "npm run copyChangelog && storybook build",

package/src/components/Carousel/Carousel.tsx

@@ -328,13 +328,17 @@ const Carousel = ({
             onScrollEndDrag={handleWebScrollEnd}
             ref={scrollViewRef as any}
             scrollEnabled={!disabled}
-            pointerEvents={disabled ? 'none' : 'auto'}
             scrollEventThrottle={16}
             showsHorizontalScrollIndicator={false}
             snapToInterval={itemWidth || width}
             snapToAlignment={centered ? 'center' : 'start'}
             decelerationRate="fast"
-            style={[styles.webContainer, webContainerStyles, itemsStyle]}
+            style={[
+              styles.webContainer,
+              webContainerStyles,
+              itemsStyle,
+              { pointerEvents: disabled ? 'none' : 'auto' },
+            ]}
             contentContainerStyle={[styles.webContentContainer, webContentContainerStyle]}
             {...props}
           >