@janiscommerce/ui-native 1.11.0 → 1.13.0

package/dist/components/atoms/BaseInput/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TextInput, TextInputProps } from 'react-native';
-interface BaseInputProps extends TextInputProps {
+export interface BaseInputProps extends TextInputProps {
     placeholder?: string;
     onChangeText?: (text: string) => void;
     style?: any;

package/dist/components/atoms/BaseInput/index.js

@@ -1,20 +1,7 @@
 import React, { forwardRef } from 'react';
-import { StyleSheet, TextInput } from 'react-native';
+import { TextInput } from 'react-native';
 import { palette } from '../../../theme/palette';
-import { moderateScale, scaledForDevice } from '../../../scale';
 const BaseInput = forwardRef(({ value, placeholder, onChangeText, style, textAlign, ...props }, ref) => {
-    const styles = StyleSheet.create({
-        input: {
-            padding: 0,
-            height: scaledForDevice(70, moderateScale),
-            borderColor: palette.primary.main,
-            borderWidth: 2,
-            borderRadius: 8,
-            fontSize: scaledForDevice(42, moderateScale),
-            backgroundColor: palette.white.light,
-            color: palette.black.main,
-        },
-    });
-    return (<TextInput style={[styles.input, style]} ref={ref} value={value} placeholder={placeholder} textAlign={textAlign || 'center'} onChangeText={onChangeText} selectionColor={palette.primary.main} placeholderTextColor={palette.grey[500]} {...props}/>);
+    return (<TextInput style={[style]} ref={ref} value={value} placeholder={placeholder} textAlign={textAlign || 'center'} onChangeText={onChangeText} selectionColor={palette.primary.main} placeholderTextColor={palette.grey[500]} {...props}/>);
 });
 export default BaseInput;

package/dist/components/atoms/RadioButton/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, TouchableOpacity, StyleSheet } from 'react-native';
-import Text from '../Text';
+import Typography from '../Typography';
 import CheckBox from '../CheckBox';
 import { horizontalScale, moderateScale, scaledForDevice } from '../../../scale';
 const checkLocation = ['left', 'right'];
@@ -45,7 +45,7 @@ const RadioButton = ({ children, onPress, selected = false, checkPosition = 'lef
     return (<TouchableOpacity style={[container, checkLeft ? row : reverseRow, style]} disabled={disabled} onPress={onPress} {...props}>
 			<CheckBox checked={selected} disabled={disabled} customSize={customSize} borderRadius={customSize / 2} onPress={onPress}/>
 			<View style={checkLeft ? checkToLeft : checkToRight}>
-				{isStringChild ? <Text>{children}</Text> : children}
+				{isStringChild ? <Typography>{children}</Typography> : children}
 			</View>
 		</TouchableOpacity>);
 };

package/dist/components/atoms/StatusChip/index.js

@@ -1,7 +1,7 @@
 import React, { isValidElement } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { base, grey, primary } from '../../../theme/palette';
-import Text from '../Text';
+import Typography from '../Typography';
 import { horizontalScale, moderateScale, scaledForDevice } from '../../../scale';
 const validHeight = scaledForDevice(24, moderateScale);
 const validPadding = scaledForDevice(12, horizontalScale);
@@ -38,7 +38,7 @@ const StatusChip = ({ children, ...props }) => {
         return null;
     }
     return (<View style={styles(props).ViewStyles} {...props}>
-			{isCustomComponent ? children : <Text style={styles(props).TextStyles}>{children}</Text>}
+			{isCustomComponent ? (children) : (<Typography style={styles(props).TextStyles}>{children}</Typography>)}
 		</View>);
 };
 export default StatusChip;

package/dist/components/atoms/Text/index.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react';
 import { StyleProp, TextProps as TextComponentProps, TextStyle } from 'react-native';
-interface TextProps extends TextComponentProps {
+export interface TextProps extends TextComponentProps {
     children?: ReactElement | string;
     style?: StyleProp<TextStyle>;
 }

package/dist/components/atoms/Text/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { StyleSheet, Text as TextComponent, } from 'react-native';
 import { moderateScale, scaledForDevice } from '../../../scale';
+import { isDevEnv } from '../../../utils/index';
 const Text = ({ children, style, ...props }) => {
     if (!children) {
         return null;
@@ -12,6 +13,10 @@ const Text = ({ children, style, ...props }) => {
             fontFamily: 'Roboto',
         },
     });
+    // istanbul ignore next
+    if (isDevEnv()) {
+        console.warn('This component is going to be deprecated soon.');
+    }
     return (<TextComponent style={[styles.TextStyles, style]} {...props}>
 			{children}
 		</TextComponent>);

package/dist/components/atoms/Typography/index.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactElement } from 'react';
+import { StyleProp, TextStyle, TextProps } from 'react-native';
+export type TypographyType = 'display' | 'heading' | 'title' | 'label' | 'body' | 'overline';
+export type TypographySize = 'large' | 'medium' | 'small';
+interface TypographyProps extends TextProps {
+    children?: ReactElement | string;
+    style?: StyleProp<TextStyle>;
+    type?: TypographyType;
+    size?: TypographySize;
+}
+declare const Typography: ({ children, style, type, size, ...props }: TypographyProps) => React.JSX.Element | null;
+export default Typography;

package/dist/components/atoms/Typography/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Text } from 'react-native';
+import getStyleByTypography from './utils/getStyleByTypography';
+const Typography = ({ children, style, type, size, ...props }) => {
+    if (!children) {
+        return null;
+    }
+    const typographyStyles = getStyleByTypography(type, size);
+    return (<Text style={[style, typographyStyles.typography]} {...props}>
+			{children}
+		</Text>);
+};
+export default Typography;

package/dist/components/atoms/Typography/utils/getStyleByTypography/index.d.ts

@@ -0,0 +1,17 @@
+import { TextStyle } from 'react-native';
+import { Typography } from '../../../../../theme/typography';
+type TypographyType = keyof Typography;
+type TypographySize = 'large' | 'medium' | 'small';
+export declare const defaultStyles: {
+    typography: TextStyle;
+};
+declare const getStyleByTypography: (type: TypographyType | string, size: TypographySize | string) => {
+    typography: TextStyle;
+} | {
+    typography: {
+        fontWeight: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
+        fontSize: number;
+        lineHeight: number;
+    };
+};
+export default getStyleByTypography;

package/dist/components/atoms/Typography/utils/getStyleByTypography/index.js

@@ -0,0 +1,54 @@
+import { StyleSheet } from 'react-native';
+import typography from '../../../../../theme/typography';
+const validTypes = Object.keys(typography);
+const validSizes = ['large', 'medium', 'small'];
+export const defaultStyles = StyleSheet.create({
+    typography: {
+        fontWeight: typography.body.medium.weight,
+        fontSize: typography.body.medium.size,
+        lineHeight: typography.body.medium.lineHeight,
+    },
+});
+const getStyleByTypography = (type, size) => {
+    if (!validTypes.includes(type) ||
+        !validSizes.includes(size)) {
+        return defaultStyles;
+    }
+    const typographyType = type;
+    const typographySize = size;
+    if (typographyType === 'display') {
+        return StyleSheet.create({
+            typography: {
+                fontWeight: typography.display.weight,
+                fontSize: typography.display.size,
+                lineHeight: typography.display.lineHeight,
+            },
+        });
+    }
+    if (typographyType === 'overline' && typographySize === 'medium') {
+        return StyleSheet.create({
+            typography: {
+                fontWeight: typography.overline.large.weight,
+                fontSize: typography.overline.large.size,
+                lineHeight: typography.overline.large.lineHeight,
+                letterSpacing: typography.overline.large.spacing,
+            },
+        });
+    }
+    const typographyObject = typography[typographyType];
+    // istanbul ignore next
+    if (typographyObject && typographySize in typographyObject) {
+        const typographyStyle = typographyObject[typographySize];
+        return StyleSheet.create({
+            typography: {
+                fontWeight: typographyStyle.weight,
+                fontSize: typographyStyle.size,
+                lineHeight: typographyStyle.lineHeight,
+                letterSpacing: typographyStyle.spacing,
+            },
+        });
+    }
+    // istanbul ignore next
+    return defaultStyles;
+};
+export default getStyleByTypography;

package/dist/components/molecules/Avatar/index.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import Image from '../../atoms/Image';
-import Text from '../../atoms/Text';
+import Typography from '../../atoms/Typography';
 import { formatPlaceholder } from './utils/formatPlaceholder/index';
 import { horizontalScale, moderateScale, scaledForDevice } from '../../../scale';
 export const sizeValues = {
@@ -56,7 +56,9 @@ const Avatar = ({ size = 'sm', textColor = '#FFFFFF', bgColor = '#E8EAF6', image
                 width: validWidth,
             }}/>)}
 
-			{(showInitials || !imageUrl) && !!initials.length && (<Text style={[styles.text, { color: textColor, fontSize: validFontSize }]}>{initials}</Text>)}
+			{(showInitials || !imageUrl) && !!initials.length && (<Typography style={[styles.text, { color: textColor, fontSize: validFontSize }]}>
+					{initials}
+				</Typography>)}
 		</View>);
 };
 export default Avatar;

package/dist/components/molecules/Button/index.js

@@ -3,7 +3,7 @@ import { StyleSheet, View } from 'react-native';
 import BaseButton from '../../atoms/BaseButton';
 import getButtonStyles from './utils/getButtonStyles';
 import Loading from '../../atoms/Loading';
-import Text from '../../atoms/Text';
+import Typography from '../../atoms/Typography';
 import Icon from '../../atoms/Icon';
 export const types = {
     main: 'main',
@@ -48,7 +48,7 @@ const Button = ({ type = 'main', variant = 'contained', color = 'primary', iconP
     const LoadingComponent = <Loading isLoading={isLoading} color={styles.loadingColor} size={24}/>;
     const WrapperComponent = (<View style={styles.direction}>
 			{icon && <Icon name={icon} style={[styles.icon, iconStyle]} size={24}/>}
-			{!!value && <Text style={[styles.text, textStyle]}>{value}</Text>}
+			{!!value && <Typography style={[styles.text, textStyle]}>{value}</Typography>}
 		</View>);
     return (<BaseButton style={[styles.container, style]} pressedStyle={!validDisabled && styles.pressed} borderRadius={borderRadius} disabled={validDisabled} {...props}>
 			{isLoading ? LoadingComponent : WrapperComponent}

package/dist/components/molecules/Carousel/utils/index.d.ts

@@ -4,7 +4,7 @@ import { CarouselProps } from '../';
 declare const useCarouselControls: ({ pages, isLoop, autoplay, autoPlayReverse, intervalTime, customWidth, buttonsCallback, pagesCallback, }: CarouselProps) => {
     activePage: number;
     slider: import("react").MutableRefObject<ScrollView | null>;
-    intervalId: import("react").MutableRefObject<number | null>;
+    intervalId: import("react").MutableRefObject<any>;
     width: number;
     goPrev: () => void;
     goNext: () => void;

package/dist/components/molecules/Input/index.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { TextInput } from 'react-native';
+import { BaseInputProps } from '../../atoms/BaseInput';
+export type InputVariant = 'default' | 'weightable' | 'amountTotal' | 'currency' | 'numeric';
+interface BaseInputPropsExtended extends BaseInputProps {
+    type?: 'currency' | 'number' | 'text' | 'email' | 'phone';
+    variant?: InputVariant;
+    onChangeText?: (text: string) => void;
+    totalValue?: number;
+}
+type AmountTotalProps = BaseInputPropsExtended & {
+    variant: 'amountTotal';
+    totalValue: number;
+};
+type OtherVariantProps = BaseInputPropsExtended & {
+    variant: Exclude<InputVariant, 'amountTotal'>;
+    totalValue?: never;
+};
+type DefaultProps = BaseInputPropsExtended & {
+    variant?: never;
+    type: 'currency' | 'number' | 'text' | 'email' | 'phone';
+    totalValue?: never;
+};
+export type InputProps = AmountTotalProps | OtherVariantProps | DefaultProps;
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<TextInput>>;
+export default Input;

package/dist/components/molecules/Input/index.js

@@ -0,0 +1,84 @@
+import React, { forwardRef, useState, useRef } from 'react';
+import { StyleSheet, View, TouchableWithoutFeedback, Keyboard } from 'react-native';
+import BaseInput from '../../atoms/BaseInput';
+import { palette } from '../../../theme/palette';
+import { moderateScale, scaledForDevice } from '../../../scale';
+import handleChangeText from './utils/handleChangeText';
+import Typography from '../../atoms/Typography';
+var InputType;
+(function (InputType) {
+    InputType["currency"] = "numeric";
+    InputType["number"] = "numeric";
+    InputType["default"] = "default";
+    InputType["text"] = "default";
+    InputType["email"] = "email-address";
+    InputType["phone"] = "phone-pad";
+    InputType["weightable"] = "numeric";
+    InputType["amountTotal"] = "numeric";
+    InputType["numeric"] = "numeric";
+})(InputType || (InputType = {}));
+const setRef = (ref, value) => {
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref && 'current' in ref) {
+        ref.current = value;
+    }
+};
+const Input = forwardRef(({ style, type, variant = 'default', totalValue, onChangeText, ...props }, ref) => {
+    const [value, setValue] = useState('');
+    const isAmountTotalVariant = variant === 'amountTotal';
+    const inputRef = useRef(null);
+    if (isAmountTotalVariant && typeof totalValue !== 'number') {
+        return null;
+    }
+    const styles = StyleSheet.create({
+        container: {
+            padding: 0,
+            height: scaledForDevice(70, moderateScale),
+            borderColor: palette.primary.main,
+            borderWidth: 2,
+            borderRadius: 8,
+            backgroundColor: palette.white.light,
+            justifyContent: 'center',
+            alignItems: 'center',
+            flexDirection: 'row',
+        },
+        input: {
+            color: palette.black.main,
+            fontSize: scaledForDevice(42, moderateScale),
+        },
+        totalValue: {
+            color: palette.primary.main,
+        },
+    });
+    const changeTextCb = (text) => handleChangeText(text, setValue, variant, onChangeText);
+    const handlePress = () => {
+        // istanbul ignore next
+        if (inputRef.current) {
+            Keyboard.dismiss();
+            inputRef.current.focus();
+        }
+    };
+    const resolvedKeyboardType = (() => {
+        if (type && type in InputType) {
+            return InputType[type];
+        }
+        if (variant && variant in InputType) {
+            return InputType[variant];
+        }
+        return InputType.default;
+    })();
+    return (<TouchableWithoutFeedback onPress={handlePress}>
+				<View style={styles.container}>
+					<BaseInput style={[styles.input, style]} ref={(instance) => {
+            setRef(inputRef, instance);
+            setRef(ref, instance);
+        }} value={value} keyboardType={resolvedKeyboardType} onChangeText={changeTextCb} {...props}/>
+					{isAmountTotalVariant && (<Typography style={styles.totalValue} type="display" size="medium">
+							{`/${totalValue?.toString()}`}
+						</Typography>)}
+				</View>
+			</TouchableWithoutFeedback>);
+});
+export default Input;

package/dist/components/molecules/Input/utils/handleChangeText/index.d.ts

@@ -0,0 +1,4 @@
+import { InputVariant } from '../../../Input';
+import { Dispatch, SetStateAction } from 'react';
+declare const handleChangeText: (text: string, setValue: Dispatch<SetStateAction<string>>, variant: InputVariant, onChangeText?: ((text: string) => void) | undefined) => void;
+export default handleChangeText;

package/dist/components/molecules/Input/utils/handleChangeText/index.js

@@ -0,0 +1,19 @@
+const variantLogicMapper = {
+    default: (value) => value,
+    weightable: (value) => value.replace(',', '.').replace(/[^0-9.]/g, ''),
+    amountTotal: (value) => value.replace(',', '.').replace(/[^0-9.]/g, ''),
+    currency: (value) => value.replace(/[^0-9.,]/g, ''),
+    numeric: (value) => value.replace(/[^0-9.,]/g, ''),
+};
+const transformText = (text, variant) => {
+    const transform = variantLogicMapper[variant] || variantLogicMapper.default;
+    return transform(text);
+};
+const handleChangeText = (text, setValue, variant, onChangeText) => {
+    const transformedText = transformText(text, variant);
+    setValue(transformedText);
+    if (onChangeText) {
+        onChangeText(transformedText);
+    }
+};
+export default handleChangeText;

package/dist/components/molecules/Tabs/index.js

@@ -4,7 +4,7 @@ import { StyleSheet, View, ScrollView, FlatList } from 'react-native';
 import { moderateScale, scaledForDevice, viewportWidth } from '../../../scale';
 import { base, black, grey, primary } from '../../../theme/palette';
 import BaseButton from '../../atoms/BaseButton';
-import Text from '../../atoms/Text';
+import Typography from '../../atoms/Typography';
 import { isObject } from '../../../utils';
 export const positions = {
     top: 'top',
@@ -90,9 +90,9 @@ const Tabs = ({ scenes, initialTab = null, position = positions.top, onPressTabC
             return onPressTabCb(idx);
         };
         return (<BaseButton key={title + index} style={{ ...styles.tabButton, borderBottomColor }} disabled={disabled} onPress={() => handleOnPress(index)}>
-				<Text style={{ ...styles.title, color: textColor }} selectable={false} numberOfLines={1}>
+				<Typography style={{ ...styles.title, color: textColor }} selectable={false} numberOfLines={1}>
 					{title}
-				</Text>
+				</Typography>
 			</BaseButton>);
     };
     const renderItem = ({ item, index }) => (<TitleTab title={item.title} disabled={item.disabled} index={index}/>);

package/dist/components/molecules/Toast/index.js

@@ -6,7 +6,7 @@ import { defaultIcon } from './utils';
 import { base, black } from '../../../theme/palette';
 import BaseToast from '../../atoms/BaseToast';
 import ToastAction from 'react-native-toast-message';
-import Text from '../../atoms/Text';
+import Typography from '../../atoms/Typography';
 import Icon from '../../atoms/Icon';
 const Toast = ({ type, text1, text2, style, props }) => {
     const validType = type && typeof type === 'string';
@@ -78,13 +78,13 @@ const Toast = ({ type, text1, text2, style, props }) => {
 			{showIcon && (<Icon name={selectedIconName} color={validColor} size={24} style={{ ...styles.icon, ...iconStyle }}/>)}
 
 			<View style={styles.textWrapper}>
-				{validTitle && <Text style={styles.title}>{text1}</Text>}
-				{validMessage && <Text style={styles.message}>{text2}</Text>}
+				{validTitle && <Typography style={styles.title}>{text1}</Typography>}
+				{validMessage && <Typography style={styles.message}>{text2}</Typography>}
 			</View>
 
 			<View style={styles.feedbackWrapper}>
 				{actionTitle && (<TouchableOpacity style={styles.actionWrapper} onPress={handleActionCb} activeOpacity={0.6}>
-						<Text style={styles.actionTitle}>{actionTitle}</Text>
+						<Typography style={styles.actionTitle}>{actionTitle}</Typography>
 					</TouchableOpacity>)}
 				{showCloseIcon && (<TouchableOpacity style={styles.closeIconWrapper} onPress={handleCloseCb} activeOpacity={0.6}>
 						<Icon name="cross_light" color={validColor} size={24}/>

package/dist/components/organisms/FullScreenMessage/index.js

@@ -3,7 +3,7 @@ import { Modal, StyleSheet, View } from 'react-native';
 import { moderateScale, scaledForDevice } from '../../../scale';
 import { base, primary } from '../../../theme/palette';
 import Icon from '../../atoms/Icon';
-import Text from '../../atoms/Text';
+import Typography from '../../atoms/Typography';
 export var animationTypes;
 (function (animationTypes) {
     animationTypes["Slide"] = "slide";
@@ -59,8 +59,12 @@ const FullScreenMessage = ({ backgroundColor = primary.main, title = '', isVisib
     return (<Modal visible={isVisible} animationType={animationType} transparent {...props}>
 			<View style={styles.container}>
 				{children ?? (<>
-						{validTitle && <Text style={styles.title}>{title}</Text>}
-						{validSubtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
+						{validTitle && (<Typography style={styles.title} type="heading" size="large">
+								{title}
+							</Typography>)}
+						{validSubtitle && (<Typography style={styles.subtitle} type="body" size="large">
+								{subtitle}
+							</Typography>)}
 						{validIconName && <Icon color={iconColor} size={130} name={iconName}/>}
 					</>)}
 			</View>

package/dist/components/organisms/SwipeItemSelectionList/index.js

@@ -28,7 +28,7 @@ const SwipeItemSelectionList = React.forwardRef(({ data, radioButton = false, mu
             checkIfElementIsSelected(id, isElementSelected);
             return onSelection(id);
         };
-        return (<ItemSelectionButton radioButton={radioButton} leftSelection={leftSelection} rightSelection={rightSelection} selected={isElementSelected} onSelection={onSelectElement} name={name}/>);
+        return (<ItemSelectionButton key={id} radioButton={radioButton} leftSelection={leftSelection} rightSelection={rightSelection} selected={isElementSelected} onSelection={onSelectElement} name={name}/>);
     };
     return (<SwipeList ref={ref} {...props}>
 				{data.map((element) => renderItem(element))}

package/dist/index.d.ts

@@ -2,7 +2,6 @@ import BaseButton from './components/atoms/BaseButton';
 import CheckBox from './components/atoms/CheckBox';
 import Icon from './components/atoms/Icon';
 import Image from './components/atoms/Image';
-import Input from './components/atoms/Input';
 import List from './components/atoms/List';
 import Loading from './components/atoms/Loading';
 import RadioButton from './components/atoms/RadioButton';
@@ -12,6 +11,7 @@ import SwipeUp from './components/atoms/SwipeUp';
 import { SwipeUpFlatList, SwipeUpScrollView, SwipeUpView } from './components/atoms/SwipeUp/childComponents';
 import Text from './components/atoms/Text';
 import BaseInput from './components/atoms/BaseInput';
+import Typography from './components/atoms/Typography';
 import Avatar from './components/molecules/Avatar';
 import Button from './components/molecules/Button';
 import Carousel from './components/molecules/Carousel';
@@ -23,9 +23,10 @@ import { configToast } from './components/molecules/Toast/utils';
 import SwipeList from './components/molecules/SwipeList';
 import ItemSelectionButton from './components/molecules/ItemSelectionButton';
 import MainCardList from './components/molecules/MainCardList';
+import Input from './components/molecules/Input';
 import LoadingFullScreen from './components/organisms/LoadingFullScreen';
 import FullScreenMessage from './components/organisms/FullScreenMessage';
 import SwipeItemSelectionList from './components/organisms/SwipeItemSelectionList';
 import { palette } from './theme/palette';
 import * as getScale from './scale';
-export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, Button, getScale, LayoutWithBottomButtons, FullScreenMessage, Toast, configToast, SwipeList, ItemSelectionButton, SwipeItemSelectionList, MainCardList, BaseInput, };
+export { Text, Avatar, CheckBox, Icon, Image, Input, Loading, Svg, StatusChip, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, Button, getScale, LayoutWithBottomButtons, FullScreenMessage, Toast, configToast, SwipeList, ItemSelectionButton, SwipeItemSelectionList, MainCardList, BaseInput, Typography, };

package/dist/index.js

@@ -3,7 +3,6 @@ import BaseButton from './components/atoms/BaseButton';
 import CheckBox from './components/atoms/CheckBox';
 import Icon from './components/atoms/Icon';
 import Image from './components/atoms/Image';
-import Input from './components/atoms/Input';
 import List from './components/atoms/List';
 import Loading from './components/atoms/Loading';
 import RadioButton from './components/atoms/RadioButton';
@@ -13,6 +12,7 @@ import SwipeUp from './components/atoms/SwipeUp';
 import { SwipeUpFlatList, SwipeUpScrollView, SwipeUpView } from './components/atoms/SwipeUp/childComponents';
 import Text from './components/atoms/Text';
 import BaseInput from './components/atoms/BaseInput';
+import Typography from './components/atoms/Typography';
 // Molecules
 import Avatar from './components/molecules/Avatar';
 import Button from './components/molecules/Button';
@@ -25,6 +25,7 @@ import { configToast } from './components/molecules/Toast/utils';
 import SwipeList from './components/molecules/SwipeList';
 import ItemSelectionButton from './components/molecules/ItemSelectionButton';
 import MainCardList from './components/molecules/MainCardList';
+import Input from './components/molecules/Input';
 // Organisms
 import LoadingFullScreen from './components/organisms/LoadingFullScreen';
 import FullScreenMessage from './components/organisms/FullScreenMessage';
@@ -32,4 +33,4 @@ import SwipeItemSelectionList from './components/organisms/SwipeItemSelectionLis
 // Misc
 import { palette } from './theme/palette';
 import * as getScale from './scale';
-export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, Button, getScale, LayoutWithBottomButtons, FullScreenMessage, Toast, configToast, SwipeList, ItemSelectionButton, SwipeItemSelectionList, MainCardList, BaseInput, };
+export { Text, Avatar, CheckBox, Icon, Image, Input, Loading, Svg, StatusChip, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, Button, getScale, LayoutWithBottomButtons, FullScreenMessage, Toast, configToast, SwipeList, ItemSelectionButton, SwipeItemSelectionList, MainCardList, BaseInput, Typography, };

package/dist/theme/typography.d.ts

@@ -0,0 +1,35 @@
+export type TypographyItem = {
+    weight: '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+    size: number;
+    lineHeight: number;
+    spacing?: number;
+};
+export type Typography = {
+    display: TypographyItem;
+    heading: {
+        large: TypographyItem;
+        medium: TypographyItem;
+        small: TypographyItem;
+    };
+    title: {
+        large: TypographyItem;
+        medium: TypographyItem;
+        small: TypographyItem;
+    };
+    label: {
+        large: TypographyItem;
+        medium: TypographyItem;
+        small: TypographyItem;
+    };
+    body: {
+        large: TypographyItem;
+        medium: TypographyItem;
+        small: TypographyItem;
+    };
+    overline: {
+        large: TypographyItem;
+        small: TypographyItem;
+    };
+};
+declare const typography: Typography;
+export default typography;

package/dist/theme/typography.js

@@ -0,0 +1,29 @@
+import { moderateScale, scaledForDevice } from '../scale';
+const typography = {
+    display: { weight: '400', size: scaledForDevice(42, moderateScale), lineHeight: 50 },
+    heading: {
+        large: { weight: '500', size: scaledForDevice(34, moderateScale), lineHeight: 40 },
+        medium: { weight: '500', size: scaledForDevice(26, moderateScale), lineHeight: 32 },
+        small: { weight: '400', size: scaledForDevice(24, moderateScale), lineHeight: 28 },
+    },
+    title: {
+        large: { weight: '400', size: scaledForDevice(20, moderateScale), lineHeight: 24 },
+        medium: { weight: '700', size: scaledForDevice(18, moderateScale), lineHeight: 22 },
+        small: { weight: '700', size: scaledForDevice(14, moderateScale), lineHeight: 16 },
+    },
+    label: {
+        large: { weight: '500', size: scaledForDevice(16, moderateScale), lineHeight: 18 },
+        medium: { weight: '500', size: scaledForDevice(14, moderateScale), lineHeight: 16 },
+        small: { weight: '500', size: scaledForDevice(12, moderateScale), lineHeight: 14 },
+    },
+    body: {
+        large: { weight: '400', size: scaledForDevice(16, moderateScale), lineHeight: 20 },
+        medium: { weight: '400', size: scaledForDevice(14, moderateScale), lineHeight: 18 },
+        small: { weight: '400', size: scaledForDevice(12, moderateScale), lineHeight: 16 },
+    },
+    overline: {
+        large: { weight: '500', size: scaledForDevice(14, moderateScale), lineHeight: 16, spacing: 1 },
+        small: { weight: '500', size: scaledForDevice(12, moderateScale), lineHeight: 14, spacing: 0.7 },
+    },
+};
+export default typography;

package/dist/utils/index.d.ts

@@ -1 +1,2 @@
 export declare const isObject: (obj: Object) => boolean;
+export declare const isDevEnv: () => boolean;

package/dist/utils/index.js

@@ -1 +1,6 @@
 export const isObject = (obj) => !!(obj && obj.constructor === Object);
+export const isDevEnv = () => {
+    const { env } = process;
+    const { NODE_ENV } = env;
+    return NODE_ENV !== 'production';
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@janiscommerce/ui-native",
-	"version": "1.11.0",
+	"version": "1.13.0",
 	"description": "components library for Janis app",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",
@@ -68,6 +68,7 @@
 		"@testing-library/react-hooks": "^8.0.1",
 		"@testing-library/react-native": "^7.2.0",
 		"@types/jest": "^25.2.3",
+		"@types/node": "^22.9.0",
 		"@types/react": "^17.0.2",
 		"@types/react-native": "^0.63.2",
 		"@types/react-native-vector-icons": "^6.4.14",