@codeimplants/ui-kit 1.0.0

package/dist/screens/system/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/SimpleIcons';
+import { getColor, getColorWithOpacity, isWeb } from '../../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/EmergencyOutageScreen.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { EmergencyOutageScreenProps } from '../../types';
+/**
+ * Emergency Outage Screen
+ *
+ * Displayed during critical emergency outages.
+ */
+export declare const EmergencyOutageScreen: React.FC<EmergencyOutageScreenProps>;
+export default EmergencyOutageScreen;

package/dist/screens/system/EmergencyOutageScreen.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, StyleSheet } from 'react-native';
+import ScreenContainer from '../../components/shared/ScreenContainer';
+import IconWithBadge from '../../components/icons/IconWithBadge';
+import StatusBadge from '../../components/shared/StatusBadge';
+import ContentCard from '../../components/shared/ContentCard';
+import PrimaryButton from '../../components/shared/PrimaryButton';
+import SecondaryButton from '../../components/shared/SecondaryButton';
+import AnimatedEmergency from '../../components/icons/AnimatedEmergency';
+import { getColor } from '../../client';
+/**
+ * Emergency Outage Screen
+ *
+ * Displayed during critical emergency outages.
+ */
+export const EmergencyOutageScreen = ({ title = 'Service Unavailable', description = 'We\'re experiencing a critical issue. Our team is working around the clock to restore service.', incidentDetails, onCheckStatus, onGetUpdates, statusButtonText = 'Check Status', updatesButtonText = 'Get Updates', support, theme, primaryColor, backgroundColor, }) => {
+    const errorColor = primaryColor || theme?.error || getColor('error');
+    return (_jsxs(ScreenContainer, { backgroundColor: backgroundColor || theme?.background, children: [_jsx(IconWithBadge, { icon: _jsx(AnimatedEmergency, { size: 48, color: errorColor }), iconBackgroundColor: "#FEE2E2", badge: _jsx(Text, { style: styles.badgeIcon, children: "!" }), badgeBackgroundColor: errorColor }), _jsx(StatusBadge, { text: "Critical", backgroundColor: "#FEE2E2", textColor: errorColor }), _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 }), incidentDetails && (_jsx(ContentCard, { title: "Incident Details", children: _jsx(Text, { style: styles.incidentText, children: incidentDetails }) })), onCheckStatus && (_jsx(PrimaryButton, { onPress: onCheckStatus, backgroundColor: errorColor, children: statusButtonText })), onGetUpdates && (_jsx(SecondaryButton, { onPress: onGetUpdates, children: updatesButtonText }))] }));
+};
+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,
+    },
+    incidentText: {
+        fontSize: 14,
+        color: '#6B7280',
+        lineHeight: 20,
+    },
+    badgeIcon: {
+        color: '#FFFFFF',
+        fontSize: 20,
+        fontWeight: '700',
+    },
+});
+export default EmergencyOutageScreen;

package/dist/screens/system/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/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/shared/ScreenContainer';
+import IconWithBadge from '../../components/icons/IconWithBadge';
+import StatusBadge from '../../components/shared/StatusBadge';
+import ContentCard from '../../components/shared/ContentCard';
+import PrimaryButton from '../../components/shared/PrimaryButton';
+import VersionDisplay from '../../components/shared/VersionDisplay';
+import AnimatedDownload from '../../components/icons/AnimatedDownload';
+import { getColor } from '../../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/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;

package/dist/screens/system/OptionalUpdateScreen.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, StyleSheet } from 'react-native';
+import ScreenContainer from '../../components/shared/ScreenContainer';
+import IconWithBadge from '../../components/icons/IconWithBadge';
+import ContentCard from '../../components/shared/ContentCard';
+import PrimaryButton from '../../components/shared/PrimaryButton';
+import SecondaryButton from '../../components/shared/SecondaryButton';
+import VersionDisplay from '../../components/shared/VersionDisplay';
+import AnimatedDownload from '../../components/icons/AnimatedDownload';
+import { getColor } from '../../client';
+/**
+ * Optional Update Screen
+ *
+ * Displayed when an optional update with new features is available.
+ */
+export const OptionalUpdateScreen = ({ title = 'New Features Available', description = 'Update now to enjoy exciting new capabilities and improvements.', currentVersion, newVersion, features, onUpdate, onMaybeLater, updateButtonText = 'Update Now', laterButtonText = 'Maybe Later', support, theme, primaryColor, backgroundColor, }) => {
+    const infoColor = primaryColor || theme?.primary || getColor('primary');
+    return (_jsxs(ScreenContainer, { backgroundColor: backgroundColor || theme?.background, children: [_jsx(IconWithBadge, { icon: _jsx(AnimatedDownload, { size: 48, color: infoColor }), iconBackgroundColor: "#DBEAFE", badge: _jsx(Text, { style: styles.badgeIcon, children: "\u2728" }), badgeBackgroundColor: infoColor }), _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: infoColor })), 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: infoColor, children: updateButtonText })), onMaybeLater && (_jsx(SecondaryButton, { onPress: onMaybeLater, children: laterButtonText }))] }));
+};
+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: {
+        fontSize: 16,
+    },
+});
+export default OptionalUpdateScreen;

package/dist/screens/system/PlannedMaintenanceScreen.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { PlannedMaintenanceScreenProps } from '../../types';
+/**
+ * Planned Maintenance Screen
+ *
+ * Displayed during scheduled maintenance.
+ */
+export declare const PlannedMaintenanceScreen: React.FC<PlannedMaintenanceScreenProps>;
+export default PlannedMaintenanceScreen;

package/dist/screens/system/PlannedMaintenanceScreen.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, StyleSheet } from 'react-native';
+import ScreenContainer from '../../components/shared/ScreenContainer';
+import IconWithBadge from '../../components/icons/IconWithBadge';
+import ContentCard from '../../components/shared/ContentCard';
+import PrimaryButton from '../../components/shared/PrimaryButton';
+import SecondaryButton from '../../components/shared/SecondaryButton';
+import CheckListItem from '../../components/shared/CheckListItem';
+import AnimatedWrench from '../../components/icons/AnimatedWrench';
+import { getColor } from '../../client';
+/**
+ * Planned Maintenance Screen
+ *
+ * Displayed during scheduled maintenance.
+ */
+export const PlannedMaintenanceScreen = ({ title = 'Service Temporarily Unavailable', description = 'We\'re experiencing technical difficulties and working to resolve them.', 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(AnimatedWrench, { size: 48, color: warningColor }), iconBackgroundColor: "#FEF3C7", badge: _jsx(Text, { style: styles.badgeIcon, children: "\uD83D\uDD50" }), badgeBackgroundColor: 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 PlannedMaintenanceScreen;

package/dist/screens/system/SecurityUpdateScreen.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { SecurityUpdateScreenProps } from '../../types';
+/**
+ * Critical Security Update Screen
+ *
+ * Displayed when a critical security update is required.
+ */
+export declare const SecurityUpdateScreen: React.FC<SecurityUpdateScreenProps>;
+export default SecurityUpdateScreen;

package/dist/screens/system/SecurityUpdateScreen.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, StyleSheet } from 'react-native';
+import ScreenContainer from '../../components/shared/ScreenContainer';
+import IconWithBadge from '../../components/icons/IconWithBadge';
+import StatusBadge from '../../components/shared/StatusBadge';
+import ContentCard from '../../components/shared/ContentCard';
+import PrimaryButton from '../../components/shared/PrimaryButton';
+import VersionDisplay from '../../components/shared/VersionDisplay';
+import AnimatedDownload from '../../components/icons/AnimatedDownload';
+import { getColor } from '../../client';
+/**
+ * Critical Security Update Screen
+ *
+ * Displayed when a critical security update is required.
+ */
+export const SecurityUpdateScreen = ({ title = 'Critical Security Update', description = 'This update is required for your security', currentVersion, newVersion, features, releaseNotes, 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(Text, { style: styles.shieldIcon, children: "\uD83D\uDEE1\uFE0F" }), iconBackgroundColor: "#FED7AA", badge: _jsx(AnimatedDownload, { size: 20, color: "#FFFFFF" }), badgeBackgroundColor: "#3B82F6" }), _jsx(StatusBadge, { text: "Security", 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: [feature.icon || '•', " ", feature.title, feature.description && (_jsxs(Text, { style: styles.featureDescription, children: ['\n', feature.description] }))] }, index))) })), releaseNotes && (_jsx(ContentCard, { title: "Release Notes", children: _jsx(Text, { style: styles.releaseNotesText, children: releaseNotes }) })), onUpdate && (_jsx(PrimaryButton, { onPress: onUpdate, backgroundColor: warningColor, children: updateButtonText })), _jsx(Text, { style: styles.footerText, children: "This update is required to continue using the app" })] }));
+};
+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,
+    },
+    shieldIcon: {
+        fontSize: 48,
+    },
+    featureText: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#1F2937',
+        lineHeight: 20,
+        marginBottom: 12,
+    },
+    featureDescription: {
+        fontSize: 14,
+        fontWeight: '400',
+        color: '#6B7280',
+    },
+    releaseNotesText: {
+        fontSize: 14,
+        color: '#6B7280',
+        lineHeight: 20,
+    },
+    footerText: {
+        fontSize: 12,
+        color: '#9CA3AF',
+        textAlign: 'center',
+        marginTop: 8,
+    },
+});
+export default SecurityUpdateScreen;

package/dist/screens/system/ServiceUnavailableScreen.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ThemeColors } from '../../types';
+export interface ServiceUnavailableScreenProps {
+    title?: string;
+    description?: string;
+    statusMessages?: string[];
+    onCheckAgain?: () => void;
+    onNotifyMe?: () => void;
+    checkButtonText?: string;
+    notifyButtonText?: string;
+    theme?: ThemeColors;
+    backgroundColor?: string;
+}
+declare const ServiceUnavailableScreen: React.FC<ServiceUnavailableScreenProps>;
+export default ServiceUnavailableScreen;