@replyke/ui-core-react-native 4.0.0

package/dist/esm/components/CustomButton.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, TouchableOpacity, } from "react-native";
+const CustomButton = ({ onPress, text, activeText, error, disabled, style, submitting, }) => {
+    const baseStyle = {
+        backgroundColor: "#60a5fa",
+        paddingHorizontal: 16,
+        paddingVertical: 20,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: 12,
+    };
+    const textStyle = {
+        fontSize: 18,
+        fontWeight: "500",
+        color: "#ffffff",
+    };
+    const errorStyle = {
+        color: "#ef4444",
+        marginTop: 4,
+    };
+    return (_jsxs(View, { style: style, children: [disabled ? (_jsx(View, { style: { ...baseStyle, opacity: 0.5, pointerEvents: "none" }, children: _jsx(Text, { style: textStyle, children: submitting ? activeText : text }) })) : (_jsx(TouchableOpacity, { onPress: onPress, style: baseStyle, children: _jsx(Text, { style: textStyle, children: submitting ? activeText : text }) })), error && _jsx(Text, { style: errorStyle, children: error })] }));
+};
+export default CustomButton;
+//# sourceMappingURL=CustomButton.js.map

package/dist/esm/components/CustomButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomButton.js","sourceRoot":"","sources":["../../../src/components/CustomButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,gBAAgB,GAIjB,MAAM,cAAc,CAAC;AAEtB,MAAM,YAAY,GAAG,CAAC,EACpB,OAAO,EACP,IAAI,EACJ,UAAU,EACV,KAAK,EACL,QAAQ,EACR,KAAK,EACL,UAAU,GASX,EAAE,EAAE;IACH,MAAM,SAAS,GAAc;QAC3B,eAAe,EAAE,SAAS;QAC1B,iBAAiB,EAAE,EAAE;QACrB,eAAe,EAAE,EAAE;QACnB,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,YAAY,EAAE,EAAE;KACjB,CAAC;IAEF,MAAM,SAAS,GAAc;QAC3B,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;QACjB,KAAK,EAAE,SAAS;KACjB,CAAC;IAEF,MAAM,UAAU,GAAc;QAC5B,KAAK,EAAE,SAAS;QAChB,SAAS,EAAE,CAAC;KACb,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,KAAK,EAAE,KAAK,aACf,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,IAAI,IAAC,KAAK,EAAE,EAAE,GAAG,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,EAAE,YAChE,KAAC,IAAI,IAAC,KAAK,EAAE,SAAS,YAAG,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,GAAQ,GAC1D,CACR,CAAC,CAAC,CAAC,CACF,KAAC,gBAAgB,IAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,YAClD,KAAC,IAAI,IAAC,KAAK,EAAE,SAAS,YAAG,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,GAAQ,GAC9C,CACpB,EAEA,KAAK,IAAI,KAAC,IAAI,IAAC,KAAK,EAAE,UAAU,YAAG,KAAK,GAAQ,IAC5C,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/esm/components/EmojiSuggestions.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface EmojiSuggestionsProps {
+    onEmojiClick: (emoji: string) => void;
+}
+declare const EmojiSuggestions: React.FC<EmojiSuggestionsProps>;
+export default EmojiSuggestions;

package/dist/esm/components/EmojiSuggestions.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { View, Text, TouchableOpacity, Animated } from "react-native";
+const emojiGroup1 = ["😂", "❤️", "🤣", "😍", "🙏"];
+const emojiGroup2 = ["🥰", "😊", "😭", "👍", "😅"];
+const emojiGroup3 = ["😢", "👏", "💕", "🥺", "😘"];
+const emojiGroup4 = ["🤔", "🤗", "🙌", "😎", "✨"];
+const EmojiSuggestions = ({ onEmojiClick, }) => {
+    const [clickedEmoji, setClickedEmoji] = useState(null);
+    const [scaleAnim] = useState(new Animated.Value(1));
+    const [emojiSubset, setEmojiSubset] = useState([]);
+    useEffect(() => {
+        // Pick 8 random emojis from the array
+        const combinedEmojis = [...emojiGroup1, ...emojiGroup2, ...emojiGroup3];
+        const shuffled = combinedEmojis.sort(() => 0.5 - Math.random());
+        setEmojiSubset(shuffled.slice(0, 8));
+    }, []);
+    const handleEmojiClick = (emoji) => {
+        setClickedEmoji(emoji);
+        // Shrink animation
+        Animated.sequence([
+            Animated.timing(scaleAnim, {
+                toValue: 0.8,
+                duration: 100,
+                useNativeDriver: true,
+            }),
+            Animated.timing(scaleAnim, {
+                toValue: 1,
+                duration: 100,
+                useNativeDriver: true,
+            }),
+        ]).start(() => {
+            setClickedEmoji(null);
+        });
+        onEmojiClick(emoji);
+    };
+    return (_jsx(View, { style: {
+            borderBottomWidth: 0.5,
+            borderBottomColor: "#e6e6e6",
+            padding: 8,
+            flexDirection: "row",
+            justifyContent: "space-around", // Distribute emojis evenly
+            alignItems: "center",
+        }, children: emojiSubset.map((emoji) => (_jsx(TouchableOpacity, { onPress: () => handleEmojiClick(emoji), activeOpacity: 0.7, children: _jsx(Animated.View, { style: {
+                    transform: [
+                        {
+                            scale: clickedEmoji === emoji ? scaleAnim : 1,
+                        },
+                    ],
+                    justifyContent: "center",
+                    alignItems: "center",
+                }, children: _jsx(Text, { style: {
+                        fontSize: 24,
+                    }, children: emoji }) }) }, emoji))) }));
+};
+export default EmojiSuggestions;
+//# sourceMappingURL=EmojiSuggestions.js.map

package/dist/esm/components/EmojiSuggestions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiSuggestions.js","sourceRoot":"","sources":["../../../src/components/EmojiSuggestions.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/FromNow.d.ts

@@ -0,0 +1,9 @@
+declare function FromNow({ time, fontSize, fontWeight, color, lean, justNowText, }: {
+    time: Date | string;
+    fontSize?: number;
+    fontWeight?: number;
+    color?: string;
+    lean?: boolean;
+    justNowText?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export default FromNow;

package/dist/esm/components/FromNow.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import moment from "moment";
+import { Text } from "react-native";
+function formatTime(time, justNowText) {
+    const now = new Date();
+    const then = new Date(time);
+    const seconds = Math.floor((now.getTime() - then.getTime()) / 1000);
+    let timeString = "";
+    if (seconds < 20) {
+        timeString = justNowText;
+    }
+    else if (seconds < 60) {
+        timeString = `${seconds}s`;
+    }
+    else if (seconds < 3600) {
+        timeString = `${Math.floor(seconds / 60)}m`;
+    }
+    else if (seconds < 86400) {
+        timeString = `${Math.floor(seconds / 3600)}h`;
+    }
+    else if (seconds < 2592000) {
+        // 30 days
+        timeString = `${Math.floor(seconds / 86400)}d`;
+    }
+    else if (seconds < 31536000) {
+        // 365 days
+        timeString = `${Math.floor(seconds / 2592000)}mo`;
+    }
+    else {
+        timeString = `${Math.floor(seconds / 31536000)}y`;
+    }
+    return timeString;
+}
+function FromNow({ time, fontSize = 12, fontWeight = 400, color = "#737373", lean, justNowText = "Just now", }) {
+    if (lean) {
+        return (_jsx(Text, { style: {
+                fontSize,
+                fontWeight: fontWeight,
+                color,
+            }, children: formatTime(time, justNowText) }));
+    }
+    return (_jsx(Text, { style: {
+            fontSize,
+            fontWeight: fontWeight,
+            color,
+        }, children: moment(new Date(time)).fromNow() }));
+}
+export default FromNow;
+//# sourceMappingURL=FromNow.js.map

package/dist/esm/components/FromNow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FromNow.js","sourceRoot":"","sources":["../../../src/components/FromNow.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,SAAS,UAAU,CAAC,IAAmB,EAAE,WAAmB;IAC1D,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE,CAAC;IACvB,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5B,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC;IAEpE,IAAI,UAAU,GAAG,EAAE,CAAC;IAEpB,IAAI,OAAO,GAAG,EAAE,EAAE,CAAC;QACjB,UAAU,GAAG,WAAW,CAAC;IAC3B,CAAC;SAAM,IAAI,OAAO,GAAG,EAAE,EAAE,CAAC;QACxB,UAAU,GAAG,GAAG,OAAO,GAAG,CAAC;IAC7B,CAAC;SAAM,IAAI,OAAO,GAAG,IAAI,EAAE,CAAC;QAC1B,UAAU,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC,GAAG,CAAC;IAC9C,CAAC;SAAM,IAAI,OAAO,GAAG,KAAK,EAAE,CAAC;QAC3B,UAAU,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC;IAChD,CAAC;SAAM,IAAI,OAAO,GAAG,OAAO,EAAE,CAAC;QAC7B,UAAU;QACV,UAAU,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC;IACjD,CAAC;SAAM,IAAI,OAAO,GAAG,QAAQ,EAAE,CAAC;QAC9B,WAAW;QACX,UAAU,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC;IACpD,CAAC;SAAM,CAAC;QACN,UAAU,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,QAAQ,CAAC,GAAG,CAAC;IACpD,CAAC;IAED,OAAO,UAAU,CAAC;AACpB,CAAC;AAED,SAAS,OAAO,CAAC,EACf,IAAI,EACJ,QAAQ,GAAG,EAAE,EACb,UAAU,GAAG,GAAG,EAChB,KAAK,GAAG,SAAS,EACjB,IAAI,EACJ,WAAW,GAAG,UAAU,GAQzB;IACC,IAAI,IAAI,EAAE,CAAC;QACT,OAAO,CACL,KAAC,IAAI,IACH,KAAK,EAAE;gBACL,QAAQ;gBACR,UAAU,EAAE,UAAwB;gBACpC,KAAK;aACN,YAEA,UAAU,CAAC,IAAI,EAAE,WAAW,CAAC,GACzB,CACR,CAAC;IACJ,CAAC;IACD,OAAO,CACL,KAAC,IAAI,IACH,KAAK,EAAE;YACL,QAAQ;YACR,UAAU,EAAE,UAAwB;YACpC,KAAK;SACN,YAEA,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,EAAE,GAC5B,CACR,CAAC;AACJ,CAAC;AAED,eAAe,OAAO,CAAC"}

package/dist/esm/components/GiphyContainer.d.ts

@@ -0,0 +1,14 @@
+interface GiphyContainerProps {
+    onClickBack: () => void;
+    onSelectGif: (selectedGif: {
+        id: string;
+        url: string;
+        gifUrl: string;
+        gifPreviewUrl: string;
+        altText: string | undefined;
+        aspectRatio: number;
+    }) => void;
+    visible: boolean;
+}
+export default function GiphyContainer({ onClickBack, onSelectGif, visible, }: GiphyContainerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/GiphyContainer.js

@@ -0,0 +1,229 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useRef } from "react";
+import { View, Text, TextInput, TouchableOpacity, Animated, TouchableWithoutFeedback, Keyboard, } from "react-native";
+import { useProject } from "@replyke/core";
+import { ScrollView } from "react-native-gesture-handler";
+import { MagnifyingGlassIcon } from "../icons";
+import { getImageComponent } from "../helpers/getImageComponent";
+const MAX_ITEMS = 60; // Define the maximum number of items to load
+const FETCH_LIMIT = 30;
+export default function GiphyContainer({ onClickBack, onSelectGif, visible, }) {
+    const { project } = useProject();
+    const giphyApiKey = project?.integrations.giphy?.apiKey;
+    // Dynamically get the correct Image component and whether it is expo-image.
+    const { ImageComponent, isExpo } = getImageComponent();
+    const [gifs, setGifs] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [loadingMore, setLoadingMore] = useState(false);
+    const [currentOffset, setCurrentOffset] = useState(0);
+    const [totalCount, setTotalCount] = useState(0);
+    const [flatListWidth, setFlatListWidth] = useState(0); // Track the width of the FlatList
+    // Search states & debouncing
+    const [query, setQuery] = useState("");
+    const [debouncedQuery, setDebouncedQuery] = useState("");
+    // Refs to track fetching state and gifs length
+    const isFetchingRef = useRef(false);
+    const gifsLengthRef = useRef(0);
+    // Debounce effect (like in the web version)
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebouncedQuery(query);
+        }, 500); // 500ms debounce
+        return () => clearTimeout(handler);
+    }, [query]);
+    // Update gifsLengthRef when gifs change
+    useEffect(() => {
+        gifsLengthRef.current = gifs.length;
+    }, [gifs]);
+    // Fetch function that decides between trending or search
+    const fetchGifs = useCallback(async (offset = 0) => {
+        // Prevent multiple fetches
+        if (isFetchingRef.current) {
+            return;
+        }
+        // Check if we've reached the maximum limit
+        if (Math.max(gifsLengthRef.current, offset) >= MAX_ITEMS) {
+            return;
+        }
+        isFetchingRef.current = true;
+        if (offset === 0) {
+            setLoading(true);
+            setLoadingMore(false);
+        }
+        else {
+            setLoadingMore(true);
+        }
+        let url = "";
+        const trimmed = debouncedQuery.trim();
+        if (trimmed.length === 0) {
+            // Fetch trending if no query
+            url = `https://api.giphy.com/v1/gifs/trending?api_key=${giphyApiKey}&limit=${FETCH_LIMIT}&offset=${offset}`;
+        }
+        else {
+            // Fetch search results
+            url = `https://api.giphy.com/v1/gifs/search?api_key=${giphyApiKey}&q=${encodeURIComponent(trimmed)}&limit=${FETCH_LIMIT}&offset=${offset}`;
+        }
+        try {
+            const res = await fetch(url);
+            const json = (await res.json());
+            if (json.meta.status !== 200) {
+                console.error("API Error:", json.meta.msg);
+                return;
+            }
+            setTotalCount(json.pagination.total_count);
+            setCurrentOffset(json.pagination.offset + json.pagination.count);
+            // Calculate how many items we can still fetch
+            const remainingItems = MAX_ITEMS - gifsLengthRef.current;
+            const fetchedItems = json.data.slice(0, remainingItems);
+            if (offset === 0) {
+                setGifs(fetchedItems);
+            }
+            else {
+                setGifs((prevGifs) => [...prevGifs, ...fetchedItems]);
+            }
+        }
+        catch (err) {
+            console.error("Fetch Error:", err);
+        }
+        finally {
+            if (offset === 0) {
+                setLoading(false);
+            }
+            else {
+                setLoadingMore(false);
+            }
+            isFetchingRef.current = false;
+        }
+    }, [debouncedQuery, giphyApiKey]);
+    // Fetch more GIFs when reaching the end
+    const fetchMoreGifs = useCallback(() => {
+        if (loading ||
+            loadingMore ||
+            gifsLengthRef.current >= totalCount ||
+            gifsLengthRef.current >= MAX_ITEMS ||
+            isFetchingRef.current) {
+            return;
+        }
+        fetchGifs(currentOffset);
+    }, [loading, loadingMore, totalCount, currentOffset, fetchGifs]);
+    // Reset search and pagination when visibility or query changes
+    useEffect(() => {
+        if (!visible) {
+            // Reset all states when not visible
+            setQuery("");
+            setDebouncedQuery("");
+            setGifs([]);
+            setCurrentOffset(0);
+            setTotalCount(0);
+            setLoading(false);
+            setLoadingMore(false);
+            isFetchingRef.current = false;
+        }
+        else {
+            // When visibility changes to true, reset offset and fetch initial gifs
+            setCurrentOffset(0);
+            setTotalCount(0);
+            setGifs([]);
+            fetchGifs(0);
+        }
+    }, [visible, debouncedQuery, fetchGifs]);
+    // Handle ScrollView layout to dynamically calculate column width
+    const handleLayout = (event) => {
+        const { width } = event.nativeEvent.layout;
+        setFlatListWidth(width);
+    };
+    const renderMasonryColumns = () => {
+        if (!flatListWidth)
+            return null;
+        const padding = 16; // Total horizontal padding
+        const columnSpacing = 8; // Spacing between columns
+        const columnWidth = (flatListWidth - padding - columnSpacing) / 2; // Two columns
+        // Split data into two columns
+        const columns = [[], []];
+        gifs.forEach((gif, index) => {
+            columns[index % 2].push(gif); // Alternately add to each column
+        });
+        return (_jsx(View, { style: {
+                flexDirection: "row",
+                justifyContent: "space-between",
+                paddingHorizontal: 4,
+            }, children: columns.map((column, colIndex) => (_jsx(View, { style: { flex: 1, marginHorizontal: 4 }, children: column.map((item) => {
+                    const aspectRatio = parseInt(item.images.fixed_width.height) /
+                        parseInt(item.images.fixed_width.width);
+                    const imageStyle = {
+                        width: columnWidth,
+                        height: columnWidth * aspectRatio,
+                        borderRadius: 4,
+                    };
+                    // Build the props based on which Image component is being used.
+                    // For expo-image, we assume it accepts a string for its "source"
+                    // and additional props like "contentFit" and "transition".
+                    // For React Native's Image, we wrap the URL in an object with "uri".
+                    const imageProps = isExpo
+                        ? {
+                            source: item.images.fixed_width.webp, // expo-image accepts a string
+                            style: imageStyle,
+                            contentFit: "cover",
+                            transition: 500,
+                        }
+                        : {
+                            source: { uri: item.images.fixed_width.webp }, // React Native expects an object with a "uri" property
+                            style: imageStyle,
+                        };
+                    return (_jsx(TouchableOpacity, { style: { marginBottom: 8 }, onPress: () => {
+                            Keyboard.dismiss(); // Dismiss the keyboard
+                            onSelectGif({
+                                id: item.id,
+                                url: item.url,
+                                aspectRatio,
+                                gifUrl: item.images.fixed_width.webp,
+                                gifPreviewUrl: item.images.preview_gif.webp,
+                                altText: item.title,
+                            });
+                        }, children: _jsx(ImageComponent, { ...imageProps }) }, item.id));
+                }) }, colIndex))) }));
+    };
+    return (_jsx(TouchableWithoutFeedback, { onPress: Keyboard.dismiss, accessible: false, children: _jsxs(Animated.View, { style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                backgroundColor: "white",
+                zIndex: 999,
+                opacity: visible ? 1 : 0,
+                pointerEvents: visible ? "auto" : "none",
+            }, children: [_jsxs(View, { style: {
+                        flexDirection: "row",
+                        padding: 8,
+                        alignItems: "stretch",
+                        gap: 8,
+                    }, children: [_jsx(TouchableOpacity, { style: {
+                                backgroundColor: "#e5e7eb",
+                                aspectRatio: 1, // Ensures width equals height
+                                alignItems: "center",
+                                justifyContent: "center",
+                                borderRadius: 8, // Keeps it rounded
+                            }, onPress: onClickBack, children: _jsx(Text, { style: { color: "#888", fontSize: 22, lineHeight: 22 }, children: "\u2190" }) }), _jsxs(View, { style: {
+                                flex: 1,
+                                flexDirection: "row",
+                                backgroundColor: "#e5e7eb",
+                                borderRadius: 8,
+                                paddingHorizontal: 16,
+                                alignItems: "center",
+                                gap: 12,
+                            }, children: [_jsx(MagnifyingGlassIcon, { width: 16, color: "#888" }), _jsx(TextInput, { style: {
+                                        flex: 1,
+                                        paddingVertical: 12,
+                                        fontSize: 15,
+                                    }, placeholder: "Search GIPHY", onChangeText: (value) => setQuery(value), value: query })] })] }), loading && gifs.length === 0 ? (_jsx(Text, { style: { textAlign: "center", marginTop: 16 }, children: "Loading..." })) : (_jsxs(ScrollView, { onLayout: handleLayout, onScroll: ({ nativeEvent }) => {
+                        const { layoutMeasurement, contentOffset, contentSize } = nativeEvent;
+                        const currentScroll = contentOffset.y + layoutMeasurement.height;
+                        const threshold = contentSize.height * 0.8; // 80% scroll
+                        if (currentScroll >= threshold) {
+                            fetchMoreGifs();
+                        }
+                    }, keyboardShouldPersistTaps: "handled" // Important to allow tapping through the keyboard
+                    , scrollEventThrottle: 16, children: [renderMasonryColumns(), loadingMore && (_jsx(Text, { style: { textAlign: "center", marginVertical: 16 }, children: "Loading more..." }))] }))] }) }));
+}
+//# sourceMappingURL=GiphyContainer.js.map

package/dist/esm/components/GiphyContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GiphyContainer.js","sourceRoot":"","sources":["../../../src/components/GiphyContainer.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/Skeleton.d.ts

@@ -0,0 +1,6 @@
+declare function Skeleton({ style }: {
+    style?: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare function CommentSkeleton(): import("react/jsx-runtime").JSX.Element;
+declare function UserMentionSkeleton(): import("react/jsx-runtime").JSX.Element;
+export { CommentSkeleton, UserMentionSkeleton, Skeleton };

package/dist/esm/components/Skeleton.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, StyleSheet, Animated } from "react-native";
+function Skeleton({ style }) {
+    return (_jsx(Animated.View, { style: [styles.skeleton, style, { opacity: new Animated.Value(0.6) }] }));
+}
+function CommentSkeleton() {
+    return (_jsxs(View, { style: styles.commentContainer, children: [_jsx(Skeleton, { style: styles.avatarSkeleton }), _jsxs(View, { style: styles.textSkeletonContainer, children: [_jsx(Skeleton, { style: { ...styles.textSkeleton, width: "30%" } }), _jsx(Skeleton, { style: styles.textSkeleton }), _jsx(Skeleton, { style: { ...styles.textSkeleton, width: "15%" } })] })] }));
+}
+function UserMentionSkeleton() {
+    return (_jsxs(View, { style: styles.mentionContainer, children: [_jsx(Skeleton, { style: styles.mentionAvatarSkeleton }), _jsx(View, { style: { flex: 1 }, children: _jsx(Skeleton, { style: styles.textSkeleton }) })] }));
+}
+const styles = StyleSheet.create({
+    skeleton: {
+        backgroundColor: "#efefef",
+        borderRadius: 8,
+        width: "100%",
+        height: 16,
+    },
+    commentContainer: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        gap: 8,
+        width: "100%",
+    },
+    avatarSkeleton: {
+        height: 50,
+        width: 50,
+        borderRadius: 25,
+    },
+    textSkeletonContainer: {
+        flex: 1,
+        gap: 8,
+    },
+    textSkeleton: {
+        width: "100%",
+        height: 16,
+        borderRadius: 8,
+    },
+    mentionContainer: {
+        flexDirection: "row",
+        gap: 8,
+        width: "100%",
+        alignItems: "center",
+    },
+    mentionAvatarSkeleton: {
+        height: 35,
+        width: 35,
+        borderRadius: 17.5,
+    },
+});
+export { CommentSkeleton, UserMentionSkeleton, Skeleton };
+//# sourceMappingURL=Skeleton.js.map

package/dist/esm/components/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../src/components/Skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE1D,SAAS,QAAQ,CAAC,EAAE,KAAK,EAAmB;IAC1C,OAAO,CACL,KAAC,QAAQ,CAAC,IAAI,IACZ,KAAK,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GACrE,CACH,CAAC;AACJ,CAAC;AAED,SAAS,eAAe;IACtB,OAAO,CACL,MAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,gBAAgB,aAClC,KAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,CAAC,cAAc,GAAI,EAC1C,MAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,qBAAqB,aACvC,KAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,GAAG,MAAM,CAAC,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE,GAAI,EAC7D,KAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,CAAC,YAAY,GAAI,EACxC,KAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,GAAG,MAAM,CAAC,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE,GAAI,IACxD,IACF,CACR,CAAC;AACJ,CAAC;AAED,SAAS,mBAAmB;IAC1B,OAAO,CACL,MAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,gBAAgB,aAClC,KAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,CAAC,qBAAqB,GAAI,EACjD,KAAC,IAAI,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACtB,KAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,CAAC,YAAY,GAAI,GACnC,IACF,CACR,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,QAAQ,EAAE;QACR,eAAe,EAAE,SAAS;QAC1B,YAAY,EAAE,CAAC;QACf,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,EAAE;KACX;IACD,gBAAgB,EAAE;QAChB,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,YAAY;QACxB,GAAG,EAAE,CAAC;QACN,KAAK,EAAE,MAAM;KACd;IACD,cAAc,EAAE;QACd,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;QACT,YAAY,EAAE,EAAE;KACjB;IACD,qBAAqB,EAAE;QACrB,IAAI,EAAE,CAAC;QACP,GAAG,EAAE,CAAC;KACP;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,EAAE;QACV,YAAY,EAAE,CAAC;KAChB;IACD,gBAAgB,EAAE;QAChB,aAAa,EAAE,KAAK;QACpB,GAAG,EAAE,CAAC;QACN,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,QAAQ;KACrB;IACD,qBAAqB,EAAE;QACrB,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;QACT,YAAY,EAAE,IAAI;KACnB;CACF,CAAC,CAAC;AAEH,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,QAAQ,EAAE,CAAC"}

package/dist/esm/components/UserAvatar.d.ts

@@ -0,0 +1,12 @@
+interface UserProps {
+    id?: string;
+    avatar?: string | null | undefined;
+    name?: string | null | undefined;
+    username?: string | null | undefined;
+}
+declare const UserAvatar: ({ user, size, borderRadius, }: {
+    user: UserProps | null | undefined;
+    size?: number | undefined;
+    borderRadius?: number | undefined;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default UserAvatar;

package/dist/esm/components/UserAvatar.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View, Image, StyleSheet } from "react-native";
+const UserAvatar = ({ user, size = 32, borderRadius, }) => {
+    if (!user)
+        return null;
+    const userImg = user.avatar
+        ? user.avatar
+        : `https://api.dicebear.com/9.x/thumbs/png?seed=${user.id}`;
+    return (_jsx(View, { style: [
+            styles.avatarContainer,
+            {
+                width: size,
+                height: size,
+                borderRadius: borderRadius || size / 2,
+            },
+        ], children: _jsx(Image, { source: {
+                uri: userImg,
+            }, style: [
+                styles.image,
+                {
+                    borderRadius: borderRadius || size / 2,
+                },
+            ] }) }));
+};
+const styles = StyleSheet.create({
+    avatarContainer: {
+        overflow: "hidden",
+        borderWidth: 1,
+        borderColor: "#E6E6E6",
+        flexShrink: 0,
+    },
+    image: {
+        width: "100%",
+        height: "100%",
+        resizeMode: "cover",
+    },
+});
+export default UserAvatar;
+//# sourceMappingURL=UserAvatar.js.map

package/dist/esm/components/UserAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserAvatar.js","sourceRoot":"","sources":["../../../src/components/UserAvatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAQvD,MAAM,UAAU,GAAG,CAAC,EAClB,IAAI,EACJ,IAAI,GAAG,EAAE,EACT,YAAY,GAKb,EAAE,EAAE;IACH,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM;QACzB,CAAC,CAAC,IAAI,CAAC,MAAM;QACb,CAAC,CAAC,gDAAgD,IAAI,CAAC,EAAE,EAAE,CAAC;IAE9D,OAAO,CACL,KAAC,IAAI,IACH,KAAK,EAAE;YACL,MAAM,CAAC,eAAe;YACtB;gBACE,KAAK,EAAE,IAAI;gBACX,MAAM,EAAE,IAAI;gBACZ,YAAY,EAAE,YAAY,IAAI,IAAI,GAAG,CAAC;aACvC;SACF,YAED,KAAC,KAAK,IACJ,MAAM,EAAE;gBACN,GAAG,EAAE,OAAO;aACb,EACD,KAAK,EAAE;gBACL,MAAM,CAAC,KAAK;gBACZ;oBACE,YAAY,EAAE,YAAY,IAAI,IAAI,GAAG,CAAC;iBACvC;aACF,GACD,GACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,eAAe,EAAE;QACf,QAAQ,EAAE,QAAQ;QAClB,WAAW,EAAE,CAAC;QACd,WAAW,EAAE,SAAS;QACtB,UAAU,EAAE,CAAC;KACd;IACD,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,OAAO;KACpB;CACF,CAAC,CAAC;AAEH,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,6 @@
+export { default as CustomButton } from "./CustomButton";
+export { default as EmojiSuggestions } from "./EmojiSuggestions";
+export { default as FromNow } from "./FromNow";
+export { default as GiphyContainer } from "./GiphyContainer";
+export { CommentSkeleton, UserMentionSkeleton, Skeleton } from "./Skeleton";
+export { default as UserAvatar } from "./UserAvatar";

package/dist/esm/components/index.js

@@ -0,0 +1,7 @@
+export { default as CustomButton } from "./CustomButton";
+export { default as EmojiSuggestions } from "./EmojiSuggestions";
+export { default as FromNow } from "./FromNow";
+export { default as GiphyContainer } from "./GiphyContainer";
+export { CommentSkeleton, UserMentionSkeleton, Skeleton } from "./Skeleton";
+export { default as UserAvatar } from "./UserAvatar";
+//# sourceMappingURL=index.js.map

package/dist/esm/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/esm/constants/index.d.ts

@@ -0,0 +1 @@
+export * from "./reset-styles";

package/dist/esm/constants/index.js

@@ -0,0 +1,2 @@
+export * from "./reset-styles";
+//# sourceMappingURL=index.js.map

package/dist/esm/constants/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/constants/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/esm/constants/reset-styles.d.ts

@@ -0,0 +1,9 @@
+import { ImageStyle, TextStyle, ViewStyle } from "react-native";
+export declare const resetView: ViewStyle;
+export declare const resetButton: ViewStyle;
+export declare const resetUl: React.CSSProperties;
+export declare const resetIl: React.CSSProperties;
+export declare const resetText: TextStyle;
+export declare const resetTextInput: TextStyle;
+export declare const resetImg: ImageStyle;
+export declare const resetIcon: ViewStyle;

package/dist/esm/constants/reset-styles.js

@@ -0,0 +1,37 @@
+export const resetView = {
+    padding: 0,
+    margin: 0,
+};
+export const resetButton = {
+    margin: 0,
+    padding: 0,
+    borderStyle: undefined,
+    borderWidth: 0,
+    backgroundColor: "transparent",
+};
+export const resetUl = {
+    listStyleType: "none",
+    padding: 0,
+    margin: 0,
+};
+export const resetIl = {
+    padding: 0,
+    margin: 0,
+};
+export const resetText = {
+    padding: 0,
+    margin: 0,
+};
+export const resetTextInput = {
+    padding: 0,
+    margin: 0,
+};
+export const resetImg = {
+    padding: 0,
+    margin: 0,
+};
+export const resetIcon = {
+    padding: 0,
+    margin: 0,
+};
+//# sourceMappingURL=reset-styles.js.map

package/dist/esm/constants/reset-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reset-styles.js","sourceRoot":"","sources":["../../../src/constants/reset-styles.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,SAAS,GAAc;IAClC,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,CAAC;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAc;IACpC,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,CAAC;IACV,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,CAAC;IACd,eAAe,EAAE,aAAa;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAwB;IAC1C,aAAa,EAAE,MAAM;IACrB,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,CAAC;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAwB;IAC1C,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,CAAC;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAc;IAClC,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,CAAC;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAc;IACvC,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,CAAC;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAe;IAClC,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,CAAC;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAc;IAClC,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,CAAC;CACV,CAAC"}