@codeimplants/ui-kit 1.0.0

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

@@ -0,0 +1,78 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Animated, StyleSheet } from 'react-native';
+
+interface AnimatedClockProps {
+  size?: number;
+  color?: string;
+}
+
+const AnimatedClock: React.FC<AnimatedClockProps> = ({
+  size = 80,
+  color = '#F59E0B',
+}) => {
+  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}15`,
+            transform: [{ scale: pulseAnim }],
+          },
+        ]}
+      />
+      <Animated.Text
+        style={[
+          styles.icon,
+          {
+            fontSize: size * 0.5,
+            opacity: pulseAnim.interpolate({
+              inputRange: [1, 1.1],
+              outputRange: [0.8, 1],
+            }),
+          },
+        ]}
+      >
+        ⏰
+      </Animated.Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+  },
+  iconBackground: {
+    position: 'absolute',
+  },
+  icon: {
+    textAlign: 'center',
+  },
+});
+
+export default AnimatedClock;

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

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

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

@@ -0,0 +1,61 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated } from 'react-native';
+import Svg, { Path, Polyline, Line } from 'react-native-svg';
+
+interface AnimatedDownloadProps {
+  size?: number;
+  color?: string;
+}
+
+const AnimatedDownload: React.FC<AnimatedDownloadProps> = ({ size = 48, color = '#3B82F6' }) => {
+  const bounceAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(bounceAnim, {
+          toValue: -5,
+          duration: 600,
+          useNativeDriver: true,
+        }),
+        Animated.timing(bounceAnim, {
+          toValue: 0,
+          duration: 600,
+          useNativeDriver: true,
+        }),
+      ])
+    ).start();
+  }, [bounceAnim]);
+
+  return (
+    <Animated.View style={{ transform: [{ translateY: bounceAnim }] }}>
+      <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+        <Path 
+          d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" 
+          stroke={color} 
+          strokeWidth={2} 
+          strokeLinecap="round" 
+          strokeLinejoin="round" 
+        />
+        <Polyline 
+          points="7 10 12 15 17 10" 
+          stroke={color} 
+          strokeWidth={2} 
+          strokeLinecap="round" 
+          strokeLinejoin="round" 
+        />
+        <Line 
+          x1="12" 
+          y1="15" 
+          x2="12" 
+          y2="3" 
+          stroke={color} 
+          strokeWidth={2} 
+          strokeLinecap="round" 
+        />
+      </Svg>
+    </Animated.View>
+  );
+};
+
+export default AnimatedDownload;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,75 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Animated, StyleSheet } from 'react-native';
+
+interface AnimatedWarningProps {
+  size?: number;
+  color?: string;
+}
+
+const AnimatedWarning: React.FC<AnimatedWarningProps> = ({
+  size = 80,
+  color = '#F97316',
+}) => {
+  const pulseAnim = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulseAnim, {
+          toValue: 1.15,
+          duration: 800,
+          useNativeDriver: true,
+        }),
+        Animated.timing(pulseAnim, {
+          toValue: 1,
+          duration: 800,
+          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 AnimatedWarning;

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

@@ -0,0 +1,11 @@
+// General Animated Icons - Barrel Export
+export { default as AnimatedClock } from './AnimatedClock';
+export { default as AnimatedWarning } from './AnimatedWarning';
+export { default as AnimatedShield } from './AnimatedShield';
+export { default as AnimatedCalendar } from './AnimatedCalendar';
+export { default as AnimatedDocument } from './AnimatedDocument';
+export { default as AnimatedCamera } from './AnimatedCamera';
+export { default as AnimatedLightning } from './AnimatedLightning';
+export { default as AnimatedLocationPin } from './AnimatedLocationPin';
+export { default as AnimatedSparkle } from './AnimatedSparkle';
+export { default as AnimatedDownload } from './AnimatedDownload';

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

@@ -0,0 +1,6 @@
+// Animated Icons - Barrel Export
+export * from './network';
+export * from './errors';
+export * from './permissions';
+export * from './maintenance';
+export * from './general';

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

@@ -0,0 +1,110 @@
+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 AnimatedPath = Animated.createAnimatedComponent(Path);
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+interface AnimatedAlertProps {
+  size?: number;
+  color?: string;
+}
+
+/**
+ * Animated Alert Icon
+ * Alert bell with ringing animation
+ */
+export const AnimatedAlert: React.FC<AnimatedAlertProps> = ({
+  size = 64,
+  color = '#F59E0B',
+}) => {
+  const rotation = useSharedValue(0);
+  const ringPulse = useSharedValue(1);
+
+  useEffect(() => {
+    rotation.value = withRepeat(
+      withTiming(10, { duration: 150, easing: Easing.inOut(Easing.ease) }),
+      -1,
+      true
+    );
+
+    ringPulse.value = withRepeat(
+      withTiming(1.3, { duration: 1000, easing: Easing.out(Easing.ease) }),
+      -1,
+      false
+    );
+  }, []);
+
+  const bellProps = useAnimatedProps(() => ({
+    transform: `rotate(${rotation.value} 32 24)`,
+  }));
+
+  const ringProps = useAnimatedProps(() => ({
+    opacity: 1 - (ringPulse.value - 1) / 0.3,
+    r: 28 * ringPulse.value,
+  }));
+
+  return (
+    <Svg width={size} height={size} viewBox="0 0 64 64" fill="none">
+      {/* Ring pulse effect */}
+      <AnimatedCircle
+        animatedProps={ringProps}
+        cx="32"
+        cy="28"
+        stroke={color}
+        strokeWidth="2"
+        fill="none"
+      />
+      
+      {/* Bell body */}
+      <AnimatedPath
+        animatedProps={bellProps}
+        d="M20 28 C20 20, 26 14, 32 14 C38 14, 44 20, 44 28 L44 36 C44 38, 46 40, 48 40 L16 40 C18 40, 20 38, 20 36 Z"
+        fill={color}
+        opacity={0.9}
+      />
+      
+      {/* Bell clapper */}
+      <AnimatedPath
+        animatedProps={bellProps}
+        d="M32 40 L32 44"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+      <AnimatedCircle
+        animatedProps={bellProps}
+        cx="32"
+        cy="46"
+        r="2"
+        fill={color}
+      />
+      
+      {/* Bell top */}
+      <Path
+        d="M28 14 C28 12, 30 10, 32 10 C34 10, 36 12, 36 14"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        fill="none"
+      />
+      
+      {/* Sound waves */}
+      <Path
+        d="M12 24 C12 16, 18 10, 26 8 M52 24 C52 16, 46 10, 38 8"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        opacity={0.4}
+      />
+    </Svg>
+  );
+};
+
+export default AnimatedAlert;