@codeimplants/ui-kit 1.0.0

package/dist/components/shared/SupportButtons.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, TouchableOpacity, StyleSheet, Linking } from 'react-native';
+const SupportButtons = ({ support, variant = 'icon-only', theme, }) => {
+    const primaryColor = theme?.primary || '#2563EB';
+    const whatsappColor = '#25D366';
+    const phoneColor = '#2563EB';
+    const emailColor = '#6B7280';
+    const handleWhatsApp = () => {
+        if (support.whatsapp) {
+            const url = `https://wa.me/${support.whatsapp.number.replace(/[^0-9]/g, '')}`;
+            Linking.openURL(url);
+        }
+    };
+    const handlePhone = () => {
+        if (support.phone) {
+            const url = `tel:${support.phone.number}`;
+            Linking.openURL(url);
+        }
+    };
+    const handleEmail = () => {
+        if (support.email) {
+            const url = `mailto:${support.email.address}`;
+            Linking.openURL(url);
+        }
+    };
+    const renderIconOnly = () => (_jsxs(View, { style: styles.iconOnlyContainer, children: [support.whatsapp && (_jsx(TouchableOpacity, { style: [styles.iconButton, { backgroundColor: whatsappColor }], onPress: handleWhatsApp, activeOpacity: 0.8, children: _jsx(Text, { style: styles.iconText, children: "\uD83D\uDCAC" }) })), support.phone && (_jsx(TouchableOpacity, { style: [styles.iconButton, { backgroundColor: phoneColor }], onPress: handlePhone, activeOpacity: 0.8, children: _jsx(Text, { style: styles.iconText, children: "\uD83D\uDCDE" }) })), support.email && (_jsx(TouchableOpacity, { style: [styles.iconButton, { backgroundColor: emailColor }], onPress: handleEmail, activeOpacity: 0.8, children: _jsx(Text, { style: styles.iconText, children: "\u2709\uFE0F" }) }))] }));
+    const renderTextOnly = () => (_jsxs(View, { style: styles.textOnlyContainer, children: [support.whatsapp && (_jsx(TouchableOpacity, { style: [styles.textButton, { borderColor: whatsappColor }], onPress: handleWhatsApp, activeOpacity: 0.8, children: _jsx(Text, { style: [styles.textButtonLabel, { color: whatsappColor }], children: support.whatsapp.label || 'WhatsApp' }) })), support.phone && (_jsx(TouchableOpacity, { style: [styles.textButton, { borderColor: phoneColor }], onPress: handlePhone, activeOpacity: 0.8, children: _jsx(Text, { style: [styles.textButtonLabel, { color: phoneColor }], children: support.phone.label || 'Call' }) })), support.email && (_jsx(TouchableOpacity, { style: [styles.textButton, { borderColor: emailColor }], onPress: handleEmail, activeOpacity: 0.8, children: _jsx(Text, { style: [styles.textButtonLabel, { color: emailColor }], children: support.email.label || 'Email' }) }))] }));
+    const renderCombined = () => (_jsxs(View, { style: styles.combinedContainer, children: [support.whatsapp && (_jsxs(TouchableOpacity, { style: [styles.combinedButton, { backgroundColor: whatsappColor }], onPress: handleWhatsApp, activeOpacity: 0.8, children: [_jsx(Text, { style: styles.combinedIcon, children: "\uD83D\uDCAC" }), _jsx(Text, { style: styles.combinedLabel, children: support.whatsapp.label || 'WhatsApp' })] })), support.phone && (_jsxs(TouchableOpacity, { style: [styles.combinedButton, { backgroundColor: phoneColor }], onPress: handlePhone, activeOpacity: 0.8, children: [_jsx(Text, { style: styles.combinedIcon, children: "\uD83D\uDCDE" }), _jsx(Text, { style: styles.combinedLabel, children: support.phone.label || 'Call' })] })), support.email && (_jsxs(TouchableOpacity, { style: [styles.combinedButton, { backgroundColor: emailColor }], onPress: handleEmail, activeOpacity: 0.8, children: [_jsx(Text, { style: styles.combinedIcon, children: "\u2709\uFE0F" }), _jsx(Text, { style: styles.combinedLabel, children: support.email.label || 'Email' })] }))] }));
+    const renderCompact = () => (_jsxs(View, { style: styles.compactContainer, children: [support.whatsapp && (_jsxs(TouchableOpacity, { style: [styles.compactButton, { backgroundColor: whatsappColor }], onPress: handleWhatsApp, activeOpacity: 0.8, children: [_jsx(Text, { style: styles.compactIcon, children: "\uD83D\uDCAC" }), _jsx(Text, { style: styles.compactLabel, children: support.whatsapp.label || 'WhatsApp' })] })), support.phone && (_jsxs(TouchableOpacity, { style: [styles.compactButton, { backgroundColor: phoneColor }], onPress: handlePhone, activeOpacity: 0.8, children: [_jsx(Text, { style: styles.compactIcon, children: "\uD83D\uDCDE" }), _jsx(Text, { style: styles.compactLabel, children: support.phone.label || 'Call' })] })), support.email && (_jsxs(TouchableOpacity, { style: [styles.compactButton, { backgroundColor: emailColor }], onPress: handleEmail, activeOpacity: 0.8, children: [_jsx(Text, { style: styles.compactIcon, children: "\u2709\uFE0F" }), _jsx(Text, { style: styles.compactLabel, children: support.email.label || 'Email' })] }))] }));
+    return (_jsxs(View, { style: styles.container, children: [variant === 'icon-only' && renderIconOnly(), variant === 'text-only' && renderTextOnly(), variant === 'combined' && renderCombined(), variant === 'compact' && renderCompact()] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        marginTop: 20,
+    },
+    // Icon-only variant
+    iconOnlyContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: 12,
+        backgroundColor: '#FFFFFF',
+        paddingVertical: 12,
+        paddingHorizontal: 20,
+        borderRadius: 30,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 8,
+        elevation: 3,
+        alignSelf: 'center',
+    },
+    iconButton: {
+        width: 48,
+        height: 48,
+        borderRadius: 24,
+        justifyContent: 'center',
+        alignItems: 'center',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.15,
+        shadowRadius: 4,
+        elevation: 2,
+    },
+    iconText: {
+        fontSize: 24,
+    },
+    // Text-only variant
+    textOnlyContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: 12,
+    },
+    textButton: {
+        paddingVertical: 12,
+        paddingHorizontal: 24,
+        borderRadius: 8,
+        borderWidth: 1.5,
+        backgroundColor: '#FFFFFF',
+    },
+    textButtonLabel: {
+        fontSize: 15,
+        fontWeight: '600',
+    },
+    // Combined variant
+    combinedContainer: {
+        gap: 12,
+    },
+    combinedButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 14,
+        paddingHorizontal: 20,
+        borderRadius: 12,
+        gap: 10,
+    },
+    combinedIcon: {
+        fontSize: 20,
+    },
+    combinedLabel: {
+        color: '#FFFFFF',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    // Compact variant
+    compactContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: 12,
+    },
+    compactButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 12,
+        paddingHorizontal: 20,
+        borderRadius: 12,
+        gap: 8,
+        flex: 1,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+        elevation: 2,
+    },
+    compactIcon: {
+        fontSize: 18,
+    },
+    compactLabel: {
+        color: '#FFFFFF',
+        fontSize: 15,
+        fontWeight: '600',
+    },
+});
+export default SupportButtons;

package/dist/components/shared/TipsCard.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface TipsCardProps {
+    title?: string;
+    tips: string[];
+    backgroundColor?: string;
+    borderColor?: string;
+    titleColor?: string;
+    textColor?: string;
+}
+declare const TipsCard: React.FC<TipsCardProps>;
+export default TipsCard;

package/dist/components/shared/TipsCard.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Animated } from 'react-native';
+const TipsCard = ({ title = 'Try these tips:', tips, backgroundColor = '#FFFFFF', borderColor = '#E5E7EB', titleColor = '#1F2937', textColor = '#6B7280', }) => {
+    const fadeAnim = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        Animated.timing(fadeAnim, {
+            toValue: 1,
+            duration: 500,
+            delay: 300,
+            useNativeDriver: true,
+        }).start();
+    }, []);
+    return (_jsxs(Animated.View, { style: [
+            styles.container,
+            {
+                backgroundColor,
+                borderColor,
+                opacity: fadeAnim,
+                transform: [
+                    {
+                        translateY: fadeAnim.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [20, 0],
+                        }),
+                    },
+                ],
+            },
+        ], children: [_jsx(Text, { style: [styles.title, { color: titleColor }], children: title }), _jsx(View, { style: styles.tipsList, children: tips.map((tip, index) => (_jsxs(View, { style: styles.tipItem, children: [_jsx(View, { style: styles.numberContainer, children: _jsx(Text, { style: [styles.number, { color: textColor }], children: index + 1 }) }), _jsx(Text, { style: [styles.tipText, { color: textColor }], children: tip })] }, index))) })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        borderRadius: 12,
+        padding: 20,
+        marginBottom: 24,
+        borderWidth: 1,
+        width: '100%',
+    },
+    title: {
+        fontSize: 16,
+        fontWeight: '600',
+        marginBottom: 16,
+    },
+    tipsList: {
+        gap: 12,
+    },
+    tipItem: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+    },
+    numberContainer: {
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        backgroundColor: '#F3F4F6',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: 12,
+    },
+    number: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    tipText: {
+        flex: 1,
+        fontSize: 14,
+        lineHeight: 20,
+    },
+});
+export default TipsCard;

package/dist/components/shared/TopBanner.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { BannerConfig } from '../../types';
+interface TopBannerProps {
+    banner: BannerConfig;
+}
+declare const TopBanner: React.FC<TopBannerProps>;
+export default TopBanner;

package/dist/components/shared/TopBanner.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+const TopBanner = ({ banner }) => {
+    const getBannerColors = () => {
+        switch (banner.type) {
+            case 'warning':
+                return {
+                    background: '#FEF3C7',
+                    text: '#92400E',
+                    icon: '⚠️',
+                };
+            case 'error':
+                return {
+                    background: '#FEE2E2',
+                    text: '#991B1B',
+                    icon: '❌',
+                };
+            case 'info':
+                return {
+                    background: '#DBEAFE',
+                    text: '#1E40AF',
+                    icon: 'ℹ️',
+                };
+            case 'success':
+                return {
+                    background: '#D1FAE5',
+                    text: '#065F46',
+                    icon: '✅',
+                };
+            default:
+                return {
+                    background: '#F3F4F6',
+                    text: '#374151',
+                    icon: 'ℹ️',
+                };
+        }
+    };
+    const colors = getBannerColors();
+    return (_jsxs(View, { style: [styles.container, { backgroundColor: colors.background }], children: [_jsxs(View, { style: styles.content, children: [_jsx(Text, { style: styles.icon, children: banner.icon || colors.icon }), _jsx(Text, { style: [styles.message, { color: colors.text }], children: banner.message })] }), banner.dismissible && banner.onDismiss && (_jsx(TouchableOpacity, { onPress: banner.onDismiss, style: styles.dismissButton, activeOpacity: 0.7, children: _jsx(Text, { style: [styles.dismissText, { color: colors.text }], children: "Dismiss" }) }))] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingVertical: 12,
+        paddingHorizontal: 16,
+        borderBottomWidth: 1,
+        borderBottomColor: 'rgba(0, 0, 0, 0.1)',
+    },
+    content: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flex: 1,
+        gap: 10,
+    },
+    icon: {
+        fontSize: 18,
+    },
+    message: {
+        fontSize: 14,
+        fontWeight: '500',
+        flex: 1,
+    },
+    dismissButton: {
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+    },
+    dismissText: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+});
+export default TopBanner;

package/dist/components/shared/VersionDisplay.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+/**
+ * VersionDisplay Component
+ *
+ * Displays version comparison (current → new) in inline format with badges.
+ * Used in update screens to show version upgrade.
+ */
+interface VersionDisplayProps {
+    currentVersion: string;
+    newVersion: string;
+    primaryColor?: string;
+}
+export declare const VersionDisplay: React.FC<VersionDisplayProps>;
+export default VersionDisplay;

package/dist/components/shared/VersionDisplay.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, StyleSheet } from 'react-native';
+export const VersionDisplay = ({ currentVersion, newVersion, primaryColor = '#3B82F6', }) => {
+    return (_jsxs(View, { style: styles.container, children: [_jsx(View, { style: styles.versionBadge, children: _jsx(Text, { style: styles.versionText, children: currentVersion }) }), _jsx(Text, { style: styles.arrow, children: "\u2192" }), _jsx(View, { style: [styles.versionBadge, { backgroundColor: primaryColor + '20' }], children: _jsx(Text, { style: [styles.versionText, { color: primaryColor }], children: newVersion }) })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 24,
+    },
+    versionBadge: {
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        borderRadius: 8,
+        backgroundColor: '#F3F4F6',
+    },
+    versionText: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#6B7280',
+    },
+    arrow: {
+        fontSize: 16,
+        color: '#9CA3AF',
+        marginHorizontal: 12,
+    },
+});
+export default VersionDisplay;

package/dist/components/shared/WarningCard.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface WarningCardProps {
+    title?: string;
+    description?: string;
+    steps: string[];
+    backgroundColor?: string;
+    borderColor?: string;
+    iconColor?: string;
+}
+declare const WarningCard: React.FC<WarningCardProps>;
+export default WarningCard;

package/dist/components/shared/WarningCard.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Animated } from 'react-native';
+const WarningCard = ({ title = "Permission Denied", description, steps, backgroundColor = '#FED7AA', borderColor = '#F97316', iconColor = '#F97316', }) => {
+    const fadeAnim = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        Animated.timing(fadeAnim, {
+            toValue: 1,
+            duration: 500,
+            delay: 300,
+            useNativeDriver: true,
+        }).start();
+    }, []);
+    return (_jsxs(Animated.View, { style: [
+            styles.container,
+            {
+                backgroundColor,
+                borderColor,
+                opacity: fadeAnim,
+                transform: [
+                    {
+                        translateY: fadeAnim.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [20, 0],
+                        }),
+                    },
+                ],
+            },
+        ], children: [_jsxs(View, { style: styles.header, children: [_jsx(Text, { style: [styles.icon, { color: iconColor }], children: "\u26A0\uFE0F" }), _jsx(Text, { style: styles.title, children: title })] }), description && _jsx(Text, { style: styles.description, children: description }), _jsx(View, { style: styles.stepsList, children: steps.map((step, index) => (_jsxs(View, { style: styles.stepItem, children: [_jsxs(Text, { style: styles.stepNumber, children: [index + 1, "."] }), _jsx(Text, { style: styles.stepText, children: step })] }, index))) })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        borderRadius: 12,
+        padding: 20,
+        marginBottom: 16,
+        borderWidth: 1.5,
+        width: '100%',
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 12,
+    },
+    icon: {
+        fontSize: 20,
+        marginRight: 8,
+    },
+    title: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#92400E',
+    },
+    description: {
+        fontSize: 14,
+        color: '#92400E',
+        lineHeight: 20,
+        marginBottom: 12,
+    },
+    stepsList: {
+        gap: 8,
+    },
+    stepItem: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+    },
+    stepNumber: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#92400E',
+        marginRight: 8,
+        minWidth: 20,
+    },
+    stepText: {
+        flex: 1,
+        fontSize: 14,
+        color: '#92400E',
+        lineHeight: 20,
+    },
+});
+export default WarningCard;

package/dist/components/shared/WhatsNewCard.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface FeatureItem {
+    icon: string;
+    title: string;
+    description: string;
+    iconColor?: string;
+}
+interface WhatsNewCardProps {
+    features: FeatureItem[];
+    title?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+}
+declare const WhatsNewCard: React.FC<WhatsNewCardProps>;
+export default WhatsNewCard;

package/dist/components/shared/WhatsNewCard.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Animated } from 'react-native';
+const WhatsNewCard = ({ features, title = "What's New", backgroundColor = '#FFFFFF', borderColor = '#E5E7EB', }) => {
+    const fadeAnim = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        Animated.timing(fadeAnim, {
+            toValue: 1,
+            duration: 500,
+            delay: 200,
+            useNativeDriver: true,
+        }).start();
+    }, []);
+    return (_jsxs(Animated.View, { style: [
+            styles.container,
+            {
+                backgroundColor,
+                borderColor,
+                opacity: fadeAnim,
+                transform: [
+                    {
+                        translateY: fadeAnim.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [20, 0],
+                        }),
+                    },
+                ],
+            },
+        ], children: [_jsx(Text, { style: styles.title, children: title }), features.map((feature, index) => (_jsxs(View, { style: styles.featureItem, children: [_jsx(View, { style: [
+                            styles.iconContainer,
+                            { backgroundColor: feature.iconColor || '#F3F4F6' },
+                        ], children: _jsx(Text, { style: styles.icon, children: feature.icon }) }), _jsxs(View, { style: styles.textContainer, children: [_jsx(Text, { style: styles.featureTitle, children: feature.title }), _jsx(Text, { style: styles.featureDescription, children: feature.description })] })] }, index)))] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        borderRadius: 12,
+        padding: 24,
+        marginBottom: 20,
+        borderWidth: 1,
+        width: '100%',
+    },
+    title: {
+        fontSize: 18,
+        fontWeight: '600',
+        color: '#1F2937',
+        marginBottom: 20,
+    },
+    featureItem: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        marginBottom: 16,
+    },
+    iconContainer: {
+        width: 40,
+        height: 40,
+        borderRadius: 8,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: 12,
+    },
+    icon: {
+        fontSize: 20,
+    },
+    textContainer: {
+        flex: 1,
+    },
+    featureTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#1F2937',
+        marginBottom: 4,
+    },
+    featureDescription: {
+        fontSize: 14,
+        color: '#6B7280',
+        lineHeight: 20,
+    },
+});
+export default WhatsNewCard;

package/dist/components/status/ConnectionStatus.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ConnectionStatusProps {
+    text?: string;
+    textColor?: string;
+    iconColor?: string;
+}
+declare const ConnectionStatus: React.FC<ConnectionStatusProps>;
+export default ConnectionStatus;

package/dist/components/status/ConnectionStatus.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Animated } from 'react-native';
+const ConnectionStatus = ({ text = 'Waiting for connection', textColor = '#6B7280', iconColor = '#9CA3AF', }) => {
+    const dotAnim1 = useRef(new Animated.Value(0)).current;
+    const dotAnim2 = useRef(new Animated.Value(0)).current;
+    const dotAnim3 = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        const createDotAnimation = (animValue, delay) => {
+            return Animated.loop(Animated.sequence([
+                Animated.delay(delay),
+                Animated.timing(animValue, {
+                    toValue: 1,
+                    duration: 400,
+                    useNativeDriver: true,
+                }),
+                Animated.timing(animValue, {
+                    toValue: 0,
+                    duration: 400,
+                    useNativeDriver: true,
+                }),
+            ]));
+        };
+        Animated.parallel([
+            createDotAnimation(dotAnim1, 0),
+            createDotAnimation(dotAnim2, 200),
+            createDotAnimation(dotAnim3, 400),
+        ]).start();
+    }, []);
+    return (_jsxs(View, { style: styles.container, children: [_jsx(Text, { style: [styles.icon, { color: iconColor }], children: "\uD83D\uDCF6" }), _jsx(Text, { style: [styles.text, { color: textColor }], children: text }), _jsxs(View, { style: styles.dotsContainer, children: [_jsx(Animated.Text, { style: [styles.dot, { color: textColor, opacity: dotAnim1 }], children: "\u2022" }), _jsx(Animated.Text, { style: [styles.dot, { color: textColor, opacity: dotAnim2 }], children: "\u2022" }), _jsx(Animated.Text, { style: [styles.dot, { color: textColor, opacity: dotAnim3 }], children: "\u2022" })] })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 24,
+    },
+    icon: {
+        fontSize: 16,
+        marginRight: 8,
+    },
+    text: {
+        fontSize: 14,
+        fontWeight: '500',
+    },
+    dotsContainer: {
+        flexDirection: 'row',
+        marginLeft: 4,
+    },
+    dot: {
+        fontSize: 14,
+        fontWeight: '700',
+        marginHorizontal: 1,
+    },
+});
+export default ConnectionStatus;

package/dist/components/status/VersionDisplay.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+/**
+ * VersionDisplay Component
+ *
+ * Displays version comparison (current → new) in inline format with badges.
+ * Used in update screens to show version upgrade.
+ */
+interface VersionDisplayProps {
+    currentVersion: string;
+    newVersion: string;
+    primaryColor?: string;
+}
+export declare const VersionDisplay: React.FC<VersionDisplayProps>;
+export default VersionDisplay;

package/dist/components/status/VersionDisplay.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, StyleSheet } from 'react-native';
+export const VersionDisplay = ({ currentVersion, newVersion, primaryColor = '#3B82F6', }) => {
+    return (_jsxs(View, { style: styles.container, children: [_jsx(View, { style: styles.versionBadge, children: _jsx(Text, { style: styles.versionText, children: currentVersion }) }), _jsx(Text, { style: styles.arrow, children: "\u2192" }), _jsx(View, { style: [styles.versionBadge, { backgroundColor: primaryColor + '20' }], children: _jsx(Text, { style: [styles.versionText, { color: primaryColor }], children: newVersion }) })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 24,
+    },
+    versionBadge: {
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        borderRadius: 8,
+        backgroundColor: '#F3F4F6',
+    },
+    versionText: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#6B7280',
+    },
+    arrow: {
+        fontSize: 16,
+        color: '#9CA3AF',
+        marginHorizontal: 12,
+    },
+});
+export default VersionDisplay;

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

@@ -0,0 +1,2 @@
+export { default as ConnectionStatus } from './ConnectionStatus';
+export { default as VersionDisplay } from './VersionDisplay';

package/dist/components/status/index.js

@@ -0,0 +1,3 @@
+// Status - Barrel Export
+export { default as ConnectionStatus } from './ConnectionStatus';
+export { default as VersionDisplay } from './VersionDisplay';

package/dist/components/support/SupportButtons.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { SupportContact, SupportVariant, ThemeColors } from '../../types';
+interface SupportButtonsProps {
+    support: SupportContact;
+    variant?: SupportVariant;
+    theme?: ThemeColors;
+}
+declare const SupportButtons: React.FC<SupportButtonsProps>;
+export default SupportButtons;