@utilitywarehouse/hearth-react-native 0.21.0 → 0.22.1

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.21.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.21.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 |  1327.577 |    60.2%
-react-hooks/exhaustive-deps       |    77.842 |     3.5%
-no-global-assign                  |    77.325 |     3.5%
-react-hooks/rules-of-hooks        |    64.813 |     2.9%
-no-misleading-character-class     |    44.059 |     2.0%
-no-loss-of-precision              |    40.431 |     1.8%
-no-unexpected-multiline           |    40.191 |     1.8%
-@typescript-eslint/ban-ts-comment |    32.434 |     1.5%
-no-useless-escape                 |    27.764 |     1.3%
-no-fallthrough                    |    27.614 |     1.3%
+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,43 @@
 # @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
+
+- [#968](https://github.com/utilitywarehouse/hearth/pull/968) [`cee5811`](https://github.com/utilitywarehouse/hearth/commit/cee5811020af02fe754d8311ec8313c1793f108a) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `badge` support to Radio and Checkbox (including tiles).
+
+  **Components affected**:
+  - `Radio`
+  - `RadioTile`
+  - `Checkbox`
+  - `CheckboxTile`
+
+  **Developer changes**:
+  You can now pass a `badge` React node to render beneath helper text. No changes required unless you want to use the new prop.
+
+### Patch Changes
+
+- [#966](https://github.com/utilitywarehouse/hearth/pull/966) [`4e9f3f0`](https://github.com/utilitywarehouse/hearth/commit/4e9f3f0284e50da5ba4e49e132dac745a1a8a68d) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Allow Card layout props and remove forced alignment
+
+  Card now accepts flex layout and display props, and it no longer forces `alignItems: flex-start` on the root, so custom alignment works as expected.
+
+- [#969](https://github.com/utilitywarehouse/hearth/pull/969) [`c5c988b`](https://github.com/utilitywarehouse/hearth/commit/c5c988b65f1133b85b822037b086a524bc1255e3) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Render the Modal footer in navigation modals
+
 ## 0.21.0
 
 ### Minor Changes

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

@@ -1,17 +1,13 @@
-import { PressableProps, ViewStyle } from 'react-native';
-import { GapProps, MarginProps, SpacingValues } from '../../types';
-interface CardProps extends PressableProps, MarginProps, GapProps {
+import { PressableProps } from 'react-native';
+import { DisplayProps, FlexLayoutProps, GapProps, MarginProps, SpacingValues } from '../../types';
+interface CardProps extends PressableProps, MarginProps, GapProps, FlexLayoutProps, Omit<DisplayProps, 'direction'> {
     variant?: 'emphasis' | 'subtle';
     colorScheme?: 'neutralStrong' | 'neutralSubtle' | 'brand' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'pig';
     shadowColor?: 'functional' | 'brand' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'pig';
     noPadding?: boolean;
     disabled?: boolean;
     spacing?: SpacingValues;
-    /** @deprecated Use `spacing` instead. The `gap` prop will be removed in a future release. */
+    /** @deprecated Use `spacing` instead. The `space` prop will be removed in a future release. */
     space?: SpacingValues;
-    alignItems?: ViewStyle['alignItems'];
-    justifyContent?: ViewStyle['justifyContent'];
-    flexDirection?: ViewStyle['flexDirection'];
-    flexWrap?: ViewStyle['flexWrap'];
 }
 export default CardProps;

package/build/components/Card/CardRoot.js

@@ -70,7 +70,6 @@ Card.displayName = 'Card';
 const styles = StyleSheet.create(theme => ({
     card: {
         overflow: 'hidden',
-        alignItems: 'flex-start',
         borderRadius: theme.components.card.borderRadius,
         variants: {
             spacing: theme.globalStyle.variants.spacing,

package/build/components/Checkbox/Checkbox.d.ts

@@ -10,7 +10,7 @@ declare const CheckboxIcon: import("react").ForwardRefExoticComponent<import("re
 }>;
 declare const CheckboxLabel: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("../Label/Label.props").default> & Omit<import("../Label/Label.props").default, "ref">>;
 declare const Checkbox: {
-    ({ children, label, disabled, checked, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type, image, value, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, label, disabled, checked, helperIcon, helperText, badge, invalidText, validText, validationStatus: validation, showValidationIcon, type, image, value, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 declare const CheckboxTile: {

package/build/components/Checkbox/Checkbox.js

@@ -25,12 +25,12 @@ CheckboxGroup.displayName = 'CheckboxGroup';
 CheckboxIndicator.displayName = 'CheckboxIndicator';
 CheckboxIcon.displayName = 'CheckboxIcon';
 CheckboxLabel.displayName = 'CheckboxLabel';
-const Checkbox = ({ children, label, disabled, checked, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type = 'default', image, value, ...props }) => {
+const Checkbox = ({ children, label, disabled, checked, helperIcon, helperText, badge, invalidText, validText, validationStatus: validation, showValidationIcon, type = 'default', image, value, ...props }) => {
     const { validationStatus: fieldValidationStatus } = useFormFieldContext();
     const { validationStatus: groupValidationStatus, type: groupType } = useCheckboxGroupContext();
     const validationStatus = fieldValidationStatus ?? groupValidationStatus ?? validation ?? 'initial';
     const checkboxType = groupType ?? type;
-    const checkboxChildren = children ? (children) : (_jsxs(_Fragment, { children: [_jsx(CheckboxIndicator, { children: _jsx(CheckboxIcon, {}) }), image ? image : null, _jsxs(CheckboxTextContent, { children: [!!label && _jsx(CheckboxLabel, { children: label }), !!helperText && _jsx(Helper, { disabled: disabled, icon: helperIcon, text: helperText }), validationStatus === 'invalid' && !!invalidText && (_jsx(Helper, { showIcon: showValidationIcon, disabled: disabled, validationStatus: "invalid", text: invalidText })), validationStatus === 'valid' && !!validText && (_jsx(Helper, { disabled: disabled, showIcon: showValidationIcon, validationStatus: "valid", text: validText }))] })] }));
+    const checkboxChildren = children ? (children) : (_jsxs(_Fragment, { children: [_jsx(CheckboxIndicator, { children: _jsx(CheckboxIcon, {}) }), image ? image : null, _jsxs(CheckboxTextContent, { children: [!!label && _jsx(CheckboxLabel, { children: label }), !!helperText && _jsx(Helper, { disabled: disabled, icon: helperIcon, text: helperText }), badge ? badge : null, validationStatus === 'invalid' && !!invalidText && (_jsx(Helper, { showIcon: showValidationIcon, disabled: disabled, validationStatus: "invalid", text: invalidText })), validationStatus === 'valid' && !!validText && (_jsx(Helper, { disabled: disabled, showIcon: showValidationIcon, validationStatus: "valid", text: validText }))] })] }));
     return (_jsx(CheckboxComponent, { ...props, value: (value ?? '').toString(), isDisabled: disabled, isChecked: checked, children: checkboxType === 'tile' ? (_jsx(CheckboxTileRoot, { children: checkboxChildren })) : (checkboxChildren) }));
 };
 const CheckboxTile = ({ type = 'tile', ...props }) => {

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

@@ -17,6 +17,7 @@ type CheckboxWithChildrenProps = {
     label?: never;
     helperText?: never;
     helperIcon?: never;
+    badge?: never;
     invalidText?: never;
     validText?: never;
     showValidationIcon?: never;
@@ -27,6 +28,7 @@ type CheckboxWithoutChildrenProps = {
     label?: string;
     helperText?: string;
     helperIcon?: ComponentType;
+    badge?: ReactNode;
     invalidText?: string;
     validText?: string;
     showValidationIcon?: boolean;

package/build/components/Modal/Modal.js

@@ -107,7 +107,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         showHandle: props.showHandle,
     });
     const footer = (_jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] }));
-    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, description && !image ? _jsx(BodyText, { accessible: true, children: description }) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : null] })] })) : null, children, !stickyFooter && !noButtons ? footer : null] })) }));
+    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, description && !image ? _jsx(BodyText, { accessible: true, children: description }) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : null] })] })) : null, children, (!stickyFooter || inNavModal) && !noButtons ? footer : null] })) }));
     const renderFooter = useCallback((props) => (_jsx(BottomSheetFooter, { ...props, children: _jsx(View, { style: styles.footerWrap, children: footer }) })), [
         onPressPrimaryButton,
         primaryButtonText,

package/build/components/Radio/Radio.d.ts

@@ -10,7 +10,7 @@ declare const RadioIcon: import("react").ForwardRefExoticComponent<import("react
 }>;
 declare const RadioLabel: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("../Label/Label.props").default> & Omit<import("../Label/Label.props").default, "ref">>;
 declare const Radio: {
-    ({ children, label, disabled, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type, image, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, label, disabled, helperIcon, helperText, badge, invalidText, validText, validationStatus: validation, showValidationIcon, type, image, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 declare const RadioTile: {

package/build/components/Radio/Radio.js

@@ -25,12 +25,12 @@ RadioGroup.displayName = 'RadioGroup';
 RadioIndicator.displayName = 'RadioIndicator';
 RadioIcon.displayName = 'RadioIcon';
 RadioLabel.displayName = 'RadioLabel';
-const Radio = ({ children, label, disabled, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type = 'default', image, ...props }) => {
+const Radio = ({ children, label, disabled, helperIcon, helperText, badge, invalidText, validText, validationStatus: validation, showValidationIcon, type = 'default', image, ...props }) => {
     const { validationStatus: fieldValidationStatus } = useFormFieldContext();
     const { validationStatus: groupValidationStatus, type: groupType } = useRadioGroupContext();
     const validationStatus = fieldValidationStatus ?? groupValidationStatus ?? validation ?? 'initial';
     const radioType = groupType ?? type;
-    const radioChildren = children ? (children) : (_jsxs(_Fragment, { children: [_jsx(RadioIndicator, { children: _jsx(RadioIcon, {}) }), image ? image : null, _jsxs(RadioTextContent, { children: [!!label && _jsx(RadioLabel, { children: label }), !!helperText && _jsx(Helper, { disabled: disabled, icon: helperIcon, text: helperText }), validationStatus === 'invalid' && !!invalidText && (_jsx(Helper, { showIcon: showValidationIcon, disabled: disabled, validationStatus: "invalid", text: invalidText })), validationStatus === 'valid' && !!validText && (_jsx(Helper, { disabled: disabled, showIcon: showValidationIcon, validationStatus: "valid", text: validText }))] })] }));
+    const radioChildren = children ? (children) : (_jsxs(_Fragment, { children: [_jsx(RadioIndicator, { children: _jsx(RadioIcon, {}) }), image ? image : null, _jsxs(RadioTextContent, { children: [!!label && _jsx(RadioLabel, { children: label }), !!helperText && _jsx(Helper, { disabled: disabled, icon: helperIcon, text: helperText }), badge ? badge : null, validationStatus === 'invalid' && !!invalidText && (_jsx(Helper, { showIcon: showValidationIcon, disabled: disabled, validationStatus: "invalid", text: invalidText })), validationStatus === 'valid' && !!validText && (_jsx(Helper, { disabled: disabled, showIcon: showValidationIcon, validationStatus: "valid", text: validText }))] })] }));
     return (_jsx(RadioComponent, { ...props, isDisabled: disabled, children: radioType === 'tile' ? _jsx(RadioTileRoot, { children: radioChildren }) : radioChildren }));
 };
 const RadioTile = ({ type = 'tile', ...props }) => _jsx(Radio, { ...props, type: type });

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

@@ -12,6 +12,7 @@ interface RadioWithChildrenProps extends RadioBaseProps {
     label?: never;
     helperText?: never;
     helperIcon?: never;
+    badge?: never;
     invalidText?: never;
     validText?: never;
     showValidationIcon?: never;
@@ -22,6 +23,7 @@ interface RadioWithoutChildrenProps extends RadioBaseProps {
     label?: string;
     helperText?: string;
     helperIcon?: ComponentType;
+    badge?: ReactNode;
     invalidText?: string;
     validText?: string;
     showValidationIcon?: boolean;

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,
+    },
 }));