@codeimplants/ui-kit 1.0.0

package/dist/index.js

@@ -0,0 +1,103 @@
+// ============================================================================
+// Cross-Platform UI Kit - Main Export
+// ============================================================================
+// Export all types
+export * from './types';
+// Export all client utilities
+export * from './utils';
+// ============================================================================
+// Error Handling Screens
+// ============================================================================
+export { ErrorBoundaryScreen } from './screens/errors/ErrorBoundaryScreen';
+export { ServerErrorScreen } from './screens/errors/ServerErrorScreen';
+export { ClientErrorScreen } from './screens/errors/ClientErrorScreen';
+export { InvalidResponseScreen } from './screens/errors/InvalidResponseScreen';
+export { ApiErrorScreen } from './screens/errors/ApiErrorScreen';
+// ============================================================================
+// Network & Connectivity Screens
+// ============================================================================
+export { NetworkOfflineScreen } from './screens/network/NetworkOfflineScreen';
+export { NetworkSlowConnectionScreen } from './screens/network/NetworkSlowConnectionScreen';
+export { ApiTimeoutScreen } from './screens/network/ApiTimeoutScreen';
+// ============================================================================
+// Permission Screens
+// ============================================================================
+export { PermissionScreen } from './screens/permissions/PermissionScreen';
+export { PermissionDeniedScreen } from './screens/permissions/PermissionDeniedScreen';
+export { PermissionRequestScreen, MultiPermissionRequestScreen } from './screens/permissions/PermissionRequestScreen';
+// ============================================================================
+// System Screens
+// ============================================================================
+// Update Screens
+export { SoftUpdateScreen } from './screens/system/updates/SoftUpdateScreen';
+export { OptionalUpdateScreen } from './screens/system/updates/OptionalUpdateScreen';
+export { ForceUpdateScreen } from './screens/system/updates/ForceUpdateScreen';
+export { SecurityUpdateScreen } from './screens/system/updates/SecurityUpdateScreen';
+export { AppUpdateScreen } from './screens/system/updates/AppUpdateScreen';
+// Maintenance Screens
+export { PlannedMaintenanceScreen } from './screens/system/maintenance/PlannedMaintenanceScreen';
+export { UnplannedOutageScreen } from './screens/system/maintenance/UnplannedOutageScreen';
+export { EmergencyOutageScreen } from './screens/system/maintenance/EmergencyOutageScreen';
+export { SystemMaintenanceScreen } from './screens/system/maintenance/SystemMaintenanceScreen';
+export { default as ServiceUnavailableScreen } from './screens/system/maintenance/ServiceUnavailableScreen';
+// ============================================================================
+// Shared Design System Components
+// ============================================================================
+export { default as ScreenContainer } from './components/layout/ScreenContainer';
+export { default as IconWithBadge } from './components/icons/utilities/IconWithBadge';
+export { default as ContentCard } from './components/cards/ContentCard';
+export { default as PrimaryButton } from './components/buttons/PrimaryButton';
+export { default as SecondaryButton } from './components/buttons/SecondaryButton';
+export { default as CheckListItem } from './components/lists/CheckListItem';
+export { default as StatusBadge } from './components/feedback/StatusBadge';
+export { default as VersionDisplay } from './components/status/VersionDisplay';
+// Other Shared Components
+export { default as SupportButtons } from './components/support/SupportButtons';
+export { default as RetryCounter } from './components/timers/RetryCounter';
+export { default as DualButtonLayout } from './components/layout/DualButtonLayout';
+export { default as TopBanner } from './components/feedback/TopBanner';
+export { default as ExpandableSection } from './components/feedback/ExpandableSection';
+export { default as WhatsNewCard } from './components/cards/WhatsNewCard';
+export { default as StatusCheckList } from './components/lists/StatusCheckList';
+export { default as CountdownTimer } from './components/timers/CountdownTimer';
+export { default as InfoCard } from './components/cards/InfoCard';
+export { default as WarningCard } from './components/cards/WarningCard';
+export { default as SecurityBanner } from './components/feedback/SecurityBanner';
+// ============================================================================
+// Animated Icons
+// ============================================================================
+// Network Icons
+export { default as AnimatedWifiOff } from './components/icons/animated/network/AnimatedWifiOff';
+export { default as AnimatedSpeedGauge } from './components/icons/animated/network/AnimatedSpeedGauge';
+export { default as AnimatedTimeout } from './components/icons/animated/network/AnimatedTimeout';
+// Error Icons
+export { default as AnimatedCrash } from './components/icons/animated/errors/AnimatedCrash';
+export { default as AnimatedServerError } from './components/icons/animated/errors/AnimatedServerError';
+export { default as AnimatedClientError } from './components/icons/animated/errors/AnimatedClientError';
+export { default as AnimatedInvalidData } from './components/icons/animated/errors/AnimatedInvalidData';
+// Permission Icons
+export { default as AnimatedPermission } from './components/icons/animated/permissions/AnimatedPermission';
+export { default as AnimatedPermissionDenied } from './components/icons/animated/permissions/AnimatedPermissionDenied';
+// Maintenance Icons
+export { default as AnimatedAlert } from './components/icons/animated/maintenance/AnimatedAlert';
+export { default as AnimatedEmergency } from './components/icons/animated/maintenance/AnimatedEmergency';
+export { default as AnimatedWrench } from './components/icons/animated/maintenance/AnimatedWrench';
+// Other Icons
+export { default as AnimatedClock } from './components/icons/animated/general/AnimatedClock';
+export { default as AnimatedWarning } from './components/icons/animated/general/AnimatedWarning';
+export { default as AnimatedShield } from './components/icons/animated/general/AnimatedShield';
+export { default as AnimatedCalendar } from './components/icons/animated/general/AnimatedCalendar';
+export { default as AnimatedDocument } from './components/icons/animated/general/AnimatedDocument';
+export { default as AnimatedCamera } from './components/icons/animated/general/AnimatedCamera';
+export { default as AnimatedLightning } from './components/icons/animated/general/AnimatedLightning';
+export { default as AnimatedLocationPin } from './components/icons/animated/general/AnimatedLocationPin';
+export { default as AnimatedSparkle } from './components/icons/animated/general/AnimatedSparkle';
+export { default as AnimatedDownload } from './components/icons/animated/general/AnimatedDownload';
+// Icon Badges
+export { default as DownloadBadge } from './components/icons/badges/DownloadBadge';
+export { default as ClockBadge } from './components/icons/badges/ClockBadge';
+export { default as XBadge } from './components/icons/badges/XBadge';
+// ============================================================================
+// Adapter Layer
+// ============================================================================
+export { createSupportHandler, createRetryHandler, createErrorContext, } from './adapters/supportAdapter';

package/dist/screens/errors/ApiErrorScreen.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ApiErrorScreenProps } from '../../types';
+/**
+ * ApiErrorScreen Component
+ * 100% design fidelity port from error-ui-kit
+ */
+export declare const ApiErrorScreen: React.FC<ApiErrorScreenProps>;

package/dist/screens/errors/ApiErrorScreen.js

@@ -0,0 +1,166 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView, Animated, } from 'react-native';
+import PrimaryButton from '../../components/buttons/PrimaryButton';
+import SupportButtons from '../../components/support/SupportButtons';
+import AnimatedServerError from '../../components/icons/animated/errors/AnimatedServerError';
+import AnimatedAlert from '../../components/icons/animated/maintenance/AnimatedAlert';
+import AnimatedTimeout from '../../components/icons/animated/network/AnimatedTimeout';
+import { getColor, getColorWithOpacity } from '../../utils/client';
+/**
+ * Error configurations matching error-ui-kit design
+ */
+const errorConfigs = {
+    timeout: {
+        icon: AnimatedTimeout,
+        title: 'Request Timed Out',
+        description: 'The server is taking too long to respond. This might be due to high traffic or slow connection.',
+        color: getColor('warning'),
+        bgColor: getColorWithOpacity(getColor('warning'), 0.1),
+    },
+    server_error: {
+        icon: AnimatedServerError,
+        title: 'Server Error',
+        description: 'Something went wrong on our end. Our team has been notified and is working on a fix.',
+        color: getColor('error'),
+        bgColor: getColorWithOpacity(getColor('error'), 0.1),
+    },
+    client_error: {
+        icon: AnimatedAlert,
+        title: 'Request Failed',
+        description: 'There was an issue with your request. Please try again or contact support if the problem persists.',
+        color: getColor('error'),
+        bgColor: getColorWithOpacity(getColor('error'), 0.1),
+    },
+    invalid_response: {
+        icon: AnimatedAlert,
+        title: 'Invalid Response',
+        description: 'We received an unexpected response from the server. This is usually temporary.',
+        color: getColor('warning'),
+        bgColor: getColorWithOpacity(getColor('warning'), 0.1),
+    },
+    network_error: {
+        icon: AnimatedAlert,
+        title: 'Connection Error',
+        description: 'Unable to reach our servers. Please check your internet connection.',
+        color: getColor('offline'),
+        bgColor: getColorWithOpacity(getColor('offline'), 0.1),
+    },
+};
+/**
+ * ApiErrorScreen Component
+ * 100% design fidelity port from error-ui-kit
+ */
+export const ApiErrorScreen = ({ 
+// Content customization
+title, description, icon, iconColor, iconBackgroundColor, 
+// Actions
+onRetry, 
+// Button configuration
+retryButtonText = 'Try Again', showRetryButton = true, 
+// Support
+support, supportVariant = 'icon-only', 
+// Additional info
+statusCode, errorCode, errorType = 'server_error', 
+// Styling
+theme, primaryColor, backgroundColor, }) => {
+    const config = errorConfigs[errorType];
+    const IconComponent = icon || config.icon;
+    const finalIconColor = iconColor || theme?.error || config.color;
+    const finalIconBgColor = iconBackgroundColor || theme?.surface || config.bgColor;
+    const finalPrimaryColor = primaryColor || theme?.primary || getColor('primary');
+    const finalBgColor = backgroundColor || theme?.background || '#FFFFFF';
+    // Animation values
+    const scaleAnim = React.useRef(new Animated.Value(0)).current;
+    const fadeAnim = React.useRef(new Animated.Value(0)).current;
+    React.useEffect(() => {
+        Animated.parallel([
+            Animated.spring(scaleAnim, {
+                toValue: 1,
+                tension: 50,
+                friction: 7,
+                useNativeDriver: true,
+            }),
+            Animated.timing(fadeAnim, {
+                toValue: 1,
+                duration: 400,
+                useNativeDriver: true,
+            }),
+        ]).start();
+    }, []);
+    return (_jsx(ScrollView, { style: [styles.container, { backgroundColor: finalBgColor }], contentContainerStyle: styles.contentContainer, children: _jsxs(Animated.View, { style: [
+                styles.content,
+                {
+                    opacity: fadeAnim,
+                    transform: [{ scale: scaleAnim }],
+                },
+            ], children: [_jsx(View, { style: [
+                        styles.iconContainer,
+                        { backgroundColor: finalIconBgColor },
+                    ], children: typeof IconComponent === 'function' ? (_jsx(IconComponent, { size: 40, color: finalIconColor })) : (IconComponent) }), statusCode && (_jsx(View, { style: [
+                        styles.badge,
+                        { backgroundColor: finalIconBgColor },
+                    ], children: _jsxs(Text, { style: [
+                            styles.badgeText,
+                            { color: finalIconColor },
+                        ], children: ["Error ", statusCode] }) })), _jsx(Text, { style: [styles.title, theme?.textPrimary ? { color: theme.textPrimary } : undefined], children: title || config.title }), _jsx(Text, { style: [styles.description, theme?.textSecondary ? { color: theme.textSecondary } : undefined], children: description || config.description }), showRetryButton && onRetry && (_jsx(View, { style: styles.buttonContainer, children: _jsx(PrimaryButton, { onPress: onRetry, backgroundColor: finalPrimaryColor, children: retryButtonText }) })), support && (_jsx(View, { style: styles.supportContainer, children: _jsx(SupportButtons, { support: support, variant: supportVariant, theme: theme }) }))] }) }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    contentContainer: {
+        flexGrow: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 16,
+    },
+    content: {
+        maxWidth: 400,
+        width: '100%',
+        alignItems: 'center',
+    },
+    iconContainer: {
+        width: 80,
+        height: 80,
+        borderRadius: 40,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginBottom: 24,
+    },
+    badge: {
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        borderRadius: 16,
+        marginBottom: 16,
+    },
+    badgeText: {
+        fontSize: 14,
+        fontWeight: '600',
+        fontFamily: 'monospace',
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        textAlign: 'center',
+        marginBottom: 12,
+        color: '#111827',
+    },
+    description: {
+        fontSize: 16,
+        textAlign: 'center',
+        marginBottom: 24,
+        color: '#6B7280',
+        lineHeight: 24,
+    },
+    buttonContainer: {
+        width: '100%',
+        marginBottom: 24,
+    },
+    retryButton: {
+        width: '100%',
+    },
+    supportContainer: {
+        marginTop: 8,
+    },
+});

package/dist/screens/errors/ClientErrorScreen.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ClientErrorScreenProps } from '../../types';
+/**
+ * Client Error Screen (4xx errors)
+ *
+ * Displayed when the client makes an invalid request.
+ */
+export declare const ClientErrorScreen: React.FC<ClientErrorScreenProps>;
+export default ClientErrorScreen;

package/dist/screens/errors/ClientErrorScreen.js

@@ -0,0 +1,75 @@
+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 PrimaryButton from '../../components/buttons/PrimaryButton';
+import SecondaryButton from '../../components/buttons/SecondaryButton';
+import AnimatedClientError from '../../components/icons/animated/errors/AnimatedClientError';
+import { getColor } from '../../utils/client';
+/**
+ * Client Error Screen (4xx errors)
+ *
+ * Displayed when the client makes an invalid request.
+ */
+export const ClientErrorScreen = ({ title, description, statusCode = 404, onGoBack, onHome, goBackButtonText = 'Go Back', homeButtonText = 'Go Home', support, theme, primaryColor, backgroundColor, }) => {
+    const warningColor = primaryColor || theme?.warning || getColor('warning');
+    // Get default content based on status code
+    const getDefaultContent = () => {
+        switch (statusCode) {
+            case 400:
+                return {
+                    title: 'Bad Request',
+                    description: 'The request could not be understood. Please check and try again.',
+                };
+            case 401:
+                return {
+                    title: 'Unauthorized',
+                    description: 'You need to sign in to access this resource.',
+                };
+            case 403:
+                return {
+                    title: 'Access Denied',
+                    description: 'You don\'t have permission to access this resource.',
+                };
+            case 404:
+                return {
+                    title: 'Page Not Found',
+                    description: 'The page you\'re looking for doesn\'t exist or has been moved.',
+                };
+            default:
+                return {
+                    title: 'Client Error',
+                    description: 'There was a problem with your request. Please try again.',
+                };
+        }
+    };
+    const defaultContent = getDefaultContent();
+    const finalTitle = title || defaultContent.title;
+    const finalDescription = description || defaultContent.description;
+    return (_jsxs(ScreenContainer, { backgroundColor: backgroundColor || theme?.background, children: [_jsx(IconWithBadge, { icon: _jsx(AnimatedClientError, { size: 48, color: warningColor }), iconBackgroundColor: "#FED7AA", badge: _jsx(Text, { style: styles.badgeIcon, children: "!" }), badgeBackgroundColor: warningColor }), _jsx(StatusBadge, { text: `Error ${statusCode}`, backgroundColor: "#FED7AA", textColor: warningColor }), _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 }), onGoBack && (_jsx(PrimaryButton, { onPress: onGoBack, backgroundColor: warningColor, children: goBackButtonText })), onHome && (_jsx(SecondaryButton, { onPress: onHome, children: homeButtonText }))] }));
+};
+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: {
+        color: '#FFFFFF',
+        fontSize: 20,
+        fontWeight: '700',
+    },
+});
+export default ClientErrorScreen;

package/dist/screens/errors/ErrorBoundaryScreen.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ErrorFallbackProps } from '../../types';
+/**
+ * App Crash Screen (Error Boundary Screen)
+ *
+ * Displayed when the app encounters an unhandled error.
+ */
+export declare const ErrorBoundaryScreen: React.FC<ErrorFallbackProps>;
+export default ErrorBoundaryScreen;

package/dist/screens/errors/ErrorBoundaryScreen.js

@@ -0,0 +1,43 @@
+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 AnimatedCrash from '../../components/icons/animated/errors/AnimatedCrash';
+import { getColor } from '../../utils/client';
+/**
+ * App Crash Screen (Error Boundary Screen)
+ *
+ * Displayed when the app encounters an unhandled error.
+ */
+export const ErrorBoundaryScreen = ({ title = 'Something Went Wrong', description = 'The app encountered an unexpected error. We apologize for the inconvenience.', onReset, onHome, resetButtonText = 'Restart App', homeButtonText = 'Go Home', support, theme, }) => {
+    const errorColor = theme?.error || getColor('error');
+    return (_jsxs(ScreenContainer, { backgroundColor: theme?.background, children: [_jsx(IconWithBadge, { icon: _jsx(AnimatedCrash, { size: 48, color: errorColor }), iconBackgroundColor: "#FEE2E2", badge: _jsx(Text, { style: styles.badgeIcon, children: "\u2715" }), badgeBackgroundColor: 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 }), _jsxs(ContentCard, { title: "What happened?", children: [_jsx(CheckListItem, { text: "An unexpected error occurred" }), _jsx(CheckListItem, { text: "Your data is safe" }), _jsx(CheckListItem, { text: "Restarting should fix the issue" })] }), onReset && (_jsx(PrimaryButton, { onPress: onReset, backgroundColor: errorColor, children: resetButtonText })), onHome && (_jsx(SecondaryButton, { onPress: onHome, children: homeButtonText }))] }));
+};
+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: {
+        color: '#FFFFFF',
+        fontSize: 20,
+        fontWeight: '700',
+    },
+});
+export default ErrorBoundaryScreen;

package/dist/screens/errors/InvalidResponseScreen.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { InvalidResponseScreenProps } from '../../types';
+/**
+ * Invalid Response Screen
+ *
+ * Displayed when the server returns invalid or corrupted data.
+ */
+export declare const InvalidResponseScreen: React.FC<InvalidResponseScreenProps>;
+export default InvalidResponseScreen;

package/dist/screens/errors/InvalidResponseScreen.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/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 AnimatedInvalidData from '../../components/icons/animated/errors/AnimatedInvalidData';
+import { getColor } from '../../utils/client';
+/**
+ * Invalid Response Screen
+ *
+ * Displayed when the server returns invalid or corrupted data.
+ */
+export const InvalidResponseScreen = ({ title = 'Invalid Response', description = 'The server returned data that couldn\'t be processed. Please try again.', onRetry, onReportError, retryButtonText = 'Try Again', reportButtonText = 'Report Issue', support, theme, primaryColor, backgroundColor, }) => {
+    const errorColor = primaryColor || theme?.error || getColor('error');
+    return (_jsxs(ScreenContainer, { backgroundColor: backgroundColor || theme?.background, children: [_jsx(IconWithBadge, { icon: _jsx(AnimatedInvalidData, { size: 48, color: errorColor }), iconBackgroundColor: "#FEE2E2", badge: _jsx(Text, { style: styles.badgeIcon, children: "?" }), badgeBackgroundColor: 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 }), _jsx(ContentCard, { title: "What happened?", children: _jsx(Text, { style: styles.cardText, children: "The data received from the server was invalid or corrupted. This is usually a temporary issue." }) }), onRetry && (_jsx(PrimaryButton, { onPress: onRetry, backgroundColor: errorColor, children: retryButtonText })), onReportError && (_jsx(SecondaryButton, { onPress: onReportError, children: reportButtonText }))] }));
+};
+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,
+    },
+    cardText: {
+        fontSize: 14,
+        color: '#6B7280',
+        lineHeight: 20,
+    },
+    badgeIcon: {
+        color: '#FFFFFF',
+        fontSize: 20,
+        fontWeight: '700',
+    },
+});
+export default InvalidResponseScreen;

package/dist/screens/errors/ServerErrorScreen.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ServerErrorScreenProps } from '../../types';
+/**
+ * Server Error Screen (5xx errors)
+ *
+ * Displayed when the server encounters an error.
+ */
+export declare const ServerErrorScreen: React.FC<ServerErrorScreenProps>;
+export default ServerErrorScreen;

package/dist/screens/errors/ServerErrorScreen.js

@@ -0,0 +1,72 @@
+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 AnimatedServerError from '../../components/icons/animated/errors/AnimatedServerError';
+import { getColor } from '../../utils/client';
+/**
+ * Server Error Screen (5xx errors)
+ *
+ * Displayed when the server encounters an error.
+ */
+export const ServerErrorScreen = ({ title, description, statusCode = 500, onRetry, onHome, retryButtonText = 'Try Again', homeButtonText = 'Go Home', support, theme, primaryColor, backgroundColor, }) => {
+    const errorColor = primaryColor || theme?.error || getColor('error');
+    // Get default content based on status code
+    const getDefaultContent = () => {
+        switch (statusCode) {
+            case 502:
+                return {
+                    title: 'Bad Gateway',
+                    description: 'The server received an invalid response. Please try again in a moment.',
+                };
+            case 503:
+                return {
+                    title: 'Service Unavailable',
+                    description: 'The server is temporarily unable to handle your request. Please try again later.',
+                };
+            case 504:
+                return {
+                    title: 'Gateway Timeout',
+                    description: 'The server took too long to respond. Please try again.',
+                };
+            default:
+                return {
+                    title: 'Server Error',
+                    description: 'Something went wrong on our end. We\'re working to fix it.',
+                };
+        }
+    };
+    const defaultContent = getDefaultContent();
+    const finalTitle = title || defaultContent.title;
+    const finalDescription = description || defaultContent.description;
+    return (_jsxs(ScreenContainer, { backgroundColor: backgroundColor || theme?.background, children: [_jsx(IconWithBadge, { icon: _jsx(AnimatedServerError, { size: 48, color: errorColor }), iconBackgroundColor: "#FEE2E2", badge: _jsx(Text, { style: styles.badgeIcon, children: "!" }), badgeBackgroundColor: errorColor }), _jsx(StatusBadge, { text: `Error ${statusCode}`, backgroundColor: "#FEE2E2", textColor: errorColor }), _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 }), _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" })] }), onRetry && (_jsx(PrimaryButton, { onPress: onRetry, backgroundColor: errorColor, children: retryButtonText })), onHome && (_jsx(SecondaryButton, { onPress: onHome, children: homeButtonText }))] }));
+};
+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: {
+        color: '#FFFFFF',
+        fontSize: 20,
+        fontWeight: '700',
+    },
+});
+export default ServerErrorScreen;

package/dist/screens/errors/index.d.ts

@@ -0,0 +1,5 @@
+export { ErrorBoundaryScreen } from './ErrorBoundaryScreen';
+export { ServerErrorScreen } from './ServerErrorScreen';
+export { ClientErrorScreen } from './ClientErrorScreen';
+export { InvalidResponseScreen } from './InvalidResponseScreen';
+export { ApiErrorScreen } from './ApiErrorScreen';

package/dist/screens/errors/index.js

@@ -0,0 +1,6 @@
+// Error Screens - Barrel Export
+export { ErrorBoundaryScreen } from './ErrorBoundaryScreen';
+export { ServerErrorScreen } from './ServerErrorScreen';
+export { ClientErrorScreen } from './ClientErrorScreen';
+export { InvalidResponseScreen } from './InvalidResponseScreen';
+export { ApiErrorScreen } from './ApiErrorScreen';

package/dist/screens/index.d.ts

@@ -0,0 +1,4 @@
+export * from './errors';
+export * from './network';
+export * from './permissions';
+export * from './system';

package/dist/screens/index.js

@@ -0,0 +1,5 @@
+// All Screens - Barrel Export
+export * from './errors';
+export * from './network';
+export * from './permissions';
+export * from './system';

package/dist/screens/network/ApiTimeoutScreen.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ApiTimeoutScreenProps } from '../../types';
+/**
+ * API Timeout Screen
+ *
+ * Displayed when an API request times out.
+ */
+export declare const ApiTimeoutScreen: React.FC<ApiTimeoutScreenProps>;
+export default ApiTimeoutScreen;

package/dist/screens/network/ApiTimeoutScreen.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/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 AnimatedTimeout from '../../components/icons/animated/network/AnimatedTimeout';
+import { getColor } from '../../utils/client';
+/**
+ * API Timeout Screen
+ *
+ * Displayed when an API request times out.
+ */
+export const ApiTimeoutScreen = ({ title = 'Request Timed Out', description = 'The server took too long to respond. Please try again.', onRetry, onHome, retryButtonText = 'Try Again', homeButtonText = 'Go Home', support, theme, primaryColor, backgroundColor, }) => {
+    const warningColor = primaryColor || theme?.warning || getColor('warning');
+    return (_jsxs(ScreenContainer, { backgroundColor: backgroundColor || theme?.background, children: [_jsx(IconWithBadge, { icon: _jsx(AnimatedTimeout, { size: 48, color: warningColor }), iconBackgroundColor: "#FED7AA", badge: _jsx(Text, { style: styles.badgeIcon, children: "!" }), 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 }), _jsx(ContentCard, { title: "What happened?", children: _jsx(Text, { style: styles.cardText, children: "The request took longer than expected. This could be due to slow network or server issues." }) }), onRetry && (_jsx(PrimaryButton, { onPress: onRetry, backgroundColor: warningColor, children: retryButtonText })), onHome && (_jsx(SecondaryButton, { onPress: onHome, children: homeButtonText }))] }));
+};
+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,
+    },
+    cardText: {
+        fontSize: 14,
+        color: '#6B7280',
+        lineHeight: 20,
+    },
+    badgeIcon: {
+        color: '#FFFFFF',
+        fontSize: 20,
+        fontWeight: '700',
+    },
+});
+export default ApiTimeoutScreen;