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

package/lib/primitives/Label/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.Label = void 0;
+var Label_1 = require("./Label");
+Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return __importDefault(Label_1).default; } });

package/lib/primitives/Label/styles.js

@@ -0,0 +1,45 @@
+"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: {
+            fontSize: fontSizes.medium,
+            fontWeight: fontWeights.normal,
+            lineHeight: (0, utils_1.getLineHeight)(fontSizes.medium),
+            ...components?.label?.text,
+        },
+        primary: {
+            color: colors.font.primary,
+            ...components?.label?.primary,
+        },
+        secondary: {
+            color: colors.font.secondary,
+            ...components?.label?.secondary,
+        },
+        tertiary: {
+            color: colors.font.tertiary,
+            ...components?.label?.tertiary,
+        },
+        error: {
+            color: colors.font.error,
+            ...components?.label?.error,
+        },
+        warning: {
+            color: colors.font.warning,
+            ...components?.label?.warning,
+        },
+        success: {
+            color: colors.font.success,
+            ...components?.label?.success,
+        },
+        info: {
+            color: colors.font.info,
+            ...components?.label?.info,
+        },
+    });
+};
+exports.getThemedStyles = getThemedStyles;

package/lib/primitives/Label/types.js

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

package/lib/primitives/Label/utils.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFlexDirectionFromLabelPosition = void 0;
+const FLEX_DIRECTIONS = {
+    start: 'row-reverse',
+    end: 'row',
+    top: 'column-reverse',
+    bottom: 'column',
+};
+/**
+ * The `flexDirection` value returned from `getFlexDirectionFromLabelPosition`
+ * assumes a `Label` component follows the `Primary` component it labels inside
+ * the `Container` that the `flexDirection` is applied to.
+ *
+ * Example Usage:
+ * ```jsx
+ *   const flexDirection = getFlexDirectionFromLabelPosition(labelPosition);
+ *   <Container style={{ flexDirection }}>
+ *     <Primary />
+ *     <Label />
+ *   </Container>
+ * ```
+ */
+const getFlexDirectionFromLabelPosition = (position) => FLEX_DIRECTIONS[position];
+exports.getFlexDirectionFromLabelPosition = getFlexDirectionFromLabelPosition;

package/lib/primitives/PasswordField/PasswordField.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const assets_1 = require("../../assets");
+const theme_1 = require("../../theme");
+const IconButton_1 = require("../IconButton");
+const TextField_1 = require("../TextField");
+const styles_1 = require("./styles");
+const ui_1 = require("@aws-amplify/ui");
+const { getHidePasswordText, getShowPasswordText } = ui_1.authenticatorTextUtil;
+function PasswordField({ disabled, iconAccessibilityLabel, iconStyle, secureTextEntry = true, showPasswordButton = true, style, ...rest }) {
+    const theme = (0, theme_1.useTheme)();
+    const themedStyle = (0, styles_1.getThemedStyles)(theme);
+    const [obscureText, setObscureText] = (0, react_1.useState)(secureTextEntry);
+    const handleOnPress = react_1.default.useCallback(() => {
+        setObscureText(!obscureText);
+    }, [obscureText]);
+    const toggleVisibilityAccessibilityLabel = iconAccessibilityLabel ?? obscureText
+        ? getShowPasswordText()
+        : getHidePasswordText();
+    return (<TextField_1.TextField {...rest} disabled={disabled} secureTextEntry={obscureText} style={[themedStyle.container, style]} endAccessory={showPasswordButton ? (<IconButton_1.IconButton accessibilityLabel={toggleVisibilityAccessibilityLabel} disabled={disabled} iconStyle={[themedStyle.icon, iconStyle]} size={16} source={obscureText ? assets_1.icons.visibilityOff : assets_1.icons.visibilityOn} onPress={handleOnPress}/>) : null}/>);
+}
+exports.default = PasswordField;

package/lib/primitives/PasswordField/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.PasswordField = void 0;
+var PasswordField_1 = require("./PasswordField");
+Object.defineProperty(exports, "PasswordField", { enumerable: true, get: function () { return __importDefault(PasswordField_1).default; } });

package/lib/primitives/PasswordField/styles.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getThemedStyles = void 0;
+const react_native_1 = require("react-native");
+const getThemedStyles = ({ components, tokens: { colors }, }) => {
+    return react_native_1.StyleSheet.create({
+        container: {
+            ...components?.passwordField?.container,
+        },
+        icon: {
+            // match to `TextField` placeholder color
+            tintColor: colors.font.tertiary,
+            ...components?.passwordField?.icon,
+        },
+    });
+};
+exports.getThemedStyles = getThemedStyles;

package/lib/primitives/PasswordField/types.js

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

package/lib/primitives/PhoneNumberField/PhoneNumberField.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const theme_1 = require("../../theme");
+const styles_1 = require("./styles");
+const TextField_1 = require("../TextField");
+function PhoneNumberField({ disabled, fieldStyle, labelStyle, style, ...rest }) {
+    const theme = (0, theme_1.useTheme)();
+    const themedStyle = (0, styles_1.getThemedStyles)(theme);
+    return (<TextField_1.TextField {...rest} disabled={disabled} fieldStyle={[themedStyle.field, fieldStyle]} keyboardType="phone-pad" labelStyle={[themedStyle.label, labelStyle]} style={[themedStyle.container, style]}/>);
+}
+exports.default = PhoneNumberField;

package/lib/primitives/PhoneNumberField/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.PhoneNumberField = void 0;
+var PhoneNumberField_1 = require("./PhoneNumberField");
+Object.defineProperty(exports, "PhoneNumberField", { enumerable: true, get: function () { return __importDefault(PhoneNumberField_1).default; } });

package/lib/primitives/PhoneNumberField/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getThemedStyles = void 0;
+const react_native_1 = require("react-native");
+const getThemedStyles = (theme) => {
+    const { components } = theme;
+    return react_native_1.StyleSheet.create({
+        container: {
+            ...components?.phoneNumberField?.container,
+        },
+        fieldContainer: {
+            ...components?.phoneNumberField?.fieldContainer,
+        },
+        field: {
+            ...components?.phoneNumberField?.field,
+        },
+        label: {
+            ...components?.phoneNumberField?.label,
+        },
+    });
+};
+exports.getThemedStyles = getThemedStyles;

package/lib/primitives/PhoneNumberField/types.js

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

package/lib/primitives/Radio/Radio.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DOT_TEST_ID = exports.CONTAINER_TEST_ID = void 0;
+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 Label_1 = require("../Label");
+const utils_1 = require("../Label/utils");
+const hooks_1 = require("../../hooks");
+const styles_1 = require("./styles");
+const getRadioDimensions_1 = require("./getRadioDimensions");
+exports.CONTAINER_TEST_ID = 'amplify__radio-button__container';
+exports.DOT_TEST_ID = 'amplify__radio-button__dot';
+function Radio({ accessibilityRole = 'radio', disabled, label, labelPosition = 'end', labelStyle, onChange, onPress, radioContainerStyle, radioDotStyle, selected, size = 'medium', style, value, ...rest }) {
+    const theme = (0, theme_1.useTheme)();
+    const themedStyle = (0, styles_1.getThemedStyles)(theme);
+    const handleOnChange = (0, react_1.useCallback)((event) => {
+        if (!disabled) {
+            onChange?.(value);
+            onPress?.(event);
+        }
+    }, [disabled, onChange, onPress, value]);
+    const containerStyle = (0, react_1.useMemo)(() => ({
+        ...themedStyle.container,
+        flexDirection: (0, utils_1.getFlexDirectionFromLabelPosition)(labelPosition),
+        ...(disabled && themedStyle.disabled),
+    }), [disabled, labelPosition, themedStyle]);
+    const pressableStyle = (0, hooks_1.usePressableContainerStyles)({
+        overrideStyle: style,
+        containerStyle,
+        pressedStyle: themedStyle.pressed,
+    });
+    const { radioContainerDimensions, radioDotDimensions } = (0, react_1.useMemo)(() => (0, getRadioDimensions_1.getRadioDimensions)(size, themedStyle), [size, themedStyle]);
+    return (<react_native_1.Pressable {...rest} accessibilityRole={accessibilityRole} onPress={handleOnChange} style={pressableStyle}>
+      <react_native_1.View style={[
+            themedStyle.radioContainer,
+            radioContainerDimensions,
+            radioContainerStyle,
+        ]} testID={exports.CONTAINER_TEST_ID}>
+        {selected ? (<react_native_1.View style={[themedStyle.radioDot, radioDotDimensions, radioDotStyle]} testID={exports.DOT_TEST_ID}/>) : null}
+      </react_native_1.View>
+      {label ? <Label_1.Label style={labelStyle}>{label}</Label_1.Label> : null}
+    </react_native_1.Pressable>);
+}
+exports.default = Radio;

package/lib/primitives/Radio/getRadioDimensions.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRadioDimensions = exports.RADIO_DOT_PROPORTION = void 0;
+const ui_1 = require("@aws-amplify/ui");
+/**
+ * These utility functions are used to apply styles to
+ * the two nested View's comprising the Radio:
+ *   - The outer <View> is named 'radioContainer'
+ *   - The inner <View> is named 'radioDot'
+ *
+ * If a customer passes a number to the `size` prop, then we simply calculate the dimensions
+ * for both the 'radioContainer' and 'radioDot' based on that number.
+ *
+ * If a customer passes a string ('small' | 'medium' | 'large') to the `size` prop,
+ * then we return the respective dimensions as defined in the `styles` object
+ * (e.g., 'small' => { radioContainerSmall, radioDotSmall } )
+ */
+/**
+ * We landed on this value for the ratio of the Radio dot to the Radio container
+ * because it looks aesthetically proportional. Incidentally, this value is also
+ * an approximation of the golden ratio conjugate.
+ */
+exports.RADIO_DOT_PROPORTION = 0.6;
+const getRadioDimensions = (size, styles) => {
+    if (typeof size === 'number') {
+        return {
+            radioContainerDimensions: {
+                height: size,
+                width: size,
+            },
+            radioDotDimensions: {
+                height: size * exports.RADIO_DOT_PROPORTION,
+                width: size * exports.RADIO_DOT_PROPORTION,
+            },
+        };
+    }
+    const sizeKey = (0, ui_1.capitalize)(size);
+    return {
+        radioContainerDimensions: styles[`radioContainer${sizeKey}`],
+        radioDotDimensions: styles[`radioDot${sizeKey}`],
+    };
+};
+exports.getRadioDimensions = getRadioDimensions;

package/lib/primitives/Radio/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.Radio = void 0;
+var Radio_1 = require("./Radio");
+Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return __importDefault(Radio_1).default; } });

package/lib/primitives/Radio/styles.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getThemedStyles = void 0;
+const react_native_1 = require("react-native");
+const getRadioDimensions_1 = require("./getRadioDimensions");
+const ROUNDED_BORDER_RADIUS = 999;
+const getThemedStyles = (theme) => {
+    const { components, tokens: { colors, fontSizes, opacities, borderWidths, space }, } = theme;
+    return react_native_1.StyleSheet.create({
+        container: {
+            alignItems: 'center',
+            ...components?.radio?.container,
+        },
+        disabled: {
+            opacity: opacities[60],
+            ...components?.radio?.disabled,
+        },
+        pressed: {
+            opacity: opacities[60],
+            ...components?.radio?.pressed,
+        },
+        radioContainer: {
+            alignItems: 'center',
+            borderColor: colors.border.primary,
+            borderRadius: ROUNDED_BORDER_RADIUS,
+            borderWidth: borderWidths.medium,
+            justifyContent: 'center',
+            margin: space.xxs,
+            ...components?.radio?.radioContainer,
+        },
+        radioDot: {
+            backgroundColor: colors.brand.primary[80],
+            borderRadius: ROUNDED_BORDER_RADIUS,
+            ...components?.radio?.radioDot,
+        },
+        radioContainerLarge: {
+            height: fontSizes.xl,
+            width: fontSizes.xl,
+            ...components?.radio?.radioContainerLarge,
+        },
+        radioContainerMedium: {
+            height: fontSizes.large,
+            width: fontSizes.large,
+            ...components?.radio?.radioContainerMedium,
+        },
+        radioContainerSmall: {
+            height: fontSizes.medium,
+            width: fontSizes.medium,
+            ...components?.radio?.radioContainerSmall,
+        },
+        radioDotLarge: {
+            height: fontSizes.xl * getRadioDimensions_1.RADIO_DOT_PROPORTION,
+            width: fontSizes.xl * getRadioDimensions_1.RADIO_DOT_PROPORTION,
+            ...components?.radio?.radioDotLarge,
+        },
+        radioDotMedium: {
+            height: fontSizes.large * getRadioDimensions_1.RADIO_DOT_PROPORTION,
+            width: fontSizes.large * getRadioDimensions_1.RADIO_DOT_PROPORTION,
+            ...components?.radio?.radioDotMedium,
+        },
+        radioDotSmall: {
+            height: fontSizes.medium * getRadioDimensions_1.RADIO_DOT_PROPORTION,
+            width: fontSizes.medium * getRadioDimensions_1.RADIO_DOT_PROPORTION,
+            ...components?.radio?.radioDotSmall,
+        },
+    });
+};
+exports.getThemedStyles = getThemedStyles;

package/lib/primitives/Radio/types.js

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

package/lib/primitives/RadioGroup/RadioGroup.js

@@ -0,0 +1,55 @@
+"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_react_core_1 = require("@aws-amplify/ui-react-core");
+const theme_1 = require("../../theme");
+const Label_1 = require("../Label");
+const utils_1 = require("../Label/utils");
+const styles_1 = require("./styles");
+function RadioGroup({ accessibilityRole = 'radiogroup', children, direction = 'vertical', disabled, initialValue, label, labelPosition = 'top', labelStyle, onChange, onValueChange, size, style, ...rest }) {
+    const theme = (0, theme_1.useTheme)();
+    const themedStyle = (0, styles_1.getThemedStyles)(theme);
+    const [value, setValue] = (0, react_1.useState)(initialValue);
+    // track `hasValueUpdated` and `hasOnValueChangeUpdated`,
+    // only call `onValueChange` on `value` update
+    const hasValueUpdated = (0, ui_react_core_1.useHasValueUpdated)(value);
+    const hasOnValueChangeUpdated = (0, ui_react_core_1.useHasValueUpdated)(onValueChange);
+    (0, react_1.useEffect)(() => {
+        if (hasValueUpdated) {
+            onValueChange?.(value);
+        }
+    }, [hasOnValueChangeUpdated, hasValueUpdated, onValueChange, value]);
+    const containerStyle = (0, react_1.useMemo)(() => ({
+        flexDirection: (0, utils_1.getFlexDirectionFromLabelPosition)(labelPosition),
+    }), [labelPosition]);
+    const childContainerStyle = (0, react_1.useMemo)(() => ({ flexDirection: direction === 'horizontal' ? 'row' : 'column' }), [direction]);
+    const handleChange = (0, react_1.useCallback)((nextValue) => {
+        setValue(nextValue);
+        onChange?.(nextValue);
+    }, [onChange]);
+    return (<react_native_1.View {...rest} style={[themedStyle.container, containerStyle, style]}>
+      <react_native_1.View accessibilityRole={accessibilityRole} style={childContainerStyle}>
+        {react_1.Children.map(children, (child) => {
+            if ((0, react_1.isValidElement)(child)) {
+                const { disabled: childDisabled, onChange: childOnChange, value: childValue, size: childSize, } = child.props;
+                const isChildDisabled = typeof childDisabled === 'boolean' ? childDisabled : disabled;
+                const isChildSelected = childValue === value;
+                return (0, react_1.cloneElement)(child, {
+                    ...child.props,
+                    disabled: isChildDisabled,
+                    onChange: (nextValue) => {
+                        childOnChange?.(nextValue);
+                        handleChange(nextValue);
+                    },
+                    selected: isChildSelected,
+                    size: childSize ?? size,
+                });
+            }
+        })}
+      </react_native_1.View>
+      {label ? (<Label_1.Label style={[themedStyle.label, labelStyle]}>{label}</Label_1.Label>) : null}
+    </react_native_1.View>);
+}
+exports.default = RadioGroup;

package/lib/primitives/RadioGroup/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.RadioGroup = void 0;
+var RadioGroup_1 = require("./RadioGroup");
+Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return __importDefault(RadioGroup_1).default; } });

package/lib/primitives/RadioGroup/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getThemedStyles = void 0;
+const react_native_1 = require("react-native");
+const getThemedStyles = (theme) => {
+    const { components } = theme;
+    return react_native_1.StyleSheet.create({
+        container: {
+            ...components?.radioGroup?.container,
+        },
+        label: {
+            /**
+             * The RadioGroup label inherits its styles from the Label primitive,
+             * and also supports customization via a Theme.
+             */
+            ...components?.radioGroup?.label,
+        },
+    });
+};
+exports.getThemedStyles = getThemedStyles;

package/lib/primitives/RadioGroup/types.js

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

package/lib/primitives/Tabs/Tab.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const theme_1 = require("../../theme");
+const hooks_1 = require("../../hooks");
+const Button_1 = require("../Button");
+const styles_1 = require("./styles");
+function Tab({ children, selected, style, textStyle, indicatorPosition, ...rest }) {
+    const theme = (0, theme_1.useTheme)();
+    const themedStyle = (0, styles_1.getThemedStyles)(theme, indicatorPosition);
+    const selectedStyles = selected ? themedStyle.selected : null;
+    const containerStyle = (0, react_1.useMemo)(() => ({
+        ...themedStyle.tab,
+        ...(selected && themedStyle.readonly),
+        ...selectedStyles,
+    }), [selected, selectedStyles, themedStyle]);
+    const pressableStyle = (0, hooks_1.usePressableContainerStyles)({
+        overrideStyle: style,
+        containerStyle,
+        pressedStyle: themedStyle.pressed,
+    });
+    return (<Button_1.Button {...rest} accessibilityRole="tab" style={pressableStyle} textStyle={[themedStyle.tabText, textStyle, selectedStyles]}>
+      {children}
+    </Button_1.Button>);
+}
+exports.default = Tab;

package/lib/primitives/Tabs/Tabs.js

@@ -0,0 +1,29 @@
+"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 Tabs({ children, indicatorPosition = 'bottom', onChange, selectedIndex = 0, style, ...rest }) {
+    const theme = (0, theme_1.useTheme)();
+    const themedStyle = (0, styles_1.getThemedStyles)(theme, indicatorPosition);
+    const handleOnChange = (nextIndex) => {
+        onChange?.(nextIndex);
+    };
+    return (<react_native_1.View {...rest} accessibilityRole="tablist" style={[themedStyle.tabList, style]}>
+      {react_1.Children.map(children, (child, index) => {
+            if ((0, react_1.isValidElement)(child)) {
+                return (0, react_1.cloneElement)(child, {
+                    onPress: (event) => {
+                        child.props.onPress?.(event);
+                        handleOnChange(index);
+                    },
+                    indicatorPosition,
+                    selected: index === selectedIndex,
+                });
+            }
+        })}
+    </react_native_1.View>);
+}
+exports.default = Tabs;

package/lib/primitives/Tabs/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.Tabs = exports.Tab = void 0;
+var Tab_1 = require("./Tab");
+Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return __importDefault(Tab_1).default; } });
+var Tabs_1 = require("./Tabs");
+Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return __importDefault(Tabs_1).default; } });

package/lib/primitives/Tabs/styles.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getThemedStyles = void 0;
+const react_native_1 = require("react-native");
+const getThemedStyles = (theme, indicatorPosition) => {
+    const { components, tokens: { colors, fontSizes, fontWeights, opacities, space, borderWidths }, } = theme;
+    const selectedTabBorderStyles = {};
+    const tabBorderStyles = {};
+    if (indicatorPosition && indicatorPosition === 'top') {
+        selectedTabBorderStyles.borderTopColor = colors.brand.primary[80];
+        tabBorderStyles.borderTopWidth = borderWidths.medium;
+        tabBorderStyles.borderTopColor = colors.border.secondary;
+    }
+    else {
+        selectedTabBorderStyles.borderBottomColor = colors.brand.primary[80];
+        tabBorderStyles.borderBottomWidth = borderWidths.medium;
+        tabBorderStyles.borderBottomColor = colors.border.secondary;
+    }
+    return react_native_1.StyleSheet.create({
+        readonly: {
+            opacity: opacities[100],
+            ...components?.tabs?.readonly,
+        },
+        pressed: {
+            opacity: opacities[60],
+            ...components?.tabs?.pressed,
+        },
+        tabList: {
+            flexDirection: 'row',
+            width: '100%',
+            ...components?.tabs?.tabList,
+        },
+        tab: {
+            backgroundColor: colors.transparent,
+            borderRadius: 0,
+            flexBasis: 0,
+            flexGrow: 1,
+            paddingVertical: space.small,
+            paddingHorizontal: space.medium,
+            borderWidth: 0,
+            ...tabBorderStyles,
+            ...components?.tabs?.tab,
+        },
+        tabText: {
+            color: colors.font.secondary,
+            fontSize: fontSizes.medium,
+            fontWeight: fontWeights.bold,
+            ...components?.tabs?.tabText,
+        },
+        selected: {
+            backgroundColor: colors.background.primary,
+            color: colors.brand.primary[80],
+            ...selectedTabBorderStyles,
+            ...components?.tabs?.selected,
+        },
+    });
+};
+exports.getThemedStyles = getThemedStyles;

package/lib/primitives/Tabs/types.js

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

package/lib/primitives/TextField/TextField.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INPUT_CONTAINER_TEST_ID = exports.TEXTFIELD_CONTAINER_TEST_ID = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_native_1 = require("react-native");
+const Label_1 = require("../Label");
+const theme_1 = require("../../theme");
+const styles_1 = require("./styles");
+exports.TEXTFIELD_CONTAINER_TEST_ID = 'amplify__text-field-container';
+exports.INPUT_CONTAINER_TEST_ID = 'amplify__text-field__input-container';
+function TextField({ accessibilityLabel, accessibilityRole, accessibilityState, accessible = true, autoCapitalize = 'none', disabled, endAccessory, error, errorMessage, errorMessageStyle, fieldStyle, label, labelStyle, style, ...rest }) {
+    const theme = (0, theme_1.useTheme)();
+    const themedStyle = (0, react_1.useMemo)(() => (0, styles_1.getThemedStyles)(theme), [theme]);
+    const fieldContainerStyle = (0, react_1.useMemo)(() => ({
+        ...themedStyle.fieldContainer,
+        ...(disabled && themedStyle.disabled),
+        ...(error && themedStyle.error),
+    }), [disabled, error, themedStyle]);
+    return (<react_native_1.View testID={exports.TEXTFIELD_CONTAINER_TEST_ID} style={[themedStyle.container, style]}>
+      {label ? (<Label_1.Label accessibilityLabel={label} style={[themedStyle.label, labelStyle]}>
+          {label}
+        </Label_1.Label>) : null}
+      <react_native_1.View accessible style={fieldContainerStyle} testID={exports.INPUT_CONTAINER_TEST_ID}>
+        <react_native_1.TextInput {...rest} accessible={accessible} accessibilityLabel={label ? undefined : accessibilityLabel} accessibilityRole={accessibilityRole} accessibilityState={{ disabled, ...accessibilityState }} autoCapitalize={autoCapitalize} editable={!disabled} placeholderTextColor={theme.tokens.colors.font.tertiary} style={[themedStyle.field, fieldStyle]}/>
+        {endAccessory ?? null}
+      </react_native_1.View>
+      {error && errorMessage ? (<Label_1.Label style={errorMessageStyle}>{errorMessage}</Label_1.Label>) : null}
+    </react_native_1.View>);
+}
+exports.default = TextField;

package/lib/primitives/TextField/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.TextField = void 0;
+var TextField_1 = require("./TextField");
+Object.defineProperty(exports, "TextField", { enumerable: true, get: function () { return __importDefault(TextField_1).default; } });