@aws-amplify/ui-react-native 1.2.22 → 1.2.24

package/lib/primitives/Button/styles.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getThemedStyles = void 0;
+const react_native_1 = require("react-native");
+const getThemedStyles = (theme) => {
+    const { tokens, components } = theme;
+    const { colors, fontSizes, fontWeights, opacities, space, radii, borderWidths, } = tokens;
+    return react_native_1.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,
+        },
+    });
+};
+exports.getThemedStyles = getThemedStyles;

package/lib/primitives/Button/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/primitives/Carousel/Carousel.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_native_1 = require("react-native");
+const ui_1 = require("@aws-amplify/ui");
+const CarouselPageIndicator_1 = tslib_1.__importDefault(require("./CarouselPageIndicator"));
+const constants_1 = require("./constants");
+const styles_1 = require("./styles");
+function Carousel(props) {
+    const { data, indicatorActiveStyle, indicatorInactiveStyle, renderItem, style, } = props;
+    const flatListRef = (0, react_1.useRef)(null);
+    const indexRef = (0, react_1.useRef)(0);
+    const [currentIndex, setCurrentIndex] = (0, react_1.useState)(0);
+    const windowWidthRef = (0, react_1.useRef)(react_native_1.Dimensions.get('window').width);
+    const [width, setWidth] = (0, react_1.useState)(windowWidthRef.current);
+    const onViewableItemsChanged = (0, react_1.useRef)(({ viewableItems }) => {
+        if (viewableItems.length !== 1) {
+            return;
+        }
+        const [item] = viewableItems;
+        indexRef.current = item.index;
+        setCurrentIndex(indexRef.current);
+    });
+    const updateOrientation = (0, react_1.useCallback)((updatedWidth) => {
+        if (windowWidthRef.current !== updatedWidth) {
+            windowWidthRef.current = updatedWidth;
+            setWidth(updatedWidth);
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        // on width change (due to orientation change), jump to the new index offset
+        flatListRef?.current?.scrollToOffset({
+            offset: width * indexRef.current,
+            animated: false,
+        });
+    }, [width]);
+    (0, react_1.useEffect)(() => {
+        const orientationHandler = ({ window }) => {
+            updateOrientation(window.width);
+        };
+        const subscription = react_native_1.Dimensions.addEventListener('change', orientationHandler);
+        // Clean up listener. Dimensions.removeEventListener is deprecated as of React Native 0.65 but it is technically
+        // available so try to remove via a `EmitterSubscription` first before falling back to `removeEventListener`
+        return () => {
+            if ((0, ui_1.isFunction)(subscription?.remove)) {
+                subscription.remove();
+            }
+            else {
+                react_native_1.Dimensions.removeEventListener('change', orientationHandler);
+            }
+        };
+    }, [updateOrientation]);
+    const carouselRenderItem = (renderInfo) => (<react_native_1.View style={{ width }}>{renderItem(renderInfo)}</react_native_1.View>);
+    if (!data?.length) {
+        return null;
+    }
+    return (<>
+      <react_native_1.FlatList bounces={false} data={data} decelerationRate="fast" disableIntervalMomentum horizontal onViewableItemsChanged={onViewableItemsChanged.current} ref={flatListRef} renderItem={carouselRenderItem} renderToHardwareTextureAndroid showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} snapToAlignment="start" snapToInterval={width} style={style} viewabilityConfig={constants_1.VIEWABILITY_CONFIG}/>
+      <CarouselPageIndicator_1.default activeStyle={indicatorActiveStyle} currentIndex={currentIndex} inactiveStyle={indicatorInactiveStyle} numberOfItems={data.length} style={styles_1.styles.indicator}/>
+    </>);
+}
+exports.default = Carousel;

package/lib/primitives/Carousel/CarouselPageIndicator.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const constants_1 = require("./constants");
+function CarouselPageIndicator({ activeStyle, currentIndex, inactiveStyle, numberOfItems, style, }) {
+    const items = (0, react_1.useMemo)(() => new Array(numberOfItems ?? 0)
+        .fill(null)
+        .map((_, index) => (currentIndex ?? 0) === index ? (<react_native_1.View style={[constants_1.DEFAULT_CAROUSEL_INDICATOR_ACTIVE_STYLE, activeStyle]} key={`indicator-item-${index}`}/>) : (<react_native_1.View style={[constants_1.DEFAULT_CAROUSEL_INDICATOR_INACTIVE_STYLE, inactiveStyle]} key={`indicator-item-${index}`}/>)), [activeStyle, currentIndex, inactiveStyle, numberOfItems]);
+    return <react_native_safe_area_context_1.SafeAreaView style={style}>{items}</react_native_safe_area_context_1.SafeAreaView>;
+}
+exports.default = CarouselPageIndicator;

package/lib/primitives/Carousel/constants.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VIEWABILITY_CONFIG = exports.DEFAULT_CAROUSEL_INDICATOR_INACTIVE_STYLE = exports.DEFAULT_CAROUSEL_INDICATOR_ACTIVE_STYLE = exports.DEFAULT_CAROUSEL_INDICATOR_SIZE = exports.DEFAULT_CAROUSEL_COLOR_INACTIVE = exports.DEFAULT_CAROUSEL_COLOR_ACTIVE = void 0;
+exports.DEFAULT_CAROUSEL_COLOR_ACTIVE = '#a1a1a1';
+exports.DEFAULT_CAROUSEL_COLOR_INACTIVE = '#d8d8d8';
+exports.DEFAULT_CAROUSEL_INDICATOR_SIZE = 12;
+const DEFAULT_CAROUSEL_INDICATOR_STYLE = {
+    borderRadius: exports.DEFAULT_CAROUSEL_INDICATOR_SIZE / 2,
+    height: exports.DEFAULT_CAROUSEL_INDICATOR_SIZE,
+    margin: exports.DEFAULT_CAROUSEL_INDICATOR_SIZE / 3,
+    width: exports.DEFAULT_CAROUSEL_INDICATOR_SIZE,
+};
+exports.DEFAULT_CAROUSEL_INDICATOR_ACTIVE_STYLE = {
+    ...DEFAULT_CAROUSEL_INDICATOR_STYLE,
+    backgroundColor: exports.DEFAULT_CAROUSEL_COLOR_ACTIVE,
+};
+exports.DEFAULT_CAROUSEL_INDICATOR_INACTIVE_STYLE = {
+    ...DEFAULT_CAROUSEL_INDICATOR_STYLE,
+    backgroundColor: exports.DEFAULT_CAROUSEL_COLOR_INACTIVE,
+};
+exports.VIEWABILITY_CONFIG = { itemVisiblePercentThreshold: 60 };

package/lib/primitives/Carousel/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_CAROUSEL_INDICATOR_SIZE = exports.Carousel = void 0;
+var Carousel_1 = require("./Carousel");
+Object.defineProperty(exports, "Carousel", { enumerable: true, get: function () { return __importDefault(Carousel_1).default; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "DEFAULT_CAROUSEL_INDICATOR_SIZE", { enumerable: true, get: function () { return constants_1.DEFAULT_CAROUSEL_INDICATOR_SIZE; } });

package/lib/primitives/Carousel/styles.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styles = void 0;
+const react_native_1 = require("react-native");
+exports.styles = react_native_1.StyleSheet.create({
+    indicator: {
+        bottom: 0,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        left: 0,
+        position: 'absolute',
+        right: 0,
+    },
+});

package/lib/primitives/Carousel/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/primitives/Checkbox/Checkbox.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_native_1 = require("react-native");
+const Icon_1 = require("../Icon");
+const Label_1 = require("../Label");
+const styles_1 = require("./styles");
+const assets_1 = require("../../assets");
+const theme_1 = require("../../theme");
+function Checkbox({ accessibilityRole = 'checkbox', iconStyle, disabled, label, labelPosition = 'end', labelStyle, onChange, selected, size, style, value, ...rest }) {
+    const [checked, setChecked] = (0, react_1.useState)(selected ?? false);
+    const theme = (0, theme_1.useTheme)();
+    const themedStyle = (0, styles_1.getThemedStyles)(theme, labelPosition);
+    const handleOnChange = (0, react_1.useCallback)(() => {
+        onChange?.(value);
+        setChecked(!checked);
+    }, [onChange, value, checked]);
+    const containerStyle = (0, react_1.useMemo)(() => ({
+        ...themedStyle.container,
+        ...(disabled && themedStyle.disabled),
+    }), [disabled, themedStyle]);
+    return (<react_native_1.Pressable {...rest} accessibilityRole={accessibilityRole} disabled={disabled} onPress={handleOnChange} style={[containerStyle, style]}>
+      <Icon_1.Icon source={checked ? assets_1.icons.checkboxFilled : assets_1.icons.checkboxOutline} size={size} style={iconStyle}/>
+      {label ? <Label_1.Label style={labelStyle}>{label}</Label_1.Label> : null}
+    </react_native_1.Pressable>);
+}
+exports.default = Checkbox;

package/lib/primitives/Checkbox/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+var Checkbox_1 = require("./Checkbox");
+Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return __importDefault(Checkbox_1).default; } });

package/lib/primitives/Checkbox/styles.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getThemedStyles = void 0;
+const react_native_1 = require("react-native");
+const utils_1 = require("../Label/utils");
+const getThemedStyles = (theme, labelPosition) => {
+    const { tokens, components } = theme;
+    const { opacities, space } = tokens;
+    return react_native_1.StyleSheet.create({
+        container: {
+            alignItems: 'center',
+            padding: space.xs,
+            flexDirection: (0, utils_1.getFlexDirectionFromLabelPosition)(labelPosition),
+            ...components?.checkbox?.container,
+        },
+        disabled: {
+            opacity: opacities[60],
+            ...components?.checkbox?.disabled,
+        },
+        icon: {
+            ...components?.checkbox?.icon,
+        },
+        label: {
+            ...components?.checkbox?.label,
+        },
+    });
+};
+exports.getThemedStyles = getThemedStyles;

package/lib/primitives/Checkbox/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/primitives/Divider/Divider.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DIVIDER_LINE_TEST_ID = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+const Label_1 = require("../Label");
+const styles_1 = require("./styles");
+exports.DIVIDER_LINE_TEST_ID = 'amplify__divider__line';
+function Divider({ children, labelStyle, lineStyle, style, }) {
+    const theme = (0, theme_1.useTheme)();
+    const themedStyle = (0, styles_1.getThemedStyles)(theme);
+    return (<react_native_1.View style={[themedStyle.container, style]}>
+      <react_native_1.View style={[themedStyle.line, lineStyle]} testID={exports.DIVIDER_LINE_TEST_ID}/>
+      {children ? (<>
+          <Label_1.Label style={[themedStyle.label, labelStyle]}>{children}</Label_1.Label>
+          <react_native_1.View style={[themedStyle.line, lineStyle]}/>
+        </>) : null}
+    </react_native_1.View>);
+}
+exports.default = Divider;

package/lib/primitives/Divider/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Divider = void 0;
+var Divider_1 = require("./Divider");
+Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return __importDefault(Divider_1).default; } });

package/lib/primitives/Divider/styles.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getThemedStyles = void 0;
+const react_native_1 = require("react-native");
+const getThemedStyles = (theme) => {
+    const { tokens, components } = theme;
+    const { colors, fontSizes, space } = tokens;
+    return react_native_1.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: react_native_1.StyleSheet.hairlineWidth,
+            ...components?.divider?.line,
+        },
+    });
+};
+exports.getThemedStyles = getThemedStyles;

package/lib/primitives/Divider/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/primitives/ErrorMessage/ErrorMessage.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CLOSE_BUTTON_TEST_ID = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_native_1 = require("react-native");
+const assets_1 = require("../../assets");
+const Icon_1 = require("../Icon");
+const IconButton_1 = require("../IconButton");
+const theme_1 = require("../../theme");
+const styles_1 = require("./styles");
+exports.CLOSE_BUTTON_TEST_ID = 'authenticator--error-message--close-button';
+function ErrorMessage({ children, iconStyle, labelStyle, onDismiss, style, ...rest }) {
+    const theme = (0, theme_1.useTheme)();
+    const themedStyle = (0, styles_1.getThemedStyles)(theme);
+    return (<react_native_1.View {...rest} accessibilityRole="alert" style={[themedStyle.container, style]}>
+      <Icon_1.Icon size={20} source={assets_1.icons.error} style={[themedStyle.icon, iconStyle]}/>
+      <react_native_1.Text style={[themedStyle.label, labelStyle]}>{children}</react_native_1.Text>
+      {onDismiss ? (<IconButton_1.IconButton onPress={onDismiss} size={20} source={assets_1.icons.close} style={themedStyle.icon} testID={exports.CLOSE_BUTTON_TEST_ID}/>) : null}
+    </react_native_1.View>);
+}
+exports.default = ErrorMessage;

package/lib/primitives/ErrorMessage/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorMessage = void 0;
+var ErrorMessage_1 = require("./ErrorMessage");
+Object.defineProperty(exports, "ErrorMessage", { enumerable: true, get: function () { return __importDefault(ErrorMessage_1).default; } });

package/lib/primitives/ErrorMessage/styles.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getThemedStyles = void 0;
+const react_native_1 = require("react-native");
+const getThemedStyles = (theme) => {
+    const { tokens: { colors, fontSizes, space }, components, } = theme;
+    return react_native_1.StyleSheet.create({
+        container: {
+            alignItems: 'center',
+            backgroundColor: colors.background.error,
+            flexDirection: 'row',
+            paddingHorizontal: space.xs,
+            paddingVertical: space.small,
+            ...components?.errorMessage?.container,
+        },
+        icon: {
+            margin: space.xs,
+            tintColor: colors.font.error,
+            ...components?.errorMessage?.icon,
+        },
+        label: {
+            color: colors.font.error,
+            flex: 1,
+            fontSize: fontSizes.medium,
+            paddingHorizontal: space.xs,
+            ...components?.errorMessage?.label,
+        },
+    });
+};
+exports.getThemedStyles = getThemedStyles;

package/lib/primitives/ErrorMessage/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/primitives/Heading/Heading.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+const styles_1 = require("./styles");
+function Heading({ accessibilityRole = 'header', children, level = 6, style, ...rest }) {
+    const theme = (0, theme_1.useTheme)();
+    const themedStyle = (0, styles_1.getThemedStyles)(theme);
+    return (<react_native_1.Text {...rest} accessibilityRole={accessibilityRole} style={[themedStyle.text, themedStyle[level], style]}>
+      {children}
+    </react_native_1.Text>);
+}
+exports.default = Heading;

package/lib/primitives/Heading/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Heading = void 0;
+var Heading_1 = require("./Heading");
+Object.defineProperty(exports, "Heading", { enumerable: true, get: function () { return __importDefault(Heading_1).default; } });

package/lib/primitives/Heading/styles.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getThemedStyles = void 0;
+const react_native_1 = require("react-native");
+const utils_1 = require("../../utils");
+const getThemedStyles = (theme) => {
+    const { components, tokens: { colors, fontSizes, fontWeights }, } = theme;
+    return react_native_1.StyleSheet.create({
+        text: {
+            color: colors.font.primary,
+            ...components?.heading?.text,
+        },
+        1: {
+            fontSize: fontSizes.xxxl,
+            fontWeight: fontWeights.light,
+            lineHeight: (0, utils_1.getLineHeight)(fontSizes.xxxl),
+            ...components?.heading?.[1],
+        },
+        2: {
+            fontSize: fontSizes.xxl,
+            fontWeight: fontWeights.normal,
+            lineHeight: (0, utils_1.getLineHeight)(fontSizes.xxl),
+            ...components?.heading?.[2],
+        },
+        3: {
+            fontSize: fontSizes.xl,
+            fontWeight: fontWeights.medium,
+            lineHeight: (0, utils_1.getLineHeight)(fontSizes.xl),
+            ...components?.heading?.[3],
+        },
+        4: {
+            fontSize: fontSizes.large,
+            fontWeight: fontWeights.medium,
+            lineHeight: (0, utils_1.getLineHeight)(fontSizes.large),
+            ...components?.heading?.[4],
+        },
+        5: {
+            fontSize: fontSizes.medium,
+            fontWeight: fontWeights.semibold,
+            lineHeight: (0, utils_1.getLineHeight)(fontSizes.medium),
+            ...components?.heading?.[5],
+        },
+        6: {
+            fontSize: fontSizes.small,
+            fontWeight: fontWeights.bold,
+            lineHeight: (0, utils_1.getLineHeight)(fontSizes.small),
+            ...components?.heading?.[6],
+        },
+    });
+};
+exports.getThemedStyles = getThemedStyles;

package/lib/primitives/Heading/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/primitives/Icon/Icon.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+const styles_1 = require("./styles");
+function Icon({ accessibilityRole = 'image', animated, color, size, style, ...rest }) {
+    const theme = (0, theme_1.useTheme)();
+    const themedStyle = (0, react_1.useMemo)(() => (0, styles_1.getThemedStyles)(theme, color, size), [theme, color, size]);
+    const imageProps = {
+        ...rest,
+        accessibilityRole,
+        style: [themedStyle.icon, style],
+    };
+    if (animated) {
+        return <react_native_1.Animated.Image {...imageProps}/>;
+    }
+    return <react_native_1.Image {...imageProps}/>;
+}
+exports.default = Icon;

package/lib/primitives/Icon/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.iconSizes = void 0;
+exports.iconSizes = {
+    xs: 16,
+    small: 20,
+    medium: 24,
+    large: 32,
+    xl: 48,
+};

package/lib/primitives/Icon/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.iconSizes = exports.Icon = void 0;
+var Icon_1 = require("./Icon");
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return __importDefault(Icon_1).default; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "iconSizes", { enumerable: true, get: function () { return constants_1.iconSizes; } });

package/lib/primitives/Icon/styles.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getThemedStyles = void 0;
+const react_native_1 = require("react-native");
+const core_1 = require("@aws-amplify/core");
+const constants_1 = require("./constants");
+const logger = new core_1.ConsoleLogger('Icon-logger');
+const getIconSize = (size) => {
+    if (!size) {
+        return constants_1.iconSizes.medium;
+    }
+    if (typeof size === 'number') {
+        return size;
+    }
+    if (!constants_1.iconSizes[size]) {
+        logger.warn(`"${size}" is not a valid icon size. Available values are: ${Object.keys(constants_1.iconSizes)}`);
+        return constants_1.iconSizes.medium;
+    }
+    return constants_1.iconSizes[size];
+};
+const getThemedStyles = (theme, color, size) => {
+    const { components } = theme;
+    const iconSize = getIconSize(size);
+    return react_native_1.StyleSheet.create({
+        icon: {
+            height: iconSize,
+            resizeMode: 'contain',
+            tintColor: color,
+            width: iconSize,
+            ...components?.icon,
+        },
+    });
+};
+exports.getThemedStyles = getThemedStyles;

package/lib/primitives/Icon/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/primitives/IconButton/IconButton.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+const hooks_1 = require("../../hooks");
+const styles_1 = require("./styles");
+const Icon_1 = require("../Icon");
+function IconButton({ accessibilityRole = 'button', color, disabled, iconStyle, size = Icon_1.iconSizes.medium, source, style, ...rest }) {
+    const theme = (0, theme_1.useTheme)();
+    const themedStyle = (0, styles_1.getThemedStyles)(theme);
+    const containerStyle = (0, react_1.useMemo)(() => ({
+        ...themedStyle.container,
+        ...(disabled && themedStyle.disabled),
+    }), [disabled, themedStyle]);
+    const pressableStyle = (0, hooks_1.usePressableContainerStyles)({
+        overrideStyle: style,
+        containerStyle,
+        pressedStyle: themedStyle.pressed,
+    });
+    return (<react_native_1.Pressable {...rest} accessibilityRole={accessibilityRole} disabled={disabled} style={pressableStyle}>
+      <Icon_1.Icon color={color} size={size} source={source} style={iconStyle}/>
+    </react_native_1.Pressable>);
+}
+exports.default = IconButton;

package/lib/primitives/IconButton/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconButton = void 0;
+var IconButton_1 = require("./IconButton");
+Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return __importDefault(IconButton_1).default; } });

package/lib/primitives/IconButton/styles.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getThemedStyles = void 0;
+const react_native_1 = require("react-native");
+const getThemedStyles = (theme) => {
+    const { components, tokens: { opacities }, } = theme;
+    return react_native_1.StyleSheet.create({
+        container: {
+            ...components?.iconButton?.container,
+        },
+        disabled: {
+            opacity: opacities[60],
+            ...components?.iconButton?.disabled,
+        },
+        pressed: {
+            opacity: opacities[60],
+            ...components?.iconButton?.pressed,
+        },
+    });
+};
+exports.getThemedStyles = getThemedStyles;

package/lib/primitives/IconButton/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/primitives/Label/Label.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+const styles_1 = require("./styles");
+function Label({ accessibilityRole = 'text', children, style, variant = 'primary', ...rest }) {
+    const theme = (0, theme_1.useTheme)();
+    const themedStyle = (0, styles_1.getThemedStyles)(theme);
+    const textStyle = [themedStyle.text, themedStyle[variant], style];
+    return (<react_native_1.Text {...rest} accessibilityRole={accessibilityRole} style={textStyle}>
+      {children}
+    </react_native_1.Text>);
+}
+exports.default = Label;