@utilitywarehouse/hearth-react-native 0.18.0 → 0.19.1

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

@@ -1,5 +1,11 @@
 import type { ComponentType } from 'react';
 import { ViewProps } from 'react-native';
+export interface VerificationInputHandle {
+    focus: () => void;
+    blur: () => void;
+    clear: () => void;
+    focusIndex: (index: number) => void;
+}
 export interface VerificationInputProps extends ViewProps {
     /**
      * The value of the input.
@@ -49,5 +55,9 @@ export interface VerificationInputProps extends ViewProps {
      * Whether to obscure the text entry (e.g. for passwords/OTPs).
      */
     secureTextEntry?: boolean;
+    /**
+     * Whether the input should auto-focus when mounted.
+     */
+    autoFocus?: boolean;
 }
 export default VerificationInputProps;

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

@@ -1,4 +1,4 @@
 import VerificationInput from './VerificationInput';
 export { default as VerificationInput } from './VerificationInput';
-export type { default as VerificationInputProps } from './VerificationInput.props';
+export type { VerificationInputHandle, default as VerificationInputProps, } from './VerificationInput.props';
 export default VerificationInput;

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

@@ -5,6 +5,7 @@ interface UseVerificationInputProps {
 }
 export declare const useVerificationInput: ({ value, onChangeText }: UseVerificationInputProps) => {
     inputRefs: import("react").RefObject<(TextInput | null)[]>;
+    displayValue: string;
     focusedIndex: number | null;
     handleFocus: (index: number) => void;
     handleBlur: () => void;

package/build/components/VerificationInput/useVerificationInput.js

@@ -1,19 +1,32 @@
-import { useRef, useState } from 'react';
+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) => {
-        // Break down the text into an array of characters
+        const currentValue = latestValueRef.current;
         const chars = Array(length).fill('');
-        for (let i = 0; i < value.length && i < length; i++) {
-            chars[i] = value[i];
+        for (let i = 0; i < currentValue.length && i < length; i++) {
+            chars[i] = currentValue[i];
         }
         if (text.length > 1) {
             // Handle paste
@@ -31,24 +44,26 @@ export const useVerificationInput = ({ value, onChangeText }) => {
                 inputRefs.current[index + 1]?.focus();
             }
         }
-        onChangeText?.(chars.join(''));
+        updateValue(chars.join(''));
     };
     const handleKeyPress = (e, index) => {
         if (e.nativeEvent.key === 'Backspace') {
-            if (!value[index] && index > 0) {
+            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 < value.length && i < length; i++) {
-                    chars[i] = value[i];
+                for (let i = 0; i < currentValue.length && i < length; i++) {
+                    chars[i] = currentValue[i];
                 }
                 chars[index - 1] = '';
-                onChangeText?.(chars.join(''));
+                updateValue(chars.join(''));
             }
         }
     };
     return {
         inputRefs,
+        displayValue,
         focusedIndex,
         handleFocus,
         handleBlur,

package/build/core/themes.d.ts

@@ -718,7 +718,7 @@ export declare const lightTheme: {
                     };
                 };
             };
-            readonly space: {
+            readonly spacing: {
                 readonly none: {
                     readonly gap: {
                         readonly base: 0;
@@ -2078,7 +2078,7 @@ export declare const darkTheme: {
                     };
                 };
             };
-            readonly space: {
+            readonly spacing: {
                 readonly none: {
                     readonly gap: {
                         readonly base: 0;
@@ -3450,7 +3450,7 @@ export declare const themes: {
                         };
                     };
                 };
-                readonly space: {
+                readonly spacing: {
                     readonly none: {
                         readonly gap: {
                             readonly base: 0;
@@ -4810,7 +4810,7 @@ export declare const themes: {
                         };
                     };
                 };
-                readonly space: {
+                readonly spacing: {
                     readonly none: {
                         readonly gap: {
                             readonly base: 0;

package/build/core/themes.js

@@ -191,7 +191,7 @@ const shared = {
                     },
                 },
             },
-            space: {
+            spacing: {
                 none: {
                     gap: {
                         base: layout.mobile.spacing.none,

package/build/types/values.d.ts

@@ -26,5 +26,5 @@ export type ColorValue = 'currentColor' | 'transparent' | FlattenColorKeys<Omit<
 export type BorderRadiusValue = `${keyof (typeof lightTheme)['borderRadius'] & (string | number)}` | AnimatableNumericValue | undefined;
 export type BordeWidthValue = `${keyof (typeof lightTheme)['borderWidth'] & (string | number)}` | number | undefined;
 export type OpacityValue = AnimatableNumericValue | undefined;
-export type SpacingValues = keyof (typeof themes)['light']['globalStyle']['variants']['space'];
+export type SpacingValues = keyof (typeof themes)['light']['globalStyle']['variants']['spacing'];
 export {};