@codeimplants/ui-kit 1.0.0

package/dist/components/icons/animated/errors/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/animated/errors/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/animated/errors/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/animated/errors/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/animated/errors/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/animated/errors/index.d.ts

@@ -0,0 +1,4 @@
+export { default as AnimatedCrash } from './AnimatedCrash';
+export { default as AnimatedServerError } from './AnimatedServerError';
+export { default as AnimatedClientError } from './AnimatedClientError';
+export { default as AnimatedInvalidData } from './AnimatedInvalidData';

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

@@ -0,0 +1,5 @@
+// Error Animated Icons - Barrel Export
+export { default as AnimatedCrash } from './AnimatedCrash';
+export { default as AnimatedServerError } from './AnimatedServerError';
+export { default as AnimatedClientError } from './AnimatedClientError';
+export { default as AnimatedInvalidData } from './AnimatedInvalidData';

package/dist/components/icons/animated/general/AnimatedCalendar.d.ts

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

package/dist/components/icons/animated/general/AnimatedCalendar.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 AnimatedCalendar = ({ size = 60, color = '#3B82F6', }) => {
+    const scaleAnim = useRef(new Animated.Value(1)).current;
+    useEffect(() => {
+        Animated.loop(Animated.sequence([
+            Animated.timing(scaleAnim, {
+                toValue: 1.08,
+                duration: 1500,
+                useNativeDriver: true,
+            }),
+            Animated.timing(scaleAnim, {
+                toValue: 1,
+                duration: 1500,
+                useNativeDriver: true,
+            }),
+        ])).start();
+    }, []);
+    return (_jsx(Animated.Text, { style: [
+            styles.icon,
+            {
+                fontSize: size,
+                color,
+                transform: [{ scale: scaleAnim }],
+            },
+        ], children: "\uD83D\uDCC5" }));
+};
+const styles = StyleSheet.create({
+    icon: {
+        textAlign: 'center',
+    },
+});
+export default AnimatedCalendar;

package/dist/components/icons/animated/general/AnimatedCamera.d.ts

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

package/dist/components/icons/animated/general/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/animated/general/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/animated/general/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/animated/general/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/animated/general/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/animated/general/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/animated/general/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/animated/general/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/animated/general/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/animated/general/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/animated/general/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/animated/general/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/animated/general/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/animated/general/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;

package/dist/components/icons/animated/general/AnimatedSparkle.js

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

package/dist/components/icons/animated/general/AnimatedWarning.d.ts

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

package/dist/components/icons/animated/general/AnimatedWarning.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { View, Animated, StyleSheet } from 'react-native';
+const AnimatedWarning = ({ 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 (_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,
+                        transform: [{ scale: pulseAnim }],
+                    },
+                ], children: "\u26A0\uFE0F" })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'relative',
+    },
+    iconBackground: {
+        position: 'absolute',
+    },
+    icon: {
+        textAlign: 'center',
+    },
+});
+export default AnimatedWarning;

package/dist/components/icons/animated/general/index.d.ts

@@ -0,0 +1,10 @@
+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';