@utilitywarehouse/hearth-react-native 0.2.0 → 0.3.1

package/build/components/Divider/Divider.js

@@ -28,11 +28,13 @@ const styles = StyleSheet.create(theme => ({
             },
             space: {
                 none: {},
+                '2xs': {},
                 xs: {},
                 sm: {},
                 md: {},
                 lg: {},
                 xl: {},
+                '2xl': {},
             },
             flexItem: {
                 true: {
@@ -48,6 +50,17 @@ const styles = StyleSheet.create(theme => ({
                     marginVertical: 0,
                 },
             },
+            {
+                orientation: 'horizontal',
+                space: '2xs',
+                styles: {
+                    marginVertical: {
+                        base: theme.layout.mobile.spacing['2xs'],
+                        md: theme.layout.tablet.spacing['2xs'],
+                        lg: theme.layout.desktop.spacing['2xs'],
+                    },
+                },
+            },
             {
                 orientation: 'horizontal',
                 space: 'xs',
@@ -103,6 +116,17 @@ const styles = StyleSheet.create(theme => ({
                     },
                 },
             },
+            {
+                orientation: 'horizontal',
+                space: '2xl',
+                styles: {
+                    marginVertical: {
+                        base: theme.layout.mobile.spacing['2xl'],
+                        md: theme.layout.tablet.spacing['2xl'],
+                        lg: theme.layout.desktop.spacing['2xl'],
+                    },
+                },
+            },
             {
                 orientation: 'vertical',
                 space: 'none',
@@ -110,6 +134,17 @@ const styles = StyleSheet.create(theme => ({
                     marginHorizontal: 0,
                 },
             },
+            {
+                orientation: 'vertical',
+                space: '2xs',
+                styles: {
+                    marginHorizontal: {
+                        base: theme.layout.mobile.spacing['2xs'],
+                        md: theme.layout.tablet.spacing['2xs'],
+                        lg: theme.layout.desktop.spacing['2xs'],
+                    },
+                },
+            },
             {
                 orientation: 'vertical',
                 space: 'xs',
@@ -165,6 +200,17 @@ const styles = StyleSheet.create(theme => ({
                     },
                 },
             },
+            {
+                orientation: 'vertical',
+                space: '2xl',
+                styles: {
+                    marginHorizontal: {
+                        base: theme.layout.mobile.spacing['2xl'],
+                        md: theme.layout.tablet.spacing['2xl'],
+                        lg: theme.layout.desktop.spacing['2xl'],
+                    },
+                },
+            },
         ],
     },
     extraStyles: (color, width, height) => ({

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

@@ -1,8 +1,8 @@
 import type { DimensionValue, ViewProps } from 'react-native';
-import type { ColorValue } from '../../types';
+import type { ColorValue, SpacingValues } from '../../types';
 interface DividerProps extends Omit<ViewProps, 'children'> {
     color?: ColorValue;
-    space?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    space?: SpacingValues;
     orientation?: 'horizontal' | 'vertical';
     height?: DimensionValue;
     width?: DimensionValue;

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

@@ -1,9 +1,10 @@
-import type { ViewProps, ViewStyle, FlexAlignType } from 'react-native';
+import type { FlexAlignType, ViewProps, ViewStyle } from 'react-native';
+import { SpacingValues } from '../../types';
 interface FlexProps extends ViewProps {
     direction?: ViewStyle['flexDirection'];
     align?: FlexAlignType;
     justify?: ViewStyle['justifyContent'];
     wrap?: ViewStyle['flexWrap'];
-    space?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    space?: SpacingValues;
 }
 export default FlexProps;

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

@@ -1,6 +1,6 @@
 import { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import { UnistylesBreakpoints } from 'react-native-unistyles';
-import { SpaceValue } from '../../types';
+import { SpaceValue, SpacingValues } from '../../types';
 export type GridColumns = {
     [key in keyof UnistylesBreakpoints]?: number;
 };
@@ -13,7 +13,7 @@ export interface GridProps extends ViewProps {
     /**
      * Spacing between grid items (applies to both rows and columns)
      */
-    space?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    space?: SpacingValues;
     /**
      * Gap between items (overrides spacing if provided)
      */

package/build/components/IconContainer/IconContainer.d.ts

@@ -0,0 +1,5 @@
+import type IconContainerProps from './IconContainer.props';
+declare const IconContainer: import("react").ForwardRefExoticComponent<Partial<IconContainerProps> & {
+    uniProps?: import("react-native-unistyles/lib/typescript/src/core/withUnistyles/types").Mappings<IconContainerProps> | undefined;
+} & import("react").RefAttributes<never>>;
+export default IconContainer;

package/build/components/IconContainer/IconContainer.js

@@ -0,0 +1,161 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { StyleSheet, withUnistyles } from 'react-native-unistyles';
+import { Icon } from '../Icon';
+const IconContainer = withUnistyles(({ icon: IconComp, size = 'md', radiusNone = false, variant = 'subtle', color = 'pig', style, ...props }) => {
+    styles.useVariants({ size, radiusNone, variant, color });
+    return (_jsx(View, { style: [styles.container, style], ...props, children: IconComp ? _jsx(Icon, { as: IconComp, style: styles.icon }) : null }));
+});
+IconContainer.displayName = 'IconContainer';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        variants: {
+            size: {
+                sm: {
+                    width: theme.components.iconContainer.sm.width,
+                    height: theme.components.iconContainer.sm.height,
+                    padding: theme.components.iconContainer.sm.padding,
+                    borderRadius: theme.components.iconContainer.sm.borderRadiusRounded,
+                },
+                md: {
+                    width: theme.components.iconContainer.md.width,
+                    height: theme.components.iconContainer.md.height,
+                    padding: theme.components.iconContainer.md.padding,
+                    borderRadius: theme.components.iconContainer.md.borderRadiusRounded,
+                },
+                lg: {
+                    width: theme.components.iconContainer.lg.width,
+                    height: theme.components.iconContainer.lg.height,
+                    padding: theme.components.iconContainer.lg.padding,
+                    borderRadius: theme.components.iconContainer.lg.borderRadiusRounded,
+                },
+            },
+            radiusNone: {
+                true: {
+                    borderRadius: 0,
+                },
+                false: {},
+            },
+            variant: {
+                subtle: {},
+                emphasis: {},
+            },
+            color: {
+                pig: {},
+                energy: {},
+                broadband: {},
+                mobile: {},
+                insurance: {},
+                cashback: {},
+                highlight: {},
+            },
+        },
+        compoundVariants: [
+            {
+                variant: 'emphasis',
+                color: 'pig',
+                styles: {
+                    backgroundColor: theme.color.surface.pig.default,
+                },
+            },
+            {
+                variant: 'subtle',
+                color: 'pig',
+                styles: {
+                    backgroundColor: theme.color.surface.pig.subtle,
+                },
+            },
+            {
+                variant: 'emphasis',
+                color: 'energy',
+                styles: {
+                    backgroundColor: theme.color.surface.energy.default,
+                },
+            },
+            {
+                variant: 'subtle',
+                color: 'energy',
+                styles: {
+                    backgroundColor: theme.color.surface.energy.subtle,
+                },
+            },
+            {
+                variant: 'emphasis',
+                color: 'broadband',
+                styles: {
+                    backgroundColor: theme.color.surface.broadband.default,
+                },
+            },
+            {
+                variant: 'subtle',
+                color: 'broadband',
+                styles: {
+                    backgroundColor: theme.color.surface.broadband.subtle,
+                },
+            },
+            {
+                variant: 'emphasis',
+                color: 'mobile',
+                styles: {
+                    backgroundColor: theme.color.surface.mobile.default,
+                },
+            },
+            {
+                variant: 'subtle',
+                color: 'mobile',
+                styles: {
+                    backgroundColor: theme.color.surface.mobile.subtle,
+                },
+            },
+            {
+                variant: 'emphasis',
+                color: 'insurance',
+                styles: {
+                    backgroundColor: theme.color.surface.insurance.default,
+                },
+            },
+            {
+                variant: 'subtle',
+                color: 'insurance',
+                styles: {
+                    backgroundColor: theme.color.surface.insurance.subtle,
+                },
+            },
+            {
+                variant: 'emphasis',
+                color: 'cashback',
+                styles: {
+                    backgroundColor: theme.color.surface.cashback.default,
+                },
+            },
+            {
+                variant: 'subtle',
+                color: 'cashback',
+                styles: {
+                    backgroundColor: theme.color.surface.cashback.subtle,
+                },
+            },
+            {
+                variant: 'emphasis',
+                color: 'highlight',
+                styles: {
+                    backgroundColor: theme.color.surface.highlight.default,
+                },
+            },
+            {
+                variant: 'subtle',
+                color: 'highlight',
+                styles: {
+                    backgroundColor: theme.color.surface.highlight.subtle,
+                },
+            },
+        ],
+    },
+    icon: {
+        color: theme.color.icon.primary,
+    },
+}));
+export default IconContainer;

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

@@ -0,0 +1,15 @@
+import type { ComponentType } from 'react';
+import type { ViewProps } from 'react-native';
+export interface IconContainerProps extends ViewProps {
+    /** Icon component to render inside the container */
+    icon: ComponentType;
+    /** Size of the container */
+    size?: 'sm' | 'md' | 'lg';
+    /** If true, removes border radius from the container */
+    radiusNone?: boolean;
+    /** Background style of the container */
+    variant?: 'subtle' | 'emphasis';
+    /** Background color token of the container */
+    color?: 'pig' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'highlight';
+}
+export default IconContainerProps;

package/build/components/IconContainer/IconContainer.props.js

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

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

@@ -0,0 +1,2 @@
+export { default as IconContainer } from './IconContainer';
+export type { default as IconContainerProps } from './IconContainer.props';

package/build/components/IconContainer/index.js

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

package/build/components/Icons/CircleIcon.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createIcon } from '@gluestack-ui/icon';
-import { Svg, Path } from 'react-native-svg';
+import { Path, Svg } from 'react-native-svg';
 const CircleIcon = createIcon({
     Root: Svg,
     viewBox: '0 0 24 24',
-    path: (_jsx(_Fragment, { children: _jsx(Path, { d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", fill: "currentColor", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })),
+    path: (_jsx(Path, { d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", fill: "currentColor", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })),
 });
 CircleIcon.displayName = 'CircleIcon';
 export default CircleIcon;

package/build/components/Input/Input.js

@@ -1,10 +1,8 @@
 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 { CalendarMediumIcon, CloseSmallIcon, EyeOffSmallIcon, EyeSmallIcon, SearchMediumIcon, } from '@utilitywarehouse/hearth-react-native-icons';
-import { Platform } from 'react-native';
+import { CloseSmallIcon, EyeOffSmallIcon, EyeSmallIcon, SearchMediumIcon, } from '@utilitywarehouse/hearth-react-native-icons';
 import { useTheme } from '../../hooks';
-import { DetailText } from '../DetailText';
 import { useFormFieldContext } from '../FormField';
 import { Spinner } from '../Spinner';
 import { UnstyledIconButton } from '../UnstyledIconButton';
@@ -28,24 +26,6 @@ const Input = ({ validationStatus = 'initial', children, disabled, focused, read
     const isRequired = formFieldContext?.required ?? required;
     const [fieldType, setFieldType] = useState(type === 'password' ? 'password' : 'text');
     const { color } = useTheme();
-    const defaultFornat = (() => {
-        if (type === 'currency') {
-            return '0.00';
-        }
-        if (type === 'date') {
-            return 'DD/MM/YYYY';
-        }
-        return;
-    })();
-    const getPlaceholder = (() => {
-        if (type === 'currency') {
-            return props.placeholder ?? format ?? defaultFornat;
-        }
-        if (type === 'date') {
-            return props.placeholder ?? format ?? defaultFornat;
-        }
-        return props.placeholder;
-    })();
     const shouldShowPasswordToggle = type === 'password' && showPasswordToggle;
     const shouldShowClear = clearable && !!props?.value;
     const toggleFieldType = () => {
@@ -57,25 +37,13 @@ const Input = ({ validationStatus = 'initial', children, disabled, focused, read
         }
         return leadingIcon;
     })();
-    const trailingIconComponent = (() => {
-        if (type === 'date') {
-            return CalendarMediumIcon;
-        }
-        return trailingIcon;
-    })();
     const getInputMode = (() => {
-        if (type === 'currency') {
-            return 'decimal';
-        }
         if (type === 'search') {
             return 'search';
         }
         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 }) })), type === 'currency' && (_jsx(InputSlot, { children: _jsx(DetailText, { size: "4xl", style: {
-                            // todo: fix this
-                            ...(Platform.OS === 'ios' && { lineHeight: 46 }),
-                        }, children: "\u00A3" }) })), _jsx(InputField, { type: fieldType, inputMode: getInputMode, inBottomSheet: inBottomSheet, ...props, placeholder: getPlaceholder }), 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 }) })), !!trailingIconComponent && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: trailingIconComponent }) }))] })) }));
+    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 }) }))] })) }));
 };
 Input.displayName = 'Input';
 export default Input;

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

@@ -60,22 +60,6 @@ interface PasswordInputSpecificProps extends InputWithoutChildrenBaseProps {
     clearable?: never;
     onClear?: never;
 }
-interface DateInputSpecificProps extends InputWithoutChildrenBaseProps {
-    type: 'date';
-    format?: string;
-    showPasswordToggle?: never;
-    loading?: never;
-    clearable?: never;
-    onClear?: never;
-}
-interface CurrencyInputSpecificProps extends InputWithoutChildrenBaseProps {
-    type: 'currency';
-    format?: string;
-    showPasswordToggle?: never;
-    loading?: never;
-    clearable?: never;
-    onClear?: never;
-}
 interface SearchInputSpecificProps extends InputWithoutChildrenBaseProps {
     type: 'search';
     loading?: boolean;
@@ -84,7 +68,7 @@ interface SearchInputSpecificProps extends InputWithoutChildrenBaseProps {
     showPasswordToggle?: never;
     format?: never;
 }
-export type InputWithoutChildrenProps = TextInputSpecificProps | PasswordInputSpecificProps | DateInputSpecificProps | CurrencyInputSpecificProps | SearchInputSpecificProps;
+export type InputWithoutChildrenProps = TextInputSpecificProps | PasswordInputSpecificProps | SearchInputSpecificProps;
 /**
  * Props for the Input component.
  * This is a discriminated union type where the 'type' property

package/build/components/Input/InputField.js

@@ -34,13 +34,6 @@ const styles = StyleSheet.create(theme => ({
                 text: {},
                 password: {},
                 search: {},
-                currency: {
-                    fontSize: theme.typography.mobile.detailText['4xl'].fontSize,
-                    fontFamily: theme.typography.mobile.detailText.fontFamily,
-                    fontWeight: theme.typography.mobile.detailText.fontWeight,
-                    paddingTop: 0,
-                    paddingBottom: 0,
-                },
                 date: {},
             },
         },

package/build/components/Link/Link.d.ts

@@ -1,7 +1,7 @@
 import type { LinkProps } from './Link.props';
 export declare const LinkText: import("react").ForwardRefExoticComponent<import("react-native").TextProps & import("react").RefAttributes<import("react-native").TextProps>>;
 declare const Link: {
-    ({ children, icon, disabled, target, iconPosition, showIcon, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, icon, disabled, target, iconPosition, showIcon, textStyle, iconStyle, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Link;

package/build/components/Link/Link.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createLink } from '@gluestack-ui/link';
+import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import LinkIcon from './LinkIcon';
 import LinkRoot from './LinkRoot';
 import LinkTextComponent from './LinkText';
-import LinkIcon from './LinkIcon';
-import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 const LinkComponent = createLink({
     Root: LinkRoot,
     Text: LinkTextComponent,
 });
 export const LinkText = LinkComponent.Text;
 LinkText.displayName = 'LinkText';
-const Link = ({ children, icon = ChevronRightSmallIcon, disabled = false, target = '_self', iconPosition = 'right', showIcon = true, ...props }) => {
+const Link = ({ children, icon = ChevronRightSmallIcon, disabled = false, target = '_self', iconPosition = 'right', showIcon = true, textStyle, iconStyle, ...props }) => {
     const LinkAny = LinkComponent;
-    return (_jsxs(LinkAny, { ...props, isDisabled: disabled, isExternal: target === '_blank', children: [showIcon && icon && iconPosition === 'left' ? _jsx(LinkIcon, { as: icon }) : null, _jsx(LinkText, { children: children }), showIcon && icon && iconPosition === 'right' ? _jsx(LinkIcon, { as: icon }) : null] }));
+    return (_jsxs(LinkAny, { ...props, isDisabled: disabled, isExternal: target === '_blank', children: [showIcon && icon && iconPosition === 'left' ? (_jsx(LinkIcon, { as: icon, style: iconStyle })) : null, _jsx(LinkText, { style: textStyle, children: children }), showIcon && icon && iconPosition === 'right' ? (_jsx(LinkIcon, { as: icon, style: iconStyle })) : null] }));
 };
 Link.displayName = 'Link';
 export default Link;

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

@@ -1,5 +1,6 @@
 import { ComponentType } from 'react';
 import { PressableProps, TextProps } from 'react-native';
+import { IconProps } from '../Icon';
 export interface LinkProps extends Omit<PressableProps, 'children'> {
     children: TextProps['children'];
     href?: string;
@@ -9,5 +10,7 @@ export interface LinkProps extends Omit<PressableProps, 'children'> {
     icon?: ComponentType;
     iconPosition?: 'left' | 'right';
     showIcon?: boolean;
+    textStyle?: TextProps['style'];
+    iconStyle?: IconProps['style'];
 }
 export default LinkProps;

package/build/components/Modal/Modal.js

@@ -97,13 +97,21 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
             bottomSheetModalRef.current?.dismiss();
         }
     };
+    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] })] })) }));
-    return fullscreen ? (_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.fullscreenContainer, Platform.OS === 'android' && animatedFullscreenStyle], children: _jsx(View, { style: styles.fullscreenContent, 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 }) }));
+    return fullscreen ? (_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.fullscreenContainer, Platform.OS === 'android' && animatedFullscreenStyle], children: _jsx(View, { style: styles.fullscreenContent, children: content }) })] })) : (_jsxs(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, ...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) => ({
     container: {
         flex: 1,
         gap: theme.components.dialog.gap,
+        variants: {
+            loading: {
+                true: {
+                    paddingTop: 0,
+                },
+            },
+        },
     },
     header: {
         flexDirection: 'row',
@@ -125,7 +133,15 @@ const styles = StyleSheet.create((theme, rt) => ({
     textContent: {
         gap: theme.components.dialog.content.gap,
     },
+    loadingTop: {
+        borderTopLeftRadius: theme.components.dialog.borderRadius,
+        borderTopRightRadius: theme.components.dialog.borderRadius,
+        height: 16,
+        backgroundColor: theme.color.surface.neutral.strong,
+    },
     loadingContainer: {
+        borderTopLeftRadius: theme.components.dialog.borderRadius,
+        borderTopRightRadius: theme.components.dialog.borderRadius,
         flex: 1,
         alignItems: 'center',
         justifyContent: 'center',

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

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

package/build/components/Radio/Radio.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createRadio } from '@gluestack-ui/radio';
-import StyledRadio from './RadioRoot';
-import StyledRadioIndicator from './RadioIndicator';
+import StyledRadioGroup from './RadioGroupRoot';
 import StyledRadioIcon from './RadioIcon';
+import StyledRadioIndicator from './RadioIndicator';
 import StyledRadioLabel from './RadioLabel';
-import StyledRadioGroup from './RadioGroupRoot';
+import StyledRadio from './RadioRoot';
+import { useFormFieldContext } from '../FormField';
 import { Helper } from '../Helper';
 import { useRadioGroupContext } from './RadioGroup.context';
-import { useFormFieldContext } from '../FormField';
-import RadioTileRoot from './RadioTileRoot';
+import RadioImage from './RadioImage';
 import RadioTextContent from './RadioTextContent';
+import RadioTileRoot from './RadioTileRoot';
 const RadioComponent = createRadio({
     Root: StyledRadio,
     Group: StyledRadioGroup,
@@ -25,16 +26,16 @@ RadioGroup.displayName = 'RadioGroup';
 RadioIndicator.displayName = 'RadioIndicator';
 RadioIcon.displayName = 'RadioIcon';
 RadioLabel.displayName = 'RadioLabel';
-const Radio = ({ children, label, disabled, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type = 'default', ...props }) => {
+const Radio = ({ children, label, disabled, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type = 'default', image, ...props }) => {
     const { validationStatus: fieldValidationStatus } = useFormFieldContext();
     const { validationStatus: groupValidationStatus, type: groupType } = useRadioGroupContext();
     const validationStatus = fieldValidationStatus ?? groupValidationStatus ?? validation ?? 'initial';
     const radioType = groupType ?? type;
-    const radioChildren = children ? (children) : (_jsxs(_Fragment, { children: [_jsx(RadioIndicator, { children: _jsx(RadioIcon, {}) }), _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 ? _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 }))] })] }));
     return (_jsx(RadioComponent, { ...props, isDisabled: disabled, children: radioType === 'tile' ? _jsx(RadioTileRoot, { children: radioChildren }) : radioChildren }));
 };
 const RadioTile = ({ type = 'tile', ...props }) => _jsx(Radio, { ...props, type: type });
 RadioTile.displayName = 'RadioTile';
 Radio.displayName = 'Radio';
-export { Radio, RadioGroup, RadioIndicator, RadioIcon, RadioLabel, RadioTile };
+export { Radio, RadioGroup, RadioIcon, RadioIndicator, RadioLabel, RadioTile };
 export default Radio;

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

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

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

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

package/build/components/Radio/RadioImage.js

@@ -0,0 +1,5 @@
+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 }));
+RadioImage.displayName = 'RadioImage';
+export default RadioImage;