@codeimplants/ui-kit 1.0.0

package/src/components/icons/badges/DownloadBadge.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+interface DownloadBadgeProps {
+  size?: number;
+  backgroundColor?: string;
+  iconColor?: string;
+}
+
+const DownloadBadge: React.FC<DownloadBadgeProps> = ({
+  size = 48,
+  backgroundColor = '#2563EB',
+  iconColor = '#FFFFFF',
+}) => {
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          backgroundColor,
+        },
+      ]}
+    >
+      <Text style={[styles.icon, { fontSize: size * 0.5, color: iconColor }]}>
+        ⬇️
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 6,
+    elevation: 4,
+  },
+  icon: {
+    textAlign: 'center',
+  },
+});
+
+export default DownloadBadge;

package/src/components/icons/badges/XBadge.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+interface XBadgeProps {
+  size?: number;
+  backgroundColor?: string;
+  iconColor?: string;
+}
+
+const XBadge: React.FC<XBadgeProps> = ({
+  size = 48,
+  backgroundColor = '#F97316',
+  iconColor = '#FFFFFF',
+}) => {
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          backgroundColor,
+        },
+      ]}
+    >
+      <Text style={[styles.icon, { fontSize: size * 0.5, color: iconColor }]}>
+        ❌
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 6,
+    elevation: 4,
+  },
+  icon: {
+    textAlign: 'center',
+  },
+});
+
+export default XBadge;

package/src/components/icons/badges/index.ts

@@ -0,0 +1,4 @@
+// Icon Badges - Barrel Export
+export { default as DownloadBadge } from './DownloadBadge';
+export { default as ClockBadge } from './ClockBadge';
+export { default as XBadge } from './XBadge';

package/src/components/icons/index.ts

@@ -0,0 +1,4 @@
+// Icons - Barrel Export
+export * from './animated';
+export * from './badges';
+export * from './utilities';

package/src/components/icons/utilities/AlertTriangleIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const AlertTriangleIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor' }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+    <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" />
+    <Path d="M12 9v4" />
+    <Path d="M12 17h.01" />
+  </Svg>
+);
+
+export default AlertTriangleIcon;

package/src/components/icons/utilities/CheckCircleIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const CheckCircleIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor' }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+    <Path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+    <Path d="M22 4L12 14.01l-3-3" />
+  </Svg>
+);
+
+export default CheckCircleIcon;

package/src/components/icons/utilities/DownloadIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const DownloadIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor' }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+    <Path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+    <Path d="M7 10l5 5 5-5" />
+    <Path d="M12 15V3" />
+  </Svg>
+);
+
+export default DownloadIcon;

package/src/components/icons/utilities/IconWithBadge.tsx

@@ -0,0 +1,166 @@
+import React, { useEffect, useRef } from 'react';
+import { View, StyleSheet, Animated } from 'react-native';
+
+interface IconWithBadgeProps {
+  icon: React.ReactNode;
+  badge?: React.ReactNode;
+  size?: number;
+  iconBackgroundColor?: string;
+  badgeBackgroundColor?: string;
+  backgroundColor?: string; // Deprecated: use iconBackgroundColor
+  showBadge?: boolean;
+}
+
+const IconWithBadge: React.FC<IconWithBadgeProps> = ({
+  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 (
+    <View style={[styles.container, { width: size, height: size }]}>
+      {/* Background Circle */}
+      <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],
+                }),
+              },
+            ],
+          },
+        ]}
+      />
+
+      {/* Main Icon */}
+      <Animated.View
+        style={[
+          styles.iconContainer,
+          {
+            opacity: iconAnim,
+            transform: [
+              {
+                scale: iconAnim.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [0.5, 1],
+                }),
+              },
+            ],
+          },
+        ]}
+      >
+        {icon}
+      </Animated.View>
+
+      {/* Badge Overlay */}
+      {showBadge && badge && (
+        <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],
+                  }),
+                },
+              ],
+            },
+          ]}
+        >
+          {badge}
+        </Animated.View>
+      )}
+    </View>
+  );
+};
+
+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/src/components/icons/utilities/SettingsIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Svg, { Path, Circle } from 'react-native-svg';
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const SettingsIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor' }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+    <Circle cx="12" cy="12" r="3" />
+    <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" />
+  </Svg>
+);
+
+export default SettingsIcon;

package/src/components/icons/utilities/ShieldIcon.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const ShieldIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor' }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+    <Path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+  </Svg>
+);
+
+export default ShieldIcon;

package/src/components/icons/utilities/XIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const XIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor' }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+    <Path d="M18 6L6 18" />
+    <Path d="M6 6l12 12" />
+  </Svg>
+);
+
+export default XIcon;

package/src/components/icons/utilities/index.ts

@@ -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/src/components/index.ts

@@ -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/src/components/layout/DualButtonLayout.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import type { ThemeColors } from '../../types';
+
+interface DualButtonLayoutProps {
+  primaryText: string;
+  primaryAction: () => void;
+  primaryIcon?: string;
+  secondaryText: string;
+  secondaryAction: () => void;
+  secondaryIcon?: string;
+  layout?: 'horizontal' | 'vertical';
+  theme?: ThemeColors;
+}
+
+const DualButtonLayout: React.FC<DualButtonLayoutProps> = ({
+  primaryText,
+  primaryAction,
+  primaryIcon = '🔄',
+  secondaryText,
+  secondaryAction,
+  secondaryIcon = '🏠',
+  layout = 'horizontal',
+  theme,
+}) => {
+  const primaryColor = theme?.primary || '#2563EB';
+
+  return (
+    <View style={[styles.container, layout === 'vertical' ? styles.verticalContainer : undefined]}>
+      <TouchableOpacity
+        style={[
+          styles.primaryButton,
+          { backgroundColor: primaryColor },
+          layout === 'vertical' && styles.fullWidth,
+        ]}
+        onPress={primaryAction}
+        activeOpacity={0.8}
+      >
+        <Text style={styles.primaryIcon}>{primaryIcon}</Text>
+        <Text style={styles.primaryText}>{primaryText}</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        style={[
+          styles.secondaryButton,
+          layout === 'vertical' && styles.fullWidth,
+        ]}
+        onPress={secondaryAction}
+        activeOpacity={0.8}
+      >
+        <Text style={styles.secondaryIcon}>{secondaryIcon}</Text>
+        <Text style={styles.secondaryText}>{secondaryText}</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+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/src/components/layout/ResponsiveLayout.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { View, StyleSheet, Dimensions, Platform, 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;
+}
+
+const PADDING_VALUES = {
+  small: 12,
+  medium: 24,
+  large: 32,
+};
+
+export const ResponsiveLayout: React.FC<ResponsiveLayoutProps> = ({
+  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 (
+    <View 
+      style={[
+        styles.container,
+        {
+          paddingHorizontal: getHorizontalPadding(),
+          paddingVertical: getVerticalPadding(),
+        },
+        style,
+      ]}
+    >
+      <View 
+        style={[
+          styles.content,
+          {
+            maxWidth: isMobile ? width - (getHorizontalPadding() * 2) : maxWidth,
+            width: '100%',
+          },
+        ]}
+      >
+        {children}
+      </View>
+    </View>
+  );
+};
+
+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: number): number => {
+  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: number): number => {
+  const { width } = Dimensions.get('window');
+  
+  if (width < 375) {
+    // Small phones: reduce spacing
+    return baseSpacing * 0.75;
+  }
+  
+  return baseSpacing;
+};
+
+export default ResponsiveLayout;