@utilitywarehouse/hearth-react-native 0.27.1 → 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.1 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/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/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

@@ -36,7 +36,7 @@ const SegmentedControlOptionRoot = ({ value, children, icon, accessibilityLabel,
     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.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, { 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';
@@ -112,6 +112,9 @@ const styles = StyleSheet.create(theme => ({
         alignItems: 'center',
         justifyContent: 'center',
     },
+    pointerEventsNone: {
+        pointerEvents: 'none',
+    },
     icon: {
         variants: {
             selected: {

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.1",
+  "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-svg-assets": "^0.5.0",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
     "@utilitywarehouse/hearth-react-icons": "^0.8.0",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
-    "@utilitywarehouse/hearth-tokens": "^0.2.3",
-    "@utilitywarehouse/hearth-svg-assets": "^0.5.0"
+    "@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}
           >

package/src/components/IconContainer/IconContainer.stories.tsx

@@ -1,5 +1,6 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
+import { Meta, StoryObj } from '@storybook/react-native';
 import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
+import { ComponentType } from 'react';
 import { IconContainer } from '.';
 import { VariantTitle } from '../../../docs/components';
 import { Box } from '../Box';
@@ -53,7 +54,9 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Playground: Story = { render: args => <IconContainer {...args} /> };
+export const Playground: Story = {
+  render: (args: typeof meta.args) => <IconContainer {...args} />,
+};
 
 export const Subtle: Story = {
   parameters: {
@@ -86,7 +89,7 @@ export const KitchenSink: Story = {
   parameters: {
     controls: { exclude: ['radiusNone', 'variant', 'color', 'size'] },
   },
-  render: ({ icon }) => {
+  render: ({ icon }: { icon: ComponentType }) => {
     const sizes: Array<'sm' | 'md' | 'lg'> = ['sm', 'md', 'lg'];
     const colors: Array<
       'pig' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'highlight'
@@ -95,33 +98,35 @@ export const KitchenSink: Story = {
       <Flex direction="column" spacing="lg">
         {sizes.map(size => (
           <Box key={size} gap="300">
-            <VariantTitle title={`Size: ${size.toUpperCase()} / Subtle`}> </VariantTitle>
-            <Flex direction="row" wrap="wrap" spacing="md">
-              {colors.map(color => (
-                <IconContainer
-                  key={`${size}-subtle-${color}`}
-                  icon={icon}
-                  size={size}
-                  variant="subtle"
-                  color={color}
-                />
-              ))}
-            </Flex>
-            <VariantTitle title={`Size: ${size.toUpperCase()} / Emphasis`}> </VariantTitle>
-            <Flex direction="row" wrap="wrap" spacing="md">
-              {colors.map(
-                color =>
-                  color !== 'highlight' && (
-                    <IconContainer
-                      key={`${size}-emphasis-${color}`}
-                      icon={icon}
-                      size={size}
-                      variant="emphasis"
-                      color={color}
-                    />
-                  )
-              )}
-            </Flex>
+            <VariantTitle title={`Size: ${size.toUpperCase()} / Subtle`}>
+              <Flex direction="row" wrap="wrap" spacing="md">
+                {colors.map(color => (
+                  <IconContainer
+                    key={`${size}-subtle-${color}`}
+                    icon={icon}
+                    size={size}
+                    variant="subtle"
+                    color={color}
+                  />
+                ))}
+              </Flex>
+            </VariantTitle>
+            <VariantTitle title={`Size: ${size.toUpperCase()} / Emphasis`}>
+              <Flex direction="row" wrap="wrap" spacing="md">
+                {colors.map(
+                  color =>
+                    color !== 'highlight' && (
+                      <IconContainer
+                        key={`${size}-emphasis-${color}`}
+                        icon={icon}
+                        size={size}
+                        variant="emphasis"
+                        color={color}
+                      />
+                    )
+                )}
+              </Flex>
+            </VariantTitle>
           </Box>
         ))}
       </Flex>

package/src/components/List/List.tsx

@@ -14,7 +14,8 @@ const List = ({
   invalidText,
   ...props
 }: ListProps) => {
-  const { loading, disabled, container = 'none' } = props;
+  const { loading, disabled, container = 'none', testID, style, ...rest } = props;
+
   const orderRef = useRef<string[]>([]);
   const [firstItemId, setFirstItemId] = useState<string | undefined>(undefined);
   const containerToCard: {
@@ -51,7 +52,7 @@ const List = ({
   styles.useVariants({ disabled });
   return (
     <ListContext.Provider value={value}>
-      <View {...props} style={[styles.container, props.style]}>
+      <View {...rest} style={[styles.container, style]}>
         {heading ? (
           <SectionHeader
             heading={heading}
@@ -61,10 +62,10 @@ const List = ({
           />
         ) : null}
         {container === 'none' ? (
-          <View>{children}</View>
+          <View testID={testID}>{children}</View>
         ) : (
           React.Children.count(children) > 0 && (
-            <Card {...containerToCard} noPadding style={styles.card}>
+            <Card {...containerToCard} noPadding style={styles.card} testID={testID}>
               <>{children}</>
             </Card>
           )

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -206,7 +206,7 @@ const SegmentedControl = ({
         {...remainingProps}
       >
         {hasIndicator ? (
-          <Indicator pointerEvents="none" style={[styles.indicator, indicatorStyle]} />
+          <Indicator style={[styles.indicator, styles.pointerEventsNone, indicatorStyle]} />
         ) : null}
         {children}
       </View>
@@ -252,6 +252,9 @@ 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/src/components/SegmentedControl/SegmentedControlOption.tsx

@@ -101,8 +101,7 @@ const SegmentedControlOptionRoot = ({
             {children}
           </BodyText>
           <AnimatedView
-            pointerEvents="none"
-            style={[styles.textLayer, regularLabelStyle]}
+            style={[styles.textLayer, styles.pointerEventsNone, regularLabelStyle]}
             accessible={false}
             accessibilityElementsHidden
             importantForAccessibility="no-hide-descendants"
@@ -113,8 +112,7 @@ const SegmentedControlOptionRoot = ({
             </BodyText>
           </AnimatedView>
           <AnimatedView
-            pointerEvents="none"
-            style={[styles.textLayer, selectedLabelStyle]}
+            style={[styles.textLayer, styles.pointerEventsNone, selectedLabelStyle]}
             accessible={false}
             accessibilityElementsHidden
             importantForAccessibility="no-hide-descendants"
@@ -206,6 +204,9 @@ const styles = StyleSheet.create(theme => ({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  pointerEventsNone: {
+    pointerEvents: 'none',
+  },
   icon: {
     variants: {
       selected: {

package/src/components/TimePicker/TimePickerWheel.tsx

@@ -46,8 +46,8 @@ const TimePickerWheel = ({ value, setValue = () => {}, items }: TimePickerWheelP
 
   const renderOverlay = useCallback(
     () => (
-      <View style={[styles.overlayContainer]} pointerEvents="none">
-        <View pointerEvents="none" style={[styles.fadeOverlay, { height: fadeHeight }]}>
+      <View style={[styles.overlayContainer, styles.pointerEventsNone]}>
+        <View style={[styles.fadeOverlay, styles.pointerEventsNone, { height: fadeHeight }]}>
           <Svg width="100%" height="100%" preserveAspectRatio="none">
             <Defs>
               <LinearGradient id={`${gradientId}-top`} x1="0" y1="0" x2="0" y2="1">
@@ -59,8 +59,12 @@ const TimePickerWheel = ({ value, setValue = () => {}, items }: TimePickerWheelP
           </Svg>
         </View>
         <View
-          pointerEvents="none"
-          style={[styles.fadeOverlay, styles.fadeOverlayBottom, { height: fadeHeight }]}
+          style={[
+            styles.fadeOverlay,
+            styles.fadeOverlayBottom,
+            styles.pointerEventsNone,
+            { height: fadeHeight },
+          ]}
         >
           <Svg width="100%" height="100%" preserveAspectRatio="none">
             <Defs>
@@ -149,6 +153,9 @@ const styles = StyleSheet.create(theme => ({
     top: undefined,
     bottom: 0,
   },
+  pointerEventsNone: {
+    pointerEvents: 'none',
+  },
 }));
 
 export default TimePickerWheel;

package/src/components/Toast/Toast.context.tsx

@@ -85,7 +85,7 @@ export const ToastProvider: React.FC<ToastProviderProps> = ({
   return (
     <ToastContext.Provider value={{ addToast, removeToast }}>
       {children}
-      <View pointerEvents="box-none" style={styles.container as any}>
+      <View style={styles.container as any}>
         <View style={styles.stack as any}>
           {toasts.map(t => (
             <ToastItem

package/src/components/VerificationInput/VerificationInput.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { InfoMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { useRef, useState } from 'react';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 import { VerificationInput, type VerificationInputHandle } from '.';
 import { VariantTitle } from '../../../docs/components';
 import { BodyText } from '../BodyText';
@@ -214,3 +215,35 @@ export const RefMethods: Story = {
     );
   },
 };
+
+export const FocusProgressionAfterEmptySlotSelection: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => {
+    const [value, setValue] = useState('12');
+
+    return (
+      <Flex direction="column" spacing="sm" style={{ width: 400 }}>
+        <VerificationInput label="Verification Code" value={value} onChangeText={setValue} />
+      </Flex>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByLabelText('Verification Code') as HTMLInputElement;
+
+    input.focus();
+
+    input.setSelectionRange(4, 4);
+    input.dispatchEvent(new Event('select', { bubbles: true }));
+
+    await userEvent.keyboard('3');
+
+    await waitFor(() => {
+      expect(input.value).toBe('123');
+      expect(input.selectionStart).toBe(3);
+      expect(input.selectionEnd).toBe(3);
+    });
+  },
+};

package/src/components/VerificationInput/VerificationInput.tsx

@@ -1,8 +1,9 @@
-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 type { VerificationInputHandle, VerificationInputProps } from './VerificationInput.props';
+import { getNextIndexFromValueChange } from './VerificationInput.utils';
 import { VerificationInputSlot } from './VerificationInputSlot';
 
 const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputProps>(
@@ -49,12 +50,15 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
       }
     }, [length, value]);
 
-    const updateValue = (nextValue: string) => {
-      const trimmedValue = nextValue.slice(0, length);
-      latestValueRef.current = trimmedValue;
-      setDisplayValue(trimmedValue);
-      onChangeText?.(trimmedValue);
-    };
+    const updateValue = useCallback(
+      (nextValue: string) => {
+        const trimmedValue = nextValue.slice(0, length);
+        latestValueRef.current = trimmedValue;
+        setDisplayValue(trimmedValue);
+        onChangeText?.(trimmedValue);
+      },
+      [length, onChangeText]
+    );
 
     const setSelectionIndex = (index: number) => {
       const clampedIndex = Math.max(0, Math.min(index, length));
@@ -76,16 +80,6 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
       setFocusedIndex(Math.min(clampedIndex, length - 1));
     };
 
-    const findDiffIndex = (prevValue: string, nextValue: string) => {
-      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: string) => {
       const prevValue = latestValueRef.current;
       const nextValue = text.slice(0, length);
@@ -94,14 +88,7 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
       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));
@@ -171,7 +158,7 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
           }
         },
       }),
-      [length, onChangeText]
+      [length, updateValue]
     );
 
     const slots = Array.from({ length }, (_, index) => index);
@@ -252,7 +239,6 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
             maxLength={length}
             caretHidden
             style={styles.hiddenInput}
-            pointerEvents="none"
           />
           {slots.map(index => {
             const char = displayValue[index] || '';
@@ -299,11 +285,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,
   },
 }));
 

package/src/components/VerificationInput/VerificationInput.utils.test.ts

@@ -0,0 +1,48 @@
+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/src/components/VerificationInput/VerificationInput.utils.ts

@@ -0,0 +1,32 @@
+interface GetNextIndexFromValueChangeOptions {
+  prevValue: string;
+  nextValue: string;
+  length: number;
+}
+
+export const findDiffIndex = (prevValue: string, nextValue: string): number => {
+  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,
+}: GetNextIndexFromValueChangeOptions): number => {
+  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/tsconfig.eslint.json

@@ -5,7 +5,8 @@
     "./src/**/*.stories.tsx",
     "./src/**/*.figma.tsx",
     "./.storybook/**/*",
-    "./docs/**/*"
+    "./docs/**/*",
+    "./vitest.unit.config.ts"
   ],
   "exclude": [
     "node_modules"

package/vitest.config.js

@@ -1,35 +1,33 @@
-import path from "node:path";
-import { fileURLToPath } from "node:url";
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 
-import { defineConfig } from "vitest/config";
+import { defineConfig } from 'vitest/config';
 
-import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
 
 const dirname =
-  typeof __dirname !== "undefined"
-    ? __dirname
-    : path.dirname(fileURLToPath(import.meta.url));
+  typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
 
 // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
 export default defineConfig({
   test: {
-    workspace: [
+    projects: [
       {
         extends: true,
         plugins: [
           // The plugin will run tests for the stories defined in your Storybook config
           // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-          storybookTest({ configDir: path.join(dirname, ".storybook") }),
+          storybookTest({ configDir: path.join(dirname, '.storybook') }),
         ],
         test: {
-          name: "storybook",
+          name: 'storybook',
           browser: {
             enabled: true,
             headless: true,
-            provider: "playwright",
-            instances: [{ browser: "chromium" }],
+            provider: 'playwright',
+            instances: [{ browser: 'chromium' }],
           },
-          setupFiles: [".storybook/vitest.setup.js"],
+          setupFiles: ['.storybook/vitest.setup.ts'],
         },
       },
     ],

package/vitest.unit.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    include: ['src/**/*.test.ts', 'src/**/*.test.tsx'],
+    exclude: ['src/**/*.stories.ts', 'src/**/*.stories.tsx'],
+    environment: 'node',
+  },
+});

package/.turbo/turbo-lint.log

@@ -1,72 +0,0 @@
-
-> @utilitywarehouse/hearth-react-native@0.27.1 lint /home/runner/work/hearth/hearth/packages/react-native
-> TIMING=1 eslint .
-
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Carousel/Carousel.context.tsx
-  6: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
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Carousel/Carousel.tsx
-  146:6  warning  React Hook useMemo has a missing dependency: 'hasCarouselControlsInTree'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePicker.tsx
-  109:6  warning  React Hook useCallback has an unnecessary dependency: 'modalRef.current'. Either exclude it or remove the dependency array. Mutable values like 'modalRef.current' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-  259:6  warning  React Hook useEffect has a missing dependency: 'initialState'. Either include it or remove the dependency array                                                                                                                                     react-hooks/exhaustive-deps
-  346:6  warning  React Hook useEffect has a missing dependency: 'onChange'. Either include it or remove the dependency array                                                                                                                                         react-hooks/exhaustive-deps
-  468:5  warning  React Hook useCallback has a missing dependency: 'onChange'. Either include it or remove the dependency array                                                                                                                                       react-hooks/exhaustive-deps
-  536:6  warning  React Hook useEffect has a missing dependency: 'onSelectMonth'. Either include it or remove the dependency array                                                                                                                                    react-hooks/exhaustive-deps
-  542:6  warning  React Hook useEffect has a missing dependency: 'onSelectYear'. Either include it or remove the dependency array                                                                                                                                     react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerDay.tsx
-  76:6  warning  React Hook useMemo has an unnecessary dependency: 'styles.rangeRoot'. Either exclude it or remove the dependency array. Outer scope values like 'styles.rangeRoot' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-  84:6  warning  React Hook useMemo has a missing dependency: 'isSelected'. Either include it or remove the dependency array                                                                                                                                         react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerDays.tsx
-  179:6  warning  React Hook useMemo has unnecessary dependencies: 'month' and 'year'. Either exclude them or remove the dependency array  react-hooks/exhaustive-deps
-
-/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/Modal/Modal.tsx
-   86:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-  313:5  warning  React Hook useCallback has a missing dependency: 'footer'. Either include it or remove the dependency array                                                                                                                                   react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.web.tsx
-  66:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' 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/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
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Tabs/Tabs.tsx
-   53:6   warning  React Hook useEffect has a missing dependency: 'tabValues'. Either include it or remove the dependency array                              react-hooks/exhaustive-deps
-   53:7   warning  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps
-  104:5   warning  React Hook useMemo has an unnecessary dependency: 'tabValues'. Either exclude it or remove the dependency array                           react-hooks/exhaustive-deps
-  127:62  warning  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Textarea/Textarea.tsx
-  45:6  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/Toast/Toast.context.tsx
-   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
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/VerificationInput/VerificationInput.tsx
-  174:7  warning  React Hook useImperativeHandle has a missing dependency: 'updateValue'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
-
-✖ 25 problems (0 errors, 25 warnings)
-
-Rule                                      | Time (ms) | Relative
-:-----------------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars         |  1499.293 |    61.6%
-react-hooks/exhaustive-deps               |   127.430 |     5.2%
-react-hooks/rules-of-hooks                |    84.158 |     3.5%
-no-global-assign                          |    65.981 |     2.7%
-no-unexpected-multiline                   |    44.926 |     1.8%
-@typescript-eslint/ban-ts-comment         |    39.212 |     1.6%
-@typescript-eslint/triple-slash-reference |    36.913 |     1.5%
-no-misleading-character-class             |    36.268 |     1.5%
-no-useless-escape                         |    28.431 |     1.2%
-@typescript-eslint/no-unused-expressions  |    25.564 |     1.1%