@utilitywarehouse/hearth-react-native 0.18.0 → 0.19.0

package/build/components/Divider/Divider.js

@@ -4,8 +4,8 @@ import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { getFlattenedColorValue } from '../../utils';
-const Divider = ({ orientation = 'horizontal', color, space, height, width, flexItem, ...props }) => {
-    styles.useVariants({ orientation, space, flexItem });
+const Divider = ({ orientation = 'horizontal', color, spacing, space, height, width, flexItem, ...props }) => {
+    styles.useVariants({ orientation, spacing: space ?? spacing, flexItem });
     const { color: themeColor, colorMode } = useTheme();
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const colorValue = useMemo(() => getFlattenedColorValue(color, themeColor), [color, colorMode]);
@@ -26,7 +26,7 @@ const styles = StyleSheet.create(theme => ({
                     width: theme.components.divider.borderWidth,
                 },
             },
-            space: {
+            spacing: {
                 none: {},
                 '2xs': {},
                 xs: {},
@@ -45,14 +45,14 @@ const styles = StyleSheet.create(theme => ({
         compoundVariants: [
             {
                 orientation: 'horizontal',
-                space: 'none',
+                spacing: 'none',
                 styles: {
                     marginVertical: 0,
                 },
             },
             {
                 orientation: 'horizontal',
-                space: '2xs',
+                spacing: '2xs',
                 styles: {
                     marginVertical: {
                         base: theme.layout.mobile.spacing['2xs'],
@@ -63,7 +63,7 @@ const styles = StyleSheet.create(theme => ({
             },
             {
                 orientation: 'horizontal',
-                space: 'xs',
+                spacing: 'xs',
                 styles: {
                     marginVertical: {
                         base: theme.layout.mobile.spacing.xs,
@@ -74,7 +74,7 @@ const styles = StyleSheet.create(theme => ({
             },
             {
                 orientation: 'horizontal',
-                space: 'sm',
+                spacing: 'sm',
                 styles: {
                     marginVertical: {
                         base: theme.layout.mobile.spacing.sm,
@@ -85,7 +85,7 @@ const styles = StyleSheet.create(theme => ({
             },
             {
                 orientation: 'horizontal',
-                space: 'md',
+                spacing: 'md',
                 styles: {
                     marginVertical: {
                         base: theme.layout.mobile.spacing.md,
@@ -96,7 +96,7 @@ const styles = StyleSheet.create(theme => ({
             },
             {
                 orientation: 'horizontal',
-                space: 'lg',
+                spacing: 'lg',
                 styles: {
                     marginVertical: {
                         base: theme.layout.mobile.spacing.lg,
@@ -107,7 +107,7 @@ const styles = StyleSheet.create(theme => ({
             },
             {
                 orientation: 'horizontal',
-                space: 'xl',
+                spacing: 'xl',
                 styles: {
                     marginVertical: {
                         base: theme.layout.mobile.spacing.xl,
@@ -118,7 +118,7 @@ const styles = StyleSheet.create(theme => ({
             },
             {
                 orientation: 'horizontal',
-                space: '2xl',
+                spacing: '2xl',
                 styles: {
                     marginVertical: {
                         base: theme.layout.mobile.spacing['2xl'],
@@ -129,14 +129,14 @@ const styles = StyleSheet.create(theme => ({
             },
             {
                 orientation: 'vertical',
-                space: 'none',
+                spacing: 'none',
                 styles: {
                     marginHorizontal: 0,
                 },
             },
             {
                 orientation: 'vertical',
-                space: '2xs',
+                spacing: '2xs',
                 styles: {
                     marginHorizontal: {
                         base: theme.layout.mobile.spacing['2xs'],
@@ -147,7 +147,7 @@ const styles = StyleSheet.create(theme => ({
             },
             {
                 orientation: 'vertical',
-                space: 'xs',
+                spacing: 'xs',
                 styles: {
                     marginHorizontal: {
                         base: theme.layout.mobile.spacing.xs,
@@ -158,7 +158,7 @@ const styles = StyleSheet.create(theme => ({
             },
             {
                 orientation: 'vertical',
-                space: 'sm',
+                spacing: 'sm',
                 styles: {
                     marginHorizontal: {
                         base: theme.layout.mobile.spacing.sm,
@@ -169,7 +169,7 @@ const styles = StyleSheet.create(theme => ({
             },
             {
                 orientation: 'vertical',
-                space: 'md',
+                spacing: 'md',
                 styles: {
                     marginHorizontal: {
                         base: theme.layout.mobile.spacing.md,
@@ -180,7 +180,7 @@ const styles = StyleSheet.create(theme => ({
             },
             {
                 orientation: 'vertical',
-                space: 'lg',
+                spacing: 'lg',
                 styles: {
                     marginHorizontal: {
                         base: theme.layout.mobile.spacing.lg,
@@ -191,7 +191,7 @@ const styles = StyleSheet.create(theme => ({
             },
             {
                 orientation: 'vertical',
-                space: 'xl',
+                spacing: 'xl',
                 styles: {
                     marginHorizontal: {
                         base: theme.layout.mobile.spacing.xl,
@@ -202,7 +202,7 @@ const styles = StyleSheet.create(theme => ({
             },
             {
                 orientation: 'vertical',
-                space: '2xl',
+                spacing: '2xl',
                 styles: {
                     marginHorizontal: {
                         base: theme.layout.mobile.spacing['2xl'],

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

@@ -2,6 +2,12 @@ import type { DimensionValue, ViewProps } from 'react-native';
 import type { ColorValue, SpacingValues } from '../../types';
 interface DividerProps extends Omit<ViewProps, 'children'> {
     color?: ColorValue;
+    backgroundColor?: ColorValue;
+    spacing?: SpacingValues;
+    /**
+     * The space between child elements (gap).
+     * @deprecated Use `spacing` instead. The `space` prop will be removed in a future release.
+     */
     space?: SpacingValues;
     orientation?: 'horizontal' | 'vertical';
     height?: DimensionValue;

package/build/components/ExpandableCard/ExpandableCardExpandedContent.js

@@ -4,7 +4,7 @@ import { StyleSheet } from 'react-native-unistyles';
 import { Divider } from '../Divider';
 import { Expandable } from '../Expandable';
 const ExpandableCardExpandedContent = ({ children, isExpanded, duration = 200, animateOpacity = true, }) => {
-    return (_jsx(View, { style: styles.container, children: _jsx(Expandable, { expanded: isExpanded, duration: duration, animateOpacity: animateOpacity, children: _jsxs(View, { children: [_jsx(Divider, { space: "none" }), _jsx(View, { style: styles.content, children: children })] }) }) }));
+    return (_jsx(View, { style: styles.container, children: _jsx(Expandable, { expanded: isExpanded, duration: duration, animateOpacity: animateOpacity, children: _jsxs(View, { children: [_jsx(Divider, { spacing: "none" }), _jsx(View, { style: styles.content, children: children })] }) }) }));
 };
 ExpandableCardExpandedContent.displayName = 'ExpandableCardExpandedContent';
 const styles = StyleSheet.create(theme => ({

package/build/components/Flex/Flex.d.ts

@@ -1,6 +1,6 @@
 import FlexProps from './Flex.props';
 declare const Flex: {
-    ({ style, children, direction, align, justify, wrap, space, ...rest }: FlexProps): import("react/jsx-runtime").JSX.Element;
+    ({ style, children, direction, align, justify, wrap, spacing, space, ...rest }: FlexProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Flex;

package/build/components/Flex/Flex.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-const Flex = ({ style, children, direction = 'column', align = 'flex-start', justify = 'flex-start', wrap = 'nowrap', space = 'md', ...rest }) => {
+const Flex = ({ style, children, direction = 'column', align = 'flex-start', justify = 'flex-start', wrap = 'nowrap', spacing = 'md', space, ...rest }) => {
     const propStyle = {
         flexDirection: direction,
         alignItems: align,
         justifyContent: justify,
         flexWrap: wrap,
     };
-    styles.useVariants({ space });
+    styles.useVariants({ spacing: space ?? spacing });
     return (_jsx(View, { style: [propStyle, styles.flex, style], ...rest, children: children }));
 };
 Flex.displayName = 'Flex';
@@ -16,7 +16,7 @@ const styles = StyleSheet.create(theme => ({
     flex: {
         display: 'flex',
         variants: {
-            space: theme.globalStyle.variants.space,
+            spacing: theme.globalStyle.variants.spacing,
         },
     },
 }));

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

@@ -5,6 +5,11 @@ interface FlexProps extends ViewProps {
     align?: FlexAlignType;
     justify?: ViewStyle['justifyContent'];
     wrap?: ViewStyle['flexWrap'];
+    spacing?: SpacingValues;
+    /**
+     * The space between child elements (gap).
+     * @deprecated Use `spacing` instead. The `space` prop will be removed in a future release.
+     */
     space?: SpacingValues;
 }
 export default FlexProps;

package/build/components/Grid/Grid.d.ts

@@ -1,6 +1,6 @@
 import type { GridProps } from './Grid.props';
 declare const Grid: {
-    ({ columns, containerStyle, itemStyle, rowStyle, space, children, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
+    ({ columns, containerStyle, itemStyle, rowStyle, spacing, space, children, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Grid;

package/build/components/Grid/Grid.js

@@ -3,13 +3,13 @@ import React, { useMemo } from 'react';
 import { useWindowDimensions, View } from 'react-native';
 import { StyleSheet, UnistylesRuntime } from 'react-native-unistyles';
 import { useStyleProps, useTheme } from '../../hooks';
-const Grid = ({ columns = 2, containerStyle, itemStyle, rowStyle, space, children, ...props }) => {
+const Grid = ({ columns = 2, containerStyle, itemStyle, rowStyle, spacing, space, children, ...props }) => {
     const { breakpoints } = useTheme();
     const { computedStyles, remainingProps } = useStyleProps(props);
     const childrenArray = React.Children.toArray(children).filter(Boolean);
     const { width } = useWindowDimensions();
     const { gap, columnGap, rowGap } = { ...remainingProps, ...computedStyles };
-    styles.useVariants({ space });
+    styles.useVariants({ spacing: space ?? spacing });
     const getColumnsForWidth = useMemo(() => {
         // If columns is a number, use that number
         if (typeof columns === 'number') {
@@ -78,14 +78,14 @@ const styles = StyleSheet.create(theme => ({
     rowsContainer: {
         width: '100%',
         variants: {
-            space: theme.globalStyle.variants.space,
+            spacing: theme.globalStyle.variants.spacing,
         },
     },
     row: {
         flexDirection: 'row',
         width: '100%',
         variants: {
-            space: theme.globalStyle.variants.space,
+            spacing: theme.globalStyle.variants.spacing,
         },
     },
     item: {

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

@@ -13,6 +13,11 @@ export interface GridProps extends ViewProps {
     /**
      * Spacing between grid items (applies to both rows and columns)
      */
+    spacing?: SpacingValues;
+    /**
+     * Spacing between grid items (applies to both rows and columns)
+     * @deprecated Use `spacing` instead. The `space` prop will be removed in a future release.
+     */
     space?: SpacingValues;
     /**
      * Gap between items (overrides spacing if provided)

package/build/components/Modal/Modal.js

@@ -138,21 +138,31 @@ const styles = StyleSheet.create((theme, rt) => ({
         variants: {
             bothButtons: {
                 true: {
-                    paddingBottom: 166 + rt.insets.bottom - theme.components.modal.padding,
+                    paddingBottom: 166 +
+                        rt.insets.bottom -
+                        theme.components.modal.padding +
+                        theme.components.bottomSheet.padding,
                 },
                 false: {
-                    paddingBottom: 102 + rt.insets.bottom - theme.components.modal.padding,
+                    paddingBottom: 102 +
+                        rt.insets.bottom -
+                        theme.components.modal.padding +
+                        theme.components.bottomSheet.padding,
                 },
             },
             noButtons: {
                 true: {
-                    paddingBottom: rt.insets.bottom + theme.components.modal.padding,
+                    paddingBottom: rt.insets.bottom +
+                        theme.components.modal.padding +
+                        theme.components.bottomSheet.padding,
                 },
             },
             stickyFooter: {
                 true: {},
                 false: {
-                    paddingBottom: rt.insets.bottom + theme.components.modal.padding,
+                    paddingBottom: rt.insets.bottom +
+                        theme.components.modal.padding +
+                        theme.components.bottomSheet.padding,
                 },
             },
         },

package/build/components/Radio/RadioGroupTextContent.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Flex } from '../Flex';
 const RadioGroupTextContent = ({ children, ...props }) => {
-    return (_jsx(Flex, { direction: "column", space: "none", ...props, children: children }));
+    return (_jsx(Flex, { direction: "column", spacing: "none", ...props, children: children }));
 };
 RadioGroupTextContent.displayName = 'RadioGroupTextContent';
 export default RadioGroupTextContent;

package/build/components/Radio/RadioTextContent.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { StyleSheet } from 'react-native-unistyles';
 import { Flex } from '../Flex';
 const RadioTextContent = ({ children, style, ...props }) => {
-    return (_jsx(Flex, { direction: "column", space: "none", style: [styles.content, style], ...props, children: children }));
+    return (_jsx(Flex, { direction: "column", spacing: "none", style: [styles.content, style], ...props, children: children }));
 };
 const styles = StyleSheet.create({
     content: {

package/build/components/Toast/Toast.context.d.ts

@@ -1,9 +1,7 @@
 import React from 'react';
-import type { ToastContextValue } from './Toast.props';
+import type { ToastContextValue, ToastProviderProps } from './Toast.props';
 declare const ToastContext: React.Context<ToastContextValue | undefined>;
 export declare const useToastContext: () => ToastContextValue;
-export declare const ToastProvider: React.FC<{
-    children: React.ReactNode;
-}>;
+export declare const ToastProvider: React.FC<ToastProviderProps>;
 export declare const useToast: () => ToastContextValue;
 export default ToastContext;

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

@@ -10,7 +10,7 @@ export const useToastContext = () => {
         throw new Error('useToastContext must be used within ToastProvider');
     return ctx;
 };
-export const ToastProvider = ({ children }) => {
+export const ToastProvider = ({ children, safeAreaPadding = true, }) => {
     const [toasts, setToasts] = useState([]);
     const timers = useRef({});
     const toastRefs = useRef({});
@@ -53,6 +53,9 @@ export const ToastProvider = ({ children }) => {
         }
         return id;
     }, [removeToast]);
+    styles.useVariants({
+        safeAreaPadding,
+    });
     useEffect(() => {
         return () => {
             // cleanup timers on unmount
@@ -71,7 +74,7 @@ export const useToast = () => {
     return ctx;
 };
 export default ToastContext;
-const styles = StyleSheet.create(theme => ({
+const styles = StyleSheet.create((theme, rt) => ({
     container: {
         position: 'absolute',
         left: 0,
@@ -80,6 +83,15 @@ const styles = StyleSheet.create(theme => ({
         alignItems: 'stretch',
         paddingBottom: theme.space['200'],
         pointerEvents: 'box-none',
+        variants: {
+            safeAreaPadding: {
+                true: {
+                    paddingBottom: theme.space['200'] + rt.insets.bottom,
+                    paddingTop: rt.insets.top,
+                },
+                false: {},
+            },
+        },
     },
     stack: {
         width: '100%',

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

@@ -22,6 +22,10 @@ export interface ToastInstance extends ToastOptions {
     /** resolved duration */
     duration: number;
 }
+export interface ToastProviderProps {
+    children: ReactNode;
+    safeAreaPadding?: boolean;
+}
 export interface ToastContextValue {
     addToast: (opts: ToastOptions) => string;
     removeToast: (id: string) => void;

package/build/components/Toast/ToastItem.js

@@ -81,7 +81,7 @@ const ToastItem = forwardRef(({ toast, onClose }, ref) => {
             }
         }
     };
-    const toastContent = (_jsxs(View, { style: styles.inner, children: [_jsxs(View, { style: styles.content, children: [IconComp ? (_jsx(View, { style: styles.iconWrap, children: _jsx(Icon, { as: IconComp, style: styles.icon }) })) : null, _jsx(BodyText, { inverted: true, children: toast.text })] }), toast.actionText ? (_jsx(Link, { onPress: handlePress, showIcon: false, inverted: true, children: toast.actionText })) : null, showDismissIcon ? (_jsx(View, { style: styles.actions, children: _jsx(UnstyledIconButton, { icon: CloseSmallIcon, accessibilityLabel: "Dismiss", inverted: true, onPress: () => handleDismiss(false) }) })) : null] }));
+    const toastContent = (_jsxs(View, { style: styles.inner, children: [_jsxs(View, { style: styles.content, children: [IconComp ? (_jsx(View, { style: styles.iconWrap, children: _jsx(Icon, { as: IconComp, style: styles.icon }) })) : null, _jsx(BodyText, { inverted: true, style: styles.text, children: toast.text })] }), toast.actionText ? (_jsx(Link, { onPress: handlePress, showIcon: false, inverted: true, children: toast.actionText })) : null, showDismissIcon ? (_jsx(View, { style: styles.actions, children: _jsx(UnstyledIconButton, { icon: CloseSmallIcon, accessibilityLabel: "Dismiss", inverted: true, onPress: () => handleDismiss(false) }) })) : null] }));
     return (_jsx(GestureDetector, { gesture: panGesture, children: _jsx(AnimatedView, { style: [styles.toast, animatedStyle], ...(Platform.OS === 'ios' && {
                 accessible: true,
                 accessibilityRole: 'alert',
@@ -122,6 +122,7 @@ const styles = StyleSheet.create(theme => ({
         alignItems: 'center',
         minWidth: 0,
     },
+    text: { flexShrink: 1 },
     actions: {
         flexShrink: 0,
     },

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

@@ -1,6 +1,3 @@
-import VerificationInputProps from './VerificationInput.props';
-declare const VerificationInput: {
-    ({ value, onChangeText, label, labelVariant, helperText, helperIcon, validationStatus, validText, invalidText, disabled, readonly, secureTextEntry, style, ...props }: VerificationInputProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+import type { VerificationInputHandle, VerificationInputProps } from './VerificationInput.props';
+declare const VerificationInput: import("react").ForwardRefExoticComponent<VerificationInputProps & import("react").RefAttributes<VerificationInputHandle>>;
 export default VerificationInput;

package/build/components/VerificationInput/VerificationInput.js

@@ -1,24 +1,37 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle } from 'react';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { FormField } from '../FormField';
 import { useVerificationInput } from './useVerificationInput';
 import { VerificationInputSlot } from './VerificationInputSlot';
-const VerificationInput = ({ value = '', onChangeText, label, labelVariant = 'body', helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled = false, readonly = false, secureTextEntry = false, style, ...props }) => {
+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, focusedIndex, handleFocus, handleBlur, handleChangeText, handleKeyPress } = useVerificationInput({
+    const { inputRefs, displayValue, focusedIndex, handleFocus, handleBlur, handleChangeText, handleKeyPress, } = useVerificationInput({
         value,
         onChangeText,
     });
+    useImperativeHandle(ref, () => ({
+        focus: () => inputRefs.current[0]?.focus(),
+        blur: () => {
+            inputRefs.current.forEach(input => input?.blur());
+        },
+        clear: () => onChangeText?.(''),
+        focusIndex: (index) => {
+            if (index >= 0 && index < length) {
+                inputRefs.current[index]?.focus();
+            }
+        },
+    }), [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 = value[index] || '';
+                const char = displayValue[index] || '';
                 const isActive = focusedIndex === index;
-                return (_jsx(VerificationInputSlot, { ref: ref => {
-                        inputRefs.current[index] = ref;
-                    }, 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));
+                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 styles = StyleSheet.create(theme => ({
     root: {
         gap: theme.components.input.verification.gap,

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 {};