@codeimplants/ui-kit 1.0.0

package/dist/components/icons/utilities/IconWithBadge.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface IconWithBadgeProps {
+    icon: React.ReactNode;
+    badge?: React.ReactNode;
+    size?: number;
+    iconBackgroundColor?: string;
+    badgeBackgroundColor?: string;
+    backgroundColor?: string;
+    showBadge?: boolean;
+}
+declare const IconWithBadge: React.FC<IconWithBadgeProps>;
+export default IconWithBadge;

package/dist/components/icons/utilities/IconWithBadge.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { View, StyleSheet, Animated } from 'react-native';
+const IconWithBadge = ({ icon, badge, size = 120, iconBackgroundColor, badgeBackgroundColor, backgroundColor, // Deprecated
+showBadge = true, }) => {
+    // Use iconBackgroundColor if provided, otherwise fall back to backgroundColor
+    const finalIconBg = iconBackgroundColor || backgroundColor || '#FEF3C7';
+    const badgeAnim = useRef(new Animated.Value(0)).current;
+    const iconAnim = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        // Icon entrance animation
+        Animated.spring(iconAnim, {
+            toValue: 1,
+            tension: 50,
+            friction: 7,
+            useNativeDriver: true,
+        }).start();
+        // Badge slide-in animation (delayed)
+        if (showBadge && badge) {
+            Animated.sequence([
+                Animated.delay(300),
+                Animated.spring(badgeAnim, {
+                    toValue: 1,
+                    tension: 50,
+                    friction: 7,
+                    useNativeDriver: true,
+                }),
+            ]).start();
+        }
+    }, [showBadge, badge]);
+    const badgeSize = size * 0.4;
+    const finalBadgeBg = badgeBackgroundColor || '#FFFFFF';
+    return (_jsxs(View, { style: [styles.container, { width: size, height: size }], children: [_jsx(Animated.View, { style: [
+                    styles.background,
+                    {
+                        width: size,
+                        height: size,
+                        borderRadius: size / 2,
+                        backgroundColor: finalIconBg,
+                        opacity: iconAnim,
+                        transform: [
+                            {
+                                scale: iconAnim.interpolate({
+                                    inputRange: [0, 1],
+                                    outputRange: [0.8, 1],
+                                }),
+                            },
+                        ],
+                    },
+                ] }), _jsx(Animated.View, { style: [
+                    styles.iconContainer,
+                    {
+                        opacity: iconAnim,
+                        transform: [
+                            {
+                                scale: iconAnim.interpolate({
+                                    inputRange: [0, 1],
+                                    outputRange: [0.5, 1],
+                                }),
+                            },
+                        ],
+                    },
+                ], children: icon }), showBadge && badge && (_jsx(Animated.View, { style: [
+                    styles.badge,
+                    {
+                        width: badgeSize,
+                        height: badgeSize,
+                        borderRadius: badgeSize / 2,
+                        backgroundColor: finalBadgeBg,
+                        opacity: badgeAnim,
+                        transform: [
+                            {
+                                translateX: badgeAnim.interpolate({
+                                    inputRange: [0, 1],
+                                    outputRange: [20, 0],
+                                }),
+                            },
+                            {
+                                translateY: badgeAnim.interpolate({
+                                    inputRange: [0, 1],
+                                    outputRange: [20, 0],
+                                }),
+                            },
+                            {
+                                scale: badgeAnim.interpolate({
+                                    inputRange: [0, 1],
+                                    outputRange: [0.5, 1],
+                                }),
+                            },
+                        ],
+                    },
+                ], children: badge }))] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        position: 'relative',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    background: {
+        position: 'absolute',
+    },
+    iconContainer: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    badge: {
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 8,
+        elevation: 4,
+    },
+});
+export default IconWithBadge;

package/dist/components/icons/utilities/SettingsIcon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface IconProps {
+    size?: number;
+    color?: string;
+}
+declare const SettingsIcon: React.FC<IconProps>;
+export default SettingsIcon;

package/dist/components/icons/utilities/SettingsIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Svg, { Path, Circle } from 'react-native-svg';
+const SettingsIcon = ({ size = 24, color = 'currentColor' }) => (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx(Circle, { cx: "12", cy: "12", r: "3" }), _jsx(Path, { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })] }));
+export default SettingsIcon;

package/dist/components/icons/utilities/ShieldIcon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface IconProps {
+    size?: number;
+    color?: string;
+}
+declare const ShieldIcon: React.FC<IconProps>;
+export default ShieldIcon;

package/dist/components/icons/utilities/ShieldIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+const ShieldIcon = ({ size = 24, color = 'currentColor' }) => (_jsx(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx(Path, { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) }));
+export default ShieldIcon;

package/dist/components/icons/utilities/SimpleIcons.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface IconProps {
+    size?: number;
+    color?: string;
+}
+export declare const ShieldIcon: React.FC<IconProps>;
+export declare const SettingsIcon: React.FC<IconProps>;
+export declare const CheckCircleIcon: React.FC<IconProps>;
+export declare const AlertTriangleIcon: React.FC<IconProps>;
+export declare const DownloadIcon: React.FC<IconProps>;
+export declare const XIcon: React.FC<IconProps>;
+export {};

package/dist/components/icons/utilities/SimpleIcons.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Svg, { Path, Circle } from 'react-native-svg';
+export const ShieldIcon = ({ size = 24, color = 'currentColor' }) => (_jsx(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx(Path, { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) }));
+export const SettingsIcon = ({ size = 24, color = 'currentColor' }) => (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx(Circle, { cx: "12", cy: "12", r: "3" }), _jsx(Path, { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })] }));
+export const CheckCircleIcon = ({ size = 24, color = 'currentColor' }) => (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx(Path, { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }), _jsx(Path, { d: "M22 4L12 14.01l-3-3" })] }));
+export const AlertTriangleIcon = ({ size = 24, color = 'currentColor' }) => (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx(Path, { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }), _jsx(Path, { d: "M12 9v4" }), _jsx(Path, { d: "M12 17h.01" })] }));
+export const DownloadIcon = ({ size = 24, color = 'currentColor' }) => (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx(Path, { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), _jsx(Path, { d: "M7 10l5 5 5-5" }), _jsx(Path, { d: "M12 15V3" })] }));
+export const XIcon = ({ size = 24, color = 'currentColor' }) => (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx(Path, { d: "M18 6L6 18" }), _jsx(Path, { d: "M6 6l12 12" })] }));

package/dist/components/icons/utilities/XIcon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface IconProps {
+    size?: number;
+    color?: string;
+}
+declare const XIcon: React.FC<IconProps>;
+export default XIcon;

package/dist/components/icons/utilities/XIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+const XIcon = ({ size = 24, color = 'currentColor' }) => (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx(Path, { d: "M18 6L6 18" }), _jsx(Path, { d: "M6 6l12 12" })] }));
+export default XIcon;

package/dist/components/icons/utilities/index.d.ts

@@ -0,0 +1,7 @@
+export { default as IconWithBadge } from './IconWithBadge';
+export { default as DownloadIcon } from './DownloadIcon';
+export { default as XIcon } from './XIcon';
+export { default as ShieldIcon } from './ShieldIcon';
+export { default as SettingsIcon } from './SettingsIcon';
+export { default as CheckCircleIcon } from './CheckCircleIcon';
+export { default as AlertTriangleIcon } from './AlertTriangleIcon';

package/dist/components/icons/utilities/index.js

@@ -0,0 +1,8 @@
+// Icon Utilities - Barrel Export
+export { default as IconWithBadge } from './IconWithBadge';
+export { default as DownloadIcon } from './DownloadIcon';
+export { default as XIcon } from './XIcon';
+export { default as ShieldIcon } from './ShieldIcon';
+export { default as SettingsIcon } from './SettingsIcon';
+export { default as CheckCircleIcon } from './CheckCircleIcon';
+export { default as AlertTriangleIcon } from './AlertTriangleIcon';

package/dist/components/index.d.ts

@@ -0,0 +1,9 @@
+export * from './buttons';
+export * from './cards';
+export * from './layout';
+export * from './feedback';
+export * from './lists';
+export * from './support';
+export * from './timers';
+export * from './status';
+export * from './icons';

package/dist/components/index.js

@@ -0,0 +1,10 @@
+// Components - Barrel Export
+export * from './buttons';
+export * from './cards';
+export * from './layout';
+export * from './feedback';
+export * from './lists';
+export * from './support';
+export * from './timers';
+export * from './status';
+export * from './icons';

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

@@ -0,0 +1,4 @@
+export { default as ScreenContainer } from './ScreenContainer';
+export { default as SafeAreaWrapper } from './SafeAreaWrapper';
+export { default as ResponsiveLayout } from './ResponsiveLayout';
+export { default as DualButtonLayout } from './DualButtonLayout';

package/dist/components/layout/index.js

@@ -0,0 +1,5 @@
+// Layout - Barrel Export
+export { default as ScreenContainer } from './ScreenContainer';
+export { default as SafeAreaWrapper } from './SafeAreaWrapper';
+export { default as ResponsiveLayout } from './ResponsiveLayout';
+export { default as DualButtonLayout } from './DualButtonLayout';

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