@codeimplants/ui-kit 1.0.0 → 1.0.1

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

@@ -1,16 +1,8 @@
-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';
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
+import Svg, { Path, Circle } from 'react-native-svg';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
-const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 
 interface AnimatedCrashProps {
   size?: number;
@@ -25,88 +17,80 @@ 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);
+  const scatter1 = useRef(new Animated.Value(0)).current;
+  const scatter2 = useRef(new Animated.Value(0)).current;
+  const scatter3 = useRef(new Animated.Value(0)).current;
 
   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
-    );
+    const createAnimation = (value: Animated.Value, durationOut: number, durationIn: number) => {
+      return Animated.loop(
+        Animated.sequence([
+          Animated.timing(value, {
+            toValue: 1,
+            duration: durationOut,
+            easing: Easing.out(Easing.cubic),
+            useNativeDriver: true,
+          }),
+          Animated.timing(value, {
+            toValue: 0,
+            duration: durationIn,
+            easing: Easing.in(Easing.cubic),
+            useNativeDriver: true,
+          }),
+        ])
+      );
+    };
 
-    scatter2.value = withRepeat(
-      withSequence(
-        withTiming(1, { duration: 1300, easing: Easing.out(Easing.cubic) }),
-        withTiming(0, { duration: 700, easing: Easing.in(Easing.cubic) })
-      ),
-      -1,
-      false
-    );
+    createAnimation(scatter1, 1200, 800).start();
+    createAnimation(scatter2, 1300, 700).start();
+    createAnimation(scatter3, 1100, 900).start();
+  }, [scatter1, scatter2, scatter3]);
 
-    scatter3.value = withRepeat(
-      withSequence(
-        withTiming(1, { duration: 1100, easing: Easing.out(Easing.cubic) }),
-        withTiming(0, { duration: 900, easing: Easing.in(Easing.cubic) })
-      ),
-      -1,
-      false
-    );
+  const style1 = {
+    transform: [
+      { translateX: scatter1.interpolate({ inputRange: [0, 1], outputRange: [0, -8] }) },
+      { translateY: scatter1.interpolate({ inputRange: [0, 1], outputRange: [0, -8] }) },
+    ],
+    opacity: scatter1.interpolate({ inputRange: [0, 1], outputRange: [1, 0.5] }),
+  };
 
-    opacity.value = withRepeat(
-      withSequence(
-        withTiming(0.3, { duration: 1000 }),
-        withTiming(1, { duration: 1000 })
-      ),
-      -1,
-      true
-    );
-  }, []);
+  const style2 = {
+    transform: [
+      { translateX: scatter2.interpolate({ inputRange: [0, 1], outputRange: [0, 8] }) },
+      { translateY: scatter2.interpolate({ inputRange: [0, 1], outputRange: [0, -6] }) },
+    ],
+    opacity: scatter2.interpolate({ inputRange: [0, 1], outputRange: [1, 0.5] }),
+  };
 
-  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,
-  }));
+  const style3 = {
+    transform: [
+      { translateX: scatter3.interpolate({ inputRange: [0, 1], outputRange: [0, -6] }) },
+      { translateY: scatter3.interpolate({ inputRange: [0, 1], outputRange: [0, 8] }) },
+    ],
+    opacity: scatter3.interpolate({ inputRange: [0, 1], outputRange: [1, 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}
+        style={style1 as any}
       />
       
       {/* Piece 2 - Top right */}
       <AnimatedPath
-        animatedProps={animatedProps2}
         d="M36 20 L44 16 L48 24 L40 28 Z"
         fill={color}
-        opacity={0.8}
+        style={style2 as any}
       />
       
       {/* Piece 3 - Bottom */}
       <AnimatedPath
-        animatedProps={animatedProps3}
         d="M24 36 L40 36 L38 48 L26 48 Z"
         fill={color}
-        opacity={0.8}
+        style={style3 as any}
       />
       
       {/* Center crack */}

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

@@ -1,16 +1,8 @@
-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';
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
+import Svg, { Path, G } from 'react-native-svg';
 
 const AnimatedG = Animated.createAnimatedComponent(G);
-const AnimatedPath = Animated.createAnimatedComponent(Path);
 
 interface AnimatedInvalidDataProps {
   size?: number;
@@ -25,39 +17,30 @@ export const AnimatedInvalidData: React.FC<AnimatedInvalidDataProps> = ({
   size = 64,
   color = '#EF4444',
 }) => {
-  const glitch = useSharedValue(0);
-  const opacity = useSharedValue(1);
+  const glitch = useRef(new Animated.Value(0)).current;
+  const opacity = useRef(new Animated.Value(1)).current;
 
   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
-    );
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(glitch, { toValue: 0, duration: 2000, useNativeDriver: true }),
+        Animated.timing(glitch, { toValue: 3, duration: 100, easing: Easing.linear, useNativeDriver: true }),
+        Animated.timing(glitch, { toValue: 0, duration: 100, useNativeDriver: true }),
+        Animated.timing(glitch, { toValue: -2, duration: 100, useNativeDriver: true }),
+        Animated.timing(glitch, { toValue: 0, duration: 100, useNativeDriver: true }),
+      ])
+    ).start();
 
-    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,
-  }));
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, { toValue: 1, duration: 2000, useNativeDriver: true }),
+        Animated.timing(opacity, { toValue: 0.7, duration: 100, useNativeDriver: true }),
+        Animated.timing(opacity, { toValue: 1, duration: 100, useNativeDriver: true }),
+        Animated.timing(opacity, { toValue: 0.8, duration: 100, useNativeDriver: true }),
+        Animated.timing(opacity, { toValue: 1, duration: 100, useNativeDriver: true }),
+      ])
+    ).start();
+  }, [glitch, opacity]);
 
   return (
     <Svg width={size} height={size} viewBox="0 0 64 64" fill="none">
@@ -79,7 +62,10 @@ export const AnimatedInvalidData: React.FC<AnimatedInvalidDataProps> = ({
       
       {/* Glitched content lines */}
       <AnimatedG
-        animatedProps={animatedProps}
+        style={{
+          transform: [{ translateX: glitch }],
+          opacity: opacity,
+        } as any}
       >
         <Path
           d="M22 24 L42 24"

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

@@ -1,12 +1,6 @@
-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';
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
+import Svg, { Path, Circle } from 'react-native-svg';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
@@ -24,66 +18,102 @@ export const AnimatedAlert: React.FC<AnimatedAlertProps> = ({
   size = 64,
   color = '#F59E0B',
 }) => {
-  const rotation = useSharedValue(0);
-  const ringPulse = useSharedValue(1);
+  const rotation = useRef(new Animated.Value(0)).current;
+  const ringPulse = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
-    rotation.value = withRepeat(
-      withTiming(10, { duration: 150, easing: Easing.inOut(Easing.ease) }),
-      -1,
-      true
-    );
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(rotation, {
+          toValue: 1,
+          duration: 150,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(rotation, {
+          toValue: -1,
+          duration: 150,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ])
+    ).start();
 
-    ringPulse.value = withRepeat(
-      withTiming(1.3, { duration: 1000, easing: Easing.out(Easing.ease) }),
-      -1,
-      false
-    );
-  }, []);
+    Animated.loop(
+      Animated.timing(ringPulse, {
+        toValue: 1,
+        duration: 1000,
+        easing: Easing.out(Easing.ease),
+        useNativeDriver: true,
+      })
+    ).start();
+  }, [rotation, ringPulse]);
 
-  const bellProps = useAnimatedProps(() => ({
-    transform: `rotate(${rotation.value} 32 24)`,
-  }));
+  const bellStyle = {
+    transform: [
+      { translateX: 32 },
+      { translateY: 24 },
+      { rotate: rotation.interpolate({
+        inputRange: [-1, 1],
+        outputRange: ['-10deg', '10deg'],
+      }) },
+      { translateX: -32 },
+      { translateY: -24 },
+    ],
+  };
 
-  const ringProps = useAnimatedProps(() => ({
-    opacity: 1 - (ringPulse.value - 1) / 0.3,
-    r: 28 * ringPulse.value,
-  }));
+  const ringStyle = {
+    opacity: ringPulse.interpolate({
+      inputRange: [0, 1],
+      outputRange: [1, 0],
+    }),
+    transform: [
+      { translateX: 32 },
+      { translateY: 28 },
+      { scale: ringPulse.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0.8, 1.3],
+      }) },
+      { translateX: -32 },
+      { translateY: -28 },
+    ],
+  };
 
   return (
     <Svg width={size} height={size} viewBox="0 0 64 64" fill="none">
       {/* Ring pulse effect */}
       <AnimatedCircle
-        animatedProps={ringProps}
         cx="32"
         cy="28"
+        r="28"
         stroke={color}
         strokeWidth="2"
         fill="none"
+        style={ringStyle as any}
       />
       
       {/* 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}
+        style={bellStyle as any}
       />
       
       {/* Bell clapper */}
       <AnimatedPath
-        animatedProps={bellProps}
         d="M32 40 L32 44"
         stroke={color}
         strokeWidth="2"
         strokeLinecap="round"
+        style={bellStyle as any}
       />
       <AnimatedCircle
-        animatedProps={bellProps}
         cx="32"
         cy="46"
         r="2"
         fill={color}
+        style={bellStyle as any}
       />
       
       {/* Bell top */}

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

@@ -1,13 +1,6 @@
-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';
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
+import Svg, { Path, G } from 'react-native-svg';
 
 const AnimatedG = Animated.createAnimatedComponent(G);
 const AnimatedPath = Animated.createAnimatedComponent(Path);
@@ -25,39 +18,45 @@ export const AnimatedEmergency: React.FC<AnimatedEmergencyProps> = ({
   size = 64,
   color = '#DC2626',
 }) => {
-  const flash = useSharedValue(0);
-  const rotate = useSharedValue(0);
+  const flash = useRef(new Animated.Value(0)).current;
+  const rotate = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
-    flash.value = withRepeat(
-      withSequence(
-        withTiming(1, { duration: 300 }),
-        withTiming(0, { duration: 300 })
-      ),
-      -1,
-      false
-    );
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(flash, { toValue: 1, duration: 300, useNativeDriver: true }),
+        Animated.timing(flash, { toValue: 0, duration: 300, useNativeDriver: true }),
+      ])
+    ).start();
 
-    rotate.value = withRepeat(
-      withTiming(360, { duration: 2000, easing: Easing.linear }),
-      -1,
-      false
-    );
-  }, []);
+    Animated.loop(
+      Animated.timing(rotate, {
+        toValue: 1,
+        duration: 2000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    ).start();
+  }, [flash, rotate]);
 
-  const flashProps = useAnimatedProps(() => ({
-    opacity: flash.value,
-  }));
-
-  const rotateProps = useAnimatedProps(() => ({
-    transform: `rotate(${rotate.value} 32 24)`,
-  }));
+  const rotateStyle = {
+    transform: [
+      { translateX: 32 },
+      { translateY: 24 },
+      { rotate: rotate.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '360deg'],
+      }) },
+      { translateX: -32 },
+      { translateY: -24 },
+    ],
+  };
 
   return (
     <Svg width={size} height={size} viewBox="0 0 64 64" fill="none">
       {/* Flash rays */}
       <AnimatedG
-        animatedProps={rotateProps}
+        style={rotateStyle as any}
       >
         <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"
@@ -77,9 +76,11 @@ export const AnimatedEmergency: React.FC<AnimatedEmergencyProps> = ({
       
       {/* Siren top (light) */}
       <AnimatedPath
-        animatedProps={flashProps}
         d="M26 24 L32 16 L38 24 Z"
         fill={color}
+        style={{
+          opacity: flash,
+        } as any}
       />
       
       {/* Siren base */}

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

@@ -1,11 +1,5 @@
-import React, { useEffect } from 'react';
-import Animated, {
-  useSharedValue,
-  useAnimatedProps,
-  withRepeat,
-  withTiming,
-  Easing,
-} from 'react-native-reanimated';
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
 import Svg, { Circle, Path } from 'react-native-svg';
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
@@ -24,31 +18,59 @@ export const AnimatedTimeout: React.FC<AnimatedTimeoutProps> = ({
   size = 64,
   color = '#F59E0B',
 }) => {
-  const rotation = useSharedValue(0);
-  const pulse = useSharedValue(1);
+  const rotation = useRef(new Animated.Value(0)).current;
+  const pulse = useRef(new Animated.Value(1)).current;
 
   useEffect(() => {
-    rotation.value = withRepeat(
-      withTiming(360, { duration: 2000, easing: Easing.linear }),
-      -1,
-      false
-    );
+    Animated.loop(
+      Animated.timing(rotation, {
+        toValue: 1,
+        duration: 2000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    ).start();
 
-    pulse.value = withRepeat(
-      withTiming(1.2, { duration: 800, easing: Easing.inOut(Easing.ease) }),
-      -1,
-      true
-    );
-  }, []);
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulse, {
+          toValue: 1.2,
+          duration: 800,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(pulse, {
+          toValue: 1,
+          duration: 800,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ])
+    ).start();
+  }, [rotation, pulse]);
 
-  const clockHandProps = useAnimatedProps(() => ({
-    transform: `rotate(${rotation.value} 32 32)`,
-  }));
+  const clockHandStyle = {
+    transform: [
+      { translateX: 32 },
+      { translateY: 32 },
+      { rotate: rotation.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '360deg'],
+      }) },
+      { translateX: -32 },
+      { translateY: -32 },
+    ],
+  };
 
-  const warningProps = useAnimatedProps(() => ({
-    transform: `scale(${pulse.value})`,
-    transformOrigin: '48 16',
-  }));
+  const warningStyle = {
+    transform: [
+      { translateX: 48 },
+      { translateY: 16 },
+      { scale: pulse },
+      { translateX: -48 },
+      { translateY: -16 },
+    ],
+  };
 
   return (
     <Svg width={size} height={size} viewBox="0 0 64 64" fill="none">
@@ -73,11 +95,11 @@ export const AnimatedTimeout: React.FC<AnimatedTimeoutProps> = ({
       
       {/* Clock hands */}
       <AnimatedPath
-        animatedProps={clockHandProps}
         d="M32 32 L32 20"
         stroke={color}
         strokeWidth="2.5"
         strokeLinecap="round"
+        style={clockHandStyle as any}
       />
       <Path
         d="M32 32 L38 32"
@@ -96,11 +118,11 @@ export const AnimatedTimeout: React.FC<AnimatedTimeoutProps> = ({
       
       {/* Warning indicator */}
       <AnimatedCircle
-        animatedProps={warningProps}
         cx="48"
         cy="16"
         r="6"
         fill={color}
+        style={warningStyle as any}
       />
       <Path
         d="M48 13 L48 16 M48 18 L48 18.5"

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

@@ -1,12 +1,6 @@
-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';
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
+import Svg, { Path, G } from 'react-native-svg';
 
 const AnimatedG = Animated.createAnimatedComponent(G);
 
@@ -23,20 +17,26 @@ export const AnimatedPermission: React.FC<AnimatedPermissionProps> = ({
   size = 64,
   color = '#3B82F6',
 }) => {
-  const scale = useSharedValue(1);
+  const scale = useRef(new Animated.Value(1)).current;
 
   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',
-  }));
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(scale, {
+          toValue: 1.1,
+          duration: 1500,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(scale, {
+          toValue: 1,
+          duration: 1500,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ])
+    ).start();
+  }, [scale]);
 
   return (
     <Svg width={size} height={size} viewBox="0 0 64 64" fill="none">
@@ -57,7 +57,9 @@ export const AnimatedPermission: React.FC<AnimatedPermissionProps> = ({
       
       {/* Checkmark */}
       <AnimatedG
-        animatedProps={animatedProps}
+        style={{
+          transform: [{ scale: scale }],
+        } as any}
       >
         <Path
           d="M24 30 L30 36 L42 24"