@codeimplants/ui-kit 1.0.0

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

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

package/dist/components/icons/AnimatedSpeedGauge.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 AnimatedSpeedGauge = ({ size = 80, color = '#F59E0B', }) => {
+    const pulseAnim = useRef(new Animated.Value(1)).current;
+    useEffect(() => {
+        Animated.loop(Animated.sequence([
+            Animated.timing(pulseAnim, {
+                toValue: 1.15,
+                duration: 1200,
+                useNativeDriver: true,
+            }),
+            Animated.timing(pulseAnim, {
+                toValue: 1,
+                duration: 1200,
+                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: "\u23F1\uFE0F" })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'relative',
+    },
+    iconBackground: {
+        position: 'absolute',
+    },
+    icon: {
+        textAlign: 'center',
+    },
+});
+export default AnimatedSpeedGauge;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+interface AnimatedTimeoutProps {
+    size?: number;
+    color?: string;
+}
+/**
+ * Animated Timeout Icon
+ * Shows clock with warning indicator
+ */
+export declare const AnimatedTimeout: React.FC<AnimatedTimeoutProps>;
+export default AnimatedTimeout;

package/dist/components/icons/AnimatedTimeout.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, withTiming, Easing, } from 'react-native-reanimated';
+import Svg, { Circle, Path } from 'react-native-svg';
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+/**
+ * Animated Timeout Icon
+ * Shows clock with warning indicator
+ */
+export const AnimatedTimeout = ({ size = 64, color = '#F59E0B', }) => {
+    const rotation = useSharedValue(0);
+    const pulse = useSharedValue(1);
+    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" })] }));
+};
+export default AnimatedTimeout;

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

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

package/dist/components/icons/AnimatedWifiOff.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { View, Animated, StyleSheet } from 'react-native';
+const AnimatedWifiOff = ({ size = 80, color = '#9CA3AF', }) => {
+    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}20`,
+                        transform: [{ scale: pulseAnim }],
+                    },
+                ] }), _jsxs(View, { style: styles.iconContainer, children: [_jsx(Animated.Text, { style: [
+                            styles.icon,
+                            {
+                                fontSize: size * 0.5,
+                                opacity: pulseAnim.interpolate({
+                                    inputRange: [1, 1.1],
+                                    outputRange: [0.7, 1],
+                                }),
+                            },
+                        ], children: "\uD83D\uDCE1" }), _jsx(View, { style: [styles.slash, { backgroundColor: color }] })] })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'relative',
+    },
+    iconBackground: {
+        position: 'absolute',
+    },
+    iconContainer: {
+        position: 'relative',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    icon: {
+        textAlign: 'center',
+    },
+    slash: {
+        position: 'absolute',
+        width: 2,
+        height: 60,
+        transform: [{ rotate: '45deg' }],
+        opacity: 0.8,
+    },
+});
+export default AnimatedWifiOff;

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

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

package/dist/components/icons/AnimatedWrench.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+const AnimatedWrench = ({ size = 60, color = '#F59E0B', }) => {
+    const rotateAnim = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        Animated.loop(Animated.sequence([
+            Animated.timing(rotateAnim, {
+                toValue: 1,
+                duration: 1500,
+                useNativeDriver: true,
+            }),
+            Animated.timing(rotateAnim, {
+                toValue: -1,
+                duration: 3000,
+                useNativeDriver: true,
+            }),
+            Animated.timing(rotateAnim, {
+                toValue: 0,
+                duration: 1500,
+                useNativeDriver: true,
+            }),
+        ])).start();
+    }, []);
+    const rotate = rotateAnim.interpolate({
+        inputRange: [-1, 1],
+        outputRange: ['-5deg', '5deg'],
+    });
+    return (_jsx(Animated.Text, { style: [
+            styles.icon,
+            {
+                fontSize: size,
+                color,
+                transform: [{ rotate }],
+            },
+        ], children: "\uD83D\uDD27" }));
+};
+const styles = StyleSheet.create({
+    icon: {
+        textAlign: 'center',
+    },
+});
+export default AnimatedWrench;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ClockBadgeProps {
+    size?: number;
+    backgroundColor?: string;
+    iconColor?: string;
+}
+declare const ClockBadge: React.FC<ClockBadgeProps>;
+export default ClockBadge;

package/dist/components/icons/ClockBadge.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View, Text, StyleSheet } from 'react-native';
+const ClockBadge = ({ size = 48, backgroundColor = '#F59E0B', iconColor = '#FFFFFF', }) => {
+    return (_jsx(View, { style: [
+            styles.container,
+            {
+                width: size,
+                height: size,
+                borderRadius: size / 2,
+                backgroundColor,
+            },
+        ], children: _jsx(Text, { style: [styles.icon, { fontSize: size * 0.5, color: iconColor }], children: "\uD83D\uDD50" }) }));
+};
+const styles = StyleSheet.create({
+    container: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.15,
+        shadowRadius: 6,
+        elevation: 4,
+    },
+    icon: {
+        textAlign: 'center',
+    },
+});
+export default ClockBadge;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface DownloadBadgeProps {
+    size?: number;
+    backgroundColor?: string;
+    iconColor?: string;
+}
+declare const DownloadBadge: React.FC<DownloadBadgeProps>;
+export default DownloadBadge;

package/dist/components/icons/DownloadBadge.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View, Text, StyleSheet } from 'react-native';
+const DownloadBadge = ({ size = 48, backgroundColor = '#2563EB', iconColor = '#FFFFFF', }) => {
+    return (_jsx(View, { style: [
+            styles.container,
+            {
+                width: size,
+                height: size,
+                borderRadius: size / 2,
+                backgroundColor,
+            },
+        ], children: _jsx(Text, { style: [styles.icon, { fontSize: size * 0.5, color: iconColor }], children: "\u2B07\uFE0F" }) }));
+};
+const styles = StyleSheet.create({
+    container: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.15,
+        shadowRadius: 6,
+        elevation: 4,
+    },
+    icon: {
+        textAlign: 'center',
+    },
+});
+export default DownloadBadge;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+interface IconWithBadgeProps {
+    icon: React.ReactNode;
+    badge?: React.ReactNode;
+    size?: number;
+    iconBackgroundColor?: string;
+    badgeBackgroundColor?: string;
+    backgroundColor?: string;
+    showBadge?: boolean;
+}
+declare const IconWithBadge: React.FC<IconWithBadgeProps>;
+export default IconWithBadge;

package/dist/components/icons/IconWithBadge.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { View, StyleSheet, Animated } from 'react-native';
+const IconWithBadge = ({ icon, badge, size = 120, iconBackgroundColor, badgeBackgroundColor, backgroundColor, // Deprecated
+showBadge = true, }) => {
+    // Use iconBackgroundColor if provided, otherwise fall back to backgroundColor
+    const finalIconBg = iconBackgroundColor || backgroundColor || '#FEF3C7';
+    const badgeAnim = useRef(new Animated.Value(0)).current;
+    const iconAnim = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        // Icon entrance animation
+        Animated.spring(iconAnim, {
+            toValue: 1,
+            tension: 50,
+            friction: 7,
+            useNativeDriver: true,
+        }).start();
+        // Badge slide-in animation (delayed)
+        if (showBadge && badge) {
+            Animated.sequence([
+                Animated.delay(300),
+                Animated.spring(badgeAnim, {
+                    toValue: 1,
+                    tension: 50,
+                    friction: 7,
+                    useNativeDriver: true,
+                }),
+            ]).start();
+        }
+    }, [showBadge, badge]);
+    const badgeSize = size * 0.4;
+    const finalBadgeBg = badgeBackgroundColor || '#FFFFFF';
+    return (_jsxs(View, { style: [styles.container, { width: size, height: size }], children: [_jsx(Animated.View, { style: [
+                    styles.background,
+                    {
+                        width: size,
+                        height: size,
+                        borderRadius: size / 2,
+                        backgroundColor: finalIconBg,
+                        opacity: iconAnim,
+                        transform: [
+                            {
+                                scale: iconAnim.interpolate({
+                                    inputRange: [0, 1],
+                                    outputRange: [0.8, 1],
+                                }),
+                            },
+                        ],
+                    },
+                ] }), _jsx(Animated.View, { style: [
+                    styles.iconContainer,
+                    {
+                        opacity: iconAnim,
+                        transform: [
+                            {
+                                scale: iconAnim.interpolate({
+                                    inputRange: [0, 1],
+                                    outputRange: [0.5, 1],
+                                }),
+                            },
+                        ],
+                    },
+                ], children: icon }), showBadge && badge && (_jsx(Animated.View, { style: [
+                    styles.badge,
+                    {
+                        width: badgeSize,
+                        height: badgeSize,
+                        borderRadius: badgeSize / 2,
+                        backgroundColor: finalBadgeBg,
+                        opacity: badgeAnim,
+                        transform: [
+                            {
+                                translateX: badgeAnim.interpolate({
+                                    inputRange: [0, 1],
+                                    outputRange: [20, 0],
+                                }),
+                            },
+                            {
+                                translateY: badgeAnim.interpolate({
+                                    inputRange: [0, 1],
+                                    outputRange: [20, 0],
+                                }),
+                            },
+                            {
+                                scale: badgeAnim.interpolate({
+                                    inputRange: [0, 1],
+                                    outputRange: [0.5, 1],
+                                }),
+                            },
+                        ],
+                    },
+                ], children: badge }))] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        position: 'relative',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    background: {
+        position: 'absolute',
+    },
+    iconContainer: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    badge: {
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 8,
+        elevation: 4,
+    },
+});
+export default IconWithBadge;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+interface IconProps {
+    size?: number;
+    color?: string;
+}
+export declare const DownloadIcon: React.FC<IconProps>;
+export declare const XIcon: React.FC<IconProps>;
+export declare const ShieldIcon: React.FC<IconProps>;
+export declare const SettingsIcon: React.FC<IconProps>;
+export declare const CheckCircleIcon: React.FC<IconProps>;
+export declare const AlertTriangleIcon: React.FC<IconProps>;
+export {};

package/dist/components/icons/SimpleIcons.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Svg, { Path, Circle, Line, Polyline } from 'react-native-svg';
+export const DownloadIcon = ({ size = 24, color = '#000' }) => (_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 const XIcon = ({ size = 24, color = '#000' }) => (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [_jsx(Line, { x1: "18", y1: "6", x2: "6", y2: "18", stroke: color, strokeWidth: 2, strokeLinecap: "round" }), _jsx(Line, { x1: "6", y1: "6", x2: "18", y2: "18", stroke: color, strokeWidth: 2, strokeLinecap: "round" })] }));
+export const ShieldIcon = ({ size = 24, color = '#000' }) => (_jsx(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: _jsx(Path, { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+export const SettingsIcon = ({ size = 24, color = '#000' }) => (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [_jsx(Circle, { cx: "12", cy: "12", r: "3", stroke: color, strokeWidth: 2 }), _jsx(Path, { d: "M12 1v6m0 6v6M5.64 5.64l4.24 4.24m4.24 4.24l4.24 4.24M1 12h6m6 0h6M5.64 18.36l4.24-4.24m4.24-4.24l4.24-4.24", stroke: color, strokeWidth: 2, strokeLinecap: "round" })] }));
+export const CheckCircleIcon = ({ size = 24, color = '#000' }) => (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [_jsx(Circle, { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: 2 }), _jsx(Polyline, { points: "9 12 11 14 15 10", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }));
+export const AlertTriangleIcon = ({ size = 24, color = '#000' }) => (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [_jsx(Path, { d: "M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), _jsx(Line, { x1: "12", y1: "9", x2: "12", y2: "13", stroke: color, strokeWidth: 2, strokeLinecap: "round" }), _jsx(Circle, { cx: "12", cy: "17", r: "1", fill: color })] }));

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface XBadgeProps {
+    size?: number;
+    backgroundColor?: string;
+    iconColor?: string;
+}
+declare const XBadge: React.FC<XBadgeProps>;
+export default XBadge;

package/dist/components/icons/XBadge.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View, Text, StyleSheet } from 'react-native';
+const XBadge = ({ size = 48, backgroundColor = '#F97316', iconColor = '#FFFFFF', }) => {
+    return (_jsx(View, { style: [
+            styles.container,
+            {
+                width: size,
+                height: size,
+                borderRadius: size / 2,
+                backgroundColor,
+            },
+        ], children: _jsx(Text, { style: [styles.icon, { fontSize: size * 0.5, color: iconColor }], children: "\u274C" }) }));
+};
+const styles = StyleSheet.create({
+    container: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.15,
+        shadowRadius: 6,
+        elevation: 4,
+    },
+    icon: {
+        textAlign: 'center',
+    },
+});
+export default XBadge;

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