@codeimplants/ui-kit 1.0.0 → 1.0.1

package/src/components/icons/animated/permissions/AnimatedPermissionDenied.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 } from 'react-native-svg';
+import React, { 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);
 
 interface AnimatedPermissionDeniedProps {
   size?: number;
@@ -25,65 +17,71 @@ export const AnimatedPermissionDenied: React.FC<AnimatedPermissionDeniedProps> =
   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
-    );
+    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();
 
-    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',
-  }));
+    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 (
     <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}
+        style={{
+          transform: [{ translateX: shake }],
+        } as any}
       />
       
       {/* 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"
+        style={{
+          transform: [{ translateX: shake }],
+        } as any}
       />
       
       {/* X mark */}
       <AnimatedPath
-        animatedProps={xProps}
         d="M24 24 L40 40 M40 24 L24 40"
         stroke={color}
         strokeWidth="3"
         strokeLinecap="round"
+        style={{
+          transform: [{ scale: pulse }],
+        } as any}
       />
     </Svg>
   );

package/src/types/svg.d.ts

@@ -0,0 +1,20 @@
+import 'react-native-svg';
+import { Animated } from 'react-native';
+
+declare module 'react-native-svg' {
+  export interface GProps {
+    style?: any;
+  }
+  export interface PathProps {
+    style?: any;
+  }
+  export interface CircleProps {
+    style?: any;
+  }
+  export interface RectProps {
+    style?: any;
+  }
+  export interface SvgProps {
+    style?: any;
+  }
+}

package/src/types/reanimated.d.ts

@@ -1,38 +0,0 @@
-/**
- * Type definitions for react-native-reanimated with react-native-svg
- * 
- * This file provides proper type definitions for animated SVG components
- * to eliminate TypeScript errors when using animatedProps.
- */
-
-import 'react-native-reanimated';
-import { PathProps, CircleProps, RectProps, LineProps, PolygonProps } from 'react-native-svg';
-
-declare module 'react-native-reanimated' {
-  export interface AnimatedProps<P> {
-    animatedProps?: Partial<P>;
-  }
-}
-
-// Extend SVG component props to accept animatedProps
-declare module 'react-native-svg' {
-  interface PathProps {
-    animatedProps?: any;
-  }
-  
-  interface CircleProps {
-    animatedProps?: any;
-  }
-  
-  interface RectProps {
-    animatedProps?: any;
-  }
-  
-  interface LineProps {
-    animatedProps?: any;
-  }
-  
-  interface PolygonProps {
-    animatedProps?: any;
-  }
-}