@janiscommerce/ui-native 1.0.3 → 1.1.0

package/dist/components/Icon/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+interface Props {
+    name: string;
+    color?: string;
+    size?: number;
+}
+declare const Icon: FC<Props>;
+export default Icon;

package/dist/components/Icon/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
+import icoMoonConfig from './assets/fonts/selection.json';
+import { primary } from '../../theme/palette';
+const IconComponent = createIconSetFromIcoMoon(icoMoonConfig, 'janis-font-icon', 'janis-font-icon.ttf');
+const Icon = ({ name, color = primary.main, size = 16, ...props }) => {
+    if (!name) {
+        return null;
+    }
+    return <IconComponent name={name} color={color} size={size} {...props}/>;
+};
+export default Icon;

package/dist/components/Loading/LoadingSvg/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Animated, ViewProps } from 'react-native';
+interface IanimatedView extends Animated.AnimatedProps<ViewProps> {
+    size?: number;
+    color?: string;
+}
+declare const LoadingSvg: ({ size, color, ...props }: IanimatedView) => React.JSX.Element;
+export default LoadingSvg;

package/dist/components/Loading/LoadingSvg/index.js

@@ -0,0 +1,13 @@
+import Svg, { Path } from 'react-native-svg';
+import React from 'react';
+import { Animated } from 'react-native';
+import { white } from '../../../theme/palette';
+const LoadingSvg = ({ size, color, ...props }) => {
+    return (<Animated.View {...props}>
+			<Svg x="0px" y="0px" width={size} height={size} viewBox="0 0 163 163">
+				<Path d="M134.1,136.4c-30.3,29.1-78.5,28-107.5-2.3c-29.1-30.3-28-78.5,2.3-107.5s78.5-28,107.5,2.3" fill="none" stroke={white.dark} strokeWidth="10.5546" strokeLinecap="round" strokeLinejoin="round"/>
+				<Path id="path-color" d="M78.4,5.5c42-1.7,77.4,30.9,79.1,72.9c1.7,42-30.9,77.4-72.9,79.1c-42,1.7-77.4-30.9-79.1-72.9" fill="none" stroke={color} strokeWidth="10.5546" strokeLinecap="round" strokeLinejoin="round"/>
+			</Svg>
+		</Animated.View>);
+};
+export default LoadingSvg;

package/dist/components/Loading/index.d.ts

@@ -1,8 +1,8 @@
 import React, { FC } from 'react';
-import { ColorValue, ViewStyle } from 'react-native';
+import { ViewStyle } from 'react-native';
 interface Props {
     isLoading: boolean;
-    color?: ColorValue;
+    color?: string;
     size?: number;
     duration?: number;
     children?: React.ReactNode | null;

package/dist/components/Loading/index.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { StyleSheet, View, Animated, Easing } from 'react-native';
-import { primary, white } from '../../theme/palette';
+import LoadingSvg from './LoadingSvg';
+import { primary } from '../../theme/palette';
 const startRotationAnimation = ({ duration, rotationDegree, timingAnimation }) => Animated.loop(Animated.timing(rotationDegree, {
     duration,
     toValue: 360,
@@ -21,12 +22,8 @@ const Loading = ({ isLoading, color = primary.main, size = 64, duration = 1000,
             position: 'absolute',
             width: size,
             height: size,
-            borderTopColor: white.dark,
-            borderLeftColor: color,
-            borderRightColor: color,
-            borderBottomColor: color,
-            borderRadius: size / 2,
-            borderWidth: 3.5,
+            justifyContent: 'center',
+            alignItems: 'center',
         },
     });
     const animationSpinnerStyle = {
@@ -52,7 +49,7 @@ const Loading = ({ isLoading, color = primary.main, size = 64, duration = 1000,
         return <></>;
     }
     return (<View style={[styles.container, style]} {...props}>
-			<Animated.View style={{ ...styles.spinner, ...animationSpinnerStyle }}/>
+			<LoadingSvg style={[styles.spinner, { ...animationSpinnerStyle }]} size={size} color={color}/>
 			{children}
 		</View>);
 };

package/dist/components/RadioButton/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+declare const checkLocation: readonly ["left", "right"];
+type positions = (typeof checkLocation)[number];
+declare const CheckSizeValues: {
+    sm: number;
+    md: number;
+    lg: number;
+};
+type sizeType = typeof CheckSizeValues;
+type sizeKeys = keyof sizeType;
+interface RadioButtonProps {
+    children: React.ReactNode | string;
+    selected?: boolean;
+    onPress?: () => {};
+    checkPosition?: positions;
+    disabled?: boolean;
+    checkSize?: sizeKeys;
+    style?: ViewStyle;
+}
+declare const RadioButton: ({ children, onPress, selected, checkPosition, checkSize, disabled, style, ...props }: RadioButtonProps) => React.JSX.Element | null;
+export default RadioButton;

package/dist/components/RadioButton/index.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import Text from '../Text';
+import CheckBox from '../CheckBox';
+const checkLocation = ['left', 'right'];
+const CheckSizeValues = {
+    sm: 16,
+    md: 24,
+    lg: 32,
+};
+const styles = StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        marginVertical: 10,
+        height: 'auto',
+    },
+    row: {
+        flexDirection: 'row',
+        justifyContent: 'flex-start',
+    },
+    reverseRow: {
+        flexDirection: 'row-reverse',
+        justifyContent: 'space-between',
+    },
+    checkToLeft: {
+        marginLeft: 15,
+    },
+    checkToRight: {
+        marginRight: 15,
+    },
+});
+const RadioButton = ({ children, onPress, selected = false, checkPosition = 'left', checkSize = 'sm', disabled = false, style, ...props }) => {
+    if (!children) {
+        return null;
+    }
+    const { container, row, reverseRow, checkToLeft, checkToRight } = styles;
+    const isStringChild = typeof children === 'string';
+    const checkLeft = checkPosition === 'left';
+    const customSize = CheckSizeValues[checkSize];
+    return (<TouchableOpacity style={[container, checkLeft ? row : reverseRow, style]} disabled={disabled} onPress={onPress} {...props}>
+			<CheckBox checked={selected} disabled={disabled} customSize={customSize} borderRadius={customSize / 2}/>
+			<View style={checkLeft ? checkToLeft : checkToRight}>
+				{isStringChild ? <Text>{children}</Text> : children}
+			</View>
+		</TouchableOpacity>);
+};
+export default RadioButton;

package/dist/components/Select/Components/Dropdown/index.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { CustomOptionComponent, Option } from '../..';
+interface DropdownProps {
+    isShowedDropdown: boolean;
+    filteredOptions: Option[];
+    selectedOptions: Option[];
+    noOptionsMessage: string;
+    optionStyles?: {};
+    callbackOption: (option: Option) => void;
+    customOptionComponent?: CustomOptionComponent | null;
+}
+declare const Dropdown: FC<DropdownProps>;
+export default Dropdown;

package/dist/components/Select/Components/Dropdown/index.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity, ScrollView, Text } from 'react-native';
+import { base, black, grey, primary, white } from '../../../../theme/palette';
+const Dropdown = (props) => {
+    const { isShowedDropdown, filteredOptions, callbackOption, selectedOptions, noOptionsMessage, optionStyles, customOptionComponent = null, } = props;
+    if (!isShowedDropdown) {
+        return null;
+    }
+    const handleSelectedOption = (option) => callbackOption(option);
+    const styles = StyleSheet.create({
+        container: {
+            width: '100%',
+            padding: 8,
+        },
+        optionWrapper: {
+            position: 'absolute',
+            maxHeight: 168,
+            borderColor: grey[200],
+            backgroundColor: base.white,
+            width: '100%',
+            top: 60,
+            marginBottom: 20,
+            elevation: 5,
+            zIndex: 10,
+            flex: 1,
+        },
+        option: {
+            width: '100%',
+            height: 42,
+            justifyContent: 'center',
+            alignItems: 'stretch',
+            paddingLeft: 8,
+        },
+        optionText: {
+            color: black.main,
+            fontWeight: '400',
+        },
+        noOptionText: {
+            color: grey[500],
+            fontWeight: '400',
+            paddingLeft: 8,
+            paddingVertical: 10,
+        },
+    });
+    const renderOptions = filteredOptions?.length &&
+        filteredOptions.map((option) => {
+            const isSelectedOption = selectedOptions.some((selected) => selected.label === option.label);
+            const styleText = { ...styles.optionText, ...(isSelectedOption && { color: primary.main }) };
+            const styleOption = {
+                ...styles.option,
+                ...(isSelectedOption && { backgroundColor: white.light }),
+            };
+            const customProps = {
+                renderedOption: option,
+                filteredOptions,
+                selectedOptions,
+                callbackOptionSelected: callbackOption,
+            };
+            if (customOptionComponent) {
+                return customOptionComponent(customProps);
+            }
+            return (<TouchableOpacity style={{ ...styleOption, ...optionStyles }} key={option.label} onPress={() => handleSelectedOption(option)}>
+					<Text style={styleText}> {option.label}</Text>
+				</TouchableOpacity>);
+        });
+    const noRenderOptions = (<View aria-disabled>
+			<Text style={styles.noOptionText}> {noOptionsMessage}</Text>
+		</View>);
+    return (<ScrollView style={styles.optionWrapper} contentContainerStyle={styles.container}>
+			{filteredOptions?.length ? renderOptions : noRenderOptions}
+		</ScrollView>);
+};
+export default Dropdown;

package/dist/components/Select/Components/Icons/Chevron/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+interface IconProps {
+    color?: string;
+    size?: number;
+    iconStyles?: {};
+    style?: ViewStyle;
+    onPress?: () => void;
+}
+declare const Chevron: {
+    ({ style, color, size, onPress, ...props }: IconProps): React.JSX.Element;
+    defaultProps: {
+        color: string;
+        size: number;
+        onPress: () => void;
+    };
+};
+export default Chevron;

package/dist/components/Select/Components/Icons/Chevron/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+import { primary } from '../../../../../theme/palette';
+import Svg, { Path } from 'react-native-svg';
+const Chevron = ({ style, color, size, onPress, ...props }) => {
+    return (<Pressable onPress={onPress} style={style} {...props}>
+			<View>
+				<Svg width={size} height={size} viewBox="0 0 16 16">
+					<Path d="M8.17432 11.1055L3 6.49316L4.33106 5L8.17627 8.42773L12.0132 5.01904L13.3413 6.51416L8.17432 11.1055Z" fill={color}/>
+				</Svg>
+			</View>
+		</Pressable>);
+};
+Chevron.defaultProps = {
+    color: primary.main,
+    size: 21,
+    onPress: () => { },
+};
+export default Chevron;

package/dist/components/Select/Components/Icons/Delete/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+interface IconProps {
+    color?: string;
+    size?: number;
+    iconStyles?: {};
+    style?: ViewStyle;
+    onPress?: () => void;
+}
+declare const Delete: {
+    ({ style, color, size, onPress, ...props }: IconProps): React.JSX.Element;
+    defaultProps: {
+        color: string;
+        size: number;
+        onPress: () => void;
+    };
+};
+export default Delete;

package/dist/components/Select/Components/Icons/Delete/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+import { black } from '../../../../../theme/palette';
+import Svg, { Path } from 'react-native-svg';
+const Delete = ({ style, color, size, onPress, ...props }) => {
+    return (<Pressable onPress={onPress} style={style} {...props}>
+			<View>
+				<Svg width={size} height={size} viewBox="0 0 16 16">
+					<Path fill-rule="evenodd" clip-rule="evenodd" d="M1 8C1 4.13403 4.13397 1 8 1C11.866 1 15 4.13403 15 8C15 11.866 11.866 15 8 15C4.13397 15 1 11.866 1 8ZM10.03 11.4441L11.4441 10.03L9.41406 8L11.4441 5.96997L10.03 4.55591L8 6.58594L5.96997 4.55591L4.55591 5.96997L6.58594 8L4.55591 10.03L5.96997 11.4441L8 9.41406L10.03 11.4441Z" fill={color}/>
+				</Svg>
+			</View>
+		</Pressable>);
+};
+Delete.defaultProps = {
+    color: black.main,
+    size: 21,
+    onPress: () => { },
+};
+export default Delete;

package/dist/components/Select/index.d.ts

@@ -0,0 +1,41 @@
+import React, { FC } from 'react';
+import { TextInput } from 'react-native';
+declare enum KeyboardTypes {
+    Default = "default",
+    NumberPad = "number-pad",
+    DecimalPad = "decimal-pad",
+    Numeric = "numeric",
+    EmailAddress = "email-address",
+    PhonePad = "phone-pad",
+    URL = "url"
+}
+export interface Option {
+    label: string;
+    value: string | number;
+}
+interface CustomOptionComponentProps {
+    renderedOption: Option;
+    filteredOptions: Option[];
+    selectedOptions: Option[];
+    callbackOptionSelected: (option: Option) => void;
+}
+export type CustomOptionComponent = (props: CustomOptionComponentProps) => React.Component;
+interface SelectProps {
+    options: Option[];
+    label: string;
+    value?: string;
+    optionStyles?: {};
+    placeholder?: string;
+    inputProps?: TextInput;
+    isSearchable?: boolean;
+    isMulti?: boolean;
+    isDisabled?: boolean;
+    noOptionsMessage?: string;
+    multiOptionsText?: string;
+    keyboardType?: KeyboardTypes;
+    onFocus?: () => void;
+    onSelectOption?: (selectedOptions: Option[]) => void;
+    customOptionComponent?: CustomOptionComponent | null;
+}
+declare const Select: FC<SelectProps>;
+export default Select;

package/dist/components/Select/index.js

@@ -0,0 +1,149 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { Keyboard, StyleSheet, Text, TextInput, View } from 'react-native';
+import { black, grey, primary } from '../../theme/palette';
+import { formatPlaceholderMulti } from './utils';
+import ChevronIcon from './Components/Icons/Chevron';
+import DeleteIcon from './Components/Icons/Delete';
+import Dropdown from './Components/Dropdown';
+// eslint-disable-next-line no-shadow
+var KeyboardTypes;
+(function (KeyboardTypes) {
+    KeyboardTypes["Default"] = "default";
+    KeyboardTypes["NumberPad"] = "number-pad";
+    KeyboardTypes["DecimalPad"] = "decimal-pad";
+    KeyboardTypes["Numeric"] = "numeric";
+    KeyboardTypes["EmailAddress"] = "email-address";
+    KeyboardTypes["PhonePad"] = "phone-pad";
+    KeyboardTypes["URL"] = "url";
+})(KeyboardTypes || (KeyboardTypes = {}));
+const Select = ({ options, label, value = null, placeholder = '', optionStyles = {}, inputProps = {}, isSearchable = false, isMulti = false, isDisabled = false, noOptionsMessage = 'no options', multiOptionsText = '', keyboardType = KeyboardTypes.Default, onFocus = () => { }, onSelectOption = () => { }, customOptionComponent = null, ...props }) => {
+    const [inputValue, setInputValue] = useState('');
+    const [selectedOptions, setSelectedOptions] = useState([]);
+    const [filteredOptions, setFilteredOptions] = useState(options);
+    const [isShowedDropdown, setIsShowedDropdown] = useState(false);
+    const inputRef = useRef(null);
+    const hasDefaultValue = value && options?.find((option) => option.label === value);
+    const isMoveLabel = isShowedDropdown || inputValue;
+    const showDeleteIcon = isDisabled ? false : !!inputValue && !!selectedOptions?.length;
+    const isArrowRotated = isShowedDropdown ? '180deg' : '0deg';
+    const filterOptions = (textValue) => {
+        if (typeof textValue !== 'string' || !textValue.length) {
+            return setFilteredOptions(options);
+        }
+        const filtered = options?.filter((option) => option.label.toLowerCase().includes(textValue.toLowerCase()));
+        return setFilteredOptions(filtered);
+    };
+    const handleChange = (textValue) => {
+        setInputValue(textValue);
+        filterOptions(textValue);
+    };
+    const handleOnFocus = () => {
+        if (!isSearchable || isMulti) {
+            Keyboard.dismiss();
+        }
+        onFocus();
+        setIsShowedDropdown(true);
+    };
+    const setSingleOption = (option) => {
+        setIsShowedDropdown(false);
+        setSelectedOptions([option]);
+        setInputValue(option.label);
+    };
+    const setMultiOptions = (option) => {
+        const optionMatcher = selectedOptions.some((previewOption) => previewOption === option);
+        const updateOption = optionMatcher
+            ? selectedOptions.filter((previewOption) => previewOption !== option)
+            : [...selectedOptions, option];
+        setSelectedOptions(updateOption);
+        setInputValue(formatPlaceholderMulti(updateOption, multiOptionsText));
+    };
+    const handleSelectedOption = (option) => isMulti ? setMultiOptions(option) : setSingleOption(option);
+    const handleCloseDropdown = () => {
+        if (isDisabled) {
+            return null;
+        }
+        setIsShowedDropdown(!isShowedDropdown);
+        inputRef.current?.blur();
+    };
+    const handleResetOptions = () => {
+        setIsShowedDropdown(false);
+        setInputValue('');
+        setSelectedOptions([]);
+    };
+    const memoizedSelectedOptions = useCallback(() => {
+        if (!!selectedOptions?.length && !!inputValue) {
+            onSelectOption(selectedOptions);
+        }
+    }, [inputValue, onSelectOption, selectedOptions]);
+    useEffect(() => {
+        memoizedSelectedOptions();
+    }, [selectedOptions, inputValue, memoizedSelectedOptions]);
+    useEffect(() => {
+        if (hasDefaultValue) {
+            setSelectedOptions([hasDefaultValue]);
+            setInputValue(value);
+        }
+    }, [hasDefaultValue, value]);
+    const styles = StyleSheet.create({
+        wrapper: {
+            width: '100%',
+            marginBottom: 10,
+            position: 'relative',
+            zIndex: isShowedDropdown ? 10 : 0,
+        },
+        wrapperInput: {
+            position: 'relative',
+            width: '100%',
+            marginBottom: 0,
+            marginTop: 18,
+        },
+        label: {
+            position: 'absolute',
+            color: isMoveLabel && !isDisabled ? primary.main : black.main,
+            fontSize: 16,
+            lineHeight: 19,
+            letterSpacing: 0,
+            left: 0,
+            fontWeight: isMoveLabel ? '600' : '400',
+            bottom: isMoveLabel ? 38 : 10,
+        },
+        input: {
+            width: '100%',
+            height: 38,
+            padding: 0,
+            fontSize: 16,
+            lineHeight: 19,
+            letterSpacing: 0,
+            borderBottomWidth: 1,
+            color: black.main,
+            borderBottomColor: isShowedDropdown ? primary.main : grey[200],
+        },
+        arrowIcon: {
+            position: 'absolute',
+            padding: 8,
+            right: 0,
+            bottom: 0,
+            zIndex: 1,
+            transform: [{ rotate: isArrowRotated }],
+        },
+        deleteIcon: {
+            position: 'absolute',
+            padding: 8,
+            right: 30,
+            bottom: 0,
+            zIndex: 1,
+        },
+    });
+    return (<View style={styles.wrapper}>
+			<View style={styles.wrapperInput} {...props}>
+				{showDeleteIcon && <DeleteIcon style={styles.deleteIcon} onPress={handleResetOptions}/>}
+				<ChevronIcon style={styles.arrowIcon} color={isDisabled ? black.main : primary.main} onPress={handleCloseDropdown}/>
+
+				<Text style={styles.label}>{label}</Text>
+				<TextInput ref={inputRef} style={styles.input} value={inputValue} placeholder={isMoveLabel && placeholder} showSoftInputOnFocus={!isMulti && isSearchable} caretHidden={!isSearchable} keyboardType={keyboardType} editable={!isDisabled} onFocus={handleOnFocus} onChangeText={handleChange} {...inputProps}/>
+			</View>
+
+			<Dropdown isShowedDropdown={isShowedDropdown} filteredOptions={filteredOptions} selectedOptions={selectedOptions} noOptionsMessage={noOptionsMessage} optionStyles={optionStyles} callbackOption={handleSelectedOption} customOptionComponent={customOptionComponent}/>
+		</View>);
+};
+export default Select;

package/dist/components/Select/utils/index.d.ts

@@ -0,0 +1,2 @@
+import { Option } from '..';
+export declare const formatPlaceholderMulti: (options: Option[], optionsText: string) => string;

package/dist/components/Select/utils/index.js

@@ -0,0 +1,8 @@
+export const formatPlaceholderMulti = (options, optionsText) => {
+    if (!options.length) {
+        return '';
+    }
+    return options.length > 1
+        ? `${options[0].label}  (+${options.length - 1} ${optionsText})`
+        : options[0].label;
+};

package/dist/components/SwipeUp/childComponents/index.d.ts

@@ -0,0 +1,11 @@
+import React, { EffectCallback, DependencyList, JSX } from 'react';
+import { BottomSheetFlatListMethods, BottomSheetScrollViewMethods, BottomSheetScrollableProps } from '@gorhom/bottom-sheet';
+import { FlatListProps, ScrollViewProps, ViewProps } from 'react-native';
+interface BottomSheetFocusProps {
+    focusHook?: (effect: EffectCallback, deps?: DependencyList) => void;
+}
+type SwipeUpViewProps = ViewProps & BottomSheetFocusProps;
+export declare const SwipeUpFlatList: React.ForwardRefExoticComponent<FlatListProps<unknown> & BottomSheetScrollableProps & React.RefAttributes<BottomSheetFlatListMethods>>;
+export declare const SwipeUpScrollView: React.ForwardRefExoticComponent<ScrollViewProps & BottomSheetScrollableProps & React.RefAttributes<BottomSheetScrollViewMethods>>;
+export declare const SwipeUpView: ({ children, ...props }: SwipeUpViewProps) => JSX.Element | null;
+export {};

package/dist/components/SwipeUp/childComponents/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { BottomSheetFlatList, BottomSheetScrollView, BottomSheetView, } from '@gorhom/bottom-sheet';
+export const SwipeUpFlatList = React.forwardRef(({ data, renderItem, ...props }, ref) => {
+    if (!data || !data.length || !renderItem) {
+        return null;
+    }
+    return <BottomSheetFlatList ref={ref} data={data} renderItem={renderItem} {...props}/>;
+});
+export const SwipeUpScrollView = React.forwardRef(({ children, ...props }, ref) => {
+    if (!children) {
+        return null;
+    }
+    return (<BottomSheetScrollView ref={ref} {...props}>
+				{children}
+			</BottomSheetScrollView>);
+});
+export const SwipeUpView = ({ children, ...props }) => {
+    if (!children) {
+        return null;
+    }
+    return <BottomSheetView {...props}>{children}</BottomSheetView>;
+};

package/dist/components/SwipeUp/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { BottomSheetProps } from '@gorhom/bottom-sheet';
+import { ViewStyle } from 'react-native';
+export interface SwipeUpProps extends BottomSheetProps {
+    onChangeSnap?: () => void;
+    swipeWrapperStyle?: ViewStyle;
+    snapPosition?: number;
+}
+declare const SwipeUp: React.ForwardRefExoticComponent<SwipeUpProps & React.RefAttributes<import("@gorhom/bottom-sheet/lib/typescript/types").BottomSheetMethods>>;
+export default SwipeUp;

package/dist/components/SwipeUp/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import BottomSheet from '@gorhom/bottom-sheet';
+const SwipeUp = React.forwardRef(({ children, snapPoints = ['100%'], snapPosition = 0, style, onChangeSnap, backgroundStyle, swipeWrapperStyle, ...props }, ref) => {
+    if (!children) {
+        return null;
+    }
+    return (<BottomSheet ref={ref} snapPoints={snapPoints} index={snapPosition} onChange={onChangeSnap} style={style} containerStyle={backgroundStyle} backgroundStyle={swipeWrapperStyle} {...props}>
+				{children}
+			</BottomSheet>);
+});
+export default SwipeUp;

package/dist/index.d.ts

@@ -7,5 +7,11 @@ import Loading from './components/Loading';
 import StatusChip from './components/StatusChip';
 import Input from './components/Input';
 import LoadingFullScreen from './components/LoadingFullScreen';
+import Icon from './components/Icon';
+import Select from './components/Select';
 import { palette } from './theme/palette';
-export { Text, Avatar, CheckBox, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen };
+import RadioButton from './components/RadioButton';
+import SwipeUp from './components/SwipeUp';
+import { SwipeUpFlatList, SwipeUpScrollView, SwipeUpView } from './components/SwipeUp/childComponents';
+import Carousel from './components/Carousel';
+export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, };

package/dist/index.js

@@ -7,5 +7,11 @@ import Loading from './components/Loading';
 import StatusChip from './components/StatusChip';
 import Input from './components/Input';
 import LoadingFullScreen from './components/LoadingFullScreen';
+import Icon from './components/Icon';
+import Select from './components/Select';
 import { palette } from './theme/palette';
-export { Text, Avatar, CheckBox, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen };
+import RadioButton from './components/RadioButton';
+import SwipeUp from './components/SwipeUp';
+import { SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, } from './components/SwipeUp/childComponents';
+import Carousel from './components/Carousel';
+export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, };

package/dist/ios/MyApp/AppDelegate.h

@@ -0,0 +1,8 @@
+#import <React/RCTBridgeDelegate.h>
+#import <UIKit/UIKit.h>
+
+@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate>
+
+@property (nonatomic, strong) UIWindow *window;
+
+@end