@codewithvincent/react-native-love-chat 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## 0.1.0
+- Initial release of react-native-standalone-chat
+- Replies, reactions, media attachments, load earlier, theming
+- TypeScript definitions and build output

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,152 @@
+# React Native Standalone Chat
+
+A customizable chat UI component for React Native with replies, reactions, media attachments, theming, and performance optimizations.
+
+## Features
+
+- Replies and swipe-to-reply interactions
+- Reactions with overlay UI
+- Image, video, audio, and generic file attachments
+- Load earlier messages header
+- Theming via theme prop override
+- FlashList-backed message rendering
+- TypeScript types included
+
+## Installation
+
+Install the package and required peers:
+
+```bash
+npm install @codewithvincent/react-native-love-chat
+# or
+yarn add @codewithvincent/react-native-love-chat
+```
+
+Peer dependencies (install as needed):
+
+- react
+- react-native
+- react-native-gesture-handler
+- react-native-reanimated
+- react-native-safe-area-context
+- react-native-root-siblings
+- @shopify/flash-list
+- react-native-svg
+- Optional blur providers: @react-native-community/blur or expo-blur
+
+## Usage
+
+```tsx
+import React, { useState, useCallback, useEffect } from 'react';
+import { Chat, IMessage } from '@codewithvincent/react-native-love-chat';
+
+export default function ChatScreen() {
+  const [messages, setMessages] = useState<IMessage[]>([]);
+  const user = { _id: 1, name: 'Developer' };
+
+  useEffect(() => {
+    setMessages([
+      {
+        _id: 1,
+        text: 'Hello developer',
+        createdAt: new Date(),
+        user: {
+          _id: 2,
+          name: 'React Native',
+          avatar: 'https://placeimg.com/140/140/any',
+        },
+      },
+    ]);
+  }, []);
+
+  const onSend = useCallback((newMessages: IMessage[] = []) => {
+    setMessages((previousMessages) => [...newMessages, ...previousMessages]);
+  }, []);
+
+  return (
+    <Chat messages={messages} onSend={onSend} user={user} placeholder="Type your message here..." />
+  );
+}
+```
+
+## API Reference
+
+### Essential Props
+
+- messages: IMessage[] — array of messages (newest first if inverted)
+- user: IUser — current user object
+- onSend: (messages: IMessage[]) => void — send handler
+- placeholder?: string
+- isTyping?: boolean
+- loadEarlier?: boolean
+- isLoadingEarlier?: boolean
+- onLoadEarlier?: () => void
+- onPressAttachment?: (type: string) => void
+- onReaction?: (msg: IMessage, emoji: string) => void
+- onDeleteMessage?: (msg: IMessage) => void
+- onDownloadFile?: (msg: IMessage) => void
+- renderUploadFooter?: (props) => ReactNode
+- theme?: PartialTheme — to override default theme colors
+
+## Data Structures
+
+### IMessage
+
+```typescript
+interface IMessage {
+  _id: string | number;
+  text: string;
+  createdAt: Date | number;
+  user: IUser;
+  image?: string;
+  video?: string;
+  audio?: string;
+  system?: boolean;
+  sent?: boolean;
+  received?: boolean;
+  pending?: boolean;
+  // ... custom fields
+}
+```
+
+### IUser
+
+```typescript
+interface IUser {
+  _id: string | number;
+  name?: string;
+  avatar?: string | number;
+}
+```
+
+## Theming
+
+Override with the `theme` prop. Example:
+
+```tsx
+<Chat
+  messages={messages}
+  user={user}
+  onSend={onSend}
+  theme={{
+    colors: {
+      primary: '#4fd1a5',
+      darkRed: '#ff5757',
+    },
+  }}
+/>
+```
+
+## Examples
+
+See the `examples` folder for complete usage samples.
+
+## Contributing
+
+- Fork the repo and create a feature branch
+- Run tests and build before submitting a PR
+- Follow semantic commit messages
+
+## License
+
+MIT © Contributors

package/dist/Chat.d.ts

@@ -0,0 +1,3 @@
+import { ChatProps } from './types';
+declare const Chat: (props: ChatProps) => import("react/jsx-runtime").JSX.Element;
+export default Chat;

package/dist/Chat.js

@@ -0,0 +1,78 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const MessageList_1 = __importDefault(require("./components/MessageList"));
+const InputToolbar_1 = __importDefault(require("./components/InputToolbar"));
+const theme_1 = require("./utils/theme");
+const InnerChat = (props) => {
+    const theme = (0, theme_1.useTheme)();
+    const { messages = [], text: propText, onInputTextChanged, onSend, renderInputToolbar, renderChatFooter, containerStyle, keyboardShouldPersistTaps = 'never', onPressAttachment, onReply, onClearReply, renderUploadFooter, onDeleteMessage, onDownloadFile, } = props;
+    const [text, setText] = (0, react_1.useState)(propText || '');
+    const [replyMessage, setReplyMessage] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (propText !== undefined && propText !== text) {
+            setText(propText);
+        }
+    }, [propText]);
+    const handleInputTextChanged = (newText) => {
+        setText(newText);
+        if (onInputTextChanged) {
+            onInputTextChanged(newText);
+        }
+    };
+    const handleSend = (newMessages) => {
+        if (Array.isArray(newMessages)) {
+            onSend(newMessages);
+        }
+        setText('');
+        if (onInputTextChanged) {
+            onInputTextChanged('');
+        }
+        setReplyMessage(null);
+    };
+    const handleReply = (message) => {
+        setReplyMessage(message);
+        onReply === null || onReply === void 0 ? void 0 : onReply(message);
+    };
+    const handleClearReply = () => {
+        setReplyMessage(null);
+        onClearReply === null || onClearReply === void 0 ? void 0 : onClearReply();
+    };
+    const renderInput = () => {
+        const inputProps = {
+            ...props,
+            text,
+            onTextChanged: handleInputTextChanged,
+            onSend: handleSend,
+            onPressAttachment,
+            replyMessage,
+            onClearReply: handleClearReply,
+            renderUploadFooter,
+        };
+        if (renderInputToolbar) {
+            return renderInputToolbar(inputProps);
+        }
+        return ((0, jsx_runtime_1.jsx)(InputToolbar_1.default, { ...inputProps }));
+    };
+    return ((0, jsx_runtime_1.jsx)(react_native_1.SafeAreaView, { style: [styles.container, { backgroundColor: theme.colors.white }, containerStyle], children: (0, jsx_runtime_1.jsx)(react_native_1.KeyboardAvoidingView, { style: styles.keyboardAvoidingView, behavior: react_native_1.Platform.OS === 'ios' ? 'padding' : undefined, keyboardVerticalOffset: react_native_1.Platform.OS === 'ios' ? 0 : 0, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.contentContainer, children: [(0, jsx_runtime_1.jsx)(MessageList_1.default, { ...props, messages: messages, keyboardShouldPersistTaps: keyboardShouldPersistTaps, onReply: handleReply }), renderChatFooter === null || renderChatFooter === void 0 ? void 0 : renderChatFooter(), renderInput()] }) }) }));
+};
+const Chat = (props) => ((0, jsx_runtime_1.jsx)(theme_1.ThemeProvider, { theme: props.theme, children: (0, jsx_runtime_1.jsx)(InnerChat, { ...props }) }));
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: theme_1.defaultTheme.colors.white,
+    },
+    keyboardAvoidingView: {
+        flex: 1,
+    },
+    contentContainer: {
+        flex: 1,
+        overflow: 'hidden',
+    },
+});
+exports.default = Chat;

package/dist/components/Bubble.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+interface ChatBubbleProps {
+    isOwnMessage: boolean;
+    children: React.ReactNode;
+    bubbleColor?: string;
+    tailColor?: string;
+    withTail?: boolean;
+    style?: ViewStyle;
+    onPress?: () => void;
+    hitSlop?: number | {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
+    maxWidth?: number;
+    isMedia?: boolean;
+}
+declare const ChatBubble: React.FC<ChatBubbleProps>;
+export default ChatBubble;

package/dist/components/Bubble.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const react_native_svg_1 = require("react-native-svg");
+const utils_1 = require("../utils");
+const theme_1 = require("../utils/theme");
+const ChatBubble = ({ isOwnMessage, children, bubbleColor, tailColor, withTail = true, style, onPress, hitSlop, maxWidth, isMedia, ...rest }) => {
+    const theme = (0, theme_1.useTheme)();
+    const effectiveBubbleColor = bubbleColor || (isOwnMessage ? theme.colors.ownMessageBubble : theme.colors.otherMessageBubble);
+    const tailFillColor = tailColor || effectiveBubbleColor;
+    const styles = getStyleObj({ isOwnMessage, maxWidth, isMedia });
+    const SvgContainerStyle = isOwnMessage
+        ? styles.svgContainerOwn
+        : styles.svgContainerOther;
+    const Container = onPress ? react_native_1.Pressable : react_native_1.View;
+    const tailPath = isOwnMessage
+        ? 'M48,35c-7-4-6-8.75-6-17.5C28,17.5,29,35,48,35z'
+        : 'M38.484,17.5c0,8.75,1,13.5-6,17.5C51.484,35,52.484,17.5,38.484,17.5z';
+    const bubbleStyle = {
+        ...styles.bubble,
+        ...style,
+        backgroundColor: effectiveBubbleColor,
+    };
+    return ((0, jsx_runtime_1.jsxs)(Container, { ...rest, hitSlop: hitSlop, onPress: onPress, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: bubbleStyle, children: children }), withTail && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.svgContainer, SvgContainerStyle], children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Svg, { width: utils_1.appSize.width(4.5), height: utils_1.appSize.height(2.5), viewBox: "32.485 17.5 15.515 17.5", children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: tailPath, fill: tailFillColor }) }) }))] }));
+};
+exports.default = ChatBubble;
+const getStyleObj = ({ isOwnMessage, maxWidth, isMedia, }) => ({
+    bubble: {
+        maxWidth: maxWidth || utils_1.appSize.width(80),
+        alignSelf: isOwnMessage ? 'flex-end' : 'flex-start',
+        paddingHorizontal: isMedia ? 0 : utils_1.appSize.width(3),
+        paddingTop: isMedia ? 0 : utils_1.appSize.height(0.5),
+        paddingBottom: isMedia ? 0 : utils_1.appSize.height(0.8),
+        borderRadius: utils_1.appSize.width(2),
+        marginVertical: utils_1.appSize.height(0.5),
+    },
+    svgContainer: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: -1,
+        flex: 1,
+    },
+    svgContainerOwn: {
+        justifyContent: 'flex-end',
+        alignItems: 'flex-end',
+    },
+    svgContainerOther: {
+        justifyContent: 'flex-end',
+        alignItems: 'flex-start',
+    },
+});

package/dist/components/Composer.d.ts

@@ -0,0 +1,14 @@
+interface ComposerProps {
+    text?: string;
+    placeholder?: string;
+    placeholderTextColor?: string;
+    textInputProps?: any;
+    onTextChanged?: (text: string) => void;
+    onSend?: () => void;
+    textInputStyle?: any;
+    multiline?: boolean;
+    maxComposerHeight?: number;
+    minComposerHeight?: number;
+}
+declare const Composer: (props: ComposerProps) => import("react/jsx-runtime").JSX.Element;
+export default Composer;

package/dist/components/Composer.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../utils/theme");
+const Composer = (props) => {
+    const theme = (0, theme_1.useTheme)();
+    const { text = '', placeholder = 'Type a message...', placeholderTextColor = theme.colors.gray, textInputProps, onTextChanged, textInputStyle, multiline = true, maxComposerHeight = 100, minComposerHeight = 40, } = props;
+    const [composerHeight, setComposerHeight] = (0, react_1.useState)(minComposerHeight);
+    const handleContentSizeChange = (e) => {
+        const contentSize = e.nativeEvent.contentSize;
+        if (!contentSize)
+            return;
+        if (!composerHeight ||
+            (composerHeight && composerHeight < maxComposerHeight) ||
+            (composerHeight === maxComposerHeight && contentSize.height < maxComposerHeight)) {
+            setComposerHeight(Math.max(minComposerHeight, Math.min(maxComposerHeight, contentSize.height)));
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TextInput, { testID: placeholder, accessible: true, accessibilityLabel: placeholder, placeholder: placeholder, placeholderTextColor: placeholderTextColor, multiline: multiline, onChangeText: onTextChanged, onContentSizeChange: handleContentSizeChange, style: [
+            styles.textInput,
+            { color: theme.colors.black, backgroundColor: theme.colors.primary },
+            textInputStyle,
+            {
+                height: composerHeight,
+            },
+        ], autoFocus: false, value: text, enablesReturnKeyAutomatically: true, underlineColorAndroid: "transparent", blurOnSubmit: false, ...textInputProps }));
+};
+const styles = react_native_1.StyleSheet.create({
+    textInput: {
+        flex: 1,
+        fontSize: 16,
+        lineHeight: 22,
+        color: theme_1.defaultTheme.colors.black,
+        backgroundColor: theme_1.defaultTheme.colors.primary,
+        borderRadius: 20,
+        paddingHorizontal: 12,
+        paddingTop: react_native_1.Platform.OS === 'ios' ? 8 : 4,
+        paddingBottom: react_native_1.Platform.OS === 'ios' ? 8 : 4,
+        marginHorizontal: 8,
+    },
+});
+exports.default = Composer;

package/dist/components/FooterReplyPreview.d.ts

@@ -0,0 +1,7 @@
+interface FooterReplyPreviewProps {
+    chatMessage: any;
+    clearReply?: () => void;
+    userId: string;
+}
+declare const FooterReplyPreview: ({ chatMessage, clearReply, userId }: FooterReplyPreviewProps) => import("react/jsx-runtime").JSX.Element;
+export default FooterReplyPreview;

package/dist/components/FooterReplyPreview.js

@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const utils_1 = require("../utils");
+const theme_1 = require("../utils/theme");
+const Icons_1 = require("./Icons");
+const FooterReplyPreview = ({ chatMessage, clearReply, userId }) => {
+    var _a, _b;
+    console.log('chatMessage', chatMessage);
+    const theme = (0, theme_1.useTheme)();
+    if (!chatMessage)
+        return null;
+    const isMine = ((_a = chatMessage.user) === null || _a === void 0 ? void 0 : _a._id) === userId;
+    const senderName = isMine ? 'You' : ((_b = chatMessage.user) === null || _b === void 0 ? void 0 : _b.name) || 'Unknown';
+    const getFileNameFromUrl = (url) => {
+        if (!url)
+            return undefined;
+        try {
+            const clean = url.split('?')[0];
+            const parts = clean.split('/');
+            const last = parts[parts.length - 1];
+            return last || undefined;
+        }
+        catch {
+            return undefined;
+        }
+    };
+    const getExtension = (name) => {
+        if (!name)
+            return undefined;
+        const ext = name.split('.').pop();
+        return ext ? ext.toLowerCase() : undefined;
+    };
+    const computedFileName = chatMessage.fileName || getFileNameFromUrl(chatMessage.fileUrl);
+    const extension = getExtension(computedFileName);
+    const isAudioByExt = extension ? ['mp3', 'wav', 'm4a', 'aac', 'ogg'].includes(extension) : false;
+    const rawFileType = typeof chatMessage.fileType === 'string'
+        ? chatMessage.fileType.toLowerCase()
+        : chatMessage.fileType;
+    const fileType = rawFileType ||
+        (chatMessage.image
+            ? 'image'
+            : chatMessage.video
+                ? 'video'
+                : chatMessage.audio
+                    ? 'audio'
+                    : computedFileName
+                        ? isAudioByExt
+                            ? 'audio'
+                            : 'file'
+                        : null);
+    const renderContent = () => {
+        switch (fileType) {
+            case 'image':
+                return ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: chatMessage.image || chatMessage.fileUrl }, style: styles.replyImage, resizeMode: "cover" }));
+            case 'video':
+                return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.replyMediaContainer, children: (0, jsx_runtime_1.jsx)(Icons_1.VideoIcon, { size: 20, color: theme.colors.darkBrown }) }));
+            case 'audio':
+                return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.replyFileContainer, children: [(0, jsx_runtime_1.jsx)(Icons_1.AudioIcon, { size: 18, color: theme.colors.darkBrown }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: 1, style: [styles.replyFileName, { color: theme.colors.darkBrown }], children: computedFileName || 'Audio' })] }));
+            case 'file':
+                return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.replyFileContainer, children: [(0, jsx_runtime_1.jsx)(Icons_1.FileIcon, { size: 18, color: theme.colors.darkBrown }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: 1, style: [styles.replyFileName, { color: theme.colors.darkBrown }], children: computedFileName || (extension ? extension.toUpperCase() : 'File') })] }));
+            default:
+                if (computedFileName) {
+                    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.replyFileContainer, children: [isAudioByExt ? ((0, jsx_runtime_1.jsx)(Icons_1.AudioIcon, { size: 18, color: theme.colors.darkBrown })) : ((0, jsx_runtime_1.jsx)(Icons_1.FileIcon, { size: 18, color: theme.colors.darkBrown })), (0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: 1, style: [styles.replyFileName, { color: theme.colors.darkBrown }], children: computedFileName })] }));
+                }
+                return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: 1, style: [styles.replySnippet, { color: theme.colors.darkBrown }], children: chatMessage.text || chatMessage.caption || '' }));
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+            styles.replyPreviewContainer,
+            { backgroundColor: theme.colors.softRed, borderLeftColor: theme.colors.primary },
+        ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.replyLine, { backgroundColor: theme.colors.primary }] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.repContainer, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flex: 1 }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.replyTitle, { color: theme.colors.darkBrown }], children: senderName }), renderContent()] }), clearReply && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: clearReply, children: (0, jsx_runtime_1.jsx)(Icons_1.XCircleIcon, { size: 16, color: theme.colors.darkRed }) }))] })] }));
+};
+const styles = react_native_1.StyleSheet.create({
+    replyPreviewContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: theme_1.defaultTheme.colors.softRed,
+        padding: 10,
+        borderLeftWidth: 4,
+        borderLeftColor: theme_1.defaultTheme.colors.primary,
+        borderBottomWidth: 0.3,
+        borderBottomColor: '#ddd',
+    },
+    replyLine: {
+        width: 4,
+        height: '100%',
+        backgroundColor: theme_1.defaultTheme.colors.primary,
+        marginRight: 8,
+    },
+    repContainer: {
+        flex: 1,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    replyTitle: {
+        fontSize: utils_1.appSize.font(11),
+        fontWeight: '600',
+        color: theme_1.defaultTheme.colors.darkBrown,
+    },
+    replySnippet: {
+        fontSize: utils_1.appSize.font(13.5),
+        color: theme_1.defaultTheme.colors.darkBrown,
+        marginTop: 2,
+    },
+    replyImage: {
+        width: 40,
+        height: 40,
+        borderRadius: 4,
+    },
+    replyMediaContainer: {
+        width: 40,
+        height: 40,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#eee',
+        borderRadius: 4,
+    },
+    replyFileContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    replyFileName: {
+        marginLeft: 6,
+        color: theme_1.defaultTheme.colors.darkBrown,
+    },
+});
+exports.default = FooterReplyPreview;

package/dist/components/Icons.d.ts

@@ -0,0 +1,21 @@
+interface IconProps {
+    color?: string;
+    size?: number;
+}
+export declare const PlusIcon: ({ color, size }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SendIcon: ({ color, size }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MicIcon: ({ color, size }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CloseIcon: ({ color, size }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PlayIcon: ({ color, size }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PauseIcon: ({ color, size }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FileIcon: ({ color, size }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageIcon: ({ color, size }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VideoIcon: ({ color, size }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AudioIcon: ({ color, size }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ChevronRightIcon: ({ color, size }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LockIcon: ({ color, size }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const XCircleIcon: ({ color, size }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ReplyIcon: ({ color, size }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TrashIcon: ({ color, size }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DownloadIcon: ({ color, size }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icons.js

@@ -0,0 +1,71 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DownloadIcon = exports.TrashIcon = exports.ReplyIcon = exports.XCircleIcon = exports.LockIcon = exports.ChevronRightIcon = exports.AudioIcon = exports.VideoIcon = exports.ImageIcon = exports.FileIcon = exports.PauseIcon = exports.PlayIcon = exports.CloseIcon = exports.MicIcon = exports.SendIcon = exports.PlusIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const theme_1 = require("../utils/theme");
+const PlusIcon = ({ color = theme_1.defaultTheme.colors.darkRed, size = 24 }) => ((0, jsx_runtime_1.jsxs)(react_native_svg_1.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.Line, { x1: "12", y1: "5", x2: "12", y2: "19" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Line, { x1: "5", y1: "12", x2: "19", y2: "12" })] }));
+exports.PlusIcon = PlusIcon;
+const SendIcon = ({ color = theme_1.defaultTheme.colors.white, size = 24 }) => ((0, jsx_runtime_1.jsxs)(react_native_svg_1.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.Line, { x1: "22", y1: "2", x2: "11", y2: "13" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Polygon, { points: "22 2 15 22 11 13 2 9 22 2" })] }));
+exports.SendIcon = SendIcon;
+const MicIcon = ({ color = theme_1.defaultTheme.colors.darkRed, size = 24 }) => ((0, jsx_runtime_1.jsxs)(react_native_svg_1.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: "M19 10v2a7 7 0 0 1-14 0v-2" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Line, { x1: "12", y1: "19", x2: "12", y2: "23" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Line, { x1: "8", y1: "23", x2: "16", y2: "23" })] }));
+exports.MicIcon = MicIcon;
+const CloseIcon = ({ color = theme_1.defaultTheme.colors.gray, size = 24 }) => ((0, jsx_runtime_1.jsxs)(react_native_svg_1.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.Line, { x1: "18", y1: "6", x2: "6", y2: "18" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Line, { x1: "6", y1: "6", x2: "18", y2: "18" })] }));
+exports.CloseIcon = CloseIcon;
+const PlayIcon = ({ color = theme_1.defaultTheme.colors.white, size = 24 }) => ((0, jsx_runtime_1.jsx)(react_native_svg_1.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Polygon, { points: "5 3 19 12 5 21 5 3" }) }));
+exports.PlayIcon = PlayIcon;
+const PauseIcon = ({ color = theme_1.defaultTheme.colors.white, size = 24 }) => ((0, jsx_runtime_1.jsxs)(react_native_svg_1.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.Rect, { x: "6", y: "4", width: "4", height: "16" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Rect, { x: "14", y: "4", width: "4", height: "16" })] }));
+exports.PauseIcon = PauseIcon;
+const FileIcon = ({ color = theme_1.defaultTheme.colors.gray, size = 24 }) => ((0, jsx_runtime_1.jsxs)(react_native_svg_1.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Polyline, { points: "13 2 13 9 20 9" })] }));
+exports.FileIcon = FileIcon;
+const ImageIcon = ({ color = theme_1.defaultTheme.colors.gray, size = 24 }) => ((0, jsx_runtime_1.jsxs)(react_native_svg_1.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.Rect, { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Circle, { cx: "8.5", cy: "8.5", r: "1.5" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Polyline, { points: "21 15 16 10 5 21" })] }));
+exports.ImageIcon = ImageIcon;
+const VideoIcon = ({ color = theme_1.defaultTheme.colors.gray, size = 24 }) => ((0, jsx_runtime_1.jsxs)(react_native_svg_1.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.Polygon, { points: "23 7 16 12 23 17 23 7" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Rect, { x: "1", y: "5", width: "15", height: "14", rx: "2", ry: "2" })] }));
+exports.VideoIcon = VideoIcon;
+const AudioIcon = ({ color = theme_1.defaultTheme.colors.gray, size = 24 }) => ((0, jsx_runtime_1.jsxs)(react_native_svg_1.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: "M9 18V5l12-2v13" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Circle, { cx: "6", cy: "18", r: "3" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Circle, { cx: "18", cy: "16", r: "3" })] }));
+exports.AudioIcon = AudioIcon;
+const ChevronRightIcon = ({ color = theme_1.defaultTheme.colors.gray, size = 24 }) => ((0, jsx_runtime_1.jsx)(react_native_svg_1.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Polyline, { points: "9 18 15 12 9 6" }) }));
+exports.ChevronRightIcon = ChevronRightIcon;
+const LockIcon = ({ color = theme_1.defaultTheme.colors.white, size = 24 }) => ((0, jsx_runtime_1.jsxs)(react_native_svg_1.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.Rect, { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: "M7 11V7a5 5 0 0 1 10 0v4" })] }));
+exports.LockIcon = LockIcon;
+const XCircleIcon = ({ color = theme_1.defaultTheme.colors.darkRed, size = 24 }) => ((0, jsx_runtime_1.jsxs)(react_native_svg_1.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.Circle, { cx: "12", cy: "12", r: "10" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Line, { x1: "15", y1: "9", x2: "9", y2: "15" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Line, { x1: "9", y1: "9", x2: "15", y2: "15" })] }));
+exports.XCircleIcon = XCircleIcon;
+const ReplyIcon = ({ color = theme_1.defaultTheme.colors.white, size = 24 }) => ((0, jsx_runtime_1.jsxs)(react_native_svg_1.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.Polyline, { points: "9 10 4 15 9 20" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: "M20 4v7a4 4 0 0 1-4 4H4" })] }));
+exports.ReplyIcon = ReplyIcon;
+const TrashIcon = ({ color = theme_1.defaultTheme.colors.darkRed, size = 24 }) => ((0, jsx_runtime_1.jsxs)(react_native_svg_1.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.Polyline, { points: "3 6 5 6 21 6" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })] }));
+exports.TrashIcon = TrashIcon;
+const DownloadIcon = ({ color = theme_1.defaultTheme.colors.white, size = 24 }) => ((0, jsx_runtime_1.jsxs)(react_native_svg_1.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Polyline, { points: "7 10 12 15 17 10" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Line, { x1: "12", y1: "15", x2: "12", y2: "3" })] }));
+exports.DownloadIcon = DownloadIcon;