@codeimplants/ui-kit 1.0.0 → 1.0.1

package/dist/components/icons/animated/errors/AnimatedClientError.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
-import Animated, { useSharedValue, useAnimatedProps, withRepeat, withTiming, Easing, } from 'react-native-reanimated';
+import { useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
 import Svg, { Path, Circle } from 'react-native-svg';
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 /**
@@ -8,13 +8,25 @@ const AnimatedPath = Animated.createAnimatedComponent(Path);
  * Shows warning triangle with error code
  */
 export const AnimatedClientError = ({ size = 64, color = '#F59E0B', }) => {
-    const pulse = useSharedValue(1);
+    const pulse = useRef(new Animated.Value(1)).current;
     useEffect(() => {
-        pulse.value = withRepeat(withTiming(1.1, { duration: 1000, easing: Easing.inOut(Easing.ease) }), -1, true);
-    }, []);
-    const animatedProps = useAnimatedProps(() => ({
-        transform: `scale(${pulse.value})`,
-    }));
-    return (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 64 64", fill: "none", children: [_jsx(Path, { d: "M32 8 L56 52 L8 52 Z", fill: color, opacity: 0.1 }), _jsx(AnimatedPath, { animatedProps: animatedProps, d: "M32 12 L52 48 L12 48 Z", stroke: color, strokeWidth: "3", fill: "none", strokeLinejoin: "round" }), _jsx(Path, { d: "M32 22 L32 36", stroke: color, strokeWidth: "3", strokeLinecap: "round" }), _jsx(Circle, { cx: "32", cy: "42", r: "2", fill: color }), _jsx(Path, { d: "M20 28 L18 32 L20 36", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", opacity: 0.6 }), _jsx(Path, { d: "M44 28 L46 32 L44 36", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", opacity: 0.6 })] }));
+        Animated.loop(Animated.sequence([
+            Animated.timing(pulse, {
+                toValue: 1.1,
+                duration: 1000,
+                easing: Easing.inOut(Easing.ease),
+                useNativeDriver: true,
+            }),
+            Animated.timing(pulse, {
+                toValue: 1,
+                duration: 1000,
+                easing: Easing.inOut(Easing.ease),
+                useNativeDriver: true,
+            }),
+        ])).start();
+    }, [pulse]);
+    return (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 64 64", fill: "none", children: [_jsx(Path, { d: "M32 8 L56 52 L8 52 Z", fill: color, opacity: 0.1 }), _jsx(AnimatedPath, { d: "M32 12 L52 48 L12 48 Z", stroke: color, strokeWidth: "3", fill: "none", strokeLinejoin: "round", style: {
+                    transform: [{ scale: pulse }],
+                } }), _jsx(Path, { d: "M32 22 L32 36", stroke: color, strokeWidth: "3", strokeLinecap: "round" }), _jsx(Circle, { cx: "32", cy: "42", r: "2", fill: color }), _jsx(Path, { d: "M20 28 L18 32 L20 36", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", opacity: 0.6 }), _jsx(Path, { d: "M44 28 L46 32 L44 36", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", opacity: 0.6 })] }));
 };
 export default AnimatedClientError;

package/dist/components/icons/animated/errors/AnimatedCrash.js

@@ -1,36 +1,58 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
-import Animated, { useSharedValue, useAnimatedProps, withRepeat, withSequence, withTiming, Easing, } from 'react-native-reanimated';
+import { 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);
 /**
  * Animated Crash Icon
  * Shows broken pieces with scatter animation
  */
 export const AnimatedCrash = ({ 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);
-        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 (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 64 64", fill: "none", children: [_jsx(AnimatedPath, { animatedProps: animatedProps1, d: "M20 16 L28 20 L24 28 L16 24 Z", fill: color, opacity: 0.8 }), _jsx(AnimatedPath, { animatedProps: animatedProps2, d: "M36 20 L44 16 L48 24 L40 28 Z", fill: color, opacity: 0.8 }), _jsx(AnimatedPath, { animatedProps: animatedProps3, d: "M24 36 L40 36 L38 48 L26 48 Z", fill: color, opacity: 0.8 }), _jsx(Path, { d: "M32 12 L32 52 M12 32 L52 32", stroke: color, strokeWidth: "2", strokeLinecap: "round", opacity: 0.4 }), _jsx(Circle, { cx: "32", cy: "32", r: "6", fill: color, opacity: 0.6 }), _jsx(Path, { d: "M32 28 L32 32 M32 34 L32 35", stroke: "#FFFFFF", strokeWidth: "2", strokeLinecap: "round" })] }));
+        const createAnimation = (value, durationOut, durationIn) => {
+            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,
+                }),
+            ]));
+        };
+        createAnimation(scatter1, 1200, 800).start();
+        createAnimation(scatter2, 1300, 700).start();
+        createAnimation(scatter3, 1100, 900).start();
+    }, [scatter1, scatter2, scatter3]);
+    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] }),
+    };
+    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 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 (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 64 64", fill: "none", children: [_jsx(AnimatedPath, { d: "M20 16 L28 20 L24 28 L16 24 Z", fill: color, style: style1 }), _jsx(AnimatedPath, { d: "M36 20 L44 16 L48 24 L40 28 Z", fill: color, style: style2 }), _jsx(AnimatedPath, { d: "M24 36 L40 36 L38 48 L26 48 Z", fill: color, style: style3 }), _jsx(Path, { d: "M32 12 L32 52 M12 32 L52 32", stroke: color, strokeWidth: "2", strokeLinecap: "round", opacity: 0.4 }), _jsx(Circle, { cx: "32", cy: "32", r: "6", fill: color, opacity: 0.6 }), _jsx(Path, { d: "M32 28 L32 32 M32 34 L32 35", stroke: "#FFFFFF", strokeWidth: "2", strokeLinecap: "round" })] }));
 };
 export default AnimatedCrash;

package/dist/components/icons/animated/errors/AnimatedInvalidData.js

@@ -1,24 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
-import Animated, { useSharedValue, useAnimatedProps, withRepeat, withSequence, withTiming, Easing, } from 'react-native-reanimated';
+import { 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);
 /**
  * Animated Invalid Data Icon
  * Shows corrupted file/document with glitch effect
  */
 export const AnimatedInvalidData = ({ 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);
-        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 (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 64 64", fill: "none", children: [_jsx(Path, { d: "M16 8 L40 8 L48 16 L48 56 L16 56 Z", stroke: color, strokeWidth: "2", fill: "none" }), _jsx(Path, { d: "M40 8 L40 16 L48 16", stroke: color, strokeWidth: "2", fill: "none" }), _jsxs(AnimatedG, { animatedProps: animatedProps, children: [_jsx(Path, { d: "M22 24 L42 24", stroke: color, strokeWidth: "2", strokeLinecap: "round", opacity: 0.6 }), _jsx(Path, { d: "M22 32 L38 32", stroke: color, strokeWidth: "2", strokeLinecap: "round", opacity: 0.6 }), _jsx(Path, { d: "M22 40 L40 40", stroke: color, strokeWidth: "2", strokeLinecap: "round", opacity: 0.6 })] }), _jsx(Path, { d: "M26 44 L38 56 M38 44 L26 56", stroke: color, strokeWidth: "3", strokeLinecap: "round" }), _jsx(Path, { d: "M28 28 L30 28 M34 28 L36 28", stroke: color, strokeWidth: "2", strokeLinecap: "round", opacity: 0.4 })] }));
+        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();
+        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 (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 64 64", fill: "none", children: [_jsx(Path, { d: "M16 8 L40 8 L48 16 L48 56 L16 56 Z", stroke: color, strokeWidth: "2", fill: "none" }), _jsx(Path, { d: "M40 8 L40 16 L48 16", stroke: color, strokeWidth: "2", fill: "none" }), _jsxs(AnimatedG, { style: {
+                    transform: [{ translateX: glitch }],
+                    opacity: opacity,
+                }, children: [_jsx(Path, { d: "M22 24 L42 24", stroke: color, strokeWidth: "2", strokeLinecap: "round", opacity: 0.6 }), _jsx(Path, { d: "M22 32 L38 32", stroke: color, strokeWidth: "2", strokeLinecap: "round", opacity: 0.6 }), _jsx(Path, { d: "M22 40 L40 40", stroke: color, strokeWidth: "2", strokeLinecap: "round", opacity: 0.6 })] }), _jsx(Path, { d: "M26 44 L38 56 M38 44 L26 56", stroke: color, strokeWidth: "3", strokeLinecap: "round" }), _jsx(Path, { d: "M28 28 L30 28 M34 28 L36 28", stroke: color, strokeWidth: "2", strokeLinecap: "round", opacity: 0.4 })] }));
 };
 export default AnimatedInvalidData;

package/dist/components/icons/animated/maintenance/AnimatedAlert.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
-import Animated, { useSharedValue, useAnimatedProps, withRepeat, withTiming, Easing, } from 'react-native-reanimated';
+import { 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);
@@ -9,19 +9,58 @@ const AnimatedCircle = Animated.createAnimatedComponent(Circle);
  * Alert bell with ringing animation
  */
 export const AnimatedAlert = ({ 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);
-        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 (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 64 64", fill: "none", children: [_jsx(AnimatedCircle, { animatedProps: ringProps, cx: "32", cy: "28", stroke: color, strokeWidth: "2", fill: "none" }), _jsx(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 }), _jsx(AnimatedPath, { animatedProps: bellProps, d: "M32 40 L32 44", stroke: color, strokeWidth: "2", strokeLinecap: "round" }), _jsx(AnimatedCircle, { animatedProps: bellProps, cx: "32", cy: "46", r: "2", fill: color }), _jsx(Path, { d: "M28 14 C28 12, 30 10, 32 10 C34 10, 36 12, 36 14", stroke: color, strokeWidth: "2", strokeLinecap: "round", fill: "none" }), _jsx(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 })] }));
+        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();
+        Animated.loop(Animated.timing(ringPulse, {
+            toValue: 1,
+            duration: 1000,
+            easing: Easing.out(Easing.ease),
+            useNativeDriver: true,
+        })).start();
+    }, [rotation, ringPulse]);
+    const bellStyle = {
+        transform: [
+            { translateX: 32 },
+            { translateY: 24 },
+            { rotate: rotation.interpolate({
+                    inputRange: [-1, 1],
+                    outputRange: ['-10deg', '10deg'],
+                }) },
+            { translateX: -32 },
+            { translateY: -24 },
+        ],
+    };
+    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 (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 64 64", fill: "none", children: [_jsx(AnimatedCircle, { cx: "32", cy: "28", r: "28", stroke: color, strokeWidth: "2", fill: "none", style: ringStyle }), _jsx(AnimatedPath, { 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 }), _jsx(AnimatedPath, { d: "M32 40 L32 44", stroke: color, strokeWidth: "2", strokeLinecap: "round", style: bellStyle }), _jsx(AnimatedCircle, { cx: "32", cy: "46", r: "2", fill: color, style: bellStyle }), _jsx(Path, { d: "M28 14 C28 12, 30 10, 32 10 C34 10, 36 12, 36 14", stroke: color, strokeWidth: "2", strokeLinecap: "round", fill: "none" }), _jsx(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 })] }));
 };
 export default AnimatedAlert;

package/dist/components/icons/animated/maintenance/AnimatedEmergency.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
-import Animated, { useSharedValue, useAnimatedProps, withRepeat, withSequence, withTiming, Easing, } from 'react-native-reanimated';
+import { 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);
@@ -9,18 +9,34 @@ const AnimatedPath = Animated.createAnimatedComponent(Path);
  * Emergency siren with flashing light
  */
 export const AnimatedEmergency = ({ 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);
-        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 (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 64 64", fill: "none", children: [_jsx(AnimatedG, { animatedProps: rotateProps, children: _jsx(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 }) }), _jsx(Path, { d: "M20 32 L24 24 L40 24 L44 32 Z", fill: color, opacity: 0.3 }), _jsx(AnimatedPath, { animatedProps: flashProps, d: "M26 24 L32 16 L38 24 Z", fill: color }), _jsx(Path, { d: "M18 32 L46 32 L44 40 L20 40 Z", fill: color, opacity: 0.8 }), _jsx(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 }), _jsx(Path, { d: "M32 44 L32 50 M32 52 L32 53", stroke: color, strokeWidth: "3", strokeLinecap: "round" })] }));
+        Animated.loop(Animated.sequence([
+            Animated.timing(flash, { toValue: 1, duration: 300, useNativeDriver: true }),
+            Animated.timing(flash, { toValue: 0, duration: 300, useNativeDriver: true }),
+        ])).start();
+        Animated.loop(Animated.timing(rotate, {
+            toValue: 1,
+            duration: 2000,
+            easing: Easing.linear,
+            useNativeDriver: true,
+        })).start();
+    }, [flash, rotate]);
+    const rotateStyle = {
+        transform: [
+            { translateX: 32 },
+            { translateY: 24 },
+            { rotate: rotate.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: ['0deg', '360deg'],
+                }) },
+            { translateX: -32 },
+            { translateY: -24 },
+        ],
+    };
+    return (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 64 64", fill: "none", children: [_jsx(AnimatedG, { style: rotateStyle, children: _jsx(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 }) }), _jsx(Path, { d: "M20 32 L24 24 L40 24 L44 32 Z", fill: color, opacity: 0.3 }), _jsx(AnimatedPath, { d: "M26 24 L32 16 L38 24 Z", fill: color, style: {
+                    opacity: flash,
+                } }), _jsx(Path, { d: "M18 32 L46 32 L44 40 L20 40 Z", fill: color, opacity: 0.8 }), _jsx(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 }), _jsx(Path, { d: "M32 44 L32 50 M32 52 L32 53", stroke: color, strokeWidth: "3", strokeLinecap: "round" })] }));
 };
 export default AnimatedEmergency;

package/dist/components/icons/animated/network/AnimatedTimeout.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
-import Animated, { useSharedValue, useAnimatedProps, withRepeat, withTiming, Easing, } from 'react-native-reanimated';
+import { useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
 import Svg, { Circle, Path } from 'react-native-svg';
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 const AnimatedPath = Animated.createAnimatedComponent(Path);
@@ -9,19 +9,51 @@ const AnimatedPath = Animated.createAnimatedComponent(Path);
  * Shows clock with warning indicator
  */
 export const AnimatedTimeout = ({ 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);
-        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 (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 64 64", fill: "none", children: [_jsx(Circle, { cx: "32", cy: "32", r: "20", stroke: color, strokeWidth: "3", fill: "none" }), _jsx(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 }), _jsx(AnimatedPath, { animatedProps: clockHandProps, d: "M32 32 L32 20", stroke: color, strokeWidth: "2.5", strokeLinecap: "round" }), _jsx(Path, { d: "M32 32 L38 32", stroke: color, strokeWidth: "2", strokeLinecap: "round" }), _jsx(Circle, { cx: "32", cy: "32", r: "2", fill: color }), _jsx(AnimatedCircle, { animatedProps: warningProps, cx: "48", cy: "16", r: "6", fill: color }), _jsx(Path, { d: "M48 13 L48 16 M48 18 L48 18.5", stroke: "#FFFFFF", strokeWidth: "1.5", strokeLinecap: "round" })] }));
+        Animated.loop(Animated.timing(rotation, {
+            toValue: 1,
+            duration: 2000,
+            easing: Easing.linear,
+            useNativeDriver: true,
+        })).start();
+        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 clockHandStyle = {
+        transform: [
+            { translateX: 32 },
+            { translateY: 32 },
+            { rotate: rotation.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: ['0deg', '360deg'],
+                }) },
+            { translateX: -32 },
+            { translateY: -32 },
+        ],
+    };
+    const warningStyle = {
+        transform: [
+            { translateX: 48 },
+            { translateY: 16 },
+            { scale: pulse },
+            { translateX: -48 },
+            { translateY: -16 },
+        ],
+    };
+    return (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 64 64", fill: "none", children: [_jsx(Circle, { cx: "32", cy: "32", r: "20", stroke: color, strokeWidth: "3", fill: "none" }), _jsx(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 }), _jsx(AnimatedPath, { d: "M32 32 L32 20", stroke: color, strokeWidth: "2.5", strokeLinecap: "round", style: clockHandStyle }), _jsx(Path, { d: "M32 32 L38 32", stroke: color, strokeWidth: "2", strokeLinecap: "round" }), _jsx(Circle, { cx: "32", cy: "32", r: "2", fill: color }), _jsx(AnimatedCircle, { cx: "48", cy: "16", r: "6", fill: color, style: warningStyle }), _jsx(Path, { d: "M48 13 L48 16 M48 18 L48 18.5", stroke: "#FFFFFF", strokeWidth: "1.5", strokeLinecap: "round" })] }));
 };
 export default AnimatedTimeout;

package/dist/components/icons/animated/permissions/AnimatedPermission.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
-import Animated, { useSharedValue, useAnimatedProps, withRepeat, withTiming, Easing, } from 'react-native-reanimated';
+import { useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
 import Svg, { Path, G } from 'react-native-svg';
 const AnimatedG = Animated.createAnimatedComponent(G);
 /**
@@ -8,14 +8,25 @@ const AnimatedG = Animated.createAnimatedComponent(G);
  * Generic permission icon with shield and checkmark
  */
 export const AnimatedPermission = ({ 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',
-    }));
-    return (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 64 64", fill: "none", children: [_jsx(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 }), _jsx(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" }), _jsx(AnimatedG, { animatedProps: animatedProps, children: _jsx(Path, { d: "M24 30 L30 36 L42 24", stroke: color, strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) })] }));
+        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 (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 64 64", fill: "none", children: [_jsx(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 }), _jsx(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" }), _jsx(AnimatedG, { style: {
+                    transform: [{ scale: scale }],
+                }, children: _jsx(Path, { d: "M24 30 L30 36 L42 24", stroke: color, strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) })] }));
 };
 export default AnimatedPermission;

package/dist/components/icons/animated/permissions/AnimatedPermissionDenied.js

@@ -1,27 +1,45 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
-import Animated, { useSharedValue, useAnimatedProps, withRepeat, withSequence, withTiming, Easing, } from 'react-native-reanimated';
-import Svg, { Path, Circle } from 'react-native-svg';
+import { useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
 const AnimatedPath = Animated.createAnimatedComponent(Path);
-const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 /**
  * Animated Permission Denied Icon
  * Shield with X mark for denied permissions
  */
 export const AnimatedPermissionDenied = ({ size = 64, color = '#EF4444', }) => {
-    const shake = useSharedValue(0);
-    const pulse = useSharedValue(1);
+    const shake = useRef(new Animated.Value(0)).current;
+    const pulse = useRef(new Animated.Value(1)).current;
     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 (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 64 64", fill: "none", children: [_jsx(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 }), _jsx(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" }), _jsx(AnimatedPath, { animatedProps: xProps, d: "M24 24 L40 40 M40 24 L24 40", stroke: color, strokeWidth: "3", strokeLinecap: "round" })] }));
+        Animated.loop(Animated.sequence([
+            Animated.timing(shake, { toValue: 0, duration: 2000, useNativeDriver: true }),
+            Animated.timing(shake, { toValue: -3, duration: 50, useNativeDriver: true }),
+            Animated.timing(shake, { toValue: 3, duration: 100, useNativeDriver: true }),
+            Animated.timing(shake, { toValue: -3, duration: 100, useNativeDriver: true }),
+            Animated.timing(shake, { toValue: 3, duration: 100, useNativeDriver: true }),
+            Animated.timing(shake, { toValue: 0, duration: 50, useNativeDriver: true }),
+        ])).start();
+        Animated.loop(Animated.sequence([
+            Animated.timing(pulse, {
+                toValue: 1.1,
+                duration: 1000,
+                easing: Easing.inOut(Easing.ease),
+                useNativeDriver: true,
+            }),
+            Animated.timing(pulse, {
+                toValue: 1,
+                duration: 1000,
+                easing: Easing.inOut(Easing.ease),
+                useNativeDriver: true,
+            }),
+        ])).start();
+    }, [shake, pulse]);
+    return (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 64 64", fill: "none", children: [_jsx(AnimatedPath, { 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, style: {
+                    transform: [{ translateX: shake }],
+                } }), _jsx(AnimatedPath, { 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", style: {
+                    transform: [{ translateX: shake }],
+                } }), _jsx(AnimatedPath, { d: "M24 24 L40 40 M40 24 L24 40", stroke: color, strokeWidth: "3", strokeLinecap: "round", style: {
+                    transform: [{ scale: pulse }],
+                } })] }));
 };
 export default AnimatedPermissionDenied;

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@codeimplants/ui-kit",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Enterprise-grade cross-platform UI components for error handling, network states, and user feedback",
   "main": "dist/index.js",
+  "react-native": "src/index.ts",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
@@ -53,7 +54,6 @@
     }
   },
   "dependencies": {
-    "react-native-reanimated": "^3.6.0",
     "react-native-svg": "^14.1.0"
   },
   "devDependencies": {

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

@@ -1,12 +1,6 @@
-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';
+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);
 
@@ -23,19 +17,26 @@ export const AnimatedClientError: React.FC<AnimatedClientErrorProps> = ({
   size = 64,
   color = '#F59E0B',
 }) => {
-  const pulse = useSharedValue(1);
+  const pulse = useRef(new Animated.Value(1)).current;
 
   useEffect(() => {
-    pulse.value = withRepeat(
-      withTiming(1.1, { duration: 1000, easing: Easing.inOut(Easing.ease) }),
-      -1,
-      true
-    );
-  }, []);
-
-  const animatedProps = useAnimatedProps(() => ({
-    transform: `scale(${pulse.value})`,
-  }));
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulse, {
+          toValue: 1.1,
+          duration: 1000,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(pulse, {
+          toValue: 1,
+          duration: 1000,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ])
+    ).start();
+  }, [pulse]);
 
   return (
     <Svg width={size} height={size} viewBox="0 0 64 64" fill="none">
@@ -48,12 +49,14 @@ export const AnimatedClientError: React.FC<AnimatedClientErrorProps> = ({
       
       {/* Warning triangle border */}
       <AnimatedPath
-        animatedProps={animatedProps}
         d="M32 12 L52 48 L12 48 Z"
         stroke={color}
         strokeWidth="3"
         fill="none"
         strokeLinejoin="round"
+        style={{
+          transform: [{ scale: pulse }],
+        }}
       />
       
       {/* Exclamation mark */}