@aws-amplify/ui-react-native 1.0.0 → 1.1.0

package/dist/InAppMessaging/components/ModalMessage/ModalMessage.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { ModalMessageProps } from './types';
 export default function ModalMessage(props: ModalMessageProps): JSX.Element | null;

package/dist/__mocks__/react-native-safe-area-context.d.ts

@@ -1,3 +1,8 @@
+/// <reference types="jest" />
 declare const SafeAreaProvider = "SafeAreaProvider";
 declare const SafeAreaView = "SafeAreaView";
-export { SafeAreaProvider, SafeAreaView };
+declare const useSafeAreaInsets: jest.Mock<{
+    bottom: number;
+    top: number;
+}, []>;
+export { SafeAreaProvider, SafeAreaView, useSafeAreaInsets };

package/dist/__mocks__/react-native-safe-area-context.js

@@ -1,4 +1,6 @@
 jest.mock('react-native-safe-area-context');
 const SafeAreaProvider = 'SafeAreaProvider';
 const SafeAreaView = 'SafeAreaView';
-export { SafeAreaProvider, SafeAreaView };
+// return somewhat arbitrary values, safe area insets of iPhone 13
+const useSafeAreaInsets = jest.fn(() => ({ bottom: 44, top: 47 }));
+export { SafeAreaProvider, SafeAreaView, useSafeAreaInsets };

package/dist/assets/icons/index.d.ts

@@ -1,7 +1,15 @@
 import { ImageSourcePropType } from 'react-native';
 declare const icons: {
+    amazonLogo: ImageSourcePropType;
+    appleLogo: ImageSourcePropType;
     checkboxFilled: ImageSourcePropType;
     checkboxOutline: ImageSourcePropType;
     close: ImageSourcePropType;
+    copy: ImageSourcePropType;
+    error: ImageSourcePropType;
+    facebookLogo: ImageSourcePropType;
+    googleLogo: ImageSourcePropType;
+    visibilityOn: ImageSourcePropType;
+    visibilityOff: ImageSourcePropType;
 };
 export default icons;

package/dist/assets/icons/index.js

@@ -1,6 +1,14 @@
 const icons = {
+    amazonLogo: require('./amazonLogo.png'),
+    appleLogo: require('./appleLogo.png'),
     checkboxFilled: require('./checkboxFilled.png'),
     checkboxOutline: require('./checkboxOutline.png'),
     close: require('./close.png'),
+    copy: require('./copy.png'),
+    error: require('./error.png'),
+    facebookLogo: require('./facebookLogo.png'),
+    googleLogo: require('./googleLogo.png'),
+    visibilityOn: require('./visibilityOn.png'),
+    visibilityOff: require('./visibilityOff.png'),
 };
 export default icons;

package/dist/assets/icons/index.ts

@@ -1,9 +1,17 @@
 import { ImageSourcePropType } from 'react-native';
 
 const icons = {
+  amazonLogo: require('./amazonLogo.png') as ImageSourcePropType,
+  appleLogo: require('./appleLogo.png') as ImageSourcePropType,
   checkboxFilled: require('./checkboxFilled.png') as ImageSourcePropType,
   checkboxOutline: require('./checkboxOutline.png') as ImageSourcePropType,
   close: require('./close.png') as ImageSourcePropType,
+  copy: require('./copy.png') as ImageSourcePropType,
+  error: require('./error.png') as ImageSourcePropType,
+  facebookLogo: require('./facebookLogo.png') as ImageSourcePropType,
+  googleLogo: require('./googleLogo.png') as ImageSourcePropType,
+  visibilityOn: require('./visibilityOn.png') as ImageSourcePropType,
+  visibilityOff: require('./visibilityOff.png') as ImageSourcePropType,
 };
 
 export default icons;

package/dist/index.d.ts

@@ -1 +1,3 @@
+export { Authenticator, AuthenticatorProps, useAuthenticator, UseAuthenticator, withAuthenticator, WithAuthenticatorOptions, } from './Authenticator';
 export * from './InAppMessaging';
+export { Theme, ThemeProvider, defaultDarkModeOverride, defaultTheme, useTheme, } from './theme';

package/dist/index.js

@@ -1 +1,3 @@
+export { Authenticator, useAuthenticator, withAuthenticator, } from './Authenticator';
 export * from './InAppMessaging';
+export { ThemeProvider, defaultDarkModeOverride, defaultTheme, useTheme, } from './theme';

package/dist/primitives/Button/Button.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { ButtonProps } from './types';
-export default function Button({ children, textStyle, ...pressableProps }: ButtonProps): JSX.Element;
+export default function Button({ accessibilityRole, children, disabled, style, textStyle, variant, ...rest }: ButtonProps): JSX.Element;

package/dist/primitives/Button/Button.js

@@ -1,8 +1,26 @@
-import React from 'react';
-import { Pressable, Text } from 'react-native';
-import { styles } from './styles';
-export default function Button({ children, textStyle, ...pressableProps }) {
-    return (<Pressable {...pressableProps}>
-      {typeof children === 'string' ? (<Text style={[styles.text, textStyle]}>{children}</Text>) : (children)}
+import React, { useCallback, useMemo } from 'react';
+import { Pressable, Text, } from 'react-native';
+import { useTheme } from '../../theme';
+import { capitalize } from '../../utils';
+import { getThemedStyles } from './styles';
+export default function Button({ accessibilityRole = 'button', children, disabled, style, textStyle, variant = 'default', ...rest }) {
+    const theme = useTheme();
+    const themedStyle = getThemedStyles(theme);
+    const pressableStyle = useCallback(({ pressed }) => {
+        const pressedStateStyle = typeof style === 'function' ? style({ pressed }) : style;
+        return [
+            themedStyle.container,
+            themedStyle[`container${capitalize(variant)}`],
+            disabled ? themedStyle.disabled : null,
+            pressed ? themedStyle.pressed : null,
+            pressedStateStyle,
+        ];
+    }, [disabled, style, themedStyle, variant]);
+    const buttonTextStyle = useMemo(() => ({
+        ...themedStyle.text,
+        ...themedStyle[`text${capitalize(variant)}`],
+    }), [themedStyle, variant]);
+    return (<Pressable {...rest} accessibilityRole={accessibilityRole} disabled={disabled} style={pressableStyle}>
+      {typeof children === 'string' ? (<Text style={[buttonTextStyle, textStyle]}>{children}</Text>) : (children)}
     </Pressable>);
 }

package/dist/primitives/Button/styles.d.ts

@@ -1,2 +1,3 @@
+import { StrictTheme } from '../../theme';
 import { ButtonStyles } from './types';
-export declare const styles: ButtonStyles;
+export declare const getThemedStyles: (theme: StrictTheme) => ButtonStyles;

package/dist/primitives/Button/styles.js

@@ -1,4 +1,51 @@
 import { StyleSheet } from 'react-native';
-export const styles = StyleSheet.create({
-    text: { alignSelf: 'center' },
-});
+export const getThemedStyles = (theme) => {
+    const { tokens, components } = theme;
+    const { colors, fontSizes, fontWeights, opacities, space, radii, borderWidths, } = tokens;
+    return StyleSheet.create({
+        container: {
+            alignItems: 'center',
+            backgroundColor: colors.transparent,
+            justifyContent: 'center',
+            paddingVertical: space.small,
+            paddingHorizontal: space.medium,
+            borderRadius: radii.small,
+            ...components?.button?.container,
+        },
+        containerDefault: {
+            borderWidth: borderWidths.small,
+            borderColor: colors.border.primary,
+            ...components?.button?.containerDefault,
+        },
+        containerPrimary: {
+            backgroundColor: colors.brand.primary[80],
+            ...components?.button?.containerPrimary,
+        },
+        containerLink: {
+            ...components?.button?.containerLink,
+        },
+        disabled: {
+            opacity: opacities[60],
+            ...components?.button?.disabled,
+        },
+        pressed: {
+            opacity: opacities[60],
+            ...components?.button?.pressed,
+        },
+        text: {
+            textAlign: 'center',
+            color: colors.font.primary,
+            fontSize: fontSizes.medium,
+            fontWeight: fontWeights.bold,
+            ...components?.button?.text,
+        },
+        textPrimary: {
+            color: colors.font.inverse,
+            ...components?.button?.textPrimary,
+        },
+        textLink: {
+            color: colors.font.interactive,
+            ...components?.button?.textLink,
+        },
+    });
+};

package/dist/primitives/Button/types.d.ts

@@ -1,7 +1,18 @@
-import { PressableProps, StyleProp, TextStyle } from 'react-native';
+import { PressableProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
+export declare type ButtonVariant = 'primary' | 'default' | 'link';
 export interface ButtonProps extends PressableProps {
     textStyle?: StyleProp<TextStyle>;
+    variant?: ButtonVariant;
 }
 export interface ButtonStyles {
-    text: TextStyle;
+    container?: ViewStyle;
+    containerPrimary?: ViewStyle;
+    containerDefault?: ViewStyle;
+    containerLink?: ViewStyle;
+    disabled?: ViewStyle;
+    pressed?: ViewStyle;
+    text?: TextStyle;
+    textPrimary?: TextStyle;
+    textDefault?: TextStyle;
+    textLink?: TextStyle;
 }

package/dist/primitives/Carousel/Carousel.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { CarouselProps } from './types';
 export default function Carousel<T>(props: CarouselProps<T>): JSX.Element | null;

package/dist/primitives/Carousel/CarouselPageIndicator.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { CarouselPageIndicatorProps } from './types';
 export default function CarouselPageIndicator({ activeStyle, currentIndex, inactiveStyle, numberOfItems, style, }: CarouselPageIndicatorProps): JSX.Element;

package/dist/primitives/Checkbox/Checkbox.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { CheckboxProps } from './types';
 export default function Checkbox<T>({ accessibilityRole, iconStyle, disabled, label, labelPosition, labelStyle, onChange, selected, size, style, value, ...rest }: CheckboxProps<T>): JSX.Element;

package/dist/primitives/Checkbox/Checkbox.js

@@ -1,21 +1,22 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { Pressable } from 'react-native';
-import { icons } from '../../assets';
-import { styles } from './styles';
-import { Label } from '../Label';
-import { getFlexDirectionFromLabelPosition } from '../Label/utils';
 import { Icon } from '../Icon';
+import { Label } from '../Label';
+import { getThemedStyles } from './styles';
+import { icons } from '../../assets';
+import { useTheme } from '../../theme';
 export default function Checkbox({ accessibilityRole = 'checkbox', iconStyle, disabled, label, labelPosition = 'end', labelStyle, onChange, selected, size, style, value, ...rest }) {
     const [checked, setChecked] = useState(selected ?? false);
+    const theme = useTheme();
+    const themedStyle = getThemedStyles(theme, labelPosition);
     const handleOnChange = useCallback(() => {
         onChange?.(value);
         setChecked(!checked);
     }, [onChange, value, checked]);
     const containerStyle = useMemo(() => ({
-        ...styles.container,
-        flexDirection: getFlexDirectionFromLabelPosition(labelPosition),
-        opacity: disabled ? 0.6 : 1,
-    }), [disabled, labelPosition]);
+        ...themedStyle.container,
+        ...(disabled && themedStyle.disabled),
+    }), [disabled, themedStyle]);
     return (<Pressable {...rest} accessibilityRole={accessibilityRole} disabled={disabled} onPress={handleOnChange} style={[containerStyle, style]}>
       <Icon source={checked ? icons.checkboxFilled : icons.checkboxOutline} size={size} style={iconStyle}/>
       {label ? <Label style={labelStyle}>{label}</Label> : null}

package/dist/primitives/Checkbox/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Checkbox } from './Checkbox';
-export type { CheckboxProps } from './types';
+export type { CheckboxProps, CheckboxStyles } from './types';

package/dist/primitives/Checkbox/styles.d.ts

@@ -1,2 +1,4 @@
-import { CheckboxStyle } from './types';
-export declare const styles: CheckboxStyle;
+import { StrictTheme } from '../../theme';
+import { CheckboxStyles } from './types';
+import { LabelPosition } from '../Label/types';
+export declare const getThemedStyles: (theme: StrictTheme, labelPosition: LabelPosition) => CheckboxStyles;

package/dist/primitives/Checkbox/styles.js

@@ -1,6 +1,24 @@
-export const styles = {
-    container: {
-        alignItems: 'center',
-        padding: 4,
-    },
+import { StyleSheet } from 'react-native';
+import { getFlexDirectionFromLabelPosition } from '../Label/utils';
+export const getThemedStyles = (theme, labelPosition) => {
+    const { tokens, components } = theme;
+    const { opacities, space } = tokens;
+    return StyleSheet.create({
+        container: {
+            alignItems: 'center',
+            padding: space.xs,
+            flexDirection: getFlexDirectionFromLabelPosition(labelPosition),
+            ...components?.checkbox?.container,
+        },
+        disabled: {
+            opacity: opacities[60],
+            ...components?.checkbox?.disabled,
+        },
+        icon: {
+            ...components?.checkbox?.icon,
+        },
+        label: {
+            ...components?.checkbox?.label,
+        },
+    });
 };

package/dist/primitives/Checkbox/types.d.ts

@@ -1,4 +1,4 @@
-import { PressableProps, StyleProp, ViewStyle } from 'react-native';
+import { ImageStyle, PressableProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import { IconProps } from '../Icon/types';
 import { LabelProps } from '../Label';
 import { LabelPosition } from '../Label/types';
@@ -9,10 +9,13 @@ export interface CheckboxProps<T> extends PressableProps {
     labelStyle?: LabelProps['style'];
     onChange: (value: T) => void;
     selected?: boolean;
-    size?: number;
+    size?: IconProps['size'];
     style?: StyleProp<ViewStyle>;
     value: T;
 }
-export interface CheckboxStyle {
-    container: ViewStyle;
+export interface CheckboxStyles {
+    container?: ViewStyle;
+    disabled?: ViewStyle;
+    icon?: ImageStyle;
+    label?: TextStyle;
 }

package/dist/primitives/Divider/Divider.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DividerProps } from './types';
+export declare const DIVIDER_LINE_TEST_ID = "amplify__divider__line";
+export default function Divider({ children, labelStyle, lineStyle, style, }: DividerProps): JSX.Element;

package/dist/primitives/Divider/Divider.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useTheme } from '../../theme';
+import { Label } from '../Label';
+import { getThemedStyles } from './styles';
+export const DIVIDER_LINE_TEST_ID = 'amplify__divider__line';
+export default function Divider({ children, labelStyle, lineStyle, style, }) {
+    const theme = useTheme();
+    const themedStyle = getThemedStyles(theme);
+    return (<View style={[themedStyle.container, style]}>
+      <View style={[themedStyle.line, lineStyle]} testID={DIVIDER_LINE_TEST_ID}/>
+      {children ? (<>
+          <Label style={[themedStyle.label, labelStyle]}>{children}</Label>
+          <View style={[themedStyle.line, lineStyle]}/>
+        </>) : null}
+    </View>);
+}

package/dist/primitives/Divider/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Divider } from './Divider';
+export { DividerProps, DividerStyles } from './types';

package/dist/primitives/Divider/index.js

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

package/dist/primitives/Divider/styles.d.ts

@@ -0,0 +1,3 @@
+import { StrictTheme } from '../../theme';
+import { DividerStyles } from './types';
+export declare const getThemedStyles: (theme: StrictTheme) => DividerStyles;

package/dist/primitives/Divider/styles.js

@@ -0,0 +1,24 @@
+import { StyleSheet } from 'react-native';
+export const getThemedStyles = (theme) => {
+    const { tokens, components } = theme;
+    const { colors, fontSizes, space } = tokens;
+    return StyleSheet.create({
+        container: {
+            alignItems: 'center',
+            flexDirection: 'row',
+            ...components?.divider?.container,
+        },
+        label: {
+            fontSize: fontSizes.medium,
+            margin: space.medium,
+            textAlign: 'center',
+            ...components?.divider?.label,
+        },
+        line: {
+            backgroundColor: colors.black,
+            flex: 1,
+            height: StyleSheet.hairlineWidth,
+            ...components?.divider?.line,
+        },
+    });
+};

package/dist/primitives/Divider/types.d.ts

@@ -0,0 +1,10 @@
+import { StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
+export interface DividerProps extends ViewProps {
+    labelStyle?: StyleProp<TextStyle>;
+    lineStyle?: StyleProp<ViewStyle>;
+}
+export interface DividerStyles {
+    container?: ViewStyle;
+    label?: TextStyle;
+    line?: ViewStyle;
+}

package/dist/primitives/Divider/types.js

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

package/dist/primitives/ErrorMessage/ErrorMessage.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ErrorMessageProps } from './types';
+export declare const CLOSE_BUTTON_TEST_ID = "authenticator--error-message--close-button";
+export default function ErrorMessage({ children, labelStyle, onDismiss, style, ...rest }: ErrorMessageProps): JSX.Element;

package/dist/primitives/ErrorMessage/ErrorMessage.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { icons } from '../../assets';
+import { Icon } from '../Icon';
+import { IconButton } from '../IconButton';
+import { useTheme } from '../../theme';
+import { getThemedStyles } from './styles';
+export const CLOSE_BUTTON_TEST_ID = 'authenticator--error-message--close-button';
+export default function ErrorMessage({ children, labelStyle, onDismiss, style, ...rest }) {
+    const theme = useTheme();
+    const themedStyle = getThemedStyles(theme);
+    return (<View {...rest} accessibilityRole="alert" style={[themedStyle.container, style]}>
+      <Icon size={20} source={icons.error} style={themedStyle.icon}/>
+      <Text style={[themedStyle.label, labelStyle]}>{children}</Text>
+      {onDismiss ? (<IconButton onPress={onDismiss} size={20} source={icons.close} style={themedStyle.icon} testID={CLOSE_BUTTON_TEST_ID}/>) : null}
+    </View>);
+}

package/dist/primitives/ErrorMessage/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ErrorMessage } from './ErrorMessage';
+export { ErrorMessageProps, ErrorMessageStyles } from './types';

package/dist/primitives/ErrorMessage/index.js

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

package/dist/primitives/ErrorMessage/styles.d.ts

@@ -0,0 +1,3 @@
+import { StrictTheme } from '../../theme';
+import { ErrorMessageStyles } from './types';
+export declare const getThemedStyles: (theme: StrictTheme) => ErrorMessageStyles;

package/dist/primitives/ErrorMessage/styles.js

@@ -0,0 +1,24 @@
+import { StyleSheet } from 'react-native';
+export const getThemedStyles = (theme) => {
+    const { tokens: { colors, space }, components, } = theme;
+    return StyleSheet.create({
+        container: {
+            alignItems: 'center',
+            backgroundColor: colors.background.error,
+            flexDirection: 'row',
+            paddingHorizontal: space.xs,
+            paddingVertical: space.xl,
+            ...components?.errorMessage?.container,
+        },
+        icon: {
+            margin: space.xs,
+            ...components?.errorMessage?.icon,
+        },
+        label: {
+            color: colors.font.error,
+            flex: 1,
+            paddingHorizontal: space.xs,
+            ...components?.errorMessage?.label,
+        },
+    });
+};

package/dist/primitives/ErrorMessage/types.d.ts

@@ -0,0 +1,10 @@
+import { ImageStyle, StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
+export interface ErrorMessageProps extends ViewProps {
+    labelStyle?: StyleProp<TextStyle>;
+    onDismiss?: () => void;
+}
+export interface ErrorMessageStyles {
+    container?: ViewStyle;
+    icon?: ImageStyle;
+    label?: TextStyle;
+}

package/dist/primitives/ErrorMessage/types.js

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

package/dist/primitives/Heading/Heading.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { HeadingProps } from './types';
 export default function Heading({ accessibilityRole, children, level, style, ...rest }: HeadingProps): JSX.Element;

package/dist/primitives/Heading/Heading.js

@@ -1,8 +1,11 @@
 import React from 'react';
 import { Text } from 'react-native';
-import { styles } from './styles';
+import { useTheme } from '../../theme';
+import { getThemedStyles } from './styles';
 export default function Heading({ accessibilityRole = 'header', children, level = 6, style, ...rest }) {
-    return (<Text {...rest} accessibilityRole={accessibilityRole} style={[styles.text, styles[level], style]}>
+    const theme = useTheme();
+    const themedStyle = getThemedStyles(theme);
+    return (<Text {...rest} accessibilityRole={accessibilityRole} style={[themedStyle.text, themedStyle[level], style]}>
       {children}
     </Text>);
 }

package/dist/primitives/Heading/styles.d.ts

@@ -1,2 +1,3 @@
+import { StrictTheme } from '../../theme';
 import { HeadingStyles } from './types';
-export declare const styles: HeadingStyles;
+export declare const getThemedStyles: (theme: StrictTheme) => HeadingStyles;