@codeimplants/ui-kit 1.0.0

package/dist/components/shared/ResponsiveLayout.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+/**
+ * ResponsiveLayout Component
+ *
+ * Provides responsive layout utilities that adapt to different screen sizes.
+ * Prevents content overflow and ensures proper spacing on mobile devices.
+ */
+interface ResponsiveLayoutProps {
+    children: React.ReactNode;
+    maxWidth?: number;
+    horizontalPadding?: 'small' | 'medium' | 'large';
+    verticalPadding?: 'small' | 'medium' | 'large';
+    style?: ViewStyle;
+}
+export declare const ResponsiveLayout: React.FC<ResponsiveLayoutProps>;
+/**
+ * Utility function to get responsive font size
+ */
+export declare const getResponsiveFontSize: (baseSize: number) => number;
+/**
+ * Utility function to get responsive spacing
+ */
+export declare const getResponsiveSpacing: (baseSpacing: number) => number;
+export default ResponsiveLayout;

package/dist/components/shared/ResponsiveLayout.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View, StyleSheet, Dimensions, Platform } from 'react-native';
+const PADDING_VALUES = {
+    small: 12,
+    medium: 24,
+    large: 32,
+};
+export const ResponsiveLayout = ({ children, maxWidth = 480, horizontalPadding = 'medium', verticalPadding = 'medium', style, }) => {
+    const { width, height } = Dimensions.get('window');
+    // Determine if we're on a small screen
+    const isSmallScreen = width < 375;
+    const isMobile = Platform.OS !== 'web' || width < 768;
+    // Adjust padding for small screens
+    const getHorizontalPadding = () => {
+        if (isSmallScreen)
+            return PADDING_VALUES.small;
+        return PADDING_VALUES[horizontalPadding];
+    };
+    const getVerticalPadding = () => {
+        if (isSmallScreen)
+            return PADDING_VALUES.small;
+        return PADDING_VALUES[verticalPadding];
+    };
+    return (_jsx(View, { style: [
+            styles.container,
+            {
+                paddingHorizontal: getHorizontalPadding(),
+                paddingVertical: getVerticalPadding(),
+            },
+            style,
+        ], children: _jsx(View, { style: [
+                styles.content,
+                {
+                    maxWidth: isMobile ? width - (getHorizontalPadding() * 2) : maxWidth,
+                    width: '100%',
+                },
+            ], children: children }) }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    content: {
+        width: '100%',
+        alignSelf: 'center',
+    },
+});
+/**
+ * Utility function to get responsive font size
+ */
+export const getResponsiveFontSize = (baseSize) => {
+    const { width } = Dimensions.get('window');
+    if (width < 375) {
+        // Small phones: reduce by 10%
+        return baseSize * 0.9;
+    }
+    else if (width > 768) {
+        // Tablets/Desktop: increase by 5%
+        return baseSize * 1.05;
+    }
+    return baseSize;
+};
+/**
+ * Utility function to get responsive spacing
+ */
+export const getResponsiveSpacing = (baseSpacing) => {
+    const { width } = Dimensions.get('window');
+    if (width < 375) {
+        // Small phones: reduce spacing
+        return baseSpacing * 0.75;
+    }
+    return baseSpacing;
+};
+export default ResponsiveLayout;

package/dist/components/shared/RetryCounter.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { RetryInfo, ThemeColors } from '../../types';
+interface RetryCounterProps {
+    retryInfo: RetryInfo;
+    theme?: ThemeColors;
+}
+declare const RetryCounter: React.FC<RetryCounterProps>;
+export default RetryCounter;

package/dist/components/shared/RetryCounter.js

@@ -0,0 +1,17 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { View, Text, StyleSheet } from 'react-native';
+const RetryCounter = ({ retryInfo, theme }) => {
+    const textColor = theme?.textSecondary || '#6B7280';
+    return (_jsx(View, { style: styles.container, children: _jsxs(Text, { style: [styles.text, { color: textColor }], children: ["Retry attempt ", retryInfo.attempt, " of ", retryInfo.maxAttempts] }) }));
+};
+const styles = StyleSheet.create({
+    container: {
+        marginVertical: 12,
+    },
+    text: {
+        fontSize: 14,
+        textAlign: 'center',
+        fontWeight: '500',
+    },
+});
+export default RetryCounter;

package/dist/components/shared/SafeAreaWrapper.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import type { SafeAreaEdge } from '../../types';
+/**
+ * SafeAreaWrapper Component
+ *
+ * Cross-platform safe area wrapper that handles:
+ * - Mobile: Notches, status bars, navigation bars
+ * - Web: Fallback padding for consistent layout
+ *
+ * This ensures content doesn't overlap with system UI elements
+ * and provides consistent spacing across platforms.
+ */
+interface SafeAreaWrapperProps {
+    children: React.ReactNode;
+    edges?: SafeAreaEdge[];
+    style?: ViewStyle;
+    backgroundColor?: string;
+}
+export declare const SafeAreaWrapper: React.FC<SafeAreaWrapperProps>;
+export default SafeAreaWrapper;

package/dist/components/shared/SafeAreaWrapper.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View, StyleSheet, Platform } from 'react-native';
+export const SafeAreaWrapper = ({ children, edges = ['top', 'bottom', 'left', 'right'], style, backgroundColor = '#FFFFFF', }) => {
+    // Calculate safe area padding based on platform
+    const getSafeAreaPadding = () => {
+        const padding = {};
+        if (Platform.OS === 'web') {
+            // Web fallback: Use standard padding
+            if (edges.includes('top'))
+                padding.paddingTop = 0;
+            if (edges.includes('bottom'))
+                padding.paddingBottom = 0;
+            if (edges.includes('left'))
+                padding.paddingLeft = 0;
+            if (edges.includes('right'))
+                padding.paddingRight = 0;
+        }
+        else {
+            // Mobile: Use safe area insets
+            // Note: In a real implementation, you would use react-native-safe-area-context
+            // For now, we'll use reasonable defaults
+            if (edges.includes('top'))
+                padding.paddingTop = 44; // Status bar height
+            if (edges.includes('bottom'))
+                padding.paddingBottom = 34; // Home indicator
+            if (edges.includes('left'))
+                padding.paddingLeft = 0;
+            if (edges.includes('right'))
+                padding.paddingRight = 0;
+        }
+        return padding;
+    };
+    return (_jsx(View, { style: [
+            styles.container,
+            { backgroundColor },
+            getSafeAreaPadding(),
+            style,
+        ], children: children }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+});
+export default SafeAreaWrapper;

package/dist/components/shared/ScreenContainer.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+/**
+ * ScreenContainer Component
+ *
+ * Standardized container for all UI Kit screens.
+ * Provides consistent layout, spacing, and SafeArea support.
+ */
+interface ScreenContainerProps {
+    children: React.ReactNode;
+    backgroundColor?: string;
+    style?: ViewStyle;
+}
+export declare const ScreenContainer: React.FC<ScreenContainerProps>;
+export default ScreenContainer;

package/dist/components/shared/ScreenContainer.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View, ScrollView, StyleSheet } from 'react-native';
+import SafeAreaWrapper from './SafeAreaWrapper';
+export const ScreenContainer = ({ children, backgroundColor = '#F9FAFB', style, }) => {
+    return (_jsx(SafeAreaWrapper, { backgroundColor: backgroundColor, children: _jsx(ScrollView, { contentContainerStyle: styles.scrollContent, showsVerticalScrollIndicator: false, style: style, children: _jsx(View, { style: styles.content, children: children }) }) }));
+};
+const styles = StyleSheet.create({
+    scrollContent: {
+        flexGrow: 1,
+        justifyContent: 'center',
+        paddingHorizontal: 24,
+        paddingVertical: 32,
+    },
+    content: {
+        alignItems: 'center',
+        maxWidth: 480,
+        width: '100%',
+        alignSelf: 'center',
+    },
+});
+export default ScreenContainer;

package/dist/components/shared/SecondaryButton.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+/**
+ * SecondaryButton Component
+ *
+ * White/outline secondary action button with icon support.
+ * Full width with consistent styling across all screens.
+ */
+interface SecondaryButtonProps {
+    children: React.ReactNode;
+    onPress: () => void;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    borderColor?: string;
+    textColor?: string;
+    style?: ViewStyle;
+    textStyle?: TextStyle;
+}
+export declare const SecondaryButton: React.FC<SecondaryButtonProps>;
+export default SecondaryButton;

package/dist/components/shared/SecondaryButton.js

@@ -0,0 +1,37 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TouchableOpacity, Text, StyleSheet } from 'react-native';
+export const SecondaryButton = ({ children, onPress, icon, disabled = false, borderColor = '#E5E7EB', textColor = '#1F2937', style, textStyle, }) => {
+    return (_jsxs(TouchableOpacity, { style: [
+            styles.button,
+            { borderColor: disabled ? '#E5E7EB' : borderColor },
+            style,
+        ], onPress: onPress, disabled: disabled, activeOpacity: 0.8, children: [icon && _jsx(_Fragment, { children: icon }), _jsx(Text, { style: [
+                    styles.text,
+                    { color: disabled ? '#9CA3AF' : textColor },
+                    icon ? styles.textWithIcon : undefined,
+                    textStyle,
+                ], children: children })] }));
+};
+const styles = StyleSheet.create({
+    button: {
+        width: '100%',
+        backgroundColor: '#FFFFFF',
+        paddingVertical: 16,
+        paddingHorizontal: 24,
+        borderRadius: 12,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 1,
+        marginBottom: 12,
+    },
+    text: {
+        fontSize: 16,
+        fontWeight: '600',
+        textAlign: 'center',
+    },
+    textWithIcon: {
+        marginLeft: 8,
+    },
+});
+export default SecondaryButton;

package/dist/components/shared/SecurityBanner.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface SecurityBannerProps {
+    message?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    iconColor?: string;
+}
+declare const SecurityBanner: React.FC<SecurityBannerProps>;
+export default SecurityBanner;

package/dist/components/shared/SecurityBanner.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Animated } from 'react-native';
+const SecurityBanner = ({ message = "Your data is secure. We only use this permission for the stated purpose and never share it with third parties.", backgroundColor = '#D1FAE5', textColor = '#065F46', iconColor = '#10B981', }) => {
+    const fadeAnim = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        Animated.timing(fadeAnim, {
+            toValue: 1,
+            duration: 500,
+            delay: 400,
+            useNativeDriver: true,
+        }).start();
+    }, []);
+    return (_jsxs(Animated.View, { style: [
+            styles.container,
+            {
+                backgroundColor,
+                opacity: fadeAnim,
+            },
+        ], children: [_jsx(View, { style: [styles.iconContainer, { backgroundColor: `${iconColor}20` }], children: _jsx(Text, { style: [styles.icon, { color: iconColor }], children: "\u2713" }) }), _jsx(Text, { style: [styles.message, { color: textColor }], children: message })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: 12,
+        padding: 16,
+        marginBottom: 24,
+        width: '100%',
+    },
+    iconContainer: {
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: 12,
+    },
+    icon: {
+        fontSize: 14,
+        fontWeight: '700',
+    },
+    message: {
+        flex: 1,
+        fontSize: 13,
+        lineHeight: 18,
+    },
+});
+export default SecurityBanner;

package/dist/components/shared/SpeedBadge.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface SpeedBadgeProps {
+    speed?: '2G' | '3G' | '4G' | '5G';
+    backgroundColor?: string;
+    textColor?: string;
+    iconColor?: string;
+}
+declare const SpeedBadge: React.FC<SpeedBadgeProps>;
+export default SpeedBadge;

package/dist/components/shared/SpeedBadge.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Text, StyleSheet, Animated } from 'react-native';
+const SpeedBadge = ({ speed = '2G', backgroundColor = '#FEF3C7', textColor = '#92400E', iconColor = '#F59E0B', }) => {
+    const fadeAnim = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        Animated.timing(fadeAnim, {
+            toValue: 1,
+            duration: 500,
+            delay: 200,
+            useNativeDriver: true,
+        }).start();
+    }, []);
+    return (_jsxs(Animated.View, { style: [
+            styles.container,
+            {
+                backgroundColor,
+                opacity: fadeAnim,
+            },
+        ], children: [_jsx(Text, { style: [styles.icon, { color: iconColor }], children: "\u26A1" }), _jsxs(Text, { style: [styles.text, { color: textColor }], children: [speed, " Speed"] })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 6,
+        paddingHorizontal: 12,
+        borderRadius: 16,
+        marginBottom: 24,
+        alignSelf: 'center',
+    },
+    icon: {
+        fontSize: 14,
+        marginRight: 6,
+    },
+    text: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+});
+export default SpeedBadge;

package/dist/components/shared/StatusBadge.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+/**
+ * StatusBadge Component
+ *
+ * Small pill-shaped badge for status labels.
+ * Used to display status like "Security", "Required", "Service Alert", etc.
+ */
+interface StatusBadgeProps {
+    text: string;
+    backgroundColor?: string;
+    textColor?: string;
+    style?: ViewStyle;
+    textStyle?: TextStyle;
+}
+export declare const StatusBadge: React.FC<StatusBadgeProps>;
+export default StatusBadge;

package/dist/components/shared/StatusBadge.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View, Text, StyleSheet } from 'react-native';
+export const StatusBadge = ({ text, backgroundColor = '#FED7AA', textColor = '#F59E0B', style, textStyle, }) => {
+    return (_jsx(View, { style: [styles.badge, { backgroundColor }, style], children: _jsx(Text, { style: [styles.text, { color: textColor }, textStyle], children: text }) }));
+};
+const styles = StyleSheet.create({
+    badge: {
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        borderRadius: 12,
+        marginBottom: 16,
+        alignSelf: 'center',
+    },
+    text: {
+        fontSize: 12,
+        fontWeight: '600',
+        textTransform: 'capitalize',
+    },
+});
+export default StatusBadge;

package/dist/components/shared/StatusCheckList.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface StatusCheckListProps {
+    messages: string[];
+    title?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    checkColor?: string;
+}
+declare const StatusCheckList: React.FC<StatusCheckListProps>;
+export default StatusCheckList;

package/dist/components/shared/StatusCheckList.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Animated } from 'react-native';
+const StatusCheckList = ({ messages, title = "What's happening?", backgroundColor = '#FFFFFF', borderColor = '#E5E7EB', checkColor = '#10B981', }) => {
+    const fadeAnim = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        Animated.timing(fadeAnim, {
+            toValue: 1,
+            duration: 500,
+            delay: 300,
+            useNativeDriver: true,
+        }).start();
+    }, []);
+    return (_jsxs(Animated.View, { style: [
+            styles.container,
+            {
+                backgroundColor,
+                borderColor,
+                opacity: fadeAnim,
+                transform: [
+                    {
+                        translateY: fadeAnim.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [20, 0],
+                        }),
+                    },
+                ],
+            },
+        ], children: [_jsx(Text, { style: styles.title, children: title }), messages.map((message, index) => (_jsxs(View, { style: styles.messageItem, children: [_jsx(View, { style: [styles.checkIcon, { backgroundColor: `${checkColor}20` }], children: _jsx(Text, { style: [styles.checkmark, { color: checkColor }], children: "\u2713" }) }), _jsx(Text, { style: styles.messageText, children: message })] }, index)))] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        borderRadius: 12,
+        padding: 24,
+        marginBottom: 24,
+        borderWidth: 1,
+        width: '100%',
+    },
+    title: {
+        fontSize: 18,
+        fontWeight: '600',
+        color: '#1F2937',
+        marginBottom: 16,
+    },
+    messageItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 12,
+    },
+    checkIcon: {
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: 12,
+    },
+    checkmark: {
+        fontSize: 14,
+        fontWeight: '700',
+    },
+    messageText: {
+        flex: 1,
+        fontSize: 15,
+        color: '#6B7280',
+        lineHeight: 22,
+    },
+});
+export default StatusCheckList;

package/dist/components/shared/SupportButtons.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { SupportContact, SupportVariant, ThemeColors } from '../../types';
+interface SupportButtonsProps {
+    support: SupportContact;
+    variant?: SupportVariant;
+    theme?: ThemeColors;
+}
+declare const SupportButtons: React.FC<SupportButtonsProps>;
+export default SupportButtons;