@codeimplants/ui-kit 1.0.0

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { NetworkOfflineScreenProps } from '../../types';
+/**
+ * Network Offline Screen
+ *
+ * Displayed when the device has no internet connection.
+ */
+export declare const NetworkOfflineScreen: React.FC<NetworkOfflineScreenProps>;
+export default NetworkOfflineScreen;

package/dist/screens/network/NetworkOfflineScreen.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, StyleSheet } from 'react-native';
+import ScreenContainer from '../../components/layout/ScreenContainer';
+import IconWithBadge from '../../components/icons/utilities/IconWithBadge';
+import ContentCard from '../../components/cards/ContentCard';
+import PrimaryButton from '../../components/buttons/PrimaryButton';
+import CheckListItem from '../../components/lists/CheckListItem';
+import AnimatedWifiOff from '../../components/icons/animated/network/AnimatedWifiOff';
+import { getColor } from '../../utils/client';
+/**
+ * Network Offline Screen
+ *
+ * Displayed when the device has no internet connection.
+ */
+export const NetworkOfflineScreen = ({ title = 'No Internet Connection', description = 'Please check your connection and try again.', onRetry, retryButtonText = 'Try Again', support, theme, primaryColor, backgroundColor, }) => {
+    const warningColor = primaryColor || theme?.warning || getColor('warning');
+    return (_jsxs(ScreenContainer, { backgroundColor: backgroundColor || theme?.background, children: [_jsx(IconWithBadge, { icon: _jsx(AnimatedWifiOff, { size: 48, color: warningColor }), iconBackgroundColor: "#FEF3C7", badge: _jsx(Text, { style: styles.badgeIcon, children: "\u2715" }), 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: "Quick tips", children: [_jsx(CheckListItem, { text: "Check your WiFi or mobile data" }), _jsx(CheckListItem, { text: "Try turning airplane mode off" }), _jsx(CheckListItem, { text: "Move to an area with better signal" })] }), onRetry && (_jsx(PrimaryButton, { onPress: onRetry, backgroundColor: warningColor, children: retryButtonText }))] }));
+};
+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 NetworkOfflineScreen;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { NetworkSlowConnectionScreenProps } from '../../types';
+/**
+ * Network Slow Connection Screen
+ *
+ * Displayed when the network connection is slow.
+ */
+export declare const NetworkSlowConnectionScreen: React.FC<NetworkSlowConnectionScreenProps>;
+export default NetworkSlowConnectionScreen;

package/dist/screens/network/NetworkSlowConnectionScreen.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 PrimaryButton from '../../components/buttons/PrimaryButton';
+import SecondaryButton from '../../components/buttons/SecondaryButton';
+import AnimatedSpeedGauge from '../../components/icons/animated/network/AnimatedSpeedGauge';
+import { getColor } from '../../utils/client';
+/**
+ * Network Slow Connection Screen
+ *
+ * Displayed when the network connection is slow.
+ */
+export const NetworkSlowConnectionScreen = ({ title = 'Slow Connection Detected', description = 'Your internet connection is slower than usual. You can continue or wait for a better connection.', onContinue, onRetry, continueButtonText = 'Continue Anyway', retryButtonText = 'Try Again', support, theme, primaryColor, backgroundColor, }) => {
+    const warningColor = primaryColor || theme?.warning || getColor('warning');
+    return (_jsxs(ScreenContainer, { backgroundColor: backgroundColor || theme?.background, children: [_jsx(IconWithBadge, { icon: _jsx(AnimatedSpeedGauge, { size: 48, color: warningColor }), iconBackgroundColor: "#FEF3C7", 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 }), onContinue && (_jsx(PrimaryButton, { onPress: onContinue, backgroundColor: warningColor, children: continueButtonText })), onRetry && (_jsx(SecondaryButton, { onPress: onRetry, children: retryButtonText }))] }));
+};
+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 NetworkSlowConnectionScreen;

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

@@ -0,0 +1,3 @@
+export { NetworkOfflineScreen } from './NetworkOfflineScreen';
+export { NetworkSlowConnectionScreen } from './NetworkSlowConnectionScreen';
+export { ApiTimeoutScreen } from './ApiTimeoutScreen';

package/dist/screens/network/index.js

@@ -0,0 +1,4 @@
+// Network Screens - Barrel Export
+export { NetworkOfflineScreen } from './NetworkOfflineScreen';
+export { NetworkSlowConnectionScreen } from './NetworkSlowConnectionScreen';
+export { ApiTimeoutScreen } from './ApiTimeoutScreen';

package/dist/screens/permissions/PermissionDeniedScreen.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { PermissionDeniedScreenProps } from '../../types';
+/**
+ * Permission Denied Screen
+ *
+ * Displayed when a permission has been denied and needs to be enabled from settings.
+ */
+export declare const PermissionDeniedScreen: React.FC<PermissionDeniedScreenProps>;
+export default PermissionDeniedScreen;

package/dist/screens/permissions/PermissionDeniedScreen.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, StyleSheet, View } 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 AnimatedPermissionDenied from '../../components/icons/animated/permissions/AnimatedPermissionDenied';
+import { getColor } from '../../utils/client';
+/**
+ * Permission Denied Screen
+ *
+ * Displayed when a permission has been denied and needs to be enabled from settings.
+ */
+export const PermissionDeniedScreen = ({ title = 'Location Access Blocked', description = 'Find nearby services and stores', permissionType = 'location', reason, steps, onOpenSettings, onContinueWithout, settingsButtonText = 'Open Settings', continueButtonText = 'Continue Without This Feature', support, theme, primaryColor, backgroundColor, }) => {
+    const warningColor = primaryColor || theme?.warning || getColor('warning');
+    const defaultSteps = [
+        'Open your device Settings',
+        'Go to Apps or Application Manager',
+        'Find and select this app',
+        `Tap Permissions and enable ${permissionType}`,
+    ];
+    return (_jsxs(ScreenContainer, { backgroundColor: backgroundColor || theme?.background, children: [_jsx(IconWithBadge, { icon: _jsx(AnimatedPermissionDenied, { size: 48, color: warningColor }), iconBackgroundColor: "#FED7AA", badge: _jsx(Text, { style: styles.badgeIcon, children: "\u2715" }), 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: "Why we need this permission", children: _jsx(Text, { style: styles.cardText, children: reason || `We use your ${permissionType} to show nearby options and provide location-based features.` }) }), _jsxs(ContentCard, { style: styles.warningCard, children: [_jsxs(View, { style: styles.warningHeader, children: [_jsx(Text, { style: styles.warningIcon, children: "\u26A0\uFE0F" }), _jsx(Text, { style: styles.warningTitle, children: "Permission Denied" })] }), _jsx(Text, { style: styles.warningText, children: "You previously denied this permission. Please enable it from your device settings:" }), (steps || defaultSteps).map((step, index) => (_jsxs(Text, { style: styles.stepText, children: [index + 1, ". ", step] }, index)))] }), _jsx(ContentCard, { style: styles.securityCard, children: _jsx(Text, { style: styles.securityText, children: "\u2713 Your data is secure. We only use this permission for the stated purpose and never share it with third parties." }) }), onOpenSettings && (_jsx(PrimaryButton, { onPress: onOpenSettings, backgroundColor: warningColor, children: settingsButtonText })), onContinueWithout && (_jsx(SecondaryButton, { onPress: onContinueWithout, children: continueButtonText }))] }));
+};
+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,
+    },
+    warningCard: {
+        backgroundColor: '#FEF3C7',
+        borderColor: '#FCD34D',
+    },
+    warningHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 8,
+    },
+    warningIcon: {
+        fontSize: 20,
+        marginRight: 8,
+    },
+    warningTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#92400E',
+    },
+    warningText: {
+        fontSize: 14,
+        color: '#92400E',
+        lineHeight: 20,
+        marginBottom: 12,
+    },
+    stepText: {
+        fontSize: 14,
+        color: '#92400E',
+        lineHeight: 20,
+        marginBottom: 4,
+    },
+    securityCard: {
+        backgroundColor: '#D1FAE5',
+        borderColor: '#6EE7B7',
+    },
+    securityText: {
+        fontSize: 14,
+        color: '#065F46',
+        lineHeight: 20,
+    },
+    badgeIcon: {
+        color: '#FFFFFF',
+        fontSize: 20,
+        fontWeight: '700',
+    },
+});
+export default PermissionDeniedScreen;

package/dist/screens/permissions/PermissionRequestScreen.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { PermissionScreenProps, MultiPermissionScreenProps } from '../../types';
+/**
+ * Permission Request Screen Component
+ *
+ * Fully customizable permission request screen.
+ * All content, icons, actions, and reasons are configurable via props.
+ */
+export declare const PermissionRequestScreen: React.FC<PermissionScreenProps>;
+/**
+ * Multi Permission Request Screen Component
+ *
+ * Fully customizable multi-permission screen.
+ * All content and permissions are configurable via props.
+ */
+export declare const MultiPermissionRequestScreen: React.FC<MultiPermissionScreenProps>;

package/dist/screens/permissions/PermissionRequestScreen.js

@@ -0,0 +1,303 @@
+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 { ShieldIcon, SettingsIcon, CheckCircleIcon, AlertTriangleIcon } from '../../components/icons/utilities';
+import { getColor, getColorWithOpacity, isWeb } from '../../utils/client';
+/**
+ * Permission Request Screen Component
+ *
+ * Fully customizable permission request screen.
+ * All content, icons, actions, and reasons are configurable via props.
+ */
+export const PermissionRequestScreen = ({ 
+// Permission type (for default config)
+permissionType, 
+// Content customization
+title, description, icon, 
+// Reasons (optional)
+reasons, showReasons = true, 
+// Actions
+onAllow, onDeny, onOpenSettings, onSkip, 
+// Button text
+allowButtonText = 'Allow', denyButtonText = 'Not Now', settingsButtonText = 'Open Settings', skipButtonText = 'Skip', 
+// State
+status = 'not_requested', isOptional = false, 
+// Styling
+theme, }) => {
+    // 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 status and permission
+    const getDefaultConfig = () => {
+        const successColor = theme?.success || getColor('success');
+        const errorColor = theme?.error || getColor('error');
+        const primaryColor = theme?.primary || getColor('primary');
+        switch (status) {
+            case 'granted':
+                return {
+                    icon: _jsx(CheckCircleIcon, { size: 48, color: successColor }),
+                    iconBg: getColorWithOpacity(successColor, 0.1),
+                    title: 'Permission Granted',
+                    description: `You've granted ${permissionType || 'the requested'} permission.`,
+                    color: successColor,
+                };
+            case 'denied':
+            case 'blocked':
+                return {
+                    icon: _jsx(AlertTriangleIcon, { size: 48, color: errorColor }),
+                    iconBg: getColorWithOpacity(errorColor, 0.1),
+                    title: 'Permission Denied',
+                    description: `${permissionType || 'This'} permission is required. Please enable it in settings.`,
+                    color: errorColor,
+                };
+            default: // not_requested
+                return {
+                    icon: _jsx(ShieldIcon, { size: 48, color: primaryColor }),
+                    iconBg: getColorWithOpacity(primaryColor, 0.1),
+                    title: `${permissionType ? permissionType.charAt(0).toUpperCase() + permissionType.slice(1) : 'Permission'} Required`,
+                    description: `We need ${permissionType || 'this'} permission to provide you with the best experience.`,
+                    color: primaryColor,
+                };
+        }
+    };
+    const defaultConfig = getDefaultConfig();
+    // Use custom values or fallback to defaults
+    const finalTitle = title || defaultConfig.title;
+    const finalDescription = description || defaultConfig.description;
+    const finalIcon = icon || defaultConfig.icon;
+    const finalColor = defaultConfig.color;
+    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: defaultConfig.iconBg }], children: finalIcon }), _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 }), isOptional && status === 'not_requested' && (_jsx(View, { style: styles.optionalBadge, children: _jsx(Text, { style: styles.optionalText, children: "Optional" }) })), showReasons && reasons && reasons.length > 0 && (_jsxs(View, { style: styles.reasonsContainer, children: [_jsx(Text, { style: styles.reasonsTitle, children: "Why we need this:" }), reasons.map((reason, index) => (_jsxs(View, { style: styles.reasonItem, children: [_jsx(Text, { style: styles.reasonBullet, children: "\u2022" }), _jsx(Text, { style: styles.reasonText, children: reason })] }, index)))] })), _jsxs(View, { style: styles.buttonsContainer, children: [status === 'not_requested' && onAllow && (_jsx(TouchableOpacity, { style: [styles.button, styles.primaryButton, { backgroundColor: finalColor }], onPress: onAllow, activeOpacity: 0.8, children: _jsx(Text, { style: styles.primaryButtonText, children: allowButtonText }) })), (status === 'denied' || status === 'blocked') && onOpenSettings && (_jsxs(TouchableOpacity, { style: [styles.button, styles.primaryButton, { backgroundColor: finalColor }], onPress: onOpenSettings, activeOpacity: 0.8, children: [_jsx(SettingsIcon, { size: 20, color: "#FFFFFF" }), _jsx(Text, { style: styles.primaryButtonText, children: settingsButtonText })] })), status === 'not_requested' && (onDeny || onSkip) && (_jsx(TouchableOpacity, { style: [styles.button, styles.secondaryButton, { borderColor: finalColor }], onPress: onDeny || onSkip, activeOpacity: 0.8, children: _jsx(Text, { style: [styles.secondaryButtonText, { color: finalColor }], children: isOptional ? skipButtonText : denyButtonText }) }))] })] }) }) }));
+};
+/**
+ * Multi Permission Request Screen Component
+ *
+ * Fully customizable multi-permission screen.
+ * All content and permissions are configurable via props.
+ */
+export const MultiPermissionRequestScreen = ({ 
+// Permissions list
+permissions, 
+// Content
+title = 'Permissions Required', description = 'We need the following permissions to provide you with the best experience', 
+// Actions
+onContinue, onOpenSettings, 
+// Button text
+continueButtonText = 'Continue', settingsButtonText = 'Grant Permissions', 
+// Styling
+theme, }) => {
+    // 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();
+    }, []);
+    const allGranted = permissions.every(p => p.status === 'granted');
+    const hasRequired = permissions.some(p => p.required && p.status !== 'granted');
+    const primaryColor = theme?.primary || getColor('primary');
+    const successColor = theme?.success || getColor('success');
+    const errorColor = theme?.error || getColor('error');
+    const warningColor = theme?.warning || getColor('warning');
+    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(primaryColor, 0.1) }], children: _jsx(ShieldIcon, { size: 48, color: primaryColor }) }), _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(View, { style: styles.permissionsList, children: permissions.map((perm, index) => (_jsxs(View, { style: styles.permissionItem, children: [_jsxs(View, { style: styles.permissionInfo, children: [perm.icon || (_jsx(Text, { style: styles.permissionName, children: perm.title || (perm.type ? perm.type.charAt(0).toUpperCase() + perm.type.slice(1) : 'Permission') })), perm.description && (_jsx(Text, { style: styles.permissionDesc, children: perm.description })), !perm.required && (_jsx(Text, { style: styles.permissionOptional, children: "Optional" }))] }), _jsx(View, { style: styles.permissionStatus, children: perm.status === 'granted' ? (_jsx(CheckCircleIcon, { size: 24, color: successColor })) : (_jsx(View, { style: [styles.permissionBadge, { backgroundColor: perm.required ? getColorWithOpacity(errorColor, 0.1) : getColorWithOpacity(warningColor, 0.1) }], children: _jsx(Text, { style: [styles.permissionBadgeText, { color: perm.required ? errorColor : warningColor }], children: perm.status === 'denied' || perm.status === 'blocked' ? 'Denied' : 'Required' }) })) })] }, index))) }), _jsxs(View, { style: styles.buttonsContainer, children: [!allGranted && hasRequired && onOpenSettings && (_jsxs(TouchableOpacity, { style: [styles.button, styles.primaryButton, { backgroundColor: primaryColor }], onPress: onOpenSettings, activeOpacity: 0.8, children: [_jsx(SettingsIcon, { size: 20, color: "#FFFFFF" }), _jsx(Text, { style: styles.primaryButtonText, children: settingsButtonText })] })), onContinue && !hasRequired && (_jsx(TouchableOpacity, { style: [styles.button, styles.primaryButton, { backgroundColor: primaryColor }], onPress: onContinue, activeOpacity: 0.8, children: _jsx(Text, { style: styles.primaryButtonText, children: continueButtonText }) }))] })] }) }) }));
+};
+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: 24,
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: '700',
+        color: '#1F2937',
+        textAlign: 'center',
+        marginBottom: 12,
+    },
+    description: {
+        fontSize: 16,
+        color: '#6B7280',
+        textAlign: 'center',
+        lineHeight: 24,
+        marginBottom: 24,
+    },
+    optionalBadge: {
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        backgroundColor: '#F3F4F6',
+        borderRadius: 12,
+        marginBottom: 24,
+    },
+    optionalText: {
+        fontSize: 12,
+        fontWeight: '600',
+        color: '#6B7280',
+    },
+    reasonsContainer: {
+        width: '100%',
+        padding: 16,
+        backgroundColor: '#F9FAFB',
+        borderRadius: 12,
+        marginBottom: 24,
+    },
+    reasonsTitle: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#1F2937',
+        marginBottom: 12,
+    },
+    reasonItem: {
+        flexDirection: 'row',
+        marginBottom: 8,
+    },
+    reasonBullet: {
+        fontSize: 14,
+        color: '#6B7280',
+        marginRight: 8,
+    },
+    reasonText: {
+        flex: 1,
+        fontSize: 14,
+        color: '#6B7280',
+        lineHeight: 20,
+    },
+    buttonsContainer: {
+        width: '100%',
+    },
+    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',
+    },
+    // Multi Permission
+    permissionsList: {
+        width: '100%',
+        marginBottom: 24,
+    },
+    permissionItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: 16,
+        backgroundColor: '#F9FAFB',
+        borderRadius: 12,
+        marginBottom: 12,
+    },
+    permissionInfo: {
+        flex: 1,
+        marginRight: 12,
+    },
+    permissionName: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#1F2937',
+        marginBottom: 4,
+    },
+    permissionDesc: {
+        fontSize: 14,
+        color: '#6B7280',
+        lineHeight: 20,
+    },
+    permissionOptional: {
+        fontSize: 12,
+        color: '#9CA3AF',
+        marginTop: 4,
+    },
+    permissionStatus: {
+        alignItems: 'center',
+    },
+    permissionBadge: {
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 6,
+    },
+    permissionBadgeText: {
+        fontSize: 12,
+        fontWeight: '600',
+    },
+});

package/dist/screens/permissions/PermissionScreen.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { PermissionScreenProps } from '../../types';
+/**
+ * Permission Request Screen
+ *
+ * Displayed when requesting a permission from the user.
+ */
+export declare const PermissionScreen: React.FC<PermissionScreenProps>;
+export default PermissionScreen;

package/dist/screens/permissions/PermissionScreen.js

@@ -0,0 +1,45 @@
+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 AnimatedPermission from '../../components/icons/animated/permissions/AnimatedPermission';
+import { getColor } from '../../utils/client';
+/**
+ * Permission Request Screen
+ *
+ * Displayed when requesting a permission from the user.
+ */
+export const PermissionScreen = ({ title = 'Permission Required', description = 'We need your permission to provide you with the best experience.', permissionType = 'location', reason, onAllow, onDeny, allowButtonText = 'Allow', denyButtonText = 'Not Now', support, theme, primaryColor, backgroundColor, }) => {
+    const infoColor = primaryColor || theme?.primary || getColor('primary');
+    return (_jsxs(ScreenContainer, { backgroundColor: backgroundColor || theme?.background, children: [_jsx(IconWithBadge, { icon: _jsx(AnimatedPermission, { size: 48, color: infoColor }), iconBackgroundColor: "#DBEAFE", badge: _jsx(Text, { style: styles.badgeIcon, children: "\uD83D\uDD12" }), 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 }), _jsx(ContentCard, { title: "Why we need this permission", children: _jsx(Text, { style: styles.cardText, children: reason || `We use your ${permissionType} to show nearby options and provide location-based features.` }) }), onAllow && (_jsx(PrimaryButton, { onPress: onAllow, backgroundColor: infoColor, children: allowButtonText })), onDeny && (_jsx(SecondaryButton, { onPress: onDeny, children: denyButtonText }))] }));
+};
+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: {
+        fontSize: 16,
+    },
+});
+export default PermissionScreen;

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

@@ -0,0 +1,3 @@
+export { PermissionScreen } from './PermissionScreen';
+export { PermissionDeniedScreen } from './PermissionDeniedScreen';
+export { PermissionRequestScreen, MultiPermissionRequestScreen } from './PermissionRequestScreen';

package/dist/screens/permissions/index.js

@@ -0,0 +1,4 @@
+// Permission Screens - Barrel Export
+export { PermissionScreen } from './PermissionScreen';
+export { PermissionDeniedScreen } from './PermissionDeniedScreen';
+export { PermissionRequestScreen, MultiPermissionRequestScreen } from './PermissionRequestScreen';

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

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