@codeimplants/ui-kit 1.0.0

package/dist/components/cards/TipsCard.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Animated } from 'react-native';
+const TipsCard = ({ title = 'Try these tips:', tips, backgroundColor = '#FFFFFF', borderColor = '#E5E7EB', titleColor = '#1F2937', textColor = '#6B7280', }) => {
+    const fadeAnim = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        Animated.timing(fadeAnim, {
+            toValue: 1,
+            duration: 500,
+            delay: 300,
+            useNativeDriver: true,
+        }).start();
+    }, []);
+    return (_jsxs(Animated.View, { style: [
+            styles.container,
+            {
+                backgroundColor,
+                borderColor,
+                opacity: fadeAnim,
+                transform: [
+                    {
+                        translateY: fadeAnim.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [20, 0],
+                        }),
+                    },
+                ],
+            },
+        ], children: [_jsx(Text, { style: [styles.title, { color: titleColor }], children: title }), _jsx(View, { style: styles.tipsList, children: tips.map((tip, index) => (_jsxs(View, { style: styles.tipItem, children: [_jsx(View, { style: styles.numberContainer, children: _jsx(Text, { style: [styles.number, { color: textColor }], children: index + 1 }) }), _jsx(Text, { style: [styles.tipText, { color: textColor }], children: tip })] }, index))) })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        borderRadius: 12,
+        padding: 20,
+        marginBottom: 24,
+        borderWidth: 1,
+        width: '100%',
+    },
+    title: {
+        fontSize: 16,
+        fontWeight: '600',
+        marginBottom: 16,
+    },
+    tipsList: {
+        gap: 12,
+    },
+    tipItem: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+    },
+    numberContainer: {
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        backgroundColor: '#F3F4F6',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: 12,
+    },
+    number: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    tipText: {
+        flex: 1,
+        fontSize: 14,
+        lineHeight: 20,
+    },
+});
+export default TipsCard;

package/dist/components/cards/WarningCard.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface WarningCardProps {
+    title?: string;
+    description?: string;
+    steps: string[];
+    backgroundColor?: string;
+    borderColor?: string;
+    iconColor?: string;
+}
+declare const WarningCard: React.FC<WarningCardProps>;
+export default WarningCard;

package/dist/components/cards/WarningCard.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Animated } from 'react-native';
+const WarningCard = ({ title = "Permission Denied", description, steps, backgroundColor = '#FED7AA', borderColor = '#F97316', iconColor = '#F97316', }) => {
+    const fadeAnim = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        Animated.timing(fadeAnim, {
+            toValue: 1,
+            duration: 500,
+            delay: 300,
+            useNativeDriver: true,
+        }).start();
+    }, []);
+    return (_jsxs(Animated.View, { style: [
+            styles.container,
+            {
+                backgroundColor,
+                borderColor,
+                opacity: fadeAnim,
+                transform: [
+                    {
+                        translateY: fadeAnim.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [20, 0],
+                        }),
+                    },
+                ],
+            },
+        ], children: [_jsxs(View, { style: styles.header, children: [_jsx(Text, { style: [styles.icon, { color: iconColor }], children: "\u26A0\uFE0F" }), _jsx(Text, { style: styles.title, children: title })] }), description && _jsx(Text, { style: styles.description, children: description }), _jsx(View, { style: styles.stepsList, children: steps.map((step, index) => (_jsxs(View, { style: styles.stepItem, children: [_jsxs(Text, { style: styles.stepNumber, children: [index + 1, "."] }), _jsx(Text, { style: styles.stepText, children: step })] }, index))) })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        borderRadius: 12,
+        padding: 20,
+        marginBottom: 16,
+        borderWidth: 1.5,
+        width: '100%',
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 12,
+    },
+    icon: {
+        fontSize: 20,
+        marginRight: 8,
+    },
+    title: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#92400E',
+    },
+    description: {
+        fontSize: 14,
+        color: '#92400E',
+        lineHeight: 20,
+        marginBottom: 12,
+    },
+    stepsList: {
+        gap: 8,
+    },
+    stepItem: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+    },
+    stepNumber: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#92400E',
+        marginRight: 8,
+        minWidth: 20,
+    },
+    stepText: {
+        flex: 1,
+        fontSize: 14,
+        color: '#92400E',
+        lineHeight: 20,
+    },
+});
+export default WarningCard;

package/dist/components/cards/WhatsNewCard.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface FeatureItem {
+    icon: string;
+    title: string;
+    description: string;
+    iconColor?: string;
+}
+interface WhatsNewCardProps {
+    features: FeatureItem[];
+    title?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+}
+declare const WhatsNewCard: React.FC<WhatsNewCardProps>;
+export default WhatsNewCard;

package/dist/components/cards/WhatsNewCard.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Animated } from 'react-native';
+const WhatsNewCard = ({ features, title = "What's New", backgroundColor = '#FFFFFF', borderColor = '#E5E7EB', }) => {
+    const fadeAnim = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        Animated.timing(fadeAnim, {
+            toValue: 1,
+            duration: 500,
+            delay: 200,
+            useNativeDriver: true,
+        }).start();
+    }, []);
+    return (_jsxs(Animated.View, { style: [
+            styles.container,
+            {
+                backgroundColor,
+                borderColor,
+                opacity: fadeAnim,
+                transform: [
+                    {
+                        translateY: fadeAnim.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [20, 0],
+                        }),
+                    },
+                ],
+            },
+        ], children: [_jsx(Text, { style: styles.title, children: title }), features.map((feature, index) => (_jsxs(View, { style: styles.featureItem, children: [_jsx(View, { style: [
+                            styles.iconContainer,
+                            { backgroundColor: feature.iconColor || '#F3F4F6' },
+                        ], children: _jsx(Text, { style: styles.icon, children: feature.icon }) }), _jsxs(View, { style: styles.textContainer, children: [_jsx(Text, { style: styles.featureTitle, children: feature.title }), _jsx(Text, { style: styles.featureDescription, children: feature.description })] })] }, index)))] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        borderRadius: 12,
+        padding: 24,
+        marginBottom: 20,
+        borderWidth: 1,
+        width: '100%',
+    },
+    title: {
+        fontSize: 18,
+        fontWeight: '600',
+        color: '#1F2937',
+        marginBottom: 20,
+    },
+    featureItem: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        marginBottom: 16,
+    },
+    iconContainer: {
+        width: 40,
+        height: 40,
+        borderRadius: 8,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: 12,
+    },
+    icon: {
+        fontSize: 20,
+    },
+    textContainer: {
+        flex: 1,
+    },
+    featureTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#1F2937',
+        marginBottom: 4,
+    },
+    featureDescription: {
+        fontSize: 14,
+        color: '#6B7280',
+        lineHeight: 20,
+    },
+});
+export default WhatsNewCard;

package/dist/components/cards/index.d.ts

@@ -0,0 +1,5 @@
+export { default as ContentCard } from './ContentCard';
+export { default as InfoCard } from './InfoCard';
+export { default as WarningCard } from './WarningCard';
+export { default as WhatsNewCard } from './WhatsNewCard';
+export { default as TipsCard } from './TipsCard';

package/dist/components/cards/index.js

@@ -0,0 +1,6 @@
+// Cards - Barrel Export
+export { default as ContentCard } from './ContentCard';
+export { default as InfoCard } from './InfoCard';
+export { default as WarningCard } from './WarningCard';
+export { default as WhatsNewCard } from './WhatsNewCard';
+export { default as TipsCard } from './TipsCard';

package/dist/components/feedback/ExpandableSection.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ExpandableSectionProps {
+    title: string;
+    children: React.ReactNode;
+    defaultExpanded?: boolean;
+}
+declare const ExpandableSection: React.FC<ExpandableSectionProps>;
+export default ExpandableSection;

package/dist/components/feedback/ExpandableSection.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, LayoutAnimation, Platform, UIManager } from 'react-native';
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+const ExpandableSection = ({ title, children, defaultExpanded = false, }) => {
+    const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+    const toggleExpand = () => {
+        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+        setIsExpanded(!isExpanded);
+    };
+    return (_jsxs(View, { style: styles.container, children: [_jsxs(TouchableOpacity, { style: styles.header, onPress: toggleExpand, activeOpacity: 0.7, children: [_jsx(Text, { style: styles.arrow, children: isExpanded ? '▼' : '▶' }), _jsx(Text, { style: styles.title, children: title })] }), isExpanded && _jsx(View, { style: styles.content, children: children })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        marginTop: 16,
+        marginHorizontal: 20,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 12,
+        gap: 8,
+    },
+    arrow: {
+        fontSize: 12,
+        color: '#6B7280',
+    },
+    title: {
+        fontSize: 15,
+        fontWeight: '600',
+        color: '#374151',
+    },
+    content: {
+        marginTop: 8,
+        padding: 16,
+        backgroundColor: '#FEF3C7',
+        borderRadius: 8,
+        borderLeftWidth: 3,
+        borderLeftColor: '#F59E0B',
+    },
+});
+export default ExpandableSection;

package/dist/components/feedback/SecurityBanner.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface SecurityBannerProps {
+    message?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    iconColor?: string;
+}
+declare const SecurityBanner: React.FC<SecurityBannerProps>;
+export default SecurityBanner;

package/dist/components/feedback/SecurityBanner.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Animated } from 'react-native';
+const SecurityBanner = ({ message = "Your data is secure. We only use this permission for the stated purpose and never share it with third parties.", backgroundColor = '#D1FAE5', textColor = '#065F46', iconColor = '#10B981', }) => {
+    const fadeAnim = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        Animated.timing(fadeAnim, {
+            toValue: 1,
+            duration: 500,
+            delay: 400,
+            useNativeDriver: true,
+        }).start();
+    }, []);
+    return (_jsxs(Animated.View, { style: [
+            styles.container,
+            {
+                backgroundColor,
+                opacity: fadeAnim,
+            },
+        ], children: [_jsx(View, { style: [styles.iconContainer, { backgroundColor: `${iconColor}20` }], children: _jsx(Text, { style: [styles.icon, { color: iconColor }], children: "\u2713" }) }), _jsx(Text, { style: [styles.message, { color: textColor }], children: message })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: 12,
+        padding: 16,
+        marginBottom: 24,
+        width: '100%',
+    },
+    iconContainer: {
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: 12,
+    },
+    icon: {
+        fontSize: 14,
+        fontWeight: '700',
+    },
+    message: {
+        flex: 1,
+        fontSize: 13,
+        lineHeight: 18,
+    },
+});
+export default SecurityBanner;

package/dist/components/feedback/SpeedBadge.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface SpeedBadgeProps {
+    speed?: '2G' | '3G' | '4G' | '5G';
+    backgroundColor?: string;
+    textColor?: string;
+    iconColor?: string;
+}
+declare const SpeedBadge: React.FC<SpeedBadgeProps>;
+export default SpeedBadge;

package/dist/components/feedback/SpeedBadge.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Text, StyleSheet, Animated } from 'react-native';
+const SpeedBadge = ({ speed = '2G', backgroundColor = '#FEF3C7', textColor = '#92400E', iconColor = '#F59E0B', }) => {
+    const fadeAnim = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        Animated.timing(fadeAnim, {
+            toValue: 1,
+            duration: 500,
+            delay: 200,
+            useNativeDriver: true,
+        }).start();
+    }, []);
+    return (_jsxs(Animated.View, { style: [
+            styles.container,
+            {
+                backgroundColor,
+                opacity: fadeAnim,
+            },
+        ], children: [_jsx(Text, { style: [styles.icon, { color: iconColor }], children: "\u26A1" }), _jsxs(Text, { style: [styles.text, { color: textColor }], children: [speed, " Speed"] })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 6,
+        paddingHorizontal: 12,
+        borderRadius: 16,
+        marginBottom: 24,
+        alignSelf: 'center',
+    },
+    icon: {
+        fontSize: 14,
+        marginRight: 6,
+    },
+    text: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+});
+export default SpeedBadge;

package/dist/components/feedback/StatusBadge.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+/**
+ * StatusBadge Component
+ *
+ * Small pill-shaped badge for status labels.
+ * Used to display status like "Security", "Required", "Service Alert", etc.
+ */
+interface StatusBadgeProps {
+    text: string;
+    backgroundColor?: string;
+    textColor?: string;
+    style?: ViewStyle;
+    textStyle?: TextStyle;
+}
+export declare const StatusBadge: React.FC<StatusBadgeProps>;
+export default StatusBadge;

package/dist/components/feedback/StatusBadge.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View, Text, StyleSheet } from 'react-native';
+export const StatusBadge = ({ text, backgroundColor = '#FED7AA', textColor = '#F59E0B', style, textStyle, }) => {
+    return (_jsx(View, { style: [styles.badge, { backgroundColor }, style], children: _jsx(Text, { style: [styles.text, { color: textColor }, textStyle], children: text }) }));
+};
+const styles = StyleSheet.create({
+    badge: {
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        borderRadius: 12,
+        marginBottom: 16,
+        alignSelf: 'center',
+    },
+    text: {
+        fontSize: 12,
+        fontWeight: '600',
+        textTransform: 'capitalize',
+    },
+});
+export default StatusBadge;

package/dist/components/feedback/TopBanner.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { BannerConfig } from '../../types';
+interface TopBannerProps {
+    banner: BannerConfig;
+}
+declare const TopBanner: React.FC<TopBannerProps>;
+export default TopBanner;

package/dist/components/feedback/TopBanner.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+const TopBanner = ({ banner }) => {
+    const getBannerColors = () => {
+        switch (banner.type) {
+            case 'warning':
+                return {
+                    background: '#FEF3C7',
+                    text: '#92400E',
+                    icon: '⚠️',
+                };
+            case 'error':
+                return {
+                    background: '#FEE2E2',
+                    text: '#991B1B',
+                    icon: '❌',
+                };
+            case 'info':
+                return {
+                    background: '#DBEAFE',
+                    text: '#1E40AF',
+                    icon: 'ℹ️',
+                };
+            case 'success':
+                return {
+                    background: '#D1FAE5',
+                    text: '#065F46',
+                    icon: '✅',
+                };
+            default:
+                return {
+                    background: '#F3F4F6',
+                    text: '#374151',
+                    icon: 'ℹ️',
+                };
+        }
+    };
+    const colors = getBannerColors();
+    return (_jsxs(View, { style: [styles.container, { backgroundColor: colors.background }], children: [_jsxs(View, { style: styles.content, children: [_jsx(Text, { style: styles.icon, children: banner.icon || colors.icon }), _jsx(Text, { style: [styles.message, { color: colors.text }], children: banner.message })] }), banner.dismissible && banner.onDismiss && (_jsx(TouchableOpacity, { onPress: banner.onDismiss, style: styles.dismissButton, activeOpacity: 0.7, children: _jsx(Text, { style: [styles.dismissText, { color: colors.text }], children: "Dismiss" }) }))] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingVertical: 12,
+        paddingHorizontal: 16,
+        borderBottomWidth: 1,
+        borderBottomColor: 'rgba(0, 0, 0, 0.1)',
+    },
+    content: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flex: 1,
+        gap: 10,
+    },
+    icon: {
+        fontSize: 18,
+    },
+    message: {
+        fontSize: 14,
+        fontWeight: '500',
+        flex: 1,
+    },
+    dismissButton: {
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+    },
+    dismissText: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+});
+export default TopBanner;

package/dist/components/feedback/index.d.ts

@@ -0,0 +1,5 @@
+export { default as StatusBadge } from './StatusBadge';
+export { default as SpeedBadge } from './SpeedBadge';
+export { default as TopBanner } from './TopBanner';
+export { default as SecurityBanner } from './SecurityBanner';
+export { default as ExpandableSection } from './ExpandableSection';

package/dist/components/feedback/index.js

@@ -0,0 +1,6 @@
+// Feedback - Barrel Export
+export { default as StatusBadge } from './StatusBadge';
+export { default as SpeedBadge } from './SpeedBadge';
+export { default as TopBanner } from './TopBanner';
+export { default as SecurityBanner } from './SecurityBanner';
+export { default as ExpandableSection } from './ExpandableSection';

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

@@ -0,0 +1,11 @@
+import React from 'react';
+interface AnimatedAlertProps {
+    size?: number;
+    color?: string;
+}
+/**
+ * Animated Alert Icon
+ * Alert bell with ringing animation
+ */
+export declare const AnimatedAlert: React.FC<AnimatedAlertProps>;
+export default AnimatedAlert;

package/dist/components/icons/AnimatedAlert.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, { Path, Circle } from 'react-native-svg';
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+/**
+ * Animated Alert Icon
+ * Alert bell with ringing animation
+ */
+export const AnimatedAlert = ({ size = 64, color = '#F59E0B', }) => {
+    const rotation = useSharedValue(0);
+    const ringPulse = useSharedValue(1);
+    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 })] }));
+};
+export default AnimatedAlert;

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