@codeimplants/ui-kit 1.0.0

package/dist/components/icons/AnimatedCamera.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+const AnimatedCamera = ({ size = 60, color = '#3B82F6', }) => {
+    const scaleAnim = useRef(new Animated.Value(1)).current;
+    useEffect(() => {
+        Animated.loop(Animated.sequence([
+            Animated.timing(scaleAnim, {
+                toValue: 1.07,
+                duration: 2000,
+                useNativeDriver: true,
+            }),
+            Animated.timing(scaleAnim, {
+                toValue: 1,
+                duration: 2000,
+                useNativeDriver: true,
+            }),
+        ])).start();
+    }, []);
+    return (_jsx(Animated.Text, { style: [
+            styles.icon,
+            {
+                fontSize: size,
+                color,
+                transform: [{ scale: scaleAnim }],
+            },
+        ], children: "\uD83D\uDCF7" }));
+};
+const styles = StyleSheet.create({
+    icon: {
+        textAlign: 'center',
+    },
+});
+export default AnimatedCamera;

package/dist/components/icons/AnimatedClientError.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface AnimatedClientErrorProps {
+    size?: number;
+    color?: string;
+}
+/**
+ * Animated Client Error Icon (4xx)
+ * Shows warning triangle with error code
+ */
+export declare const AnimatedClientError: React.FC<AnimatedClientErrorProps>;
+export default AnimatedClientError;

package/dist/components/icons/AnimatedClientError.js

@@ -0,0 +1,20 @@
+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 Svg, { Path, Circle } from 'react-native-svg';
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+/**
+ * Animated Client Error Icon (4xx)
+ * Shows warning triangle with error code
+ */
+export const AnimatedClientError = ({ size = 64, color = '#F59E0B', }) => {
+    const pulse = useSharedValue(1);
+    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 })] }));
+};
+export default AnimatedClientError;

package/dist/components/icons/AnimatedClock.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface AnimatedClockProps {
+    size?: number;
+    color?: string;
+}
+declare const AnimatedClock: React.FC<AnimatedClockProps>;
+export default AnimatedClock;

package/dist/components/icons/AnimatedClock.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { View, Animated, StyleSheet } from 'react-native';
+const AnimatedClock = ({ 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 (_jsxs(View, { style: [styles.container, { width: size, height: size }], children: [_jsx(Animated.View, { style: [
+                    styles.iconBackground,
+                    {
+                        width: size,
+                        height: size,
+                        borderRadius: size / 2,
+                        backgroundColor: `${color}15`,
+                        transform: [{ scale: pulseAnim }],
+                    },
+                ] }), _jsx(Animated.Text, { style: [
+                    styles.icon,
+                    {
+                        fontSize: size * 0.5,
+                        opacity: pulseAnim.interpolate({
+                            inputRange: [1, 1.1],
+                            outputRange: [0.8, 1],
+                        }),
+                    },
+                ], children: "\u23F0" })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'relative',
+    },
+    iconBackground: {
+        position: 'absolute',
+    },
+    icon: {
+        textAlign: 'center',
+    },
+});
+export default AnimatedClock;

package/dist/components/icons/AnimatedCrash.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface AnimatedCrashProps {
+    size?: number;
+    color?: string;
+}
+/**
+ * Animated Crash Icon
+ * Shows broken pieces with scatter animation
+ */
+export declare const AnimatedCrash: React.FC<AnimatedCrashProps>;
+export default AnimatedCrash;

package/dist/components/icons/AnimatedCrash.js

@@ -0,0 +1,36 @@
+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';
+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);
+    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" })] }));
+};
+export default AnimatedCrash;

package/dist/components/icons/AnimatedDocument.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface AnimatedDocumentProps {
+    size?: number;
+    color?: string;
+}
+declare const AnimatedDocument: React.FC<AnimatedDocumentProps>;
+export default AnimatedDocument;

package/dist/components/icons/AnimatedDocument.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+const AnimatedDocument = ({ 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 (_jsx(Animated.Text, { style: [
+            styles.icon,
+            {
+                fontSize: size,
+                color,
+                transform: [{ scale: pulseAnim }],
+            },
+        ], children: "\uD83D\uDCC4" }));
+};
+const styles = StyleSheet.create({
+    icon: {
+        textAlign: 'center',
+    },
+});
+export default AnimatedDocument;

package/dist/components/icons/AnimatedDownload.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface AnimatedDownloadProps {
+    size?: number;
+    color?: string;
+}
+declare const AnimatedDownload: React.FC<AnimatedDownloadProps>;
+export default AnimatedDownload;

package/dist/components/icons/AnimatedDownload.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Animated } from 'react-native';
+import Svg, { Path, Polyline, Line } from 'react-native-svg';
+const AnimatedDownload = ({ 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 (_jsx(Animated.View, { style: { transform: [{ translateY: bounceAnim }] }, children: _jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [_jsx(Path, { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), _jsx(Polyline, { points: "7 10 12 15 17 10", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), _jsx(Line, { x1: "12", y1: "15", x2: "12", y2: "3", stroke: color, strokeWidth: 2, strokeLinecap: "round" })] }) }));
+};
+export default AnimatedDownload;

package/dist/components/icons/AnimatedEmergency.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface AnimatedEmergencyProps {
+    size?: number;
+    color?: string;
+}
+/**
+ * Animated Emergency Icon
+ * Emergency siren with flashing light
+ */
+export declare const AnimatedEmergency: React.FC<AnimatedEmergencyProps>;
+export default AnimatedEmergency;

package/dist/components/icons/AnimatedEmergency.js

@@ -0,0 +1,26 @@
+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, G } from 'react-native-svg';
+const AnimatedG = Animated.createAnimatedComponent(G);
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+/**
+ * Animated Emergency Icon
+ * Emergency siren with flashing light
+ */
+export const AnimatedEmergency = ({ 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 (_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" })] }));
+};
+export default AnimatedEmergency;

package/dist/components/icons/AnimatedInvalidData.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface AnimatedInvalidDataProps {
+    size?: number;
+    color?: string;
+}
+/**
+ * Animated Invalid Data Icon
+ * Shows corrupted file/document with glitch effect
+ */
+export declare const AnimatedInvalidData: React.FC<AnimatedInvalidDataProps>;
+export default AnimatedInvalidData;

package/dist/components/icons/AnimatedInvalidData.js

@@ -0,0 +1,24 @@
+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, 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);
+    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 })] }));
+};
+export default AnimatedInvalidData;

package/dist/components/icons/AnimatedLightning.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface AnimatedLightningProps {
+    size?: number;
+    color?: string;
+}
+declare const AnimatedLightning: React.FC<AnimatedLightningProps>;
+export default AnimatedLightning;

package/dist/components/icons/AnimatedLightning.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+const AnimatedLightning = ({ 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 (_jsx(Animated.Text, { style: [
+            styles.icon,
+            {
+                fontSize: size,
+                color,
+                transform: [{ scale: pulseAnim }],
+            },
+        ], children: "\u26A1" }));
+};
+const styles = StyleSheet.create({
+    icon: {
+        textAlign: 'center',
+    },
+});
+export default AnimatedLightning;

package/dist/components/icons/AnimatedLocationPin.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface AnimatedLocationPinProps {
+    size?: number;
+    color?: string;
+}
+declare const AnimatedLocationPin: React.FC<AnimatedLocationPinProps>;
+export default AnimatedLocationPin;

package/dist/components/icons/AnimatedLocationPin.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+const AnimatedLocationPin = ({ 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 (_jsx(Animated.Text, { style: [
+            styles.icon,
+            {
+                fontSize: size,
+                color,
+                transform: [{ translateY: bounceAnim }],
+            },
+        ], children: "\uD83D\uDCCD" }));
+};
+const styles = StyleSheet.create({
+    icon: {
+        textAlign: 'center',
+    },
+});
+export default AnimatedLocationPin;

package/dist/components/icons/AnimatedPermission.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface AnimatedPermissionProps {
+    size?: number;
+    color?: string;
+}
+/**
+ * Animated Permission Icon
+ * Generic permission icon with shield and checkmark
+ */
+export declare const AnimatedPermission: React.FC<AnimatedPermissionProps>;
+export default AnimatedPermission;

package/dist/components/icons/AnimatedPermission.js

@@ -0,0 +1,21 @@
+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 Svg, { Path, G } from 'react-native-svg';
+const AnimatedG = Animated.createAnimatedComponent(G);
+/**
+ * Animated Permission Icon
+ * Generic permission icon with shield and checkmark
+ */
+export const AnimatedPermission = ({ 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 (_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" }) })] }));
+};
+export default AnimatedPermission;

package/dist/components/icons/AnimatedPermissionDenied.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface AnimatedPermissionDeniedProps {
+    size?: number;
+    color?: string;
+}
+/**
+ * Animated Permission Denied Icon
+ * Shield with X mark for denied permissions
+ */
+export declare const AnimatedPermissionDenied: React.FC<AnimatedPermissionDeniedProps>;
+export default AnimatedPermissionDenied;

package/dist/components/icons/AnimatedPermissionDenied.js

@@ -0,0 +1,27 @@
+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';
+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);
+    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" })] }));
+};
+export default AnimatedPermissionDenied;

package/dist/components/icons/AnimatedServerError.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface AnimatedServerErrorProps {
+    size?: number;
+    color?: string;
+}
+declare const AnimatedServerError: React.FC<AnimatedServerErrorProps>;
+export default AnimatedServerError;

package/dist/components/icons/AnimatedServerError.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { View, Animated, StyleSheet } from 'react-native';
+const AnimatedServerError = ({ size = 80, color = '#F97316', }) => {
+    const shakeAnim = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        Animated.loop(Animated.sequence([
+            Animated.timing(shakeAnim, {
+                toValue: -5,
+                duration: 100,
+                useNativeDriver: true,
+            }),
+            Animated.timing(shakeAnim, {
+                toValue: 5,
+                duration: 100,
+                useNativeDriver: true,
+            }),
+            Animated.timing(shakeAnim, {
+                toValue: -5,
+                duration: 100,
+                useNativeDriver: true,
+            }),
+            Animated.timing(shakeAnim, {
+                toValue: 0,
+                duration: 100,
+                useNativeDriver: true,
+            }),
+            Animated.delay(2000),
+        ])).start();
+    }, []);
+    return (_jsxs(View, { style: [styles.container, { width: size, height: size }], children: [_jsx(View, { style: [
+                    styles.iconBackground,
+                    {
+                        width: size,
+                        height: size,
+                        borderRadius: size / 2,
+                        backgroundColor: `${color}15`,
+                    },
+                ] }), _jsx(Animated.Text, { style: [
+                    styles.icon,
+                    {
+                        fontSize: size * 0.5,
+                        transform: [{ translateX: shakeAnim }],
+                    },
+                ], children: "\uD83D\uDD0C" })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'relative',
+    },
+    iconBackground: {
+        position: 'absolute',
+    },
+    icon: {
+        textAlign: 'center',
+    },
+});
+export default AnimatedServerError;

package/dist/components/icons/AnimatedShield.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface AnimatedShieldProps {
+    size?: number;
+    color?: string;
+}
+declare const AnimatedShield: React.FC<AnimatedShieldProps>;
+export default AnimatedShield;

package/dist/components/icons/AnimatedShield.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+const AnimatedShield = ({ 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 (_jsx(Animated.Text, { style: [
+            styles.icon,
+            {
+                fontSize: size,
+                color,
+                transform: [{ scale: pulseAnim }],
+            },
+        ], children: "\uD83D\uDEE1\uFE0F" }));
+};
+const styles = StyleSheet.create({
+    icon: {
+        textAlign: 'center',
+    },
+});
+export default AnimatedShield;

package/dist/components/icons/AnimatedSparkle.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface AnimatedSparkleProps {
+    size?: number;
+    color?: string;
+}
+declare const AnimatedSparkle: React.FC<AnimatedSparkleProps>;
+export default AnimatedSparkle;