@utilitywarehouse/hearth-react-native 0.17.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/IconButton/IconButton.props.d.ts

@@ -1,6 +1,7 @@
 import type { ComponentType } from 'react';
 import type { PressableProps } from 'react-native';
 import { ViewProps } from 'react-native-svg/lib/typescript/fabric/utils';
+import { ColorValue } from '../../types';
 import { ButtonVariants } from '../Button/Button.props';
 export type IconButtonProps = {
     disabled?: boolean;
@@ -9,4 +10,22 @@ export type IconButtonProps = {
     icon: ComponentType;
     loading?: boolean;
     children?: ViewProps['children'];
+    /**
+     * Custom background color override.
+     * ⚠️ Use sparingly and only for specific use cases (e.g., service buttons).
+     * @default undefined
+     */
+    backgroundColor?: ColorValue;
+    /**
+     * Custom active/pressed background color override.
+     * ⚠️ Use sparingly and only for specific use cases (e.g., service buttons).
+     * @default undefined
+     */
+    activeBackgroundColor?: ColorValue;
+    /**
+     * Custom shadow color override.
+     * ⚠️ Use sparingly and only for specific use cases (e.g., service buttons).
+     * @default undefined
+     */
+    shadowColor?: ColorValue;
 } & Omit<PressableProps, 'children'> & ButtonVariants;

package/build/components/IconButton/IconButtonRoot.d.ts

@@ -1,6 +1,6 @@
 import type { IconButtonProps } from './IconButton.props';
 declare const IconButtonRoot: {
-    ({ children, colorScheme, variant, size, inverted, states, ...props }: IconButtonProps & {
+    ({ children, colorScheme, variant, size, inverted, states, backgroundColor, activeBackgroundColor, shadowColor, ...props }: IconButtonProps & {
         states?: {
             active?: boolean;
             disabled?: boolean;

package/build/components/IconButton/IconButtonRoot.js

@@ -2,12 +2,23 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
+import { getFlattenedColorValue } from '../../utils';
 import { IconButtonContext } from './IconButton.context';
-const IconButtonRoot = ({ children, colorScheme = 'highlight', variant = 'solid', size = 'md', inverted = false, states, ...props }) => {
+const IconButtonRoot = ({ children, colorScheme = 'highlight', variant = 'solid', size = 'md', inverted = false, states, backgroundColor, activeBackgroundColor, shadowColor, ...props }) => {
     const { active, disabled } = states || {};
     styles.useVariants({ colorScheme, variant, size, inverted, disabled, active });
     const value = useMemo(() => ({ colorScheme, variant, size, inverted, disabled, active }), [colorScheme, variant, size, inverted, disabled, active]);
-    return (_jsx(IconButtonContext.Provider, { value: value, children: _jsx(Pressable, { ...props, style: [styles.container, props.style], children: children }) }));
+    return (_jsx(IconButtonContext.Provider, { value: value, children: _jsx(Pressable, { ...props, style: [
+                styles.container,
+                styles.overrides({
+                    backgroundColor,
+                    activeBackgroundColor,
+                    shadowColor,
+                    active,
+                    variant,
+                }),
+                props.style,
+            ], children: children }) }));
 };
 IconButtonRoot.displayName = 'IconButtonRoot';
 const styles = StyleSheet.create(theme => ({
@@ -394,5 +405,35 @@ const styles = StyleSheet.create(theme => ({
             },
         ],
     },
+    overrides: ({ backgroundColor, activeBackgroundColor, shadowColor, active, variant }) => ({
+        ...(backgroundColor
+            ? {
+                backgroundColor: getFlattenedColorValue(backgroundColor, theme.color),
+                _web: {
+                    _hover: {
+                        backgroundColor: getFlattenedColorValue(activeBackgroundColor ?? backgroundColor, theme.color),
+                    },
+                    _active: {
+                        backgroundColor: getFlattenedColorValue(activeBackgroundColor ?? backgroundColor, theme.color),
+                    },
+                },
+            }
+            : {}),
+        ...(active && activeBackgroundColor
+            ? {
+                backgroundColor: getFlattenedColorValue(activeBackgroundColor, theme.color),
+            }
+            : {}),
+        ...(shadowColor && variant === 'emphasis'
+            ? {
+                boxShadow: `${theme.shadow.mobile.sm.x}px ${theme.shadow.mobile.sm.y}px ${theme.shadow.mobile.sm.spread}px ${getFlattenedColorValue(shadowColor, theme.color)}`,
+            }
+            : {}),
+        ...(active && shadowColor && variant === 'emphasis'
+            ? {
+                boxShadow: 'none',
+            }
+            : {}),
+    }),
 }));
 export default IconButtonRoot;

package/build/components/List/ListItem/ListItemHelperText.d.ts

@@ -1,6 +1,6 @@
 import { BodyTextProps } from '../../BodyText';
 declare const ListItemHelperText: {
-    ({ children, ...props }: BodyTextProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, style, ...props }: BodyTextProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default ListItemHelperText;

package/build/components/List/ListItem/ListItemHelperText.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../../BodyText';
-const ListItemHelperText = ({ children, ...props }) => {
-    return (_jsx(BodyText, { size: "md", ...props, style: [styles.text, props.style], children: children }));
+const ListItemHelperText = ({ children, style, ...props }) => {
+    return (_jsx(BodyText, { size: "md", style: [styles.text, style], ...props, children: children }));
 };
 ListItemHelperText.displayName = 'ListItemHelperText';
 const styles = StyleSheet.create(theme => ({

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;