oneticket-sdk-vi 1.0.0

package/dist/src/components/common/CustomInput/CustomInput.js

@@ -0,0 +1,332 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_size_matters_1 = require("react-native-size-matters");
+const CustomText_1 = require("../Text/CustomText");
+const ThemeProvider_1 = require("../../../theme/ThemeProvider");
+const Checkbox_1 = require("../Checkbox/Checkbox");
+const ChevronDownIcon_1 = __importDefault(require("../../../assets/icons/ChevronDownIcon"));
+const TickIcon_1 = __importDefault(require("../../../assets/icons/TickIcon"));
+const CustomInput = ({ type, label, placeholder, error, name, value, onChange, required, options, disabled, showError, maxDate, minDate, maxLength, size = "md", isReadOnly, floatingLabel = true, }) => {
+    const { theme } = (0, ThemeProvider_1.useTheme)();
+    const [phoneValue, setPhoneValue] = (0, react_1.useState)(value || "");
+    const [formattedPhoneValue, setFormattedPhoneValue] = (0, react_1.useState)("");
+    const [showPassword, setShowPassword] = (0, react_1.useState)(false);
+    const [date, setDate] = (0, react_1.useState)(undefined);
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const [isSelectOpen, setIsSelectOpen] = (0, react_1.useState)(false);
+    const [selectedOption, setSelectedOption] = (0, react_1.useState)(null);
+    const inputRef = (0, react_1.useRef)(null);
+    const animatedLabel = (0, react_1.useRef)(new react_native_1.Animated.Value(value ? 1 : 0)).current;
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.timing(animatedLabel, {
+            toValue: isFocused || value ? 1 : 0,
+            duration: 200,
+            useNativeDriver: false,
+        }).start();
+    }, [isFocused, value]);
+    const labelStyle = {
+        position: "absolute",
+        left: (0, react_native_size_matters_1.ms)(14),
+        top: animatedLabel.interpolate({
+            inputRange: [0, 1],
+            outputRange: [(0, react_native_size_matters_1.mvs)(13), (0, react_native_size_matters_1.mvs)(-11)],
+        }),
+        backgroundColor: theme.colors.background,
+        zIndex: 1,
+        paddingLeft: (0, react_native_size_matters_1.ms)(5),
+        paddingRight: (0, react_native_size_matters_1.ms)(5),
+        fontSize: animatedLabel.interpolate({
+            inputRange: [0, 1],
+            outputRange: [(0, react_native_size_matters_1.ms)(14), (0, react_native_size_matters_1.ms)(14)],
+        }),
+        color: animatedLabel.interpolate({
+            inputRange: [0, 1],
+            outputRange: [theme.colors.textTertiary, theme.colors.text],
+        }),
+    };
+    const handleTogglePassword = () => {
+        setShowPassword(!showPassword);
+    };
+    const handleLabelPress = () => {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const handleSelectOption = (option) => {
+        setSelectedOption(option);
+        if (onChange)
+            onChange(option.value);
+        setIsSelectOpen(false);
+    };
+    const getInputSize = () => {
+        switch (size) {
+            case "sm": return (0, react_native_size_matters_1.mvs)(40);
+            case "lg": return (0, react_native_size_matters_1.mvs)(50);
+            default: return (0, react_native_size_matters_1.mvs)(48);
+        }
+    };
+    const renderInputComponent = () => {
+        switch (type) {
+            // case "phone":
+            //   return (
+            //     <PhoneInput
+            //       value={value}
+            //       defaultCode="IN"
+            //       layout="first"
+            //       textInputProps={{
+            //         maxLength: 10,
+            //         placeholderTextColor: theme.colors.textTertiary,
+            //         placeholder: floatingLabel ? undefined : placeholder
+            //       }}
+            //       disabled={disabled}
+            //       onChangeText={(text) => {
+            //         setPhoneValue(text);
+            //         if (onChange) onChange(text);
+            //       }}
+            //       containerStyle={[
+            //         styles.phoneContainer,
+            //         {
+            //           borderColor: isFocused ? theme.colors.primary[500] : theme.colors.borderDark,
+            //           height: getInputSize()
+            //         }
+            //       ]}
+            //       textContainerStyle={[
+            //         styles.phoneInput,
+            //         { backgroundColor: theme.colors.surfaceVariant }
+            //       ]}
+            //       textInputStyle={[
+            //         styles.numberInput,
+            //         { color: theme.colors.text }
+            //       ]}
+            //       codeTextStyle={{
+            //         fontSize: ms(16),
+            //         fontWeight: '700',
+            //         color: theme.colors.text
+            //       }}
+            //     />
+            //   );
+            case "password":
+                return (react_1.default.createElement(react_native_1.View, { style: [
+                        styles.inputGroup,
+                        styles.focusedInput,
+                        {
+                            borderColor: isFocused ? theme.colors.primary[500] : theme.colors.borderDark,
+                            height: getInputSize()
+                        }
+                    ] },
+                    react_1.default.createElement(react_native_1.TextInput, { ref: inputRef, secureTextEntry: !showPassword, style: [
+                            styles.input,
+                            {
+                                color: theme.colors.text,
+                                flex: 1,
+                                height: '100%'
+                            }
+                        ], placeholder: floatingLabel ? undefined : placeholder, placeholderTextColor: theme.colors.textTertiary, value: value, onChangeText: onChange, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), editable: !disabled, maxLength: maxLength }),
+                    react_1.default.createElement(react_native_1.TouchableOpacity, { onPress: handleTogglePassword, style: styles.iconButton })));
+            case "number":
+                return (react_1.default.createElement(react_native_1.TextInput, { ref: inputRef, style: [
+                        styles.input,
+                        styles.focusedInput,
+                        {
+                            borderColor: isFocused ? theme.colors.primary[500] : theme.colors.borderDark,
+                            height: getInputSize(),
+                            textAlign: 'center',
+                            color: theme.colors.text
+                        }
+                    ], keyboardType: "numeric", placeholder: floatingLabel ? undefined : placeholder, placeholderTextColor: theme.colors.textTertiary, value: value, onChangeText: onChange, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), editable: !disabled, maxLength: maxLength, autoComplete: "cc-number", autoCorrect: false, autoCapitalize: "none" }));
+            case "text":
+                return (react_1.default.createElement(react_native_1.TextInput, { ref: inputRef, style: [
+                        styles.input,
+                        styles.focusedInput,
+                        {
+                            borderColor: isFocused ? theme.colors.primary[500] : theme.colors.borderDark,
+                            height: getInputSize(),
+                            color: theme.colors.text
+                        }
+                    ], placeholder: floatingLabel ? undefined : placeholder, placeholderTextColor: theme.colors.textTertiary, value: value, onChangeText: onChange, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), editable: !disabled && !isReadOnly, maxLength: maxLength, scrollEnabled: true }));
+            case "textarea":
+                return (react_1.default.createElement(react_native_1.TextInput, { ref: inputRef, multiline: true, numberOfLines: 4, placeholder: floatingLabel ? undefined : placeholder, placeholderTextColor: theme.colors.textTertiary, value: value, onChangeText: onChange, style: [
+                        styles.textarea,
+                        {
+                            borderColor: isFocused ? theme.colors.primary[500] : theme.colors.borderDark,
+                            color: theme.colors.text
+                        }
+                    ], onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), maxLength: maxLength, editable: !disabled }));
+            case "radio":
+                return (react_1.default.createElement(react_native_1.View, { style: styles.radioGroup }, options === null || options === void 0 ? void 0 : options.map((opt) => (react_1.default.createElement(react_native_1.View, { key: `${name}-${opt.value}`, style: styles.radioOption },
+                    react_1.default.createElement(Checkbox_1.Checkbox, { value: value === opt.value, onValueChange: () => !disabled && onChange && onChange(opt.value), disabled: disabled, size: (0, react_native_size_matters_1.ms)(18) }),
+                    react_1.default.createElement(CustomText_1.CustomText, { variant: "body1", style: [
+                            styles.radioLabel,
+                            disabled && { borderColor: theme.colors.gray[200], backgroundColor: theme.colors.disabled }
+                        ] }, opt.label))))));
+            case "switch":
+                return (react_1.default.createElement(react_native_1.Switch, { value: value, onValueChange: (val) => onChange && onChange(val), disabled: disabled, trackColor: {
+                        false: theme.colors.surfaceVariant,
+                        true: theme.colors.primary[500]
+                    }, thumbColor: theme.colors.background }));
+            case "select":
+                return (react_1.default.createElement(react_native_1.View, null,
+                    react_1.default.createElement(react_native_1.Pressable, { onPress: () => !disabled && setIsSelectOpen(true), style: [
+                            styles.selectInput,
+                            {
+                                borderColor: isFocused ? theme.colors.primary[500] : theme.colors.borderDark,
+                                height: getInputSize()
+                            }
+                        ] },
+                        react_1.default.createElement(CustomText_1.CustomText, { variant: "body1", style: [
+                                styles.selectText,
+                                {
+                                    color: selectedOption ? theme.colors.text : theme.colors.textTertiary
+                                }
+                            ] }, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || placeholder),
+                        react_1.default.createElement(ChevronDownIcon_1.default, { size: (0, react_native_size_matters_1.ms)(16), color: theme.colors.textTertiary })),
+                    react_1.default.createElement(react_native_1.Modal, { visible: isSelectOpen, transparent: true, animationType: "fade", onRequestClose: () => setIsSelectOpen(false) },
+                        react_1.default.createElement(react_native_1.View, { style: styles.modalOverlay },
+                            react_1.default.createElement(react_native_1.View, { style: [
+                                    styles.modalContent,
+                                    { backgroundColor: theme.colors.background }
+                                ] },
+                                react_1.default.createElement(react_native_1.FlatList, { data: options || [], keyExtractor: (item) => item.value, renderItem: ({ item }) => (react_1.default.createElement(react_native_1.Pressable, { style: styles.selectItem, onPress: () => handleSelectOption(item) },
+                                        react_1.default.createElement(CustomText_1.CustomText, { variant: "body1" }, item.label),
+                                        (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === item.value && (react_1.default.createElement(TickIcon_1.default, { color: theme.colors.text })))) }))))));
+            default:
+                return (react_1.default.createElement(react_native_1.TextInput, { ref: inputRef, style: [
+                        styles.input,
+                        styles.focusedInput,
+                        {
+                            borderColor: isFocused ? theme.colors.primary[500] : theme.colors.borderDark,
+                            height: getInputSize(),
+                            color: theme.colors.text
+                        }
+                    ], placeholder: floatingLabel ? undefined : placeholder, placeholderTextColor: theme.colors.textTertiary, value: value, onChangeText: onChange, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), editable: !disabled, maxLength: maxLength }));
+        }
+    };
+    return (react_1.default.createElement(react_native_1.View, { style: styles.container },
+        floatingLabel && (react_1.default.createElement(react_native_1.TouchableWithoutFeedback, { onPress: handleLabelPress },
+            react_1.default.createElement(react_native_1.Animated.Text, { style: [labelStyle] },
+                label,
+                " ",
+                required && "*"))),
+        renderInputComponent(),
+        showError && error && (react_1.default.createElement(CustomText_1.CustomText, { variant: "caption", style: [styles.errorText, { color: theme.colors.error[500] }] }, error))));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        position: 'relative',
+    },
+    inputGroup: {
+        flexDirection: "row",
+        alignItems: "center",
+        borderWidth: 1,
+        borderRadius: (0, react_native_size_matters_1.ms)(8),
+        paddingHorizontal: (0, react_native_size_matters_1.ms)(14),
+    },
+    input: {
+        paddingHorizontal: (0, react_native_size_matters_1.ms)(14),
+        fontSize: (0, react_native_size_matters_1.ms)(14),
+        width: '100%',
+    },
+    phoneContainer: {
+        borderWidth: 1,
+        borderRadius: (0, react_native_size_matters_1.ms)(8),
+        width: "100%",
+    },
+    phoneInput: {
+        borderRadius: (0, react_native_size_matters_1.ms)(8),
+        padding: 0,
+    },
+    numberInput: {
+        padding: 0,
+        fontSize: (0, react_native_size_matters_1.ms)(16),
+        fontWeight: '700',
+        marginLeft: (0, react_native_size_matters_1.ms)(6),
+    },
+    textarea: {
+        paddingVertical: (0, react_native_size_matters_1.mvs)(12),
+        paddingHorizontal: (0, react_native_size_matters_1.ms)(14),
+        borderWidth: 1,
+        borderRadius: (0, react_native_size_matters_1.ms)(8),
+        fontSize: (0, react_native_size_matters_1.ms)(14),
+        height: (0, react_native_size_matters_1.mvs)(100),
+        textAlignVertical: "top",
+        lineHeight: (0, react_native_size_matters_1.mvs)(24),
+    },
+    radioGroup: {
+        gap: (0, react_native_size_matters_1.mvs)(8),
+    },
+    radioOption: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: (0, react_native_size_matters_1.ms)(8),
+    },
+    radioLabel: {
+        flex: 1,
+    },
+    focusedInput: {
+        borderWidth: 1,
+        borderRadius: (0, react_native_size_matters_1.ms)(8),
+    },
+    errorText: {
+        marginTop: (0, react_native_size_matters_1.mvs)(4),
+    },
+    iconButton: {
+        padding: (0, react_native_size_matters_1.ms)(8),
+    },
+    selectInput: {
+        borderWidth: 1,
+        borderRadius: (0, react_native_size_matters_1.ms)(8),
+        paddingHorizontal: (0, react_native_size_matters_1.ms)(14),
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    selectText: {
+        flex: 1,
+    },
+    modalOverlay: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    },
+    modalContent: {
+        width: '80%',
+        maxHeight: '60%',
+        borderRadius: (0, react_native_size_matters_1.ms)(8),
+        padding: (0, react_native_size_matters_1.ms)(16),
+    },
+    selectItem: {
+        paddingVertical: (0, react_native_size_matters_1.mvs)(12),
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+});
+exports.default = CustomInput;

package/dist/src/components/common/DropdownComponent/DropdownComponent.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { TextStyle, ViewStyle } from 'react-native';
+interface DropdownComponentProps {
+    isOpen?: boolean;
+    data: any[];
+    value: any | null;
+    enableLabelAnimation?: boolean;
+    enableSearch?: boolean;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    maxHeight?: number;
+    dropdownStyle?: ViewStyle;
+    placeholderStyle?: TextStyle;
+    selectedTextStyle?: TextStyle;
+    iconStyle?: any;
+    inputSearchStyle?: TextStyle;
+    containerStyle?: TextStyle;
+    itemTextStyle?: TextStyle;
+    onChange: (item: any) => void;
+    isDisabled?: boolean;
+}
+declare const DropdownComponent: React.FC<DropdownComponentProps>;
+export default DropdownComponent;

package/dist/src/components/common/DropdownComponent/DropdownComponent.js

@@ -0,0 +1,133 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_element_dropdown_1 = require("react-native-element-dropdown");
+const ThemeProvider_1 = require("../../../theme/ThemeProvider");
+const DropdownComponent = ({ isOpen = false, data, value, enableLabelAnimation = true, enableSearch = true, placeholder = '', searchPlaceholder = 'Search...', maxHeight = 300, dropdownStyle, placeholderStyle, selectedTextStyle, iconStyle, inputSearchStyle, containerStyle, itemTextStyle, onChange, isDisabled, }) => {
+    const { theme } = (0, ThemeProvider_1.useTheme)();
+    const [isFocus, setIsFocus] = (0, react_1.useState)(isOpen);
+    const dropdownRef = (0, react_1.useRef)(null);
+    const [search, setSearch] = (0, react_1.useState)('');
+    const getLabelField = () => { var _a; return ((_a = data[0]) === null || _a === void 0 ? void 0 : _a.label) ? 'label' : 'name'; };
+    const getValueField = () => { var _a; return ((_a = data[0]) === null || _a === void 0 ? void 0 : _a.value) ? 'value' : 'name'; };
+    // const searchInputRef = useRef<TextInput>(null);
+    // const filteredStations = data.filter(st => {
+    //   if (st.name.toLowerCase().trim().includes(search.toLowerCase().trim())) {
+    //     return true;
+    //   } else {
+    //     return false;
+    //   }
+    // });
+    (0, react_1.useEffect)(() => {
+        if (enableSearch && isFocus) {
+            setTimeout(() => {
+                // searchInputRef.current?.focus();
+            }, 500);
+        }
+    }, [isFocus, enableSearch]);
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        if (isOpen) {
+            (_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.open();
+            setIsFocus(true);
+        }
+        else {
+            (_b = dropdownRef.current) === null || _b === void 0 ? void 0 : _b.close();
+            setIsFocus(false);
+        }
+    }, [isOpen]);
+    const styles = react_native_1.StyleSheet.create({
+        container: {
+            position: 'relative',
+        },
+        dropdown: {
+            height: 50,
+            // borderColor: '#a1a1aa', // NativeBase input border color when not focused
+            borderColor: theme.colors.borderDark,
+            borderWidth: 1,
+            borderRadius: 8,
+            paddingHorizontal: 8,
+            color: theme.colors.text,
+        },
+        label: {
+            position: 'absolute',
+            // backgroundColor: '#FFF',
+            backgroundColor: theme.colors.background,
+            left: 18,
+            bottom: 40,
+            zIndex: 999,
+            paddingHorizontal: 4,
+            fontSize: 14,
+            color: theme.colors.gray[500], // NativeBase default label color
+        },
+        placeholderStyle: {
+            fontSize: 14,
+            paddingLeft: 4,
+            color: theme.colors.textTertiary, // NativeBase default placeholder color
+        },
+        selectedTextStyle: {
+            fontSize: 14,
+            paddingLeft: 6,
+            color: theme.colors.text, // NativeBase input text color
+        },
+        iconStyle: {
+            width: 20,
+            height: 20,
+        },
+        inputSearchStyle: {
+            height: 45,
+            borderRadius: 8,
+            fontSize: 14,
+            color: theme.colors.text, // Text color for search input
+        },
+        containerStyle: {
+            backgroundColor: theme.colors.backdrop,
+            borderRadius: 8,
+            shadowOpacity: 1,
+            elevation: 8,
+        },
+        itemTextStyle: {
+            color: theme.colors.text,
+            fontSize: 14
+        },
+    });
+    return (react_1.default.createElement(react_native_1.View, { style: [styles.container, containerStyle] },
+        react_1.default.createElement(react_native_element_dropdown_1.Dropdown, { style: [
+                styles.dropdown,
+                dropdownStyle,
+                isFocus && { borderColor: theme.colors.primary[500] },
+                isDisabled && { borderColor: theme.colors.gray[200], backgroundColor: theme.colors.disabled }
+            ], ref: dropdownRef, labelField: getLabelField(), valueField: getValueField(), placeholderStyle: [styles.placeholderStyle, placeholderStyle], selectedTextStyle: [styles.selectedTextStyle, selectedTextStyle], inputSearchStyle: [styles.inputSearchStyle, inputSearchStyle], iconStyle: [styles.iconStyle, iconStyle], containerStyle: [styles.containerStyle, containerStyle], itemTextStyle: [styles.itemTextStyle, itemTextStyle], showsVerticalScrollIndicator: true, data: data, search: enableSearch, maxHeight: maxHeight, 
+            // labelField="name"
+            // valueField="name"
+            placeholder: enableLabelAnimation ? (!isFocus ? placeholder : '...') : placeholder, value: value, disable: isDisabled, onFocus: () => setIsFocus(true), onBlur: () => setIsFocus(false), onChange: (item) => {
+                setIsFocus(false);
+                onChange(item);
+                setSearch('');
+            }, renderInputSearch: (searchProps) => (react_1.default.createElement(react_native_1.TextInput, Object.assign({ value: search, onChangeText: val => setSearch(val), placeholder: searchPlaceholder }, searchProps, { style: [styles.inputSearchStyle, inputSearchStyle] }))) })));
+};
+exports.default = DropdownComponent;

package/dist/src/components/common/DropdownComponent/MultiSelectDropdown.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface Option {
+    label: string;
+    value: string;
+}
+interface MultiSelectDropdownProps {
+    data: Option[];
+    placeholder: string;
+    selectedLabels: string[];
+    selectedValues: string[];
+    onValueChange: (value: string) => void;
+    disabled?: boolean;
+}
+declare const MultiSelectDropdown: React.FC<MultiSelectDropdownProps>;
+export default MultiSelectDropdown;

package/dist/src/components/common/DropdownComponent/MultiSelectDropdown.js

@@ -0,0 +1,133 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const CustomText_1 = require("../../../components/common/Text/CustomText");
+const Checkbox_1 = require("../../../components/common/Checkbox/Checkbox");
+const Button_1 = require("../../../components/common/Button/Button");
+const ChevronDownIcon_1 = __importDefault(require("../../../assets/icons/ChevronDownIcon"));
+const ThemeProvider_1 = require("../../../theme/ThemeProvider");
+const react_native_size_matters_1 = require("react-native-size-matters");
+const MultiSelectDropdown = ({ data, placeholder, selectedLabels, selectedValues, onValueChange, disabled = false }) => {
+    const { theme } = (0, ThemeProvider_1.useTheme)();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (data.length === 1) {
+            const onlyOption = data[0];
+            if (!selectedValues.includes(onlyOption.value)) {
+                onValueChange(onlyOption.value);
+            }
+        }
+    }, [data, selectedValues, onValueChange]);
+    return (react_1.default.createElement(react_native_1.View, null,
+        react_1.default.createElement(react_native_1.Pressable, { onPress: () => !disabled && setIsOpen(true), disabled: disabled || data.length === 1 },
+            react_1.default.createElement(react_native_1.View, { style: [
+                    styles.dropdownContainer,
+                    {
+                        borderColor: disabled ? theme.colors.gray[200] : theme.colors.borderDark,
+                        backgroundColor: disabled ? theme.colors.disabled : theme.colors.background
+                    }
+                ] },
+                react_1.default.createElement(CustomText_1.CustomText, { variant: "body1", style: [
+                        styles.dropdownText,
+                        {
+                            color: disabled ? theme.colors.textTertiary :
+                                selectedLabels.length ? theme.colors.text : theme.colors.textTertiary
+                        }
+                    ] }, selectedLabels.length
+                    ? selectedLabels.join(', ')
+                    : data.length === 1
+                        ? data[0].label
+                        : placeholder),
+                data.length > 1 && !disabled && (react_1.default.createElement(ChevronDownIcon_1.default, { size: (0, react_native_size_matters_1.ms)(16), color: theme.colors.textTertiary })))),
+        data.length > 1 && (react_1.default.createElement(react_native_1.Modal, { visible: isOpen, transparent: true, animationType: "fade", onRequestClose: () => setIsOpen(false) },
+            react_1.default.createElement(react_native_1.View, { style: styles.modalOverlay },
+                react_1.default.createElement(react_native_1.View, { style: [
+                        styles.modalContent,
+                        { backgroundColor: theme.colors.backdrop, shadowColor: theme.colors.shadow }
+                    ] },
+                    react_1.default.createElement(CustomText_1.CustomText, { variant: "labelLarge", style: styles.modalTitle }, "Select Options"),
+                    react_1.default.createElement(react_native_1.FlatList, { data: data, keyExtractor: (item) => item.value, renderItem: ({ item }) => (react_1.default.createElement(react_native_1.Pressable, { style: styles.checkboxItem, onPress: () => onValueChange(item.value) },
+                            react_1.default.createElement(Checkbox_1.Checkbox, { value: selectedValues.includes(item.value), onValueChange: () => onValueChange(item.value), size: (0, react_native_size_matters_1.ms)(18), disabled: disabled }),
+                            react_1.default.createElement(CustomText_1.CustomText, { variant: "body1", style: styles.checkboxLabel }, item.label))), contentContainerStyle: styles.listContent }),
+                    react_1.default.createElement(Button_1.Button, { variant: "primary", style: styles.confirmButton, onPress: () => setIsOpen(false) }, "Confirm")))))));
+};
+const styles = react_native_1.StyleSheet.create({
+    dropdownContainer: {
+        borderWidth: 1,
+        borderRadius: (0, react_native_size_matters_1.ms)(8),
+        paddingVertical: (0, react_native_size_matters_1.mvs)(12),
+        paddingLeft: (0, react_native_size_matters_1.ms)(12),
+        paddingRight: (0, react_native_size_matters_1.ms)(8),
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        height: (0, react_native_size_matters_1.mvs)(48),
+    },
+    dropdownText: {
+        flex: 1,
+    },
+    modalOverlay: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    },
+    modalContent: {
+        width: '90%',
+        maxHeight: '70%',
+        borderRadius: (0, react_native_size_matters_1.ms)(12),
+        padding: (0, react_native_size_matters_1.ms)(16),
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.25,
+        shadowRadius: (0, react_native_size_matters_1.ms)(4),
+        elevation: 5,
+    },
+    modalTitle: {
+        fontWeight: 'bold',
+        marginBottom: (0, react_native_size_matters_1.mvs)(16),
+    },
+    listContent: {
+        paddingBottom: (0, react_native_size_matters_1.mvs)(8),
+    },
+    checkboxItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: (0, react_native_size_matters_1.mvs)(8),
+    },
+    checkboxLabel: {
+        flex: 1,
+        marginLeft: (0, react_native_size_matters_1.ms)(8),
+    },
+    confirmButton: {
+        height: (0, react_native_size_matters_1.mvs)(50),
+        marginTop: (0, react_native_size_matters_1.mvs)(16),
+    },
+});
+exports.default = MultiSelectDropdown;

package/dist/src/components/common/EmptyState/EmptyState.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface EmptyStateProps {
+    image: any;
+    title: string;
+    description?: string;
+}
+declare const EmptyState: React.FC<EmptyStateProps>;
+export default EmptyState;