@codeimplants/ui-kit 1.0.0

package/src/components/layout/SafeAreaWrapper.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { View, StyleSheet, Platform, 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 const SafeAreaWrapper: React.FC<SafeAreaWrapperProps> = ({
+  children,
+  edges = ['top', 'bottom', 'left', 'right'],
+  style,
+  backgroundColor = '#FFFFFF',
+}) => {
+  // Calculate safe area padding based on platform
+  const getSafeAreaPadding = (): ViewStyle => {
+    const padding: ViewStyle = {};
+    
+    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 (
+    <View 
+      style={[
+        styles.container,
+        { backgroundColor },
+        getSafeAreaPadding(),
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export default SafeAreaWrapper;

package/src/components/layout/ScreenContainer.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { View, ScrollView, StyleSheet, ViewStyle } from 'react-native';
+import SafeAreaWrapper from './SafeAreaWrapper';
+
+/**
+ * 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 const ScreenContainer: React.FC<ScreenContainerProps> = ({
+  children,
+  backgroundColor = '#F9FAFB',
+  style,
+}) => {
+  return (
+    <SafeAreaWrapper backgroundColor={backgroundColor}>
+      <ScrollView
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+        style={style}
+      >
+        <View style={styles.content}>
+          {children}
+        </View>
+      </ScrollView>
+    </SafeAreaWrapper>
+  );
+};
+
+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/src/components/layout/index.ts

@@ -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/src/components/lists/CheckListItem.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+/**
+ * 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 const CheckListItem: React.FC<CheckListItemProps> = ({
+  text,
+  icon,
+  iconColor = '#10B981',
+}) => {
+  // Default checkmark icon if none provided
+  const defaultIcon = (
+    <View style={[styles.defaultIcon, { backgroundColor: iconColor }]}>
+      <Text style={styles.checkmark}>✓</Text>
+    </View>
+  );
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.iconContainer}>
+        {icon || defaultIcon}
+      </View>
+      <Text style={styles.text}>{text}</Text>
+    </View>
+  );
+};
+
+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/src/components/lists/StatusCheckList.tsx

@@ -0,0 +1,101 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Animated } from 'react-native';
+
+interface StatusCheckListProps {
+  messages: string[];
+  title?: string;
+  backgroundColor?: string;
+  borderColor?: string;
+  checkColor?: string;
+}
+
+const StatusCheckList: React.FC<StatusCheckListProps> = ({
+  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 (
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          backgroundColor,
+          borderColor,
+          opacity: fadeAnim,
+          transform: [
+            {
+              translateY: fadeAnim.interpolate({
+                inputRange: [0, 1],
+                outputRange: [20, 0],
+              }),
+            },
+          ],
+        },
+      ]}
+    >
+      <Text style={styles.title}>{title}</Text>
+      {messages.map((message, index) => (
+        <View key={index} style={styles.messageItem}>
+          <View style={[styles.checkIcon, { backgroundColor: `${checkColor}20` }]}>
+            <Text style={[styles.checkmark, { color: checkColor }]}>✓</Text>
+          </View>
+          <Text style={styles.messageText}>{message}</Text>
+        </View>
+      ))}
+    </Animated.View>
+  );
+};
+
+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/src/components/lists/index.ts

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

package/src/components/status/ConnectionStatus.tsx

@@ -0,0 +1,90 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Animated } from 'react-native';
+
+interface ConnectionStatusProps {
+  text?: string;
+  textColor?: string;
+  iconColor?: string;
+}
+
+const ConnectionStatus: React.FC<ConnectionStatusProps> = ({
+  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: Animated.Value, delay: number) => {
+      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 (
+    <View style={styles.container}>
+      <Text style={[styles.icon, { color: iconColor }]}>📶</Text>
+      <Text style={[styles.text, { color: textColor }]}>{text}</Text>
+      <View style={styles.dotsContainer}>
+        <Animated.Text style={[styles.dot, { color: textColor, opacity: dotAnim1 }]}>
+          •
+        </Animated.Text>
+        <Animated.Text style={[styles.dot, { color: textColor, opacity: dotAnim2 }]}>
+          •
+        </Animated.Text>
+        <Animated.Text style={[styles.dot, { color: textColor, opacity: dotAnim3 }]}>
+          •
+        </Animated.Text>
+      </View>
+    </View>
+  );
+};
+
+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/src/components/status/VersionDisplay.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+/**
+ * VersionDisplay Component
+ * 
+ * Displays version comparison (current → new) in inline format with badges.
+ * Used in update screens to show version upgrade.
+ */
+
+interface VersionDisplayProps {
+  currentVersion: string;
+  newVersion: string;
+  primaryColor?: string;
+}
+
+export const VersionDisplay: React.FC<VersionDisplayProps> = ({
+  currentVersion,
+  newVersion,
+  primaryColor = '#3B82F6',
+}) => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.versionBadge}>
+        <Text style={styles.versionText}>{currentVersion}</Text>
+      </View>
+      <Text style={styles.arrow}>→</Text>
+      <View style={[styles.versionBadge, { backgroundColor: primaryColor + '20' }]}>
+        <Text style={[styles.versionText, { color: primaryColor }]}>{newVersion}</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 24,
+  },
+  versionBadge: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 8,
+    backgroundColor: '#F3F4F6',
+  },
+  versionText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#6B7280',
+  },
+  arrow: {
+    fontSize: 16,
+    color: '#9CA3AF',
+    marginHorizontal: 12,
+  },
+});
+
+export default VersionDisplay;

package/src/components/status/index.ts

@@ -0,0 +1,3 @@
+// Status - Barrel Export
+export { default as ConnectionStatus } from './ConnectionStatus';
+export { default as VersionDisplay } from './VersionDisplay';