@teamnhz/rn-ui-toolkit 1.0.0

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+interface AccordionProps {
+    title: string;
+    children: React.ReactNode;
+    initiallyExpanded?: boolean;
+    showIcon?: boolean;
+    textStyle?: TextStyle;
+    headerStyle?: ViewStyle;
+    bodyStyle?: ViewStyle;
+    iconColor?: string;
+    containerStyle?: any;
+}
+declare const Accordion: React.FC<AccordionProps>;
+export default Accordion;

package/dist/components/Accordion/index.js

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { View, TouchableOpacity, StyleSheet, LayoutAnimation, Platform, UIManager, } from 'react-native';
+import { Colors, Typography, Scale } from '../../styles';
+import T from '../T';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+const Accordion = ({ title, children, initiallyExpanded = false, showIcon = true, textStyle, headerStyle, bodyStyle, iconColor = Colors.white, containerStyle }) => {
+    const [expanded, setExpanded] = useState(initiallyExpanded);
+    const toggleExpand = () => {
+        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+        setExpanded(!expanded);
+    };
+    return (React.createElement(View, { style: [styles.container, containerStyle] },
+        React.createElement(View, { style: [
+                styles.header,
+                expanded && { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 },
+                headerStyle,
+            ] },
+            React.createElement(T, { title: title, intlType: "", style: [styles.title, textStyle] }),
+            React.createElement(TouchableOpacity, { style: {}, onPress: toggleExpand, activeOpacity: 0.8 }, showIcon && (React.createElement(Ionicons, { name: expanded ? 'chevron-up' : 'chevron-down', size: 20, color: iconColor })))),
+        expanded && React.createElement(View, { style: [styles.body, bodyStyle] }, children)));
+};
+const styles = StyleSheet.create({
+    container: {
+        marginVertical: Scale.moderateScale(5),
+        borderWidth: 1,
+        borderColor: Colors.disabledGrey,
+        borderRadius: Scale.moderateScale(8),
+        overflow: 'hidden',
+    },
+    header: {
+        padding: Scale.moderateScale(12),
+        backgroundColor: Colors.primaryColor,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        width: '100%'
+    },
+    title: {
+        ...Typography.style.standardU(),
+        color: Colors.white,
+        flex: 1,
+    },
+    body: {
+        padding: Scale.moderateScale(10),
+        backgroundColor: Colors.white,
+    },
+});
+export default Accordion;

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

@@ -0,0 +1,10 @@
+import React from "react";
+interface AppBottomSheetProps {
+    ref?: any;
+    visible: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    height?: number;
+}
+declare const BottomSheet: React.FC<AppBottomSheetProps>;
+export default BottomSheet;

package/dist/components/BottomSheet/index.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { Modal, View, StyleSheet, TouchableOpacity } from "react-native";
+import { Colors } from "../../styles";
+const BottomSheet = ({ ref, visible, onClose, children, height = 300, }) => {
+    return (React.createElement(Modal, { ref: ref, transparent: true, visible: visible, animationType: "slide" },
+        React.createElement(TouchableOpacity, { style: styles.overlay, activeOpacity: 1, onPress: onClose }),
+        React.createElement(View, { style: [styles.sheet, { height }] },
+            React.createElement(View, { style: styles.dragIndicator }),
+            children)));
+};
+export default BottomSheet;
+const styles = StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: "rgba(0,0,0,0.4)",
+    },
+    sheet: {
+        backgroundColor: Colors.white,
+        borderTopLeftRadius: 16,
+        borderTopRightRadius: 16,
+        padding: 16,
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
+    },
+    dragIndicator: {
+        width: 40,
+        height: 5,
+        backgroundColor: "#ccc",
+        borderRadius: 3,
+        alignSelf: "center",
+        marginBottom: 10,
+    },
+});

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+type ButtonDataProps = {
+    title: string;
+    buttonStyle?: ViewStyle;
+    intlType?: string;
+    outline?: boolean;
+    titleStyle?: TextStyle;
+    loading?: boolean;
+    onPress?: () => void;
+    disabled?: boolean;
+};
+declare const Button: ({ outline, buttonStyle, title, intlType, titleStyle, loading, onPress, disabled, }: ButtonDataProps) => React.JSX.Element;
+export default Button;

package/dist/components/Buttons/index.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, ActivityIndicator, Dimensions, } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import { Colors, Typography, Scale } from '../../styles';
+const { width } = Dimensions.get('window');
+const Button = ({ outline, buttonStyle, title, intlType, titleStyle, loading, onPress, disabled, }) => {
+    const { t } = useTranslation();
+    const dynamicTranslation = (text) => intlType ? t(text, { ns: intlType }) : t(text);
+    return (React.createElement(TouchableOpacity, { style: [
+            styles.button,
+            outline && styles.outlineButton,
+            buttonStyle,
+            (disabled || loading) && styles.disabledButton,
+        ], onPress: onPress, disabled: disabled || loading, activeOpacity: 0.7 }, loading ? (React.createElement(ActivityIndicator, { color: outline ? Colors.primaryColor : '#fff' })) : (React.createElement(Text, { style: [
+            styles.defaultTitleStyle,
+            outline && styles.outlineTitleStyle,
+            titleStyle,
+        ] }, dynamicTranslation(title)))));
+};
+export default Button;
+const styles = StyleSheet.create({
+    button: {
+        width: width,
+        alignSelf: 'center',
+        borderRadius: 5,
+        backgroundColor: Colors.primaryColor,
+        height: Scale.moderateScale(50),
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    outlineButton: {
+        backgroundColor: 'transparent',
+        borderWidth: 1,
+        borderColor: Colors.primaryColor,
+    },
+    outlineTitleStyle: { color: Colors.primaryColor },
+    defaultTitleStyle: {
+        ...Typography.style.standardU(),
+        textTransform: 'capitalize',
+        color: Colors.white,
+    },
+    disabledButton: {
+        opacity: 0.6,
+        backgroundColor: Colors.disabledGrey,
+    },
+});

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+interface CheckBoxProps {
+    label?: string;
+    intlType?: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    size?: number;
+    color?: string;
+    checkedColor?: string;
+    disabledColor?: string;
+    labelColor?: string;
+    containerStyle?: StyleProp<ViewStyle>;
+    boxStyle?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    iconStyle?: StyleProp<TextStyle>;
+    renderLabel?: () => React.ReactNode;
+}
+declare const CheckBox: React.FC<CheckBoxProps>;
+export default CheckBox;

package/dist/components/CheckBox/index.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import Icon from 'react-native-vector-icons/Feather';
+import { Colors } from '../../styles';
+const CheckBox = ({ label, intlType, checked, onChange, disabled = false, size = 20, color = Colors.checkedColor, checkedColor = Colors.checkedColor, disabledColor = Colors.disabledGrey, labelColor = Colors.textColor, containerStyle, boxStyle, labelStyle, iconStyle, renderLabel, }) => {
+    const { t } = useTranslation();
+    const getLabel = () => {
+        if (!label)
+            return '';
+        if (intlType) {
+            const translated = t(label, { ns: intlType });
+            if (translated !== label)
+                return translated;
+        }
+        return label;
+    };
+    return (React.createElement(TouchableOpacity, { style: [styles.container, containerStyle], onPress: () => onChange(!checked), disabled: disabled, activeOpacity: 0.7 },
+        React.createElement(View, { style: [
+                {
+                    width: size,
+                    height: size,
+                    borderWidth: 1,
+                    borderColor: disabled ? disabledColor : color,
+                    borderRadius: 4,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    marginRight: 10,
+                    backgroundColor: checked ? checkedColor : 'transparent',
+                },
+                boxStyle,
+            ] }, checked && (React.createElement(Icon, { name: "check", size: size * 0.7, color: "#fff", style: iconStyle }))),
+        renderLabel
+            ? renderLabel()
+            : label
+                ? React.createElement(Text, { style: [{ fontSize: 14, color: labelColor }, labelStyle] }, getLabel())
+                : null));
+};
+const styles = StyleSheet.create({
+    container: { flexDirection: 'row', alignItems: 'center' },
+});
+export default CheckBox;

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

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+type ContainerProps = {
+    children: ReactNode;
+    containerStyle?: ViewStyle;
+    safeEdgesTop?: boolean;
+    safeEdgesBottom?: boolean;
+    onPress?: () => void;
+};
+declare const Container: ({ children, containerStyle, safeEdgesTop, safeEdgesBottom, onPress, }: ContainerProps) => React.JSX.Element;
+export default Container;

package/dist/components/Container/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { StyleSheet, View, Platform, TouchableWithoutFeedback, KeyboardAvoidingView, } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Colors, Scale } from '../../styles';
+const Container = ({ children, containerStyle, safeEdgesTop, safeEdgesBottom, onPress, }) => {
+    const edges = ['left', 'right'];
+    if (safeEdgesTop) {
+        edges.push('top');
+    }
+    if (safeEdgesBottom) {
+        edges.push('bottom');
+    }
+    return (React.createElement(KeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, style: styles.keyboardViewStyle },
+        React.createElement(TouchableWithoutFeedback, { onPress: onPress },
+            React.createElement(SafeAreaView, { edges: edges, style: [styles.globalSafeAreaStyle, containerStyle] },
+                React.createElement(View, { style: [styles.screen, containerStyle] }, children)))));
+};
+export default Container;
+const styles = StyleSheet.create({
+    keyboardViewStyle: { flex: 1 },
+    globalSafeAreaStyle: {
+        flex: 1,
+        backgroundColor: Colors.background,
+        paddingBottom: Platform.OS === 'android' ? Scale?.moderateScale(10) : 0,
+    },
+    screen: {
+        flex: 1,
+        paddingTop: Scale?.moderateScale(20),
+    },
+});

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

@@ -0,0 +1,11 @@
+import React from 'react';
+interface DateTimePickerProps {
+    value: Date | null;
+    onChange: (date: Date) => void;
+    label: string;
+    intlType?: string;
+    mode?: 'date' | 'time' | 'datetime';
+    disabled?: boolean;
+}
+declare const DateTimePicker: React.FC<DateTimePickerProps>;
+export default DateTimePicker;

package/dist/components/DateTimePicker/index.js

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
+import DatePicker from 'react-native-date-picker';
+import { useTranslation } from 'react-i18next';
+import { Colors, Scale, Typography } from '../../styles';
+const DateTimePicker = ({ value, onChange, label, intlType, mode = 'date', disabled = false, }) => {
+    const { t } = useTranslation(['common', 'validation', 'address', 'sell']);
+    const getLabel = () => {
+        if (intlType) {
+            const translated = t(label, { ns: intlType });
+            if (translated !== label)
+                return translated;
+        }
+        return label;
+    };
+    const [open, setOpen] = useState(false);
+    return (React.createElement(View, { style: styles.container },
+        React.createElement(TouchableOpacity, { style: styles.button, disabled: disabled, onPress: () => setOpen(true) },
+            React.createElement(Text, { style: styles.text }, value ? formatValue(value, mode) : getLabel())),
+        React.createElement(DatePicker, { modal: true, open: open, date: value || new Date(), mode: mode, onConfirm: (val) => {
+                setOpen(false);
+                onChange(val);
+            }, onCancel: () => setOpen(false) })));
+};
+const formatValue = (date, mode) => {
+    try {
+        switch (mode) {
+            case 'time':
+                return date.toLocaleTimeString();
+            case 'datetime':
+                return date.toLocaleString();
+            default:
+                return date.toLocaleDateString();
+        }
+    }
+    catch {
+        return ''; // fallback if date is invalid
+    }
+};
+const styles = StyleSheet.create({
+    container: { marginVertical: Scale.moderateScale(5) },
+    button: {
+        borderWidth: 1,
+        borderColor: Colors.primaryColor,
+        borderRadius: 5,
+        padding: 10,
+    },
+    text: { ...Typography.style.standardU(), color: Colors.primaryColor },
+});
+export default DateTimePicker;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+type DividerProps = {
+    small?: boolean;
+    disableMargin?: boolean;
+    marginStyle?: ViewStyle;
+};
+declare const Dividers: ({ small, disableMargin, marginStyle, }: DividerProps) => React.JSX.Element;
+export default Dividers;

package/dist/components/Dividers/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Divider } from 'react-native-elements';
+import { Colors, Scale } from '../../styles';
+const Dividers = ({ small, disableMargin, marginStyle, }) => (React.createElement(Divider, { style: [
+        small ? styles.dividerStyleSmall : styles.dividerStyleBig,
+        !disableMargin ? styles.verticalMargin : null,
+        marginStyle,
+    ] }));
+export default Dividers;
+const styles = StyleSheet.create({
+    dividerStyleBig: {
+        backgroundColor: Colors.lightGrey,
+        height: Scale?.moderateScale(10),
+    },
+    dividerStyleSmall: {
+        backgroundColor: Colors.lightGrey,
+        height: 1,
+    },
+    verticalMargin: {
+        marginVertical: Scale?.moderateScale(20),
+    },
+});

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import type { DocumentPickerResponse } from '@react-native-documents/picker';
+interface AppDocumentPickerProps {
+    label?: string;
+    icon?: string;
+    onPick: (file: DocumentPickerResponse | null) => void;
+    disabled?: boolean;
+    iconColor?: string;
+    containerStyle?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    iconStyle?: StyleProp<ViewStyle>;
+    renderContent?: () => React.ReactNode;
+}
+declare const AppDocumentPicker: React.FC<AppDocumentPickerProps>;
+export default AppDocumentPicker;

package/dist/components/DocumentPicker/index.js

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { Text, TouchableOpacity, StyleSheet, } from 'react-native';
+import * as DocumentPickerLib from '@react-native-documents/picker';
+import { requestDocumentPermission } from '../../utils/permissions';
+import { Colors } from '../../styles';
+import Image from '../Image';
+const AppDocumentPicker = ({ label = 'Upload File', icon = require('../../assets/images/upload.png'), onPick, disabled = false, containerStyle, labelStyle, iconStyle, iconColor = Colors.primaryColor, renderContent, }) => {
+    const [selectedFile, setSelectedFile] = useState(null);
+    const handlePick = async () => {
+        const granted = await requestDocumentPermission();
+        if (!granted) {
+            onPick(null);
+            return;
+        }
+        try {
+            const [res] = await DocumentPickerLib.pick({
+                type: [DocumentPickerLib.types.allFiles],
+                copyTo: 'documentDirectory',
+            });
+            setSelectedFile(res);
+            onPick(res);
+        }
+        catch (err) {
+            console.error('Document Picker Error:', err);
+            onPick(null);
+        }
+    };
+    return (React.createElement(TouchableOpacity, { style: [styles.container, containerStyle], onPress: handlePick, disabled: disabled, activeOpacity: 0.7 }, renderContent ? (renderContent()) : (React.createElement(React.Fragment, null,
+        selectedFile ? (React.createElement(Image, { source: { uri: selectedFile.uri }, style: [styles.fileIcon, iconStyle], resizeMode: "contain" })) : (React.createElement(Image, { source: icon, style: [{ width: 20, height: 20 }, iconStyle], tintColor: iconColor, resizeMode: "contain" })),
+        React.createElement(Text, { style: [styles.label, labelStyle] }, selectedFile ? selectedFile.name || 'Uploaded File' : label)))));
+};
+export default AppDocumentPicker;
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: Colors.borderGrey,
+        padding: 10,
+        borderRadius: 8,
+    },
+    label: {
+        fontSize: 14,
+        marginLeft: 8,
+        color: Colors.textColor,
+    },
+    fileIcon: {
+        width: 24,
+        height: 24,
+        marginRight: 8,
+    },
+});

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

@@ -0,0 +1,24 @@
+import React from 'react';
+interface AppDropDownProps {
+    intlType?: string;
+    label?: string;
+    data: Array<{
+        label: string;
+        value: string;
+    }>;
+    value: string | null;
+    onChange: (item: {
+        label: string;
+        value: string;
+    }) => void;
+    disabled?: boolean;
+    containerStyle?: any;
+    dropDownStyle?: any;
+    itemTextStyle?: any;
+    placeholderStyle?: any;
+    iconStyle?: any;
+    selectedTextStyle?: any;
+    dropdownContainerStyle?: any;
+}
+declare const DropDown: React.FC<AppDropDownProps>;
+export default DropDown;

package/dist/components/DropDown/index.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { View, StyleSheet, Dimensions } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import { Dropdown } from 'react-native-element-dropdown';
+import { Colors, Typography } from '../../styles';
+const { width } = Dimensions.get('window');
+const DropDown = ({ intlType, label, data, value, onChange, disabled = false, containerStyle, dropDownStyle, itemTextStyle, placeholderStyle, iconStyle, selectedTextStyle, dropdownContainerStyle }) => {
+    const { t } = useTranslation();
+    const placeholder = intlType && label
+        ? String(t(`${intlType}.${label}`))
+        : label || '';
+    return (React.createElement(View, { style: [styles.container, containerStyle] },
+        React.createElement(Dropdown, { iconStyle: [styles.iconstyle, iconStyle], style: [styles.dropdown, dropDownStyle, disabled && { borderColor: Colors.borderGrey }], placeholder: placeholder, data: data, value: value, labelField: "label", valueField: "value", onChange: onChange, disable: disabled, placeholderStyle: [styles.placeholderStyle, placeholderStyle], itemTextStyle: [styles.placeholderStyle, itemTextStyle], selectedTextStyle: [styles.placeholderStyle, selectedTextStyle], containerStyle: [styles.container, dropdownContainerStyle] })));
+};
+const styles = StyleSheet.create({
+    container: { width: width },
+    dropdown: {
+        borderWidth: 1,
+        borderColor: Colors.primaryColor,
+        borderRadius: 5,
+        paddingHorizontal: 10,
+        paddingVertical: 15,
+        ...Typography.style.standardU(),
+        color: Colors.textColor
+    },
+    placeholderStyle: {
+        color: Colors.textColor,
+        ...Typography.style.standardU(),
+    },
+    iconstyle: {
+        color: Colors.textColor,
+    }
+});
+export default DropDown;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const FullSpinner: ({ isVisible, backgroundVisible, }: {
+    isVisible?: boolean;
+    backgroundVisible?: boolean;
+}) => React.JSX.Element;
+export default FullSpinner;

package/dist/components/FullSpinner/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { StyleSheet, ActivityIndicator, View } from 'react-native';
+import { Colors } from '../../styles';
+const FullSpinner = ({ isVisible, backgroundVisible, }) => isVisible ? (React.createElement(View, { style: [styles.mainContainer, backgroundVisible && styles.background] },
+    React.createElement(ActivityIndicator, { size: "large", color: Colors.primaryColor }))) : null;
+export default FullSpinner;
+const styles = StyleSheet.create({
+    mainContainer: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        backgroundColor: 'transparent',
+        right: 0,
+        bottom: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+        flex: 1,
+    },
+    background: {
+        backgroundColor: Colors.background,
+    },
+});

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

@@ -0,0 +1,15 @@
+import React from 'react';
+/**
+ * A reusable horizontal progress steps component for React Native.
+ * It displays a series of circles connected by lines to represent steps.
+ * The active and completed steps have different styling.
+ *
+ * @param {Array<string>} steps - An array of strings representing the step titles.
+ * @param {number} currentStep - The index of the currently active step (0-indexed).
+ * @param {string} [activeStepColor] - Color for the active step circle. Defaults to Colors.primaryColor.
+ * @param {string} [completedStepColor] - Color for completed steps. Defaults to Colors.primaryColor.
+ * @param {string} [defaultStepColor] - Color for incomplete steps. Defaults to Colors.borderGrey.
+ * @param {number} [stepSize=30] - Diameter of the step circles.
+ */
+declare const HProgressSteps: ({ steps, currentStep, activeStepColor, completedStepColor, defaultStepColor, stepSize, }: any) => React.JSX.Element;
+export default HProgressSteps;