@codeimplants/ui-kit 1.0.0

package/src/components/feedback/TopBanner.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import type { BannerConfig } from '../../types';
+
+interface TopBannerProps {
+  banner: BannerConfig;
+}
+
+const TopBanner: React.FC<TopBannerProps> = ({ banner }) => {
+  const getBannerColors = () => {
+    switch (banner.type) {
+      case 'warning':
+        return {
+          background: '#FEF3C7',
+          text: '#92400E',
+          icon: '⚠️',
+        };
+      case 'error':
+        return {
+          background: '#FEE2E2',
+          text: '#991B1B',
+          icon: '❌',
+        };
+      case 'info':
+        return {
+          background: '#DBEAFE',
+          text: '#1E40AF',
+          icon: 'ℹ️',
+        };
+      case 'success':
+        return {
+          background: '#D1FAE5',
+          text: '#065F46',
+          icon: '✅',
+        };
+      default:
+        return {
+          background: '#F3F4F6',
+          text: '#374151',
+          icon: 'ℹ️',
+        };
+    }
+  };
+
+  const colors = getBannerColors();
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
+      <View style={styles.content}>
+        <Text style={styles.icon}>{banner.icon || colors.icon}</Text>
+        <Text style={[styles.message, { color: colors.text }]}>
+          {banner.message}
+        </Text>
+      </View>
+      {banner.dismissible && banner.onDismiss && (
+        <TouchableOpacity
+          onPress={banner.onDismiss}
+          style={styles.dismissButton}
+          activeOpacity={0.7}
+        >
+          <Text style={[styles.dismissText, { color: colors.text }]}>
+            Dismiss
+          </Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: 'rgba(0, 0, 0, 0.1)',
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+    gap: 10,
+  },
+  icon: {
+    fontSize: 18,
+  },
+  message: {
+    fontSize: 14,
+    fontWeight: '500',
+    flex: 1,
+  },
+  dismissButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+  },
+  dismissText: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+});
+
+export default TopBanner;

package/src/components/feedback/index.ts

@@ -0,0 +1,6 @@
+// Feedback - Barrel Export
+export { default as StatusBadge } from './StatusBadge';
+export { default as SpeedBadge } from './SpeedBadge';
+export { default as TopBanner } from './TopBanner';
+export { default as SecurityBanner } from './SecurityBanner';
+export { default as ExpandableSection } from './ExpandableSection';

package/src/components/icons/animated/errors/AnimatedClientError.tsx

@@ -0,0 +1,94 @@
+import React, { useEffect } from 'react';
+import Animated, {
+  useSharedValue,
+  useAnimatedProps,
+  withRepeat,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated';
+import Svg, { Path, Rect, Circle } from 'react-native-svg';
+
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+interface AnimatedClientErrorProps {
+  size?: number;
+  color?: string;
+}
+
+/**
+ * Animated Client Error Icon (4xx)
+ * Shows warning triangle with error code
+ */
+export const AnimatedClientError: React.FC<AnimatedClientErrorProps> = ({
+  size = 64,
+  color = '#F59E0B',
+}) => {
+  const pulse = useSharedValue(1);
+
+  useEffect(() => {
+    pulse.value = withRepeat(
+      withTiming(1.1, { duration: 1000, easing: Easing.inOut(Easing.ease) }),
+      -1,
+      true
+    );
+  }, []);
+
+  const animatedProps = useAnimatedProps(() => ({
+    transform: `scale(${pulse.value})`,
+  }));
+
+  return (
+    <Svg width={size} height={size} viewBox="0 0 64 64" fill="none">
+      {/* Warning triangle background */}
+      <Path
+        d="M32 8 L56 52 L8 52 Z"
+        fill={color}
+        opacity={0.1}
+      />
+      
+      {/* Warning triangle border */}
+      <AnimatedPath
+        animatedProps={animatedProps}
+        d="M32 12 L52 48 L12 48 Z"
+        stroke={color}
+        strokeWidth="3"
+        fill="none"
+        strokeLinejoin="round"
+      />
+      
+      {/* Exclamation mark */}
+      <Path
+        d="M32 22 L32 36"
+        stroke={color}
+        strokeWidth="3"
+        strokeLinecap="round"
+      />
+      <Circle
+        cx="32"
+        cy="42"
+        r="2"
+        fill={color}
+      />
+      
+      {/* Code brackets */}
+      <Path
+        d="M20 28 L18 32 L20 36"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        opacity={0.6}
+      />
+      <Path
+        d="M44 28 L46 32 L44 36"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        opacity={0.6}
+      />
+    </Svg>
+  );
+};
+
+export default AnimatedClientError;

package/src/components/icons/animated/errors/AnimatedCrash.tsx

@@ -0,0 +1,133 @@
+import React, { useEffect } from 'react';
+import Animated, {
+  useSharedValue,
+  useAnimatedProps,
+  withRepeat,
+  withSequence,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated';
+import Svg, { Path, Circle, G } from 'react-native-svg';
+
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+interface AnimatedCrashProps {
+  size?: number;
+  color?: string;
+}
+
+/**
+ * Animated Crash Icon
+ * Shows broken pieces with scatter animation
+ */
+export const AnimatedCrash: React.FC<AnimatedCrashProps> = ({
+  size = 64,
+  color = '#EF4444',
+}) => {
+  const scatter1 = useSharedValue(0);
+  const scatter2 = useSharedValue(0);
+  const scatter3 = useSharedValue(0);
+  const opacity = useSharedValue(1);
+
+  useEffect(() => {
+    scatter1.value = withRepeat(
+      withSequence(
+        withTiming(1, { duration: 1200, easing: Easing.out(Easing.cubic) }),
+        withTiming(0, { duration: 800, easing: Easing.in(Easing.cubic) })
+      ),
+      -1,
+      false
+    );
+
+    scatter2.value = withRepeat(
+      withSequence(
+        withTiming(1, { duration: 1300, easing: Easing.out(Easing.cubic) }),
+        withTiming(0, { duration: 700, easing: Easing.in(Easing.cubic) })
+      ),
+      -1,
+      false
+    );
+
+    scatter3.value = withRepeat(
+      withSequence(
+        withTiming(1, { duration: 1100, easing: Easing.out(Easing.cubic) }),
+        withTiming(0, { duration: 900, easing: Easing.in(Easing.cubic) })
+      ),
+      -1,
+      false
+    );
+
+    opacity.value = withRepeat(
+      withSequence(
+        withTiming(0.3, { duration: 1000 }),
+        withTiming(1, { duration: 1000 })
+      ),
+      -1,
+      true
+    );
+  }, []);
+
+  const animatedProps1 = useAnimatedProps(() => ({
+    transform: `translate(${scatter1.value * -8}, ${scatter1.value * -8})`,
+    opacity: 1 - scatter1.value * 0.5,
+  }));
+
+  const animatedProps2 = useAnimatedProps(() => ({
+    transform: `translate(${scatter2.value * 8}, ${scatter2.value * -6})`,
+    opacity: 1 - scatter2.value * 0.5,
+  }));
+
+  const animatedProps3 = useAnimatedProps(() => ({
+    transform: `translate(${scatter3.value * -6}, ${scatter3.value * 8})`,
+    opacity: 1 - scatter3.value * 0.5,
+  }));
+
+  return (
+    <Svg width={size} height={size} viewBox="0 0 64 64" fill="none">
+      {/* Piece 1 - Top left */}
+      <AnimatedPath
+        animatedProps={animatedProps1}
+        d="M20 16 L28 20 L24 28 L16 24 Z"
+        fill={color}
+        opacity={0.8}
+      />
+      
+      {/* Piece 2 - Top right */}
+      <AnimatedPath
+        animatedProps={animatedProps2}
+        d="M36 20 L44 16 L48 24 L40 28 Z"
+        fill={color}
+        opacity={0.8}
+      />
+      
+      {/* Piece 3 - Bottom */}
+      <AnimatedPath
+        animatedProps={animatedProps3}
+        d="M24 36 L40 36 L38 48 L26 48 Z"
+        fill={color}
+        opacity={0.8}
+      />
+      
+      {/* Center crack */}
+      <Path
+        d="M32 12 L32 52 M12 32 L52 32"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        opacity={0.4}
+      />
+      
+      {/* Warning symbol in center */}
+      <Circle cx="32" cy="32" r="6" fill={color} opacity={0.6} />
+      <Path
+        d="M32 28 L32 32 M32 34 L32 35"
+        stroke="#FFFFFF"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </Svg>
+  );
+};
+
+export default AnimatedCrash;

package/src/components/icons/animated/errors/AnimatedInvalidData.tsx

@@ -0,0 +1,127 @@
+import React, { useEffect } from 'react';
+import Animated, {
+  useSharedValue,
+  useAnimatedProps,
+  withRepeat,
+  withSequence,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated';
+import Svg, { Path, Rect, G } from 'react-native-svg';
+
+const AnimatedG = Animated.createAnimatedComponent(G);
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+interface AnimatedInvalidDataProps {
+  size?: number;
+  color?: string;
+}
+
+/**
+ * Animated Invalid Data Icon
+ * Shows corrupted file/document with glitch effect
+ */
+export const AnimatedInvalidData: React.FC<AnimatedInvalidDataProps> = ({
+  size = 64,
+  color = '#EF4444',
+}) => {
+  const glitch = useSharedValue(0);
+  const opacity = useSharedValue(1);
+
+  useEffect(() => {
+    glitch.value = withRepeat(
+      withSequence(
+        withTiming(0, { duration: 2000 }),
+        withTiming(3, { duration: 100, easing: Easing.linear }),
+        withTiming(0, { duration: 100 }),
+        withTiming(-2, { duration: 100 }),
+        withTiming(0, { duration: 100 })
+      ),
+      -1,
+      false
+    );
+
+    opacity.value = withRepeat(
+      withSequence(
+        withTiming(1, { duration: 2000 }),
+        withTiming(0.7, { duration: 100 }),
+        withTiming(1, { duration: 100 }),
+        withTiming(0.8, { duration: 100 }),
+        withTiming(1, { duration: 100 })
+      ),
+      -1,
+      false
+    );
+  }, []);
+
+  const animatedProps = useAnimatedProps(() => ({
+    transform: `translateX(${glitch.value})`,
+    opacity: opacity.value,
+  }));
+
+  return (
+    <Svg width={size} height={size} viewBox="0 0 64 64" fill="none">
+      {/* Document outline */}
+      <Path
+        d="M16 8 L40 8 L48 16 L48 56 L16 56 Z"
+        stroke={color}
+        strokeWidth="2"
+        fill="none"
+      />
+      
+      {/* Folded corner */}
+      <Path
+        d="M40 8 L40 16 L48 16"
+        stroke={color}
+        strokeWidth="2"
+        fill="none"
+      />
+      
+      {/* Glitched content lines */}
+      <AnimatedG
+        animatedProps={animatedProps}
+      >
+        <Path
+          d="M22 24 L42 24"
+          stroke={color}
+          strokeWidth="2"
+          strokeLinecap="round"
+          opacity={0.6}
+        />
+        <Path
+          d="M22 32 L38 32"
+          stroke={color}
+          strokeWidth="2"
+          strokeLinecap="round"
+          opacity={0.6}
+        />
+        <Path
+          d="M22 40 L40 40"
+          stroke={color}
+          strokeWidth="2"
+          strokeLinecap="round"
+          opacity={0.6}
+        />
+      </AnimatedG>
+      
+      {/* X mark overlay */}
+      <Path
+        d="M26 44 L38 56 M38 44 L26 56"
+        stroke={color}
+        strokeWidth="3"
+        strokeLinecap="round"
+      />
+      
+      {/* Warning dots */}
+      <Path
+        d="M28 28 L30 28 M34 28 L36 28"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        opacity={0.4}
+      />
+    </Svg>
+  );
+};
+
+export default AnimatedInvalidData;

package/src/components/icons/animated/errors/AnimatedServerError.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Animated, StyleSheet } from 'react-native';
+
+interface AnimatedServerErrorProps {
+  size?: number;
+  color?: string;
+}
+
+const AnimatedServerError: React.FC<AnimatedServerErrorProps> = ({
+  size = 80,
+  color = '#F97316',
+}) => {
+  const shakeAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(shakeAnim, {
+          toValue: -5,
+          duration: 100,
+          useNativeDriver: true,
+        }),
+        Animated.timing(shakeAnim, {
+          toValue: 5,
+          duration: 100,
+          useNativeDriver: true,
+        }),
+        Animated.timing(shakeAnim, {
+          toValue: -5,
+          duration: 100,
+          useNativeDriver: true,
+        }),
+        Animated.timing(shakeAnim, {
+          toValue: 0,
+          duration: 100,
+          useNativeDriver: true,
+        }),
+        Animated.delay(2000),
+      ])
+    ).start();
+  }, []);
+
+  return (
+    <View style={[styles.container, { width: size, height: size }]}>
+      <View
+        style={[
+          styles.iconBackground,
+          {
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+            backgroundColor: `${color}15`,
+          },
+        ]}
+      />
+      <Animated.Text
+        style={[
+          styles.icon,
+          {
+            fontSize: size * 0.5,
+            transform: [{ translateX: shakeAnim }],
+          },
+        ]}
+      >
+        🔌
+      </Animated.Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+  },
+  iconBackground: {
+    position: 'absolute',
+  },
+  icon: {
+    textAlign: 'center',
+  },
+});
+
+export default AnimatedServerError;

package/src/components/icons/animated/errors/index.ts

@@ -0,0 +1,5 @@
+// Error Animated Icons - Barrel Export
+export { default as AnimatedCrash } from './AnimatedCrash';
+export { default as AnimatedServerError } from './AnimatedServerError';
+export { default as AnimatedClientError } from './AnimatedClientError';
+export { default as AnimatedInvalidData } from './AnimatedInvalidData';

package/src/components/icons/animated/general/AnimatedCalendar.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+
+interface AnimatedCalendarProps {
+  size?: number;
+  color?: string;
+}
+
+const AnimatedCalendar: React.FC<AnimatedCalendarProps> = ({
+  size = 60,
+  color = '#3B82F6',
+}) => {
+  const scaleAnim = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(scaleAnim, {
+          toValue: 1.08,
+          duration: 1500,
+          useNativeDriver: true,
+        }),
+        Animated.timing(scaleAnim, {
+          toValue: 1,
+          duration: 1500,
+          useNativeDriver: true,
+        }),
+      ])
+    ).start();
+  }, []);
+
+  return (
+    <Animated.Text
+      style={[
+        styles.icon,
+        {
+          fontSize: size,
+          color,
+          transform: [{ scale: scaleAnim }],
+        },
+      ]}
+    >
+      📅
+    </Animated.Text>
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    textAlign: 'center',
+  },
+});
+
+export default AnimatedCalendar;

package/src/components/icons/animated/general/AnimatedCamera.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+
+interface AnimatedCameraProps {
+  size?: number;
+  color?: string;
+}
+
+const AnimatedCamera: React.FC<AnimatedCameraProps> = ({
+  size = 60,
+  color = '#3B82F6',
+}) => {
+  const scaleAnim = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(scaleAnim, {
+          toValue: 1.07,
+          duration: 2000,
+          useNativeDriver: true,
+        }),
+        Animated.timing(scaleAnim, {
+          toValue: 1,
+          duration: 2000,
+          useNativeDriver: true,
+        }),
+      ])
+    ).start();
+  }, []);
+
+  return (
+    <Animated.Text
+      style={[
+        styles.icon,
+        {
+          fontSize: size,
+          color,
+          transform: [{ scale: scaleAnim }],
+        },
+      ]}
+    >
+      📷
+    </Animated.Text>
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    textAlign: 'center',
+  },
+});
+
+export default AnimatedCamera;