@finspringinnovations/fdsdk 0.0.1

package/lib/components/FormSection.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const ThemeContext_1 = require("../theme/ThemeContext");
+const FormSection = ({ title, subtitle, children, containerStyle, titleStyle, subtitleStyle, contentStyle, showDivider = false, dividerStyle, }) => {
+    const colors = (0, ThemeContext_1.useColors)();
+    const typography = (0, ThemeContext_1.useTypography)();
+    const styles = createStyles(colors, typography);
+    return (react_1.default.createElement(react_native_1.View, { style: [styles.container, containerStyle] },
+        (title || subtitle) && (react_1.default.createElement(react_native_1.View, { style: styles.header },
+            title && (react_1.default.createElement(react_native_1.Text, { style: [styles.title, titleStyle] }, title)),
+            subtitle && (react_1.default.createElement(react_native_1.Text, { style: [styles.subtitle, subtitleStyle] }, subtitle)))),
+        showDivider && (react_1.default.createElement(react_native_1.View, { style: [styles.divider, dividerStyle] })),
+        react_1.default.createElement(react_native_1.View, { style: [styles.content, contentStyle] }, children)));
+};
+const createStyles = (colors, typography) => react_native_1.StyleSheet.create({
+    container: {
+        marginBottom: 24,
+    },
+    header: {
+        marginBottom: 16,
+    },
+    title: Object.assign(Object.assign({}, typography.styles.h3), { color: colors.text, marginBottom: 4 }),
+    subtitle: Object.assign(Object.assign({}, typography.styles.bodyMedium), { color: colors.textLight, lineHeight: 20 }),
+    divider: {
+        height: 1,
+        backgroundColor: colors.border + '20',
+        marginBottom: 16,
+    },
+    content: {
+    // Content styling can be customized via contentStyle prop
+    },
+});
+exports.default = FormSection;

package/lib/components/Header.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface HeaderProps {
+    title: string;
+    onBackPress?: () => void;
+    backgroundColor?: string;
+    titleColor?: string;
+    customStyles?: {
+        container?: object;
+        title?: object;
+        backButton?: object;
+    };
+}
+declare const Header: React.FC<HeaderProps>;
+export default Header;

package/lib/components/Header.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const Ionicons_1 = __importDefault(require("react-native-vector-icons/Ionicons"));
+const ThemeContext_1 = require("../theme/ThemeContext");
+const base64Images_1 = require("../constants/strings/base64Images");
+const Header = ({ title, onBackPress, backgroundColor, titleColor, customStyles = {}, }) => {
+    const colors = (0, ThemeContext_1.useColors)();
+    const typography = (0, ThemeContext_1.useTypography)();
+    const spacing = (0, ThemeContext_1.useSpacing)();
+    const { themeName } = (0, ThemeContext_1.useTheme)();
+    const styles = createStyles(colors, typography, spacing, themeName);
+    const headerBg = colors.headerBg;
+    const textColor = titleColor || colors.headerText || colors.background;
+    const BackIcon = () => (react_1.default.createElement(Ionicons_1.default, { name: "arrow-back", size: 24, color: textColor, style: styles.backIcon }));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_native_1.View, { style: [styles.header, { backgroundColor: headerBg }, customStyles.container] },
+            react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.backButton, customStyles.backButton], onPress: onBackPress },
+                react_1.default.createElement(react_native_1.Image, { source: { uri: base64Images_1.base64Images.backArrow }, style: [styles.backIcon, { tintColor: textColor }], resizeMode: "contain", width: 24, height: 24 })),
+            react_1.default.createElement(react_native_1.Text, { style: [styles.headerTitle, { color: textColor }, customStyles.title] }, title))));
+};
+const isAndroid15OrHigher = react_native_1.Platform.OS === "android" && react_native_1.Platform.Version >= 15;
+const createStyles = (colors, typography, spacing, themeName) => react_native_1.StyleSheet.create({
+    header: {
+        height: react_native_1.Platform.OS === 'ios' ? 100 : isAndroid15OrHigher ? 80 : 70, // Set fixed height to 200px
+        paddingHorizontal: spacing.lg,
+        flexDirection: 'row',
+        alignItems: 'center', // Vertically center the content
+        justifyContent: 'flex-start', // Align content to the left
+        borderBottomWidth: themeName === 'dark' ? 1 : 0,
+        borderBottomColor: themeName === 'dark' ? colors.border : 'transparent',
+    },
+    backButton: {
+        marginTop: react_native_1.Platform.OS === 'ios' ? 30 : isAndroid15OrHigher ? 15 : 0,
+        marginRight: spacing.lg,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    backIcon: {
+        // Icon styling handled by Ionicons component
+        width: 24,
+        height: 24,
+        resizeMode: 'contain',
+        // backgroundColor: "red",
+    },
+    headerTitle: Object.assign({ marginTop: react_native_1.Platform.OS === 'ios' ? 30 : isAndroid15OrHigher ? 15 : 0 }, typography.styles.h3),
+});
+exports.default = Header;

package/lib/components/IFSCSearchResultCard.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface IFSCSearchResultCardProps {
+    bankName: string;
+    branchName: string;
+    ifscCode: string;
+    bankShortDesc?: string;
+    bankCode?: string;
+    onSelect: () => void;
+    disabled?: boolean;
+    buttonTitle?: string;
+}
+declare const IFSCSearchResultCard: React.FC<IFSCSearchResultCardProps>;
+export default IFSCSearchResultCard;

package/lib/components/IFSCSearchResultCard.js

@@ -0,0 +1,70 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const ThemeContext_1 = require("../theme/ThemeContext");
+const IFSCSearchResultCard = ({ bankName, branchName, ifscCode, bankShortDesc, bankCode, onSelect, disabled = false, buttonTitle = 'Select', }) => {
+    const colors = (0, ThemeContext_1.useColors)();
+    const typography = (0, ThemeContext_1.useTypography)();
+    const { themeName } = (0, ThemeContext_1.useTheme)();
+    const styles = createStyles(colors, typography, themeName);
+    return (react_1.default.createElement(react_native_1.View, { style: styles.resultCard },
+        react_1.default.createElement(react_native_1.View, { style: styles.resultInfo },
+            react_1.default.createElement(react_native_1.View, { style: styles.bankHeader },
+                react_1.default.createElement(react_native_1.Text, { style: styles.bankName }, bankName)),
+            react_1.default.createElement(react_native_1.Text, { style: styles.branchName }, branchName),
+            react_1.default.createElement(react_native_1.View, { style: styles.ifscContainer },
+                react_1.default.createElement(react_native_1.Text, { style: styles.ifscCode }, "IFSC:"),
+                react_1.default.createElement(react_native_1.Text, { style: styles.ifscValue }, ifscCode))),
+        react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.selectButton, onPress: onSelect, activeOpacity: 0.7, disabled: disabled },
+            react_1.default.createElement(react_native_1.Text, { style: styles.selectButtonText }, buttonTitle))));
+};
+const createStyles = (colors, typography, themeName) => react_native_1.StyleSheet.create({
+    resultCard: {
+        borderRadius: 12,
+        padding: 1,
+        marginBottom: 16,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    resultInfo: {
+        flex: 1,
+        marginRight: 12,
+    },
+    bankHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 4,
+    },
+    bankName: Object.assign(Object.assign({}, typography.styles.h3), { color: colors.text, flex: 1 }),
+    bankShortDesc: Object.assign(Object.assign({}, typography.styles.bodySmall), { color: colors.textLight, marginLeft: 8 }),
+    branchName: Object.assign(Object.assign({}, typography.styles.h3), { color: colors.text, marginBottom: 4 }),
+    ifscContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 4,
+    },
+    ifscCode: Object.assign(Object.assign({}, typography.styles.h3), { color: colors.text, marginRight: 8 }),
+    ifscValue: Object.assign(Object.assign({}, typography.styles.h3), { fontWeight: typography.fontWeight.semiBold, color: colors.text }),
+    bankCodeContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 4,
+    },
+    bankCodeLabel: Object.assign(Object.assign({}, typography.styles.bodySmall), { color: colors.textLight, marginRight: 8 }),
+    bankCodeValue: Object.assign(Object.assign({}, typography.styles.bodySmall), { fontWeight: typography.fontWeight.medium, color: colors.text }),
+    selectButton: {
+        backgroundColor: themeName === 'dark' ? colors.buttonBackground : colors.headerBg,
+        paddingHorizontal: 24,
+        paddingVertical: 10,
+        borderRadius: themeName === 'dark' ? 5 : 25,
+        minWidth: 80,
+        alignItems: 'center',
+    },
+    selectButtonText: Object.assign(Object.assign({ color: themeName === 'dark' ? colors.buttonTextColor : 'white' }, typography.styles.bodyMedium), { fontWeight: typography.fontWeight.semiBold }),
+});
+exports.default = IFSCSearchResultCard;

package/lib/components/InfoBox.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface InfoBoxProps {
+    message: string;
+    containerStyle?: any;
+    showNonStockIcon?: boolean;
+}
+declare const InfoBox: React.FC<InfoBoxProps>;
+export default InfoBox;

package/lib/components/InfoBox.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const Ionicons_1 = __importDefault(require("react-native-vector-icons/Ionicons"));
+const base64Images_1 = require("../constants/strings/base64Images");
+const ThemeContext_1 = require("../theme/ThemeContext");
+const InfoBox = ({ message, containerStyle, showNonStockIcon = false }) => {
+    const colors = (0, ThemeContext_1.useColors)();
+    const typography = (0, ThemeContext_1.useTypography)();
+    const { themeName } = (0, ThemeContext_1.useTheme)();
+    const styles = createStyles(colors, typography);
+    return (react_1.default.createElement(react_native_1.View, { style: [styles.container, containerStyle] },
+        showNonStockIcon ? (react_1.default.createElement(react_native_1.Image, { source: { uri: themeName === 'dark' ? base64Images_1.base64Images.stockDark : base64Images_1.base64Images.nonStock }, style: styles.imageIcon, resizeMode: "contain" })) : (react_1.default.createElement(Ionicons_1.default, { name: "information-circle", size: 16, color: colors.success, style: styles.icon })),
+        react_1.default.createElement(react_native_1.Text, { style: styles.text }, message)));
+};
+const createStyles = (colors, typography) => react_native_1.StyleSheet.create({
+    container: {
+        backgroundColor: 'rgba(0,235,180,0.1)',
+        padding: 12,
+        borderRadius: 8,
+        marginTop: 16,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    icon: {
+        marginRight: 8,
+    },
+    imageIcon: {
+        width: 16,
+        height: 16,
+        marginRight: 8,
+    },
+    text: Object.assign(Object.assign({}, typography.styles.bodyMedium), { color: colors.textLight, flex: 1 }),
+});
+exports.default = InfoBox;

package/lib/components/InterestRateCard.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface InterestRateCardProps {
+    interestRate: string;
+    maturityAmount: string;
+    children?: React.ReactNode;
+}
+declare const InterestRateCard: React.FC<InterestRateCardProps>;
+export default InterestRateCard;

package/lib/components/InterestRateCard.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const ThemeContext_1 = require("../theme/ThemeContext");
+const InterestRateCard = ({ interestRate, maturityAmount, children, }) => {
+    const colors = (0, ThemeContext_1.useColors)();
+    const typography = (0, ThemeContext_1.useTypography)();
+    const { themeName } = (0, ThemeContext_1.useTheme)();
+    const styles = createStyles(colors, typography, themeName);
+    return (react_1.default.createElement(react_native_1.View, { style: styles.card },
+        react_1.default.createElement(react_native_1.View, { style: styles.row },
+            react_1.default.createElement(react_native_1.View, { style: styles.left },
+                react_1.default.createElement(react_native_1.Text, { style: styles.label }, "Interest Rate"),
+                react_1.default.createElement(react_native_1.Text, { style: styles.value }, interestRate)),
+            react_1.default.createElement(react_native_1.View, { style: styles.right },
+                react_1.default.createElement(react_native_1.Text, { style: styles.label }, "On Maturity"),
+                react_1.default.createElement(react_native_1.Text, { style: styles.valueRight }, maturityAmount))),
+        children));
+};
+const createStyles = (colors, typography, themeName) => react_native_1.StyleSheet.create({
+    card: {
+        backgroundColor: themeName === 'dark' ? colors.inputBackground : 'rgba(0,235,180,0.1)',
+        padding: 16,
+        borderRadius: 4,
+        marginTop: 25,
+    },
+    row: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
+    left: {
+        flex: 1,
+    },
+    right: {
+        flex: 1,
+        alignItems: 'flex-end',
+    },
+    label: Object.assign(Object.assign({}, typography.styles.bodySmall), { color: themeName === 'dark' ? colors.labelColor : colors.textLight, marginBottom: 4 }),
+    value: Object.assign(Object.assign({}, typography.styles.bodyLarge), { fontWeight: '600', color: colors.text }),
+    valueRight: Object.assign(Object.assign({}, typography.styles.bodyLarge), { fontWeight: '700', color: colors.text }),
+});
+exports.default = InterestRateCard;

package/lib/components/LoadingIndicator.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface LoadingIndicatorProps {
+    message?: string;
+    size?: 'small' | 'large';
+    color?: string;
+    containerStyle?: object;
+    messageStyle?: object;
+    showMessage?: boolean;
+    overlay?: boolean;
+}
+declare const LoadingIndicator: React.FC<LoadingIndicatorProps>;
+export default LoadingIndicator;

package/lib/components/LoadingIndicator.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const ThemeContext_1 = require("../theme/ThemeContext");
+const LoadingIndicator = ({ message = 'Loading...', size = 'large', color, containerStyle, messageStyle, showMessage = true, overlay = false, }) => {
+    const colors = (0, ThemeContext_1.useColors)();
+    const typography = (0, ThemeContext_1.useTypography)();
+    const styles = createStyles(colors, typography, overlay);
+    const indicatorColor = color || colors.primary;
+    return (react_1.default.createElement(react_native_1.View, { style: [styles.container, containerStyle] },
+        react_1.default.createElement(react_native_1.ActivityIndicator, { size: size, color: indicatorColor }),
+        showMessage && message && (react_1.default.createElement(react_native_1.Text, { style: [styles.message, messageStyle] }, message))));
+};
+const createStyles = (colors, typography, overlay) => react_native_1.StyleSheet.create({
+    container: Object.assign({ alignItems: 'center', justifyContent: 'center', padding: 20 }, (overlay && {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(255, 255, 255, 0.9)',
+        zIndex: 1000,
+    })),
+    message: Object.assign(Object.assign({}, typography.styles.bodyMedium), { color: colors.textLight, marginTop: 12, textAlign: 'center' }),
+});
+exports.default = LoadingIndicator;

package/lib/components/OTPInput.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface OTPInputProps {
+    length?: number;
+    value: string[];
+    onChangeText: (value: string, index: number) => void;
+    onKeyPress?: (key: string, index: number) => void;
+    instruction?: string;
+    sessionTime?: number;
+    onResend?: () => void;
+    isResendEnabled?: boolean;
+    autoFocus?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    disabled?: boolean;
+}
+declare const OTPInput: React.FC<OTPInputProps>;
+export default OTPInput;

package/lib/components/OTPInput.js

@@ -0,0 +1,144 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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 ThemeContext_1 = require("../theme/ThemeContext");
+const OTPInput = ({ length = 6, value, onChangeText, onKeyPress, instruction = "Enter the 6-digit OTP that sent to your registered Aadhaar number", sessionTime, onResend, isResendEnabled = false, autoFocus = true, error = false, errorMessage, disabled = false, }) => {
+    const colors = (0, ThemeContext_1.useColors)();
+    const typography = (0, ThemeContext_1.useTypography)();
+    const { themeName } = (0, ThemeContext_1.useTheme)();
+    const styles = createStyles(colors, typography, themeName);
+    const inputRefs = (0, react_1.useRef)([]);
+    const [resendCountdown, setResendCountdown] = react_1.default.useState(60);
+    const [showTimerText, setShowTimerText] = react_1.default.useState(true);
+    (0, react_1.useEffect)(() => {
+        if (autoFocus && inputRefs.current[0]) {
+            inputRefs.current[0].focus();
+        }
+    }, [autoFocus]);
+    // Start countdown timer for resend OTP
+    (0, react_1.useEffect)(() => {
+        if (resendCountdown <= 0)
+            return;
+        const timer = setInterval(() => {
+            setResendCountdown((prev) => (prev > 0 ? prev - 1 : 0));
+        }, 1000);
+        return () => clearInterval(timer);
+    }, [resendCountdown]);
+    // Handle resend button press
+    const handleResendPress = () => {
+        if (onResend && isResendEnabled) {
+            // Call the resend function - parent will handle timer state
+            onResend();
+        }
+    };
+    const formatResendTime = (seconds) => {
+        const mm = Math.floor(seconds / 60).toString().padStart(2, '0');
+        const ss = (seconds % 60).toString().padStart(2, '0');
+        return `${mm}:${ss}`;
+    };
+    const handleChangeText = (text, index) => {
+        var _a;
+        onChangeText(text, index);
+        // Auto-focus next field
+        if (text && index < length - 1) {
+            (_a = inputRefs.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    const handleKeyPress = (key, index) => {
+        var _a;
+        if (onKeyPress) {
+            onKeyPress(key, index);
+        }
+        // Auto-focus previous field on backspace
+        if (key === 'Backspace' && !value[index] && index > 0) {
+            (_a = inputRefs.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    return (react_1.default.createElement(react_native_1.View, null,
+        react_1.default.createElement(react_native_1.Text, { style: styles.instruction }, instruction),
+        react_1.default.createElement(react_native_1.View, { style: styles.otpContainer }, Array.from({ length }, (_, index) => (react_1.default.createElement(react_native_1.TextInput, { key: index, ref: (ref) => {
+                if (ref)
+                    inputRefs.current[index] = ref;
+            }, style: [
+                styles.otpInput,
+                error && styles.otpInputError,
+                disabled && styles.otpInputDisabled
+            ], value: value[index] || '', onChangeText: (text) => handleChangeText(text, index), onKeyPress: ({ nativeEvent }) => handleKeyPress(nativeEvent.key, index), keyboardType: "numeric", maxLength: 1, textAlign: "center", editable: !disabled })))),
+        (sessionTime || 0) > 0 && !isResendEnabled && (react_1.default.createElement(react_native_1.Text, { style: styles.sessionText },
+            "Resend OTP in ",
+            formatResendTime(sessionTime || 0))),
+        onResend && isResendEnabled && (react_1.default.createElement(react_native_1.View, { style: styles.resendContainer },
+            react_1.default.createElement(react_native_1.Text, { style: styles.resendText }, "Didn't receive any code? "),
+            react_1.default.createElement(react_native_1.TouchableOpacity, { onPress: handleResendPress, disabled: !isResendEnabled },
+                react_1.default.createElement(react_native_1.Text, { style: [
+                        styles.resendLink,
+                        !isResendEnabled && styles.resendLinkDisabled,
+                    ] }, "Resend code"))))));
+};
+const createStyles = (colors, typography, themeName) => react_native_1.StyleSheet.create({
+    instruction: Object.assign(Object.assign({}, typography.styles.bodySmall), { paddingHorizontal: 40, color: colors.textLight, marginBottom: 24, marginTop: 24, lineHeight: 16, textAlign: 'center' }),
+    otpContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        marginBottom: 16,
+        gap: 8,
+    },
+    otpInput: Object.assign(Object.assign({ width: 48, height: 48, borderWidth: 1, borderColor: themeName === 'dark' ? colors.inputBorder : colors.primary, borderRadius: 8 }, typography.styles.bodyLarge), { color: colors.text, backgroundColor: themeName === 'dark' ? colors.inputBackground : 'white' }),
+    otpInputError: {
+        borderColor: colors.error,
+        borderWidth: 2,
+    },
+    otpInputDisabled: {
+        backgroundColor: colors.backgroundLight,
+        borderColor: colors.border,
+        opacity: 0.6,
+    },
+    errorText: Object.assign(Object.assign({}, typography.styles.bodySmall), { color: colors.error, textAlign: 'center', marginTop: 8, marginBottom: 8 }),
+    sessionText: Object.assign(Object.assign({}, typography.styles.bodySmall), { color: colors.textLight, marginBottom: 3, marginTop: 5, textAlign: 'center' }),
+    resendContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 10,
+        justifyContent: 'center',
+    },
+    resendText: Object.assign(Object.assign({}, typography.styles.bodySmall), { color: colors.textLight }),
+    resendLink: Object.assign(Object.assign({}, typography.styles.bodySmall), { color: colors.primary, fontWeight: '500', textDecorationLine: 'underline' }),
+    resendLinkDisabled: {
+        color: colors.textLight,
+    },
+});
+exports.default = OTPInput;

package/lib/components/PaymentDetailsCard.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface PaymentDetailsCardProps {
+    companyName: string;
+    amount: number;
+    fdRate: string;
+    tenure: string;
+    interestPayout: string;
+    showCompanyLine?: boolean;
+    customStyles?: {
+        card?: object;
+        companyName?: object;
+        companyLine?: object;
+        detailsContainer?: object;
+        detailRow?: object;
+        detailLabel?: object;
+        detailValue?: object;
+    };
+}
+declare const PaymentDetailsCard: React.FC<PaymentDetailsCardProps>;
+export default PaymentDetailsCard;

package/lib/components/PaymentDetailsCard.js

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const ThemeContext_1 = require("../theme/ThemeContext");
+const PaymentDetailsCard = ({ companyName, amount, fdRate, tenure, interestPayout, showCompanyLine = true, customStyles = {}, }) => {
+    const colors = (0, ThemeContext_1.useColors)();
+    const typography = (0, ThemeContext_1.useTypography)();
+    const { themeName } = (0, ThemeContext_1.useTheme)();
+    const styles = createStyles(colors, typography, themeName);
+    const formatAmount = (amount) => {
+        return amount.toLocaleString('en-IN');
+    };
+    return (react_1.default.createElement(react_native_1.View, { style: [styles.card, customStyles.card] },
+        react_1.default.createElement(react_native_1.Text, { style: [styles.companyName, customStyles.companyName] }, companyName),
+        showCompanyLine && (react_1.default.createElement(react_native_1.View, { style: [styles.companyLine, customStyles.companyLine] })),
+        react_1.default.createElement(react_native_1.View, { style: [styles.detailsContainer, customStyles.detailsContainer] },
+            react_1.default.createElement(react_native_1.View, { style: [styles.detailRow, customStyles.detailRow] },
+                react_1.default.createElement(react_native_1.Text, { style: [styles.detailLabel, customStyles.detailLabel] }, "Amount"),
+                react_1.default.createElement(react_native_1.Text, { style: [styles.detailValue, customStyles.detailValue] },
+                    "\u20B9 ",
+                    formatAmount(amount))),
+            react_1.default.createElement(react_native_1.View, { style: [styles.detailRow, customStyles.detailRow] },
+                react_1.default.createElement(react_native_1.Text, { style: [styles.detailLabel, customStyles.detailLabel] }, "FD Rate"),
+                react_1.default.createElement(react_native_1.Text, { style: [styles.detailValue, customStyles.detailValue] }, fdRate)),
+            react_1.default.createElement(react_native_1.View, { style: [styles.detailRow, customStyles.detailRow] },
+                react_1.default.createElement(react_native_1.Text, { style: [styles.detailLabel, customStyles.detailLabel] }, "Tenure"),
+                react_1.default.createElement(react_native_1.Text, { style: [styles.detailValue, customStyles.detailValue] }, tenure)),
+            react_1.default.createElement(react_native_1.View, { style: [styles.detailRow, customStyles.detailRow] },
+                react_1.default.createElement(react_native_1.Text, { style: [styles.detailLabel, customStyles.detailLabel] }, "Interest Payout"),
+                react_1.default.createElement(react_native_1.Text, { style: [styles.detailValue, customStyles.detailValue] }, interestPayout)))));
+};
+const createStyles = (colors, typography, themeName) => {
+    var _a, _b, _c, _d;
+    return react_native_1.StyleSheet.create({
+        card: {
+            backgroundColor: themeName === 'dark' ? '#0B2940' : '#0B2940',
+            borderRadius: 16,
+            padding: 20,
+            alignItems: 'flex-start',
+            marginHorizontal: 16,
+            borderWidth: 1,
+            borderColor: '#1F4C73',
+        },
+        companyName: Object.assign(Object.assign({}, typography.styles.h3), { color: '#FFFFFF', marginBottom: 12 }),
+        companyLine: {
+            height: 1,
+            backgroundColor: '#1F4C73',
+            marginBottom: 12,
+            width: '100%',
+        },
+        detailsContainer: {
+            width: '100%',
+        },
+        detailRow: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            paddingVertical: 8,
+        },
+        detailLabel: Object.assign(Object.assign({}, typography.styles.text12Regular), { color: '#BFD5F6' }),
+        detailValue: Object.assign(Object.assign({}, typography.styles.text14Medium), { color: '#FFFFFF', lineHeight: ((_d = (_b = (_a = typography.styles.text14Medium) === null || _a === void 0 ? void 0 : _a.lineHeight) !== null && _b !== void 0 ? _b : (_c = typography.styles.text14Medium) === null || _c === void 0 ? void 0 : _c.fontSize) !== null && _d !== void 0 ? _d : 14) + 3 }),
+    });
+};
+exports.default = PaymentDetailsCard;

package/lib/components/PendingFDBottomSheet.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+interface PendingFDData {
+    name: string;
+    invested: number;
+    value: number;
+    returns: number;
+    maturityDate: string;
+}
+export interface PendingFDBottomSheetProps {
+    visible: boolean;
+    onClose: () => void;
+    onContinue: () => void;
+    onBookNew: () => void;
+    pendingFDData?: PendingFDData;
+    isBookingNewLoading?: boolean;
+}
+declare const PendingFDBottomSheet: React.FC<PendingFDBottomSheetProps>;
+export default PendingFDBottomSheet;