@utilitywarehouse/hearth-react-native 0.22.0 → 0.22.1

package/.turbo/turbo-build.log

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

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.22.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.22.1 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint .
 
 
@@ -54,19 +54,19 @@
   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
-  58:7  warning  React Hook useImperativeHandle has a missing dependency: 'inputRefs'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+  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                 |  1687.263 |    65.5%
-react-hooks/rules-of-hooks                        |    78.867 |     3.1%
-react-hooks/exhaustive-deps                       |    78.504 |     3.0%
-no-global-assign                                  |    75.145 |     2.9%
-no-unexpected-multiline                           |    55.153 |     2.1%
-no-loss-of-precision                              |    46.457 |     1.8%
-@typescript-eslint/ban-ts-comment                 |    45.439 |     1.8%
-no-misleading-character-class                     |    37.162 |     1.4%
-@typescript-eslint/triple-slash-reference         |    28.294 |     1.1%
-@typescript-eslint/no-unnecessary-type-constraint |    20.347 |     0.8%
+Rule                                      | Time (ms) | Relative
+:-----------------------------------------|----------:|--------:
+@typescript-eslint/no-unused-vars         |  1480.154 |    63.5%
+no-global-assign                          |    86.111 |     3.7%
+react-hooks/exhaustive-deps               |    81.893 |     3.5%
+react-hooks/rules-of-hooks                |    58.807 |     2.5%
+no-misleading-character-class             |    53.302 |     2.3%
+@typescript-eslint/ban-ts-comment         |    49.364 |     2.1%
+no-unexpected-multiline                   |    36.564 |     1.6%
+no-fallthrough                            |    32.890 |     1.4%
+@typescript-eslint/triple-slash-reference |    30.004 |     1.3%
+no-regex-spaces                           |    26.454 |     1.1%

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.22.1
+
+### Patch Changes
+
+- [#971](https://github.com/utilitywarehouse/hearth/pull/971) [`be1dfeb`](https://github.com/utilitywarehouse/hearth/commit/be1dfebd4b43f2df8ef6c5eaa42a88364e796479) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Improve VerificationInput OTP handling and accessibility
+
+  VerificationInput now uses a single hidden input to manage focus, selection, and paste behaviour across platforms, improving caret handling and bulk entry. Accessibility labels and hints are now derived from the form field to provide clearer screen reader output.
+
+  **Components affected**:
+  - `VerificationInput`
+
+  **Developer changes**:
+
+  No changes required.
+
 ## 0.22.0
 
 ### Minor Changes

package/build/components/VerificationInput/VerificationInput.js

@@ -1,36 +1,187 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useImperativeHandle } from 'react';
-import { View } from 'react-native';
+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 { StyleSheet } from 'react-native-unistyles';
 import { FormField } from '../FormField';
-import { useVerificationInput } from './useVerificationInput';
 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;
-    const { inputRefs, displayValue, focusedIndex, handleFocus, handleBlur, handleChangeText, handleKeyPress, } = useVerificationInput({
-        value,
-        onChangeText,
-    });
+    const inputRef = useRef(null);
+    const latestValueRef = useRef(value);
+    const [displayValue, setDisplayValue] = useState(value);
+    const [focusedIndex, setFocusedIndex] = useState(null);
+    const [selection, setSelection] = useState({ start: 0, end: 0 });
+    const latestSelectionRef = useRef(selection);
+    const ignoreNextSelectionRef = useRef(false);
+    const pendingFocusIndexRef = useRef(null);
+    useEffect(() => {
+        if (value !== latestValueRef.current) {
+            const trimmedValue = value.slice(0, length);
+            latestValueRef.current = trimmedValue;
+            setDisplayValue(trimmedValue);
+            const nextPos = Math.min(trimmedValue.length, length);
+            const nextSelection = { start: nextPos, end: nextPos };
+            ignoreNextSelectionRef.current = true;
+            latestSelectionRef.current = nextSelection;
+            setSelection(nextSelection);
+        }
+    }, [length, value]);
+    const updateValue = (nextValue) => {
+        const trimmedValue = nextValue.slice(0, length);
+        latestValueRef.current = trimmedValue;
+        setDisplayValue(trimmedValue);
+        onChangeText?.(trimmedValue);
+    };
+    const setSelectionIndex = (index) => {
+        const clampedIndex = Math.max(0, Math.min(index, length));
+        const hasChar = !!latestValueRef.current[clampedIndex];
+        const endIndex = hasChar ? Math.min(clampedIndex + 1, length) : clampedIndex;
+        const nextSelection = { start: clampedIndex, end: endIndex };
+        ignoreNextSelectionRef.current = true;
+        latestSelectionRef.current = nextSelection;
+        setSelection(nextSelection);
+        setFocusedIndex(Math.min(clampedIndex, length - 1));
+    };
+    const setCaretIndex = (index) => {
+        const clampedIndex = Math.max(0, Math.min(index, length));
+        const nextSelection = { start: clampedIndex, end: clampedIndex };
+        ignoreNextSelectionRef.current = true;
+        latestSelectionRef.current = nextSelection;
+        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);
+        const prevLength = prevValue.length;
+        const nextLength = nextValue.length;
+        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);
+        }
+        updateValue(nextValue);
+        if (isBulkInsert) {
+            setCaretIndex(Math.min(nextLength, length));
+            if (shouldBlur) {
+                inputRef.current?.blur();
+            }
+            return;
+        }
+        if (nextIndex >= length) {
+            setCaretIndex(nextIndex);
+            if (shouldBlur) {
+                inputRef.current?.blur();
+            }
+            return;
+        }
+        if (nextLength >= length) {
+            setSelectionIndex(nextIndex);
+            inputRef.current?.blur();
+            return;
+        }
+        const hasNextChar = !!nextValue[nextIndex];
+        if (hasNextChar) {
+            setSelectionIndex(nextIndex);
+        }
+        else {
+            setCaretIndex(nextIndex);
+        }
+    };
+    const handleFocus = () => {
+        if (pendingFocusIndexRef.current !== null) {
+            setSelectionIndex(pendingFocusIndexRef.current);
+            pendingFocusIndexRef.current = null;
+            return;
+        }
+        setFocusedIndex(Math.min(selection.start, length - 1));
+    };
+    const handleBlur = () => {
+        setFocusedIndex(null);
+    };
     useImperativeHandle(ref, () => ({
-        focus: () => inputRefs.current[0]?.focus(),
-        blur: () => {
-            inputRefs.current.forEach(input => input?.blur());
+        focus: () => {
+            inputRef.current?.focus();
+            const nextIndex = Math.min(latestValueRef.current.length, length - 1);
+            if (latestValueRef.current.length >= length) {
+                setSelectionIndex(nextIndex);
+            }
+            else {
+                setCaretIndex(nextIndex);
+            }
+        },
+        blur: () => inputRef.current?.blur(),
+        clear: () => {
+            updateValue('');
+            setSelectionIndex(0);
+            inputRef.current?.blur();
+            setFocusedIndex(null);
         },
-        clear: () => onChangeText?.(''),
         focusIndex: (index) => {
             if (index >= 0 && index < length) {
-                inputRefs.current[index]?.focus();
+                inputRef.current?.focus();
+                setSelectionIndex(index);
             }
         },
     }), [length, onChangeText]);
     const slots = Array.from({ length }, (_, index) => index);
-    return (_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatus, validText: validText, invalidText: invalidText, disabled: disabled, readonly: readonly, style: [styles.root, style], ...props, children: _jsx(View, { style: styles.slotsContainer, children: slots.map(index => {
-                const char = displayValue[index] || '';
-                const isActive = focusedIndex === index;
-                return (_jsx(VerificationInputSlot, { ref: inputRef => {
-                        inputRefs.current[index] = inputRef;
-                    }, autoFocus: index === 0 && autoFocus, value: char, isActive: isActive, validationStatus: validationStatus, disabled: disabled, readonly: readonly, secureTextEntry: secureTextEntry, onChangeText: text => handleChangeText(text, index), onKeyPress: e => handleKeyPress(e, index), onFocus: () => handleFocus(index), onBlur: handleBlur }, index));
-            }) }) }));
+    const getAccessibilityLabel = () => {
+        return label || props.accessibilityLabel;
+    };
+    const getAccessibilityHint = () => {
+        let accessibilityHint = '';
+        if (helperText) {
+            accessibilityHint = accessibilityHint + helperText;
+        }
+        if (validationStatus !== 'initial') {
+            if (accessibilityHint.length > 0) {
+                accessibilityHint = accessibilityHint + ', ';
+            }
+            if (validationStatus === 'invalid' && invalidText) {
+                accessibilityHint = accessibilityHint + invalidText;
+            }
+            if (validationStatus === 'valid' && validText) {
+                accessibilityHint = accessibilityHint + validText;
+            }
+        }
+        return accessibilityHint || props.accessibilityHint;
+    };
+    return (_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatus, validText: validText, invalidText: invalidText, disabled: disabled, readonly: readonly, accessibilityHandledByChildren: true, style: [styles.root, style], ...props, children: _jsxs(View, { style: styles.slotsContainer, children: [_jsx(TextInput, { ref: inputRef, value: displayValue, autoFocus: autoFocus, editable: !disabled && !readonly, accessibilityLabel: getAccessibilityLabel(), accessibilityHint: getAccessibilityHint(), accessibilityState: { disabled: disabled || readonly }, importantForAccessibility: "yes", onChangeText: handleChangeText, onSelectionChange: event => {
+                        const nextSelection = event.nativeEvent.selection;
+                        if (ignoreNextSelectionRef.current &&
+                            (nextSelection.start !== latestSelectionRef.current.start ||
+                                nextSelection.end !== latestSelectionRef.current.end)) {
+                            return;
+                        }
+                        if (pendingFocusIndexRef.current !== null) {
+                            return;
+                        }
+                        ignoreNextSelectionRef.current = false;
+                        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 => {
+                    const char = displayValue[index] || '';
+                    const isActive = focusedIndex === index;
+                    const displayChar = secureTextEntry && char ? '*' : char;
+                    return (_jsx(VerificationInputSlot, { value: displayChar, isActive: isActive, showCaret: isActive && !displayChar, validationStatus: validationStatus, disabled: disabled, readonly: readonly, secureTextEntry: secureTextEntry, onPress: () => {
+                            pendingFocusIndexRef.current = index;
+                            inputRef.current?.focus();
+                            setSelectionIndex(index);
+                        } }, index));
+                })] }) }));
 });
 const styles = StyleSheet.create(theme => ({
     root: {
@@ -42,6 +193,17 @@ const styles = StyleSheet.create(theme => ({
         flexDirection: 'row',
         gap: theme.components.input.verification.gap,
         width: '100%',
+        position: 'relative',
+    },
+    hiddenInput: {
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        left: 0,
+        top: 0,
+        color: 'transparent',
+        fontSize: 1,
+        opacity: 0.1,
     },
 }));
 VerificationInput.displayName = 'VerificationInput';

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

@@ -1,9 +1,13 @@
-import { TextInput, TextInputProps } from 'react-native';
-interface VerificationInputSlotProps extends TextInputProps {
+import { View, ViewProps } from 'react-native';
+interface VerificationInputSlotProps extends ViewProps {
+    value: string;
     isActive: boolean;
+    showCaret?: boolean;
     validationStatus: 'initial' | 'valid' | 'invalid';
     disabled?: boolean;
     readonly?: boolean;
+    onPress?: () => void;
+    secureTextEntry?: boolean;
 }
-export declare const VerificationInputSlot: import("react").ForwardRefExoticComponent<VerificationInputSlotProps & import("react").RefAttributes<TextInput>>;
+export declare const VerificationInputSlot: import("react").ForwardRefExoticComponent<VerificationInputSlotProps & import("react").RefAttributes<View>>;
 export {};

package/build/components/VerificationInput/VerificationInputSlot.js

@@ -1,28 +1,46 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect } from 'react';
+import { Pressable, Text } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
-import InputField from '../Input/InputField';
-export const VerificationInputSlot = forwardRef(({ isActive, validationStatus, disabled, readonly, style, ...props }, ref) => {
+export const VerificationInputSlot = forwardRef(({ value, isActive, showCaret, validationStatus, disabled, readonly, style, onPress, secureTextEntry, ...props }, ref) => {
     styles.useVariants({
         disabled,
         readonly,
         validationStatus,
         active: isActive,
+        secureTextEntry,
     });
-    return (_jsx(InputField, { ref: ref, ...props, editable: !disabled && !readonly, selectTextOnFocus: true, keyboardType: "number-pad", style: [styles.slot, style] }));
+    const caretOpacity = useSharedValue(0);
+    const animatedCaretStyle = useAnimatedStyle(() => ({
+        opacity: caretOpacity.value,
+    }));
+    useEffect(() => {
+        if (showCaret && !disabled && !readonly) {
+            caretOpacity.value = withRepeat(withTiming(1, { duration: 500, easing: Easing.inOut(Easing.ease) }), -1, true);
+            return;
+        }
+        caretOpacity.value = withTiming(0, { duration: 150, easing: Easing.out(Easing.ease) });
+    }, [caretOpacity, disabled, readonly, showCaret]);
+    return (_jsxs(Pressable, { ref: ref, onPress: onPress, disabled: disabled || readonly, style: [styles.slot, style], accessibilityRole: "button", accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...props, children: [_jsx(Text, { style: styles.slotText, children: value }), showCaret && !disabled && !readonly && (_jsx(Animated.View, { style: [styles.caret, animatedCaretStyle] }))] }));
 });
 VerificationInputSlot.displayName = 'VerificationInputSlot';
 const styles = StyleSheet.create(theme => ({
     slot: {
-        flex: 0,
+        flexGrow: 0,
+        flexShrink: 0,
         width: theme.components.input.height,
         height: theme.components.input.height,
+        minWidth: theme.components.input.height,
+        minHeight: theme.components.input.height,
         borderWidth: theme.components.input.borderWidth,
         borderColor: theme.color.border.strong,
         borderRadius: theme.components.input.borderRadius,
         backgroundColor: theme.color.surface.neutral.strong,
-        textAlign: 'center',
+        alignItems: 'center',
+        justifyContent: 'center',
         padding: 0,
+        position: 'relative',
         variants: {
             disabled: {
                 true: {
@@ -69,4 +87,24 @@ const styles = StyleSheet.create(theme => ({
             },
         ],
     },
+    slotText: {
+        color: theme.color.text.primary,
+        fontSize: theme.typography.mobile.bodyText.md.fontSize,
+        fontFamily: theme.typography.mobile.bodyText.fontFamily,
+        fontWeight: `${theme.typography.mobile.bodyText.fontWeight}`,
+        textAlign: 'center',
+        variants: {
+            secureTextEntry: {
+                true: {
+                    paddingTop: 5,
+                },
+            },
+        },
+    },
+    caret: {
+        position: 'absolute',
+        width: 2,
+        height: '55%',
+        backgroundColor: theme.color.text.brand,
+    },
 }));

package/docs/changelog.mdx

@@ -9,6 +9,255 @@ 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.21.0
+
+### Minor Changes
+
+- [#917](https://github.com/utilitywarehouse/hearth/pull/917) [`6a016dc`](https://github.com/utilitywarehouse/hearth/commit/6a016dca0d1a06e40a877da15aced590d0c68112) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add 2xl size variant to Heading component
+
+  The `Heading` component now supports a `2xl` size option, providing a larger heading size for prominent page titles and hero sections. This size is responsive across device sizes with appropriate font sizes and line heights for mobile, tablet, and desktop viewports.
+
+  **Components affected**:
+  - `Heading`
+
+  **Developer changes**:
+
+  Use the new `2xl` size prop:
+
+  ```tsx
+  <Heading size="2xl">Welcome to Hearth</Heading>
+  ```
+
+  The `2xl` size will render with:
+  - Mobile: 44px font size, 52px line height
+  - Tablet: 44px font size, 52px line height
+  - Desktop: 54px font size, 62px line height
+
+- [#949](https://github.com/utilitywarehouse/hearth/pull/949) [`e1aacf0`](https://github.com/utilitywarehouse/hearth/commit/e1aacf06a58fd8358e9e7546ec35d8194a0d8d74) Thanks [@MichalCiesliczka](https://github.com/MichalCiesliczka)! - 🌟 [FEATURE]: Add segment refs to `DateInput` for programmatic focus control
+
+  The `DateInput` component now supports direct refs for each segment input via `dayRef`, `monthRef`, and `yearRef`.
+  This makes it easier to move focus between segments from custom flows (for example, advancing focus after validation or from custom buttons).
+
+  Documentation and Storybook examples are also updated to show how to use segment refs in real usage.
+
+  **Components affected**:
+  - `DateInput`
+
+  **Developer changes**:
+
+  You can now pass refs to each segment and call `.focus()` when needed:
+
+  ```tsx
+  import { useRef, useState } from 'react';
+  import { TextInput } from 'react-native';
+  import { Button, DateInput } from '@utilitywarehouse/hearth-react-native';
+
+  const DateWithSegmentFocus = () => {
+    const [day, setDay] = useState('');
+    const [month, setMonth] = useState('');
+    const [year, setYear] = useState('');
+
+    const dayRef = useRef<TextInput>(null);
+    const monthRef = useRef<TextInput>(null);
+    const yearRef = useRef<TextInput>(null);
+
+    return (
+      <>
+        <DateInput
+          label="Date of birth"
+          dayValue={day}
+          monthValue={month}
+          yearValue={year}
+          onDayChange={setDay}
+          onMonthChange={setMonth}
+          onYearChange={setYear}
+          dayRef={dayRef}
+          monthRef={monthRef}
+          yearRef={yearRef}
+        />
+
+        <Button onPress={() => monthRef.current?.focus()}>Focus month</Button>
+      </>
+    );
+  };
+  ```
+
+  This is a non-breaking enhancement, so existing `DateInput` usage continues to work without any changes.
+
+- [#918](https://github.com/utilitywarehouse/hearth/pull/918) [`2db4dbe`](https://github.com/utilitywarehouse/hearth/commit/2db4dbe273583239b148c4399af829df596a00c1) Thanks [@jordmccord](https://github.com/jordmccord)! - 💔 [BREAKING CHANGE]: Simplify semantic token naming and introduce utility prop types
+
+  This release simplifies the semantic token naming convention and introduces a new utility prop system to make the API more intuitive and consistent across components.
+
+  **Components affected**:
+  - `Box`
+  - `Container`
+  - `Card`
+  - `Flex`
+  - `Grid`
+  - `Center`
+  - `BodyText`
+  - `Heading`
+  - `DetailText`
+  - `Carousel`
+  - `CarouselItem`
+
+  **Developer changes**:
+
+  ### Background Colors
+
+  Background color props now accept simplified semantic tokens. Update your code as follows:
+
+  ```diff
+  - <Box backgroundColor="backgroundPrimary">
+  + <Box backgroundColor="primary">
+
+  - <Box backgroundColor="backgroundSecondary">
+  + <Box backgroundColor="secondary">
+
+  - <Box backgroundColor="backgroundBrand">
+  + <Box backgroundColor="brand">
+
+  - <Container bg="backgroundPrimary">
+  + <Container bg="primary">
+  ```
+
+  You can still use full color tokens (e.g., `backgroundColor={color.blue[400]}`) by using a `StyleSheet`, the `useTheme` hook, or directly importing from the tokens library:
+
+  ```tsx
+  import { StyleSheet } from 'react-native';
+
+  const styles = StyleSheet.create(theme => ({
+    customBackground: {
+      backgroundColor: theme.color.blue[400],
+    },
+  }));
+
+  <Box style={styles.customBackground} />;
+  ```
+
+  ```tsx
+  import { useTheme } from '@utilitywarehouse/hearth-react-native';
+
+  const theme = useTheme();
+
+  <Box backgroundColor={theme.color.purple[800]} />;
+  ```
+
+  ```tsx
+  import { color } from '@utilitywarehouse/hearth-tokens';
+
+  <Box backgroundColor={color.blue[400]} />;
+  ```
+
+  ### Text Colors
+
+  Text color props now accept simplified semantic tokens:
+
+  ```diff
+  - <BodyText color="white">Text</BodyText>
+  + <BodyText color="inverted">Text</BodyText>
+
+  - <BodyText color="grey1000">Text</BodyText>
+  + <BodyText color="primary">Text</BodyText>
+
+  - <Heading color="textSecondary">Heading</Heading>
+  + <Heading color="secondary">Heading</Heading>
+  ```
+
+  ### Border Colors
+
+  Border color props now accept simplified semantic tokens:
+
+  ```diff
+  - <Box borderColor="grey800">
+  + <Box borderColor="strong">
+
+  - <Box borderColor="borderSubtle">
+  + <Box borderColor="subtle">
+  ```
+
+  ### Utility Props
+
+  Components now support consistent utility props through shared type interfaces. The following components have been updated to support additional utility props:
+  - **Container**: Added `MarginProps`, `PaddingProps`, `GapProps`, and `BackgroundColorProps`
+  - **Card**: Added `MarginProps` and `GapProps`
+  - **Flex**: Now properly supports `MarginProps`, `PaddingProps`, and `GapProps`
+  - **Text components** (BodyText, Heading, DetailText): Now support `MarginProps`
+
+  This means you can now use margin utilities directly on these components:
+
+  ```tsx
+  <BodyText mt="200" mb="100">Text with margin utilities</BodyText>
+  <Container mx="300" py="200">Container with spacing utilities</Container>
+  <Card mt="200" gap="100">Card with margin and gap utilities</Card>
+  ```
+
+  **Migration guide**:
+  1. Replace semantic background color tokens:
+     - `backgroundPrimary` → `primary`
+     - `backgroundSecondary` → `secondary`
+     - `backgroundBrand` → `brand`
+  2. Replace semantic text color tokens:
+     - `white` → `inverted` (for text on dark backgrounds)
+     - `grey1000` / `textPrimary` → `primary`
+     - `textSecondary` → `secondary`
+  3. Replace semantic border color tokens:
+     - `grey800` / `borderStrong` → `strong`
+     - `borderSubtle` → `subtle`
+  4. For non-semantic colors, use a `StyleSheet` and use the full color token from the theme:
+
+  ```tsx
+  import { StyleSheet } from 'react-native';
+
+  const styles = StyleSheet.create(theme => ({
+    customBackground: {
+      backgroundColor: theme.color.blue[400],
+    },
+  }));
+
+  <Box style={styles.customBackground} />;
+  ```
+
+  or the `useTheme` hook:
+
+  ```tsx
+  import { useTheme } from '@utilitywarehouse/hearth-react-native';
+
+  const theme = useTheme();
+  <Box backgroundColor={theme.color.purple[800]} />;
+  ```
+
+  or use the tokens library:
+
+  ```tsx
+  import { color } from '@utilitywarehouse/hearth-tokens';
+
+  <Box backgroundColor={color.purple[800]} />;
+  ```
+
+  **Backwards compatibility**:
+
+  The full color tokens (e.g., `backgroundPrimary`, `grey1000`) are still supported as fallbacks but are deprecated and will cause type errors. We recommend migrating to the simplified tokens for a cleaner API.
+
+  **References**:
+  - [Semantic tokens documentation](https://github.com/utilitywarehouse/hearth/blob/main/packages/tokens/src/semantic-light.ts)
+
+### Patch Changes
+
+- [#917](https://github.com/utilitywarehouse/hearth/pull/917) [`6a016dc`](https://github.com/utilitywarehouse/hearth/commit/6a016dca0d1a06e40a877da15aced590d0c68112) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Update design tokens from Figma
+
+  Updated design tokens to include new font sizes, line heights, and component-specific tokens:
+  - Added `background.loading` colour token for both light and dark modes
+  - Added new font sizes: 575 (44px) and 650 (54px)
+  - Added new line heights: 975 (52px) and 1050 (62px)
+  - Updated `Modal` component tokens with `mobile.paddingBottom` and `handle.paddingBottom` properties
+  - Added `borderBottom` property to `Navigation` component tokens
+  - Updated `Skeleton` component `loadingColor` value in light mode
+
+  **Developer changes**:
+
+  No changes required. These tokens are automatically applied to components that use them.
+
 ## 0.20.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.22.0",
+  "version": "0.22.1",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -43,7 +43,7 @@
     "react-native": "0.80.0",
     "react-native-edge-to-edge": "1.6.1",
     "react-native-gesture-handler": "2.28.0",
-    "react-native-nitro-modules": "^0.31.4",
+    "react-native-nitro-modules": "0.31.4",
     "react-native-reanimated": "4.1.3",
     "react-native-svg": "^15.12.1",
     "react-native-unistyles": "3.0.17",
@@ -56,8 +56,8 @@
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-react-icons": "^0.8.0",
     "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
+    "@utilitywarehouse/hearth-react-icons": "^0.8.0",
     "@utilitywarehouse/hearth-svg-assets": "^0.5.0",
     "@utilitywarehouse/hearth-tokens": "^0.2.3"
   },

package/src/components/VerificationInput/VerificationInput.tsx

@@ -1,8 +1,7 @@
-import { forwardRef, useImperativeHandle } from 'react';
-import { View } from 'react-native';
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { Platform, TextInput, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { FormField } from '../FormField';
-import { useVerificationInput } from './useVerificationInput';
 import type { VerificationInputHandle, VerificationInputProps } from './VerificationInput.props';
 import { VerificationInputSlot } from './VerificationInputSlot';
 
@@ -28,30 +27,147 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
     ref
   ) => {
     const length = 6;
-    const {
-      inputRefs,
-      displayValue,
-      focusedIndex,
-      handleFocus,
-      handleBlur,
-      handleChangeText,
-      handleKeyPress,
-    } = useVerificationInput({
-      value,
-      onChangeText,
-    });
+    const inputRef = useRef<TextInput>(null);
+    const latestValueRef = useRef(value);
+    const [displayValue, setDisplayValue] = useState(value);
+    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
+    const [selection, setSelection] = useState({ start: 0, end: 0 });
+    const latestSelectionRef = useRef(selection);
+    const ignoreNextSelectionRef = useRef(false);
+    const pendingFocusIndexRef = useRef<number | null>(null);
+
+    useEffect(() => {
+      if (value !== latestValueRef.current) {
+        const trimmedValue = value.slice(0, length);
+        latestValueRef.current = trimmedValue;
+        setDisplayValue(trimmedValue);
+        const nextPos = Math.min(trimmedValue.length, length);
+        const nextSelection = { start: nextPos, end: nextPos };
+        ignoreNextSelectionRef.current = true;
+        latestSelectionRef.current = nextSelection;
+        setSelection(nextSelection);
+      }
+    }, [length, value]);
+
+    const updateValue = (nextValue: string) => {
+      const trimmedValue = nextValue.slice(0, length);
+      latestValueRef.current = trimmedValue;
+      setDisplayValue(trimmedValue);
+      onChangeText?.(trimmedValue);
+    };
+
+    const setSelectionIndex = (index: number) => {
+      const clampedIndex = Math.max(0, Math.min(index, length));
+      const hasChar = !!latestValueRef.current[clampedIndex];
+      const endIndex = hasChar ? Math.min(clampedIndex + 1, length) : clampedIndex;
+      const nextSelection = { start: clampedIndex, end: endIndex };
+      ignoreNextSelectionRef.current = true;
+      latestSelectionRef.current = nextSelection;
+      setSelection(nextSelection);
+      setFocusedIndex(Math.min(clampedIndex, length - 1));
+    };
+
+    const setCaretIndex = (index: number) => {
+      const clampedIndex = Math.max(0, Math.min(index, length));
+      const nextSelection = { start: clampedIndex, end: clampedIndex };
+      ignoreNextSelectionRef.current = true;
+      latestSelectionRef.current = nextSelection;
+      setSelection(nextSelection);
+      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);
+      const prevLength = prevValue.length;
+      const nextLength = nextValue.length;
+      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);
+      }
+      updateValue(nextValue);
+      if (isBulkInsert) {
+        setCaretIndex(Math.min(nextLength, length));
+        if (shouldBlur) {
+          inputRef.current?.blur();
+        }
+        return;
+      }
+      if (nextIndex >= length) {
+        setCaretIndex(nextIndex);
+        if (shouldBlur) {
+          inputRef.current?.blur();
+        }
+        return;
+      }
+
+      if (nextLength >= length) {
+        setSelectionIndex(nextIndex);
+        inputRef.current?.blur();
+        return;
+      }
+
+      const hasNextChar = !!nextValue[nextIndex];
+      if (hasNextChar) {
+        setSelectionIndex(nextIndex);
+      } else {
+        setCaretIndex(nextIndex);
+      }
+    };
+
+    const handleFocus = () => {
+      if (pendingFocusIndexRef.current !== null) {
+        setSelectionIndex(pendingFocusIndexRef.current);
+        pendingFocusIndexRef.current = null;
+        return;
+      }
+      setFocusedIndex(Math.min(selection.start, length - 1));
+    };
+
+    const handleBlur = () => {
+      setFocusedIndex(null);
+    };
 
     useImperativeHandle(
       ref,
       () => ({
-        focus: () => inputRefs.current[0]?.focus(),
-        blur: () => {
-          inputRefs.current.forEach(input => input?.blur());
+        focus: () => {
+          inputRef.current?.focus();
+          const nextIndex = Math.min(latestValueRef.current.length, length - 1);
+          if (latestValueRef.current.length >= length) {
+            setSelectionIndex(nextIndex);
+          } else {
+            setCaretIndex(nextIndex);
+          }
+        },
+        blur: () => inputRef.current?.blur(),
+        clear: () => {
+          updateValue('');
+          setSelectionIndex(0);
+          inputRef.current?.blur();
+          setFocusedIndex(null);
         },
-        clear: () => onChangeText?.(''),
         focusIndex: (index: number) => {
           if (index >= 0 && index < length) {
-            inputRefs.current[index]?.focus();
+            inputRef.current?.focus();
+            setSelectionIndex(index);
           }
         },
       }),
@@ -60,6 +176,29 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
 
     const slots = Array.from({ length }, (_, index) => index);
 
+    const getAccessibilityLabel = () => {
+      return label || props.accessibilityLabel;
+    };
+
+    const getAccessibilityHint = () => {
+      let accessibilityHint = '';
+      if (helperText) {
+        accessibilityHint = accessibilityHint + helperText;
+      }
+      if (validationStatus !== 'initial') {
+        if (accessibilityHint.length > 0) {
+          accessibilityHint = accessibilityHint + ', ';
+        }
+        if (validationStatus === 'invalid' && invalidText) {
+          accessibilityHint = accessibilityHint + invalidText;
+        }
+        if (validationStatus === 'valid' && validText) {
+          accessibilityHint = accessibilityHint + validText;
+        }
+      }
+      return accessibilityHint || props.accessibilityHint;
+    };
+
     return (
       <FormField
         label={label}
@@ -71,31 +210,70 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
         invalidText={invalidText}
         disabled={disabled}
         readonly={readonly}
+        accessibilityHandledByChildren
         style={[styles.root, style]}
         {...props}
       >
         <View style={styles.slotsContainer}>
+          <TextInput
+            ref={inputRef}
+            value={displayValue}
+            autoFocus={autoFocus}
+            editable={!disabled && !readonly}
+            accessibilityLabel={getAccessibilityLabel()}
+            accessibilityHint={getAccessibilityHint()}
+            accessibilityState={{ disabled: disabled || readonly }}
+            importantForAccessibility="yes"
+            onChangeText={handleChangeText}
+            onSelectionChange={event => {
+              const nextSelection = event.nativeEvent.selection;
+              if (
+                ignoreNextSelectionRef.current &&
+                (nextSelection.start !== latestSelectionRef.current.start ||
+                  nextSelection.end !== latestSelectionRef.current.end)
+              ) {
+                return;
+              }
+              if (pendingFocusIndexRef.current !== null) {
+                return;
+              }
+              ignoreNextSelectionRef.current = false;
+              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
+            style={styles.hiddenInput}
+            pointerEvents="none"
+          />
           {slots.map(index => {
             const char = displayValue[index] || '';
             const isActive = focusedIndex === index;
+            const displayChar = secureTextEntry && char ? '*' : char;
 
             return (
               <VerificationInputSlot
                 key={index}
-                ref={inputRef => {
-                  inputRefs.current[index] = inputRef;
-                }}
-                autoFocus={index === 0 && autoFocus}
-                value={char}
+                value={displayChar}
                 isActive={isActive}
+                showCaret={isActive && !displayChar}
                 validationStatus={validationStatus}
                 disabled={disabled}
                 readonly={readonly}
                 secureTextEntry={secureTextEntry}
-                onChangeText={text => handleChangeText(text, index)}
-                onKeyPress={e => handleKeyPress(e, index)}
-                onFocus={() => handleFocus(index)}
-                onBlur={handleBlur}
+                onPress={() => {
+                  pendingFocusIndexRef.current = index;
+                  inputRef.current?.focus();
+                  setSelectionIndex(index);
+                }}
               />
             );
           })}
@@ -115,6 +293,17 @@ const styles = StyleSheet.create(theme => ({
     flexDirection: 'row',
     gap: theme.components.input.verification.gap,
     width: '100%',
+    position: 'relative',
+  },
+  hiddenInput: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    left: 0,
+    top: 0,
+    color: 'transparent',
+    fontSize: 1,
+    opacity: 0.1,
   },
 }));
 

package/src/components/VerificationInput/VerificationInputSlot.tsx

@@ -1,33 +1,84 @@
-import { forwardRef } from 'react';
-import { TextInput, TextInputProps } from 'react-native';
+import { forwardRef, useEffect } from 'react';
+import { Pressable, Text, View, ViewProps } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
-import InputField from '../Input/InputField';
 
-interface VerificationInputSlotProps extends TextInputProps {
+interface VerificationInputSlotProps extends ViewProps {
+  value: string;
   isActive: boolean;
+  showCaret?: boolean;
   validationStatus: 'initial' | 'valid' | 'invalid';
   disabled?: boolean;
   readonly?: boolean;
+  onPress?: () => void;
+  secureTextEntry?: boolean;
 }
 
-export const VerificationInputSlot = forwardRef<TextInput, VerificationInputSlotProps>(
-  ({ isActive, validationStatus, disabled, readonly, style, ...props }, ref) => {
+export const VerificationInputSlot = forwardRef<View, VerificationInputSlotProps>(
+  (
+    {
+      value,
+      isActive,
+      showCaret,
+      validationStatus,
+      disabled,
+      readonly,
+      style,
+      onPress,
+      secureTextEntry,
+      ...props
+    },
+    ref
+  ) => {
     styles.useVariants({
       disabled,
       readonly,
       validationStatus,
       active: isActive,
+      secureTextEntry,
     });
 
+    const caretOpacity = useSharedValue(0);
+    const animatedCaretStyle = useAnimatedStyle(() => ({
+      opacity: caretOpacity.value,
+    }));
+
+    useEffect(() => {
+      if (showCaret && !disabled && !readonly) {
+        caretOpacity.value = withRepeat(
+          withTiming(1, { duration: 500, easing: Easing.inOut(Easing.ease) }),
+          -1,
+          true
+        );
+        return;
+      }
+
+      caretOpacity.value = withTiming(0, { duration: 150, easing: Easing.out(Easing.ease) });
+    }, [caretOpacity, disabled, readonly, showCaret]);
+
     return (
-      <InputField
+      <Pressable
         ref={ref}
-        {...props}
-        editable={!disabled && !readonly}
-        selectTextOnFocus
-        keyboardType="number-pad"
+        onPress={onPress}
+        disabled={disabled || readonly}
         style={[styles.slot, style]}
-      />
+        accessibilityRole="button"
+        accessible={false}
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        {...props}
+      >
+        <Text style={styles.slotText}>{value}</Text>
+        {showCaret && !disabled && !readonly && (
+          <Animated.View style={[styles.caret, animatedCaretStyle]} />
+        )}
+      </Pressable>
     );
   }
 );
@@ -36,15 +87,20 @@ VerificationInputSlot.displayName = 'VerificationInputSlot';
 
 const styles = StyleSheet.create(theme => ({
   slot: {
-    flex: 0,
+    flexGrow: 0,
+    flexShrink: 0,
     width: theme.components.input.height,
     height: theme.components.input.height,
+    minWidth: theme.components.input.height,
+    minHeight: theme.components.input.height,
     borderWidth: theme.components.input.borderWidth,
     borderColor: theme.color.border.strong,
     borderRadius: theme.components.input.borderRadius,
     backgroundColor: theme.color.surface.neutral.strong,
-    textAlign: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
     padding: 0,
+    position: 'relative',
     variants: {
       disabled: {
         true: {
@@ -91,4 +147,24 @@ const styles = StyleSheet.create(theme => ({
       },
     ],
   },
+  slotText: {
+    color: theme.color.text.primary,
+    fontSize: theme.typography.mobile.bodyText.md.fontSize,
+    fontFamily: theme.typography.mobile.bodyText.fontFamily,
+    fontWeight: `${theme.typography.mobile.bodyText.fontWeight}`,
+    textAlign: 'center',
+    variants: {
+      secureTextEntry: {
+        true: {
+          paddingTop: 5,
+        },
+      },
+    },
+  },
+  caret: {
+    position: 'absolute',
+    width: 2,
+    height: '55%',
+    backgroundColor: theme.color.text.brand,
+  },
 }));

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

@@ -1,15 +0,0 @@
-import { NativeSyntheticEvent, TextInput, TextInputKeyPressEventData } from 'react-native';
-interface UseVerificationInputProps {
-    value: string;
-    onChangeText?: (text: string) => void;
-}
-export declare const useVerificationInput: ({ value, onChangeText }: UseVerificationInputProps) => {
-    inputRefs: import("react").RefObject<(TextInput | null)[]>;
-    displayValue: string;
-    focusedIndex: number | null;
-    handleFocus: (index: number) => void;
-    handleBlur: () => void;
-    handleChangeText: (text: string, index: number) => void;
-    handleKeyPress: (e: NativeSyntheticEvent<TextInputKeyPressEventData>, index: number) => void;
-};
-export {};

package/build/components/VerificationInput/useVerificationInput.js

@@ -1,73 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-export const useVerificationInput = ({ value, onChangeText }) => {
-    const length = 6;
-    const inputRefs = useRef([]);
-    const latestValueRef = useRef(value);
-    const [displayValue, setDisplayValue] = useState(value);
-    const [focusedIndex, setFocusedIndex] = useState(null);
-    useEffect(() => {
-        if (value !== latestValueRef.current) {
-            latestValueRef.current = value;
-            setDisplayValue(value);
-        }
-    }, [value]);
-    const handleFocus = (index) => {
-        setFocusedIndex(index);
-    };
-    const handleBlur = () => {
-        setFocusedIndex(null);
-    };
-    const updateValue = (nextValue) => {
-        latestValueRef.current = nextValue;
-        setDisplayValue(nextValue);
-        onChangeText?.(nextValue);
-    };
-    const handleChangeText = (text, index) => {
-        const currentValue = latestValueRef.current;
-        const chars = Array(length).fill('');
-        for (let i = 0; i < currentValue.length && i < length; i++) {
-            chars[i] = currentValue[i];
-        }
-        if (text.length > 1) {
-            // Handle paste
-            const pastedChars = text.slice(0, length - index).split('');
-            for (let i = 0; i < pastedChars.length; i++) {
-                chars[index + i] = pastedChars[i];
-            }
-            const nextIndex = Math.min(index + pastedChars.length, length - 1);
-            inputRefs.current[nextIndex]?.focus();
-        }
-        else {
-            // Handle single char input
-            chars[index] = text;
-            if (text.length === 1 && index < length - 1) {
-                inputRefs.current[index + 1]?.focus();
-            }
-        }
-        updateValue(chars.join(''));
-    };
-    const handleKeyPress = (e, index) => {
-        if (e.nativeEvent.key === 'Backspace') {
-            const currentValue = latestValueRef.current;
-            if (!currentValue[index] && index > 0) {
-                e.preventDefault();
-                inputRefs.current[index - 1]?.focus();
-                const chars = Array(length).fill('');
-                for (let i = 0; i < currentValue.length && i < length; i++) {
-                    chars[i] = currentValue[i];
-                }
-                chars[index - 1] = '';
-                updateValue(chars.join(''));
-            }
-        }
-    };
-    return {
-        inputRefs,
-        displayValue,
-        focusedIndex,
-        handleFocus,
-        handleBlur,
-        handleChangeText,
-        handleKeyPress,
-    };
-};

package/src/components/VerificationInput/useVerificationInput.ts

@@ -1,88 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { NativeSyntheticEvent, TextInput, TextInputKeyPressEventData } from 'react-native';
-
-interface UseVerificationInputProps {
-  value: string;
-  onChangeText?: (text: string) => void;
-}
-
-export const useVerificationInput = ({ value, onChangeText }: UseVerificationInputProps) => {
-  const length = 6;
-  const inputRefs = useRef<(TextInput | null)[]>([]);
-  const latestValueRef = useRef(value);
-  const [displayValue, setDisplayValue] = useState(value);
-  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
-
-  useEffect(() => {
-    if (value !== latestValueRef.current) {
-      latestValueRef.current = value;
-      setDisplayValue(value);
-    }
-  }, [value]);
-
-  const handleFocus = (index: number) => {
-    setFocusedIndex(index);
-  };
-
-  const handleBlur = () => {
-    setFocusedIndex(null);
-  };
-
-  const updateValue = (nextValue: string) => {
-    latestValueRef.current = nextValue;
-    setDisplayValue(nextValue);
-    onChangeText?.(nextValue);
-  };
-
-  const handleChangeText = (text: string, index: number) => {
-    const currentValue = latestValueRef.current;
-    const chars = Array(length).fill('');
-    for (let i = 0; i < currentValue.length && i < length; i++) {
-      chars[i] = currentValue[i];
-    }
-
-    if (text.length > 1) {
-      // Handle paste
-      const pastedChars = text.slice(0, length - index).split('');
-      for (let i = 0; i < pastedChars.length; i++) {
-        chars[index + i] = pastedChars[i];
-      }
-      const nextIndex = Math.min(index + pastedChars.length, length - 1);
-      inputRefs.current[nextIndex]?.focus();
-    } else {
-      // Handle single char input
-      chars[index] = text;
-      if (text.length === 1 && index < length - 1) {
-        inputRefs.current[index + 1]?.focus();
-      }
-    }
-    updateValue(chars.join(''));
-  };
-
-  const handleKeyPress = (e: NativeSyntheticEvent<TextInputKeyPressEventData>, index: number) => {
-    if (e.nativeEvent.key === 'Backspace') {
-      const currentValue = latestValueRef.current;
-      if (!currentValue[index] && index > 0) {
-        e.preventDefault();
-        inputRefs.current[index - 1]?.focus();
-
-        const chars = Array(length).fill('');
-        for (let i = 0; i < currentValue.length && i < length; i++) {
-          chars[i] = currentValue[i];
-        }
-        chars[index - 1] = '';
-        updateValue(chars.join(''));
-      }
-    }
-  };
-
-  return {
-    inputRefs,
-    displayValue,
-    focusedIndex,
-    handleFocus,
-    handleBlur,
-    handleChangeText,
-    handleKeyPress,
-  };
-};