@codeimplants/ui-kit 1.0.0

package/dist/screens/system/maintenance/SystemMaintenanceScreen.js

@@ -0,0 +1,228 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView, Animated } from 'react-native';
+import SupportButtons from '../../../components/support/SupportButtons';
+import AnimatedWrench from '../../../components/icons/animated/maintenance/AnimatedWrench';
+import { getColor, getColorWithOpacity, isWeb } from '../../../utils/client';
+/**
+ * System Maintenance Screen Component
+ *
+ * Fully customizable maintenance screen.
+ * All content, countdown, actions, and support are configurable via props.
+ */
+export const SystemMaintenanceScreen = ({ 
+// Maintenance type (for default config)
+type, 
+// Content customization
+title, description, icon, 
+// Time info (optional)
+estimatedEndTime, showCountdown = true, 
+// Actions
+onRetry, onNotifyMe, 
+// Button text
+retryButtonText = 'Check Again', notifyButtonText = 'Notify Me When Ready', 
+// Support (optional)
+support, supportVariant, 
+// Styling
+theme, }) => {
+    const [timeRemaining, setTimeRemaining] = useState('');
+    // Animation
+    const fadeAnim = useRef(new Animated.Value(0)).current;
+    const scaleAnim = useRef(new Animated.Value(0.9)).current;
+    useEffect(() => {
+        Animated.parallel([
+            Animated.timing(fadeAnim, {
+                toValue: 1,
+                duration: 300,
+                useNativeDriver: true,
+            }),
+            Animated.spring(scaleAnim, {
+                toValue: 1,
+                tension: 50,
+                friction: 7,
+                useNativeDriver: true,
+            }),
+        ]).start();
+    }, []);
+    useEffect(() => {
+        if (estimatedEndTime && showCountdown) {
+            const updateCountdown = () => {
+                const now = new Date().getTime();
+                const end = estimatedEndTime.getTime();
+                const diff = end - now;
+                if (diff <= 0) {
+                    setTimeRemaining('Maintenance should be complete');
+                    return;
+                }
+                const hours = Math.floor(diff / (1000 * 60 * 60));
+                const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+                const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+                if (hours > 0) {
+                    setTimeRemaining(`${hours}h ${minutes}m ${seconds}s`);
+                }
+                else if (minutes > 0) {
+                    setTimeRemaining(`${minutes}m ${seconds}s`);
+                }
+                else {
+                    setTimeRemaining(`${seconds}s`);
+                }
+            };
+            updateCountdown();
+            const interval = setInterval(updateCountdown, 1000);
+            return () => clearInterval(interval);
+        }
+    }, [estimatedEndTime, showCountdown]);
+    // Get default config based on type (fallback)
+    const getDefaultConfig = () => {
+        const errorColor = theme?.error || getColor('error');
+        const warningColor = theme?.warning || getColor('warning');
+        const primaryColorDefault = theme?.primary || getColor('primary');
+        switch (type) {
+            case 'emergency':
+                return {
+                    color: errorColor,
+                    title: 'Emergency Maintenance',
+                    description: 'We are performing emergency maintenance to fix critical issues. We apologize for the inconvenience.',
+                    badge: 'Critical',
+                };
+            case 'unplanned':
+                return {
+                    color: warningColor,
+                    title: 'Unplanned Outage',
+                    description: 'We are experiencing unexpected issues and working to resolve them as quickly as possible.',
+                    badge: 'Unexpected',
+                };
+            case 'planned':
+            default:
+                return {
+                    color: primaryColorDefault,
+                    title: 'Scheduled Maintenance',
+                    description: 'We are performing scheduled maintenance to improve your experience. We will be back shortly.',
+                    badge: 'Scheduled',
+                };
+        }
+    };
+    const defaultConfig = type ? getDefaultConfig() : null;
+    // Use custom values or fallback to defaults
+    const finalTitle = title || defaultConfig?.title || 'Under Maintenance';
+    const finalDescription = description || defaultConfig?.description || 'We are currently performing maintenance.';
+    const finalIcon = icon || _jsx(AnimatedWrench, { size: 48, color: defaultConfig?.color || theme?.primary || getColor('primary') });
+    const finalColor = defaultConfig?.color || theme?.primary || getColor('primary');
+    const badge = defaultConfig?.badge;
+    return (_jsx(View, { style: [styles.container, theme?.background ? { backgroundColor: theme.background } : undefined], children: _jsx(ScrollView, { contentContainerStyle: styles.scrollContent, showsVerticalScrollIndicator: false, children: _jsxs(Animated.View, { style: [
+                    styles.content,
+                    {
+                        opacity: fadeAnim,
+                        transform: [{ scale: scaleAnim }],
+                    },
+                ], children: [_jsx(View, { style: [styles.iconContainer, { backgroundColor: getColorWithOpacity(finalColor, 0.1) }], children: finalIcon }), badge && (_jsx(View, { style: [styles.badge, { backgroundColor: getColorWithOpacity(finalColor, 0.1) }], children: _jsx(Text, { style: [styles.badgeText, { color: finalColor }], children: badge }) })), _jsx(Text, { style: [styles.title, theme?.textPrimary ? { color: theme.textPrimary } : undefined], children: finalTitle }), _jsx(Text, { style: [styles.description, theme?.textSecondary ? { color: theme.textSecondary } : undefined], children: finalDescription }), timeRemaining && showCountdown && (_jsxs(View, { style: [styles.countdownContainer, { backgroundColor: getColorWithOpacity(finalColor, 0.1) }], children: [_jsx(Text, { style: styles.countdownLabel, children: "Estimated time remaining" }), _jsx(Text, { style: [styles.countdownTime, { color: finalColor }], children: timeRemaining })] })), _jsxs(View, { style: styles.buttonsContainer, children: [onRetry && (_jsx(TouchableOpacity, { style: [styles.button, styles.primaryButton, { backgroundColor: finalColor }], onPress: onRetry, activeOpacity: 0.8, children: _jsx(Text, { style: styles.primaryButtonText, children: retryButtonText }) })), onNotifyMe && (_jsx(TouchableOpacity, { style: [styles.button, styles.secondaryButton, { borderColor: finalColor }], onPress: onNotifyMe, activeOpacity: 0.8, children: _jsx(Text, { style: [styles.secondaryButtonText, { color: finalColor }], children: notifyButtonText }) }))] }), support && (_jsx(View, { style: styles.supportContainer, children: _jsx(SupportButtons, { support: support, variant: supportVariant || 'combined', theme: theme }) }))] }) }) }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#FFFFFF',
+    },
+    scrollContent: {
+        flexGrow: 1,
+        justifyContent: 'center',
+        padding: 24,
+    },
+    content: {
+        alignItems: 'center',
+        maxWidth: 480,
+        width: '100%',
+        alignSelf: 'center',
+    },
+    iconContainer: {
+        width: 96,
+        height: 96,
+        borderRadius: 48,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginBottom: 16,
+    },
+    badge: {
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        borderRadius: 12,
+        marginBottom: 16,
+    },
+    badgeText: {
+        fontSize: 12,
+        fontWeight: '700',
+        textTransform: 'uppercase',
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: '700',
+        color: '#1F2937',
+        textAlign: 'center',
+        marginBottom: 12,
+    },
+    description: {
+        fontSize: 16,
+        color: '#6B7280',
+        textAlign: 'center',
+        lineHeight: 24,
+        marginBottom: 24,
+    },
+    countdownContainer: {
+        padding: 16,
+        borderRadius: 12,
+        marginBottom: 24,
+        alignItems: 'center',
+        width: '100%',
+    },
+    countdownLabel: {
+        fontSize: 14,
+        color: '#6B7280',
+        marginBottom: 8,
+    },
+    countdownTime: {
+        fontSize: 32,
+        fontWeight: '700',
+    },
+    buttonsContainer: {
+        width: '100%',
+        marginBottom: 16,
+    },
+    button: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 14,
+        paddingHorizontal: 32,
+        borderRadius: 12,
+        width: '100%',
+        marginBottom: 12,
+    },
+    buttonIcon: {
+        marginRight: 8,
+    },
+    primaryButton: {
+        ...(!isWeb() && {
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 2 },
+            shadowOpacity: 0.1,
+            shadowRadius: 4,
+            elevation: 3,
+        }),
+    },
+    primaryButtonText: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#FFFFFF',
+    },
+    secondaryButton: {
+        borderWidth: 2,
+        backgroundColor: 'transparent',
+    },
+    secondaryButtonText: {
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    supportContainer: {
+        width: '100%',
+        marginTop: 8,
+    },
+});

package/dist/screens/system/maintenance/UnplannedOutageScreen.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { UnplannedOutageScreenProps } from '../../../types';
+/**
+ * Unplanned Outage Screen
+ *
+ * Displayed during unplanned service disruptions.
+ */
+export declare const UnplannedOutageScreen: React.FC<UnplannedOutageScreenProps>;
+export default UnplannedOutageScreen;

package/dist/screens/system/maintenance/UnplannedOutageScreen.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, StyleSheet } from 'react-native';
+import ScreenContainer from '../../../components/layout/ScreenContainer';
+import IconWithBadge from '../../../components/icons/utilities/IconWithBadge';
+import StatusBadge from '../../../components/feedback/StatusBadge';
+import ContentCard from '../../../components/cards/ContentCard';
+import PrimaryButton from '../../../components/buttons/PrimaryButton';
+import SecondaryButton from '../../../components/buttons/SecondaryButton';
+import CheckListItem from '../../../components/lists/CheckListItem';
+import AnimatedAlert from '../../../components/icons/animated/maintenance/AnimatedAlert';
+import { getColor } from '../../../utils/client';
+/**
+ * Unplanned Outage Screen
+ *
+ * Displayed during unplanned service disruptions.
+ */
+export const UnplannedOutageScreen = ({ title = 'Service Disruption', description = 'We\'re aware of an issue affecting our services and are working urgently to fix it.', onCheckAgain, onNotifyWhenBack, checkButtonText = 'Check Again', notifyButtonText = 'Notify Me When Back', support, theme, primaryColor, backgroundColor, }) => {
+    const warningColor = primaryColor || theme?.warning || getColor('warning');
+    return (_jsxs(ScreenContainer, { backgroundColor: backgroundColor || theme?.background, children: [_jsx(IconWithBadge, { icon: _jsx(AnimatedAlert, { size: 48, color: warningColor }), iconBackgroundColor: "#FED7AA", badge: _jsx(Text, { style: styles.badgeIcon, children: "\uD83D\uDD50" }), badgeBackgroundColor: warningColor }), _jsx(StatusBadge, { text: "Service Alert", backgroundColor: "#FED7AA", textColor: warningColor }), _jsx(Text, { style: [styles.title, theme?.textPrimary ? { color: theme.textPrimary } : undefined], children: title }), _jsx(Text, { style: [styles.description, theme?.textSecondary ? { color: theme.textSecondary } : undefined], children: description }), _jsxs(ContentCard, { title: "What's happening?", children: [_jsx(CheckListItem, { text: "Our team is actively working on this" }), _jsx(CheckListItem, { text: "Your data is safe and secure" }), _jsx(CheckListItem, { text: "We'll be back as soon as possible" })] }), onCheckAgain && (_jsx(PrimaryButton, { onPress: onCheckAgain, backgroundColor: warningColor, children: checkButtonText })), onNotifyWhenBack && (_jsx(SecondaryButton, { onPress: onNotifyWhenBack, children: notifyButtonText }))] }));
+};
+const styles = StyleSheet.create({
+    title: {
+        fontSize: 24,
+        fontWeight: '700',
+        color: '#1F2937',
+        textAlign: 'center',
+        marginBottom: 12,
+        lineHeight: 32,
+    },
+    description: {
+        fontSize: 16,
+        fontWeight: '400',
+        color: '#6B7280',
+        textAlign: 'center',
+        lineHeight: 24,
+        marginBottom: 24,
+    },
+    badgeIcon: {
+        fontSize: 16,
+    },
+});
+export default UnplannedOutageScreen;

package/dist/screens/system/maintenance/index.d.ts

@@ -0,0 +1,5 @@
+export { PlannedMaintenanceScreen } from './PlannedMaintenanceScreen';
+export { UnplannedOutageScreen } from './UnplannedOutageScreen';
+export { EmergencyOutageScreen } from './EmergencyOutageScreen';
+export { SystemMaintenanceScreen } from './SystemMaintenanceScreen';
+export { default as ServiceUnavailableScreen } from './ServiceUnavailableScreen';

package/dist/screens/system/maintenance/index.js

@@ -0,0 +1,6 @@
+// Maintenance Screens - Barrel Export
+export { PlannedMaintenanceScreen } from './PlannedMaintenanceScreen';
+export { UnplannedOutageScreen } from './UnplannedOutageScreen';
+export { EmergencyOutageScreen } from './EmergencyOutageScreen';
+export { SystemMaintenanceScreen } from './SystemMaintenanceScreen';
+export { default as ServiceUnavailableScreen } from './ServiceUnavailableScreen';

package/dist/screens/system/updates/AppUpdateScreen.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { AppUpdateScreenProps } from '../../../types';
+/**
+ * App Update Screen Component
+ *
+ * Fully customizable app update screen.
+ * All content, actions, and styling are configurable via props.
+ */
+export declare const AppUpdateScreen: React.FC<AppUpdateScreenProps>;

package/dist/screens/system/updates/AppUpdateScreen.js

@@ -0,0 +1,296 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView, Animated } from 'react-native';
+import { DownloadIcon, XIcon } from '../../../components/icons/utilities';
+import { getColor, getColorWithOpacity, isWeb } from '../../../utils/client';
+/**
+ * App Update Screen Component
+ *
+ * Fully customizable app update screen.
+ * All content, actions, and styling are configurable via props.
+ */
+export const AppUpdateScreen = ({ 
+// Update type (for default config)
+updateType, 
+// Content customization
+title, description, icon, 
+// Version info (optional)
+currentVersion, newVersion, showVersionInfo = true, 
+// Release notes (optional)
+releaseNotes, showReleaseNotes = true, 
+// Actions
+onUpdate, onSkip, onRemindLater, 
+// Button text
+updateButtonText = 'Update Now', skipButtonText = 'Skip this version', remindLaterButtonText = 'Remind Me Later', 
+// Variant
+variant = 'fullscreen', 
+// Styling
+theme, primaryColor, }) => {
+    // Animation
+    const fadeAnim = useRef(new Animated.Value(0)).current;
+    const scaleAnim = useRef(new Animated.Value(0.9)).current;
+    useEffect(() => {
+        Animated.parallel([
+            Animated.timing(fadeAnim, {
+                toValue: 1,
+                duration: 300,
+                useNativeDriver: true,
+            }),
+            Animated.spring(scaleAnim, {
+                toValue: 1,
+                tension: 50,
+                friction: 7,
+                useNativeDriver: true,
+            }),
+        ]).start();
+    }, []);
+    // Get default config based on updateType (fallback)
+    const getDefaultConfig = () => {
+        const errorColor = theme?.error || getColor('error');
+        const warningColor = theme?.warning || getColor('warning');
+        const successColor = theme?.success || getColor('success');
+        const primaryColorDefault = theme?.primary || getColor('primary');
+        switch (updateType) {
+            case 'critical':
+                return {
+                    color: errorColor,
+                    title: 'Critical Security Update',
+                    description: 'A critical security update is available. Please update immediately to keep your data safe.',
+                    badge: 'Security',
+                    canSkip: false,
+                };
+            case 'force':
+                return {
+                    color: warningColor,
+                    title: 'Update Required',
+                    description: 'A new version is required to continue using the app. Please update now.',
+                    badge: 'Required',
+                    canSkip: false,
+                };
+            case 'optional':
+                return {
+                    color: successColor,
+                    title: 'Update Available',
+                    description: 'A new version with exciting features is available. Update now to get the latest improvements.',
+                    badge: 'New Features',
+                    canSkip: true,
+                };
+            case 'soft':
+            default:
+                return {
+                    color: primaryColorDefault,
+                    title: 'Update Available',
+                    description: 'A new version is available with bug fixes and improvements.',
+                    badge: null,
+                    canSkip: true,
+                };
+        }
+    };
+    const defaultConfig = updateType ? getDefaultConfig() : null;
+    // Use custom values or fallback to defaults
+    const finalTitle = title || defaultConfig?.title || 'Update Available';
+    const finalDescription = description || defaultConfig?.description || 'A new version is available.';
+    const finalIcon = icon || _jsx(DownloadIcon, { size: 48, color: primaryColor || defaultConfig?.color || theme?.primary || getColor('primary') });
+    const finalColor = primaryColor || defaultConfig?.color || theme?.primary || getColor('primary');
+    const canSkip = defaultConfig?.canSkip !== false; // Default to true if no updateType
+    const badge = defaultConfig?.badge;
+    // Format release notes
+    const formattedReleaseNotes = Array.isArray(releaseNotes)
+        ? releaseNotes.join('\n• ')
+        : releaseNotes;
+    if (variant === 'banner') {
+        return (_jsxs(View, { style: [styles.banner, { backgroundColor: finalColor }], children: [_jsxs(View, { style: styles.bannerContent, children: [_jsx(DownloadIcon, { size: 20, color: "#FFFFFF" }), _jsxs(Text, { style: styles.bannerText, children: ["Update to ", newVersion ? `v${newVersion}` : 'latest version', " available"] })] }), _jsxs(View, { style: styles.bannerActions, children: [onUpdate && (_jsx(TouchableOpacity, { onPress: onUpdate, activeOpacity: 0.7, style: styles.bannerButton, children: _jsx(Text, { style: styles.bannerButtonText, children: updateButtonText }) })), canSkip && onSkip && (_jsx(TouchableOpacity, { onPress: onSkip, activeOpacity: 0.7, children: _jsx(XIcon, { size: 20, color: "#FFFFFF" }) }))] })] }));
+    }
+    // Fullscreen variant
+    return (_jsx(View, { style: [styles.container, theme?.background ? { backgroundColor: theme.background } : undefined], children: _jsx(ScrollView, { contentContainerStyle: styles.scrollContent, showsVerticalScrollIndicator: false, children: _jsxs(Animated.View, { style: [
+                    styles.content,
+                    {
+                        opacity: fadeAnim,
+                        transform: [{ scale: scaleAnim }],
+                    },
+                ], children: [_jsx(View, { style: [styles.iconContainer, { backgroundColor: getColorWithOpacity(finalColor, 0.1) }], children: finalIcon }), badge && (_jsx(View, { style: [styles.badge, { backgroundColor: getColorWithOpacity(finalColor, 0.1) }], children: _jsx(Text, { style: [styles.badgeText, { color: finalColor }], children: badge }) })), _jsx(Text, { style: [styles.title, theme?.textPrimary ? { color: theme.textPrimary } : undefined], children: finalTitle }), _jsx(Text, { style: [styles.description, theme?.textSecondary ? { color: theme.textSecondary } : undefined], children: finalDescription }), showVersionInfo && currentVersion && newVersion && (_jsxs(View, { style: styles.versionContainer, children: [_jsxs(View, { style: styles.versionItem, children: [_jsx(Text, { style: styles.versionLabel, children: "Current" }), _jsx(Text, { style: styles.versionNumber, children: currentVersion })] }), _jsx(Text, { style: styles.versionArrow, children: "\u2192" }), _jsxs(View, { style: styles.versionItem, children: [_jsx(Text, { style: styles.versionLabel, children: "New" }), _jsx(Text, { style: [styles.versionNumber, { color: finalColor }], children: newVersion })] })] })), showReleaseNotes && formattedReleaseNotes && (_jsxs(View, { style: styles.releaseNotesContainer, children: [_jsx(Text, { style: styles.releaseNotesTitle, children: "What's New:" }), _jsxs(Text, { style: styles.releaseNotesText, children: [Array.isArray(releaseNotes) ? '• ' : '', formattedReleaseNotes] })] })), _jsxs(View, { style: styles.buttonsContainer, children: [onUpdate && (_jsxs(TouchableOpacity, { style: [styles.button, styles.primaryButton, { backgroundColor: finalColor }], onPress: onUpdate, activeOpacity: 0.8, children: [_jsx(DownloadIcon, { size: 20, color: "#FFFFFF" }), _jsx(Text, { style: styles.primaryButtonText, children: updateButtonText })] })), canSkip && onRemindLater && (_jsx(TouchableOpacity, { style: [styles.button, styles.secondaryButton, { borderColor: finalColor }], onPress: onRemindLater, activeOpacity: 0.8, children: _jsx(Text, { style: [styles.secondaryButtonText, { color: finalColor }], children: remindLaterButtonText }) })), canSkip && onSkip && (_jsx(TouchableOpacity, { onPress: onSkip, activeOpacity: 0.7, children: _jsx(Text, { style: styles.skipText, children: skipButtonText }) }))] })] }) }) }));
+};
+const styles = StyleSheet.create({
+    // Fullscreen
+    container: {
+        flex: 1,
+        backgroundColor: '#FFFFFF',
+    },
+    scrollContent: {
+        flexGrow: 1,
+        justifyContent: 'center',
+        padding: 24,
+    },
+    content: {
+        alignItems: 'center',
+        maxWidth: 480,
+        width: '100%',
+        alignSelf: 'center',
+    },
+    iconContainer: {
+        width: 96,
+        height: 96,
+        borderRadius: 48,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginBottom: 16,
+    },
+    badge: {
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        borderRadius: 12,
+        marginBottom: 16,
+    },
+    badgeText: {
+        fontSize: 12,
+        fontWeight: '700',
+        textTransform: 'uppercase',
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: '700',
+        color: '#1F2937',
+        textAlign: 'center',
+        marginBottom: 12,
+    },
+    description: {
+        fontSize: 16,
+        color: '#6B7280',
+        textAlign: 'center',
+        lineHeight: 24,
+        marginBottom: 24,
+    },
+    versionContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 24,
+        padding: 16,
+        backgroundColor: '#F9FAFB',
+        borderRadius: 12,
+    },
+    versionItem: {
+        alignItems: 'center',
+        marginHorizontal: 8,
+    },
+    versionLabel: {
+        fontSize: 12,
+        color: '#6B7280',
+        marginBottom: 4,
+    },
+    versionNumber: {
+        fontSize: 18,
+        fontWeight: '700',
+        color: '#1F2937',
+    },
+    versionArrow: {
+        fontSize: 20,
+        color: '#6B7280',
+    },
+    releaseNotesContainer: {
+        width: '100%',
+        padding: 16,
+        backgroundColor: '#F9FAFB',
+        borderRadius: 12,
+        marginBottom: 24,
+    },
+    releaseNotesTitle: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#1F2937',
+        marginBottom: 8,
+    },
+    releaseNotesText: {
+        fontSize: 14,
+        color: '#6B7280',
+        lineHeight: 20,
+    },
+    buttonsContainer: {
+        width: '100%',
+        alignItems: 'center',
+    },
+    button: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 14,
+        paddingHorizontal: 32,
+        borderRadius: 12,
+        width: '100%',
+        maxWidth: 280,
+        marginBottom: 12,
+    },
+    buttonIcon: {
+        marginRight: 8,
+    },
+    primaryButton: {
+        ...(!isWeb() && {
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 2 },
+            shadowOpacity: 0.1,
+            shadowRadius: 4,
+            elevation: 3,
+        }),
+    },
+    primaryButtonText: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#FFFFFF',
+    },
+    secondaryButton: {
+        borderWidth: 2,
+        backgroundColor: 'transparent',
+    },
+    secondaryButtonText: {
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    skipText: {
+        fontSize: 14,
+        color: '#9CA3AF',
+        marginTop: 8,
+    },
+    // Banner
+    banner: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        zIndex: 1000,
+    },
+    bannerContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flex: 1,
+    },
+    bannerIcon: {
+        marginRight: 12,
+    },
+    bannerText: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#FFFFFF',
+    },
+    bannerActions: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    bannerActionButton: {
+        marginLeft: 12,
+    },
+    bannerButton: {
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        backgroundColor: 'rgba(255, 255, 255, 0.2)',
+        borderRadius: 6,
+    },
+    bannerButtonText: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#FFFFFF',
+    },
+});

package/dist/screens/system/updates/ForceUpdateScreen.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ForceUpdateScreenProps } from '../../../types';
+/**
+ * Force Update Screen
+ *
+ * Displayed when an update is required to continue using the app.
+ */
+export declare const ForceUpdateScreen: React.FC<ForceUpdateScreenProps>;
+export default ForceUpdateScreen;

package/dist/screens/system/updates/ForceUpdateScreen.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, StyleSheet } from 'react-native';
+import ScreenContainer from '../../../components/layout/ScreenContainer';
+import IconWithBadge from '../../../components/icons/utilities/IconWithBadge';
+import StatusBadge from '../../../components/feedback/StatusBadge';
+import ContentCard from '../../../components/cards/ContentCard';
+import PrimaryButton from '../../../components/buttons/PrimaryButton';
+import VersionDisplay from '../../../components/status/VersionDisplay';
+import AnimatedDownload from '../../../components/icons/animated/general/AnimatedDownload';
+import { getColor } from '../../../utils/client';
+/**
+ * Force Update Screen
+ *
+ * Displayed when an update is required to continue using the app.
+ */
+export const ForceUpdateScreen = ({ title = 'Update Required', description = 'Please update to the latest version to continue using the app.', currentVersion, newVersion, features, onUpdate, updateButtonText = 'Update Now', support, theme, primaryColor, backgroundColor, }) => {
+    const warningColor = primaryColor || theme?.warning || getColor('warning');
+    return (_jsxs(ScreenContainer, { backgroundColor: backgroundColor || theme?.background, children: [_jsx(IconWithBadge, { icon: _jsx(AnimatedDownload, { size: 48, color: warningColor }), iconBackgroundColor: "#FED7AA", badge: _jsx(Text, { style: styles.badgeIcon, children: "!" }), badgeBackgroundColor: warningColor }), _jsx(StatusBadge, { text: "Required", backgroundColor: "#FED7AA", textColor: warningColor }), _jsx(Text, { style: [styles.title, theme?.textPrimary ? { color: theme.textPrimary } : undefined], children: title }), _jsx(Text, { style: [styles.description, theme?.textSecondary ? { color: theme.textSecondary } : undefined], children: description }), currentVersion && newVersion && (_jsx(VersionDisplay, { currentVersion: currentVersion, newVersion: newVersion, primaryColor: warningColor })), features && features.length > 0 && (_jsx(ContentCard, { title: "What's New", children: features.map((feature, index) => (_jsxs(Text, { style: styles.featureText, children: ["\u2022 ", feature] }, index))) })), onUpdate && (_jsx(PrimaryButton, { onPress: onUpdate, backgroundColor: warningColor, children: updateButtonText }))] }));
+};
+const styles = StyleSheet.create({
+    title: {
+        fontSize: 24,
+        fontWeight: '700',
+        color: '#1F2937',
+        textAlign: 'center',
+        marginBottom: 12,
+        lineHeight: 32,
+    },
+    description: {
+        fontSize: 16,
+        fontWeight: '400',
+        color: '#6B7280',
+        textAlign: 'center',
+        lineHeight: 24,
+        marginBottom: 24,
+    },
+    featureText: {
+        fontSize: 14,
+        color: '#6B7280',
+        lineHeight: 20,
+        marginBottom: 8,
+    },
+    badgeIcon: {
+        color: '#FFFFFF',
+        fontSize: 20,
+        fontWeight: '700',
+    },
+});
+export default ForceUpdateScreen;

package/dist/screens/system/updates/OptionalUpdateScreen.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { OptionalUpdateScreenProps } from '../../../types';
+/**
+ * Optional Update Screen
+ *
+ * Displayed when an optional update with new features is available.
+ */
+export declare const OptionalUpdateScreen: React.FC<OptionalUpdateScreenProps>;
+export default OptionalUpdateScreen;