@sendbird/uikit-react-native-foundation 3.1.2 → 3.2.0

package/lib/typescript/src/theme/UIKitThemeProvider.d.ts

@@ -3,5 +3,5 @@ import type { UIKitTheme } from '../types';
 type Props = React.PropsWithChildren<{
     theme?: UIKitTheme;
 }>;
-declare const UIKitThemeProvider: ({ children, theme }: Props) => JSX.Element;
+declare const UIKitThemeProvider: ({ children, theme }: Props) => React.JSX.Element;
 export default UIKitThemeProvider;

package/lib/typescript/src/types.d.ts

@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import type { TextStyle } from 'react-native';
 export interface UIKitTypography {
     h1: FontAttributes;
@@ -26,7 +26,7 @@ export interface UIKitTheme {
     colors: UIKitColors;
     typography: UIKitTypography;
 }
-export type Component = 'Header' | 'Button' | 'Dialog' | 'Input' | 'Badge' | 'Placeholder' | 'DateSeparator' | 'GroupChannelMessage' | 'GroupChannelPreview' | 'ProfileCard' | 'Reaction' | 'OpenChannelMessage' | 'OpenChannelPreview';
+export type Component = 'Header' | 'Button' | 'Dialog' | 'Input' | 'Badge' | 'Placeholder' | 'DateSeparator' | 'GroupChannelMessage' | 'GroupChannelPreview' | 'ProfileCard' | 'Reaction' | 'OpenChannelMessage' | 'OpenChannelPreview' | 'VoiceMessageInput';
 export type GetColorTree<Tree extends {
     Variant: {
         [key in Component]: string;
@@ -53,6 +53,7 @@ export type ComponentColorTree = GetColorTree<{
         Reaction: 'default' | 'rounded';
         OpenChannelMessage: 'default';
         OpenChannelPreview: 'default';
+        VoiceMessageInput: 'default';
     };
     State: {
         Header: 'none';
@@ -68,6 +69,7 @@ export type ComponentColorTree = GetColorTree<{
         Reaction: 'enabled' | 'selected';
         OpenChannelMessage: 'enabled' | 'pressed';
         OpenChannelPreview: 'none';
+        VoiceMessageInput: 'active' | 'inactive';
     };
     ColorPart: {
         Header: 'background' | 'borderBottom';
@@ -77,12 +79,13 @@ export type ComponentColorTree = GetColorTree<{
         Badge: 'text' | 'background';
         Placeholder: 'content' | 'highlight';
         DateSeparator: 'text' | 'background';
-        GroupChannelMessage: 'textMsg' | 'textEdited' | 'textSenderName' | 'textTime' | 'background';
+        GroupChannelMessage: 'textMsg' | 'textEdited' | 'textSenderName' | 'textTime' | 'textVoicePlaytime' | 'background' | 'voiceSpinner' | 'voiceProgressTrack' | 'voiceActionIcon' | 'voiceActionIconBackground';
         GroupChannelPreview: 'textTitle' | 'textTitleCaption' | 'textBody' | 'memberCount' | 'bodyIcon' | 'background' | 'coverBackground' | 'bodyIconBackground' | 'separator';
         ProfileCard: 'textUsername' | 'textBodyLabel' | 'textBody' | 'background';
         Reaction: 'background' | 'highlight';
         OpenChannelMessage: 'textMsg' | 'textMsgPostfix' | 'textSenderName' | 'textTime' | 'textOperator' | 'background' | 'bubbleBackground' | 'adminBackground';
         OpenChannelPreview: 'textTitle' | 'textParticipants' | 'frozenIcon' | 'participantsIcon' | 'background' | 'coverBackground' | 'separator';
+        VoiceMessageInput: 'textCancel' | 'textTime' | 'background' | 'actionIcon' | 'actionIconBackground' | 'sendIcon' | 'sendIconBackground' | 'progressTrack' | 'recording';
     };
 }>;
 export type ComponentColors<T extends Component> = {
@@ -129,13 +132,14 @@ export interface UIKitColors {
         reaction: ComponentColors<'Reaction'>;
         openChannelMessage: ComponentColors<'OpenChannelMessage'>;
         openChannelPreview: ComponentColors<'OpenChannelPreview'>;
+        voiceMessageInput: ComponentColors<'VoiceMessageInput'>;
     };
 }
-export type HeaderElement = string | ReactElement | null;
+export type HeaderElement = ReactNode;
 export type HeaderPartProps = {
-    title?: HeaderElement;
-    right?: HeaderElement;
-    left?: HeaderElement;
+    title?: ReactNode;
+    right?: ReactNode;
+    left?: ReactNode;
     onPressLeft?: (...params: any[]) => any;
     onPressRight?: (...params: any[]) => any;
 };

package/lib/typescript/src/ui/ActionMenu/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export type ActionMenuItem = {
     title?: string;
     menuItems: {
@@ -13,5 +14,5 @@ type Props = {
     onError?: (error: unknown) => void;
     onDismiss?: () => void;
 } & ActionMenuItem;
-declare const ActionMenu: ({ visible, onHide, onError, onDismiss, title, menuItems }: Props) => JSX.Element;
+declare const ActionMenu: ({ visible, onHide, onError, onDismiss, title, menuItems }: Props) => React.JSX.Element;
 export default ActionMenu;

package/lib/typescript/src/ui/Alert/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { AlertButton } from 'react-native';
 export type AlertItem = {
     title?: string;
@@ -9,5 +10,5 @@ type Props = {
     onHide: () => void;
     onDismiss?: () => void;
 } & AlertItem;
-declare const Alert: ({ onDismiss, visible, onHide, title, message, buttons }: Props) => JSX.Element;
+declare const Alert: ({ onDismiss, visible, onHide, title, message, buttons }: Props) => React.JSX.Element;
 export default Alert;

package/lib/typescript/src/ui/Avatar/AvatarGroup.d.ts

@@ -4,5 +4,5 @@ type Props = React.PropsWithChildren<{
     size?: number;
     containerStyle?: StyleProp<ViewStyle>;
 }>;
-declare const AvatarGroup: ({ children, containerStyle, size }: Props) => JSX.Element;
+declare const AvatarGroup: ({ children, containerStyle, size }: Props) => React.JSX.Element;
 export default AvatarGroup;

package/lib/typescript/src/ui/Avatar/AvatarIcon.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import Icon from '../../components/Icon';
 type Props = {
@@ -6,5 +7,5 @@ type Props = {
     backgroundColor?: string;
     containerStyle?: StyleProp<ViewStyle>;
 };
-declare const AvatarIcon: ({ size, icon, containerStyle, backgroundColor }: Props) => JSX.Element;
+declare const AvatarIcon: ({ size, icon, containerStyle, backgroundColor }: Props) => React.JSX.Element;
 export default AvatarIcon;

package/lib/typescript/src/ui/Avatar/index.d.ts

@@ -1,10 +1,5 @@
+import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-import AvatarGroup from './AvatarGroup';
-import AvatarIcon from './AvatarIcon';
-type SubComponents = {
-    Group: typeof AvatarGroup;
-    Icon: typeof AvatarIcon;
-};
 type Props = {
     uri?: string;
     size?: number;
@@ -12,5 +7,18 @@ type Props = {
     muted?: boolean;
     containerStyle?: StyleProp<ViewStyle>;
 };
-declare const Avatar: ((props: Props) => JSX.Element) & SubComponents;
-export default Avatar;
+declare const _default: (({ uri, square, muted, size, containerStyle }: Props) => React.JSX.Element) & {
+    Group: ({ children, containerStyle, size }: {
+        size?: number | undefined;
+        containerStyle?: StyleProp<ViewStyle>;
+    } & {
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+    Icon: ({ size, icon, containerStyle, backgroundColor }: {
+        icon: "message" | "recording" | "done" | "search" | "chat-hide" | "chat-show" | "add" | "archive" | "arrow-left" | "audio-off-filled" | "audio-off" | "audio-on-filled" | "audio-on" | "ban" | "broadcast" | "camera" | "channels" | "chat-filled" | "chat" | "checkbox-off" | "checkbox-on" | "chevron-down" | "chevron-right" | "close" | "copy" | "create" | "delete" | "document" | "done-all" | "download" | "edit" | "emoji-more" | "error" | "file-audio" | "file-document" | "freeze" | "gif" | "info" | "leave" | "members" | "moderation" | "more" | "mute" | "notifications-filled" | "notifications-off-filled" | "notifications" | "operator" | "pause" | "photo" | "play" | "plus" | "question" | "radio-off" | "radio-on" | "refresh" | "remove" | "reply-filled" | "reply" | "send" | "settings-filled" | "spinner" | "stop" | "streaming" | "supergroup" | "theme" | "thumbnail-none" | "unarchive" | "user";
+        size?: number | undefined;
+        backgroundColor?: string | undefined;
+        containerStyle?: StyleProp<ViewStyle>;
+    }) => React.JSX.Element;
+};
+export default _default;

package/lib/typescript/src/ui/Badge/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 type Props = {
     count: number;
@@ -7,5 +8,5 @@ type Props = {
     style?: StyleProp<ViewStyle>;
     size?: 'small' | 'default';
 };
-declare const Badge: ({ count, maxCount, badgeColor, textColor, style, size }: Props) => JSX.Element;
+declare const Badge: ({ count, maxCount, badgeColor, textColor, style, size }: Props) => React.JSX.Element;
 export default Badge;

package/lib/typescript/src/ui/BottomSheet/index.d.ts

@@ -1,3 +1,4 @@
+import React, { ReactNode } from 'react';
 import type Icon from '../../components/Icon';
 type HeaderProps = {
     onClose: () => Promise<void>;
@@ -11,7 +12,7 @@ export type BottomSheetItem = {
         disabled?: boolean;
         onPress: () => void;
     }[];
-    HeaderComponent?: (props: HeaderProps) => JSX.Element;
+    HeaderComponent?: (props: HeaderProps) => ReactNode;
 };
 type Props = {
     visible: boolean;
@@ -19,5 +20,5 @@ type Props = {
     onError?: (error: unknown) => void;
     onDismiss?: () => void;
 } & BottomSheetItem;
-declare const BottomSheet: ({ onDismiss, onHide, visible, sheetItems, HeaderComponent }: Props) => JSX.Element;
+declare const BottomSheet: ({ onDismiss, onHide, visible, sheetItems, HeaderComponent }: Props) => React.JSX.Element;
 export default BottomSheet;

package/lib/typescript/src/ui/Button/index.d.ts

@@ -10,5 +10,5 @@ type Props = React.PropsWithChildren<{
     buttonColor?: string;
     contentColor?: string;
 }>;
-declare const Button: ({ icon, variant, buttonColor, contentColor, disabled, onPress, style, children, }: Props) => JSX.Element;
+declare const Button: ({ icon, variant, buttonColor, contentColor, disabled, onPress, style, children, }: Props) => React.JSX.Element;
 export default Button;

package/lib/typescript/src/ui/ChannelFrozenBanner/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 type Props = {
     style?: StyleProp<ViewStyle>;
@@ -5,5 +6,5 @@ type Props = {
     textColor?: string;
     backgroundColor?: string;
 };
-declare const ChannelFrozenBanner: ({ text, backgroundColor, textColor, style }: Props) => JSX.Element;
+declare const ChannelFrozenBanner: ({ text, backgroundColor, textColor, style }: Props) => React.JSX.Element;
 export default ChannelFrozenBanner;

package/lib/typescript/src/ui/Dialog/DialogBox.d.ts

@@ -3,5 +3,5 @@ import { StyleProp, ViewStyle } from 'react-native';
 type Props = React.PropsWithChildren<{
     style?: StyleProp<ViewStyle>;
 }>;
-declare const DialogBox: ({ style, children }: Props) => JSX.Element;
+declare const DialogBox: ({ style, children }: Props) => React.JSX.Element;
 export default DialogBox;

package/lib/typescript/src/ui/Dialog/DialogSheet.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import Icon from '../../components/Icon';
 type Props = React.PropsWithChildren<{
     style?: StyleProp<ViewStyle>;
 }>;
-declare const DialogSheet: ((props: Props) => JSX.Element) & {
+declare const DialogSheet: ((props: Props) => ReactNode) & {
     Item: typeof SheetItem;
 };
 export type SheetItemProps = {
@@ -14,5 +14,5 @@ export type SheetItemProps = {
     titleColor?: string;
     disabled?: boolean;
 };
-declare const SheetItem: ({ icon, title, iconColor, titleColor, disabled }: SheetItemProps) => JSX.Element;
+declare const SheetItem: ({ icon, title, iconColor, titleColor, disabled }: SheetItemProps) => React.JSX.Element;
 export default DialogSheet;

package/lib/typescript/src/ui/Dialog/index.d.ts

@@ -38,7 +38,7 @@ type Props = React.PropsWithChildren<{
         };
     };
 }>;
-export declare const DialogProvider: ({ defaultLabels, children }: Props) => JSX.Element;
+export declare const DialogProvider: ({ defaultLabels, children }: Props) => React.JSX.Element;
 export declare const useActionMenu: () => Pick<DialogContextType, "openMenu">;
 export declare const useAlert: () => Pick<DialogContextType, "alert">;
 export declare const usePrompt: () => Pick<DialogContextType, "openPrompt">;

package/lib/typescript/src/ui/GroupChannelMessage/Message.admin.d.ts

@@ -1,4 +1,5 @@
+import React from 'react';
 import type { SendbirdAdminMessage } from '@sendbird/uikit-utils';
 import type { GroupChannelMessageProps } from './index';
-declare const AdminMessage: (props: GroupChannelMessageProps<SendbirdAdminMessage>) => JSX.Element;
+declare const AdminMessage: (props: GroupChannelMessageProps<SendbirdAdminMessage>) => React.JSX.Element;
 export default AdminMessage;

package/lib/typescript/src/ui/GroupChannelMessage/Message.file.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 import { SendbirdFileMessage } from '@sendbird/uikit-utils';
 import type { GroupChannelMessageProps } from './index';
 type Props = GroupChannelMessageProps<SendbirdFileMessage>;
-declare const FileMessage: (props: Props) => JSX.Element;
+declare const FileMessage: (props: Props) => React.JSX.Element;
 export default FileMessage;

package/lib/typescript/src/ui/GroupChannelMessage/Message.file.image.d.ts

@@ -1,4 +1,5 @@
+import React from 'react';
 import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
 import type { GroupChannelMessageProps } from './index';
-declare const ImageFileMessage: (props: GroupChannelMessageProps<SendbirdFileMessage>) => JSX.Element;
+declare const ImageFileMessage: (props: GroupChannelMessageProps<SendbirdFileMessage>) => React.JSX.Element;
 export default ImageFileMessage;

package/lib/typescript/src/ui/GroupChannelMessage/Message.file.video.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
 import type { GroupChannelMessageProps } from './index';
 type Props = GroupChannelMessageProps<SendbirdFileMessage, {
@@ -5,5 +6,5 @@ type Props = GroupChannelMessageProps<SendbirdFileMessage, {
         path: string;
     } | null>;
 }>;
-declare const VideoFileMessage: (props: Props) => JSX.Element;
+declare const VideoFileMessage: (props: Props) => React.JSX.Element;
 export default VideoFileMessage;

package/lib/typescript/src/ui/GroupChannelMessage/Message.file.voice.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
+import type { GroupChannelMessageProps } from './index';
+export type VoiceFileMessageState = {
+    status: 'preparing' | 'playing' | 'paused';
+    currentTime: number;
+    duration: number;
+};
+type Props = GroupChannelMessageProps<SendbirdFileMessage, {
+    durationMetaArrayKey?: string;
+    onUnmount: () => void;
+}>;
+declare const VoiceFileMessage: (props: Props) => React.JSX.Element;
+export default VoiceFileMessage;

package/lib/typescript/src/ui/GroupChannelMessage/Message.unknown.d.ts

@@ -1,4 +1,5 @@
+import React from 'react';
 import type { SendbirdMessage } from '@sendbird/uikit-utils';
 import type { GroupChannelMessageProps } from './index';
-declare const UnknownMessage: (props: GroupChannelMessageProps<SendbirdMessage>) => JSX.Element;
+declare const UnknownMessage: (props: GroupChannelMessageProps<SendbirdMessage>) => React.JSX.Element;
 export default UnknownMessage;

package/lib/typescript/src/ui/GroupChannelMessage/Message.user.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { SendbirdUserMessage } from '@sendbird/uikit-utils';
 import type { RegexTextPattern } from '../../components/RegexText';
 import type { GroupChannelMessageProps } from './index';
@@ -5,5 +6,5 @@ type Props = GroupChannelMessageProps<SendbirdUserMessage, {
     regexTextPatterns?: RegexTextPattern[];
     renderRegexTextChildren?: (message: SendbirdUserMessage) => string;
 }>;
-declare const UserMessage: (props: Props) => JSX.Element;
+declare const UserMessage: (props: Props) => React.JSX.Element;
 export default UserMessage;

package/lib/typescript/src/ui/GroupChannelMessage/Message.user.og.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { SendbirdUserMessage } from '@sendbird/uikit-utils';
 import type { RegexTextPattern } from '../../components/RegexText';
 import type { GroupChannelMessageProps } from './index';
@@ -5,5 +6,5 @@ type Props = GroupChannelMessageProps<SendbirdUserMessage, {
     regexTextPatterns?: RegexTextPattern[];
     renderRegexTextChildren?: (message: SendbirdUserMessage) => string;
 }>;
-declare const OpenGraphUserMessage: (props: Props) => JSX.Element;
+declare const OpenGraphUserMessage: (props: Props) => React.JSX.Element;
 export default OpenGraphUserMessage;

package/lib/typescript/src/ui/GroupChannelMessage/MessageBubbleWithText.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { SendbirdUserMessage } from '@sendbird/uikit-utils';
 import { RegexTextPattern } from '../../components/RegexText';
 import type { GroupChannelMessageProps } from './index';
@@ -6,5 +7,5 @@ type Props = GroupChannelMessageProps<SendbirdUserMessage, {
     regexTextPatterns?: RegexTextPattern[];
     renderRegexTextChildren?: (message: SendbirdUserMessage) => string;
 }>;
-declare const MessageBubbleWithText: ({ backgroundColor, message, onPressURL, onLongPress, strings, variant, regexTextPatterns, renderRegexTextChildren, }: Props) => JSX.Element;
+declare const MessageBubbleWithText: ({ backgroundColor, message, onPressURL, onLongPress, strings, variant, regexTextPatterns, renderRegexTextChildren, }: Props) => React.JSX.Element;
 export default MessageBubbleWithText;

package/lib/typescript/src/ui/GroupChannelMessage/MessageContainer.d.ts

@@ -1,9 +1,10 @@
+import React from 'react';
 import type { SendbirdMessage } from '@sendbird/uikit-utils';
 import type { GroupChannelMessageProps } from './index';
 type Props = GroupChannelMessageProps<SendbirdMessage>;
 declare const MessageContainer: {
-    (props: Props): JSX.Element;
-    Incoming({ children, groupedWithNext, groupedWithPrev, message, onPressAvatar, strings, parentMessage, }: Props): JSX.Element;
-    Outgoing({ children, message, groupedWithNext, strings, sendingStatus, parentMessage, }: Props): JSX.Element;
+    (props: Props): React.JSX.Element;
+    Incoming({ children, groupedWithNext, groupedWithPrev, message, onPressAvatar, strings, parentMessage, }: Props): React.JSX.Element;
+    Outgoing({ children, message, groupedWithNext, strings, sendingStatus, parentMessage, }: Props): React.JSX.Element;
 };
 export default MessageContainer;

package/lib/typescript/src/ui/GroupChannelMessage/MessageOpenGraph.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 import type { SendbirdUserMessage } from '@sendbird/uikit-utils';
 declare const MessageOpenGraph: ({ onPressURL, onLongPress, ogMetaData, variant, }: {
     ogMetaData: NonNullable<SendbirdUserMessage['ogMetaData']>;
     variant: 'outgoing' | 'incoming';
     onPressURL?: ((url: string) => void) | undefined;
     onLongPress?: (() => void) | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default MessageOpenGraph;

package/lib/typescript/src/ui/GroupChannelMessage/index.d.ts

@@ -1,5 +1,6 @@
 import type React from 'react';
 import type { SendbirdGroupChannel, SendbirdMessage, SendbirdUser } from '@sendbird/uikit-utils';
+import type { VoiceFileMessageState } from './Message.file.voice';
 export type GroupChannelMessageProps<T extends SendbirdMessage, AdditionalProps = unknown> = {
     channel: SendbirdGroupChannel;
     message: T;
@@ -22,6 +23,7 @@ export type GroupChannelMessageProps<T extends SendbirdMessage, AdditionalProps
     onPressAvatar?: () => void;
     onPressURL?: (url: string) => void;
     onPressMentionedUser?: (mentionedUser?: SendbirdUser) => void;
+    onToggleVoiceMessage?: (state: VoiceFileMessageState, setState: React.Dispatch<React.SetStateAction<VoiceFileMessageState>>) => Promise<void>;
 } & AdditionalProps;
 declare const GroupChannelMessage: {
     User: (props: {
@@ -46,10 +48,11 @@ declare const GroupChannelMessage: {
         onPressAvatar?: (() => void) | undefined;
         onPressURL?: ((url: string) => void) | undefined;
         onPressMentionedUser?: ((mentionedUser?: SendbirdUser) => void) | undefined;
+        onToggleVoiceMessage?: ((state: VoiceFileMessageState, setState: React.Dispatch<React.SetStateAction<VoiceFileMessageState>>) => Promise<void>) | undefined;
     } & {
         regexTextPatterns?: import("../..").RegexTextPattern[] | undefined;
         renderRegexTextChildren?: ((message: import("@sendbird/chat/message").UserMessage) => string) | undefined;
-    }) => JSX.Element;
+    }) => React.JSX.Element;
     OpenGraphUser: (props: {
         channel: SendbirdGroupChannel;
         message: import("@sendbird/chat/message").UserMessage;
@@ -72,10 +75,11 @@ declare const GroupChannelMessage: {
         onPressAvatar?: (() => void) | undefined;
         onPressURL?: ((url: string) => void) | undefined;
         onPressMentionedUser?: ((mentionedUser?: SendbirdUser) => void) | undefined;
+        onToggleVoiceMessage?: ((state: VoiceFileMessageState, setState: React.Dispatch<React.SetStateAction<VoiceFileMessageState>>) => Promise<void>) | undefined;
     } & {
         regexTextPatterns?: import("../..").RegexTextPattern[] | undefined;
         renderRegexTextChildren?: ((message: import("@sendbird/chat/message").UserMessage) => string) | undefined;
-    }) => JSX.Element;
+    }) => React.JSX.Element;
     File: (props: {
         channel: SendbirdGroupChannel;
         message: import("@sendbird/chat/message").FileMessage;
@@ -98,7 +102,8 @@ declare const GroupChannelMessage: {
         onPressAvatar?: (() => void) | undefined;
         onPressURL?: ((url: string) => void) | undefined;
         onPressMentionedUser?: ((mentionedUser?: SendbirdUser) => void) | undefined;
-    }) => JSX.Element;
+        onToggleVoiceMessage?: ((state: VoiceFileMessageState, setState: React.Dispatch<React.SetStateAction<VoiceFileMessageState>>) => Promise<void>) | undefined;
+    }) => React.JSX.Element;
     ImageFile: (props: {
         channel: SendbirdGroupChannel;
         message: import("@sendbird/chat/message").FileMessage;
@@ -121,7 +126,8 @@ declare const GroupChannelMessage: {
         onPressAvatar?: (() => void) | undefined;
         onPressURL?: ((url: string) => void) | undefined;
         onPressMentionedUser?: ((mentionedUser?: SendbirdUser) => void) | undefined;
-    }) => JSX.Element;
+        onToggleVoiceMessage?: ((state: VoiceFileMessageState, setState: React.Dispatch<React.SetStateAction<VoiceFileMessageState>>) => Promise<void>) | undefined;
+    }) => React.JSX.Element;
     VideoFile: (props: {
         channel: SendbirdGroupChannel;
         message: import("@sendbird/chat/message").FileMessage;
@@ -144,11 +150,39 @@ declare const GroupChannelMessage: {
         onPressAvatar?: (() => void) | undefined;
         onPressURL?: ((url: string) => void) | undefined;
         onPressMentionedUser?: ((mentionedUser?: SendbirdUser) => void) | undefined;
+        onToggleVoiceMessage?: ((state: VoiceFileMessageState, setState: React.Dispatch<React.SetStateAction<VoiceFileMessageState>>) => Promise<void>) | undefined;
     } & {
         fetchThumbnailFromVideoSource: (uri: string) => Promise<{
             path: string;
         } | null>;
-    }) => JSX.Element;
+    }) => React.JSX.Element;
+    VoiceFile: (props: {
+        channel: SendbirdGroupChannel;
+        message: import("@sendbird/chat/message").FileMessage;
+        variant?: "incoming" | "outgoing" | undefined;
+        strings?: {
+            senderName?: string | undefined;
+            sentDate?: string | undefined;
+            edited?: string | undefined;
+            fileName?: string | undefined;
+            unknownTitle?: string | undefined;
+            unknownDescription?: string | undefined;
+        } | undefined;
+        children?: React.ReactNode;
+        sendingStatus?: React.ReactNode;
+        parentMessage?: React.ReactNode;
+        groupedWithPrev: boolean;
+        groupedWithNext: boolean;
+        onPress?: (() => void) | undefined;
+        onLongPress?: (() => void) | undefined;
+        onPressAvatar?: (() => void) | undefined;
+        onPressURL?: ((url: string) => void) | undefined;
+        onPressMentionedUser?: ((mentionedUser?: SendbirdUser) => void) | undefined;
+        onToggleVoiceMessage?: ((state: VoiceFileMessageState, setState: React.Dispatch<React.SetStateAction<VoiceFileMessageState>>) => Promise<void>) | undefined;
+    } & {
+        durationMetaArrayKey?: string | undefined;
+        onUnmount: () => void;
+    }) => React.JSX.Element;
     Admin: (props: {
         channel: SendbirdGroupChannel;
         message: import("@sendbird/chat/message").AdminMessage;
@@ -171,7 +205,8 @@ declare const GroupChannelMessage: {
         onPressAvatar?: (() => void) | undefined;
         onPressURL?: ((url: string) => void) | undefined;
         onPressMentionedUser?: ((mentionedUser?: SendbirdUser) => void) | undefined;
-    }) => JSX.Element;
+        onToggleVoiceMessage?: ((state: VoiceFileMessageState, setState: React.Dispatch<React.SetStateAction<VoiceFileMessageState>>) => Promise<void>) | undefined;
+    }) => React.JSX.Element;
     Unknown: (props: {
         channel: SendbirdGroupChannel;
         message: SendbirdMessage;
@@ -194,6 +229,7 @@ declare const GroupChannelMessage: {
         onPressAvatar?: (() => void) | undefined;
         onPressURL?: ((url: string) => void) | undefined;
         onPressMentionedUser?: ((mentionedUser?: SendbirdUser) => void) | undefined;
-    }) => JSX.Element;
+        onToggleVoiceMessage?: ((state: VoiceFileMessageState, setState: React.Dispatch<React.SetStateAction<VoiceFileMessageState>>) => Promise<void>) | undefined;
+    }) => React.JSX.Element;
 };
 export default GroupChannelMessage;

package/lib/typescript/src/ui/GroupChannelPreview/index.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import Icon from '../../components/Icon';
 type Props = {
-    customCover?: React.ReactElement;
+    customCover?: React.ReactNode;
     coverUrl: string;
     title: string;
     titleCaption: string;
-    titleCaptionLeft?: React.ReactElement;
+    titleCaptionLeft?: React.ReactNode;
     bodyIcon?: keyof typeof Icon.Assets;
     body: string;
     memberCount?: number;
@@ -17,5 +17,5 @@ type Props = {
     mentioned?: boolean;
     mentionTrigger?: string;
 };
-declare const GroupChannelPreview: ({ customCover, coverUrl, memberCount, badgeCount, maxBadgeCount, body, bodyIcon, title, titleCaption, titleCaptionLeft, frozen, notificationOff, broadcast, mentioned, mentionTrigger, }: Props) => JSX.Element;
+declare const GroupChannelPreview: ({ customCover, coverUrl, memberCount, badgeCount, maxBadgeCount, body, bodyIcon, title, titleCaption, titleCaptionLeft, frozen, notificationOff, broadcast, mentioned, mentionTrigger, }: Props) => React.JSX.Element;
 export default GroupChannelPreview;

package/lib/typescript/src/ui/Header/index.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import { TouchableOpacityProps } from 'react-native';
 import { TextProps } from '../../components/Text';
-import type { BaseHeaderProps } from '../../index';
-type HeaderElement = string | React.ReactElement | null;
+import type { BaseHeaderProps, HeaderElement } from '../../index';
 export type HeaderProps = BaseHeaderProps<{
     title?: HeaderElement;
     left?: HeaderElement;
@@ -14,14 +13,11 @@ export type HeaderProps = BaseHeaderProps<{
     clearStatusBarTopInset?: boolean;
     statusBarTopInsetAs?: 'padding' | 'margin';
 }>;
-declare const Header: ((props: HeaderProps) => JSX.Element) & {
-    Button: typeof HeaderButton;
-    Title: typeof HeaderTitle;
-    Subtitle: typeof HeaderSubtitle;
+declare const _default: (({ children, titleAlign, title, left, right, onPressLeft, onPressRight, clearTitleMargin, clearStatusBarTopInset, statusBarTopInsetAs, }: HeaderProps) => React.JSX.Element) & {
+    Button: ({ children, disabled, onPress, color, ...props }: TouchableOpacityProps & {
+        color?: string | undefined;
+    }) => React.JSX.Element;
+    Title: ({ children, style, ...props }: TextProps) => React.JSX.Element;
+    Subtitle: ({ children, style, ...props }: TextProps) => React.JSX.Element;
 };
-declare const HeaderTitle: ({ children, style, ...props }: TextProps) => JSX.Element;
-declare const HeaderSubtitle: ({ children, style, ...props }: TextProps) => JSX.Element;
-declare const HeaderButton: ({ children, disabled, onPress, color, ...props }: TouchableOpacityProps & {
-    color?: string | undefined;
-}) => JSX.Element;
-export default Header;
+export default _default;

package/lib/typescript/src/ui/LoadingSpinner/index.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 type Props = {
     size?: number;
     color?: string;
     style?: StyleProp<ViewStyle>;
 };
-declare const LoadingSpinner: ({ size, color, style }: Props) => JSX.Element;
+declare const LoadingSpinner: ({ size, color, style }: Props) => React.JSX.Element;
 export default LoadingSpinner;

package/lib/typescript/src/ui/MenuBar/index.d.ts

@@ -12,5 +12,5 @@ export type MenuBarProps = {
     actionLabel?: string;
     actionItem?: React.ReactNode;
 };
-declare const MenuBar: ({ variant, disabled, visible, onPress, name, icon, iconColor, iconBackgroundColor, actionLabel, actionItem, }: MenuBarProps) => JSX.Element | null;
+declare const MenuBar: ({ variant, disabled, visible, onPress, name, icon, iconColor, iconBackgroundColor, actionLabel, actionItem, }: MenuBarProps) => React.JSX.Element | null;
 export default MenuBar;

package/lib/typescript/src/ui/OpenChannelMessage/Message.admin.d.ts

@@ -1,4 +1,5 @@
+import React from 'react';
 import type { SendbirdAdminMessage } from '@sendbird/uikit-utils';
 import type { OpenChannelMessageProps } from './index';
-declare const AdminMessage: (props: OpenChannelMessageProps<SendbirdAdminMessage>) => JSX.Element;
+declare const AdminMessage: (props: OpenChannelMessageProps<SendbirdAdminMessage>) => React.JSX.Element;
 export default AdminMessage;

package/lib/typescript/src/ui/OpenChannelMessage/Message.file.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 import { SendbirdFileMessage } from '@sendbird/uikit-utils';
 import type { OpenChannelMessageProps } from './index';
 type Props = {};
-declare const FileMessage: (props: OpenChannelMessageProps<SendbirdFileMessage, Props>) => JSX.Element;
+declare const FileMessage: (props: OpenChannelMessageProps<SendbirdFileMessage, Props>) => React.JSX.Element;
 export default FileMessage;

package/lib/typescript/src/ui/OpenChannelMessage/Message.file.image.d.ts

@@ -1,4 +1,5 @@
+import React from 'react';
 import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
 import type { OpenChannelMessageProps } from './index';
-declare const ImageFileMessage: (props: OpenChannelMessageProps<SendbirdFileMessage>) => JSX.Element;
+declare const ImageFileMessage: (props: OpenChannelMessageProps<SendbirdFileMessage>) => React.JSX.Element;
 export default ImageFileMessage;

package/lib/typescript/src/ui/OpenChannelMessage/Message.file.video.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
 import type { OpenChannelMessageProps } from './index';
 type Props = {
@@ -5,5 +6,5 @@ type Props = {
         path: string;
     } | null>;
 };
-declare const VideoFileMessage: (props: OpenChannelMessageProps<SendbirdFileMessage, Props>) => JSX.Element;
+declare const VideoFileMessage: (props: OpenChannelMessageProps<SendbirdFileMessage, Props>) => React.JSX.Element;
 export default VideoFileMessage;

package/lib/typescript/src/ui/OpenChannelMessage/Message.unknown.d.ts

@@ -1,4 +1,5 @@
+import React from 'react';
 import type { SendbirdMessage } from '@sendbird/uikit-utils';
 import type { OpenChannelMessageProps } from './index';
-declare const UnknownMessage: (props: OpenChannelMessageProps<SendbirdMessage>) => JSX.Element;
+declare const UnknownMessage: (props: OpenChannelMessageProps<SendbirdMessage>) => React.JSX.Element;
 export default UnknownMessage;

package/lib/typescript/src/ui/OpenChannelMessage/Message.user.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 import type { SendbirdUserMessage } from '@sendbird/uikit-utils';
 import type { OpenChannelMessageProps } from './index';
 type Props = {};
-declare const UserMessage: (props: OpenChannelMessageProps<SendbirdUserMessage, Props>) => JSX.Element;
+declare const UserMessage: (props: OpenChannelMessageProps<SendbirdUserMessage, Props>) => React.JSX.Element;
 export default UserMessage;