@codeimplants/ui-kit 1.0.0

package/src/components/cards/InfoCard.tsx

@@ -0,0 +1,74 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Animated } from 'react-native';
+
+interface InfoCardProps {
+  title?: string;
+  description: string;
+  backgroundColor?: string;
+  borderColor?: string;
+}
+
+const InfoCard: React.FC<InfoCardProps> = ({
+  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 (
+    <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>
+      <Text style={styles.description}>{description}</Text>
+    </Animated.View>
+  );
+};
+
+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/src/components/cards/TipsCard.tsx

@@ -0,0 +1,106 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Animated } from 'react-native';
+
+interface TipsCardProps {
+  title?: string;
+  tips: string[];
+  backgroundColor?: string;
+  borderColor?: string;
+  titleColor?: string;
+  textColor?: string;
+}
+
+const TipsCard: React.FC<TipsCardProps> = ({
+  title = 'Try these tips:',
+  tips,
+  backgroundColor = '#FFFFFF',
+  borderColor = '#E5E7EB',
+  titleColor = '#1F2937',
+  textColor = '#6B7280',
+}) => {
+  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, { color: titleColor }]}>{title}</Text>
+      <View style={styles.tipsList}>
+        {tips.map((tip, index) => (
+          <View key={index} style={styles.tipItem}>
+            <View style={styles.numberContainer}>
+              <Text style={[styles.number, { color: textColor }]}>{index + 1}</Text>
+            </View>
+            <Text style={[styles.tipText, { color: textColor }]}>{tip}</Text>
+          </View>
+        ))}
+      </View>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 12,
+    padding: 20,
+    marginBottom: 24,
+    borderWidth: 1,
+    width: '100%',
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 16,
+  },
+  tipsList: {
+    gap: 12,
+  },
+  tipItem: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+  numberContainer: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: '#F3F4F6',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 12,
+  },
+  number: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  tipText: {
+    flex: 1,
+    fontSize: 14,
+    lineHeight: 20,
+  },
+});
+
+export default TipsCard;

package/src/components/cards/WarningCard.tsx

@@ -0,0 +1,118 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Animated } from 'react-native';
+
+interface WarningCardProps {
+  title?: string;
+  description?: string;
+  steps: string[];
+  backgroundColor?: string;
+  borderColor?: string;
+  iconColor?: string;
+}
+
+const WarningCard: React.FC<WarningCardProps> = ({
+  title = "Permission Denied",
+  description,
+  steps,
+  backgroundColor = '#FED7AA',
+  borderColor = '#F97316',
+  iconColor = '#F97316',
+}) => {
+  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],
+              }),
+            },
+          ],
+        },
+      ]}
+    >
+      <View style={styles.header}>
+        <Text style={[styles.icon, { color: iconColor }]}>⚠️</Text>
+        <Text style={styles.title}>{title}</Text>
+      </View>
+      {description && <Text style={styles.description}>{description}</Text>}
+      <View style={styles.stepsList}>
+        {steps.map((step, index) => (
+          <View key={index} style={styles.stepItem}>
+            <Text style={styles.stepNumber}>{index + 1}.</Text>
+            <Text style={styles.stepText}>{step}</Text>
+          </View>
+        ))}
+      </View>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 12,
+    padding: 20,
+    marginBottom: 16,
+    borderWidth: 1.5,
+    width: '100%',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  icon: {
+    fontSize: 20,
+    marginRight: 8,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#92400E',
+  },
+  description: {
+    fontSize: 14,
+    color: '#92400E',
+    lineHeight: 20,
+    marginBottom: 12,
+  },
+  stepsList: {
+    gap: 8,
+  },
+  stepItem: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+  stepNumber: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#92400E',
+    marginRight: 8,
+    minWidth: 20,
+  },
+  stepText: {
+    flex: 1,
+    fontSize: 14,
+    color: '#92400E',
+    lineHeight: 20,
+  },
+});
+
+export default WarningCard;

package/src/components/cards/WhatsNewCard.tsx

@@ -0,0 +1,121 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Animated } from 'react-native';
+
+export interface FeatureItem {
+  icon: string;
+  title: string;
+  description: string;
+  iconColor?: string;
+}
+
+interface WhatsNewCardProps {
+  features: FeatureItem[];
+  title?: string;
+  backgroundColor?: string;
+  borderColor?: string;
+}
+
+const WhatsNewCard: React.FC<WhatsNewCardProps> = ({
+  features,
+  title = "What's New",
+  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 (
+    <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>
+      {features.map((feature, index) => (
+        <View key={index} style={styles.featureItem}>
+          <View
+            style={[
+              styles.iconContainer,
+              { backgroundColor: feature.iconColor || '#F3F4F6' },
+            ]}
+          >
+            <Text style={styles.icon}>{feature.icon}</Text>
+          </View>
+          <View style={styles.textContainer}>
+            <Text style={styles.featureTitle}>{feature.title}</Text>
+            <Text style={styles.featureDescription}>{feature.description}</Text>
+          </View>
+        </View>
+      ))}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 12,
+    padding: 24,
+    marginBottom: 20,
+    borderWidth: 1,
+    width: '100%',
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#1F2937',
+    marginBottom: 20,
+  },
+  featureItem: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    marginBottom: 16,
+  },
+  iconContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 12,
+  },
+  icon: {
+    fontSize: 20,
+  },
+  textContainer: {
+    flex: 1,
+  },
+  featureTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#1F2937',
+    marginBottom: 4,
+  },
+  featureDescription: {
+    fontSize: 14,
+    color: '#6B7280',
+    lineHeight: 20,
+  },
+});
+
+export default WhatsNewCard;

package/src/components/cards/index.ts

@@ -0,0 +1,6 @@
+// Cards - Barrel Export
+export { default as ContentCard } from './ContentCard';
+export { default as InfoCard } from './InfoCard';
+export { default as WarningCard } from './WarningCard';
+export { default as WhatsNewCard } from './WhatsNewCard';
+export { default as TipsCard } from './TipsCard';

package/src/components/feedback/ExpandableSection.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, LayoutAnimation, Platform, UIManager } from 'react-native';
+
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+interface ExpandableSectionProps {
+  title: string;
+  children: React.ReactNode;
+  defaultExpanded?: boolean;
+}
+
+const ExpandableSection: React.FC<ExpandableSectionProps> = ({
+  title,
+  children,
+  defaultExpanded = false,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+
+  const toggleExpand = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setIsExpanded(!isExpanded);
+  };
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity
+        style={styles.header}
+        onPress={toggleExpand}
+        activeOpacity={0.7}
+      >
+        <Text style={styles.arrow}>{isExpanded ? '▼' : '▶'}</Text>
+        <Text style={styles.title}>{title}</Text>
+      </TouchableOpacity>
+      {isExpanded && <View style={styles.content}>{children}</View>}
+    </View>
+  );
+};
+
+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/src/components/feedback/SecurityBanner.tsx

@@ -0,0 +1,74 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Animated } from 'react-native';
+
+interface SecurityBannerProps {
+  message?: string;
+  backgroundColor?: string;
+  textColor?: string;
+  iconColor?: string;
+}
+
+const SecurityBanner: React.FC<SecurityBannerProps> = ({
+  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 (
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          backgroundColor,
+          opacity: fadeAnim,
+        },
+      ]}
+    >
+      <View style={[styles.iconContainer, { backgroundColor: `${iconColor}20` }]}>
+        <Text style={[styles.icon, { color: iconColor }]}>✓</Text>
+      </View>
+      <Text style={[styles.message, { color: textColor }]}>{message}</Text>
+    </Animated.View>
+  );
+};
+
+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/src/components/feedback/SpeedBadge.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Animated } from 'react-native';
+
+interface SpeedBadgeProps {
+  speed?: '2G' | '3G' | '4G' | '5G';
+  backgroundColor?: string;
+  textColor?: string;
+  iconColor?: string;
+}
+
+const SpeedBadge: React.FC<SpeedBadgeProps> = ({
+  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 (
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          backgroundColor,
+          opacity: fadeAnim,
+        },
+      ]}
+    >
+      <Text style={[styles.icon, { color: iconColor }]}>⚡</Text>
+      <Text style={[styles.text, { color: textColor }]}>{speed} Speed</Text>
+    </Animated.View>
+  );
+};
+
+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/src/components/feedback/StatusBadge.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { View, Text, StyleSheet, 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 const StatusBadge: React.FC<StatusBadgeProps> = ({
+  text,
+  backgroundColor = '#FED7AA',
+  textColor = '#F59E0B',
+  style,
+  textStyle,
+}) => {
+  return (
+    <View style={[styles.badge, { backgroundColor }, style]}>
+      <Text style={[styles.text, { color: textColor }, textStyle]}>
+        {text}
+      </Text>
+    </View>
+  );
+};
+
+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;