@finspringinnovations/fdsdk 0.0.1

package/lib/components/CompanyHeader.js

@@ -0,0 +1,57 @@
+"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 base64Images_1 = require("../constants/strings/base64Images");
+const CompanyHeader = ({ companyName, rating }) => {
+    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.wrapper },
+        react_1.default.createElement(react_native_1.View, { style: styles.card },
+            react_1.default.createElement(react_native_1.View, { style: styles.innerBorder },
+                react_1.default.createElement(react_native_1.Image, { source: { uri: base64Images_1.base64Images.shriramLogo }, style: styles.logo, resizeMode: "contain" }),
+                react_1.default.createElement(react_native_1.View, { style: styles.info },
+                    react_1.default.createElement(react_native_1.Text, { style: styles.name }, companyName),
+                    react_1.default.createElement(react_native_1.Text, { style: styles.rating }, rating))))));
+};
+const createStyles = (colors, typography) => react_native_1.StyleSheet.create({
+    wrapper: {
+        paddingHorizontal: 2,
+        paddingTop: 12,
+        paddingBottom: 8,
+    },
+    card: {
+        backgroundColor: '#0B2940',
+        borderRadius: 24,
+        padding: 4,
+        borderWidth: 1,
+        borderColor: '#124061',
+        shadowColor: '#000',
+        shadowOpacity: 0.2,
+        shadowOffset: { width: 0, height: 4 },
+        shadowRadius: 12,
+        elevation: 4,
+    },
+    innerBorder: {
+        borderRadius: 20,
+        padding: 16,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    logo: {
+        width: 45,
+        height: 45,
+        marginRight: 12,
+    },
+    info: {
+        flex: 1,
+    },
+    name: Object.assign(Object.assign({}, typography.styles.h2), { color: '#FFFFFF', marginBottom: 6 }),
+    rating: Object.assign(Object.assign({}, typography.styles.text14Medium), { color: '#BFD5F6' }),
+});
+exports.default = CompanyHeader;

package/lib/components/DropdownSelector.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface DropdownSelectorProps {
+    label: string;
+    value: string;
+    onPress?: () => void;
+    placeholder?: string;
+}
+declare const DropdownSelector: React.FC<DropdownSelectorProps>;
+export default DropdownSelector;

package/lib/components/DropdownSelector.js

@@ -0,0 +1,49 @@
+"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 base64Images_1 = require("../constants/strings/base64Images");
+const ThemeContext_1 = require("../theme/ThemeContext");
+const theme_1 = require("../theme");
+const DropdownSelector = ({ label, value, onPress, placeholder, }) => {
+    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_1.default.Fragment, null,
+        react_1.default.createElement(react_native_1.Text, { style: styles.label }, label),
+        react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.dropdown, onPress: onPress },
+            react_1.default.createElement(react_native_1.Text, { style: [styles.dropdownText, !value && styles.placeholderText] }, value || placeholder || 'Select'),
+            react_1.default.createElement(react_native_1.Image, { source: { uri: base64Images_1.base64Images.dropdown }, style: styles.icon, resizeMode: "contain" }))));
+};
+const createStyles = (colors, typography, themeName) => react_native_1.StyleSheet.create({
+    label: Object.assign(Object.assign({}, typography.styles.bodyMedium), { fontWeight: '600', marginTop: 25, marginBottom: 8, fontSize: 16, color: themeName === 'dark' ? colors.labelColor : colors.text }),
+    dropdown: {
+        borderWidth: 0.5,
+        borderColor: themeName === 'dark' ? colors.inputBorder : (0, theme_1.getBorderColor)({ colors }, 0.36),
+        borderRadius: 4,
+        paddingHorizontal: 16,
+        height: 48,
+        marginTop: 8,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        backgroundColor: themeName === 'dark' ? colors.inputBackground : colors.surface,
+    },
+    dropdownText: {
+        fontSize: 14,
+        color: colors.text,
+    },
+    placeholderText: {
+        color: colors.placeholderColor,
+    },
+    icon: {
+        width: 20,
+        height: 20,
+        tintColor: colors.textLight,
+    },
+});
+exports.default = DropdownSelector;

package/lib/components/EmptyState.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface EmptyStateProps {
+    iconName?: string;
+    title: string;
+    subtitle?: string;
+    actionText?: string;
+    onAction?: () => void;
+    containerStyle?: object;
+    iconStyle?: object;
+    titleStyle?: object;
+    subtitleStyle?: object;
+    actionButtonStyle?: object;
+    actionTextStyle?: object;
+    showAction?: boolean;
+}
+declare const EmptyState: React.FC<EmptyStateProps>;
+export default EmptyState;

package/lib/components/EmptyState.js

@@ -0,0 +1,44 @@
+"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 EmptyState = ({ iconName = 'document-outline', title, subtitle, actionText = 'Get Started', onAction, containerStyle, iconStyle, titleStyle, subtitleStyle, actionButtonStyle, actionTextStyle, showAction = true, }) => {
+    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] },
+        react_1.default.createElement(Ionicons_1.default, { name: iconName, size: 64, color: colors.textLight, style: [styles.icon, iconStyle] }),
+        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)),
+        showAction && onAction && (react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.actionButton, actionButtonStyle], onPress: onAction },
+            react_1.default.createElement(react_native_1.Text, { style: [styles.actionText, actionTextStyle] }, actionText)))));
+};
+const createStyles = (colors, typography) => react_native_1.StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 32,
+        minHeight: 200,
+    },
+    icon: {
+        marginBottom: 16,
+        opacity: 0.6,
+    },
+    title: Object.assign(Object.assign({}, typography.styles.h3), { color: colors.text, textAlign: 'center', marginBottom: 8 }),
+    subtitle: Object.assign(Object.assign({}, typography.styles.bodyMedium), { color: colors.textLight, textAlign: 'center', lineHeight: 20, marginBottom: 24 }),
+    actionButton: {
+        backgroundColor: colors.primary,
+        paddingHorizontal: 24,
+        paddingVertical: 12,
+        borderRadius: 25,
+        minWidth: 120,
+        alignItems: 'center',
+    },
+    actionText: Object.assign(Object.assign({}, typography.styles.bodyMedium), { color: colors.background, fontWeight: typography.fontWeight.semiBold }),
+});
+exports.default = EmptyState;

package/lib/components/ErrorDisplay.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface ErrorDisplayProps {
+    title?: string;
+    message: string;
+    onRetry?: () => void;
+    retryText?: string;
+    showIcon?: boolean;
+    iconName?: string;
+    containerStyle?: object;
+    titleStyle?: object;
+    messageStyle?: object;
+    retryButtonStyle?: object;
+    retryTextStyle?: object;
+    variant?: 'error' | 'warning' | 'info';
+}
+declare const ErrorDisplay: React.FC<ErrorDisplayProps>;
+export default ErrorDisplay;

package/lib/components/ErrorDisplay.js

@@ -0,0 +1,69 @@
+"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 ErrorDisplay = ({ title = 'Something went wrong', message, onRetry, retryText = 'Try Again', showIcon = true, iconName, containerStyle, titleStyle, messageStyle, retryButtonStyle, retryTextStyle, variant = 'error', }) => {
+    const colors = (0, ThemeContext_1.useColors)();
+    const typography = (0, ThemeContext_1.useTypography)();
+    const styles = createStyles(colors, typography, variant);
+    const getIconName = () => {
+        if (iconName)
+            return iconName;
+        switch (variant) {
+            case 'error':
+                return 'alert-circle';
+            case 'warning':
+                return 'warning';
+            case 'info':
+                return 'information-circle';
+            default:
+                return 'alert-circle';
+        }
+    };
+    const getIconColor = () => {
+        switch (variant) {
+            case 'error':
+                return colors.error;
+            case 'warning':
+                return colors.warning;
+            case 'info':
+                return colors.info;
+            default:
+                return colors.error;
+        }
+    };
+    return (react_1.default.createElement(react_native_1.View, { style: [styles.container, containerStyle] },
+        showIcon && (react_1.default.createElement(Ionicons_1.default, { name: getIconName(), size: 48, color: getIconColor(), style: styles.icon })),
+        react_1.default.createElement(react_native_1.Text, { style: [styles.title, titleStyle] }, title),
+        react_1.default.createElement(react_native_1.Text, { style: [styles.message, messageStyle] }, message),
+        onRetry && (react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.retryButton, retryButtonStyle], onPress: onRetry },
+            react_1.default.createElement(react_native_1.Text, { style: [styles.retryText, retryTextStyle] }, retryText)))));
+};
+const createStyles = (colors, typography, variant) => react_native_1.StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 24,
+        minHeight: 200,
+    },
+    icon: {
+        marginBottom: 16,
+    },
+    title: Object.assign(Object.assign({}, typography.styles.h3), { color: colors.text, textAlign: 'center', marginBottom: 8 }),
+    message: Object.assign(Object.assign({}, typography.styles.bodyMedium), { color: colors.textLight, textAlign: 'center', lineHeight: 20, marginBottom: 24 }),
+    retryButton: {
+        backgroundColor: colors.primary,
+        paddingHorizontal: 24,
+        paddingVertical: 12,
+        borderRadius: 25,
+        minWidth: 120,
+        alignItems: 'center',
+    },
+    retryText: Object.assign(Object.assign({}, typography.styles.bodyMedium), { color: colors.background, fontWeight: typography.fontWeight.semiBold }),
+});
+exports.default = ErrorDisplay;

package/lib/components/FAQItem.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface FAQItemProps {
+    question: string;
+    answer: string;
+    isExpanded: boolean;
+    onToggle: () => void;
+}
+declare const FAQItem: React.FC<FAQItemProps>;
+export default FAQItem;

package/lib/components/FAQItem.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 base64Images_1 = require("../constants/strings/base64Images");
+const ThemeContext_1 = require("../theme/ThemeContext");
+const theme_1 = require("../theme");
+const FAQItem = ({ question, answer, isExpanded, onToggle, }) => {
+    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 },
+        react_1.default.createElement(react_native_1.View, { style: styles.headerRow },
+            react_1.default.createElement(react_native_1.View, { style: { flex: 1 } },
+                react_1.default.createElement(react_native_1.Text, { style: styles.question }, question)),
+            react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.toggleButton, onPress: onToggle, hitSlop: { top: 8, bottom: 8, left: 8, right: 8 } },
+                react_1.default.createElement(react_native_1.View, { style: styles.toggleCircle },
+                    react_1.default.createElement(react_native_1.Image, { source: { uri: isExpanded ? base64Images_1.base64Images.minus : base64Images_1.base64Images.plus }, style: { width: 16, height: 16, tintColor: colors.success }, resizeMode: "contain" })))),
+        isExpanded && react_1.default.createElement(react_native_1.Text, { style: styles.answer }, answer)));
+};
+const createStyles = (colors, typography) => react_native_1.StyleSheet.create({
+    container: {
+        borderBottomWidth: 1,
+        borderBottomColor: (0, theme_1.getBorderColor)({ colors }, 0.2),
+        paddingVertical: 16,
+    },
+    headerRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    question: Object.assign(Object.assign({}, typography.styles.bodyMedium), { flex: 1, marginRight: 8, color: colors.text, lineHeight: 20 }),
+    answer: Object.assign(Object.assign({}, typography.styles.bodySmall), { color: colors.textLight, marginTop: 8, lineHeight: 20 }),
+    toggleButton: {
+        marginLeft: 12,
+        alignSelf: 'center',
+    },
+    toggleCircle: {
+        width: 20,
+        height: 20,
+        //   borderRadius: 14,
+        //   backgroundColor: colors.background,
+        // borderWidth: 1.5,
+        borderColor: colors.success,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+exports.default = FAQItem;

package/lib/components/FDCard.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+interface FDCardProps {
+    id: string;
+    name: string;
+    accountNumber: string;
+    roi: string;
+    tenure: string;
+    amount: number;
+    maturityDate: string;
+    status: 'active' | 'matured' | 'pending';
+    creditRating: string;
+    onPress?: (id: string) => void;
+    customStyles?: {
+        container?: object;
+        name?: object;
+        amount?: object;
+        statusBadge?: object;
+    };
+}
+declare const FDCard: React.FC<FDCardProps>;
+export default FDCard;

package/lib/components/FDCard.js

@@ -0,0 +1,96 @@
+"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 theme_1 = require("../theme");
+const FDCard = ({ id, name, accountNumber, roi, tenure, amount, maturityDate, status, creditRating, onPress, customStyles = {}, }) => {
+    const colors = (0, ThemeContext_1.useColors)();
+    const typography = (0, ThemeContext_1.useTypography)();
+    const spacing = (0, ThemeContext_1.useSpacing)();
+    const shadows = (0, ThemeContext_1.useShadows)();
+    const { themeName } = (0, ThemeContext_1.useTheme)();
+    const styles = createStyles(colors, typography, spacing, shadows, themeName);
+    const getStatusColor = (status) => {
+        switch (status) {
+            case 'active':
+                return colors.success;
+            case 'matured':
+                return colors.tabSelected;
+            case 'pending':
+                return colors.warning;
+            default:
+                return colors.textSecondary;
+        }
+    };
+    const formatCurrency = (amount) => {
+        return amount.toLocaleString('en-IN');
+    };
+    return (react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.fdCard, customStyles.container], onPress: () => onPress === null || onPress === void 0 ? void 0 : onPress(id), activeOpacity: 0.8 },
+        react_1.default.createElement(react_native_1.View, { style: styles.fdCardHeader },
+            react_1.default.createElement(react_native_1.Text, { style: [styles.fdName, customStyles.name] }, name)),
+        react_1.default.createElement(react_native_1.View, { style: styles.fdDetailsRow },
+            react_1.default.createElement(react_native_1.View, { style: styles.fdDetailItem },
+                react_1.default.createElement(react_native_1.Text, { style: styles.fdDetailLabel }, "ROI"),
+                react_1.default.createElement(react_native_1.Text, { style: [styles.fdDetailValue, styles.roiText] }, roi)),
+            react_1.default.createElement(react_native_1.View, { style: styles.fdDetailItem },
+                react_1.default.createElement(react_native_1.Text, { style: [styles.fdDetailLabel, { textAlign: 'right' }] }, "Tenure"),
+                react_1.default.createElement(react_native_1.Text, { style: [styles.fdDetailValue, { textAlign: 'right' }] }, tenure))),
+        react_1.default.createElement(react_native_1.View, { style: styles.fdDetailsRowLast },
+            react_1.default.createElement(react_native_1.View, { style: styles.fdDetailItem },
+                react_1.default.createElement(react_native_1.Text, { style: styles.fdDetailLabel }, "Credit Rating"),
+                react_1.default.createElement(react_native_1.Text, { style: styles.fdDetailValue }, creditRating)),
+            react_1.default.createElement(react_native_1.View, { style: [styles.fdDetailItem] },
+                react_1.default.createElement(react_native_1.Text, { style: [styles.fdDetailLabel, { textAlign: 'right' }] }, "Min. Deposit"),
+                react_1.default.createElement(react_native_1.Text, { style: [styles.fdDetailValue, { textAlign: 'right' }] }, "\u20B9 5000")))));
+};
+const createStyles = (colors, typography, spacing, shadows, themeName) => {
+    var _a, _b, _c, _d, _e, _f;
+    return react_native_1.StyleSheet.create({
+        fdCard: {
+            backgroundColor: colors.surface,
+            borderRadius: 4,
+            paddingVertical: react_native_1.Platform.OS === 'ios' ? spacing.md + 2 : spacing.md,
+            paddingHorizontal: spacing.md,
+            marginBottom: spacing.lg,
+            borderWidth: themeName === 'dark' ? 1 : 0.5,
+            borderColor: themeName === 'dark' ? colors.border : (0, theme_1.getBorderColor)({ colors }, 0.36),
+            shadowColor: '#000000',
+            shadowOffset: {
+                width: 0,
+                height: 2,
+            },
+            shadowOpacity: 0.1,
+            shadowRadius: 4,
+            elevation: 3,
+        },
+        fdCardHeader: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginBottom: spacing.sm,
+        },
+        fdName: Object.assign(Object.assign({}, typography.styles.text14Medium), { color: colors.text, flex: 1, lineHeight: ((_b = (_a = typography.styles.text14Medium.lineHeight) !== null && _a !== void 0 ? _a : typography.styles.text14Medium.fontSize) !== null && _b !== void 0 ? _b : 14) + 2 }),
+        fdDetailsRow: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            marginBottom: spacing.sm,
+        },
+        fdDetailsRowLast: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+        },
+        fdDetailItem: {
+            flex: 1,
+        },
+        fdDetailLabel: Object.assign(Object.assign({}, typography.styles.text11Regular), { color: colors.textSecondary, marginBottom: spacing.xs, lineHeight: ((_d = (_c = typography.styles.text12Medium.lineHeight) !== null && _c !== void 0 ? _c : typography.styles.text12Medium.fontSize) !== null && _d !== void 0 ? _d : 12) + 3 }),
+        fdDetailValue: Object.assign(Object.assign({}, typography.styles.text14Medium), { color: colors.text, lineHeight: ((_f = (_e = typography.styles.text12Medium.lineHeight) !== null && _e !== void 0 ? _e : typography.styles.text12Medium.fontSize) !== null && _f !== void 0 ? _f : 12) + 3 }),
+        roiText: {
+            color: colors.success,
+        },
+    });
+};
+exports.default = FDCard;

package/lib/components/FormDropdown.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface FormDropdownProps {
+    label: string;
+    value: string;
+    options: string[];
+    onSelect: (value: string) => void;
+    placeholder?: string;
+    editable?: boolean;
+    required?: boolean;
+    error?: string;
+    containerStyle?: object;
+    dropdownStyle?: object;
+    labelStyle?: object;
+    optionStyle?: object;
+    testID?: string;
+}
+declare const FormDropdown: React.FC<FormDropdownProps>;
+export default FormDropdown;

package/lib/components/FormDropdown.js

@@ -0,0 +1,155 @@
+"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 FormDropdown = ({ label, value, options, onSelect, placeholder, editable = true, required = false, error, containerStyle, dropdownStyle, labelStyle, optionStyle, testID, }) => {
+    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 [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const handleToggle = () => {
+        if (editable) {
+            setIsOpen(prev => !prev);
+        }
+    };
+    const handleSelect = (option) => {
+        onSelect(option);
+        setIsOpen(false);
+    };
+    const getDisplayValue = () => {
+        if (value)
+            return value;
+        return placeholder || `Select ${label}`;
+    };
+    return (react_1.default.createElement(react_native_1.View, { style: [styles.container, containerStyle] },
+        react_1.default.createElement(react_native_1.Text, { style: [styles.label, labelStyle] },
+            label,
+            required && react_1.default.createElement(react_native_1.Text, { style: styles.requiredIndicator }, " *")),
+        react_1.default.createElement(react_native_1.TouchableOpacity, { style: [
+                styles.dropdown,
+                !editable && styles.disabledDropdown,
+                error ? styles.errorDropdown : null, // fix
+                dropdownStyle,
+            ], onPress: handleToggle, disabled: !editable, testID: testID },
+            react_1.default.createElement(react_native_1.Text, { style: [
+                    styles.dropdownText,
+                    !value && styles.placeholderText,
+                    !editable && styles.disabledText,
+                ] }, getDisplayValue()),
+            react_1.default.createElement(react_native_1.Text, { style: [styles.arrow, !editable && styles.disabledText] }, isOpen ? '▲' : '▼')),
+        error && react_1.default.createElement(react_native_1.Text, { style: styles.errorText }, error),
+        isOpen && editable && (react_1.default.createElement(react_native_1.View, { style: styles.optionsContainer }, options.map((option, index) => (react_1.default.createElement(react_native_1.TouchableOpacity, { key: index, style: [
+                styles.option,
+                option === value && styles.selectedOption,
+                optionStyle,
+            ], onPress: () => handleSelect(option) },
+            react_1.default.createElement(react_native_1.Text, { style: [
+                    styles.optionText,
+                    option === value && styles.selectedOptionText,
+                ] }, option))))))));
+};
+const createStyles = (colors, typography, themeName) => react_native_1.StyleSheet.create({
+    container: {
+        marginBottom: 20,
+    },
+    label: Object.assign(Object.assign({}, typography.styles.bodySmall), { color: colors.textLight, marginBottom: 8 }),
+    requiredIndicator: {
+        color: colors.error,
+    },
+    dropdown: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        backgroundColor: colors.surface,
+        borderRadius: 25,
+        paddingHorizontal: 16,
+        paddingVertical: 15,
+        borderWidth: 1,
+        borderColor: colors.border,
+        minHeight: 50,
+    },
+    disabledDropdown: {
+        backgroundColor: '#f5f5f5',
+        borderColor: colors.border,
+    },
+    errorDropdown: {
+        borderColor: colors.error,
+    },
+    dropdownText: Object.assign(Object.assign({}, typography.styles.bodyMedium), { color: colors.text, flex: 1 }),
+    placeholderText: {
+        color: themeName === 'dark' ? colors.placeholderColor : colors.textLight,
+    },
+    disabledText: {
+        color: colors.textLight,
+    },
+    arrow: Object.assign(Object.assign({}, typography.styles.bodySmall), { color: colors.textLight, marginLeft: 8 }),
+    errorText: Object.assign(Object.assign({}, typography.styles.bodySmall), { color: colors.error, marginTop: 4 }),
+    optionsContainer: {
+        position: 'absolute',
+        top: '100%',
+        left: 0,
+        right: 0,
+        backgroundColor: colors.surface,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: colors.border,
+        marginTop: 4,
+        maxHeight: 200,
+        zIndex: 1000,
+        elevation: 5,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+    },
+    option: {
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        borderBottomWidth: 1,
+        borderBottomColor: colors.border + '20',
+    },
+    selectedOption: {
+        backgroundColor: colors.primary + '10',
+    },
+    optionText: Object.assign(Object.assign({}, typography.styles.bodyMedium), { color: colors.text }),
+    selectedOptionText: {
+        color: colors.primary,
+        fontWeight: typography.fontWeight.semiBold,
+    },
+});
+exports.default = FormDropdown;

package/lib/components/FormSection.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface FormSectionProps {
+    title?: string;
+    subtitle?: string;
+    children: React.ReactNode;
+    containerStyle?: object;
+    titleStyle?: object;
+    subtitleStyle?: object;
+    contentStyle?: object;
+    showDivider?: boolean;
+    dividerStyle?: object;
+}
+declare const FormSection: React.FC<FormSectionProps>;
+export default FormSection;