@codeimplants/ui-kit 1.0.0

package/dist/components/RetryIndicator.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { RetryIndicatorProps, RetryProgressBarProps, BackoffVisualizerProps } from '../types';
+export declare const RetryIndicator: React.FC<RetryIndicatorProps>;
+export declare const RetryProgressBar: React.FC<RetryProgressBarProps>;
+export declare const BackoffVisualizer: React.FC<BackoffVisualizerProps>;

package/dist/components/RetryIndicator.js

@@ -0,0 +1,208 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Animated } from 'react-native';
+import { RefreshIcon, XIcon, CheckCircleIcon } from './IconLibrary';
+import { getColor, getColorWithOpacity, calculateBackoffDelay, formatDelayTime } from '../client';
+export const RetryIndicator = ({ isRetrying, retryCount, maxRetries, retryDelay = 2, status = 'idle', onCancel, }) => {
+    const [rotation] = useState(new Animated.Value(0));
+    useEffect(() => {
+        if (isRetrying) {
+            Animated.loop(Animated.timing(rotation, {
+                toValue: 1,
+                duration: 1000,
+                useNativeDriver: true,
+            })).start();
+        }
+        else {
+            rotation.setValue(0);
+        }
+    }, [isRetrying]);
+    const rotate = rotation.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '360deg'],
+    });
+    if (!isRetrying && status === 'idle')
+        return null;
+    const getStatusColor = () => {
+        switch (status) {
+            case 'success':
+                return getColor('success');
+            case 'failed':
+                return getColor('error');
+            case 'retrying':
+                return getColor('warning');
+            default:
+                return getColor('primary');
+        }
+    };
+    const getStatusText = () => {
+        switch (status) {
+            case 'success':
+                return 'Success!';
+            case 'failed':
+                return 'Failed';
+            case 'retrying':
+                return `Retrying... (${retryCount}/${maxRetries})`;
+            default:
+                return 'Ready';
+        }
+    };
+    return (_jsxs(View, { style: [styles.indicatorContainer, { backgroundColor: getColorWithOpacity('primary', 0.95) }], children: [_jsxs(View, { style: styles.indicatorContent, children: [status === 'success' ? (_jsx(CheckCircleIcon, { size: 20, color: "#FFFFFF" })) : (_jsx(Animated.View, { style: { transform: [{ rotate }] }, children: _jsx(RefreshIcon, { size: 20, color: "#FFFFFF" }) })), _jsx(Text, { style: styles.indicatorText, children: getStatusText() })] }), onCancel && isRetrying && (_jsx(TouchableOpacity, { onPress: onCancel, style: styles.cancelButton, activeOpacity: 0.7, children: _jsx(XIcon, { size: 16, color: "#FFFFFF" }) }))] }));
+};
+// ============================================================================
+// Retry Progress Bar
+// ============================================================================
+export const RetryProgressBar = ({ retryCount, maxRetries, isActive, }) => {
+    const progress = maxRetries > 0 ? retryCount / maxRetries : 0;
+    const percentage = Math.round(progress * 100);
+    return (_jsxs(View, { style: styles.progressContainer, children: [_jsxs(View, { style: styles.progressHeader, children: [_jsx(Text, { style: styles.progressLabel, children: "Retry Progress" }), _jsxs(Text, { style: styles.progressCount, children: [retryCount, "/", maxRetries] })] }), _jsxs(View, { style: styles.progressBarContainer, children: [_jsx(View, { style: [
+                            styles.progressBarFill,
+                            {
+                                flex: percentage / 100,
+                                backgroundColor: isActive ? getColor('primary') : getColor('success'),
+                            },
+                        ] }), _jsx(View, { style: { flex: (100 - percentage) / 100 } })] }), _jsxs(Text, { style: styles.progressPercentage, children: [percentage, "%"] })] }));
+};
+// ============================================================================
+// Backoff Visualizer
+// ============================================================================
+export const BackoffVisualizer = ({ attempt, baseDelay = 1000, }) => {
+    const delays = Array.from({ length: 5 }, (_, i) => calculateBackoffDelay(i + 1, baseDelay));
+    return (_jsxs(View, { style: styles.backoffContainer, children: [_jsx(Text, { style: styles.backoffTitle, children: "Exponential Backoff Strategy" }), _jsx(Text, { style: styles.backoffDescription, children: "Retry delays increase exponentially to avoid overwhelming the server" }), _jsx(View, { style: styles.backoffBars, children: delays.map((delay, index) => {
+                    const isActive = index + 1 === attempt;
+                    const isPast = index + 1 < attempt;
+                    const maxDelay = Math.max(...delays);
+                    const barWidth = (delay / maxDelay) * 100;
+                    return (_jsxs(View, { style: styles.backoffBarRow, children: [_jsxs(Text, { style: styles.backoffAttemptLabel, children: ["#", index + 1] }), _jsxs(View, { style: styles.backoffBarContainer, children: [_jsx(View, { style: [
+                                            styles.backoffBar,
+                                            {
+                                                flex: barWidth / 100,
+                                                backgroundColor: isActive
+                                                    ? getColor('warning')
+                                                    : isPast
+                                                        ? getColor('success')
+                                                        : getColorWithOpacity('primary', 0.3),
+                                            },
+                                        ] }), _jsx(View, { style: { flex: (100 - barWidth) / 100 } })] }), _jsx(Text, { style: styles.backoffDelayLabel, children: formatDelayTime(delay) })] }, index));
+                }) })] }));
+};
+const styles = StyleSheet.create({
+    // Retry Indicator
+    indicatorContainer: {
+        position: 'absolute',
+        top: 60,
+        left: 16,
+        right: 16,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        borderRadius: 12,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.25,
+        shadowRadius: 4,
+        elevation: 5,
+        zIndex: 1000,
+    },
+    indicatorContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    indicatorIcon: {
+        marginRight: 12,
+    },
+    indicatorText: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#FFFFFF',
+    },
+    cancelButton: {
+        padding: 4,
+    },
+    // Progress Bar
+    progressContainer: {
+        padding: 16,
+    },
+    progressHeader: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        marginBottom: 8,
+    },
+    progressLabel: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#1F2937',
+    },
+    progressCount: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#6B7280',
+    },
+    progressBarContainer: {
+        height: 8,
+        backgroundColor: '#E5E7EB',
+        borderRadius: 4,
+        overflow: 'hidden',
+        marginBottom: 8,
+        flexDirection: 'row',
+    },
+    progressBarFill: {
+        height: '100%',
+        borderRadius: 4,
+    },
+    progressPercentage: {
+        fontSize: 12,
+        color: '#6B7280',
+        textAlign: 'right',
+    },
+    // Backoff Visualizer
+    backoffContainer: {
+        padding: 16,
+        backgroundColor: '#F9FAFB',
+        borderRadius: 12,
+    },
+    backoffTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#1F2937',
+        marginBottom: 4,
+    },
+    backoffDescription: {
+        fontSize: 12,
+        color: '#6B7280',
+        marginBottom: 16,
+    },
+    backoffBars: {},
+    backoffBarRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 8,
+    },
+    backoffAttemptLabel: {
+        fontSize: 12,
+        fontWeight: '600',
+        color: '#6B7280',
+        width: 24,
+    },
+    backoffBarContainer: {
+        flex: 1,
+        height: 24,
+        backgroundColor: '#E5E7EB',
+        borderRadius: 4,
+        overflow: 'hidden',
+        flexDirection: 'row',
+    },
+    backoffBar: {
+        height: '100%',
+        borderRadius: 4,
+    },
+    backoffDelayLabel: {
+        fontSize: 12,
+        fontWeight: '600',
+        color: '#6B7280',
+        width: 40,
+        textAlign: 'right',
+    },
+});

package/dist/components/SupportContactCard.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { SupportContactProps } from '../types';
+/**
+ * SupportContactCard Component
+ *
+ * Fully customizable support contact card.
+ * Only renders if at least one contact method is provided.
+ * All text and styling is customizable via props.
+ */
+export declare const SupportContactCard: React.FC<SupportContactProps>;

package/dist/components/SupportContactCard.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, StyleSheet, Linking } from 'react-native';
+import { PhoneIcon, MessageCircleIcon, MailIcon } from './IconLibrary';
+import { getColor, getColorWithOpacity } from '../client';
+import { Button } from './ui/Button';
+/**
+ * SupportContactCard Component
+ *
+ * Fully customizable support contact card.
+ * Only renders if at least one contact method is provided.
+ * All text and styling is customizable via props.
+ */
+export const SupportContactCard = ({ whatsapp, phone, email, title = 'Need Help?', description = 'Contact our support team', variant = 'full', errorContext, theme, }) => {
+    // Don't render if no contact methods provided
+    const hasAnyContact = whatsapp || phone || email;
+    if (!hasAnyContact) {
+        return null;
+    }
+    const primaryColor = theme?.primary || getColor('primary');
+    const successColor = theme?.success || getColor('success');
+    const handleWhatsAppPress = () => {
+        if (whatsapp?.onPress) {
+            whatsapp.onPress();
+        }
+        else if (whatsapp?.number) {
+            let message = 'Hello, I need help';
+            if (errorContext) {
+                message = `Hello, I need help with an error:\n\nError: ${errorContext.errorMessage}\nCode: ${errorContext.errorCode || 'N/A'}\nTime: ${errorContext.timestamp}\nApp Version: ${errorContext.appVersion}`;
+            }
+            const url = `https://wa.me/${whatsapp.number.replace(/[^0-9]/g, '')}?text=${encodeURIComponent(message)}`;
+            Linking.openURL(url).catch(err => console.error('Failed to open WhatsApp:', err));
+        }
+    };
+    const handlePhonePress = () => {
+        if (phone?.onPress) {
+            phone.onPress();
+        }
+        else if (phone?.number) {
+            const url = `tel:${phone.number}`;
+            Linking.openURL(url).catch(err => console.error('Failed to make call:', err));
+        }
+    };
+    const handleEmailPress = () => {
+        if (email?.onPress) {
+            email.onPress();
+        }
+        else if (email?.address) {
+            let subject = 'Support Request';
+            let body = 'Hello, I need help.';
+            if (errorContext) {
+                subject = `Support Request - ${errorContext.errorCode || 'Error'}`;
+                body = `Error: ${errorContext.errorMessage}\nCode: ${errorContext.errorCode || 'N/A'}\nTime: ${errorContext.timestamp}\nApp Version: ${errorContext.appVersion}\nPlatform: ${errorContext.platform}\n\nPlease describe your issue:`;
+            }
+            const url = `mailto:${email.address}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+            Linking.openURL(url).catch(err => console.error('Failed to open email:', err));
+        }
+    };
+    // Icon-only variant
+    if (variant === 'icon-only') {
+        return (_jsxs(View, { style: styles.iconOnlyContainer, children: [whatsapp && (_jsx(Button, { variant: "outline", size: "icon", style: [styles.iconButton, { backgroundColor: getColorWithOpacity(successColor, 0.1), borderColor: getColorWithOpacity(successColor, 0.2) }], onPress: handleWhatsAppPress, children: _jsx(MessageCircleIcon, { size: 20, color: successColor }) })), phone && (_jsx(Button, { variant: "outline", size: "icon", style: [styles.iconButton, { backgroundColor: getColorWithOpacity(primaryColor, 0.1), borderColor: getColorWithOpacity(primaryColor, 0.2) }], onPress: handlePhonePress, children: _jsx(PhoneIcon, { size: 20, color: primaryColor }) })), email && (_jsx(Button, { variant: "outline", size: "icon", style: [styles.iconButton, { backgroundColor: getColorWithOpacity(primaryColor, 0.1), borderColor: getColorWithOpacity(primaryColor, 0.2) }], onPress: handleEmailPress, children: _jsx(MailIcon, { size: 20, color: primaryColor }) }))] }));
+    }
+    // Compact variant
+    if (variant === 'compact') {
+        return (_jsxs(View, { style: styles.compactContainer, children: [whatsapp && (_jsxs(Button, { variant: "outline", size: "sm", style: [styles.compactButton, { borderColor: getColorWithOpacity(successColor, 0.3) }], onPress: handleWhatsAppPress, textStyle: { color: successColor }, children: [_jsx(MessageCircleIcon, { size: 16, color: successColor }), _jsx(Text, { style: { marginLeft: 8 }, children: whatsapp.label || 'WhatsApp' })] })), phone && (_jsxs(Button, { variant: "outline", size: "sm", style: [styles.compactButton, { borderColor: getColorWithOpacity(primaryColor, 0.3) }], onPress: handlePhonePress, textStyle: { color: primaryColor }, children: [_jsx(PhoneIcon, { size: 16, color: primaryColor }), _jsx(Text, { style: { marginLeft: 8 }, children: phone.label || 'Call' })] })), email && (_jsxs(Button, { variant: "outline", size: "sm", style: [styles.compactButton, { borderColor: getColorWithOpacity(primaryColor, 0.3) }], onPress: handleEmailPress, textStyle: { color: primaryColor }, children: [_jsx(MailIcon, { size: 16, color: primaryColor }), _jsx(Text, { style: { marginLeft: 8 }, children: email.label || 'Email' })] }))] }));
+    }
+    // Full variant
+    return (_jsxs(View, { style: styles.fullContainer, children: [_jsx(Text, { style: [styles.fullTitle, theme?.textPrimary ? { color: theme.textPrimary } : undefined], children: title }), _jsx(Text, { style: [styles.fullDescription, theme?.textSecondary ? { color: theme.textSecondary } : undefined], children: description }), _jsxs(View, { style: styles.fullButtonsContainer, children: [whatsapp && (_jsxs(Button, { variant: "default", style: [styles.fullButton, { backgroundColor: successColor }], onPress: handleWhatsAppPress, children: [_jsx(MessageCircleIcon, { size: 20, color: "#FFFFFF" }), _jsx(Text, { style: [styles.fullButtonText, { marginLeft: 8 }], children: whatsapp.label || 'WhatsApp' })] })), phone && (_jsxs(Button, { variant: "default", style: [styles.fullButton, { backgroundColor: primaryColor }], onPress: handlePhonePress, children: [_jsx(PhoneIcon, { size: 20, color: "#FFFFFF" }), _jsx(Text, { style: [styles.fullButtonText, { marginLeft: 8 }], children: phone.label || 'Call' })] })), email && (_jsxs(Button, { variant: "default", style: [styles.fullButton, { backgroundColor: primaryColor }], onPress: handleEmailPress, children: [_jsx(MailIcon, { size: 20, color: "#FFFFFF" }), _jsx(Text, { style: [styles.fullButtonText, { marginLeft: 8 }], children: email.label || 'Email' })] }))] })] }));
+};
+const styles = StyleSheet.create({
+    // Icon-only variant
+    iconOnlyContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        flexWrap: 'wrap',
+    },
+    iconButton: {
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginHorizontal: 6,
+    },
+    // Compact variant
+    compactContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        flexWrap: 'wrap',
+    },
+    compactButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 10,
+        borderRadius: 8,
+        borderWidth: 1,
+        marginHorizontal: 6,
+    },
+    compactButtonText: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    // Full variant
+    fullContainer: {
+        alignItems: 'center',
+        paddingVertical: 16,
+    },
+    fullTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#1F2937',
+        marginBottom: 4,
+    },
+    fullDescription: {
+        fontSize: 14,
+        color: '#6B7280',
+        marginBottom: 16,
+        textAlign: 'center',
+    },
+    fullButtonsContainer: {
+        flexDirection: 'row',
+        width: '100%',
+        flexWrap: 'wrap',
+    },
+    fullButton: {
+        flex: 1,
+        minWidth: 120,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 12,
+        borderRadius: 8,
+        marginHorizontal: 6,
+    },
+    fullButtonText: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#FFFFFF',
+    },
+});

package/dist/components/buttons/PrimaryButton.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+/**
+ * PrimaryButton Component
+ *
+ * Blue primary action button with icon support.
+ * Full width with consistent styling across all screens.
+ */
+interface PrimaryButtonProps {
+    children: React.ReactNode;
+    onPress: () => void;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    backgroundColor?: string;
+    style?: ViewStyle;
+    textStyle?: TextStyle;
+}
+export declare const PrimaryButton: React.FC<PrimaryButtonProps>;
+export default PrimaryButton;

package/dist/components/buttons/PrimaryButton.js

@@ -0,0 +1,42 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TouchableOpacity, Text, StyleSheet, Platform } from 'react-native';
+export const PrimaryButton = ({ children, onPress, icon, disabled = false, backgroundColor = '#3B82F6', style, textStyle, }) => {
+    return (_jsxs(TouchableOpacity, { style: [
+            styles.button,
+            { backgroundColor: disabled ? '#9CA3AF' : backgroundColor },
+            style,
+        ], onPress: onPress, disabled: disabled, activeOpacity: 0.8, children: [icon && _jsx(_Fragment, { children: icon }), _jsx(Text, { style: [styles.text, icon ? styles.textWithIcon : undefined, textStyle], children: children })] }));
+};
+const styles = StyleSheet.create({
+    button: {
+        width: '100%',
+        paddingVertical: 16,
+        paddingHorizontal: 24,
+        borderRadius: 12,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 12,
+        ...Platform.select({
+            ios: {
+                shadowColor: '#000',
+                shadowOffset: { width: 0, height: 2 },
+                shadowOpacity: 0.1,
+                shadowRadius: 4,
+            },
+            android: {
+                elevation: 2,
+            },
+        }),
+    },
+    text: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#FFFFFF',
+        textAlign: 'center',
+    },
+    textWithIcon: {
+        marginLeft: 8,
+    },
+});
+export default PrimaryButton;

package/dist/components/buttons/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/buttons/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/buttons/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PrimaryButton } from './PrimaryButton';
+export { default as SecondaryButton } from './SecondaryButton';

package/dist/components/buttons/index.js

@@ -0,0 +1,3 @@
+// Buttons - Barrel Export
+export { default as PrimaryButton } from './PrimaryButton';
+export { default as SecondaryButton } from './SecondaryButton';

package/dist/components/cards/ContentCard.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+/**
+ * ContentCard Component
+ *
+ * White card container with border for content sections.
+ * Used for grouping related information on screens.
+ */
+interface ContentCardProps {
+    children: React.ReactNode;
+    title?: string;
+    style?: ViewStyle;
+    titleStyle?: TextStyle;
+}
+export declare const ContentCard: React.FC<ContentCardProps>;
+export default ContentCard;

package/dist/components/cards/ContentCard.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, StyleSheet } from 'react-native';
+export const ContentCard = ({ children, title, style, titleStyle, }) => {
+    return (_jsxs(View, { style: [styles.card, style], children: [title && (_jsx(Text, { style: [styles.title, titleStyle], children: title })), children] }));
+};
+const styles = StyleSheet.create({
+    card: {
+        width: '100%',
+        backgroundColor: '#FFFFFF',
+        borderRadius: 12,
+        padding: 20,
+        marginBottom: 16,
+        borderWidth: 1,
+        borderColor: '#E5E7EB',
+    },
+    title: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#1F2937',
+        marginBottom: 12,
+        lineHeight: 24,
+    },
+});
+export default ContentCard;

package/dist/components/cards/InfoCard.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface InfoCardProps {
+    title?: string;
+    description: string;
+    backgroundColor?: string;
+    borderColor?: string;
+}
+declare const InfoCard: React.FC<InfoCardProps>;
+export default InfoCard;

package/dist/components/cards/InfoCard.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Text, StyleSheet, Animated } from 'react-native';
+const InfoCard = ({ title = "Why we need this permission", description, backgroundColor = '#FFFFFF', borderColor = '#E5E7EB', }) => {
+    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,
+                borderColor,
+                opacity: fadeAnim,
+                transform: [
+                    {
+                        translateY: fadeAnim.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [20, 0],
+                        }),
+                    },
+                ],
+            },
+        ], children: [_jsx(Text, { style: styles.title, children: title }), _jsx(Text, { style: styles.description, children: description })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        borderRadius: 12,
+        padding: 20,
+        marginBottom: 16,
+        borderWidth: 1,
+        width: '100%',
+    },
+    title: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#1F2937',
+        marginBottom: 8,
+    },
+    description: {
+        fontSize: 14,
+        color: '#6B7280',
+        lineHeight: 20,
+    },
+});
+export default InfoCard;

package/dist/components/cards/TipsCard.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface TipsCardProps {
+    title?: string;
+    tips: string[];
+    backgroundColor?: string;
+    borderColor?: string;
+    titleColor?: string;
+    textColor?: string;
+}
+declare const TipsCard: React.FC<TipsCardProps>;
+export default TipsCard;