@codeimplants/ui-kit 1.0.0

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

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

package/dist/components/lists/index.js

@@ -0,0 +1,3 @@
+// Lists - Barrel Export
+export { default as CheckListItem } from './CheckListItem';
+export { default as StatusCheckList } from './StatusCheckList';

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

@@ -0,0 +1,14 @@
+import React from 'react';
+/**
+ * CheckListItem Component
+ *
+ * List item with icon (typically checkmark) and text.
+ * Used for displaying status lists and feature lists.
+ */
+interface CheckListItemProps {
+    text: string;
+    icon?: React.ReactNode;
+    iconColor?: string;
+}
+export declare const CheckListItem: React.FC<CheckListItemProps>;
+export default CheckListItem;

package/dist/components/shared/CheckListItem.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, StyleSheet } from 'react-native';
+export const CheckListItem = ({ text, icon, iconColor = '#10B981', }) => {
+    // Default checkmark icon if none provided
+    const defaultIcon = (_jsx(View, { style: [styles.defaultIcon, { backgroundColor: iconColor }], children: _jsx(Text, { style: styles.checkmark, children: "\u2713" }) }));
+    return (_jsxs(View, { style: styles.container, children: [_jsx(View, { style: styles.iconContainer, children: icon || defaultIcon }), _jsx(Text, { style: styles.text, children: text })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        marginBottom: 12,
+    },
+    iconContainer: {
+        width: 24,
+        height: 24,
+        marginRight: 12,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    defaultIcon: {
+        width: 20,
+        height: 20,
+        borderRadius: 10,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    checkmark: {
+        color: '#FFFFFF',
+        fontSize: 12,
+        fontWeight: '700',
+    },
+    text: {
+        flex: 1,
+        fontSize: 14,
+        color: '#6B7280',
+        lineHeight: 20,
+    },
+});
+export default CheckListItem;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ConnectionStatusProps {
+    text?: string;
+    textColor?: string;
+    iconColor?: string;
+}
+declare const ConnectionStatus: React.FC<ConnectionStatusProps>;
+export default ConnectionStatus;

package/dist/components/shared/ConnectionStatus.js

@@ -0,0 +1,57 @@
+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 ConnectionStatus = ({ text = 'Waiting for connection', textColor = '#6B7280', iconColor = '#9CA3AF', }) => {
+    const dotAnim1 = useRef(new Animated.Value(0)).current;
+    const dotAnim2 = useRef(new Animated.Value(0)).current;
+    const dotAnim3 = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        const createDotAnimation = (animValue, delay) => {
+            return Animated.loop(Animated.sequence([
+                Animated.delay(delay),
+                Animated.timing(animValue, {
+                    toValue: 1,
+                    duration: 400,
+                    useNativeDriver: true,
+                }),
+                Animated.timing(animValue, {
+                    toValue: 0,
+                    duration: 400,
+                    useNativeDriver: true,
+                }),
+            ]));
+        };
+        Animated.parallel([
+            createDotAnimation(dotAnim1, 0),
+            createDotAnimation(dotAnim2, 200),
+            createDotAnimation(dotAnim3, 400),
+        ]).start();
+    }, []);
+    return (_jsxs(View, { style: styles.container, children: [_jsx(Text, { style: [styles.icon, { color: iconColor }], children: "\uD83D\uDCF6" }), _jsx(Text, { style: [styles.text, { color: textColor }], children: text }), _jsxs(View, { style: styles.dotsContainer, children: [_jsx(Animated.Text, { style: [styles.dot, { color: textColor, opacity: dotAnim1 }], children: "\u2022" }), _jsx(Animated.Text, { style: [styles.dot, { color: textColor, opacity: dotAnim2 }], children: "\u2022" }), _jsx(Animated.Text, { style: [styles.dot, { color: textColor, opacity: dotAnim3 }], children: "\u2022" })] })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 24,
+    },
+    icon: {
+        fontSize: 16,
+        marginRight: 8,
+    },
+    text: {
+        fontSize: 14,
+        fontWeight: '500',
+    },
+    dotsContainer: {
+        flexDirection: 'row',
+        marginLeft: 4,
+    },
+    dot: {
+        fontSize: 14,
+        fontWeight: '700',
+        marginHorizontal: 1,
+    },
+});
+export default ConnectionStatus;

package/dist/components/shared/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/shared/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/shared/CountdownTimer.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface CountdownTimerProps {
+    estimatedEndTime: Date;
+    onComplete?: () => void;
+    backgroundColor?: string;
+    borderColor?: string;
+}
+declare const CountdownTimer: React.FC<CountdownTimerProps>;
+export default CountdownTimer;

package/dist/components/shared/CountdownTimer.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+const CountdownTimer = ({ estimatedEndTime, onComplete, backgroundColor = '#FFFFFF', borderColor = '#E5E7EB', }) => {
+    const [timeRemaining, setTimeRemaining] = useState({
+        hours: 0,
+        minutes: 0,
+        seconds: 0,
+    });
+    useEffect(() => {
+        const updateCountdown = () => {
+            const now = new Date().getTime();
+            const end = new Date(estimatedEndTime).getTime();
+            const distance = end - now;
+            if (distance < 0) {
+                setTimeRemaining({ hours: 0, minutes: 0, seconds: 0 });
+                onComplete?.();
+                return;
+            }
+            const hours = Math.floor(distance / (1000 * 60 * 60));
+            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+            const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+            setTimeRemaining({ hours, minutes, seconds });
+        };
+        updateCountdown();
+        const interval = setInterval(updateCountdown, 1000);
+        return () => clearInterval(interval);
+    }, [estimatedEndTime, onComplete]);
+    const formatTime = (value) => {
+        return value.toString().padStart(2, '0');
+    };
+    const formatDate = () => {
+        const date = new Date(estimatedEndTime);
+        const hours = date.getHours();
+        const minutes = date.getMinutes();
+        const day = date.toLocaleDateString('en-US', { weekday: 'short' });
+        const dayNum = date.getDate();
+        const month = date.toLocaleDateString('en-US', { month: 'short' });
+        return `Expected to be back by ${hours}:${formatTime(minutes)} on ${day} ${dayNum} ${month}`;
+    };
+    return (_jsxs(View, { style: [
+            styles.container,
+            {
+                backgroundColor,
+                borderColor,
+            },
+        ], children: [_jsx(Text, { style: styles.title, children: "Estimated Time Remaining" }), _jsxs(View, { style: styles.timerContainer, children: [_jsxs(View, { style: styles.timeBox, children: [_jsx(Text, { style: styles.timeValue, children: formatTime(timeRemaining.hours) }), _jsx(Text, { style: styles.timeLabel, children: "Hours" })] }), _jsxs(View, { style: styles.timeBox, children: [_jsx(Text, { style: styles.timeValue, children: formatTime(timeRemaining.minutes) }), _jsx(Text, { style: styles.timeLabel, children: "Min" })] }), _jsxs(View, { style: styles.timeBox, children: [_jsx(Text, { style: styles.timeValue, children: formatTime(timeRemaining.seconds) }), _jsx(Text, { style: styles.timeLabel, children: "Sec" })] })] }), _jsx(Text, { style: styles.expectedText, children: formatDate() })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        borderRadius: 12,
+        padding: 24,
+        marginBottom: 24,
+        borderWidth: 1,
+        width: '100%',
+    },
+    title: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#1F2937',
+        textAlign: 'center',
+        marginBottom: 20,
+    },
+    timerContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        gap: 16,
+        marginBottom: 16,
+    },
+    timeBox: {
+        alignItems: 'center',
+        minWidth: 70,
+    },
+    timeValue: {
+        fontSize: 48,
+        fontWeight: '700',
+        color: '#1F2937',
+        lineHeight: 56,
+    },
+    timeLabel: {
+        fontSize: 14,
+        color: '#6B7280',
+        marginTop: 4,
+    },
+    expectedText: {
+        fontSize: 13,
+        color: '#9CA3AF',
+        textAlign: 'center',
+    },
+});
+export default CountdownTimer;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { ThemeColors } from '../../types';
+interface DualButtonLayoutProps {
+    primaryText: string;
+    primaryAction: () => void;
+    primaryIcon?: string;
+    secondaryText: string;
+    secondaryAction: () => void;
+    secondaryIcon?: string;
+    layout?: 'horizontal' | 'vertical';
+    theme?: ThemeColors;
+}
+declare const DualButtonLayout: React.FC<DualButtonLayoutProps>;
+export default DualButtonLayout;

package/dist/components/shared/DualButtonLayout.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+const DualButtonLayout = ({ primaryText, primaryAction, primaryIcon = '🔄', secondaryText, secondaryAction, secondaryIcon = '🏠', layout = 'horizontal', theme, }) => {
+    const primaryColor = theme?.primary || '#2563EB';
+    return (_jsxs(View, { style: [styles.container, layout === 'vertical' ? styles.verticalContainer : undefined], children: [_jsxs(TouchableOpacity, { style: [
+                    styles.primaryButton,
+                    { backgroundColor: primaryColor },
+                    layout === 'vertical' && styles.fullWidth,
+                ], onPress: primaryAction, activeOpacity: 0.8, children: [_jsx(Text, { style: styles.primaryIcon, children: primaryIcon }), _jsx(Text, { style: styles.primaryText, children: primaryText })] }), _jsxs(TouchableOpacity, { style: [
+                    styles.secondaryButton,
+                    layout === 'vertical' && styles.fullWidth,
+                ], onPress: secondaryAction, activeOpacity: 0.8, children: [_jsx(Text, { style: styles.secondaryIcon, children: secondaryIcon }), _jsx(Text, { style: styles.secondaryText, children: secondaryText })] })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        gap: 12,
+        marginTop: 24,
+        paddingHorizontal: 20,
+    },
+    verticalContainer: {
+        flexDirection: 'column',
+        gap: 12,
+    },
+    fullWidth: {
+        width: '100%',
+    },
+    primaryButton: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 14,
+        paddingHorizontal: 20,
+        borderRadius: 12,
+        gap: 8,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+        elevation: 2,
+    },
+    primaryIcon: {
+        fontSize: 18,
+    },
+    primaryText: {
+        color: '#FFFFFF',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    secondaryButton: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 14,
+        paddingHorizontal: 20,
+        borderRadius: 12,
+        gap: 8,
+        backgroundColor: '#FFFFFF',
+        borderWidth: 1.5,
+        borderColor: '#E5E7EB',
+    },
+    secondaryIcon: {
+        fontSize: 18,
+    },
+    secondaryText: {
+        color: '#374151',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+});
+export default DualButtonLayout;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ExpandableSectionProps {
+    title: string;
+    children: React.ReactNode;
+    defaultExpanded?: boolean;
+}
+declare const ExpandableSection: React.FC<ExpandableSectionProps>;
+export default ExpandableSection;

package/dist/components/shared/ExpandableSection.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, LayoutAnimation, Platform, UIManager } from 'react-native';
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+const ExpandableSection = ({ title, children, defaultExpanded = false, }) => {
+    const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+    const toggleExpand = () => {
+        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+        setIsExpanded(!isExpanded);
+    };
+    return (_jsxs(View, { style: styles.container, children: [_jsxs(TouchableOpacity, { style: styles.header, onPress: toggleExpand, activeOpacity: 0.7, children: [_jsx(Text, { style: styles.arrow, children: isExpanded ? '▼' : '▶' }), _jsx(Text, { style: styles.title, children: title })] }), isExpanded && _jsx(View, { style: styles.content, children: children })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        marginTop: 16,
+        marginHorizontal: 20,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 12,
+        gap: 8,
+    },
+    arrow: {
+        fontSize: 12,
+        color: '#6B7280',
+    },
+    title: {
+        fontSize: 15,
+        fontWeight: '600',
+        color: '#374151',
+    },
+    content: {
+        marginTop: 8,
+        padding: 16,
+        backgroundColor: '#FEF3C7',
+        borderRadius: 8,
+        borderLeftWidth: 3,
+        borderLeftColor: '#F59E0B',
+    },
+});
+export default ExpandableSection;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+/**
+ * IconWithBadge Component
+ *
+ * Large circular icon container with small badge overlay.
+ * Used as the primary visual element at the top of all screens.
+ */
+interface IconWithBadgeProps {
+    icon: React.ReactNode;
+    iconBackgroundColor: string;
+    badge?: React.ReactNode;
+    badgeBackgroundColor?: string;
+    size?: number;
+    badgeSize?: number;
+}
+export declare const IconWithBadge: React.FC<IconWithBadgeProps>;
+export default IconWithBadge;

package/dist/components/shared/IconWithBadge.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, StyleSheet } from 'react-native';
+export const IconWithBadge = ({ icon, iconBackgroundColor, badge, badgeBackgroundColor = '#3B82F6', size = 96, badgeSize = 40, }) => {
+    const iconContainerStyle = {
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        backgroundColor: iconBackgroundColor,
+    };
+    const badgeContainerStyle = {
+        width: badgeSize,
+        height: badgeSize,
+        borderRadius: badgeSize / 2,
+        backgroundColor: badgeBackgroundColor,
+    };
+    return (_jsxs(View, { style: [styles.container, { marginBottom: 24 }], children: [_jsx(View, { style: [styles.iconContainer, iconContainerStyle], children: icon }), badge && (_jsx(View, { style: [styles.badgeContainer, badgeContainerStyle], children: badge }))] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        position: 'relative',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    iconContainer: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    badgeContainer: {
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: 3,
+        borderColor: '#FFFFFF',
+    },
+});
+export default IconWithBadge;

package/dist/components/shared/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/shared/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/shared/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/shared/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;