@utilitywarehouse/hearth-react-native 0.11.0 → 0.13.0

package/build/components/Input/Input.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createInput } from '@gluestack-ui/input';
-import { useState } from 'react';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import { CloseSmallIcon, EyeOffSmallIcon, EyeSmallIcon, SearchMediumIcon, } from '@utilitywarehouse/hearth-react-native-icons';
 import { useTheme } from '../../hooks';
 import { useFormFieldContext } from '../FormField';
@@ -19,13 +19,16 @@ export const InputComponent = createInput({
 export const InputSlot = InputComponent.Slot;
 export const InputField = InputComponent.Input;
 export const InputIcon = InputComponent.Icon;
-const Input = ({ validationStatus = 'initial', children, disabled, focused, readonly, leadingIcon, trailingIcon, type, showPasswordToggle = true, onClear, format, loading, clearable = false, required, inBottomSheet = false, ...props }) => {
+const Input = forwardRef(({ validationStatus = 'initial', children, disabled, focused, readonly, leadingIcon, trailingIcon, type, showPasswordToggle = true, onClear, format, loading, clearable = false, required, inBottomSheet = false, ...props }, ref) => {
     const formFieldContext = useFormFieldContext();
     const { disabled: formFieldDisabled } = formFieldContext;
     const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
     const isRequired = formFieldContext?.required ?? required;
     const [fieldType, setFieldType] = useState(type === 'password' ? 'password' : 'text');
     const { color } = useTheme();
+    const inputRef = useRef(null);
+    // Expose TextInput methods to parent components
+    useImperativeHandle(ref, () => inputRef.current, []);
     const shouldShowPasswordToggle = type === 'password' && showPasswordToggle;
     const shouldShowClear = clearable && !!props?.value;
     const toggleFieldType = () => {
@@ -43,7 +46,11 @@ const Input = ({ validationStatus = 'initial', children, disabled, focused, read
         }
         return undefined;
     })();
-    return (_jsx(InputComponent, { ...(children ? props : {}), validationStatus: validationStatusFromContext, isInvalid: validationStatusFromContext === 'invalid', isReadOnly: readonly, isDisabled: formFieldDisabled ?? disabled, isFocused: focused, type: type, isRequired: isRequired, children: children ? (_jsx(_Fragment, { children: children })) : (_jsxs(_Fragment, { children: [!!leadingIconComponent && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: leadingIconComponent }) })), _jsx(InputField, { type: fieldType, inputMode: getInputMode, inBottomSheet: inBottomSheet, ...props }), shouldShowClear && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: onClear, icon: CloseSmallIcon }) })), loading && (_jsx(InputSlot, { children: _jsx(Spinner, { size: "xs", color: color.icon.primary }) })), shouldShowPasswordToggle && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: toggleFieldType, icon: fieldType === 'password' ? EyeSmallIcon : EyeOffSmallIcon }) })), !!trailingIcon && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: trailingIcon }) }))] })) }));
-};
+    return (_jsx(InputComponent, { ...(children ? props : {}), validationStatus: validationStatusFromContext, isInvalid: validationStatusFromContext === 'invalid', isReadOnly: readonly, isDisabled: formFieldDisabled ?? disabled, isFocused: focused, type: type, isRequired: isRequired, children: children ? (_jsx(_Fragment, { children: children })) : (_jsxs(_Fragment, { children: [!!leadingIconComponent && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: leadingIconComponent }) })), _jsx(InputField
+                // @ts-expect-error - ref forwarding issue
+                , { 
+                    // @ts-expect-error - ref forwarding issue
+                    ref: inputRef, type: fieldType, inputMode: getInputMode, inBottomSheet: inBottomSheet, ...props }), shouldShowClear && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: onClear, icon: CloseSmallIcon }) })), loading && (_jsx(InputSlot, { children: _jsx(Spinner, { size: "xs", color: color.icon.primary }) })), shouldShowPasswordToggle && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: toggleFieldType, icon: fieldType === 'password' ? EyeSmallIcon : EyeOffSmallIcon }) })), !!trailingIcon && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: trailingIcon }) }))] })) }));
+});
 Input.displayName = 'Input';
 export default Input;

package/build/components/Input/InputField.d.ts

@@ -1,8 +1,5 @@
-import { TextInputProps } from 'react-native';
-declare const InputField: {
-    ({ style, inBottomSheet, ...props }: TextInputProps & {
-        inBottomSheet?: boolean;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+import { TextInput as RNTextInput, TextInputProps } from 'react-native';
+declare const InputField: import("react").ForwardRefExoticComponent<TextInputProps & {
+    inBottomSheet?: boolean;
+} & import("react").RefAttributes<RNTextInput>>;
 export default InputField;

package/build/components/Input/InputField.js

@@ -1,20 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
+import { forwardRef } from 'react';
 import { TextInput as RNTextInput } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { useInputContext } from './Input.context';
-const InputField = ({ style, inBottomSheet = false, ...props }) => {
+const InputField = forwardRef(({ style, inBottomSheet = false, ...props }, ref) => {
     const { disabled, focused = false, type } = useInputContext();
     styles.useVariants({ focused, type });
     const { color } = useTheme();
     if (inBottomSheet) {
         return (
-        // @ts-expect-error - BottomSheetTextInput type issue
-        _jsx(BottomSheetTextInput, { placeholderTextColor: color.text.secondary, selectionColor: color.purple[700], cursorColor: color.purple[700], verticalAlign: "middle", "aria-disabled": disabled, ...props, style: [styles.input, style] }));
+        // @ts-expect-error - BottomSheetTextInput has incompatible event types with TextInput
+        _jsx(BottomSheetTextInput, { ref: ref, placeholderTextColor: color.text.secondary, selectionColor: color.surface.brand.default, cursorColor: color.surface.brand.default, verticalAlign: "middle", "aria-disabled": disabled, ...props, style: [styles.input, style] }));
     }
-    return (_jsx(RNTextInput, { placeholderTextColor: color.text.secondary, selectionColor: color.purple[700], cursorColor: color.purple[700], verticalAlign: "middle", "aria-disabled": disabled, ...props, style: [styles.input, style] }));
-};
+    return (_jsx(RNTextInput, { ref: ref, placeholderTextColor: color.text.secondary, selectionColor: color.surface.brand.default, cursorColor: color.surface.brand.default, verticalAlign: "middle", "aria-disabled": disabled, ...props, style: [styles.input, style] }));
+});
 InputField.displayName = 'InputField';
 const styles = StyleSheet.create(theme => ({
     input: {

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

@@ -1,5 +1,5 @@
+import { ReactNode } from 'react';
 import type { PressableProps, ViewProps } from 'react-native';
-import BadgeProps from '../../Badge/Badge.props';
 interface ListItemBaseProps extends Omit<PressableProps, 'children'> {
     loading?: boolean;
     disabled?: boolean;
@@ -23,7 +23,7 @@ export interface ListItemWithoutChildren extends ListItemBaseProps {
     leadingContent?: ViewProps['children'];
     trailingContent?: ViewProps['children'];
     numericValue?: string | number;
-    badge?: BadgeProps;
+    badge?: ReactNode;
     badgePosition?: 'top' | 'bottom';
 }
 type ListItemProps = ListItemWithChildren | ListItemWithoutChildren;

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

@@ -3,7 +3,6 @@ import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-ico
 import { useMemo } from 'react';
 import { Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { Badge } from '../../Badge';
 import { DetailText } from '../../DetailText';
 import { Skeleton } from '../../Skeleton';
 import { useListContext } from '../List.context';
@@ -53,7 +52,7 @@ const ListItemRoot = ({ heading, helperText, leadingContent, trailingContent, di
     if (loading || listContext?.loading) {
         return (_jsxs(Pressable, { ...props, testID: loadingTestID, style: [styles.container, props.style], disabled: isDisabled, children: [leadingContent ? _jsx(Skeleton, { width: 24, height: 24 }) : null, _jsxs(ListItemContent, { children: [_jsx(Skeleton, { width: "80%", height: 20 }), _jsx(Skeleton, { width: "100%", height: 16 })] }), onPress || trailingContent ? _jsx(Skeleton, { width: 24, height: 24 }) : null] }));
     }
-    return (_jsx(ListItemContext.Provider, { value: value, children: _jsx(Pressable, { ...props, testID: testID, style: [styles.container, props.style], disabled: isDisabled, accessibilityRole: onPress ? 'button' : undefined, children: children ? (children) : (_jsxs(_Fragment, { children: [leadingContent ? (_jsx(ListItemLeadingContent, { children: leadingContent })) : null, _jsxs(ListItemContent, { children: [badgePosition === 'top' && badge ? _jsx(Badge, { ...badge }) : null, _jsx(ListItemText, { children: heading }), helperText ? _jsx(ListItemHelperText, { children: helperText }) : null, badgePosition === 'bottom' && badge ? _jsx(Badge, { ...badge }) : null] }), !!numericValue && _jsx(DetailText, { size: "lg", children: numericValue }), trailingContent ? (_jsx(ListItemTrailingContent, { children: trailingContent })) : onPress ? (_jsx(ListItemTrailingContent, { style: styles.centeredTrailingIcon, children: _jsx(ListItemTrailingIcon, { as: ChevronRightSmallIcon }) })) : null] })) }) }));
+    return (_jsx(ListItemContext.Provider, { value: value, children: _jsx(Pressable, { ...props, testID: testID, style: [styles.container, props.style], disabled: isDisabled, accessibilityRole: onPress ? 'button' : undefined, children: children ? (children) : (_jsxs(_Fragment, { children: [leadingContent ? (_jsx(ListItemLeadingContent, { children: leadingContent })) : null, _jsxs(ListItemContent, { children: [badgePosition === 'top' && badge ? badge : null, _jsx(ListItemText, { children: heading }), helperText ? _jsx(ListItemHelperText, { children: helperText }) : null, badgePosition === 'bottom' && badge ? badge : null] }), !!numericValue && _jsx(DetailText, { size: "lg", children: numericValue }), trailingContent ? (_jsx(ListItemTrailingContent, { children: trailingContent })) : onPress ? (_jsx(ListItemTrailingContent, { style: styles.centeredTrailingIcon, children: _jsx(ListItemTrailingIcon, { as: ChevronRightSmallIcon }) })) : null] })) }) }));
 };
 ListItemRoot.displayName = 'ListItemRoot';
 const styles = StyleSheet.create(theme => ({

package/build/components/Modal/Modal.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { useCallback, useEffect, useImperativeHandle, useRef } from 'react';
-import { AccessibilityInfo, Image, Platform, View, findNodeHandle } from 'react-native';
+import { AccessibilityInfo, Platform, View, findNodeHandle } from 'react-native';
 import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withTiming, } from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
@@ -98,7 +98,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         }
     };
     styles.useVariants({ loading });
-    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: "Loading..." })] })) : (_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: [_jsx(Image, { style: styles.image, ...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, _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: "Loading..." })] })) : (_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, _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] })] })) }));
     return inNavModal ? (_jsxs(View, { style: { flex: 1, backgroundColor: theme.color.background.primary }, children: [Platform.OS === 'android' ? (_jsx(Animated.View, { style: [styles.androidContainer, animatedBackgroundStyle], children: _jsx(Animated.View, { style: [styles.pretendContent, animatedPretendContentStyle] }) })) : null, _jsx(Animated.View, { style: [styles.inNavModalContainer, Platform.OS === 'android' && animatedInNavModalStyle], children: _jsx(View, { style: styles.inNavModalContent, children: content }) })] })) : (_jsxs(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image || fullscreen ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, style: styles.modal, ...props, onChange: handleChange, children: [loading ? _jsx(View, { style: styles.loadingTop }) : null, _jsx(BottomSheetScrollView, { contentContainerStyle: styles.container, ref: scrollViewRef, children: content })] }));
 };
 const styles = StyleSheet.create((theme, rt) => ({
@@ -124,10 +124,6 @@ const styles = StyleSheet.create((theme, rt) => ({
         flex: 1,
         gap: theme.components.modal.content.gap,
     },
-    image: {
-        width: 260,
-        height: 260,
-    },
     imageContainer: {
         alignItems: 'center',
         flex: 1,

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

@@ -1,10 +1,11 @@
-import { ImageProps, ViewProps } from 'react-native';
+import { ReactNode } from 'react';
+import { ViewProps } from 'react-native';
 import { BottomSheetProps } from '../BottomSheet';
 import { ButtonWithoutChildrenProps } from '../Button/Button.props';
 import { UnstyledIconButtonProps } from '../UnstyledIconButton';
 interface ModalProps extends Omit<BottomSheetProps, 'children'> {
     loading?: boolean;
-    image?: ImageProps;
+    image?: ReactNode;
     showCloseButton?: boolean;
     heading?: string;
     description?: string;

package/build/components/Modal/Modal.web.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { useCallback, useEffect, useImperativeHandle, useRef } from 'react';
-import { AccessibilityInfo, Image, Platform, View, findNodeHandle } from 'react-native';
+import { AccessibilityInfo, Platform, View, findNodeHandle } from 'react-native';
 import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withTiming, } from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
@@ -97,7 +97,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
             bottomSheetModalRef.current?.dismiss();
         }
     };
-    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: "Loading..." })] })) : (_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: [_jsx(Image, { style: styles.image, ...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, _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: "Loading..." })] })) : (_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, _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] })] })) }));
     return inNavModal ? (_jsxs(View, { style: { flex: 1, backgroundColor: theme.color.background.primary }, children: [Platform.OS === 'android' ? (_jsx(Animated.View, { style: [styles.androidContainer, animatedBackgroundStyle], children: _jsx(Animated.View, { style: [styles.pretendContent, animatedPretendContentStyle] }) })) : null, _jsx(Animated.View, { style: [styles.inNavModalContainer, Platform.OS === 'android' && animatedInNavModalStyle], children: _jsx(View, { style: styles.inNavModalContent, children: content }) })] })) : (_jsx(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, ...props, onChange: handleChange, children: _jsx(BottomSheetScrollView, { contentContainerStyle: styles.container, ref: scrollViewRef, children: content }) }));
 };
 const styles = StyleSheet.create((theme, rt) => ({
@@ -113,10 +113,6 @@ const styles = StyleSheet.create((theme, rt) => ({
         flex: 1,
         gap: theme.components.modal.content.gap,
     },
-    image: {
-        width: 260,
-        height: 260,
-    },
     imageContainer: {
         alignItems: 'center',
         justifyContent: 'center',

package/build/components/Modal/ModalImage.d.ts

@@ -0,0 +1,4 @@
+import { ImageProps } from 'react-native';
+import { ThemedImageProps } from '../ThemedImage';
+declare const ModalImage: (props: ImageProps | ThemedImageProps) => import("react/jsx-runtime").JSX.Element;
+export default ModalImage;

package/build/components/Modal/ModalImage.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Image } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { isThemedImageProps } from '../../utils';
+import { ThemedImage } from '../ThemedImage';
+const ModalImage = (props) => {
+    if (isThemedImageProps(props)) {
+        return _jsx(ThemedImage, { ...props, style: [styles.image, props.style] });
+    }
+    return _jsx(Image, { resizeMode: "cover", ...props, style: [styles.image, props.style] });
+};
+const styles = StyleSheet.create({
+    image: {
+        width: 260,
+        height: 260,
+    },
+});
+export default ModalImage;

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

@@ -1,2 +1,3 @@
 export { default as Modal } from './Modal';
 export type { default as ModalProps } from './Modal.props';
+export { default as ModalImage } from './ModalImage';

package/build/components/Modal/index.js

@@ -1 +1,2 @@
 export { default as Modal } from './Modal';
+export { default as ModalImage } from './ModalImage';

package/build/components/PillGroup/Pill.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createPressable } from '@gluestack-ui/pressable';
 import { Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { Icon } from '../Icon';
 import { BodyText } from '../BodyText';
+import { Icon } from '../Icon';
 import { usePillGroupContext } from './PillGroup.context';
 const PillRoot = ({ value, label, icon, states = {}, ...props }) => {
     const { active } = states;
@@ -35,7 +35,7 @@ const styles = StyleSheet.create(theme => ({
             _hover: {
                 backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
             },
-            '_focus-visible': theme.helpers.focusVisible,
+            // '_focus-visible': theme.helpers.focusVisible,
         },
         variants: {
             active: {

package/build/components/Radio/Radio.js

@@ -8,7 +8,6 @@ import StyledRadio from './RadioRoot';
 import { useFormFieldContext } from '../FormField';
 import { Helper } from '../Helper';
 import { useRadioGroupContext } from './RadioGroup.context';
-import RadioImage from './RadioImage';
 import RadioTextContent from './RadioTextContent';
 import RadioTileRoot from './RadioTileRoot';
 const RadioComponent = createRadio({
@@ -31,7 +30,7 @@ const Radio = ({ children, label, disabled, helperIcon, helperText, invalidText,
     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 ? _jsx(RadioImage, { ...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 }), 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

@@ -1,5 +1,5 @@
-import type { ComponentType } from 'react';
-import type { ImageProps, PressableProps, ViewProps } from 'react-native';
+import type { ComponentType, ReactNode } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
 interface RadioBaseProps extends Omit<PressableProps, 'children'> {
     value: string;
     onChange?: (isSelected: boolean) => void;
@@ -25,7 +25,7 @@ interface RadioWithoutChildrenProps extends RadioBaseProps {
     invalidText?: string;
     validText?: string;
     showValidationIcon?: boolean;
-    image?: ImageProps;
+    image?: ReactNode;
 }
 type RadioProps = RadioWithChildrenProps | RadioWithoutChildrenProps;
 export default RadioProps;

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

@@ -1,6 +1,7 @@
 import { ImageProps } from 'react-native';
+import { ThemedImageProps } from '../ThemedImage';
 declare const RadioImage: {
-    ({ source, style, ...props }: ImageProps): import("react/jsx-runtime").JSX.Element;
+    ({ ...props }: ImageProps | ThemedImageProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default RadioImage;

package/build/components/Radio/RadioImage.js

@@ -1,5 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Image } from 'react-native';
-const RadioImage = ({ source, style, ...props }) => (_jsx(Image, { source: source, style: style, ...props }));
+import { isThemedImageProps } from '../../utils';
+import { ThemedImage } from '../ThemedImage';
+const RadioImage = ({ ...props }) => {
+    if (isThemedImageProps(props)) {
+        return _jsx(ThemedImage, { ...props });
+    }
+    return _jsx(Image, { ...props });
+};
 RadioImage.displayName = 'RadioImage';
 export default RadioImage;

package/build/components/Radio/RadioIndicator.js

@@ -30,9 +30,9 @@ const styles = StyleSheet.create(theme => ({
             _hover: {
                 outlineColor: theme.components.radio.outlineColorHover,
             },
-            '_focus-within': {
-                ...theme.helpers.focusVisible,
-            },
+            // '_focus-within': {
+            //   ...theme.helpers.focusVisible,
+            // },
             _active: {
                 outlineColor: theme.components.radio.outlineColorActive,
             },

package/build/components/RadioCard/RadioCardIndicator.js

@@ -30,9 +30,9 @@ const styles = StyleSheet.create(theme => ({
             _hover: {
                 outlineColor: theme.components.radio.outlineColorHover,
             },
-            '_focus-within': {
-                ...theme.helpers.focusVisible,
-            },
+            // '_focus-within': {
+            //   ...theme.helpers.focusVisible,
+            // },
             _active: {
                 outlineColor: theme.components.radio.outlineColorActive,
             },

package/build/components/RadioCard/RadioCardRoot.js

@@ -52,9 +52,9 @@ const styles = StyleSheet.create(theme => ({
             },
         },
         _web: {
-            '_focus-visible': {
-                ...theme.helpers.focusVisible,
-            },
+        // '_focus-visible': {
+        //   ...theme.helpers.focusVisible,
+        // },
         },
     },
 }));

package/build/components/Tabs/Tab.js

@@ -38,11 +38,11 @@ const styles = StyleSheet.create(theme => ({
             _hover: {
                 backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
             },
-            '_focus-visible': {
-                ...theme.helpers.focusVisible,
-                outlineOffset: -2,
-                borderRadius: theme.borderRadius.sm,
-            },
+            // '_focus-visible': {
+            //   ...theme.helpers.focusVisible,
+            //   outlineOffset: -2,
+            //   borderRadius: theme.borderRadius.sm,
+            // },
             _active: {
                 backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
             },

package/build/components/ToggleButton/ToggleButtonRoot.js

@@ -7,7 +7,7 @@ const ButtonRoot = ({ children, onToggle, toggled, states, onPress, ...props })
     const { pressed } = useCardPressHandlerContext();
     styles.useVariants({
         toggled,
-        active: active || pressed,
+        active,
     });
     const handlePress = (e) => {
         onPress?.(e);
@@ -34,7 +34,7 @@ const styles = StyleSheet.create(theme => ({
         borderColor: theme.color.interactive.neutral.border.subtle,
         height: theme.components.toggleButton.height,
         _web: {
-            '_focus-visible': theme.helpers.focusVisible,
+            // '_focus-visible': theme.helpers.focusVisible,
             _hover: {
                 backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
             },

package/build/components/ToggleButtonCard/ToggleButtonCardRoot.js

@@ -44,9 +44,9 @@ const styles = StyleSheet.create(theme => ({
             },
         },
         _web: {
-            '_focus-visible': {
-                ...theme.helpers.focusVisible,
-            },
+        // '_focus-visible': {
+        //   ...theme.helpers.focusVisible,
+        // },
         },
     },
     buttonContainer: {

package/build/components/UnstyledIconButton/UnstyledIconButtonRoot.js

@@ -17,7 +17,7 @@ const styles = StyleSheet.create(theme => ({
         alignItems: 'center',
         borderRadius: theme.borderRadius.sm,
         _web: {
-            '_focus-visible': theme.helpers.focusVisible,
+        // '_focus-visible': theme.helpers.focusVisible,
         },
         variants: {
             disabled: {

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

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

package/build/components/VerificationInput/VerificationInput.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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, helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled = false, readonly = false, secureTextEntry = false, style, ...props }) => {
+    const length = 6;
+    const { inputRefs, focusedIndex, handleFocus, handleBlur, handleChangeText, handleKeyPress } = useVerificationInput({
+        value,
+        onChangeText,
+    });
+    const slots = Array.from({ length }, (_, index) => index);
+    return (_jsx(FormField, { label: label, 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 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));
+            }) }) }));
+};
+const styles = StyleSheet.create(theme => ({
+    root: {
+        gap: theme.components.input.verification.gap,
+        width: '100%',
+        maxWidth: theme.components.input.maxWidth,
+    },
+    slotsContainer: {
+        flexDirection: 'row',
+        gap: theme.components.input.verification.gap,
+        width: '100%',
+    },
+}));
+VerificationInput.displayName = 'VerificationInput';
+export default VerificationInput;

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

@@ -0,0 +1,49 @@
+import type { ComponentType } from 'react';
+import { ViewProps } from 'react-native';
+export interface VerificationInputProps extends ViewProps {
+    /**
+     * The value of the input.
+     */
+    value?: string;
+    /**
+     * Callback when the value changes.
+     */
+    onChangeText?: (text: string) => void;
+    /**
+     * The label for the input.
+     */
+    label?: string;
+    /**
+     * Helper text to display below the input.
+     */
+    helperText?: string;
+    /**
+     * Icon to display alongside the helper text.
+     */
+    helperIcon?: ComponentType;
+    /**
+     * The validation status of the input.
+     */
+    validationStatus?: 'initial' | 'valid' | 'invalid';
+    /**
+     * Text to display when validation status is 'valid'.
+     */
+    validText?: string;
+    /**
+     * Text to display when validation status is 'invalid'.
+     */
+    invalidText?: string;
+    /**
+     * Whether the input is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the input is read-only.
+     */
+    readonly?: boolean;
+    /**
+     * Whether to obscure the text entry (e.g. for passwords/OTPs).
+     */
+    secureTextEntry?: boolean;
+}
+export default VerificationInputProps;

package/build/components/VerificationInput/VerificationInput.props.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+import { TextInput, TextInputProps } from 'react-native';
+interface VerificationInputSlotProps extends TextInputProps {
+    isActive: boolean;
+    validationStatus: 'initial' | 'valid' | 'invalid';
+    disabled?: boolean;
+    readonly?: boolean;
+}
+export declare const VerificationInputSlot: import("react").ForwardRefExoticComponent<VerificationInputSlotProps & import("react").RefAttributes<TextInput>>;
+export {};

package/build/components/VerificationInput/VerificationInputSlot.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { StyleSheet } from 'react-native-unistyles';
+import InputField from '../Input/InputField';
+export const VerificationInputSlot = forwardRef(({ isActive, validationStatus, disabled, readonly, style, ...props }, ref) => {
+    styles.useVariants({
+        disabled,
+        readonly,
+        validationStatus,
+        active: isActive,
+    });
+    return (_jsx(InputField, { ref: ref, ...props, editable: !disabled && !readonly, selectTextOnFocus: true, keyboardType: "number-pad", style: [styles.slot, style] }));
+});
+VerificationInputSlot.displayName = 'VerificationInputSlot';
+const styles = StyleSheet.create(theme => ({
+    slot: {
+        flex: 0,
+        width: theme.components.input.height,
+        height: 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',
+        padding: 0,
+        variants: {
+            disabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                    color: theme.color.text.secondary,
+                },
+            },
+            readonly: {
+                true: {
+                    borderColor: theme.color.border.subtle,
+                    backgroundColor: theme.color.surface.neutral.subtle,
+                },
+            },
+            validationStatus: {
+                initial: {},
+                valid: {
+                    borderColor: theme.color.feedback.positive.border,
+                },
+                invalid: {
+                    borderColor: theme.color.feedback.danger.border,
+                },
+            },
+            active: {
+                true: {
+                    borderColor: theme.color.border.strong,
+                    borderWidth: theme.components.input.borderWidthFocused,
+                },
+            },
+        },
+        compoundVariants: [
+            {
+                validationStatus: 'invalid',
+                active: true,
+                styles: {
+                    borderColor: theme.color.feedback.danger.border,
+                },
+            },
+            {
+                validationStatus: 'valid',
+                active: true,
+                styles: {
+                    borderColor: theme.color.border.strong,
+                },
+            },
+        ],
+    },
+}));

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

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

package/build/components/VerificationInput/index.js

@@ -0,0 +1,3 @@
+import VerificationInput from './VerificationInput';
+export { default as VerificationInput } from './VerificationInput';
+export default VerificationInput;