@codeimplants/ui-kit 1.0.0

package/src/components/icons/animated/maintenance/AnimatedEmergency.tsx

@@ -0,0 +1,112 @@
+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 AnimatedG = Animated.createAnimatedComponent(G);
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+interface AnimatedEmergencyProps {
+  size?: number;
+  color?: string;
+}
+
+/**
+ * Animated Emergency Icon
+ * Emergency siren with flashing light
+ */
+export const AnimatedEmergency: React.FC<AnimatedEmergencyProps> = ({
+  size = 64,
+  color = '#DC2626',
+}) => {
+  const flash = useSharedValue(0);
+  const rotate = useSharedValue(0);
+
+  useEffect(() => {
+    flash.value = withRepeat(
+      withSequence(
+        withTiming(1, { duration: 300 }),
+        withTiming(0, { duration: 300 })
+      ),
+      -1,
+      false
+    );
+
+    rotate.value = withRepeat(
+      withTiming(360, { duration: 2000, easing: Easing.linear }),
+      -1,
+      false
+    );
+  }, []);
+
+  const flashProps = useAnimatedProps(() => ({
+    opacity: flash.value,
+  }));
+
+  const rotateProps = useAnimatedProps(() => ({
+    transform: `rotate(${rotate.value} 32 24)`,
+  }));
+
+  return (
+    <Svg width={size} height={size} viewBox="0 0 64 64" fill="none">
+      {/* Flash rays */}
+      <AnimatedG
+        animatedProps={rotateProps}
+      >
+        <Path
+          d="M32 8 L32 16 M48 16 L42 22 M54 32 L46 32 M48 48 L42 42 M32 56 L32 48 M16 48 L22 42 M10 32 L18 32 M16 16 L22 22"
+          stroke={color}
+          strokeWidth="2"
+          strokeLinecap="round"
+          opacity={0.6}
+        />
+      </AnimatedG>
+      
+      {/* Siren body */}
+      <Path
+        d="M20 32 L24 24 L40 24 L44 32 Z"
+        fill={color}
+        opacity={0.3}
+      />
+      
+      {/* Siren top (light) */}
+      <AnimatedPath
+        animatedProps={flashProps}
+        d="M26 24 L32 16 L38 24 Z"
+        fill={color}
+      />
+      
+      {/* Siren base */}
+      <Path
+        d="M18 32 L46 32 L44 40 L20 40 Z"
+        fill={color}
+        opacity={0.8}
+      />
+      
+      {/* Warning stripes */}
+      <Path
+        d="M22 34 L24 38 M28 34 L30 38 M34 34 L36 38 M40 34 L42 38"
+        stroke="#FFFFFF"
+        strokeWidth="2"
+        strokeLinecap="round"
+        opacity={0.6}
+      />
+      
+      {/* Exclamation mark */}
+      <Path
+        d="M32 44 L32 50 M32 52 L32 53"
+        stroke={color}
+        strokeWidth="3"
+        strokeLinecap="round"
+      />
+    </Svg>
+  );
+};
+
+export default AnimatedEmergency;

package/src/components/icons/animated/maintenance/AnimatedWrench.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+
+interface AnimatedWrenchProps {
+  size?: number;
+  color?: string;
+}
+
+const AnimatedWrench: React.FC<AnimatedWrenchProps> = ({
+  size = 60,
+  color = '#F59E0B',
+}) => {
+  const rotateAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(rotateAnim, {
+          toValue: 1,
+          duration: 1500,
+          useNativeDriver: true,
+        }),
+        Animated.timing(rotateAnim, {
+          toValue: -1,
+          duration: 3000,
+          useNativeDriver: true,
+        }),
+        Animated.timing(rotateAnim, {
+          toValue: 0,
+          duration: 1500,
+          useNativeDriver: true,
+        }),
+      ])
+    ).start();
+  }, []);
+
+  const rotate = rotateAnim.interpolate({
+    inputRange: [-1, 1],
+    outputRange: ['-5deg', '5deg'],
+  });
+
+  return (
+    <Animated.Text
+      style={[
+        styles.icon,
+        {
+          fontSize: size,
+          color,
+          transform: [{ rotate }],
+        },
+      ]}
+    >
+      🔧
+    </Animated.Text>
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    textAlign: 'center',
+  },
+});
+
+export default AnimatedWrench;

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

@@ -0,0 +1,4 @@
+// Maintenance Animated Icons - Barrel Export
+export { default as AnimatedAlert } from './AnimatedAlert';
+export { default as AnimatedEmergency } from './AnimatedEmergency';
+export { default as AnimatedWrench } from './AnimatedWrench';

package/src/components/icons/animated/network/AnimatedSpeedGauge.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Animated, StyleSheet } from 'react-native';
+
+interface AnimatedSpeedGaugeProps {
+  size?: number;
+  color?: string;
+}
+
+const AnimatedSpeedGauge: React.FC<AnimatedSpeedGaugeProps> = ({
+  size = 80,
+  color = '#F59E0B',
+}) => {
+  const pulseAnim = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulseAnim, {
+          toValue: 1.15,
+          duration: 1200,
+          useNativeDriver: true,
+        }),
+        Animated.timing(pulseAnim, {
+          toValue: 1,
+          duration: 1200,
+          useNativeDriver: true,
+        }),
+      ])
+    ).start();
+  }, []);
+
+  return (
+    <View style={[styles.container, { width: size, height: size }]}>
+      <Animated.View
+        style={[
+          styles.iconBackground,
+          {
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+            backgroundColor: `${color}15`,
+            transform: [{ scale: pulseAnim }],
+          },
+        ]}
+      />
+      <Animated.Text
+        style={[
+          styles.icon,
+          {
+            fontSize: size * 0.5,
+            transform: [{ scale: pulseAnim }],
+          },
+        ]}
+      >
+        ⏱️
+      </Animated.Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+  },
+  iconBackground: {
+    position: 'absolute',
+  },
+  icon: {
+    textAlign: 'center',
+  },
+});
+
+export default AnimatedSpeedGauge;

package/src/components/icons/animated/network/AnimatedTimeout.tsx

@@ -0,0 +1,115 @@
+import React, { useEffect } from 'react';
+import Animated, {
+  useSharedValue,
+  useAnimatedProps,
+  withRepeat,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated';
+import Svg, { Circle, Path } from 'react-native-svg';
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+interface AnimatedTimeoutProps {
+  size?: number;
+  color?: string;
+}
+
+/**
+ * Animated Timeout Icon
+ * Shows clock with warning indicator
+ */
+export const AnimatedTimeout: React.FC<AnimatedTimeoutProps> = ({
+  size = 64,
+  color = '#F59E0B',
+}) => {
+  const rotation = useSharedValue(0);
+  const pulse = useSharedValue(1);
+
+  useEffect(() => {
+    rotation.value = withRepeat(
+      withTiming(360, { duration: 2000, easing: Easing.linear }),
+      -1,
+      false
+    );
+
+    pulse.value = withRepeat(
+      withTiming(1.2, { duration: 800, easing: Easing.inOut(Easing.ease) }),
+      -1,
+      true
+    );
+  }, []);
+
+  const clockHandProps = useAnimatedProps(() => ({
+    transform: `rotate(${rotation.value} 32 32)`,
+  }));
+
+  const warningProps = useAnimatedProps(() => ({
+    transform: `scale(${pulse.value})`,
+    transformOrigin: '48 16',
+  }));
+
+  return (
+    <Svg width={size} height={size} viewBox="0 0 64 64" fill="none">
+      {/* Clock circle */}
+      <Circle
+        cx="32"
+        cy="32"
+        r="20"
+        stroke={color}
+        strokeWidth="3"
+        fill="none"
+      />
+      
+      {/* Clock ticks */}
+      <Path
+        d="M32 14 L32 16 M32 48 L32 50 M14 32 L16 32 M48 32 L50 32"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        opacity={0.4}
+      />
+      
+      {/* Clock hands */}
+      <AnimatedPath
+        animatedProps={clockHandProps}
+        d="M32 32 L32 20"
+        stroke={color}
+        strokeWidth="2.5"
+        strokeLinecap="round"
+      />
+      <Path
+        d="M32 32 L38 32"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+      
+      {/* Center dot */}
+      <Circle
+        cx="32"
+        cy="32"
+        r="2"
+        fill={color}
+      />
+      
+      {/* Warning indicator */}
+      <AnimatedCircle
+        animatedProps={warningProps}
+        cx="48"
+        cy="16"
+        r="6"
+        fill={color}
+      />
+      <Path
+        d="M48 13 L48 16 M48 18 L48 18.5"
+        stroke="#FFFFFF"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </Svg>
+  );
+};
+
+export default AnimatedTimeout;

package/src/components/icons/animated/network/AnimatedWifiOff.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Animated, StyleSheet } from 'react-native';
+
+interface AnimatedWifiOffProps {
+  size?: number;
+  color?: string;
+}
+
+const AnimatedWifiOff: React.FC<AnimatedWifiOffProps> = ({
+  size = 80,
+  color = '#9CA3AF',
+}) => {
+  const pulseAnim = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulseAnim, {
+          toValue: 1.1,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+        Animated.timing(pulseAnim, {
+          toValue: 1,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+      ])
+    ).start();
+  }, []);
+
+  return (
+    <View style={[styles.container, { width: size, height: size }]}>
+      <Animated.View
+        style={[
+          styles.iconBackground,
+          {
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+            backgroundColor: `${color}20`,
+            transform: [{ scale: pulseAnim }],
+          },
+        ]}
+      />
+      <View style={styles.iconContainer}>
+        <Animated.Text
+          style={[
+            styles.icon,
+            {
+              fontSize: size * 0.5,
+              opacity: pulseAnim.interpolate({
+                inputRange: [1, 1.1],
+                outputRange: [0.7, 1],
+              }),
+            },
+          ]}
+        >
+          📡
+        </Animated.Text>
+        <View style={[styles.slash, { backgroundColor: color }]} />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+  },
+  iconBackground: {
+    position: 'absolute',
+  },
+  iconContainer: {
+    position: 'relative',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  icon: {
+    textAlign: 'center',
+  },
+  slash: {
+    position: 'absolute',
+    width: 2,
+    height: 60,
+    transform: [{ rotate: '45deg' }],
+    opacity: 0.8,
+  },
+});
+
+export default AnimatedWifiOff;

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

@@ -0,0 +1,4 @@
+// Network Animated Icons - Barrel Export
+export { default as AnimatedWifiOff } from './AnimatedWifiOff';
+export { default as AnimatedSpeedGauge } from './AnimatedSpeedGauge';
+export { default as AnimatedTimeout } from './AnimatedTimeout';

package/src/components/icons/animated/permissions/AnimatedPermission.tsx

@@ -0,0 +1,74 @@
+import React, { useEffect } from 'react';
+import Animated, {
+  useSharedValue,
+  useAnimatedProps,
+  withRepeat,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated';
+import Svg, { Path, Circle, G } from 'react-native-svg';
+
+const AnimatedG = Animated.createAnimatedComponent(G);
+
+interface AnimatedPermissionProps {
+  size?: number;
+  color?: string;
+}
+
+/**
+ * Animated Permission Icon
+ * Generic permission icon with shield and checkmark
+ */
+export const AnimatedPermission: React.FC<AnimatedPermissionProps> = ({
+  size = 64,
+  color = '#3B82F6',
+}) => {
+  const scale = useSharedValue(1);
+
+  useEffect(() => {
+    scale.value = withRepeat(
+      withTiming(1.1, { duration: 1500, easing: Easing.inOut(Easing.ease) }),
+      -1,
+      true
+    );
+  }, []);
+
+  const animatedProps = useAnimatedProps(() => ({
+    transform: `scale(${scale.value})`,
+    transformOrigin: '32 32',
+  }));
+
+  return (
+    <Svg width={size} height={size} viewBox="0 0 64 64" fill="none">
+      {/* Shield background */}
+      <Path
+        d="M32 8 C32 8, 48 12, 48 20 C48 36, 32 56, 32 56 C32 56, 16 36, 16 20 C16 12, 32 8, 32 8 Z"
+        fill={color}
+        opacity={0.1}
+      />
+      
+      {/* Shield outline */}
+      <Path
+        d="M32 10 C32 10, 46 14, 46 20 C46 34, 32 52, 32 52 C32 52, 18 34, 18 20 C18 14, 32 10, 32 10 Z"
+        stroke={color}
+        strokeWidth="2.5"
+        fill="none"
+      />
+      
+      {/* Checkmark */}
+      <AnimatedG
+        animatedProps={animatedProps}
+      >
+        <Path
+          d="M24 30 L30 36 L42 24"
+          stroke={color}
+          strokeWidth="3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </AnimatedG>
+    </Svg>
+  );
+};
+
+export default AnimatedPermission;

package/src/components/icons/animated/permissions/AnimatedPermissionDenied.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect } from 'react';
+import Animated, {
+  useSharedValue,
+  useAnimatedProps,
+  withRepeat,
+  withSequence,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated';
+import Svg, { Path, Circle } from 'react-native-svg';
+
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+interface AnimatedPermissionDeniedProps {
+  size?: number;
+  color?: string;
+}
+
+/**
+ * Animated Permission Denied Icon
+ * Shield with X mark for denied permissions
+ */
+export const AnimatedPermissionDenied: React.FC<AnimatedPermissionDeniedProps> = ({
+  size = 64,
+  color = '#EF4444',
+}) => {
+  const shake = useSharedValue(0);
+  const pulse = useSharedValue(1);
+
+  useEffect(() => {
+    shake.value = withRepeat(
+      withSequence(
+        withTiming(0, { duration: 2000 }),
+        withTiming(-3, { duration: 50 }),
+        withTiming(3, { duration: 100 }),
+        withTiming(-3, { duration: 100 }),
+        withTiming(3, { duration: 100 }),
+        withTiming(0, { duration: 50 })
+      ),
+      -1,
+      false
+    );
+
+    pulse.value = withRepeat(
+      withTiming(1.1, { duration: 1000, easing: Easing.inOut(Easing.ease) }),
+      -1,
+      true
+    );
+  }, []);
+
+  const shieldProps = useAnimatedProps(() => ({
+    transform: `translateX(${shake.value})`,
+  }));
+
+  const xProps = useAnimatedProps(() => ({
+    transform: `scale(${pulse.value})`,
+    transformOrigin: '32 32',
+  }));
+
+  return (
+    <Svg width={size} height={size} viewBox="0 0 64 64" fill="none">
+      {/* Shield background */}
+      <AnimatedPath
+        animatedProps={shieldProps}
+        d="M32 8 C32 8, 48 12, 48 20 C48 36, 32 56, 32 56 C32 56, 16 36, 16 20 C16 12, 32 8, 32 8 Z"
+        fill={color}
+        opacity={0.1}
+      />
+      
+      {/* Shield outline */}
+      <AnimatedPath
+        animatedProps={shieldProps}
+        d="M32 10 C32 10, 46 14, 46 20 C46 34, 32 52, 32 52 C32 52, 18 34, 18 20 C18 14, 32 10, 32 10 Z"
+        stroke={color}
+        strokeWidth="2.5"
+        fill="none"
+      />
+      
+      {/* X mark */}
+      <AnimatedPath
+        animatedProps={xProps}
+        d="M24 24 L40 40 M40 24 L24 40"
+        stroke={color}
+        strokeWidth="3"
+        strokeLinecap="round"
+      />
+    </Svg>
+  );
+};
+
+export default AnimatedPermissionDenied;

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

@@ -0,0 +1,3 @@
+// Permission Animated Icons - Barrel Export
+export { default as AnimatedPermission } from './AnimatedPermission';
+export { default as AnimatedPermissionDenied } from './AnimatedPermissionDenied';

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+interface ClockBadgeProps {
+  size?: number;
+  backgroundColor?: string;
+  iconColor?: string;
+}
+
+const ClockBadge: React.FC<ClockBadgeProps> = ({
+  size = 48,
+  backgroundColor = '#F59E0B',
+  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 ClockBadge;