@codeimplants/ui-kit 1.0.0

package/dist/screens/system/ServiceUnavailableScreen.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, ScrollView, Animated } from 'react-native';
+import IconWithBadge from '../../components/icons/IconWithBadge';
+import AnimatedWrench from '../../components/icons/AnimatedWrench';
+import ClockBadge from '../../components/icons/ClockBadge';
+import StatusCheckList from '../../components/shared/StatusCheckList';
+import DualButtonLayout from '../../components/shared/DualButtonLayout';
+const ServiceUnavailableScreen = ({ title = 'Service Temporarily Unavailable', description = "We're experiencing technical difficulties and working to resolve them.", statusMessages, onCheckAgain, onNotifyMe, checkButtonText = 'Check Again', notifyButtonText = 'Notify Me When Back', theme, backgroundColor, }) => {
+    const fadeAnim = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        Animated.timing(fadeAnim, {
+            toValue: 1,
+            duration: 600,
+            useNativeDriver: true,
+        }).start();
+    }, []);
+    const defaultStatusMessages = statusMessages || [
+        'Our team is actively working on this',
+        'Your data is safe and secure',
+        "We'll be back as soon as possible",
+    ];
+    const bgColor = backgroundColor || theme?.background || '#FFFFFF';
+    return (_jsx(View, { style: [styles.container, { backgroundColor: bgColor }], children: _jsx(ScrollView, { contentContainerStyle: styles.scrollContent, showsVerticalScrollIndicator: false, children: _jsxs(Animated.View, { style: { opacity: fadeAnim }, children: [_jsx(View, { style: styles.iconSection, children: _jsx(IconWithBadge, { icon: _jsx(AnimatedWrench, { size: 60, color: "#F59E0B" }), badge: _jsx(ClockBadge, { size: 48 }), size: 120, backgroundColor: "#FEF3C7" }) }), _jsx(Text, { style: styles.title, children: title }), _jsx(Text, { style: styles.description, children: description }), _jsx(StatusCheckList, { messages: defaultStatusMessages }), (onCheckAgain || onNotifyMe) && (_jsx(DualButtonLayout, { primaryText: checkButtonText, primaryAction: onCheckAgain || (() => { }), primaryIcon: "\uD83D\uDD04", secondaryText: notifyButtonText, secondaryAction: onNotifyMe || (() => { }), secondaryIcon: "\uD83D\uDD14", layout: "vertical", theme: theme }))] }) }) }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    scrollContent: {
+        alignItems: 'center',
+        paddingHorizontal: 32,
+        paddingVertical: 60,
+    },
+    iconSection: {
+        marginBottom: 24,
+    },
+    title: {
+        fontSize: 28,
+        fontWeight: '700',
+        color: '#1F2937',
+        textAlign: 'center',
+        marginBottom: 12,
+    },
+    description: {
+        fontSize: 16,
+        color: '#6B7280',
+        textAlign: 'center',
+        lineHeight: 24,
+        marginBottom: 32,
+    },
+});
+export default ServiceUnavailableScreen;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { SoftUpdateScreenProps } from '../../types';
+/**
+ * Soft Update Screen
+ *
+ * Displayed when a soft update is available (user can skip).
+ */
+export declare const SoftUpdateScreen: React.FC<SoftUpdateScreenProps>;
+export default SoftUpdateScreen;

package/dist/screens/system/SoftUpdateScreen.js

@@ -0,0 +1,55 @@
+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';
+/**
+ * Soft Update Screen
+ *
+ * Displayed when a soft update is available (user can skip).
+ */
+export const SoftUpdateScreen = ({ title = 'Update Available', description = 'A new version is available with improvements and bug fixes.', currentVersion, newVersion, features, onUpdate, onRemindLater, onSkip, updateButtonText = 'Update Now', remindButtonText = 'Remind Later', skipButtonText = 'Skip', 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: "\u2139" }), 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 })), onRemindLater && (_jsx(SecondaryButton, { onPress: onRemindLater, children: remindButtonText })), onSkip && (_jsx(Text, { style: styles.skipText, onPress: onSkip, children: skipButtonText }))] }));
+};
+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: 16,
+        fontWeight: '700',
+    },
+    skipText: {
+        fontSize: 14,
+        color: '#6B7280',
+        textAlign: 'center',
+        textDecorationLine: 'underline',
+    },
+});
+export default SoftUpdateScreen;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { MaintenanceScreenProps } from '../../types';
+/**
+ * System Maintenance Screen Component
+ *
+ * Fully customizable maintenance screen.
+ * All content, countdown, actions, and support are configurable via props.
+ */
+export declare const SystemMaintenanceScreen: React.FC<MaintenanceScreenProps>;

package/dist/screens/system/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/shared/SupportButtons';
+import AnimatedWrench from '../../components/icons/AnimatedWrench';
+import { getColor, getColorWithOpacity, isWeb } from '../../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/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/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/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 CheckListItem from '../../components/shared/CheckListItem';
+import AnimatedAlert from '../../components/icons/AnimatedAlert';
+import { getColor } from '../../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/index.d.ts

@@ -0,0 +1,2 @@
+export * from './updates';
+export * from './maintenance';

package/dist/screens/system/index.js

@@ -0,0 +1,3 @@
+// System Screens - Barrel Export
+export * from './updates';
+export * from './maintenance';

package/dist/screens/system/maintenance/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/maintenance/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/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 AnimatedEmergency from '../../../components/icons/animated/maintenance/AnimatedEmergency';
+import { getColor } from '../../../utils/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/maintenance/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/maintenance/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/layout/ScreenContainer';
+import IconWithBadge from '../../../components/icons/utilities/IconWithBadge';
+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 AnimatedWrench from '../../../components/icons/animated/maintenance/AnimatedWrench';
+import { getColor } from '../../../utils/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/maintenance/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;

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

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, ScrollView, Animated } from 'react-native';
+import IconWithBadge from '../../../components/icons/utilities/IconWithBadge';
+import AnimatedWrench from '../../../components/icons/animated/maintenance/AnimatedWrench';
+import ClockBadge from '../../../components/icons/badges/ClockBadge';
+import StatusCheckList from '../../../components/lists/StatusCheckList';
+import DualButtonLayout from '../../../components/layout/DualButtonLayout';
+const ServiceUnavailableScreen = ({ title = 'Service Temporarily Unavailable', description = "We're experiencing technical difficulties and working to resolve them.", statusMessages, onCheckAgain, onNotifyMe, checkButtonText = 'Check Again', notifyButtonText = 'Notify Me When Back', theme, backgroundColor, }) => {
+    const fadeAnim = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        Animated.timing(fadeAnim, {
+            toValue: 1,
+            duration: 600,
+            useNativeDriver: true,
+        }).start();
+    }, []);
+    const defaultStatusMessages = statusMessages || [
+        'Our team is actively working on this',
+        'Your data is safe and secure',
+        "We'll be back as soon as possible",
+    ];
+    const bgColor = backgroundColor || theme?.background || '#FFFFFF';
+    return (_jsx(View, { style: [styles.container, { backgroundColor: bgColor }], children: _jsx(ScrollView, { contentContainerStyle: styles.scrollContent, showsVerticalScrollIndicator: false, children: _jsxs(Animated.View, { style: { opacity: fadeAnim }, children: [_jsx(View, { style: styles.iconSection, children: _jsx(IconWithBadge, { icon: _jsx(AnimatedWrench, { size: 60, color: "#F59E0B" }), badge: _jsx(ClockBadge, { size: 48 }), size: 120, backgroundColor: "#FEF3C7" }) }), _jsx(Text, { style: styles.title, children: title }), _jsx(Text, { style: styles.description, children: description }), _jsx(StatusCheckList, { messages: defaultStatusMessages }), (onCheckAgain || onNotifyMe) && (_jsx(DualButtonLayout, { primaryText: checkButtonText, primaryAction: onCheckAgain || (() => { }), primaryIcon: "\uD83D\uDD04", secondaryText: notifyButtonText, secondaryAction: onNotifyMe || (() => { }), secondaryIcon: "\uD83D\uDD14", layout: "vertical", theme: theme }))] }) }) }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    scrollContent: {
+        alignItems: 'center',
+        paddingHorizontal: 32,
+        paddingVertical: 60,
+    },
+    iconSection: {
+        marginBottom: 24,
+    },
+    title: {
+        fontSize: 28,
+        fontWeight: '700',
+        color: '#1F2937',
+        textAlign: 'center',
+        marginBottom: 12,
+    },
+    description: {
+        fontSize: 16,
+        color: '#6B7280',
+        textAlign: 'center',
+        lineHeight: 24,
+        marginBottom: 32,
+    },
+});
+export default ServiceUnavailableScreen;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { MaintenanceScreenProps } from '../../../types';
+/**
+ * System Maintenance Screen Component
+ *
+ * Fully customizable maintenance screen.
+ * All content, countdown, actions, and support are configurable via props.
+ */
+export declare const SystemMaintenanceScreen: React.FC<MaintenanceScreenProps>;